:root{color-scheme:dark;font-family:Inter,Segoe UI,sans-serif;color:#e8e5db;background:#0c1215;font-size:14px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#35505c40,transparent 50%),radial-gradient(ellipse at 90% 20%,#a6803330,transparent 55%)}main{max-width:1900px;margin:auto;padding:30px clamp(16px,3vw,48px)}a{color:#d8c08d;text-underline-offset:4px}header>a{float:right}.eyebrow{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:#9dcccb;margin-bottom:12px}h1,h2{font-family:Georgia,serif;font-weight:500}h1{font-size:clamp(2rem,4vw,3.4rem);margin:10px 0}h2{margin:0 0 6px;font-size:1.55rem}p{line-height:1.7;color:#b8c5cb}header>p{max-width:850px;font-size:1.1rem}.controls{display:flex;flex-wrap:wrap;gap:20px;align-items:center;padding:20px;border:1px solid #b4a06c60;border-radius:16px;background:#141e23;margin:28px 0 0}.controls label{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.9rem}.controls .wide{flex:1 1 300px}.wide input{flex:1 1 170px}input{accent-color:#d6bc75}output{color:#e6cd8b;min-width:50px}button{background:#252c2c;border:1px solid #af996180;color:#efe5c8;border-radius:8px;padding:9px 13px;cursor:pointer}button:hover{background:#3a4138}.control-note{font-size:.85rem}.panes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0}.panes article{border:1px solid #9ca77b60;border-radius:19px;background:linear-gradient(130deg,#192227,#10171b);padding:18px;overflow:hidden;box-shadow:0 15px 40px #0002}.pane-heading{display:flex;gap:13px;align-items:center;min-height:62px;margin-bottom:12px}.number{color:#c6ae78;font:italic 28px Georgia}small{color:#9aaeb8;line-height:1.6}.stage{position:relative;aspect-ratio:640/420;background:#19222a;border-radius:10px;overflow:hidden}.stage canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;pointer-events:none}.hint{position:absolute;bottom:8px;left:10px;background:#0b131dd0;border-radius:5px;padding:5px 8px;font-size:.7rem;color:#c7d9df;pointer-events:none}#retained{touch-action:none;cursor:grab}#retained:active{cursor:grabbing}.panes p{font-size:.88rem;margin:12px 0}.panes [role=status]{color:#8ed3c7;font-size:.8rem;min-height:1.5em}.pending{border-left:2px solid #d5b873;padding-left:10px}.scope{display:block;margin-top:10px}.explanation{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:28px;background:#101a20b0;border:1px solid #7f999644;border-radius:20px}.explanation li{color:#b8c5cb;line-height:1.7;margin:12px 0}.explanation strong{color:#e3e4d7}table{width:100%;border-collapse:collapse;margin-top:20px}th,td{text-align:left;border-bottom:1px solid #8da0a530;padding:12px 8px;line-height:1.6;font-size:.88rem}td:first-child{color:#d9c88e}footer{padding:24px 0;color:#8d9da8;font-size:.85rem}.error{background:#651f25;padding:15px;border-radius:8px}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #a5e3dc;outline-offset:4px}@media(max-width:1000px){.panes{gap:8px}.panes article{padding:9px;min-width:0}.pane-heading{gap:6px;flex-wrap:wrap}.panes h2{font-size:1.05rem}.panes p,.panes small,.panes a{font-size:.74rem;overflow-wrap:anywhere}.number{font-size:20px}.hint{font-size:.58rem;left:3px;bottom:3px;padding:2px}.explanation{grid-template-columns:1fr}}@media(max-width:500px){main{padding:16px 8px}.panes{gap:5px}.panes article{padding:5px;border-radius:9px}.panes h2{font-size:.84rem}.panes .number{display:none}.pane-heading{min-height:90px}.panes button{padding:4px;font-size:.66rem}.panes p,.panes small,.panes a{font-size:.66rem}.stage{border-radius:4px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* The stage owns the aspect ratio; replaced canvas dimensions cannot size it. */
.stage{width:100%;contain:layout}.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.takeaway{padding:15px 18px;border-left:2px solid #d6bc75;background:#d6bc7508;font-size:.91rem}.takeaway strong{color:#e4d7b3}
.implementation{border:1px solid #7f999644;border-radius:14px;background:#101a2070}.implementation>summary{padding:15px 20px;color:#d8c08d;cursor:pointer;list-style-position:inside}.implementation>summary:hover{color:#f0dcad}.implementation .explanation{border:0;border-top:1px solid #7f999633;border-radius:0;background:transparent}.implementation>summary:focus-visible{outline:2px solid #a5e3dc;outline-offset:4px}
.implementation:not([open])>.explanation{display:none}