*{box-sizing:border-box}:root{font-family:Arial,sans-serif;color:#20221f;background:#f7f7f2;font-synthesis:none}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0;background:transparent}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #20221f;outline-offset:5px}main{max-width:1500px;min-height:100svh;margin:auto;padding:0 48px 22px;display:flex;flex-direction:column}header{height:88px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.wordmark{color:inherit;text-decoration:none;font-size:17px;letter-spacing:-.6px;font-weight:600}h1{font-size:17px;font-weight:400;margin:0}.stage{position:relative;flex:1;height:calc(100svh - 240px);min-height:420px}.stage canvas{touch-action:none}.stage.orbiting canvas{cursor:grab!important}.stage.orbiting canvas:active{cursor:grabbing!important}.stage-status{position:absolute;top:12px;left:0;display:flex;align-items:center;gap:7px;font-size:11px;color:#81837c;pointer-events:none}.status-dot{width:4px;height:4px;border-radius:50%;background:currentColor}.status-dot.active{background:#333}.swatches{position:absolute;right:0;bottom:30px;display:flex;gap:14px}.swatches button{width:12px;height:12px;padding:0;border-radius:50%;background:var(--swatch)}.swatches button[aria-pressed=true]{outline:1px solid #555;outline-offset:4px}.controls{display:flex;align-items:center;justify-content:center;gap:40px;flex-shrink:0;padding:20px 0 14px}.tokens{display:flex;align-items:center;gap:6px}.tokens button:not(.eject){display:flex;align-items:center;gap:5px;padding:9px 12px;border-radius:7px;font-size:12px;color:#777971}.tokens button[aria-pressed=true]{background:#eaeae3;color:#20221f}.tokens button:hover,.power:hover{color:#20221f;background:#eeeee7}.tokens svg{width:24px;height:24px}.eject{font-size:22px;padding:8px;color:#777971}.transport{display:flex;align-items:center;gap:20px}.play{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;width:85px;padding:13px 12px;border-radius:7px;background:#252722;color:#f7f7f2}.play span{font-size:10px}.power{font-size:24px;padding:5px;border-radius:5px}.power[aria-pressed=false]{color:#aaa}.volume{display:flex;align-items:center;gap:10px}.volume svg{width:17px;height:17px;color:#777971}input[type=range]{width:80px;height:3px;accent-color:#353730;cursor:pointer}.hint{text-align:center;color:#93958e;font-size:11px;margin:8px 0 0;line-height:20px;min-height:20px}.hint.active{color:#333}kbd{font:inherit;padding:2px 4px;border:1px solid #dedfd7;border-radius:3px}.error{font-size:12px;text-align:center;margin-top:12px}.error button{text-decoration:underline}.fallback{padding:40px;text-align:center;font-size:14px}@media(min-width:1600px){.stage{max-height:900px}}@media(max-width:760px){main{padding:0 22px 20px}header{height:70px}.wordmark,h1{font-size:15px}.stage{margin:0 -22px;min-height:350px;height:calc(100svh - 278px)}.stage-status{left:22px;top:6px}.swatches{right:26px;bottom:8px}.controls{flex-direction:column;gap:14px;padding:20px 0 8px}.tokens{gap:2px}.tokens button:not(.eject){padding:8px 9px}.transport{gap:25px}.hint{font-size:10px;margin-top:12px}}@media(max-width:360px){.tokens button:not(.eject){padding:7px}.tokens svg{width:21px}}.power svg{width:21px;height:21px;display:block}.toy-panel{display:contents}.toy-tabs{display:flex;align-items:center;gap:22px}.toy-tabs button{padding:8px 0;color:#96988f;font-size:14px}.toy-tabs button[aria-selected=true]{color:#20221f}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.stack-stage{height:calc(100svh - 195px);min-height:430px}.stack-controls{display:flex;justify-content:center;padding:10px 0}.stack-controls button{display:flex;align-items:center;gap:9px;font-size:12px;padding:9px 12px;color:#686b61}.stack-controls svg{width:18px;height:18px}.stack-hint{transition:opacity 1.5s ease}.stack-hint.seen{opacity:0}@media(max-width:760px){.toy-tabs{gap:16px}.toy-tabs button{font-size:13px}.stack-stage{height:calc(100svh - 178px);min-height:380px}}