:root {
      color-scheme: light;
      --bg: #f8f8ff;
      --surface: #ffffff;
      --surface-2: #f0f1fe;
      --panel: rgba(255, 255, 255, 0.94);
      --table-bg: rgba(255, 255, 255, 0.94);
      --thead-bg: rgba(240, 241, 254, 0.98);
      --card-grad-a: rgba(255, 255, 255, 1);
      --card-grad-b: rgba(248, 248, 255, 1);
      --revealed-grad-b: rgba(240, 241, 254, 1);
      --button-bg: #ffffff;
      --sound-bg: #e6e6ff;
      --sound-ink: #272962;
      --sound-border: rgba(91, 91, 214, 0.38);
      --front-example-bg: rgba(248, 248, 255, 0.98);
      --meaning-chip-bg: rgba(240, 241, 254, 0.98);
      --rank-bg: #e6e6ff;
      --rank-ink: #3c3c92;
      --code-bg: rgba(240, 241, 254, 0.96);
      --code-ink: #3e3e5a;
      --track-bg: #e4e4ef;
      --grid-line: rgba(39, 41, 98, 0.042);
      --ink: #1f1f28;
      --muted: #65636d;
      --line: #d9d9e3;
      --teal: #5b5bd6;
      --teal-dark: #4c47b9;
      --primary-ink: #ffffff;
      --green: #18794e;
      --amber: #ad5700;
      --red: #cd2b31;
      --blue: #3e63dd;
      --gold: #5b5bd6;
      --purple: #8e4ec6;
      --accent-2: #d6409f;
      --accent-3: #0d9b78;
      --accent-4: #e89200;
      --logo-a: #5b5bd6;
      --logo-b: #8e8cfd;
      --theme-1: #5b5bd6;
      --theme-2: #8e8cfd;
      --theme-3: #d6409f;
      /* Readable ink for anything filled with the first or last theme colour.
         White covers every palette except two light ones, which override
         below — Deutschland's gold and Bavaria's white are both far too light
         to carry white text. */
      --theme-1-ink: #ffffff;
      --theme-3-ink: #ffffff;
      --shadow: 0 14px 0 rgba(91, 91, 214, 0.08), 0 24px 44px rgba(31, 31, 40, 0.14);
      --radius: 8px;
    }

    :root[data-theme="dark"][data-palette] {
      color-scheme: dark;
      --bg: #111113;
      --surface: #19191f;
      --surface-2: #202248;
      --panel: rgba(25, 25, 31, 0.96);
      --table-bg: rgba(25, 25, 31, 0.94);
      --thead-bg: rgba(32, 34, 72, 0.96);
      --card-grad-a: rgba(28, 28, 35, 1);
      --card-grad-b: rgba(22, 22, 28, 1);
      --revealed-grad-b: rgba(32, 34, 72, 1);
      --button-bg: #23232b;
      --sound-bg: #2e2f62;
      --sound-ink: #e0dffe;
      --sound-border: rgba(142, 140, 253, 0.52);
      --front-example-bg: rgba(32, 34, 72, 0.72);
      --meaning-chip-bg: rgba(46, 47, 98, 0.72);
      --rank-bg: #2e2f62;
      --rank-ink: #e0dffe;
      --code-bg: rgba(32, 34, 72, 0.82);
      --code-ink: #e0dffe;
      --track-bg: #30303b;
      --grid-line: rgba(255, 255, 255, 0.04);
      --ink: #eeeef0;
      --muted: #b4b4bd;
      --line: #3a3a48;
      --teal: #5753c6;
      --teal-dark: #c4c3ff;
      --primary-ink: #ffffff;
      --green: #5bb98c;
      --amber: #f2b45f;
      --red: #ff8b8f;
      --blue: #8da4ef;
      --gold: #8e8cfd;
      --purple: #d19dff;
      --accent-2: #f65cb6;
      --accent-3: #35c89f;
      --accent-4: #ffbd4a;
      --logo-a: #5b5bd6;
      --logo-b: #8e8cfd;
      --shadow: 0 14px 0 rgba(0, 0, 0, 0.42), 0 28px 60px rgba(0, 0, 0, 0.46);
    }

    :root[data-palette="jade"] {
      --bg: #f8fdfa;
      --surface-2: #e6f7f1;
      --thead-bg: rgba(230, 247, 241, 0.98);
      --card-grad-b: rgba(248, 253, 250, 1);
      --revealed-grad-b: rgba(230, 247, 241, 1);
      --sound-bg: #d9f3e8;
      --sound-ink: #16433c;
      --sound-border: rgba(33, 131, 88, 0.38);
      --front-example-bg: rgba(248, 253, 250, 0.98);
      --meaning-chip-bg: rgba(230, 247, 241, 0.98);
      --rank-bg: #d9f3e8;
      --rank-ink: #176b57;
      --code-bg: rgba(230, 247, 241, 0.96);
      --code-ink: #24443b;
      --track-bg: #deebe5;
      --grid-line: rgba(22, 67, 60, 0.042);
      --ink: #1a2722;
      --muted: #5f6f67;
      --line: #cfe2d9;
      --teal: #218358;
      --teal-dark: #187454;
      --gold: #218358;
      --accent-2: #6958d9;
      --accent-3: #d63c78;
      --accent-4: #d98200;
      --logo-a: #218358;
      --logo-b: #30a46c;
      --theme-1: #218358;
      --theme-2: #30a46c;
      --theme-3: #d63c78;
      --shadow: 0 14px 0 rgba(33, 131, 88, 0.08), 0 24px 44px rgba(26, 39, 34, 0.14);
    }

    :root[data-theme="dark"][data-palette="jade"] {
      --bg: #0d1512;
      --surface: #121b17;
      --surface-2: #173b2f;
      --panel: rgba(18, 27, 23, 0.96);
      --table-bg: rgba(18, 27, 23, 0.94);
      --thead-bg: rgba(23, 59, 47, 0.96);
      --card-grad-a: rgba(21, 31, 26, 1);
      --card-grad-b: rgba(14, 22, 18, 1);
      --revealed-grad-b: rgba(23, 59, 47, 1);
      --button-bg: #1a2621;
      --sound-bg: #174933;
      --sound-ink: #b1f1cb;
      --sound-border: rgba(48, 164, 108, 0.54);
      --front-example-bg: rgba(23, 59, 47, 0.72);
      --meaning-chip-bg: rgba(23, 73, 51, 0.72);
      --rank-bg: #174933;
      --rank-ink: #b1f1cb;
      --code-bg: rgba(23, 59, 47, 0.82);
      --code-ink: #b1f1cb;
      --track-bg: #263b32;
      --grid-line: rgba(177, 241, 203, 0.035);
      --ink: #e6f4ea;
      --muted: #a7b9ae;
      --line: #30493e;
      --teal: #218358;
      --teal-dark: #b1f1cb;
      --gold: #30a46c;
      --accent-2: #9b8cff;
      --accent-3: #f06a9b;
      --accent-4: #ffbd4a;
      --logo-a: #218358;
      --logo-b: #30a46c;
    }

    :root[data-palette="ruby"] {
      --bg: #fff8f8;
      --surface-2: #ffeef1;
      --thead-bg: rgba(255, 238, 241, 0.98);
      --card-grad-b: rgba(255, 248, 248, 1);
      --revealed-grad-b: rgba(255, 238, 241, 1);
      --sound-bg: #ffe5e9;
      --sound-ink: #64172b;
      --sound-border: rgba(206, 44, 49, 0.36);
      --front-example-bg: rgba(255, 248, 248, 0.98);
      --meaning-chip-bg: rgba(255, 238, 241, 0.98);
      --rank-bg: #ffe5e9;
      --rank-ink: #a21033;
      --code-bg: rgba(255, 238, 241, 0.96);
      --code-ink: #5c2733;
      --track-bg: #f0dfe2;
      --grid-line: rgba(100, 23, 43, 0.04);
      --ink: #2b2024;
      --muted: #746168;
      --line: #ead4d9;
      --teal: #ce2c31;
      --teal-dark: #b51d33;
      --gold: #ce2c31;
      --accent-2: #6e56cf;
      --accent-3: #07856f;
      --accent-4: #d98200;
      --logo-a: #ce2c31;
      --logo-b: #e54666;
      --theme-1: #ce2c31;
      --theme-2: #e54666;
      --theme-3: #6e56cf;
      --shadow: 0 14px 0 rgba(206, 44, 49, 0.07), 0 24px 44px rgba(43, 32, 36, 0.14);
    }

    :root[data-theme="dark"][data-palette="ruby"] {
      --bg: #191113;
      --surface: #211619;
      --surface-2: #4c1827;
      --panel: rgba(33, 22, 25, 0.96);
      --table-bg: rgba(33, 22, 25, 0.94);
      --thead-bg: rgba(76, 24, 39, 0.96);
      --card-grad-a: rgba(37, 24, 28, 1);
      --card-grad-b: rgba(27, 17, 20, 1);
      --revealed-grad-b: rgba(76, 24, 39, 1);
      --button-bg: #2b1d21;
      --sound-bg: #64172b;
      --sound-ink: #ffd1d9;
      --sound-border: rgba(229, 70, 102, 0.55);
      --front-example-bg: rgba(76, 24, 39, 0.72);
      --meaning-chip-bg: rgba(100, 23, 43, 0.68);
      --rank-bg: #64172b;
      --rank-ink: #ffd1d9;
      --code-bg: rgba(76, 24, 39, 0.82);
      --code-ink: #ffd1d9;
      --track-bg: #43262e;
      --grid-line: rgba(255, 209, 217, 0.032);
      --ink: #f4e9ec;
      --muted: #c1aab0;
      --line: #56343e;
      --teal: #b51d33;
      --teal-dark: #ffb3c1;
      --gold: #e54666;
      --accent-2: #9e8cfc;
      --accent-3: #29c59f;
      --accent-4: #ffbd4a;
      --logo-a: #ce2c31;
      --logo-b: #e54666;
    }

    :root[data-palette="graphite"] {
      --bg: #f7f7f8;
      --surface-2: #eeeeef;
      --thead-bg: rgba(238, 238, 239, 0.98);
      --card-grad-b: rgba(248, 248, 249, 1);
      --revealed-grad-b: rgba(238, 238, 239, 1);
      --sound-bg: #e3e3e5;
      --sound-ink: #26272b;
      --sound-border: rgba(38, 39, 43, 0.3);
      --front-example-bg: rgba(247, 247, 248, 0.98);
      --meaning-chip-bg: rgba(238, 238, 239, 0.98);
      --rank-bg: #e3e3e5;
      --rank-ink: #34353a;
      --code-bg: rgba(238, 238, 239, 0.96);
      --code-ink: #45464c;
      --track-bg: #dedee1;
      --grid-line: rgba(38, 39, 43, 0.038);
      --ink: #202124;
      --muted: #686a70;
      --line: #d7d8da;
      --teal: #26272b;
      --teal-dark: #202124;
      --gold: #4e5158;
      --accent-2: #d72d5f;
      --accent-3: #07856f;
      --accent-4: #d98200;
      --logo-a: #26272b;
      --logo-b: #6f7278;
      --theme-1: #26272b;
      --theme-2: #6f7278;
      --theme-3: #d72d5f;
      --shadow: 0 14px 0 rgba(38, 39, 43, 0.07), 0 24px 44px rgba(32, 33, 36, 0.14);
    }

    :root[data-theme="dark"][data-palette="graphite"] {
      --bg: #101112;
      --surface: #191a1c;
      --surface-2: #292b2f;
      --panel: rgba(25, 26, 28, 0.96);
      --table-bg: rgba(25, 26, 28, 0.94);
      --thead-bg: rgba(41, 43, 47, 0.96);
      --card-grad-a: rgba(29, 30, 33, 1);
      --card-grad-b: rgba(20, 21, 23, 1);
      --revealed-grad-b: rgba(41, 43, 47, 1);
      --button-bg: #232529;
      --sound-bg: #303238;
      --sound-ink: #f1f1f2;
      --sound-border: rgba(241, 241, 242, 0.26);
      --front-example-bg: rgba(41, 43, 47, 0.76);
      --meaning-chip-bg: rgba(48, 50, 56, 0.78);
      --rank-bg: #303238;
      --rank-ink: #f1f1f2;
      --code-bg: rgba(41, 43, 47, 0.86);
      --code-ink: #d7d8db;
      --track-bg: #303238;
      --grid-line: rgba(255, 255, 255, 0.032);
      --ink: #f1f1f2;
      --muted: #a9abb1;
      --line: #393b40;
      --teal: #e8e8ea;
      --teal-dark: #f1f1f2;
      --primary-ink: #17181a;
      --gold: #b8bbc2;
      --accent-2: #ff5c7c;
      --accent-3: #35c89f;
      --accent-4: #ffbd4a;
      --logo-a: #26272b;
      --logo-b: #6f7278;
    }

    :root[data-palette="germany"] {
      --bg: #f3f6fb;
      --surface-2: #fff4cf;
      --thead-bg: rgba(245, 247, 251, 0.98);
      --card-grad-b: rgba(248, 250, 253, 1);
      --revealed-grad-b: rgba(235, 243, 255, 1);
      --sound-bg: #ffe69a;
      --sound-ink: #302700;
      --sound-border: rgba(178, 137, 0, 0.4);
      --front-example-bg: rgba(244, 248, 255, 0.98);
      --meaning-chip-bg: rgba(235, 243, 255, 0.96);
      --rank-bg: #ffe69a;
      --rank-ink: #684f00;
      --code-bg: rgba(238, 242, 247, 0.96);
      --code-ink: #394150;
      --track-bg: #e1e5eb;
      --grid-line: rgba(56, 103, 214, 0.046);
      --ink: #17191e;
      --muted: #626975;
      --line: #d7dce4;
      --teal: #c00d1e;
      --teal-dark: #99101c;
      --gold: #b28900;
      --accent-2: #20242b;
      --accent-3: #087f5b;
      --accent-4: #3867d6;
      --logo-a: #c00d1e;
      --logo-b: #ffcc00;
      --theme-1: #1f1f24;
      --theme-2: #c00d1e;
      --theme-3: #ffcc00;
      /* The flag's gold takes black text, never white. */
      --theme-3-ink: #1f1f24;
      --shadow: 0 10px 0 rgba(56, 103, 214, 0.09), 0 17px 0 rgba(8, 127, 91, 0.055), 0 28px 48px rgba(23, 25, 30, 0.14);
    }

    :root[data-theme="dark"][data-palette="germany"] {
      --bg: #101216;
      --surface: #181b21;
      --surface-2: #383018;
      --panel: rgba(24, 27, 33, 0.96);
      --table-bg: rgba(24, 27, 33, 0.94);
      --thead-bg: rgba(43, 39, 27, 0.96);
      --card-grad-a: rgba(28, 31, 38, 1);
      --card-grad-b: rgba(19, 21, 26, 1);
      --revealed-grad-b: rgba(25, 37, 56, 1);
      --button-bg: #22262d;
      --sound-bg: #51400d;
      --sound-ink: #ffe9a3;
      --sound-border: rgba(255, 204, 0, 0.5);
      --front-example-bg: rgba(38, 40, 47, 0.82);
      --meaning-chip-bg: rgba(32, 48, 71, 0.78);
      --rank-bg: #51400d;
      --rank-ink: #ffe9a3;
      --code-bg: rgba(39, 43, 51, 0.9);
      --code-ink: #e7e9ed;
      --track-bg: #30343c;
      --grid-line: rgba(255, 255, 255, 0.035);
      --ink: #f0f1f3;
      --muted: #b1b6bf;
      --line: #3d424d;
      --teal: #c22233;
      --teal-dark: #ffd23f;
      --gold: #ffcc00;
      --accent-2: #e8e9ec;
      --accent-3: #4cc38a;
      --accent-4: #72a7ff;
      --logo-a: #c00d1e;
      --logo-b: #ffcc00;
    }

    :root[data-palette="bavaria"] {
      --bg: #f5faff;
      --surface-2: #e1f0fd;
      --thead-bg: rgba(225, 240, 253, 0.98);
      --card-grad-b: rgba(245, 250, 255, 1);
      --revealed-grad-b: rgba(225, 240, 253, 1);
      --sound-bg: #d3e9fc;
      --sound-ink: #113a5c;
      --sound-border: rgba(11, 106, 184, 0.38);
      --front-example-bg: rgba(245, 250, 255, 0.98);
      --meaning-chip-bg: rgba(225, 240, 253, 0.98);
      --rank-bg: #d3e9fc;
      --rank-ink: #0d5591;
      --code-bg: rgba(225, 240, 253, 0.96);
      --code-ink: #24435c;
      --track-bg: #dde8f0;
      --grid-line: rgba(17, 58, 92, 0.042);
      --ink: #17222b;
      --muted: #5d6e7c;
      --line: #ccdfec;
      --teal: #0a6ab8;
      --teal-dark: #0d5591;
      --gold: #0a6ab8;
      --accent-2: #d6409f;
      --accent-3: #0d9b78;
      --accent-4: #e89200;
      --logo-a: #0a6ab8;
      --logo-b: #5eb0ef;
      --theme-1: #0a6ab8;
      --theme-2: #5eb0ef;
      --theme-3: #ffffff;
      /* Bavaria's white. Dark text, and anything filled with it needs its own
         border or it is a white shape on a white page. */
      --theme-3-ink: #17191e;
      --shadow: 0 14px 0 rgba(10, 106, 184, 0.07), 0 24px 44px rgba(23, 34, 43, 0.14);
    }

    :root[data-theme="dark"][data-palette="bavaria"] {
      --bg: #0d1319;
      --surface: #121a22;
      --surface-2: #123a5c;
      --panel: rgba(18, 26, 34, 0.96);
      --table-bg: rgba(18, 26, 34, 0.94);
      --thead-bg: rgba(18, 58, 92, 0.96);
      --card-grad-a: rgba(20, 30, 40, 1);
      --card-grad-b: rgba(14, 21, 28, 1);
      --revealed-grad-b: rgba(18, 58, 92, 1);
      --button-bg: #1a2530;
      --sound-bg: #144a75;
      --sound-ink: #c2e3ff;
      --sound-border: rgba(94, 176, 239, 0.5);
      --front-example-bg: rgba(18, 58, 92, 0.72);
      --meaning-chip-bg: rgba(20, 74, 117, 0.72);
      --rank-bg: #144a75;
      --rank-ink: #c2e3ff;
      --code-bg: rgba(18, 58, 92, 0.82);
      --code-ink: #c2e3ff;
      --track-bg: #24333f;
      --grid-line: rgba(194, 227, 255, 0.035);
      --ink: #e9f2f9;
      --muted: #a3b4c2;
      --line: #2e4356;
      --teal: #1273c4;
      --teal-dark: #8ec9f5;
      --gold: #5eb0ef;
      --accent-2: #f65cb6;
      --accent-3: #35c89f;
      --accent-4: #ffbd4a;
      --logo-a: #0a6ab8;
      --logo-b: #5eb0ef;
    }

    :root[data-theme="dark"][data-palette] {
      --bg: #050608;
      --surface: #0d0f13;
      --panel: rgba(13, 15, 19, 0.98);
      --table-bg: rgba(13, 15, 19, 0.97);
      --thead-bg: rgba(20, 23, 29, 0.98);
      --card-grad-a: rgba(17, 20, 25, 1);
      --card-grad-b: rgba(8, 10, 13, 1);
      --button-bg: #14171d;
      --track-bg: #22262d;
      --grid-line: rgba(255, 255, 255, 0.028);
      --line: #2c3139;
      --shadow: 0 10px 0 rgba(0, 0, 0, 0.56), 0 28px 64px rgba(0, 0, 0, 0.68);
    }
* { box-sizing: border-box; }
    [hidden] { display: none !important; }

    html { scrollbar-gutter: stable; }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        var(--bg);
      background-size: 34px 34px, 34px 34px;
      color: var(--ink);
      font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.55;
      -webkit-text-size-adjust: 100%;
    }

    a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
    a:hover { color: var(--teal-dark); }

    :focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
      border-radius: 4px;
    }

    .wrap { max-width: 760px; margin: 0 auto; padding: 0 18px 72px; }

    /* Shared header: the wordmark links home from every static page, so a
       reader arriving cold from search has one obvious way into the trainer. */
    .site-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 18px 0 22px;
      flex-wrap: wrap;
    }
    .site-head a.brand {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      font-weight: 800;
      font-size: 21px;
      letter-spacing: -0.02em;
      color: var(--ink);
      text-decoration: none;
    }
    .site-head a.brand span {
      background: linear-gradient(92deg, var(--logo-a), var(--logo-b));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .site-head nav { display: flex; gap: 8px; flex-wrap: wrap; }
    .site-head nav a {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      padding: 6px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel);
    }
    .site-head nav a:hover { color: var(--ink); border-color: var(--teal); }

    .site-foot {
      margin-top: 46px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      font-size: 13px;
      color: var(--muted);
      display: flex;
      gap: 8px 16px;
      flex-wrap: wrap;
      align-items: center;
    }
    .site-foot a { color: var(--muted); }
    .site-foot a:hover { color: var(--teal); }
/* The three cards, with a line-drawn locomotive running in behind them at an
     angle, as though it is about to come through. Outline only and no fill: a
     solid train behind solid cards is two shapes fighting, while a line drawing
     reads as the layer underneath and leaves the cards the subject.
     It is deliberately quiet — a third of the ink of the cards — because at
     34px in the header the cards have to stay the thing you recognise. */
  .brand-mark {
    /* Height only, everywhere. The mark is wider than it is tall now, so a
       hardcoded width/height pair squashes it — and there were four such
       pairs across the app and the shared chrome, each free to disagree.
       Every override below sets the height and lets the viewBox decide the
       width, which is the one thing that cannot get out of step. */
    height: 34px; width: auto; aspect-ratio: 64 / 48;
    flex: 0 0 auto; overflow: visible;
    filter: drop-shadow(0 2px 1px rgba(21, 34, 53, 0.18));
  }
  .brand-mark .logo-loco {
    fill: none;
    stroke: color-mix(in srgb, var(--ink) 42%, transparent);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .brand-mark .logo-card { stroke: rgba(255, 255, 255, 0.88); stroke-width: 1.5; }
  .brand-mark .logo-card-one { fill: var(--theme-1); }
  .brand-mark .logo-card-two { fill: var(--theme-2); }
  .brand-mark .logo-card-three { fill: var(--theme-3); }
  .brand-mark .logo-detail-light { fill: #fff; }
  .brand-mark .logo-detail-dark { fill: #18181b; }
  :root[data-theme="dark"] .brand-mark {
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5));
  }
  :root[data-theme="dark"] .brand-mark .logo-loco {
    stroke: color-mix(in srgb, #ffffff 40%, transparent);
  }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; min-height: 58px; white-space: nowrap;
    /* No vertical padding: the app's topbar has none, and its 58px min-height
       is the whole header. Padding here made the static one 87px, which is the
       kind of difference you feel as a jump without being able to name it. */
    width: min(1480px, calc(100% - 32px)); max-width: none; margin: 24px auto 0; padding: 0;
  }
  /* Without this the brand block is a plain div, so the wordmark and the
     progress bar stack instead of sitting side by side — which is what made the
     static header 77px against the app's 58px. */
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-home {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto; min-width: max-content;
    padding: 2px 6px 2px 2px; border-radius: var(--radius);
    color: inherit; text-decoration: none;
  }
  .brand-home:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .brand-home .brand-mark { height: 38px; }
  .brand-home strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

  .app-nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

  /* Lifted verbatim from the app, so the progress block is not a lookalike. */
  .brand-copy {
        min-width: 0;
      }
  .deck-progress {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 5px;
      }
  .deck-progress-track {
        position: relative;
        width: 150px;
        height: 6px;
        border-radius: 999px;
        background: var(--track-bg);
        overflow: hidden;
      }
  .deck-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        border-radius: 999px;
        /* The mark's own three colours, in order — for Germany the flag's black,
           red and gold. A flat accent read as a generic loading bar, and two
           colours did not match the three cards in the logo beside it. */
        background: linear-gradient(90deg, var(--theme-1), var(--theme-2) 52%, var(--theme-3));
        transition: width 0.3s ease;
      }
  .deck-progress-bar.is-started {
        opacity: 0.35;
      }
  .deck-progress .subtle {
        font-size: 0.8rem;
        white-space: nowrap;
      }
  .subtle {
        color: var(--muted);
        font-size: 0.92rem;
      }

  .nav-tab,
  .nav-more > summary {
    min-height: 2.55rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 0.58rem 0.78rem;
    border: 1px solid transparent; border-radius: var(--radius);
    background: transparent; color: var(--muted);
    font-weight: 700; text-decoration: none; white-space: nowrap;
    list-style: none; cursor: pointer;
    /* The app sets body line-height 1.45 and these pages 1.55, and its tabs are
       buttons while these are anchors — together that made the tab 1px taller
       here. Pin it so the two cannot drift on a typography change. */
    line-height: 1.45;
    min-height: 2.55rem;
  }
  .nav-more > summary::-webkit-details-marker { display: none; }
  .nav-tab, .nav-tab:hover, .nav-tab:focus-visible { text-decoration: none; }
  .nav-tab:hover, .nav-tab[aria-current="page"],
  .nav-more[open] > summary, .nav-more.is-active > summary, .nav-more > summary:hover {
    border-color: var(--line); background: var(--surface-2); color: var(--teal-dark);
  }
  .nav-tab svg,
  .nav-more > summary svg,
  .nav-more-item svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Same overflow menu as the app's, value for value — a word page and the
     trainer have to agree about where Guides and Settings live. */
  .nav-more { position: relative; }
  .nav-more-backdrop {
    display: none; position: fixed; z-index: 29; inset: 0;
    background: rgba(7, 9, 12, 0.44); backdrop-filter: blur(2px);
  }
  .nav-more-menu {
    position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
    display: grid; gap: 2px; min-width: 208px; padding: 6px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 18px 46px rgba(20, 20, 24, 0.22);
    white-space: normal;
  }
  .nav-more-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; min-height: 2.6rem; padding: 0.5rem 0.7rem;
    border: 1px solid transparent; border-radius: calc(var(--radius) - 4px);
    background: transparent; color: var(--ink);
    font-size: 0.95rem; font-weight: 700; line-height: 1.45;
    text-align: left; text-decoration: none;
  }
  .nav-more-item svg { color: var(--muted); }
  .nav-more-item:hover, .nav-more-item:focus-visible, .nav-more-item[aria-current="page"] {
    border-color: var(--line); background: var(--surface-2); color: var(--teal-dark);
    text-decoration: none;
  }
  .nav-more-item:hover svg, .nav-more-item[aria-current="page"] svg { color: inherit; }
  /* The toggle is a control, not a destination: a rule above it separates the
     three places you can go from the one thing you can change. */
  #navThemeToggle { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0; }
  :root[data-theme="dark"] .theme-icon-dark,
  :root[data-theme="dark"] .theme-label-dark { display: none; }
  :root:not([data-theme="dark"]) .theme-icon-light,
  :root:not([data-theme="dark"]) .theme-label-light { display: none; }

  /* Back to where the reader came from. Sits above the headword rather than in
     the header, because it is about this page, not about the site. */
  .back-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 2px; padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--muted);
    font-size: 0.82rem; font-weight: 700; text-decoration: none;
  }
  .back-link:hover { border-color: var(--teal); color: var(--teal-dark); text-decoration: none; }
  .back-link svg {
    width: 15px; height: 15px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  html.nav-open, html.nav-open body { overflow: hidden; overscroll-behavior: none; }
  .brand-copy { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .deck-progress .subtle { white-space: nowrap; }

  @media (max-width: 620px) {
    .deck-progress .subtle { display: none; }
  }
  /* Same width as the wordmark. Below it the counter text is already gone, so
     leaving the track behind is a bare grey bar that says nothing — and it sits
     right where the wordmark used to be. */
  @media (max-width: 520px) {
    .brand-copy { display: none; }
  }

  .site-footer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; width: min(1480px, calc(100% - 32px)); max-width: none; margin: 0 auto;
    margin-top: 28px; padding: 14px 0 24px; border-top: 1px solid var(--line);
    color: var(--muted); font-size: 0.82rem;
  }
  .site-footer-brand { font-weight: 800; }
  .site-footer nav { display: flex; gap: 14px; }
  .site-footer a { color: var(--muted); text-decoration: none; }
  .site-footer a:hover { color: var(--teal); text-decoration: underline; }

  /* Four controls fit further down than six did, but the labels still go first:
     the app drops to icons at this width, so these pages must too. */
  @media (max-width: 1120px) {
    .nav-tab,
    .nav-more > summary {
      flex-direction: column;
      gap: 1px;
      min-width: 3.1rem;
      min-height: 2.75rem;
      padding: 0.3rem 0.34rem;
    }
    .nav-label {
      display: block;
      font-size: 0.6rem;
      font-weight: 800;
      line-height: 1.1;
    }
    .nav-tab svg,
    .nav-more > summary svg { width: 19px; height: 19px; }
    .nav-tab svg, .nav-more > summary svg { width: 20px; height: 20px; }
    .nav-tab, .nav-more > summary { padding: 0.5rem 0.55rem; }
  }

  @media (max-width: 720px) {
    .brand-home strong { font-size: 1.05rem; }
    .brand-home .brand-mark { height: 32px; }
    /* The bar was nowrap, so on a phone the nav rode over the wordmark instead
       of dropping under it. Wrap, and let the nav take its own full-width row. */
    .topbar { gap: 8px; padding: 0; }
    .app-nav { flex: 0 1 auto; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
    .nav-tab, .nav-more > summary { padding: 0.5rem 0.6rem; }
    .site-footer { padding: 14px 0 24px; }
  }

  /* The menu becomes a bottom sheet, because the top-right corner of a phone is
     the hardest part of the screen to reach. */
  @media (max-width: 620px) {
    .nav-more-backdrop { display: block; }
    .nav-more-menu {
      position: fixed; top: auto; right: 0; bottom: 0; left: 0;
      min-width: 0; padding: 8px 12px max(16px, env(safe-area-inset-bottom));
      border-radius: 14px 14px 0 0;
    }
    .nav-more-item { min-height: 3rem; font-size: 1rem; }
  }

  /* Below this the wordmark costs more room than it earns; the mark alone is
     recognisable and keeps the nav on one line. 520 rather than 460 because
     460 missed real devices — a Galaxy S24 Ultra reports 480 CSS pixels. */
  @media (max-width: 520px) {
    .brand-home strong { display: none; }
    /* Without this the brand block is a plain div, so the wordmark and the
     progress bar stack instead of sitting side by side — which is what made the
     static header 77px against the app's 58px. */
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-home { padding: 2px; }
  }
.word-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
    /* The same family as the index cards on /list/ and /grammar/, one weight down.
       Those get a translucent pane with a blur behind it; a word card gets the
       matching border, radius, highlight and lift without it, because these run
       a thousand to a page and a thousand backdrop-filters is a scroll that
       judders. Same shape and same response to the pointer, a quieter surface.
       Two designs was the alternative, and it looked like two designs. */
    .word-card {
      display: flex; flex-direction: column; gap: 1px; min-width: 0;
      padding: 9px 11px; border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
      background: var(--panel); text-decoration: none; color: var(--ink);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 10px -8px rgba(15, 23, 42, 0.4);
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .word-card:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--teal) 42%, transparent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 18px -10px rgba(15, 23, 42, 0.45);
    }
    .word-card:hover b { color: var(--teal-dark); }
    :root[data-theme="dark"] .word-card {
      border-color: color-mix(in srgb, #ffffff 11%, transparent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px -9px rgba(0, 0, 0, 0.8);
    }
    :root[data-theme="dark"] .word-card:hover {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 20px -12px rgba(0, 0, 0, 0.9);
    }
    /* flex:1 so a long headword truncates instead of shoving the level pill out
       of the card — the rank and the pill are fixed, the word absorbs the rest. */
    .word-card b {
      flex: 1 1 auto;
      font-weight: 700; font-size: 0.95rem; color: var(--teal);
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* One line of meaning, clipped. A card in a browse grid is a way in, not the
       entry itself — three lines of gloss made every card a different height and
       turned the grid into a ragged column. The page is one tap away and has the
       whole thing. */
    .word-card > span {
      color: var(--muted); font-size: 0.8rem;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* The level belongs on the card. Choosing what to learn next, "is this A1 or
       C2" is the question being asked. */
    .word-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .word-card-head .level-pill { flex: 0 0 auto; }
    .word-card-rank {
      flex: 0 0 auto; color: var(--muted); font-size: 0.72rem; font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    /* Sits with the level pill on the right rather than leading the row, so the
       headword still starts at the card's left edge. */
    .word-card-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
    /* Full width: the count is rendered inside the grid, so without this it takes
       a cell of its own and pushes the first word into the second column. */
    .word-grid-count { grid-column: 1 / -1; color: var(--muted); font-size: 0.86rem; margin: 0 0 4px; }

    .level-pill,
    .collection-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 1.75rem;
      max-width: 100%;
      padding: 0.28rem 0.58rem;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
      border-radius: 999px;
      background: color-mix(in srgb, var(--teal) 10%, var(--surface));
      color: var(--teal-dark);
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .level-pill.slang {
      border-color: color-mix(in srgb, var(--accent-4) 42%, var(--line));
      background: color-mix(in srgb, var(--accent-4) 12%, var(--surface));
      color: var(--amber);
    }

    @media (max-width: 560px) {
      /* Two across, as the app's A-Z browse already does. auto-fill with a
         210px minimum gives exactly one column at 390px, so a list page put one
         word per row and the top 1,000 ran to a thousand full-width rows. */
      .word-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
      .word-card { padding: 6px 8px; }
      .word-card b { font-size: 0.86rem; }
      .word-card > span { font-size: 0.72rem; }
      .word-card-head .level-pill { padding: 1px 5px; font-size: 0.6rem; min-height: 1.35rem; }
    }


  .crumbs {
    width: min(1480px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: 14px 0 0;
    color: var(--muted); font-size: .82rem;
  }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--teal); }

  main {
    width: min(1480px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: 18px 0 56px;
    display: grid; grid-template-columns: minmax(0, 1fr) 290px;
    gap: 30px; align-items: start;
  }
  main.single { display: block; max-width: 820px; padding-top: 8px; }
  main.single h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -0.025em; margin: 6px 0 10px; }
  main.single > p { color: var(--muted); max-width: 64ch; }

  /* A card, used for every block on the page so the column reads as one stack
     of related things rather than a run of loose headings. */
  .panel {
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--panel); padding: 2px 20px 20px;
    margin: 0 0 18px;
  }
  .panel h2 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--teal); margin: 18px 0 12px; font-weight: 800;
    display: flex; align-items: center; gap: 9px;
  }
  .panel h2::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
  }
  .panel.example {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--teal) 6%, var(--panel)), var(--panel));
    border-color: color-mix(in srgb, var(--teal) 26%, var(--line));
  }

  /* The hero. The article is the single hardest thing about German nouns, so it
     is set apart and colour-coded by gender rather than run into the headword —
     der/die/das become recognisable at a glance across pages. */
  .word-hero { padding: 8px 0 22px; }
  .hero-kicker {
    margin: 0 0 6px; font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  }
  .word-hero h1 {
    margin: 0; font-size: clamp(2.1rem, 5vw, 3rem);
    letter-spacing: -0.03em; line-height: 1.1;
  }
  .word-hero h1 .article {
    font-weight: 500; opacity: .95;
  }
  .word-hero h1.gender-der .article { color: var(--accent-4); }
  .word-hero h1.gender-die .article { color: var(--teal); }
  .word-hero h1.gender-das .article { color: var(--accent-3); }
  .hero-gloss {
    margin: 10px 0 0; font-size: 1.15rem; color: var(--ink);
    max-width: 46ch;
  }
  .hero-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

  .chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: .8rem; font-weight: 600; color: var(--muted);
  }
  .chip b { color: var(--ink); font-weight: 700; }
  .chip-level {
    background: var(--teal); border-color: var(--teal);
    color: var(--primary-ink); font-weight: 800;
  }
  .chip-audio {
    font: inherit; font-size: .8rem; font-weight: 600;
    cursor: pointer; color: var(--ink);
  }
  .chip-audio:hover { border-color: var(--teal); color: var(--teal); }
  .chip-audio.is-playing { border-color: var(--teal); color: var(--teal); }

  /* Senses, laid out like the trainer's: a fixed label column so the word-type
     labels and the glosses beside them line up down the page. */
  .senses { display: grid; gap: 12px; }
  .sense-group {
    display: grid; grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 4px 12px; align-items: start;
  }
  .sense-pos {
    font-size: .68rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); padding-top: .38rem;
  }
  .sense-list { margin: 0; padding-left: 1.15rem; display: grid; gap: 5px; }
  .sense-list li { padding-left: 2px; }
  .sense-list li::marker { color: var(--muted); font-weight: 700; }

  .example .de { font-size: 1.32rem; margin: 0 0 .3em; line-height: 1.45; }
  .example .en { color: var(--muted); margin: 0 0 .9em; font-size: 1.02rem; }
  .example-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .hint { font-size: .78rem; color: var(--muted); }

  .al { border-radius: 4px; padding: 0 2px; cursor: default; transition: background .12s, color .12s; }
  .al.on { background: var(--teal); color: var(--primary-ink); }

  .form-group + .form-group {
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .form-pos {
    display: block; font-size: .66rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
  }
  .form-rows { display: grid; gap: 7px; }
  .form-row {
    display: grid; grid-template-columns: 6.6rem minmax(0, 1fr);
    gap: 4px 12px; align-items: baseline;
  }
  .form-row:not(:has(.form-label)) { grid-template-columns: 1fr; }
  .form-label {
    font-size: .76rem; color: var(--muted); font-weight: 600;
  }
  .form-values { display: flex; flex-wrap: wrap; gap: 6px; }
  .form-chip {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 4px 10px; border-radius: 8px;
    background: var(--code-bg); border: 1px solid var(--line);
    color: var(--ink); font-size: .93rem; font-weight: 600;
  }
  .form-chip i {
    font-style: normal; font-size: .72rem; font-weight: 500; color: var(--muted);
  }
  .form-gov { margin: 11px 0 0; font-size: .84rem; color: var(--muted); }

  .usage {
    color: var(--muted); font-size: .9rem;
    padding: 0 2px; margin: 22px 0 0;
  }
  .twin { font-size: .9rem; padding: 0 2px; }

  aside {
    position: sticky; top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scrollbar-width: thin;
  }
  .side-cta p { margin: 18px 0 14px; font-size: .95rem; color: var(--muted); }
  .side-cta strong { color: var(--ink); }
  .related { list-style: none; padding: 0; margin: 0; }
  .related li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .related li:last-child { border-bottom: 0; }
  .related a { font-weight: 650; color: var(--teal); }
  .related span { color: var(--muted); display: block; font-size: .8rem; margin-top: 1px; }

  .index { list-style: none; padding: 0; margin: 22px 0 0; columns: 2; gap: 30px; }
  .index li { break-inside: avoid; padding: 6px 0; font-size: .95rem; }
  .index span { color: var(--muted); font-size: .82rem; display: block; }

  /* The A-Z index. A card per letter, sized to the content rather than poured
     into CSS columns, which left the letters drifting in whitespace. */
  .index.letters {
    columns: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
  }
  .index.letters li { padding: 0; }
  .index.letters a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 13px 15px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--panel);
    text-decoration: none; color: var(--ink);
    transition: border-color 120ms ease, transform 120ms ease;
  }
  .index.letters a:hover {
    border-color: var(--teal);
    transform: translateY(-1px);
  }
  .index.letters b {
    font-size: 1.45rem; font-weight: 800; line-height: 1;
    letter-spacing: -0.02em; color: var(--teal);
  }
  .index.letters span { font-size: .76rem; color: var(--muted); font-weight: 500; }

  .button {
    display: inline-block; background: var(--teal); color: var(--primary-ink);
    text-decoration: none; font-weight: 700;
    border-radius: 10px; padding: 11px 17px;
  }
  .button:hover { background: var(--teal-dark); color: var(--primary-ink); }


  @media (max-width: 900px) {
    main { grid-template-columns: 1fr; gap: 0; padding: 22px 0 44px; }
    aside { position: static; }
    .index { columns: 1; }
    .top { position: static; }
  }

  .report { grid-column: 1; margin: 4px 0 0; }
  .report-open {
    font: inherit; font-size: .86rem; font-weight: 600;
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  }
  .report-open:hover { color: var(--teal); }
  .report-intro { color: var(--muted); font-size: .86rem; flex: 1 0 100%; margin: 0; }
  .report-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .report-actions { display: flex; gap: 8px; }
  .report-cancel {
    font: inherit; font-weight: 600; cursor: pointer;
    background: var(--surface); color: var(--muted);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px;
  }
  .report-form select, .report-form textarea {
    font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px;
  }
  .report-form select { flex: 0 0 auto; }
  .report-form textarea { flex: 1 1 320px; min-height: 44px; resize: vertical; }
  .report-form button {
    font: inherit; font-weight: 700; cursor: pointer;
    background: var(--teal); color: var(--primary-ink);
    border: 0; border-radius: var(--radius); padding: 10px 18px;
  }
  .report-form button:hover { background: var(--teal-dark); }
  .report-form button:disabled { opacity: .6; cursor: default; }
  .report-status { flex: 1 0 100%; margin: 0; font-size: .9rem; color: var(--muted); }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  @media (max-width: 860px) {
    main { grid-template-columns: 1fr; }
    aside { position: static; }
    .index { columns: 1; }
  }