@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-400-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  --canvas: #eff3f3;
  --surface: #ffffff;
  --surface-quiet: #f5f8f8;
  --surface-sunken: #e4eaea;
  --surface-brand: #e4eff0;
  --surface-inverse: #0a2024;
  --ink: #0a2024;
  --ink-muted: #4a6167;
  --ink-faint: #566c72;
  --ink-inverse: #f2f7f7;
  --line: #d2dcdd;
  --line-strong: #748a8e;
  --focus: #0a5c6b;
  --action: #0a4d5a;
  --action-hover: #073a45;
  --on-action: #ffffff;
  --action-soft: #dbeaec;
  --on-action-soft: #08414c;
  --volt: #b7e23a;
  --on-volt: #0a2024;
  --positive: #0f6549;
  --positive-soft: #dcece5;
  --on-positive-soft: #0b4b36;
  --caution: #855605;
  --caution-soft: #f6e9cf;
  --on-caution-soft: #6a4404;
  --critical: #a33322;
  --critical-soft: #f8e1dc;
  --on-critical-soft: #87281a;
  --info: #15568f;
  --info-soft: #dde8f5;
  --on-info-soft: #114a7d;
  --inference: #1d5fb0;
  --inference-soft: #e0eaf8;
  --cloud: #9c2f6a;
  --cloud-soft: #f7e2ee;
  --training: #9a5811;
  --training-soft: #f6e8d6;
  --score-0: #e8eded;
  --score-1: #cfe3de;
  --score-2: #a3cfc4;
  --score-3: #6bb3a3;
  --score-4: #2f8f82;
  --score-5: #0a5f63;
  --map-canvas: #e3e9ea;
  --map-land: #f4f7f7;
  --map-urban: #d8e0e1;
  --map-water: #b7d3e2;
  --map-relief: #dfe5e5;
  --map-boundary: #8d9fa3;
  --map-road: #c6cfd0;
  --map-rail: #aab7b9;
  --grid-380: #9c3a45;
  --grid-220: #a86a26;
  --grid-node: #3a2b2f;
  --plant-thermal: #61476a;
  --plant-hydro: #26638f;
  --plant-renewable: #2f7b4b;
  --carrier: #1f5fa8;
  --campus-announced: #b5410f;
  --plot-pin: #0a4d5a;
  --overlay: #0a202473;
  --shadow-xs: 0 1px 2px rgba(10, 32, 36, 0.06);
  --shadow-sm: 0 1px 2px rgba(10, 32, 36, 0.06), 0 6px 16px rgba(10, 32, 36, 0.07);
  --shadow-md: 0 8px 24px rgba(10, 32, 36, 0.10);
  --shadow-lg: 0 18px 48px rgba(10, 32, 36, 0.18);
}
[data-theme="dark"] {
  --canvas: #081215;
  --surface: #0f1d21;
  --surface-quiet: #142529;
  --surface-sunken: #050d0f;
  --surface-brand: #0f2e34;
  --surface-inverse: #e9f0f0;
  --ink: #e6efef;
  --ink-muted: #a2b7b9;
  --ink-faint: #93a9ad;
  --ink-inverse: #08181c;
  --line: #243539;
  --line-strong: #5a7479;
  --focus: #c3e94e;
  --action: #c3e94e;
  --action-hover: #d6f56a;
  --on-action: #07171a;
  --action-soft: #14343a;
  --on-action-soft: #b7e0e6;
  --volt: #c3e94e;
  --on-volt: #07171a;
  --positive: #4fc08d;
  --positive-soft: #0d2c22;
  --on-positive-soft: #84d8ae;
  --caution: #e0b355;
  --caution-soft: #302511;
  --on-caution-soft: #e9c67c;
  --critical: #f08a6f;
  --critical-soft: #381c15;
  --on-critical-soft: #f6a894;
  --info: #74aef0;
  --info-soft: #10283d;
  --on-info-soft: #9cc7f5;
  --inference: #76a9f2;
  --inference-soft: #11263f;
  --cloud: #ee87bd;
  --cloud-soft: #33132a;
  --training: #e3a45c;
  --training-soft: #33240f;
  --score-0: #16242a;
  --score-1: #1b3f47;
  --score-2: #1f6b6b;
  --score-3: #35997e;
  --score-4: #6fc465;
  --score-5: #c3e94e;
  --map-canvas: #060e11;
  --map-land: #101c20;
  --map-urban: #1d2f34;
  --map-water: #16333f;
  --map-relief: #0b1418;
  --map-boundary: #4a5f64;
  --map-road: #33454a;
  --map-rail: #2b3c41;
  --grid-380: #e58593;
  --grid-220: #e7a95f;
  --grid-node: #f0e2e5;
  --plant-thermal: #c9a6d6;
  --plant-hydro: #7fb8e6;
  --plant-renewable: #7fd39b;
  --carrier: #8db8f5;
  --campus-announced: #ff9463;
  --plot-pin: #c3e94e;
  --overlay: #00060899;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --control-sm: 28px;
  --control-md: 34px;
  --control-lg: 40px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --sidebar: 232px;
  --content-max: 1320px;
  --reading-max: 72ch;
  --touch-min: 44px;
  --border-hair: 1px;
  --border-strong: 2px;
  --border-marker: 3px;
  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.display-1 { font-family: var(--font-display); font-size: 56px; line-height: 56px; font-weight: 600; letter-spacing: -0.03em; }
.display-2 { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.025em; }
.display-3 { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.display-4 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.015em; }
.editorial-1 { font-family: var(--font-serif); font-size: 52px; line-height: 54px; font-weight: 400; font-style: italic; }
.editorial-2 { font-family: var(--font-serif); font-size: 30px; line-height: 36px; font-weight: 400; font-style: italic; }
.editorial-lead { font-family: var(--font-serif); font-size: 20px; line-height: 30px; font-weight: 400; font-style: italic; }
.title-l { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.title-m { font-family: var(--font-sans); font-size: 17px; line-height: 23px; font-weight: 600; }
.title-s { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.body-l { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 13px; line-height: 19px; font-weight: 400; }
.ui { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.ui-s { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; }
.data-1 { font-family: var(--font-mono); font-size: 40px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; }
.data-2 { font-family: var(--font-mono); font-size: 28px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; }
.data-3 { font-family: var(--font-mono); font-size: 20px; line-height: 24px; font-weight: 500; }
.data-4 { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: 0.09em; }
.label-s { font-family: var(--font-mono); font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: 0.1em; }
.meta { font-family: var(--font-mono); font-size: 12px; line-height: 17px; font-weight: 400; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }