/* ==========================================================================
   Kairospace — Landing "flow path" stations
   Layers on top of deep-lab.css. Uses only existing design tokens.
   ========================================================================== */

/* ------------------------------------------------------------ shared ---- */

.station { position: relative; }

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }

.st-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-bright);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.st-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--teal-bright);
  opacity: .7;
}
.st-num {
  font-family: var(--font-mono);
  color: var(--muted-2);
  font-size: .72rem;
  letter-spacing: .18em;
}

/* ============================================== P&ID rail =============== */

.pid-rail {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .4rem 0;
}
.pid-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
/* live flow indicator — the water level in the schematic */
.pid-rail::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 3px;
  height: var(--flow, 0%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal));
  box-shadow: 0 0 12px rgba(63, 214, 192, .5);
  transition: height .12s linear;
}
.pid-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .58rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
}
.pid-node .pid-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--navy);
  transition: .3s;
}
.pid-node .pid-label {
  opacity: 0;
  transform: translateX(-6px);
  transition: .3s;
  white-space: nowrap;
}
.pid-rail:hover .pid-label { opacity: .75; transform: none; }
.pid-node.is-past .pid-dot { border-color: var(--teal); background: var(--teal-deep); }
.pid-node.is-on .pid-dot {
  border-color: var(--teal-bright);
  background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(63, 214, 192, .16), 0 0 14px rgba(63, 214, 192, .7);
}
.pid-node.is-on { color: var(--teal-bright); }
.pid-node.is-on .pid-label { opacity: 1; transform: none; }

@media (max-width: 1180px) { .pid-rail { display: none; } }
/* Between 1180 and 1440 px the rail sits inside the content column (x 42–157 px vs
   headings at x 64 px); the active label would overprint the section heading. Keep the
   dots, drop the labels. */
@media (max-width: 1439px) { .pid-node .pid-label { display: none; } }

/* ============================================== 00 · THE FLOW =========== */

#st-seam {
  position: relative;
  overflow: hidden;
  /* the header sits in flow above this, so the hero must never exceed the
     space actually left */
  min-height: min(84vh, calc(100vh - 7.5rem), 860px);
  display: grid;
  grid-template-rows: 1fr;
  /* The poster is the BASE state, not a fallback class: it is the guaranteed
     first paint, and the WebGL canvas fades in over it only if hero-flow
     boots. Every failure path simply never covers it. */
  background: #04141d url('/assets/hero_flow_poster.jpg') center/cover no-repeat;
}
/* injected by hero-flow.min.js */
#st-seam .flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#st-seam.flow-live .flow-canvas { opacity: 1; cursor: crosshair; }

#st-seam .seam-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The flow lives in the right half (the streamline field fades out in
     world space under the headline). Hold the headline hard on the left,
     then get out of the way entirely by ~78% across. */
  background:
    linear-gradient(90deg, rgba(4,20,29,.93) 0%, rgba(4,20,29,.74) 26%, rgba(4,20,29,.20) 55%, rgba(4,20,29,0) 78%),
    linear-gradient(0deg, rgba(4,20,29,.80) 0%, rgba(4,20,29,0) 34%);
}

/* the copy never eats a click — the water underneath is interactive */
#st-seam .container {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: center;
  padding: 4.5rem 0 2rem;
  pointer-events: none;
}
#st-seam .hero-copy { max-width: 40rem; }
#st-seam .hero-cta .btn { pointer-events: auto; }
#st-seam h1 {
  /* the 2.2rem floor is what lets the nowrap phrase below survive a 360px
     phone without clipping — raise one only with the other */
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  font-weight: 200;
  margin: 1.3rem 0;
  line-height: 1.08;
}
/* "Your water decides." is the brand line — it never breaks across lines */
#st-seam h1 b { font-weight: 500; white-space: nowrap; }
#st-seam .hero-copy > p {
  font-size: 1.2rem;
  color: var(--ink);
  opacity: .92;
  max-width: 34rem;
  margin-bottom: 2.2rem;
}
#st-seam .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* the touch hint — only exists once the canvas is live */
#st-seam .flow-hint {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity .8s ease 1.2s;
  pointer-events: none;
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(4, 20, 29, .45);
  backdrop-filter: blur(4px);
}
/* The hero is interactive and nothing said so loudly enough: the hint was 0.6rem
   of --muted-2 in a corner. Now a chip, and it breathes three times on arrival so
   the eye catches it, then settles. */
#st-seam.flow-live .flow-hint { opacity: .85; animation: hintBreathe 2.4s ease-in-out 2.2s 3; }
@keyframes hintBreathe {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  #st-seam.flow-live .flow-hint { animation: none; }
}

@media (max-width: 900px) {
  #st-seam { min-height: min(88vh, calc(100vh - 5rem)); }
  #st-seam .container { padding: 3rem 0 1.5rem; }
  #st-seam .seam-scrim {
    background:
      linear-gradient(90deg, rgba(4,20,29,.94) 0%, rgba(4,20,29,.82) 45%, rgba(4,20,29,.42) 100%),
      linear-gradient(0deg, rgba(4,20,29,.88) 0%, rgba(4,20,29,0) 42%);
  }
}

/* ============================================== 01 · THE LEAK =========== */

#st-leak .leak-intro { max-width: 58ch; color: var(--ink); opacity: .9; margin-top: 1.2rem; }

#st-leak .leak-list {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
#st-leak .leak-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 11rem;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.4rem .9rem;
  margin: 0 -.9rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, box-shadow .35s ease;
}
/* station 03 tells us which world they picked; that row lifts */
#st-leak .leak-row.is-on {
  background: rgba(63, 214, 192, .055);
  box-shadow: inset 2px 0 0 var(--teal-bright);
}
#st-leak .leak-where {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
#st-leak .leak-what { margin: 0; color: var(--ink); opacity: .92; line-height: 1.65; }
#st-leak .leak-what b { font-weight: 500; color: var(--ink-bright); opacity: 1; }
#st-leak .leak-src {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
}

@media (max-width: 860px) {
  #st-leak .leak-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.2rem .9rem;
  }
  #st-leak .leak-src { text-align: left; }
}

/* ========================================== 02 · THREE FORCES =========== */

#st-forces .forces-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.5rem;
  align-items: center;
  margin-top: 2.5rem;
}
#st-forces .forces-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
/* --- the video stage -----------------------------------------------------
   Two <video> layers cross-dissolve on tab change. The masters are square
   with a near-black surround, so a radial mask dissolves the corners into
   the page instead of parking a visible black box on the navy. The fade
   starts at 94% of the closest-side radius — outside the glowing bore rim,
   which sits at ~90% — so the mask never dims the artwork itself. */
#st-forces .forces-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 94%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 94%, transparent 100%);
}
#st-forces .forces-poster,
#st-forces .forces-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  will-change: opacity, transform;
}
/* Poster holds the frame until a real video frame has painted; JS drops
   .is-lit on it once the first layer is live. */
#st-forces .forces-poster {
  opacity: 1;
  transition: opacity .5s ease;
}
#st-forces .forces-media.is-lit .forces-poster { opacity: 0; }

/* The dissolve. Outgoing settles back and dims, incoming eases forward —
   a shallow depth cue, so it reads as the same pipe changing state rather
   than two clips swapping. */
#st-forces .forces-video {
  opacity: 0;
  transform: scale(1.035);
  filter: brightness(.72);
  transition: opacity .72s cubic-bezier(.4, 0, .2, 1),
              transform .96s cubic-bezier(.22, .61, .36, 1),
              filter .72s cubic-bezier(.4, 0, .2, 1);
}
#st-forces .forces-video.is-on {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
  z-index: 1;
}

#st-forces .forces-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 90px -20px rgba(38, 159, 146, .45) inset;
  transition: box-shadow .72s cubic-bezier(.4, 0, .2, 1);
}
/* One teal breath on the rim, timed to the dissolve. Cheap, and it stitches
   the two layers together as a single physical event. */
#st-forces .forces-stage.is-switching .forces-ring {
  box-shadow: 0 0 130px -14px rgba(63, 214, 192, .78) inset,
              0 0 42px -8px rgba(63, 214, 192, .30);
}

@media (prefers-reduced-motion: reduce) {
  /* Stills only — stations.js never assigns a src in this mode. */
  #st-forces .forces-video { display: none; }
  #st-forces .forces-media.is-lit .forces-poster { opacity: 1; }
  #st-forces .forces-poster { transition: opacity .2s linear; }
  #st-forces .forces-ring { transition: none; }
}
.force-tabs {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.6rem;
}
.force-tab {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  width: 100%;
  text-align: left;
  padding: .95rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 400;
  cursor: pointer;
  transition: .25s;
}
.force-tab:hover { border-color: var(--line-2); color: var(--ink); }
.force-tab .k {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--muted-2);
  flex: 0 0 auto;
}
.force-tab.is-on {
  border-color: rgba(63, 214, 192, .45);
  background: rgba(38, 159, 146, .1);
  color: var(--ink-bright);
}
.force-tab.is-on .k { color: var(--teal-bright); }

.force-pane { display: none; }
.force-pane.is-on { display: block; animation: fpIn .4s ease both; }
@keyframes fpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.force-pane h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.force-pane .sub {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: .9rem;
  display: block;
}
.force-pane p { color: var(--ink); opacity: .9; margin-bottom: .9rem; }
.force-pane .tags {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
}

@media (max-width: 900px) {
  #st-forces .forces-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Grid items default to min-width:auto, so wide tab rows GROW the item (and the
     page's scrollWidth) instead of scrolling inside it. min-width:0 restores the
     constraint that overflow-x needs to mean anything. */
  #st-forces .forces-grid > div { min-width: 0; }
  #st-forces .forces-stage { max-width: 320px; order: -1; }
  .force-tabs { flex-direction: row; overflow-x: auto; gap: .5rem; padding-bottom: .3rem; }
  .force-tab { white-space: nowrap; padding: .7rem .9rem; font-size: .92rem; }
}
@media (max-width: 640px) {
  /* On phones the horizontal strip hides the third tab entirely — stack instead,
     matching the desktop's vertical arrangement. */
  .force-tabs { flex-direction: column; overflow-x: visible; }
  .force-tab { white-space: normal; }
}

/* ============================================ 03 · YOUR WORLD ========== */

#st-world .world-ask {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 200;
  text-align: center;
  margin-bottom: 2rem;
}
.world-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.world-chip {
  padding: .7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .02);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  cursor: pointer;
  transition: .22s;
}
.world-chip:hover { border-color: var(--teal); color: #fff; transform: translateY(-2px); }
.world-chip.is-on {
  background: var(--grad);
  border-color: transparent;
  color: #04141d;
  font-weight: 500;
}
.world-pane { display: none; }
.world-pane.is-on { display: block; animation: fpIn .45s ease both; }
.world-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(6, 33, 46, .5);
  overflow: hidden;
}
.world-body .world-text { padding: 2.4rem; }
.world-body h3 { font-size: 1.9rem; margin-bottom: .8rem; }
.world-body p { color: var(--ink); opacity: .9; margin-bottom: 1.4rem; }
.world-figs { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.6rem; }
.world-fig .n {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.world-fig .l {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: .2rem;
}
.world-body .world-shot { position: relative; min-height: 260px; height: 100%; }
.world-body .world-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.world-body .world-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,33,46,.95), rgba(6,33,46,0) 55%);
}
.world-empty { text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; }
#st-world.has-pick .world-empty { display: none; }

@media (max-width: 900px) {
  .world-body { grid-template-columns: 1fr; }
  .world-body .world-text { padding: 1.6rem; }
  .world-body .world-shot { min-height: 180px; order: -1; }
  .world-body .world-shot::after { background: linear-gradient(0deg, rgba(6,33,46,.95), rgba(6,33,46,0) 60%); }
}

/* =========================================== 04 · PROOF LEDGER ========= */

#st-ledger .ledger-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 2rem 0 1.2rem;
}
.ledger-filter {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s;
}
.ledger-filter:hover { border-color: var(--line-2); color: var(--ink); }
.ledger-filter.is-on { border-color: var(--teal); color: var(--teal-bright); background: rgba(38, 159, 146, .12); }
.ledger-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted-2);
}
.ledger-clear {
  border: 0;
  background: none;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ledger-clear:hover { color: var(--teal-bright); }

.ledger-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .78rem;
  min-width: 720px;
}
table.ledger thead th {
  text-align: left;
  padding: .85rem 1rem;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 400;
  border-bottom: 1px solid var(--line-2);
  background: rgba(4, 20, 29, .6);
  position: sticky;
  top: 0;
}
table.ledger tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
table.ledger tbody tr:last-child td { border-bottom: 0; }
table.ledger tbody tr:hover td { background: rgba(38, 159, 146, .06); }
table.ledger .m-val { color: var(--teal-bright); white-space: nowrap; }
table.ledger .m-src { color: var(--muted); }
table.ledger .m-src a { color: var(--muted); border-bottom: 1px dotted var(--line-2); transition: color .2s; }
table.ledger .m-src a:hover { color: var(--teal-bright); border-bottom-color: var(--teal-bright); }
table.ledger .m-n { color: var(--muted-2); font-size: .72rem; }

/* The ledger is the strongest content on the page and it was a 720px-wide table
   panning inside a ~338px window on a phone. Below 640px each row becomes a card:
   metric, then the value at size, then source · tier, then the detail line. */
@media (max-width: 640px) {
  .ledger-scroll { overflow-x: visible; border: 0; border-radius: 0; }
  table.ledger { min-width: 0; display: block; }
  table.ledger thead { display: none; }
  table.ledger tbody, table.ledger tbody tr, table.ledger tbody td { display: block; width: 100%; }
  /* stations.js hides filtered rows with the `hidden` attribute; the UA rule for
     [hidden] loses to the display:block above, so restore it explicitly. */
  table.ledger tbody tr[hidden] { display: none; }
  table.ledger tbody tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: .6rem;
    background: rgba(255, 255, 255, .015);
  }
  table.ledger tbody tr:hover td { background: none; }
  table.ledger tbody td { border-bottom: 0; padding: 0; }
  table.ledger tbody td:nth-child(1) { font-size: .82rem; color: var(--ink-bright); }
  table.ledger tbody td:nth-child(2) { font-size: 1.3rem; margin: .1rem 0 .5rem; white-space: normal; }
  table.ledger tbody td:nth-child(3) { display: inline-block; width: auto; margin-right: .6rem; }
  table.ledger tbody td:nth-child(4) { display: inline-block; width: auto; }
  table.ledger tbody td:nth-child(5) { margin-top: .45rem; }
}

.tier {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
}
.tier.field { color: var(--teal-bright); border-color: rgba(63, 214, 192, .4); background: rgba(38, 159, 146, .1); }
.tier.lit { color: #8fb8c7; border-color: rgba(143, 184, 199, .3); background: rgba(143, 184, 199, .07); }
/* Independent laboratory characterization — a third party measured OUR water or
   OUR hardware, outside peer review. CLAIMS.md rule 3 makes it a tier of its
   own precisely because collapsing it into `field` overstates it and into `lit`
   wastes it, so it needs a swatch a reader cannot mistake for either: warm sand
   against the teal of `field` and the blue-grey of `lit`. */
.tier.lab { color: #d9b779; border-color: rgba(217, 183, 121, .35); background: rgba(217, 183, 121, .08); }
/* Modelled — a Kairospace calculation, not a measurement. It was badged `field`
   until 2026-08-24, which put a computed payback in the same visual class as a
   number someone read off an instrument on a customer's site. That is the one
   confusion this whole ledger exists to prevent, so it gets a fourth swatch:
   muted violet, deliberately the least authoritative of the four. */
.tier.model { color: #b3a3d6; border-color: rgba(179, 163, 214, .32); background: rgba(179, 163, 214, .07); }

.ledger-legend {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  line-height: 1.9;
  color: var(--muted-2);
  letter-spacing: .04em;
}
.ledger-legend b { color: var(--muted); font-weight: 400; }

/* ============================================= 05 · THE NUMBER ========= */

#st-number .number-wrap {
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(38, 159, 146, .14), transparent 55%),
    rgba(6, 33, 46, .6);
  padding: 2.8rem;
}
.number-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 1.4rem;
}
.number-form label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .45rem;
}
.number-form select,
.number-form input[type="number"],
.number-form input[type="text"] {
  width: 100%;
  padding: .8rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(4, 20, 29, .6);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
}
.number-form select:focus,
.number-form input:focus { outline: none; border-color: var(--teal); }
.number-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.number-fine {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem;
}
.number-fine div {
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.8;
  color: var(--muted-2);
  letter-spacing: .04em;
}
.number-fine b {
  display: block;
  color: var(--teal-bright);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .64rem;
  margin-bottom: .2rem;
}

@media (max-width: 760px) {
  #st-number .number-wrap { padding: 1.6rem; }
  .number-form { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #st-leak .leak-row { transition: none; }
  .force-pane.is-on, .world-pane.is-on { animation: none; }
}