/* fonts.css */
/* Self-hosted (OFL-1.1; the licence ships next to the files in /fonts). Latin subsets.
   Three families, each with one job, as the reference uses them:
   Instrument Serif is the accent word inside a headline, Schibsted Grotesk is what you read,
   Geist Mono is every label, chip, button and number. */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-latin-400italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/SchibstedGrotesk-latin-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-latin-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* tokens.css */
/* Design tokens, measured from the reference the owner chose (2026-09-23, 1440px, full page):
   a paper-grey ground with near-black ink, three families each with exactly one job, one red accent,
   hairline rings instead of shadows, and gradient panels for anything pictorial.

   Measured values used verbatim: ground #EEEEEE (96.9% of the reference's pixels), ink #0D0D0D,
   secondary #5E5E5E, accent #E10909 with #E73A3A as its lit state, per-panel accents #1083FA and
   #AD6E00; radii 6 / 8 / 24 / 50; rings rgba(186,186,186,.3) 0 0 0 1px and #0D0D0D 0 0 0 1px;
   container 1320 with a 960 media column; section padding 100/60 and 72/72; type 44/56, 24/32,
   18/26, 16/24, 14/20 with the display wordmark at 304 and its clamps 172 (810vw) and 83 (390vw).

   The legacy aliases at the end keep the older page stylesheets on this palette. */
:root {
  color-scheme: light;

  /* grounds */
  --mx-bg-page: #eeeeee;        /* the paper ground: every page, every band */
  --mx-bg-band: #eeeeee;
  --mx-bg-card: #ffffff;        /* raised cards on the paper */
  --mx-surface: #ffffff;
  --mx-bg-sunken: #e6e6e6;      /* wells: code, tables, the split control */
  --mx-bg-ink: #0d0d0d;         /* solid dark panels and the solid button */
  --mx-pixel-light: #e1e1e1;    /* ornaments, checker strips, hairline fills */
  --mx-app-card: #ffffff;
  --mx-app-line: rgba(13, 13, 13, .12);

  /* ink */
  --mx-ink: #0d0d0d;
  --mx-ink-strong: #000000;
  --mx-ink-75: rgba(13, 13, 13, .75);
  --mx-on-dark: #ffffff;
  --mx-on-dark-soft: #f4f4f4;
  --mx-mute: #5e5e5e;           /* secondary text, on paper */
  --mx-mute-band: #5e5e5e;
  --mx-accent: #e10909;         /* the one accent: mono labels, dots, links */
  --mx-accent-lit: #e73a3a;     /* its hover / active state */
  --mx-accent-blue: #1083fa;
  --mx-accent-amber: #ad6e00;

  /* line art: the reference draws its hero object in 1px strokes on a light grey ramp, measured
     #C6C6C6 at its darkest and #E4E4E4 at its lightest, with dashed leaders painting at #D3D3D3. */
  --mx-art: #c6c6c6;
  --mx-art-soft: #dcdcdc;
  --mx-art-lead: #d3d3d3;

  /* lines, rings, panels — the reference has no soft shadows, only hairline rings */
  --mx-hair: rgba(13, 13, 13, .12);
  --mx-dash: rgba(13, 13, 13, .28);
  --mx-rim: 1px solid rgba(13, 13, 13, .12);
  --mx-ring: rgba(186, 186, 186, .3) 0 0 0 1px;
  --mx-ring-ink: #0d0d0d 0 0 0 1px;
  --mx-glow: none;
  --mx-shadow-btn: var(--mx-ring);
  --mx-shadow-off: 0 0 0 0 rgba(0, 0, 0, 0);
  --mx-panel-red: linear-gradient(0deg, rgba(124, 5, 5, .5), rgb(138, 0, 0));
  --mx-panel-blue: linear-gradient(0deg, rgba(0, 86, 174, .5), rgb(0, 86, 174));
  --mx-panel-amber: linear-gradient(0deg, rgba(153, 110, 40, .7), rgb(153, 110, 40));
  --mx-panel-ink: linear-gradient(0deg, rgb(106, 106, 106) 0%, rgb(13, 13, 13) 100%);

  /* type: serif for the accent word, grotesk for everything you read, mono for every label */
  --mx-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mx-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mx-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mx-pixel: var(--mx-mono);   /* the old pixel role folds into mono */
  --mx-fs-display: clamp(34px, 2.2vw + 22px, 44px);   /* the reference's headline is 44/56 at 1440 */
  --mx-fs-h2: clamp(30px, 1.2vw + 22px, 44px);
  --mx-fs-h3: 24px;
  --mx-fs-step: 18px;
  --mx-fs-title: 18px;
  --mx-fs-body: 16px;
  --mx-fs-nav: 16px;
  --mx-fs-small: 14px;
  --mx-fs-micro: 14px;
  --mx-lh: 1.27;                /* 56/44 */
  --mx-wordmark: clamp(83px, 21vw, 304px);

  /* spacing */
  --mx-max: 1320px;
  --mx-media: 960px;
  --mx-gutter: 60px;
  --mx-nav-h: 84px;
  --mx-section-top: 72px;
  --mx-gap-h: 10px;
  --mx-gap-stack: 18px;
  --mx-gap-group: 36px;
  --mx-gap-cards: 72px;
  --mx-gap-cols: 60px;
  --mx-gap-grid: 16px;
  --mx-panel-pad: 40px;
  --mx-footer-top: 72px;

  /* controls */
  --mx-btn-h: 44px;
  --mx-btn-px: 20px;
  --mx-r-0: 0;
  --mx-r-card: 24px;
  --mx-r-app: 8px;
  --mx-r-ctl: 6px;
  --mx-r-pill: 50px;
  --mx-step: 200px;
  --mx-chip-h: 32px;
  --mx-cell-lg: 48px;
  --mx-cell-md: 36px;
  --mx-cell-sm: 12px;

  /* motion */
  --mx-t-dissolve: 600ms;
  --mx-t-fill: 160ms;

  /* legacy aliases used by the page stylesheets and the client modules' markup */
  --bg: var(--mx-bg-page);
  --panel: var(--mx-bg-card);
  --panel-2: #ffffff;
  --panel-3: var(--mx-bg-sunken);
  --rule: rgba(13, 13, 13, .12);
  --rule-strong: rgba(13, 13, 13, .28);
  --fg: var(--mx-ink);
  --fg-soft: #2b2b2b;
  --fg-mute: var(--mx-mute);
  --up: #0d0d0d;
  --up-ink: #ffffff;
  --up-dim: #e6e6e6;
  --up-line: rgba(13, 13, 13, .28);
  --down: var(--mx-accent);
  --down-dim: #f7e2e2;
  --amber: var(--mx-accent-amber);
  --amber-dim: #f3ead8;

  --sans: var(--mx-sans);
  --mono: var(--mx-mono);
  --fs-micro: 14px;
  --fs-nav: 16px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h3: 18px;
  --fs-h2: var(--mx-fs-h2);
  --fs-h1: var(--mx-fs-display);
  --fs-num: clamp(22px, 2.2vw, 28px);

  --r-s: var(--mx-r-ctl);
  --r-m: var(--mx-r-app);
  --r-l: var(--mx-r-card);
  --gap: 16px;
  --col: var(--mx-max);
  --gutter: var(--mx-gutter);
  --header-h: var(--mx-nav-h);
}
@media (max-width: 1024px) { :root { --mx-gutter: 32px; } }
@media (max-width: 420px) { :root { --mx-gutter: 16px; } }

/* The vault surface is the same paper: what changes is that every number is mono. */
body.app {
  --bg: var(--mx-bg-page);
  --panel: var(--mx-bg-card);
  --panel-2: #ffffff;
  --panel-3: var(--mx-bg-sunken);
  --rule: var(--mx-app-line);
  --rule-strong: rgba(13, 13, 13, .28);
  --fg-mute: var(--mx-mute);
  --fg-soft: #2b2b2b;
  --up-dim: #e6e6e6;
  --down-dim: #f7e2e2;
  --amber-dim: #f3ead8;
  --sans: var(--mx-sans);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 14px;
}

/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mx-nav-h) + 12px); background: var(--mx-bg-page); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 var(--fs-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--mx-ink); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
/* Headlines are the grotesk; the serif is the ACCENT word inside them (.serif), never the whole line. */
h1, h2, h3 { font-family: var(--mx-sans); font-weight: 400; letter-spacing: -0.01em; line-height: var(--mx-lh); }
.serif { font-family: var(--mx-serif); font-weight: 400; font-style: italic; letter-spacing: 0; font-size: 1.06em; }
.pixel { font-family: var(--mx-mono); font-weight: 400; letter-spacing: normal; line-height: var(--mx-lh); }
h1 { font-size: var(--mx-fs-display); text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: var(--mx-fs-h2); text-wrap: balance; }
h3 { font-size: var(--mx-fs-title); }
sub { font-size: .7em; vertical-align: -0.25em; line-height: 0; }
code, .mono { font-family: var(--mx-mono); }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--mx-max) + 2 * var(--mx-gutter)); margin-inline: auto; padding-inline: var(--mx-gutter); }
main { display: block; }
main.wrap { padding-block: 0 56px; display: flex; flex-direction: column; gap: 28px; }
body.landing main.wrap { max-width: none; padding-inline: 0; padding-block: 0; gap: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.up { color: var(--mx-ink); } .down { color: var(--mx-accent); } .amber { color: var(--mx-accent-amber); }
.soft { color: var(--fg-soft); } .mute { color: var(--fg-mute); }
.num { font-family: var(--mx-mono); font-variant-numeric: tabular-nums; }
.lead { color: var(--fg-soft); font-size: var(--fs-lead); }
/* Every label in this system is mono, lowercase, and wears brackets (the markup supplies them). */
.eyebrow { font: 400 var(--mx-fs-micro)/20px var(--mx-mono); letter-spacing: 0; text-transform: none; color: var(--fg-mute); }
.label { font: 400 var(--mx-fs-micro)/20px var(--mx-mono); color: var(--mx-mute); }
.label--accent { color: var(--mx-accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-accent); margin-inline-end: 8px; vertical-align: 1px; }
.dot--blue { background: var(--mx-accent-blue); } .dot--amber { background: var(--mx-accent-amber); }

/* landing bands */
.mx-section { position: relative; display: flow-root; overflow: clip; background: var(--mx-bg-band); padding-block: var(--mx-section-top); }
.mx-section > .wrap { position: relative; }
.mx-heading { display: grid; justify-items: center; text-align: center; gap: var(--mx-gap-h); position: relative; z-index: 1; }
.mx-heading--start { justify-items: start; text-align: left; }
.mx-heading--stack { gap: var(--mx-gap-stack); }
.mx-heading p { max-width: 720px; color: var(--mx-mute); font-size: var(--mx-fs-body); line-height: 1.5; }
.mx-heading .sub { color: var(--mx-mute); }

/* chrome.css */
/* The nav bar, as the reference builds it: the paper ground, a small brand at the left, and the
   routes as bracketed mono items at the right, the current one in the accent. No dark bar, no fills:
   the only line is a hairline under it. The footer below repeats that and ends in the cropped
   wordmark the reference bleeds off the bottom of the page. */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--mx-bg-page); color: var(--mx-ink);
  border-bottom: 1px solid var(--mx-hair);
}
.site-head .top { display: flex; align-items: center; gap: 12px; height: 52px; }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--mx-ink); }
.brand:hover { color: var(--mx-ink); }
.brand svg { width: 20px; height: 20px; }
.brand .word { font: 500 18px/26px var(--mx-sans); letter-spacing: -0.01em; }
.top .spacer { flex: 1; min-width: 0; }

/* The cell row: every route, then one cell per pool page, hairline-divided, scrolling sideways
   when the width runs out (a clipped cell is still reachable, so it is never off-viewport). */
.rail { display: block; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
/* When the row is wider than the viewport the last cell is half-cut, which reads as a broken bar
   rather than as a strip you can push. The fade says which it is; above 900 there is nothing to cut. */
@media (max-width: 900px) {
  .rail { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%); }
}
.rail::-webkit-scrollbar { display: none; }
.rail .cells { display: flex; align-items: center; height: 40px; width: max-content; min-width: 100%; gap: 4px; }
/* Bracketed mono items: the brackets are drawn here, so the markup stays plain text. */
.nav-link, .tick {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px;
  font: 400 var(--mx-fs-nav)/24px var(--mx-mono); color: var(--mx-ink); white-space: nowrap;
  background: transparent;
  transition: color var(--mx-t-fill) ease-out;
}
.nav-link::before, .tick::before { content: "["; color: var(--mx-ink); }
.nav-link::after, .tick::after { content: "]"; color: var(--mx-ink); }
.nav-link:hover, .tick:hover,
.nav-link:hover::before, .nav-link:hover::after, .tick:hover::before, .tick:hover::after { color: var(--mx-accent-lit); }
.nav-link[aria-current="page"], .tick[aria-current="page"],
.nav-link[aria-current="page"]::before, .nav-link[aria-current="page"]::after { color: var(--mx-accent); }
.nav-link svg { display: none; }
.rail .sep { display: none; }
.rail .live { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; font: 400 14px/20px var(--mx-mono); color: var(--mx-mute); }
.rail .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-accent); animation: m-blink 2s ease-in-out infinite; }
.tick { font-size: 14px; gap: 8px; }
.tick img, .tick .mono-img { width: 18px; height: 18px; }
.tick .sym { font-weight: 500; }
.tick .val { color: var(--mx-mute-band); }

.net {
  display: inline-flex; align-items: center; gap: 7px; flex: none; height: 32px; padding: 0 12px;
  border-radius: var(--mx-r-ctl); box-shadow: var(--mx-ring);
  font: 400 14px/20px var(--mx-mono); color: var(--mx-mute); white-space: nowrap; background: transparent;
}
.net i { width: 6px; height: 6px; border-radius: 50%; background: var(--mx-accent); }
.wallet-btn { flex: none; height: 36px; padding: 0 16px; font: 400 14px/20px var(--mx-mono); }
.wallet-btn .addr { font-family: var(--mx-mono); }
.wallet-btn.warn { background: transparent; color: var(--mx-accent); box-shadow: var(--mx-ring); }

@media (max-width: 810px) {
  .site-head .top { height: 52px; gap: 8px; }
  .brand .word { font-size: 20px; }
  .nav-link, .tick { padding: 0 14px; }
  .wallet-btn { padding: 0 12px; height: 34px; font-size: 13px; }
  .net { height: 28px; padding: 0 9px; font-size: 12px; }
  .net .long { display: none; }
}
@media (max-width: 420px) {
  .rail .cells { height: 40px; }
}

/* ---------------------------------------------------------------- footer */
.site-foot { position: relative; overflow: clip; background: var(--mx-bg-page); color: var(--mx-ink); margin-top: 0; padding-top: var(--mx-footer-top); border-top: 1px solid var(--mx-hair); }
body:not(.landing) .site-foot { margin-top: 48px; }
.site-foot .cols { display: flex; flex-wrap: wrap; gap: 40px 100px; align-items: flex-start; }
.site-foot .brand { color: var(--mx-ink); flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; margin-right: auto; min-width: 226px; }
.site-foot .brand .word { font: 500 24px/26px var(--mx-sans); }
.site-foot .brand svg { display: none; }
.site-foot .tag { font: 400 var(--mx-fs-small)/20px var(--mx-mono); color: var(--mx-mute); max-width: 320px; }
.site-foot .tag::before { content: "["; } .site-foot .tag::after { content: "]"; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 24px 80px; }
.site-foot nav > div { display: grid; gap: 0; min-width: 160px; align-content: start; }
.site-foot nav h3 { font: 400 var(--mx-fs-small)/20px var(--mx-mono); color: var(--mx-mute); margin-bottom: 8px; text-transform: none; }
/* Footer links are the accent, bracketed, the way the reference sets them. */
.site-foot nav a { font: 400 var(--mx-fs-nav)/24px var(--mx-mono); color: var(--mx-accent); padding: 2px 0; }
.site-foot nav a::before { content: "["; } .site-foot nav a::after { content: "]"; }
.site-foot nav a:hover { color: var(--mx-accent-lit); }
.site-foot nav a[target]::after { content: "]"; }
.site-foot .facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 72px; font: 400 var(--mx-fs-small)/20px var(--mx-mono); color: var(--mx-mute); }
.site-foot .facts b { color: var(--mx-ink); font-weight: 400; }
/* The cropped wordmark: the reference bleeds it off the bottom edge at 304px on a 1440 viewport. */
.site-foot .giant { color: var(--mx-ink); opacity: 1; white-space: nowrap; }
.site-foot .giant span { display: block; font: 500 var(--mx-wordmark)/1 var(--mx-sans); letter-spacing: -0.03em; height: .66em; overflow: hidden; margin-top: 24px; }
@media (max-width: 810px) {
  .site-foot { padding-top: 48px; }
  .site-foot .cols { gap: 32px 48px; }
  .site-foot .brand .word { font-size: 20px; }
  .site-foot .facts { margin-top: 48px; }
}

/* components.css */
/* Components. Square controls, white islands on dark, rims instead of shadows. The same classes render
   on both surfaces through the aliases in tokens.css (band: #000 cards; app: #2a2119 panels). */

/* ---------------------------------------------------------------- buttons
   The reference has exactly two button weights and both are mono, lowercase, 6px radius: a light one
   that wears a hairline ring, and a solid ink one. They come in pairs, light first. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--mx-btn-h); padding: 0 var(--mx-btn-px); border-radius: var(--mx-r-ctl); border: 0;
  background: var(--mx-bg-card); color: var(--mx-ink); cursor: pointer; box-shadow: var(--mx-ring);
  font: 400 var(--mx-fs-nav)/24px var(--mx-mono); white-space: nowrap; text-transform: lowercase;
  transition: background var(--mx-t-fill) ease-out, color var(--mx-t-fill) ease-out, box-shadow var(--mx-t-fill) ease-out;
}
.btn:hover { color: var(--mx-ink); background: #f7f7f7; box-shadow: var(--mx-ring-ink); }
.btn svg { width: 16px; height: 16px; }
.btn.primary, .btn.dark { background: var(--mx-bg-ink); color: #ffffff; box-shadow: none; }
.btn.primary:hover, .btn.dark:hover { background: #262626; color: #ffffff; box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--mx-mute); }
.btn.ghost:hover { color: var(--mx-ink); background: transparent; box-shadow: var(--mx-ring); }
.btn.small { height: 32px; padding: 0 12px; font-size: var(--mx-fs-small); line-height: 20px; }
.btn.big { height: 48px; padding: 0 24px; border-radius: var(--mx-r-ctl); font: 400 var(--mx-fs-nav)/24px var(--mx-mono); }
.btn.big.secondary { background: var(--mx-bg-card); color: var(--mx-ink); box-shadow: var(--mx-ring); }
.btn.big.secondary:hover { background: #f7f7f7; box-shadow: var(--mx-ring-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: var(--mx-ring); }
.btn.danger { color: var(--mx-accent); box-shadow: var(--mx-ring); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- chips
   A chip is a bracketed mono string on the paper: no fill, no border unless it is a status. */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: var(--mx-chip-h); padding: 0 12px;
  border-radius: var(--mx-r-pill);
  font: 400 var(--mx-fs-small)/20px var(--mx-mono); white-space: nowrap;
  color: var(--mx-mute); box-shadow: var(--mx-ring); background: transparent;
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.open { color: var(--mx-accent); box-shadow: var(--mx-ring); }
.pill.clock, .pill.start, .pill.curve { color: var(--mx-mute); }
.pill.bad { color: var(--mx-accent); box-shadow: var(--mx-ring); }
body.band .pill, body.landing .pill { border-radius: var(--mx-r-pill); height: var(--mx-chip-h); font-family: var(--mx-mono); font-size: var(--mx-fs-small); }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { background: var(--mx-bg-card); border: 0; box-shadow: var(--mx-ring); border-radius: var(--mx-r-app); padding: 16px 18px; min-width: 0; }
.stat .k { font: 400 var(--mx-fs-small)/20px var(--mx-mono); letter-spacing: 0; text-transform: none; color: var(--fg-mute); display: flex; align-items: center; gap: 6px; }
.stat .k svg { display: none; }
.stat .v { margin-top: 10px; font: 500 var(--fs-num)/1.1 var(--mx-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .v small { font-size: .5em; color: var(--fg-mute); font-weight: 400; }
.stat .s { margin-top: 4px; font: 400 12px/1.3 var(--mx-mono); color: var(--fg-mute); }
@media (max-width: 479px) {
  .stats { gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .v { font-size: 18px; }
  .stat .v small { display: block; margin-top: 2px; }
}

/* ---------------------------------------------------------------- section heads */
.sec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-head h2 { font-size: clamp(24px, 1rem + 1.6vw, 32px); }
.sec-head .aside { font: 400 var(--fs-small)/1 var(--mx-mono); color: var(--fg-mute); }
.sec-head a.aside:hover { color: var(--mx-ink); }

/* ---------------------------------------------------------------- token cards */
.grid { display: grid; gap: var(--mx-gap-grid); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (max-width: 479px) { .grid { grid-template-columns: 1fr; gap: 16px; } }
.card {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px;
  padding: 20px; background: var(--mx-bg-card); border: var(--mx-rim); box-shadow: var(--mx-glow); border-radius: var(--mx-r-card);
  color: var(--mx-ink); transition: color var(--mx-t-fill);
}
body.app .card { background: var(--panel); border: 1px solid var(--rule); box-shadow: none; border-radius: var(--r-m); }
.card:hover { color: var(--mx-ink); }
.card .pic { width: 96px; height: 96px; overflow: hidden; background: var(--mx-bg-page); }
.card .pic img, .card .pic svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.card .name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.card .name b { font: 400 var(--mx-fs-title)/1.2 var(--mx-pixel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .name span { font: 400 13px/1 var(--mx-mono); color: var(--fg-mute); }
.card .big { font: 500 22px/1.1 var(--mx-mono); color: var(--mx-ink); }
.card .big small { font-size: 12px; color: var(--fg-mute); font-weight: 400; }
.card .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 12px/1.4 var(--mx-mono); color: var(--fg-mute); }
.card .meta b { color: var(--mx-ink); font-weight: 500; }
.card .bars { grid-column: 1 / -1; display: grid; gap: 6px; }
.card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bar-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 8px; font: 400 12px/1 var(--mx-mono); color: var(--fg-mute); }
.bar-line .pct { text-align: right; color: var(--mx-ink); }

/* <progress> and <meter>: the only way a width changes after load (no inline style anywhere). */
progress, meter {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 0;
  background: var(--panel-3); overflow: hidden; color: var(--mx-ink);
}
progress::-webkit-progress-bar { background: var(--panel-3); }
progress::-webkit-progress-value { background: var(--mx-on-dark); transition: width .4s; }
progress::-moz-progress-bar { background: var(--mx-on-dark); }
meter::-webkit-meter-bar { background: var(--panel-3); border: 0; border-radius: 0; height: 8px; }
meter::-webkit-meter-optimum-value { background: var(--mx-on-dark); }
meter::-webkit-meter-suboptimum-value { background: var(--mx-on-dark); opacity: .7; }
meter::-webkit-meter-even-less-good-value { background: var(--mx-on-dark); opacity: .5; }
progress.amber::-webkit-progress-value { background: var(--fg-soft); }
progress.amber::-moz-progress-bar { background: var(--fg-soft); }
progress.soft::-webkit-progress-value { background: var(--fg-mute); }
progress.soft::-moz-progress-bar { background: var(--fg-mute); }

/* ---------------------------------------------------------------- token image fallback */
.mono-img { display: block; }
.mono-img rect { fill: var(--mx-bg-page); }
.mono-img circle { fill: none; stroke: var(--mx-on-dark); stroke-width: 3; }
.mono-img text { fill: var(--mx-on-dark); font-family: var(--mx-pixel); font-weight: 400; }

/* ---------------------------------------------------------------- empty state */
.empty {
  display: grid; justify-items: center; gap: 14px; text-align: center; padding: 32px 20px;
  border: 1px dashed var(--mx-dash); border-radius: var(--mx-r-card); color: var(--fg-soft); background: var(--mx-bg-card);
}
body.app .empty { background: var(--panel); border-radius: var(--r-m); }
.empty svg.fig { width: min(260px, 70%); }
.empty p { max-width: 46ch; }
.empty .pixel { font-size: var(--mx-fs-step); color: var(--mx-ink); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--panel); border-radius: var(--r-m); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 860px; font-family: var(--mx-mono); }
table.data th { text-align: left; font: 400 12px/1 var(--mx-pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); padding: 12px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--panel-2); }
table.data .r { text-align: right; }
table.data .tok { display: flex; align-items: center; gap: 10px; }
table.data .tok img, table.data .tok svg { width: 32px; height: 32px; flex: none; }
table.data .tok b { font-weight: 500; }
table.data .tok span { display: block; font: 400 12px/1.2 var(--mx-mono); color: var(--fg-mute); }

/* ---------------------------------------------------------------- panels, key-value lists */
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 20px; min-width: 0; }
.panel > h2, .panel > h3 { margin-bottom: 12px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kv > div { background: var(--panel-2); border-radius: var(--r-s); padding: 10px 12px; min-width: 0; }
.kv dt, .kv .k { font: 400 12px/1 var(--mx-pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); }
.kv dd, .kv .v { margin: 6px 0 0; font: 500 16px/1.2 var(--mx-mono); }
dl.kv { margin: 0; }

/* ---------------------------------------------------------------- addresses */
.addr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 400 var(--fs-small)/1 var(--mx-mono); }
.addr a { color: var(--fg-soft); }
.addr a:hover { color: var(--mx-ink); }
.addr .full { display: none; }
.copy { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--mx-r-ctl); border: 1px solid var(--rule); background: transparent; color: var(--fg-soft); cursor: pointer; padding: 0; }
.copy svg { width: 14px; height: 14px; }
.copy:hover { color: var(--mx-ink); border-color: var(--mx-ink); }
.copy.done { color: var(--mx-ink); background: var(--mx-surface); border-color: var(--mx-surface); }

/* ---------------------------------------------------------------- icons */
.ic { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -0.125em; }

/* ---------------------------------------------------------------- module mounts */
.module { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.module > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.module > header h2 { font: 400 var(--mx-fs-title)/1.2 var(--mx-pixel); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.module > header h2 svg { display: none; }
.module .note { color: var(--fg-mute); font-size: var(--fs-small); }
.module[data-state="ready"] .note.wait { display: none; }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 6px; }
.field label { font: 400 12px/1 var(--mx-pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-mute); }
.input, input[type="text"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  width: 100%; height: 49px; padding: 0 14px; border-radius: var(--mx-r-ctl); border: 1px solid var(--rule);
  background: var(--bg); color: var(--fg); font: 400 18px/1 var(--mx-mono);
}
textarea { height: auto; min-height: 88px; padding: 12px 14px; line-height: 1.4; font-size: 15px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--mx-ink); }
.seg { display: inline-flex; gap: 6px; }
.seg button { height: 31px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--mx-r-ctl); background: transparent; color: var(--mx-ink); font: 400 13px/1 var(--mx-mono); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--mx-surface); color: var(--mx-ink); border-color: var(--mx-surface); font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--mx-ink); }

/* ---------------------------------------------------------------- chart frame */
.chart { position: relative; border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; background: var(--panel); aspect-ratio: 16 / 10; max-width: 100%; }
.chart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chart .empty { position: absolute; inset: 0; border: 0; border-radius: 0; align-content: center; }
@media (max-width: 767px) { .chart { aspect-ratio: 4 / 5; } }
.chart.chart-none { aspect-ratio: auto; }
.chart.chart-none .empty { position: static; padding: 20px 16px; }
.chart.chart-none .fig { max-height: 90px; }

/* ---------------------------------------------------------------- notices */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--mx-r-ctl); background: transparent; color: var(--mx-ink); font-size: var(--fs-small); border: 1px solid var(--mx-hair); }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.notice.ok { border-color: var(--mx-ink); }
.notice.bad { border-color: var(--mx-ink); background: var(--mx-bg-page); }

/* ---------------------------------------------------------------- one-line figure blocks */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--mx-gap-grid); }
.figcard { background: var(--mx-bg-card); border: var(--mx-rim); box-shadow: var(--mx-glow); border-radius: var(--mx-r-card); padding: 20px; display: grid; gap: 12px; align-content: start; }
.figcard .fig { max-height: 180px; }
.figcard h3 { font-size: var(--mx-fs-title); }
.figcard p { color: var(--fg-soft); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- landing furniture */
.mx-steps { display: flex; justify-content: center; gap: var(--mx-gap-cards); list-style: none; margin: 122px 0 0; padding: 0; isolation: isolate; flex-wrap: wrap; }
/* The label sits under the card on the page ground, never inside it: the card can be any height and
   the label can take two lines. Inside the card it was clipped the moment a step's name wrapped. */
.mx-step { position: relative; width: var(--mx-step); flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mx-step__card { width: 100%; aspect-ratio: 1; background: var(--mx-bg-card); border: var(--mx-rim); box-shadow: var(--mx-glow); border-radius: var(--mx-r-card); display: grid; place-items: center; }
.mx-step svg { width: 100px; height: 100px; color: var(--mx-ink); }
.mx-step .lbl { text-align: center; font: 400 var(--mx-fs-body)/24px var(--mx-mono); color: var(--mx-ink); }
.mx-step::before { content: ""; position: absolute; left: 100%; top: calc(var(--mx-step) / 2); width: var(--mx-gap-cards); height: 1px; background: repeating-linear-gradient(90deg, var(--mx-dash) 0 5px, transparent 5px 10px); z-index: -1; }
.mx-step:last-child::before { display: none; }
.mx-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mx-gap-grid); list-style: none; margin: 0; padding: 0; max-width: 585px; }
.mx-feature { display: flex; gap: 16px; align-items: flex-start; min-height: 105px; padding: 11px 24px 11px 20px; background: var(--mx-surface); color: var(--mx-ink); }
.mx-feature svg { width: 45px; height: 45px; flex: none; color: var(--mx-ink); margin-top: 4px; }
.mx-feature h3 { font: 400 var(--mx-fs-title)/1.2 var(--mx-pixel); color: var(--mx-ink); }
.mx-feature p { font: 400 var(--mx-fs-small)/1.2 var(--mx-sans); color: var(--mx-ink); margin-top: 5px; }
.mx-chip { display: inline-flex; align-items: center; justify-content: center; height: var(--mx-chip-h); min-width: 109px; padding: 0 20px; background: var(--mx-surface); color: var(--mx-ink); font: 400 var(--mx-fs-title)/1.2 var(--mx-pixel); white-space: nowrap; }
.mx-stair { position: absolute; z-index: 0; pointer-events: none; }
.mx-stair path { fill: var(--mx-pixel-light); }
.mx-stair--tl { left: 0; top: 0; width: 205px; height: 206px; }
.mx-stair--tr { right: 0; top: 0; width: 140px; height: 140px; }
.mx-stair--bl { left: 0; bottom: 0; width: 161px; height: 107px; }
.mx-stair--br { right: 0; bottom: 0; width: 156px; height: 104px; }
.mx-checker { height: 106px; background: linear-gradient(var(--mx-bg-band), var(--mx-bg-band)) 0 0 / 100% 40px no-repeat, var(--mx-pixel-light); position: relative; }
.mx-checker::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background:
  conic-gradient(var(--mx-pixel-light) 25%, transparent 0 50%, var(--mx-pixel-light) 0 75%, transparent 0) 0 0 / 26px 26px; }
.mx-panel { background: var(--mx-surface); color: var(--mx-ink); border-radius: var(--mx-r-card); width: min(var(--mx-max), 100% - 2 * var(--mx-gutter)); margin: 73px auto 71px; padding: var(--mx-panel-pad) 20px 31px; display: grid; justify-items: center; text-align: center; gap: var(--mx-gap-group); }
.mx-panel h2 { color: var(--mx-ink); }
.mx-panel .lead { color: var(--mx-ink-75); font: 500 var(--mx-fs-body)/1.2 var(--mx-sans); max-width: 549px; }
.mx-panel__lead { display: grid; gap: 10px; justify-items: center; }
.mx-panel__icons { display: flex; justify-content: center; gap: 100px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.mx-panel__icons li { display: grid; justify-items: center; gap: 25px; width: 145px; font: 500 var(--mx-fs-body)/1.2 var(--mx-sans); color: var(--mx-ink-75); }
.mx-panel__icons svg { width: 63px; height: 63px; color: var(--mx-ink); }
.mx-panel__action { display: grid; gap: 25px; justify-items: center; }
.mx-panel .fine { font: 400 var(--mx-fs-small)/1.2 var(--mx-sans); color: var(--mx-ink-75); }
@media (max-width: 1310px) { .mx-steps { gap: 36px; } .mx-step::before { width: 36px; } }
@media (max-width: 1150px) { .mx-steps { display: grid; grid-template-columns: repeat(2, var(--mx-step)); gap: 60px; } .mx-step::before { width: 60px; } .mx-step:nth-child(2n)::before { display: none; } }
@media (max-width: 620px) {
  .mx-steps { grid-template-columns: var(--mx-step); gap: 40px; margin-top: 60px; }
  .mx-step::before { left: 50%; top: 100%; width: 1px; height: 40px; background: repeating-linear-gradient(180deg, var(--mx-dash) 0 5px, transparent 5px 10px); }
  .mx-step:nth-child(2n)::before { display: block; }
  .mx-feature-grid { grid-template-columns: 1fr; gap: 20px; }
  .mx-panel__icons { gap: 12px; }
  .mx-panel__icons li { width: 30%; font-size: 14px; gap: 12px; }
  .mx-panel__icons svg { width: 44px; height: 44px; }
  .mx-stair--tl, .mx-stair--tr { display: none; }
  .mx-stair--bl { width: 72px; height: 48px; } .mx-stair--br { width: 72px; height: 48px; }
}
@media (max-width: 810px) { .mx-panel { padding: 40px 20px 28px; gap: 32px; } .mx-panel__icons { gap: 32px; } }

/* drawings/base.css */
/* Shared by every drawing: the palette classes the parts use, the opening frame, and the motion
   primitives. A drawing's own file (src/styles/drawings/<id>.css) adds only d-<id>-* rules. */

.opening, .fig { display: block; width: 100%; height: auto; overflow: visible; }
.opening { max-height: min(62vh, 480px); background: var(--mx-bg-page); }
.opening text, .fig text { font-family: var(--mx-mono); }

/* Glyph mosaics (src/drawings/mosaic.mjs): four ink layers of letters on the paper ground, arriving
   top to bottom inside 1.2 s, then a slow scan band keeps the picture alive. On paper the layers are
   ink at low alpha, so the picture reads as a faint technical drawing behind the headline, the way
   the reference's blueprint annotations sit behind its type. */
.mo text { font: 400 12px/1 var(--mx-mono); fill: var(--mx-ink); white-space: pre; pointer-events: none; }
.mo-0 { opacity: .03; } .mo-1 { opacity: .06; } .mo-2 { opacity: .11; } .mo-3 { opacity: .20; }
.mo text { animation: mo-arrive .5s ease-out both; }
.mo-d0 { animation-delay: 0s; } .mo-d1 { animation-delay: .1s; } .mo-d2 { animation-delay: .2s; } .mo-d3 { animation-delay: .3s; }
.mo-d4 { animation-delay: .4s; } .mo-d5 { animation-delay: .5s; } .mo-d6 { animation-delay: .6s; } .mo-d7 { animation-delay: .7s; }
@keyframes mo-arrive { from { opacity: 0; } }
.mo-scan { fill: var(--mx-ink); opacity: .03; animation: mo-scan 7s linear 1.2s infinite; }
@keyframes mo-scan { from { transform: translateY(-12%); } to { transform: translateY(112%); } }
.mo-ground { fill: var(--mx-bg-page); }

.s-fg { stroke: var(--fg); } .s-soft { stroke: var(--fg-soft); } .s-rule { stroke: var(--rule-strong); }
.s-up { stroke: var(--up); } .s-down { stroke: var(--down); } .s-amber { stroke: var(--amber); }
.f-none { fill: none; } .f-bg { fill: var(--bg); } .f-panel { fill: var(--panel); } .f-panel2 { fill: var(--panel-2); }
.f-rule { fill: var(--rule-strong); } .f-fg { fill: var(--fg); } .f-soft { fill: var(--fg-soft); }
.f-up { fill: var(--up); } .f-updim { fill: var(--up-dim); } .f-down { fill: var(--down); } .f-amber { fill: var(--amber); }
.t-mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; }
.t-sans { font-family: var(--sans); font-weight: 500; }

/* Motion primitives. Each animates FROM a hidden or displaced state, so the natural (static) state
   of every element is the finished picture: with motion reduced, nothing is missing. */
.opening g, .opening path, .opening rect, .opening circle, .opening text,
.fig g, .fig path, .fig rect, .fig circle, .fig text { transform-box: fill-box; }

.wave { animation: wave-slide 3.2s linear infinite; }
@keyframes wave-slide { from { transform: translateX(0); } to { transform: translateX(25%); } }

.m-draw { stroke-dasharray: 1; animation: m-draw 1.1s cubic-bezier(.3,.7,.2,1) both; }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.m-pop { transform-origin: center; animation: m-pop .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes m-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

.m-fade { animation: m-fade .8s ease-out both; }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }

.m-rise { transform-origin: 50% 100%; animation: m-rise 1.2s cubic-bezier(.3,.7,.2,1) both; }
@keyframes m-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.m-d1 { animation-delay: .15s; } .m-d2 { animation-delay: .3s; } .m-d3 { animation-delay: .45s; }
.m-d4 { animation-delay: .6s; } .m-d5 { animation-delay: .75s; } .m-d6 { animation-delay: .9s; }

.m-bob { animation: m-bob 3.6s ease-in-out 1.2s infinite; }
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.m-blink { animation: m-blink 2.4s ease-in-out 1.2s infinite; }
@keyframes m-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.m-spin { transform-origin: 50% 100%; animation: m-spin 12s linear infinite; }
.m-spin-fast { transform-origin: 50% 100%; animation: m-spin 2s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .opening, .opening *, .fig, .fig * { animation: none !important; transition: none !important; }
}

/* drawings/cycle.css */
/* cycle: a glyph mosaic; the scan band is the loop. */
.d-cycle-l { font: 400 clamp(22px, 60px - 2.7vw, 44px)/1 var(--mx-mono); fill: var(--mx-mute); }
.d-cycle-scan { animation: mo-scan 8s linear 1.2s infinite; }

/* drawings/figures.css */
/* In-page figures from src/drawings/figures.mjs (not openings). Entrance under a second, then a calm
   loop; base.css stops both under prefers-reduced-motion and the still frame is the finished figure. */
.d-fig-draw { stroke-dasharray: 1; animation: m-draw 1s cubic-bezier(.3,.7,.2,1) both; }

.d-fig-sweep { opacity: 0; animation: d-fig-sweep 6s linear 1.2s infinite; }
@keyframes d-fig-sweep {
  0% { opacity: 0; transform: translateX(0); }
  5%, 90% { opacity: .5; }
  100% { opacity: 0; transform: translateX(484px); }
}

.d-fig-grow { transform-origin: 0 50%; animation: d-fig-grow .9s cubic-bezier(.3,.7,.2,1) .1s both; }
@keyframes d-fig-grow { from { transform: scaleX(0); } }
.d-fig-bars .d-fig-grow rect { animation: d-fig-glow 3s ease-in-out 1.2s infinite; }
@keyframes d-fig-glow { 50% { opacity: .7; } }

/* The cursor walks the term, the grace, and past it; at rest it sits at the start. */
.d-fig-cursor { animation: d-fig-cursor 6s ease-in-out .3s infinite; }
@keyframes d-fig-cursor {
  0%, 8% { transform: translateX(0); }
  55% { transform: translateX(384px); }
  80% { transform: translateX(548px); }
  92%, 100% { transform: translateX(612px); opacity: 0; }
}

.d-fig-out { animation: d-fig-out 2.4s ease-in-out .8s infinite; }
@keyframes d-fig-out { 0%, 100% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(10px); opacity: .5; } }

/* drawings/guardian.css */
/* guardian: a glyph mosaic; the scan band is the loop. */
.d-guardian-l { font: 400 clamp(22px, 60px - 2.7vw, 44px)/1 var(--mx-mono); fill: var(--mx-mute); }
.d-guardian-scan { animation: mo-scan 9s linear 1.2s infinite; }

/* drawings/pause.css */
/* pause: a glyph mosaic; the scan band is the loop. */
.d-pause-l { font: 400 clamp(22px, 60px - 2.7vw, 44px)/1 var(--mx-mono); fill: var(--mx-mute); }
.d-pause-scan { animation: mo-scan 6s linear 1.2s infinite; }

/* drawings/pawnshop.css */
/* pawnshop: the hero's annotated technical drawing. Every value is measured from the reference at
   1440 (skills/antimattr/sections/02-hero-annotated-product.md): 1px strokes in a light grey ramp
   #C6C6C6 to #E4E4E4 on the #EEEEEE page, leaders 1px dashed #D3D3D3 at 6/5, pins 10px solid accent
   squares, notes Geist Mono 16/24 in the muted ink. The strokes are non-scaling, so they stay 1px
   whatever width the graphic is drawn at. Below 900px the annotations leave the drawing (the page
   repeats them as text) and the art is cropped to fill the phone. */
.d-pawnshop path, .d-pawnshop circle, .d-pawnshop rect { vector-effect: non-scaling-stroke; }
.d-pawnshop-line { fill: none; stroke: var(--mx-art); stroke-width: 1px; }
.d-pawnshop-soft { fill: none; stroke: var(--mx-art-soft); stroke-width: 1px; }
.d-pawnshop-face { fill: var(--mx-bg-page); stroke: var(--mx-art-soft); stroke-width: 1px; }
/* The two solid faces carry the page ground so the slip and the box occlude what is behind them. */
.d-pawnshop-front, .d-pawnshop-card { fill: var(--mx-bg-page); stroke: var(--mx-art); stroke-width: 1px; }
.d-pawnshop-drip { fill: none; stroke: var(--mx-art); stroke-width: 1px; stroke-dasharray: 3 5; stroke-linecap: round; }
.d-pawnshop-leader { fill: none; stroke: var(--mx-art-lead); stroke-width: 1px; stroke-dasharray: 6 5; }
.d-pawnshop-pin { fill: var(--mx-accent); }
/* The one pin that sits on the object rather than at the end of a note. */
.d-pawnshop-pin-obj { fill: var(--mx-accent); }
.d-pawnshop-note { fill: var(--mx-mute); font-size: 16px; letter-spacing: 0; }

/* The one loop: the token falls through the slot, the box swallows it, and another is on the counter
   four and a half seconds later. It is hidden by the lid, never by opacity, so the still frame holds. */
.d-pawnshop-drop { animation: d-pawnshop-drop 4.5s cubic-bezier(.45,0,.75,1) infinite; }
@keyframes d-pawnshop-drop {
  0%, 22% { transform: translateY(0); opacity: 1; }
  48%, 62% { transform: translateY(120px); opacity: 1; }
  62.01%, 74% { transform: translateY(0); opacity: 0; }
  86%, 100% { transform: translateY(0); opacity: 1; }
}
.d-pawnshop-drip { animation: d-pawnshop-drip 4.5s linear infinite; }
@keyframes d-pawnshop-drip { to { stroke-dashoffset: -32; } }

/* Below 900 the annotations leave the drawing (home.css prints them as text) and the art grows into
   the room they were using: the graphic is cropped to its sides, so the object fills the phone. */
@media (max-width: 900px) {
  .d-pawnshop-note, .d-pawnshop-leader, .d-pawnshop-pin { display: none; }
  .d-pawnshop-art { transform-origin: 50% 50%; transform: scale(1.35); }
}

/* drawings/stack.css */
/* stack: a glyph mosaic; the scan band is the loop. */
.d-stack-l { font: 400 clamp(22px, 60px - 2.7vw, 44px)/1 var(--mx-mono); fill: var(--mx-mute); }
.d-stack-scan { animation: mo-scan 7s linear 1.2s infinite; }

/* drawings/vault.css */
/* vault: a glyph mosaic; the scan band is the loop. */
.d-vault-l { font: 400 clamp(22px, 60px - 2.7vw, 44px)/1 var(--mx-mono); fill: var(--mx-mute); }
.d-vault-scan { animation: mo-scan 7s linear 1.2s infinite; }

/* pages/actions.css */
/* The vault page's action panels: trade, redeem and upkeep. Everything is prefixed act-. */

.act { display: grid; gap: 12px; min-width: 0; }
.act > * { min-width: 0; }
/* ------------------------------------------------------------ fields */
.act-field { display: grid; gap: 6px; }
.act-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 var(--fs-micro)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.act-label label { color: var(--fg-soft); }
.act-label > span { letter-spacing: 0; text-transform: none; font-weight: 500; }
.act-label b { color: var(--fg-soft); font-weight: 600; }
.act-input {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 52px; padding: 0 8px 0 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--r-m); background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.act-input:focus-within { border-color: var(--up); box-shadow: 0 0 0 3px rgba(74, 222, 128, .12); }
.act-input input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: 600 20px/1 var(--mono); color: var(--fg); }
.act-input input:focus { outline: none; }
.act-input input::placeholder { color: var(--rule-strong); }
.act-input .unit { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1 var(--mono); color: var(--fg-soft); }
.act-chip {
  flex: none; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--panel-2); color: var(--fg-soft); font: 600 11px/1 var(--mono); letter-spacing: .04em; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.act-chip:hover { color: var(--up); border-color: var(--up-line); background: var(--up-dim); }
.act-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.act input[type="range"] { height: 24px; margin: 0; }
/* ------------------------------------------------------------ read-outs */
.act-rows { margin: 0; display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--panel-2); padding: 4px 12px; }
.act-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.act-rows > div:last-child { border-bottom: 0; }
.act-rows dt { font: 500 12px/1.3 var(--sans); color: var(--fg-soft); display: flex; align-items: center; gap: 6px; }
.act-rows dd { margin: 0; font: 600 13px/1.3 var(--mono); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.act-rows dd b { font-weight: 700; }
.act-tax dt { color: var(--up); }
.act-tax dt svg { width: 14px; height: 14px; }
.act-tax dd { color: var(--up); }
.act-why { padding: 8px 12px; border-radius: var(--r-s); background: var(--amber-dim); color: var(--amber); font-size: var(--fs-small); line-height: 1.4; }
.act-fine { color: var(--fg-mute); font-size: 12px; line-height: 1.45; }
.act-fine svg { width: 13px; height: 13px; }
/* ------------------------------------------------------------ the action button and its status */
.act-go { width: 100%; }
.act-go svg { width: 18px; height: 18px; }
.act-go.act-sell { background: var(--down); border-color: var(--down); color: #2a0707; }
.act-go.act-sell:hover { color: #2a0707; box-shadow: 0 0 24px rgba(248, 113, 113, .35); }
.act-go.act-burn:not([disabled]) { background: var(--down-dim); border-color: rgba(248, 113, 113, .45); color: var(--down); }
.act-go.act-burn:not([disabled]):hover { background: #3a1719; }
.act-busy { background: var(--panel-2); color: var(--fg-soft); border-color: var(--rule-strong); }
.act-spin { display: inline-flex; flex: none; }
.act-spin svg { width: 1.1em; height: 1.1em; animation: act-spin 1s linear infinite; }
@keyframes act-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .act-spin svg { animation: none; } }
.act .notice span { min-width: 0; overflow-wrap: anywhere; }
.act-tx { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); text-decoration: underline; text-underline-offset: 2px; }
.act-tx svg { width: 12px; height: 12px; }
/* ------------------------------------------------------------ trade */
.act-trade-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.act-side { flex: 1 1 180px; max-width: 260px; }
.act-side button { flex: 1 1 0; height: 34px; font-size: 13px; }
.act-side button[data-side="buy"][aria-pressed="true"] { background: var(--up); color: var(--up-ink); }
.act-side button[data-side="sell"][aria-pressed="true"] { background: var(--down); color: #2a0707; }
.act-arrow { display: grid; place-items: center; height: 18px; margin: -6px 0; color: var(--fg-mute); }
.act-arrow svg { width: 16px; height: 16px; }
.act-out { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-m); background: var(--panel-2); border: 1px solid var(--rule); }
.act-out .k, .act-slip .k { font: 600 var(--fs-micro)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); }
.act-out b { font: 700 20px/1.2 var(--mono); color: var(--fg); overflow-wrap: anywhere; }
.act-slip { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.act-slip .seg button { padding: 0 9px; }
.act .notice.bad svg, .act-repay .notice svg { flex: none; }
.act-up { display: grid; gap: 8px; margin-top: 10px; }
.act-up-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12px; color: var(--fg-soft); }
.act-up-row .btn { width: 100%; font-family: var(--mono); }
@media (max-width: 400px) { .act-up-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.act-mine-stats .v small { font-size: .5em; color: var(--fg-soft); }
@media (max-width: 479px) { .act-mine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .act-mine-stats .stat:last-child { grid-column: 1 / -1; } }
.act-card.done { border-color: var(--up-line); }
.act-card-head .pic, .act-pool .pic { width: 44px; height: 44px; flex: none; border-radius: var(--r-s); overflow: hidden; background: var(--panel-3); }
.act-pool .pic { width: 40px; height: 40px; }
.act-card-head .pic img, .act-card-head .pic svg, .act-pool .pic img, .act-pool .pic svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.act-card-head .who, .act-pool .who { display: grid; gap: 2px; min-width: 0; }
.act-card-head .who b, .act-pool .who b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-card-head .who .sym { font: 600 12px/1 var(--mono); color: var(--up); }
.act-pool .who b { font-family: var(--mono); color: var(--up); }
.act-pool .who span { font-size: 12px; color: var(--fg-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-pool .pill { flex: none; }
.act-pool .room { display: grid; gap: 3px; justify-items: end; margin-left: auto; text-align: right; min-width: 0; }
.act-pool .room + svg { margin-left: 0; }
.act-pool .room .k { font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-mute); white-space: nowrap; }
.act-pool .room b { font: 700 14px/1 var(--mono); white-space: nowrap; }
.act-pool .room b small { font-size: 11px; color: var(--fg-soft); font-weight: 500; }
@media (max-width: 479px) {
  .act-pool { flex-wrap: wrap; row-gap: 8px; }
  .act-pool .who { flex: 1 1 0; }
  .act-pool .room { margin-left: 0; width: 100%; grid-auto-flow: column; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--rule); }
}
.act-mine-stats .stat:nth-child(2) .v { white-space: normal; overflow-wrap: anywhere; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; }
.act-pool .who { flex: 1 1 auto; }

/* pages/content.css */
/* The content routes: /how-it-works, /risks, /security, /contracts. Classes are c-*. */

/* ---------------------------------------------------------------- sections */
.c-sec { display: grid; gap: 14px; min-width: 0; }
.c-head { display: grid; gap: 4px; min-width: 0; }
.c-head p { color: var(--fg-soft); }
.c-sub { font-size: var(--fs-h3); margin-top: 4px; }
.c-note { font: 500 var(--fs-small)/1.45 var(--mono); color: var(--fg-soft); }
.c-note a, .c-facts a { color: var(--up); }
.c-note a:hover, .c-facts a:hover { text-decoration: underline; }
.c-sec code, .c-facts code, .notice code {
  font: 500 .88em/1.3 var(--mono); background: var(--panel-3); color: var(--fg); padding: 1px 5px; border-radius: 4px;
  overflow-wrap: anywhere;
}
.notice span { min-width: 0; }
.c-pair { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 900px) { .c-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.c-next { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- figure panels */
.c-fig { margin: 0; min-width: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 16px; display: grid; gap: 10px; align-content: start; }
.c-fig figcaption { font: 500 var(--fs-small)/1.4 var(--mono); color: var(--fg-mute); text-align: center; }
.c-fig-svg { max-width: 480px; margin-inline: auto; }
/* The 640-unit figures of drawings/figures.mjs: at 640px their 20-unit labels are 20px, which is as
   large as they should ever be. Wider columns centre them instead of scaling them up. */
.c-fig .d-fig { max-width: 640px; margin-inline: auto; }
.c-ink { fill: var(--up-ink); }

/* motion inside .fig: base.css stops all of it under prefers-reduced-motion */
@keyframes c-drip { 0% { transform: translateY(-10px); opacity: 0; } 25%, 80% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes c-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- chips, steps, facts */
.c-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.c-chips li { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--rule); font: 600 12px/1.2 var(--mono); color: var(--fg-soft); }
.c-chips svg { width: 15px; height: 15px; color: var(--up); }

.c-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .c-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.c-steps li { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.c-steps b { font: 700 15px/1.2 var(--mono); margin-top: 6px; }
.c-steps li > span:last-child { font-size: var(--fs-small); color: var(--fg-soft); line-height: 1.35; }
.c-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--up-dim); color: var(--up); flex: none; }
.c-dot svg { width: 17px; height: 17px; }
.c-dot.amber { background: var(--amber-dim); color: var(--amber); }


.c-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.c-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m); min-width: 0; }
.c-facts svg { width: 18px; height: 18px; color: var(--up); flex: none; margin-top: 2px; }
.c-row3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* ---------------------------------------------------------------- the split control (/how-it-works) */
.c-clockmod { gap: 14px; }
.c-controls { display: grid; gap: 14px; }
@media (min-width: 768px) { .c-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.c-range-row { display: flex; align-items: center; gap: 12px; }
.c-range-row input { flex: 1; min-width: 0; height: 28px; }
.c-range-row input:disabled { opacity: .5; }
.c-range-row output { min-width: 60px; text-align: right; font: 700 18px/1 var(--mono); color: var(--fg); }
.c-splitbar { border-radius: var(--r-m); background: var(--bg); border: 1px solid var(--rule); overflow: hidden; }
.c-splitbar .fig { display: block; width: 100%; height: 84px; }
@media (min-width: 768px) { .c-splitbar .fig { height: 120px; } }
.c-part { stroke: var(--bg); stroke-width: 2; }
.c-part-flap { fill: var(--panel-3); }
.c-part-bounty { fill: var(--rule-strong); }
.c-part-platform { fill: var(--fg-mute); }
.c-part-reserve { fill: var(--up); }
.c-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 var(--fs-micro)/1.2 var(--mono); color: var(--fg-soft); }
.c-legend li { display: inline-flex; align-items: center; gap: 6px; }
.c-sw { display: inline-block; width: 16px; height: 10px; border-radius: 2px; background: var(--fg-mute); }
.c-sw-bounty { background: var(--rule-strong); }
.c-sw-reserve { background: var(--up); }
.c-sw-flap { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.c-readout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-readout .stat { background: var(--panel-2); }
.c-readout + .c-note { margin-top: 10px; }

/* ---------------------------------------------------------------- risks */
.c-guard, .c-after { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 16px; display: grid; gap: 14px; min-width: 0; }
.c-guard { border-color: rgba(251, 191, 36, .28); }
.c-guard-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.c-guard-who > svg { width: 22px; height: 22px; color: var(--amber); }
.c-guard-who > b { font-weight: 650; margin-right: auto; }
.c-guard-who.big { background: var(--panel); border: 1px solid rgba(251, 191, 36, .28); border-radius: var(--r-l); padding: 14px 16px; }
.c-powers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-powers li { display: flex; gap: 12px; align-items: center; min-width: 0; }
.c-powers li > span:last-child { min-width: 0; }
.c-after h3 { font-size: 15px; }
.c-after .c-facts li { background: var(--panel-2); border: 0; }
.c-after .c-facts svg { color: var(--amber); }

.c-deps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.c-dep { background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--up-line); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.c-dep.bad { border-left-color: var(--down); }
.c-dep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.c-dep-head svg { width: 18px; height: 18px; color: var(--up); flex: none; }
.c-dep.bad .c-dep-head svg { color: var(--down); }
.c-dep-head b { font-weight: 650; margin-right: auto; overflow-wrap: anywhere; }
.c-dep-head code { font: 500 11px/1.3 var(--mono); background: var(--panel-3); padding: 2px 6px; border-radius: 4px; color: var(--fg-mute); }
.c-dep-does { font-size: var(--fs-small); color: var(--fg-soft); line-height: 1.4; }
/* A dependency's own text quotes 42-character addresses (the SY's implementation, for one). Monospace
   that long does not fit a card at any width, so it breaks rather than running off the side. */
.c-dep-does code, .c-dep-fails code { overflow-wrap: anywhere; }
.c-dep-fails { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.4; color: var(--fg); background: var(--panel-2); border-radius: var(--r-s); padding: 8px 10px; }
.c-dep-fails svg { width: 16px; height: 16px; color: var(--amber); flex: none; margin-top: 2px; }
.c-dep.bad .c-dep-fails svg { color: var(--down); }

/* ---------------------------------------------------------------- security */
.c-keys { display: grid; gap: 10px; }
.c-auths { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.c-auth { background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--up-line); border-radius: var(--r-m); padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.c-auth.g { border-left-color: var(--amber); }
.c-auth-name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; min-width: 0; }
.c-auth-name b { font: 650 var(--fs-small)/1.2 var(--mono); overflow-wrap: anywhere; }
.c-auth-key { display: inline-flex; align-items: center; gap: 6px; font: 700 var(--fs-micro)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.c-auth-key.none { color: var(--up); }
.c-auth-key svg { width: 15px; height: 15px; }
.c-auth-fns { display: flex; flex-wrap: wrap; gap: 6px; }
.c-auth-fns code { font-size: 11px; color: var(--amber); background: var(--amber-dim); }

.c-gatehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.c-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.c-big b { font: 800 clamp(44px, 7vw, 64px)/1 var(--mono); letter-spacing: -0.04em; }
.c-big span { color: var(--fg-soft); }
.c-fp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font: 600 var(--fs-small)/1.2 var(--mono); }
.c-fp svg { width: 16px; height: 16px; flex: none; }
.c-fp code { background: transparent; padding: 0; color: inherit; }
.c-fp.ok { background: var(--up-dim); color: var(--up); }
.c-fp.bad { background: var(--down-dim); color: var(--down); }
.c-cells { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; grid-template-columns: repeat(10, minmax(0, 1fr)); }
@media (min-width: 900px) { .c-cells { grid-template-columns: repeat(25, minmax(0, 1fr)); } }
.c-cells li { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font: 600 10px/1 var(--mono); animation: c-cell .5s ease-out both; }
.c-cells li.red { background: var(--down-dim); color: var(--down); border: 1px solid rgba(248, 113, 113, .4); }
.c-cells li.stale { background: var(--panel-3); color: var(--fg-mute); }
.c-cells li:nth-child(5n+2) { animation-delay: .08s; } .c-cells li:nth-child(5n+3) { animation-delay: .16s; }
.c-cells li:nth-child(5n+4) { animation-delay: .24s; } .c-cells li:nth-child(5n+5) { animation-delay: .32s; }
@keyframes c-cell { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.c-guards { list-style: none; margin: 0; padding: 0; columns: 2 340px; column-gap: 24px; }
.c-guards li { break-inside: avoid; display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.35; color: var(--fg-soft); }
.c-guards code { flex: none; background: transparent; padding: 0; font-weight: 700; }
.c-guards code.down { color: var(--down); }

.c-stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .c-stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-stats4 .stat .s { line-height: 1.35; }
.c-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.c-checks li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-s); min-width: 0; }
.c-gk { font-size: var(--fs-small); min-width: 0; }
.c-gd { display: flex; gap: 4px; flex: none; }
.c-gd i { width: 12px; height: 12px; border-radius: 3px; background: var(--up); }
.c-gd i.na { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.c-more { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 12px 14px; }
.c-more > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 600 var(--fs-small)/1.2 var(--mono); color: var(--fg-soft); list-style: none; }
.c-more > summary::-webkit-details-marker { display: none; }
.c-more > summary svg { width: 16px; height: 16px; color: var(--up); }
.c-more[open] > summary { margin-bottom: 12px; }

/* ---------------------------------------------------------------- contracts */
.c-nethead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.c-meta { font: 500 var(--fs-micro)/1.3 var(--mono); color: var(--fg-mute); }
.c-addrs { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-l); }
.c-addrs li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.c-addrs li:last-child { border-bottom: 0; }
.c-an { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.c-an > svg { width: 18px; height: 18px; color: var(--up); flex: none; margin-top: 2px; }
.c-an > span { display: grid; gap: 2px; min-width: 0; }
.c-an b { font-weight: 600; }
.c-an b a { color: var(--up); }
.c-an small { font-size: 12px; color: var(--fg-mute); line-height: 1.3; }
.c-pairaddr { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.c-stackfig { max-width: 400px; }
.c-old { border-style: dashed; }
.c-old .c-an > svg, .c-old .c-an b a { color: var(--fg-mute); }
.c-old .c-an b { color: var(--fg-soft); }
.c-net .empty { display: block; padding: 18px; }

@media (prefers-reduced-motion: reduce) {
  .c-cells li { animation: none; }
}
.c-addrs li > .addr, .c-pairaddr { margin-left: auto; }

/* pages/home.css */
/* "/": the landing. The first screen is the reference's annotated-product hero, rebuilt from its
   measured stack (skills/antimattr/sections/02-hero-annotated-product.md): 100px of top padding, a
   44/56 headline, the 960px figure column, then name, definition, status and the action pair at
   0 / 0 / 2 / 20 / 16 of box gap. The drawing is the opening, which the shell emits as the first
   thing in <main> so the checker can find it; `order` puts the headline above it without moving it.
   The reference's first screen is one viewport tall, and so is this one. */
body.landing main.wrap { align-items: center; }
body.landing main.wrap > * { order: 5; width: 100%; }
body.landing main.wrap > .mx-hero { order: 1; padding-top: 100px; }
body.landing main > .opening {
  order: 2; width: 100%; max-width: var(--mx-media); max-height: none; margin-inline: auto;
  aspect-ratio: 1024 / 509; background: transparent;
}
body.landing main.wrap > .mx-hero-tail { order: 3; padding-bottom: 60px; }

.mx-hero h1 { max-width: 1100px; text-align: center; margin-inline: auto; color: var(--mx-ink); }
.mx-hero-tail__in { display: grid; justify-items: center; text-align: center; gap: 0; }
/* The three notes the drawing carries; it draws them itself wherever there is room for them. */
.mx-notes { display: none; list-style: none; margin: 0 0 28px; padding: 0; gap: 8px; }
.mx-notes li { font: 400 var(--mx-fs-body)/24px var(--mx-mono); color: var(--mx-mute); }
.mx-notes li::before { content: "["; } .mx-notes li::after { content: "]"; }
/* The name is one weight step heavier than the headline, with a 16px accent dot 12px before it. */
.mx-name { display: flex; align-items: center; gap: 12px; margin: 0;
  font: 500 var(--mx-fs-display)/1.27 var(--mx-sans); letter-spacing: -0.01em; color: var(--mx-ink); }
.mx-name .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--mx-accent); flex: none; }
.mx-def { margin: 2px 0 0; font: 500 var(--mx-fs-body)/24px var(--mx-sans); color: var(--mx-mute); }
/* The status is the reference's pill: transparent, a hairline of the accent at 45%, mono in brackets. */
.mx-status { margin: 20px 0 0; height: 44px; display: inline-flex; align-items: center; padding: 0 24px;
  border-radius: var(--mx-r-pill); box-shadow: #f18e8e 0 0 0 1px;
  font: 500 var(--mx-fs-small)/20px var(--mx-mono); color: var(--mx-accent); }
.mx-status::before { content: "["; } .mx-status::after { content: "]"; }
.mx-status span { color: var(--mx-accent); }
.mx-actions { display: flex; gap: 8px; margin-top: 16px; }

@media (max-width: 900px) {
  body.landing main.wrap > .mx-hero { padding-top: 56px; }
  /* The drawing crops to the art and the notes it was carrying become text above the name. */
  body.landing main > .opening { aspect-ratio: 5 / 4; max-width: 560px; }
  .mx-notes { display: grid; }
}
@media (max-width: 420px) {
  .mx-actions { width: 100%; flex-direction: column; }
  .mx-actions .btn { width: 100%; }
}

.mx-section--steps { padding-bottom: 270px; }
@media (max-width: 1150px) { .mx-section--steps { padding-top: 120px; } }
@media (max-width: 620px) { .mx-section--steps { padding-bottom: 96px; } }

.mx-section--twocol { padding-top: 77px; padding-bottom: 0; }
.mx-twocol { display: flex; align-items: center; justify-content: center; gap: var(--mx-gap-cols); }
.mx-twocol__text { flex: 0 1 584px; min-width: 0; padding-top: 44px; display: grid; gap: 50px; }
.mx-inline { text-decoration: underline; text-underline-offset: 3px; }
.mx-pools { flex: 0 1 592px; min-width: 0; display: grid; gap: var(--mx-gap-grid); }
.mx-slot { flex: 0 1 592px; min-width: 0; aspect-ratio: 1; display: grid; }
.mx-slot .empty { align-content: center; }
.mx-checker { margin-top: 5px; }
@media (max-width: 1200px) {
  .mx-twocol { flex-direction: column; align-items: stretch; gap: 50px; }
  .mx-twocol__text { flex-basis: auto; padding-top: 0; }
  .mx-feature-grid { max-width: none; }
  .mx-pools, .mx-slot { flex-basis: auto; width: min(592px, 100%); margin-inline: auto; }
}

.mx-section--rings { padding-bottom: 176px; }
.mx-rings { position: relative; width: min(455px, 100vw - 2 * var(--mx-gutter)); margin: 60px auto 0; }
.mx-rings__stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.mx-ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; aspect-ratio: 1; border-radius: 50%; background: var(--mx-bg-band); border: var(--mx-rim); box-shadow: var(--mx-glow); }
.mx-ring--1 { width: 317.14%; opacity: .26; }
.mx-ring--2 { width: 213.85%; opacity: .54; }
.mx-ring--3 { width: 100%; opacity: .75; }
.mx-rings__center { position: relative; width: 44%; aspect-ratio: 1; display: grid; place-items: center; color: var(--mx-ink); }
.mx-rings__center svg { width: 100%; height: 100%; }
.mx-rings__chips { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.mx-chip.mx-slot-1, .mx-chip.mx-slot-2, .mx-chip.mx-slot-3, .mx-chip.mx-slot-4, .mx-chip.mx-slot-5 { position: absolute; translate: -50% -50%; }
.mx-slot-1 { left: -19%; top: 15%; }
.mx-slot-2 { left: 113%; top: 28%; }
.mx-slot-3 { left: -12%; top: 88%; }
.mx-slot-4 { left: 104%; top: 83%; }
.mx-slot-5 { left: 50%; top: 116%; }
@media (max-width: 810px) {
  .mx-section--rings { padding-bottom: 96px; }
  .mx-rings__chips { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
  .mx-chip.mx-slot-1, .mx-chip.mx-slot-2, .mx-chip.mx-slot-3, .mx-chip.mx-slot-4, .mx-chip.mx-slot-5 { position: static; translate: none; }
}

.mx-section--cta { padding-top: 0; }

/* pages/shared.css */
/* Shared page furniture (lead). */
.page-head { display: grid; gap: 8px; }
.page-head h1 { font-size: clamp(28px, 4vw, 44px); }
.small { font-size: var(--fs-small); }
.nojs { display: block; }
.js .nojs { display: none; }
.visually-hidden:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; padding: 8px 12px; background: var(--up); color: var(--up-ink); border-radius: var(--r-s); }
table.data.narrow { min-width: 520px; }

/* pages/token.css */
/* /vault, once the site's token exists: the head, the reserve and the action panels. */
.tok { display: grid; gap: 16px; min-width: 0; }
.tok-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.tok-head .pic { width: 112px; height: 112px; border-radius: var(--r-l); overflow: hidden; background: var(--panel-3); }
.tok-head .pic img, .tok-head .pic svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.tok-head .who { display: grid; gap: 8px; min-width: 0; }
.tok-head .line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.tok-head h1 { font-size: clamp(26px, 4vw, 40px); overflow-wrap: anywhere; }
.tok-head .sym { font: 700 18px/1 var(--mono); color: var(--up); }
.tok-head .desc { color: var(--fg-soft); max-width: 70ch; }
.tok-head .links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 479px) {
  .tok-head { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .tok-head .pic { width: 72px; height: 72px; border-radius: var(--r-m); }
  .tok-head .addrs { gap: 6px 10px; }
}
.stats.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767px) { .stats.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tok-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .tok-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); align-items: start; } }
.tok-main, .tok-side { display: grid; gap: 16px; min-width: 0; }

.pots { margin-bottom: 16px; background: var(--panel-2); border-radius: var(--r-m); padding: 12px; }
.pots .fig { max-width: 640px; max-height: 260px; margin-inline: auto; }
.kv dd.small-dd { font-size: 13px; font-weight: 500; line-height: 1.35; }