:root {
  /* ---- THE PLATE. One vertical ombre carries the whole page: deep royal
     blue at the top where the engraving sits, paling to near white at the
     foot where the reading happens. Measured off the commissioned art:
     hue held at 220, saturation staying high even at low lightness, which
     is what keeps it royal rather than dead navy. Coral is the only warm
     thing anywhere, so it always means something. ---- */
  --void:      #06153f;
  --ground:    #0a2a6b;
  --raise:     #ffffff;
  --card:      #ffffff;
  --line-1:    #dfe5f0;
  --line-2:    #c4cee2;

  --ink:       #16233f;
  --ink-dim:   #56617d;
  /* 4.6:1 on this ground, up from 2.95:1. Eight of the eleven contrast
     failures in the audit shared this one token: stat labels on the trading
     and mining desks, the custody disclosures under every sign-in, the market
     cards' pricing rationale, and the currency unit beside a deposit field.
     A disclosure nobody can read is not a disclosure. */
  --ink-faint: #6b7385;

  /* on the dark upper third the ink inverts */
  --ink-hero:      #ffffff;
  --ink-hero-dim:  #b9c8e4;
  --ink-hero-faint:#7e93bd;

  --signal:    #f0937f;
  --signal-lo: #e0765d;
  --accent:    #8fb4dd;
  --warn:      #e8a34a;
  --glow:      rgba(240, 147, 127, 0.28);
  --grain:     0.8;

  --ink-rgb:    22, 35, 63;
  --signal-rgb: 240, 147, 127;
  --accent-rgb: 143, 180, 221;
}

/* ---- PALETTE B: BRASS. Obsidian, brass instrument, bone marble. Hue 40,
   the exact complement of the blue everyone else in this space uses. ---- */
:root[data-palette="brass"] {
  --void: #060505; --ground: #0a0908; --raise: #12100c; --card: #100e0b;
  --line-1: #241f16; --line-2: #38301f;
  --ink: #f1efe9; --ink-dim: #b1aca0; --ink-faint: #746f63;
  --signal: #dda73c; --signal-lo: #a87d2a; --accent: #cfd8dd; --warn: #e0563f;
  --glow: rgba(221, 167, 60, 0.16);
  --ink-rgb: 241, 239, 233; --signal-rgb: 221, 167, 60; --accent-rgb: 207, 216, 221;
}

/* ---- PALETTE C: MARBLE. Bone on obsidian, no accent hue at all. The
   engraving reference taken literally. Nothing to clash with. ---- */
:root[data-palette="marble"] {
  --void: #060606; --ground: #0a0a0a; --raise: #121211; --card: #101010;
  --line-1: #212120; --line-2: #33322f;
  --ink: #f3f1ec; --ink-dim: #a8a49c; --ink-faint: #6e6a62;
  --signal: #f3f1ec; --signal-lo: #8e8a82; --accent: #c9c3b6; --warn: #d9a05b;
  --glow: rgba(243, 241, 236, 0.13);
  --ink-rgb: 243, 241, 236; --signal-rgb: 243, 241, 236; --accent-rgb: 201, 195, 182;
}

:root {
  /* ---- type ---- */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- rhythm (8px base) ---- */
  /* --s5 was missing while seven rules used var(--s5). An unresolvable var()
     voids the whole declaration, so padding computed to 0 on all four sides and
     the token page and the mobile launch hero rendered under the sticky nav. */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

  --radius: 4px;
  --wrap: 1120px;
  --gutter: 24px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.16, 1, .30, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #071a4d;
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal); color: #ffffff; }

/* =====================================================================
   BACKGROUND LAYERS
   Four fixed planes, all pointer-events:none, all transform-only under
   scroll. Bottom to top: atmosphere, halftone, wall, aura.
   ===================================================================== */

.plane { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }

/* atmosphere: the field is lit from below and off to one side, so the
   page reads as a lit room rather than a black rectangle */
.atmos {
  z-index: 0;
  background:
    linear-gradient(180deg, #f2f5fa 0%, #ffffff 100%);
}

/* halftone: our own print grain. A dot lattice that thins where the
   copy lives, so texture never fights the words. */
.halftone {
  display: none;
  z-index: 0; opacity: 0.20;
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.16) 0.8px, transparent 0.9px);
  background-size: 5px 5px;
  -webkit-mask-image: radial-gradient(ellipse 66% 52% at 50% 42%, transparent 8%, #000 76%);
  mask-image: radial-gradient(ellipse 66% 52% at 50% 42%, transparent 8%, #000 76%);
  transform: translate3d(0, calc(var(--half-y, 0) * 1px), 0);
}

/* aura: one soft lime light tracking the pointer */
.aura {
  z-index: 0;
  background: radial-gradient(460px 460px at var(--sx, 50%) var(--sy, 36%),
    rgba(var(--signal-rgb), 0.07), rgba(var(--signal-rgb), 0.02) 46%, transparent 72%);
}

/* grain: an ordered dither tile, not photographic film grain. Same job as
   the reference's grain (kills banding, adds tactility) by a computational
   means rather than a photographic one. */
.grainplane {
  position: absolute; z-index: 0; opacity: var(--grain, 0.8);
  background-image: url("grain.png"); background-size: 256px 256px;
  mix-blend-mode: screen;
}

/* the wall: the thesis repeated until it is texture, with fragments that
   run real calculations and settle */
.wall {
  position: absolute;
  z-index: 0;
  inset: 0;
  /* The wall is a real layer, not a whisper. Large type, packed line on
     line, at a contrast you can actually see, then the grain sits over the
     top of it. That stack is what gives the ground its depth. */
  font-family: var(--display);
  font-family: var(--mono);
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.28;
  letter-spacing: 0.01em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.085);
  overflow: hidden; user-select: none; word-break: break-word;
  transform: translate3d(0, calc(var(--wall-y, 0) * 1px), 0);
  text-transform: lowercase;
  /* it fades out where the copy lives and toward the foot of the page */
  /* the wall lives on the dark top and dissolves as the ground pales,
     exactly as it does on the plate */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,0.4) 56%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,0.4) 56%, transparent 76%);
}
/* the rare fragment that glitches brighter, like a bad scan line */
.wall .wg { color: rgba(255, 255, 255, 0.17); }
/* fixed width computation slots, so a fragment can churn through a
   calculation without reflowing the wall around it */
/* A computation slot is not an overlay. It inherits the wall's exact font,
   size, weight and tracking, so when a phrase morphs into an identity it
   reads as the wall itself computing, not as something pasted on top of
   it. The width is pinned in ch so the surrounding text never reflows. */
.wall .wd {
  display: inline-block;
  /* the withdraw panel's .wd (perps, 5 Oct) shares this class: none of its box reaches the wall */
  padding: 0;
  border: 0;
  gap: 0;
  font: inherit;
  letter-spacing: inherit;
  white-space: pre;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
  color: inherit;
  transition: color 500ms var(--ease-out), opacity 500ms var(--ease-out);
}
.wall .wd.decoding { color: rgba(255, 255, 255, 0.30); }

/* registration marks: the viewport as an instrument */
.reg, .reg-tick { position: fixed; z-index: 40; pointer-events: none; display: none; }
.reg { width: 13px; height: 13px; border: 0 solid rgba(var(--ink-rgb), 0.34); }
.reg-tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.reg-tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.reg-bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.reg-br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.reg-tick { top: 50%; width: 7px; height: 1px; background: rgba(var(--ink-rgb), 0.26); }
.reg-ml { left: 12px; } .reg-mr { right: 12px; }

/* the scroll meter: a hairline down the left edge with a lime tick that
   rides the page. The instrument reading itself. */
.meter {
  display: none;
  position: fixed; left: 12px; top: 15%; bottom: 15%; width: 1px;
  background: rgba(var(--ink-rgb), 0.12); z-index: 40; pointer-events: none;
}
.meter::after {
  content: ""; position: absolute; left: -2px; width: 5px; height: 34px;
  background: var(--signal-lo); border-radius: 3px;
  top: calc(var(--read, 0) * (100% - 34px));
}

/* =====================================================================
   SHELL
   ===================================================================== */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hero .wrap, .sect .wrap, .foot .wrap, .nav-in { position: relative; z-index: 1; }

/* ---- nav: thin, mono, always honest about launch state ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.nav[data-stuck="true"] {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--line-1);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; gap: var(--s3);
}
.nav-mark {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.nav-mark svg { width: 22px; height: 22px; flex: none; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.nav-links a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.nav-links a:hover { color: var(--signal); }

/* =====================================================================
   TYPE
   ===================================================================== */

/* the mono eyebrow that labels every block, Harmonic-school editorial
   discipline rendered in our own palette */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s3);
}
.eyebrow > span:first-child { color: var(--signal-lo); }
.eyebrow .rule { flex: 1; height: 1px; background: var(--line-1); max-width: 120px; }

h1 {
  font-family: var(--display);
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.02;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
h1 .glow { font-style: italic; color: var(--signal); }

/* headlines gain weight as they take the stage. Variable axis only, so
   the letters breathe without moving a single pixel of layout. */
h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 400;
  font-variation-settings: "wght" var(--hw, 400);
  letter-spacing: -0.008em;
  line-height: 1.1;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
h3 {
  font-family: var(--display); font-size: 23px; font-weight: 500;
  letter-spacing: -0.012em; margin: 0 0 var(--s1); color: var(--ink);
}

.lede { font-size: 18px; color: var(--ink-dim); max-width: 58ch; margin: 0 0 var(--s4); line-height: 1.55; }
.body { color: var(--ink-dim); max-width: 66ch; margin: 0 0 var(--s2); }
.body-lg { font-size: 17.5px; color: var(--ink-dim); max-width: 62ch; margin: 0 0 var(--s3); line-height: 1.6; }
.mono { font-family: var(--mono); }

/* word-by-word reveal.
   THE WORDS ARE SIMPLY THERE. They used to start at opacity 0 and wait for
   main.js to set data-written, so nothing was on screen until 418KB of
   JavaScript had run. Replacing that with a CSS fade only shortened the wait:
   a 620ms fade from nothing to the headline is still a wait, and it is the
   blue a visitor was looking at.
   So the default is visible. The reveal is still available to the script,
   which can set the starting state itself and let the transition below carry
   it, but nothing now stands between arriving and reading the page. */
.w {
  display: inline-block;
  transition: opacity 620ms var(--ease-out), filter 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--w-delay, 0ms);
}
[data-written="true"] .w { opacity: 1; filter: blur(0); transform: none; }

/* =====================================================================
   HERO
   ===================================================================== */

.hero {
  padding: var(--s8) 0 var(--s12); position: relative; margin-top: -68px; padding-top: 100px;
  /* the ombre is page anchored, not viewport anchored: it runs once, from
     the dark head where the engraving sits down to the pale ground where
     the reading happens */
  background:
    linear-gradient(180deg,
      #071a4d 0%,
      #0e3079 22%,
      #1d4794 44%,
      #3b68a9 60%,
      #7c9cc6 72%,
      #a9bcda 80%,
      rgba(200, 212, 233, 0.75) 87%,
      rgba(222, 230, 243, 0.4) 93%,
      rgba(242, 245, 250, 0) 100%);
}
/* the foot of the ombre dissolves into the page's own ground over the last
   fifth of the hero, so the seam between the sky and the reading is a fade
   and never a line, whatever the ground's shade is at that height */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; pointer-events: none;
  background: linear-gradient(180deg, rgba(242, 245, 250, 0) 0%, rgba(246, 248, 252, 0.55) 55%, rgba(248, 250, 253, 0.9) 100%);
}
/* the hero sits on the dark head of the ombre, so its type inverts */
.hero h1, .nav-mark { color: var(--ink-hero); }
.hero .lede, .hero .body { color: #cfdcf1; }
.hero .lede a { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.55); }
.hero .lede a:hover { text-decoration-color: var(--signal); }
.hero .eyebrow, .hero .btn-reason, .plate-cap { color: #b3c4e2; }
.hero .eyebrow .rule { background: rgba(255,255,255,0.22); }
.hero .ca-row { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); }
.hero .ca-label { color: #cfdcf1; }
.hero .btn-ghost { color: var(--ink-hero); border-color: rgba(255,255,255,0.34); }
.hero .btn-ghost:hover { border-color: var(--signal); color: var(--signal); }
.nav-links a { color: var(--ink-hero-faint); }
.nav-links a:hover { color: var(--ink-hero); }
.nav[data-stuck="true"] .nav-links a { color: var(--ink-faint); }
.nav[data-stuck="true"] .nav-mark { color: var(--ink); }
.hero-grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
}

/* the agent: a point cloud on canvas, the face carved out as absence */
.plate {
  position: relative; display: grid; place-items: center;
  min-height: 460px; isolation: isolate;
}
.plate .appa { position: absolute; inset: 0; width: 100%; height: 100%; }
#appa-back { z-index: 0; }
#appa-front { z-index: 2; pointer-events: none; }
.bust {
  position: relative; z-index: 1;
  width: 76%; max-width: 460px; height: auto; display: block;
  /* the plate is lit from behind, so the engraving carries a faint halo */
  filter: drop-shadow(0 0 44px rgba(120, 170, 255, 0.30));
}
.plate-cap {
  position: absolute; z-index: 3; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); text-align: center; max-width: 96%;
}


/* ---- contract row ---- */
.ca-row {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  padding: 13px var(--s2); margin: 0 0 var(--s3);
  font-family: var(--mono); font-size: 13px;
}
.ca-label { color: var(--ink-faint); letter-spacing: 0.1em; }
.ca { color: var(--warn); overflow-wrap: anywhere; }
.ca-row[data-state="live"] .ca { color: var(--signal); word-break: break-all; }

/* ---- buttons ---- */
.cta-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.btn {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.09em;
  padding: 11px 20px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), transform 200ms var(--ease-spring),
              box-shadow 200ms var(--ease-out);
}
.btn-solid { background: var(--signal-lo); color: #ffffff; border-color: var(--signal-lo); font-weight: 600; }
.btn-solid:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(224, 118, 93, 0.30); }
.btn-ghost:hover { border-color: var(--signal-lo); color: var(--signal-lo); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
/* The compute tab explains itself before it asks for a signature. */
.cp-how { display: grid; gap: var(--s2); margin: 22px 0 26px; }
@media (min-width: 860px) { .cp-how { grid-template-columns: repeat(2, 1fr); } .cp-infer-card { grid-column: 1 / -1; } }
.cp-infer-card { border-left: 3px solid var(--signal, #c25c47); }
.cp-infer-card code { font-size: 12.5px; padding: 1px 5px; border: 1px solid var(--line-1); border-radius: 5px; overflow-wrap: anywhere; }
.cp-how-card { padding-bottom: 18px; }
.cp-steps { margin: 12px 0 10px; padding-left: 20px; display: grid; gap: 9px; }
.cp-steps li { font-size: 14px; line-height: 1.55; }
.cp-steps li b { color: var(--ink); }
@media (max-width: 720px) { .cp-steps li { font-size: 13.5px; } }

/* Small enough to sit inside a row of a book without breaking its rhythm. */
.btn-sm { padding: 6px 12px; font-size: 12px; letter-spacing: 0.01em; }
.pf-row .btn-sm + .btn-sm { margin-left: 6px; }

.btn-reason { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }

/* ---- the X mark ----
   Drawn at the wordmark's published proportions and inheriting currentColor,
   so it takes the button's own state (ghost, solid, disabled, hover) instead
   of carrying a second palette onto the page. Sized in em so it tracks the
   label optically rather than being pinned to a pixel height. */
.xmark { width: 1.02em; height: 1.02em; flex: none; display: block; }
.xlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
  text-decoration: none; transition: color 200ms var(--ease-out);
}
.xlink:hover { color: var(--signal-lo); }
.xlink[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.foot-social { margin: var(--s2) 0 var(--s3); }
/* the contract address lives at the foot of the page, beside the fine print, where a reader who wants it looks for it */
.foot .ca-row { max-width: 74ch; margin: 0 0 var(--s3); }

/* ---- allocation bars ----
   One row per basket, width proportional to its weight. The bar IS the
   number, so a glance answers what a table would make you read. */
.alloc-bars { padding: var(--s3); display: grid; gap: 10px; }
.alloc-bar { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; }
.alloc-bar .k { color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.alloc-bar .track { height: 8px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.07); overflow: hidden; }
.alloc-bar .fill { height: 100%; border-radius: 99px; background: var(--signal-lo); transition: width 600ms var(--ease-out); }
.alloc-bar[data-basket="burn"] .fill { background: var(--signal-lo); }
.alloc-bar[data-basket="lp"] .fill { background: rgba(var(--ink-rgb), 0.55); }
.alloc-bar[data-basket="rwa"] .fill { background: rgba(var(--ink-rgb), 0.32); }
.alloc-bar[data-basket="reserve"] .fill { background: rgba(var(--ink-rgb), 0.16); }
.alloc-bar .v { color: var(--ink); min-width: 84px; text-align: right; }
.gate { font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-1); color: var(--ink-faint); letter-spacing: 0.08em; }
.gate[data-on="true"] { color: var(--signal-lo); border-color: var(--signal-lo); }
@media (max-width: 560px) { .alloc-bar { grid-template-columns: 62px 1fr; } .alloc-bar .v { grid-column: 2; text-align: left; } }

/* =====================================================================
   SECTIONS
   ===================================================================== */

.sect { padding: var(--s12) 0; position: relative; }
.sect + .sect { border-top: 1px solid var(--line-1); }

/* ---- process cards ---- */
.grid-3 { display: grid; gap: var(--s2); margin-top: var(--s6); }
@media (min-width: 860px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0.76));
  padding: var(--s3);
  position: relative; overflow: hidden;
  /* focus is written per frame: the card at the center of the viewport
     is the subject, the rest recede */
  opacity: calc(0.88 + var(--focus, 0) * 0.12);
  transform: translate3d(0, calc(var(--drift, 0) * 1px), 0);
  transition: border-color 260ms var(--ease-out);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--signal-rgb), calc(var(--focus, 0) * 0.07)), transparent 55%);
}
.card:hover, .card:focus-visible { border-color: var(--signal); }
.card:focus-visible { outline: 1px solid var(--signal); outline-offset: 2px; }
.card-bar {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint);
  display: flex; align-items: center; gap: 8px;
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line-1);
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-lo); flex: none; }
.card p { color: var(--ink-dim); margin: 0 0 var(--s1); font-size: 15px; }
.card-foot {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
  border-top: 1px dashed var(--line-1); padding-top: var(--s2); margin-top: var(--s2);
}
/* the timestamp sits at the far end of the card bar; on a narrow screen it
   wraps under the label rather than squeezing it */
.card-when { margin-left: auto; letter-spacing: 0.06em; text-transform: none; }
/* each process card carries its own gate state, read from /health, so the
   present tense in the copy is never louder than the truth */
.pid-state {
  margin-left: auto; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.1em;
  border: 1px solid var(--line-1); color: var(--ink-faint);
}
.pid-state[data-on="true"] { color: var(--signal-lo); border-color: var(--signal-lo); }
.card-link { margin: 0; font-family: var(--mono); font-size: 12px; }
.card-link a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid transparent; }
.card-link a:hover { border-bottom-color: currentColor; }
/* the feed and hive panels hold their own cards, so they carry the padding
   the row lists would otherwise provide */
#posts-col { padding: var(--s3); gap: var(--s3); margin-top: 0; }
#posts-panel .card { background: rgba(255, 255, 255, 0.55); }
@media (max-width: 560px) {
  .card-bar { gap: 6px; }
  .card-when { margin-left: 0; flex-basis: 100%; }
}

/* ---- data panels: proof ledger + telemetry ---- */
.panel {
  margin-top: var(--s4);
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.74); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-1);
  padding: 11px var(--s2);
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.panel-note {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  padding: 11px var(--s2); margin: 0; border-top: 1px solid var(--line-1);
}
.panel[data-state="offline"] .panel-note { color: var(--warn); }

.rows { list-style: none; margin: 0; padding: 6px 0; }
.rows li {
  display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s2);
  align-items: baseline; padding: 8px var(--s2);
  font-family: var(--mono); font-size: 12.5px;
}
.rows li:nth-child(odd) { background: rgba(var(--ink-rgb), 0.028); }
.rows .q { color: var(--signal-lo); }
.rows .q.bad { color: var(--warn); }
.rows .c { color: var(--ink); overflow-wrap: anywhere; }
.rows .c small { display: block; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.rows .t { color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.panel[data-state="offline"] .rows { display: none; }

/* a lean-verified row wears the mint accent, so machine-checked and
   numerically-checked are never confused at a glance */
.rows .badge {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px;
  margin-left: 8px; white-space: nowrap;
}
.badge-lean { color: var(--accent); }
.badge-qed { color: var(--ink-faint); }

/* telemetry grid */
.tele-grid { display: grid; gap: 1px; background: var(--line-1); }
@media (min-width: 700px) { .tele-grid { grid-template-columns: repeat(3, 1fr); } }
.tele-cell { background: var(--card); padding: var(--s2); display: flex; flex-direction: column; gap: 6px; }
.tele-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); }
.tele-v { font-family: var(--mono); font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.panel[data-state="offline"] .tele-v { color: var(--ink-faint); }

/* ---- the divergence curve ---- */
.divergence { width: 100%; max-width: 100%; margin-top: var(--s4); display: block; overflow: visible; }
.div-axis { fill: none; stroke: var(--line-2); stroke-width: 1.2; }
.dg  { stroke: var(--line-1); stroke-width: 1; }
.dg2 { stroke: var(--line-1); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; }
.dt  { fill: var(--ink-faint); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; }
.dm  { stroke: var(--signal); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.72; }
.dp  { fill: var(--signal); }
.dl  { fill: var(--ink); font-family: var(--mono); font-size: 11px; }
.dah { fill: var(--signal); }
.dl2 { fill: var(--signal-lo); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.da  { stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: 0.75; }
.div-curve {
  fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--div-len, 1400);
  stroke-dashoffset: calc(var(--div-len, 1400) * (1 - var(--div-p, 0)));
}

/* ---- theorem box ---- */
.theorem-box {
  border-left: 2px solid var(--signal);
  background: linear-gradient(90deg, rgba(var(--signal-rgb), 0.06), transparent 70%);
  padding: var(--s3); margin: var(--s4) 0;
}
.theorem-box p { margin: 0 0 var(--s1); color: var(--ink); font-size: 16px; }
.thm-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--signal-lo); text-transform: uppercase; }
.theorem-box .proof { color: var(--ink-faint); font-family: var(--mono); font-size: 13px; margin: 0; }

/* ---- the tape ---- */
.tape-stage {
  margin-top: var(--s4); border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.7); overflow: hidden;
}
#tape-canvas { width: 100%; height: 420px; display: block; }
@media (max-width: 640px) { #tape-canvas { height: 280px; } }

/* ---- the flywheel ---- */
.wheel-stage { display: grid; place-items: center; margin: var(--s6) 0 var(--s4); }
.wheel { width: min(620px, 100%); height: auto; overflow: visible; }
.wheel text { font-family: var(--mono); text-anchor: middle; }
.w-disc-back, .w-disc-front { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.w-spin {
  fill: none; stroke: rgba(var(--signal-rgb), 0.26); stroke-width: 1.2;
  stroke-dasharray: 3 15; stroke-dashoffset: calc(var(--wheel-spin, 0) * 1px);
}
.w-node circle { fill: var(--ground); stroke: var(--signal-lo); stroke-width: 1.6; }
.w-node.back circle { stroke: var(--line-2); }
.w-node.hot circle { fill: var(--signal-lo); stroke: var(--signal-lo); }
.w-pulse, .w-pulse-tail { fill: none; stroke: var(--signal-lo); stroke-linecap: round; }
.w-pulse { stroke-width: 3.4; stroke-dasharray: 1.6 98.4; stroke-dashoffset: calc(var(--wheel-dash, 0) * -1); }
.w-pulse-tail { stroke-width: 2; opacity: 0.34; stroke-dasharray: 13 87; stroke-dashoffset: calc(var(--wheel-tail, 0) * -1); }
.w-chip rect { fill: var(--raise); stroke: var(--line-2); stroke-width: 1; }
.w-chip line { stroke: var(--line-2); stroke-width: 1; }
.w-chip text { fill: var(--ink-dim); font-size: 11.5px; letter-spacing: 0.05em; }
.w-chip.hot rect { stroke: var(--signal-lo); }
.w-chip.hot text { fill: var(--signal-lo); }
.w-chip-burn.hot rect { stroke: var(--warn); }
.w-chip-burn.hot text { fill: var(--warn); }
.w-eye-b { animation: eyeblink 3.4s steps(1) infinite; }
@keyframes eyeblink { 0%, 88%, 100% { opacity: 1; } 90%, 96% { opacity: 0.08; } }
.w-hub-cap { fill: var(--ink-faint); font-size: 11.5px; }

/* ---- the feed ---- */
.feed-col { display: grid; gap: var(--s2); margin-top: var(--s4); }
.post p { font-size: 15.5px; color: var(--ink); }

/* =====================================================================
   FOOTER
   ===================================================================== */

.foot { border-top: 1px solid var(--line-1); padding: var(--s8) 0 var(--s12); }
.foot-mark { display: flex; align-items: center; gap: 11px; margin-bottom: var(--s3); }
.foot-mark svg { width: 30px; height: 30px; }
.foot-name { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.fine { color: var(--ink-faint); font-size: 13.5px; max-width: 74ch; margin: 0 0 var(--s2); }

/* =====================================================================
   MOTION PREFERENCES
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .w { opacity: 1; filter: none; transform: none; transition: none; animation: none; }
  .card { opacity: 1; transform: none; }
  .w-eye-b { animation: none; }
  .div-curve { stroke-dashoffset: 0; }
}

/* =====================================================================
   MOBILE
   Desktop section padding reads as dead air on a phone, and the
   background masks have to cover a full-width copy column.
   ===================================================================== */

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .hero { padding: var(--s4) 0 var(--s6); }
  .sect { padding: var(--s6) 0; }
  .foot { padding: var(--s6) 0 var(--s8); }
  body { font-size: 15px; }
  .lede { font-size: 17px; }
  .body-lg { font-size: 16px; }
  .plate { min-height: 380px; }
  .bust { width: 84%; max-width: 320px; }
  .meter { display: none; }
  .wall { font-size: 30px; }
  .wall, .halftone {
    -webkit-mask-image: radial-gradient(ellipse 150% 42% at 50% 40%, rgba(0,0,0,0.2), #000 86%);
    mask-image: radial-gradient(ellipse 150% 42% at 50% 40%, rgba(0,0,0,0.2), #000 86%);
  }
  .rows li { grid-template-columns: 16px 1fr; }
  .rows .t { display: none; }
  /* EXCEPT ON THE PERP BOARD, WHERE THE VERDICT IS THE COLUMN. Every other
     row's right column is a timestamp or a figure the sub-line repeats, so
     dropping it on a phone loses nothing. Here it is the answer to the only
     question the board is asked — would the desk take this — and hiding it
     left a reader to infer a decision from a triangle. */
  #perps-rows .t { display: block; font-size: 11px; align-self: center; white-space: nowrap; }
  #perps-rows li { grid-template-columns: 16px 1fr auto; gap: 8px; }
}

/* ---------------- the explainer ---------------- */
/* Four live computations. Each panel is a canvas that only runs while it
   is on screen, so four simultaneous animations cost one rAF. */
.wave-grid { display: grid; gap: var(--s2); margin-top: var(--s6); }
@media (min-width: 820px) { .wave-grid { grid-template-columns: 1fr 1fr; gap: var(--s3); } }

.wave {
  margin: 0;
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  padding: var(--s2) var(--s2) var(--s3);
  display: flex; flex-direction: column;
}
.wave figcaption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line-1);
}
.wave-n { color: var(--signal-lo); }
.wave canvas { width: 100%; height: 250px; display: block; }
.wave-read {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  margin: var(--s2) 0 var(--s1); min-height: 1.2em;
  /* the number changes every frame, so it must never reflow the panel */
  font-variant-numeric: tabular-nums;
}
.wave-note { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .wave canvas { height: 170px; } }

/* ---------------- tabbed views ---------------- */
.view[hidden] { display: none; }
.nav-links a.on { color: var(--ink-hero); }
.nav[data-stuck="true"] .nav-links a.on { color: var(--signal-lo); }
.nav-links a { position: relative; padding-bottom: 3px; }
.nav-links a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--signal);
}
.nav-links a.nav-cta.on::after { display: none; }

@media (max-width: 760px) {
  /* the tabs become the primary control on a phone, so they stay visible
     and scroll horizontally rather than collapsing into a hidden menu */
  /* the CTA leaves the scrolling tab strip and sits beside the mark, so it
     is never parked off the right edge where nobody scrolls to find it */
  /* a bar that sits over the page has to be light and opaque, not a translucent
     slab: less padding, a hairline underneath, and a solid ground once stuck so
     the text underneath never ghosts through it */
  .nav-in { position: relative; flex-wrap: wrap; gap: var(--s1) var(--s2); padding: 7px var(--gutter); }
  .nav[data-stuck="true"] { background: var(--paper, #fff); border-bottom: 1px solid var(--line-1); box-shadow: 0 1px 0 rgba(0,0,0,0.03); }
  html { scroll-padding-top: 52px; }
  .sect { scroll-margin-top: 52px; }
  .nav-links a.nav-cta { position: absolute; top: 8px; right: var(--gutter); }
  .nav-links button.nav-wallet { position: absolute; top: 8px; right: calc(var(--gutter) + 58px); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .nav-links {
    margin-left: 0; width: 100%; gap: var(--s2);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { display: block; white-space: nowrap; font-size: 12.5px; color: var(--ink-dim); }
  /* the small mono labels: section names, panel titles, figure captions.
     10.5 to 12px in the faint grey read as texture, not as words. */
  .eyebrow { font-size: 13px; }
  .eyebrow > span:not(:first-child):not(.rule) { color: var(--ink-dim); }
  .hero .eyebrow > span:not(.rule), .hero-launch .eyebrow > span:not(.rule),
  .hero-income .eyebrow > span:not(.rule), .hero-record .eyebrow > span:not(.rule) { color: var(--signal-lo); }
  .panel-head { font-size: 13px; color: var(--ink-dim); }
  .plate-cap { font-size: 12px; color: var(--ink-dim); }
  .card-bar { font-size: 12.5px; }
  .nav-links a.nav-cta { padding: 7px 12px; }
  .nav-links button.nav-wallet { padding: 7px 12px; font-size: 11px; }
  .nav-mark span { font-size: 11.5px; }
  .hero { margin-top: 0; padding-top: var(--s4); }
  .rows li { grid-template-columns: 16px 1fr; }
  .rows .t { display: none; }
  .wave canvas { height: 210px; }
  #tape-canvas { height: 260px; }
}

.fine a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.fine a:hover { border-bottom-color: var(--signal-lo); }

/* ---- THE CLAIM DESK ----
   Four steps down one column, numbered, each one dimming itself until the
   one above it is done. The dimming is the whole interaction design: there
   is no wizard, no page changes, nothing appears or disappears under the
   cursor. You can see every step you have not reached yet, which is what
   makes a flow that moves real securities feel like something you are in
   control of rather than something happening to you. */
/* [hidden] loses to any display rule, so an element with display:grid on it
   stays on screen when a script sets .hidden. That put the whole four-step
   claim flow in front of a US visitor who had just been told they cannot
   claim. This rule is the site-wide guard, and the steps below additionally
   hide off a data attribute so nothing depends on specificity. */
[hidden] { display: none !important; }

.claim-deck { margin-top: var(--s4); }
.claim-panel .claim-body { padding: var(--s3) var(--s2); display: grid; gap: 4px; }
.claim-panel[data-blocked="true"] .claim-body { display: none; }
.claim-step {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--s2);
  padding: var(--s2) 0; border-top: 1px solid var(--line-1);
  opacity: 1; transition: opacity 240ms var(--ease-out);
}
.claim-step:first-child { border-top: 0; padding-top: 0; }
/* a step whose turn has not come is legible but visibly not yours yet */
.claim-step[data-ready="false"] { opacity: 0.42; }
.claim-n {
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink-faint);
  font-family: var(--mono); font-size: 12px;
}
.claim-step[data-done="true"] .claim-n { border-color: var(--signal-lo); color: var(--signal-lo); }
.claim-c h3 { margin: 3px 0 6px; font-size: 15px; letter-spacing: -0.01em; }
.claim-c p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.claim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.claim-addr {
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.claim-check {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; padding: 7px 0;
  font-size: 13px; color: var(--ink-dim); line-height: 1.5; cursor: pointer;
}
.claim-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--signal-lo); }
.claim-check:hover span { color: var(--ink); }
.claim-rows { padding: 0; }
.claim-rows:empty { display: none; }
.claim-rows li { grid-template-columns: 1fr auto; padding-left: 0; padding-right: 0; }
.claim-rows .c small { display: block; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.claim-rows .t { color: var(--ink); }
.claim-rows .t.good { color: var(--signal-lo); }
.claim-rows .t.bad { color: var(--warn); }

/* the region wall replaces the steps rather than sitting under them, so a
   blocked visitor never scrolls past a button they cannot press */
.claim-wall .claim-body { padding: var(--s3) var(--s2); display: grid; gap: var(--s2); }
.claim-wall p { margin: 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.6; }
.claim-wall strong { color: var(--ink); }
.claim-fine { margin-top: var(--s4); font-size: 14px; color: var(--ink-dim); }

@media (max-width: 560px) {
  .claim-step { grid-template-columns: 24px 1fr; gap: 12px; }
  .claim-n { width: 22px; height: 22px; font-size: 11px; }
}

/* the recorded-acceptance line under the attestations */
.claim-fine-print {
  margin: 4px 0 0; font-family: var(--mono); font-size: 11px;
  color: var(--ink-faint); line-height: 1.5;
}

/* ── the launch desk form ─────────────────────────────────────────────── */
/* The first form on the site outside the claim desk's checkboxes, so the
   input idiom is established here: mono, quiet borders, the signal colour
   only on focus. The refusal reason renders in the panel note, in prose,
   because the desk's reason is the interface. */
.launch-form { display: grid; gap: 14px; padding: 18px 20px 6px; }
.launch-form label { display: grid; gap: 6px; }
.launch-form label > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: lowercase; color: var(--ink-faint);
}
.launch-form input {
  background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.4;
  padding: 10px 12px; border-radius: 6px; outline: none; width: 100%;
  box-sizing: border-box;
}
.launch-form input:focus { border-color: var(--signal-lo); }
/* selects dress like the inputs and never widen the form: a long option
   label is clipped with an ellipsis instead of pushing the panel off a phone */
.launch-form select {
  background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.4;
  padding: 10px 12px; border-radius: 6px; outline: none; width: 100%; min-width: 0; max-width: 100%;
  box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.launch-form select:focus { border-color: var(--signal-lo); }
.launch-form select:disabled, .launch-form input:disabled { color: var(--ink-faint); opacity: .8; }
.launch-form input::placeholder { color: var(--ink-faint); opacity: .7; }
.launch-form .claim-actions { margin-top: 4px; }
@media (min-width: 720px) {
  .launch-form { grid-template-columns: 1fr 1fr; }
  .launch-form .claim-actions { grid-column: 1 / -1; }
}

/* ============ the wallet launcher ============ */
/* The form lives inside a claim step, which already pads — strip the form's
   own outer padding there so the grid lines up with the step copy. */
.claim-c .launch-form { padding: 6px 0 0; }
.claim-c .launch-form label:first-child { grid-column: auto; }
.wl-logo-row { grid-column: 1 / -1; }
.wl-logo-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wl-logo-ctl input[type="url"] { flex: 1 1 220px; min-width: 0; }
.wl-logo-btn { white-space: nowrap; }
.wl-logo-preview {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line-2); background: var(--bg-2, transparent);
}
/* the fee handle: an input and a Check button on one line, and under them a
   verdict line that is always present so the form does not jump when it
   fills. It spans the grid like the logo row, a verdict needs the width. */
.wl-handle-row { grid-column: 1 / -1; }
.wl-handle-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wl-handle-ctl input { flex: 1 1 220px; min-width: 0; }
.wl-handle-btn { white-space: nowrap; }
.wl-handle-say { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.5; min-height: 1.2em; overflow-wrap: anywhere; }
.wl-handle-say[data-state="ok"] { color: var(--signal-lo); }
.wl-handle-say[data-state="bad"] { color: var(--warn); }
@media (max-width: 560px) { .wl-handle-ctl input { flex-basis: 100%; } }

/* ============ route an existing coin's fees to an x handle ============ */
.rt-body { display: grid; gap: 4px; }
.rt-lede { margin: 0; padding: 16px 20px 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; max-width: 70ch; }
.rt-form { padding-bottom: 0; }
.rt-actions { padding: 12px 20px 0; }
.rt-say { margin: 10px 20px 16px; min-height: 1.2em; overflow-wrap: anywhere; }
.rt-say[data-state="ok"] { color: var(--signal-lo); }
.rt-say[data-state="bad"] { color: var(--warn); }
.rt-form input[readonly] { color: var(--ink-dim); }
#rt-panel { margin-top: var(--s3); }
.wl-x-copy { padding: 18px 20px 6px; margin: 0; color: var(--ink-dim, var(--ink)); line-height: 1.65; }
.wl-tweet {
  font-family: var(--mono); font-size: 13px; color: var(--signal-lo);
  border: 1px dashed var(--line-2); border-radius: 6px; padding: 2px 8px;
  overflow-wrap: anywhere;
}
.claim-rows .t a, .rows .t a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid transparent; }
.claim-rows .t a:hover, .rows .t a:hover { border-bottom-color: var(--signal-lo); }
#wl-cost-note, #wl-go-note, #wl-form-note { min-height: 1.2em; }
@media (max-width: 560px) {
  .wl-logo-ctl input[type="url"] { flex-basis: 100%; }
  .claim-rows li { grid-template-columns: 1fr; }
  .claim-rows .t { text-align: left; padding-top: 2px; }
}
/* the landing lists drop their value column on a phone (a decorative tag),
   but a cost row's value IS the row: the fee, the dev buy, the all-in. On a
   phone it sits under its label instead of vanishing. */
@media (max-width: 760px) {
  .claim-rows .t, #wl-mine-rows .t { display: block; }
}
.wl-claim-btn { font-size: 12px; padding: 6px 12px; margin-bottom: 4px; }
.wl-fee-note { display: block; color: var(--signal-lo); font-size: 11px; margin-top: 3px; min-height: 1em; }
#wl-mine-rows .t { text-align: right; }
@media (max-width: 560px) { #wl-mine-rows .t { text-align: left; } }
/* your portfolio across every desk: one row per desk, the figures under the
   desk's name, the link to its tab on the right; on a phone the link drops
   under the row and the whole row is one column. */
/* ── everything you hold, across every desk (the dashboard) ──────────────
   One card per desk that holds something of the wallet's, in the dashboard's
   own card language; a strip of plain counts above them (never a total, since
   ETH, USDG and dollars do not sum); an amber row for a desk that could not be
   read, which is never shown as empty; and a row of chips for the desks that
   hold nothing, so the page says it looked at every one. A card is one thumb
   target that opens its desk; a figure inside it can carry its own link. */
.yp-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-dim); max-width: 72ch; }
.yp-head { display: grid; grid-template-columns: 6px 1fr; gap: 10px; align-items: start; flex: 1 1 auto; min-width: 0; }
.yp-head .dot { margin-top: 5px; }
.yp-for { margin-left: auto; flex: none; letter-spacing: 0; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.yp-connect { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.yp-connect .btn { min-height: 44px; }
.yp-or { font: 400 12px/1.4 var(--mono); color: var(--ink-faint); }

.yp-sum { display: grid; gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: 11px; overflow: hidden; margin-bottom: 14px; grid-template-columns: repeat(4, 1fr); }
.yp-s { background: var(--card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.yp-s strong { font: 600 22px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.yp-s small { font: 400 10.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.yp-s[data-k="unread"][data-n="0"] strong { color: var(--ink-faint); }
.yp-s[data-k="unread"]:not([data-n="0"]) strong { color: var(--warn); }

.yp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.yp-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 44px;
  border: 1px solid var(--line-1); border-radius: 11px; padding: 14px 15px 13px;
  background: rgba(var(--ink-rgb), 0.02);
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.yp-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--signal-lo); }
.yp-card:hover { transform: translateY(-1px); border-color: var(--line-2); box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.08); }
.yp-card:focus-within { border-color: var(--signal-lo); }
.yp-stretch { position: absolute; inset: 0; z-index: 0; border-radius: 11px; }
.yp-stretch:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 2px; }
.yp-card-k { display: flex; align-items: baseline; gap: 10px; }
.yp-desk { font: 500 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.yp-go { margin-left: auto; font: 400 11px/1 var(--mono); color: var(--signal-lo); white-space: nowrap; opacity: .8; transition: opacity 140ms; }
.yp-card:hover .yp-go { opacity: 1; }
.yp-fig { display: block; font: 600 18px/1.25 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.yp-fig-sub { display: block; font: 400 12px/1.45 var(--mono); color: var(--ink-faint); overflow-wrap: anywhere; }
.yp-more { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.yp-more li { font: 500 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.yp-more li small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-faint); }
.yp-card a:not(.yp-stretch) { position: relative; z-index: 1; color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.yp-card a:not(.yp-stretch):hover { color: var(--signal-lo); border-bottom-color: var(--signal-lo); }
.yp-card-note { display: block; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-1); font: 400 11.5px/1.45 var(--mono); color: var(--ink-faint); overflow-wrap: anywhere; }

/* while the desks are being read: three quiet placeholders, never an empty page */
.yp-card.yp-skel { min-height: 118px; pointer-events: none; }
.yp-card.yp-skel::before { background: var(--line-2); }
.yp-skel i { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(var(--ink-rgb), .06) 25%, rgba(var(--ink-rgb), .12) 50%, rgba(var(--ink-rgb), .06) 75%); background-size: 200% 100%; animation: yp-shimmer 1.4s linear infinite; }
.yp-skel i:nth-child(1) { width: 38%; } .yp-skel i:nth-child(2) { width: 70%; height: 18px; margin-top: 8px; } .yp-skel i:nth-child(3) { width: 55%; margin-top: 8px; }
@keyframes yp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .yp-skel i { animation: none; } .yp-card, .yp-card:hover { transition: none; transform: none; } }

.yp-unread { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.yp-ur { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(232, 163, 74, .45); border-radius: 11px; background: rgba(232, 163, 74, .07); color: var(--ink); text-decoration: none; font: 400 12.5px/1.45 var(--mono); }
.yp-ur .q { color: var(--warn); }
.yp-ur b { font-weight: 600; margin-right: 6px; }
.yp-ur span.w { color: var(--ink-dim); overflow-wrap: anywhere; }
.yp-ur .yp-go { opacity: 1; }
.yp-unread .yp-retry { align-self: flex-start; min-height: 40px; padding: 8px 14px; font-size: 12px; }

.yp-empty { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-1); }
.yp-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yp-chips > small { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.yp-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-1); border-radius: 99px; font: 500 11.5px/1 var(--mono); color: var(--ink-dim); text-decoration: none; background: var(--card); transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.yp-chip:hover { border-color: var(--signal-lo); color: var(--signal-lo); }
.yp-chip[data-state="closed"] { color: var(--ink-faint); border-style: dashed; }
.yp-chip[data-state="locked"] { color: var(--ink-dim); border-color: var(--line-2); background: transparent; }

@media (max-width: 760px) { .yp-sum { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .yp-grid { grid-template-columns: 1fr; }
  .yp-s strong { font-size: 20px; }
  .yp-card { padding: 14px 14px 12px; }
  .yp-go { font-size: 11px; }
  .yp-chip { min-height: 40px; }
  .yp-ur { grid-template-columns: 18px 1fr; }
  .yp-ur .yp-go { grid-column: 2; }
}

/* ============ the launch hero: the light-blue head ============ */
.hero-launch {
  margin-top: -68px; padding: 128px 0 var(--s6);
  background: linear-gradient(180deg,
    #3f6cb0 0%, #4875b6 36%, #5885c0 62%, #7ba0ce 80%, #b4c7e1 92%, #f2f5fa 100%);
}
.hero-launch h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-launch .lede { color: #eef4fc; max-width: 58ch; }
.hero-launch .eyebrow { color: #dce8f8; }
.hero-launch .eyebrow .rule { background: rgba(255,255,255,0.30); }
.wl-hero-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .wl-hero-grid { grid-template-columns: 1.25fr 1fr; } }
.wl-plate { position: relative; min-height: 300px; }
#wl-appa { width: 100%; height: 340px; display: block; }
.wl-plate .plate-cap {
  text-align: center; color: #ffffff; margin-top: -6px;
  text-shadow: 0 1px 10px rgba(27,54,102,0.55);
}
@media (max-width: 760px) {
  .hero-launch { padding: 108px 0 var(--s5); }
  #wl-appa { height: 250px; }
  .wl-plate { min-height: 250px; }
}
/* the stat chips: the terms, worn on the hero */
.wl-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s3); }
.wl-stats:empty { display: none; }
.wl-stat {
  font-family: var(--mono); font-size: 12px; color: #f4f8fd;
  border: 1px solid rgba(255,255,255,0.45); background: rgba(21,45,88,0.42);
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
}
.wl-stat strong { color: #ffffff; font-weight: 600; }

/* ============ readability: state you can actually read ============ */
/* "Connected" is a DONE state, not a disabled one — full contrast. */
.btn-done, .btn-done:disabled, .btn-done[disabled] {
  opacity: 1; background: rgba(var(--signal-rgb), 0.14);
  color: var(--signal-lo); border-color: var(--signal-lo); font-weight: 600;
}
.claim-actions .claim-addr { color: var(--ink); }
.launch-form label > span { color: var(--ink-dim); }
.claim-c p, .panel-note { color: var(--ink-dim); }
#wl-panel .panel-note, #wl-form-note, #wl-cost-note, #wl-go-note { font-size: 12.5px; }

/* ============ nav: the wallet, the hot tab, the phone ============ */
.nav-wallet { white-space: nowrap; }
/* the connect BUTTON misses the .nav-links a color rules, so over the dark
   hero it was navy-on-navy — invisible until hover. Same treatment as the
   follow link: hero-white until the nav sticks, ink after. */
.nav-links .nav-wallet { color: var(--ink-hero); border-color: rgba(255,255,255,0.34); }
.nav-links .nav-wallet:hover { border-color: var(--signal); color: var(--signal); }
.nav[data-stuck="true"] .nav-links .nav-wallet { color: var(--ink); border-color: var(--line-2); }
.nav[data-stuck="true"] .nav-links .nav-wallet:hover { border-color: var(--signal-lo); color: var(--signal-lo); }
.nav-links .nav-wallet.btn-done, .nav[data-stuck="true"] .nav-links .nav-wallet.btn-done { color: var(--signal); border-color: var(--signal); background: rgba(var(--signal-rgb), 0.16); }
/* connect and follow read as nav words, not as boxes: no border, no fill, over the hero and on the light bar alike.
   A connected wallet keeps its tint as a state. Inside the open phone menu they are rows like the others and keep the
   rows' own styling, so these rules stop there. */
.nav:not([data-menu="open"]) .nav-links .nav-cta, .nav[data-stuck="true"]:not([data-menu="open"]) .nav-links .nav-cta,
.nav:not([data-menu="open"]) .nav-links .nav-cta:hover, .nav[data-stuck="true"]:not([data-menu="open"]) .nav-links .nav-cta:hover { border-color: transparent; background: transparent; padding-left: 8px; padding-right: 8px; }
.nav:not([data-menu="open"]) .nav-links .nav-wallet.btn-done, .nav[data-stuck="true"]:not([data-menu="open"]) .nav-links .nav-wallet.btn-done { background: rgba(var(--signal-rgb), 0.16); }
.nav-links a[data-tab="launch"] {
  color: #ffffff; background: var(--signal-lo);
  border: 1px solid var(--signal-lo); border-radius: 999px; padding: 5px 12px;
}
.nav-links a[data-tab="launch"]:hover { background: var(--signal); border-color: var(--signal); color: #ffffff; }
.nav[data-stuck="true"] .nav-links a[data-tab="launch"] { color: #ffffff; }
@media (max-width: 760px) {
  /* the follow label shrinks to the X mark so the pinned pair stays compact */
  .nav-cta[data-link="x"] span { display: none; }
  /* the claim-fees column must survive the mobile row collapse */
  #wl-mine-rows li, #wl-x-rows li { grid-template-columns: 16px 1fr; }
  #wl-mine-rows .t, #wl-x-rows .t { display: block; text-align: left; grid-column: 2; padding-top: 4px; }
}
.rows .c small a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.rows .c small a:hover { color: var(--signal-lo); border-bottom-color: var(--signal-lo); }
.wl-focus { border-color: var(--signal-lo); box-shadow: 0 8px 30px rgba(var(--signal-rgb), 0.14); }
.wl-focus-body { padding: 16px 20px 18px; display: grid; gap: 14px; }
.wl-focus-ca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wl-focus-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); }
.wl-focus-ca code {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: rgba(var(--ink-rgb), 0.05); border: 1px solid var(--line-2);
  border-radius: 6px; padding: 6px 10px; overflow-wrap: anywhere; flex: 1 1 260px; min-width: 0;
}
@media (max-width: 560px) { .wl-focus-ca code { flex-basis: 100%; } }

/* ============ the token page ============ */
.hero-token { padding: 92px 0 var(--s5); }
.tk-head { display: flex; align-items: center; gap: 18px; margin-top: 6px; }
.tk-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid rgba(255,255,255,0.5); flex: none; }
.hero-token h2 { margin: 0; font-size: clamp(28px, 4.5vw, 44px); }
.tk-price { margin: 6px 0 0; font-family: var(--mono); font-size: clamp(17px, 2.6vw, 24px); color: #ffffff; }
.tk-price-unit { color: #dbe6f5; font-size: 0.65em; margin-left: 6px; }
.tk-chart-wrap { padding: 12px 14px 4px; overflow: hidden; }
#tk-chart { display: block; width: 100%; height: 240px; }
#tokendesk .panel { margin-top: var(--s3); }
@media (max-width: 560px) {
  .tk-head { gap: 12px; }
  .tk-logo { width: 48px; height: 48px; }
  #tk-chart { height: 200px; }
}
.wl-x-out { margin-left: auto; font-size: 11px; padding: 5px 10px; }

/* ============ mobile nav: the hamburger ============ */
.nav-burger { display: none; }
@media (max-width: 760px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    position: absolute; top: 50%; right: calc(var(--gutter) - 10px); transform: translateY(-50%);
    width: 44px; height: 44px; padding: 12px 10px;
    background: transparent; border: 0; border-radius: 999px; box-shadow: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-burger:active { background: rgba(var(--signal-rgb), 0.10); }
  .nav-burger:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 2px; }
  /* the bar holds the mark and the burger on one line, tall enough that the
     button never hangs below it */
  .nav-in { min-height: 56px; align-items: center; padding: 6px var(--gutter); }
  html { scroll-padding-top: 58px; }
  .sect { scroll-margin-top: 58px; }
  .nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 180ms var(--ease-out), opacity 180ms; }
  .nav[data-stuck="false"] .nav-burger { border: 0; }
  .nav[data-stuck="false"] .nav-burger span { background: var(--ink-hero); }
  .nav[data-menu="open"] .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav[data-menu="open"] .nav-burger span:nth-child(2) { opacity: 0; }
  .nav[data-menu="open"] .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* the pinned pair slides left of the burger */
  .nav .nav-links a.nav-cta { right: calc(var(--gutter) + 50px); }
  .nav .nav-links button.nav-wallet { right: calc(var(--gutter) + 110px); }

  /* the tab strip becomes a dropdown sheet under the bar */
  .nav .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    width: auto; margin: 0; padding: 6px var(--gutter) 12px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #f7f9fc; border-bottom: 1px solid var(--line-2);
    box-shadow: 0 18px 34px rgba(22, 35, 63, 0.14);
    overflow: visible;
  }
  /* THE OPEN MENU IS A PANEL, NOT A DROPDOWN THAT BLEEDS. It used to be a
     flex block with no bottom edge and no backdrop, so the page showed
     straight through beneath it and the connect/X buttons, pinned to the
     top-right of the bar, sat on top of the first link. Now it fills the
     screen below the bar on a solid ground, scrolls on its own, and the
     wallet controls become ordinary rows at the end of the list. */
  .nav[data-menu="open"] .nav-links {
    display: flex; flex-direction: column; gap: 0;
    /* NOWRAP IS LOad BEARING. A column flex container with a stated height
       and flex-wrap:wrap does not scroll when it overflows — it lays the
       rest out in a SECOND COLUMN, off the right edge of the screen, where
       there is nothing to scroll to. That is why the sheet could not be
       scrolled through: the tabs were not below the fold, they were beside
       it. */
    flex-wrap: nowrap;
    /* the bar has a backdrop-filter, which makes a fixed child position itself
       against the bar rather than the viewport: bottom:0 then means the bar's
       bottom and the panel collapses to one row. So the height is stated
       outright, from the bar's measured edge to the bottom of the screen. */
    /* INSET RATHER THAN A COMPUTED HEIGHT. On a phone the browser chrome
       collapses as you scroll, so 100dvh changes mid gesture and a panel
       sized from it resizes underneath your thumb. Pinning the bottom edge to
       the real bottom of the screen is immune to that. This only works once
       the bar's backdrop-filter is off (below): a filtered ancestor becomes
       the containing block for a fixed child, which is what forced the
       computed height in the first place. */
    position: fixed; left: 0; right: 0; top: var(--nav-h, 64px); bottom: 0;
    height: auto;
    background: var(--paper, #fff); border-top: 1px solid var(--line-1);
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 6px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
    z-index: 60; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
  /* THE ROWS WERE NOT SCROLLING AWAY, THEY WERE BEING CRUSHED.
     This is a column flex container with a bounded height and overflow-y:auto,
     and a flex child defaults to flex-shrink:1. So once the tabs were taller
     than the panel, the browser did exactly what it was told: it shrank them
     to fit instead of letting them overflow. Rows lost their height, text
     clipped, and whole tabs vanished the moment you tried to scroll past
     them. Nothing in the sheet may shrink. */
  .nav[data-menu="open"] .nav-links > *,
  .nav[data-menu="open"] .nav-group,
  .nav[data-menu="open"] .nav-menu,
  .nav[data-menu="open"] .nav-links > a {
    flex: 0 0 auto; min-height: 0;
  }
  /* a filtered ancestor captures fixed positioning, so the filter comes off
     while the sheet is open; the bar is solid anyway with the panel under it */
  .nav[data-menu="open"] {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--paper, #fff);
  }
  /* ================= THE SHEET, WRITTEN FOR THE GROUPS ==================
     The tabs were a flat row of links when this panel was designed. They are
     five named groups now, each a button and a menu of its own, and none of
     that markup existed when these rules were written: the groups fell
     through as unstyled divs and the menus kept the absolute positioning
     they use as desktop dropdowns.
     On a phone a dropdown inside a sheet is a second tap for nothing, so
     every group is simply a heading with its rows underneath, all open. */
  .nav[data-menu="open"] .nav-group { display: block; width: 100%; }
  .nav[data-menu="open"] .nav-group-btn {
    display: flex; width: 100%; justify-content: flex-start;
    /* a heading, not a control: it opens nothing, so it takes no taps */
    pointer-events: none; cursor: default;
    margin: 14px 0 2px; padding: 0 2px 6px; background: none; border: 0;
    border-bottom: 1px solid var(--line-1);
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-dim);
  }
  .nav[data-menu="open"] .nav-group-btn.on { color: var(--signal); }
  .nav[data-menu="open"] .nav-group-btn.on::after { display: none; }
  .nav[data-menu="open"] .nav-chev { display: none; }
  /* the menus stop being dropdowns and become plain lists in the flow */
  .nav[data-menu="open"] .nav-menu {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; display: block; width: auto; min-width: 0;
    margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
    box-shadow: none;
    /* in the sheet the menus are lists in the flow; the sheet itself scrolls */
    max-height: none; overflow: visible;
  }
  .nav[data-menu="open"] .nav-menu::before, .nav[data-menu="open"] .nav-group::after { display: none; }
  /* one row per destination, tall enough for a thumb */
  .nav[data-menu="open"] .nav-links .nav-menu a {
    display: block; width: 100%; padding: 13px 2px; font-size: 14.5px;
    border-bottom: 1px solid var(--line-1); border-radius: 0; background: none;
  }
  .nav[data-menu="open"] .nav-links .nav-menu a:last-child { border-bottom: 0; }
  .nav[data-menu="open"] .nav-links .nav-menu a b { display: block; font-weight: 500; font-size: 14.5px; color: inherit; }
  /* the one-line descriptions are for a desktop dropdown. Sixteen of them
     turn a sheet you can scan into a page you have to read. */
  .nav[data-menu="open"] .nav-links .nav-menu a i { display: none; }
  .nav[data-menu="open"] .nav-links .nav-menu a.on,
  .nav[data-menu="open"] .nav-links .nav-menu a.on b { color: var(--signal); background: none; }

  .nav[data-menu="open"] .nav-links > a { font-size: 15px; padding: 15px 2px; border-bottom: 1px solid var(--line-1); }
  .nav[data-menu="open"] .nav-links a { font-size: 14px; padding: 15px 2px; border-bottom: 1px solid var(--line-1); }
  .nav[data-menu="open"] .nav-links a.on::after { display: none; }
  .nav[data-menu="open"] .nav-links a.on { color: var(--signal); }
  .nav[data-menu="open"] .nav-links a.nav-cta,
  .nav[data-menu="open"] .nav-links button.nav-wallet {
    position: static; order: 99; width: 100%; max-width: none; margin-top: 8px;
    text-align: center; border-bottom: 0;
  }
  /* in the sheet the follow link gets its word back and sits like the
     connect row above it, glyph and label centred, instead of a tall empty
     box with a mark in the corner */
  .nav[data-menu="open"] .nav-links .nav-cta[data-link="x"] { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
  .nav[data-menu="open"] .nav-links .nav-cta[data-link="x"] span { display: inline; }
  .nav[data-menu="open"] .nav-links .nav-wallet { text-align: center; }
  .nav[data-menu="open"] .nav-links .nav-cta[data-link="x"] .xmark { width: 15px; height: 15px; }
  body:has(.nav[data-menu="open"]) { overflow: hidden; }
  /* the chat bubble is z-index 61 against the sheet's 60, so while the menu
     was open it sat on top of the last rows. It has nothing to do while the
     menu is up, so it stands down until the menu closes. */
  body:has(.nav[data-menu="open"]) .hx-chat { display: none; }
  .nav .nav-links a {
    display: block; padding: 13px 4px; font-size: 13px;
    color: var(--ink); border-bottom: 1px solid rgba(22, 35, 63, 0.08);
  }
  .nav .nav-links a:last-of-type { border-bottom: 0; }
  .nav .nav-links a.on { color: var(--signal-lo); }
  .nav .nav-links a[data-tab="launch"] { border: 0; border-radius: 0; padding: 13px 4px; background: transparent; color: var(--signal-lo); font-weight: 600; }
  /* the stuck-nav desktop rule paints this link white for the solid pill;
     in the dropdown sheet the pill is gone, so white on the light sheet was
     invisible. Match that selector's specificity here so the sheet wins. */
  .nav[data-stuck="true"] .nav-links a[data-tab="launch"] { color: var(--signal-lo); background: transparent; }
  /* connect + follow stay pinned in the BAR, not in the sheet */
  .nav .nav-links .nav-cta, .nav .nav-links .nav-wallet { position: absolute; }
}
.wl-fees-to { display: block; color: var(--ink-dim); font-size: 11.5px; margin-top: 3px; font-family: var(--mono); }
.wl-redir { display: flex; gap: 8px; margin-top: 8px; align-items: center; max-width: 460px; }
.wl-redir input {
  flex: 1; min-width: 0; background: transparent; border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--mono); font-size: 12.5px;
  padding: 8px 10px; border-radius: 6px; outline: none;
}
.wl-redir input:focus { border-color: var(--signal-lo); }
.wl-redir-btn, .wl-redir-save { font-size: 12px; padding: 6px 12px; }

/* ============ the engine control: one glance, one tap ============ */
.wl-engine {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(var(--signal-rgb), 0.05);
}
.wl-eng-toggle {
  flex: none; width: 46px; height: 26px; border-radius: 999px; padding: 0;
  border: 1px solid var(--line-2); background: rgba(var(--ink-rgb), 0.10);
  position: relative; cursor: pointer; transition: background 180ms var(--ease-out);
}
.wl-eng-toggle.on { background: var(--signal-lo); border-color: var(--signal-lo); }
.wl-eng-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 180ms var(--ease-spring);
}
.wl-eng-toggle.on .wl-eng-knob { transform: translateX(20px); }
.wl-eng-copy { flex: 1 1 200px; min-width: 0; font-size: 12.5px; color: var(--ink-dim); }
.wl-eng-copy strong { color: var(--ink); }
.wl-eng-levels { display: inline-flex; gap: 4px; }
.wl-eng-levels[hidden] { display: none; }
.wl-eng-lvl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-dim);
}
.wl-eng-lvl.on { border-color: var(--signal-lo); color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.12); }
.wl-eng-lvl:disabled { opacity: 0.4; cursor: default; }
.wl-eng-note { flex-basis: 100%; font-size: 11px; color: var(--warn); }
.wl-eng-note:empty { display: none; }

/* engine control panel — the full machine, kept legible */
.wl-eng-head { display: flex; align-items: center; gap: 10px; flex-basis: 100%; }
.wl-eng-panel { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; flex-basis: 100%; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.wl-eng-panel[hidden] { display: none; }
.wl-eng-f { display: flex; flex-direction: column; gap: 4px; }
.wl-eng-f > span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint); text-transform: lowercase; }
.wl-eng-f input {
  width: 64px; background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 13px; padding: 6px 8px; border-radius: 6px; outline: none;
}
.wl-eng-f input:focus { border-color: var(--signal-lo); }
.wl-eng-f em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.wl-eng-fee input, .wl-eng-every input { width: 56px; }
.wl-eng-fee, .wl-eng-every { flex-direction: row; align-items: center; gap: 6px; }
.wl-eng-split { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(var(--ink-rgb),0.03); }
.wl-eng-actions { display: flex; align-items: center; gap: 10px; flex-basis: 100%; }
.wl-eng-save { font-size: 12px; padding: 7px 14px; }
.wl-eng-sum { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.wl-eng-sum.bad { color: var(--warn); }

/* ============ the product showcase ============ */
.sect-product { position: relative; }
.sect-product h2 { text-wrap: balance; }
.prod-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal-lo); margin: var(--s5) 0 0; display: flex; align-items: center; gap: 12px;
}
.prod-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.prod-grid { margin-top: var(--s2); }
.prod-card { display: flex; flex-direction: column; }
.prod-card h3 { margin: 2px 0 8px; }
.prod-card p { flex: 1; }
.prod-card .card-bar { color: var(--ink-faint); text-transform: none; letter-spacing: .02em; }
.prod-card .card-foot a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid transparent; }
.prod-card .card-foot a:hover { border-bottom-color: currentColor; }
.prod-cta { margin-top: var(--s6); display: flex; gap: 12px; flex-wrap: wrap; }

/* clickable launched-token rows → the coin page */
.rows li.row-link { cursor: pointer; transition: background 140ms var(--ease-out); }
.rows li.row-link:hover { background: rgba(var(--signal-rgb), 0.06); }
.row-go { color: var(--signal-lo); font-size: 11px; opacity: 0; transition: opacity 140ms; }
.rows li.row-link:hover .row-go { opacity: 1; }
@media (max-width: 760px) { .row-go { display: block; opacity: 1; } }

/* Aristotle's liquidity placement — the reasoned range, made visible */
.alloc-placement { align-items: start; }
.alloc-placement .c strong { color: var(--signal-lo); }
.alloc-placement .c small { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.alloc-placement-meta { color: var(--ink-faint) !important; font-family: var(--mono); font-size: 10.5px !important; letter-spacing: .02em; }

/* ============ the liquidity tab: the reasoned band ============ */
.liq-panel .liq-body { padding: 20px; }
.liq-figure { margin: 10px 0 30px; }
.liq-stage { position: relative; height: 190px; }
.liq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.liq-stage .liq-lo, .liq-stage .liq-hi {
  top: -10px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--signal-lo);
  background: var(--card); border: 1px solid rgba(var(--signal-rgb), 0.4);
  padding: 2px 8px; border-radius: 999px;
}
.liq-stage .liq-price { bottom: -24px; }
@media (max-width: 640px) { .liq-stage { height: 150px; } }
.liq-track { position: relative; height: 64px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(var(--ink-rgb),0.05), rgba(var(--ink-rgb),0.02) 50%, rgba(var(--ink-rgb),0.05));
  border: 1px solid var(--line-2); }
.liq-band { position: absolute; top: 0; bottom: 0; border-radius: 6px;
  background: rgba(var(--signal-rgb),0.07);
  border-left: 1px dashed rgba(var(--signal-rgb),0.55); border-right: 1px dashed rgba(var(--signal-rgb),0.55); }
.liq-depth { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.liq-depth-fill { fill: rgba(var(--signal-rgb),0.20); }
.liq-depth-line { fill: none; stroke: var(--signal-lo); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(var(--signal-rgb),0.35)); }
.liq-mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--signal-lo); transform: translateX(-1px); opacity: .85; }
.liq-price { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--signal-lo); letter-spacing: .08em; }
.liq-lo, .liq-hi { position: absolute; top: -20px; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); }
.liq-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.liq-chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px;
  border: 1px solid var(--line-2); border-radius: 8px; background: rgba(var(--signal-rgb),0.04); }
.liq-chip small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.liq-chip strong { font-size: 14px; color: var(--ink); }
.liq-reason { color: var(--ink-dim); font-size: 15px; line-height: 1.6; margin: 0; }
.liq-how { margin-top: var(--s5); }
.liq-cta { margin-top: var(--s5); border-color: var(--signal-lo); }
.liq-cta-body { padding: 16px 20px 20px; }
.liq-cta-body p { color: var(--ink-dim); margin: 0 0 14px; line-height: 1.6; }

/* ============ the USDG desk ============ */
.ud-desk { margin-top: var(--s5); }
.ud-body { padding: 18px 20px 20px; }
.ud-lede { color: var(--ink-dim); line-height: 1.65; margin: 0 0 16px; max-width: 62rem; }
.ud-markets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ud-chip {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-dim);
  display: inline-flex; align-items: baseline; gap: 6px;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.ud-chip small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); }
.ud-chip:hover { border-color: var(--signal-lo); color: var(--ink); }
.ud-chip.on { border-color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.08); color: var(--ink); }
.ud-chip.on small { color: var(--signal-lo); }
.ud-preview { margin-bottom: 16px; }
.ud-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.ud-amt {
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px; background: rgba(var(--signal-rgb), 0.03);
  flex: 1 1 220px; max-width: 340px;
}
.ud-amt span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); }
.ud-amt input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 16px; padding: 12px 0; outline: none;
  font-variant-numeric: tabular-nums;
}
.ud-form .btn { flex: 0 0 auto; }
.ud-mine { margin-top: 18px; border-top: 1px solid var(--line-1); }
.ud-mine-head { border-bottom: 0; padding-left: 0; padding-right: 0; }
.ud-list { list-style: none; margin: 0; padding: 0; }
.ud-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid var(--line-1);
  font-size: 14px;
}
.ud-list li:last-child { border-bottom: 0; }
.ud-pos-sym { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.ud-pos-amt { font-variant-numeric: tabular-nums; color: var(--ink); }
.ud-pos-band { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.ud-list li[data-open="false"] { opacity: .55; }
.ud-pos-closed { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-left: auto; }
.ud-exit { margin-left: auto; padding: 6px 16px; font-size: 12.5px; }
@media (max-width: 560px) {
  .ud-body { padding: 14px 14px 16px; }
  .ud-amt { max-width: none; flex-basis: 100%; }
  .ud-form .btn { flex: 1 1 auto; }
  .ud-exit { margin-left: 0; flex-basis: 100%; }
  .ud-pos-closed { margin-left: 0; }
}

/* ============ the USDG desk: pools board + easy flow ============ */
.ud-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.ud-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--signal-lo); color: var(--signal-lo); font-size: 11px; }
.ud-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ud-mode { flex: 1 1 240px; text-align: left; cursor: pointer; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  display: flex; flex-direction: column; gap: 3px; transition: border-color 140ms, background 140ms; }
.ud-mode strong { font-size: 15px; }
.ud-mode small { color: var(--ink-dim); font-size: 12.5px; line-height: 1.4; }
.ud-mode:hover { border-color: var(--signal-lo); }
.ud-mode.on { border-color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.07); }
.ud-mode.on strong { color: var(--signal-lo); }
.ud-table { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.ud-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--line-1); transition: background 120ms; }
.ud-row:last-child { border-bottom: 0; }
.ud-row:hover { background: rgba(var(--signal-rgb), 0.045); }
.ud-row[data-on="true"] { background: rgba(var(--signal-rgb), 0.08); }
.ud-row[data-dead="1"] { cursor: default; opacity: .55; }
.ud-row[data-dead="1"]:hover { background: transparent; }
.ud-check { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; border: 1px solid var(--line-2); position: relative; }
.ud-row[data-on="true"] .ud-check { border-color: var(--signal-lo); background: var(--signal-lo); }
.ud-row[data-on="true"] .ud-check::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ud-sym { font-family: var(--mono); font-size: 13.5px; color: var(--ink); min-width: 64px; display: flex; align-items: baseline; gap: 6px; }
.ud-sym small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.ud-cell { display: flex; flex-direction: column; gap: 1px; min-width: 86px; }
.ud-cell small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ud-cell strong { font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ud-cell-band { margin-left: auto; text-align: right; }
.ud-dead { color: var(--ink-faint); font-size: 12.5px; }
.ud-go-row { margin-top: 6px; }
.ud-go-row .btn { min-width: 200px; }
.ud-pos-state { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--ink-dim); }
.ud-pos-state[data-state="earning"] { border-color: var(--signal-lo); color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.07); }
.ud-pos-state[data-state="filled"] { border-color: var(--signal-lo); color: var(--signal-lo); }
@media (max-width: 720px) {
  .ud-row { flex-wrap: wrap; gap: 8px 14px; }
  .ud-cell { min-width: 72px; }
  .ud-cell-band { margin-left: 0; text-align: left; flex-basis: 100%; }
  .ud-go-row .btn { width: 100%; }
}

/* ============ landing: the liquidity desk section ============ */
.sect-liquidity h2 { text-wrap: balance; }
.home-liq { margin-bottom: var(--s5); }
.home-liq-body { padding: 16px 20px 18px; }
.home-liq .liq-stats { margin-bottom: 12px; }

/* ============ strategy vaults: objectives + risk badges ============ */
.ud-objectives { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ud-obj { text-align: left; cursor: pointer; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  display: flex; flex-direction: column; gap: 4px; transition: border-color 140ms, background 140ms; }
.ud-obj strong { font-size: 15px; }
.ud-obj small { color: var(--ink-dim); font-size: 12px; line-height: 1.45; }
.ud-obj:hover { border-color: var(--signal-lo); }
.ud-obj.on { border-color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.07); }
.ud-obj.on strong { color: var(--signal-lo); }
.ud-risk { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--mono);
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); }
.ud-risk small { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.ud-risk[data-tier="low"] { color: #2e7d54; border-color: rgba(46,125,84,.4); background: rgba(46,125,84,.07); }
.ud-risk[data-tier="moderate"] { color: #8a6d1a; border-color: rgba(138,109,26,.4); background: rgba(138,109,26,.07); }
.ud-risk[data-tier="elevated"] { color: var(--signal-lo); border-color: rgba(var(--signal-rgb),.45); background: rgba(var(--signal-rgb),.07); }
.ud-risk[data-tier="high"] { color: #b3372f; border-color: rgba(179,55,47,.45); background: rgba(179,55,47,.08); }
.ud-pools-glance { opacity: .8; }
.ud-pools-glance .ud-row { cursor: default; pointer-events: none; }
.ud-pools-glance .ud-check { visibility: hidden; }

/* ── the risk engine board, on the vaults tab ───────────────────────── */
.vre-body { padding: 18px 20px 20px; }
.vre-factors {
  list-style: none; margin: 18px 0 22px; padding: 0;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.vre-f {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2);
}
.vre-w {
  font: 600 13px/1 var(--mono); color: var(--accent);
  min-width: 2.1em; text-align: right; font-variant-numeric: tabular-nums;
}
.vre-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vre-c strong { font-size: 13px; font-weight: 600; }
.vre-c small { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

.vre-board { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.vre-row {
  display: grid; align-items: center; gap: 10px 14px;
  grid-template-columns: 8.5em 7.6em 1fr 15em;
  grid-template-areas: "sym score bar exec" ". why why why";
  padding: 12px 14px; border-top: 1px solid var(--line);
}
.vre-row:first-child { border-top: 0; }
.vre-sym { grid-area: sym; font: 600 14px/1 var(--mono); display: flex; align-items: baseline; gap: 6px; }
.vre-sym small { font: 400 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.vre-score {
  grid-area: score; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font: 700 18px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.vre-score small { font: 400 10px/1.2 var(--sans); letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; }
.vre-score[data-tier="low"] { color: #1c7c4a; }
.vre-score[data-tier="moderate"] { color: #8a6a12; }
.vre-score[data-tier="elevated"] { color: #a8541c; }
.vre-score[data-tier="high"] { color: #a32b25; }
.vre-bar { grid-area: bar; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.vre-bar i { display: block; height: 100%; border-radius: 99px; background: currentColor; }
.vre-row[data-tier="low"] .vre-bar i { background: #1c7c4a; }
.vre-row[data-tier="moderate"] .vre-bar i { background: #b08a1e; }
.vre-row[data-tier="elevated"] .vre-bar i { background: #c9691f; }
.vre-row[data-tier="high"] .vre-bar i { background: #b8352e; }
.vre-exec { grid-area: exec; font: 500 12px/1.4 var(--mono); color: var(--ink-2); text-align: right; }
.vre-why { grid-area: why; font-size: 12px; color: var(--ink-3); line-height: 1.45; }

@media (max-width: 720px) {
  .vre-row {
    grid-template-columns: auto 1fr;
    grid-template-areas: "sym score" "bar bar" "exec exec" "why why";
    gap: 8px 12px;
  }
  .vre-score { flex-direction: row; align-items: baseline; gap: 7px; justify-self: end; }
  .vre-exec { text-align: left; }
}

/* ── the creator dashboard ──────────────────────────────────────────── */
.cd-body { padding: 18px 20px 20px; }
.cd-signin p { max-width: 60ch; color: var(--ink-dim); }
.cd-who { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cd-handle { font: 600 15px/1 var(--mono); }
.cd-wallet { font: 400 12px/1 var(--mono); color: var(--ink-faint); }
.cd-out { margin-left: auto; padding: 4px 10px; font-size: 12px; }

.cd-coins { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cd-coin { border: 1px solid var(--line-1); border-radius: 11px; padding: 14px 15px; background: rgba(var(--ink-rgb), 0.02); }
.cd-coin-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.cd-sym { font: 700 16px/1 var(--mono); }
.cd-tag { font: 500 9.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line-1); border-radius: 99px; padding: 3px 7px; }
.cd-engine { margin-left: auto; font: 500 11px/1 var(--mono); padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line-1); color: var(--ink-faint); }
.cd-engine[data-on="true"] { color: #1c7c4a; border-color: #1c7c4a55; background: #1c7c4a12; }
.cd-fees { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 10px; line-height: 1.45; }

.cd-split { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.cd-b { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line-1); border-radius: 8px; padding: 5px 9px; min-width: 66px; }
.cd-b small { font-size: 10px; letter-spacing: .03em; color: var(--ink-faint); }
.cd-b strong { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.cd-stat { font: 400 12px/1.4 var(--mono); color: var(--ink-faint); margin: 0 0 10px; }

.cd-why { border-left: 2px solid var(--accent); padding: 2px 0 2px 11px; margin-bottom: 11px; }
.cd-why-h { display: block; font: 500 10px/1 inherit; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.cd-why p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
.cd-why small { font-size: 11.5px; color: var(--ink-faint); }
.cd-why-none { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 11px; }

.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-actions .btn { padding: 6px 11px; font-size: 12.5px; }
.cd-tuner { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-1); }
.cd-tuner label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-faint); }
.cd-tuner input { width: 100%; padding: 6px 8px; border: 1px solid var(--line-1); border-radius: 7px; font: 600 14px/1 var(--mono); background: var(--paper); color: var(--ink); }
.cd-tuner .btn { grid-column: 1 / -1; }
.cd-tune-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--ink-faint); min-height: 1.2em; }

.cd-adopt { margin-top: 22px; border: 1px solid var(--line-1); border-radius: 11px; overflow: hidden; }
.cd-adopt-head { border-bottom: 1px solid var(--line-1); }
.cd-adopt-lede { margin: 13px 15px 11px; font-size: 13px; color: var(--ink-dim); line-height: 1.5; max-width: 70ch; }
.cd-adopt-row { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 15px 12px; }
.cd-adopt-row { align-items: stretch; }
.cd-adopt-row input { flex: 1 1 260px; max-width: 460px; padding: 9px 11px; border: 1px solid var(--line-1); border-radius: 8px; font: 400 13px/1 var(--mono); background: var(--paper); color: var(--ink); }
.cd-note { margin: 0 15px 14px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

/* A READING IS NOT AN ASIDE.
   .cd-note is the right weight for a footnote and the wrong one for the line
   carrying a saver's share price, what they hold, and what the split has paid.
   Those are the figures somebody came to the page for, so they get size and
   contrast instead of being set in the faintest ink available. The emphasis
   inside marks the number itself, which is what the eye is hunting for. */
.hd-read { margin: 0 15px 14px; font-size: 14px; color: var(--ink-dim); line-height: 1.6; }
.hd-read b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.hd-read i { font-style: normal; color: var(--ink-faint); }
@media (max-width: 620px) { .hd-read { font-size: 13.5px; } }

@media (max-width: 620px) {
  .cd-coins { grid-template-columns: 1fr; }
  .cd-out { margin-left: 0; }
}

/* ── the portfolio, inside the dashboard ────────────────────────────── */
.cd-pf { margin-top: 22px; border: 1px solid var(--line-1); border-radius: 11px; overflow: hidden; }
.pf-mandates { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 15px 14px; }
.pf-book { margin: 0 15px 12px; }
.pf-row {
  display: grid; align-items: center; gap: 10px 12px;
  grid-template-columns: 7em 1fr 5.5em 5.5em 6.5em;
  padding: 9px 0; border-top: 1px solid var(--line-1);
}
.pf-row:first-of-type { border-top: 0; }
.pf-sym { font: 600 13px/1 var(--mono); display: flex; flex-direction: column; gap: 3px; }
.pf-sym small { font: 400 10px/1 var(--mono); color: var(--ink-faint); letter-spacing: .04em; }
.pf-bar { position: relative; height: 8px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.07); overflow: hidden; }
.pf-bar i { position: absolute; inset: 0 auto 0 0; background: rgba(var(--accent-rgb), 0.35); }
.pf-bar b { position: absolute; top: 2px; bottom: 2px; left: 0; background: var(--accent); border-radius: 99px; }
.pf-w { display: flex; flex-direction: column; gap: 1px; }
.pf-w small { font-size: 10px; color: var(--ink-faint); }
.pf-w strong { font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pf-w em { font-style: normal; color: var(--ink-faint); margin-left: 2px; }
.pf-usd { font: 500 12.5px/1 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 15px 12px; }
.pf-actions .btn { padding: 6px 11px; font-size: 12.5px; }
@media (max-width: 620px) {
  .pf-row { grid-template-columns: 1fr 1fr; grid-template-areas: "sym usd" "bar bar" "t h"; }
  .pf-sym { grid-area: sym; } .pf-usd { grid-area: usd; } .pf-bar { grid-area: bar; }
  .pf-w:nth-of-type(3) { grid-area: t; } .pf-w:nth-of-type(4) { grid-area: h; }
}

/* on its own tab the portfolio panel is the page, not a box inside a box:
   the gate head already names the state, so the inner head and border go */
.cd-pf-tab { border: 0; margin-top: 0; border-radius: 0; }
.cd-pf-tab > .panel-head { display: none; }

/* ── the execution desk ─────────────────────────────────────────────── */
.ex-form { display: grid; gap: 10px 12px; grid-template-columns: 8em 1fr 1fr 8em; margin: 0 15px 12px; }
/* min-width: 0 on the grid item, or the input's placeholder sets the column's
   minimum and the asset field runs off the panel on a phone */
.ex-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ex-form input { width: 100%; box-sizing: border-box; }
.ex-form label span { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.ex-form input, .ex-form select {
  background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font: 500 13px/1.2 var(--mono); padding: 9px 10px; border-radius: 7px; outline: none; min-width: 0;
}
.ex-form input:focus, .ex-form select:focus { border-color: var(--signal-lo); }
.ex-orders { margin: 4px 15px 14px; display: flex; flex-direction: column; gap: 10px; }
.ex-order { border: 1px solid var(--line-1); border-radius: 9px; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.ex-order[data-status="done"] { opacity: .78; }
.ex-order[data-status="paused"] { border-color: var(--signal-lo); }
.ex-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font: 500 13px/1.2 var(--mono); }
.ex-id { color: var(--ink-faint); font-size: 11.5px; letter-spacing: .04em; }
.ex-size { color: var(--ink-dim); }
.ex-status { margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.ex-order[data-status="working"] .ex-status { color: var(--signal-lo); }
.ex-note { margin: 0; font: 400 12.5px/1.5 var(--mono); color: var(--ink-dim); }
.ex-fills { margin: 0; font: 400 12px/1.6 var(--mono); color: var(--ink-faint); }
.ex-fills a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.ex-order .pf-actions { margin: 0; }
.ex-dca { margin-top: 6px; border-top: 1px solid var(--line-1); padding-top: 4px; }
.ex-form-ix { grid-template-columns: 1fr 1fr; }
#ix-panel .cd-signin { margin-top: 10px; }
.ix-row { grid-template-columns: 6em 1fr 5.5em 6.5em 6.5em; }
@media (max-width: 620px) { .ix-row { grid-template-columns: 1fr 1fr; } }
.ex-form-dca { grid-template-columns: 1fr 11em 7em 7em; }
@media (max-width: 720px) {
  .ex-form-dca { grid-template-columns: 1fr 1fr; }
  .ex-form-dca label:nth-child(1) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ex-form { grid-template-columns: 1fr 1fr; }
  .ex-form label:nth-child(2) { grid-column: 1 / -1; }
}

/* ── the bar with twelve tabs on a laptop ────────────────────────────
   at 1200px wide the links ran to 1468px and the whole page scrolled
   sideways, on every tab. The links tighten as the screen narrows, the
   follow label drops to its mark under 1180px, and the row itself can
   scroll inside the bar so the body never does. */
@media (min-width: 761px) {
  /* the bar may run wider than the reading column, and when even that is
     not enough the links wrap to a second line: nothing is ever hidden */
  .nav-in { max-width: 1400px; }
  .nav-links { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; gap: 6px 14px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.06em; }
  .nav-links a, .nav-links .nav-cta { flex: none; }
  .nav-mark span { white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .nav-links { gap: 6px 10px; }
  .nav-links a { font-size: 10.5px; letter-spacing: 0.03em; }
  .nav-links a[data-tab="launch"] { padding: 5px 9px; }
  .nav-cta[data-link="x"] span { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* a small laptop: the mark alone stands for the wordmark, the tabs keep the row */
  .nav-mark span { display: none; }
}

/* the agent factory */
.ex-form .ex-wide { grid-column: 1 / -1; }
.ag-card { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; background: transparent; text-align: left; width: 100%; color: inherit; font: inherit; }
.ag-card:hover, .ag-card:focus-visible { border-color: var(--signal-lo); outline: none; }
.ag-card strong { font-size: 14px; }
.ag-card small { color: var(--ink-dim); font-size: 12px; line-height: 1.45; display: block; }
.ag-card .ag-nav { font: 500 13px/1.2 var(--mono); text-align: right; white-space: nowrap; }
.ag-tag { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); margin-right: 6px; }
.ag-tag[data-s="active"] { border-color: var(--signal-lo); color: var(--signal-lo); }
.ag-tag[data-s="paused"], .ag-tag[data-s="done"] { color: var(--ink-faint); }
.ag-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin: 8px 0 12px; }
.ag-kv div { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ag-kv small { display: block; color: var(--ink-faint); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 3px; }
.ag-kv strong { font: 500 13px/1.3 var(--mono); word-break: break-all; }
.ag-dec { border-left: 2px solid var(--line); padding: 2px 0 2px 11px; margin-bottom: 9px; }
.ag-dec b { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--signal-lo); margin-right: 8px; }
.ag-dec small { color: var(--ink-faint); font-size: 11px; }
.ag-dec p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.ag-txs { font: 400 12px/1.7 var(--mono); color: var(--ink-dim); word-break: break-all; }
.ag-txs a { color: inherit; }
.ag-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.ag-card small, .ag-kv strong { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .ag-card { grid-template-columns: 1fr; }
  .ag-card .ag-nav { text-align: left; }
  .ag-card .ag-nav small { display: inline; margin-left: 8px; }
}

/* the mining tab: figures wrap at spaces, not inside words */
#mn-live strong { word-break: normal; overflow-wrap: normal; }

/* ============ talk to the agent ============ */
/* the button is the favicon's tile, set on the hero's own blue with the grain
   over it: the same mark, the same ombre, the same texture as the head of the
   page, so it reads as part of the site and not a vendor widget */
.hx-fab {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60; display: inline-flex; align-items: center; gap: 12px; isolation: isolate; overflow: hidden;
  padding: 8px 20px 8px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, #071a4d 0%, #0e3079 55%, #1d4794 100%); color: #eef3fc;
  box-shadow: 0 16px 38px rgba(7, 26, 77, 0.38), inset 0 1px 0 rgba(255,255,255,0.10);
  cursor: pointer; transition: transform 180ms var(--ease-out), box-shadow 180ms, opacity 180ms, border-color 180ms;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.hx-fab::after, .hx-chat-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("grain.png"); background-size: 256px 256px; mix-blend-mode: screen; opacity: 0.45;
}
.hx-fab:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.28); box-shadow: 0 22px 46px rgba(7, 26, 77, 0.44), inset 0 1px 0 rgba(255,255,255,0.12); }
.hx-fab:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.hx-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; transform: translateY(8px); }
.hx-avatar { position: relative; flex: none; width: 44px; height: 44px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
.hx-avatar svg { width: 100%; height: 100%; display: block; }
.hx-avatar-sm { width: 30px; height: 30px; filter: none; }
.hx-live { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 999px; background: #3ddc84; border: 2px solid #0e3079; box-shadow: 0 0 0 0 rgba(61,220,132,0.6); animation: hx-pulse 2.4s infinite; }
.hx-live[data-on="false"] { background: #b1bcd4; animation: none; }
@keyframes hx-pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,132,0.55); } 70% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.hx-fab-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hx-fab-label { font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; white-space: nowrap; }
.hx-fab-sub { font: 400 11px/1 var(--serif, Georgia, serif); font-style: italic; color: #b3c4e2; white-space: nowrap; }
.hx-chat {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 61; width: min(400px, calc(100vw - 36px)); height: min(640px, calc(100vh - 36px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper, #fff); color: var(--ink); border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(7, 26, 77, 0.30);
  animation: hx-rise 220ms var(--ease-out);
}
@keyframes hx-rise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.hx-chat-head { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: linear-gradient(135deg, #071a4d, #0e3079 60%, #1d4794); color: #fff; }
.hx-chat-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hx-chat-names { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hx-chat-who strong { font: 500 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.hx-chat-who small { display: block; font-size: 11px; color: #b3c4e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-chat-close { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: transparent; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.hx-chat-close:hover { background: rgba(255,255,255,0.08); }
.hx-chat-log { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fc; overscroll-behavior: contain; }
.hx-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.hx-msg[data-role="agent"] { align-self: flex-start; background: #ffffff; border: 1px solid var(--line-1); border-bottom-left-radius: 4px; }
.hx-msg[data-role="you"] { align-self: flex-end; background: #0e3079; color: #fff; border-bottom-right-radius: 4px; }
.hx-msg[data-role="note"] { align-self: center; background: transparent; color: var(--ink-faint); font: 400 11.5px/1.4 var(--mono); text-align: center; padding: 2px 6px; }
.hx-msg a { color: var(--signal-lo); }
.hx-msg[data-role="you"] a { color: #ffd6c6; }
.hx-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--line-1); border-radius: 14px; border-bottom-left-radius: 4px; }
.hx-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-faint); animation: hx-blink 1s infinite ease-in-out; }
.hx-typing i:nth-child(2) { animation-delay: 0.15s; } .hx-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hx-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.hx-chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line-1); background: #fff; }
.hx-chat-form textarea { flex: 1; resize: none; max-height: 120px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; font: 400 14px/1.4 inherit; color: var(--ink); background: #f7f9fc; }
.hx-chat-form textarea:focus { outline: none; border-color: var(--signal-lo); background: #fff; }
.hx-chat-send { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: #0e3079; color: #fff; cursor: pointer; display: grid; place-items: center; }
.hx-chat-send:hover { background: #1d4794; }
.hx-chat-send svg { width: 18px; height: 18px; }
.hx-chat-send:disabled { opacity: 0.5; cursor: default; }
.hx-chat-foot { margin: 0; padding: 6px 12px 10px; font: 400 11px/1.45 var(--mono); color: var(--ink-faint); background: #fff; }
.hx-chat-foot a, .hx-msg[data-role="agent"] a.hx-act { color: var(--signal-lo); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.hx-chat-foot a:hover, .hx-msg a.hx-act:hover { color: var(--ink); }
@media (max-width: 760px) {
  /* on a phone the button IS the favicon tile: the rounded square, the mark, the dot */
  .hx-fab { padding: 0; gap: 0; width: 58px; height: 58px; border-radius: 18px; justify-content: center; }
  .hx-fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hx-avatar { width: 40px; height: 40px; }
  .hx-chat { right: 0; bottom: 0; left: 0; width: 100vw; height: min(88vh, calc(100vh - 56px)); border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
  .hx-chat-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .hx-chat { animation: none; } .hx-fab { transition: none; } .hx-typing i { animation: none; opacity: 0.6; } .hx-live { animation: none; } }

/* the trading desk */
.tr-rows { display: grid; gap: 8px; }
.tr-row { display: grid; grid-template-columns: 1.1fr 1.4fr 1.2fr; gap: 8px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.tr-row[data-act="yes"] { border-color: var(--signal-lo); }
.tr-row[data-pnl="up"] .tr-pnl { color: var(--signal-lo); }
.tr-row[data-pnl="down"] .tr-pnl { color: #d26a6a; }
.tr-cell strong { font: 500 13px/1.3 var(--mono); display: block; overflow-wrap: anywhere; }
.tr-cell small { display: block; color: var(--ink-dim); font-size: 11.5px; line-height: 1.45; }
.tr-cell .pf-bar { display: block; margin: 2px 0 4px; }
.tr-cell .ex-fills { margin: 4px 0 0; }
.tr-open { border: 1px solid var(--signal-lo); border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; }
.tr-dec { margin-top: 14px; }
.tr-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 92px; align-items: end; }
.tr-hour { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.tr-hour b { display: block; width: 100%; background: var(--line); border-radius: 3px 3px 0 0; min-height: 3px; }
.tr-hour[data-now="true"] b { background: var(--signal-lo); }
.tr-hour small { font: 400 9px/1 var(--mono); color: var(--ink-faint); }
@media (max-width: 760px) {
  .tr-row { grid-template-columns: 1fr; }
  .tr-hours { height: 72px; }
  .tr-hour small { display: none; }
}

/* ---- your seat at the desk: the trading wallet panel on the trading tab ---- */
.rd-fund { margin: 4px 15px 14px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 10px; }
.rd-fund .cd-stat { margin-bottom: 6px; }
.rd-fund .rd-fund-note { margin: 8px 0 0; }
.rd-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.rd-addr code { font: 500 12.5px/1.4 var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.rd-addr .btn { padding: 4px 9px; font-size: 11.5px; }
.rd-signin-note { margin: 10px 0 0; }
.rd-signin-note:empty { display: none; }
.ex-form-rd { grid-template-columns: 1fr 1fr; }
#rd-gate[data-state="in"] .pf-actions .btn[disabled] { opacity: 0.45; cursor: default; }
@media (max-width: 560px) { .ex-form-rd { grid-template-columns: 1fr; } }
/* the three steps, and the dials behind Adjust */
.rd-steps { display: grid; gap: 4px; }
.rd-steps .claim-step { padding-left: 0; padding-right: 0; }
.rd-steps .claim-c > p:first-of-type { margin-top: 0; }
.rd-who { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--ink-dim); }
.rd-balance { margin: 8px 0 0; font: 500 13px/1.5 var(--mono); color: var(--ink); }
.rd-settings { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.rd-settings .ex-form, .rd-settings .pf-actions, .rd-settings .cd-note { margin-left: 0; margin-right: 0; }
.rd-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0 0 14px; }
.rd-preset { text-align: left; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.rd-preset strong { display: block; font-size: 13px; margin-bottom: 3px; }
.rd-preset small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink-faint); }
.rd-preset:hover { border-color: var(--line-2); }
.rd-preset[aria-pressed="true"] { border-color: var(--signal-lo); box-shadow: inset 0 0 0 1px var(--signal-lo); }
.rd-withdraw { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-1); }
.rd-withdraw .ex-form, .rd-withdraw .pf-actions, .rd-withdraw .cd-note, .rd-withdraw .cd-stat { margin-left: 0; margin-right: 0; }
#rd-gate .pf-actions .btn[disabled] { opacity: 0.45; cursor: default; }
@media (max-width: 560px) { .rd-presets { grid-template-columns: 1fr; } }

/* =====================================================================
   NAV GROUPS
   Seventeen tabs in one row is a list, not a navigation: nothing is
   ranked, the eye has no entry point, and the row was one launch away
   from wrapping. Four groups carry the same seventeen destinations and
   read as a decision instead of an inventory. Overview stays first and
   Launch stays a pill, because those two are where people actually go.
   ===================================================================== */

.nav-group { position: relative; display: flex; align-items: center; }
/* THE WORLD, NEW IN THE NAV: the accent, a small lit point beside it, and a slow breath so the eye finds it once. */
.nav a.nav-world { color: var(--signal); position: relative; padding-left: 14px; }
.nav a.nav-world::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(240,147,127,0.6); animation: nav-world-breathe 2.4s ease-out infinite; }
@keyframes nav-world-breathe { 0% { box-shadow: 0 0 0 0 rgba(240,147,127,0.6); } 70% { box-shadow: 0 0 0 8px rgba(240,147,127,0); } 100% { box-shadow: 0 0 0 0 rgba(240,147,127,0); } }
@media (prefers-reduced-motion: reduce) { .nav a.nav-world::before { animation: none; } }
.nav[data-menu="open"] a.nav-world { padding-left: 14px; }

.nav-group-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0 0 3px; margin: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
  transition: color 200ms var(--ease-out);
}
.nav-group-btn:hover, .nav-group-btn:focus-visible { color: var(--signal); }
.nav-chev { width: 9px; height: 6px; flex: none; opacity: 0.6; transition: transform 200ms var(--ease-out); }
.nav-group[data-open="true"] .nav-chev { transform: rotate(180deg); }

/* the group reads as current when the view inside it is the one on screen */
.nav-group-btn.on { color: var(--ink-hero); }
.nav[data-stuck="true"] .nav-group-btn.on { color: var(--signal-lo); }
.nav-group-btn.on::after {
  content: ""; position: absolute; left: 0; right: 14px; bottom: 0;
  height: 1px; background: currentColor;
}

/* over the dark hero the group label follows the same palette as the links */
.nav-group-btn { color: var(--ink-hero-faint); }
.nav-group-btn:hover { color: var(--ink-hero); }
.nav[data-stuck="true"] .nav-group-btn { color: var(--ink-faint); }
.nav[data-stuck="true"] .nav-group-btn:hover { color: var(--signal); }

.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px);
  min-width: 310px; padding: 7px; z-index: 60;
  background: var(--paper, #fff);
  border: 1px solid var(--line-1); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(24, 26, 33, 0.13), 0 2px 6px rgba(24, 26, 33, 0.05);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
  /* A LONG MENU SCROLLS INSIDE ITSELF. Earn holds a dozen desks with a line
     each, taller than a laptop's screen below the bar, and the page under a
     dropdown does not scroll it into view: the last rows were simply out of
     reach. The menu now stops twenty pixels above the bottom of the screen and
     scrolls on its own, without carrying the page with it. */
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* the hover bridge: a ten pixel gap would drop the menu mid-reach. It lives on
   the group, below the label, because a menu that scrolls clips anything drawn
   outside its own edge */
.nav-group::after { content: ""; position: absolute; left: 50%; top: 100%; width: 320px; height: 14px; transform: translateX(-50%); display: none; }
.nav-group:hover::after, .nav-group[data-open="true"]::after { display: block; }

.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu,
.nav-group[data-open="true"] .nav-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}

.nav-links .nav-menu a {
  display: block; padding: 9px 11px; border-radius: 8px;
  text-transform: none; letter-spacing: 0; font-size: 13px;
  color: var(--ink); transition: background 140ms var(--ease-out);
}
.nav-links .nav-menu a:hover { background: var(--wash, rgba(24,26,33,0.04)); color: var(--ink); }
.nav-links .nav-menu a b {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500; color: var(--ink);
}
.nav-links .nav-menu a i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 12px; line-height: 1.45; color: var(--ink-dim);
}
.nav-links .nav-menu a.on b { color: var(--signal-lo); }
.nav-links .nav-menu a.on { background: var(--wash, rgba(24,26,33,0.04)); }
.nav-links .nav-menu a.on::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-chev { transition: none; }
}

/* ---- the managed LP desk ----
   Two columns that face each other on purpose: what the agent may do with
   somebody's money, and what it cannot. A vault whose limits are a paragraph
   nobody reads is a vault with no limits. */
.mlp-cols { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; margin-bottom: var(--s2); }
@media (max-width: 760px) { .mlp-cols { grid-template-columns: 1fr; } }
.mlp-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0 0 8px;
}
.mlp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mlp-list li {
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
  padding-left: 16px; position: relative;
}
.mlp-list li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  font-family: var(--mono); color: var(--signal-lo);
}
.mlp-list.mlp-no li::before { content: "\2212"; color: var(--ink-dim); }
.mlp-list li b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-dim); margin-right: 6px; }
.mlp-exit {
  margin: var(--s2) 0 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.55;
  border-left: 2px solid var(--signal-lo); background: rgba(224, 118, 93, 0.05);
  color: var(--ink);
}

/* ---- the market maker: any coin, settings, the book drawn ----
   The controls say what they do in a sentence under each row, the chart puts
   the bid, the ask and the price on one log axis, and the pool list reads as
   choices a person makes rather than a table they decode. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.launch-form.mlp-form { padding-left: 0; padding-right: 0; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.mlp-form > label[for="mlp-ca"] > span { color: var(--ink-dim); }
.mlp-ca-row { display: flex; gap: 8px; min-width: 0; }
.mlp-ca-row input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 14px; line-height: 1.4; padding: 10px 12px; border-radius: 6px; outline: none;
}
.mlp-ca-row input:focus { border-color: var(--signal-lo); }
.mlp-ca-row input::placeholder { color: var(--ink-faint); opacity: .7; }
.mlp-ca-row .btn { flex: 0 0 auto; white-space: nowrap; }
.mlp-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: lowercase; color: var(--ink-faint); }
.mlp-or::before, .mlp-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-1); }
.mlp-or span { flex: 0 1 auto; text-align: center; }
.mlp-pools { display: grid; gap: 8px; margin: 4px 0 6px; }
.mlp-pool {
  display: grid; gap: 4px; text-align: left; cursor: pointer; padding: 11px 14px; border-radius: 8px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: inherit;
  transition: border-color 140ms, background 140ms;
}
.mlp-pool:hover:not([disabled]) { border-color: var(--signal-lo); }
.mlp-pool[aria-checked="true"] { border-color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.07); }
.mlp-pool[disabled] { cursor: not-allowed; opacity: .62; }
.mlp-pool-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.mlp-pool-top strong { font-size: 15px; }
.mlp-pool[aria-checked="true"] .mlp-pool-top strong { color: var(--signal-lo); }
.mlp-pool small { color: var(--ink-dim); font-size: 12.5px; line-height: 1.45; }
.mlp-venue { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--line-2); border-radius: 999px; padding: 1px 8px; }
.mlp-pays { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; border-radius: 999px; padding: 1px 8px;
  border: 1px solid var(--line-2); color: var(--ink-dim); white-space: nowrap; }
.mlp-pays-yes { border-color: rgba(var(--accent-rgb), 0.9); background: rgba(var(--accent-rgb), 0.16); color: var(--ink); }
.mlp-pays-no { border-style: dashed; }
.mlp-depth { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.mlp-settings { display: grid; gap: 14px; margin: 2px 0 6px; }
.mlp-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.mlp-seg legend { padding: 0; margin: 0 0 7px; font-size: 14px; color: var(--ink); font-weight: 600; }
.mlp-seg[data-locked] legend { color: var(--ink-dim); font-weight: 500; }
.mlp-seg-row { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; max-width: 100%; }
.mlp-seg-row button {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; padding: 9px 16px; min-width: 86px;
  background: transparent; color: var(--ink-dim); border: 0; border-right: 1px solid var(--line-2); cursor: pointer;
  transition: background 140ms, color 140ms;
}
.mlp-seg-row button:last-child { border-right: 0; }
.mlp-seg-row button:hover:not([disabled]) { color: var(--ink); background: rgba(var(--ink-rgb), 0.04); }
.mlp-seg-row button[aria-checked="true"] { background: var(--signal-lo); color: #fff; }
.mlp-seg-row button[disabled] { cursor: default; }
.mlp-seg-row button[disabled]:not([aria-checked="true"]) { opacity: .45; }
.mlp-seg-row button[disabled][aria-checked="true"] { background: rgba(var(--ink-rgb), 0.1); color: var(--ink); }
.mlp-seg-row button:focus-visible, .mlp-pool:focus-visible, .mlp-max:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 2px; }
.mlp-seg-note { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-dim); max-width: 62ch; }

.mlp-market { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 6px; }
.mlp-market:empty { display: none; }
.mlp-pair { font-family: var(--display); font-size: 30px; line-height: 1.1; color: var(--ink); }
.mlp-pair small { font-size: 20px; color: var(--ink-dim); }
.mlp-px { margin-left: auto; font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mlp-plan-h { margin: 0 0 10px; font-size: 15px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }

.mlp-chart { margin: 4px 0 14px; padding: 10px 10px 8px; border: 1px solid var(--line-1); border-radius: 10px; }
.mlp-chart[hidden] { display: none; }
.mlp-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.mlp-axis { stroke: var(--line-2); stroke-width: 1; }
.mlp-bar { stroke-width: 1; }
.mlp-bar.mlp-bid { fill: rgba(var(--accent-rgb), 0.55); stroke: rgba(var(--accent-rgb), 0.95); }
.mlp-bar.mlp-ask { fill: rgba(var(--signal-rgb), 0.5); stroke: var(--signal-lo); }
.mlp-bar.mlp-working { fill: rgba(var(--ink-rgb), 0.16); stroke: rgba(var(--ink-rgb), 0.45); stroke-dasharray: 3 2; }
.mlp-bar.mlp-other { fill: rgba(var(--ink-rgb), 0.1); stroke: rgba(var(--ink-rgb), 0.35); }
.mlp-now { stroke: var(--ink); stroke-width: 1.5; }
.mlp-now-t { fill: var(--ink); font-family: var(--mono); font-size: 12px; }
.mlp-tick { fill: var(--ink-faint); font-family: var(--mono); font-size: 11px; }
.mlp-chart figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.mlp-key { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; border: 1px solid transparent; }
.mlp-key.mlp-bid { background: rgba(var(--accent-rgb), 0.55); border-color: rgba(var(--accent-rgb), 0.95); }
.mlp-key.mlp-ask { background: rgba(var(--signal-rgb), 0.5); border-color: var(--signal-lo); }
.mlp-key.mlp-working { background: rgba(var(--ink-rgb), 0.16); border: 1px dashed rgba(var(--ink-rgb), 0.45); }
.mlp-chart figcaption .mlp-key + * { margin-right: 0; }

.launch-form.mlp-amts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 620px) { .launch-form.mlp-amts { grid-template-columns: minmax(0, 1fr); } }
.mlp-more { margin: 2px 0 4px; }
.mlp-more > summary { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); padding: 6px 0; list-style: none; }
.mlp-more > summary::-webkit-details-marker { display: none; }
.mlp-more > summary::before { content: "+ "; color: var(--signal-lo); }
.mlp-more[open] > summary::before { content: "\2212 "; }
.mlp-more > .mlp-pools { margin-top: 6px; }
.mlp-legend { white-space: nowrap; display: inline-flex; align-items: center; }
.mlp-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mlp-max { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px;
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--signal-lo); cursor: pointer; }
.mlp-max:hover { border-color: var(--signal-lo); }
.mlp-max[hidden] { display: none; }
.mlp-bal { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); min-height: 1em; font-variant-numeric: tabular-nums; }
.mlp-facts-h { margin-top: var(--s3); }
@media (max-width: 480px) {
  .mlp-ca-row { flex-direction: column; }
  .mlp-ca-row .btn { width: 100%; }
  .mlp-seg-row { display: flex; width: 100%; }
  .mlp-seg-row button { flex: 1 1 0; min-width: 0; padding: 10px 6px; }
  .mlp-pair { font-size: 26px; }
  .mlp-px { margin-left: 0; flex-basis: 100%; }
  .mlp-depth { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .mlp-pool, .mlp-seg-row button { transition: none; } }

/* ============================================================================
   THE PERP TERMINAL
   A trading screen is scanned and operated rather than read, so this section
   breaks the page's own reading rhythm on purpose: mono everywhere, tabular
   figures so digits line up in columns, and state carried in form as well as
   colour so a position reads at a glance rather than needing to be parsed.
   Long is the accent, short is the warn, and neither is ever the only signal.
   ========================================================================= */
.term { margin-top: var(--s4); display: grid; gap: var(--s2); }
@media (min-width: 1040px) { .term { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.term-panel {
  border: 1px solid var(--line-1); border-radius: var(--radius);
  background: var(--card); overflow: hidden; min-width: 0;
}
.term-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px var(--s2); border-bottom: 1px solid var(--line-1);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.term-head .spacer { margin-left: auto; }

/* ---- the market bar ---- */
.mkt-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: var(--s2); border-bottom: 1px solid var(--line-1); }
.mkt-pick { position: relative; }
.mkt-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  padding: 8px 12px; letter-spacing: 0.02em;
}
.mkt-btn:hover { border-color: var(--signal); }
.mkt-btn i { font-style: normal; color: var(--ink-faint); font-size: 11px; }
.mkt-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: min(360px, 84vw); max-height: 340px; overflow-y: auto;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 18px 44px rgba(var(--ink-rgb), 0.18);
}
.mkt-menu[hidden] { display: none; }
.mkt-search {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-1); background: transparent;
  padding: 10px var(--s2); font-family: var(--mono); font-size: 13px; color: var(--ink);
}
.mkt-search:focus { outline: none; border-bottom-color: var(--signal); }
.mkt-opt {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  width: 100%; text-align: left; cursor: pointer; border: 0; background: transparent;
  padding: 9px var(--s2); font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mkt-opt:hover, .mkt-opt:focus-visible { background: rgba(var(--signal-rgb), 0.10); outline: none; }
.mkt-opt b { font-weight: 600; }
.mkt-opt span { color: var(--ink-faint); font-size: 11px; }

.mkt-stat { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mkt-stat .k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.mkt-stat .v { font-size: 14px; color: var(--ink); }
.mkt-stat .v.up { color: var(--accent); }
.mkt-stat .v.dn { color: var(--warn); }

/* ---- chart ---- */
.chart-wrap { position: relative; height: 380px; min-width: 0; }
@media (max-width: 700px) { .chart-wrap { height: 280px; } }
.chart-note {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-align: center; padding: var(--s2);
}
.res-row { display: flex; gap: 4px; padding: 8px var(--s2); border-top: 1px solid var(--line-1); flex-wrap: wrap; }
.res-btn {
  cursor: pointer; border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: var(--ink-faint); font-family: var(--mono); font-size: 11.5px; padding: 4px 9px; letter-spacing: 0.06em;
}
.res-btn:hover { color: var(--ink); }
.res-btn[aria-pressed="true"] { color: var(--signal-lo); border-color: var(--line-2); background: rgba(var(--signal-rgb), 0.09); }

/* ---- the ticket ---- */
.ticket { display: grid; gap: var(--s2); padding: var(--s2); }
.side-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-btn {
  cursor: pointer; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: transparent; color: var(--ink-dim);
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 11px 0;
}
.side-btn[aria-pressed="true"][data-side="long"]  { color: #ffffff; background: var(--accent); border-color: var(--accent); }
.side-btn[aria-pressed="true"][data-side="short"] { color: #ffffff; background: var(--warn);   border-color: var(--warn); }
.side-btn:not([aria-pressed="true"]):hover { border-color: var(--ink-faint); color: var(--ink); }

.fld { display: grid; gap: 5px; }
.fld > label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.fld input, .fld select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: 14px; padding: 10px 11px;
  font-variant-numeric: tabular-nums;
}
.fld input:focus, .fld select:focus { outline: none; border-color: var(--signal); }
.fld .hint { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.fld .hint.bad { color: var(--warn); }

.lev-row { display: flex; gap: 6px; flex-wrap: wrap; }
.lev-btn {
  cursor: pointer; border: 1px solid var(--line-2); border-radius: 3px; background: transparent;
  color: var(--ink-dim); font-family: var(--mono); font-size: 12px; padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
.lev-btn[aria-pressed="true"] { color: var(--signal-lo); border-color: var(--signal); background: rgba(var(--signal-rgb), 0.10); }
/* Leverage past a point is not a feature, it is a countdown, and the control
   should say so rather than looking like every other option. */
.lev-btn[data-hot="true"] { border-style: dashed; }
.lev-btn[data-hot="true"][aria-pressed="true"] { color: var(--warn); border-color: var(--warn); background: rgba(232, 163, 74, 0.12); }

.tkt-sum { display: grid; gap: 5px; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tkt-sum div { display: flex; justify-content: space-between; gap: var(--s2); }
.tkt-sum .k { color: var(--ink-faint); }
.tkt-sum .v { color: var(--ink); }
.tkt-sum .v.warn { color: var(--warn); }

.tkt-go {
  width: 100%; cursor: pointer; border: 1px solid var(--signal-lo); border-radius: var(--radius);
  background: var(--signal-lo); color: #ffffff;
  font-family: var(--mono); font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 13px 0;
}
.tkt-go:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(224, 118, 93, 0.28); }
.tkt-go:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.tkt-msg { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin: 0; overflow-wrap: anywhere; }
.tkt-msg.bad { color: var(--warn); }
.tkt-msg.good { color: var(--accent); }

/* ---- gate: the steps before anybody can trade ---- */
.gate { display: grid; gap: var(--s2); padding: var(--s2); }
.gate-step {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
}
.gate-step .n {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); font-size: 10.5px; color: var(--ink-faint);
}
.gate-step[data-done="true"] .n { border-color: var(--accent); color: var(--accent); }
.gate-step[data-done="true"] { color: var(--ink-faint); }
.gate-step[data-blocked="true"] .n { border-color: var(--warn); color: var(--warn); }
.gate-step b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.gate-terms {
  max-height: 200px; overflow-y: auto; white-space: pre-wrap;
  border: 1px solid var(--line-1); border-radius: var(--radius); padding: var(--s2);
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-dim);
  background: rgba(var(--ink-rgb), 0.025);
}

/* ---- positions and orders ---- */
.book { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.book th {
  text-align: left; font-weight: 400; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); padding: 8px var(--s2); border-bottom: 1px solid var(--line-1); white-space: nowrap;
}
.book td { padding: 9px var(--s2); border-bottom: 1px solid var(--line-1); color: var(--ink); white-space: nowrap; }
.book tr:last-child td { border-bottom: 0; }
.book .side-long  { color: var(--accent); }
.book .side-short { color: var(--warn); }
.book .num { text-align: right; }
.book-scroll { overflow-x: auto; }
.book-empty { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); padding: var(--s2); margin: 0; }
.x-btn {
  cursor: pointer; border: 1px solid var(--line-2); border-radius: 3px; background: transparent;
  color: var(--ink-faint); font-family: var(--mono); font-size: 11px; padding: 3px 8px;
}
.x-btn:hover { border-color: var(--warn); color: var(--warn); }

/* withdraw: back to the wallet the account belongs to, never anywhere else */
.wd { display: grid; gap: 8px; padding: var(--s2); border-top: 1px solid var(--line-1); }
.wd-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.wd-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.wd-row input {
  flex: 1 1 120px; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: 14px; padding: 10px 11px; font-variant-numeric: tabular-nums;
}
.wd-row input:focus { outline: none; border-color: var(--signal); }
.wd-row .x-btn { padding: 0 14px; }
.wd-go { width: auto; flex: 0 0 auto; padding: 10px 18px; }

.custody-note {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  padding: 10px var(--s2); border-top: 1px solid var(--line-1); margin: 0; line-height: 1.6;
}

/* ---- THE TERMINAL ON A PHONE ------------------------------------------
   A trading control that is hard to hit is a trading control that gets hit
   by accident, and on this screen an accident is an order. Every interactive
   thing goes to the 44px touch target the platforms ask for, on coarse
   pointers only, so the desktop layout keeps its density.
   ---------------------------------------------------------------------- */
@media (pointer: coarse) {
  .res-btn { min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; }
  .lev-btn { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; font-size: 13px; }
  .x-btn   { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; }
  .mkt-btn { min-height: 46px; }
  .side-btn { min-height: 48px; }
  .mkt-opt { padding: 13px var(--s2); }
  .fld input, .fld select { min-height: 46px; font-size: 16px; } /* 16px stops iOS zooming the page on focus */
  .tkt-go { min-height: 50px; }
  .wd-row input { min-height: 46px; font-size: 16px; }
  .wd-row .x-btn { min-height: 46px; }
  .mkt-search { min-height: 46px; font-size: 16px; }
}

@media (max-width: 640px) {
  /* The market bar wraps into two readable rows instead of four cramped
     columns: the symbol and the mark are what a person needs at a glance. */
  .mkt-bar { gap: 12px var(--s2); }
  .mkt-stat .v { font-size: 13px; }
  .mkt-stat .k { font-size: 9.5px; }
  .term-head { font-size: 10.5px; }
  .ticket { padding: 12px; gap: 12px; }
  .gate { padding: 12px; gap: 12px; }
  /* Tables scroll inside their own container rather than pushing the page
     sideways -- the page body must never scroll horizontally. */
  .book { min-width: 460px; }
  .book th, .book td { padding: 10px 12px; }
  .gate-terms { max-height: 150px; font-size: 10.5px; }
}

/* The ticket is what a phone user came for, so on a narrow screen it comes
   before the books rather than under three panels of them. */
@media (max-width: 1039px) {
  .term { display: flex; flex-direction: column; }
  .term > div:last-child { order: -1; }
}

/* ---- two ways in, visibly distinct ---- */
.who-opt { display: grid; gap: 8px; }
.who-opt > b { font-family: var(--mono); font-size: 12.5px; color: var(--ink); letter-spacing: 0.02em; }
.who-opt > p { font-family: var(--mono); font-size: 11px; line-height: 1.65; color: var(--ink-faint); margin: 0; }
.who-opt .btn { width: 100%; justify-content: center; text-align: center; }
.who-sep { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.who-sep::before, .who-sep::after { content: ""; height: 1px; background: var(--line-1); flex: 1; }
.mono-i { font-family: var(--mono); color: var(--ink-dim); }
#who-panel[data-mode="wallet"] #who-x { opacity: 0.55; }
#who-panel[data-mode="x"] #who-wallet { opacity: 0.55; }

/* ---- the desk read: a call, its reasons, and its own scoreboard ---- */
.feat {
  font-style: normal; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--signal); color: var(--signal-lo); border-radius: 2px; padding: 1px 5px;
}
.readout { padding: var(--s2); display: grid; gap: 12px; }
.read-call { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.read-side {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 2px; padding: 2px 7px;
}
.read-side[data-side="long"]  { color: var(--accent); }
.read-side[data-side="short"] { color: var(--warn); }
.read-side[data-side="none"]  { color: var(--ink-faint); }
.read-call b { font-family: var(--mono); font-size: 15px; color: var(--ink); font-weight: 600; }
.read-conv { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.read-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.read-why li {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-dim);
  padding-left: 14px; position: relative;
}
.read-why li::before { content: "·"; position: absolute; left: 3px; color: var(--signal-lo); }
.read-caveat { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin: 0; line-height: 1.6; }
.read-score { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px var(--s2); border-top: 1px solid var(--line-1); padding-top: 12px; }
@media (min-width: 700px) { .read-score { grid-template-columns: repeat(4, 1fr); } }
.read-score div { display: grid; gap: 3px; }
.read-score .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.read-score .v { font-family: var(--mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The call is the control. When there is one, the whole read is a target you
   can hit with a thumb, and it says so before you touch it rather than after. */
#read-body[data-actionable="true"] { cursor: pointer; }
#read-body[data-actionable="true"] .read-call b { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
#read-body[data-actionable="true"]:hover .read-call b { text-decoration-color: var(--signal); }
#read-body[data-actionable="true"] .read-call::after {
  content: "trade it"; margin-left: auto; align-self: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--signal-lo); border: 1px solid var(--line-2); border-radius: 2px; padding: 4px 8px;
}
#read-body[data-actionable="true"]:hover .read-call::after { border-color: var(--signal); color: var(--signal); }
@media (hover: none) { #read-body[data-actionable="true"] .read-call::after { color: var(--signal); border-color: var(--line-2); } }

.mkt-opt .kind {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 4px; margin-left: 5px;
  display: inline-block;
  color: var(--ink-faint); vertical-align: middle;
}
.mkt-opt .kind[data-kind="RWA"] { color: var(--ink-dim); }

.mkt-src {
  margin: 0; padding: 10px var(--s2); font-family: var(--mono); font-size: 9.5px;
  line-height: 1.6; color: var(--ink-faint); border-top: 1px solid var(--line-1);
  position: sticky; bottom: 0; background: var(--card);
}

.mkt-note {
  margin: 0; padding: 10px var(--s2); font-family: var(--mono); font-size: 10.5px;
  line-height: 1.6; color: var(--ink-faint); border-bottom: 1px solid var(--line-1);
}

/* ---- market categories: ours first, then the memes, then the stocks ---- */
.mkt-cats {
  display: flex; gap: 4px; padding: 8px var(--s2); flex-wrap: wrap;
  border-bottom: 1px solid var(--line-1); position: sticky; top: 0;
  background: var(--card); z-index: 1;
}
.cat-btn {
  cursor: pointer; border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: var(--ink-faint); font-family: var(--mono); font-size: 10.5px; padding: 4px 9px;
  letter-spacing: 0.06em; white-space: nowrap;
}
.cat-btn:hover { color: var(--ink); }
.cat-btn[aria-pressed="true"] { color: var(--signal-lo); border-color: var(--line-2); background: rgba(var(--signal-rgb), 0.09); }
.cat-btn i { font-style: normal; opacity: 0.55; margin-left: 4px; }
@media (pointer: coarse) { .cat-btn { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; } }
.mkt-opt .cat-tag { font-size: 9.5px; color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- where the underlying lives ---- */
.mkt-chain {
  display: flex; align-items: center; gap: 8px; padding: 8px var(--s2);
  border-bottom: 1px solid var(--line-1);
}
.mkt-chain label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.mkt-chain select {
  flex: 1; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: 12px; padding: 6px 8px;
}
.mkt-chain select:focus { outline: none; border-color: var(--signal); }
@media (pointer: coarse) { .mkt-chain select { min-height: 42px; font-size: 16px; } }
.mkt-where {
  margin: 0; padding: 9px var(--s2); border-bottom: 1px solid var(--line-1);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6; color: var(--ink-faint);
}
.mkt-where b { color: var(--ink-dim); font-weight: 600; }
.mkt-opt .home {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 2px; padding: 0 4px; color: var(--ink-faint);
}
.mkt-opt .home[data-home="onchain"] { color: var(--accent); }


/* THE BOOK on the perps page. Mobile first: short enough that the terminal
   below it is still the first thing a thumb reaches, taller on a desktop
   where there is room to spare. The canvas owns its own gestures so a finger
   dragging the leverage never scrolls the page out from under itself. */
.pv-plate {
  position: relative;
  margin: 18px 0 26px;
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05), rgba(var(--signal-rgb), 0.04));
  overflow: hidden;
}
#pv-book { width: 100%; height: 190px; display: block; touch-action: none; }
.pv-plate .plate-cap {
  /* CENTRED AND ON ITS OWN LINE. Pinned to the left it clipped on a phone,
     because the caption is longer than the box is wide at 390px. */
  /* transform: none RESETS the base rule's translateX(-50%), which is there
     to centre a caption pinned at left: 50%. Setting left: 0 without clearing
     it shifted the whole line half its own width off the left edge, which is
     exactly what was clipping it on a phone. */
  position: absolute; left: 0; right: 0; bottom: 7px; margin: 0; transform: none;
  text-align: center; white-space: nowrap; max-width: 100%;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); pointer-events: none;
}
@media (min-width: 760px) {
  #pv-book { height: 300px; }
  .pv-plate { margin: 22px 0 32px; }
  .pv-plate .plate-cap { bottom: 10px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { #pv-book { opacity: 0.9; } }

/* ---------------- the solve board ----------------
   Problems are read, not scanned: the title carries the display face, the
   facts sit under it as chips, and every block is one column on a phone. */
.sv-list { display: flex; flex-direction: column; gap: 10px; margin: 0 15px 12px; }
.sv-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line-1); border-radius: 10px; min-width: 0;
}
.sv-item > div { min-width: 0; }
.sv-title { font: 500 21px/1.2 var(--display); letter-spacing: -0.005em; margin: 0 0 6px; overflow-wrap: anywhere; text-wrap: balance; }
.sv-title a { color: inherit; text-decoration: none; }
.sv-title a:hover { color: var(--signal-lo); }
.sv-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font: 400 11.5px/1.4 var(--mono); color: var(--ink-dim); }
.sv-chip {
  display: inline-block; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 99px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap;
}
.sv-chip[data-state="counts"] { color: var(--signal-lo); border-color: var(--signal-lo); }
.sv-chip[data-state="back"] { color: var(--warn); border-color: var(--warn); }
.sv-chip[data-state="live"] { color: var(--ink); border-color: var(--line-2); }
.sv-counts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font: 500 12px/1.3 var(--mono); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.sv-counts b { color: var(--ink); font-weight: 600; }
.sv-open { display: flex; align-items: center; }
.sv-head { padding: 4px 15px 0; }
.sv-head h3 { font: 500 26px/1.15 var(--display); letter-spacing: -0.01em; margin: 6px 0 8px; overflow-wrap: anywhere; text-wrap: balance; }
.sv-text { max-width: 68ch; font-size: 15px; line-height: 1.55; color: var(--ink); margin: 10px 0 12px; overflow-wrap: anywhere; }
.sv-line { font: 400 12px/1.6 var(--mono); color: var(--ink-faint); margin: 0 0 10px; overflow-wrap: anywhere; }
.sv-line a { color: inherit; }
.sv-pieces { display: flex; flex-direction: column; gap: 14px; margin: 6px 15px 12px; }
.sv-piece { border-left: 2px solid var(--line-2); padding: 2px 0 2px 14px; min-width: 0; }
.sv-q { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0 0 8px; }
.sv-q b { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--signal-lo); }
.sv-q span { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.sv-q small { font: 400 11px/1 var(--mono); color: var(--ink-faint); }
.sv-answers { display: flex; flex-direction: column; gap: 8px; }
.sv-answer { border: 1px solid var(--line-1); border-radius: 9px; padding: 10px 12px; min-width: 0; }
.sv-answer[data-state="counts"] { border-color: var(--signal-lo); }
.sv-answer[data-state="back"] { opacity: .82; }
.sv-answer .sv-meta { margin-bottom: 6px; }
.sv-answer p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.sv-answer small.sv-how { display: block; font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sv-reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 10px; }
.sv-reply label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sv-reply label span { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.sv-reply input { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid var(--line-2); color: var(--ink); font: 500 13px/1.2 var(--mono); padding: 9px 10px; border-radius: 7px; outline: none; min-width: 0; }
.sv-reply input:focus { border-color: var(--signal-lo); }
.sv-form { display: grid; gap: 10px 12px; grid-template-columns: 1fr 1fr 1fr; margin: 0 15px 12px; }
.sv-form label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sv-form label span { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.sv-form input, .sv-form select, .sv-form textarea {
  width: 100%; box-sizing: border-box; background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font: 500 13px/1.35 var(--mono); padding: 9px 10px; border-radius: 7px; outline: none; min-width: 0;
}
.sv-form textarea { min-height: 96px; resize: vertical; }
.sv-form input:focus, .sv-form select:focus, .sv-form textarea:focus { border-color: var(--signal-lo); }
.sv-form .ex-wide { grid-column: 1 / -1; }
.sv-stats { margin: 0 15px 12px; }
.sv-pool { margin: 0 15px 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sv-pool-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 500 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sv-pool-head a { font-size: 11px; letter-spacing: .04em; text-transform: none; }
.sv-pool-kv { margin: 8px 0 6px; }
.sv-pool-sub { margin: 8px 0 2px; font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.sv-pool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 400 12px/1.5 var(--mono); }
.sv-pool-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.sv-pool-list code { font-size: 11px; color: var(--ink-faint); word-break: break-all; }
.sv-domains { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 15px 12px; }
.sv-dom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "blurb count"; gap: 2px 8px; align-items: center;
  text-align: left; background: transparent; border: 1px solid var(--line-1); border-radius: 9px; padding: 9px 11px; color: var(--ink); cursor: pointer; min-width: 0;
  transition: border-color .12s ease, background .12s ease;
}
.sv-dom:hover { border-color: var(--line-2); }
.sv-dom:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 2px; }
.sv-dom[aria-pressed="true"] { border-color: var(--signal-lo); background: color-mix(in srgb, var(--signal-lo) 8%, transparent); }
.sv-dom b { grid-area: name; font: 500 13px/1.25 var(--display); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.sv-dom i { grid-area: blurb; font: 400 10.5px/1.35 var(--mono); font-style: normal; color: var(--ink-faint); overflow-wrap: anywhere; }
.sv-dom span { grid-area: count; font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--signal-lo); }
.sv-dom[data-dom]::before { content: ""; display: none; }
.sv-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin: 0 15px 12px; }
.sv-search { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sv-search span { font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.sv-search input { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid var(--line-2); color: var(--ink); font: 500 13px/1.2 var(--mono); padding: 9px 10px; border-radius: 7px; outline: none; min-width: 0; -webkit-appearance: none; appearance: none; }
.sv-search input:focus { border-color: var(--signal-lo); }
.sv-sum { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); max-width: 68ch; overflow-wrap: anywhere; }
.sv-by { color: var(--ink-faint); font-weight: 400; }
button.sv-chip { background: transparent; cursor: pointer; font: inherit; }
.sv-chip[data-dom] { color: var(--ink); border-color: var(--line-2); }
.sv-back { margin: 2px 15px 4px; font: 400 12px/1.6 var(--mono); color: var(--ink-faint); }
.sv-back a { color: var(--ink-dim); text-decoration: none; }
.sv-back a:hover { color: var(--signal-lo); }
.sv-give { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin: 6px 0 10px; }
.sv-give code { display: block; font: 400 12px/1.5 var(--mono); color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); border: 1px solid var(--line-1); border-radius: 7px; padding: 9px 10px; overflow-wrap: anywhere; white-space: normal; user-select: all; }
.se-block { margin: 0 0 18px; }
.se-sub { margin: 0 15px 8px; padding: 0; border: 0; }
.se-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
.se-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.se-agent-caps { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-top: 8px; }
.se-agent-caps input { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid var(--line-2); color: var(--ink); font: 500 13px/1.2 var(--mono); padding: 8px 10px; border-radius: 7px; outline: none; min-width: 0; }
.se-agent-caps input:focus { border-color: var(--signal-lo); }

/* ---- the mind: the film, alive ---- */
.mind { --m-bg: #12306f; --m-bg2: #1b3f90; --m-deep: #0b2258; --m-ink: #f4f6fb; --m-dim: rgba(244,246,251,.62); --m-faint: rgba(244,246,251,.38); --m-line: rgba(244,246,251,.16); --m-signal: #f0937f;
  position: relative; z-index: 1; isolation: isolate; overflow: hidden; color: var(--m-ink); min-height: 100vh; box-sizing: border-box; padding: 14px 16px 26px;
  background: radial-gradient(120% 70% at 70% 20%, var(--m-bg2), var(--m-bg) 55%, var(--m-deep) 100%); }
.mind::after { content: ""; position: absolute; inset: 0; background-image: url("grain.png"); opacity: .10; pointer-events: none; z-index: 0; mix-blend-mode: overlay; }
.mind > * { position: relative; z-index: 1; }
.mind a { color: var(--m-ink); text-decoration-color: var(--m-signal); }
.mind-ground { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0 !important; pointer-events: none; }
.mind-rule { display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto 10px; font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--m-dim); }
.mind-rule i { flex: 1 1 auto; height: 1px; background: var(--m-line); min-width: 8px; }
.mind-rule #mind-state { color: #9fe0b8; }
.mind-rule #mind-state[data-state="rest"] { color: var(--m-signal); }
.mind-rule #mind-state[data-state="off"] { color: var(--m-faint); }
.mind-stage { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 18px; min-height: 560px; }
.mind-cloud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.mind-copy { position: relative; z-index: 2; padding: 34px 8px 34px 12px; max-width: 34rem; }
.mind-h { margin: 0 0 18px; font: 300 clamp(34px, 4.4vw, 58px)/1.08 var(--display); letter-spacing: -0.012em; color: var(--m-ink); text-wrap: balance; }
.mind-h span { display: block; }
.mind-h em { font-style: italic; color: var(--m-signal); font-weight: 400; }
.mind-cap { margin: 0; font: 400 12.5px/1.6 var(--mono); color: var(--m-dim); max-width: 40rem; overflow-wrap: anywhere; }
.mind-when { margin: 8px 0 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--m-faint); }
.mind-plate { position: relative; z-index: 1; display: grid; place-items: center; min-height: 520px; isolation: isolate; }
.mind-pebbles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: pan-y; cursor: crosshair; }
.mind-thms { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mind-thm { position: absolute; max-width: 34%; font: 400 11.5px/1.45 var(--mono); color: var(--m-faint); overflow-wrap: anywhere; transition: color .8s ease, text-shadow .8s ease; }
.mind-thm[data-lit="1"] { color: var(--m-ink); text-shadow: 0 0 14px rgba(244,246,251,.35); }
.mind-plate-cap { position: absolute; z-index: 3; bottom: 6px; left: 50%; transform: translateX(-50%); margin: 0; font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--m-faint); white-space: nowrap; }
.mind-word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 4; text-align: center; pointer-events: none; font: 400 italic clamp(56px, 9vw, 128px)/1 var(--display); color: var(--m-signal); letter-spacing: -0.01em; opacity: 0; transition: opacity .6s ease; text-shadow: 0 0 40px rgba(240, 147, 127, .35); }
.mind-word[data-on="1"] { opacity: 1; }
.mind-hud { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 1240px; margin: 12px auto 0; }
.mind-hud div { border-top: 1px solid var(--m-line); padding: 8px 2px 0; min-width: 0; }
.mind-hud span { display: block; font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-faint); margin-bottom: 4px; overflow-wrap: anywhere; }
.mind-hud b { display: block; font: 400 22px/1.1 var(--display); font-variant-numeric: tabular-nums; color: var(--m-ink); overflow-wrap: anywhere; }
.mind-wall { max-width: 1240px; margin: 16px auto 0; border: 1px solid var(--m-line); border-radius: 6px; padding: 10px 12px 8px; background: rgba(11, 34, 88, .35); backdrop-filter: blur(2px); }
.mind-wall-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--m-faint); margin-bottom: 8px; }
.mind-raster { width: 100%; height: 190px; display: block; }
.mind-log { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mind-log li { display: grid; grid-template-columns: 5.2em 6.5em minmax(0, 1fr); gap: 8px; font: 400 12px/1.45 var(--mono); color: var(--m-dim); }
.mind-log li b { font-weight: 500; color: var(--m-faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; padding-top: 2px; }
.mind-log li small { color: var(--m-faint); font-variant-numeric: tabular-nums; padding-top: 1px; }
.mind-log li[data-tone="up"] span { color: var(--m-ink); }
.mind-log li[data-tone="up"] b { color: var(--m-signal); }
.mind-log li:first-child span { color: var(--m-ink); }
.mind-foot { max-width: 1240px; margin: 14px auto 0; font: 400 11.5px/1.6 var(--mono); color: var(--m-faint); }
.mind-foot p { margin: 0; }
body[data-clip="1"] .nav, body[data-clip="1"] .foot, body[data-clip="1"] .mind-foot, body[data-clip="1"] .mind-wall, body[data-clip="1"] .mind-hud, body[data-clip="1"] .hx-fab, body[data-clip="1"] [class*="fab"] { display: none !important; }
body[data-clip="1"] .mind { padding-top: 10px; min-height: 100vh; }
body[data-clip="1"] .mind-stage { min-height: calc(100vh - 60px); }
@media (max-width: 760px) {
  .mind { padding: 10px 12px 22px; }
  .mind-rule { gap: 8px; font-size: 9px; letter-spacing: .12em; }
  .mind-rule span:nth-child(5), .mind-rule i:nth-child(6) { display: none; }
  .mind-stage { grid-template-columns: 1fr; min-height: 0; gap: 4px; }
  .mind-copy { padding: 14px 4px 6px; order: 2; max-width: none; }
  .mind-h { font-size: clamp(30px, 9vw, 40px); margin-bottom: 12px; }
  .mind-plate { order: 1; min-height: 380px; }
  .mind-plate-cap { white-space: normal; text-align: center; width: 92%; line-height: 1.5; letter-spacing: .14em; }
  .mind-thm { font-size: 10px; max-width: 40%; }
  .mind-word { font-size: 64px; top: 30%; }
  .mind-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .mind-hud b { font-size: 18px; }
  .mind-raster { height: 150px; }
  .mind-log li { grid-template-columns: 4.6em minmax(0, 1fr); }
  .mind-log li b { display: none; }
}
.sv-events { list-style: none; margin: 4px 15px 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sv-events li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--ink-dim); }
.sv-events li small { font: 400 11px/1.6 var(--mono); color: var(--ink-faint); }
@media (max-width: 640px) {
  .sv-item { grid-template-columns: 1fr; padding: 13px 14px; }
  .sv-open .btn { width: 100%; text-align: center; }
  .sv-title { font-size: 19px; }
  .sv-head h3 { font-size: 22px; }
  .sv-form { grid-template-columns: 1fr; }
  .sv-reply { grid-template-columns: 1fr; }
  .sv-domains { grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 14px 12px; }
  .sv-dom { padding: 8px 9px; }
  .sv-dom b { font-size: 12.5px; }
  .sv-dom i { display: none; }
  .sv-tools { grid-template-columns: 1fr; }
  .sv-tools .btn { width: 100%; text-align: center; }
  .sv-give { grid-template-columns: 1fr; }
  .se-form { grid-template-columns: 1fr; }
  .se-btns .btn { flex: 1 1 42%; text-align: center; }
  #se-me { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #se-me strong { font-size: 12px; overflow-wrap: anywhere; }
  .se-agent-caps { grid-template-columns: 1fr 1fr; }
  .se-agent-caps .btn { grid-column: 1 / -1; width: 100%; text-align: center; }
  .sv-give .btn { width: 100%; text-align: center; }
  .sv-stats { margin: 0 14px 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sv-stats div { padding: 7px 8px; }
  .sv-stats small { font-size: 10px; letter-spacing: .03em; }
  .sv-stats strong { font-size: 12.5px; }
  .sv-reply .btn { width: 100%; text-align: center; }
  .sv-actions .btn { flex: 1 1 auto; text-align: center; }
  .sv-events li { grid-template-columns: 1fr; gap: 2px; }
  .sv-piece { padding-left: 11px; }
}
/* the in-app browser notice: one bar at the very top, above the nav, dismissable */
.inapp-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: #0b2258; color: #f4f6fb; font: 400 13px/1.45 var(--mono); border-bottom: 1px solid rgba(244,246,251,.18); }
.inapp-bar span { flex: 1 1 260px; min-width: 0; }
.inapp-bar button { font: 500 12px/1 var(--mono); letter-spacing: .04em; border: 1px solid rgba(244,246,251,.35); background: transparent; color: #f4f6fb; border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.inapp-bar .inapp-x { border: 0; font-size: 18px; padding: 2px 6px; }
/* THE NEWS COLUMN: a headline rail, tabs with a sliding ink, a grid of cards that grows with
   its content (never a box of fixed height), and the machine's record as a dated timeline. */
.sect-news .lede { max-width: 44rem; }
.news-ticker { position: relative; overflow: hidden; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); margin: 0 0 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.news-ticker-track { display: flex; width: max-content; animation: news-tk var(--tk-dur, 70s) linear infinite; will-change: transform; }
.news-ticker:hover .news-ticker-track, .news-ticker:focus-within .news-ticker-track { animation-play-state: paused; }
@keyframes news-tk { to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: baseline; gap: 10px; padding: 13px 24px; font: 400 13px/1.3 var(--mono); color: var(--ink-dim); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--line-1); transition: color .25s ease; }
.tk b { font-weight: 500; color: var(--signal-lo); letter-spacing: .04em; }
.tk.is-house b { color: var(--ink); }
.tk:hover, .tk:focus-visible { color: var(--ink); outline: none; }
.news-tabs { position: relative; display: flex; gap: 2px; margin: 0 0 24px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; border-bottom: 1px solid var(--line-1); }
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab { flex: 0 0 auto; position: relative; z-index: 1; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border: 0; background: transparent; color: var(--ink-faint); padding: 15px 14px; cursor: pointer; white-space: nowrap; transition: color .25s ease; }
.news-tab[aria-selected="true"], .news-tab:hover { color: var(--ink); }
.news-tab:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: -2px; border-radius: 6px; }
.news-tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--signal-lo); transition: transform .42s cubic-bezier(.2,.8,.2,1), width .42s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.news-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-flow: dense; gap: 18px; align-items: start; }
.news-feed .cd-why-none { grid-column: 1 / -1; }
.news-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line-1); border-radius: 14px; overflow: hidden; background: var(--card); color: inherit; text-decoration: none; opacity: 0; transform: translateY(18px); transition: opacity .65s ease calc(var(--i, 0) * 55ms), transform .65s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 55ms), box-shadow .35s ease, border-color .35s ease; }
.news-card.is-in { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 55ms), calc(var(--i, 0) * 55ms), 0s, 0s; }
.news-card.is-in:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(var(--ink-rgb), .5); border-color: var(--line-2); transition-delay: 0s; }
.news-card:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 3px; }
.news-card.is-lead { grid-column: span 2; }
.news-card.is-house { border-top: 3px solid var(--signal-lo); }
.news-pic { margin: 0; position: relative; overflow: hidden; background: #12306f; aspect-ratio: var(--ar, 1.6); max-height: 560px; }
.news-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.news-card:hover .news-pic img { transform: scale(1.045); }
.news-play { position: absolute; left: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; padding-left: 3px; background: rgba(6,21,63,.72); color: #fff; font-size: 13px; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.35); }
.news-body { padding: 16px 18px 15px; display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 auto; }
.news-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.news-mono { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--mono); color: #fff; background: hsl(var(--h, 220) 46% 42%); overflow: hidden; }
.news-mono.is-pic { object-fit: cover; background: var(--line-1); box-shadow: 0 0 0 1px var(--line-1); }
.tk-mark { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; align-self: center; font: 600 9px/1 var(--mono); color: #fff; background: hsl(var(--h, 220) 46% 42%); overflow: hidden; }
.tk-mark.is-pic { object-fit: cover; background: var(--line-1); }
.tk { align-items: center; }
.news-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 400 11.5px/1.2 var(--mono); color: var(--ink-faint); }
.news-name b { font-weight: 500; color: var(--ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-who time { margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--ink-faint); white-space: nowrap; }
.news-text { margin: 0; font: 400 16px/1.5 var(--display); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.news-card.is-lead .news-text { font-size: clamp(17px, 1.5vw, 20px); -webkit-line-clamp: 9; }
.news-text .lnk { color: var(--signal-lo); }
.news-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 400 11.5px/1.3 var(--mono); color: var(--ink-faint); margin-top: auto; min-width: 0; }
.news-meta { flex-wrap: wrap; }
.news-meta > span:first-child { min-width: 0; }
.news-open { margin-left: auto; }
.news-open { color: var(--ink); opacity: 0; transform: translateX(-4px); transition: opacity .3s ease, transform .3s ease; white-space: nowrap; }
.news-open i { font-style: normal; }
.news-card:hover .news-open, .news-card:focus-visible .news-open { opacity: 1; transform: none; }
.news-more { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 26px 0 0; }
.news-more a { font: 400 12.5px/1.4 var(--mono); color: var(--ink-faint); }
.news-more a:hover { color: var(--ink); }
/* the record: a dated timeline with a rail, each change with its own picture */
.news-feed.is-record { display: block; }
.rec-row { display: grid; grid-template-columns: 96px 24px minmax(0, 1fr); gap: 0 18px; padding: 0 0 16px; opacity: 0; transform: translateY(14px); transition: opacity .6s ease calc(var(--i, 0) * 50ms), transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 50ms); }
.rec-row.is-in { opacity: 1; transform: none; }
.rec-date { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; text-align: right; font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.rec-date b { font: 500 18px/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
.rec-rail { position: relative; }
.rec-rail::before { content: ""; position: absolute; left: 11px; top: 0; bottom: -16px; width: 1px; background: var(--line-2); }
.rec-row:last-child .rec-rail::before { bottom: 0; }
.rec-rail::after { content: ""; position: absolute; left: 7px; top: 19px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal-lo); box-shadow: 0 0 0 4px var(--card, #fff); }
.rec-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); border: 1px solid var(--line-1); border-radius: 12px; overflow: hidden; background: var(--card); color: inherit; text-decoration: none; transition: box-shadow .35s ease, border-color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.rec-card:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(var(--ink-rgb), .5); border-color: var(--line-2); }
.rec-card:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 3px; }
.rec-art { width: 100%; height: 100%; min-height: 124px; display: block; background: #12306f; }
.rec-body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 9px; justify-content: center; min-width: 0; }
.rec-body h3 { margin: 0; font: 400 clamp(17px, 1.5vw, 20px)/1.28 var(--display); letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.rec-meta { margin: 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font: 400 11.5px/1.3 var(--mono); color: var(--ink-faint); }
.rec-chip { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 9px; color: var(--ink); }
@media (max-width: 700px) {
  .news-ticker { margin-bottom: 22px; }
  .tk { padding: 11px 16px; font-size: 12px; }
  .news-tab { padding: 13px 12px; }
  .news-tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 40px; }
  .news-feed { grid-template-columns: 1fr; gap: 14px; }
  .news-card.is-lead { grid-column: auto; }
  .news-card.is-lead .news-text { font-size: 16.5px; }
  .news-text { font-size: 15.5px; }
  .news-pic { max-height: 62vh; }
  .rec-row { grid-template-columns: 1fr; gap: 8px; padding-bottom: 14px; }
  .rec-date { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 4px; text-align: left; }
  .rec-date b { font-size: 16px; }
  .rec-rail { display: none; }
  .rec-card { grid-template-columns: 1fr; }
  .rec-art { height: 120px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .news-ticker-track { animation: none; width: auto; overflow-x: auto; }
  .news-card, .rec-row { opacity: 1; transform: none; transition: none; }
  .news-pic img, .news-card, .rec-card { transition: none; }
  .news-tab-ink { transition: none; }
}

/* an inline action that reads as a link inside a note */
.sv-inline{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sv-inline:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---- what is waiting to be collected, and the address check ---------------
   Every token in the claim wallet is already recorded to a holder by a frozen
   round: the holdings and the promise agree to the wei. Most of it is still
   there only because the holder does not know, so the figure leads, and the
   check under it needs nothing connected. Connecting is where people drop, and
   it buys nothing for a look: a claim can only ever send an address its own
   tokens, so there is no permission to ask for. */
.claim-waiting{margin:1.25rem 0 1.75rem;padding:1rem 1.1rem;border:1px solid rgba(var(--ink-rgb),.14);border-radius:12px;background:var(--card)}
.claim-waiting[data-state="loading"]{opacity:.6}
.cw-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;margin-bottom:.4rem}
.cw-k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.cw-v{font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.cw-note{margin:.15rem 0 .9rem;font-size:.82rem;line-height:1.5;color:var(--ink-dim)}
.cw-check{border-top:1px solid rgba(var(--ink-rgb),.1);padding-top:.85rem}
.cw-label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.45rem}
.cw-row{display:flex;flex-wrap:wrap;gap:.5rem}
.cw-input{flex:1 1 16rem;min-width:0;padding:.6rem .7rem;border-radius:8px;border:1px solid rgba(var(--ink-rgb),.2);background:var(--raise);color:var(--ink);font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.86rem}
.cw-input:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.cw-btn{flex:0 0 auto;padding:.6rem 1.1rem;border-radius:8px;border:1px solid rgba(var(--ink-rgb),.22);background:var(--raise);color:var(--ink);font:inherit;cursor:pointer}
.cw-btn:hover{border-color:var(--signal);color:var(--signal-lo)}
.cw-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.cw-out{margin:.7rem 0 0;font-size:.85rem;line-height:1.55;color:var(--ink-dim)}
/* the round clock: a countdown measured from the rounds' own spacing, and one
   tick per open round, oldest on the left. life left is the shade, one hue
   light to dark, so the strip reads as a single quantity and never as a
   status. text stays in ink; the ticks carry the number. */
.cw-clock{border-top:1px solid rgba(var(--ink-rgb),.1);margin-top:.9rem;padding-top:.85rem;--life-1:#e4edf7;--life-2:#c3d6ec;--life-3:#8fb4dd;--life-4:#5f8fc4;--life-5:#3b6ea6}
.cw-clock[data-state="loading"] .cwc-count,.cw-clock[data-state="offline"] .cwc-count{color:var(--ink-faint)}
.cw-clock[data-state="offline"] .cwc-strip,.cw-clock[data-state="empty"] .cwc-strip{display:none}
.cwc-lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem}
.cwc-count{font-family:var(--mono);font-size:2rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;color:var(--ink)}
.cwc-k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.cwc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem .9rem;margin:.75rem 0 .8rem}
.cwc-cell{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cwc-ck{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
.cwc-cv{font-family:var(--mono);font-size:.98rem;font-variant-numeric:tabular-nums;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.cwc-cs{font-family:var(--mono);font-size:.68rem;line-height:1.3;color:var(--ink-faint)}
.cwc-cs:empty{display:none}
.cw-clock[data-state="loading"] .cwc-cv,.cw-clock[data-state="offline"] .cwc-cv{color:var(--ink-faint)}
@media (max-width:560px){.cwc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.rows .t.age{display:block;grid-column:2;white-space:normal;margin-top:2px;font-size:11px}}
.cwc-strip{display:flex;gap:1px;height:28px;align-items:flex-end;min-height:44px;padding:8px 0;box-sizing:content-box;touch-action:none;cursor:crosshair}
.cwc-strip i{flex:1 1 0;min-width:1px;height:28px;background:var(--life-3);border-radius:1px 1px 0 0}
.cwc-strip i[data-life="1"]{background:var(--life-1)}
.cwc-strip i[data-life="2"]{background:var(--life-2)}
.cwc-strip i[data-life="3"]{background:var(--life-3)}
.cwc-strip i[data-life="4"]{background:var(--life-4)}
.cwc-strip i[data-life="5"]{background:var(--life-5)}
.cwc-strip i[data-hot="true"]{outline:2px solid var(--signal);outline-offset:1px}
.cwc-tip{margin:.35rem 0 0;font-family:var(--mono);font-size:.76rem;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}
.cwc-note{margin:.6rem 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-faint)}
/* a round's life left on a row: the track is a lighter step of the same ramp, the fill the darker */
.rows .life{display:inline-block;width:56px;height:4px;vertical-align:middle;margin-left:8px;border-radius:2px;background:var(--life-1,#e4edf7);overflow:hidden}
.rows .life i{display:block;height:100%;width:calc(var(--f,0) * 100%);background:var(--life-4,#5f8fc4);border-radius:2px}
.rows .t.age{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:480px){.cwc-count{font-size:1.7rem}.cwc-strip{height:22px}.cwc-strip i{height:22px}.rows .life{width:40px}}
.cw-out[data-state="found"]{color:var(--signal-lo)}
@media (max-width:480px){.cw-v{font-size:1.35rem}.cw-btn{flex:1 1 100%}}

/* ── Overtone ─────────────────────────────────────────────────────────
   The shared language sits above the board, because the language is the
   finding and the board is the evidence. Each coin is a card carrying the
   face its launcher chose, how far up its curve it is, and whether anyone
   has noticed: three facts, in that order of size. */
.ot-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
.ot-term { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px; background: rgba(var(--signal-rgb), 0.06); }
.ot-term b { font-family: var(--mono); font-size: 16px; letter-spacing: .02em; color: var(--ink); }
.ot-term i { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint); }
.ot-shapes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ot-shape { border: 1px solid var(--line-1); border-radius: 999px; padding: 5px 12px;
  display: flex; align-items: baseline; gap: 8px; }
.ot-shape b { font-size: 12px; color: var(--ink); text-transform: lowercase; }
.ot-shape i { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--ink-faint); }

.ot-board { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.ot-card { border: 1px solid var(--line-1); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; background: rgba(var(--ink-rgb), 0.015);
  transition: border-color 140ms, transform 140ms; }
.ot-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
/* the whole tile is the way in: it opens the coin on the launchpad */
.ot-card[data-buy] { cursor: pointer; }
.ot-card[data-buy]:hover { border-color: rgba(var(--signal-rgb), .5); }
.ot-card[data-buy]:focus-visible { outline: 2px solid rgba(var(--signal-rgb), .8); outline-offset: 2px; }
/* the ones about to bond earn the accent, and only those */
.ot-card.is-hot { border-color: rgba(var(--signal-rgb), 0.55); background: rgba(var(--signal-rgb), 0.05); }
.ot-card-top { display: flex; align-items: center; gap: 11px; }
.ot-avatar { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; overflow: hidden;
  position: relative; border: 1px solid var(--line-1);
  background: hsl(var(--ot-hue, 210) 42% 52% / 0.22); }
/* the initials sit underneath; a picture that loads covers them, and one that
   fails removes itself and uncovers them again */
.ot-avatar::after { content: attr(data-fallback); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  color: hsl(var(--ot-hue, 210) 46% 34%); }
:root:not([data-theme="light"]) .ot-avatar::after { color: hsl(var(--ot-hue, 210) 52% 78%); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .ot-avatar::after { color: hsl(var(--ot-hue, 210) 46% 34%); } }
:root[data-theme="dark"] .ot-avatar::after { color: hsl(var(--ot-hue, 210) 52% 78%); }
.ot-avatar img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-id { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.ot-id b { font-family: var(--mono); font-size: 13.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-id i { font-style: normal; font-size: 11.5px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-pct { display: flex; align-items: baseline; gap: 1px; font-family: var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink); }
.ot-pct span { font-size: 19px; letter-spacing: -.01em; }
.ot-pct small { font-size: 10px; color: var(--ink-faint); }
.ot-card.is-hot .ot-pct span { color: var(--signal-lo, var(--ink)); }
.ot-desc { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ot-bar { height: 3px; border-radius: 2px; background: rgba(var(--ink-rgb), 0.09); overflow: hidden; }
.ot-bar span { display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, hsl(var(--ot-hue, 210) 44% 55% / .75), rgba(var(--signal-rgb), .9)); }
.ot-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ot-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-1); color: var(--ink-dim); }
.ot-tag-shape { border-color: rgba(var(--signal-rgb), .4); color: var(--ink); }
.ot-tag-quiet { opacity: .5; }
.ot-tag-move { border-color: rgba(var(--signal-rgb), .45); background: rgba(var(--signal-rgb), .07); color: var(--ink); }
@media (max-width: 640px) {
  .ot-board { grid-template-columns: 1fr; }
  .ot-term b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .ot-card { transition: none; } .ot-card:hover { transform: none; } }

/* the launcher's own links, and the contract. A button only where there is
   really something behind it, and the marks are inline so nothing is fetched
   and nothing can fail to load. */
.ot-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 2px; }
.ot-link { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line-1);
  color: var(--ink-faint); text-decoration: none;
  transition: color 120ms, border-color 120ms, background 120ms; }
.ot-link svg { width: 13px; height: 13px; display: block; }
.ot-link:hover { color: var(--ink); border-color: rgba(var(--signal-rgb), .65); background: rgba(var(--signal-rgb), .08); }
.ot-link:focus-visible { outline: 2px solid rgba(var(--signal-rgb), .8); outline-offset: 2px; }
/* an X account is the one the launcher paid for and the one this desk is about */
.ot-link-x { color: var(--ink); border-color: var(--line-2); }
.ot-link-scan { opacity: .6; }
.ot-link-scan:hover { opacity: 1; }
/* copying is a button, not a link, because it copies rather than navigates */
button.ot-link { background: none; cursor: pointer; font: inherit; padding: 0; }
.ot-link-ca[data-copied="true"] { color: var(--ink); border-color: rgba(var(--signal-rgb), .8); background: rgba(var(--signal-rgb), .12); }
.ot-link-ca[data-copied="true"]::after { content: "copied"; position: absolute; margin-top: -34px;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); background: var(--paper, rgba(var(--ink-rgb), .06)); padding: 2px 5px; border-radius: 4px; }
.ot-link-ca { position: relative; }

/* the reading that a curve will actually finish, which is not how far it has
   got: most stall in the middle, so the two figures are shown apart and never
   blended into one number that means neither. */
.ot-odds { display: flex; align-items: center; gap: 7px; }
.ot-odds em { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ot-odds-bar { flex: 1 1 auto; height: 2px; border-radius: 2px; background: rgba(var(--ink-rgb), .09); overflow: hidden; }
.ot-odds-bar i { display: block; height: 100%; background: rgba(var(--signal-rgb), .78); }
.ot-odds b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-dim); }
.ot-card { min-height: 0; }

/* our own launches, on the same board as everybody else's coins */
.launch-board { padding: 4px 0 2px; }
.launch-sort { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.launch-sort button { appearance: none; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line-1); border-radius: 999px; padding: 0 12px; min-height: 36px; cursor: pointer; }
.launch-sort button[data-on="true"] { border-color: rgba(var(--signal-rgb), 0.7); background: rgba(var(--signal-rgb), 0.08); color: var(--signal-lo); }
.ot-card[data-go] { cursor: pointer; }
.ot-card[data-go]:hover { border-color: rgba(var(--signal-rgb), .5); }
.ot-card[data-go]:focus-visible { outline: 2px solid rgba(var(--signal-rgb), .8); outline-offset: 2px; }
.ot-foot { margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); }

/* ── the bond market and curve credit ───────────────────────────────────
   Both boards reuse the Overtone card, because they are the same coins
   read three different ways and a reader should recognise them instantly.
   What differs is the one thing each desk is actually for: a price, or an
   advance. That sits where the eye lands first and everything else is the
   house showing its working underneath. */
.bm-stats {
  display: grid; gap: 10px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.bm-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border: 1px solid var(--rule, rgba(0,0,0,.12));
  border-radius: 10px; background: var(--paper-2, rgba(0,0,0,.02));
}
.bm-stat em { font-style: normal; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .6; }
.bm-stat b { font-size: 19px; font-variant-numeric: tabular-nums; }

/* the price is the product, so it is the biggest thing on the card */
.bm-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
/* THE TWO PRICES ARE THE CONTROL. They are buttons now rather than labels, so
   they have to reset the button defaults a browser hands them and then look
   like something worth pressing. */
.bm-price {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 10px 8px; border-radius: 10px; border: 1px solid var(--rule, rgba(0,0,0,.12));
  width: 100%; font: inherit; color: inherit; text-align: center;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.bm-price[disabled] { cursor: default; opacity: .75; }
.bm-price:not([disabled]):hover { border-color: currentColor; }
.bm-price:not([disabled]):active { transform: translateY(1px); }
.bm-price:focus-visible { outline: 2px solid var(--accent, #c2512f); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bm-price { transition: none; } }

/* and the launchpad, demoted from the whole tile to one honest link */
.bm-tag-link { text-decoration: none; }
.bm-tag-link:hover { text-decoration: underline; }

/* a card is a control, so it says so on hover without pretending to be a link */
.bm-card[data-pick] { cursor: pointer; }
.bm-card[data-pick]:focus-visible { outline: 2px solid var(--accent, #c2512f); outline-offset: 2px; }
.bm-price em { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.bm-price b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.bm-price b small { font-size: 14px; opacity: .55; margin-left: 1px; }
.bm-yes { background: color-mix(in srgb, var(--good, #1a7f4b) 9%, transparent); border-color: color-mix(in srgb, var(--good, #1a7f4b) 28%, transparent); }
.bm-no  { background: color-mix(in srgb, var(--warn, #9a6b1f) 9%, transparent); border-color: color-mix(in srgb, var(--warn, #9a6b1f) 28%, transparent); }
.bm-why { opacity: .72; font-size: 12.5px; line-height: 1.5; }

.bm-outcome {
  margin-left: auto; align-self: flex-start; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor;
}
.bm-outcome[data-o="yes"] { color: var(--good, #1a7f4b); }
.bm-outcome[data-o="no"]  { color: var(--mute, #7a7a7a); }
.bm-card.is-settled { opacity: .78; }

.bm-rules { margin: 22px 0 0; padding: 16px 18px; border: 1px solid var(--rule, rgba(0,0,0,.12)); border-radius: 12px; }
.bm-rules h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.bm-rules ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.bm-rules li { font-size: 13.5px; line-height: 1.6; opacity: .84; }

/* credit: the advance is the product */
.cc-offer {
  display: flex; flex-direction: column; gap: 2px; margin: 12px 0 10px;
  padding: 12px 13px; border-radius: 10px;
  background: color-mix(in srgb, var(--good, #1a7f4b) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--good, #1a7f4b) 26%, transparent);
}
.cc-offer em { font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
.cc-offer b { font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cc-offer span { font-size: 12px; opacity: .7; }
.cc-refused { margin: 12px 0 10px; font-size: 13px; line-height: 1.5; opacity: .65; }
.cc-card.is-refused { opacity: .72; }

@media (max-width: 420px) {
  .bm-price b { font-size: 22px; }
  .bm-stat b { font-size: 17px; }
}

/* ── the mobile menu ────────────────────────────────────────────────────
   A direct child of <body>, deliberately: the old sheet lived inside a
   position:fixed bar with a backdrop-filter, and a scrolling child of that
   gets its own compositing layer which iOS is free to clip. Rows vanished
   mid scroll and five separate fixes did not stop it, because the problem
   was where the panel lived rather than how it was sized. Out here,
   scrolling is just scrolling.

   Hidden above the breakpoint entirely: the desktop strip is untouched. */
.msheet { display: none; }
body.msheet-on { overflow: hidden; }

@media (max-width: 760px) {
  .msheet[hidden] { display: none; }
  .msheet {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 90;
    background: var(--paper, #fff);
    /* dvh follows the browser chrome as it collapses; vh is the fallback */
    height: 100vh; height: 100dvh;
    animation: msheet-in 160ms var(--ease-out, ease-out);
  }
  @keyframes msheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .msheet { animation: none; } }

  /* the bar: a filter and a way out. With twenty eight destinations, two
     letters beat a thumb, so the field is the first thing under it. */
  .msheet-bar {
    flex: 0 0 auto; display: flex; gap: 10px; align-items: center;
    padding: calc(10px + env(safe-area-inset-top)) var(--gutter, 18px) 10px;
    border-bottom: 1px solid var(--line-1, rgba(0,0,0,.1));
    background: var(--paper, #fff);
  }
  .msheet-q {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px;
    font: inherit; font-size: 16px;            /* 16px or iOS zooms on focus */
    color: var(--ink, #111);
    background: var(--paper-2, rgba(0,0,0,.035));
    border: 1px solid var(--line-2, rgba(0,0,0,.12)); border-radius: 11px;
    -webkit-appearance: none; appearance: none;
  }
  .msheet-q:focus { outline: 2px solid var(--signal-lo, #5b8cff); outline-offset: 1px; }
  .msheet-q::-webkit-search-cancel-button { -webkit-appearance: none; }
  .msheet-x {
    flex: 0 0 auto; height: 44px; padding: 0 15px; font: inherit; font-size: 14.5px;
    color: var(--signal, #2f6bff); background: none; border: 0; border-radius: 10px;
  }
  .msheet-x:active { background: rgba(0,0,0,.05); }

  /* ONE scroll container, and nothing inside it may shrink */
  .msheet-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 4px var(--gutter, 18px) calc(24px + env(safe-area-inset-bottom));
  }
  .msheet-sec { flex: 0 0 auto; margin: 14px 0 4px; }
  .msheet-sec[hidden] { display: none; }
  .msheet-sec h3 {
    position: sticky; top: 0; z-index: 1; margin: 0 0 8px;
    padding: 6px 0; font-size: 11px; font-weight: 600;
    letter-spacing: .11em; text-transform: uppercase; opacity: .55;
    background: var(--paper, #fff);
  }
  /* two across: twenty eight rows in one column is a page you scroll rather
     than a menu you scan */
  .msheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .msheet-row {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-height: 56px; padding: 10px 12px;
    border: 1px solid var(--line-1, rgba(0,0,0,.1)); border-radius: 12px;
    text-decoration: none; color: var(--ink, #111);
    background: var(--paper-2, rgba(0,0,0,.02));
  }
  .msheet-row[hidden] { display: none; }
  .msheet-row b { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
  /* the one-line descriptions are written for a desktop dropdown; at this
     width they turn a menu into an essay, so only the name carries */
  .msheet-row i { display: none; }
  .msheet-row:active { background: rgba(0,0,0,.06); }
  .msheet-row.on {
    border-color: var(--signal, #2f6bff); color: var(--signal, #2f6bff);
    background: rgba(var(--signal-rgb, 47,107,255), .07);
  }
  .msheet[data-empty="true"] .msheet-body::after {
    content: "nothing matches that"; display: block; padding: 28px 2px;
    text-align: center; opacity: .5; font-size: 14px;
  }
  /* one row wide on the narrowest phones, where two would clip the names */
  @media (max-width: 360px) { .msheet-grid { grid-template-columns: 1fr; } }

  /* the chat bubble has nothing to do while the menu is up */
  body.msheet-on .hx-fab, body.msheet-on .hx-chat { display: none !important; }

  /* THE OLD IN-BAR SHEET IS RETIRED. data-menu is still set on the bar, and
     still drives the burger turning into an X, but the strip it used to
     unfold must not unfold any more or two menus stack on one screen. */
  .nav[data-menu="open"] .nav-links { display: none !important; }
}

/* ── taking a side on the bond market ───────────────────────────────────
   Three states, deliberately separate: signed out, signed in but never
   having read what this is, and ready. The middle one is not a formality:
   a stake here can go to zero in full and the page says so before it will
   take anything. */
.bm-seat {
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid var(--rule, rgba(0,0,0,.14)); border-radius: 13px;
  background: var(--paper-2, rgba(0,0,0,.02));
}
.bm-seat-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.bm-seat-head b { font-size: 15px; }
.bm-seat-head span { font-size: 12.5px; opacity: .62; }
.bm-risk {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warn, #9a6b1f) 30%, transparent);
  background: color-mix(in srgb, var(--warn, #9a6b1f) 8%, transparent);
  font-size: 13.5px; line-height: 1.6;
}
.bm-check { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 12px; font-size: 13.5px; cursor: pointer; }
.bm-check input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; }
.bm-seat-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 13px; }
.bm-seat-row code { font-size: 12px; word-break: break-all; }
.bm-seat-row span { opacity: .7; }

.bm-form { display: grid; gap: 9px; grid-template-columns: 1fr; }
.bm-form select, .bm-form input {
  width: 100%; min-height: 44px; padding: 0 12px; font: inherit; font-size: 15px;
  color: var(--ink, #111); background: var(--paper, #fff);
  border: 1px solid var(--line-2, rgba(0,0,0,.16)); border-radius: 10px;
  -webkit-appearance: none; appearance: none;
}
.bm-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bm-side {
  min-height: 44px; border: 1px solid var(--line-2, rgba(0,0,0,.16));
  border-radius: 10px; background: var(--paper, #fff); font-size: 14.5px;
}
#bm-yes.on { border-color: var(--good, #1a7f4b); color: var(--good, #1a7f4b); background: color-mix(in srgb, var(--good, #1a7f4b) 10%, transparent); }
#bm-no.on  { border-color: var(--warn, #9a6b1f); color: var(--warn, #9a6b1f); background: color-mix(in srgb, var(--warn, #9a6b1f) 10%, transparent); }
.bm-msg { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; }
.bm-msg[data-bad="true"] { color: var(--warn, #9a6b1f); }
.bm-msg[data-bad="false"] { color: var(--good, #1a7f4b); }

/* PASTE A CONTRACT AND ASK ABOUT THAT COIN. The board is what the desk is
   already watching; this is the way in for somebody who arrived holding one
   specific thing. Stacked on a phone so the input never shares a row with a
   button and gets squeezed to nothing. */
/* YOUR OWN SIDE OF THE BOOK. Four columns on a desktop, stacked in two on a
   phone, and the state carries a colour so a win, a loss and a live position
   are told apart at a glance rather than by reading. */
.bm-pos { margin-top: 16px; border-top: 1px solid var(--rule, rgba(0,0,0,.12)); padding-top: 14px; }
.bm-pos-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 10px; }
.bm-pos-head b { font-size: 14px; letter-spacing: .02em; }
.bm-pos-head span { font-size: 13px; opacity: .7; }
.bm-pos-rows { display: grid; gap: 8px; }
.bm-pos-row {
  display: grid; gap: 6px 12px; align-items: center;
  grid-template-columns: 1fr auto; padding: 10px 12px;
  border: 1px solid var(--rule, rgba(0,0,0,.12)); border-radius: 10px;
  border-left-width: 3px;
}
.bm-pos-row[data-state="open"] { border-left-color: var(--accent, #c2512f); }
.bm-pos-row[data-state="won"]  { border-left-color: var(--good, #1a7f4b); }
.bm-pos-row[data-state="lost"] { border-left-color: var(--rule, rgba(0,0,0,.2)); opacity: .72; }
.bm-pos-coin { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bm-pos-coin b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-pos-av {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 6px; overflow: hidden;
  display: grid; place-items: center; background: var(--rule, rgba(0,0,0,.08)); font-size: 10px;
}
.bm-pos-av img { width: 100%; height: 100%; object-fit: cover; }
.bm-pos-av::before { content: attr(data-fallback); opacity: .6; }
.bm-pos-av:has(img)::before { content: none; }
.bm-pos-side, .bm-pos-amt { display: grid; gap: 1px; }
.bm-pos-side em, .bm-pos-amt b { font-style: normal; font-size: 13.5px; }
.bm-pos-amt b { font-variant-numeric: tabular-nums; }
.bm-pos-side i, .bm-pos-amt i { font-style: normal; font-size: 11.5px; opacity: .6; }
.bm-pos-amt { text-align: right; }
.bm-pos-when { font-size: 12.5px; opacity: .72; grid-column: 1 / -1; }
@media (min-width: 640px) {
  .bm-pos-row { grid-template-columns: minmax(0,1.2fr) auto auto minmax(0,1fr); }
  .bm-pos-when { grid-column: auto; text-align: right; }
}

/* TWO WALLETS, NAMED. The panel shows an address the person did not create
   beside a balance that is not their MetaMask's, and calling that "your
   wallet" made a true number read as a lie. Each one now carries its own
   label, its own address and its own balance, so there is nothing to mistake
   for the other. */
.bm-wallets { display: grid; gap: 10px; margin: 0 0 12px; }
.bm-w { display: grid; gap: 3px; align-items: baseline; }
.bm-w em { font-style: normal; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; }
.bm-w em i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.85; }
.bm-w code { font-size: 13px; word-break: break-all; opacity: 0.9; }
.bm-w b { font-variant-numeric: tabular-nums; font-size: 15px; }
.bm-w .btn { justify-self: start; }
@media (min-width: 640px) {
  .bm-wallets { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* FUNDING THE TRADING WALLET IN ONE TAP. It starts empty by construction, and
   handing somebody an address to go and paste into their wallet is where every
   first stake was dying. Stacked on a phone, one line on a desktop. */
.bm-fund { display: grid; gap: 8px; align-items: center; margin-top: 10px; }
.bm-fund input {
  width: 100%; min-width: 0; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--line, rgba(0,0,0,0.16)); border-radius: 9px;
  background: var(--card, #fff); color: inherit;
}
.bm-fund input:focus-visible { outline: 2px solid var(--accent, #c2512f); outline-offset: 1px; }
.bm-fund > span { font-size: 13px; opacity: 0.75; line-height: 1.45; }
@media (min-width: 640px) {
  .bm-fund { grid-template-columns: auto 8rem 1fr; }
}

.bm-find { margin: 18px 0 14px; display: grid; gap: 8px; }
.bm-find > label { font-size: 13px; letter-spacing: 0.02em; opacity: 0.75; }
.bm-find-row { display: grid; gap: 8px; }
.bm-find input {
  width: 100%; min-width: 0; padding: 11px 13px; font: inherit; font-size: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--line, rgba(0,0,0,0.16)); border-radius: 10px;
  background: var(--card, #fff); color: inherit;
}
.bm-find input:focus-visible { outline: 2px solid var(--accent, #c2512f); outline-offset: 1px; }
.bm-find .btn { width: 100%; }
@media (min-width: 560px) {
  .bm-find-row { grid-template-columns: 1fr auto; align-items: center; }
  .bm-find .btn { width: auto; }
}

/* on a phone the side buttons and the amount get their own rows already;
   on a wider screen the whole form sits on one line */
@media (min-width: 640px) {
  .bm-form { grid-template-columns: 1.6fr 1.2fr 0.9fr auto; align-items: center; }
  .bm-sides { grid-column: auto; }
}


/* A KEYBOARD USER TABBING INTO A MONEY FIELD MUST SEE IT HAPPEN.
   #ud-amount is where somebody types how much to deposit and it had
   outline:none, border:0 and no focus rule anywhere, so the caret moved and
   nothing else did. .btn carried no :focus-visible either, against 23 bespoke
   rules elsewhere, so Stake, Buy H10 and every sign-in fell back to a 1px
   hairline. */
.ud-amt input:focus-visible,
.ud-amt input:focus {
  outline: 2px solid var(--accent, #c2512f);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible {
  outline: 2px solid var(--accent, #c2512f);
  outline-offset: 2px;
}

/* 44px is the floor for a thing a thumb has to hit, and these were 39px and
   26px. The index zap buttons are the buy and sell for real money. */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  #ix-zap-buy, #ix-zap-sell, #ix-connect { min-height: 44px; }
  .ot-link { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
}

/* THE PROBABILITY IS THE HEADLINE NOW, so it gets the headline's size. */
.bm-odds { display: grid; justify-items: end; gap: 1px; margin-left: auto; }
.bm-odds span { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.bm-odds em { font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }

/* ── the harmonic dollar ──────────────────────────────────────────────────
   The backing figures are the point of the page, so they are set larger than
   anything around them and in tabular figures: two numbers a reader is meant
   to compare digit by digit should line up digit by digit. */
.hd-backing { margin: 14px 0 4px; padding: 14px 0; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1); }
.hd-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hd-fig { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-fig b {
  font-family: var(--mono); font-size: 21px; line-height: 1.15; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.hd-fig i { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.hd-verify { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.hd-verify code {
  font-family: var(--mono); font-size: 11.5px; background: rgba(var(--accent-rgb), .08);
  padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere;
}

.hd-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.hd-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.hd-col-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.hd-quote { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); min-height: 1.2em; }
.hd-plain { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.hd-facts { margin-top: 22px; }
.hd-facts code { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }

/* A finger is not a mouse pointer. These come out at 39px from the shared
   button padding, which is under the 44px a thumb actually needs, and the
   per-component coarse rules elsewhere in this file do not reach .btn. */
@media (pointer: coarse) {
  .hd-cols .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .hd-cols .ud-amt input { min-height: 44px; font-size: 16px; }
}

@media (max-width: 720px) {
  /* Three figures side by side stop being readable well before the cards do. */
  .hd-figs { grid-template-columns: 1fr 1fr; }
  .hd-fig:last-child { grid-column: 1 / -1; }
  .hd-cols { grid-template-columns: 1fr; gap: 22px; }
  .hd-fig b { font-size: 19px; }
}

.hd-split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-1); display: flex; flex-direction: column; gap: 6px; }
.hd-split-line { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.hd-max {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink-dim);
  padding: 3px 7px; cursor: pointer; flex: none;
}
.hd-max:hover { color: var(--ink); border-color: var(--ink-faint); }
@media (pointer: coarse) { .hd-max { min-height: 32px; padding: 0 10px; } }

/* ── payouts: paid in dollars ───────────────────────────────────────── */
/* Four totals in a row, then two by two on a phone. The figures are money
   and counts a reader compares digit by digit, so they are tabular. */
.po-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.po-figs .hd-fig b { font-size: 18px; }
.po-ladder, .po-desk { margin-top: 12px; max-width: 76ch; }
/* The landing lists drop their value column on a phone; a receipt's value IS
   the row, so it stays, right-aligned, on every width. */
.po-rows li { grid-template-columns: 18px 1fr auto; }
.po-rows .t.po-amt { display: block; color: var(--ink); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.po-rows .c a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.po-rows .c a:hover { color: var(--signal-lo); border-bottom-color: var(--signal-lo); }
.po-back { margin-left: auto; color: var(--ink-faint); text-decoration: none; letter-spacing: 0; }
.po-back:hover { color: var(--signal-lo); }
.po-you { margin-top: 2px; }
.po-mode .claim-actions { margin: 0 15px 10px; }
.po-mode-note { max-width: 70ch; }
.hd-read a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.hd-read a:hover { color: var(--signal-lo); border-bottom-color: var(--signal-lo); }
@media (max-width: 760px) {
  .po-rows li { grid-template-columns: 16px 1fr auto; gap: 8px; }
}
@media (max-width: 720px) {
  .po-figs { grid-template-columns: 1fr 1fr; }
  .po-figs .hd-fig:last-child { grid-column: auto; }
  .po-figs .hd-fig b { font-size: 17px; }
  .po-back { margin-left: 0; }
}
@media (pointer: coarse) {
  .po-mode .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* The paid-so-far line on a token page, under the fee chips on the dark hero. */
.tk-paid { margin: 12px 0 0; font-family: var(--mono); font-size: 12.5px; color: #cfdcf1; overflow-wrap: anywhere; }
.tk-paid b { color: #ffffff; font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-paid i { font-style: normal; color: #b9c8e4; }
.tk-paid a { color: #ffffff; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.5); }

/* The dollars figure on a beneficiary row, on the x panel and the dashboard. */
.wl-paid b, .cd-paid b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cd-paid a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
.cd-paid a:hover { color: var(--signal-lo); border-bottom-color: var(--signal-lo); }

/* ---- the chart desk: a coin, a window, a plate ------------------------ */
/* The ask sits on one line on a desk and stacks on a phone, and the plate
   is the widest thing on the page, so it gets the full panel width and its
   own aspect ratio rather than a fixed height that would letterbox it. */
.ch-ask { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ch-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; }
.ch-field > span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.ch-field input, .ch-field select {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--paper-2, rgba(255,255,255,.03));
  color: var(--ink); font: inherit; font-size: 15px;
}
.ch-field-tf { flex: 0 0 110px; }
.ch-ask .btn { min-height: 44px; flex: 0 0 auto; }
.ch-say { margin: 12px 0 0; }
.ch-figs { margin-top: 14px; }
.ch-plate { display: block; margin: 16px 0 0; border-top: 1px solid var(--rule); }
.ch-plate img { display: block; width: 100%; height: auto; }
.ch-read {
  margin: 0; padding: 14px 16px; border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.65; color: var(--ink-dim);
  white-space: pre-wrap; word-break: break-word; font-family: var(--mono, ui-monospace, monospace);
}
.ch-sheet {
  margin: 0; padding: 14px 16px; border-top: 1px solid var(--rule);
  font-size: 15px; line-height: 1.6; color: var(--ink);
}
.ch-proofs { padding: 12px 16px 14px; border-top: 1px solid var(--rule); }
.ch-tally { margin: 0 0 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.ch-proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ch-proof-list li { font-size: 13px; line-height: 1.55; color: var(--ink-dim); display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.ch-proof-list li b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ch-proof-list li[data-status="refuted"] b { color: var(--warn, #b8452b); }
.ch-proof-list li[data-status="held"] b { color: var(--ok, #2d7a4f); }
.ch-foot { margin-top: 18px; }
/* the frontier */
.fr-board { display: grid; gap: 10px; }
.fr-card { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; display: grid; gap: 6px; }
.fr-card h4 { margin: 0; font: 500 19px/1.2 var(--display); letter-spacing: -0.005em; text-wrap: balance; }
.fr-card h4 a { color: inherit; text-decoration: none; }
.fr-card h4 a:hover { color: var(--signal-lo); }
.fr-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-dim); max-width: 78ch; }
.fr-chip[data-status="open"] { color: var(--ink); }
.fr-chip[data-status="partly resolved"] { color: var(--signal-lo); border-color: var(--signal-lo); }
.fr-chip[data-status="resolved"] { color: var(--ok, #2d7a4f); border-color: var(--ok, #2d7a4f); }
.fr-tree { display: grid; gap: 8px; margin: 0 15px 12px; }
.fr-node { border-left: 2px solid var(--rule); padding: 8px 12px; display: grid; gap: 4px; }
.fr-node[data-depth="1"] { margin-left: 18px; }
.fr-node[data-depth="2"] { margin-left: 36px; }
.fr-node[data-status="proved"] { border-left-color: var(--ok, #2d7a4f); }
.fr-node[data-status="known"] { border-left-color: var(--line-2); }
.fr-node[data-kind="conjecture"] { border-left-color: var(--signal-lo); }
.fr-node b { font-weight: 600; }
.fr-node p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.fr-node small { color: var(--ink-dim); font: 400 12px/1.4 var(--mono); }
.fr-room { margin: 10px 15px 12px; display: grid; gap: 8px; }
.fr-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.5; }
.fr-note b { white-space: nowrap; font-weight: 600; }
.fr-note span { color: var(--ink); }
.fr-note small { color: var(--ink-dim); font: 400 11.5px/1.4 var(--mono); }
.fr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 15px 12px; }
.fr-form { display: grid; gap: 8px; margin: 0 15px 12px; }
.fr-form label { display: grid; gap: 4px; font-size: 12px; color: var(--ink-dim); }
.fr-form input, .fr-form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); }
.fr-form textarea { min-height: 120px; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; }
.fr-lean { white-space: pre-wrap; word-break: break-word; font: 400 12px/1.5 var(--mono, ui-monospace, monospace); background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 10px 12px; border-radius: 8px; max-height: 320px; overflow: auto; }
@media (max-width: 640px) { .fr-node[data-depth="1"] { margin-left: 8px; } .fr-node[data-depth="2"] { margin-left: 16px; } .fr-note { grid-template-columns: 1fr; gap: 2px; } }
.ch-panel[data-state="refused"] .ch-say, .ch-panel[data-state="offline"] .ch-say { color: var(--ink); }
@media (max-width: 560px) {
  .ch-field, .ch-field-tf { flex: 1 1 100%; }
  .ch-ask .btn { width: 100%; }
  .ch-read { font-size: 12px; padding: 12px 14px; }
  .ch-sheet { font-size: 14px; padding: 12px 14px; }
  .ch-proof-list li { grid-template-columns: 1fr; gap: 2px; }
}
.fr-thread { margin: 6px 0 6px 18px; padding-left: 10px; border-left: 2px solid var(--rule); }
.fr-replybox { margin: 6px 0 6px 18px; }
.fr-note em { font-style: normal; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; }

/* the atlas */
.fr-atlas { display: block; position: relative; margin: 14px 0 26px; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--ink) 4%, transparent); text-decoration: none; color: inherit; }
.fr-atlas canvas { display: block; width: 100%; height: clamp(220px, 34vw, 380px); }
.fr-atlas-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 10px 16px; background: linear-gradient(to top, color-mix(in srgb, var(--bg, #faf7f0) 92%, transparent), transparent); }
.fr-atlas-cap b { font: 500 18px/1.2 var(--display); letter-spacing: -0.005em; }
.fr-atlas-cap span { font: 400 12px/1.4 var(--mono); color: var(--ink-dim); }
.fr-atlas-cap i { font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--signal-lo); font-style: normal; }
.fr-atlas-dots { position: absolute; top: 10px; right: 12px; display: flex; gap: 5px; }
.fr-atlas-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-dim); opacity: .35; }
.fr-atlas-dots i[data-on="true"] { opacity: 1; background: var(--signal-lo); }
.fr-banner { display: block; width: calc(100% - 30px); height: clamp(180px, 28vw, 300px); margin: 0 15px 12px; border: 1px solid var(--rule); border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (prefers-reduced-motion: reduce) { .fr-atlas canvas { height: clamp(180px, 28vw, 300px); } }
.fr-stats strong { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 640px) { .fr-atlas-dots { top: auto; bottom: 8px; right: 10px; } .fr-atlas-cap { padding-right: 96px; } }

/* =====================================================================
   THE INCOME PAGE: the dividend ledger. The hero keeps the dark head of
   the plate so the white pebbles read; the story is a sticky stage the
   scroll drives; the ledger is a wide table that scrolls sideways on a
   phone with the token column pinned.
   ===================================================================== */
.hero-income {
  margin-top: -68px; padding: 128px 0 var(--s6);
  background: linear-gradient(180deg, #071a4d 0%, #0e3079 42%, #1d4794 74%, #3b68a9 88%, #bccbe3 96%, #f2f5fa 100%);
}
.hero-income h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-income .lede { color: #cfdcf1; max-width: 58ch; }
.hero-income .eyebrow { color: #b3c4e2; }
.hero-income .eyebrow .rule { background: rgba(255,255,255,0.22); }
.in-hero-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .in-hero-grid { grid-template-columns: 1.2fr 1fr; } }
.in-plate { position: relative; min-height: 340px; }
#in-appa { width: 100%; height: 420px; display: block; }
.in-plate .plate-cap { text-align: center; color: #ffffff; margin-top: -6px; text-shadow: 0 1px 10px rgba(7,26,77,0.6); }
.in-stats .wl-stat { border-color: rgba(255,255,255,0.32); background: rgba(7,26,77,0.42); }
@media (max-width: 760px) {
  .hero-income { padding: 108px 0 var(--s5); }
  #in-appa { height: 260px; }
  .in-plate { min-height: 260px; }
}

/* the story */
.in-scrolly { display: grid; gap: var(--s4); margin-top: var(--s2); }
@media (min-width: 900px) { .in-scrolly { grid-template-columns: 1.1fr 1fr; align-items: start; gap: var(--s8); } }
.in-stage {
  position: sticky; top: 84px; height: min(62vh, 520px); z-index: 1;
  border: 1px solid var(--line-1); border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f7f9fd);
}
.in-stage canvas { display: block; width: 100%; height: 100%; }
.in-stage-cap {
  position: absolute; left: 14px; top: 12px; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal-lo);
}
.in-beats { display: grid; }
.in-beat { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; padding: var(--s3) 0; opacity: .38; transition: opacity 420ms var(--ease-out); }
.in-beat[data-on="true"] { opacity: 1; }
.in-beat-k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal-lo); margin: 0 0 8px; }
.in-beat h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.12; margin: 0 0 10px; }
.in-beat p { color: var(--ink-dim); font-size: 16px; line-height: 1.6; max-width: 46ch; margin: 0; }
@media (max-width: 899px) {
  .in-stage { top: 62px; height: 40vh; min-height: 240px; }
  .in-beat { min-height: 56vh; }
  .in-beat:last-child { min-height: 44vh; }
}

/* the ledger */
.in-panel { margin-top: var(--s4); }
.in-head-right { margin-left: auto; }
.in-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px var(--s2); border-bottom: 1px solid var(--line-1); }
.in-controls input[type="search"] {
  font-family: var(--mono); font-size: 13px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #ffffff; color: var(--ink); min-width: 0; width: 160px; -webkit-appearance: none; appearance: none;
}
.in-controls input[type="search"]:focus { outline: none; border-color: var(--signal-lo); }
.in-yours-controls input[type="text"] {
  font-family: var(--mono); font-size: 13px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #ffffff; color: var(--ink); min-width: 0; flex: 1 1 260px; -webkit-appearance: none; appearance: none;
}
.in-yours-controls input[type="text"]:focus { outline: none; border-color: var(--signal-lo); }
.in-yours-table tfoot th, .in-yours-table tfoot td { border-bottom: 0; border-top: 1px solid var(--line-2); background: #f6f8fc; font-weight: 500; }
.in-yours-table tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-2); }
#in-yours-body .cd-note { margin: 10px 16px 14px; }
.in-yours-sum { margin: 12px 16px 6px; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.in-yours-sum b { color: var(--ink); font-size: 16px; }
#in-yours-body .cd-note a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
@media (max-width: 560px) { .in-yours-controls input[type="text"] { flex-basis: 100%; } }
.in-sorts { display: flex; flex-wrap: wrap; gap: 6px; }
.in-sorts .btn.on { border-color: var(--signal-lo); color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.10); }
.in-toggle { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.in-toggle input { accent-color: var(--signal-lo); }
.in-count { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.in-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: 70vh; overflow-y: auto; }
.in-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.in-table th, .in-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-1); }
.in-table thead th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
  white-space: nowrap; background: #f6f8fc; position: sticky; top: 0; z-index: 2;
}
.in-table thead th:first-child { left: 0; z-index: 3; }
.in-table tbody th { font-weight: 500; color: var(--ink); position: sticky; left: 0; background: #ffffff; z-index: 1; min-width: 150px; }
.in-table tbody th b { display: block; font-family: var(--mono); font-size: 13px; }
.in-table tbody th small { display: block; color: var(--ink-faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.in-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.in-table td small { display: block; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.in-table tbody tr[data-sym] { cursor: pointer; }
.in-table tbody tr[data-sym]:hover td, .in-table tbody tr[data-sym]:hover th, .in-table tbody tr[data-sym]:focus-visible td, .in-table tbody tr[data-sym]:focus-visible th { background: #fdf3f0; }
.in-table tbody tr[data-sym]:focus-visible { outline: none; }
.in-table tbody tr[data-open="true"] td, .in-table tbody tr[data-open="true"] th { background: #fbeae5; }
.in-dim { color: var(--ink-faint); font-size: 12.5px; }
.in-dividend { color: var(--signal-lo); }
.in-split, .in-anomaly { color: var(--warn); }
.in-chip {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border: 1px solid var(--warn); border-radius: 999px;
  font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--warn); vertical-align: middle;
}
.in-detail td { background: rgba(var(--ink-rgb), 0.03); padding: 14px 16px 16px; }
.in-detail-in { position: sticky; left: 16px; }
.in-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.in-detail-grid div { border: 1px solid var(--line-1); border-radius: 8px; padding: 8px 10px; background: #ffffff; min-width: 0; }
.in-detail-grid small { display: block; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.in-detail-grid b, .in-detail-grid code { font: 500 12.5px/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.in-steps { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.in-steps li { display: grid; grid-template-columns: 90px 1fr; gap: 2px 12px; align-items: baseline; font-family: var(--mono); font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line-1); border-radius: 8px; background: #ffffff; }
.in-steps li b { color: var(--signal-lo); }
.in-steps li[data-kind="split"] b, .in-steps li[data-kind="anomaly"] b { color: var(--warn); }
.in-steps li small { grid-column: 2; color: var(--ink-faint); font-size: 11px; }
.in-detail p.in-dim { margin: 6px 0 0; }
.in-detail a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }

/* the calendar */
.in-cal-eyebrow { margin-top: var(--s8); }
.in-calendar { display: grid; gap: var(--s3); }
@media (min-width: 760px) { .in-calendar { grid-template-columns: 1fr 1fr; } }
.in-cal-col { border: 1px solid var(--line-1); border-radius: var(--radius); background: rgba(255, 255, 255, 0.74); padding: 14px 16px; min-width: 0; }
.in-cal-head { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink); margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.in-cal-head small { color: var(--ink-faint); font-size: 11px; letter-spacing: 0; }
.in-cal { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 420px; overflow: auto; }
.in-cal li { display: grid; grid-template-columns: 92px 1fr; gap: 2px 10px; padding: 7px 8px; border-radius: 6px; font-size: 13px; align-items: baseline; }
.in-cal li:nth-child(odd) { background: rgba(var(--ink-rgb), 0.028); }
.in-cal li b { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink); }
.in-cal li span a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-2); font-weight: 600; }
.in-cal li span small { color: var(--ink-faint); font-size: 11px; margin-left: 6px; }
.in-cal li i { grid-column: 2; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.in-cal li[data-landed="true"] i { color: var(--signal-lo); }

/* the mathematics */
.in-how { margin-top: var(--s4); }
@media (min-width: 900px) { .in-how { grid-template-columns: repeat(3, 1fr); } }
.in-thm { font-family: var(--display); font-size: 18px; line-height: 1.5; color: var(--ink); margin: 12px 0 10px; }
.in-how .cd-note { margin: 0 0 10px; }
.in-how .cd-note a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.in-zap { margin: 6px 0 4px; }
.in-zap .sv-pool-sub { margin: 8px 0 6px; }
.in-zap-controls { padding: 6px 0; border-bottom: 0; }
.in-zap-controls input[type="text"] {
  font-family: var(--mono); font-size: 13px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #ffffff; color: var(--ink); min-width: 0; width: 170px; -webkit-appearance: none; appearance: none;
}
.in-zap-controls input[type="text"]:focus { outline: none; border-color: var(--signal-lo); }
.in-zap .cd-note { margin: 6px 0 4px; }
.in-legs-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
#hi-foot a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
@media (max-width: 560px) { .in-zap-controls input[type="text"] { width: 100%; } .in-zap-controls .btn { width: 100%; } }
.cy-table { min-width: 1040px; }
.cy-table .cy-say { max-width: 360px; }
.cy-table .cy-say small { display: block; white-space: normal; color: var(--ink-faint); font-size: 11px; margin-top: 2px; }
.cy-table tbody tr[data-take="true"] th, .cy-table tbody tr[data-take="true"] td { background: #fdf6f3; }
#cy-record { padding-top: 6px; }
#cy-record .in-dim { margin: 0 0 6px; }
#cy-record a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
@media (prefers-reduced-motion: reduce) { .in-beat { opacity: 1; } }

/* harmonic earn: the lending board and a lender's own row */
.er-table { min-width: 1080px; }
.er-table .cy-say { max-width: 380px; }
.er-lend { margin-top: var(--s3); }
.er-lend select { font: var(--mono, inherit); font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); max-width: 100%; }
.er-lend .in-zap-controls { flex-wrap: wrap; }
.er-mine { margin-top: var(--s2); }

/* ═══ THE RECORD ═══
   The page takes the site's own furniture: the ombre hero, the display
   headline, the numbered figure grid. Only what is genuinely new to this
   surface is defined here. The one look of its own is the withheld figure:
   where a rate would mislead, the reason takes the rate's place and has to
   read as a deliberate statement rather than a missing value. */
/* The hero sits on the dark head of the ombre, so its type inverts. The base
   rule only covers h1 and this page leads with an h2, which is exactly how a
   headline ends up dark ink on a dark ground. */
.hero-record h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-record .lede { color: #eef4fc; max-width: 58ch; }
.hero-record .eyebrow { color: #dce8f8; }
.hero-record .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-record .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); }
.hero-record .sv-chip[data-on="true"] { color: var(--ink-hero); border-color: rgba(255,255,255,0.55); }
.hero-record .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-record .btn-reason { color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 11px 16px; }
.hero-record .btn-reason:hover { color: var(--ink-hero); border-color: var(--signal); }
.hero-record .wl-plate { min-height: 340px; }
.rc-plate canvas { width: 100%; height: 100%; min-height: 320px; display: block; }
@media (max-width: 900px) {
  .hero-record .wl-plate, .rc-plate canvas { min-height: 240px; }
  /* At this width the plate caption is laid over the drawing, so it printed on
     top of the bars. Below the figure it belongs to the figure either way. */
  .hero-record .wl-plate { display: flex; flex-direction: column; gap: 6px; }
  /* The base rule centres it with a left/transform pair. Going static without
     undoing those drags it off the left edge, so both are cleared here. */
  .hero-record .plate-cap {
    position: static; transform: none; left: auto; bottom: auto;
    margin-top: 2px; max-width: 100%; text-align: center;
  }
}

.rc-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 860px) { .rc-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.rc-kind .wave-read { margin-top: 0; }

.rc-board { display: grid; gap: var(--s2); }
@media (min-width: 980px) { .rc-board { grid-template-columns: 1fr 1fr; } }
.rc-card { border: 1px solid var(--rule); border-radius: 10px; padding: 20px 22px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.rc-card > .sv-meta { margin-bottom: 2px; }
.rc-card > .sv-counts { margin-top: 4px; }
.rc-card[data-grader="house"] { border-left: 2px solid var(--warn); }
.rc-card[data-grader="world"] { border-left: 2px solid var(--signal-lo); }
.rc-card h4 { margin: 0; font: 500 21px/1.2 var(--display); letter-spacing: -0.005em; text-wrap: balance; }
.rc-card p { margin: 0; font-size: 14.5px; color: var(--ink-dim); line-height: 1.5; }

.rc-withheld { color: var(--warn); border-color: var(--warn); background: transparent; }
.rc-graded { margin: 2px 0 0; }
.rc-graded small { font: 500 11.5px/1.4 var(--mono); color: var(--ink-faint); }
/* THE CARD'S FACT ROWS: a label column and a sentence column. Labels never
   wrap; sentences always can; nothing lives in a chip. On a phone the label
   sits above its sentence so the column never squeezes the words. */
.rc-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 16px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); align-items: start; }
.rc-facts dt { font: 600 10.5px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.rc-facts dd { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--ink-dim); overflow-wrap: anywhere; min-width: 0; }
.rc-facts dd[data-withheld] { color: var(--ink); }
.rc-facts dd[data-learns]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 8px 1px 0; background: var(--ink-faint); vertical-align: middle; }
.rc-facts dd[data-learns="true"]::before { background: var(--ok, #2d7a4f); }
.rc-facts dd[data-learns="true"] { color: var(--ink); }
.rc-claims { margin: 12px 0 18px; font-size: 16px; color: var(--ink-dim); max-width: 62ch; }
.rc-why { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-dim); max-width: 66ch; }
.rc-why b { color: var(--ink); font-weight: 600; }
.rc-recent { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.rc-recent li { display: flex; gap: 8px; align-items: center; font: 500 12.5px/1.3 var(--mono); color: var(--ink-dim); flex-wrap: wrap; }
.rc-recent small { color: var(--ink-faint); }
.rc-tablewrap { overflow-x: auto; margin: 10px 0 20px; }
.rc-curve { border-collapse: collapse; width: 100%; min-width: 440px; font: 500 12.5px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.rc-curve th { text-align: left; font-weight: 600; color: var(--ink-faint); padding: 7px 14px 7px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rc-curve td { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--rule); color: var(--ink-dim); }
.rc-curve td:first-child { color: var(--ink); }
.rc-curve small { color: var(--ink-faint); }
#record-board h5, #rc-desk h5 { margin: 22px 0 8px; font: 600 13px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); }

.rc-fig { width: 100%; height: 420px; margin: 18px 0 24px; max-width: 560px; }
.rc-fig canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 640px) {
  .rc-claims { font-size: 15px; }
  .rc-fig { height: 320px; }
  .rc-facts { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .rc-facts dd { margin: 0 0 8px; }
  .rc-facts dd:last-child { margin-bottom: 0; }
}

/* ═══ MANDATE PROOFS ═══
   The badge sits with the status tags because it is a fact about the agent in
   the same way its status is. The clause list below it carries the evidence,
   and a limit that could not be checked is printed in the same shape as one
   that was, so the eye cannot skip it. */
.ag-proof { border-color: var(--signal-lo); color: var(--signal-lo); font-variant-numeric: tabular-nums; }
.ag-proof[data-ok="part"] { border-color: var(--rule); color: var(--ink-faint); }
.ag-badge-line { margin: 4px 0 10px; font: 600 13px/1.4 var(--mono); color: var(--ink); }
.ag-badge-line b { color: var(--signal-lo); }
.ag-clause { border-left: 2px solid var(--signal-lo); padding: 8px 0 8px 12px; margin: 10px 0; }
.ag-clause[data-ok="false"] { border-left-color: var(--warn); }
.ag-clause[data-ok="cannot"] { border-left-color: var(--rule); }
.ag-clause-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ag-clause-h b { font-size: 14.5px; color: var(--ink); }
.ag-tick { font: 600 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-lo); }
.ag-clause[data-ok="false"] .ag-tick { color: var(--warn); }
.ag-clause[data-ok="cannot"] .ag-tick { color: var(--ink-faint); }
.ag-clause p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; max-width: 66ch; }
.ag-clause small { display: block; margin-top: 4px; font: 500 11.5px/1.5 var(--mono); color: var(--ink-faint); max-width: 74ch; }

/* ═══ THE MANDATE ═══
   Same furniture as The Record: the ombre hero, the display headline, the
   plate. What is new here is the result board, where three different fates
   have to be equally visible. A limit that was proved, a limit nothing in the
   signing path can see, and a limit named without a number all get the same
   card, the same size and the same weight, because the moment a refusal is
   rendered smaller than a proof the page starts flattering itself. */

/* The hero leads with an h2 on the dark head of the ombre, and the base rule
   only inverts h1, so without this the headline is dark ink on a dark ground. */
.hero-mandate h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-mandate .lede { color: #eef4fc; max-width: 60ch; }
.hero-mandate .eyebrow { color: #dce8f8; }
.hero-mandate .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-mandate .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); }
.hero-mandate .sv-chip[data-on="true"] { color: var(--ink-hero); border-color: rgba(255,255,255,0.55); }
.hero-mandate .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-mandate .btn-reason { color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 11px 16px; }
.hero-mandate .btn-reason:hover { color: var(--ink-hero); border-color: var(--signal); }
/* This figure fills its frame at every width, so the caption never sits over
   it. The base rule centres the caption with a left/transform pair, and both
   have to be cleared or going static drags it off the left edge. */
.hero-mandate .wl-plate { min-height: 380px; display: flex; flex-direction: column; gap: 8px; }
.hero-mandate .wl-plate canvas { flex: 1 1 auto; }
.hero-mandate .plate-cap {
  position: static; transform: none; left: auto; bottom: auto;
  margin-top: 0; max-width: 100%; text-align: center;
}
@media (max-width: 900px) { .hero-mandate .wl-plate { min-height: 300px; } }

/* The checker. A textarea somebody is meant to actually type in, so it gets
   the body face rather than the monospace a form field usually inherits. */
.md-label { display: block; font: 500 11px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 7px; }
.md-input {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 92px;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  background: transparent; color: var(--ink); outline: none;
  font: 500 14px/1.6 var(--mono);
}
.md-input:focus { outline: none; border-color: var(--signal-lo); box-shadow: 0 0 0 3px rgba(70,108,150,0.16); }
.md-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.md-actions .btn[disabled] { opacity: 0.55; pointer-events: none; }

/* The badge, and immediately beside it what the badge does not count. The two
   numbers sit together on purpose: a count with nothing next to it invites the
   reader to assume it covered everything they asked for. */
.md-badge { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.md-badge b { font: 600 15px/1.3 var(--mono); color: var(--signal-lo); font-variant-numeric: tabular-nums; }
.md-badge span { font: 500 12px/1.4 var(--mono); color: var(--ink-faint); }
.md-read { margin: 0 0 14px; font: 500 12px/1.6 var(--mono); color: var(--ink-faint); }
.md-read code { font: inherit; color: var(--ink-dim); border: 1px solid var(--rule); border-radius: 5px; padding: 2px 6px; margin-right: 4px; white-space: nowrap; }

.md-results, .md-board { display: grid; gap: var(--s2); }
@media (min-width: 1040px) { .md-results, .md-board { grid-template-columns: 1fr 1fr; } }

/* One card per limit. The stripe on the left is the fate, and the three fates
   that are not a proof share a quieter one so the eye reads them as a group. */
.md-card { align-content: start; border-left: 2px solid var(--signal-lo); }
.md-card[data-ok="false"] { border-left-color: var(--warn); }
.md-card[data-ok="cannot"], .md-card[data-ok="incomplete"] { border-left-color: var(--rule); }
.md-card[data-ok="vocab"] { border-left-color: var(--line-2); }
.md-card .sv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-card .sv-chip[data-on="true"] { color: var(--signal-lo); border-color: var(--signal-lo); }
.md-card .sv-chip[data-on="false"] { color: var(--warn); border-color: var(--warn); }
.md-card .fr-chip { color: var(--ink); border-color: var(--line-2); text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
/* Both of these have to out-specify `.fr-card p`, which otherwise sets the
   evidence at body size and prints it louder than the sentence it supports. */
.md-card .md-plain { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
.md-card .md-detail { margin: 2px 0 0; font: 500 11.5px/1.6 var(--mono); color: var(--ink-faint); }
.md-withheld { color: var(--ink-faint); border-color: var(--rule); }

/* The statement a prover would settle. It is the one thing on the page that is
   not written for a general reader, so it is folded down to a quiet monospace
   block rather than dressed up as if everyone is expected to read it. */
.md-lean {
  margin: 4px 0 0; padding: 8px 10px; overflow-x: auto;
  border: 1px solid var(--rule); border-radius: 7px; background: transparent;
  font: 500 10.5px/1.5 var(--mono); color: var(--ink-faint); white-space: pre-wrap; word-break: break-word;
}
@media (max-width: 640px) {
  .md-lean { font-size: 10px; }
  /* 16px or the phone zooms the whole page the moment this is tapped, and the
     taller box is so the longest example does not open already cut off. */
  .md-input { font-size: 16px; min-height: 148px; }
}

/* ═══ THE AGENT FACTORY ═══
   Same hero as The Record and The Mandate. What this page adds is the order:
   the fleet that is already running comes before the form, because a stranger
   who is being asked to deploy something should see the thing working first. */
.hero-agents h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-agents .lede { color: #eef4fc; max-width: 60ch; }
.hero-agents .eyebrow { color: #dce8f8; }
.hero-agents .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-agents .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); }
.hero-agents .sv-chip[data-on="true"] { color: var(--ink-hero); border-color: rgba(255,255,255,0.55); }
.hero-agents .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-agents .btn-reason { color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 11px 16px; }
.hero-agents .btn-reason:hover { color: var(--ink-hero); border-color: var(--signal); }
/* The clock fills its frame, so the caption sits under it rather than over it. */
.hero-agents .wl-plate { min-height: 380px; display: flex; flex-direction: column; gap: 8px; }
.hero-agents .wl-plate canvas { flex: 1 1 auto; }
.hero-agents .plate-cap {
  position: static; transform: none; left: auto; bottom: auto;
  margin-top: 0; max-width: 100%; text-align: center;
}
@media (max-width: 900px) { .hero-agents .wl-plate { min-height: 320px; } }

/* Four kinds, so the grid is two up rather than the three the record uses. */
.ag-kinds { grid-template-columns: 1fr; }
@media (min-width: 720px) { .ag-kinds { grid-template-columns: 1fr 1fr; } }

/* The hero's ombre runs from deep blue at the top to almost white at the
   bottom, and a figure drawn in light ink is unreadable once it reaches the
   pale end. On a phone the plate is the last block in the hero, so it lands
   exactly there. The plate keeps its own ground: a scrim that is invisible
   where the hero is already dark and deepens precisely as the ombre lifts, so
   the figure sits on the same ground at every width. */
.hero-agents .wl-plate, .hero-mandate .wl-plate {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(7,26,77,0) 0%, rgba(7,26,77,0.26) 52%, rgba(9,30,84,0.46) 100%);
  padding: 10px 8px 12px;
}

/* ═══ THE RELATIONSHIP DESK ═══
   The board is the page, and the refusals are half of it. A refused pair gets
   the same card, the same width and the same weight as one that holds, with
   the test it failed printed where the numbers would have been. The moment a
   refusal is rendered smaller than a measurement, the board starts flattering
   itself and stops being evidence. */
.hero-pairs h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-pairs .lede { color: #eef4fc; max-width: 60ch; }
.hero-pairs .eyebrow { color: #dce8f8; }
.hero-pairs .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-pairs .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); }
.hero-pairs .sv-chip[data-on="true"] { color: var(--ink-hero); border-color: rgba(255,255,255,0.55); }
.hero-pairs .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-pairs .btn-reason { color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 11px 16px; }
.hero-pairs .btn-reason:hover { color: var(--ink-hero); border-color: var(--signal); }
/* The plate keeps its own ground, so the figure's light ink survives the pale
   end of the hero's ombre at phone width. Same reason as the other two. */
.hero-pairs .wl-plate {
  min-height: 400px; display: flex; flex-direction: column; gap: 8px;
  border-radius: 16px; padding: 10px 8px 12px;
  background: linear-gradient(180deg, rgba(7,26,77,0) 0%, rgba(7,26,77,0.26) 52%, rgba(9,30,84,0.46) 100%);
}
.hero-pairs .wl-plate canvas { flex: 1 1 auto; }
.hero-pairs .plate-cap {
  position: static; transform: none; left: auto; bottom: auto;
  margin-top: 0; max-width: 100%; text-align: center;
}
@media (max-width: 900px) { .hero-pairs .wl-plate { min-height: 340px; } }

.pr-grid { display: grid; gap: var(--s2); }
@media (min-width: 980px) { .pr-grid { grid-template-columns: 1fr 1fr; } }
.pr-card { align-content: start; border-left: 2px solid var(--line-2); }
.pr-card[data-state="claimed"], .pr-card[data-state="speaks"] { border-left-color: var(--signal-lo); }
.pr-card[data-state="quiet"] { border-left-color: var(--line-2); }
.pr-card[data-state="not-intact"], .pr-card[data-state="too-short"] { border-left-color: var(--warn); }
.pr-card[data-state="unread"] { border-left-color: var(--rule); }
.pr-card .sv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-card .sv-chip[data-on="true"] { color: var(--signal-lo); border-color: var(--signal-lo); }
.pr-card .sv-chip[data-on="false"] { color: var(--warn); border-color: var(--warn); }
.pr-name { color: var(--ink); border-color: var(--line-2); letter-spacing: 0.04em; }
.pr-card .pr-why { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); }
/* A refusal is a sentence, not a footnote, so it gets body size and the warn rule. */
.pr-card .pr-refused {
  margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-dim);
  border-left: 2px solid var(--warn); padding-left: 11px;
}

/* The figures, named, so nobody has to guess which number is which. */
.pr-figs { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 4px 0 0; }
.pr-figs div { display: flex; flex-direction: column; gap: 2px; }
.pr-figs dt { font: 500 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.pr-figs dd { margin: 0; font: 600 15px/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }

.pr-claim { margin-top: 4px; border-top: 1px solid var(--rule); padding-top: 10px; display: grid; gap: 5px; }
.pr-card .pr-said { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.pr-card .pr-expects { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.pr-card .pr-levels { margin: 0; font: 500 11.5px/1.5 var(--mono); color: var(--ink-faint); }
.pr-card .pr-levels b { color: var(--ink-dim); font-weight: 600; }

/* The thresholds it judged by, printed so a reader can argue with them. */
.pr-rules { display: flex; flex-wrap: wrap; gap: 16px 30px; margin: var(--s4) 0 0; padding-top: 16px; border-top: 1px solid var(--rule); }
.pr-rules div { display: flex; flex-direction: column; gap: 3px; }
.pr-rules dt { font: 500 10px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.pr-rules dd { margin: 0; font: 600 14px/1.2 var(--mono); color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* ═══ THE TAIL DESK ═══
   A risk number is only evidence if the count of times it was wrong sits on
   the same card, at the same size, as the number itself. So the breach block
   is not a footnote here. It carries the count, the count that was expected,
   and the verdict in words, and the verdict that reads worst for the desk, a
   number so large it could never be breached, gets the same warn rule as the
   one that was breached too often. Caution that cannot be wrong is not
   caution, and this board is not allowed to render it as though it were. */
.hero-tail h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-tail .lede { color: #eef4fc; max-width: 60ch; }
.hero-tail .eyebrow { color: #dce8f8; }
.hero-tail .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-tail .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); }
.hero-tail .sv-chip[data-on="true"] { color: var(--ink-hero); border-color: rgba(255,255,255,0.55); }
.hero-tail .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-tail .btn-reason { color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 11px 16px; }
.hero-tail .btn-reason:hover { color: var(--ink-hero); border-color: var(--signal); }
/* The plate keeps its own ground so the figure's light ink survives the pale
   end of the hero's ombre at phone width, exactly as the other desks do. */
.hero-tail .wl-plate {
  min-height: 400px; display: flex; flex-direction: column; gap: 8px;
  border-radius: 16px; padding: 10px 8px 12px;
  background: linear-gradient(180deg, rgba(7,26,77,0) 0%, rgba(7,26,77,0.26) 52%, rgba(9,30,84,0.46) 100%);
}
.hero-tail .wl-plate canvas { flex: 1 1 auto; }
.hero-tail .plate-cap {
  position: static; transform: none; left: auto; bottom: auto;
  margin-top: 0; max-width: 100%; text-align: center;
}
@media (max-width: 900px) { .hero-tail .wl-plate { min-height: 340px; } }

.tl-card[data-state="measured"] { border-left-color: var(--signal-lo); }
.tl-card[data-state="unread"] { border-left-color: var(--rule); }

/* The count, and what the count means. Both verdicts that reject carry the
   warn rule; only a number the record cannot fault is left plain. */
.tl-walk { margin-top: 4px; border-left: 2px solid var(--line-2); padding-left: 11px; display: grid; gap: 3px; }
.tl-walk[data-verdict="too-small"], .tl-walk[data-verdict="too-large"] { border-left-color: var(--warn); }
.tl-card .tl-walk-count { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.tl-card .tl-walk-count b { color: var(--ink); font-weight: 600; }
.tl-card .tl-walk-verdict { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.tl-card .tl-walk-none {
  margin: 2px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-dim);
  border-left: 2px solid var(--line-2); padding-left: 11px;
}
/* A standing quote is the sentence the next hour settles, so it sits last and
   reads as a claim rather than as another measurement. */
.tl-quote .pr-said { font-size: 14.5px; }

/* ═══ THE ALLOCATION DESK ═══
   The subject of this page is a DIFFERENCE, so the card is built around it:
   the chip carries the distance between the two answers rather than a state,
   and a market where the methods agree is the quiet one. That is the right way
   round. A reader scanning the board should have their eye pulled to the rows
   where the choice of risk measure actually moves money, and a row where both
   methods land in the same place is genuinely the least interesting thing
   here, however tidy it looks. */
.hero-alloc h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-alloc .lede { color: #eef4fc; max-width: 60ch; }
.hero-alloc .eyebrow { color: #dce8f8; }
.hero-alloc .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-alloc .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); }
.hero-alloc .sv-chip[data-on="true"] { color: var(--ink-hero); border-color: rgba(255,255,255,0.55); }
.hero-alloc .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.hero-alloc .btn-reason { color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 11px 16px; }
.hero-alloc .btn-reason:hover { color: var(--ink-hero); border-color: var(--signal); }
.hero-alloc .wl-plate {
  min-height: 400px; display: flex; flex-direction: column; gap: 8px;
  border-radius: 16px; padding: 10px 8px 12px;
  background: linear-gradient(180deg, rgba(7,26,77,0) 0%, rgba(7,26,77,0.26) 52%, rgba(9,30,84,0.46) 100%);
}
.hero-alloc .wl-plate canvas { flex: 1 1 auto; }
.hero-alloc .plate-cap {
  position: static; transform: none; left: auto; bottom: auto;
  margin-top: 0; max-width: 100%; text-align: center;
}
@media (max-width: 900px) { .hero-alloc .wl-plate { min-height: 340px; } }

/* A split is the finding, so it carries the signal rule. Agreement is real
   and is kept plain rather than dressed up as a result. */
.al-card[data-state="split"] { border-left-color: var(--signal-lo); }
.al-card[data-state="agreed"] { border-left-color: var(--line-2); }
.al-card[data-state="refused"] { border-left-color: var(--warn); }

/* The two books sit side by side, because the whole point is reading one
   against the other rather than scrolling from a claim to its comparison. */
.al-books { display: grid; gap: var(--s2); }
@media (min-width: 860px) { .al-books { grid-template-columns: 1fr 1fr; } }
.al-book { align-content: start; border-left: 2px solid var(--line-2); }
.al-book .pr-why { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); }
.al-book .sv-chip[data-on="true"] { color: var(--signal-lo); border-color: var(--signal-lo); }

/* ── Harmonic Borrow ────────────────────────────────────────────────────
   The first cut reused the creator dashboard's class names, which do not
   exist in this stylesheet, so 168 unstyled divs stacked down the page with
   black input boxes underneath them. Built on the same tokens as the
   overtone board, which is the closest shape: a tile per market, the figure
   large and its label small. */
.bw-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; }
.bw-card { flex: 1 1 260px; max-width: 420px; border: 1px solid var(--line-1); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(var(--ink-rgb), 0.015); transition: border-color 140ms, transform 140ms; }
.bw-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.bw-card.is-open { border-color: rgba(var(--signal-rgb), 0.55); background: rgba(var(--signal-rgb), 0.05); }
.bw-card.is-off { opacity: .62; }
.bw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bw-head b { font-family: var(--mono); font-size: 17px; letter-spacing: .02em; color: var(--ink); }
.bw-head span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); }
.bw-card.is-open .bw-head span { color: var(--signal); }
.bw-line { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bw-line b { font-family: var(--mono); font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bw-line i { font-style: normal; font-size: 12px; color: var(--ink-dim); }
.bw-sale b { color: var(--signal); font-size: 18px; }
.bw-note { margin: 2px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.bw-refused { margin: 10px 0 0; font-size: 12px; color: var(--ink-dim); }
.bw-refused b { font-family: var(--mono); color: var(--ink); }

.bw-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 6px 0 4px; }
.bw-form label { display: flex; flex-direction: column; gap: 5px; }
.bw-form label > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); }
.bw-form input, .bw-form select { font-family: var(--mono); font-size: 14px; color: var(--ink);
  background: rgba(var(--ink-rgb), 0.03); border: 1px solid var(--line-1); border-radius: 10px;
  padding: 9px 12px; min-width: 168px; }
.bw-form input::placeholder { color: var(--ink-faint); }
.bw-form input:focus-visible, .bw-form select:focus-visible {
  outline: 2px solid rgba(var(--signal-rgb), .8); outline-offset: 2px; border-color: var(--line-2); }
.bw-quote { border: 1px solid rgba(var(--signal-rgb), 0.5); border-radius: 14px; padding: 14px 16px;
  margin: 12px 0 10px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(var(--signal-rgb), 0.05); max-width: 560px; }
@media (max-width: 640px) {
  .bw-card { flex: 1 1 100%; max-width: none; }
  .bw-form input, .bw-form select { min-width: 0; width: 100%; }
  .bw-form label { flex: 1 1 100%; }
}

#bw-plate { width: 100%; height: 380px; display: block; }
@media (max-width: 720px) { #bw-plate { height: 280px; } }

/* ═══ HARMONIC WORLD ═══
   The stage is the screen. The scene fills it and everything else floats on
   it as glass: the instrument at the top left, the drawers' bar at the top,
   the square on the left, the feed on the right, the coin at the corner, and
   who is here along the foot. A realm is the same stage with the camera down
   in one district and its card beside it. On a phone every panel is a sheet
   the bar opens from the bottom, so the world is never pushed off the screen
   and the page never scrolls sideways. */
.hero-world { background: #050e2c; padding: 0; margin-top: 0; }
/* the landing seam's pale fade belongs to the landing hero only: over the world it washed out the foot of the stage */
.hero-world::after { content: none; }
.hero-world .wd-lockwrap, .hero-world .wd-lockplane { display: none; }
/* THE DOOR BEFORE THE WORLD OPENS: the launch page's own hero, the textured plane, the word reveal, the drawn island
   turning beside the copy, and the site's own controls. Nobody sees a bare block. */
.hero-world[data-locked="true"] { margin-top: -68px; padding: 128px 0 var(--s6); background: linear-gradient(180deg, #0b1a4a 0%, #16306e 30%, #2a4f96 58%, #4875b6 78%, #7ba0ce 92%, #f2f5fa 100%); }
.hero-world[data-locked="true"] .wd-lockplane { display: block; }
.hero-world[data-locked="true"] .wd-lockwrap { display: block; position: relative; }
.hero-world[data-locked="true"] .wd-stage { display: none; }
.wd-lockplate { min-height: 340px; }
#wd-lock-fig { width: 100%; height: 380px; display: block; }
@media (max-width: 899px) { #wd-lock-fig { height: 280px; } .wd-lockplate { min-height: 280px; } .hero-world[data-locked="true"] { padding-top: 96px; } }
.hero-world .wd-lock .btn-solid { min-height: 44px; }
#view-world[data-locked="true"] .sect { display: none; }
.hero-world .lockwrap .eyebrow, .hero-world .eyebrow { color: #dce8f8; }
.hero-world .eyebrow .rule { background: rgba(255,255,255,0.30); }
.hero-world h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-world .lede { color: #eef4fc; max-width: 64ch; }
.hero-world .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); min-height: 44px; }
.hero-world .btn-ghost:hover { border-color: var(--signal); color: #fff; }
.wd-lock { margin-top: var(--s4); max-width: 520px; display: grid; gap: 10px; }
.wd-lock label { color: #eef4fc; font-size: 15px; line-height: 1.5; }
.wd-lock-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wd-lock input { flex: 1 1 200px; min-height: 44px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.34); background: rgba(4,12,40,0.5); color: var(--ink-hero); font: 500 15px var(--mono); }
.wd-lock .cd-stat { color: #dce8f8; }

/* the stage, and the glass everything on it is made of */
.wd-stage {
  --glass: rgba(4, 12, 40, 0.74); --glass-2: rgba(255, 255, 255, 0.06); --edge: rgba(143, 180, 221, 0.30);
  --card: rgba(255, 255, 255, 0.05); --ink: #eef4fc; --ink-dim: #cdd9ee; --ink-faint: #9fb6d8; --rule: rgba(143, 180, 221, 0.28); --line-2: rgba(143, 180, 221, 0.42); --line-1: rgba(143, 180, 221, 0.18);
  position: relative; height: calc(100svh - var(--nav-h, 64px)); min-height: 600px; overflow: hidden; background: #050e2c; color: #eef4fc; isolation: isolate;
}
.wd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wd-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.wd-glass { background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(3, 9, 30, 0.5); }
.wd-panel, .wd-realm, .wd-drawer, .wd-bar, .wd-strip { background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(3, 9, 30, 0.5); }
.wd-panel { position: absolute; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 12px 12px 10px; overflow: hidden; overscroll-behavior: contain; }
.wd-panel > * { min-width: 0; }
.wd-panel[data-off="true"] { display: none; }
.wd-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; font: 500 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #9fb6d8; }
.wd-panel-head i { font-style: normal; color: var(--signal); }
.wd-stage ::-webkit-scrollbar { width: 6px; height: 6px; } .wd-stage ::-webkit-scrollbar-thumb { background: rgba(143,180,221,0.35); border-radius: 3px; }

/* the instrument: the day, the hour, the season, who is here */
.wd-hud { position: absolute; left: 14px; top: 12px; z-index: 6; display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 8px 12px 7px; border-radius: 12px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(10px); font: 600 11.5px/1.3 var(--mono); color: rgba(255,255,255,0.92); pointer-events: none; white-space: nowrap; }
.wd-hud-dial { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--signal) calc(var(--frac, 0) * 360deg), rgba(255,255,255,0.18) 0); -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
.wd-hud-time { grid-column: 2; }
.wd-hud-season { grid-column: 3; grid-row: 1; color: #9fb6d8; font-weight: 500; }
.wd-hud-season::before { content: "· "; }
.wd-hud-here { grid-column: 2 / span 2; color: var(--signal); font-weight: 500; font-size: 10.5px; }
.wd-chips { position: absolute; right: 14px; top: 14px; z-index: 6; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; max-width: 30%; overflow: hidden; }
/* the day's bounty: an instrument under the chips, the pot and the hours left in the UTC day */
.wd-bounty { position: absolute; right: 14px; top: 48px; z-index: 6; width: 312px; margin: 0; padding: 9px 12px 9px; border-radius: 12px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,0.92); font: 500 11px/1.35 var(--mono); text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.wd-bounty:hover { border-color: rgba(255,255,255,0.5); }
.wd-bounty[data-lit="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(224,122,95,0.35), 0 8px 30px rgba(3,9,30,0.55); }
.wd-bounty .wdb-k { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb6d8; }
.wd-bounty .wdb-k i { font-style: normal; color: rgba(255,255,255,0.92); letter-spacing: 0.04em; text-transform: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wd-bounty .wdb-v { margin: 3px 0 0; font: 600 20px/1.1 var(--mono); color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wd-bounty[data-state="none"] .wdb-v, .wd-bounty[data-state="unread"] .wdb-v, .wd-bounty[data-state="reading"] .wdb-v { font-size: 14px; color: #dce8f8; }
.wd-bounty .wdb-bar { height: 3px; margin: 7px 0 6px; border-radius: 2px; background: rgba(255,255,255,0.16); overflow: hidden; }
.wd-bounty .wdb-bar i { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: var(--signal); transition: width 1s linear; }
.wd-bounty .wdb-s { margin: 0; color: #dce8f8; font-size: 10.5px; }
.wd-bounty .wdb-f { margin: 3px 0 0; color: #9fb6d8; font-size: 9.5px; }
.wd-bounty .wdb-f:empty { display: none; }
.wd-stage[data-realm="true"] .wd-bounty { display: none; }
.wd-stage[data-realm="true"] .wd-chips { display: none; }
.wd-chips .sv-chip { color: #dce8f8; border-color: rgba(255,255,255,0.30); background: var(--glass); backdrop-filter: blur(8px); }
.wd-chips .sv-chip[data-on="true"] { color: #fff; border-color: rgba(255,255,255,0.55); }
.wd-stage .plate-cap { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); margin: 0; z-index: 3; pointer-events: none; font: 500 10.5px/1.3 var(--mono); color: rgba(238,244,252,0.6); text-shadow: 0 1px 8px rgba(3,9,30,0.9); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* THE DOOR OPENING: the loader over the stage while the scene is lit. A 2d plate, the armillary, one line of type. */
.wd-loader { position: absolute; inset: 0; z-index: 30; background: #050f28; opacity: 1; transition: opacity 700ms var(--ease-out); pointer-events: auto; }
.wd-loader[data-done="true"] { opacity: 0; pointer-events: none; }
.wd-loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wd-loader-type { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); width: min(540px, calc(100% - 32px)); text-align: center; color: #eef4fc; }
.wd-loader-type .eyebrow { justify-content: center; color: #8fb4dd; margin: 0 0 6px; }
.wd-loader-type .eyebrow .rule { background: rgba(255,255,255,0.22); }
.wd-loader-type h3 { margin: 0 0 8px; font: 400 clamp(26px, 4.4vw, 42px)/1.06 var(--display); color: #fff; letter-spacing: 0.004em; }
.wd-loader-type h3 em { font-style: italic; color: #f0937f; }
.wd-loader-line { margin: 0 0 12px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #b3c4e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-loader-bar { width: 180px; height: 2px; margin: 0 auto; background: rgba(143,180,221,0.25); border-radius: 2px; overflow: hidden; }
.wd-loader-bar i { display: block; height: 100%; width: 0; background: #f0937f; transition: width 500ms var(--ease-out); }
@media (max-width: 700px) { .wd-loader-type { top: 62%; } }
/* the map: the island from above, under the instrument; a tap on a hall enters it */
.wd-stage canvas.wd-map { position: absolute; inset: auto; left: 14px; top: 70px; z-index: 6; width: 140px; height: 140px; border-radius: 12px; border: 1px solid var(--edge); background: rgba(4,12,40,0.6); cursor: pointer; pointer-events: auto; box-shadow: 0 10px 30px rgba(3,9,30,0.45); }
/* THE TOUR: one card at the foot of the stage, a stop at a time */
.wd-tour { position: absolute; z-index: 9; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(560px, calc(100% - 28px)); padding: 14px 18px 14px; border-radius: 14px; background: var(--glass); border: 1px solid rgba(240,147,127,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(3, 9, 30, 0.5); color: #eef4fc; }
.wd-tour .eyebrow { color: #f0937f; margin: 0 0 4px; font-size: 10px; } .wd-tour .eyebrow .rule { background: rgba(240,147,127,0.5); }
.wd-tour h4 { margin: 0; font-size: 19px; line-height: 1.15; color: #fff; }
.wd-tour p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: #dce8f8; }
.wd-tour-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.wd-tour-acts .btn { min-height: 42px; } .wd-tour-acts .btn-solid { background: var(--signal); color: #06153f; border-color: var(--signal); } .wd-tour-acts .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.wd-tour-skip { appearance: none; background: none; border: 0; color: #9fb6d8; font: 500 11.5px/1 var(--mono); cursor: pointer; padding: 0 6px; min-height: 42px; }
/* THE PAD'S CARD: each coin as its own curve reads it */
.wd-pad-coin { cursor: pointer; border: 1px solid transparent; }
.wd-pad-coin[data-on="true"] { border-color: rgba(240,147,127,0.7); background: rgba(240,147,127,0.12); }
.wd-pad-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; } .wd-pad-top i { font-style: normal; color: #9fb6d8; font-size: 12px; } .wd-pad-top em { font: 500 10px/1.2 var(--mono); font-style: normal; color: #f0937f; margin-left: auto; }
.wd-pad-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; margin: 4px 0 2px; } .wd-pad-bar span { display: block; height: 100%; background: var(--signal); }
.wd-pad-stats { display: flex; flex-wrap: wrap; gap: 3px 12px; font: 500 11px/1.4 var(--mono); color: #9fb6d8; } .wd-pad-stats b { color: #fff; font-weight: 600; }
.wd-pad-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; } .wd-pad-links .btn { min-height: 38px; padding: 0 12px; font-size: 12px; } .wd-pad-links .btn-solid { background: var(--signal); color: #06153f; border-color: var(--signal); } .wd-pad-links .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.wd-start-tour { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.wd-gfx { font: 500 11px/1 var(--mono); color: #9fb6d8; display: inline-flex; gap: 6px; align-items: center; }
.wd-gfx select { font: 500 12px/1 var(--mono); color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.wd-note { position: absolute; left: 14px; top: 218px; z-index: 3; margin: 0; width: 312px; font: 500 10px/1.4 var(--mono); color: rgba(238,244,252,0.55); pointer-events: none; }
/* the agent's own launcher steps out of the stage's way: to the foot of the square on a desk, off the screen on a phone */
html[data-world="true"] .hx-fab { left: 14px; right: auto; bottom: 96px; }

/* the bar: one glass pill of drawers */
.wd-bar { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 7; display: flex; gap: 2px; padding: 4px; border-radius: 14px; }
.wd-bar button { appearance: none; display: grid; justify-items: center; gap: 2px; min-width: 58px; min-height: 46px; padding: 5px 8px 4px; border: 0; border-radius: 10px; background: transparent; color: #cdd9ee; font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.wd-bar button b { font: 500 17px/1 var(--mono); color: #fff; }
.wd-bar button:hover { background: var(--glass-2); color: #fff; }
.wd-bar button[data-on="true"] { background: rgba(240,147,127,0.22); color: #fff; }
.wd-bar button[data-on="true"] b { color: var(--signal); }

/* the square, on the left, with a box to speak into it */
.wd-sqpanel { left: 14px; top: 262px; width: 312px; max-height: calc(100% - 440px); }
.wd-sqpanel #wd-square { overflow: auto; min-height: 0; }
.wd-sayform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-top: 8px; }
.wd-sayform input { min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.3); background: rgba(4,12,40,0.5); color: #fff; font: 500 13px var(--mono); }
.wd-sayform .btn { min-height: 40px; padding: 0 14px; }
.wd-say-note { grid-column: 1 / -1; margin: 0; font: 500 10.5px/1.4 var(--mono); color: #9fb6d8; min-height: 0; }
.wd-say-note:empty { display: none; }
.wd-says { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wd-say { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 10px; border-left: 2px solid var(--line-2); background: var(--card); border-radius: 0 10px 10px 0; }
.wd-say-reply { margin-left: 14px; border-left-color: var(--signal); }
.wd-say-sys { border-left-color: var(--rule); }
.wd-say-sys .wd-say-text { color: var(--ink-dim); font-style: italic; }
.wd-say-house { border-left-color: var(--accent); }
.wd-say-house .wd-say-by { color: var(--accent); }
.wd-say-by { font: 600 11.5px/1.3 var(--mono); color: #fff; }
.wd-say-by a { color: inherit; text-decoration: none; }
.wd-say-text { font-size: 13px; line-height: 1.45; color: #eef4fc; overflow-wrap: anywhere; }
.wd-say-text a { color: var(--signal); text-decoration: none; }
.wd-say-meta { font: 500 10px/1.3 var(--mono); color: #9fb6d8; }

/* the feed, on the right: what happened, by whom, when */
.wd-feed { right: 14px; top: 176px; width: 312px; max-height: calc(100% - 508px); }   /* under the chips and the day's bounty */
.wd-evs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow: auto; min-height: 0; }
.wd-ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 7px 9px; border-radius: 9px; background: var(--card); font-size: 12.5px; line-height: 1.4; color: #eef4fc; overflow-wrap: anywhere; animation: wd-in 0.5s var(--ease-out, ease) both; }
.wd-ev b { font: 600 11.5px/1.3 var(--mono); color: #fff; }
.wd-ev b a { color: inherit; text-decoration: none; }
.wd-ev[data-house="true"] b { color: var(--accent); }
.wd-ev[data-system="true"] { color: #cdd9ee; }
.wd-ev[data-system="true"] b::before { content: "⟡ "; color: var(--signal); }
.wd-ev i { grid-column: 2; grid-row: 1; font: 500 10px/1.3 var(--mono); font-style: normal; color: #9fb6d8; white-space: nowrap; }
.wd-ev span { grid-column: 1 / -1; }
.wd-ev-none { color: #9fb6d8; }
@keyframes wd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* the coin, at the corner: measured, and where to buy it */
.wd-token { right: 14px; bottom: 14px; width: 312px; grid-template-rows: auto; gap: 8px; }
.wd-token-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; }
.wd-token-head b { overflow: hidden; text-overflow: ellipsis; }
.wd-token-head b { font: 600 15px/1.2 var(--mono); color: #fff; }
.wd-token-head b small { font-weight: 500; color: #9fb6d8; margin-left: 6px; font-size: 10px; letter-spacing: 0.08em; }
.wd-token-head .wd-token-read { white-space: nowrap; }
.wd-token-price { display: flex; align-items: baseline; gap: 10px; }
.wd-token-price b { font: 600 24px/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.wd-token-price i { font: 600 12px/1 var(--mono); font-style: normal; color: #9fb6d8; }
.wd-token-price i[data-up="true"] { color: #7fe0a8; } .wd-token-price i[data-up="false"] { color: var(--signal); }
.wd-token-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wd-token-grid div { display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: var(--card); }
.wd-token-grid dt { font: 500 9px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #9fb6d8; }
.wd-token-grid dd { margin: 0; font: 600 13.5px/1.2 var(--mono); color: #fff; font-variant-numeric: tabular-nums; }
.wd-token-ca { display: flex; align-items: center; gap: 8px; font: 500 11px/1.3 var(--mono); color: #cdd9ee; }
.wd-token-ca code { font: inherit; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wd-token-ca button { appearance: none; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font: 500 10px/1 var(--mono); padding: 6px 8px; border-radius: 7px; cursor: pointer; min-height: 28px; }
.wd-token-links { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-token-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 11px; border-radius: 9px; font: 600 12px/1 var(--mono); letter-spacing: 0.06em; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,0.34); }
.wd-token-links a.wd-buy { background: var(--signal); color: #06153f; border-color: var(--signal); }
.wd-token-read { margin: 0; font: 500 10px/1.3 var(--mono); color: #9fb6d8; }

/* who is here, along the foot */
.wd-strip { position: absolute; z-index: 5; left: 14px; right: 340px; bottom: 14px; padding: 10px 12px 9px; }
.wd-chipsrow { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.wd-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 9px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.22); background: var(--card); color: #fff; font: 500 12px/1 var(--mono); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, background 0.2s; }
.wd-chip:hover, .wd-chip[data-on="true"] { border-color: var(--signal); background: rgba(240,147,127,0.16); }
.wd-chip b { font-size: 13px; color: var(--signal); }
.wd-chip[data-house="true"] { border-color: rgba(143,180,221,0.5); } .wd-chip[data-house="true"] b { color: var(--accent); }
.wd-chip i { font-style: normal; color: #9fb6d8; font-size: 10.5px; }
.wd-chip-none { color: #9fb6d8; font: 500 12px/36px var(--mono); }

/* the drawers: places, residents, the purse, for agents */
.wd-drawer { display: none; position: absolute; z-index: 8; left: 50%; top: 68px; bottom: 100px; width: min(980px, calc(100% - 28px)); transform: translateX(-50%); padding: 18px 20px 20px; overflow: auto; overscroll-behavior: contain; }
.wd-stage[data-drawer="start"] #wd-startd, .wd-stage[data-drawer="places"] #wd-places, .wd-stage[data-drawer="residents"] #wd-residents-drawer, .wd-stage[data-drawer="purse"] #wd-purse, .wd-stage[data-drawer="agents"] #wd-agents { display: block; }
.wd-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wd-drawer-head .eyebrow { margin: 0 0 10px; color: #dce8f8; }
.wd-x { appearance: none; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; font: 400 20px/1 var(--mono); cursor: pointer; }
.wd-drawer-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: #cdd9ee; max-width: 70ch; }
.wd-drawer-lede a { color: #fff; }
.wd-grid { align-items: stretch; }
@media (min-width: 980px) { .wd-grid { grid-template-columns: 1fr 1fr 1fr; } }
.wd-card { cursor: pointer; transition: border-color 0.2s, transform 0.2s; background: var(--card); color: #eef4fc; }
.wd-card[data-focus="true"] { border-color: var(--signal); }
.wd-card[data-graded="true"] { border-left: 2px solid var(--signal); }
.wd-card h3 { margin: 8px 0 4px; font-size: 19px; line-height: 1.15; color: #fff; }
.wd-glyph { font: 500 15px/1 var(--mono); color: #fff; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; background: rgba(255,255,255,0.06); letter-spacing: 0.02em; }
.wd-figure { margin: 0 0 6px; font: 500 12.5px/1.5 var(--mono); color: #dce8f8; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wd-lesson { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #cdd9ee; }
.wd-figs dt { color: #9fb6d8; } .wd-figs dd { font: 500 13px/1.45 var(--sans, inherit); color: #eef4fc; white-space: normal; overflow-wrap: anywhere; }
.wd-here { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #fff; } .wd-here a { color: var(--signal); text-decoration: none; }
.wd-here.wd-empty { color: #9fb6d8; }
.wd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wd-links .btn-reason { font-size: 12px; color: #dce8f8; border: 1px solid rgba(255,255,255,0.3); border-radius: 9px; padding: 0 12px; min-height: 40px; display: inline-flex; align-items: center; }
.wd-reslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wd-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); }
.wd-res[data-present="true"] { border-color: var(--signal); }
.wd-res-name { font: 600 15px/1.3 var(--mono); color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.wd-res-rank { font: 500 11px/1.3 var(--mono); color: var(--signal); text-transform: uppercase; letter-spacing: 0.06em; }
.wd-res-figs, .wd-res-skills { font: 500 12px/1.4 var(--mono); color: #cdd9ee; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 700px) { .wd-res { grid-template-columns: 180px 130px minmax(0, 1fr); align-items: baseline; gap: 12px; } .wd-res-skills { grid-column: 3; } }
.wd-line { white-space: pre-wrap; overflow-wrap: anywhere; font: 500 13px/1.6 var(--mono); color: #fff; background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--signal); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.wd-rules { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: #cdd9ee; }
.wd-drawer .cd-stat, .wd-drawer .cd-why-none { color: #cdd9ee; }

/* the labels over the scene */
.wd-tag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; padding: 6px 10px 5px; border-radius: 8px; background: var(--glass); border: 1px solid var(--edge); color: #fff; transition: opacity 0.25s; cursor: pointer; will-change: transform; backdrop-filter: blur(4px); pointer-events: auto; }
.wd-tag b { font: 600 13px/1.1 var(--mono); letter-spacing: 0.02em; }
.wd-tag i { font: 500 9.5px/1.2 var(--mono); font-style: normal; color: rgba(238,244,252,0.68); white-space: nowrap; }
.wd-tag em { position: absolute; top: -8px; right: -6px; font: 600 9px/1 var(--mono); font-style: normal; color: #06153f; background: var(--signal); border-radius: 8px; padding: 3px 6px; }
.wd-tag[data-focus="true"] { border-color: var(--signal); background: rgba(240,147,127,0.22); }
.wd-tag[data-unread="true"] i { color: var(--warn); }
.wd-name { position: absolute; left: 0; top: 0; font: 600 9.5px/1 var(--mono); color: #fff; background: rgba(4,12,40,0.72); border-radius: 6px; padding: 4px 7px; white-space: nowrap; transition: opacity 0.25s; will-change: transform; cursor: pointer; pointer-events: auto; }
.wd-name[data-house="true"] { background: rgba(143,180,221,0.35); }
.wd-bubble { position: absolute; left: 0; top: 0; max-width: 190px; padding: 5px 8px; border-radius: 10px; background: rgba(255,255,255,0.94); color: #16233f; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; transition: opacity 0.25s; will-change: transform; box-shadow: 0 6px 20px rgba(3,9,30,0.45); }
.wd-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: rgba(255,255,255,0.94); transform: translateX(-50%) rotate(45deg); }
@media (max-width: 520px) { .wd-tag b { font-size: 12px; } .wd-tag { padding: 5px 7px 4px; } .wd-tag i { display: none; } .wd-tag[data-focus="true"] i, .wd-tag[data-unread="true"] i, .wd-tag-pad i { display: block; } .wd-bubble { max-width: 170px; font-size: 11px; } }
.wd-tag-pad { text-decoration: none; border-color: rgba(240,147,127,0.5); }
.wd-name-coin { text-decoration: none; background: rgba(240,147,127,0.28); }

/* the realm card: the district you stand in, beside the scene, in the feed's place */
.wd-realm { position: absolute; z-index: 6; right: 14px; top: 68px; width: 380px; max-height: calc(100% - 400px); overflow: auto; padding: 16px 16px 14px; overscroll-behavior: contain; color: #eef4fc; }
.wd-stage[data-realm="true"] .wd-feed { display: none; }
.wd-realm-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; }
.wd-realm-head .eyebrow { color: #9fb6d8; margin: 0 0 2px; font-size: 10px; }
.wd-realm-head .eyebrow .rule { background: rgba(255,255,255,0.3); }
.wd-realm-head h3 { margin: 0; font-size: 22px; line-height: 1.1; color: #fff; }
.wd-realm-surface { margin: 3px 0 0; font: 500 12px/1.4 var(--mono); color: #cdd9ee; }
.wd-realm-back { grid-column: 1 / -1; justify-self: start; color: #fff; border-color: rgba(255,255,255,0.4); min-height: 40px; padding: 0 14px; }
.wd-realm .wd-figure { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--card); color: #fff; }
.wd-realm .wd-lesson { margin: 10px 0 0; color: #dce8f8; }
.wd-realm-rows { display: grid; gap: 6px; margin: 10px 0 0; }
.wd-realm-rows div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.45; }
.wd-realm-rows dt { font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #9fb6d8; padding-top: 3px; }
.wd-realm-rows dd { margin: 0; color: #eef4fc; overflow-wrap: anywhere; }
.wd-realm-sub { margin: 14px 0 6px; font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #9fb6d8; }
.wd-realm-here, .wd-realm-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wd-realm-here li { display: grid; gap: 2px; padding: 7px 9px; border-radius: 8px; background: var(--card); font-size: 13px; line-height: 1.45; }
.wd-realm-here b { font: 600 12.5px/1.3 var(--mono); color: #fff; }
.wd-realm-here a { color: inherit; text-decoration: none; }
.wd-realm-here i { font-style: normal; font: 500 10.5px/1.3 var(--mono); color: #9fb6d8; margin-left: 6px; }
.wd-realm-said { color: #dce8f8; overflow-wrap: anywhere; }
.wd-realm-work li a { display: block; padding: 7px 9px; border-radius: 8px; background: var(--card); color: #fff; font-size: 13px; line-height: 1.45; text-decoration: none; overflow-wrap: anywhere; }
.wd-realm-work li a:hover { background: rgba(240,147,127,0.16); }
.wd-realm .wd-here.wd-empty { color: #9fb6d8; margin: 0; }
.wd-realm .wd-links { margin-top: 14px; }
.wd-realm-life { margin: 10px 0 0; font: 500 11.5px/1.5 var(--mono); color: #cdd9ee; }
.wd-realm-life:empty { display: none; }
.wd-realm-node { display: grid; gap: 4px; margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--card); border-left: 2px solid var(--signal); }
.wd-realm-node b { font: 600 14px/1.35 var(--mono); color: #fff; overflow-wrap: anywhere; }
.wd-realm-node i { font: 500 11px/1.3 var(--mono); font-style: normal; color: #9fb6d8; }
.wd-realm-node span { font-size: 13px; line-height: 1.5; color: #dce8f8; overflow-wrap: anywhere; }
.wd-realm-node .btn-reason { justify-self: start; margin-top: 4px; color: #dce8f8; border: 1px solid rgba(255,255,255,0.34); border-radius: 9px; padding: 8px 12px; font-size: 13px; }

/* the citizen card, in the realm's frame */
.wd-cit-head { grid-template-columns: auto minmax(0, 1fr); }
.wd-cit-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--mono); color: #06153f; background: var(--signal); }
.wd-cit-row { margin: 8px 0 0; font: 500 12.5px/1.5 var(--mono); color: #dce8f8; overflow-wrap: anywhere; }
.wd-cit-row span { color: #9fb6d8; text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; margin-right: 8px; }
.wd-cit-row code { font: inherit; color: #fff; }
.wd-cit-now { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: #eef4fc; }
.wd-cit-now i { color: #cdd9ee; }
.wd-cit-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; }
.wd-cit-stats div { display: grid; gap: 2px; padding: 8px 4px; border-radius: 8px; background: var(--card); text-align: center; }
.wd-cit-stats b { font: 600 18px/1.1 var(--mono); color: #fff; }
.wd-cit-stats span { font: 500 9px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #9fb6d8; }
.wd-talk { margin-top: 12px; display: grid; gap: 6px; }
.wd-talk .wd-lock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.wd-talk input { min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.34); background: rgba(4,12,40,0.5); color: #fff; font: 500 13px var(--mono); }
.wd-talk .cd-stat { color: #9fb6d8; margin: 0; font-size: 11px; }
.wd-realm .pr-figs { display: grid; gap: 6px; margin: 8px 0 0; }
.wd-realm .pr-figs div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.wd-realm .pr-figs dt { color: #9fb6d8; } .wd-realm .pr-figs dd { font: 500 13px/1.45 var(--sans, inherit); color: #eef4fc; }

/* the resident's own page, under the stage when it is asked for by hash */
.wd-resident { background: #050e2c; color: #eef4fc; --card: rgba(255,255,255,0.05); --ink: #eef4fc; --ink-dim: #cdd9ee; --ink-faint: #9fb6d8; --rule: rgba(143,180,221,0.28); --line-2: rgba(143,180,221,0.42); }
.wd-resident h2 { font-size: clamp(28px, 4vw, 40px); color: #fff; }
.wd-resident .eyebrow { color: #dce8f8; } .wd-resident .eyebrow .rule { background: rgba(255,255,255,0.3); }
.wd-resident .body-lg, .wd-resident .cd-stat { color: #cdd9ee; }
.wd-resident .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }

/* A PHONE. The stage is the screen. Every panel is a sheet the bar opens from the foot; the strip rides above the bar. */
@media (max-width: 900px) {
  .wd-stage { min-height: 560px; }
  .wd-chips, .wd-note, .wd-stage canvas.wd-map, .wd-stage .plate-cap, html[data-world="true"] .hx-fab { display: none; }
  .wd-hud { left: 10px; top: 10px; padding: 6px 10px 5px; font-size: 10.5px; }
  .wd-bounty { right: 10px; top: 62px; width: 176px; padding: 7px 10px 7px; }
  .wd-bounty .wdb-k { font-size: 8.5px; letter-spacing: 0.06em; }
  .wd-bounty .wdb-v { font-size: 15px; }
  .wd-bounty .wdb-s { font-size: 10px; }
  .wd-bounty .wdb-f { display: none; }
  .wd-stage[data-drawer]:not([data-drawer=""]) .wd-bounty { display: none; }
  .wd-bar { left: 10px; right: 10px; top: auto; bottom: 10px; transform: none; justify-content: space-between; padding: 3px; }
  .wd-bar button { min-width: 0; flex: 1 1 0; padding: 5px 1px 4px; font-size: 7.5px; letter-spacing: 0.02em; gap: 3px; }
  .wd-bar button b { font-size: 15px; }
  .wd-strip { left: 10px; right: 10px; bottom: 66px; padding: 8px 10px 7px; }
  .wd-strip .wd-panel-head { display: none; }
  .wd-panel { display: none; left: 8px; right: 8px; top: auto; bottom: 66px; width: auto; max-height: 60%; }
  .wd-stage[data-drawer="square"] .wd-sqpanel, .wd-stage[data-drawer="feed"] .wd-feed, .wd-stage[data-drawer="token"] .wd-token { display: grid; }
  .wd-stage[data-drawer="start"] .wd-strip, .wd-stage[data-drawer="square"] .wd-strip, .wd-stage[data-drawer="feed"] .wd-strip, .wd-stage[data-drawer="token"] .wd-strip, .wd-stage[data-drawer="places"] .wd-strip, .wd-stage[data-drawer="residents"] .wd-strip, .wd-stage[data-drawer="purse"] .wd-strip, .wd-stage[data-drawer="agents"] .wd-strip, .wd-stage[data-realm="true"] .wd-strip { display: none; }
  .wd-drawer { left: 8px; right: 8px; top: auto; bottom: 66px; width: auto; transform: none; max-height: 72%; padding: 14px 14px 16px; }
  .wd-realm { left: 8px; right: 8px; top: auto; bottom: 66px; width: auto; max-height: 62%; padding: 12px 12px 12px; }
  .wd-tour { left: 8px; right: 8px; bottom: 66px; width: auto; transform: none; padding: 12px 14px 12px; }
  .wd-tour h4 { font-size: 17px; } .wd-tour p { font-size: 12.5px; }
  .wd-stage[data-tour="true"] .wd-strip { display: none; }
  .wd-stage[data-tour="true"] .wd-realm, .wd-stage[data-tour="true"] .wd-drawer, .wd-stage[data-tour="true"] .wd-panel { bottom: auto; top: 64px; max-height: 38%; }
  .wd-realm-head h3 { font-size: 19px; }
  .wd-cit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* THE LAUNCH TICKER: the coins launched through the desk, scrolling along the seam under the hero; hover holds it */
.wl-ticker { position: relative; overflow: hidden; margin-top: -36px; padding: 10px 0 14px; background: linear-gradient(180deg, rgba(242,245,250,0) 0%, #f2f5fa 40%, #ffffff 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wl-ticker-track { display: flex; gap: 10px; width: max-content; animation: wl-ticker 60s linear infinite; will-change: transform; }
.wl-ticker:hover .wl-ticker-track { animation-play-state: paused; }
@keyframes wl-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wl-ticker-track { animation: none; } .wl-ticker { overflow-x: auto; } }
.wl-tick { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 14px 5px 6px; border-radius: 999px; border: 1px solid var(--line-1); background: #fff; color: var(--ink); text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(7,26,77,0.06); transition: border-color 0.2s, transform 0.2s; }
.wl-tick:hover { border-color: rgba(var(--signal-rgb), 0.55); transform: translateY(-1px); }
.wl-tick .ot-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; }
.wl-tick b { font: 600 12.5px/1 var(--mono); letter-spacing: 0.02em; }
.wl-tick i { font-style: normal; font-size: 11.5px; color: var(--ink-dim); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.wl-tick small { font: 500 9.5px/1 var(--mono); color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 720px) { .wl-ticker { margin-top: -24px; } .wl-tick i { display: none; } }

/* the how-to in the world's agents drawer */
.wd-howto { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.55; color: #cdd9ee; max-width: 72ch; }
.wd-howto li::marker { font: 600 12px var(--mono); color: var(--signal); }
.wd-howto b { color: #fff; font-weight: 600; }

/* THE START DOOR: the steps, each marked done, next or later from where the viewer stands */
.wd-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; counter-reset: st; max-width: 76ch; }
.wd-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: #cdd9ee; }
.wd-steps li::before { counter-increment: st; content: counter(st); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--mono); color: #06153f; background: #9fb6d8; }
.wd-steps li[data-state="done"]::before { content: "✓"; background: #7fe0a8; }
.wd-steps li[data-state="next"] { border-color: var(--signal); }
.wd-steps li[data-state="next"]::before { background: var(--signal); }
.wd-steps b { color: #fff; font-weight: 600; }
.wd-steps .wd-step-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wd-steps .wd-step-act .btn { min-height: 40px; }
.wd-steps .wd-step-act .btn-solid { background: var(--signal); color: #06153f; border-color: var(--signal); }
.wd-steps input { min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.3); background: rgba(4,12,40,0.5); color: #fff; font: 500 13px var(--mono); }
.wd-steps code { font: 500 12px/1.5 var(--mono); color: #fff; overflow-wrap: anywhere; }
.wd-start-note { margin: 0 0 12px; font: 500 12px/1.5 var(--mono); color: #9fb6d8; overflow-wrap: anywhere; }
.wd-start-note b { color: #fff; }
.wd-mine { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wd-mine a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.22); background: var(--card); color: #fff; font: 500 12px/1 var(--mono); text-decoration: none; }
.wd-mine a i { font-style: normal; color: #9fb6d8; font-size: 10.5px; }
.wd-chip[data-factory="true"] { border-color: rgba(127,224,168,0.45); } .wd-chip[data-factory="true"] b { color: #7fe0a8; }
.wd-ev[data-factory="true"] b { color: #7fe0a8; }
.wd-realm-walk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.wd-realm-walk .btn-solid { background: var(--signal); color: #06153f; border-color: var(--signal); min-height: 40px; }
.wd-realm-walk i { font-style: normal; font: 500 11.5px/1.4 var(--mono); color: #9fb6d8; }
/* THE CARD CAN BE PUT AWAY ON A PHONE. There it covers the hall it describes, so its corner carries an X that puts it
   away and leaves you standing in the hall, and a chip where the bounty sits (the bounty is off inside a hall) brings it
   back. On a desk the card sits beside the scene, and neither exists. */
.wd-realm-hide, .wd-realm-peek { display: none; }
@media (max-width: 900px) {
  .wd-realm-hide { display: grid; place-items: center; position: sticky; top: 0; z-index: 3; width: 40px; height: 40px; margin: 0 0 -40px auto; border-radius: 10px; border: 1px solid rgba(255,255,255,0.4); background: rgba(6,21,63,0.72); color: #fff; font: 400 24px/1 var(--mono); cursor: pointer; }
  .wd-realm-head { padding-right: 46px; }
  .wd-realm-peek { display: inline-flex; align-items: center; gap: 8px; position: absolute; z-index: 6; right: 10px; top: 62px; min-height: 40px; max-width: calc(100% - 20px); padding: 0 14px; border-radius: 12px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(3,9,30,0.45); color: #fff; font: 500 12px/1 var(--mono); cursor: pointer; white-space: nowrap; }
  .wd-realm-peek[hidden] { display: none; }
  .wd-realm-peek b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .wd-realm-peek i { font-style: normal; color: #9fb6d8; }
}

/* THE KING OF MATH: the main slot on the launch page */
.king-card { padding: 18px 20px; border-color: rgba(var(--signal-rgb), 0.45); background: linear-gradient(180deg, rgba(var(--signal-rgb), 0.06), rgba(var(--signal-rgb), 0.015)); margin: 0 0 18px; gap: 12px; }
.king-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.king-mark { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 14px; }
.king-crown { color: var(--signal-lo); font-size: 14px; margin-left: 4px; }
.king-price { text-align: right; display: grid; gap: 2px; }
.king-price b { font: 600 24px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.king-price i { font: 600 11.5px/1 var(--mono); font-style: normal; color: var(--ink-faint); }
.king-price i[data-up="true"] { color: #2f8f5b; } .king-price i[data-up="false"] { color: var(--signal-lo); }
.king-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.king-grid div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.04); }
.king-grid dt { font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.king-grid dd { margin: 0; font: 600 14px/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.king-links { display: flex; flex-wrap: wrap; gap: 8px; }
.king-links .btn { min-height: 40px; }
.king-links .btn-solid { background: var(--signal-lo); border-color: var(--signal-lo); color: #fff; }
.ot-stat b { font-variant-numeric: tabular-nums; }
.wl-tick-king { border-color: rgba(var(--signal-rgb), 0.55); background: rgba(var(--signal-rgb), 0.06); }
.wl-tick-king small { color: var(--signal-lo); font-size: 12px; }
@media (max-width: 720px) { .king-head { grid-template-columns: auto minmax(0, 1fr); } .king-price { grid-column: 1 / -1; text-align: left; } }

/* =====================================================================
   HARMONIC DEPTH: one shared book per Stock Token. The hero keeps the
   dark head of the plate, grain over it, so the white pebbles read; the
   schedule is the claim desk's clock in the desk's own colours; each
   book is a card with its ladder drawn against the issuer's print; the
   forms are the USDG desk's, stacked on a phone.
   ===================================================================== */
.hero-depth {
  margin-top: -68px; padding: 128px 0 var(--s6);
  background: linear-gradient(180deg, #06153f 0%, #0b2a6e 34%, #1a4392 62%, #3b68a9 80%, #b4c7e1 93%, #f2f5fa 100%);
}
.hero-depth h2 { color: var(--ink-hero); font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 10px 0 0; }
.hero-depth .lede { color: #cfdcf1; max-width: 58ch; }
.hero-depth .eyebrow { color: #b3c4e2; }
.hero-depth .eyebrow .rule { background: rgba(255,255,255,0.22); }
.dp-hero-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 900px) { .dp-hero-grid { grid-template-columns: 1.2fr 1fr; } }
.dp-plate { position: relative; min-height: 340px; }
#dp-appa { width: 100%; height: 420px; display: block; }
.dp-plate .plate-cap { text-align: center; color: #ffffff; margin-top: -6px; text-shadow: 0 1px 10px rgba(6,21,63,0.6); }
.dp-stats .wl-stat { border-color: rgba(255,255,255,0.32); background: rgba(6,21,63,0.42); }
@media (max-width: 760px) {
  .hero-depth { padding: 108px 0 var(--s5); }
  #dp-appa { height: 260px; }
  .dp-plate { min-height: 260px; }
}

/* the schedule */
.dp-clock {
  margin: 0 0 var(--s4); padding: 16px 18px 14px;
  border: 1px solid var(--line-1); border-radius: var(--radius); background: rgba(255,255,255,0.74);
  position: relative; overflow: hidden;
}
.dp-clock::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--signal), rgba(var(--signal-rgb), 0)); }
.dp-clock[data-state="loading"] .cwc-count, .dp-clock[data-state="offline"] .cwc-count, .dp-clock[data-state="loading"] .cwc-cv, .dp-clock[data-state="offline"] .cwc-cv { color: var(--ink-faint); }
.dp-clock[data-state="due"] .cwc-count { color: var(--signal-lo); }
.dp-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .dp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* THE NIGHT TAPE, THE INSTRUMENT: one dark plate, the film's navy with the print grain, everything on it measured */
.nt { position: relative; overflow: hidden; margin: 0 0 var(--s4); padding: 22px 24px 20px; border-radius: 8px; color: #eef4ff; isolation: isolate;
  background: linear-gradient(180deg, #050f28 0%, #081d52 38%, #0f327a 100%); box-shadow: 0 24px 60px rgba(6,21,63,0.28), inset 0 1px 0 rgba(255,255,255,0.06); }
.nt-plane { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(205,225,255,0.10) 0.7px, transparent 0.85px), radial-gradient(60% 45% at 18% 0%, rgba(128,175,245,0.20), rgba(0,0,0,0) 70%);
  background-size: 14px 14px, 100% 100%; }
.nt-head { margin: 0 0 18px; }
.nt-eyebrow { margin: 0 0 8px; color: #8fb4dd; flex-wrap: wrap; row-gap: 4px; }
.nt-eyebrow span:first-child { color: #f0937f; white-space: nowrap; }
.nt-eyebrow .rule { background: rgba(255,255,255,0.22); }
.nt-lede { margin: 0; font: 400 19px/1.35 var(--display); color: #cfdcf1; max-width: 64ch; }
.nt-k { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8fb4dd; }
.nt-s { display: block; font: 400 11.5px/1.45 var(--mono); color: #b3c4e2; }
.nt-big { display: block; font: 500 30px/1.05 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: 4px 0 6px; }
.nt-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 28px; align-items: center; margin: 0 0 6px; }
.nt-clock { display: flex; align-items: center; gap: 18px; min-width: 0; }
.nt-ring { width: 108px; height: 108px; flex: 0 0 auto; }
.nt-clock-words { min-width: 0; }
.nt-width { display: flex; flex-direction: column; min-width: 0; }
.nt-ramp { width: 160px; height: 40px; margin: 2px 0 6px; }
.nt-chart { position: relative; margin: 14px 0 16px; }
.nt-chart canvas { display: block; width: 100%; height: 230px; border-radius: 6px; cursor: crosshair; touch-action: pan-y; }
.nt-tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); padding: 7px 10px; border-radius: 6px; background: rgba(6,21,63,0.94); border: 1px solid rgba(143,180,221,0.35); box-shadow: 0 10px 30px rgba(3,9,30,0.45); pointer-events: none; white-space: nowrap; font: 400 11px/1.4 var(--mono); color: #cfdcf1; display: flex; flex-direction: column; gap: 1px; }
.nt-tip b { font-weight: 500; color: #ffffff; } .nt-tip i { font-style: normal; color: #f7b49c; }
.nt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #b3c4e2; }
.nt-legend span { display: inline-flex; align-items: center; gap: 7px; }
.nt-legend-hint { color: #8fb4dd; margin-left: auto; letter-spacing: 0.08em; text-transform: none; }
.nt-sw { display: inline-block; width: 16px; height: 0; border-top: 2px solid #eef4ff; }
.nt-sw-close { border-top-style: dashed; border-top-color: rgba(168,198,242,0.8); }
.nt-sw-open { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #f7b49c; box-shadow: 0 0 0 4px rgba(240,147,127,0.18); }
.nt-score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nt-cell { padding: 12px 14px 11px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(143,180,221,0.18); min-width: 0; }
.nt-num { display: block; margin: 6px 0 4px; font: 500 22px/1.1 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; }
.nt[data-state="pending"] .nt-num, .nt[data-state="empty"] .nt-num, .nt[data-state="loading"] .nt-num { color: #b3c4e2; }
.nt[data-state="pending"] #nt-n, .nt[data-state="scored"] .nt-num { color: #ffffff; }
.nt-verdict .nt-num[data-who="book"] { color: #f7b49c; } .nt-verdict .nt-num[data-who="close"] { color: #cfe1ff; }
.nt-history { margin: 16px 0 0; }
.nt-history-k { margin: 0 0 8px; }
.nt-bars { display: flex; gap: 10px; align-items: flex-end; min-height: 64px; }
.nt-night { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 34px; }
.nt-night-bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.nt-night-bars i { display: block; width: 9px; border-radius: 2px 2px 0 0; background: rgba(238,244,255,0.35); transition: height 600ms var(--ease-out); }
.nt-night-bars .nt-b-close { background: rgba(168,198,242,0.35); }
.nt-night[data-who="book"] .nt-b-book { background: #f7b49c; } .nt-night[data-who="close"] .nt-b-close { background: #cfe1ff; }
.nt-night span { font: 400 9.5px/1 var(--mono); color: #8fb4dd; letter-spacing: 0.06em; }
.nt-empty { margin: 0; font: 400 11.5px/1.5 var(--mono); color: #b3c4e2; }
.nt-note { margin: 18px 0 0; font: 400 14.5px/1.55 var(--display); color: #b3c4e2; max-width: 78ch; }
@media (max-width: 760px) {
  .nt { padding: 18px 16px 16px; border-radius: 6px; }
  .nt-lede { font-size: 17px; }
  .nt-eyebrow .rule { display: none; }
  .nt-legend span { white-space: nowrap; }
  .nt-top { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nt-ring { width: 92px; height: 92px; }
  .nt-big { font-size: 26px; }
  .nt-chart canvas { height: 190px; }
  .nt-legend-hint { margin-left: 0; width: 100%; }
  .nt-score { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .nt-cell { padding: 10px 11px 9px; }
  .nt-num { font-size: 19px; }
  .nt-bars { overflow-x: auto; padding-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .nt-night-bars i { transition: none; } }

/* the books */
.dp-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.dp-book {
  border: 1px solid var(--line-1); border-radius: 12px; padding: 18px 18px 16px; min-width: 0;
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,0.8));
  display: grid; gap: 10px; position: relative; overflow: hidden;
  animation: dp-in 520ms var(--ease-out, ease-out) both;
}
.dp-book:nth-child(2) { animation-delay: 90ms; } .dp-book:nth-child(3) { animation-delay: 180ms; }
@keyframes dp-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dp-book { animation: none; } }
.dp-book::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9), rgba(var(--signal-rgb), 0.9)); }
.dp-empty { display: block; }
.dp-empty h4 { margin: 0 0 6px; font: 500 22px/1.2 var(--display); }
.dp-empty p { margin: 0; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
.dp-book-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.dp-sym { font: 500 34px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.dp-pair { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-dim); text-transform: uppercase; }
.dp-verdict {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-dim); white-space: nowrap;
}
.dp-verdict[data-ok="true"] { color: var(--signal-lo); border-color: var(--signal-lo); animation: dp-pulse 2.8s ease-in-out infinite; }
.dp-verdict[data-ok="false"] { color: var(--ink); border-color: var(--line-2); background: rgba(var(--ink-rgb), 0.04); }
@keyframes dp-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0); } 50% { box-shadow: 0 0 0 5px rgba(var(--signal-rgb), 0.12); } }
@media (prefers-reduced-motion: reduce) { .dp-verdict[data-ok="true"] { animation: none; } }
.dp-prices { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.dp-prices b { color: var(--ink); font-weight: 600; }
.dp-prices small { color: var(--ink-faint); font-size: 11px; }
.dp-ladder { margin: 2px 0 0; padding: 0; }
.dp-ladder { display: block; min-width: 0; }
.dp-ladder svg { display: block; max-width: 100%; height: auto; }
.dp-bar { stroke: rgba(var(--ink-rgb), 0.22); stroke-width: 1; }
.dp-bid { fill: rgba(var(--accent-rgb), 0.68); }
.dp-ask { fill: rgba(var(--signal-rgb), 0.58); }
.dp-working { fill: rgba(var(--accent-rgb), 0.26); }
.dp-axis { stroke: var(--line-2); stroke-width: 1; }
.dp-now { stroke: var(--signal-lo); stroke-width: 1.5; animation: dp-breathe 3.2s ease-in-out infinite; }
.dp-print { stroke: rgba(var(--ink-rgb), 0.7); stroke-width: 1; stroke-dasharray: 3 3; }
@keyframes dp-breathe { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .dp-now { animation: none; } }
.dp-t { font-family: var(--mono); font-size: 11px; fill: var(--ink-dim); }
.dp-t-now { fill: var(--signal-lo); font-weight: 600; }
.dp-ladder figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.dp-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.dp-key.dp-bid { background: rgba(var(--accent-rgb), 0.68); } .dp-key.dp-ask { background: rgba(var(--signal-rgb), 0.58); } .dp-key.dp-working { background: rgba(var(--accent-rgb), 0.26); border: 1px solid rgba(var(--ink-rgb), 0.22); }
.dp-kv { margin: 2px 0 0; }
.dp-mine-line { margin: 0; font-size: 13.5px; color: var(--ink-dim); }
.dp-mine-line b { color: var(--ink); }
.dp-last { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.dp-last small { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; margin-left: 6px; }
.dp-foot { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-faint); overflow-wrap: anywhere; border-top: 1px dashed var(--line-1); padding-top: 8px; }
.dp-foot a { color: inherit; }
@media (max-width: 560px) { .dp-book { padding: 14px 14px 12px; } .dp-sym { font-size: 30px; } .dp-verdict { margin-left: 0; } }

/* buying in, leaving */
.dp-quote { margin: 8px 0 4px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(var(--accent-rgb), 0.07); font-size: 14px; line-height: 1.55; color: var(--ink); }
.dp-quote b { font-family: var(--mono); font-size: 13px; }
.dp-quote small { display: block; color: var(--ink-dim); font-size: 12.5px; margin-top: 4px; }
#dp-panel .ud-markets:empty::after { content: "no book is open yet. the first one turns this row live the block it exists."; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
#dp-panel .gate { margin-left: auto; }

/* =====================================================================
   THE MACHINE, MEASURED: four figures on the landing, one range chosen
   above them, a chart or a table in each, every number from the ledger
   and the chain. Built for a phone first: one column, thumb-sized range
   buttons, charts drawn at real pixel size.
   ===================================================================== */
.mrow { margin: var(--s4) 0 var(--s6); }
.mrow-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.mrow-eyebrow { margin: 0; flex: 1 1 auto; min-width: 0; }
.mrow-eyebrow > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-ctl { display: flex; gap: 6px; flex: none; }
.mrow-ctl button { appearance: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); background: transparent; border: 1px solid var(--line-2); border-radius: 8px; min-height: 40px; min-width: 52px; padding: 0 12px; cursor: pointer; }
.mrow-ctl button.on { color: var(--ink); border-color: var(--ink); }
.mrow-ctl button:hover { color: var(--signal-lo); border-color: var(--signal-lo); }
.mrow-ctl .mrow-view { margin-left: 8px; }
.mrow-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .mrow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mrow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.mcard { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; border: 1px solid var(--line-1); border-radius: 12px; background: rgba(255, 255, 255, 0.72); }
.mcard-k { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.mcard-v { margin: 2px 0 0; font-family: var(--mono); font-size: 28px; line-height: 1.05; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.mcard-v small { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-faint); }
.mcard-d { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); }
.mcard-fig { position: relative; margin: 6px 0 2px; min-height: 112px; touch-action: pan-y; }
.mcard-fig .mchart { width: 100%; height: 112px; }
.mcard-fig .mchart-plain { display: block; width: 100%; height: 112px; }
.mcard-empty { margin: 0; padding: 44px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.mrow-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; padding: 6px 9px; border-radius: 8px; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 11px; line-height: 1.4; white-space: nowrap; box-shadow: 0 8px 24px rgba(3, 9, 30, 0.25); }
.mrow-tip i { font-style: normal; color: #b9c8e4; }
.mrow-tablewrap { max-height: 176px; overflow: auto; border: 1px solid var(--line-1); border-radius: 8px; }
.mrow-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.mrow-table th, .mrow-table td { padding: 5px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-1); }
.mrow-table th:first-child, .mrow-table td:first-child { text-align: left; }
.mrow-table th { position: sticky; top: 0; background: #fff; color: var(--ink-faint); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 9.5px; }
.mcard-bars { display: grid; gap: 7px; margin: 8px 0 2px; }
.mcard-bar, .mcard-meter { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: 12px; }
.mcard-bar-k { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard-bar-t { display: block; height: 8px; border-radius: 4px; background: rgba(22, 35, 63, 0.10); overflow: hidden; }
.mcard-bar-t i { display: block; height: 100%; border-radius: 4px; background: var(--ink); }
.mcard-bar-v { font-family: var(--mono); font-size: 11.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mcard-cap { margin: auto 0 0; padding-top: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-faint); }
.mcard-cap a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.mcard-cap a:hover { border-bottom-color: var(--signal-lo); }
.mcard-err { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
@media (max-width: 760px) {
  /* a column that does not wrap: a wrapping column lays each item out as its own column, sized to its content, and the
     three buttons ran off the right of the screen */
  .mrow-bar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .mrow-ctl button { flex: 1 1 0; min-width: 0; min-height: 44px; }
  .mrow-ctl .mrow-view { margin-left: 0; }
  .mcard-v { font-size: 26px; }
}

/* =====================================================================
   THE LANDING'S RHYTHM: every section opens the same way, an eyebrow, a
   headline of at most two lines, one paragraph, then the thing itself,
   with more air between sections on a desk.
   ===================================================================== */
@media (min-width: 900px) { #view-overview .sect { padding: 120px 0; } }
#view-overview .sect h2 { max-width: 22ch; text-wrap: balance; }
#view-overview .loops .card p { font-size: 14.5px; line-height: 1.55; }
.card-receipt { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.card-receipt a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.card-receipt a:hover { border-bottom-color: var(--signal-lo); }
.card-receipt b { font-weight: 600; color: var(--ink); }

/* THE DESKS, LISTED: the menu rendered one line each, a filter row above, three columns on a desk and one on a phone */
.dk-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s4) 0 var(--s3); }
.dk-filter .dk-f { appearance: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); background: transparent; border: 1px solid var(--line-2); border-radius: 8px; min-height: 40px; padding: 0 14px; cursor: pointer; }
.dk-filter .dk-f.on { color: var(--ink); border-color: var(--ink); }
.dk-filter .dk-f:hover { color: var(--signal-lo); border-color: var(--signal-lo); }
.dk-grid { display: grid; grid-template-columns: 1fr; column-gap: 28px; border-top: 1px solid var(--line-1); }
@media (min-width: 700px) { .dk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .dk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px; } }
.dk-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line-1); text-decoration: none; color: inherit; }
.dk-glyph { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 160ms; }
.dk-text { display: grid; gap: 2px; min-width: 0; }
.dk-text b { font: 500 17px/1.2 var(--display); color: var(--ink); transition: color 160ms; }
.dk-text span { font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dk-go { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); transition: color 160ms, transform 160ms; }
.dk-row:hover .dk-text b, .dk-row:hover .dk-glyph { color: var(--signal-lo); }
.dk-row:hover .dk-go { color: var(--signal-lo); transform: translateX(3px); }
.dk-grid:not([data-show="all"]) .dk-row { display: none; }
.dk-grid[data-show="earn"] .dk-row[data-group="earn"], .dk-grid[data-show="trade"] .dk-row[data-group="trade"], .dk-grid[data-show="yours"] .dk-row[data-group="yours"], .dk-grid[data-show="proof"] .dk-row[data-group="proof"], .dk-grid[data-show="compute"] .dk-row[data-group="compute"], .dk-grid[data-show="launch"] .dk-row[data-group="launch"] { display: grid; }
@media (max-width: 760px) { .dk-filter .dk-f { flex: 1 1 auto; min-height: 44px; padding: 0 10px; } .dk-row { grid-template-columns: 56px minmax(0, 1fr) auto; } }
/* the bar above the list, the search beside the filter, and one measured number on each row */
.dk-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: var(--s4) 0 0; }
@media (min-width: 900px) { .dk-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dk-cell { display: grid; gap: 4px; padding: 12px 12px 10px; border: 1px solid var(--line-1); border-radius: 10px; min-width: 0; }
.dk-cell b { font: 500 22px/1.05 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dk-cell b .dk-of { font-size: 0.62em; color: var(--ink-dim); white-space: nowrap; }
.dk-cell em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.3; }
.dk-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: var(--s4) 0 var(--s3); }
.dk-tools .dk-filter { margin: 0; flex: 1 1 auto; }
.dk-search-wrap { flex: 0 1 260px; min-width: 0; }
.dk-search-wrap input { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 13px; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 8px; min-height: 40px; padding: 0 12px; outline: none; }
.dk-search-wrap input:focus { border-color: var(--ink); }
.dk-search-wrap input::placeholder { color: var(--ink-faint); }
.dk-row { grid-template-columns: 64px minmax(0, 1fr) auto auto; }
.dk-num { display: grid; gap: 1px; text-align: right; min-width: 0; }
.dk-num b { font: 500 15px/1.15 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-num em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.dk-num-none { display: none; }
.dk-none { grid-column: 1 / -1; font-family: var(--mono); font-size: 13px; color: var(--ink-dim); padding: 16px 0; }
@media (max-width: 760px) {
  .dk-search-wrap { flex: 1 1 100%; }
  .dk-search-wrap input { min-height: 44px; font-size: 16px; }
  .dk-row { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "g t go" "g n go"; }
  .dk-glyph { grid-area: g; } .dk-text { grid-area: t; } .dk-go { grid-area: go; }
  .dk-num { grid-area: n; text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px; }
  .dk-num em { white-space: normal; }
}

/* THE DOCS: three columns on a desk, a picker on a phone */
.dc-pick-wrap { display: block; margin: var(--s4) 0 var(--s3); }
.dc-pick-wrap select { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 16px; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 8px; min-height: 44px; padding: 0 12px; }
.dc-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: var(--s3); }
.dc-nav { display: none; }
.dc-nav a { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line-1); }
.dc-nav a.dc-nav-sub { padding-left: 14px; font-size: 11px; color: var(--ink-faint); text-transform: none; letter-spacing: 0.04em; }
.dc-nav a:hover { color: var(--signal-lo); }
.dc-body { min-width: 0; }
.dc-sect { padding: 8px 0 28px; border-bottom: 1px solid var(--line-1); }
.dc-sect h2 { font: 500 26px/1.15 var(--display); margin: 0 0 12px; color: var(--ink); }
.dc-sect p, .dc-sect li { font-size: 15.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.dc-sect p { margin: 0 0 10px; }
.dc-sect ul { margin: 0 0 10px; padding-left: 20px; }
.dc-reach { list-style: none; padding: 0; }
.dc-dim { color: var(--ink-dim); }
.dc-group { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 22px 0 6px; }
.dc-desk { padding: 12px 0 14px; border-top: 1px dashed var(--line-1); }
.dc-desk h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 4px; font: 500 20px/1.2 var(--display); }
.dc-desk h3 a { color: var(--ink); text-decoration: none; }
.dc-desk h3 a:hover { color: var(--signal-lo); }
.dc-desk h3 small { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.dc-what { color: var(--ink-dim); }
.dc-line { margin: 0 0 6px; }
.dc-line b { font-weight: 600; }
.dc-rules { margin: 6px 0 0; font-family: var(--mono); font-size: 12.5px; }
.dc-rules > summary { cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; color: var(--ink-dim); }
.dc-rules > summary::-webkit-details-marker { display: none; }
.dc-rules > summary::before { content: "\25B8"; margin-right: 8px; transition: transform 160ms; }
.dc-rules[open] > summary::before { transform: rotate(90deg); }
.dc-rules ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.dc-rules li { font-family: var(--serif, var(--display)); font-size: 14.5px; line-height: 1.5; padding: 8px 10px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.05); display: grid; gap: 3px; }
.dc-rules li em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.dc-gloss { margin: 0; display: grid; gap: 10px; }
.dc-gloss dt { font: 500 17px/1.2 var(--display); color: var(--ink); }
.dc-gloss dd { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--ink-dim); }
.dc-side { display: grid; gap: 12px; align-content: start; }
.dc-side-box { border: 1px solid var(--line-1); border-radius: 10px; padding: 12px 14px; }
.dc-side-box b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 6px; }
.dc-side-box p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
@media (min-width: 900px) {
  .dc-pick-wrap { display: none; }
  .dc-cols { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
  .dc-nav { display: block; position: sticky; top: 84px; align-self: start; }
}
@media (min-width: 1200px) {
  .dc-cols { grid-template-columns: 220px minmax(0, 1fr) 260px; }
  .dc-side { position: sticky; top: 84px; }
}

/* THE CLOSING SCREEN: the mantra, and two ways on */
.sect-close .wrap { text-align: center; }
.sect-close .eyebrow { justify-content: center; }
.sect-close .eyebrow .rule { max-width: 60px; }
.sect-close h2 { margin: 0 auto var(--s4); max-width: 24ch; }
.sect-close .cta-row { justify-content: center; }

/* THE FIGURE AT THE FOOT of every page: the harmonic stack in the house pebbles, across the page's full width, above
   the fixed light plane as the column is, with its caption under it */
.foot-word { position: relative; z-index: 1; margin: 0 0 var(--s5); overflow: hidden; }
.foot-word canvas { display: block; width: 100%; height: 440px; }
.foot-caps { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 8px 0 0; }
.foot-cap { position: static; left: auto; right: auto; bottom: auto; width: auto; max-width: none; transform: none; text-align: center; margin: 0; padding: 0 8px; text-transform: none; letter-spacing: 0.06em; color: var(--ink-faint); }
/* ON A PHONE one figure at a time stands in the one spot, so one caption, the middle one, carries whichever is showing */
@media (max-width: 899px) { .foot-caps { grid-template-columns: 1fr; } .foot-cap-side { display: none; } }
@media (max-width: 899px) { .foot-word canvas { height: 300px; } }

/* THE SCROLLBAR, in the house's colours: a thin thumb in the ink, the signal under the pointer, a pale track on the
   light pages and a dark one inside the world. The standard properties first, the WebKit ones where those are not read. */
html { scrollbar-width: thin; scrollbar-color: rgba(22, 35, 63, 0.38) #eef2f8; }
html[data-world="true"] { scrollbar-color: rgba(185, 200, 228, 0.5) #0b1a4a; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef2f8; }
::-webkit-scrollbar-thumb { background: rgba(22, 35, 63, 0.38); border-radius: 8px; border: 2px solid #eef2f8; }
::-webkit-scrollbar-thumb:hover { background: var(--signal-lo); }
::-webkit-scrollbar-corner { background: #eef2f8; }
html[data-world="true"] ::-webkit-scrollbar-track, html[data-world="true"] ::-webkit-scrollbar-corner { background: #0b1a4a; }
html[data-world="true"] ::-webkit-scrollbar-thumb { background: rgba(185, 200, 228, 0.5); border-color: #0b1a4a; }

/* THE PROOFS BESIDE A DEPTH BOOK */
.dp-proofs { margin: 10px 0 0; border-top: 1px dashed var(--line-1); padding-top: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--ink-faint); }
.dp-proofs > summary { cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.dp-proofs > summary::-webkit-details-marker { display: none; }
.dp-proofs > summary::before { content: "\25B8"; margin-right: 8px; transition: transform 160ms; }
.dp-proofs[open] > summary::before { transform: rotate(90deg); }
.dp-proofs a { color: var(--signal-lo); }
.dp-proofs ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.dp-proofs li { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.08); }
.dp-pf-claim { font-family: var(--display); font-size: 14px; line-height: 1.4; color: var(--ink); }
.dp-pf-state { color: var(--ink-dim); }
.dp-pf-ok { color: var(--ink); font-weight: 600; }
.dp-pf-bad { color: var(--warn); font-weight: 600; }
.dp-pf-wait { color: var(--ink-faint); }
.dp-proofs-none { margin: 10px 0 0; }

/* THE PROOF A FILL CARRIES, under the decision it belongs to */
.ag-proofline { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-faint); overflow-wrap: anywhere; }
.ag-proofline b { color: var(--ink); font-weight: 600; }
.ag-proofline a { color: var(--signal-lo); text-decoration: none; border-bottom: 1px solid var(--line-2); }

/* =====================================================================
   THE ORACLE MARKET. One dark plate per asset, in the night tape's idiom:
   the feed's print, the move since the lock, two questions with their
   clocks and pools, and the feed's path since the lock drawn at real
   pixels. Built for a phone first: the plates stack, the questions stack,
   the beam and the buttons are thumb-sized, nothing scrolls sideways.
   ===================================================================== */
.hero-oracle .lede { max-width: 66ch; }
.om-board { display: grid; gap: 18px; margin: var(--s4) 0 var(--s4); }
.om-board[data-state="loading"]::before { content: "reading the feeds"; font: 400 12px/1.5 var(--mono); color: var(--ink-faint); }
.om-empty { margin: 0; font: 400 13px/1.55 var(--mono); color: var(--ink-faint); }
.omp { position: relative; overflow: hidden; padding: 22px 24px 18px; border-radius: 10px; color: #eef4ff; isolation: isolate;
  background: linear-gradient(180deg, #050f28 0%, #081d52 38%, #0f327a 100%); box-shadow: 0 24px 60px rgba(6,21,63,0.28), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: omp-in 560ms var(--ease-out, ease-out) both; }
.omp:nth-child(2) { animation-delay: 90ms; } .omp:nth-child(3) { animation-delay: 180ms; }
@keyframes omp-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.omp-plane { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(205,225,255,0.10) 0.7px, transparent 0.85px), radial-gradient(60% 45% at 18% 0%, rgba(128,175,245,0.20), rgba(0,0,0,0) 70%);
  background-size: 14px 14px, 100% 100%; }
.omp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) auto auto; gap: 14px 28px; align-items: end; margin: 0 0 16px; }
.omp-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.omp-glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; flex: none; font: 600 12px/1 var(--mono); letter-spacing: 0.08em; color: #ffffff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(143,180,221,0.35); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.omp-name { display: block; font: 500 21px/1.1 var(--display); color: #ffffff; }
.omp-pair { display: block; font: 400 11px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8fb4dd; margin-top: 3px; }
.omp-k { display: block; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8fb4dd; }
.omp-s { display: block; font: 400 11.5px/1.45 var(--mono); color: #b3c4e2; }
.omp-big { display: block; font: 500 30px/1.05 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin: 4px 0 5px; }
.omp-big.is-fresh { animation: omp-fresh 900ms var(--ease-out, ease-out); }
@keyframes omp-fresh { 0% { color: #f7b49c; text-shadow: 0 0 18px rgba(240,147,127,0.55); } 100% { color: #ffffff; text-shadow: none; } }
.omp-move-n[data-dir="up"] { color: #cfe1ff; } .omp-move-n[data-dir="down"] { color: #f7b49c; }
.omp-print, .omp-move { min-width: 0; text-align: right; }
.omp-questions { display: grid; gap: 10px; margin: 0 0 14px; }
.omq { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 12px 22px; align-items: center; padding: 12px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(143,180,221,0.16); transition: border-color 300ms; }
.omq[data-status="locked"] { border-color: rgba(240,147,127,0.35); }
.omq-when { display: flex; align-items: center; gap: 12px; min-width: 0; }
.omq-ring { width: 64px; height: 64px; flex: none; }
.omq-words { display: grid; gap: 2px; min-width: 0; }
.omq-label { font: 500 15px/1.2 var(--display); color: #ffffff; }
.omq-status { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8fb4dd; }
.omq-clock { font: 500 18px/1.1 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; }
.omq-pools { display: grid; gap: 7px; min-width: 0; }
.omq-beam { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); display: flex; transform: rotate(var(--tilt, 0deg)); transition: transform 700ms var(--ease-out, ease-out); }
.omq-beam i { display: block; height: 100%; transition: flex-basis 700ms var(--ease-out, ease-out), width 700ms var(--ease-out, ease-out); }
.omq-beam-up { width: var(--up, 50%); background: linear-gradient(90deg, #8fb4dd, #cfe1ff); }
.omq-beam-down { flex: 1; background: linear-gradient(90deg, #f0937f, #f7b49c); }
.omq-beam[data-empty="true"] i { opacity: 0.28; }
.omq-beam-pin { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; margin-left: -1px; background: rgba(255,255,255,0.85); border-radius: 1px; }
.omq-sides { display: flex; justify-content: space-between; gap: 12px; }
.omq-side { display: grid; gap: 1px; min-width: 0; }
.omq-side-down { text-align: right; }
.omq-side em { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; }
.omq-side-up em { color: #cfe1ff; } .omq-side-down em { color: #f7b49c; }
.omq-side b { font: 500 15px/1.2 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; }
.omq-side small { font: 400 11px/1.4 var(--mono); color: #b3c4e2; }
.omq-note { margin: 0; font: 400 11.5px/1.5 var(--mono); color: #b3c4e2; }
.omq-act { display: grid; gap: 8px; grid-auto-flow: column; align-items: center; }
.omq-btn { appearance: none; min-height: 44px; min-width: 88px; padding: 0 16px; border-radius: 10px; cursor: pointer; font: 600 13.5px/1 var(--display); letter-spacing: 0.02em; transition: transform 160ms, box-shadow 160ms, opacity 160ms; }
.omq-btn-up { color: #061532; background: linear-gradient(180deg, #dbe9ff, #a9c6ee); border: 1px solid rgba(207,225,255,0.9); }
.omq-btn-down { color: #3a1108; background: linear-gradient(180deg, #ffc9b7, #f0937f); border: 1px solid rgba(247,180,156,0.9); }
.omq-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(3,9,30,0.45); }
.omq-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.omq-locked { font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #f7b49c; border: 1px solid rgba(240,147,127,0.45); border-radius: 999px; padding: 9px 12px; white-space: nowrap; }
.omp-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.omp-seg { display: inline-flex; border: 1px solid rgba(143,180,221,0.35); border-radius: 999px; overflow: hidden; }
.omp-seg button { appearance: none; background: transparent; border: 0; color: #b3c4e2; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; min-height: 36px; padding: 0 14px; cursor: pointer; }
.omp-seg button[aria-selected="true"] { background: rgba(255,255,255,0.12); color: #ffffff; }
.omp-chart-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8fb4dd; }
.omp-chart { position: relative; }
.omp-chart canvas { display: block; width: 100%; height: 220px; border-radius: 6px; cursor: crosshair; touch-action: pan-y; }
.omp-tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); padding: 7px 10px; border-radius: 6px; background: rgba(6,21,63,0.94); border: 1px solid rgba(143,180,221,0.35); box-shadow: 0 10px 30px rgba(3,9,30,0.45); pointer-events: none; white-space: nowrap; font: 400 11px/1.4 var(--mono); color: #cfdcf1; display: flex; flex-direction: column; gap: 1px; }
.omp-tip b { font-weight: 500; color: #ffffff; } .omp-tip i { font-style: normal; color: #f7b49c; }
.omp-foot { margin: 10px 0 0; font: 400 11px/1.5 var(--mono); color: #8fb4dd; overflow-wrap: anywhere; }
.omp-foot a { color: #cfe1ff; }
.om-seat #om-up.on { border-color: #4f7fc0; color: #1d3f75; background: rgba(143,180,221,0.22); }
.om-seat #om-down.on { border-color: var(--signal-lo); color: var(--signal-lo); background: rgba(240,147,127,0.14); }
.om-pos-row[data-state="void"] { border-left-color: var(--line-2); }
.om-record { margin: var(--s4) 0 0; }
.om-eyebrow { margin: 0 0 12px; }
.om-rec { display: grid; gap: 8px; }
.om-rec-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-1); border-radius: 10px; border-left-width: 3px; background: rgba(255,255,255,0.7); }
.om-rec-row[data-outcome="up"] { border-left-color: #4f7fc0; } .om-rec-row[data-outcome="down"] { border-left-color: var(--signal-lo); } .om-rec-row[data-outcome="void"] { border-left-color: var(--line-2); }
.om-rec-id b { display: block; font: 500 17px/1.1 var(--display); color: var(--ink); } .om-rec-id i { display: block; font: 400 11px/1.5 var(--mono); color: var(--ink-faint); font-style: normal; }
.om-rec-prints { display: flex; gap: 18px; }
.om-rec-prints span { display: grid; gap: 1px; } .om-rec-prints em { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; }
.om-rec-prints b { font: 500 14px/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } .om-rec-prints small { font: 400 10.5px/1.3 var(--mono); color: var(--ink-faint); }
.om-rec-verdict b { display: block; font: 600 14px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); } .om-rec-verdict i { display: block; font: 400 11px/1.4 var(--mono); color: var(--ink-faint); font-style: normal; }
.om-rec-pot b { display: block; font: 500 14px/1.2 var(--mono); color: var(--ink); } .om-rec-pot i { display: block; font: 400 11px/1.4 var(--mono); color: var(--ink-faint); font-style: normal; } .om-rec-pot a { font: 400 11px/1.4 var(--mono); color: var(--signal-lo); }
@media (max-width: 900px) {
  .omp-head { grid-template-columns: minmax(0, 1fr) auto; }
  .omp-move { grid-column: 1 / -1; text-align: left; }
  .omq { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .omq-act { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .omq-btn { min-width: 0; width: 100%; }
  .omq-locked { justify-self: start; }
  .om-rec-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .omp { padding: 18px 16px 14px; border-radius: 8px; }
  .omp-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .omp-print { text-align: left; }
  .omp-big { font-size: 26px; }
  .omp-chart canvas { height: 190px; }
  .omq-ring { width: 56px; height: 56px; }
  .omq-clock { font-size: 16px; }
  .omp-chart-head .omp-chart-k { width: 100%; }
  .om-rec-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .om-rec-prints { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .omp { animation: none; } .omq-beam, .omq-beam i { transition: none; } .omp-big.is-fresh { animation: none; } }

/* THE LADDER under a question: three strikes, above against below, thumb-sized sides. */
.omq-ladder { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 10px; border-top: 1px dashed rgba(143,180,221,0.22); }
.omq-ladder-k { margin: 0 0 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8fb4dd; }
.oml { display: grid; gap: 6px; }
.oml-row { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,0.035); border: 1px solid rgba(143,180,221,0.12); }
.oml-row[data-status="locked"] { border-color: rgba(240,147,127,0.28); }
.oml-row[data-now="up"] .oml-side-up em::after, .oml-row[data-now="down"] .oml-side-down em::after { content: " · the feed is here"; letter-spacing: 0; text-transform: none; color: #ffffff; }
.oml-strike b { display: block; font: 500 16px/1.1 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; }
.oml-strike i { display: block; font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #8fb4dd; font-style: normal; margin-top: 2px; }
.oml-side { display: grid; gap: 1px; min-width: 0; }
.oml-side em { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; }
.oml-side-up em { color: #cfe1ff; } .oml-side-down em { color: #f7b49c; }
.oml-side b { font: 500 13.5px/1.2 var(--mono); color: #ffffff; font-variant-numeric: tabular-nums; }
.oml-side small { font: 400 10.5px/1.4 var(--mono); color: #b3c4e2; }
.oml-act { display: grid; grid-auto-flow: column; gap: 6px; }
.oml-btn { min-height: 40px; min-width: 76px; padding: 0 12px; font-size: 12.5px; }
@media (max-width: 900px) {
  .oml-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .oml-strike { grid-column: 1 / -1; }
  .oml-act { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .oml-btn { width: 100%; min-width: 0; }
}

/* THE PICKER: search, every feed as a tile with its live print, the rest of the registry folded beneath. Phone first: the tiles
   are two rows that scroll sideways inside their own box, so forty of them never widen the page; on a desk they wrap. */
.om-pick { margin: var(--s3) 0 0; display: grid; gap: 12px; }
/* a grid item's floor is its content unless told otherwise, and the folded registry holds a sideways-scrolling strip: it must be allowed to be no wider than the column */
.om-pick > * { min-width: 0; }
.om-more { min-width: 0; max-width: 100%; }
.om-tiles { min-width: 0; max-width: 100%; }
.om-search { position: relative; display: grid; gap: 6px; }
.om-search-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.om-search input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,0.85); color: var(--ink); font: 400 16px/1.2 var(--mono); }
.om-search input:focus { outline: 2px solid #4f7fc0; outline-offset: 1px; }
.om-results { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: #ffffff; box-shadow: 0 18px 44px rgba(6,21,63,0.16); }
.om-result { appearance: none; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.om-result[aria-selected="true"], .om-result:hover { background: rgba(143,180,221,0.16); }
.om-result b { font: 600 13px/1.2 var(--mono); } .om-result span { font: 400 13px/1.3 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-result small { font: 400 11px/1.3 var(--mono); color: var(--ink-faint); white-space: nowrap; } .om-result small[data-feed="no"] { color: var(--signal-lo); }
.om-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.om-tiles[data-state="loading"]::before { content: "reading the feeds"; font: 400 12px/1.5 var(--mono); color: var(--ink-faint); grid-column: 1 / -1; }
.omt { appearance: none; display: grid; gap: 3px; min-height: 84px; padding: 10px 10px 9px; border: 1px solid var(--line-1); border-radius: 10px; background: rgba(255,255,255,0.72); text-align: left; cursor: pointer; color: var(--ink); min-width: 0;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms; }
.omt:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(6,21,63,0.10); }
.omt[aria-pressed="true"] { border-color: #4f7fc0; box-shadow: 0 0 0 2px rgba(79,127,192,0.35), 0 10px 24px rgba(6,21,63,0.10); background: #ffffff; }
.omt[data-kind="crypto"] .omt-glyph { background: linear-gradient(180deg, #081d52, #0f327a); color: #ffffff; border: 0; }
.omt-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.omt-top b { font: 600 13.5px/1.1 var(--mono); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-logo, .omt-glyph { width: 28px; height: 28px; border-radius: 8px; flex: none; object-fit: cover; background: #ffffff; }
.omt-glyph { display: grid; place-items: center; font: 600 9px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); border: 1px solid var(--line-2); }
.omt i { display: block; font: 400 11px/1.3 var(--display); color: var(--ink-faint); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt em { display: block; font: 500 12.5px/1.2 var(--mono); color: var(--ink); font-style: normal; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt[data-feed="no"] em { color: var(--ink); }
.omt em small { display: block; margin-top: 3px; font: 500 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.om-tiles-dim .omt { background: rgba(255,255,255,0.45); }
.om-more { border-top: 1px dashed var(--line-2); padding-top: 10px; }
.om-more summary { cursor: pointer; font: 500 12.5px/1.4 var(--mono); color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.om-more-note { margin: 4px 0 12px; font: 400 12.5px/1.55 var(--mono); color: var(--ink-faint); max-width: 72ch; }

/* THE FOCUS: the token picked, its feed and its contract in a card above its plate. */
.om-focus { margin: var(--s3) 0 0; }
.om-focus[data-state="loading"] .om-empty, .om-focus[data-state="idle"] .om-empty, .om-focus[data-state="none"] .om-empty { padding: 14px 0; }
.omf { display: grid; gap: 14px; padding: 16px 18px; border: 1px solid var(--line-2); border-left: 3px solid #4f7fc0; border-radius: 10px; background: rgba(255,255,255,0.78); }
.om-focus[data-state="nofeed"] .omf { border-left-color: var(--signal-lo); }
.omf-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.omf-logo, .omf-glyph { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #ffffff; border: 1px solid var(--line-1); }
.omf-glyph { display: grid; place-items: center; font: 600 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); }
.omf-name { min-width: 0; } .omf-name b { display: block; font: 500 20px/1.15 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.omf-name i { display: block; margin-top: 3px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; }
.omf-print { text-align: right; display: grid; gap: 2px; } .omf-print b { font: 500 22px/1.1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; } .omf-print small { font: 400 11px/1.4 var(--mono); color: var(--ink-faint); }
.omf-rows { margin: 0; display: grid; gap: 8px; }
.omf-rows > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--line-1); }
.omf-rows dt { font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.omf-rows dd { margin: 0; font: 400 12.5px/1.6 var(--mono); color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.omf-rows dd code { font: 400 11.5px/1.4 var(--mono); background: rgba(6,21,63,0.06); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.omf-rows dd a { color: #1d3f75; } .omf-rows dd small { color: var(--ink-faint); } .omf-warn { color: var(--signal-lo); }
.omp-glyph img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #ffffff; }
.omp-hold { margin: -6px 0 14px; font: 400 11.5px/1.55 var(--mono); color: #b3c4e2; }
.om-board[data-state="nofeed"], .om-board[data-state="idle"] { display: none; }
@media (max-width: 760px) {
  .om-tiles { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: 132px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .om-tiles .omt { scroll-snap-align: start; }
  .om-tiles[data-state="loading"] { grid-auto-flow: row; grid-template-rows: none; }
  .omf { padding: 14px 14px; }
  .omf-head { grid-template-columns: 40px minmax(0, 1fr); }
  .omf-logo, .omf-glyph { width: 40px; height: 40px; }
  .omf-print { grid-column: 1 / -1; text-align: left; }
  .omf-rows > div { grid-template-columns: minmax(0, 1fr); }
  .om-result { grid-template-columns: 56px minmax(0, 1fr) auto; }
}

/* ---- Depth: the venue built to the SEC's conditions ---- */
.dpv-readiness { margin: 0 0 var(--s3); padding: 12px 14px; border: 1px solid rgba(138,75,8,.45); border-radius: 10px; background: rgba(255,243,224,.85); color: #8a4b08; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.dpv-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); min-width: 0; }
.dpv-card { min-width: 0; }
.dpv-card .card-bar small { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); font-weight: 400; }
.dpv-body { padding: 12px 14px 14px; display: grid; gap: 10px; min-width: 0; }
.dpv-book { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: 10px; background: rgba(255,255,255,.6); min-width: 0; }
.dpv-book-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dpv-sym { font-weight: 700; letter-spacing: .02em; }
.dpv-state { margin-left: auto; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink); }
.dpv-state[data-on="trading"] { color: var(--signal-lo); border-color: var(--signal-lo); }
.dpv-state[data-on="halted"] { color: #fff; background: #8a2c0d; border-color: #8a2c0d; }
.dpv-state[data-on="unread"] { color: var(--ink-faint); }
.dpv-line { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.dpv-line small { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; }
.dpv-foot { margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-faint); overflow-wrap: anywhere; }
.dpv-foot a { color: inherit; }
.dpv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; min-width: 0; }
.dpv-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.dpv-table th, .dpv-table td { padding: 6px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-1); }
.dpv-table th:first-child, .dpv-table td:first-child, .dpv-table th:nth-child(2), .dpv-table td:nth-child(2), .dpv-table th:nth-child(3), .dpv-table td:nth-child(3) { text-align: left; }
.dpv-table th { font-weight: 500; color: var(--ink-faint); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.dpv-table td.buy { color: var(--signal-lo); } .dpv-table td.sell { color: #8a2c0d; }
.dpv-empty { text-align: left !important; color: var(--ink-faint); white-space: normal !important; }
.dpv-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-dim); overflow-wrap: anywhere; }
.dpv-links { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); overflow-wrap: anywhere; } .dpv-links a { color: var(--ink); }
.dpv-halt { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px dashed var(--line-1); min-width: 0; } .dpv-halt:last-child { border-bottom: 0; }
.dpv-halt b { font-size: 14px; } .dpv-halt small { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); overflow-wrap: anywhere; }
.dpv-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; min-width: 0; }
.dpv-kv div { display: grid; gap: 2px; min-width: 0; } .dpv-kv small { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; } .dpv-kv strong { font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .dpv-body { padding: 10px 12px 12px; } .dpv-kv strong { font-size: 15px; } }

/* ---- Depth: logos, the picker and the queue ---- */
.dp-logo { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; background: #fff; flex: none; vertical-align: middle; margin-right: 8px; }
.dp-book-head .dp-logo { width: 30px; height: 30px; margin-right: 2px; }
.ud-chip .dp-logo { width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; }
.dpv-wide { grid-column: 1 / -1; }
.dpv-search-row { display: flex; gap: 8px; min-width: 0; }
.dpv-search { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--ink); font: 400 15px/1 var(--mono); }
.dpv-search:focus { outline: 2px solid rgba(var(--signal-rgb), .35); border-color: var(--signal-lo); }
.dpv-results { display: grid; gap: 6px; min-width: 0; }
.dpv-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-1); border-radius: 10px; background: rgba(255,255,255,.7); min-width: 0; }
.dpv-result .dp-logo { margin: 0; }
.dpv-result b { font-size: 14px; letter-spacing: .02em; }
.dpv-result i { display: block; font-style: normal; font-size: 12px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpv-result .dpv-result-words { min-width: 0; flex: 1 1 auto; }
.dpv-result .btn { flex: none; min-height: 40px; padding: 0 14px; font-size: 12px; }
.dpv-result[data-state="has-book"] .btn, .dpv-result[data-state="queued"] .btn { opacity: .55; pointer-events: none; }
.dpv-queue { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.dpv-q { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px dashed var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--ink); }
.dpv-q[data-status="deploying"] { border-style: solid; border-color: var(--signal-lo); color: var(--signal-lo); }
.dpv-q[data-status="done"] { border-style: solid; border-color: var(--line-2); color: var(--ink-faint); }
.dpv-q[data-status="failed"] { border-style: solid; border-color: #8a2c0d; color: #8a2c0d; }
.dpv-q .dp-logo { width: 16px; height: 16px; margin: 0; border-radius: 4px; }
@media (max-width: 640px) { .dpv-search { font-size: 16px; } .dpv-result .btn { padding: 0 10px; } }

/* ---- Depth: the trade form ---- */
.dp-trade { flex-wrap: wrap; }
.dp-side { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; }
.dp-side .ud-chip { min-height: 44px; }
.dp-thin { display: block; color: var(--bad, #b3261e); margin-bottom: 6px; }

/* ================= the CLI: Harmonic Agent in a terminal =================
   A terminal drawn on the page with the CLI's own art module: the plate is
   a <pre> of braille, one span per cell, coloured by role, on the films'
   ground. Phone first: the install line wraps on a character, the commands
   stack, and nothing is wider than the viewport. */
.cli-term { background: linear-gradient(#050f28, #17418c); border-radius: 10px; padding: 14px 12px 12px; box-shadow: 0 18px 50px rgba(3, 10, 30, .45); overflow: hidden; }
.cli-term .cli-bar { display: flex; gap: 6px; margin: 0 0 10px; }
.cli-term .cli-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2f5da6; display: block; }
.cli-term .cli-bar i:first-child { background: #f0937f; }
.cli-art { margin: 0; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; font-size: 13px; line-height: 1; letter-spacing: 0; color: #8fb4dd; white-space: pre; overflow: hidden; }
.cli-art .r1 { color: #8fb4dd; } .cli-art .r2 { color: #eef4ff; } .cli-art .r3 { color: #f0937f; } .cli-art .r4 { color: #2f5da6; }
.cli-art .cap { color: #eef4ff; letter-spacing: .18em; } .cli-art .cap2 { color: #5f86bd; letter-spacing: .18em; }
.cli-line { margin: 10px 0 0; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; font-size: 13px; color: #eef4ff; white-space: pre-wrap; word-break: break-all; }
.cli-line b { color: #f0937f; font-weight: 400; }
.cli-install { margin: 18px 0 8px; display: grid; gap: 10px; }
.cli-install code { display: block; padding: 14px 14px; border: 1px solid rgba(20, 40, 90, .18); border-radius: 8px; font-size: 14px; word-break: break-all; white-space: pre-wrap; background: rgba(6, 21, 50, .04); }
.cli-install .btn { justify-self: start; }
.cli-cmds { display: grid; gap: 10px; margin: 14px 0 0; }
.cli-cmds div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 10px 0; border-top: 1px solid rgba(20, 40, 90, .12); }
.cli-cmds code { font-size: 13.5px; word-break: break-word; }
.cli-cmds span { color: rgba(20, 30, 60, .78); font-size: 15px; line-height: 1.45; }
.cli-never { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cli-never li { padding-left: 1.2em; text-indent: -1.2em; line-height: 1.45; }
.cli-never li::before { content: "\2192\00a0"; color: #f0937f; }
.cli-state { margin: 12px 0 0; color: rgba(20, 30, 60, .78); }
@media (min-width: 760px) {
  .cli-cmds div { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .cli-art { font-size: 14px; }
}

/* the terminal must never set the page's width: the grid column clamps to the viewport and the plate clips inside it */
#view-cli .in-hero-grid { grid-template-columns: minmax(0, 1fr); }
#view-cli .in-hero-grid > div { min-width: 0; }
#view-cli .cli-term, #view-cli .cli-art { min-width: 0; max-width: 100%; }
@media (min-width: 900px) { #view-cli .in-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
/* in a hero the install line, the state, the rule and the button sit on the dark ground, so they are set in
   light ink. Scoped to .hero and not to one page: the Robinhood and registry heroes reuse these classes and
   inherited the light-ground ink, so their lines read dark on dark. The caption clears the terminal. */
.hero .cli-install code { color: #eef4ff; background: rgba(238, 244, 255, .08); border-color: rgba(238, 244, 255, .28); }
.hero .cli-state { color: rgba(238, 244, 255, .82); }
.hero .cli-state code { color: #f0937f; }
.hero .cli-state a { color: #ffffff; text-decoration-color: rgba(255, 255, 255, .55); }
.hero .cli-state a:hover { text-decoration-color: var(--signal); }
.hero .cli-rule { color: #eef4ff; }
.hero .cli-rule i { color: rgba(238, 244, 255, .82); }
#view-cli .in-plate .plate-cap { margin-top: 12px; }
#view-cli .in-plate .plate-cap { position: static; transform: none; margin: 12px 0 0; }
.hero .cli-install .btn { color: #eef4ff; border-color: rgba(238, 244, 255, .55); }

/* ---- the CLI itself, in the page: a screen of rows and one input line ---- */
.cli-term .cli-bar span { margin-left: 6px; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; font-size: 11px; letter-spacing: .08em; color: #5f86bd; align-self: center; }
.cli-live { display: grid; gap: 8px; }
.cli-screen { height: calc(26 * 13px); overflow: hidden; }
.cli-screen .ink { color: #eef4ff; } .cli-screen .dim { color: #7fa2d2; } .cli-screen .r3 { color: #f0937f; }
.cli-in { display: flex; align-items: center; gap: 8px; margin: 0; border-top: 1px solid rgba(143, 180, 221, .18); padding-top: 8px; }
.cli-in label { color: #f0937f; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; font-size: 16px; }
.cli-in input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: #eef4ff; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; font-size: 16px; line-height: 44px; height: 44px; caret-color: #f0937f; }
.cli-in input::placeholder { color: #5f86bd; }
.cli-in input:disabled { color: #7fa2d2; }
.cli-in button { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 1px solid rgba(238, 244, 255, .45); border-radius: 8px; background: transparent; color: #eef4ff; font-family: "DejaVu Sans Mono", "Menlo", "Consolas", monospace; font-size: 13px; letter-spacing: .08em; cursor: pointer; }
.cli-in.busy button { opacity: .5; }
/* the gallery: four terminals, stacked on a phone, two by two on a desktop */
.cli-gallery { display: grid; gap: 16px; margin: 18px 0 0; }
.cli-fig { margin: 0; }
.cli-fig pre { height: calc(14 * 13px); }
.cli-fig figcaption { margin: 10px 2px 0; color: #b3c4e2; font-size: 14px; line-height: 1.45; }
.cli-fig figcaption b { color: #eef4ff; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin-right: 8px; }
/* the guard, as four steps */
.cli-guard { display: grid; gap: 12px; margin: 16px 0 0; }
.cli-guard > div { border: 1px solid rgba(20, 40, 90, .14); border-radius: 10px; padding: 14px 16px; display: grid; gap: 6px; }
.cli-guard b { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: #c96a55; }
.cli-guard span { line-height: 1.5; }
.cli-guard ul { margin: 4px 0 0; padding-left: 1.2em; line-height: 1.5; }
.cli-guard-check { background: rgba(240, 147, 127, .07); }
.cli-rule { margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid #f0937f; line-height: 1.55; }
.cli-rule i { color: rgba(20, 30, 60, .78); }
.cli-ways { display: grid; gap: 12px; margin: 16px 0 0; }
.cli-ways > div { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid rgba(20, 40, 90, .12); }
.cli-ways code { font-size: 14px; word-break: break-word; }
.cli-ways span { line-height: 1.5; color: rgba(20, 30, 60, .82); }
.cli-eyebrow-gap { margin-top: 28px; }
@media (min-width: 760px) {
  .cli-screen { height: calc(26 * 14px); }
  .cli-fig pre { height: calc(14 * 14px); }
  .cli-gallery { grid-template-columns: 1fr 1fr; }
  .cli-guard { grid-template-columns: 1fr 1fr; }
  .cli-ways > div { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 16px; align-items: baseline; }
}
#view-cli .cli-sha { font-size: 12px; word-break: break-all; color: #8fb4dd; }

/* ---- the robinhood tab: the record and the earnings board, phone first ---- */
.rh-stats { margin: 0 0 12px; }
.rh-words { margin-top: 0; }
.rh-table { width: 100%; border-collapse: collapse; margin: 16px 0 0; font-size: 14.5px; }
.rh-table th { text-align: left; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20, 30, 60, .6); padding: 0 8px 8px 0; }
.rh-table td { padding: 10px 8px 10px 0; border-top: 1px solid rgba(20, 40, 90, .12); vertical-align: top; line-height: 1.4; overflow-wrap: anywhere; }
.rh-table td b { font-weight: 500; }
.rh-table td i { display: block; font-style: normal; color: rgba(20, 30, 60, .66); font-size: 13px; }
.rh-table .rh-num { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 18px; color: #c25c47; }
.rh-right { color: #2f7a4d; } .rh-wrong { color: #c25c47; }
.rh-plate { display: inline-block; margin-top: 4px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.rh-boardwrap, .rh-last { margin: 8px 0 0; }
.rh-readlist { display: grid; gap: 10px; margin: 14px 0 0; }
.rh-readlist > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; border-top: 1px solid rgba(20, 40, 90, .12); line-height: 1.45; }
.rh-readlist > div > b { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-weight: 400; letter-spacing: .08em; }
.rh-readlist .rh-num { font-family: var(--mono, "DejaVu Sans Mono", monospace); color: #c25c47; }
@media (min-width: 720px) {
  .rh-readlist > div { grid-template-columns: 5.5em minmax(0, 1fr) auto; align-items: baseline; }
  .rh-table th:first-child, .rh-table td:first-child { width: 9em; }
}
@media (max-width: 719px) {
  .rh-table thead { display: none; }
  .rh-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; padding: 10px 0; border-top: 1px solid rgba(20, 40, 90, .12); }
  .rh-table td { border: 0; padding: 0; }
  .rh-table td:nth-child(2) { grid-column: 1 / -1; }
}

/* the agent registry: the board reuses the record table; the rank and the bound in mono */
.rg-rank { font-family: var(--mono, "DejaVu Sans Mono", monospace); color: rgba(20, 30, 60, .55); }
.rg-bound { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 18px; color: #c25c47; }
.rg-house { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(20, 30, 60, .55); }
.rh-table td .rg-kind { display: inline-block; margin-left: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(20, 30, 60, .55); }

/* ============ the stock token atlas: one line per token, phone first ============ */
.at-search { width: 100%; max-width: 440px; min-height: 44px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(20, 40, 90, .18); background: rgba(6, 21, 50, .04); font: inherit; font-size: 16px; color: inherit; }
.hero .at-search { color: #eef4ff; background: rgba(238, 244, 255, .08); border-color: rgba(238, 244, 255, .28); }
.hero .at-search::placeholder { color: rgba(238, 244, 255, .62); }
.at-board { display: grid; gap: 8px; margin-top: 14px; }
.at-row { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.at-row-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: baseline; width: 100%; min-height: 44px; background: none; border: 0; padding: 0; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.at-sym { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-weight: 600; font-size: 15px; letter-spacing: .04em; }
.at-name { color: rgba(20, 30, 60, .66); font-size: 14px; overflow-wrap: anywhere; }
.at-nums { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 14px; text-align: right; white-space: nowrap; }
.at-nums i { display: block; font-style: normal; color: rgba(20, 30, 60, .62); font-size: 12px; }
.at-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.at-chips:empty { display: none; }
.at-chip { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(20, 40, 90, .18); color: rgba(20, 30, 60, .78); }
.at-facts { display: none; margin-top: 10px; border-top: 1px solid rgba(20, 40, 90, .12); padding-top: 6px; }
.at-row[data-open="true"] .at-facts { display: block; }
.at-facts dl, .at-focus dl { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 6px 14px; margin: 8px 0; }
.at-facts dt, .at-focus dt { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 30, 60, .6); }
.at-facts dd, .at-focus dd { margin: 0; overflow-wrap: anywhere; line-height: 1.45; }
@media (max-width: 640px) { .at-facts dl, .at-focus dl { grid-template-columns: 1fr; } .at-facts dt, .at-focus dt { margin-top: 6px; } }
.at-links a { display: inline-block; margin: 6px 14px 0 0; text-decoration: underline; text-underline-offset: 3px; }
.at-focus { border: 1px solid var(--rule); border-left: 3px solid #f0937f; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; min-width: 0; }
.at-focus-words { margin: 6px 0 0; line-height: 1.5; }
/* the atlas plate carries a long sentence, so its caption sits under the words instead of over them */
#view-atlas .in-plate { min-height: 0; }
#view-atlas .in-plate .plate-cap { position: static; transform: none; margin: 12px 0 0; }

/* THE RAIL'S LIMITS AND SWITCH: the note under the steps, and the holder's card, built for a thumb first */
.rail-limits-note { margin: 18px 0 4px; }
.rail-limits-note .lede { margin: 8px 0 0; }
.rail-switch { margin: 14px 0 0; padding: 16px 18px; border: 1px solid var(--rule); border-left: 3px solid #f0937f; border-radius: 10px; min-width: 0; }
.rail-switch .cli-state { margin: 0 0 10px; overflow-wrap: anywhere; }
.rail-switch .rail-bad { color: #c25c47; }
.rail-switch .rail-stats { margin: 0 0 12px; }
.rail-form { display: grid; gap: 10px; margin: 12px 0 0; }
.rail-form label { display: grid; gap: 4px; font-size: 13px; color: rgba(20, 30, 60, .72); }
.rail-form input { width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px; border: 1px solid var(--rule); border-radius: 8px; background: #fff; color: inherit; }
.rail-form .btn, .rail-actions .btn, .rail-switch .rail-forget { min-height: 44px; width: 100%; }
.rail-actions { margin: 0 0 12px; }
.rail-switch .rail-halt { background: #c25c47; border-color: #c25c47; color: #fff; }
.rail-switch .rail-forget { margin-top: 12px; opacity: .8; }
@media (min-width: 720px) {
  .rail-form { grid-template-columns: 1fr 1fr; }
  .rail-form .btn, .rail-form p { grid-column: 1 / -1; }
  .rail-form .btn, .rail-actions .btn, .rail-switch .rail-forget { width: auto; min-width: 220px; }
}

/* THE SESSION ORACLE on the atlas tab: a row per token, four cells that stack to two on a phone, the verdict as colour */
.ora-sect { margin: 0 0 28px; }
.ora-sect .lede { margin: 8px 0 12px; }
.ora-board { display: grid; gap: 6px; margin: 12px 0 0; }
.ora-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule); border-left: 3px solid rgba(20, 30, 60, .25); border-radius: 8px; min-width: 0; font-size: 14px; }
.ora-row span { min-width: 0; overflow-wrap: anywhere; }
.ora-sym b { font-weight: 600; display: block; }
.ora-sym i, .ora-cell i { display: block; font-style: normal; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(20, 30, 60, .55); }
.ora-cell small { color: rgba(20, 30, 60, .66); font-size: 12px; }
.ora-basis b { font-family: var(--mono, "DejaVu Sans Mono", monospace); }
/* THE TWO TIERS: free from off the chain, paid from inside a contract. Two columns on a desk, stacked on a phone. */
.ora-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; }
.ora-tier-col { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; min-width: 0; background: rgba(255, 255, 255, .35); }
.ora-tier-paid { border-left: 3px solid var(--signal, #c25c47); }
.ora-tier-col .eyebrow { margin: 0 0 8px; }
.ora-tier-col .body { margin: 0 0 10px; font-size: 15px; }
.ora-tier-how { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ora-tier-how code { font-size: 12px; padding: 3px 7px; border: 1px solid var(--rule); border-radius: 6px; overflow-wrap: anywhere; }
.ora-tier-foot { margin: 10px 0 0; font-size: 13px; color: rgba(20, 30, 60, .66); overflow-wrap: anywhere; }
.ora-tier-foot code { font-size: 12px; }
@media (max-width: 719px) { .ora-tier { grid-template-columns: 1fr; } }
/* THE HALT GATE: the paid tier as one file a builder inherits. The surface of a tier column, the example as a block that wraps rather than widens a phone, and two links a thumb can hit. */
.ora-gate { border: 1px solid var(--rule); border-left: 3px solid var(--signal, #c25c47); border-radius: 10px; padding: 14px 16px; margin: 12px 0 6px; min-width: 0; background: rgba(255, 255, 255, .35); }
.ora-gate .eyebrow { margin: 0 0 8px; }
.ora-gate .body { margin: 0 0 10px; font-size: 15px; }
.ora-gate .body code { font-size: 12.5px; padding: 1px 5px; border: 1px solid var(--line-1); border-radius: 5px; overflow-wrap: anywhere; }
.ora-gate-code { margin: 0 0 12px; max-width: 100%; white-space: pre-wrap; word-break: break-word; overflow-x: auto; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 12px; line-height: 1.45; padding: 12px 14px; border-radius: 10px; color: var(--ink); background: rgba(6, 21, 50, .04); border: 1px solid rgba(20, 40, 90, .18); }
.ora-gate-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ora-gate-links .btn { min-height: 40px; }
.ora-gate .ora-tier-foot { margin: 10px 0 0; }
@media (max-width: 719px) { .ora-gate-links .btn { flex: 1 1 140px; justify-content: center; } }
/* HALT WATCH: the board reuses the atlas's rows; these are its own pieces. Phone first: everything wraps, nothing widens the page. */
/* its hero carries a long measured sentence, so the caption flows under it instead of over it, and the light tail of
   the ground is kept below the text rather than behind its last lines */
#view-haltwatch .hero-income { padding-bottom: calc(var(--s6) + 72px); background: linear-gradient(180deg, #071a4d 0%, #0e3079 40%, #1d4794 74%, #3b68a9 90%, #bccbe3 97%, #f2f5fa 100%); }
#view-haltwatch .in-plate { min-height: 0; }
#view-haltwatch .in-plate .plate-cap { position: static; transform: none; display: block; margin: 14px auto 0; }
.hw-buckets { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: rgba(20, 30, 60, .78); }
.hw-b { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.hw-b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; align-self: center; background: rgba(20, 30, 60, .28); }
.hw-b b { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-weight: 600; color: var(--ink, #14203c); }
.hw-b-open::before { background: #4f8a6b; }
.hw-b-held::before { background: #c9922e; }
.hw-b-halted::before, .hw-b-paused::before { background: #c25c47; }
.hw-chip.hw-gated { border-color: #4f8a6b; color: #2f5f45; }
.hw-chip.hw-none, .hw-chip.hw-can-stop { border-color: rgba(194, 92, 71, .5); }
.hw-name { overflow-wrap: anywhere; }
.hw-census, .hw-rules { margin-top: 28px; }
.hw-cen { display: grid; gap: 6px; margin-top: 10px; }
.hw-cen-row { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 2fr); gap: 4px 14px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; min-width: 0; }
.hw-cen-name b { display: block; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 14px; overflow-wrap: anywhere; }
.hw-cen-name i { font-style: normal; font-size: 12.5px; color: rgba(20, 30, 60, .62); }
.hw-cen-n { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 15px; font-weight: 600; text-align: right; }
.hw-cen-toks { font-size: 13px; color: rgba(20, 30, 60, .78); overflow-wrap: anywhere; }
.hw-rule-list { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 8px 16px; margin: 10px 0; }
.hw-rule-list dt { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 30, 60, .6); padding-top: 3px; }
.hw-rule-list dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.hw-pool { border-top: 1px solid rgba(20, 40, 90, .12); padding-top: 12px; margin-top: 12px; min-width: 0; }
.hw-pool-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; }
.hw-pool-head b { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 15px; overflow-wrap: anywhere; }
.hw-pool-head span { font-size: 13px; color: rgba(20, 30, 60, .66); }
.hw-recent-cap { margin: 8px 0 2px; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 30, 60, .6); }
.hw-recent { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.hw-recent li { overflow-wrap: anywhere; }
.hw-recent a { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 28px; }
.hw-addr { overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 640px) {
  .hw-cen-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hw-cen-toks { grid-column: 1 / -1; }
  .hw-rule-list { grid-template-columns: 1fr; }
  .hw-rule-list dt { margin-top: 6px; }
}
.ora-open { border-left-color: #2f7a4d; }
.ora-held { border-left-color: #8a7a3a; }
.ora-stale { border-left-color: #c2843f; }
.ora-halted, .ora-paused { border-left-color: #c25c47; }
.ora-unknown { border-left-color: rgba(20, 30, 60, .35); }
@media (max-width: 719px) {
  .ora-row { grid-template-columns: 1fr 1fr; }
  .ora-sym { grid-column: 1 / -1; }
}

/* ---- the Hookr pool manager ----
   Phone first: every row a single column of sentences, the pool cards as
   choices with a thin bar for what each paid its liquidity, the deposit
   fields full width with a thumb-sized Max beside each, and long addresses
   and numbers wrapping instead of widening the page. */
#view-hookr .hero-income { padding-bottom: calc(var(--s6) + 72px); background: linear-gradient(180deg, #071a4d 0%, #0e3079 40%, #1d4794 74%, #3b68a9 90%, #bccbe3 97%, #f2f5fa 100%); }
#view-hookr .in-plate { min-height: 0; }
#view-hookr .in-plate .plate-cap { position: static; transform: none; display: block; margin: 14px auto 0; }
.hk-cost { font-size: 15px; }
.hk-pools { display: grid; gap: 8px; margin: 10px 0 6px; }
.hk-pool {
  display: grid; gap: 5px; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 10px; min-width: 0;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink); font: inherit; min-height: 48px;
  transition: border-color 140ms, background 140ms;
}
.hk-pool:hover:not([disabled]) { border-color: var(--signal-lo); }
.hk-pool[aria-checked="true"] { border-color: var(--signal-lo); background: rgba(var(--signal-rgb), 0.07); }
.hk-pool[disabled] { cursor: not-allowed; opacity: .62; }
.hk-pool-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.hk-pool-top strong { font-family: var(--mono); font-size: 15px; }
.hk-pool[aria-checked="true"] .hk-pool-top strong { color: var(--signal-lo); }
.hk-pool-name { font-size: 13px; color: var(--ink-dim); overflow-wrap: anywhere; }
.hk-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; border-radius: 999px; padding: 1px 8px; border: 1px solid rgba(var(--accent-rgb), 0.9); background: rgba(var(--accent-rgb), 0.16); white-space: nowrap; }
.hk-pool-price { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hk-pool-day { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.hk-pool small { color: var(--ink-dim); font-size: 12.5px; line-height: 1.45; }
.hk-bar { display: block; height: 4px; border-radius: 999px; background: var(--line-1); overflow: hidden; }
.hk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--signal-lo); }
.hk-connect-row { margin: 8px 0 12px; }
.hk-connect-row .cli-state { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; margin: 0; }
.hk-vault { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; margin: 10px 0; min-width: 0; }
.hk-vault-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.hk-vault-head strong { font-family: var(--mono); font-size: 15px; }
.hk-vault code, .hk-msg, #hk-wallet { overflow-wrap: anywhere; word-break: break-word; }
.hk-book { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.hk-book li { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; padding-left: 12px; border-left: 2px solid var(--line-2); }
.hk-book li b { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin-right: 4px; }
.hk-last { font-size: 13px; }
.hk-dep { display: grid; gap: 10px; margin: 12px 0 6px; }
.hk-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; min-width: 0; }
.hk-field > span { grid-column: 1 / -1; font-size: 13px; color: var(--ink-dim); }
.hk-field input {
  min-width: 0; width: 100%; background: transparent; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--mono); font-size: 16px; line-height: 1.4; padding: 10px 12px; border-radius: 6px; outline: none; min-height: 44px; box-sizing: border-box;
}
.hk-field input:focus { border-color: var(--signal-lo); }
.hk-field .hk-max { min-height: 44px; }
.hk-field small { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hk-acts { margin-top: 10px; }
.hk-acts .btn, .hk-dep .btn-solid, #hk-prepare, #hk-connect { min-height: 44px; }
.hk-cap { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 14px 12px; margin: 10px 0 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; min-width: 0; }
.hk-cap legend { font-size: 13px; color: var(--ink-dim); padding: 0 4px; }
.hk-cap label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.hk-cap input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid var(--line-2); background: transparent; cursor: pointer; }
.hk-cap input:checked { border-color: var(--signal-lo); background: radial-gradient(circle, var(--signal-lo) 0 42%, transparent 46%); }
.hk-cap input:focus-visible { outline: 2px solid var(--signal-lo); outline-offset: 2px; }
.hk-steps { margin: 10px 0; padding-left: 20px; display: grid; gap: 8px; }
.hk-steps li { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.hk-dl { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 10px 16px; margin: 10px 0; }
.hk-dl dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); padding-top: 3px; }
.hk-dl dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.hk-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 719px) {
  .hk-dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hk-dl dd { margin-bottom: 10px; }
  .hk-acts .btn { flex: 1 1 100%; }
  .hk-dep .cta-row .btn-solid, #hk-prepare, #hk-go { width: 100%; }
}

/* ---- THE WEEKEND MARK ------------------------------------------------
   The rows are the atlas's; the chips say running or final and how the grade
   went; the tables are two or three columns on a desk and stack into one on
   a phone, every long figure wrapping rather than widening the page. */
#view-weekend .in-plate { min-height: 0; }
#view-weekend .in-plate .plate-cap { position: static; transform: none; display: block; margin: 14px auto 0; }
.wm-final { border-color: #4f8a6b; color: #2f5f45; }
.wm-running { border-color: rgba(43, 108, 176, .45); color: rgba(20, 60, 120, .85); }
.wm-partial { border-color: rgba(150, 110, 30, .5); color: #6b4f12; }
.wm-near { border-color: #4f8a6b; color: #2f5f45; }
.wm-far { border-color: rgba(194, 92, 71, .5); color: rgba(150, 60, 40, .9); }
.wm-list, .wm-pools { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.wm-list li, .wm-pools li { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; font-size: 14px; }
.wm-list small, .wm-pools small { display: block; color: rgba(20, 30, 60, .65); font-size: 12.5px; }
.wm-pools li.wm-off { opacity: .62; }
.wm-pools code { font-size: 12px; }
.wm-table { display: grid; gap: 0; margin: 8px 0 14px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.wm-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.4; }
.wm-tr:first-child { border-top: 0; }
.wm-tr > span { min-width: 0; overflow-wrap: anywhere; }
.wm-th { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(20, 30, 60, .6); background: rgba(6, 21, 50, .03); }
.wm-code { margin: 0 0 12px; max-width: 100%; white-space: pre-wrap; word-break: break-word; overflow-x: auto; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 12px; line-height: 1.45; padding: 12px 14px; border-radius: 10px; color: var(--ink); background: rgba(6, 21, 50, .04); border: 1px solid rgba(20, 40, 90, .18); }
.wm-rule-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.wm-rule-list li { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .wm-tr { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wm-th { display: none; }
  .wm-tr > span:first-child { font-weight: 600; }
}

/* THE SOLANA DESK, on the trading page: phone first, every row stacks and every long figure wraps */
#soldesk .panel { margin-top: var(--s3); }
#soldesk .sd-words { margin: 12px 0 0; overflow-wrap: anywhere; }
#soldesk .at-row { background: rgba(255, 255, 255, .5); }
.sd-up { color: #1d7a4c; }
.sd-down { color: #b4442f; }
.sd-grades { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 8px 16px; margin: 4px 0 14px; }
.sd-grades dt { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 30, 60, .6); padding-top: 3px; }
.sd-grades dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.sd-be { display: grid; gap: 6px; }
.sd-be-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: baseline; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 13px; border-bottom: 1px solid rgba(20, 40, 90, .1); padding: 6px 0; }
.sd-be-row b { font-weight: 600; }
.sd-ask { margin-top: var(--s3); }
/* the three books: side by side on a desktop, one under another on a phone and a narrow tablet */
.sd-books { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sd-book { min-width: 0; border: 1px solid rgba(20, 40, 90, .14); border-radius: 10px; padding: 12px 14px; background: rgba(255, 255, 255, .5); }
.sd-book[data-book="live"] { border-left: 3px solid #f0937f; }
.sd-book h4 { margin: 0; font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.sd-book p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: rgba(20, 30, 60, .66); overflow-wrap: anywhere; }
.sd-book .ag-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; }
.sd-book .ag-kv strong { overflow-wrap: anywhere; }
#soldesk .sd-books-note { margin: 12px 0 0; }
.at-chip.sd-book-chip { border-color: rgba(240, 147, 127, .8); }
@media (max-width: 900px) {
  .sd-books { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sd-grades { grid-template-columns: 1fr; }
  .sd-grades dt { margin-top: 6px; }
  .sd-be-row { grid-template-columns: 44px minmax(0, 1fr); font-size: 12.5px; }
  .sd-be-row span:last-child { grid-column: 2; }
}

/* THE FUND TOKEN BOARD (rebuilt 9 Oct 2026). The hero leads with what is true and a live clock to the next NAV
   strike; one chart sets each fund token's price against its NAV on one trading day; the board is one white table
   with the three dated prices and the gap up front and the rest a tap away. Phone first: below 900px each row is a
   card with the gap in its head, below 640px the prices stack into labelled lines, every figure and address wraps,
   and nothing widens the page. The chart's colours are the house's own coral and royal blue, checked with the
   palette validator on the white card (premium #e0765d, discount #2b6cb0: both past 3:1, CVD distance 18.5) and, for
   the keys in the dark tooltip, stepped for its navy (premium #dc6a50, discount #4a8fe0: in the dark band, CVD 21.0).
   The tokens are declared on the fund block of a token's atlas page too, which lives outside #view-funds, so its
   verdict chips draw the same borders and tints as the tab's. */
#view-funds, .fd-atlas {
  --fd-premium: #e0765d; --fd-discount: #2b6cb0; --fd-zero: #8d98ad;
  --fd-line: #e3e8f1; --fd-line-2: #d2dae7; --fd-soft: #6b7385; --fd-wash: #f8fafd;
  --fd-shadow: 0 1px 2px rgba(16, 35, 80, .04), 0 22px 44px -28px rgba(16, 35, 80, .22);
}
#view-funds .cli-install .btn { min-height: 44px; }

/* the hero: the headline and its one line on the left, the plate of true numbers on the right */
#view-funds .fd-hero { padding: 120px 0 84px; background: linear-gradient(180deg, #071a4d 0%, #0e3079 38%, #1d4794 70%, #3b68a9 86%, #a9bcda 95%, #f2f5fa 100%); }
.fd-hero-grid { display: grid; gap: 26px; grid-template-areas: "text" "plate" "cta"; }
.fd-hero-text { grid-area: text; min-width: 0; }
.fd-plate { grid-area: plate; min-width: 0; }
.fd-hero-cta { grid-area: cta; }
.fd-hero h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.014em; max-width: 19ch; text-wrap: balance; }
.fd-hero .lede { font-size: 19.5px; line-height: 1.5; color: #d6e2f4; margin: 20px 0 0; max-width: 36ch; }
#view-funds .fd-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }
#view-funds .fd-hero-cta .btn { justify-self: auto; justify-content: center; }
@media (min-width: 641px) and (max-width: 959px) { .fd-tile-v { font-size: 38px; } }
@media (min-width: 960px) {
  .fd-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "text plate" "cta plate"; column-gap: 72px; row-gap: 34px; align-items: end; }
  .fd-hero-cta { align-self: start; }
  /* a board that did not read leaves the plate one sentence long: the hero goes to one column so nothing sits empty */
  .fd-hero-grid:has(.fd-plate[data-state="down"]) { grid-template-columns: minmax(0, 760px); grid-template-areas: "text" "plate" "cta"; row-gap: 28px; }
}

.fd-plate { position: relative; border-radius: 16px; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, rgba(10, 32, 92, .72), rgba(6, 21, 63, .58));
  border: 1px solid rgba(143, 180, 221, .3);
  box-shadow: 0 40px 80px -40px rgba(3, 9, 30, .75), inset 0 1px 0 rgba(255, 255, 255, .07); }
.fd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
.fd-tiles:empty { display: none; }
.fd-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px 26px 22px; border-top: 1px solid rgba(143, 180, 221, .18); }
/* the label, the figure and its line sit on one baseline across a row of tiles, however a label wraps */
@supports (grid-template-rows: subgrid) { .fd-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 8px; align-content: start; } }
.fd-tile:nth-child(-n+2) { border-top: 0; }
.fd-tile:nth-child(2n) { border-left: 1px solid rgba(143, 180, 221, .18); }
.fd-tiles[data-n="1"] .fd-tile, .fd-tiles[data-n="3"] .fd-tile:last-child { grid-column: 1 / -1; border-left: 0; }
.fd-tiles[data-n="3"] .fd-tile:last-child { border-top: 1px solid rgba(143, 180, 221, .18); }
.fd-tile-k { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9dbbe0; }
/* the figure scales with the plate, so an eight-character clock always fits its tile */
.fd-tile-v { font: 400 clamp(28px, 2.9vw, 38px)/1 var(--mono); letter-spacing: -0.035em; color: #ffffff; white-space: nowrap; }
.fd-tile-v small { font-size: 15px; letter-spacing: 0; color: #b9c8e4; margin-left: 6px; }
.fd-tile-s { font: 400 16.5px/1.35 var(--display); color: #d6e2f4; overflow-wrap: anywhere; text-wrap: balance; }
.fd-tile[data-live] .fd-tile-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f0937f; box-shadow: 0 0 0 0 rgba(240, 147, 127, .5); animation: fd-live 2.4s var(--ease-out) infinite; }
.fd-tile[data-live] .fd-tile-v { font-variant-numeric: tabular-nums; }
@keyframes fd-live { 0% { box-shadow: 0 0 0 0 rgba(240, 147, 127, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(240, 147, 127, 0); } }
@media (prefers-reduced-motion: reduce) { .fd-tile[data-live] .fd-tile-k::before { animation: none; } }
.fd-plate-cap { margin: 0; padding: 13px 26px 14px; border-top: 1px solid rgba(143, 180, 221, .18); font: 400 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #9dbbe0; overflow-wrap: anywhere; }
.fd-plate[data-state="down"] .fd-plate-cap { border-top: 0; padding: 26px; font: 400 19px/1.5 var(--display); letter-spacing: 0; text-transform: none; color: #eef4ff; }
.fd-plate[data-state="loading"] .fd-plate-cap { border-top: 0; }

/* the sections under the hero sit close: the chart straight under the plate, the board straight under the chart */
#view-funds .fd-sect { padding: 72px 0; }
#view-funds .fd-sect-chart { padding: 0 0 36px; border-top: 0; }
#view-funds .fd-sect-board { padding-top: 36px; border-top: 0; }
#view-funds .fd-sect .eyebrow { flex-wrap: wrap; row-gap: 6px; }

/* THE CHART: a white card, the plot drawn by the script at the card's real width */
.fd-chart { margin: 0; min-width: 0; background: #ffffff; border: 1px solid var(--fd-line); border-radius: 16px; padding: 24px 28px 18px; box-shadow: var(--fd-shadow); }
.fd-chart[data-state="down"] { display: none; }
.fd-chart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--fd-line); }
.fd-chart-title { min-width: 0; }
.fd-chart-title b { display: block; font: 500 28px/1.1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.fd-chart-title i { display: block; margin-top: 6px; font: 400 11px/1.5 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--fd-soft); }
.fd-legend { display: flex; gap: 20px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.fd-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.fd-sw { display: inline-block; width: 14px; height: 10px; border-radius: 0 3px 3px 0; background: var(--fd-premium); }
.fd-sw[data-side="discount"] { background: var(--fd-discount); border-radius: 3px 0 0 3px; }
.fd-chart[data-state="empty"] .fd-legend, .fd-chart[data-state="empty"] .fd-plot { display: none; }
.fd-plot { position: relative; min-width: 0; }
.fd-svg { display: block; overflow: visible; -webkit-tap-highlight-color: transparent; }
.fd-svg text { font-family: var(--mono); font-size: 12px; fill: var(--ink); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; }
.fd-svg .fd-t-sym { font-weight: 600; letter-spacing: .02em; }
.fd-svg .fd-t-val { fill: #3a4663; font-variant-numeric: tabular-nums; }
.fd-svg .fd-t-tick, .fd-svg .fd-t-unit { font-size: 11px; fill: var(--fd-soft); stroke-width: 0; font-variant-numeric: tabular-nums; }
.fd-bar-g { cursor: pointer; outline: none; }
.fd-bar-g .fd-mark { transition: opacity .18s var(--ease-out); }
.fd-bar-g[data-on="true"] .fd-band { fill: rgba(43, 108, 176, .07); }
.fd-bar-g:focus-visible .fd-band { stroke: var(--fd-discount); stroke-width: 1.5px; }
.fd-plot[data-hover="true"] .fd-bar-g:not([data-on="true"]) .fd-mark { opacity: .4; }
.fd-tip { position: absolute; z-index: 4; width: max-content; max-width: min(340px, 100%); padding: 13px 15px 12px; border-radius: 12px; background: #0b1d4c; color: #eaf1fc; box-shadow: 0 22px 44px -16px rgba(6, 21, 63, .55); pointer-events: none; font: 400 11.5px/1.45 var(--mono); }
.fd-tip p { margin: 0; }
.fd-tip-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 8px !important; border-bottom: 1px solid rgba(143, 180, 221, .22); }
.fd-tip-h b { font: 600 13px/1.2 var(--mono); letter-spacing: .03em; color: #ffffff; }
.fd-tip-h span { font: 400 14.5px/1.25 var(--display); color: #b9c8e4; overflow-wrap: anywhere; }
.fd-tip-gap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-tip-gap i { width: 11px; height: 9px; flex: none; border-radius: 0 3px 3px 0; background: #dc6a50; }
.fd-tip-gap[data-side="discount"] i { background: #4a8fe0; border-radius: 3px 0 0 3px; }
.fd-tip-gap[data-side="at"] i { width: 3px; background: #b9c8e4; }
.fd-tip-gap b { font: 500 17px/1.2 var(--mono); color: #ffffff; }
.fd-tip-gap span { color: #b9c8e4; }
.fd-tip-in { margin-top: 4px !important; color: #9dbbe0; }
.fd-tip-note { margin-top: 6px !important; color: #c9d7ee; overflow-wrap: anywhere; }
.fd-tip-px { display: grid; grid-template-columns: auto auto auto; gap: 4px 10px; align-items: baseline; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(143, 180, 221, .22); white-space: nowrap; }
.fd-tip-px b { font-weight: 500; color: #ffffff; text-align: right; font-variant-numeric: tabular-nums; }
.fd-tip-px span { color: #9dbbe0; }
.fd-tip-px span:nth-child(3n) { text-align: right; }
.fd-quiet { margin: 16px 0 0; font: 400 16px/1.55 var(--display); color: var(--ink-dim); overflow-wrap: anywhere; }
.fd-quiet:empty { display: none; }
.fd-quiet .fd-syms b { font: 600 12px/1 var(--mono); letter-spacing: .03em; color: var(--ink); }
.fd-chart-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--fd-line); font: 400 11px/1.6 var(--mono); letter-spacing: .02em; color: var(--fd-soft); }

/* THE BOARD: one white table; on a desk the column heads sit once above the rows */
.fd-board { min-width: 0; background: #ffffff; border: 1px solid var(--fd-line); border-radius: 16px; box-shadow: var(--fd-shadow); overflow: hidden; }
.fd-board[data-state="down"], .fd-board[data-state="empty"] { background: none; border: 0; box-shadow: none; overflow: visible; }
.fd-cols { display: none; }
.fd-row { min-width: 0; border-top: 1px solid var(--fd-line); scroll-margin-top: 84px; }
.fd-board > .fd-row:first-child, .fd-cols + .fd-row { border-top: 0; }
.fd-sum { box-sizing: border-box; display: grid; width: 100%; min-height: 44px; margin: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s var(--ease-out); }
button.fd-sum:hover { background: var(--fd-wash); }
.fd-sum:focus-visible { outline: 2px solid var(--fd-discount); outline-offset: -2px; border-radius: 4px; }
.fd-sum-still { cursor: auto; }
.fd-row[data-open="true"] { background: var(--fd-wash); }
.fd-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; min-width: 0; }
.fd-sym { font: 600 15px/1.25 var(--mono); letter-spacing: .03em; color: var(--ink); }
.fd-tracks { font: 400 11px/1.3 var(--mono); color: var(--fd-soft); }
.fd-name { flex-basis: 100%; font: 400 16.5px/1.3 var(--display); color: var(--ink-dim); overflow-wrap: anywhere; }
.fd-tags { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fd-tag, .fd-v { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 999px; border: 1px solid var(--fd-line-2); color: var(--ink-dim); background: #ffffff; white-space: nowrap; }
.fd-tag[data-tone="bad"] { border-color: rgba(194, 72, 48, .42); color: #a03d29; background: #fdf3f0; }
.fd-tag[data-tone="warn"], .fd-v-no-step-yet, .fd-v-split, .fd-v-anomaly, .fd-v-stepped-late { border-color: rgba(176, 116, 0, .42); color: #7f5300; background: #fdf7ea; }
.fd-tag[data-tone="new"] { border-color: rgba(43, 108, 176, .38); color: #1f4f86; background: #f1f6fc; }
.fd-v-landed { border-color: rgba(47, 112, 78, .4); color: #2f6a4c; background: #f1f8f4; }
.fd-prices { min-width: 0; }
.fd-cell, .fd-gap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fd-cell i, .fd-gap i { font: 500 9.5px/1.3 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--fd-soft); }
.fd-cell b { font: 500 15px/1.3 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fd-cell small, .fd-gap small { font: 400 11.5px/1.4 var(--mono); color: var(--fd-soft); overflow-wrap: anywhere; }
.fd-cell[data-none="true"] b { font: italic 400 16px/1.3 var(--display); color: var(--fd-soft); }
.fd-cell small em { display: block; font-style: normal; }
.fd-cell[data-span="2"] { grid-column: span 2; }
.fd-cell-text b { font: 400 16.5px/1.3 var(--display); }
.fd-gap b { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1.3 var(--mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fd-gap b.fd-soft { font: italic 400 15.5px/1.3 var(--display); color: var(--fd-soft); white-space: normal; }
/* the key beside a gap is the chart's own mark in small, square at the zero line and rounded at its tip, the same as
   the legend: a block, never read as a minus sign */
.fd-key { width: 11px; height: 9px; flex: none; border-radius: 0 3px 3px 0; background: var(--fd-zero); }
.fd-gap[data-side="premium"] .fd-key { background: var(--fd-premium); }
.fd-gap[data-side="discount"] .fd-key { background: var(--fd-discount); border-radius: 3px 0 0 3px; }
.fd-gap[data-side="at"] .fd-key { width: 3px; border-radius: 1px; }
.fd-chev { width: 8px; height: 8px; border-right: 1.5px solid #8d98ad; border-bottom: 1.5px solid #8d98ad; transform: rotate(45deg); justify-self: end; margin-top: -5px; transition: transform .22s var(--ease-out); }
.fd-row[data-open="true"] .fd-chev { transform: rotate(-135deg); margin-top: 5px; }
.fd-sum-still .fd-chev { display: none; }
@media (min-width: 900px) {
  .fd-cols, .fd-sum { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 10.5rem) 16px; column-gap: 28px; align-items: center; padding: 16px 24px; }
  .fd-cols { padding-top: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--fd-line); background: #fbfcfe; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fd-soft); }
  .fd-cols .fd-prices, .fd-sum .fd-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .fd-cols > span:nth-child(3), .fd-gaps { text-align: right; }
  .fd-gap { align-items: flex-end; }
  .fd-cell i, .fd-gap i { display: none; }
}
/* below a desk: each row is a card, the gap in its head, the three prices side by side under a hairline */
@media (max-width: 899px) {
  .fd-sum { grid-template-columns: minmax(0, 1fr) auto 14px; grid-template-areas: "id gap chev" "prices prices prices"; gap: 14px 14px; padding: 16px 18px 16px; }
  .fd-id { grid-area: id; } .fd-gaps { grid-area: gap; } .fd-chev { grid-area: chev; align-self: start; margin-top: 8px; }
  .fd-gap { align-items: flex-end; text-align: right; }
  .fd-gaps-empty { display: none; }
  .fd-sum .fd-prices { grid-area: prices; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--fd-line); }
}

/* the opened row: short facts on a light grid, three across on a desk */
.fd-open { display: none; padding: 0 24px 20px; }
.fd-row[data-open="true"] .fd-open { display: block; }
.fd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px 32px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--fd-line); }
.fd-fact { min-width: 0; }
.fd-fact[data-wide="true"] { grid-column: 1 / -1; }
.fd-facts dt { margin: 0 0 6px; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fd-soft); }
.fd-facts dd { margin: 0; font: 400 16.5px/1.5 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.fd-facts dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22, 35, 63, .3); }
.fd-fig { font: 600 14.5px/1.3 var(--mono); color: var(--ink); margin-right: 2px; font-variant-numeric: tabular-nums; }
.fd-soft { color: var(--fd-soft); }
.fd-bad { color: #a03d29; }
.fd-small { display: block; margin: 6px 0 0; font: 400 14px/1.5 var(--display); color: var(--fd-soft); overflow-wrap: anywhere; }
.fd-p { display: block; margin: 8px 0 0; }
.fd-cover { display: grid; gap: 6px; max-width: 440px; margin: 2px 0 0; }
.fd-bar { position: relative; display: block; height: 8px; border-radius: 999px; overflow: hidden; background: #e9eef6; }
.fd-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--fd-discount); }
.fd-bar-cap { font: 400 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--fd-soft); }
.fd-names { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 12px/1.5 var(--mono); color: var(--fd-soft); }
.fd-names li { white-space: nowrap; }
.fd-names b { font-weight: 600; color: var(--ink); margin-right: 2px; }
.fd-names .fd-mv { color: var(--ink); }
.fd-dist, .fd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-dist li, .fd-list li { line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.fd-dist .fd-v { margin-right: 6px; vertical-align: 2px; }
.fd-list li > b { font: 500 12px/1.4 var(--mono); color: var(--ink); margin-right: 4px; }
.fd-addr { overflow-wrap: anywhere; word-break: break-all; font-size: 12.5px; }
.fd-row .at-links a, .fd-focus .at-links a, .fd-atlas .at-links a { min-height: 44px; display: inline-flex; align-items: center; }
.fd-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 10px 0 0; }
.fd-links a { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); text-decoration: none; border-bottom: 0; }
.fd-links a:hover { color: var(--signal-lo); }
@media (max-width: 899px) {
  .fd-open { padding: 0 18px 18px; }
  .fd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* one fund at the top, and the states said as sentences */
#fd-focus { scroll-margin-top: 84px; }
.fd-focus { margin: 0 0 28px; min-width: 0; }
.fd-focus-words { margin: -6px 0 16px; font: 400 18px/1.55 var(--display); color: var(--ink-dim); max-width: 70ch; overflow-wrap: anywhere; }
.fd-board-focus { border-left: 3px solid var(--signal); }
.fd-state { margin: 0; padding: 20px 22px; border: 1px dashed var(--fd-line-2); border-radius: 14px; background: rgba(255, 255, 255, .6); font: 400 18px/1.55 var(--display); color: var(--ink-dim); overflow-wrap: anywhere; }
.fd-intro { margin: -6px 0 20px; font: 400 18px/1.55 var(--display); color: var(--ink-dim); max-width: 62ch; overflow-wrap: anywhere; }

/* the sponsor funds the board also reads */
.fd-watching { margin-top: 64px; }
.fd-watching:empty { display: none; }
.fd-more { margin-top: 14px; min-height: 44px; }

/* the listing watch */
.fd-lw-stats { margin: 0 0 10px; gap: 10px; }
.fd-lw-stats .wl-stat { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--fd-line); background: #ffffff; color: var(--ink-dim); font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: normal; box-shadow: 0 1px 2px rgba(16, 35, 80, .04); }
.fd-lw-stats .wl-stat strong { font: 500 20px/1 var(--mono); letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
.fd-lw-words { margin: 0 0 18px; }
.fd-lw-card { margin: 0 0 14px; padding: 6px 22px 10px; background: #ffffff; border: 1px solid var(--fd-line); border-radius: 16px; box-shadow: var(--fd-shadow); min-width: 0; }
.fd-lw-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--fd-line); }
.fd-lw-h span { font: 500 22px/1.2 var(--display); color: var(--ink); }
.fd-lw-h small { font: 400 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fd-soft); }
.fd-lw-list { list-style: none; margin: 0; padding: 0; }
.fd-lw-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--fd-line); min-width: 0; }
.fd-lw-list li:first-child { border-top: 0; }
.fd-lw-list li > b { font: 600 14px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink); }
.fd-lw-list li > small { font: 400 11.5px/1.3 var(--mono); color: var(--fd-soft); overflow-wrap: anywhere; }
.fd-lw-list .fd-ev-words { flex-basis: 100%; font: 400 16px/1.5 var(--display); color: var(--ink-dim); overflow-wrap: anywhere; }
.fd-lw-since { margin-top: 12px; }

/* how it learns, and how it is checked: the board's own record on the house scorebook, and the Lean 4 line */
.fd-learn-recent { margin: 14px 0 0; }
.fd-learn-stats .wl-stat strong { white-space: nowrap; }
.fd-learn-recent .fd-lw-list li > b { white-space: nowrap; }
.fd-lean { margin: 18px 0 0; max-width: 70ch; font: 400 17px/1.6 var(--display); color: var(--ink-dim); overflow-wrap: anywhere; }
.fd-lean span { display: block; }
.fd-lean span + span { margin-top: 4px; }
.fd-lean a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22, 35, 63, .3); }
@media (max-width: 640px) {
  /* compact on a phone: the latest two settled, the record's chips a size smaller, and the sentence that repeats the
     chips hidden whenever the chips are shown */
  .fd-learn-recent .fd-lw-list li:nth-child(n+3) { display: none; }
  .fd-learn-stats:not(:empty) + .fd-learn-words { display: none; }
  .fd-learn-stats.fd-lw-stats .wl-stat { padding: 8px 12px; }
  .fd-learn-stats.fd-lw-stats .wl-stat strong { font-size: 17px; }
  .fd-lean { font-size: 16px; }
}

/* how the board reads */
.fd-how { max-width: 70ch; margin: 0 0 26px; }
.fd-how p { margin: 0 0 14px; font: 400 18.5px/1.6 var(--display); color: var(--ink-dim); }
.fd-bank { max-width: 80ch; margin-top: 18px; }
.fd-ask { margin: 18px 0 0; font: 400 17px/1.6 var(--display); color: var(--ink-dim); overflow-wrap: anywhere; }
.fd-ask code { font: 500 13px/1 var(--mono); color: var(--signal-lo); }
#fd-use dd a, #fd-ahead dd a, #fd-learn .fd-intro a, .fd-ask a, .fd-small a, .fd-state a, .fd-quiet a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(22, 35, 63, .3); }

/* the fund block on a token's atlas page */
.fd-sub { margin-top: 18px; }
.fd-none { color: rgba(20, 30, 60, .74); }
.fd-atlas { margin-top: 14px; border-top: 1px solid rgba(20, 40, 90, .12); padding-top: 10px; }
.fd-atlas dl { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 6px 14px; margin: 8px 0; }
.fd-atlas dt { font-family: var(--mono, "DejaVu Sans Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(20, 30, 60, .6); }
.fd-atlas dd { margin: 0; overflow-wrap: anywhere; line-height: 1.45; min-width: 0; }
.fd-atlas .fd-dist .at-chip { margin-right: 4px; }

@media (max-width: 640px) {
  #view-funds .fd-hero { padding: 104px 0 96px; }
  .fd-hero h2 { font-size: 38px; max-width: none; }
  .fd-hero .lede { font-size: 18px; margin-top: 16px; }
  .fd-tile { padding: 18px 16px 16px; gap: 6px; }
  .fd-tile-v { font-size: clamp(22px, 7.4vw, 30px); letter-spacing: -0.04em; }
  .fd-tile-v small { font-size: 13px; margin-left: 3px; }
  .fd-tile-s { font-size: 15px; }
  .fd-plate-cap { padding: 12px 16px; }
  #view-funds .fd-hero-cta .btn { flex: 1 1 100%; }
  #view-funds .fd-sect { padding: 56px 0; }
  #view-funds .fd-sect-chart { padding: 0 0 28px; }
  #view-funds .fd-sect-board { padding-top: 28px; }
  .fd-chart { padding: 18px 16px 14px; border-radius: 14px; }
  .fd-chart-title b { font-size: 24px; }
  .fd-board, .fd-lw-card { border-radius: 14px; }
  .fd-sum { padding: 16px 16px 14px; gap: 12px 10px; }
  /* each price becomes one labelled line: the label, the figure, and its date at the right */
  .fd-prices, .fd-gaps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fd-sum .fd-prices { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 6px; }
  .fd-cell { display: grid; grid-template-columns: 7.5rem max-content minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid #eef1f6; }
  .fd-cell:first-child { border-top: 0; }
  .fd-cell small { text-align: right; }
  .fd-cell[data-span="2"] { grid-column: auto; }
  .fd-cell-text small { grid-column: 2 / -1; text-align: left; }
  #view-funds .fd-sect .eyebrow .rule { display: none; }
  #view-funds .fd-sect .eyebrow > span:last-child { flex-basis: 100%; }
  .fd-cell[data-none="true"] b { font-size: 15px; }
  .fd-open { padding: 0 16px 16px; }
  .fd-facts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fd-facts dd { font-size: 16px; }
  .fd-addr { font-size: 11.5px; }
  .fd-names { gap: 4px 14px; }
  .fd-more { width: 100%; justify-content: center; }
  .fd-lw-card { padding: 4px 16px 8px; }
  .fd-atlas dl { grid-template-columns: 1fr; }
  .fd-atlas dt { margin-top: 6px; }
}
/* the narrowest phones: the four true numbers keep two across, smaller, so the clock is never cut */
@media (max-width: 360px) {
  .fd-tile { padding: 16px 14px 14px; }
  .fd-tile-k { font-size: 9.5px; letter-spacing: .1em; }
  .fd-tile-v small { font-size: 12px; margin-left: 2px; }
  .fd-tile-s { font-size: 14.5px; }
  .fd-cell { grid-template-columns: 6.4rem max-content minmax(0, 1fr); column-gap: 8px; }
  .fd-cell i { font-size: 9px; letter-spacing: .1em; }
}