: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;
      --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;
      --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;
      --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; }

    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); }

  .top {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid var(--line);
    background: var(--panel);
  }
  .brand {
    font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
    text-decoration: none; color: var(--ink);
  }
  .brand em {
    font-style: normal;
    background: linear-gradient(92deg, var(--logo-a), var(--logo-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .crumbs { color: var(--muted); font-size: .85rem; }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--teal); }

  main {
    max-width: 1000px; margin: 0 auto; padding: 24px 20px 40px;
    display: grid; grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px; align-items: start;
  }
  main.single { display: block; max-width: 820px; }

  h1 { font-size: 2rem; margin: .2em 0; letter-spacing: -0.02em; }
  h2 { font-size: 1.1rem; margin: 1.6em 0 .4em; }
  h3 {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: .9em 0 .2em;
  }

  .meta {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    color: var(--muted); font-size: .9rem; margin: 0 0 1em;
  }
  .badge {
    background: var(--teal); color: var(--primary-ink);
    border-radius: 999px; padding: 2px 11px; font-weight: 700; font-size: .8rem;
  }
  ol, ul { margin: .2em 0; padding-left: 1.2em; }

  .forms {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--code-bg); color: var(--code-ink);
    padding: 9px 13px; border-radius: var(--radius); font-size: .9rem;
    border: 1px solid var(--line);
  }

  .example {
    background: var(--front-example-bg); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 4px 16px 16px; margin-top: 1.4em;
  }
  .example .de { font-size: 1.25rem; margin: .4em 0 .1em; }
  .example .en { color: var(--muted); margin: .1em 0 .6em; }
  .hint { font-size: .78rem; color: var(--muted); margin: .2em 0 .8em; }

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

  audio { width: 100%; max-width: 320px; height: 34px; }

  .usage {
    color: var(--muted); font-size: .92rem;
    border-top: 1px solid var(--line); padding-top: 1em; margin-top: 1.6em;
  }
  .twin { font-size: .92rem; }

  aside {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); padding: 4px 16px 16px;
    position: sticky; top: 16px;
  }
  .related { list-style: none; padding: 0; margin: 0; }
  .related li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .related li:last-child { border-bottom: 0; }
  .related span { color: var(--muted); display: block; font-size: .82rem; }

  .index { list-style: none; padding: 0; columns: 2; gap: 28px; }
  .index li { break-inside: avoid; padding: 4px 0; font-size: .95rem; }
  .index span { color: var(--muted); font-size: .82rem; display: block; }
  .index.letters { columns: 4; }
  .index.letters li { font-size: 1.1rem; font-weight: 700; }
  .index.letters span { font-weight: 400; }

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

  .site-footer {
    display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between;
    max-width: 1000px; margin: 0 auto; padding: 16px 20px;
    border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem;
  }
  .site-footer nav { display: flex; gap: 14px; }
  .site-footer a { color: var(--muted); }
  .site-footer a:hover { color: var(--teal); }

  .report {
    grid-column: 1 / -1;
    margin-top: 34px; padding: 4px 18px 20px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel);
  }
  .report h2 { margin-top: 1em; }
  .report-intro { color: var(--muted); font-size: .92rem; max-width: 62ch; }
  .report-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .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; }
  }