/* Layout and motion. Colours come from tokens.css by name only. */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-mid: 0.2s;
  --t-slow: 0.3s;
  --t-scene: 0.7s;
  --tap: 44px;
  --hdr: 130px;
  --page-max: 1520px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--ink); color: var(--text);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
::selection { background: var(--hi); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus, var(--hi)); outline-offset: 2px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 80; background: var(--hi); color: var(--ink); padding: 8px 12px; transform: translateY(-200%); }
.skip:focus { transform: none; }

.page { margin: 0 auto; width: 100%; max-width: var(--page-max); padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .page { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .page { padding-left: 3rem; padding-right: 3rem; } }

.label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; line-height: 1.3; letter-spacing: 0.16em; color: var(--mute); }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.balance { text-wrap: balance; }

/* --- section theming: each section sets the semantic colours --- */
.sec { position: relative; scroll-margin-top: calc(var(--hdr) - 40px); padding: 6rem 0; }
@media (min-width: 768px) { .sec { padding: 8rem 0; } .sec--tall { padding: 9rem 0; } }
.dark { --bg: var(--ink); --fg: var(--text); --fg-soft: var(--soft); --fg-mute: var(--mute); --rule: var(--line); --rule-strong: var(--line-strong); --focus: var(--hi); --panel: var(--ink-2); background: var(--bg); color: var(--fg); }
.light { --bg: var(--paper); --fg: var(--graphite-deep); --fg-soft: var(--graphite); --fg-mute: var(--graphite-soft); --rule: var(--paper-line); --rule-strong: var(--graphite-soft); --focus: var(--graphite-deep); --panel: var(--paper-2); background: var(--bg); color: var(--fg); }
.light .label, .plate .label { color: var(--fg-mute); }
.dark + .dark { border-top: 1px solid var(--rule); }

.seam { position: relative; height: 9rem; overflow: hidden; }
.seam--up { background: linear-gradient(to bottom, var(--ink), var(--paper)); }
.seam--down { background: linear-gradient(to bottom, var(--paper), var(--ink)); }
.seam::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in oklch, var(--glow) 55%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease); box-shadow: 0 0 24px 2px color-mix(in oklch, var(--glow) 40%, transparent); }
.js .seam.is-in::after { transform: scaleX(1); }
html:not(.js) .seam::after { transform: scaleX(1); }

.grid12 { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .c3 { grid-column: span 3; } .c9 { grid-column: span 9; } }
.display-lg { font-size: clamp(2.5rem, 6.2vw, 6.4rem); line-height: 0.94; letter-spacing: -0.04em; font-weight: 800; }
.display-md { font-size: clamp(1.9rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -0.035em; font-weight: 800; }
.display-lg .dim { color: var(--fg-mute); font-weight: 700; }
.lede { max-width: 42rem; font-size: 16px; line-height: 1.7; color: var(--fg-mute); }

/* --- buttons --- */
.btn { display: inline-flex; min-height: var(--tap); align-items: center; justify-content: center; gap: 0.5rem; border: 1px solid transparent; border-radius: 2px; padding: 0.5rem 1rem; font-size: 13.5px; font-weight: 600; line-height: 1.25; text-align: center; position: relative; overflow: hidden; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-slow) var(--ease); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-lg { min-height: 52px; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 14.5px; }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: color-mix(in oklch, var(--fg) 82%, var(--bg)); box-shadow: 0 0 28px color-mix(in oklch, var(--glow) 35%, transparent); transform: translateY(-1px); }
.btn-outline { border-color: var(--rule-strong); color: var(--fg); }
.btn-outline:hover { border-color: var(--fg); background: color-mix(in oklch, var(--fg) 8%, transparent); transform: translateY(-1px); }
.btn .arrow { transition: transform var(--t-mid) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- progress, header --- */
.progress { position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 2px; background: transparent; pointer-events: none; }
.progress::after { content: ""; display: block; height: 100%; background: var(--hi); transform-origin: left; transform: scaleX(var(--p, 0)); box-shadow: 0 0 10px var(--glow); }

.site { position: fixed; z-index: 60; left: 0; right: 0; top: 0; background: color-mix(in oklch, var(--ink) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ca-bar { border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--ink-2) 80%, transparent); }
.ca-inner { display: flex; align-items: center; gap: 0.75rem 1rem; min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
.ca-tag { flex: none; }
.ca-slot { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1; }
.ca-text { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.01em; font-size: clamp(13px, 3.9vw, 24px); line-height: 1.25; color: var(--hi); overflow-wrap: anywhere; word-break: break-all; text-align: left; min-width: 0; }
.ca-slot[data-ca-state="absent"] .ca-text, .ca-slot[data-ca-state="unconfirmed"] .ca-text { color: var(--mute-faint); font-weight: 500; }
.ca-note { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-top: 2px; }
.ca-btn { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--tap); min-width: 0; text-align: left; border-radius: 2px; padding: 0 0.5rem; margin-left: -0.5rem; transition: background-color var(--t-fast) var(--ease); }
.ca-btn:hover { background: color-mix(in oklch, var(--hi) 8%, transparent); }
.ca-icon { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--line-strong); border-radius: 2px; color: var(--mute); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.ca-btn:hover .ca-icon { color: var(--hi); border-color: var(--mute); }
.ca-status { position: absolute; right: 0; top: 0; padding: 2px 8px; background: var(--ink); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hi); }
.ca-status:empty { display: none; }
@media (max-width: 639px) { .ca-inner { flex-direction: column; align-items: flex-start; gap: 0; padding-top: 8px; padding-bottom: 4px; } .ca-slot { width: 100%; } .ca-btn { flex: 1 1 auto; } .ca-slot[data-ca-state="stated"] .ca-status { top: -22px; } }
.ca-slot[data-copied="yes"] .ca-icon { background: var(--hi); color: var(--ink); border-color: var(--hi); }
.ca-slot[data-copied="fail"] .ca-icon { border-style: dashed; }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 56px; }
@media (min-width: 768px) { .nav { height: 68px; } }
.brand { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.brand span { transition: letter-spacing var(--t-slow) var(--ease); }
.brand:hover span { letter-spacing: 0.2em; }
.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-links a, .menu a { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute); display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); position: relative; transition: color var(--t-fast) var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--hi); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.nav-links a:hover, .menu a:hover { color: var(--hi); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: 0.25rem; }
.social { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 2px; color: var(--soft); transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
a.social:hover { background: var(--hi); color: var(--ink); transform: translateY(-2px); }
.social.is-inert { color: var(--mute-faint); cursor: not-allowed; }
.menu-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 1px solid var(--line-strong); border-radius: 2px; margin-left: 0.5rem; transition: border-color var(--t-fast) var(--ease); }
.menu-btn:hover { border-color: var(--hi); }
@media (min-width: 768px) { .menu-btn { display: none; } }
.menu { display: none; border-top: 1px solid var(--line); padding: 0.5rem 0 1rem; }
.menu a { display: flex; width: 100%; font-size: 12px; }
.site[data-menu-open] .menu { display: block; }
@media (min-width: 768px) { .site[data-menu-open] .menu { display: none; } }

/* --- hero --- */
.hero { position: relative; height: 185vh; background: var(--ink); --open: 0; --lit: 0; }
.hero-stick { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.hero-scene { position: absolute; inset: 0; }
.hero-scene canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--t-scene) var(--ease); }
.hero-scene canvas[data-live="1"] { opacity: 1; }
.hero-glow { position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(60% 50% at 70% 38%, color-mix(in oklch, var(--glow) 16%, transparent), transparent 70%); opacity: calc(0.55 + var(--lit) * 0.45); transform: translate3d(0, var(--py, 0px), 0); }
.hero-shade-b { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in oklch, var(--veil) 94%, transparent) 0%, color-mix(in oklch, var(--veil) 72%, transparent) 24%, transparent 56%); }
.hero-shade-t { position: absolute; left: 0; right: 0; top: 0; height: 10rem; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklch, var(--veil) 80%, transparent), transparent); }
.hero-body { position: relative; display: flex; height: 100%; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--hdr) + 24px); padding-bottom: 1.75rem; }
@media (min-width: 768px) { .hero-body { padding-bottom: 2.5rem; } }
.hero-tl { position: absolute; left: 1.25rem; top: calc(var(--hdr) + 18px); }
.hero-tr { position: absolute; right: 1.25rem; top: calc(var(--hdr) + 18px); text-align: right; display: none; }
.hero-side { position: absolute; right: 1.25rem; top: 42%; width: 11.5rem; text-align: right; display: none; pointer-events: none; }
@media (min-width: 640px) { .hero-tl { left: 2rem; } .hero-tr { right: 2rem; } }
@media (min-width: 768px) { .hero-tr { display: block; } }
@media (min-width: 1024px) { .hero-tl { left: 3rem; } .hero-tr { right: 3rem; } }
@media (min-width: 1280px) { .hero-side { display: block; right: 3rem; } }
.hero-side .a { opacity: calc(1 - var(--open) * 1.6); }
.hero-side .b { position: absolute; inset: 0 0 auto 0; color: var(--hi); opacity: calc(var(--open) * 1.8 - 0.8); }
.hero-side small { display: block; margin-top: 0.375rem; text-transform: none; letter-spacing: 0; color: var(--mute-faint); font-size: 10.5px; }
.hero-side .b small { color: var(--mute); }
.h1 { font-size: clamp(2.35rem, 5.25vw, 5.6rem); line-height: 0.92; letter-spacing: -0.04em; font-weight: 800; }
.h1 .l { display: block; }
.h1 .l2 { opacity: calc(0.44 + var(--lit) * 0.56); transition: opacity var(--t-slow) var(--ease); }
@media (min-width: 1024px) { .h1 .l2 { white-space: nowrap; } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: end; }
@media (min-width: 768px) { .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; } .hero-grid .h1 { grid-column: span 8; } .hero-grid .hero-aside { grid-column: span 4; padding-bottom: 0.5rem; } }
.hero-aside p { max-width: 25rem; font-size: 14.5px; line-height: 1.6; color: var(--mute); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: 0.875rem; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .hero-foot { margin-top: 2.25rem; } }
.hero-foot .scroll { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 640px) { .hero-foot .scroll { display: inline-flex; } }
.livebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-bottom: 1.25rem; }
.livebar .blk { display: inline-flex; align-items: baseline; gap: 0.625rem; }
.blk .num { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--hi); font-variant-numeric: tabular-nums; min-width: 6.5rem; }

/* --- health pill, dots --- */
.pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 32px; padding: 0 0.875rem 0 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--soft); background: color-mix(in oklch, var(--ink) 60%, transparent); transition: border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); }
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hi); flex: none; }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--hi); opacity: 0; animation: ping 1.6s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
[data-state="connecting"] .dot { background: transparent; border: 1.5px solid var(--mute); animation: blink 1s steps(2, jump-none) infinite; }
[data-state="connecting"] .dot::after, [data-state="offline"] .dot::after { animation: none; }
[data-state="offline"] .dot { background: var(--mute-faint); }
[data-state="offline"].pill { color: var(--mute); border-style: dashed; }
[data-state="live"].pill { border-color: var(--mute); color: var(--hi); }
@keyframes blink { 50% { opacity: 0.25; } }

/* --- scroll reveal --- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--t-scene) var(--ease), transform var(--t-scene) var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.js [data-reveal="left"].is-in { transform: none; }

/* --- protocol steps --- */
.steps { display: grid; grid-template-columns: 1fr; gap: 3.5rem 2rem; margin-top: 4rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6rem; } .step:nth-child(2) { margin-top: 5rem; } .step:nth-child(3) { margin-top: 10rem; } }
.step { position: relative; border-top: 1px solid var(--rule-strong); padding-top: 1.25rem; transition: border-color var(--t-slow) var(--ease); }
.step:hover { border-top-color: var(--fg); }
.step-head { display: flex; align-items: baseline; justify-content: space-between; }
.step-n { font-family: var(--font-mono); font-size: 12px; color: var(--fg); }
.step h3 { margin-top: 2rem; }
.step p.body { margin-top: 1.25rem; max-width: 26rem; font-size: 15px; line-height: 1.7; color: var(--fg-mute); }
.step .code { display: block; margin-top: 1.5rem; padding-left: 0.75rem; border-left: 1px solid var(--fg); color: var(--fg-soft); overflow-wrap: anywhere; transition: padding-left var(--t-slow) var(--ease); }
.step:hover .code { padding-left: 1.25rem; }
.ghost { position: absolute; right: 0; top: -4rem; z-index: 0; font-family: var(--font-mono); font-weight: 800; font-size: clamp(5rem, 12vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--rule); pointer-events: none; transform: translate3d(0, var(--py, 0px), 0); user-select: none; }
.step > :not(.ghost) { position: relative; z-index: 1; }
.fine { margin-top: 5rem; max-width: 48rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; font-size: 14px; line-height: 1.65; color: var(--fg-mute); }
@media (min-width: 768px) { .fine { margin-top: 7rem; } }

/* --- network: stat tiles, info tiles --- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 4rem; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 5rem; } }
.tile { position: relative; background: var(--bg); padding: 1.5rem 1.25rem 1.75rem; min-height: 11rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; transition: background-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.tile:hover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule-strong), 0 0 40px color-mix(in oklch, var(--glow) 8%, transparent); z-index: 1; }
.tile .big { font-size: clamp(1.9rem, 3.2vw, 3.1rem); line-height: 1; letter-spacing: -0.035em; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile .sub { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-mute); }
.info { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: 0; }
@media (min-width: 1024px) { .info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info .tile { min-height: 8rem; gap: 1rem; }
.info .val { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; color: var(--fg); }
.info .val.is-empty { color: var(--fg-mute); }
.skel, [data-skel] { position: relative; color: transparent !important; background: linear-gradient(100deg, var(--ink-3) 30%, color-mix(in oklch, var(--ink-3) 55%, var(--line-strong)) 50%, var(--ink-3) 70%); background-size: 220% 100%; animation: shimmer 1.4s linear infinite; border-radius: 2px; user-select: none; }
.light .skel, .light [data-skel] { background: linear-gradient(100deg, var(--paper-2) 30%, var(--paper) 50%, var(--paper-2) 70%); background-size: 220% 100%; }
[data-skel] { display: inline-block; min-width: 7rem; }
@keyframes shimmer { to { background-position: -220% 0; } }
.flash { animation: flash 0.7s var(--ease); }
@keyframes flash { 0% { color: var(--hi); text-shadow: 0 0 18px var(--glow); } 100% { text-shadow: 0 0 0 transparent; } }
.light .flash { animation-name: flashl; }
@keyframes flashl { 0% { opacity: 0.35; } 100% { opacity: 1; } }

/* --- anatomy --- */
.anatomy { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem; align-items: start; }
@media (min-width: 1024px) { .anatomy { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; margin-top: 4rem; } .anatomy .art { grid-column: span 7; } .anatomy .list { grid-column: span 5; } }
.art { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 44rem; border: 1px solid var(--rule); background: radial-gradient(circle at 50% 45%, color-mix(in oklch, var(--glow) 9%, transparent), transparent 62%); overflow: hidden; }
.art svg.draw { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--fg); transform: translate3d(0, var(--py, 0px), 0) scale(1.04); }
.marker { position: absolute; width: var(--tap); height: var(--tap); transform: translate(-50%, -50%); display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; }
.marker::before { content: ""; position: absolute; width: 32px; height: 32px; border-radius: 50%; border: 1px solid color-mix(in oklch, var(--fg) 70%, transparent); background: color-mix(in oklch, var(--bg) 85%, transparent); transition: all var(--t-mid) var(--ease); }
.marker span { position: relative; transition: color var(--t-mid) var(--ease); }
.marker:hover::before { background: var(--panel); }
.marker[aria-pressed="true"]::before { background: var(--fg); border-color: var(--fg); transform: scale(1.1); }
.marker[aria-pressed="true"] span { color: var(--bg); }
.tablist { border-top: 1px solid var(--rule); }
.tab { display: flex; width: 100%; min-height: 56px; align-items: center; gap: 1rem; padding: 0.875rem 0; text-align: left; border-bottom: 1px solid var(--rule); color: var(--fg-mute); transition: color var(--t-fast) var(--ease), padding-left var(--t-slow) var(--ease); }
.tab:hover, .tab[aria-selected="true"] { color: var(--fg); }
.tab:hover { padding-left: 0.5rem; }
.tab .n { width: 1.25rem; font-family: var(--font-mono); font-size: 11px; }
.tab .t { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.tab .d { width: 8px; height: 8px; border-radius: 50%; background: var(--fg); opacity: 0.4; }
.tab[aria-selected="true"] .d { opacity: 1; }
.tab .d.off { background: transparent; border: 1.5px solid var(--fg); }
.detail { margin-top: 1.75rem; min-height: 13.5rem; }
.detail .chip { margin-bottom: 1rem; }
.detail p.t { font-size: 16px; line-height: 1.65; color: var(--fg-soft); animation: rise var(--t-slow) var(--ease); }
.detail p.in { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-mute); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 2px; padding: 0.375rem 0.625rem; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; background: var(--fg); color: var(--bg); }
.chip--ghost { background: transparent; color: var(--fg-soft); border: 1px solid var(--rule-strong); }

/* --- pairs board --- */
.board-wrap { margin-top: 4rem; border-top: 1px solid var(--rule-strong); }
table.board { width: 100%; border-collapse: collapse; }
.board th { padding: 1rem 0.5rem 0.875rem; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 400; color: var(--fg-mute); text-align: right; }
.board th:first-child, .board th:nth-child(2) { text-align: left; }
.board td { padding: 0.875rem 0.5rem; border-top: 1px solid var(--rule); vertical-align: middle; transition: background-color var(--t-fast) var(--ease); }
.board tbody tr:hover td { background: var(--panel); }
.c-rank { width: 2.75rem; font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); }
.c-num { text-align: right; font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-chg.up { color: var(--fg); }
.c-chg.down { color: var(--fg-mute); }
.who { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--tap); }
a.rowlink { display: block; }
a.rowlink:hover .pair { text-decoration: underline; text-underline-offset: 4px; }
.names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pair { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.dex { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-mute); }
.logo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--panel); border: 1px solid var(--rule); }
.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo--text { font-weight: 800; font-size: 13px; }
.skel-row td { padding: 1rem 0.5rem; }
.skel-row .bar { display: block; height: 14px; width: 100%; }
.skel-row .circ { width: 32px; height: 32px; border-radius: 50%; }
.row-in { animation: rise var(--t-scene) var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.empty { padding: 2.5rem 0.5rem; color: var(--fg-mute); font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 559px) { .c-rank, .board th:first-child, .c-chg, .board th:last-child { display: none; } .board td, .board th { padding-left: 0.25rem; padding-right: 0.25rem; } .pair { font-size: 14px; } .c-num { font-size: 12.5px; } }

/* --- boundaries --- */
.caps { margin-top: 4rem; border-top: 1px solid var(--rule); }
@media (min-width: 768px) { .caps { margin-top: 5rem; } }
.cap { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); transition: background-color var(--t-slow) var(--ease), padding var(--t-slow) var(--ease); }
.cap:hover { background: color-mix(in oklch, var(--fg) 4%, transparent); padding-left: 0.75rem; padding-right: 0.75rem; }
.cap h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.cap p { font-size: 14.5px; line-height: 1.65; color: var(--fg-mute); }
@media (min-width: 768px) { .cap { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; } .cap h3 { grid-column: span 4; } .cap p { grid-column: span 6; } .cap .st { grid-column: span 2; text-align: right; } }
.matrix { margin-top: 5rem; }
.matrix h3 { margin-bottom: 0.75rem; }
.matrix .lede { margin-bottom: 2rem; }
.mx { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.mx-row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.mx-row b { font-size: 16px; font-weight: 700; }
.mx-row span { font-size: 14px; line-height: 1.6; color: var(--fg-mute); }
.mx-row span::before { content: attr(data-col); display: block; margin-bottom: 0.25rem; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mute-faint); }
.mx-head { display: none; }
@media (min-width: 768px) { .mx-row, .mx-head { grid-template-columns: 1.1fr 1.3fr 1.3fr 1.3fr; gap: 2rem; } .mx-head { display: grid; padding: 0.875rem 0; border-bottom: 1px solid var(--rule); } .mx-row span::before { display: none; } }

/* --- enter --- */
.plate { background: var(--paper); color: var(--graphite-deep); border-radius: 3px; padding: 2.5rem 1.5rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; --fg: var(--graphite-deep); --fg-mute: var(--graphite-soft); --rule: var(--paper-line); --focus: var(--graphite-deep); --bg: var(--paper); }
@media (min-width: 768px) { .plate { padding: 3.5rem 3rem; } }
@media (min-width: 1024px) { .plate { grid-template-columns: repeat(12, minmax(0, 1fr)); } .plate .pl-a { grid-column: span 7; } .plate .pl-b { grid-column: span 5; } }
.plate .lede { color: var(--graphite); margin-top: 1.5rem; }
.plate .btn-outline { border-color: var(--graphite-soft); }
.kv { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 0; border-bottom: 1px solid color-mix(in oklch, var(--paper-line) 60%, transparent); }
.kv:last-child { border-bottom: 0; }
.kv dt { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--graphite-soft); padding-top: 2px; flex: none; }
.kv dd { min-width: 0; overflow-wrap: anywhere; word-break: break-all; font-size: 13.5px; }
@media (min-width: 640px) { .kv { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; } .kv dd { text-align: right; } }

/* --- footer --- */
.foot { border-top: 1px solid var(--line); padding: 4rem 0 3rem; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .foot-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } .foot-grid .fa { grid-column: span 6; } .foot-grid .fb { grid-column: span 3; } }
.foot p { max-width: 26rem; margin-top: 1rem; font-size: 14px; line-height: 1.65; color: var(--mute); }
.foot ul { margin-top: 1rem; }
.foot li a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); font-size: 14px; color: var(--soft); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.foot li a:hover { color: var(--hi); transform: translateX(3px); }
.foot .legal { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .dot::after { display: none; }
}