/* Token Index: research-lab structure, editorial headlines, monospace numbers.
   Light by default; dark via OS setting or the header toggle (data-theme wins both ways). */
:root { color-scheme: light;
  --bg:#f6f5f1; --surface:#fcfcfb; --line:#e1e0d9; --grid:#ebeae4;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#008300; --c7:#6250d6; --c8:#e34948; --c-other:#c9c8c1; --c-tail:#e4e3dd;
  --good:#0a8a0a; --bad:#d03b3b; --accent:#2a78d6; --tipbg:#0b0b0b; --tipink:#f0efec;
  --serif:var(--sans);
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark;
  --bg:#111110; --surface:#1a1a19; --line:#2c2c2a; --grid:#242422; --ink:#f0efec; --ink-2:#c3c2b7; --ink-3:#898781;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767; --c-other:#4a4a46; --c-tail:#33332f;
  --good:#2fb65a; --bad:#e66767; --accent:#3987e5; --tipbg:#f0efec; --tipink:#0b0b0b; } }
:root[data-theme="dark"] { color-scheme: dark;
  --bg:#111110; --surface:#1a1a19; --line:#2c2c2a; --grid:#242422; --ink:#f0efec; --ink-2:#c3c2b7; --ink-3:#898781;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767; --c-other:#4a4a46; --c-tail:#33332f;
  --good:#2fb65a; --bad:#e66767; --accent:#3987e5; --tipbg:#f0efec; --tipink:#0b0b0b; }
:root { --s1:var(--c1); --s2:var(--c2); --s3:var(--c3); --s4:var(--c4); }

* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased }
main { max-width:1080px; margin:0 auto; padding:0 16px 72px }
a { color:inherit; text-underline-offset:2px; text-decoration-color:var(--line) } a:hover { text-decoration-color:var(--ink-2) }

header { display:flex; align-items:center; gap:24px; padding:18px 0; border-bottom:1px solid var(--line) }
header .brand { font:600 22px/1 var(--serif); letter-spacing:-.01em; text-decoration:none } header .brand small { font:400 12px var(--sans); color:var(--ink-3); margin-left:8px; letter-spacing:0 }
header nav { display:flex; gap:20px; font-size:14px; flex:1 } header nav a { color:var(--ink-2); text-decoration:none } header nav a.on, header nav a:hover { color:var(--ink) } header nav a.on { box-shadow:0 2px 0 var(--accent) }
header #asof, header .meta { color:var(--ink-3); font:12px var(--mono) }
.theme { background:none; border:1px solid var(--line); border-radius:6px; color:var(--ink-2); font:12px var(--sans); padding:4px 8px; cursor:pointer }
@media (max-width:760px){ header { flex-wrap:wrap; gap:10px 16px } header nav { order:3; width:100%; flex:none; overflow-x:auto } }

h1, h2.head { font-family:var(--sans); font-weight:600; letter-spacing:-.02em; color:var(--ink); text-wrap:balance }
h1 { font-size:30px; line-height:1.15; margin:32px 0 6px }
h2.head { font-size:20px; line-height:1.25; margin:0 }
.dek { font-size:15px; color:var(--ink-2); margin:4px 0 12px; text-wrap:balance; max-width:760px }
h2 { font-size:15px; font-weight:600; margin:40px 0 4px }
.sub { color:var(--ink-2); font-size:14px; margin:0 0 14px; max-width:820px }
.fn { color:var(--ink-3); font-size:12px; margin:6px 2px 0; max-width:820px }
.lede { font-size:16px; color:var(--ink-2); max-width:700px; margin:0; text-wrap:balance }

.hero { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px }
.ix { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 16px 6px; position:relative }
.ix .k { font:500 12px var(--sans); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em }
.ix .v { font:500 44px/1 var(--mono); letter-spacing:-.02em; margin:6px 0 2px; font-variant-numeric:tabular-nums }
.ix .v small { font:400 13px var(--sans); color:var(--ink-3); margin-left:6px; letter-spacing:0 }
.ix .d { font:12px var(--mono); color:var(--ink-3) } .ix figure { border:0; padding:4px 0 0; background:none }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 14px }
.tile .label { color:var(--ink-3); font:500 11px var(--sans); text-transform:uppercase; letter-spacing:.06em }
.tile .value { font:500 26px/1.1 var(--mono); margin:6px 0 0; font-variant-numeric:tabular-nums; letter-spacing:-.02em }
.tile .delta { font:12px var(--mono); color:var(--ink-3) }
.up { color:var(--bad) } .down { color:var(--good) }
.strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px }
.note { margin:18px 0 0; padding:14px 18px; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 8px 8px 0 }
.note .when { color:var(--ink-3); font:12px var(--mono) } .note p { margin:4px 0 0; font:500 16px/1.45 var(--sans) }

section.card { margin-top:48px }
figure { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 14px 8px; position:relative }
figure svg { width:100%; height:auto; display:block; overflow:visible }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); margin:8px 4px 2px }
.legend i { display:inline-block; width:14px; height:2px; vertical-align:middle; margin-right:6px; border-radius:1px }
.src { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--ink-3); margin:8px 2px 0 }
.act { display:flex; gap:14px } .act button { background:none; border:0; padding:0; color:var(--ink-2); font:12px var(--sans); cursor:pointer; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px } .act button:hover { color:var(--ink) }
.dt { max-height:320px; overflow:auto; margin-top:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface) }
.tip { position:absolute; pointer-events:none; display:none; z-index:5; white-space:nowrap }
.tip.card { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:5px 8px; font:11px/1.45 var(--mono); box-shadow:0 2px 8px rgba(0,0,0,.08) }
.tip.card b { font-weight:500; color:var(--ink-3) }
.tip.card.sm { font-size:10px; padding:4px 7px; line-height:1.4 }
.tip.corner { background:color-mix(in srgb, var(--surface) 90%, transparent); color:var(--ink-2); border-radius:4px; padding:2px 6px; font:11px/1.45 var(--mono); left:62px !important; top:auto !important; bottom:72px }
.tip.corner b { color:var(--ink-3); font-weight:400 }
.legend .val { font:12px var(--mono); color:var(--ink); margin-left:4px } .legend .when { font:12px var(--mono); color:var(--ink-3) }
.tag { font:500 11px var(--mono) }
.anno { font:500 12px var(--sans); fill:var(--ink-2) }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:24px } .grid2 section.card { margin-top:48px }

table { width:100%; border-collapse:collapse; font-size:14px }
th { text-align:left; color:var(--ink-3); font-weight:500; font-size:12px; padding:8px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface) }
td { padding:7px 8px; border-bottom:1px solid var(--grid); font-variant-numeric:tabular-nums } td.n { font-family:var(--mono); text-align:right; font-size:13px } th.n { text-align:right }
.kind { font:11px var(--mono); padding:2px 7px; border-radius:4px; border:1px solid var(--line); color:var(--ink-2); white-space:nowrap }
.kind.price_cut { color:var(--good); border-color:var(--good) } .kind.price_increase { color:var(--bad); border-color:var(--bad) } .kind.launch { color:var(--accent); border-color:var(--accent) }
details summary { cursor:pointer; color:var(--ink-2); font-size:14px; margin:10px 0 }
footer { margin-top:56px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px }

/* motion: lines draw in once on first view; nothing loops */
.draw .ln { stroke-dasharray:1; stroke-dashoffset:1; animation:draw .6s ease-out forwards }
@keyframes draw { to { stroke-dashoffset:0 } }
@media (prefers-reduced-motion: reduce) { .draw .ln { animation:none; stroke-dashoffset:0 } }
@media (max-width:760px){ .hero, .grid2 { grid-template-columns:1fr } .ix .v { font-size:36px } h1 { font-size:24px } h2.head { font-size:18px } }

.seg { display:inline-flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; vertical-align:middle } .seg button { background:var(--surface); border:0; border-left:1px solid var(--line); color:var(--ink-2); font:12px var(--sans); padding:4px 10px; cursor:pointer } .seg button:first-child { border-left:0 } .seg button.on { background:var(--ink); color:var(--surface) }
.ctl { display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--ink-3); margin:0 0 10px }
.sm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px } .sm { border:1px solid var(--line); border-radius:6px; padding:8px 8px 2px } .sm-t { font:600 13px var(--sans); display:flex; justify-content:space-between } .sm-v { font:500 12px var(--mono); color:var(--ink-3) } figure.sm-f { border:0; padding:0; background:none }

/* mobile footnote clamp (charts.js clampNotes): one line + arrow, tap to open */
.fn { position:relative } .fn .more { display:none }
.fn.clamp { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; padding-right:26px }
.fn.clamp.open { display:block; -webkit-line-clamp:unset; overflow:visible }
.fn.clamp .more { display:block; position:absolute; right:0; top:0; background:none; border:0; color:var(--ink-2); font:14px/1 var(--sans); padding:2px 4px; cursor:pointer; min-width:24px; min-height:24px }