/* Twelve Degrees tokens, generated from tokens.json by sync_from_design_system.py */
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
:root, [data-theme="dusk"] {
  color-scheme: dark;
  --ground: #0E1626;
  --surface: #152035;
  --surface-raised: #1C2A43;
  --surface-sunk: #0A111E;
  --rule: #2A3954;
  --line-strong: #66779A;
  --ink: #ECE6DA;
  --ink-muted: #A9B2C3;
  --ink-faint: #8C97AC;
  --horizon: #F0A766;
  --on-horizon: #1A1206;
  --star: #A8C3EA;
  --focus: var(--horizon);
  --strata-1: #162137;
  --strata-2: #213654;
  --strata-3: #3A5779;
  --strata-4: #C2A490;
  --sun: #F0A766;
  --chart-1: #2D6BBB;
  --chart-2: #CA6719;
  --chart-3: #079B8B;
  --chart-4: #8160B5;
  --chart-5: #886600;
  --chart-6: #CC5A7F;
  --seq-1: #1E385B;
  --seq-2: #2A4E7D;
  --seq-3: #3664A1;
  --seq-4: #487BC0;
  --seq-5: #6797D8;
  --seq-6: #8BB4EA;
  --seq-7: #B5D0F5;
  --div-neg-2: #E28D4F;
  --div-neg-1: #9B623E;
  --div-mid: #3A4256;
  --div-pos-1: #5273A0;
  --div-pos-2: #81ADE9;
  --status-good: #0CA30C;
  --status-warning: #FAB219;
  --status-serious: #EC835A;
  --status-critical: #D03B3B;
  --status-good-text: #4FCB4F;
  --status-critical-text: #F07070;
  --shadow-float: 0 12px 32px rgba(0,0,0,0.45);
}
[data-theme="dawn"] {
  color-scheme: light;
  --ground: #F3F1EC;
  --surface: #FBFAF7;
  --surface-raised: #FFFFFF;
  --surface-sunk: #E9E6DF;
  --rule: #D6D2C9;
  --line-strong: #7A7F8A;
  --ink: #131D33;
  --ink-muted: #4D5668;
  --ink-faint: #5E6676;
  --horizon: #A14F1E;
  --on-horizon: #FFFFFF;
  --star: #2B4C7E;
  --focus: var(--horizon);
  --strata-1: #162137;
  --strata-2: #213654;
  --strata-3: #3A5779;
  --strata-4: #C2A490;
  --sun: #C2622A;
  --chart-1: #4987D9;
  --chart-2: #D8732B;
  --chart-3: #079B8B;
  --chart-4: #7B5AAE;
  --chart-5: #8B6902;
  --chart-6: #DA668B;
  --seq-1: #D8E6F9;
  --seq-2: #B6CDEB;
  --seq-3: #92B4E1;
  --seq-4: #6C97D2;
  --seq-5: #487BC0;
  --seq-6: #2760A8;
  --seq-7: #124686;
  --div-neg-2: #9B4805;
  --div-neg-1: #D1966D;
  --div-mid: #E4E2DD;
  --div-pos-1: #88A7D1;
  --div-pos-2: #2A5EA0;
  --status-good: #0CA30C;
  --status-warning: #FAB219;
  --status-serious: #EC835A;
  --status-critical: #D03B3B;
  --status-good-text: #1B7A1B;
  --status-critical-text: #B02A2A;
  --shadow-float: 0 12px 32px rgba(19,29,51,0.14);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;
  --measure-prose: 38rem;
  --measure-wide: 64rem;
  --measure-page: 80rem;
  --angle-sight: 12deg;
  --font-display: Spectral, "Iowan Old Style", Georgia, serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 76px; font-weight: 300; letter-spacing: -0.01em; }
.display-l { font-family: var(--font-display); font-size: 52px; line-height: 58px; font-weight: 300; letter-spacing: -0.005em; }
.headline { font-family: var(--font-display); font-size: 36px; line-height: 42px; font-weight: 400; }
.title { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 400; }
.display-italic { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 300; font-style: italic; }
.lede { font-family: var(--font-display); font-size: 21px; line-height: 32px; font-weight: 300; }
.prose { font-family: var(--font-display); font-size: 18px; line-height: 29px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.figure { font-family: var(--font-sans); font-size: 44px; line-height: 48px; font-weight: 500; letter-spacing: -0.01em; }
.figure-s { font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.meta { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 400; }

/* Twelve Degrees components. Loads after tokens.css; every value is a token. */

.td-root, .td-page {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.td-root a, .td-page a { color: var(--star); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.td-root :focus-visible, .td-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Labels: kicker, tag, estimate ---------- */
.td-kicker {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.td-kicker--horizon { color: var(--horizon); }
.td-kicker .td-sep { color: var(--ink-faint); padding: 0 0.5em; }

.td-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px; line-height: 14px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-1);
  padding: 3px 6px 2px;
  vertical-align: middle;
}
.td-tag--horizon { color: var(--horizon); border-color: var(--horizon); }
.td-tag--solid { color: var(--on-horizon); background: var(--horizon); border-color: var(--horizon); }

/* An estimate: a figure that is a model output or a guess. The approximately-equal sign leads. */
.td-est { white-space: nowrap; }
.td-est::before { content: "\2248\2009"; color: var(--ink-faint); font-weight: 400; }
.td-est--range::before { content: ""; }

/* ---------- Rules and the twilight band ---------- */
.td-rule { border: 0; border-top: 1px solid var(--rule); margin: var(--space-8) 0; }
/* A hairline led by a 64px stroke of horizon: the section break. */
.td-rule--horizon {
  border: 0; height: 2px; margin: var(--space-8) 0;
  background:
    linear-gradient(var(--horizon), var(--horizon)) 0 0 / 64px 2px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 0 1px / 100% 1px no-repeat;
}

/* The strata: four flat bands of twilight over a horizon line. Hard stops, never a blend. */
.td-strata {
  display: block;
  height: var(--strata-height, 96px);
  background: linear-gradient(to bottom,
    var(--strata-1) 0 40%,
    var(--strata-2) 40% 66%,
    var(--strata-3) 66% 86%,
    var(--strata-4) 86% 100%);
  border-bottom: 2px solid var(--horizon);
}
.td-strata--thin { --strata-height: 16px; }
.td-strata--tall { --strata-height: 240px; }
/* The twilight sky, for covers and title slides: the strata as a gradient, stars thinning toward the glow,
   and the sun exactly 12 degrees below the horizon. Sizes follow the band's height (0.8102 = 0.1722 / tan 12deg). */
.td-strata--sight {
  position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 360' fill='%23ECE6DA'%3E%3Ccircle cx='901' cy='64' r='2.5' opacity='0.82'/%3E%3Ccircle cx='1463' cy='19' r='2.1' opacity='0.95'/%3E%3Ccircle cx='243' cy='0' r='1.6' opacity='1.00'/%3E%3Ccircle cx='320' cy='81' r='1.6' opacity='0.77'/%3E%3Ccircle cx='1853' cy='99' r='2.1' opacity='0.72'/%3E%3Ccircle cx='319' cy='38' r='1.8' opacity='0.90'/%3E%3Ccircle cx='1359' cy='17' r='1.8' opacity='0.95'/%3E%3Ccircle cx='923' cy='82' r='1.6' opacity='0.77'/%3E%3Ccircle cx='1440' cy='219' r='2.1' opacity='0.39'/%3E%3Ccircle cx='703' cy='150' r='1.4' opacity='0.58'/%3E%3Ccircle cx='1499' cy='95' r='2.1' opacity='0.74'/%3E%3Ccircle cx='1816' cy='24' r='2.5' opacity='0.93'/%3E%3Ccircle cx='696' cy='38' r='2.5' opacity='0.89'/%3E%3Ccircle cx='480' cy='169' r='1.4' opacity='0.53'/%3E%3Ccircle cx='1539' cy='87' r='2.5' opacity='0.76'/%3E%3Ccircle cx='205' cy='113' r='2.1' opacity='0.69'/%3E%3Ccircle cx='559' cy='105' r='2.1' opacity='0.71'/%3E%3Ccircle cx='1578' cy='138' r='2.1' opacity='0.62'/%3E%3Ccircle cx='1666' cy='47' r='2.5' opacity='0.87'/%3E%3Ccircle cx='1353' cy='73' r='1.8' opacity='0.80'/%3E%3Ccircle cx='626' cy='71' r='2.5' opacity='0.80'/%3E%3Ccircle cx='995' cy='137' r='1.8' opacity='0.62'/%3E%3Ccircle cx='1382' cy='189' r='2.5' opacity='0.47'/%3E%3Ccircle cx='1912' cy='51' r='2.5' opacity='0.86'/%3E%3Ccircle cx='1248' cy='57' r='1.4' opacity='0.84'/%3E%3Ccircle cx='674' cy='172' r='1.6' opacity='0.52'/%3E%3Ccircle cx='457' cy='234' r='2.1' opacity='0.35'/%3E%3Ccircle cx='1056' cy='78' r='2.5' opacity='0.78'/%3E%3Ccircle cx='1233' cy='96' r='2.5' opacity='0.73'/%3E%3Ccircle cx='735' cy='124' r='1.6' opacity='0.66'/%3E%3Ccircle cx='2' cy='28' r='2.5' opacity='0.92'/%3E%3Ccircle cx='482' cy='5' r='1.8' opacity='0.99'/%3E%3Ccircle cx='25' cy='138' r='2.1' opacity='0.62'/%3E%3Ccircle cx='1501' cy='64' r='1.6' opacity='0.82'/%3E%3Ccircle cx='1385' cy='74' r='2.1' opacity='0.79'/%3E%3Ccircle cx='1718' cy='4' r='1.8' opacity='0.99'/%3E%3Ccircle cx='1024' cy='87' r='2.5' opacity='0.76'/%3E%3Ccircle cx='1560' cy='34' r='2.5' opacity='0.90'/%3E%3Ccircle cx='1048' cy='4' r='2.1' opacity='0.99'/%3E%3Ccircle cx='583' cy='1' r='2.5' opacity='1.00'/%3E%3Ccircle cx='956' cy='86' r='2.5' opacity='0.76'/%3E%3Ccircle cx='513' cy='22' r='1.4' opacity='0.94'/%3E%3Ccircle cx='639' cy='111' r='2.1' opacity='0.69'/%3E%3Ccircle cx='1763' cy='39' r='2.1' opacity='0.89'/%3E%3Ccircle cx='1540' cy='17' r='2.5' opacity='0.95'/%3E%3Ccircle cx='1802' cy='97' r='1.8' opacity='0.73'/%3E%3Ccircle cx='505' cy='143' r='1.8' opacity='0.60'/%3E%3Ccircle cx='993' cy='35' r='1.8' opacity='0.90'/%3E%3Ccircle cx='870' cy='101' r='1.4' opacity='0.72'/%3E%3Ccircle cx='1258' cy='22' r='1.4' opacity='0.94'/%3E%3Ccircle cx='347' cy='16' r='1.6' opacity='0.95'/%3E%3Ccircle cx='389' cy='10' r='2.1' opacity='0.97'/%3E%3Ccircle cx='1270' cy='90' r='1.8' opacity='0.75'/%3E%3Ccircle cx='894' cy='26' r='1.6' opacity='0.93'/%3E%3Ccircle cx='902' cy='143' r='1.6' opacity='0.60'/%3E%3Ccircle cx='1441' cy='174' r='1.4' opacity='0.52'/%3E%3Ccircle cx='113' cy='6' r='1.6' opacity='0.98'/%3E%3Ccircle cx='1295' cy='189' r='1.6' opacity='0.47'/%3E%3Ccircle cx='1307' cy='48' r='1.4' opacity='0.87'/%3E%3Ccircle cx='788' cy='12' r='2.5' opacity='0.97'/%3E%3Ccircle cx='955' cy='203' r='2.1' opacity='0.44'/%3E%3Ccircle cx='1824' cy='50' r='2.1' opacity='0.86'/%3E%3Ccircle cx='1200' cy='114' r='2.1' opacity='0.68'/%3E%3Ccircle cx='222' cy='81' r='1.8' opacity='0.78'/%3E%3Ccircle cx='1573' cy='81' r='1.4' opacity='0.77'/%3E%3Ccircle cx='36' cy='12' r='1.4' opacity='0.97'/%3E%3Ccircle cx='127' cy='44' r='1.8' opacity='0.88'/%3E%3Ccircle cx='548' cy='16' r='2.5' opacity='0.95'/%3E%3Ccircle cx='1587' cy='113' r='2.5' opacity='0.69'/%3E%3Ccircle cx='386' cy='93' r='2.5' opacity='0.74'/%3E%3Ccircle cx='1588' cy='188' r='2.5' opacity='0.48'/%3E%3Ccircle cx='1163' cy='163' r='2.1' opacity='0.55'/%3E%3Ccircle cx='1757' cy='119' r='2.1' opacity='0.67'/%3E%3Ccircle cx='93' cy='173' r='2.1' opacity='0.52'/%3E%3Ccircle cx='1862' cy='154' r='2.1' opacity='0.57'/%3E%3Ccircle cx='1745' cy='61' r='1.8' opacity='0.83'/%3E%3Ccircle cx='754' cy='56' r='1.6' opacity='0.84'/%3E%3Ccircle cx='119' cy='128' r='1.6' opacity='0.64'/%3E%3Ccircle cx='355' cy='101' r='1.4' opacity='0.72'/%3E%3Ccircle cx='800' cy='248' r='2.5' opacity='0.31'/%3E%3Ccircle cx='928' cy='24' r='1.8' opacity='0.93'/%3E%3Ccircle cx='6' cy='101' r='2.5' opacity='0.72'/%3E%3Ccircle cx='742' cy='28' r='2.5' opacity='0.92'/%3E%3Ccircle cx='147' cy='107' r='1.4' opacity='0.70'/%3E%3Ccircle cx='1048' cy='105' r='2.1' opacity='0.71'/%3E%3Ccircle cx='1080' cy='156' r='1.6' opacity='0.57'/%3E%3Ccircle cx='626' cy='27' r='1.8' opacity='0.93'/%3E%3Ccircle cx='1400' cy='16' r='2.5' opacity='0.96'/%3E%3Ccircle cx='194' cy='50' r='1.4' opacity='0.86'/%3E%3Ccircle cx='1104' cy='114' r='1.6' opacity='0.68'/%3E%3Ccircle cx='1434' cy='70' r='7'/%3E%3Ccircle cx='840' cy='118' r='5'/%3E%3Ccircle cx='1100' cy='214' r='5.5'/%3E%3C/svg%3E") 50% 100% / cover no-repeat, linear-gradient(to bottom, var(--strata-1), var(--strata-2) 42%, var(--strata-3) 72%, var(--strata-4));
}
.td-strata--sight::after {
  content: ""; position: absolute; left: calc(72.92% - var(--strata-height, 96px) * 0.8102); top: calc(100% + 0.5px); width: calc(var(--strata-height, 96px) * 0.8283); height: 3px;
  background: var(--ink); transform-origin: 0 50%; transform: rotate(var(--angle-sight));
}
.td-strata--sight::before {
  content: ""; position: absolute; z-index: 1; left: calc(72.92% - var(--strata-height, 96px) * 0.0472); top: calc(100% + 2px + var(--strata-height, 96px) * 0.1250); width: calc(var(--strata-height, 96px) * 0.0944); height: calc(var(--strata-height, 96px) * 0.0944);
  border-radius: 50%; background: var(--sun);
}

/* ---------- Masthead (report header) ---------- */
.td-masthead { background: var(--ground); color: var(--ink); }
.td-masthead__body { max-width: var(--measure-page); margin: 0 auto; padding: var(--space-12) var(--space-8) var(--space-8); }
.td-masthead__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 52px; line-height: 58px; letter-spacing: -0.005em;
  margin: var(--space-3) 0 var(--space-4); max-width: 24ch; text-wrap: balance;
}
.td-masthead__title em { font-style: italic; color: var(--horizon); }
.td-masthead__dek {
  font-family: var(--font-display); font-weight: 300;
  font-size: 21px; line-height: 32px; color: var(--ink-muted);
  max-width: var(--measure-prose); margin: 0 0 var(--space-6);
}
.td-masthead__meta {
  font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-faint);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  border-top: 1px solid var(--rule); padding-top: var(--space-3);
}

/* ---------- Prose ---------- */
.td-prose { font-family: var(--font-display); font-size: 18px; line-height: 29px; max-width: var(--measure-prose); }
.td-prose h2 { font-weight: 400; font-size: 36px; line-height: 42px; margin: var(--space-12) 0 var(--space-4); }
.td-prose h3 { font-weight: 400; font-size: 26px; line-height: 32px; margin: var(--space-8) 0 var(--space-3); }
.td-prose p { margin: 0 0 var(--space-4); }
.td-prose strong { font-weight: 600; }
.td-prose .td-lede { font-weight: 300; font-size: 21px; line-height: 32px; color: var(--ink-muted); }

/* ---------- Figure frame ---------- */
.td-figure { margin: 0; background: var(--surface); padding: var(--space-6); border-radius: var(--radius-0); }
.td-figure__head { margin-bottom: var(--space-4); }
.td-figure__num { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.td-figure__title { font-family: var(--font-sans); font-weight: 600; font-size: 18px; line-height: 24px; margin: var(--space-1) 0 2px; }
.td-figure__sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.td-figure__body { position: relative; }
.td-figure__source {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-faint);
  border-top: 1px solid var(--rule); margin-top: var(--space-4); padding-top: var(--space-2);
}
.td-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.td-legend li { display: inline-flex; align-items: center; gap: 6px; }
.td-legend .td-swatch { width: 12px; height: 12px; border-radius: 2px; background: var(--swatch, var(--chart-1)); }
.td-legend .td-swatch--line { height: 2px; width: 16px; border-radius: 0; }

/* ---------- Almanac table ---------- */
.td-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.td-table caption { caption-side: top; text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: 16px; padding-bottom: var(--space-3); }
.td-table th {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  text-align: left; vertical-align: bottom; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line-strong);
}
.td-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.td-table th:first-child, .td-table td:first-child { padding-left: 0; }
.td-table th:last-child, .td-table td:last-child { padding-right: 0; }
.td-table .num, .td-table th.num { text-align: right; white-space: nowrap; }
.td-table tr.is-total td { font-weight: 600; border-top: 1px solid var(--line-strong); border-bottom: 0; }
.td-table tr.is-group td { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); padding-top: var(--space-4); border-bottom: 0; }
.td-table .is-key { background: var(--surface-raised); }
.td-table .is-horizon { color: var(--horizon); font-weight: 600; }
.td-table .is-muted { color: var(--ink-faint); }

/* ---------- Note (callout) ---------- */
.td-note {
  background: var(--surface-raised);
  border-top: 2px solid var(--line-strong);
  border-radius: 0 0 var(--radius-3) var(--radius-3);
  padding: var(--space-4) var(--space-4) var(--space-4);
  font-size: 15px; line-height: 22px;
}
.td-note__label { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: 6px; }
.td-note p { margin: 0 0 var(--space-2); } .td-note p:last-child { margin: 0; }
.td-note--key { border-top-color: var(--horizon); }
.td-note--key .td-note__label { color: var(--horizon); }
.td-note--caution { border-top-color: var(--status-serious); }
.td-note--caution .td-note__label::before {
  content: ""; width: 10px; height: 9px; background: var(--status-serious);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---------- Stat (hero figure) ---------- */
.td-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.td-stat__label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.td-stat__value { font-family: var(--font-sans); font-weight: 500; font-size: 44px; line-height: 48px; letter-spacing: -0.01em; color: var(--ink); }
.td-stat__value--horizon { color: var(--horizon); }
.td-stat__range { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.td-stat__note { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-faint); }
.td-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6); border-top: 1px solid var(--rule); padding-top: var(--space-4); }

/* ---------- Controls (interactives) ---------- */
.td-button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 20px;
  padding: 10px var(--space-4); border-radius: var(--radius-2);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
}
.td-button:hover { background: var(--surface-raised); }
.td-button--primary { background: var(--horizon); border-color: var(--horizon); color: var(--on-horizon); }
.td-button--primary:hover { background: var(--horizon); filter: brightness(1.06); }
.td-button--ghost { border-color: transparent; color: var(--star); }
.td-button:disabled { opacity: 0.45; cursor: not-allowed; }

.td-segmented { display: inline-flex; width: max-content; justify-self: start; border: 1px solid var(--line-strong); border-radius: var(--radius-2); padding: 2px; gap: 2px; }
.td-segmented button {
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500;
  padding: 6px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.td-segmented button[aria-pressed="true"], .td-segmented button[aria-selected="true"] {
  background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 -2px 0 var(--horizon);
}

/* ---------- Slide (16:9 at 1920x1080) ---------- */
.td-slide {
  position: relative; width: 1920px; height: 1080px; overflow: hidden;
  background: var(--ground); color: var(--ink); font-family: var(--font-sans);
  padding: var(--space-24) 120px 140px; box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}
.td-slide__kicker { font-family: var(--font-mono); font-size: 20px; line-height: 26px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--horizon); margin: 0 0 var(--space-4); }
.td-slide__title { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 72px; letter-spacing: -0.005em; margin: 0 0 var(--space-6); max-width: 28ch; text-wrap: balance; }
.td-slide__lede { font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 44px; color: var(--ink-muted); max-width: 46ch; margin: 0; }
.td-slide__folio {
  position: absolute; left: 120px; right: 120px; bottom: 48px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 16px; line-height: 20px; color: var(--ink-faint);
  border-top: 1px solid var(--rule); padding-top: var(--space-4);
}
.td-slide__folio img, .td-slide__folio svg { height: 22px; width: auto; display: block; }
.td-slide--title { padding-top: 0; }
.td-slide--title .td-strata { --strata-height: 360px; margin: 0 -120px var(--space-16); }
.td-slide--title .td-slide__title { font-weight: 300; font-size: 104px; line-height: 108px; letter-spacing: -0.01em; }

/* Slide scale: components inside a slide grow to read at a distance. */
.td-slide .td-kicker, .td-slide .td-stat__label, .td-slide .td-figure__num { font-size: 18px; line-height: 24px; }
.td-slide .td-stat__value { font-size: 72px; line-height: 76px; }
.td-slide .td-stat__range { font-size: 22px; line-height: 30px; }
.td-slide .td-table { font-size: 24px; line-height: 32px; }
.td-slide .td-table th { font-size: 16px; line-height: 20px; padding: var(--space-3) var(--space-4); }
.td-slide .td-table td { padding: var(--space-3) var(--space-4); }
.td-slide .td-note { font-size: 24px; line-height: 34px; padding: var(--space-6); }
.td-slide .td-note__label { font-size: 16px; line-height: 20px; }
.td-slide .td-tag { font-size: 15px; line-height: 18px; padding: 5px 9px 4px; }
.td-slide .td-legend { font-size: 22px; line-height: 28px; gap: var(--space-3) var(--space-8); }
.td-slide .td-legend .td-swatch { width: 18px; height: 18px; }
.td-slide .td-legend .td-swatch--line { width: 28px; height: 3px; }
.td-slide .td-figure__source { font-size: 16px; line-height: 22px; }
.td-slide .td-table tr.is-group td { font-size: 15px; line-height: 20px; padding-top: var(--space-4); }