:root{--ink:#f1ebe3;--ink-soft:#f1ebe38c;--accent:#e8a067;--footer-bottom:14px;--footer-row:42px;--footer-h:calc(var(--footer-bottom) + var(--footer-row) + 10px);--credit-size:clamp(11px, 1.12vw, 22px)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-font-smoothing:antialiased;background:#000;margin:0;font-family:Jost,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}#credits{pointer-events:none;z-index:5;position:fixed;inset:0}.credit{font-size:calc(var(--credit-size) * var(--scale,1));color:#f6f0e8;text-shadow:0 0 12px #00000059;white-space:nowrap;flex-direction:column;gap:.42em;font-weight:300;line-height:1;display:flex;position:absolute;transform:translateY(-50%)}.credit.is-left{align-items:flex-start}.credit.is-center{align-items:center;transform:translate(-50%,-50%)}.credit.is-right{align-items:flex-end;transform:translate(-100%,-50%)}.credit.edge-right .credit-role{align-self:flex-end}.credit.is-dark{color:#3b3531;text-shadow:none}.credit-name{letter-spacing:.34em;margin-right:-.34em}.credit-role{letter-spacing:.36em;opacity:.88;margin-right:-.36em;font-size:.5em;font-weight:400}.credit-sub{margin-top:-.1em}.ch{display:inline-block;position:relative}.ch .ghost{visibility:hidden}.ch .frag{opacity:0;transition:opacity 70ms linear;position:absolute;inset:0}.ch .frag.on{opacity:1}#hud{pointer-events:none;z-index:20;font-family:Jost,system-ui,sans-serif;transition:opacity .9s;position:fixed;inset:0}#hud.is-idle .chapter,#hud.is-idle .timeline,#hud.is-idle .controls,#hud.is-hidden{opacity:0}#hud.is-hidden *{pointer-events:none!important}.chapter{letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft);font-size:11px;font-weight:400;transition:opacity .9s;position:absolute;top:clamp(14px,2.6vw,30px);left:clamp(16px,3.2vw,44px)}.chapter b{color:var(--ink);margin-right:.9em;font-weight:400}.timeline{left:50%;bottom:calc(var(--footer-bottom) + 18px);pointer-events:auto;align-items:center;gap:3px;width:min(46vw,560px);height:22px;transition:opacity .9s;display:flex;position:absolute;transform:translate(-50%)}.timeline button{flex:var(--w,1) 1 0;cursor:pointer;background:0 0;border:0;height:22px;padding:0;position:relative}.timeline button:before{content:"";background:#ffffff2e;height:2px;margin-top:-1px;transition:background .3s,height .2s;position:absolute;top:50%;left:0;right:0}.timeline button:hover:before{background:#fff6;height:4px;margin-top:-2px}.timeline button span{transform-origin:0;width:100%;height:2px;transform:scaleX(var(--p,0));background:var(--accent);margin-top:-1px;position:absolute;top:50%;left:0}.timeline button:hover span{height:4px;margin-top:-2px}.timeline button .tip{letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;color:var(--ink);opacity:0;pointer-events:none;font-size:10px;transition:opacity .2s;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.timeline button:hover .tip,.timeline button:focus-visible .tip{opacity:1}.controls{right:clamp(16px,3.2vw,44px);bottom:calc(var(--footer-bottom) + 6px);pointer-events:auto;gap:8px;transition:opacity .9s;display:flex;position:absolute}.ctl{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:34px;height:34px;color:var(--ink);cursor:pointer;background:#0c0a0e6b;border:1px solid #ffffff24;border-radius:50%;place-items:center;padding:0;font:400 13px/1 Jost,system-ui,sans-serif;transition:border-color .3s,color .3s;display:grid}.ctl:hover,.ctl:focus-visible{color:#fff;border-color:#e8a067b3;outline:none}.ctl svg path{fill:none;stroke:currentColor;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round}.ctl .icon-play path{fill:currentColor;stroke:none}.ctl .icon-play,.ctl[aria-pressed=true] .icon-pause{display:none}.ctl[aria-pressed=true] .icon-play{display:block}.sound{display:flex;position:relative}.sound .volume{box-sizing:border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0c0a0e6b;border:1px solid #ffffff24;border-radius:17px;align-items:center;gap:4px;height:34px;padding:0 13px 0 0;transition:border-color .3s;display:flex}.sound:hover .volume,.sound:focus-within .volume{border-color:#e8a067b3}.sound .mute{width:32px;height:32px;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;display:grid}.sound .mute:focus-visible{outline-offset:-2px;outline:2px solid #e8a06780}.sound .mute svg path{fill:none;stroke:currentColor;stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round}.sound .mute .icon-off,.sound .mute.is-muted .icon-on{display:none}.sound .mute.is-muted .icon-off{display:block}.sound .levels{opacity:0;visibility:hidden;padding-bottom:8px;transition:opacity .2s,transform .2s,visibility 0s linear .2s;position:absolute;bottom:100%;right:0;transform:translateY(4px)}.sound:hover .levels,.sound:focus-within .levels{opacity:1;visibility:visible;transition:opacity .2s,transform .2s,visibility;transform:none}.sound .levels-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c0a0e8c;border:1px solid #ffffff24;border-radius:14px;gap:10px;padding:11px 13px 11px 16px;display:grid}.sound .levels label{letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);justify-content:space-between;align-items:center;gap:16px;font-size:10px;display:flex}.sound .vol{--fill:100%;appearance:none;cursor:pointer;background:0 0;width:72px;height:14px;margin:0;display:block}.sound .vol::-webkit-slider-runnable-track{background:linear-gradient(90deg, #e8a067 var(--fill), #f1ebe333 var(--fill));border-radius:2px;height:3px}.sound .vol::-moz-range-track{background:linear-gradient(90deg, #e8a067 var(--fill), #f1ebe333 var(--fill));border-radius:2px;height:3px}.sound .vol::-webkit-slider-thumb{appearance:none;background:var(--ink);border:1px solid #0c0a0e66;border-radius:50%;width:11px;height:11px;margin-top:-4px;transition:transform .15s}.sound .vol::-moz-range-thumb{background:var(--ink);border:1px solid #0c0a0e66;border-radius:50%;width:11px;height:11px}.sound .vol:hover::-webkit-slider-thumb{transform:scale(1.2)}.sound .vol:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid #e8a06780}#hud.is-idle .controls:hover,#hud.is-idle .controls:focus-within{opacity:1}.sound-hint{letter-spacing:.42em;text-transform:uppercase;color:#ffffffb8;text-shadow:0 0 14px #0009;white-space:nowrap;opacity:0;pointer-events:none;font-size:12px;font-weight:300;transition:opacity 1.4s;position:absolute;bottom:26%;left:50%;transform:translate(-50%)}.sound-hint.is-visible{opacity:1;animation:3.2s ease-in-out infinite hint-breathe}@keyframes hint-breathe{0%,to{opacity:.55}50%{opacity:1}}.keys{right:clamp(16px,3.2vw,44px);bottom:calc(var(--footer-bottom) + 52px);letter-spacing:.14em;text-align:right;max-width:min(560px,80vw);color:var(--ink-soft);font-size:11px;line-height:1.8;transition:opacity .6s;position:absolute}.keys.is-faded{opacity:0}#hud.on-paper{--ink:#2f2925;--ink-soft:#2f29258c}#hud.on-paper .ctl,#hud.on-paper .sound .volume,#hud.on-paper .sound .levels-box{background:#ffffff80;border-color:#00000024}#hud.on-paper .sound .vol::-webkit-slider-runnable-track{background:linear-gradient(90deg, #b8743f var(--fill), #0000002e var(--fill))}#hud.on-paper .sound .vol::-moz-range-track{background:linear-gradient(90deg, #b8743f var(--fill), #0000002e var(--fill))}#hud.on-paper .timeline button:before{background:#00000029}@media (max-width:720px){.timeline{width:calc(100vw - 32px);bottom:calc(var(--footer-h) + 6px)}.controls{bottom:calc(var(--footer-h) + 36px)}.keys{display:none}}#loader{z-index:30;background:#000;place-content:center;justify-items:center;gap:16px;transition:opacity 1.4s;display:grid;position:fixed;inset:0}#loader.is-done{opacity:0;pointer-events:none}.loader-title{letter-spacing:.6em;color:var(--accent);align-items:center;margin-right:-.6em;font-size:clamp(18px,2.4vw,30px);font-weight:300;display:flex}.loader-sub{letter-spacing:.42em;text-transform:uppercase;color:var(--ink-soft);margin-top:-4px;font-size:10px;font-weight:400}.loader-bar{background:#ffffff1f;width:160px;height:1px;margin-top:18px;overflow:hidden}.loader-bar span{background:var(--accent);transform-origin:0;height:100%;transition:transform .4s;display:block;transform:scaleX(0)}#loader p{letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);text-align:center;max-width:80vw;margin:0;font-size:10px}.site-footer{bottom:var(--footer-bottom);z-index:1000;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;pointer-events:none;opacity:1;background:#0e0b106b;border:1px solid #ffffff1a;border-radius:12px;justify-content:flex-start;align-items:center;gap:20px;padding:4px 16px;font-family:Space Mono,Arial,Helvetica,sans-serif;font-size:16px;line-height:32px;transition:opacity 1.2s ease-out,color .8s,background .8s;display:flex;position:fixed;left:clamp(16px,3.2vw,44px)}.site-footer.is-hidden{opacity:0}.site-footer p,.site-footer span{font-size:inherit;vertical-align:middle;margin:0;line-height:32px;display:inline-block}.site-footer a{min-width:32px;color:inherit;vertical-align:middle;pointer-events:auto;line-height:32px;text-decoration:none;transition:color 1s ease-out;display:inline-block}.site-footer.is-hidden a{pointer-events:none}.site-footer a:hover{color:#f5d66d}.site-footer a:focus-visible{color:#f5d66d;outline-offset:3px;outline:2px solid}.site-footer svg{width:16px;height:16px}.site-footer svg path,.site-footer svg polygon{fill:currentColor;transition:fill 1s ease-out}.site-footer.on-paper{color:#2f2925;background:#ffffff8c;border-color:#00000014}.site-footer.on-paper a:hover{color:#b0662c}@media (max-width:640px){.site-footer{gap:8px;padding:2px 10px;font-size:11px}}@media (prefers-reduced-motion:reduce){.sound-hint.is-visible{animation:none}.site-footer,.site-footer a,.site-footer svg path,.site-footer svg polygon,.ch .frag{transition:none}}.stats{z-index:1001;color:#ffffffdb;pointer-events:none;white-space:pre;background:#0000008c;border-radius:4px;margin:0;padding:6px 9px;font:11px/1.45 Space Mono,ui-monospace,monospace;position:fixed;top:10px;left:10px}
