:root{--charcoal:#2b2f33;--ink:#1d2023;--beige:#e9e1d2;--paper:#f6f2ea;--teal:#5f8f8b;--teal-dark:#3f6d69;--amber:#ffb547;--amber-dim:#c9852a;--focus:#ffd28a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--charcoal);color:var(--paper);margin:0}.stage{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#cfc6b6;outline:none;width:100%;height:100svh;position:relative;overflow:hidden}.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.hud{pointer-events:none;position:absolute;inset:0}.clock-block{top:max(12px, env(safe-area-inset-top));flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.clock{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--amber);text-shadow:0 0 10px #ffb54740;background:#181a1cdb;border:1px solid #ffb54759;border-radius:8px;padding:8px 14px 9px;font:800 clamp(26px,6.2vmin,46px)/1 ui-monospace,SF Mono,Menlo,Consolas,monospace}.clock-row{align-items:stretch;gap:6px;display:flex}.countdown{font-variant-numeric:tabular-nums;color:#fff4e2;text-align:center;background:#964020d1;border-radius:8px;place-items:center;min-width:1.7em;padding:0 8px;font:800 clamp(26px,6.2vmin,46px)/1 ui-monospace,SF Mono,Menlo,monospace;display:grid}.toast{color:#fff;background:#8c3a28e0;border-radius:6px;padding:6px 12px;font:700 clamp(16px,3.6vmin,24px)/1.2 ui-sans-serif,system-ui,sans-serif;position:absolute;top:34%;left:50%;transform:translate(-50%)}.door-meter{left:50%;bottom:calc(max(16px, env(safe-area-inset-bottom)) + 92px);background:#181a1cdb;border-radius:8px;align-items:center;gap:10px;padding:8px 14px;font:700 16px/1 ui-sans-serif,system-ui,sans-serif;display:flex;position:absolute;transform:translate(-50%)}.door-bar{background:#ffffff2e;border-radius:5px;width:clamp(110px,30vmin,220px);height:10px;overflow:hidden}.door-bar>span{background:var(--teal);width:0;height:100%;display:block}.door-pct{text-align:right;font-variant-numeric:tabular-nums;min-width:3.2em}button{min-width:44px;min-height:44px;color:var(--paper);cursor:pointer;touch-action:manipulation;background:#ffffff14;border:1px solid #ffffff40;border-radius:8px;padding:10px 16px;font:600 16px/1.1 ui-sans-serif,system-ui,sans-serif}button:hover{background:#ffffff29}button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}button:disabled{opacity:.55;cursor:progress}button.primary{background:var(--teal);border-color:var(--teal);color:#fff}button.primary:hover{background:var(--teal-dark)}.icon-btn{top:max(12px, env(safe-area-inset-top));background:#181a1cb8;place-items:center;width:48px;height:48px;padding:0;display:grid;position:absolute}.icon-btn svg{fill:currentColor;stroke:currentColor;width:24px;height:24px}.pause-btn{left:max(12px, env(safe-area-inset-left))}.mute-btn{right:max(12px, env(safe-area-inset-right));z-index:3}.mute-btn .off,.mute-btn[data-muted=true] .on{display:none}.mute-btn[data-muted=true] .off{display:block}.skip-btn{right:max(12px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));background:#181a1cb8;position:absolute}.touch{left:0;right:0;bottom:max(12px, env(safe-area-inset-bottom));padding:0 max(12px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-end;gap:10px;display:none;position:absolute}@media (hover:none),(pointer:coarse){.touch:not([hidden]){display:flex}}.stage.touch-seen .touch:not([hidden]){display:flex}.touch-btn{pointer-events:auto;touch-action:none;background:#181a1c9e;border-radius:16px;place-items:center;width:76px;height:76px;display:grid}.touch-btn svg{stroke:currentColor;width:34px;height:34px}.touch-btn.hold{color:#f6f2eabf;background:#3f6d698c;flex:0 180px;width:auto;font-size:17px}.stage.at-door .touch-btn.hold{background:var(--teal);color:#fff;border-color:var(--amber)}.touch-btn:active,.touch-btn.hold[data-held=true]{background:var(--teal-dark)}.menu{z-index:2;background:linear-gradient(#1d202340,#1d2023b8);place-items:center;padding:72px 16px 24px;display:grid;position:absolute;inset:0}.menu[hidden]{display:none}.panel{background:#1d2023eb;border:1px solid #ffffff1f;border-radius:12px;width:min(460px,100%);padding:22px 22px 20px;box-shadow:0 18px 50px #00000059}.panel h1,.panel h2{margin:0 0 8px;font-size:clamp(22px,5vmin,30px);line-height:1.15}.panel p{color:#e7e1d6;margin:0 0 12px;line-height:1.45}.how{color:#e7e1d6;margin:0 0 12px;padding-left:18px;line-height:1.5}.note{color:#c9c1b3;font-size:14px}kbd{background:#ffffff14;border:1px solid #ffffff4d;border-radius:4px;padding:1px 6px;font:600 13px ui-monospace,Menlo,monospace}.actions{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.audio-status{left:50%;bottom:max(12px, env(safe-area-inset-bottom));z-index:3;background:#181a1cdb;border-radius:6px;margin:0;padding:6px 12px;font-size:14px;position:absolute;transform:translate(-50%)}.info{color:#e7e1d6;max-width:760px;margin:0 auto;padding:28px 18px 56px;line-height:1.6}.info h2{color:var(--paper);margin:18px 0 6px;font-size:20px}.info a{color:var(--amber)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}body.capture .icon-btn,body.capture .skip-btn,body.capture .touch,body.capture .menu,body.capture .audio-status{display:none!important}body.capture,body.capture *{cursor:none!important}@media (height<=540px){.menu{place-items:start center;padding:64px 12px 10px;overflow-y:auto}.panel{padding:14px 16px}.panel h1,.panel h2{font-size:21px}.how,.panel p{margin-bottom:8px;font-size:14px}.touch-btn{width:64px;height:64px}.door-meter{bottom:calc(max(12px, env(safe-area-inset-bottom)) + 76px)}}.chips{align-items:center;gap:6px;display:flex}.chip{color:#fff1dc;white-space:nowrap;background:#181a1cc7;border-radius:999px;padding:5px 8px;font:700 13px/1 ui-sans-serif,system-ui,sans-serif}.chip.boost{background:#965c1ee0;padding:6px 8px}.boost-bar{background:#ffffff40;border-radius:3px;width:64px;height:6px;display:block;overflow:hidden}.boost-bar>span{background:var(--amber);width:0;height:100%;display:block}.touch-btn.act{grid-template-rows:1fr auto;place-items:center;width:64px;height:64px;padding:6px 0 5px;font-size:12px;display:grid}.touch-btn.act svg{width:26px;height:26px}.touch-btn.hold{display:none}.stage.at-door .touch-btn.hold{display:grid}.stage.at-door .touch-btn.act,.stage.is-ready .hud,.stage.is-ready .mute-btn{display:none}.menu.ready{padding:max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));background:radial-gradient(75% 60% at 0 100%,#141618d1,#14161873 55%,#0000 80%);flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:14px;display:flex;overflow:visible}.ready-title h1{letter-spacing:-.01em;text-shadow:0 2px 14px #00000073;margin:0;font-size:clamp(26px,4.4vmin + 8px,48px);line-height:1.05}.ready-title p{color:#f1ebe0;text-shadow:0 1px 8px #00000080;margin:6px 0 0;font-size:clamp(16px,1.6vmin + 10px,20px)}.ready-bar{flex-direction:column;gap:10px;width:min(600px,100%);display:flex}.ready .actions{align-items:center;margin:0}button.start{letter-spacing:.02em;min-width:150px;min-height:52px;padding:12px 28px;font-size:19px;font-weight:700}button.quiet{background:#181a1c9e;border-color:#fff3;padding:8px 14px;font-size:15px}.how-card{background:#1d2023f0;border:1px solid #ffffff1f;border-radius:10px;max-height:46svh;margin:0;padding:12px 16px 12px 32px;font-size:15px;overflow-y:auto}.ready .note{text-shadow:0 1px 6px #0009;margin:0}@media (orientation:portrait),(height<=540px){.menu.ready{background:linear-gradient(#1416189e,#0000 24%),linear-gradient(#0000 64%,#14161873 78%,#141618db);justify-content:space-between;align-items:stretch}.ready-bar{width:100%}}@media (orientation:portrait){.menu.ready{padding-bottom:max(14px, env(safe-area-inset-bottom))}.ready .actions{gap:6px}button.start{flex:100%}.ready .actions button.quiet{flex:1 1 0;min-width:0;padding:6px;font-size:14px;line-height:1.15}.ready .actions #motion-toggle{flex-grow:1.6}}@media (orientation:portrait) and (width<=360px){.ready .actions button.quiet{padding:4px;font-size:13px}}@media (height<=540px){.menu.ready{padding-top:max(12px, env(safe-area-inset-top));padding-bottom:max(12px, env(safe-area-inset-bottom))}.ready-title h1{font-size:26px}.ready-title p{margin-top:2px;font-size:16px}.ready-bar{width:min(620px,100%)}.how-card{max-height:52svh}}