/* AI Risk Coverage Monitor. Paciva tokens, instrument architecture.
   Two fonts. Orange on links only. No shadows on content surfaces. No side
   accents. Radii 5 (buttons), 8 (cards in containers), 10 (containers), 999
   (chips). 4 point grid. Theme follows the reader's clock. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; src: url("fonts/plus-jakarta-sans-800.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; src: url("fonts/inter-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url("fonts/inter-600.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #0d1321; --ink-hover: #192339; --orange: #f15a29; --orange-hover: #c44220;
  --tan-25: #fbfaf6; --tan-50: #f8f6f2; --tan-100: #efece7; --tan-200: #e6e3d9; --tan-300: #bfbdb7;
  --gray-500: #777777; --gray-600: #55565b;
  --ok: #77a817; --ok-bg: #eef5d7; --ok-deep: #4a6b0e; --warn: #c08700; --warn-bg: #fdf4dd; --danger: #ac0000; --danger-bg: #fdecea; --info: #36539f; --info-bg: #e8ecf5;
  --canvas: var(--tan-25); --surface: #ffffff; --sub: var(--tan-50); --line: var(--tan-200); --line-2: var(--tan-100);
  --fg: var(--ink); --fg-2: var(--gray-600); --fg-3: var(--gray-500);
  --inverse: #0d1321; --inverse-fg: #ffffff;
  --mark: #0d1321; --mark-2: #82828b; --mark-3: #d8d8db;
  --hl: #fde5dd;
  --head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-btn: 5px; --r-card: 8px; --r-box: 10px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}
html[data-theme="dark"] {
  --canvas: #07091a; --surface: #11172a; --sub: #1a1d2a; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.05);
  --fg: #f4f2ec; --fg-2: #b6b6bc; --fg-3: #82828b;
  --mark: #f4f2ec; --mark-2: #82828b; --mark-3: #3f3f48;
  --hl: #3d1b19; --ok-bg: #1d2a0c; --warn-bg: #2b2208; --danger-bg: #2b0d0d; --info-bg: #141c33;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; background: var(--canvas); color: var(--fg); font: 400 14px/1.4 var(--body); -webkit-font-smoothing: antialiased; overflow-anchor: none; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 36px; } h2 { font-size: 28px; letter-spacing: -0.005em; } h3 { font-size: 22px; letter-spacing: 0; }
p { margin: 0; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hover); text-decoration: underline; }
.num, td.n, .stat { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-3); }
.small { font-size: 13px; line-height: 1.4; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons: ink primary, outline secondary. Never orange. 5px radius. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-btn); border: 1px solid var(--inverse); background: var(--inverse); color: var(--inverse-fg); font: 600 14px/1 var(--body); cursor: pointer; transition: background 120ms var(--ease), color 120ms var(--ease); }
.btn:hover { background: var(--ink-hover); color: var(--inverse-fg); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.ghost:hover { background: var(--sub); color: var(--fg); }
.btn.sm { min-height: 36px; padding: 8px 12px; font-size: 13px; }
html[data-theme="dark"] .btn { background: #ffffff; color: #0d1321; border-color: #ffffff; }
html[data-theme="dark"] .btn:hover { background: #efece7; }
html[data-theme="dark"] .btn.ghost { background: transparent; color: var(--fg); border-color: var(--line); }

/* Chips: 999 radius, filled, never a button. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .04em; background: var(--sub); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok-deep); border-color: transparent; }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip.info { background: var(--info-bg); color: var(--info); border-color: transparent; }
.chip.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.chip .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }

/* The live header. Persistent, sticky, one hairline below. */
.livehead { position: sticky; top: 0; z-index: 50; background: var(--canvas); border-bottom: 1px solid var(--line); }
.livehead .in { display: grid; grid-template-columns: auto 1fr auto; gap: 16px 24px; align-items: center; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand .name { font-family: var(--head); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.brand .name:hover { text-decoration: none; }
.brand .pub { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.brand .pub img { height: 16px; width: auto; vertical-align: middle; }
.livestate { display: flex; align-items: center; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--fg-2); }
.livestate .reading { font-family: var(--head); font-weight: 800; font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; }
.livestate .clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn); color: var(--fg); font-weight: 600; font-size: 13px; }
.nav a:hover { background: var(--tan-200); text-decoration: none; color: var(--fg); }
html[data-theme="dark"] .nav a:hover { background: var(--sub); }
.nav a.on { background: var(--tan-200); }
html[data-theme="dark"] .nav a.on { background: var(--sub); }
.banner { display: none; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--warn-bg); color: var(--warn); font-weight: 600; font-size: 13px; }
.banner.show { display: block; }
.banner.stale { background: var(--danger-bg); color: var(--danger); }

/* Page grid */
.wrap { padding: 24px; padding-block: 24px 64px; max-width: 1600px; margin: 0 auto; }
.lede { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: end; padding-block: 24px 8px; }
.lede p.desc { font-size: 16px; line-height: 1.5; color: var(--fg-2); margin-top: 12px; max-width: 62ch; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.panel { grid-column: span 12; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 20px; min-width: 0; }
.panel.half { grid-column: span 6; } .panel.third { grid-column: span 4; } .panel.two-thirds { grid-column: span 8; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.panel-head > div:first-child { min-width: 0; }
.panel-head .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.panel-head h2 { font-size: 22px; margin-top: 4px; }
.panel-head .tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel > * + * { margin-top: 16px; }
.panel .note-text { color: var(--fg-2); font-size: 13.5px; line-height: 1.5; max-width: 80ch; }
.card { background: var(--sub); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 14px 16px; min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.card .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.card .stat { font-family: var(--head); font-weight: 800; font-size: 28px; line-height: 1.1; margin-top: 6px; color: var(--fg); }
.card .stat.pending { color: var(--fg-3); font-size: 18px; }
.card .sub { font-size: 12.5px; color: var(--fg-2); margin-top: 6px; }
.mbar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.mbar i { display: block; height: 100%; width: 0; background: var(--mark); border-radius: 4px; transition: width 600ms var(--ease); }


/* Tables. Zebra rows, hairlines, tabular numerals. */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
th { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); background: var(--sub); white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--sub); }
tbody tr:hover { background: var(--tan-100); }
html[data-theme="dark"] tbody tr:hover { background: #1f2334; }
td.n { text-align: right; white-space: nowrap; }
td.num { white-space: nowrap; }
td .dom { color: var(--fg-3); font-size: 12px; }

/* Small multiples */
.sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sm figure { margin: 0; padding: 10px 12px; background: var(--sub); border: 1px solid var(--line-2); border-radius: var(--r-card); }
.sm figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-2); }
.sm figcaption b { color: var(--fg); font-weight: 600; }
.sm svg { width: 100%; height: 56px; display: block; margin-top: 6px; }
.sm rect { fill: var(--mark); }
.sm rect.hover, .sm rect:hover { fill: var(--mark-2); }
.sm text { font: 10px var(--body); fill: var(--fg-3); }
.timeline { width: 100%; display: block; }
.timeline text { font: 11px var(--body); fill: var(--fg-2); }
.timeline .grid line { stroke: var(--line); }
.timeline .ax line { stroke: var(--line); }
.timeline .row-label { fill: var(--fg-2); font-weight: 600; }
.timeline circle { fill: var(--mark); }
.timeline circle.lab { fill: var(--s-lab); } .timeline circle.gov { fill: var(--s-gov); } .timeline circle.money { fill: var(--s-money); } .timeline circle.voice { fill: var(--s-voice); }
.timeline rect.bar { fill: var(--mark); }
.timeline .lane { fill: var(--sub); }
.tip { position: fixed; z-index: 90; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 10px; font-size: 12px; max-width: 320px; color: var(--fg); display: none; }
.tip.show { display: block; }

/* Compare: headline beside cited passage, computed diff */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pair .src, .pair .hl { background: var(--sub); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 14px 16px; }
.pair .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.pair blockquote { margin: 8px 0 0; font-size: 16px; line-height: 1.45; }
.pair .meta { margin-top: 8px; font-size: 12px; color: var(--fg-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hlist { display: grid; gap: 8px; }
.hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); }
.hrow .t { font-size: 14px; line-height: 1.4; }
.hrow .t mark { background: var(--hl); color: inherit; padding: 0 2px; border-radius: 2px; }
.hrow .m { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.legend { font-size: 12px; color: var(--fg-3); }
.legend mark { background: var(--hl); color: inherit; padding: 0 3px; border-radius: 2px; }

/* Lists */
.list { display: grid; gap: 8px; }
.item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); }
.item .d { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.item .t { font-size: 14px; line-height: 1.4; }
.item .t .dom { display: block; font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.item .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Notes */
.notes { border-top: 1px solid var(--line-2); padding-top: 12px; }
.notes summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--fg-2); min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary .cnt { font-variant-numeric: tabular-nums; }
.note { padding: 10px 12px; background: var(--sub); border: 1px solid var(--line-2); border-radius: var(--r-card); margin-top: 8px; }
.note .who { font-size: 12px; color: var(--fg-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.note .body { margin-top: 6px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.note .acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.note-form { display: grid; gap: 8px; margin-top: 10px; }
.note-form input, .note-form textarea, .field input, .field textarea, .field select { width: 100%; font: 400 14px/1.4 var(--body); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; }
.note-form textarea { min-height: 72px; resize: vertical; }
.ts-slot:empty { display: none; }
.ts-slot { margin-top: 4px; min-height: 0; }
.note-form input:focus, .note-form textarea:focus { outline: 3px solid var(--info-bg); border-color: var(--info); }
.note-form .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.note-form .count { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.msg { font-size: 13px; color: var(--fg-2); }
.msg.err { color: var(--danger); }

/* Share sheet: scrim, centered card, vertical rows */
.scrim { position: fixed; inset: 0; background: rgba(13,19,33,.5); z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; }
.scrim.show { display: flex; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); width: min(440px, 100%); padding: 20px; }
.sheet h3 { font-size: 20px; }
.sheet .sub { color: var(--fg-2); font-size: 13px; margin-top: 4px; }
.sheet .rows { display: grid; gap: 6px; margin-top: 14px; }
.sheet .rows button, .sheet .rows a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 600 14px/1 var(--body); cursor: pointer; text-decoration: none; width: 100%; text-align: left; }
.sheet .rows button:hover, .sheet .rows a:hover { background: var(--sub); color: var(--fg); }
.sheet .rows svg { width: 20px; height: 20px; flex: none; }
.sheet .ok { color: var(--ok-deep); font-size: 13px; margin-top: 10px; min-height: 18px; }
.sheet .x { float: right; }

/* Footer masthead */
.foot { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.foot .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 6px; }
.foot .build { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }

/* Workbench */
.wb { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 24px; align-items: start; }
#wb-svg { overflow-x: auto; }
#wb-svg .timeline { min-width: 640px; }
.wb .ctl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 16px; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; }
.wb .ctl h3 { font-size: 16px; }
.wb .ctl .grp { border-top: 1px solid var(--line-2); padding-top: 12px; margin-top: 12px; }
.wb .ctl .grp .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); margin-bottom: 8px; }
.wb label.ck { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; cursor: pointer; }
.wb label.ck input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
html[data-theme="dark"] .wb label.ck input { accent-color: #ffffff; }
.wb .rng { display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center; font-size: 13px; }
.wb .rng input[type=range] { width: 100%; min-height: 44px; accent-color: var(--ink); }
html[data-theme="dark"] .wb .rng input[type=range] { accent-color: #ffffff; }
.wb .rng output { font-variant-numeric: tabular-nums; text-align: right; }
.wb .stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.wb .stage > * { min-width: 0; }
.wb .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cite { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--sub); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 10px 12px; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .panel.half, .panel.third, .panel.two-thirds { grid-column: span 12; }
  .livehead .in { grid-template-columns: 1fr auto; }
  .livestate { grid-column: 1 / -1; justify-content: flex-start; }
  .wb { grid-template-columns: minmax(0, 1fr); }
  .wb .ctl { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .wrap { padding: 16px; padding-block: 16px 48px; }
  h1 { font-size: 28px; } h2 { font-size: 22px; }
  .lede { grid-template-columns: 1fr; gap: 16px; }
  .panel-head { flex-wrap: wrap; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > * { min-width: 0; }
  .hrow .m { white-space: normal; }
  .hrow .t, .pair blockquote, .item .t { overflow-wrap: anywhere; }
  .item { grid-template-columns: 1fr; gap: 6px; }
  .item .tags { justify-content: flex-start; }
  .hrow { grid-template-columns: 1fr; }
  .hrow .m { align-items: flex-start; }
  .livehead { position: static; }
  .livehead .in { padding: 10px 16px; gap: 8px 12px; }
  .nav { flex-wrap: wrap; }
  .brand .pub { display: none; }
  .livestate { gap: 8px 12px; font-size: 12px; }
  .livestate .reading { font-size: 16px; }
  .livestate .clock { width: 100%; }
  body { font-size: 14px; }
  .small, td, th { font-size: 12px; }
}
@media (max-width: 760px) {
  .btn.sm, .btn.ghost.sm, .sheet .rows button, .sheet .rows a { min-height: 44px; }
  .wb label.ck { min-height: 44px; }
  .panel-head .k, .card .k, .chip, .foot .k, .foot .build, .pair .k, .wb .ctl .grp .k, .item .d, .item .t .dom, .hrow .m, .legend, .note .who, .card .sub, .note-form .count, .sm figcaption, td .dom, th { font-size: 12px; }
  .timeline text, .sm text { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.field-sel { font: 400 13px/1.2 var(--body); color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 8px 10px; min-height: 36px; }

/* ===== Instrument exhibits (home) ===== */
:root { --s-lab: #36539f; --s-gov: #c08700; --s-money: #f15a29; --s-money2: #f8a990; --s-voice: #4a6b0e; --hero-bg: #0d1321; --hero-fg: #ffffff; --hero-fg2: #b6b6bc; --hero-line: rgba(255,255,255,.1); --hero-bar: #e6e3d9; }
html[data-theme="dark"] { --s-voice: #77a817; --s-gov: #d9a11a; --hero-bg: #07091a; }

.hero { background: var(--hero-bg); color: var(--hero-fg); margin: -24px -24px 0; padding: 40px 24px 0; }
.hero-in { max-width: 1552px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: end; }
.hero .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--hero-fg2); }
.hero h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin-top: 12px; color: var(--hero-fg); }
.hero .desc { font-size: 17px; line-height: 1.5; color: var(--hero-fg2); margin-top: 16px; max-width: 58ch; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 28px; }
.hero .hv { font-family: var(--head); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--hero-fg); font-variant-numeric: tabular-nums; }
.hero .hk { font-size: 12.5px; color: var(--hero-fg2); margin-top: 6px; line-height: 1.35; }
.hero-ex { min-width: 0; padding-bottom: 8px; }
.pulse { width: 100%; height: auto; display: block; }
.pulse .gl { stroke: var(--hero-line); }
.pulse .al { font: 11px var(--body); fill: var(--hero-fg2); }
.pulse .vl { font: 600 12px var(--body); fill: var(--hero-fg); }
.pulse .bar { fill: var(--hero-bar); opacity: .92; transform-box: fill-box; transform-origin: bottom center; transform: scaleY(0); transition: transform 700ms var(--ease) var(--d, 0ms); }
.pulse .line { fill: none; stroke: var(--s-money); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms var(--ease) 500ms; }
.pulse .pt { fill: var(--s-money); opacity: 0; transition: opacity 300ms var(--ease) var(--d, 0ms); }
[data-ex].on .pulse .bar { transform: scaleY(1); }
[data-ex].on .pulse .line { stroke-dashoffset: 0; }
[data-ex].on .pulse .pt { opacity: 1; }
.hero .legend-row { color: var(--hero-fg2); }
.legend-row { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-2); margin-top: 8px; align-items: center; }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--mark); flex: none; }
.sw.dot-sw { border-radius: 999px; }
.sw.line-sw { height: 3px; width: 18px; border-radius: 2px; }
.sw.bar-sw { background: var(--hero-bar); }
.sw.lab, .dot.lab, .hb-t i.lab { background: var(--s-lab); fill: var(--s-lab); }
.sw.gov, .dot.gov, .hb-t i.gov { background: var(--s-gov); fill: var(--s-gov); }
.sw.money, .dot.money, .hb-t i.money { background: var(--s-money); fill: var(--s-money); }
.sw.money2, .hb-t i.money2 { background: var(--s-money2); }
.sw.voice, .dot.voice, .hb-t i.voice { background: var(--s-voice); fill: var(--s-voice); }
.sw.s2 { background: var(--s-money); }
.sw.ink, .hb-t i.ink { background: var(--mark); }

/* live wire ticker */
.wire { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; border-top: 1px solid var(--hero-line); margin-top: 28px; padding: 10px 0; overflow: hidden; }
.wire-label { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--hero-fg2); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.wire-label::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--s-money); }
.wire-track { overflow: hidden; min-width: 0; }
.wire-run { display: flex; gap: 32px; width: max-content; animation: wire 90s linear infinite; }
.wire:hover .wire-run { animation-play-state: paused; }
@keyframes wire { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tk { display: inline-flex; gap: 10px; align-items: baseline; color: var(--hero-fg); font-size: 13px; white-space: nowrap; min-height: 32px; }
.tk:hover { color: var(--hero-fg); text-decoration: underline; }
.tk-d { font-variant-numeric: tabular-nums; color: var(--hero-fg2); }
.tk-k { font: 600 10.5px/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--hero-fg2); padding-top: 2px; }

/* exhibit grid */
.exgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; align-items: start; }
.ex { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-box); padding: 24px; min-width: 0; grid-column: span 1; }
.ex-wide { grid-column: span 2; }
.ex-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.ex-head > div:first-child { min-width: 0; }
.ex-head .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.ex-head h2 { font-size: 26px; margin-top: 6px; letter-spacing: -0.01em; }
.ex-head .lead { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); margin-top: 8px; max-width: 78ch; }
.ex > * + * { margin-top: 20px; }
.ex .k { font: 600 11px/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ex svg text { font-family: var(--body); }
.gl { stroke: var(--line); }
.al { font: 11px var(--body); fill: var(--fg-3); }
.vl { font: 600 12px var(--body); fill: var(--fg); }
.ll { font: 600 12px var(--body); fill: var(--fg-2); }
.fl { font: 12px var(--body); fill: var(--fg-2); opacity: 0; transition: opacity 400ms var(--ease) var(--d, 0ms); }
[data-ex].on .fl { opacity: 1; }

/* token grid */
.gap-passage { background: var(--sub); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 18px 20px; }
.gap-passage blockquote { margin: 8px 0 0; font-family: var(--head); font-weight: 800; font-size: 28px; line-height: 1.25; letter-spacing: -0.01em; }
.gap-passage .meta { margin-top: 10px; font-size: 12.5px; color: var(--fg-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gap-grid { display: grid; gap: 10px; }
.gap-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 16px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-card); }
.gap-src { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.gap-toks q { quotes: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tok { display: inline-block; padding: 4px 8px; border-radius: 5px; font-size: 13.5px; line-height: 1.2; border: 1px solid transparent; opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--ease) var(--d, 0ms), transform 260ms var(--ease) var(--d, 0ms); }
.tok-add { background: var(--mark); color: var(--surface); }
.tok-share { border-color: var(--mark); color: var(--fg); }
.tok-stop { color: var(--fg-3); }
[data-ex].on .tok, .tok.demo { opacity: 1; transform: none; }
.tok.demo { display: inline-block; padding: 1px 6px; font-size: 12px; }
.gap-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
.gap-meter b { font-size: 15px; }
.gap-meter .small { grid-column: 1 / -1; }
.gm { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.gm i { display: block; height: 100%; width: 0; background: var(--mark); border-radius: 5px; transition: width 800ms var(--ease) var(--d, 0ms); }
.gm.big { height: 14px; }
[data-ex].on .gm i { width: var(--w); }

/* swarm */
.swarm { width: 100%; height: auto; display: block; }
.dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity 320ms var(--ease) var(--d, 0ms), transform 420ms var(--ease) var(--d, 0ms); }
[data-ex].on .dot { opacity: .95; transform: scale(1); }
.dot:hover { opacity: 1; }

/* horizontal bars */
.hbars { display: grid; gap: 8px; }
.hbars.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.hb { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 64px; gap: 12px; align-items: center; font-size: 13px; }
.hb-l { min-width: 0; overflow-wrap: anywhere; }
.hb-t { height: 12px; background: var(--line); border-radius: 6px; overflow: hidden; }
.hb-t i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--mark); transition: width 800ms var(--ease) var(--d, 0ms); }
[data-ex].on .hb-t i { width: var(--w); }
.hb b { text-align: right; font-size: 13px; }

/* fan */
.fan { width: 100%; height: auto; display: block; }
.fan .line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--ease) var(--d, 0ms); }
.fan .line.ink { stroke: var(--mark); opacity: .8; }
.fan .line.s2 { stroke: var(--s-money); }
.fan .pt { opacity: 0; transition: opacity 300ms var(--ease) var(--d, 0ms); }
.fan .pt.ink { fill: var(--mark); } .fan .pt.s2 { fill: var(--s-money); }
[data-ex].on .fan .line { stroke-dashoffset: 0; }
[data-ex].on .fan .pt { opacity: 1; }

/* rings and gauges */
.ringwrap { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; align-items: center; }
.ring { width: 140px; height: 140px; }
.ring .track { fill: none; stroke: var(--line); stroke-width: 14; }
.ring .seg { fill: none; stroke-width: 14; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray 900ms var(--ease) var(--d, 0ms); }
[data-ex]:not(.on) .ring .seg { stroke-dasharray: 0 1000; }
.ring .seg.ink { stroke: var(--mark); } .ring .seg.s2 { stroke: var(--s-money); } .ring .seg.lab { stroke: var(--s-lab); } .ring .seg.gov { stroke: var(--s-gov); }
.ring .rv { font: 800 26px var(--head); fill: var(--fg); }
.ring .rl { font: 11px var(--body); fill: var(--fg-3); }
.ringleg { display: grid; gap: 8px; font-size: 13px; }
.ringleg .lg { display: block; }
.ringleg .lg .sw { margin-right: 6px; vertical-align: middle; }
.two.idx { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.two.idx .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gauges { display: grid; gap: 14px; }
.gauge .gv { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 13px; }
.heat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.heat .cell { position: relative; border-radius: 6px; padding: 10px 6px; text-align: center; background: var(--line); overflow: hidden; }
.heat .cell::before { content: ""; position: absolute; inset: 0; background: var(--s-voice); opacity: 0; transition: opacity 600ms var(--ease) var(--d, 0ms); }
[data-ex].on .heat .cell::before { opacity: var(--a); }
.heat .cell span, .heat .cell b { position: relative; display: block; font-size: 11px; }
.heat .cell b { font-size: 16px; margin-top: 2px; }
[data-ex].on .heat .cell[style*="--a:1"] b, [data-ex].on .heat .cell[style*="--a:0.8"] b, [data-ex].on .heat .cell[style*="--a:0.9"] b { color: #fff; }

.count { font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .hero-in { grid-template-columns: 1fr; gap: 24px; }
  .exgrid { grid-template-columns: 1fr; }
  .ex-wide { grid-column: span 1; }
  .gap-row { grid-template-columns: 1fr; gap: 8px; }
  .two, .two.idx { grid-template-columns: 1fr; }
  .hbars.two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { margin: -16px -16px 0; padding: 28px 16px 0; }
  .hero h1 { font-size: 34px; }
  .hero .hv { font-size: 32px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ex { padding: 16px; }
  .ex-head { flex-wrap: wrap; }
  .ex-head h2 { font-size: 22px; }
  .gap-passage blockquote { font-size: 22px; }
  .hb { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hb b { text-align: left; }
  .ringwrap { grid-template-columns: 1fr; justify-items: start; }
  .heat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wire-label { display: none; }
  .wire { grid-template-columns: 1fr; }
  .swarm, .fan, .pulse { min-width: 640px; }
  .ex svg.swarm, .ex svg.fan, .hero-ex svg.pulse { width: 640px; }
  .hero-ex, .ex { overflow-x: auto; }
  .tk-k { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wire-run { animation: none; }
  .wire-track { overflow-x: auto; }
  .pulse .bar, .tok, .dot, .fl, .pulse .pt, .fan .pt { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pulse .line, .fan .line { stroke-dashoffset: 0 !important; transition: none !important; }
  .gm i, .hb-t i { width: var(--w) !important; transition: none !important; }
  [data-ex]:not(.on) .ring .seg { stroke-dasharray: revert; }
  .heat .cell::before { opacity: var(--a) !important; }
}