@font-face { font-family: 'Future'; src: url('../assets/fonts/KenneyFuture.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'FutureNarrow'; src: url('../assets/fonts/KenneyFutureNarrow.ttf') format('truetype'); font-display: block; }

:root {
  --bg: #0d0f12;
  --panel: #1a1e24;
  --ink: #eef1f4;
  --dim: #9aa3ad;
  --hazard: #f5c518;
  --red: #ff3b30;
  --green: #34d399;
  --blue: #3b82f6;
  --orange: #ff8a1f;
  --metal-hi: #5b636d;
  --metal: #3d434b;
  --metal-lo: #262a30;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* seven segment */
.lcd .seg { fill: rgba(255, 59, 48, 0.08); transition: fill 60ms; }
.lcd .seg.on { fill: var(--red); filter: drop-shadow(0 0 4px rgba(255, 59, 48, 0.8)); }
.lcd.green .seg.on { fill: var(--green); filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.8)); }