:root{--bg: #000;--fg: #c8f5c8;--muted: #6f8f6f;--accent: #b5452f;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-monospace,Menlo,monospace}[hidden]{display:none!important}button{font:inherit;min-height:44px;padding:0 1em;border-radius:6px;border:1px solid var(--muted);background:#111;color:var(--fg)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;min-height:52px;padding:0 2em}.view{min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}.muted{color:var(--muted)}.small{font-size:.8rem;margin:0}.start{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.edition{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;margin:0}.radio{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}.dial{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;border:1px solid var(--muted);border-radius:8px;padding:12px}.freq{font-size:2.6rem;font-variant-numeric:tabular-nums}.freq small{font-size:1rem;color:var(--muted)}.meter{grid-column:1 / -1;height:8px;background:#111;border-radius:4px;overflow:hidden}.meter div{height:100%;width:0;background:var(--fg)}.lock{grid-row:1;grid-column:2;font-size:1.4rem;color:#222}.lock.on{color:#f44;text-shadow:0 0 8px #f44}input[type=range]{width:100%;height:44px;accent-color:var(--fg)}.modes{display:flex;flex-direction:column;gap:10px}button.secondary{background:#3a0f0a}.badge{grid-column:1 / -1;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.dial.interference{animation:interfere .12s steps(2) 8}@keyframes interfere{50%{opacity:.55;transform:translate(1px)}}.scale{position:relative;height:64px;border-radius:6px;border:1px solid #5a4a2a;background:linear-gradient(#2b2212,#4a3a1c 50%,#2b2212);box-shadow:inset 0 0 18px #ffbe5a59;overflow:hidden;touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none}.scale:focus-visible{outline:2px solid var(--fg)}.ticks{position:absolute;top:0;right:18px;bottom:0;left:18px}.tick{position:absolute;bottom:0;width:1px;height:8px;background:#ffdca08c}.tick.mid{height:14px}.tick.major{height:22px;background:#ffdca0e6}.tick-label{position:absolute;top:8px;transform:translate(-50%);font-size:11px;color:#ffe1aae6}.needle{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#ff2a1a;box-shadow:0 0 6px #ff3c1ee6;pointer-events:none}.scope{position:relative}.waterfall{width:100%;height:180px;border:1px solid var(--muted);border-radius:8px;background:#000;display:block}.scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:8px;pointer-events:none}.log{display:flex;flex-direction:column;gap:8px;font-size:.9rem;line-height:1.4}.log p{margin:0}.log p.story{font-family:Courier New,Courier,monospace;color:#f2e6c9;font-size:.95rem}.log p.system{font-size:.78rem;color:var(--fg);opacity:.85}.log p.system:before{content:"› ";color:var(--muted)}.answer label{display:block;margin-bottom:6px;color:var(--muted)}.answer .row{display:flex;gap:8px}.answer input{flex:1;min-height:44px;font:inherit;font-size:16px;background:#111;color:var(--fg);border:1px solid var(--muted);border-radius:6px;padding:0 10px}.ending{border:1px solid var(--fg);border-radius:8px;padding:12px}.greeting{font-style:italic;color:#fff}.debug{border:1px dashed #555;padding:8px;font-size:11px;display:flex;flex-wrap:wrap;gap:6px}.debug pre{width:100%;margin:0}.debug button{min-height:32px;font-size:11px}.tilt{position:relative;height:10px;border:1px solid var(--muted);border-radius:5px}.tilt:before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--muted)}.tilt div{position:absolute;top:1px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--fg);left:50%}button.link{background:none;border:none;color:var(--muted);text-decoration:underline;min-height:36px}button.link:disabled{opacity:.5;text-decoration:none}.start h1{letter-spacing:.12em;font-size:1.6rem}.choice{display:flex;gap:10px}.choice button{flex:1}.answer.wrong input{animation:wrong .35s;border-color:#f66}@keyframes wrong{25%{transform:translate(-6px)}75%{transform:translate(6px)}}.pad{display:flex;flex-direction:column;gap:8px}.pad button:disabled{opacity:.35}.pad-knock,.pad-hold{min-height:64px;font-size:1.1rem}.pad.quiet .pad-knock,.pad.quiet .pad-hold,.pad.quiet .pad-fork button{min-height:44px;font-size:.85rem;opacity:.7}.pad-knock:active{background:#2a2a2a;transform:scale(.98)}.pad-hold.holding{background:#132013;border-color:var(--fg)}.pad-fork{display:flex;gap:8px}.pad-fork button{flex:1;min-height:56px}.end{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.end .greeting{max-width:32ch}.radio{gap:10px}.console{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;gap:8px;margin:calc(-1*max(16px,env(safe-area-inset-top))) -16px 0;padding:max(10px,env(safe-area-inset-top)) 16px 10px;background:var(--bg);box-shadow:0 10px 14px -6px #000}.console .dial{padding:6px 12px;grid-template-columns:1fr auto}.console .freq{font-size:2rem}.console .badge{grid-column:2;grid-row:1;align-self:center}.console .waterfall{height:150px}.scale.frozen{cursor:default}.scale.frozen .ticks{opacity:.55}.log p{animation:arrive .6s ease-out}@keyframes arrive{0%{opacity:0;transform:translateY(-6px)}}.notice{border:1px solid #f88;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}.notice p{margin:0;color:#fbb;font-size:.85rem}.resume{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000000d9;padding:16px}.version{position:fixed;right:8px;bottom:max(6px,env(safe-area-inset-bottom));z-index:40;font-size:10px;color:#4d5a4d;pointer-events:none}.end{position:relative;overflow:hidden}.end>:not(.end-video){position:relative;z-index:1}.end-video{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 4s ease;z-index:0;pointer-events:none}.end-video.on{opacity:.55;transition-duration:1.5s}.end h1,.end p{text-shadow:0 1px 8px #000,0 0 2px #000}.end{justify-content:flex-end;padding-bottom:max(64px,env(safe-area-inset-bottom))}.pad-count{margin:0;min-height:1.2em;text-align:center;letter-spacing:.3em;color:var(--fg)}.dial.null .freq{color:#fffbe0;text-shadow:0 0 12px #fffbe0}.dial-mark{position:absolute;top:0;bottom:0;width:18px;margin-left:-9px;background:radial-gradient(ellipse at center,#ffe6a08c,#ffe6a000 70%);pointer-events:none;animation:markglow 3s ease-in-out infinite}@keyframes markglow{50%{opacity:.35}}.scale.compass{border-color:#2b4f78;background:linear-gradient(#0d1b2e,#1c3a5e 50%,#0d1b2e);box-shadow:inset 0 0 18px #78b4ff59}.scale.compass .tick{background:#b4d7ff99}.scale.compass .tick.major{background:#c8e4fff2}.scale.compass .tick-label{color:#c8e4fff2}.scale,.scale .tick,.scale .tick-label{transition:background .8s ease,color .8s ease,border-color .8s ease,box-shadow .8s ease}
