/* Kodela — The Board. Plex light palette, machined modules, amber signal. */

@font-face { font-family: "Plex Cond"; src: url(../fonts/plex-cond-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url(../fonts/plex-cond-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Cond"; src: url(../fonts/plex-cond-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(../fonts/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(../fonts/plex-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(../fonts/plex-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(../fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Serif"; src: url(../fonts/plex-serif-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --ground: #f3f4f6;
  --ground-2: #e9ebef;
  --panel: #ffffff;
  --elevated: #f1f2f5;
  --line: #d9dce3;
  --line-strong: #c3c8d1;
  --ink: #14161a;
  --ink-dim: #4f5560;
  --ink-dimmer: #5d636e;
  --amber: #b86a00;
  --amber-text: #8f5200;
  --amber-led: #f08a00;
  --amber-soft: rgba(240, 138, 0, .16);
  --lcd: #1c1f24;
  --lcd-ink: #f0a340;
  --ink-mark: #14161a;
  --focus: #2458d6;

  --f-cond: "Plex Cond", "Arial Narrow", system-ui, sans-serif;
  --f-sans: "Plex Sans", "Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif: "Plex Serif", Georgia, serif;

  --shadow-mod: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,22,26,.06), 0 22px 44px -22px rgba(20,22,26,.28);
  --shadow-lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 10px rgba(20,22,26,.08), 0 30px 56px -24px rgba(20,22,26,.32);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1rem/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--amber-soft); color: var(--ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--ground); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #a9afba; }
img, svg { display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
code { font: 500 .88em/1.4 var(--f-mono); background: var(--elevated); border: 1px solid var(--line); border-radius: 5px; padding: .05em .35em; font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }

.mark { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- loader ---------- */
.loader { display: none; }
.js .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 90;
  background: var(--ground); color: var(--ink);
}
.loader__inner { display: grid; justify-items: center; gap: 14px; }
.mark--loader { width: 28px; height: 28px; color: var(--ink-dim); }
.loader__bar { display: flex; gap: 3px; }
.loader__bar i { width: 7px; height: 14px; border-radius: 2px; background: var(--line); transition: background .15s; }
.loader__bar i.on { background: var(--ink); }
.loader__label { font: 500 .75rem/1 var(--f-mono); color: var(--ink-dim); letter-spacing: .04em; text-align: center; }
.loader__wipe { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.loader__wipe path { fill: none; stroke: var(--ink); stroke-width: 22; stroke-linejoin: miter; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .loader { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.77, 0, .18, 1); }
.loader.is-wiping .loader__wipe path { stroke-dashoffset: 0; transition: stroke-dashoffset .5s cubic-bezier(.65, 0, .35, 1); }
.loader.is-leaving { clip-path: inset(0 0 100% 0); }
.js .loader.is-done, .js.kd-seen .loader { display: none; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: 10px;
  font: 600 .95rem/1 var(--f-sans); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 14px -6px rgba(20,22,26,.5), 0 2px 0 #000;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s var(--ease); }
.btn:hover { background: #262a31; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 2px 4px -2px rgba(20,22,26,.5), 0 0 0 #000; }
.btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); box-shadow: 0 1px 0 #fff inset, 0 2px 0 var(--line-strong); }
.btn--ghost:hover { background: var(--elevated); }
.btn--ghost:active { box-shadow: 0 1px 0 #fff inset, 0 0 0 var(--line-strong); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: .88rem; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; gap: clamp(12px, 3vw, 36px);
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; font: 600 1.05rem/1 var(--f-sans); text-decoration: none; min-height: 44px; }
.nav__links { display: flex; gap: clamp(12px, 2vw, 28px); margin-left: auto; }
.nav__links a { font: 500 .85rem/1 var(--f-sans); color: var(--ink-dim); text-decoration: none; padding: 12px 2px; }
.nav__links a:hover { color: var(--ink); }
.nav__meta { font: 400 .72rem/1.35 var(--f-sans); color: var(--ink-dimmer); text-align: right; }
@media (max-width: 860px) { .nav__links, .nav__meta { display: none; } .nav .btn--small { margin-left: auto; } }

/* ---------- hero board ---------- */
.hero { padding: 14px var(--gutter) 40px; }
.board {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--nav-h) - 28px);
  border-radius: 22px; background: var(--ground);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -40px rgba(20,22,26,.35);
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3.4vw, 56px) clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  overflow: hidden;
}
.board__lines {
  position: absolute; inset: 0; z-index: -1; opacity: .7;
  background: url(/assets/art/board-lines.svg) center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, transparent 30%, #000 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, transparent 30%, #000 75%);
}
.screw { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c9ced6 70%); border: 1px solid var(--line-strong); }
.screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 1px; background: #8e95a1; transform: rotate(-30deg); }
.screw--tl { left: 16px; top: 16px; } .screw--tr { right: 16px; top: 16px; }
.screw--bl { left: 16px; bottom: 16px; } .screw--br { right: 16px; bottom: 16px; }

.traces { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.traces .t-base { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.traces .t-base2 { fill: none; stroke: var(--line); stroke-width: 1.5; }
.traces .t-live { fill: none; stroke: var(--amber-led); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 10 14; animation: flow 1.1s linear infinite; opacity: 0; transition: opacity .35s; }
.traces .t-live.on { opacity: 1; }
.traces .pad { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.5; }
@keyframes flow { to { stroke-dashoffset: -24; } }

.board__grid {
  position: relative; z-index: 1; width: 100%; max-width: 1320px;
  display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 2.25fr) minmax(170px, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.rack { display: grid; gap: 18px; }

.cart {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px;
  align-items: center; text-align: left; cursor: pointer;
  min-height: 76px; padding: 14px 16px 14px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-mod);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.cart:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.cart:active { transform: translateY(1px) scale(.99); }
.cart__slot { grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, 6px); gap: 3px; padding: 8px; border-radius: 6px; background: var(--elevated); border: 1px solid var(--line); }
.cart__slot i { height: 16px; border-radius: 2px; background: var(--line-strong); transition: background .3s; }
.cart.is-live .cart__slot i { background: var(--ink); }
.cart__led { position: absolute; right: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .3s, box-shadow .3s; }
.cart.is-live .cart__led { background: var(--amber-led); box-shadow: 0 1px 2px rgba(143,82,0,.6), inset 0 -1px 0 rgba(0,0,0,.18); }
.cart.is-live { border-color: var(--line-strong); }
.cart__label { font: 600 .9rem/1.1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.cart__sub { font: 400 .74rem/1.3 var(--f-sans); color: var(--ink-dimmer); }

.slot {
  position: relative; padding: 14px 16px 14px 16px; min-height: 76px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-mod);
  display: grid; align-content: center; gap: 6px;
}
.slot::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.slot__led { position: absolute; right: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: background .3s, box-shadow .3s; }
.slot.is-live .slot__led { background: var(--amber-led); box-shadow: 0 1px 2px rgba(143,82,0,.6), inset 0 -1px 0 rgba(0,0,0,.18); }
.slot__label { font: 600 .9rem/1.1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.slot__read { font: 500 .74rem/1.2 var(--f-mono); color: var(--lcd-ink); background: var(--lcd); border-radius: 5px; padding: 6px 8px; box-shadow: 0 1px 0 rgba(0,0,0,.5) inset; }
.slot__read span { color: #8b909a; margin-right: 6px; }

.core {
  position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lift); padding: clamp(22px, 3vw, 36px);
  display: grid; gap: 16px;
}
.core::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--elevated); border-radius: 12px; pointer-events: none; }
.core__head { display: flex; justify-content: space-between; align-items: center; }
.core__id { font: 700 .7rem/1 var(--f-mono); color: var(--ink-mark); letter-spacing: .1em; }
.core__dial { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: radial-gradient(circle at 40% 35%, #fff 0 40%, var(--elevated) 70%); position: relative; }
.core__dial::after { content: ""; position: absolute; left: 50%; top: 5px; width: 2px; height: 9px; margin-left: -1px; background: var(--ink-dim); border-radius: 1px; }
.core__name { font: 600 .8rem/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.core__title { font: 700 clamp(1.7rem, 3.1vw, 2.9rem)/1.02 var(--f-cond); letter-spacing: -.012em; text-transform: uppercase; max-width: 20ch; }
.core__sub { font: 400 .92rem/1.55 var(--f-mono); color: var(--ink-dim); max-width: 56ch; }
.lcd { display: grid; grid-template-columns: 44px 1fr 44px; align-items: stretch; background: var(--elevated); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.lcd__btn { display: grid; place-items: center; min-height: 44px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; color: var(--ink-dim); -webkit-tap-highlight-color: transparent; }
.lcd__btn:hover { background: var(--panel); color: var(--ink); }
.lcd__btn:active { transform: scale(.94); }
.lcd__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lcd__screen { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 12px; border-radius: 6px; background: var(--lcd); color: var(--lcd-ink); font: 500 .8rem/1.3 var(--f-mono); letter-spacing: .04em; box-shadow: 0 2px 0 rgba(0,0,0,.6) inset; text-transform: uppercase; overflow: hidden; }
.core__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.core__ports { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); display: flex; gap: 6px; }
.core__ports i { width: 18px; height: 6px; border-radius: 0 0 3px 3px; background: var(--line-strong); }

.printer { position: relative; z-index: 1; width: min(340px, 86vw); display: grid; justify-items: center; }
.printer__mouth { width: 100%; height: 12px; border-radius: 6px; background: linear-gradient(#2a2e35, #14161a); box-shadow: 0 2px 0 #fff, 0 -1px 0 var(--line-strong); position: relative; z-index: 2; }
.receipt {
  width: 92%; margin-top: -4px; padding: 18px 18px 26px;
  background: #fbfbfa; color: var(--ink);
  box-shadow: 0 16px 28px -18px rgba(20,22,26,.4);
  --tear: 10px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tear) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tear) 100%;
  transform-origin: top center;
}
.receipt__top { display: flex; justify-content: space-between; font: 400 .75rem/1 var(--f-mono); color: var(--ink-dimmer); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 10px; border-bottom: 1px dashed var(--line-strong); }
.receipt__title { font: 400 1.7rem/1.1 var(--f-serif); letter-spacing: -.01em; margin: 12px 0 10px; }
.receipt__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 .8rem/1.3 var(--f-mono); }
.receipt__rows li { display: flex; justify-content: space-between; gap: 12px; }
.receipt__rows code { background: none; border: 0; padding: 0; color: var(--ink-dim); }
.receipt__rows .u, .ledger .u { color: var(--amber-text); font-weight: 600; }
.receipt__rows--plain li { display: list-item; list-style: none; padding-left: 16px; position: relative; }
.receipt__rows--plain li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; border-top: 1px solid var(--ink-dim); }
.receipt__foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font: 400 .8rem/1.45 var(--f-sans); color: var(--ink-dim); }
.receipt__rows li.new { animation: printline .5s var(--ease); }
@keyframes printline { from { opacity: 0; transform: translateY(-6px); } }

.board__small { position: relative; z-index: 1; max-width: 64ch; text-align: center; font: 400 .82rem/1.55 var(--f-sans); color: var(--ink-dim); }

/* hero, narrow: core first, racks as rows */
@media (max-width: 960px) {
  .board__grid { grid-template-columns: 1fr; gap: 40px; }
  .core { order: -1; }
  .rack { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cart { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 6px; padding: 12px; min-height: 96px; align-content: start; }
  .cart__slot { grid-row: auto; justify-self: start; padding: 6px; }
  .cart__slot i { height: 12px; }
  .cart__sub { display: none; }
  .slot { padding: 12px; }
  .slot__label, .cart__label { font-size: .78rem; }
  .slot__read { font-size: .75rem; padding: 5px 6px; }
}
@media (max-width: 420px) {
  .rack { gap: 8px; }
  .cart, .slot { padding: 10px 9px; }
  .slot__label, .cart__label { font-size: .72rem; letter-spacing: .03em; }
  .core__ctas .btn { width: 100%; }
}

/* ---------- tour ---------- */
.tour { position: relative; padding: clamp(40px, 8vw, 120px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); max-width: 1520px; margin: 0 auto; }
.tour__viewport {
  position: sticky; top: calc(var(--nav-h) + 20px); height: calc(100svh - var(--nav-h) - 40px);
  border-radius: 20px; border: 1px solid var(--line); background: var(--ground-2);
  overflow: hidden; box-shadow: 0 1px 0 #fff inset;
}
.plane { position: absolute; left: 0; top: 0; width: 2000px; height: 1300px; transform-origin: 0 0; transform: scale(var(--fit, .4)); will-change: transform; }
.plane__lines { position: absolute; inset: 0; background: url(/assets/art/board-lines.svg) center / 100% 100% no-repeat; opacity: .45; }
.plane__bus { position: absolute; inset: 0; width: 100%; height: 100%; }
.plane__bus path { fill: none; stroke: var(--line-strong); stroke-width: 3; transition: stroke .5s; }
.plane__bus path.on { stroke: var(--amber-led); }

.mod {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 22px; padding: 30px 34px;
  box-shadow: 0 2px 0 #fff inset, 0 4px 8px rgba(20,22,26,.06), 0 40px 70px -40px rgba(20,22,26,.35);
  transition: border-color .5s, box-shadow .5s;
  display: flex; flex-direction: column; gap: 22px;
}
.mod.is-focus { border-color: var(--amber); box-shadow: 0 2px 0 #fff inset, 0 14px 24px -12px rgba(143,82,0,.35), 0 40px 70px -40px rgba(20,22,26,.35); }
.mod__label { font: 700 1.5rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.mod__foot { margin-top: auto; font: 400 1rem/1 var(--f-sans); color: var(--ink-dimmer); }
.mod .ledger, .mod .hosts { font-size: 1.35rem; gap: 14px; }
.mod .chain span { font-size: 1.2rem; padding: 18px 16px; }
.mod .exports { font: 500 1.2rem/1 var(--f-mono); color: var(--ink-dim); }
.mod .lanes { gap: 16px; }
.mod .lane span { font-size: 1.1rem; }
.mod .rotary { transform: scale(1.35); transform-origin: left center; }

.ledger, .hosts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font: 400 .88rem/1.2 var(--f-mono); }
.ledger li, .hosts li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.ledger code, .hosts code { background: none; border: 0; padding: 0; font-weight: 400; }
.ledger em { font-style: normal; color: var(--ink-dimmer); }
.hosts .ok { color: var(--ink-dim); } .hosts .obs { color: var(--amber-text); font-weight: 500; } .hosts .drop { color: var(--ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.hosts.deny .obs { color: var(--ink); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.relay { display: flex; gap: 16px; align-items: center; margin-top: auto; }
.relay p { font: 600 1.2rem/1.3 var(--f-sans); } .relay small { font: 400 1rem/1.3 var(--f-sans); color: var(--ink-dimmer); }
.relay__sw { width: 64px; height: 34px; border-radius: 20px; background: var(--elevated); border: 1.5px solid var(--line-strong); position: relative; flex: none; }
.relay__sw::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--line-strong); }

.lanes { display: grid; gap: 10px; position: relative; }
.lane { display: flex; align-items: center; gap: 12px; }
.lane span { font: 500 .8rem/1 var(--f-mono); width: 64px; color: var(--ink-dim); }
.lane i { flex: 1; height: 10px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 16px, transparent 16px 22px); }
.lane:nth-child(1) i { background: repeating-linear-gradient(90deg, var(--amber-led) 0 16px, transparent 16px 22px); }
.lane__block { justify-self: end; font: 600 .72rem/1 var(--f-mono); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 5px; padding: 4px 8px; text-transform: uppercase; letter-spacing: .06em; }

.rotary { display: flex; gap: 22px; align-items: center; }
.rotary__knob { width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff 0 30%, #e3e6ea 75%); border: 1.5px solid var(--line-strong); box-shadow: 0 6px 14px -6px rgba(20,22,26,.4); position: relative; transition: transform .6s var(--ease); flex: none; }
.rotary__knob i { position: absolute; left: 50%; top: 8px; width: 3px; height: 20px; margin-left: -1.5px; background: var(--amber); border-radius: 2px; }
.rotary[data-p="0"] .rotary__knob { transform: rotate(-50deg); }
.rotary[data-p="2"] .rotary__knob { transform: rotate(50deg); }
.rotary ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 500 .85rem/1.2 var(--f-mono); color: var(--ink-dimmer); }
.rotary li.on { color: var(--ink); }
.rotary li.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber-led); margin-right: 8px; vertical-align: middle; }

.chain { display: flex; gap: 0; align-items: center; flex-wrap: wrap; }
.chain span { font: 500 .8rem/1 var(--f-mono); padding: 10px 10px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--elevated); position: relative; margin-right: 18px; }
.chain span:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 50%; width: 18px; border-top: 1.5px solid var(--line-strong); }
.exports { font: 500 .8rem/1 var(--f-mono); color: var(--ink-dim); }

.tour__chapters { display: grid; }
.chapter { min-height: 92svh; padding: 8svh 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; max-width: 60ch; }
.chapter h2, .chapter h3 { font: 700 clamp(1.6rem, 2.6vw, 2.4rem)/1.05 var(--f-cond); letter-spacing: -.01em; text-transform: uppercase; }
.chapter p { color: var(--ink-dim); } .chapter p strong { color: var(--ink); font-weight: 600; }
.chapter__fig { display: none; margin: 0; }
.limits { list-style: none; margin: 6px 0 0; padding: 14px 16px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font: 400 .86rem/1.5 var(--f-sans); color: var(--ink-dim); }
.limits li { padding-left: 20px; position: relative; }
.limits li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border: 1.5px solid var(--amber); border-radius: 2px; transform: rotate(45deg) scale(.8); }

.cmd { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--lcd); color: #e7e8ea; overflow-x: auto; font: 400 .8rem/1.5 var(--f-mono); }
.cmd code { background: none; border: 0; padding: 0; color: inherit; font-weight: 400; }

.toggle { display: grid; grid-template-columns: auto auto 1fr; gap: 10px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-mod); }
.toggle__q { font: 600 .82rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.toggle__note { grid-column: 1 / -1; font: 400 .86rem/1.45 var(--f-sans); color: var(--ink-dim); }
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; border: 0; background: none; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.switch__track { width: 56px; height: 30px; border-radius: 16px; background: var(--elevated); border: 1px solid var(--line-strong); position: relative; transition: background .3s; }
.switch__knob { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 2px 4px rgba(20,22,26,.2); transition: transform .35s var(--ease); }
.switch[aria-pressed="true"] .switch__track { background: var(--amber); border-color: var(--amber); }
.switch[aria-pressed="true"] .switch__knob { transform: translateX(26px); }
.switch__text { font: 600 .82rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; min-width: 7ch; text-align: left; }

.profiles { display: grid; gap: 8px; }
.profiles button { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; align-items: baseline; text-align: left; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: border-color .25s, background .25s, transform .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.profiles button:hover { border-color: var(--line-strong); }
.profiles button:active { transform: scale(.99); }
.profiles b { font: 600 .82rem/1.2 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.profiles span { font: 400 .86rem/1.4 var(--f-sans); color: var(--ink-dim); }
.profiles button[aria-checked="true"] { border-color: var(--amber); background: #fffaf2; box-shadow: 0 6px 14px -8px rgba(143,82,0,.5); }
@media (max-width: 520px) { .profiles button { grid-template-columns: 1fr; gap: 4px; } }

@media (max-width: 960px) {
  .tour { grid-template-columns: 1fr; }
  .tour__viewport { display: none; }
  .chapter { min-height: 0; padding: 48px 0; border-top: 1px solid var(--line); }
  .chapter__fig { display: block; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-mod); }
  .toggle { grid-template-columns: 1fr auto; }
  .toggle__q { grid-column: 1; }
}

/* ---------- gets: patch rack ---------- */
.gets { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 10vw, 140px) var(--gutter) 40px; }
.gets h2, .install h2, .price h2 { font: 700 clamp(1.8rem, 3.6vw, 3.2rem)/1.02 var(--f-cond); letter-spacing: -.012em; text-transform: uppercase; max-width: 22ch; }
.lede { margin-top: 14px; color: var(--ink-dim); max-width: 60ch; font-size: 1.05rem; }
.patch { margin-top: 36px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-mod); overflow: hidden; }
.patch__row { display: grid; grid-template-columns: 44px minmax(0, 16rem) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px clamp(16px, 3vw, 28px); border-top: 1px solid var(--line); }
.patch__row:first-child { border-top: 0; }
.patch__row p { color: var(--ink-dim); font-size: .95rem; }
.patch__k { font: 600 .95rem/1.3 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.jack { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); background: radial-gradient(circle, var(--ink) 0 4px, var(--elevated) 5px); position: relative; justify-self: center; }
.jack::after { content: ""; position: absolute; right: -10px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--amber-led); box-shadow: 0 1px 2px rgba(143,82,0,.6); }
.jack--off::after { background: var(--line-strong); box-shadow: none; }
@media (max-width: 720px) { .patch__row { grid-template-columns: 44px minmax(0, 1fr); row-gap: 4px; } .patch__row .jack { grid-row: 1 / 3; } }
.limits--wide { margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* ---------- install ---------- */
.install { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 10vw, 140px) var(--gutter) 40px; }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; counter-reset: s; border-left: 2px solid var(--line-strong); }
.step { position: relative; padding: 0 0 36px clamp(22px, 4vw, 44px); display: grid; gap: 12px; counter-increment: s; }
.step::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); }
.step.is-on::before { background: var(--amber-led); border-color: var(--amber); box-shadow: 0 2px 4px rgba(143,82,0,.45); }
.step h3 { font: 600 1.05rem/1.2 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.step p { color: var(--ink-dim); max-width: 64ch; }
.term { position: relative; border-radius: 12px; background: var(--lcd); box-shadow: 0 2px 0 #000 inset, var(--shadow-mod); max-width: 900px; }
.term pre { margin: 0; padding: 18px 20px; padding-right: 76px; overflow-x: auto; color: #e7e8ea; font: 400 .82rem/1.65 var(--f-mono); }
.term code { background: none; border: 0; padding: 0; color: inherit; font-weight: 400; }
.copy { position: absolute; right: 8px; top: 8px; min-height: 36px; min-width: 56px; padding: 0 10px; border-radius: 7px; border: 1px solid #3a3f48; background: #262a31; color: #cfd2d8; font: 500 .72rem/1 var(--f-mono); cursor: pointer; transition: background .2s, color .2s; }
.copy:hover { background: #30353e; color: #fff; }
.copy.done { color: var(--lcd-ink); border-color: var(--lcd-ink); }

/* ---------- not yet: service sheet ---------- */
.notyet { padding: clamp(64px, 10vw, 140px) var(--gutter) 40px; }
.sheet { max-width: 1320px; margin: 0 auto; background: #fbfbfa; border: 1px solid var(--line); border-radius: 6px; padding: clamp(24px, 5vw, 64px); box-shadow: 0 30px 60px -40px rgba(20,22,26,.35); position: relative; }
.sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; padding-bottom: 22px; border-bottom: 2px solid var(--ink); }
.sheet__head h2 { font: 700 clamp(1.8rem, 3.6vw, 3.2rem)/1.02 var(--f-cond); letter-spacing: -.012em; text-transform: uppercase; max-width: 18ch; }
.sheet__head p { font: 400 .88rem/1.4 var(--f-sans); color: var(--ink-dim); }
.faults { list-style: none; margin: 0; padding: 0; columns: 2 min(360px, 100%); column-gap: 56px; }
.faults li { break-inside: avoid; padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-dim); font-size: .95rem; }
.faults li::before { content: ""; position: absolute; left: 0; top: 20px; width: 14px; height: 14px; background:
  linear-gradient(45deg, transparent 43%, var(--amber) 43% 57%, transparent 57%),
  linear-gradient(-45deg, transparent 43%, var(--amber) 43% 57%, transparent 57%); }
.faults b { color: var(--ink); font-weight: 600; }

/* ---------- price ---------- */
.price { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 10vw, 120px) var(--gutter) 20px; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.price__text p { margin-top: 14px; color: var(--ink-dim); max-width: 62ch; }
.meter { display: grid; justify-items: center; gap: 8px; padding: 22px 26px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-mod); }
.meter__seg { display: block; min-width: 9ch; text-align: center; padding: 12px 16px; border-radius: 8px; background: var(--lcd); color: #c98a3a; font: 500 2rem/1 var(--f-mono); letter-spacing: .1em; box-shadow: 0 2px 0 #000 inset; }
.meter__unit { font: 500 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-dimmer); }
@media (max-width: 720px) { .price { grid-template-columns: 1fr; } .meter { justify-self: start; } }

/* ---------- final ---------- */
.final { max-width: 1320px; margin: 0 auto; padding: clamp(64px, 10vw, 140px) var(--gutter) clamp(64px, 8vw, 120px); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.final__board h2 { font: 700 clamp(2.2rem, 5vw, 4.6rem)/.98 var(--f-cond); letter-spacing: -.015em; text-transform: uppercase; max-width: 16ch; }
.final__board p { margin-top: 18px; color: var(--ink-dim); max-width: 56ch; }
.final__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.printer--final { justify-self: center; width: min(360px, 100%); }
.js .printer--final:not(.is-printed) .printer__mouth { opacity: 0; transform: scaleX(.6); }
.printer--final .printer__mouth { transition: opacity .4s, transform .5s var(--ease); }
.js .receipt--pilot:not(.is-printed) { clip-path: inset(0 0 100% 0); }
.receipt--pilot.is-printed { clip-path: inset(0 0 0 0); transition: clip-path 1.2s steps(14, end); }
@media (max-width: 860px) { .final { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 400 .84rem/1.4 var(--f-sans); color: var(--ink-dim); }
.foot .screw { position: relative; }
.foot b { color: var(--ink); font-family: var(--f-sans); }

/* ---------- reveal (JS adds .rv only when motion is allowed) ---------- */
.rv-ready .rv { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  /* Reduced motion keeps the loading screen static, rather than skipping it. */
  .traces .t-live { animation: none; stroke-dasharray: none; }
  .receipt--pilot { clip-path: none; }
}

/* grid tracks must never grow to a code block's min-content width */
.chapter, .step, .tour__chapters, .final__board, .price__text { min-width: 0; }
.steps { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .tour { grid-template-columns: minmax(0, 1fr); } }
.tour__chapters, .step, .core, .patch, .sheet { grid-template-columns: minmax(0, 1fr); }
.cmd, .term pre { max-width: 100%; }
/* the receipt emerges from the mouth, never above it */
.printer { overflow: hidden; padding-bottom: 24px; }

/* ===================== finish-review batch ===================== */

/* 1. core: a compact dimensional computer object; the board dominates */
.board__grid { grid-template-columns: minmax(180px, 1fr) minmax(0, 440px) minmax(180px, 1fr); gap: clamp(48px, 8vw, 140px); max-width: 1240px; }
.core {
  width: 100%; justify-self: center; gap: 14px;
  padding: 30px 26px 26px 34px; border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f7f8fa);
  box-shadow: 0 1px 0 #fff inset, 0 -2px 0 #e6e8ec inset, 0 3px 6px rgba(20,22,26,.07), 0 30px 50px -26px rgba(20,22,26,.38);
}
.core::before { inset: 7px; border-radius: 14px; }
.core__rail { position: absolute; left: 12px; top: 30px; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.core__rail i { display: block; width: 8px; height: 3px; border-radius: 2px; background: var(--amber-led); box-shadow: 0 1px 1px rgba(143,82,0,.5); }
.core__rail i:nth-child(even) { width: 5px; background: #f3b566; }
.core__dial { position: absolute; right: 20px; top: 20px; width: 42px; height: 42px; }
.core__title { font: 700 clamp(1.45rem, 2.1vw, 1.95rem)/1.02 var(--f-cond); letter-spacing: -.01em; text-transform: uppercase; max-width: 14ch; padding-right: 44px; }
.core__sub { font: 400 .92rem/1.4 var(--f-sans); color: var(--ink-dim); max-width: none; }
.lcd { background: #e6e8ec; box-shadow: 0 2px 3px rgba(20,22,26,.18) inset, 0 1px 0 #fff; border-color: #d0d4db; }
.lcd__screen { font-size: .74rem; }

/* 2. the CTA is a key seated in a recessed bay, same language as the LCD */
.bay {
  display: flex; padding: 5px; border-radius: 12px;
  background: #e6e8ec; border: 1px solid #d0d4db;
  box-shadow: 0 2px 3px rgba(20,22,26,.18) inset, 0 1px 0 #fff;
}
.slotbtn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 18px; border-radius: 8px;
  background: linear-gradient(180deg, #2a2e35, #16181c); color: #fff;
  font: 600 .95rem/1 var(--f-sans); text-decoration: none; letter-spacing: .005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 3px 0 #050607, 0 6px 10px -4px rgba(20,22,26,.5);
  transform: translateY(-2px);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.slotbtn:hover { background: linear-gradient(180deg, #30353d, #1b1e23); }
.slotbtn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 0 #050607, 0 1px 2px rgba(20,22,26,.4); }
.slotbtn__led { width: 7px; height: 7px; border-radius: 50%; background: var(--amber-led); box-shadow: 0 1px 1px rgba(0,0,0,.6); }
.core__alt { justify-self: center; font: 500 .86rem/1 var(--f-sans); color: var(--ink-dim); padding: 10px 6px; min-height: 44px; display: inline-flex; align-items: center; }
.core__alt:hover { color: var(--ink); }

.hero__copy { position: relative; z-index: 1; max-width: 62ch; text-align: center; }
.hero__lead { font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.55 var(--f-sans); color: var(--ink-dim); }

/* 3. mobile: title, cartridges, traces and slots all above the fold */
@media (max-width: 960px) {
  .board__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .core { padding: 20px 16px 16px 26px; gap: 10px; max-width: 460px; }
  .core__rail { left: 9px; top: 20px; bottom: 20px; }
  .core__dial { width: 32px; height: 32px; right: 14px; top: 14px; }
  .core__title { font-size: 1.45rem; padding-right: 36px; }
  .core__sub { font-size: .86rem; }
  .lcd { grid-template-columns: 40px 1fr 40px; }
  .lcd__btn, .lcd__screen { min-height: 40px; }
  .lcd__screen { font-size: .75rem; padding: 4px 8px; }
  .slotbtn { min-height: 46px; }
  .core__alt { min-height: 36px; padding: 6px; }
  .cart { min-height: 0; padding: 10px; row-gap: 4px; }
  .cart__sub { display: none; }
  .slot { min-height: 0; padding: 10px; gap: 4px; }
  .board { gap: 22px; padding-top: 18px; }
  .hero__copy, .board__small { font-size: .9rem; }
}
@media (max-width: 420px) {
  .lcd__screen { font-size: .75rem; letter-spacing: 0; }
  .slot__read span { display: none; }
}

/* 7. agent module fills its frame */
.readouts { margin: auto 0 0; display: grid; gap: 10px; }
.readouts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 10px; background: var(--lcd); }
.readouts dt { font: 500 1rem/1.2 var(--f-mono); color: #8b909a; }
.readouts dd { margin: 0; font: 500 1rem/1.2 var(--f-mono); color: var(--lcd-ink); text-align: right; }

/* 8. the board carries on: frame and line art behind the later sections */
.install, .notyet, .price, .final, .frame {
  position: relative; isolation: isolate;
  width: calc(100% - 2 * var(--gutter)); max-width: 1400px;
  margin: clamp(40px, 7vw, 96px) auto 0;
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -44px rgba(20,22,26,.3);
  padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px);
}
.install::before, .notyet::before, .price::before, .final::before, .frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .45;
  background: url(/assets/art/board-lines.svg) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 38%, transparent 62%, #000);
          mask-image: linear-gradient(90deg, #000, transparent 38%, transparent 62%, #000);
}
.final { margin-bottom: clamp(40px, 7vw, 96px); }
.notyet .sheet { position: relative; }
.final__note { font: 600 .9rem/1.3 var(--f-sans); color: var(--ink); margin-top: 18px; }
@media (max-width: 720px) {
  .install, .notyet, .price, .final, .frame { width: calc(100% - 24px); padding: 36px 16px; }
  .install::before, .notyet::before, .price::before, .final::before, .frame::before { opacity: .25; }
}
.core__title { max-width: none; font-size: clamp(1.3rem, 1.75vw, 1.65rem); line-height: 1.04; }
@media (max-width: 960px) { .core__title { font-size: 1.3rem; } }
.mod--agent .rotary { transform: scale(1.7); margin: 34px 0 0 30px; }
/* R1: hero copy sits on a solid plate, never on the silkscreen */
.hero__copy, .board__small {
  background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px; box-shadow: 0 1px 0 #fff inset, 0 8px 18px -12px rgba(20,22,26,.25);
}
.board__small { padding: 10px 16px; }
@media (max-width: 960px) { .hero__copy, .board__small { padding: 12px 14px; } }
/* R2: cartridges never leave the board, whatever a transform is doing */
@media (max-width: 960px) { .board__grid { overflow: clip; overflow-clip-margin: 12px; } }

/* touch targets: 44px hit areas without changing the drawn size */
.btn--small, .copy, .core__alt { position: relative; }
.btn--small::after, .copy::after, .core__alt::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

/* ---------- signal bench: the trace and the traffic map, live side by side ---------- */
@font-face { font-family: "DSEG7"; src: url(../fonts/dseg7-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

.bench { max-width: 1400px; margin: 0 auto; padding: clamp(56px, 9vw, 128px) var(--gutter) clamp(24px, 4vw, 48px); }
.bench__head h2 { font: 700 clamp(1.8rem, 3.6vw, 3.2rem)/1.02 var(--f-cond); letter-spacing: -.012em; text-transform: uppercase; max-width: 20ch; }
.bench__head .lede { max-width: 64ch; }

/* one machined module; on a desktop it fits a single viewport under the nav */
.sb {
  --views-h: clamp(380px, calc(100svh - var(--nav-h) - 330px), 580px);
  margin-top: clamp(24px, 3.5vw, 40px); position: relative;
  display: grid; gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  padding: 22px 26px 22px 40px; box-shadow: var(--shadow-mod);
}
.sb > .screw--tl, .sb > .screw--tr { top: 11px; } .sb > .screw--bl, .sb > .screw--br { bottom: 11px; }
.sb > .screw--tl, .sb > .screw--bl { left: 11px; } .sb > .screw--tr, .sb > .screw--br { right: 11px; }
.sb__rail { position: absolute; left: 14px; top: 42px; bottom: 42px; display: flex; flex-direction: column; justify-content: space-between; }
.sb__rail i { display: block; width: 8px; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background .4s; }
.sb__rail i:nth-child(even) { width: 5px; }
.sb.is-live .sb__rail i { background: var(--amber-led); }
.sb.is-live .sb__rail i:nth-child(even) { background: #f3b566; }

/* Wells, per DESIGN.md: recessed, no border */
.sb-well, .sb-meas, .sb-readout, .sb-knobunit, .sb-scen { background: #e6e8ec; box-shadow: 0 2px 3px rgba(20,22,26,.18) inset, 0 1px 0 #fff; border: 0; }

.sb__views { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 16px; height: var(--views-h); min-height: 0; }

/* the trace: an LCD inset */
.sb-screen {
  position: relative; min-height: 0; height: 100%; background: var(--lcd); border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.55) inset, 0 0 0 5px #e6e8ec, 0 0 0 6px var(--line);
  margin: 6px; cursor: crosshair; touch-action: manipulation;
}
.sb-screen.is-hit { cursor: pointer; }
.sb-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb-screen .lbl { pointer-events: none; }
.sb-ov { position: absolute; font: 500 .72rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #a3a7b1; pointer-events: none; padding: 5px 7px; background: rgba(28,31,36,.78); border-radius: 4px; }
.sb-ov.tl { left: 10px; top: 10px; color: var(--lcd-ink); }
.sb-ov.tr { right: 10px; top: 10px; }
.sb-ov.bl { left: 10px; bottom: 10px; }
.sb-ov.br { right: 10px; bottom: 10px; color: #e8e9ec; }
.sb-cue {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px;
  font: 600 .8rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-ink);
  background: rgba(28,31,36,.9); border: 1px solid rgba(240,163,64,.45); border-radius: 999px; pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.sb-cue__ring { width: 10px; height: 10px; border-radius: 50%; background: var(--amber-led); animation: sbPulse 1.6s var(--ease) infinite; }
@keyframes sbPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.55); opacity: .45; } }
.sb.is-touched .sb-cue { opacity: 0; transform: translateX(-50%) translateY(-6px); }

/* the map */
.sb-mapcol { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; min-width: 0; }
.sb-mapbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.sb-mapbar h3 { display: flex; align-items: center; gap: 8px; flex: none; font: 700 1.05rem/1 var(--f-cond); letter-spacing: .04em; text-transform: uppercase; }
.sb-tag { font: 500 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--amber-text); border: 1px solid rgba(184,106,0,.4); border-radius: 5px; padding: 3px 5px; }
.sb-scen { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; min-width: 0; flex: 1 1 100%; }
.sb-scen::-webkit-scrollbar { display: none; }
.sb-chip {
  position: relative; flex: none; min-height: 36px; padding: 0 8px; border-radius: 7px; border: 0; background: transparent; cursor: pointer;
  font: 600 .74rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
  transition: background .2s, color .2s, box-shadow .2s, transform .12s;
}
.sb-chip::before { content: ""; position: absolute; inset: -4px 0; }
.sb-chip:hover { background: var(--panel); color: var(--ink); }
.sb-chip:active { transform: translateY(1px); }
.sb-chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 1px 0 #000; }

.sb-topo {
  position: relative; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--ground-2);
  box-shadow: 0 2px 3px rgba(20,22,26,.14) inset, 0 1px 0 #fff;
  padding: 14px 16px; display: grid; gap: 8px 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(186px, 1.45fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas: "acme fw proxy dests" "globex fw proxy dests" ". broker audit dests";
}
.sb-topo::before { content: ""; position: absolute; inset: 0; background: url(/assets/art/board-lines.svg) center / cover no-repeat; opacity: .45; pointer-events: none; }
.sb-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
.sb-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linejoin: round; transition: stroke .3s, stroke-width .3s, opacity .3s; }
.sb-wire--dash { stroke-dasharray: 4 5; }
.sb-wire.is-flash { stroke: #e0a654; }
.sb-wire.is-lit { stroke: var(--amber); stroke-width: 2.2; }
.sb-topo.is-following .sb-wire:not(.is-lit) { opacity: .4; }
.sb-pkt { fill: var(--amber-led); stroke: #fff; stroke-width: 1.5; }
.sb-wire.is-cut { stroke-dasharray: 3 4; }
.sb-cut circle { fill: var(--lcd); }
.sb-cut path { stroke: var(--lcd-ink); stroke-width: 2; stroke-linecap: round; fill: none; }
.sb-pkt--dim { fill: #c9a064; }

.sb-node { position: relative; z-index: 2; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; min-width: 0; min-height: 0; cursor: pointer; border-radius: 10px; outline-offset: 2px; transition: opacity .35s var(--ease); }
.sb-node img { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 34px); min-height: 0; object-fit: contain; transition: transform .35s var(--ease), filter .35s var(--ease); }
.sb-node--ws img, .sb-node--dev img { max-width: 108px; }
.sb-node:hover img { transform: translateY(-3px); filter: drop-shadow(0 8px 8px rgba(20,22,26,.14)); }
.sb-node figcaption { display: grid; gap: 1px; justify-items: center; min-width: 0; }
.sb-node figcaption b { display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1.1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.sb-node figcaption b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; transition: background .25s; }
.sb-node figcaption span { font: 400 .74rem/1.25 var(--f-sans); color: var(--ink-dim); white-space: nowrap; }
.sb-node figcaption b.sb-host { font: 500 .76rem/1.2 var(--f-mono); letter-spacing: 0; text-transform: none; }
.sb-topo.is-following .sb-node:not(.is-path) { opacity: .4; }
.sb-node.is-path figcaption b::before, .sb-node.is-flash figcaption b::before { background: var(--amber); }
.sb-node.is-hot img { transform: translateY(-4px); filter: drop-shadow(0 10px 10px rgba(20,22,26,.16)); }
.sb-node.is-hot figcaption b::before { background: var(--amber-led); }
.sb-node.is-refused figcaption b { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sb-node.is-refused figcaption span { color: var(--ink); }
.sb-node.is-refused img { opacity: .55; }
/* the enforcer keeps its name and gets a stamp, in the LCD language */
.sb-node::after {
  content: attr(data-stamp); position: absolute; top: var(--sy, 2px); left: 50%; transform: translateX(-50%) scale(.9); opacity: 0;
  font: 600 .7rem/1 var(--f-mono); letter-spacing: .1em; color: var(--lcd-ink); background: var(--lcd);
  padding: 4px 7px; border-radius: 4px; box-shadow: 0 2px 0 rgba(0,0,0,.6) inset, 0 4px 8px -4px rgba(20,22,26,.5);
  pointer-events: none; transition: opacity .2s var(--ease), transform .25s var(--ease);
}
.sb-node.is-enforce::after { opacity: 1; transform: translateX(-50%) scale(1); }
.sb-node--dest::after { left: auto; right: 0; transform: none; }
.sb-node.is-picked { box-shadow: 0 0 0 1px var(--amber), 0 6px 14px -8px rgba(143,82,0,.5); background: rgba(255,255,255,.6); }

.sb-dests { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 2px; min-height: 0; }
.sb-node--dest { flex-direction: row; justify-content: flex-start; text-align: left; gap: 8px; padding: 0 6px; }
.sb-node--dest img { width: 40px; max-height: 100%; flex: none; }
.sb-node--dest figcaption { justify-items: start; }

/* the strip: knobs, readouts, log */
.sb__strip { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch; position: relative; padding-bottom: 20px; }
.sb-reads { align-content: start; }
.sb-log.is-follow .sb-log__lines li span { white-space: normal; }
.sb-knobs { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.sb-knobunit { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 12px; border-radius: 14px; min-width: 0; }
.sb-knoblamp { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); box-shadow: 0 1px 1px rgba(20,22,26,.2); transition: background .25s; }
.sb-knobunit.is-live .sb-knoblamp { background: var(--amber-led); }
.sb-knob { position: relative; width: 96px; height: 96px; border-radius: 50%; cursor: grab; touch-action: none; transition: transform .18s var(--ease); }
.sb-knob:hover { transform: translateY(-2px); }
.sb-knob:active { cursor: grabbing; transform: translateY(2px); }
.sb-knob:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 50%; }
.sb-dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sb-dial .skirt { fill: #f1f2f5; stroke: var(--line-strong); stroke-width: 1; }
.sb-dial .scale { stroke: #9aa0ab; stroke-width: .8; }
.sb-dial .grip { fill: #fff; stroke: #aeb4be; stroke-width: 3.2; stroke-dasharray: 1.4 2.2; filter: drop-shadow(0 3px 3px rgba(20,22,26,.22)); transition: filter .2s var(--ease); }
.sb-knob:hover .sb-dial .grip { filter: drop-shadow(0 7px 7px rgba(20,22,26,.26)); }
.sb-knob:active .sb-dial .grip { filter: drop-shadow(0 1px 1px rgba(20,22,26,.3)); }
.sb-dial .cap { fill: #fff; stroke: var(--line-strong); stroke-width: 1.2; }
.sb-dial .ring { fill: none; stroke: var(--line); stroke-width: 1; transition: stroke .25s; }
.sb-knobunit.is-live .sb-dial .ring { stroke: var(--amber); }
.sb-dial .ptr-case { stroke: #fff; stroke-width: 6.4; stroke-linecap: round; }
.sb-dial .ptr { stroke: var(--amber); stroke-width: 3.4; stroke-linecap: round; }
.sb-dial .ptr-g { transition: transform .32s var(--ease); transform-origin: 60px 60px; }
.sb-dial .tick { stroke: var(--line-strong); stroke-width: 2.2; }
.sb-dial .tick.on { stroke: var(--amber); }
/* 96px knob draws a 120-unit viewBox at .8, so 14 units renders at 11.2px */
.sb-dial text { font: 600 14px var(--f-cond); letter-spacing: .04em; fill: var(--ink-dimmer); text-anchor: middle; dominant-baseline: middle; text-transform: uppercase; }
.sb-dial text.on { fill: var(--amber-text); }
.sb-knob.tick-flash .cap { stroke: var(--amber); }
.sb-knobname { font: 700 .78rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.sb-knobval { font: 500 .76rem/1 var(--f-mono); color: var(--amber-text); min-height: 1em; }

.sb-reads { display: grid; gap: 8px; min-width: 0; }
.sb-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-readout { border-radius: 10px; padding: 6px; display: grid; gap: 5px; }
.sb-seg { position: relative; display: block; text-align: right; font: 700 1.55rem/1 "DSEG7", var(--f-mono); color: var(--lcd-ink); background: var(--lcd); border-radius: 6px; padding: 8px 10px 7px; letter-spacing: .04em; box-shadow: 0 2px 0 rgba(0,0,0,.6) inset; }
/* the unlit segments behind the digits; same glyph run, so every segment lines up */
.sb-seg::before { content: "888"; position: absolute; right: 10px; top: 8px; color: rgba(240,163,64,.1); pointer-events: none; }
.sb-readname { font: 600 .74rem/1.15 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: 0 4px; }
.sb-unit { color: var(--ink-dimmer); font-weight: 500; }
.sb-readlimit { font: 400 .76rem/1.3 var(--f-sans); color: var(--ink-dim); padding: 0 4px 2px; }
.sb-meas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 9px 12px; border-radius: 10px; }
.sb-meas span { display: inline-flex; gap: 8px; align-items: baseline; min-width: 0; }
.sb-meas i { font: 600 .72rem/1 var(--f-cond); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); }
.sb-meas b { font: 500 .78rem/1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sb-log { background: var(--lcd); color: #e8e9ec; border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.6) inset; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sb-log__head { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #2f333c; font: 600 .74rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: #a3a7b1; }
.sb-log__scen { color: var(--lcd-ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-log__lines { list-style: none; margin: 0; padding: 8px 12px 10px; display: grid; gap: 4px; align-content: start; flex: 1; min-height: 0; overflow: hidden; font: 400 .76rem/1.4 var(--f-mono); }
.sb-log__lines:empty::before { content: "Waiting for the first spike…"; color: #8b909b; }
.sb-log__lines li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 8px; animation: sbIn .35s var(--ease) both; }
.sb-log__lines li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes sbIn { from { opacity: 0; transform: translateY(4px); } }
.sb-log__lines time { color: #8b909b; font-variant-numeric: tabular-nums; }
.sb-log__lines b { color: var(--lcd-ink); font-weight: 500; }
.sb-log__lines s { color: #fff; text-decoration-thickness: 1.5px; }
.sb-log__verdict { margin: 0; padding: 8px 12px 10px; border-top: 1px solid #2f333c; font: 500 .82rem/1.4 var(--f-sans); color: #fff; }

.sb-vent { position: absolute; right: 0; bottom: 0; width: 180px; height: 12px; fill: #e6e8ec; }
.sb-vent rect { stroke: #cfd3da; stroke-width: 1; }

.sb-note { margin: 14px 4px 0; color: var(--ink-dim); font-size: .95rem; max-width: 72ch; min-height: 3em; }
.sb-limits { margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* tablet: trace on top, map below, one panel */
@media (max-width: 1023px) {
  .sb { --views-h: auto; padding: 18px 18px 18px 34px; }
  .sb__views { grid-template-columns: minmax(0, 1fr); height: auto; }
  .sb-screen { height: auto; aspect-ratio: 16 / 8; }
  .sb-topo { height: 440px; }
  .sb__strip { grid-template-columns: auto minmax(0, 1fr); }
  .sb-log { grid-column: 1 / -1; }
}
/* phone: a compact trace and a vertical map together in one pinned panel; the strip follows it */
.sb-runway { display: none; }
@media (max-width: 759px) {
  /* the module's white body moves onto the panel itself, so the runway under it is just bench */
  .sb { padding: 0; gap: 0; background: none; border: 0; box-shadow: none; }
  .sb__rail, .sb > .screw { display: none; }
  .sb__views { gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-mod); }
  .sb.is-pin .sb__views { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 3; }
  .sb.is-pin .sb-runway { display: block; height: 28svh; }
  .sb-screen { aspect-ratio: auto; height: 30svh; min-height: 200px; margin: 3px; }
  .sb-ov { font-size: .7rem; padding: 4px 6px; }
  .sb-ov.tl, .sb-ov.tr { top: 7px; } .sb-ov.bl, .sb-ov.br { bottom: 7px; }
  .sb-ov.tl, .sb-ov.bl { left: 7px; } .sb-ov.tr, .sb-ov.br { right: 7px; }
  .sb-ov.bl { display: none; }
  .sb-cue { font-size: .72rem; top: 26%; }
  .sb-mapbar h3 { display: none; }
  .sb-scen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 4px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 28px; }
  .sb-chip { scroll-snap-align: start; }
  .sb-topo::before { opacity: .07; }
  .sb-log.is-follow .sb-log__lines li span { white-space: normal; }
  .sb__strip { align-items: start; }
  .sb-chip { min-height: 38px; padding: 0 10px; }
  .sb-topo {
    height: auto; padding: 8px; gap: 6px 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "acme fw globex" ". proxy ." "dests dests dests" ". broker audit";
  }
  .sb-node img { max-height: none; }
  .sb-node--ws img, .sb-node--dev img { max-width: 64px; }
  .sb-node figcaption span { display: none; }
  .sb-node figcaption b { font-size: .7rem; }
  .sb-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 2px 6px; padding: 4px 0; }
  .sb-node--dest { flex-direction: column; text-align: center; gap: 0; padding: 2px 0; }
  .sb-node--dest figcaption { justify-items: center; }
  .sb-node--dest img { width: 44px; }
  .sb-node figcaption b.sb-host { font-size: .7rem; }
  .sb-node figcaption b.sb-host::before { display: none; }
  .sb-wire:not(.is-lit) { opacity: 0; }
  .sb__strip--solo { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-mod); grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sb__strip { grid-template-columns: minmax(0, 1fr); padding-bottom: 10px; }
  .sb-knobs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sb-knobunit { padding: 8px 4px 10px; }
  .sb-knob { width: 84px; height: 84px; }
  .sb-dial text { font-size: 16px; } /* 84/120 × 16 = 11.2px */
  .sb-log__lines li:nth-last-child(n+3) { display: none; }
  .sb-log.is-follow .sb-log__lines li:nth-last-child(n+3) { display: grid; }
  .sb-vent { display: none; }
}
/* Phones tall enough to pin (≥560px): the stack is sized from the viewport, not from its content,
   so the trace and the map are always on one screen together. */
@media (max-width: 759px) and (min-height: 560px) {
  .sb__views { height: calc(100svh - var(--nav-h) - 12px); grid-template-rows: minmax(0, 40fr) minmax(0, 60fr); }
  .sb.is-pin .sb-runway { height: max(28svh, 260px); }
  .sb-screen { height: auto; min-height: 0; }
  .sb-mapcol { grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .sb-topo {
    min-height: 0; padding: 6px 8px; gap: 5px 6px;
    grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1.3fr);
    grid-template-areas: "acme fw globex" "proxy proxy proxy" "dests dests dests" ". broker audit";
  }
  /* the top row keeps names under the drawings (three narrow columns); the wider rows set them beside */
  .sb-node--ws, .sb-node--dev { flex-direction: row; gap: 4px; }
  .sb-node--ws img, .sb-node--dev img { height: 100%; max-height: 46px; min-height: 32px; width: auto; max-width: none; }
  .sb-node[data-node="acme"], .sb-node[data-node="fw"], .sb-node[data-node="globex"], .sb-node[data-node="broker"], .sb-node[data-node="audit"] { flex-direction: column; gap: 0; }
  .sb-node[data-node="acme"] img, .sb-node[data-node="fw"] img, .sb-node[data-node="globex"] img, .sb-node[data-node="broker"] img, .sb-node[data-node="audit"] img { height: calc(100% - 15px); }
  .sb-node figcaption b.sb-host { white-space: normal; line-height: 1.15; }
  .sb-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px 6px; padding: 0; min-height: 0; }
  .sb-node--dest { flex-direction: row; text-align: left; gap: 4px; padding: 0; }
  .sb-node--dest figcaption { justify-items: start; }
  .sb-node--dest img { height: 100%; max-height: 36px; min-height: 32px; width: auto; margin: 0 -7px; }
  .sb-node::after { top: 0; }
}
@media (max-width: 380px) {
  .sb-knob { width: 76px; height: 76px; }
  .sb-dial text { font-size: 18px; } /* 76/120 × 18 = 11.4px */
  .sb-seg { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-log__lines li { animation: none; }
  .sb-node, .sb-node img, .sb-dial .ptr-g, .sb-cue { transition: none; }
  .sb-cue__ring { animation: none; }
}
.sb-pkt--amb { fill: var(--amber-led); stroke-width: 1; }

/* ===================== home rebuild (website.md §11 / §45.1) ===================== */

/* loader failsafe: content is never covered for long, even if main.js never runs */
.js .loader { animation: loader-failsafe .35s ease-out 3.5s forwards; }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* skip-link target: focus lands on main without a ring around the whole page */
main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* shared section heading + text link */
.h-sec { font: 700 clamp(1.8rem, 3.6vw, 3.2rem)/1.02 var(--f-cond); letter-spacing: -.012em; text-transform: uppercase; max-width: 22ch; }
.go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; font: 600 .95rem/1 var(--f-sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .3em; }
.go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s var(--ease); }
.go:hover svg { transform: translateX(3px); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.frame .lede, .install .lede { max-width: 68ch; }
.frame > .limits, .frame .limits { margin-top: 18px; }
.chapter .go { margin-top: 0; align-self: flex-start; }

/* announcement: one LCD line */
.ann { display: flex; align-items: center; gap: 8px; margin: 10px var(--gutter) 0; padding: 4px 4px 4px 14px; border-radius: 10px; background: var(--lcd); color: var(--lcd-ink); box-shadow: 0 2px 0 rgba(0,0,0,.6) inset; }
.ann__text { flex: 1; min-width: 0; font: 500 .78rem/1.45 var(--f-mono); letter-spacing: .02em; padding: 8px 0; }
.ann__text a { display: inline-flex; align-items: center; gap: 6px; color: #fff; white-space: nowrap; }
.ann__text a svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ann__led { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--amber-led); vertical-align: middle; }
.ann__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 7px; background: transparent; color: #a3a7b1; cursor: pointer; }
.ann__x:hover { background: #262a31; color: #fff; }
.ann__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ann.is-gone { display: none; }
.hero { padding-top: 10px; }

/* verifiable facts: five mono readouts in one recessed bay */
.facts { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
.facts__bay { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; border-radius: 14px; background: #e6e8ec; border: 1px solid #d0d4db; box-shadow: 0 2px 3px rgba(20,22,26,.18) inset, 0 1px 0 #fff; }
.facts__read { display: flex; align-items: center; min-height: 64px; padding: 10px 12px; border-radius: 8px; background: var(--lcd); color: var(--lcd-ink); font: 500 .76rem/1.4 var(--f-mono); letter-spacing: .01em; box-shadow: 0 2px 0 rgba(0,0,0,.6) inset; }
.facts__read--link { padding: 0; }
.facts__read--link a { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 100%; min-height: 64px; padding: 10px 12px; color: #fff; text-decoration: underline; text-decoration-color: var(--amber-led); text-underline-offset: .3em; border-radius: 8px; }
.facts__read--link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 1100px) { .facts__bay { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts__read:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .facts__bay { grid-template-columns: minmax(0, 1fr); } .facts__read { min-height: 48px; } .facts__read--link a { min-height: 48px; } }

/* overview: text + the four pillar plates, which light as they pass */
.overview { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.pillar { position: relative; counter-increment: p; }
.pillar a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 14px 44px 14px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-mod); text-decoration: none; transition: border-color .3s, transform .2s var(--ease); }
.pillar a::before { content: "0" counter(p); grid-row: 1 / 3; align-self: center; font: 600 .8rem/1 var(--f-mono); color: var(--ink-dimmer); }
.pillar a:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.pillar b { font: 700 1.05rem/1.1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; }
.pillar span { font: 400 .88rem/1.45 var(--f-sans); color: var(--ink-dim); }
.pillar__led { position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--amber-led); box-shadow: 0 1px 2px rgba(143,82,0,.6); z-index: 1; pointer-events: none; transition: background .4s, box-shadow .4s; }
.js .pillars.is-armed .pillar:not(.is-lit) .pillar__led { background: var(--line-strong); box-shadow: none; }
.pillar.is-lit a { border-color: var(--line-strong); }
@media (max-width: 860px) { .overview { grid-template-columns: minmax(0, 1fr); } }

/* the problem: without / with, the arrows fan out then converge once */
.split { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.split__side { position: relative; margin: 0; padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-mod); display: grid; grid-template-rows: auto 200px; min-width: 0; overflow: hidden; }
.split__side figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.split__side figcaption b { font: 700 1rem/1 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.split__side figcaption span { font: 400 .86rem/1.4 var(--f-sans); color: var(--ink-dim); }
.split__art { grid-row: 2; grid-column: 1; width: 100%; height: 200px; }
.split__dev { grid-row: 2; grid-column: 1; align-self: center; width: 42%; max-width: 150px; height: auto; margin-left: 2%; }
.split__side--with .split__dev { width: 34%; max-width: 124px; }
.split__art path { fill: none; stroke: var(--ink-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.split__side--without .split__fan path { stroke: var(--amber); stroke-dasharray: 6 6; }
.split__side--with .split__fan path { stroke: var(--line-strong); }
.split__one { stroke: var(--amber) !important; stroke-width: 3 !important; }
.split__oneh { stroke: var(--amber) !important; }
.split__gate { fill: var(--lcd); }
.split__lbl { font: 500 11px var(--f-mono); fill: var(--ink-dim); text-anchor: middle; }
.split__token { position: absolute; left: 16px; bottom: 14px; font: 500 .72rem/1 var(--f-mono); color: var(--amber-text); border: 1px solid rgba(184,106,0,.4); border-radius: 5px; padding: 4px 6px; background: #fffaf2; }
.split__token--host { color: var(--ink-dim); border-color: var(--line-strong); background: var(--elevated); }
.js .split.is-armed .split__fan path { stroke-dashoffset: 0; }
.js .split.is-armed:not(.is-played) .split__side--without .split__fan path { opacity: 0; transform: scaleX(.2); }
.js .split.is-armed:not(.is-played) .split__side--with .split__fan path, .js .split.is-armed:not(.is-played) .split__one { opacity: 0; }
.split__fan path, .split__one { transform-box: fill-box; transform-origin: left center; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.split__side--without .split__fan path:nth-child(2) { transition-delay: .06s; } .split__side--without .split__fan path:nth-child(3) { transition-delay: .12s; }
.split__side--without .split__fan path:nth-child(4) { transition-delay: .18s; } .split__side--without .split__fan path:nth-child(5) { transition-delay: .24s; }
.split__side--with .split__fan path { transition-delay: .5s; } .split__one { transition-delay: .9s; }
@media (max-width: 720px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* how it works: the step rail, reused */
.how .steps { margin-top: 32px; }
.how .step { padding-bottom: 28px; }
.how .step:last-child { padding-bottom: 8px; }
.how .step h3 { font-size: 1.1rem; }
.how .step h3::before { content: counter(s) " · "; color: var(--amber-text); }

/* bench: the layer captions, one per layer, limit on the same line */
.layers { margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.layers div { padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.layers dt { font: 700 .86rem/1.2 var(--f-cond); letter-spacing: .08em; text-transform: uppercase; }
.layers dt em { font: 500 .7rem/1 var(--f-mono); font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--ink-dimmer); margin-left: 6px; }
.layers dd { margin: 4px 0 0; font: 400 .88rem/1.45 var(--f-sans); color: var(--ink-dim); }

/* four pillars: heading above the tour */
.pillars-sec__head { max-width: 1520px; margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter) 0; }
.pillars-sec .tour { padding-top: clamp(16px, 3vw, 40px); }

/* where teams start: four routes, a ledger not a card grid */
.routes { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.routes li { border-bottom: 1px solid var(--line); }
.routes a { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) 20px; gap: 6px 24px; align-items: center; padding: 18px 4px; min-height: 44px; text-decoration: none; }
.routes b { font: 700 1.05rem/1.2 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.routes span { color: var(--ink-dim); font-size: .95rem; }
.routes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s var(--ease); }
.routes a:hover { background: var(--panel); }
.routes a:hover svg { transform: translateX(3px); }
@media (max-width: 720px) { .routes a { grid-template-columns: minmax(0, 1fr) 20px; } .routes span { grid-column: 1; } .routes svg { grid-row: 1 / 3; grid-column: 2; } }

/* developer experience: patch rack beside a small terminal */
.gets__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 36px; }
.gets__grid .patch { margin-top: 0; }
.gets__grid .patch__row { grid-template-columns: 44px minmax(0, 12rem) minmax(0, 1fr); }
.term--dx { max-width: none; overflow: hidden; }
.term__bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #2c3037; font: 500 .72rem/1 var(--f-mono); color: #a3a7b1; text-transform: uppercase; letter-spacing: .06em; }
.term__tag { color: var(--lcd-ink); }
.term--dx pre { padding-right: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dx-l { display: block; }
.dx-out { color: #c9ccd2; }
.dx-via { color: var(--lcd-ink); }
.dx-via::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--amber-led); vertical-align: middle; }
.js .term--dx.is-armed:not(.is-done) .dx-out, .js .term--dx.is-armed:not(.is-done) .dx-via { visibility: hidden; }
.dx-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--lcd-ink); }
@media (max-width: 960px) { .gets__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .gets__grid .patch__row { grid-template-columns: 44px minmax(0, 1fr); } }

/* self-hosted: text + spec plate */
.install__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.install__grid .limits { margin-top: 20px; }
.plate { padding: 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-mod); }
.plate__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 0 2px 12px; font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dimmer); }
.plate__head span:first-child { font: 700 .9rem/1 var(--f-cond); letter-spacing: .1em; color: var(--ink); }
.plate .readouts { margin: 0; gap: 8px; }
.plate .readouts div { align-items: baseline; }
.plate .readouts dt, .plate .readouts dd { font-size: .8rem; line-height: 1.35; }
.plate .readouts dt { flex: none; }
@media (max-width: 860px) { .install__grid { grid-template-columns: minmax(0, 1fr); } }

/* integrations + deployment options, side by side */
.pair { width: calc(100% - 2 * var(--gutter)); max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.pair > .frame { width: auto; margin-left: 0; margin-right: 0; }
.pair .h-sec { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
.integ__list { margin-top: 18px; font: 500 .9rem/1.8 var(--f-mono); color: var(--ink); }
.opts { margin: 18px 0 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.opts__row { display: grid; grid-template-columns: 14px minmax(0, 12rem) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.opts__row::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transform: translateY(1px); }
.opts__row.is-on::before { background: var(--amber-led); box-shadow: 0 1px 2px rgba(143,82,0,.6); }
.opts__row.is-part::before { background: linear-gradient(90deg, var(--amber-led) 50%, var(--line-strong) 50%); }
.opts__row.is-na::before { background: none; border: 1.5px solid var(--line-strong); }
.opts dt { font: 600 .9rem/1.3 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; }
.opts dd { margin: 0; color: var(--ink-dim); font-size: .92rem; }
@media (max-width: 960px) { .pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .pair { width: 100%; } .pair > .frame { width: calc(100% - 24px); margin-left: auto; margin-right: auto; } .opts__row { grid-template-columns: 14px minmax(0, 1fr); } .opts dd { grid-column: 2; } }

/* pricing preview: four indicative tiers as LCD segments */
.price { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
.price__banner { display: flex; gap: 10px; align-items: baseline; margin-top: 18px !important; padding: 10px 14px; border-radius: 10px; background: #fffaf2; border: 1px solid rgba(184,106,0,.4); color: var(--ink) !important; font: 500 .9rem/1.45 var(--f-sans); }
.price__led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber-led); transform: translateY(-1px); }
.tiers { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border-radius: 16px; background: #e6e8ec; border: 1px solid #d0d4db; box-shadow: 0 2px 3px rgba(20,22,26,.18) inset, 0 1px 0 #fff; }
.tier { display: grid; gap: 8px; padding: 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.tier__name { font: 700 .9rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.tier__seg--tba { font-size: 1rem !important; letter-spacing: .06em; text-transform: uppercase; }
.tier__seg { display: block; padding: 10px 12px; border-radius: 7px; background: var(--lcd); color: var(--lcd-ink); font: 500 1.6rem/1 var(--f-mono); letter-spacing: .04em; box-shadow: 0 2px 0 #000 inset; text-align: right; }
.tier__unit { font: 400 .8rem/1.4 var(--f-sans); color: var(--ink-dim); }
@media (max-width: 860px) { .price { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* questions */
.faq__list { margin-top: 24px; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 2px; cursor: pointer; list-style: none; font: 600 1rem/1.35 var(--f-sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim); transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 2px 16px; max-width: 70ch; color: var(--ink-dim); }

/* gaps: numbered list on the service sheet */
.faults { counter-reset: g; }
.faults li { counter-increment: g; }
.sheet__head a { color: var(--ink); font-weight: 600; }

/* phone gutters for the facts bay and the announcement */
@media (max-width: 720px) { .facts { padding: 0 12px; } .ann { margin: 8px 12px 0; } }

/* the chip row always stays inside its own box: it wraps on wide screens and scrolls on phones */
.sb-mapbar > * { min-width: 0; }
.sb-scen { max-width: 100%; overflow-x: auto; }
@media (max-width: 400px) { .sb-meas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .plate .readouts div { flex-direction: column; gap: 4px; } .plate .readouts dd { text-align: left; } }

/* ============ INTRO: the loader's K grows, splits, and two doors swing open onto Anta's tour ============ */
.intro { display: none; }
.js .intro {
  display: block; position: relative; height: calc(100svh - var(--nav-h)); min-height: 520px;
  margin: 0 var(--gutter); border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 1px 0 #fff inset, 0 30px 60px -40px rgba(20,22,26,.35);
  --close: 0;
  /* scrolling away: the player shrinks into an inset tile while the doors close over it */
  transform: translateY(calc(var(--close) * 4vh)) scale(calc(1 - var(--close) * .2));
  transform-origin: 50% 0; border-radius: calc(22px + var(--close) * 18px);
  box-shadow: 0 1px 0 #fff inset, 0 calc(30px + var(--close) * 20px) calc(60px + var(--close) * 30px) -40px rgba(20,22,26,calc(.35 + var(--close) * .15));
}
/* scrolling down swings the doors shut over the tour; the K meets on the seam */
.intro__doors { position: absolute; inset: 0; z-index: 4; perspective: 1600px; pointer-events: none; visibility: hidden; }
.intro__doors.is-on { visibility: visible; }
.intro__doors .kdoor { transition: none; filter: brightness(calc(.78 + .22 * var(--close))); }
.intro__doors .kdoor--l { transform: rotateY(calc(-104deg * (1 - var(--close)))); }
.intro__doors .kdoor--r { transform: rotateY(calc(104deg * (1 - var(--close)))); }
.intro__doors.is-shut .kdoor__seam { opacity: 1; }
.intro__stage { position: absolute; inset: 0; }
.intro__ctl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 12px clamp(12px, 2vw, 22px); background: linear-gradient(transparent, rgba(243,244,246,.92) 45%);
}
.intro__pips { display: flex; gap: 4px; margin-right: auto; }
.intro__pip { width: 30px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.intro__pip i { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--line); box-shadow: inset 0 1px 2px rgba(20,22,26,.18); overflow: hidden; position: relative; }
.intro__pip i::after { content: ""; position: absolute; inset: 0; width: var(--fill, 0%); background: var(--ink); }
.intro__pip:focus-visible, .intro__btn:focus-visible, .intro__skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.intro__btn {
  height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; cursor: pointer;
  border-radius: 10px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line-strong);
  font: 600 .88rem/1 var(--f-sans); transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.intro__btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line-strong); }
.intro__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.intro__btn .i-play { fill: currentColor; stroke: none; }
.intro__btn .i-play, .intro__btn[data-state="paused"] .i-pause { display: none; }
.intro__btn[data-state="paused"] .i-play { display: block; }
.intro__btn--wide[aria-pressed="false"] .i-wave, .intro__btn--wide[aria-pressed="true"] .i-x { display: none; }
.intro__btn--wide[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: #000; box-shadow: 0 3px 0 #000; }
.intro__skip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; font: 500 .86rem/1 var(--f-sans); color: var(--ink-dim); text-decoration: none; }
.intro__skip:hover { color: var(--ink); }
.intro__skip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.intro__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: normal; }
.js .kdoors + .ann { margin-top: 14px; }
@media (max-width: 960px) { .js .intro { margin: 0 12px; min-height: 560px; } .intro__btn--wide span { display: none; } .intro__pip { width: 22px; } }
@media (max-width: 560px) { .intro__ctl { gap: 6px; padding: 10px; } .intro__pips { gap: 2px; } .intro__pip { width: 15px; } .intro__skip { padding: 0 2px; font-size: .82rem; } }
@media (max-width: 380px) { .intro__pip { width: 10px; } .intro__pips { gap: 1px; } .intro__skip svg { display: none; } }

/* the loader hands over: its bar fades, its K grows to door size and turns amber */
.loader.is-handoff .loader__bar, .loader.is-handoff .loader__label { opacity: 0; transition: opacity .2s; }
/* the K sits above the bar in the loader; it drops 27px to the true centre as it grows */
.loader.is-handoff .mark--loader { transform: translateY(27px) scale(var(--kscale, 10)); color: var(--amber); transition: transform .55s cubic-bezier(.65, 0, .35, 1), color .3s; }

.kdoors { display: none; }
.js .kdoors.is-on { display: block; position: fixed; inset: 0; z-index: 95; perspective: 1700px; pointer-events: none; animation: kdoors-failsafe .3s ease-out 4.5s forwards; }
@keyframes kdoors-failsafe { to { opacity: 0; visibility: hidden; } }
.kdoor {
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; backface-visibility: hidden; will-change: transform;
  background: var(--ground); transition: transform 1.35s cubic-bezier(.62, 0, .18, 1), filter 1.35s;
}
.kdoor::before { content: ""; position: absolute; inset: 0; background: url(/assets/art/board-lines.svg) center / 200vw 100vh no-repeat; opacity: .35; }
.kdoor--l { left: 0; transform-origin: 0 50%; }
.kdoor--l::before { background-position: 0 50%; }
.kdoor--r { right: 0; transform-origin: 100% 50%; }
.kdoor--r::before { background-position: 100% 50%; }
/* one K, centred on the seam, so each door carries its half */
.kdoor__k { position: absolute; top: 50%; width: var(--kd, 280px); height: var(--kd, 280px); margin-top: calc(var(--kd, 280px) / -2); }
.kdoor--l .kdoor__k { right: calc(var(--kd, 280px) * -30 / 56); }
.kdoor--r .kdoor__k { left: calc(var(--kd, 280px) * -26 / 56); }
.kdoor__k svg { width: 100%; height: 100%; fill: none; stroke: var(--amber); stroke-width: 4.5; stroke-linecap: round; }
.kdoor__seam { position: absolute; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, var(--amber-led) 40%, var(--amber-led) 60%, transparent); box-shadow: 0 0 0 0 transparent; opacity: 0; transition: opacity .25s; }
/* the loader's K, measured, so the doors take over without a jump */
.kdoors.is-measured .kdoor__k { top: var(--kt); margin-top: 0; width: var(--kd); height: var(--kd); }
.kdoors.is-measured .kdoor--l .kdoor__k { left: var(--kl); right: auto; }
.kdoors.is-measured .kdoor--r .kdoor__k { left: calc(var(--kl) - 50vw); }
/* as a door turns, its inner edge catches the light: a soft shade, never a hard line */
.kdoors.is-open .kdoor--l { box-shadow: inset -18px 0 24px -18px rgba(20,22,26,.35); }
.kdoors.is-open .kdoor--r { box-shadow: inset 18px 0 24px -18px rgba(20,22,26,.35); }
.kdoor--l .kdoor__seam { right: 0; } .kdoor--r .kdoor__seam { left: 0; }
.kdoors.is-lit .kdoor__seam { opacity: 1; }
.kdoors.is-open .kdoor--l { transform: rotateY(-104deg); filter: brightness(.8); }
.kdoors.is-open .kdoor--r { transform: rotateY(104deg); filter: brightness(.8); transition-delay: .05s; }
@media (prefers-reduced-motion: reduce) { .js .kdoors.is-on { display: none; } .intro__doors { display: none; } .js .intro { transform: none; } }