/* ═══════════════════════════════════════════════════════════════
   BRACE — the test chamber. Shared foundation.

   The vernacular is an automotive crash-test facility, not a
   terminal: instrument bezels, calibration rails, dimension
   callouts, engineering-report typography.

   TYPE RULE — the whole system in one line:
     mono at DISPLAY size appears exactly twice on this site (the
     landing's hero line, and the lab's numeric readouts). Mono
     everywhere else is micro: chrome, labels, units, numbers.
     Sans carries every human sentence, headings included.

   COLOUR RULE:
     the brand is monochrome (ink on paper). AMBER is the facility's
     own colour — calibration marks, annotation, hazard, projections,
     focus. GREEN and RED are semantic and rationed: they belong to
     the trace, the crater, the freeze and the verdict. Nothing else
     is allowed to borrow them.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── SURFACE — dark: the chamber under work lights ────────── */
  --void:      #05080d;   /* deepest well — the SQL editor        */
  --floor:     #090d13;   /* the bay floor                        */
  --panel:     #0d131b;   /* instrument face                      */
  --panel-deep:#0a0f16;   /* its shaded lower half                */
  --panel-2:   #131c26;   /* an inset control                     */
  --edge:      #1c2734;   /* hairline bezel                       */
  --edge-hot:  #2d3c4e;   /* live bezel                           */
  --well:      var(--void);

  /* ── INK ──────────────────────────────────────────────────── */
  --ink:       #e8eef6;
  --ink-2:     #94a5b9;
  --ink-3:     #7a8aa0;   /* AA on the LIGHTEST surface it lands on (--panel-2, 4.9:1); comfortably AA on --panel/--floor */

  /* ── AMBER — the facility's own colour ────────────────────── */
  --amber:      #e8a33f;
  --amber-dim:  rgba(232,163,63,.42);
  --amber-wash: rgba(232,163,63,.09);
  --on-amber:   #1a1204;

  /* ── SEMANTIC — locked. Health ramp only. ─────────────────── */
  --green:     #2fe08a;
  --green-glow:rgba(47,224,138,.32);
  --red:       #ff3b30;
  --red-glow:  rgba(255,59,48,.30);
  --on-green:  #04140c;
  --on-red:    #180203;
  --btn-hover: #ffffff;

  /* ── ATMOSPHERE ───────────────────────────────────────────── */
  --bg-glow:   #0f1721;
  --rail-bg:   linear-gradient(180deg, rgba(13,19,27,.94), rgba(9,13,19,.72));
  --topo-bg:   rgba(6,9,14,.6);
  --mark-off:  #161c26;
  --sel:       #e8a33f;
  --sel-ink:   #160f04;

  /* the sign-off letterforms: bright ink at the crown, mid through the
     body, fully transparent by 88% so the letters DISSOLVE into the
     floor rather than being cut off. Pure monochrome — the green
     whisper lives in the pulse above it, and nowhere else. */
  --signoff-fill: linear-gradient(180deg,
    rgba(232,238,246,.98)  0%,
    rgba(148,165,185,.62) 46%,
    rgba(148,165,185,0)   88%);

  /* ── CALIBRATION RAIL — the signature ─────────────────────── */
  --tick:      rgba(148,165,185,.45);   /* major graduation, every quarter */
  --tick-2:    rgba(148,165,185,.20);   /* minor graduation, every twelfth */

  /* ── STATE SURFACES ───────────────────────────────────────── */
  --crash-edge:  rgba(255,59,48,.55);
  --crash-shadow:0 0 0 1px rgba(255,59,48,.18), 0 0 60px -12px rgba(255,59,48,.4);
  --safe-edge:   rgba(47,224,138,.5);
  --tint-red:    rgba(255,59,48,.08);
  --tint-green:  rgba(47,224,138,.07);
  --run-bg:      linear-gradient(180deg, rgba(47,224,138,.16), rgba(47,224,138,.06));
  --flatline-bg: rgba(10,5,7,.78);

  /* hazard chevrons — amber over floor, used at exactly one place */
  --hazard:       repeating-linear-gradient(135deg, #e8a33f 0 10px, #090d13 10px 20px);
  --hazard-crash: repeating-linear-gradient(135deg, #ff3b30 0 10px, #090d13 10px 20px);

  /* ── ELEVATION ────────────────────────────────────────────── */
  --e1: 0 1px 2px rgba(0,0,0,.45), 0 10px 26px -18px rgba(0,0,0,.95);
  --e2: 0 2px 4px rgba(0,0,0,.5),  0 22px 50px -26px rgba(0,0,0,1);
  /* the bezel: a 1px lit lip along the top edge of every instrument face.
     Elevation is never shadow alone — hairline border + bezel + shadow. */
  --bezel: inset 0 1px 0 rgba(255,255,255,.06);

  /* interactive surface, with its own states — never filter:brightness */
  --panel-2-hover:   #18222e;
  --panel-2-pressed: #0f1720;

  /* ── canvas tokens — read by app.js / landing.js ─────────── */
  --chart-green-rgb: 47,224,138;
  --chart-red-rgb:   255,59,48;
  --chart-idle-rgb:  132,146,168;   /* resting trace — neutral, never alarms */
  --chart-area-alpha:.20;
  --chart-grid:      rgba(120,160,200,.07);
  --chart-axis:      rgba(148,165,185,.34);
  --chart-axis-text: rgba(148,165,185,.62);
  --chart-mark:      rgba(232,163,63,.6);
  --chart-mark-text: rgba(232,163,63,.9);
  --chart-band-top:  rgba(255,59,48,.24);
  --chart-band-bot:  rgba(255,59,48,.04);
  --panel-fade-rgb:  13,19,27;

  /* ── TYPE ─────────────────────────────────────────────────── */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-micro:   10px;   /* tick labels, footnotes                  */
  --t-label:   11px;   /* chrome labels, panel heads              */
  --t-body:    13px;   /* dense prose                             */
  --t-lede:    15px;   /* lede prose                              */
  --t-h3:      19px;
  /* The size cliff. Reference-grade marketing pages run display at
     57–78px and section heads at 29–40px; the 20–28px "medium
     heading" band is dead air and nothing lives in it. */
  --t-h2:      clamp(26px, 3.3vw, 40px);
  --t-display: clamp(33px, 5.2vw, 68px);

  /* Tracking is a function of size: the bigger the type, the tighter it
     is set. Uppercase mono chrome runs the other way and opens up. */
  --track-eyebrow: .3em;    /* 10px uppercase mono   */
  --track-label:   .18em;   /* 11-12px uppercase     */
  --track-body:    0;       /* 13-15px sans prose    */
  --track-h3:      -.012em; /* 18px                  */
  --track-tight:   -.025em; /* 22-32px headings      */
  --track-display: -.038em; /* 46px+ display         */

  /* ── SPACE — strict 4px rhythm ────────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* --gut is the INSTRUMENT gutter: the inset inside a panel, a rail
     or a scope. It stays small at every width because an instrument
     face does not grow its own margins.
     --pad-x is the PAGE gutter: the distance from content to the
     viewport edge, and it does scale — 16px on a phone, 64px on a
     1920 desktop, the way every reference site runs it.
     --shell is the outer bound of the document's content column. */
  --gut: var(--s4);
  --pad-x: clamp(16px, 3.2vw, 64px);
  --shell: 1560px;
  /* Page chrome (top rail, footer) aligns to the same column as the
     sections: page gutter, plus whatever the shell leaves over. */
  --edge-pad: max(var(--pad-x), calc((100% - var(--shell)) / 2 + var(--pad-x)));

  /* ── SHAPE ────────────────────────────────────────────────── */
  --r-xs:2px; --r-sm:4px; --r:6px; --r-lg:12px; --r-xl:16px; --r-pill:100px;

  /* ── MOTION — two curves, doing two different jobs ───────────
     --ease        every simultaneous state change (hover, colour,
                   border, shadow) so a hover never desynchronises.
     --ease-strong entrances only: things arriving from offscreen or
                   from nothing. Decelerates hard, settles flat. */
  --ease:        cubic-bezier(.25,1,.5,1);
  --ease-strong: cubic-bezier(.32,.72,0,1);
  --t-fast: 150ms;
  --t-mid:  220ms;
  --t-slow: 330ms;
  --t-beat: 560ms;   /* one beat of the crash arc */
}

/* ── LIGHT — clean lab paper, not an inverted chamber ──────────
   The bench is cool paper grey, the instruments are white paper
   lifted off it with a real shadow, and the SQL well is the
   brightest surface on the page because it is the thing you write on. */
:root[data-theme="light"]{
  --void:      #ffffff;
  --floor:     #eceff4;
  --panel:     #ffffff;
  --panel-deep:#fbfcfe;
  --panel-2:   #f1f4f8;
  --edge:      #dee3ec;
  --edge-hot:  #bcc6d4;
  --well:      #ffffff;

  --ink:       #0c1017;
  --ink-2:     #4a5765;
  --ink-3:     #5a6575;   /* darkened for AA: 5.1:1 on --floor, 5.9:1 on --panel */

  --amber:      #8a5a00;
  --amber-dim:  rgba(138,90,0,.4);
  --amber-wash: rgba(138,90,0,.07);
  --on-amber:   #ffffff;

  --green:     #097043;   /* darkened for AA: 5.3:1 on --floor, 6.2:1 on --panel */
  --green-glow:rgba(9,112,67,.22);
  --red:       #cf1a10;
  --red-glow:  rgba(207,26,16,.22);
  --on-green:  #ffffff;
  --on-red:    #ffffff;
  --btn-hover: #000000;

  --bg-glow:   #e3e8f0;
  --rail-bg:   linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,253,255,.8));
  --topo-bg:   rgba(241,244,248,.78);
  --mark-off:  #dee3ec;
  --sel:       #ffdc9a;
  --sel-ink:   #17130a;

  --signoff-fill: linear-gradient(180deg,
    rgba(12,16,23,.96)   0%,
    rgba(74,87,101,.55) 46%,
    rgba(74,87,101,0)   88%);

  --tick:      rgba(74,87,101,.50);
  --tick-2:    rgba(74,87,101,.22);

  --crash-edge:  rgba(207,26,16,.6);
  --crash-shadow:0 0 0 1px rgba(207,26,16,.14), 0 18px 54px -20px rgba(207,26,16,.5);
  --safe-edge:   rgba(11,143,85,.55);
  --tint-red:    rgba(207,26,16,.07);
  --tint-green:  rgba(11,143,85,.08);
  --run-bg:      linear-gradient(180deg, rgba(11,143,85,.13), rgba(11,143,85,.04));
  --flatline-bg: rgba(255,255,255,.92);

  --hazard:       repeating-linear-gradient(135deg, #8a5a00 0 10px, #eceff4 10px 20px);
  --hazard-crash: repeating-linear-gradient(135deg, #cf1a10 0 10px, #ffffff 10px 20px);

  --e1: 0 1px 1px rgba(16,26,40,.05), 0 6px 16px -10px rgba(16,26,40,.20);
  --e2: 0 1px 2px rgba(16,26,40,.06), 0 20px 42px -22px rgba(16,26,40,.30);
  --bezel: inset 0 1px 0 rgba(255,255,255,.9);

  --panel-2-hover:   #e8edf4;
  --panel-2-pressed: #dfe5ee;

  --chart-green-rgb: 11,143,85;
  --chart-red-rgb:   207,26,16;
  --chart-idle-rgb:  110,124,144;   /* resting trace — neutral, never alarms */
  --chart-area-alpha:.18;
  --chart-grid:      rgba(40,70,110,.10);
  --chart-axis:      rgba(74,87,101,.44);
  --chart-axis-text: rgba(90,101,117,.95);   /* AA: 4.6:1 on --floor, 5.3:1 on --panel */
  --chart-mark:      rgba(138,90,0,.55);
  --chart-mark-text: rgba(138,90,0,.95);
  --chart-band-top:  rgba(207,26,16,.20);
  --chart-band-bot:  rgba(207,26,16,.02);
  --panel-fade-rgb:  255,255,255;
}


*,*::before,*::after{ box-sizing:border-box; }

/* The `hidden` attribute must always win over any component's own
   display rule (e.g. .chip{display:flex}) — otherwise a JS-hidden
   element (like #mockChip) silently reappears. */
[hidden]{ display:none !important; }

html,body{ margin:0; padding:0; }
html{
  background:var(--floor); color-scheme:dark;
  scrollbar-color:var(--edge-hot) transparent;
  scrollbar-width:thin;
  /* the top rail is sticky on both pages — in-page and cross-document
     anchors must clear it instead of hiding beneath it (§9.3) */
  scroll-padding-top:84px;
}
@media (max-width:640px){ html{ scroll-padding-top:68px; } }
:root[data-theme="light"]{ color-scheme:light; }

::selection{ background:var(--sel); color:var(--sel-ink); }

body{
  min-height:100dvh;
  background:
    radial-gradient(1100px 640px at 50% -14%, var(--bg-glow) 0%, transparent 62%),
    var(--floor);
  color:var(--ink);
  font-family:var(--mono);
  font-size:var(--t-body);
  line-height:1.45;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:absolute; left:-999px; top:var(--s2); z-index:50;
  background:var(--ink); color:var(--floor); padding:var(--s2) var(--s4); border-radius:var(--r-sm);
  font-size:var(--t-label); letter-spacing:var(--track-label); text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:var(--s3); }

/* ── FOCUS — amber, because green already means something ──── */
:where(a,button,textarea,select,input,[tabindex]):focus-visible{
  outline:2px solid var(--amber); outline-offset:2px; border-radius:var(--r-sm);
}

/* ═══ THE CALIBRATION RAIL ══════════════════════════════════════
   The signature object. A measuring ruler under anything that has
   a real axis: minor ticks at every twelfth, majors at the
   quarters, and mono labels that say what the axis actually is.
   It appears at two scales — the landing teaser and the lab scope
   — and it is the same object both times.
   ─────────────────────────────────────────────────────────────── */
.rail-scale{
  position:relative;
  padding:9px var(--gut) 0;
  display:flex; align-items:flex-start; justify-content:space-between;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3);
  -webkit-user-select:none; user-select:none;
}
.rail-scale::before{
  content:""; position:absolute; left:var(--gut); right:var(--gut); top:0; height:9px;
  background-image:
    linear-gradient(90deg, var(--tick)   0 1px, transparent 1px),
    linear-gradient(90deg, var(--tick-2) 0 1px, transparent 1px);
  background-size:25% 9px, 8.3333% 5px;
  background-repeat:repeat-x;
  background-position:0 0, 0 0;
}
/* the closing tick, which a repeat can't draw */
.rail-scale::after{
  content:""; position:absolute; right:var(--gut); top:0; width:1px; height:9px; background:var(--tick);
}
.rail-scale b{ font-weight:400; }
.rail-scale .rail-scale__now{ color:var(--ink-2); }

/* ── TOP RAIL ─────────────────────────────────────────────── */
.rail{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--edge-pad);
  border-bottom:1px solid var(--edge);
  background:var(--rail-bg);
  backdrop-filter:blur(8px);
}
.rail__brand{ display:flex; align-items:center; gap:var(--s3); flex:none; min-width:0; }
.rail__names{ display:flex; flex-direction:column; min-width:0; }
.rail__names b{
  white-space:nowrap;
  font-size:15px; letter-spacing:.34em; font-weight:700; line-height:1;
}
.rail__names span{
  font-size:var(--t-micro); color:var(--ink-3); letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:var(--s1);
}

.mark{ width:28px; height:28px; flex:none; }
.mark__on{ fill:var(--ink); }
.mark__off{ fill:var(--mark-off); }
.mark__ring{ stroke:var(--ink); }

/* ═══ THE MARK, ALIVE ═══════════════════════════════════════════
   Ported from the founder's SMIL lockup into CSS so it inherits the
   theme tokens instead of hard-coded hex.

   Every rule below animates FROM an offset state, never TO one, so
   `animation:none` under prefers-reduced-motion leaves the mark
   fully assembled and still. That is the whole reduced-motion
   contract for the brand: it freezes, it never disappears.

   Deployment, and the restraint rule that goes with it: at most two
   marks animate per viewport. The rail carries the pulse loop only.
   The full calibration assembly plays on the landing hero, once.
   ─────────────────────────────────────────────────────────────── */

/* the signal line's resting state — what the mark looks like when
   nothing is moving, and what reduced motion is left holding */
.m-ghost{ stroke:var(--ink); opacity:.2; }
.m-ghost-gap{ stroke:var(--red); opacity:.24; }

/* the travelling pulse: draws left to right, then clears */
.m-pulse{
  stroke:var(--ink); opacity:0;
  stroke-dasharray:280; stroke-dashoffset:0;
}
@keyframes m-draw{
  0%   { stroke-dashoffset:280; opacity:1; }
  40%  { stroke-dashoffset:0;   opacity:1; }
  85%  { stroke-dashoffset:0;   opacity:1; }
  100% { stroke-dashoffset:0;   opacity:0; }
}

/* the rail mark: a live instrument, not a static glyph. A rhythmic heartbeat
   across the mark, in time with a gentle breathe of the ring, so the logo reads
   as "the lab is running" — the same idea as the live scope, at 28px. Both
   animate FROM an offset, so reduced-motion still freezes it fully assembled. */
.mark--live .m-pulse{ stroke-opacity:.8; animation:m-draw 2.4s linear infinite; }
.mark--live .mark__ring{ animation:mark-breathe 2.4s ease-in-out infinite; }
@keyframes mark-breathe{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* ── the hero lockup: calibration assembly, once, then the loop ──
   Quadrant pairs counter-rotate into register, the ring draws itself
   closed, the lock flashes, the trace fades up, then the pulse runs. */
.mark--hero .m-q{ transform-box:view-box; transform-origin:120px 120px; }
.mark--hero .m-q--on { animation:m-quad-cw  850ms var(--ease-strong)  50ms both; }
.mark--hero .m-q--off{ animation:m-quad-ccw 850ms var(--ease-strong)  50ms both; }
@keyframes m-quad-cw {
  0%{ opacity:0; transform:rotate(-100deg); } 55%{ opacity:1; } 80%{ transform:rotate(8deg); }
}
@keyframes m-quad-ccw{
  0%{ opacity:0; transform:rotate(100deg); }  55%{ opacity:1; } 80%{ transform:rotate(-8deg); }
}

.mark--hero .mark__ring{ stroke-dasharray:465; stroke-dashoffset:0; animation:m-ring 550ms var(--ease-strong) 600ms both; }
@keyframes m-ring{ from{ stroke-dashoffset:465; } }

.mark--hero .m-lock{ stroke:var(--ink); opacity:0; animation:m-lock 350ms linear 1150ms 1; }
@keyframes m-lock{ 0%{opacity:0} 45%{opacity:.7} 100%{opacity:0} }

.mark--hero .m-ghost,
.mark--hero .m-ghost-gap,
.mark--hero .mark__tick{ animation:m-fade 400ms linear 1200ms both; }
@keyframes m-fade{ from{ opacity:0; } }

.mark--hero .m-pulse{ animation:m-draw 4s linear 1500ms infinite; }

/* the bloom — fired from landing.js at the exact frame the teaser's
   traffic flatlines, so the mark and the pulse agree about the crash */
/* a shockwave, not a red ball: a ring leaves the impact centre and
   fades as it crosses the disc, while the silent gap lights up */
.m-gap{ stroke:var(--red); opacity:0; }
.m-bloom{
  fill:none; stroke:var(--red); stroke-width:6; opacity:0;
  transform-box:view-box; transform-origin:120px 120px;
}
.mark--hero.is-bloom .m-gap{ animation:m-gap 1.2s var(--ease) 1; }
.mark--hero.is-bloom .m-bloom{ animation:m-bloom 1.1s var(--ease-strong) 1; }
@keyframes m-gap{ 0%{opacity:0} 12%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@keyframes m-bloom{
  0%  { opacity:0;  transform:scale(.4); }
  14% { opacity:.9; }
  100%{ opacity:0;  transform:scale(6); }
}

.rail__meta{ display:flex; align-items:center; gap:var(--s2); }
.chip{
  font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--edge);
  padding:5px 10px; border-radius:var(--r-pill); background:var(--panel);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.chip__t{ margin-left:-2px; }
.chip--back{ text-decoration:none; color:var(--ink-2); transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.chip--back:hover{ border-color:var(--ink-2); color:var(--ink); }

/* Tap target ≥44px on the small rail chips, without growing the visible
   chrome: an invisible centred overlay carries the real hit area. */
.chip--theme, .chip--back, .chip--go{ position:relative; }
.chip--theme::before, .chip--back::before, .chip--go::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:max(100%,44px); height:44px;
}
#mockChip{ color:var(--amber); border-color:var(--amber-dim); background:var(--amber-wash); }
.led{
  width:6px; height:6px; border-radius:50%; background:var(--ink-3); flex:none;
  box-shadow:0 0 0 0 transparent;
}
.chip[data-t="sse"] .led{ background:var(--green); box-shadow:0 0 8px var(--green-glow); animation:led 2.6s var(--ease) infinite; }
@keyframes led{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.86); } }
.chip[data-t="poll"] .led{ background:var(--amber); box-shadow:0 0 8px var(--amber-dim); animation:led 1.5s var(--ease) infinite; }
.chip[data-t="down"] .led{ background:var(--red); box-shadow:0 0 8px var(--red-glow); }

/* ── FOOT ─────────────────────────────────────────────────── */
.foot{
  padding:var(--s4) var(--edge-pad) var(--s6); text-align:center;
  font-size:var(--t-micro); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  border-top:1px solid var(--edge);
}

/* ── RESPONSIVE (shared) ─────────────────────────────────── */
@media (max-width:640px){
  :root{ --gut:var(--s3); }
  .rail__names span{ display:none; }
  .rail__names b{ font-size:13px; letter-spacing:.22em; }
  .rail{ gap:var(--s2); padding:var(--s3) var(--gut); }
  .rail__meta{ gap:6px; }
  .chip{ padding:4px 8px; font-size:9px; letter-spacing:.1em; }
  .mark{ width:24px; height:24px; }
}
@media (max-width:560px){
  .chip__t{ display:none; }
}

/* ── REDUCED MOTION — fades stay, movement goes ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition-property:opacity, color, background-color, border-color !important;
    transition-duration:150ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ── PRESS FEEDBACK ───────────────────────────────────────── */
button, .btn, .chip--theme, .chip--go, .chip--back{
  -webkit-tap-highlight-color:transparent;
}
button:active:not(:disabled), .btn:active{ transform:translateY(1px) scale(.995); }
.btn, button{ transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
  border-color var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease), transform 90ms var(--ease); }
:where(a,button,textarea,[tabindex]):focus-visible{ transition:none; }

/* ── THEME TOGGLE ─────────────────────────────────────────── */
.chip--theme{ cursor:pointer; font-family:inherit; color:var(--ink-2); }
.chip--theme:hover{ border-color:var(--ink-2); color:var(--ink); }
.ico{ width:13px; height:13px; flex:none; display:block; }
/* dark theme offers the sun; light theme offers the moon */
.ico__moon{ display:none; }
:root[data-theme="light"] .ico__sun,
:root[data-theme="light"] .ico__rays{ display:none; }
:root[data-theme="light"] .ico__moon{ display:block; }

/* ── PRINT — the report should survive a printer ──────────── */
@media print{
  html,body{ background:#fff; color:#000; }
  body{ display:block; }
  .rail__meta, .skip, .hazard, .rail-scale, .foot{ display:none !important; }
  .panel, .chamber, .teaser, .steps, .topo--big{
    box-shadow:none !important; background:#fff !important; border-color:#bbb !important;
    break-inside:avoid;
  }
  canvas{ break-inside:avoid; }
  .reveal{ opacity:1 !important; transform:none !important; }
}