:root{--paper:#0b0a09;--ink:#f3efe8;--dim:rgba(243,239,232,.6);--filament:#ffb865;--ease:cubic-bezier(.2,.8,.2,1);--s1:8px;--s2:16px;--s3:28px;--s4:40px;--s5:64px}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--paper);-webkit-font-smoothing:antialiased;scroll-behavior:auto}body{background:var(--paper);color:var(--ink);font:400 17px/1.45 system-ui,-apple-system,Helvetica Neue,sans-serif;overscroll-behavior-y:none;touch-action:manipulation}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--filament);outline-offset:4px}kbd{font:inherit;font-size:14px;border:1px solid rgba(243,239,232,.3);border-radius:4px;padding:0 5px}.shadow{text-shadow:0 1px 14px rgba(0,0,0,.8)}.skip{position:fixed;top:12px;left:12px;padding:12px 16px;background:var(--paper);color:var(--ink);z-index:9;border:1px solid rgba(243,239,232,.3);border-radius:4px;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden;text-decoration:none}.skip:focus-visible{clip:auto;width:auto;height:auto}#main:focus{outline:none}#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;z-index:0;opacity:1;transition:opacity .3s var(--ease)}#gl.drag{cursor:grabbing}#gl.gone{opacity:0}.name{position:fixed;left:var(--s3);top:var(--s3);z-index:2;pointer-events:none;max-width:34ch}.name h1{font-size:17px;font-weight:400;letter-spacing:0;text-shadow:0 1px 14px rgba(0,0,0,.8)}.name .what{font-size:14px;color:var(--dim);margin-top:2px;text-shadow:0 1px 14px rgba(0,0,0,.8)}#sound{position:fixed;right:var(--s3);top:calc(var(--s3) - 12px);z-index:4;min-width:44px;min-height:44px;padding:0 var(--s1);font-size:17px;text-shadow:0 1px 14px rgba(0,0,0,.8);transition:color .3s var(--ease)}#sound:after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:var(--s1);background:currentColor;opacity:.3;vertical-align:middle;transition:opacity .3s var(--ease),background-color .3s var(--ease)}#sound[aria-pressed=true]:after{background:var(--filament);opacity:1}#track{height:220vh}.foot{position:fixed;left:var(--s3);bottom:var(--s3);z-index:2;max-width:40ch;pointer-events:none}.hint{font-size:14px;color:var(--dim);text-shadow:0 1px 14px rgba(0,0,0,.8);transition:opacity .3s var(--ease)}.hint.gone{opacity:0}#keys{list-style:none;display:grid;margin-bottom:var(--s2)}.key{grid-area:1/1;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease)}.key.on{opacity:1;transform:none}.key .beat{font-size:14px;color:var(--dim);text-shadow:0 1px 12px rgba(0,0,0,.8)}.key h2{font-size:17px;font-weight:400;text-shadow:0 1px 14px rgba(0,0,0,.8)}.key p:last-child{margin-top:var(--s1);font-size:14px;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.85)}.hint .coarse{display:none}@media(pointer:coarse){.hint .fine{display:none}.hint .coarse{display:inline}}#lights{position:fixed;right:var(--s3);bottom:calc(var(--s3) - 12px);z-index:4;display:flex;gap:var(--s1)}#lights button{min-height:44px;min-width:44px;padding:0 var(--s1);font-size:17px;color:var(--dim);text-shadow:0 1px 14px rgba(0,0,0,.8);transition:color .3s var(--ease)}#lights button:hover{color:var(--ink)}#lights button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}#lights #reset{color:var(--dim);margin-left:var(--s2)}#lights #reset:hover{color:var(--ink)}@media(prefers-reduced-motion:reduce){.key,.hint,#gl,#sound,#lights button{transition:none}}@media(max-width:560px){#lights{left:var(--s3);right:var(--s3);bottom:var(--s2);justify-content:flex-start;flex-wrap:wrap;gap:0 var(--s1)}#lights button{padding:0 6px;font-size:14px;min-width:0}.foot{bottom:calc(var(--s2) + 56px);right:var(--s3);max-width:none}}#look{display:none}html[data-tier="3"] #look{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 130% 110% at 50% 60%,transparent 65%,rgba(0,0,0,.3) 100%)}html[data-tier="3"] #look:after{content:"";position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}html[data-tier="1"] .name{position:static;max-width:none;padding:var(--s3) var(--s3) 0;pointer-events:auto}html[data-tier="1"] .name h1,html[data-tier="1"] .name p,html[data-tier="1"] .key *{text-shadow:none}html[data-tier="1"] #still{display:block;width:100%;height:auto;max-width:1440px;margin:var(--s3) auto 0}html[data-tier="1"] #track{display:none}html[data-tier="1"] .foot{position:static;max-width:none;padding:var(--s4) var(--s3) var(--s5);pointer-events:auto}html[data-tier="1"] .hint{display:none}html[data-tier="1"] #keys{gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}html[data-tier="1"] .key{grid-area:auto;opacity:1;transform:none;transition:none;max-width:44ch}html[data-tier="1"] #lights{display:none}html[data-tier="1"] #sound{position:static;margin:0 var(--s3) var(--s3);text-shadow:none}html[data-tier="1"] #look{display:none}html.shoot :is(.name,.foot,#lights,#sound,#look,.skip){display:none!important}