/* LiqNet · monochrome. Black and white only: hierarchy comes from size, weight, width and
   opacity, never from colour. Display is Archivo at full width, heavy, uppercase. Text is
   Instrument Sans, small and quiet. Lines are hairlines. Buttons are outlines. */

:root {
  --bg: #000;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.72);
  --ink-3: rgba(255, 255, 255, 0.46);
  --ink-4: rgba(255, 255, 255, 0.24);
  --rule: rgba(255, 255, 255, 0.12);
  --rule-2: rgba(255, 255, 255, 0.26);
  --hatch: rgba(255, 255, 255, 0.16);
  --invert: #000;

  --display: 'Archivo', 'Arial Black', Arial, sans-serif;
  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --wrap: 1360px;
  --gutter: 32px;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --bg: #fff;
  --surface: #f6f6f6;
  --surface-2: #ececec;
  --ink: #121212;
  --ink-2: rgba(18, 18, 18, 0.75);
  --ink-3: rgba(18, 18, 18, 0.5);
  --ink-4: rgba(18, 18, 18, 0.26);
  --rule: rgba(18, 18, 18, 0.12);
  --rule-2: rgba(18, 18, 18, 0.3);
  --hatch: rgba(18, 18, 18, 0.14);
  --invert: #fff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.6 var(--sans);
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
p a, .prose a, .doc a, .note a { text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; }
p a:hover, .prose a:hover, .doc a:hover { text-decoration-color: var(--ink); }
::selection { background: var(--ink); color: var(--bg); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 720px) { :root { --gutter: 16px; } }

/* ── type ─────────────────────────────────────────────── */
.display, .h2, .wide, .brand span {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
}
.display { font-size: clamp(40px, 6vw, 112px); margin: 0; }
.hero-copy .display { font-size: clamp(40px, 5.4vw, 80px); line-height: 0.95; }
.h2 { font-size: clamp(30px, 4.4vw, 64px); margin: 0; }
.h3 { font: 600 15px/1.35 var(--sans); letter-spacing: 0.01em; margin: 0; }
.display em, .h2 em { font-style: normal; color: var(--ink-3); }
.label { font: 500 11px/1.4 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.label b { color: var(--ink); font-weight: 500; }
.mono { font-family: var(--mono); letter-spacing: 0; }
.lede { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin: 0; }
.lede-serif { font: 500 15px/1.5 var(--sans); color: var(--ink); margin: 0; }
.prose { color: var(--ink-2); max-width: 60ch; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--ink); }
.down, .dry { color: var(--ink); }
.big { font-family: var(--display); font-stretch: 125%; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
h1, h2, h3 { font-weight: inherit; }

/* ── header: nav left, lockup centred, nav right ──────── */
.top { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--rule); transition: background 0.25s, border-color 0.25s; }
.top.overlay { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; }
.top.overlay.solid { background: var(--bg); border-color: var(--rule); }
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; padding: 0 var(--gutter); max-width: 1600px; margin: 0 auto; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand svg { width: 15px; height: 20px; }
.brand span { font-size: 21px; letter-spacing: 0.02em; line-height: 1; }
.nav { display: flex; gap: 30px; align-items: center; }
.nav-r { justify-content: flex-end; }
.nav a, .nav button { position: relative; padding-left: 15px; font: 400 14px/1 var(--sans); letter-spacing: 0.02em; color: var(--ink); background: none; border: 0; cursor: pointer; }
.nav a::before, .nav button::before { content: ''; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: 1px solid currentColor; border-radius: 50%; }
.nav a[aria-current='page']::before, .nav a:hover::before, .nav button:hover::before { background: currentColor; }
.menu-btn { display: none; justify-self: end; width: 40px; height: 40px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.drawer { display: none; }
@media (max-width: 900px) {
  .top-in { grid-template-columns: 40px 1fr 40px; height: 68px; }
  .nav { display: none; }
  .brand { grid-column: 2; }
  .brand svg { width: 12px; height: 16px; }
  .brand span { font-size: 18px; }
  .menu-btn { display: grid; place-items: center; grid-column: 3; }
  .drawer.open { display: flex; flex-direction: column; border-top: 1px solid var(--rule); padding: 8px var(--gutter) 20px; background: var(--bg); }
  .drawer a, .drawer button { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; text-align: left; background: none; color: var(--ink); border-left: 0; border-right: 0; border-top: 0; font-family: var(--sans); cursor: pointer; }
}

/* ── buttons: outlines, small caps ───────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 28px; min-width: 200px;
  font: 500 12px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; border-radius: 0;
  transition: background 0.2s, color 0.2s;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn.ghost { border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.sm { height: 34px; min-width: 0; padding: 0 16px; font-size: 11px; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer; }

/* ── panels ───────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--rule); }
.panel-head { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.panel-foot { padding: 14px 18px; border-top: 1px solid var(--rule); }
.panel-body { padding: 18px; }

/* ── home: the full-bleed reading ─────────────────────── */
.hero-x { position: relative; height: max(640px, min(100vh, 940px)); overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--rule); }
.hero-x svg.bleed { position: absolute; inset: 84px 0 0 0; width: 100%; height: calc(100% - 84px); }
.hero-x .fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--bg) 70%, transparent) 72%, var(--bg) 100%); pointer-events: none; }
.hero-copy { position: absolute; left: var(--gutter); bottom: 56px; max-width: 760px; }
.hero-copy .label { margin-bottom: 18px; display: flex; gap: 10px; align-items: center; }
.hero-copy .display { margin-bottom: 22px; }
.hero-copy .lede { margin-bottom: 28px; }
.hero-copy .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-live { position: absolute; right: var(--gutter); bottom: 56px; width: 300px; border-top: 1px solid var(--ink); }
.hero-live .row { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.hero-live .row .v { font: 600 14px/1 var(--sans); }
.hero-live .chips { margin-top: 14px; }
.hero-x .cap-tag { font: 500 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-2); }
@media (max-width: 1000px) { .hero-live { display: none; } }
@media (max-width: 720px) {
  .hero-x { height: max(600px, 92vh); }
  .hero-x svg.bleed { inset: 68px 0 0 0; height: calc(100% - 68px); }
  .hero-copy { bottom: 32px; right: var(--gutter); }
  .btn { min-width: 0; flex: 1; }
}

/* the live strip */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.strip > div { padding: 26px var(--gutter); }
.strip > div + div { border-left: 1px solid var(--rule); }
.strip .v { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; margin-top: 12px; }
@media (max-width: 720px) { .strip { grid-template-columns: 1fr 1fr; } .strip > div:nth-child(3) { border-left: 0; } .strip > div:nth-child(n + 3) { border-top: 1px solid var(--rule); } }

/* ── sections ─────────────────────────────────────────── */
.sec { padding: 112px 0; border-bottom: 1px solid var(--rule); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.sec-head .label { margin-bottom: 18px; }
.sec-head .prose { margin: 18px 0 0; }
.sec-head .n { display: none; }
@media (max-width: 720px) { .sec { padding: 72px 0; } }

.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.four > div { padding: 28px 28px 8px 0; }
.four > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.four .n { font: 500 11px/1 var(--sans); letter-spacing: 0.08em; color: var(--ink-3); }
.four h3 { margin: 40px 0 12px; font: 800 17px/1.15 var(--display); font-stretch: 125%; text-transform: uppercase; }
.four p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .four { grid-template-columns: 1fr 1fr; } .four > div:nth-child(3) { border-left: 0; padding-left: 0; } .four > div:nth-child(n + 3) { border-top: 1px solid var(--rule); } }
@media (max-width: 560px) { .four { grid-template-columns: 1fr; } .four > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); } .four h3 { margin-top: 20px; } }

/* the board, as a product grid */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.tile { display: block; }
.tile .img { position: relative; aspect-ratio: 4 / 5; background: var(--surface); overflow: hidden; }
.tile .img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .img .tag { position: absolute; left: 14px; top: 14px; }
.tile .img .sp { position: absolute; right: 14px; top: 12px; text-align: right; }
.tile .img .sp .big { font-size: 28px; }
.tile .tcap { padding: 14px 2px 26px; }
.tile .tcap .row { display: flex; justify-content: space-between; gap: 10px; }
.tile .tcap .t { font: 800 15px/1.2 var(--display); font-stretch: 125%; text-transform: uppercase; }
.tile .tcap .p { font-weight: 500; }
.tile .tcap .s { color: var(--ink-3); margin-top: 3px; font-size: 13px; }
.tile:hover .img { background: var(--surface-2); }
.tile path.l { transition: stroke-opacity 0.2s; }
.tile:hover path.l { stroke-opacity: 1; }

/* split: words on one side, a picture of the numbers on the other */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; border-bottom: 1px solid var(--rule); }
.split > div { padding: 96px var(--gutter); display: flex; flex-direction: column; justify-content: center; }
.split > .pic { background: var(--surface); border-left: 1px solid var(--rule); padding: 64px var(--gutter); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split > .pic { border-left: 0; border-top: 1px solid var(--rule); } .split > div { padding: 64px var(--gutter); } }

.totals { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); margin-top: 40px; }
.totals > div { padding: 18px 18px 0 0; }
.totals > div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.totals .v { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(26px, 3vw, 44px); line-height: 1; margin-top: 12px; }

.bars .r { display: grid; grid-template-columns: 64px 1fr 56px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.bars .r .t { font: 800 12px/1 var(--display); font-stretch: 125%; }
.bars .track { position: relative; height: 6px; }
.bars .track i { position: absolute; left: 0; top: 0; bottom: 0; }
.bars .track i.res { background: var(--ink-4); }
.bars .track i.dep { background: var(--ink); }
.bars .legend-row { display: flex; gap: 20px; margin-bottom: 16px; }
.bars .legend-row span { display: inline-flex; gap: 8px; align-items: center; }
.bars .legend-row i { width: 14px; height: 6px; display: inline-block; }

.three { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.three > div { padding: 28px 28px 0 0; }
.three > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.three h3 { font: 800 17px/1.15 var(--display); font-stretch: 125%; text-transform: uppercase; margin: 0 0 14px; }
.three p { color: var(--ink-2); margin: 0; }
@media (max-width: 820px) { .three { grid-template-columns: 1fr; } .three > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); margin-top: 28px; } }

.token dl { margin: 32px 0 0; display: grid; grid-template-columns: 140px 1fr; border-top: 1px solid var(--ink); }
.token dt, .token dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.token dt { font: 500 11px/1.6 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.token dd { font-size: 14px; word-break: break-all; }

/* ── footer: the lockup, large ────────────────────────── */
.foot-site { background: #000; color: #fff; padding: 96px 0 40px; text-align: center; margin-top: 0; }
:root[data-theme='light'] .foot-site { background: #000; color: #fff; --ink: #fff; --ink-2: rgba(255, 255, 255, 0.72); --ink-3: rgba(255, 255, 255, 0.46); --rule: rgba(255, 255, 255, 0.14); --rule-2: rgba(255, 255, 255, 0.3); --bg: #000; }
.foot-site .lock { display: inline-block; }
.foot-site .lock svg { width: 30px; height: 40px; display: block; margin: 0 auto; }
.foot-site .lock span { display: block; text-transform: uppercase; font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 44px; line-height: 1; margin-top: 12px; }
.foot-site .h2 { margin: 56px 0 10px; color: var(--ink-2); }
.foot-site .cta { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.foot-site .links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--rule); }
.foot-site .links a { color: var(--ink-2); font-size: 13px; }
.foot-site .links a:hover { color: var(--ink); }
.foot-site .fine { color: var(--ink-3); font-size: 12px; margin-top: 22px; }

/* ── tables ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { font: 500 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
table.t td { padding: 13px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
table.t td.r, table.t th.r { text-align: right; }
table.t tr.dim td { color: var(--ink-3); }
table.t tbody tr:hover td { background: var(--surface); }
table.t .sym { font: 800 14px/1 var(--display); font-stretch: 125%; text-transform: uppercase; }
.bar { position: relative; height: 6px; min-width: 120px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.bar i.res { background: var(--ink-4); }
.note { font-size: 12px; line-height: 1.6; color: var(--ink-3); margin-top: 20px; max-width: 100ch; }

/* ── inner pages ──────────────────────────────────────── */
.page-head { padding: 72px 0 40px; }
.page-head .h2 { margin-top: 18px; font-size: clamp(36px, 5.6vw, 84px); }
.page-head .prose { margin-top: 20px; }
.controls { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; padding: 22px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field input, .field select {
  height: 46px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); padding: 0 14px;
  font: 500 14px var(--sans); letter-spacing: 0.02em; border-radius: 0; min-width: 0;
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus { border-color: var(--ink); outline: none; }
.ctl-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { height: 34px; padding: 0 14px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2); font: 500 12px var(--sans); letter-spacing: 0.04em; cursor: pointer; border-radius: 0; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.combo { position: relative; }
.combo-list { position: absolute; z-index: 10; top: 100%; left: 0; right: 0; max-height: 340px; overflow: auto; background: var(--bg); border: 1px solid var(--ink); display: none; min-width: 300px; }
.combo-list.open { display: block; }
.combo-list button { display: flex; width: 100%; gap: 10px; justify-content: space-between; text-align: left; padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); cursor: pointer; font: 13px var(--sans); }
.combo-list button:hover, .combo-list button.hi { background: var(--surface-2); }
.combo-list .s { font: 800 12px var(--display); font-stretch: 125%; }

.readout { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--rule); }
.readout > div { padding: 22px 20px 22px 0; }
.readout > div + div { border-left: 1px solid var(--rule); padding-left: 20px; }
.readout .v { font-family: var(--display); font-stretch: 125%; font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.05; margin-top: 12px; overflow-wrap: anywhere; }
.readout .sub { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 980px) { .readout { grid-template-columns: repeat(2, 1fr); } .readout > div:nth-child(odd) { border-left: 0; padding-left: 0; } .readout > div:nth-child(n + 3) { border-top: 1px solid var(--rule); } }

.chart-panel { margin-top: 32px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 500 10px var(--sans); letter-spacing: 0.06em; fill: var(--ink-3); }
.chart .grid line { stroke: var(--rule); }
.chart .zero { stroke: var(--ink-3); stroke-dasharray: 2 4; }
.chart .cursor { stroke: var(--ink); stroke-width: 1; }
.chart path.vl { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
.chart path.vl.fade { stroke-opacity: 0.12 !important; }
.chart .endx { stroke: var(--ink); stroke-width: 1.5; fill: var(--bg); }
.chart .endcap { fill: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 18px; border-top: 1px solid var(--rule); }
.legend button { display: flex; gap: 10px; align-items: center; background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink-2); font: 12px var(--sans); letter-spacing: 0.02em; }
.legend button svg { width: 22px; height: 6px; }
.legend button.off { opacity: 0.3; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; margin-top: 40px; }
@media (max-width: 1060px) { .two { grid-template-columns: 1fr; } }
.ladder td.cell { text-align: right; font-size: 13px; }
.ladder td.cell.best { box-shadow: inset 0 -2px 0 var(--ink); color: var(--ink); font-weight: 600; }
.pill { display: inline-block; font: 500 10px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 7px; border: 1px solid var(--rule-2); color: var(--ink-3); }
.pill.ok { color: var(--ink); border-color: var(--ink); }
.pill.dry { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.swatch { display: inline-block; width: 18px; height: 6px; margin-right: 10px; vertical-align: 1px; }
.swatch svg { display: block; }

.side .panel + .panel { margin-top: 16px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: 13px; }
.kv .k { color: var(--ink-3); }
.kv .v { text-align: right; }

.status { display: inline-flex; align-items: center; gap: 10px; }
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: pulse 2.4s infinite; }
.status.busy .dot { background: transparent; border: 1px solid var(--ink); }
.status.err .dot { animation: none; background: transparent; border: 1px solid var(--ink-3); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.map td.cell { text-align: center; font-size: 13px; padding: 12px 8px; }
.map td.cell .v { display: block; font-weight: 600; }
.map td.cell .w { display: block; font-size: 10px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.map td.cell.wall { background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, transparent 1px 7px); color: var(--ink-3); }

/* method */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding: 24px 0 40px; }
.toc { position: sticky; top: 110px; align-self: start; }
.toc a { display: flex; gap: 12px; color: var(--ink-2); padding: 6px 0; font-size: 13px; }
.toc a span { color: var(--ink-3); width: 20px; }
.toc a:hover { color: var(--ink); }
.doc section { padding: 0 0 64px; margin-bottom: 64px; border-bottom: 1px solid var(--rule); scroll-margin-top: 110px; }
.doc section:last-child { border-bottom: 0; }
.doc h2 { font: 800 clamp(26px, 3vw, 40px)/1 var(--display); font-stretch: 125%; text-transform: uppercase; margin: 14px 0 20px; }
.doc h3 { font: 600 15px/1.3 var(--sans); margin: 36px 0 10px; }
.doc p, .doc li { color: var(--ink-2); max-width: 68ch; }
.doc .intro { font: 500 18px/1.45 var(--sans); color: var(--ink); max-width: 46ch; }
pre.code { background: var(--surface); border: 1px solid var(--rule); padding: 20px; overflow-x: auto; font: 12.5px/1.65 var(--mono); color: var(--ink); margin: 20px 0 8px; }
pre.code .c { color: var(--ink-3); }
.cap { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; gap: 24px; } .toc { display: none; } }

/* terminal */
.term { background: #000; color: #f2f2f2; border: 1px solid var(--rule-2); min-height: 64vh; padding: 20px; font: 13px/1.65 var(--mono); }
.term .out { white-space: pre-wrap; word-break: break-word; }
.term .line { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.term .ps { color: #fff; font-weight: 500; }
.term input { flex: 1; background: transparent; border: 0; color: #fff; font: inherit; outline: none; min-width: 0; }
.term .o { color: #fff; font-weight: 600; }
.term .g { color: #fff; }
.term .r { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.term .d { color: rgba(255, 255, 255, 0.45); }
.term a { color: #fff; text-decoration: underline; }

.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .status .dot { animation: none; } }

/* phones: nothing may be wider than the screen */
@media (max-width: 720px) {
  .hero-copy .display { font-size: 9.4vw; }
  .totals { grid-template-columns: 1fr; }
  .totals > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); margin-top: 14px; }
  .totals > div { padding-right: 0; }
  .strip .v { font-size: 24px; }
  .h2 { font-size: 8.6vw; }
  .page-head .h2 { font-size: 12vw; }
  .foot-site .h2 { font-size: 7vw; }
  .tile .img .sp .big { font-size: 22px; }
  .controls { grid-template-columns: 1fr; }
  .ctl-row .field { width: 100% !important; }
  .split > .pic { padding: 40px var(--gutter); }
  .token dl { grid-template-columns: 100px 1fr; }
}

.page-head + .totals { margin: 0 0 36px; }
.doc .toc a { text-decoration: none; }

/* ── motion: orders walking the depth ─────────────────── */
.hero-x svg.bleed { transition: opacity 0.45s ease; }
.hero-x svg.bleed.out { opacity: 0; }
.ln .base { fill: none; stroke: var(--ink); stroke-opacity: var(--op); stroke-linejoin: round; stroke-linecap: round; transition: stroke-opacity 0.3s, stroke-width 0.3s; }
.ln .cap { fill: var(--ink); fill-opacity: var(--op); transition: fill-opacity 0.3s; }
.ln .cap.ring { fill: var(--bg); stroke: var(--ink); stroke-opacity: var(--op); stroke-width: 1.2; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* a short bright segment travels each curve from a $10 order to the wall, then the wall pings */
.comet, .tcomet { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 0.055 1.2; stroke-dashoffset: 0.055; opacity: 0; }
.comet { animation: walk var(--dur) cubic-bezier(0.45, 0, 0.6, 1) var(--delay) infinite; }
@keyframes walk {
  0% { stroke-dashoffset: 0.055; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}
.ping { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ping var(--dur) ease-out var(--ping) infinite; }
@keyframes ping {
  0% { opacity: 0.9; transform: scale(1); }
  14% { opacity: 0; transform: scale(4.5); }
  100% { opacity: 0; transform: scale(4.5); }
}

/* hover: one seam lights up, the rest step back */
svg.bleed.hovering .ln .base { stroke-opacity: calc(var(--op) * 0.3); }
svg.bleed.hovering .ln .cap { fill-opacity: calc(var(--op) * 0.3); }
svg.bleed.hovering .fixed-tag { opacity: 0.25; }
svg.bleed .ln.hot .base { stroke-opacity: 1; stroke-width: 2.6px; }
svg.bleed .ln.hot .cap { fill-opacity: 1; stroke-opacity: 1; }
#hot-tag { transition: opacity 0.2s; }
.fixed-tag { transition: opacity 0.3s; }

/* tiles: the walk runs while you look at one */
.tile:hover .tcomet { animation: walk 2.6s cubic-bezier(0.45, 0, 0.6, 1) infinite; }

/* reduced motion (Windows turns this on with Animation effects off): the walk stays, slower and
   softer; the draw-in and the expanding pings go */
@media (prefers-reduced-motion: reduce) {
  .draw { animation: none; stroke-dashoffset: 0; }
  .ping { display: none; }
  .comet { animation-duration: calc(var(--dur) * 1.4); animation-name: walk-soft; }
  @keyframes walk-soft { 0% { stroke-dashoffset: 0.055; opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { stroke-dashoffset: -1; opacity: 0; } }
}