@layer reset, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, dl, dd, fieldset, figure { margin: 0; }
  img { max-width: 100%; display: block; }
}

@layer base {
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/assets/fonts/archivo/vietnamese-d70993a3.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/assets/fonts/archivo/latin-ext-f1d50082.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/assets/fonts/archivo/latin-2348e0b4.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Fragment Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/fragment-mono/cyrillic-ext-e50da438.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face {
    font-family: "Fragment Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/fragment-mono/latin-ext-3f7f026d.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Fragment Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/fragment-mono/latin-c9e9ecb2.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/cyrillic-ext-b428c8a7.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/cyrillic-e59d7d10.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/symbols2-6ad17d12.woff2") format("woff2");
    unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/vietnamese-2251afc9.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/latin-ext-1a2f930e.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/latin-a600ad3f.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/cyrillic-ext-b428c8a7.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/cyrillic-e59d7d10.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/symbols2-6ad17d12.woff2") format("woff2");
    unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/vietnamese-2251afc9.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/latin-ext-1a2f930e.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/geist-mono/latin-a600ad3f.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    color-scheme: light dark;

    &[data-theme="light"] { color-scheme: light; }
    &[data-theme="dark"] { color-scheme: dark; }

    --color-surface: light-dark(oklch(94.2% 0.007 90), oklch(19% 0.004 90));
    --color-card: light-dark(oklch(96.6% 0.005 90), oklch(23% 0.004 90));
    --color-panel: light-dark(oklch(97.6% 0.004 90), oklch(23.5% 0.004 90));
    --color-panel-hover: light-dark(oklch(99% 0.003 90), oklch(26.5% 0.004 90));
    --color-text: light-dark(oklch(24% 0.006 90), oklch(91% 0.004 90));
    --color-text-muted: light-dark(oklch(47% 0.006 90), oklch(69% 0.005 90));
    --color-text-subtle: light-dark(oklch(60% 0.005 90), oklch(56% 0.005 90));
    --color-border: light-dark(oklch(25% 0.01 90 / 0.14), oklch(100% 0 0 / 0.1));
    --color-border-strong: light-dark(oklch(25% 0.01 90 / 0.28), oklch(100% 0 0 / 0.2));
    --color-hover-wash: light-dark(oklch(25% 0.01 90 / 0.05), oklch(100% 0 0 / 0.05));
    --color-panel-shadow-near: light-dark(oklch(25% 0.01 90 / 0.06), oklch(0% 0 0 / 0.45));
    --color-panel-shadow-far: light-dark(oklch(25% 0.01 90 / 0.05), oklch(0% 0 0 / 0.35));

    --accent-light: oklch(0.52 0.13 85);
    --accent-dark: oklch(0.87 0.16 95);
    --gradient-top-light: oklch(0.88 0.16 100);
    --gradient-bottom-light: oklch(0.72 0.16 70);
    --gradient-top-dark: oklch(0.93 0.15 105);
    --gradient-bottom-dark: oklch(0.78 0.16 75);
    --on-gradient-light: oklch(0.2 0.01 260);
    --on-gradient-dark: oklch(0.2 0.01 260);
    --logo-top-light: oklch(0.8 0.16 92);
    --logo-bottom-light: oklch(0.6 0.15 66);
    --logo-top-dark: oklch(0.93 0.15 105);
    --logo-bottom-dark: oklch(0.78 0.16 75);

    --color-accent: light-dark(var(--accent-light), var(--accent-dark));
    --color-accent-faint: light-dark(oklch(from var(--accent-light) l c h / 0.08), oklch(from var(--accent-dark) l c h / 0.1));
    --color-accent-soft: light-dark(oklch(from var(--accent-light) l c h / 0.12), oklch(from var(--accent-dark) l c h / 0.16));
    --color-accent-on-soft: light-dark(oklch(0.42 0.1 80), var(--accent-dark));
    --color-accent-text: light-dark(oklch(0.46 0.11 80), var(--accent-dark));
    --color-accent-on-tint: light-dark(oklch(0.46 0.11 80), var(--accent-dark));
    --color-wipe-fill: color-mix(in oklch, var(--color-accent) 16%, var(--color-surface));
    --color-wipe-border: color-mix(in oklch, var(--color-accent) 55%, var(--color-surface));
    --color-correct: var(--color-accent);
    --color-incorrect: light-dark(oklch(54% 0.17 25), oklch(72% 0.15 25));
    --color-incorrect-faint: light-dark(oklch(54% 0.17 25 / 0.07), oklch(72% 0.15 25 / 0.1));
    --color-cell-fill: light-dark(oklch(42% 0.006 90), oklch(82% 0.004 90));
    --color-cell-on-fill: light-dark(oklch(97% 0.004 90), oklch(19% 0.004 90));

    --color-gradient-top: light-dark(var(--gradient-top-light), var(--gradient-top-dark));
    --color-gradient-bottom: light-dark(var(--gradient-bottom-light), var(--gradient-bottom-dark));
    --color-on-gradient: light-dark(var(--on-gradient-light), var(--on-gradient-dark));
    --color-scrub-start: light-dark(oklch(0.6 0.15 88), var(--gradient-top-dark));
    --color-scrub-end: light-dark(oklch(0.5 0.13 70), var(--gradient-bottom-dark));
    --color-logo-pass: light-dark(oklch(0.2 0.01 260), oklch(0.95 0.003 260));
    --color-logo-top: light-dark(var(--logo-top-light), var(--logo-top-dark));
    --color-logo-bottom: light-dark(var(--logo-bottom-light), var(--logo-bottom-dark));
    --logo-gradient: linear-gradient(180deg, var(--color-gradient-top), var(--color-gradient-bottom));
    --logo-gradient-rule: linear-gradient(90deg, var(--color-gradient-top), var(--color-gradient-bottom));

    --color-photo: light-dark(oklch(86% 0.016 245), oklch(28% 0.016 245));

    --color-glass-fill: light-dark(oklch(98% 0.004 90 / 0.78), oklch(15% 0.004 90 / 0.7));
    --color-glass-ring: light-dark(oklch(25% 0.01 90 / 0.14), oklch(100% 0 0 / 0.12));
    --color-glass-shadow: light-dark(oklch(25% 0.01 90 / 0.08), oklch(0% 0 0 / 0.4));

    --lens-ink: light-dark(oklch(from var(--accent-light) l c h / 0.95), oklch(from var(--accent-dark) l c h / 0.95));

    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000'%3E%3Cstyle%3Epolyline,path,circle,rect%7Bfill:none%3Bstroke:%23000%3Bstroke-width:1.1%3Bstroke-linejoin:round%7D.solid%7Bfill:%23000%7Dtext%7Bfont-family:ui-monospace,monospace%3Bfill:%23000%3Bstroke:none%3Bletter-spacing:.04em%7D%3C/style%3E%3Cpolyline points='0,110 1600,110'/%3E%3Ctext x='40' y='100' font-size='12' text-anchor='start'%3E8%22-STM-001%3C/text%3E%3Cpath class='solid' d='M1006,110 L994,105 L994,115 Z'/%3E%3Cpolyline points='0,930 1600,930'/%3E%3Ctext x='40' y='920' font-size='12' text-anchor='start'%3E3%22-CND-002%3C/text%3E%3Cpath class='solid' d='M694,930 L706,925 L706,935 Z'/%3E%3Cpolyline points='1540,0 1540,1000'/%3E%3Cpath d='M1531,507 L1549,507 L1531,533 L1549,533 Z'/%3E%3Ctext x='1528' y='560' font-size='12' text-anchor='end'%3E2%22-DRN-003%3C/text%3E%3Crect x='180' y='230' width='380' height='120' rx='60'/%3E%3Ctext x='370' y='380' font-size='12' text-anchor='middle'%3ED-101%3C/text%3E%3Ctext x='370' y='396' font-size='10' text-anchor='middle'%3ESTEAM DRUM%3C/text%3E%3Cpolyline points='500,230 500,110'/%3E%3Cpath d='M491,157 L509,157 L491,183 L509,183 Z'/%3E%3Cpath class='solid' d='M500,129 L495,141 L505,141 Z'/%3E%3Cpolyline points='260,230 260,175'/%3E%3Cpath d='M248,195 L272,195 L260,175 Z'/%3E%3Cpath d='M284,163 L284,187 L260,175 Z'/%3E%3Cpolyline points='260,172 252,166 268,160 252,154 268,148 260,142'/%3E%3Cpolyline points='284,175 330,175 330,135'/%3E%3Ctext x='338' y='140' font-size='10' text-anchor='start'%3ETO ATM%3C/text%3E%3Ccircle cx='205' cy='172' r='22'/%3E%3Ctext x='205' y='168' font-size='11' text-anchor='middle'%3EPSV%3C/text%3E%3Ctext x='205' y='185' font-size='11' text-anchor='middle'%3E104%3C/text%3E%3Cpolyline points='410,230 410,200'/%3E%3Ccircle cx='410' cy='178' r='22'/%3E%3Ctext x='410' y='174' font-size='11' text-anchor='middle'%3EPI%3C/text%3E%3Ctext x='410' y='191' font-size='11' text-anchor='middle'%3E105%3C/text%3E%3Cpolyline points='560,262 620,262'/%3E%3Cpolyline points='560,318 620,318'/%3E%3Cpolyline points='620,262 620,318'/%3E%3Cpolyline points='620,290 638,290'/%3E%3Ccircle cx='660' cy='290' r='22'/%3E%3Ctext x='660' y='286' font-size='11' text-anchor='middle'%3ELT%3C/text%3E%3Ctext x='660' y='303' font-size='11' text-anchor='middle'%3E102%3C/text%3E%3Cpolyline points='682,290 738,290' stroke-dasharray='7 5'/%3E%3Ccircle cx='760' cy='290' r='22'/%3E%3Cpolyline points='738,290 782,290'/%3E%3Ctext x='760' y='286' font-size='11' text-anchor='middle'%3ELIC%3C/text%3E%3Ctext x='760' y='303' font-size='11' text-anchor='middle'%3E102%3C/text%3E%3Cpolyline points='760,312 760,622' stroke-dasharray='7 5'/%3E%3Cpolyline points='120,930 120,700 268,700'/%3E%3Cpath d='M111,807 L129,807 L111,833 L129,833 Z'/%3E%3Cpath class='solid' d='M120,754 L115,766 L125,766 Z'/%3E%3Ccircle cx='300' cy='700' r='32'/%3E%3Cpolyline points='280,726 268,748 332,748 320,726'/%3E%3Ctext x='300' y='775' font-size='12' text-anchor='middle'%3EP-101%3C/text%3E%3Ctext x='300' y='790' font-size='10' text-anchor='middle'%3EBFW PUMP%3C/text%3E%3Cpolyline points='300,668 746,668'/%3E%3Cpolyline points='774,668 880,668 880,420 470,420 470,350'/%3E%3Ctext x='440' y='656' font-size='12' text-anchor='start'%3E4%22-BFW-101%3C/text%3E%3Cpath d='M387,659 L387,677 L413,659 L413,677 Z'/%3E%3Cpath class='solid' d='M400,668 L413,659 L413,677 Z'/%3E%3Cpath d='M527,659 L527,677 L553,659 L553,677 Z'/%3E%3Cpolyline points='636,656 636,680'/%3E%3Cpolyline points='644,656 644,680'/%3E%3Cpolyline points='640,680 640,708'/%3E%3Ccircle cx='640' cy='730' r='22'/%3E%3Ctext x='640' y='726' font-size='11' text-anchor='middle'%3EFT%3C/text%3E%3Ctext x='640' y='743' font-size='11' text-anchor='middle'%3E107%3C/text%3E%3Cpath d='M747,659 L747,677 L773,659 L773,677 Z'/%3E%3Cpolyline points='760,668 760,646'/%3E%3Cpath d='M746,646 A14,14 0 0 1 774,646 Z'/%3E%3Ctext x='790' y='700' font-size='10' text-anchor='start'%3EFV-103%3C/text%3E%3Cpath class='solid' d='M880,534 L875,546 L885,546 Z'/%3E%3Cpath class='solid' d='M594,420 L606,415 L606,425 Z'/%3E%3Cpolyline points='900,110 900,140'/%3E%3Ccircle cx='900' cy='162' r='22'/%3E%3Ctext x='900' y='158' font-size='11' text-anchor='middle'%3ETT%3C/text%3E%3Ctext x='900' y='175' font-size='11' text-anchor='middle'%3E106%3C/text%3E%3Cpolyline points='1180,110 1180,422'/%3E%3Cpath d='M1171,207 L1189,207 L1171,233 L1189,233 Z'/%3E%3Cpath class='solid' d='M1180,306 L1175,294 L1185,294 Z'/%3E%3Ccircle cx='1180' cy='470' r='48'/%3E%3Cpolyline points='1132,470 1150,470 1162,446 1180,494 1198,446 1210,470 1228,470'/%3E%3Ctext x='1180' y='540' font-size='12' text-anchor='middle'%3EE-201%3C/text%3E%3Cpolyline points='980,470 1132,470'/%3E%3Cpolyline points='1228,470 1420,470'/%3E%3Ctext x='930' y='450' font-size='10' text-anchor='start'%3EHW RETURN%3C/text%3E%3Ctext x='1360' y='495' font-size='10' text-anchor='start'%3EHW SUPPLY%3C/text%3E%3Cpath class='solid' d='M1066,470 L1054,465 L1054,475 Z'/%3E%3Cpath class='solid' d='M1296,470 L1284,465 L1284,475 Z'/%3E%3Cpolyline points='1340,470 1340,452'/%3E%3Ccircle cx='1340' cy='430' r='22'/%3E%3Ctext x='1340' y='426' font-size='11' text-anchor='middle'%3ETT%3C/text%3E%3Ctext x='1340' y='443' font-size='11' text-anchor='middle'%3E202%3C/text%3E%3Cpolyline points='1180,518 1180,588'/%3E%3Crect x='1168' y='588' width='24' height='24'/%3E%3Ctext x='1180' y='605' font-size='11' text-anchor='middle'%3ET%3C/text%3E%3Cpolyline points='1180,612 1180,930'/%3E%3Crect x='1300' y='640' width='110' height='200' rx='40'/%3E%3Ctext x='1355' y='745' font-size='12' text-anchor='middle'%3ET-301%3C/text%3E%3Ctext x='1355' y='761' font-size='10' text-anchor='middle'%3ECOND TANK%3C/text%3E%3Cpolyline points='1355,840 1355,930'/%3E%3Cpolyline points='1355,640 1355,600'/%3E%3Ctext x='1365' y='605' font-size='10' text-anchor='start'%3EVENT%3C/text%3E%3C/svg%3E");
    --texture-size: 1600px 1000px;
    --texture-position: -663px 20px;
    --texture-ink: light-dark(oklch(25% 0.01 90 / 0.015), oklch(100% 0 0 / 0.01));
    --lens-radius: 240px;
    --lens-opacity: 0.12;

    --font-body: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --font-section: "Fragment Mono", ui-monospace, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-section: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3.25rem;
    --text-5xl: 4.5rem;
    --text-hero: 6.5rem;

    --line-height-display: 1.04;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --tracking-caps: 0.08em;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    --radius-sharp: 2px;
    --bracket: 0.75rem;

    --shell: 72rem;
    --measure: 40rem;
    --gutter: var(--space-6);

    --duration-fill: 200ms;
    --duration-wipe: 650ms;
    --wipe-feather: 24px;
    --duration-spring: 420ms;
    --duration-glow: 300ms;
    --duration-text-reveal: 700ms;
    --duration-count: 1400ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --mx: -2000px;
    --my: -2000px;

    --color-fill-contrast: light-dark(oklch(99% 0 0), oklch(20% 0.004 90));
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;
    --duration-fast: 150ms;
    --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

    @media (max-width: 32rem) {
      --gutter: var(--space-4);
    }
  }

  html { scroll-padding-block-start: calc(var(--header-h, 0px) + var(--space-4)); }

  body {
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font-family: var(--font-display); }

  h1 {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    margin-block-end: var(--space-4);
  }

  h2 {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--line-height-tight);
    margin-block: var(--space-6) var(--space-3);
  }

  p { max-width: 36em; }

  code {
    font-family: var(--font-mono);
    font-size: 0.925em;
  }

  a { color: var(--color-accent); }

  button {
    font: inherit;
    cursor: pointer;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    *:not(.flow-notice), *::before, *::after {
      transition: none !important;
      animation: none !important;
    }
  }
}

@layer components {
  .page {
    position: relative;
    isolation: isolate;
    min-block-size: 100svh;

    &::before, &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      mask-image: var(--texture);
      mask-size: var(--texture-size);
      mask-position: var(--texture-position);
    }

    &::before { background: var(--texture-ink); }

    &::after {
      background: var(--lens-ink);
      mask-image:
        radial-gradient(circle var(--lens-radius) at var(--mx) var(--my), #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 100%),
        var(--texture);
      mask-size: 100% 100%, var(--texture-size);
      mask-position: 0 0, var(--texture-position);
      mask-composite: intersect;
      opacity: 0;
      transition: opacity var(--duration-glow) var(--ease-out);
    }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .page[data-pointer]::after { opacity: var(--lens-opacity); }
  }

  .shell {
    inline-size: min(100% - 2 * var(--gutter), var(--shell));
    margin-inline: auto;
  }

  .mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    padding: var(--space-4) var(--gutter) 0;
  }

  .site-header-bar {
    max-inline-size: var(--shell);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    min-block-size: 3.5rem;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
    border-radius: var(--radius-sharp);
    background: var(--color-glass-fill);
    box-shadow:
      inset 0 0 0 1px var(--color-glass-ring),
      0 8px 24px var(--color-glass-shadow);
    backdrop-filter: blur(14px);
  }

  .product-identity {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .brand {
    display: block;
    inline-size: 6.5rem;

    svg { display: block; inline-size: 100%; block-size: auto; }

    .logo-pass { fill: var(--color-logo-pass); }
  }

  .part-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    block-size: var(--space-6);
    padding: 3px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sharp);

    form { display: flex; margin: 0; }

    .part-option {
      display: inline-flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      gap: 0.3em;
      padding: 0 var(--space-3);
      border: 0;
      border-radius: 1px;
      background: transparent;
      color: var(--color-text-muted);
      font: inherit;
      font-size: var(--text-xs);
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: color var(--duration-fill) var(--ease-out);

      &:hover { background: transparent; color: var(--color-text); }
      &:focus-visible { outline-offset: -2px; }

      &.active {
        background: color-mix(in oklch, var(--color-accent) 16%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent) 50%, transparent);
        color: var(--color-text);
        cursor: default;
      }
    }
  }

  .site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);

    a, .nav-more-toggle {
      padding: 0;
      border: 0;
      background: none;
      color: var(--color-text-muted);
      font-size: var(--text-sm);
      font-weight: 400;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;

      &:hover { background: none; color: var(--color-text); }
    }

    .nav-home {
      padding: var(--space-3);
      margin: calc(-1 * var(--space-3));

      svg { display: block; }
    }

    .nav-curriculum { order: 1; }
    .nav-podcasts { order: 2; }
    .nav-exam { order: 3; }
    .nav-progress { order: 4; }
    .nav-account, .nav-signin { order: 5; }
    .theme-toggle { order: 6; }
  }

  .nav-more, .nav-more-panel { display: contents; }

  .nav-more-toggle {
    display: none;
    align-items: center;
    gap: var(--space-1);

    svg { transition: transform var(--duration-fill) var(--ease-out); }

    &:has(+ :popover-open) { color: var(--color-text); }

    &:has(+ :popover-open) svg { transform: rotate(180deg); }
  }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sharp);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;

    &:hover { background: var(--color-hover-wash); color: var(--color-text); }

    svg { display: block; }

    .sun { display: none; }
  }

  :root[data-theme="dark"] .theme-toggle {
    .sun { display: block; }
    .moon { display: none; }
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle {
      .sun { display: block; }
      .moon { display: none; }
    }
  }

  .flow-notice {
    position: absolute;
    inset-block-start: calc(100% + var(--space-3));
    inset-inline-start: max(var(--gutter), (100% - var(--shell)) / 2);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: calc(100% - 2 * var(--gutter));
    overflow: hidden;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    box-shadow: 0 1px 2px var(--color-panel-shadow-near), 0 16px 36px var(--color-panel-shadow-far);
    font-size: var(--text-sm);
    animation: notice-drop 360ms var(--ease-out), notice-gone 300ms var(--ease-out) 5s forwards;

    @media (prefers-reduced-motion: reduce) {
      animation: notice-gone 0s 5s forwards;
    }

    .glyph { flex: none; inline-size: 14px; block-size: 14px; color: var(--color-accent); }

    &::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      block-size: 2px;
      background: var(--color-accent);
      transform-origin: left;
      animation: notice-timer 5s linear forwards;
    }
  }

  .notice-link {
    margin-inline-start: var(--space-2);
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  @keyframes notice-drop { from { opacity: 0; translate: 0 -0.5rem; } }
  @keyframes notice-timer { to { scale: 0 1; } }
  @keyframes notice-gone { to { opacity: 0; translate: 0 -0.5rem; visibility: hidden; } }

  .site-footer {
    margin-block-start: var(--space-12);
    padding-block: var(--space-6) var(--space-12);
    font-size: var(--text-sm);

    a { color: var(--color-text-muted); text-decoration: none; }

    a:hover { color: var(--color-text); }
  }

  .site-footer--compact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    border-block-start: 1px solid var(--color-border);

    p { color: var(--color-text-muted); }
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
  }

  .site-footer--full {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-6);
    border-block-start: 1px solid var(--color-border-strong);

    .brand { inline-size: 5.5rem; margin-block-end: var(--space-3); }

    p { max-inline-size: 30em; color: var(--color-text-muted); }

    .site-nav { align-self: start; }

    .mono-label { grid-column: 1 / -1; }
  }

  .flash {
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-4);
    border: 1px solid color-mix(in oklab, var(--color-incorrect) 40%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in oklab, var(--color-incorrect) 7%, transparent);
    font-size: var(--text-sm);

    &.notice {
      border-color: color-mix(in oklab, var(--color-correct) 40%, transparent);
      background: color-mix(in oklab, var(--color-correct) 7%, transparent);
    }
  }

  main { padding-block-start: var(--space-6); }

  .content-narrow {
    inline-size: 100%;
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .breadcrumb {
    font-size: var(--text-sm);
    margin-block-end: var(--space-4);

    a {
      color: var(--color-text-subtle);
      text-decoration: none;

      &:hover { color: var(--color-text); text-decoration: underline; }
    }
  }

  .meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-block-start: var(--space-3);

    form { margin: 0; }
  }

  .unit-code {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
    margin-inline-end: var(--space-1);
  }

  .empty-state-action { margin-block-start: var(--space-4); }

  @media (max-width: 32rem) {
    .site-header-bar { padding-inline-start: var(--space-4); }

    .product-identity, .site-nav { flex-basis: 100%; }

    .product-identity { justify-content: space-between; }

    .site-nav {
      gap: var(--space-2) var(--space-4);

      .theme-toggle { margin-inline-start: auto; }

      .nav-more { order: 4; }
    }

    .nav-more { display: block; }

    .nav-more-toggle { display: inline-flex; }

    .nav-more-panel {
      position: fixed;
      inset: calc(var(--header-h, 0px) + var(--space-2)) calc(var(--gutter) + var(--space-3)) auto calc(var(--gutter) + var(--space-4));
      inline-size: auto;
      margin: 0;
      display: none;
      padding: var(--space-2) 0;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      box-shadow:
        0 1px 2px var(--color-panel-shadow-near),
        0 12px 32px var(--color-panel-shadow-far);

      .site-nav & a {
        padding: var(--space-3) var(--space-4);
        color: var(--color-text);
        font-size: var(--text-base);
        text-align: start;

        &:hover, &:focus-visible { background: var(--color-hover-wash); }

        &:focus-visible { outline-offset: -2px; }
      }

      &:popover-open { display: grid; }
    }

    .site-footer--full { grid-template-columns: 1fr; }
  }
}