/* 5.41 Studio — tokens, reset, type. Shared by every other stylesheet. */
:root {
  --bg: #000;
  --panel: #0b0b0b;
  --panel-2: #141414;
  --ink: #ecebe7;          /* OSD white, a touch warm */
  --dim: #8d8c87;
  --faint: #4a4a47;
  --line: rgba(236, 235, 231, .22);
  --amber: #f3a712;        /* the one highlight colour: menu selection, focus, power LED */
  --amber-ink: #0b0b0b;
  --ok: #9fd68c;           /* firmware "OK" only */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif; /* used with font-stretch: 62% */
  --step-osd: 11px;        /* HUD / labels */
  --step-small: 13px;
  --step-body: clamp(16px, 15px + .25vw, 18px);
  --step-lead: clamp(20px, 17px + .8vw, 28px);
  --step-display: clamp(56px, 10vw + 8px, 188px);
  --hud-h: 34px;
  --gutter: clamp(16px, 2.4vw, 40px);
  --gap: clamp(10px, 1.2vw, 18px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tx-body: rgba(255, 255, 255, .6);   /* secondary + body text on dark */
  --tx-title: rgba(255, 255, 255, .9);  /* titles on dark */
  --ease-rv: cubic-bezier(.215, .61, .355, 1); /* reveal translate: easeOutCubic */
  color-scheme: dark;
}
@media (max-width: 640px) { :root { --hud-h: 30px; --step-osd: 10px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }

.gr-mono { font-family: var(--font-mono); font-size: var(--step-osd); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.gr-display { font-family: var(--font-display); font-stretch: 62%; font-weight: 800; line-height: .86; letter-spacing: -.01em; text-transform: uppercase; }
.gr-dim { color: var(--dim); }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber); color: var(--amber-ink); }

.gr-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gr-skip-link { position: fixed; left: 8px; top: 8px; z-index: 1000; transform: translateY(-200%); background: var(--amber); color: var(--amber-ink); padding: 8px 12px; }
.gr-skip-link:focus { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}