:root { color-scheme:light; --paper:#f5f5f0; --ink:#242820; --accent:#d6fa6b; }
* { box-sizing:border-box; }
body { margin:0; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); color:var(--ink); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
header { flex:none; padding:24px 4vw; display:flex; justify-content:space-between; align-items:start; gap:24px; font-size:11px; line-height:1.5; }
header > a { flex-shrink:0; }
.header-description { max-width:64ch; text-align:right; }
#volume-instructions { position:absolute; top:0; left:0; z-index:3; margin:0; padding:4px 6px; max-width:calc(100% - 12px); font-size:10px; line-height:1.6; color:#62675c; background:var(--paper); white-space:nowrap; pointer-events:none; will-change:transform; }
a { color:inherit; }
#stage { position:relative; flex:1; min-height:0; overflow:hidden; background:radial-gradient(#d5d8cc 1px,transparent 1px) 0 0 / 18px 18px; }
.body { position:absolute; top:0; left:0; will-change:transform; touch-action:none; user-select:none; }
.video-body { width:min(58%,620px,95vh); background:#171717; cursor:grab; }
#video { display:block; width:100%; aspect-ratio:16 / 9; object-fit:contain; pointer-events:none; }
.knob { z-index:2; width:100px; height:100px; padding:0; border:0; border-radius:50%; background:var(--accent); color:var(--ink); font:24px ui-monospace,SFMono-Regular,Consolas,monospace; font-variant-numeric:tabular-nums; cursor:grab; }
.held { cursor:grabbing; }
.body:focus-visible,a:focus-visible { outline:2px solid #527d22; outline-offset:5px; }
.floor { position:absolute; bottom:0; left:0; right:0; height:32px; background:var(--ink); }
@media(max-width:600px) { header { font-size:9px; padding:20px 5vw; } .video-body { width:min(62%,95vh); } .knob { width:80px; height:80px; } }

.ball-shard { position:absolute; z-index:4; width:12px; height:12px; background:var(--accent); border-radius:3px; pointer-events:none; }