:root{--bg: #050505;--cream: #efe9dd;--cream-dim: rgba(239, 233, 221, .55);--cream-faint: rgba(239, 233, 221, .3);--red: #e0261e;--font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--cream);font-family:var(--font);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{height:100%;display:flex;flex-direction:column}.cluster{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:2vw;padding:2vh 3vw 0}.dial{width:min(44vw,82vh);aspect-ratio:1}.dial svg{display:block;width:100%;height:100%}@media(orientation:portrait){.cluster{grid-template-columns:1fr}.dial{width:min(86vw,42vh)}}.dial text{font-family:var(--font)}.dial .tick{stroke:var(--cream);stroke-linecap:round}.dial .tick.major{stroke-width:3}.dial .tick.mid{stroke-width:2;opacity:.8}.dial .tick.minor{stroke-width:1.4;opacity:.5}.dial .tick.red{stroke:var(--red);opacity:1}.dial .redline{fill:none;stroke:var(--red);stroke-width:7}.dial .redline-glow{fill:none;stroke:var(--red);stroke-width:14;opacity:.4}.dial .numeral{font-size:26px;font-weight:400;fill:var(--cream)}.dial .numeral.red{fill:var(--red)}.dial .label{font-size:13px;font-weight:400;letter-spacing:.3em;fill:var(--cream-dim)}.dial .readout{font-weight:300;fill:#fff;font-variant-numeric:tabular-nums}.dial .caption{font-size:12px;letter-spacing:.3em;fill:var(--cream-dim)}.dial .needle-body{fill:var(--red)}.dial .needle-shadow{fill:#000;opacity:.55}.dial .hub{stroke:#111;stroke-width:1.5}.dial .hub-dot{fill:#0a0a0a}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 28px 18px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}.statusbar .controls{display:flex;gap:10px}.chip{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--cream-dim);background:transparent;border:1px solid rgba(239,233,221,.18);border-radius:999px;padding:8px 16px;cursor:pointer}.chip:hover,.chip:focus-visible{color:var(--cream);border-color:#efe9dd73;outline:none}.start{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:24px;background:radial-gradient(ellipse at center,#121212,#050505 70%)}.start[hidden]{display:none}.wordmark{margin:0;font-weight:300;font-size:clamp(44px,9vw,110px);letter-spacing:.42em;text-indent:.42em;line-height:1;color:#fff}.tagline{margin:-20px 0 0;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim)}.start .buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}.btn{font:inherit;font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);background:linear-gradient(180deg,#1c1c1c,#0c0c0c);border:1px solid rgba(230,230,230,.35);border-radius:999px;padding:16px 36px;cursor:pointer;box-shadow:inset 0 1px #ffffff14}.btn.primary{border-color:var(--red);box-shadow:0 0 24px #e0261e40,inset 0 1px #ffffff14}.btn:active{transform:translateY(1px)}.start .note{margin:0;max-width:60ch;font-size:12px;letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.8;color:var(--cream-faint)}.pedals{position:fixed;left:0;right:0;bottom:0;display:none;justify-content:space-between;padding:0 4vw 4vh;pointer-events:none}.pedals[data-visible]{display:flex}.pedals[data-visible]~.statusbar{padding-left:calc(min(14vw,130px) + 5vw);padding-right:calc(min(14vw,130px) + 5vw)}.pedal{pointer-events:auto;width:14vw;max-width:130px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(239,233,221,.25);background:radial-gradient(circle at 50% 35%,#1a1a1a,#080808);color:var(--cream-dim);font:inherit;font-size:12px;letter-spacing:.25em;text-transform:uppercase;touch-action:none;cursor:pointer}.pedal[data-down]{border-color:var(--red);color:var(--cream)}
