:root {
    --ink: #161712;
    --ink-2: #30322b;
    --muted: #687067;
    --rule: #d9ded6;
    --rule-2: #e8ece4;
    --paper: #fbfbf7;
    --paper-2: #eef1ec;
    --accent: #b33f16;
    --accent-2: #27476c;
    --accent-3: #3f6a48;
    --accent-4: #9b7a00;
    --tag: #fff4e8;
    --shadow: 0 18px 50px rgba(20, 24, 20, 0.16);
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #cfd5d8; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--ink);
    font-feature-settings: "ss01", "cv11", "calt";
    -webkit-font-smoothing: antialiased;
  }

  .web-nav {
    position: sticky;
    top: 12px;
    z-index: 20;
    width: min(8.5in, calc(100vw - 48px));
    margin: 14px auto -6px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(22, 23, 18, 0.14);
    border-radius: 6px;
    background: rgba(251, 251, 247, 0.86);
    box-shadow: 0 10px 30px rgba(20, 24, 20, 0.12);
    backdrop-filter: blur(14px);
  }
  .web-nav a {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: var(--ink-2);
    background: rgba(255,255,255,0.64);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
  }
  .web-nav a:hover,
  .web-nav a:focus-visible {
    color: var(--accent);
    background: #fff;
    outline: none;
  }

  .download-pdf-button {
    appearance: none;
    cursor: pointer;
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 30;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px 0 10px;
    border: 1px solid rgba(22, 23, 18, 0.2);
    border-radius: 6px;
    background: #161712;
    color: #f5f1e6;
    box-shadow: 0 14px 36px rgba(20, 24, 20, 0.2);
    text-decoration: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
  }
  .download-pdf-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: 4px;
    background: #f0a070;
    color: #161712;
  }
  .download-pdf-button__icon svg {
    width: 17px;
    height: 17px;
    display: block;
  }
  .download-pdf-button:hover,
  .download-pdf-button:focus-visible {
    background: #0f100c;
    outline: 3px solid rgba(240, 160, 112, 0.42);
    outline-offset: 2px;
  }
  .download-pdf-button:disabled {
    cursor: wait;
    opacity: 0.84;
  }

  .page {
    --page-accent: var(--accent);
    --page-soft: var(--tag);
    width: 8.5in;
    min-height: 11in;
    background: var(--paper);
    margin: 24px auto;
    padding: 0.7in 0.75in 0.7in 0.75in;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(22, 23, 18, 0.08);
    box-shadow: var(--shadow);
    page-break-after: always;
    break-after: page;
  }
  .page:last-child { page-break-after: auto; break-after: auto; }

  #part-two,
  [data-screen-label^="08 "],
  [data-screen-label^="09 "],
  [data-screen-label^="10 "],
  [data-screen-label^="11 "] {
    --page-accent: var(--accent-2);
    --page-soft: #eef3fa;
  }
  #part-three,
  [data-screen-label^="13 "],
  [data-screen-label^="14 "],
  [data-screen-label^="15 "],
  [data-screen-label^="16 "] {
    --page-accent: var(--accent-3);
    --page-soft: #eef5ee;
  }
  #impact,
  [data-screen-label^="18 "],
  [data-screen-label^="19 "],
  [data-screen-label^="20 "] {
    --page-accent: var(--accent);
    --page-soft: #fff4e8;
  }
  #appendix,
  [data-screen-label^="23 "],
  [data-screen-label^="24 "] {
    --page-accent: var(--accent-4);
    --page-soft: #fff8d8;
  }

  .page-header {
    position: absolute;
    top: 0.35in;
    left: 0.75in;
    right: 0.75in;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
  }
  .page-header .mark { display: inline-flex; align-items: center; gap: 8px; }
  .page-header .mark svg rect { fill: var(--page-accent) !important; }
  .page-footer {
    position: absolute;
    bottom: 0.35in;
    left: 0.75in;
    right: 0.75in;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
  }
  .page-footer .pn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0;
    color: var(--ink);
    font-weight: 500;
  }

  /* MASCOT GUIDE */
  .mascot {
    position: absolute;
    top: 0.55in;
    right: 0.55in;
    width: 2.62in;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .mascot .av {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    background: #eaf4fb;
    border: 1px solid rgba(22, 23, 18, 0.9);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 18px rgba(22, 23, 18, 0.13);
  }
  .mascot .av svg {
    display: block;
    width: 100%;
    height: 100%;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
  }
  .mascot .av::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
    pointer-events: none;
  }
  .mascot .bubble {
    flex: 1;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(22, 23, 18, 0.72);
    border-radius: 6px;
    padding: 8px 10px 9px 10px;
    font-size: 9px;
    line-height: 1.45;
    color: var(--ink-2);
    position: relative;
    box-shadow: 0 8px 18px rgba(22, 23, 18, 0.1);
  }
  .mascot .bubble::before {
    content: "";
    position: absolute;
    left: -7px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background: #fff;
    border-left: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    transform: rotate(45deg);
  }
  .mascot .bubble .step {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: uppercase;
  }
  .mascot .bubble strong { color: var(--ink); }
  .mascot.dark .av { background: #1a3550; border-color: #f0a070; box-shadow: 3px 3px 0 #f0a070; }
  .mascot.dark .bubble { background: rgba(22, 23, 18, 0.88); color: #d8d5ca; border-color: #f0a070; box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
  .mascot.dark .bubble::before { background: #2a2924; border-color: #f0a070; }
  .mascot.dark .bubble strong { color: #fff; }
  .mascot.dark .bubble .step { color: #f0a070; }

  .page:not(.cover) > .mascot {
    width: 2.18in;
    gap: 8px;
  }
  .page:not(.cover) > .mascot .av {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    box-shadow: 0 5px 13px rgba(22, 23, 18, 0.1);
  }
  .page:not(.cover) > .mascot .bubble {
    min-height: 60px;
    padding: 7px 9px 8px;
    font-size: 8.5px;
    line-height: 1.38;
    border-color: rgba(22, 23, 18, 0.34);
    box-shadow: none;
  }
  .page:not(.cover) > .mascot .bubble .step {
    color: var(--page-accent);
    font-size: 7.5px;
  }

  #part-one > .mascot,
  #part-two > .mascot,
  #part-three > .mascot,
  #impact > .mascot {
    top: 0.62in;
    width: 2.36in;
  }
  #part-one > .mascot .av,
  #part-two > .mascot .av,
  #part-three > .mascot .av,
  #impact > .mascot .av {
    width: 70px;
    height: 70px;
  }
  #part-one > .mascot .bubble,
  #part-two > .mascot .bubble,
  #part-three > .mascot .bubble,
  #impact > .mascot .bubble {
    min-height: 70px;
    font-size: 9px;
    line-height: 1.45;
    border-color: rgba(22, 23, 18, 0.7);
    box-shadow: 0 8px 18px rgba(22, 23, 18, 0.09);
  }

  /* Typography */
  h1, h2, h3, h4 { font-family: 'Inter', sans-serif; margin: 0; color: var(--ink); }
  /* Serif accent for editorial feel, used selectively for pull quotes, big stats, and chapter openers. */
  .serif { font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; font-feature-settings: "liga", "onum"; }
  h1.serif, h2.serif, h3.serif { letter-spacing: 0; font-weight: 600; line-height: 1.1; }
  h1.serif { line-height: 1.05; }
  /* Deck paragraphs after big serif headings need extra breathing room. */
  h1 + .deck, h2.serif + .deck { margin-top: 18px !important; }
  /* Keep top-of-page headings clear of the mascot column (top-right ~2.3in). */
  .page > .eyebrow:first-of-type,
  .page > div > .eyebrow,
  .page .eyebrow + h1,
  .page .eyebrow + h2,
  .page .eyebrow + h3 { max-width: 4.5in; }
  .page > div[style*="margin-top"] > h2:first-of-type,
  .page > div[style*="margin-top"] > h1:first-of-type { max-width: 4.5in; }
  /* Lead paragraphs (deck) also need to clear the mascot column. */
  .page .eyebrow + h1 + .deck,
  .page .eyebrow + h2 + .deck,
  .page > div[style*="margin-top"] > h1:first-of-type + .deck,
  .page > div[style*="margin-top"] > h2:first-of-type + .deck { max-width: 4.5in; }
  h1 { font-weight: 700; font-size: 56px; line-height: 0.98; letter-spacing: 0; }
  h2 { font-weight: 700; font-size: 30px; line-height: 1.12; letter-spacing: 0; }
  h3 { font-weight: 600; font-size: 18px; line-height: 1.28; letter-spacing: 0; }
  h4 { font-weight: 600; font-size: 13px; line-height: 1.35; letter-spacing: 0; }
  p  { margin: 0 0 10px 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
  ul, ol { margin: 0 0 10px 0; padding-left: 18px; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
  li { margin-bottom: 5px; }
  li::marker { color: var(--accent); }
  strong { color: var(--ink); font-weight: 600; }
  em { color: var(--ink-2); font-style: italic; }
  code, .mono { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--accent-2); background: var(--paper-2); padding: 1px 5px; border-radius: 3px; }

  .eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .deck { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.55; color: var(--ink-2); font-weight: 400; max-width: 78%; letter-spacing: 0; }
  .deck.sans { font-family: 'Inter', sans-serif; font-size: 14px; }
  .deck.serif { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; line-height: 1.55; font-weight: 400; }
  .principle {
    border-left: 3px solid var(--page-accent);
    padding: 10px 0 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    margin: 14px 0 16px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 7%, transparent), transparent 70%);
  }
  .pull {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 500;
    font-style: italic;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ink);
    border-left: 2px solid var(--page-accent);
    padding-left: 16px;
    margin: 14px 0;
    letter-spacing: 0;
  }

  .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .cols-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .cols-12 { display: grid; grid-template-columns: 7fr 5fr; gap: 26px; }

  .section-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: end;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 16px;
  }
  .section-title .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--page-accent);
    font-weight: 600;
    letter-spacing: 0.05em;
  }

  .panel {
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 13px 15px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 1px 0 rgba(22, 23, 18, 0.03);
  }
  .panel.warm { background: var(--tag); border-color: #f4d8b8; }
  .panel.dark { background: #182016; color: #efece4; border-color: #182016; }
  .panel.dark p, .panel.dark li { color: #d6d2c7; }
  .panel.dark strong { color: #fff; }
  .panel.dark .eyebrow { color: #f0a070; }
  .panel a,
  .action-card a {
    color: var(--page-accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--page-accent) 42%, transparent);
    font-weight: 600;
  }
  .panel a:hover,
  .panel a:focus-visible,
  .action-card a:hover,
  .action-card a:focus-visible {
    color: var(--ink);
    border-bottom-color: var(--ink);
    outline: none;
  }

  .kicker {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 6px;
  }

  .plain-defn {
    font-size: 10px;
    color: var(--muted);
    background: var(--paper-2);
    padding: 8px 10px;
    border-radius: 3px;
    margin-top: 8px;
    line-height: 1.5;
  }
  .plain-defn b { color: var(--ink); font-weight: 600; }

  .action-card {
    border: 1px solid color-mix(in srgb, var(--page-accent) 30%, var(--rule));
    border-top: 3px solid var(--page-accent);
    border-radius: 6px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--page-soft) 72%, #fff), rgba(255, 255, 255, 0.9));
    padding: 12px 14px;
    margin-top: 12px;
    box-shadow: 0 1px 0 rgba(22, 23, 18, 0.03);
  }
  .action-card .kicker { color: var(--page-accent); margin-bottom: 5px; }
  .action-card p,
  .action-card li {
    font-size: 10.5px;
    line-height: 1.48;
    margin-bottom: 4px;
    color: var(--ink-2);
  }
  .action-card ol,
  .action-card ul {
    margin-bottom: 0;
    padding-left: 16px;
  }
  .action-card strong { color: var(--ink); font-weight: 650; }
  .action-card.compact {
    padding: 10px 12px;
    margin-top: 10px;
  }
  .action-card.compact p,
  .action-card.compact li {
    font-size: 10px;
    line-height: 1.42;
  }
  .action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  .action-grid > div {
    border: 1px solid color-mix(in srgb, var(--page-accent) 32%, var(--rule));
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.72);
    padding: 8px 9px;
  }
  .action-grid span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--page-accent);
    margin-bottom: 4px;
  }
  .action-grid strong {
    display: block;
    font-size: 10.5px;
    line-height: 1.3;
  }
  .script-box {
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 4px;
    background: var(--ink);
    color: #efece4;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    line-height: 1.55;
  }
  .script-box b { color: #f0a070; font-weight: 600; }
  .field-note {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    align-items: start;
    border-top: 1px dashed color-mix(in srgb, var(--page-accent) 38%, var(--rule));
    padding-top: 9px;
    margin-top: 9px;
  }
  .field-note span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--page-accent);
  }
  .field-note p { margin: 0; }

  table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
  th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    line-height: 1.45;
    color: var(--ink-2);
  }
  th {
    font-weight: 600;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 9px;
    border-bottom: 1.5px solid var(--ink);
  }

  .flow {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin: 8px 0;
  }
  .flow-step {
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 9px 6px;
    background: #fff;
    text-align: center;
  }
  .flow-step .n {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--page-accent);
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
  }
  .flow-step .label {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
  }

  .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .stat { border-top: 2px solid var(--ink); padding-top: 10px; }
  .stat .v { font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--ink); }
  .stat .l { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: 6px; }

  .cover {
    --cover-bg: #10110d;
    --cover-panel: #171a14;
    --cover-rail: #1f241c;
    --cover-text: #f5f1e6;
    --cover-accent: #f0a070;
    background: var(--cover-bg);
    color: var(--cover-text);
    padding: 0;
    display: flex;
    flex-direction: column;
    isolation: isolate;
  }
  .cover::before {
    content: "";
    position: absolute;
    inset: 0.64in;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(245, 241, 230, 0.16);
    background:
      linear-gradient(180deg, rgba(245, 241, 230, 0.04), rgba(245, 241, 230, 0));
  }
  .cover .page-header,
  .cover .page-footer {
    color: var(--cover-text);
    z-index: 2;
  }
  .cover .page-footer .pn { color: var(--cover-text); }
  .cover .page-header .mark svg rect { fill: var(--cover-accent) !important; }
  .cover .inside {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 0.78in 0.75in 0.68in;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 34px;
  }
  .cover-hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .cover-title-block {
    max-width: 6.4in;
    margin: 0 auto;
  }
  .cover h1 {
    color: var(--cover-text);
    font-size: 112px;
    letter-spacing: 0;
    line-height: 0.88;
    font-weight: 700;
    max-width: none;
    text-wrap: balance;
  }
  .cover h1 span {
    color: var(--cover-accent);
  }
  .cover .lede {
    color: var(--cover-text);
    font-size: 19px;
    line-height: 1.58;
    max-width: 5.55in;
    margin: 30px auto 0;
    font-weight: 400;
  }
  .cover-mark {
    font-family: 'JetBrains Mono', monospace;
    color: var(--cover-accent);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 24px;
    font-weight: 600;
  }
  .cover-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
  }
  .cover-chips span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(245, 241, 230, 0.22);
    border-radius: 999px;
    background: rgba(245, 241, 230, 0.06);
    color: var(--cover-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .cover-note {
    min-height: 2.8in;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 26px;
    padding: 22px;
    background: var(--cover-panel);
    color: var(--cover-text);
    border: 1px solid rgba(245, 241, 230, 0.18);
    box-shadow: 12px 12px 0 rgba(240, 160, 112, 0.16);
  }
  .cover-note__number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 54px;
    line-height: 0.9;
    color: var(--cover-accent);
    font-weight: 500;
  }
  .cover-note__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cover-accent);
    font-weight: 700;
    margin-bottom: 12px;
  }
  .cover-note p {
    margin: 0;
    color: var(--cover-text);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
  }
  .cover-bottom {
    width: 100%;
    padding-bottom: 0.05in;
  }
  .cover-index {
    grid-area: index;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 4px;
  }
  .cover-index span {
    border-top: 2px solid var(--cover-accent);
    padding-top: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--cover-text);
    font-weight: 700;
  }
  .cover .mascot {
    grid-area: mascot;
    position: relative;
    top: auto;
    right: auto;
    width: 2.35in;
    margin: 0;
    align-self: end;
  }
  .cover .mascot.dark .av {
    background: #eaf4fb;
    border-color: var(--cover-bg);
    box-shadow: 4px 4px 0 var(--cover-accent);
  }
  .cover .mascot.dark .bubble {
    background: var(--cover-panel);
    color: var(--cover-text);
    border-color: rgba(245, 241, 230, 0.2);
    box-shadow: none;
  }
  .cover .mascot.dark .bubble::before {
    background: var(--cover-panel);
    border-color: rgba(245, 241, 230, 0.2);
  }
  .cover .mascot.dark .bubble strong { color: var(--cover-text); }
  .cover .mascot.dark .bubble .step { color: var(--cover-accent); }
  .cover .meta {
    grid-area: meta;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    border-top: 1px solid rgba(245, 241, 230, 0.18);
    padding-top: 18px;
    text-align: left;
  }
  .cover .meta .k {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cover-accent);
    font-weight: 700;
    margin-bottom: 6px;
  }
  .cover .meta .v {
    font-size: 12.5px;
    color: var(--cover-text);
    font-weight: 500;
    line-height: 1.42;
  }
  .cover .meta a {
    color: var(--cover-accent) !important;
    border-bottom-color: var(--cover-accent) !important;
    overflow-wrap: anywhere;
  }

  .beginner-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
  }
  .beginner-path {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 11px 11px;
    min-width: 0;
  }
  .beginner-path span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 5px;
  }
  .beginner-path strong {
    display: block;
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .beginner-path p {
    margin: 0;
    font-size: 10.2px;
    line-height: 1.45;
    color: var(--ink-2);
  }

  .toc-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    gap: 14px;
  }
  .toc-row .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); font-weight: 600; }
  .toc-row .ch { font-weight: 600; font-size: 15px; color: var(--ink); }
  .toc-row .ch .sub { display: block; font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 3px; }
  .toc-row .pg { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink); font-weight: 500; }

  .toc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-top: 24px;
  }
  .toc-group {
    border-top: 1.5px solid var(--ink);
    padding-top: 10px;
  }
  .toc-group .kicker { margin-bottom: 2px; }
  .toc-group .toc-row {
    grid-template-columns: 28px 1fr 32px;
    gap: 10px;
    padding: 9px 0;
  }
  .toc-group .toc-row:first-of-type { border-top: 0; }
  .toc-group .toc-row .ch { font-size: 12.8px; line-height: 1.25; }
  .toc-group .toc-row .sub { font-size: 9.5px; line-height: 1.35; }
  .toc-group .toc-row .num,
  .toc-group .toc-row .pg { font-size: 9.5px; }
  .toc-group-small .toc-row { padding: 8px 0; }

  .bar-chart { display: flex; flex-direction: column; gap: 9px; }
  .bar-row { display: grid; grid-template-columns: 140px 1fr 50px; align-items: center; gap: 10px; font-size: 10.5px; }
  .bar-row .lbl { color: var(--ink); font-weight: 500; }
  .bar-row .track { background: var(--paper-2); height: 14px; border-radius: 2px; overflow: hidden; }
  .bar-row .fill { height: 100%; background: var(--accent); }
  .bar-row .val { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--ink); text-align: right; }

  .legend { display: flex; flex-direction: column; gap: 6px; font-size: 10.5px; }
  .legend .row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; }
  .legend .row .sw { width: 12px; height: 12px; border-radius: 2px; }
  .legend .row .l { color: var(--ink-2); }
  .legend .row .v { font-family: 'JetBrains Mono', monospace; font-weight: 500; color: var(--ink); }

  .handoff-gap-bars {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }
  .gap-row {
    display: grid;
    grid-template-columns: 128px 1fr 38px;
    gap: 9px;
    align-items: center;
    font-size: 10px;
  }
  .gap-row .label {
    color: var(--ink-2);
    line-height: 1.25;
  }
  .gap-row .track {
    height: 12px;
    border-radius: 2px;
    background: var(--paper-2);
    overflow: hidden;
    border: 1px solid var(--rule-2);
  }
  .gap-row .track i {
    display: block;
    width: var(--gap);
    height: 100%;
    background: var(--accent-3);
  }
  .gap-row.best .track i { background: var(--accent-4); }
  .gap-row.bad .track i { background: #b91c1c; }
  .gap-row strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-align: right;
    color: var(--ink);
  }

  .ap-card {
    border: 1px solid var(--rule);
    border-left: 3px solid #b91c1c;
    background: #fff;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .ap-card .t { font-size: 11.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
  .ap-card .d { font-size: 10.5px; line-height: 1.5; color: var(--muted); }
  .anti-pattern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 10px;
    margin-top: 8px;
  }
  .pattern-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 18px;
  }

  .check { display: flex; align-items: flex-start; gap: 8px; font-size: 10.5px; line-height: 1.5; color: var(--ink-2); padding: 4px 0; }
  .check .box { width: 13px; height: 13px; border: 1.4px solid var(--ink); border-radius: 2px; flex-shrink: 0; margin-top: 2px; }
  .check strong { color: var(--ink); }

  .big-num {
    font-size: 180px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--paper-2);
    line-height: 0.85;
  }

  #part-one,
  #part-two,
  #part-three,
  #impact {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 8%, transparent), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.66), transparent 28%),
      var(--paper);
  }
  #part-one::before,
  #part-two::before,
  #part-three::before,
  #impact::before {
    content: "";
    position: absolute;
    left: 0.34in;
    top: 0.72in;
    bottom: 0.72in;
    width: 3px;
    background: var(--page-accent);
  }
  #part-one::after,
  #part-two::after,
  #part-three::after,
  #impact::after {
    position: absolute;
    right: 0.66in;
    bottom: 0.62in;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--page-accent) 54%, var(--muted));
  }
  #part-one::after { content: "Part I / Role"; }
  #part-two::after { content: "Part II / Craft"; }
  #part-three::after { content: "Part III / Handoff"; }
  #impact::after { content: "Part IV / Impact"; }
  #part-one > div[style*="grid-template-columns"],
  #part-two > div[style*="grid-template-columns"],
  #part-three > div[style*="grid-template-columns"] {
    position: relative;
    margin-top: 34px !important;
    padding: 20px 0 18px 22px;
    border-left: 1px solid color-mix(in srgb, var(--page-accent) 54%, var(--rule));
  }
  #part-one > div[style*="grid-template-columns"]::before,
  #part-two > div[style*="grid-template-columns"]::before,
  #part-three > div[style*="grid-template-columns"]::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 22px;
    width: 7px;
    height: 62px;
    background: var(--page-accent);
  }
  #part-one .big-num,
  #part-two .big-num,
  #part-three .big-num,
  #impact .big-num {
    color: color-mix(in srgb, var(--page-accent) 12%, var(--paper-2)) !important;
  }
  #part-one ol,
  #part-two ol,
  #part-three ol {
    padding-left: 16px;
  }
  #part-one ol li,
  #part-two ol li,
  #part-three ol li {
    margin-bottom: 6px;
  }
  #part-one .panel.warm,
  #part-two .panel.warm,
  #part-three .panel.warm,
  #impact .panel.warm {
    background: var(--page-soft);
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--rule));
  }
  .part-opener .opener-hero {
    grid-template-columns: minmax(0, 1.05fr) 2.72in !important;
    gap: 0.34in !important;
    align-items: start;
  }
  .part-opener .opener-index {
    margin-top: 0.08in;
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 22%, var(--rule));
    border-top: 3px solid var(--page-accent);
    border-radius: 6px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 6%, transparent), transparent 58%),
      rgba(255,255,255,0.72);
  }
  .part-opener .opener-index .big-num {
    font-size: 136px;
    margin: -6px 0 2px;
  }
  .part-opener .opener-index > div[style*="border-top"] {
    margin-top: 6px !important;
    padding-top: 12px !important;
  }
  .opener-proof-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--page-accent) 32%, var(--rule));
  }
  .opener-proof-strip span {
    display: block;
    padding: 8px 9px;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 18%, var(--rule));
    background: rgba(255,255,255,0.62);
    border-radius: 4px;
    color: var(--ink-2);
    font-size: 10px;
    line-height: 1.35;
  }
  .opener-proof-strip b {
    display: block;
    margin-bottom: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--page-accent);
  }
  .part-opener .opener-card-grid {
    gap: 12px !important;
  }
  .part-opener .opener-card-grid .panel {
    border-color: color-mix(in srgb, var(--page-accent) 18%, var(--rule));
    border-top: 3px solid color-mix(in srgb, var(--page-accent) 54%, var(--rule));
    background: rgba(255,255,255,0.78);
  }
  .part-opener .opener-card-grid .panel:first-child {
    background: var(--page-soft);
    border-top-color: var(--page-accent);
  }
  .part-opener .opener-flow .flow-step {
    border-color: color-mix(in srgb, var(--page-accent) 18%, var(--rule));
  }

  .callout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
  }
  .callout-grid > div { padding: 14px 16px; }
  .callout-grid .old { background: #fbf3ed; border-right: 1px dashed var(--rule); }
  .callout-grid .new { background: #fff; }
  .callout-grid .lab { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
  .callout-grid .new .lab { color: var(--accent); }
  .callout-grid .body { font-size: 11px; line-height: 1.55; color: var(--ink-2); }
  .callout-grid .body strong { color: var(--ink); }

  [data-screen-label="04 Role old vs new"],
  [data-screen-label="05 Role range and taste"] {
    padding-top: 0.58in;
    padding-bottom: 0.58in;
  }
  [data-screen-label="04 Role old vs new"] .plain-defn {
    margin-top: 6px;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  [data-screen-label="04 Role old vs new"] .callout-grid > div,
  [data-screen-label="05 Role range and taste"] .panel {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .range-warning {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule));
    border-top: 3px solid var(--accent);
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(255,244,232,0.78), rgba(255,255,255,0.92));
    padding: 14px 16px;
    min-height: 100%;
  }
  .range-warning .kicker {
    color: var(--accent);
    margin-bottom: 8px;
  }
  .range-warning h4 {
    font-size: 16px;
    margin-bottom: 7px;
    line-height: 1.2;
  }
  .range-warning p {
    font-size: 11px;
    line-height: 1.55;
    color: var(--ink-2);
    margin: 0;
  }
  .range-receipts {
    display: grid;
    gap: 6px;
    margin-top: 12px;
  }
  .range-receipts span {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 9px;
    align-items: baseline;
    border-top: 1px solid rgba(179,63,22,0.18);
    padding-top: 7px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--ink-2);
  }
  .range-receipts strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }

  [data-screen-label="01b Welcome"] .pull {
    margin-top: 10px !important;
    font-size: 15px;
  }
  [data-screen-label="01b Welcome"] .beginner-paths {
    gap: 8px;
  }
  [data-screen-label="01b Welcome"] .beginner-path {
    padding: 10px 11px;
  }
  [data-screen-label="04 Role old vs new"] p,
  [data-screen-label="04 Role old vs new"] td {
    line-height: 1.38;
  }
  [data-screen-label="04 Role old vs new"] .panel {
    padding: 10px 12px;
  }
  [data-screen-label="04 Role old vs new"] div[style*="margin-top: 22px"] {
    margin-top: 16px !important;
  }
  [data-screen-label="05 Role range and taste"] div[style*="margin-top: 22px"] {
    margin-top: 16px !important;
  }
  [data-screen-label="05 Role range and taste"] .cols-2 {
    gap: 16px;
  }
  [data-screen-label="05 Role range and taste"] .panel,
  [data-screen-label="05 Role range and taste"] .range-warning,
  [data-screen-label="05 Role range and taste"] .ap-card {
    padding: 9px 11px;
  }
  [data-screen-label="05 Role range and taste"] p,
  [data-screen-label="05 Role range and taste"] li,
  [data-screen-label="05 Role range and taste"] .ap-card .d {
    font-size: 10px !important;
    line-height: 1.36 !important;
  }
  [data-screen-label="05 Role range and taste"] .range-receipts {
    gap: 4px;
    margin-top: 8px;
  }
  [data-screen-label="05 Role range and taste"] .range-receipts span {
    padding-top: 5px;
    line-height: 1.25;
  }
  [data-screen-label="09 AI partner"] .partner-flow-section {
    margin-top: 12px;
  }
  [data-screen-label="09 AI partner"] .skills-grid {
    gap: 6px;
  }
  [data-screen-label="09 AI partner"] .skill {
    padding: 8px 9px;
  }
  [data-screen-label="15 URLs and rationale"] div[style*="margin-top: 22px"] {
    margin-top: 16px !important;
  }
  [data-screen-label="15 URLs and rationale"] .link-recipe,
  [data-screen-label="15 URLs and rationale"] .cols-2 {
    gap: 12px;
  }
  [data-screen-label="15 URLs and rationale"] p,
  [data-screen-label="15 URLs and rationale"] li,
  [data-screen-label="15 URLs and rationale"] td {
    font-size: 10px !important;
    line-height: 1.36 !important;
  }
  [data-screen-label="15 URLs and rationale"] .principle {
    margin: 10px 0 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .weekly-rhythm-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
  }
  .weekly-rhythm-strip div {
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 18%, var(--rule));
    border-radius: 5px;
    background: rgba(255,255,255,0.72);
  }
  .weekly-rhythm-strip div:first-child {
    border-top: 3px solid var(--page-accent);
    background: var(--page-soft);
    padding-top: 7px;
  }
  .weekly-rhythm-strip span {
    display: block;
    margin-bottom: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--page-accent);
    font-weight: 700;
  }
  .weekly-rhythm-strip strong {
    display: block;
    font-size: 11px;
    line-height: 1.25;
  }
  [data-screen-label="06 Monday runbook"] .section-title {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  [data-screen-label="06 Monday runbook"] .daily-action-grid,
  [data-screen-label="06 Monday runbook"] .weekly-maintenance-grid {
    gap: 11px;
  }
  [data-screen-label="06 Monday runbook"] .daily-action-grid .panel,
  [data-screen-label="06 Monday runbook"] .weekly-maintenance-grid .panel {
    border-top: 3px solid color-mix(in srgb, var(--page-accent) 45%, var(--rule));
    background: rgba(255,255,255,0.78);
    padding-top: 10px;
  }
  [data-screen-label="06 Monday runbook"] .daily-action-grid .panel:first-child,
  [data-screen-label="06 Monday runbook"] .weekly-maintenance-grid .panel:nth-child(2) {
    background: var(--page-soft);
    border-top-color: var(--page-accent);
  }
  [data-screen-label="06 Monday runbook"] .rhythm-flow {
    gap: 6px;
    margin-top: 10px;
  }
  [data-screen-label="06 Monday runbook"] .rhythm-flow .flow-step {
    min-height: 66px;
    padding: 8px 5px;
    border-color: color-mix(in srgb, var(--page-accent) 20%, var(--rule));
  }
  [data-screen-label="06 Monday runbook"] .rhythm-flow .flow-step:nth-child(-n+3) {
    background: color-mix(in srgb, var(--page-accent) 5%, #fff);
  }
  [data-screen-label="06 Monday runbook"] .rhythm-flow .flow-step:last-child {
    border-top: 3px solid var(--ink);
    padding-top: 6px;
  }

  [data-screen-label="09 AI partner"],
  [data-screen-label="10 System with teeth"],
  [data-screen-label="11 Compliance and runbook"] {
    padding-top: 0.58in;
    padding-bottom: 0.58in;
  }
  [data-screen-label="09 AI partner"] .skills-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 7px;
  }
  .partner-flow-section {
    margin-top: 14px;
    padding: 12px 12px 10px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 28%, var(--rule));
    border-top: 3px solid var(--page-accent);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(238,243,250,0.9), rgba(255,255,255,0.96));
  }
  .partner-tools-section {
    margin-top: 12px;
  }
  [data-screen-label="09 AI partner"] .partner-flow-section .flow {
    margin-top: 6px;
    margin-bottom: 4px;
  }
  [data-screen-label="09 AI partner"] .skill {
    grid-column: span 3;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 7px 8px;
    min-height: 48px;
  }
  [data-screen-label="09 AI partner"] .skill .name {
    font-size: 8.8px;
    line-height: 1.25;
  }
  [data-screen-label="09 AI partner"] .skill .desc {
    font-size: 8.5px;
    line-height: 1.34;
  }
  [data-screen-label="09 AI partner"] .skill:nth-child(-n+3) {
    grid-column: span 4;
    min-height: 66px;
    padding: 8px 9px;
    background: var(--page-soft);
    border-color: color-mix(in srgb, var(--page-accent) 26%, var(--rule));
    border-top: 3px solid var(--page-accent);
  }
  [data-screen-label="09 AI partner"] .skill:nth-child(-n+3) .name {
    font-size: 10.2px;
  }
  [data-screen-label="09 AI partner"] .skill:nth-child(-n+3) .desc {
    font-size: 9.4px;
    line-height: 1.4;
  }
  [data-screen-label="09 AI partner"] .flow-step {
    padding: 8px 5px;
    border-color: color-mix(in srgb, var(--page-accent) 18%, var(--rule));
  }
  [data-screen-label="09 AI partner"] .action-card.compact {
    padding: 8px 10px;
    margin-top: 8px;
  }
  [data-screen-label="09 AI partner"] .action-card.compact p {
    font-size: 9.5px;
    line-height: 1.32;
  }

  [data-screen-label="23 Appendix B resources"] .action-card {
    background: linear-gradient(180deg, #fff8d8, rgba(255, 255, 255, 0.92));
  }
  [data-screen-label="23 Appendix B resources"] .cols-3 .panel {
    border-top: 3px solid var(--page-accent);
  }
  [data-screen-label="23 Appendix B resources"] .cols-3 .panel h4 {
    margin-bottom: 4px;
  }
  [data-screen-label="23 Appendix B resources"] .cols-3 .panel a {
    color: var(--page-accent);
    border-bottom-color: color-mix(in srgb, var(--page-accent) 48%, transparent);
  }
  [data-screen-label="23 Appendix B resources"] .panel.warm {
    background: var(--page-soft);
    border-color: color-mix(in srgb, var(--page-accent) 24%, var(--rule));
  }
  [data-screen-label="23 Appendix B resources"] .panel.warm .kicker {
    color: var(--page-accent) !important;
  }
  [data-screen-label="09 AI partner"] .flow-step .label {
    font-size: 9px;
  }
  [data-screen-label="09 AI partner"] .panel.dark {
    margin-top: 12px !important;
    padding: 12px 16px;
  }
  [data-screen-label="09 AI partner"] .panel.dark p {
    font-size: 10.2px;
    line-height: 1.5;
  }
  .rule-buckets {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr 0.85fr 0.85fr;
    gap: 8px;
    margin-top: 10px;
  }
  .rule-bucket {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 20%, var(--rule));
    border-radius: 5px;
    background: rgba(255,255,255,0.76);
  }
  .rule-bucket.primary {
    background: var(--page-soft);
    border-top: 3px solid var(--page-accent);
    padding-top: 8px;
  }
  .rule-bucket .kicker {
    margin-bottom: 6px;
    color: var(--page-accent);
  }
  .rule-bucket p {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 6px;
    margin: 0;
    padding: 5px 0;
    border-top: 1px solid color-mix(in srgb, var(--page-accent) 12%, var(--rule-2));
    font-size: 9.2px;
    line-height: 1.35;
    color: var(--ink-2);
  }
  .rule-bucket p:first-of-type {
    border-top: 0;
  }
  .rule-bucket p span {
    font-family: 'JetBrains Mono', monospace;
    color: var(--page-accent);
    font-weight: 700;
  }
  [data-screen-label="10 System with teeth"] table {
    font-size: 9.6px;
  }
  [data-screen-label="10 System with teeth"] th,
  [data-screen-label="10 System with teeth"] td {
    padding: 6px 8px;
    line-height: 1.35;
  }
  [data-screen-label="11 Compliance and runbook"] {
    padding-top: 0.52in;
    padding-bottom: 0.52in;
  }
  [data-screen-label="11 Compliance and runbook"] table {
    font-size: 9.7px;
  }
  .quality-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 12px;
    margin-top: 12px;
  }
  .quality-check-card {
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 20%, var(--rule));
    border-radius: 5px;
    background: rgba(255,255,255,0.76);
  }
  .quality-check-card.machine {
    background: var(--page-soft);
    border-top: 3px solid var(--page-accent);
    padding-top: 9px;
  }
  .quality-check-card .kicker {
    color: var(--page-accent);
    margin-bottom: 6px;
  }
  .quality-check-card p {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: 8px;
    margin: 0;
    padding: 5px 0;
    border-top: 1px solid color-mix(in srgb, var(--page-accent) 12%, var(--rule-2));
    font-size: 9.6px;
    line-height: 1.36;
  }
  .quality-check-card p:first-of-type {
    border-top: 0;
  }
  .quality-check-card p strong {
    color: var(--ink);
  }
  .quality-check-card p span {
    color: var(--ink-2);
  }
  [data-screen-label="11 Compliance and runbook"] th,
  [data-screen-label="11 Compliance and runbook"] td {
    padding: 5px 8px;
    line-height: 1.34;
  }
  [data-screen-label="11 Compliance and runbook"] .ap-card {
    padding: 8px 10px;
    margin-bottom: 0;
  }
  [data-screen-label="11 Compliance and runbook"] .ap-card .t {
    font-size: 10.2px;
  }
  [data-screen-label="11 Compliance and runbook"] .ap-card .d {
    font-size: 9px;
    line-height: 1.38;
  }
  [data-screen-label="11 Compliance and runbook"] .section-title {
    margin-bottom: 10px;
    padding-bottom: 9px;
  }
  [data-screen-label="11 Compliance and runbook"] ol {
    column-count: 2;
    column-gap: 28px;
    font-size: 10px !important;
    line-height: 1.42;
  }
  [data-screen-label="11 Compliance and runbook"] ol li {
    break-inside: avoid;
    margin-bottom: 4px;
  }
  [data-screen-label="11 Compliance and runbook"] .runbook-steps li::marker {
    color: var(--page-accent);
    font-weight: 700;
  }

  [data-screen-label="14 Specs as contract"],
  [data-screen-label="18 Impact velocity"],
  [data-screen-label="20 Impact AI leverage"],
  [data-screen-label="22 Appendix A patterns"],
  [data-screen-label="24 Appendix C closing"] {
    padding-top: 0.52in;
    padding-bottom: 0.52in;
  }
  [data-screen-label="14 Specs as contract"] table,
  [data-screen-label="24 Appendix C closing"] table {
    font-size: 9.5px;
  }
  [data-screen-label="14 Specs as contract"] td,
  [data-screen-label="24 Appendix C closing"] th,
  [data-screen-label="24 Appendix C closing"] td {
    padding: 5px 8px;
    line-height: 1.34;
  }
  [data-screen-label="14 Specs as contract"] ul {
    font-size: 10.2px;
    line-height: 1.46;
  }
  .spec-contract-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 16px;
    margin-top: 14px;
  }
  .spec-anatomy {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
  }
  .spec-card {
    min-height: 78px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 18%, var(--rule));
    border-radius: 5px;
    background: rgba(255,255,255,0.76);
  }
  .spec-card.primary {
    background: var(--page-soft);
    border-top: 3px solid var(--page-accent);
    padding-top: 7px;
  }
  .spec-card span {
    display: block;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: var(--page-accent);
    font-weight: 700;
  }
  .spec-card strong {
    display: block;
    font-size: 10.2px;
    line-height: 1.25;
  }
  .spec-card p {
    margin: 3px 0 0;
    font-size: 8.8px;
    line-height: 1.34;
    color: var(--ink-2);
  }
  .agreement-card {
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 22%, var(--rule));
    border-top: 3px solid var(--page-accent);
    border-radius: 5px;
    background: var(--page-soft);
  }
  .agreement-card .kicker {
    color: var(--page-accent);
    margin-bottom: 5px;
  }
  .agreement-card p {
    margin: 0;
    padding: 7px 0;
    border-top: 1px solid color-mix(in srgb, var(--page-accent) 16%, var(--rule));
    font-size: 9.3px;
    line-height: 1.36;
  }
  .agreement-card p:first-of-type {
    border-top: 0;
  }
  .agreement-card p strong {
    display: block;
    color: var(--ink);
  }
  .agreement-card p span {
    display: block;
    color: var(--ink-2);
  }
  .spec-template-row {
    display: grid;
    grid-template-columns: 1.24fr 0.76fr;
    gap: 14px;
    align-items: stretch;
    margin-top: 16px;
  }
  .spec-snippet {
    background: var(--ink);
    color: #efece4;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    line-height: 1.45;
  }
  .stale-spec-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 18px;
  }
  [data-screen-label="14 Specs as contract"] .panel[style*="JetBrains"] {
    font-size: 8.8px !important;
    line-height: 1.36 !important;
    padding: 14px 16px;
  }
  [data-screen-label="14 Specs as contract"] .panel.warm {
    padding: 12px 14px;
  }
  [data-screen-label="14 Specs as contract"] .panel.warm p {
    font-size: 10px;
    line-height: 1.45;
  }
  .link-recipe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
  }
  .link-recipe div {
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 18%, var(--rule));
    border-radius: 5px;
    background: rgba(255,255,255,0.72);
  }
  .link-recipe div:first-child {
    background: var(--page-soft);
    border-top: 3px solid var(--page-accent);
    padding-top: 7px;
  }
  .link-recipe span {
    display: block;
    margin-bottom: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: var(--page-accent);
    font-weight: 700;
  }
  .link-recipe strong {
    display: block;
    font-size: 10px;
  }
  .link-recipe p {
    margin: 3px 0 0;
    font-size: 8.8px;
    line-height: 1.35;
    color: var(--ink-2);
  }

  [data-screen-label="18 Impact velocity"] .case {
    grid-template-columns: 18px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
  }
  [data-screen-label="18 Impact velocity"] .case .name { font-size: 10.4px; }
  [data-screen-label="18 Impact velocity"] .case .meta { font-size: 8.2px; }
  [data-screen-label="18 Impact velocity"] .case .ins {
    font-size: 9px;
    line-height: 1.36;
    margin-top: 3px;
  }
  [data-screen-label="18 Impact velocity"] .case .rk {
    width: 18px;
    height: 18px;
    font-size: 8.5px;
  }
  [data-screen-label="18 Impact velocity"] .case .mult {
    font-size: 9px;
    padding: 2px 6px;
  }
  [data-screen-label="18 Impact velocity"] {
    padding-top: 0.41in;
    padding-bottom: 0.41in;
  }

  [data-screen-label="20 Impact AI leverage"] .skill-bar {
    grid-template-columns: 96px 1fr 32px 32px;
    gap: 6px;
    padding: 2px 0;
  }
  [data-screen-label="20 Impact AI leverage"] .skill-bar .name,
  [data-screen-label="20 Impact AI leverage"] .skill-bar .n,
  [data-screen-label="20 Impact AI leverage"] .skill-bar .pct {
    font-size: 8.8px;
  }
  [data-screen-label="20 Impact AI leverage"] .panel {
    padding: 8px 10px !important;
  }
  [data-screen-label="20 Impact AI leverage"] .panel p {
    font-size: 9.5px !important;
    line-height: 1.4;
  }
  [data-screen-label="20 Impact AI leverage"] .reversal-grid {
    grid-template-columns: repeat(25, 1fr);
    gap: 2px;
  }
  [data-screen-label="20 Impact AI leverage"] .stat-tile {
    padding: 10px 10px 9px;
  }
  [data-screen-label="20 Impact AI leverage"] .stat-tile .v {
    font-size: 30px;
  }

  [data-screen-label="22 Appendix A patterns"] .pattern-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }
  [data-screen-label="22 Appendix A patterns"] .pattern-grid .panel {
    padding: 10px 12px;
  }
  [data-screen-label="22 Appendix A patterns"] .pattern-grid .panel:nth-child(-n+3) {
    background: var(--page-soft);
    border-color: color-mix(in srgb, var(--page-accent) 26%, var(--rule));
    border-top: 3px solid var(--page-accent);
    padding-top: 11px;
  }
  [data-screen-label="22 Appendix A patterns"] .pattern-grid h3 {
    font-size: 15px;
  }
  [data-screen-label="22 Appendix A patterns"] .pattern-grid p {
    font-size: 9.6px !important;
    line-height: 1.42;
  }
  [data-screen-label="22 Appendix A patterns"] .pattern-grid .panel[style*="span 2"] {
    grid-column: span 3 !important;
  }
  [data-screen-label="22 Appendix A patterns"] table {
    font-size: 9.2px;
  }
  [data-screen-label="22 Appendix A patterns"] th,
  [data-screen-label="22 Appendix A patterns"] td {
    padding: 5px 6px;
  }

  [data-screen-label="24 Appendix C closing"] .panel {
    padding: 10px 12px;
  }
  [data-screen-label="24 Appendix C closing"] .panel p {
    font-size: 10px !important;
    line-height: 1.42;
  }
  .final-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
  }
  .final-proof-card {
    --card-accent: var(--page-accent);
    min-height: 170px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--card-accent) 18%, var(--rule));
    border-top: 3px solid var(--card-accent);
    border-radius: 6px;
    background: rgba(255,255,255,0.78);
    display: flex;
    flex-direction: column;
  }
  .final-proof-card.role { --card-accent: var(--accent); }
  .final-proof-card.craft { --card-accent: var(--accent-2); }
  .final-proof-card.handoff { --card-accent: var(--accent-3); }
  .final-proof-card .kicker {
    color: var(--card-accent);
    margin-bottom: 7px;
  }
  .final-proof-card h3 {
    font-size: 17px;
    line-height: 1.15;
    margin: 0 0 8px;
  }
  .final-proof-card p {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
    color: var(--ink-2);
  }
  .proof-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
    padding-top: 10px;
  }
  .proof-checks span {
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--card-accent) 22%, var(--rule));
    border-radius: 3px;
    background: color-mix(in srgb, var(--card-accent) 7%, #fff);
    font-family: 'JetBrains Mono', monospace;
    font-size: 7.6px;
    color: color-mix(in srgb, var(--card-accent) 76%, var(--ink));
    white-space: nowrap;
  }
  .final-check-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 12px;
  }
  .final-check-strip span {
    padding: 7px 8px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.08em;
    color: var(--ink-2);
  }
  [data-screen-label="24 Appendix C closing"] .stat-row {
    gap: 9px;
  }
  [data-screen-label="24 Appendix C closing"] .stat .v {
    font-size: 30px;
  }
  [data-screen-label="24 Appendix C closing"] .panel.dark {
    margin-top: 16px !important;
    padding: 18px !important;
  }
  [data-screen-label="24 Appendix C closing"] .panel.dark h3 {
    font-size: 19px !important;
  }

  .youtube-resource-row {
    margin-top: 14px;
  }
  .youtube-channel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .youtube-channel {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 66px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, var(--page-accent) 18%, var(--rule));
    border-radius: 6px;
    background: rgba(255,255,255,0.82);
    color: inherit;
    text-decoration: none;
  }
  .youtube-channel:first-child {
    background: var(--page-soft);
    border-top: 3px solid var(--page-accent);
    padding-top: 6px;
  }
  .youtube-channel img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--page-accent) 20%, var(--rule));
    display: block;
  }
  .youtube-channel strong {
    display: block;
    font-size: 12px;
    line-height: 1.2;
  }
  .youtube-channel em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 9.5px;
    line-height: 1.35;
    color: var(--ink-2);
  }

  .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .skill {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 3px;
    align-items: start;
  }
  .skill .name { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent); font-weight: 600; padding-top: 1px; }
  .skill .name a, .skill-bar .name a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .skill .name a:hover, .skill-bar .name a:hover { opacity: 0.7; }
  .skill .desc { font-size: 10px; line-height: 1.45; color: var(--ink-2); }

  /* ========== IMPACT (Part IV) visualization styles ========== */

  /* Big stat tile, used on impact opener */
  .stat-tile {
    border: 1px solid var(--rule);
    background: #fff;
    padding: 14px 14px 12px 14px;
    position: relative;
  }
  .stat-tile .v {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
    font-feature-settings: "tnum";
  }
  .stat-tile .v.accent { color: var(--accent); }
  .stat-tile .v.blue { color: var(--accent-2); }
  .stat-tile .v.green { color: var(--accent-3); }
  .stat-tile .v.gold { color: var(--accent-4); }
  .stat-tile .l {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
    margin-top: 8px;
  }
  .stat-tile .sub {
    font-size: 9.5px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.4;
  }
  .stat-tile.dark { background: var(--ink); border-color: var(--ink); }
  .stat-tile.dark .v { color: #f5f1e6; }
  .stat-tile.dark .v.accent { color: #f0a070; }
  .stat-tile.dark .l { color: #f5f1e6; }
  .stat-tile.dark .sub { color: #b8b3a3; }
  .stat-tile.warm { background: var(--tag); border-color: #f4d8b8; }

  /* Multiplier ribbon (case studies) */
  .case {
    border: 1px solid var(--rule);
    background: #fff;
    padding: 11px 12px 11px 12px;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: start;
    margin-bottom: 7px;
  }
  .case .rk {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent);
    background: var(--tag);
    border: 1px solid #f4d8b8;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
  }
  .case .body { line-height: 1.4; }
  .case .name { font-size: 11.5px; font-weight: 600; color: var(--ink); }
  .case .meta { font-size: 9.5px; color: var(--muted); margin-top: 2px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.02em; }
  .case .ins { font-size: 10.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
  .case .mult {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: var(--tag);
    border: 1px solid #f4d8b8;
    padding: 3px 8px;
    border-radius: 100px;
    white-space: nowrap;
    margin-top: 1px;
  }
  .case .mult.muted { color: var(--muted); background: var(--paper-2); border-color: var(--rule); }
  .case .mult.blue { color: var(--accent-2); background: #eef3fa; border-color: #cfd9e8; }

  /* Velocity comparison table */
  .velocity-section {
    margin-top: 18px;
  }
  .chart-note {
    font-size: 10.5px;
    color: var(--muted);
    margin: 4px 0 12px;
    line-height: 1.45;
  }
  .time-table {
    border: 1px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
  }
  .time-head,
  .time-row {
    display: grid;
    grid-template-columns: 130px 1fr 70px 70px;
    align-items: center;
    gap: 0;
  }
  .time-head {
    background: var(--paper-2);
    border-bottom: 1px solid var(--ink);
    padding: 7px 12px;
  }
  .time-head div {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
  }
  .time-head div:nth-child(3) {
    color: var(--accent);
    text-align: right;
  }
  .time-head div:nth-child(4) {
    color: var(--muted);
    text-align: right;
  }
  .time-row {
    padding: 11px 12px;
    border-bottom: 1px solid var(--rule);
  }
  .time-row:last-child { border-bottom: 0; }
  .time-row .feature strong {
    display: block;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .time-row .feature span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-top: 2px;
  }
  .time-track {
    position: relative;
    height: 28px;
  }
  .time-track span {
    position: absolute;
    left: 0;
    height: 9px;
    border-radius: 2px;
  }
  .time-track .actual {
    top: 3px;
    width: var(--actual);
    min-width: 4px;
    background: var(--accent);
  }
  .time-track .typical {
    bottom: 3px;
    width: var(--typical);
    background: var(--paper-2);
    border: 1px dashed var(--rule-2);
  }
  .actual-value,
  .typical-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-align: right;
  }
  .actual-value {
    color: var(--ink);
    font-weight: 700;
  }
  .typical-value { color: var(--muted); }
  .time-legend {
    display: flex;
    gap: 18px;
    margin-top: 10px;
    align-items: center;
    font-size: 10px;
    color: var(--muted);
  }
  .time-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .time-legend .sw {
    width: 14px;
    height: 8px;
    border-radius: 1px;
    display: inline-block;
  }
  .time-legend .sw.actual { background: var(--accent); }
  .time-legend .sw.typical {
    background: var(--paper-2);
    border: 1px dashed var(--rule-2);
  }
  .time-legend .note {
    margin-left: auto;
    font-style: italic;
  }

  /* Time bar (idea→ship vs industry) */
  .vs-bar {
    display: grid;
    grid-template-columns: 80px 1fr 70px;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    margin: 3px 0;
  }
  .vs-bar .lbl { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.04em; }
  .vs-bar .track { background: var(--paper-2); height: 9px; border-radius: 1px; position: relative; overflow: hidden; }
  .vs-bar .fill { height: 100%; }
  .vs-bar .fill.shipped { background: var(--accent-3); }
  .vs-bar .fill.industry { background: var(--rule-2); border-right: 2px solid var(--muted); }
  .vs-bar .v { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ink); font-weight: 600; }

  /* Heatmap */
  .heatmap-wrap {
    border: 1px solid var(--rule);
    background: #fff;
    padding: 12px 14px 10px 14px;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 24px;
    align-items: end;
  }
  .heatmap-grid {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 6px;
    width: max-content;
  }
  .heatmap-rows {
    display: grid;
    grid-template-rows: repeat(7, 9px);
    gap: 2px;
    font-size: 7.5px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    align-items: center;
    padding-top: 12px;
  }
  .heatmap-cells {
    display: grid;
    grid-template-rows: 14px repeat(7, 13px);
    gap: 2px;
    grid-auto-flow: column;
    grid-auto-columns: 13px;
  }
  .heatmap-cells .month-label {
    font-size: 7.5px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    padding-top: 2px;
    grid-row: 1;
  }
  .heatmap-cells .cell {
    width: 13px;
    height: 13px;
    border-radius: 1.5px;
    background: var(--paper-2);
  }
  .heatmap-cells .cell.l1 { background: #f0d9c2; }
  .heatmap-cells .cell.l2 { background: #e8b585; }
  .heatmap-cells .cell.l3 { background: #d27a3a; }
  .heatmap-cells .cell.l4 { background: var(--accent); }
  .heatmap-cells .cell.l5 { background: #8a2e08; }
  .heatmap-cells .cell.empty { background: #f3f0e7; }
  .heatmap-cells .cell.future { background: transparent; }

  .heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    margin-top: 6px;
    justify-content: flex-start;
    grid-column: 1;
  }
  .heatmap-legend .sw { width: 9px; height: 9px; border-radius: 1.5px; }
  .heatmap-note {
    align-self: stretch;
    border-left: 1px solid var(--rule);
    padding-left: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    color: var(--ink-2);
    font-size: 9.5px;
    line-height: 1.45;
  }
  .heatmap-note > div:first-child {
    grid-column: span 2;
  }
  .heatmap-note strong {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 3px;
  }
  .heatmap-note p {
    font-size: 9.5px;
    line-height: 1.45;
    margin: 0;
    color: var(--muted);
  }
  .heatmap-note .mini-stat {
    border-top: 1px solid var(--rule);
    padding-top: 8px;
  }
  .heatmap-note .mini-stat span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .heatmap-note .mini-stat strong {
    font-size: 17px;
    letter-spacing: 0;
    font-feature-settings: "tnum";
  }

  /* Monthly commits, vertical bars */
  .month-chart {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    align-items: end;
    height: 150px;
    padding: 18px 4px 0 4px;
  }
  .month-bar { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 4px; }
  .month-bar .bar {
    width: 100%;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    position: relative;
  }
  .month-bar .bar .tick {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--ink);
    font-weight: 600;
  }
  .month-bar .lbl {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  /* Skill bar chart, denser */
  .skill-bar {
    display: grid;
    grid-template-columns: 110px 1fr 36px 36px;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    padding: 3px 0;
  }
  .skill-bar .name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
  }
  .skill-bar .track { background: var(--paper-2); height: 11px; border-radius: 2px; overflow: hidden; }
  .skill-bar .fill { height: 100%; background: var(--accent); }
  .skill-bar .fill.alt { background: var(--accent-2); }
  .skill-bar .fill.alt2 { background: var(--accent-3); }
  .skill-bar .n { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ink); text-align: right; font-weight: 600; }
  .skill-bar .pct { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--muted); text-align: right; }

  /* Reversal funnel/dot diagram */
  .reversal-grid {
    display: grid;
    grid-template-columns: repeat(25, 1fr);
    gap: 3px;
    padding: 6px 0;
  }
  .reversal-grid .dot {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--rule);
  }
  .reversal-grid .dot.grilled { background: var(--accent-2); }
  .reversal-grid .dot.flipped { background: var(--accent); border: 1.5px solid var(--ink); }

  /* Journey timeline (horizontal) */
  .journey {
    position: relative;
    padding: 30px 0 14px 0;
    margin-top: 12px;
  }
  .journey-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
  }
  /* The track line sits behind the dots, drawn from the first dot's center to the last dot's center. */
  .journey-track::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 9px;
    height: 2px;
    background: var(--ink);
    z-index: 0;
  }
  .journey-stop {
    position: relative;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .journey-stop .dot {
    width: 18px;
    height: 18px;
    background: var(--paper);
    border: 2.5px solid var(--accent);
    border-radius: 50%;
    z-index: 2;
    position: relative;
    margin-bottom: 12px;
  }
  .journey-stop .dot.peak { background: var(--accent); }
  .journey-stop .when {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .journey-stop .title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 5px;
    max-width: 100%;
  }
  .journey-stop .desc {
    font-size: 9.5px;
    line-height: 1.45;
    color: var(--muted);
    max-width: 100%;
  }

  /* Pill cluster (system debt) */
  .pill-cluster { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--tag);
    color: var(--accent);
    border: 1px solid #f4d8b8;
    font-weight: 500;
  }
  .pill.muted {
    background: var(--paper-2);
    color: var(--muted);
    border-color: var(--rule);
    text-decoration: line-through;
  }
  .pill.blue {
    background: #eef3fa;
    color: var(--accent-2);
    border-color: #cfd9e8;
  }

  /* Donut for reversal rate */
  .donut-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    align-items: center;
  }
  .donut-row .label { font-size: 10.5px; color: var(--ink-2); line-height: 1.5; }
  .donut-row .label strong { color: var(--ink); }

  /* Caveat strip */
  .caveat {
    border-top: 1px solid var(--rule);
    padding: 7px 0;
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 8px;
    font-size: 10px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .caveat:first-of-type { border-top: 1.5px solid var(--ink); }
  .caveat .mk {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--accent);
    font-weight: 700;
    padding-top: 1px;
  }
  .caveat strong { color: var(--ink); }

  @media screen and (min-width: 1100px) {
    .web-nav {
      position: fixed;
      top: 50%;
      left: 18px;
      width: 132px;
      margin: 0;
      transform: translateY(-50%);
      grid-template-columns: 1fr;
      border-radius: 8px;
    }
    .web-nav a {
      min-height: 42px;
      justify-content: flex-start;
      padding-left: 14px;
    }
    .page {
      margin-top: 34px;
      margin-bottom: 34px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  @media screen and (max-width: 900px) {
    html,
    body {
      background: var(--paper);
      overflow-x: hidden;
    }
    .web-nav {
      top: 0;
      width: 100%;
      margin: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      grid-template-columns: repeat(7, max-content);
      justify-content: start;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .web-nav::-webkit-scrollbar { display: none; }
    .web-nav a {
      min-width: 92px;
      min-height: 44px;
      font-size: 8.5px;
    }

    .page {
      width: 100%;
      min-height: auto;
      margin: 0;
      padding: 72px 22px 48px;
      border: 0;
      border-bottom: 1px solid var(--rule);
      box-shadow: none;
      overflow: visible;
    }
    .page-header,
    .page-footer {
      position: relative;
      inset: auto;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      margin: 0 0 24px;
      white-space: normal;
      gap: 16px;
    }
    .page-footer { margin: 32px 0 0; }

    .mascot {
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
      margin: 0 0 22px;
    }
    .mascot .av {
      width: 58px;
      height: 58px;
      border-radius: 8px;
    }
    .mascot .bubble {
      min-height: 58px;
      font-size: 10px;
    }
    #part-one > .mascot,
    #part-two > .mascot,
    #part-three > .mascot,
    #impact > .mascot {
      top: auto;
      width: 100%;
      margin-bottom: 24px;
    }
    #part-one > .mascot .av,
    #part-two > .mascot .av,
    #part-three > .mascot .av,
    #impact > .mascot .av {
      width: 58px;
      height: 58px;
    }
    #part-one > .mascot .bubble,
    #part-two > .mascot .bubble,
    #part-three > .mascot .bubble,
    #impact > .mascot .bubble {
      font-size: 10px;
      line-height: 1.42;
      box-shadow: none;
    }

    #part-one::before,
    #part-two::before,
    #part-three::before,
    #impact::before,
    #part-one::after,
    #part-two::after,
    #part-three::after,
    #impact::after,
    #part-one > div[style*="grid-template-columns"]::before,
    #part-two > div[style*="grid-template-columns"]::before,
    #part-three > div[style*="grid-template-columns"]::before {
      display: none;
    }
    #part-one > div[style*="grid-template-columns"],
    #part-two > div[style*="grid-template-columns"],
    #part-three > div[style*="grid-template-columns"] {
      padding: 0 !important;
      border-left: 0;
      margin-top: 0 !important;
    }

    .page > .eyebrow:first-of-type,
    .page > div > .eyebrow,
    .page .eyebrow + h1,
    .page .eyebrow + h2,
    .page .eyebrow + h3,
    .page > div[style*="margin-top"] > h2:first-of-type,
    .page > div[style*="margin-top"] > h1:first-of-type,
    .page .eyebrow + h1 + .deck,
    .page .eyebrow + h2 + .deck,
    .page > div[style*="margin-top"] > h1:first-of-type + .deck,
    .page > div[style*="margin-top"] > h2:first-of-type + .deck {
      max-width: 100%;
    }

    h1 { font-size: 44px; line-height: 1.04; }
    h2 { font-size: 34px; }
    h3 { font-size: 20px; }
    h4 { font-size: 15px; }
    .page h1[style] { font-size: 44px !important; }
    .page h2[style] { font-size: 34px !important; }
    .page h3[style] { font-size: 20px !important; }
    p, ul, ol { font-size: 15px; line-height: 1.58; }
    .page p[style*="font-size: 9"],
    .page p[style*="font-size: 10"],
    .page p[style*="font-size: 11"],
    .page li[style*="font-size: 9"],
    .page li[style*="font-size: 10"],
    .page li[style*="font-size: 11"],
    .page div[style*="font-size: 9"],
    .page div[style*="font-size: 10"],
    .page div[style*="font-size: 11"],
    .page span[style*="font-size: 8"],
    .page span[style*="font-size: 9"],
    .page span[style*="font-size: 10"],
    .page span[style*="font-size: 11"] {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }
    table { font-size: 13px; }
    th, td { padding: 10px 8px; }
    .eyebrow, .kicker { font-size: 10px; line-height: 1.4; }
    .deck,
    .deck.serif,
    .deck.sans {
      max-width: 100%;
      font-size: 18px;
      line-height: 1.5;
    }
    .pull { font-size: 19px; }

    .cols-2,
    .cols-3,
    .cols-12,
    .toc-grid,
    .anti-pattern-grid,
    .pattern-grid,
    .callout-grid,
    .spec-contract-grid,
    .spec-anatomy,
    .spec-template-row,
    .link-recipe,
    .final-proof-grid,
    .final-check-strip,
    .weekly-rhythm-strip,
    .youtube-channel-grid,
    .skills-grid,
    .stat-row,
    .flow,
    .journey-track,
    .donut-row,
    .rule-buckets,
    .quality-split,
    .page > div[style*="display: grid"],
    .page > div[style*="display:grid"] {
      grid-template-columns: 1fr !important;
    }
    .page [style*="display:grid"],
    .page [style*="display: grid"] {
      max-width: 100%;
      min-width: 0;
    }
    .page [style*="grid-template-columns: repeat(2"],
    .page [style*="grid-template-columns: repeat(3"],
    .page [style*="grid-template-columns: repeat(4"],
    .page [style*="grid-template-columns: repeat(5"],
    .page [style*="grid-template-columns: 7fr"],
    .page [style*="grid-template-columns: 1.4fr"],
    .page [style*="grid-template-columns: 1fr 1fr"],
    .page [style*="grid-template-columns: 1fr 1fr 1fr"] {
      grid-template-columns: 1fr !important;
    }
    .pattern-grid,
    .pattern-grid > *,
    .pattern-grid .panel[style*="span 2"] {
      grid-column: auto !important;
      min-width: 0;
      width: 100%;
    }
    [data-screen-label="22 Appendix A patterns"] .pattern-grid {
      grid-template-columns: 1fr !important;
      gap: 12px;
    }
    [data-screen-label="22 Appendix A patterns"] .pattern-grid .panel,
    [data-screen-label="22 Appendix A patterns"] .pattern-grid .panel[style*="span 2"] {
      grid-column: auto !important;
      width: 100%;
    }
    .page [style*="display:flex"],
    .page [style*="display: flex"] {
      max-width: 100%;
      min-width: 0;
      flex-wrap: wrap;
    }
    .flow { gap: 10px; }
    .flow-step { text-align: left; display: grid; grid-template-columns: 36px 1fr; align-items: center; }
    [data-screen-label="09 AI partner"] .partner-flow-section .flow-step {
      padding: 12px;
    }
    [data-screen-label="09 AI partner"] .partner-flow-section .flow-step .label {
      font-size: 12px;
      line-height: 1.35;
      text-align: left;
    }
    .part-opener .opener-hero,
    .opener-proof-strip,
    .part-opener .opener-card-grid {
      grid-template-columns: 1fr !important;
    }
    .part-opener .opener-index {
      margin-top: 0;
      padding: 16px;
    }
    .part-opener .opener-index .big-num {
      font-size: 104px;
    }
    .stat-row { gap: 18px; }
    .big-num { font-size: 108px; }
    .panel,
    .stat-tile,
    .case,
    .heatmap-wrap {
      padding: 16px;
      border-radius: 6px;
    }
    .toc-row {
      grid-template-columns: 34px 1fr;
      gap: 10px 14px;
      padding: 16px 0;
    }
    .toc-row .pg {
      grid-column: 2;
      color: var(--muted);
    }
    .toc-row .ch { font-size: 17px; }
    .toc-row .ch .sub { font-size: 13px; line-height: 1.45; }
    .toc-group .toc-row {
      grid-template-columns: 34px 1fr;
      gap: 10px 14px;
      padding: 14px 0;
    }
    .toc-group .toc-row .ch { font-size: 17px; }
    .toc-group .toc-row .sub { font-size: 13px; }
    .toc-group .toc-row .num,
    .toc-group .toc-row .pg { font-size: 11px; }
    .beginner-paths {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .beginner-path {
      padding: 13px 14px;
    }
    .beginner-path strong {
      font-size: 14px;
    }
    .beginner-path p {
      font-size: 13px;
      line-height: 1.45;
    }
    .rule-bucket,
    .quality-check-card {
      width: 100%;
    }
    .rule-bucket p,
    .quality-check-card p {
      font-size: 13px;
      line-height: 1.45;
    }
    .rule-bucket p { grid-template-columns: 32px 1fr; }
    .quality-check-card p { grid-template-columns: 96px 1fr; }
    .rule-bucket p *,
    .quality-check-card p * {
      overflow-wrap: anywhere;
    }
    .rule-bucket .kicker,
    .quality-check-card .kicker {
      font-size: 10px;
    }
    .bar-row,
    .skill,
    .skill-bar,
    .vs-bar,
    .case {
      grid-template-columns: 1fr !important;
      gap: 8px;
    }
    .time-head,
    .time-row {
      grid-template-columns: 80px minmax(72px, 1fr) 42px 48px;
      gap: 4px;
      padding-left: 8px;
      padding-right: 8px;
    }
    .time-head > div,
    .time-row > div {
      min-width: 0;
    }
    .time-head div {
      font-size: 7.5px;
      letter-spacing: 0.08em;
      line-height: 1.25;
    }
    .time-row .feature strong { font-size: 10px; }
    .time-row .feature span { font-size: 7.5px; }
    .actual-value,
    .typical-value {
      font-size: 9px;
    }
    .skill,
    [data-screen-label="09 AI partner"] .skill,
    [data-screen-label="09 AI partner"] .skill:nth-child(-n+3) {
      grid-column: auto !important;
      min-height: auto;
    }
    .heatmap-wrap {
      display: block;
      overflow-x: visible;
    }
    .heatmap-grid {
      min-width: 0;
      width: 100%;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 4px;
    }
    .heatmap-rows {
      grid-template-rows: repeat(7, 7px);
      gap: 1.5px;
      font-size: 6.5px;
      padding-top: 10px;
    }
    .heatmap-cells {
      grid-template-rows: 10px repeat(7, 7px);
      grid-auto-columns: minmax(0, 1fr);
      gap: 1.5px;
      width: 100%;
      min-width: 0;
    }
    .heatmap-cells .month-label {
      font-size: 6px;
      letter-spacing: 0.04em;
    }
    .heatmap-cells .cell {
      width: 100%;
      height: 7px;
      min-width: 3px;
      border-radius: 1px;
    }
    .heatmap-note {
      min-width: 0;
      width: 100%;
      margin-top: 14px;
      padding-left: 0;
      border-left: 0;
      border-top: 1px solid var(--rule);
      padding-top: 12px;
    }
    .reversal-grid { grid-template-columns: repeat(10, 1fr); }
    .journey { padding-top: 10px; }
    .journey-track::before { display: none; }
    .journey-stop {
      align-items: flex-start;
      text-align: left;
      padding: 14px 0 14px 26px;
      border-left: 2px solid var(--rule);
    }
    .journey-stop .dot {
      position: absolute;
      left: -10px;
      top: 17px;
      margin: 0;
    }

    .cover {
      min-height: calc(100svh - 44px);
      padding: 0;
    }
    .cover::before {
      inset: 44px 18px 28px;
      background:
        linear-gradient(180deg, rgba(245, 241, 230, 0.06), rgba(245, 241, 230, 0));
    }
    .cover .inside {
      padding: 40px 24px 32px;
      min-height: calc(100svh - 44px);
      gap: 28px;
    }
    .cover h1 {
      font-size: 78px !important;
      max-width: 100%;
    }
    .cover .lede {
      max-width: 100%;
      font-size: 18px;
    }
    .cover .meta {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .cover-note {
      min-height: auto;
      padding: 18px;
      gap: 18px;
      box-shadow: 8px 8px 0 rgba(240, 160, 112, 0.14);
    }
    .cover-note__number {
      font-size: 42px;
    }
    .cover-index {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cover .mascot {
      width: 100%;
    }
  }

  @media screen and (max-width: 520px) {
    .page { padding: 64px 16px 42px; }
    .download-pdf-button {
      position: fixed;
      right: 14px;
      bottom: 14px;
      width: 48px;
      height: 48px;
      min-height: 48px;
      gap: 0;
      padding: 0;
      justify-content: center;
      border-radius: 999px;
    }
    .download-pdf-button__icon {
      width: 34px;
      height: 34px;
      border-radius: 999px;
    }
    .download-pdf-button__icon svg {
      width: 19px;
      height: 19px;
    }
    .download-pdf-button__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }
    .page-header,
    .page-footer {
      font-size: 8px;
      letter-spacing: 0.1em;
    }
    .mascot { gap: 9px; }
    .mascot .bubble { padding: 8px 9px; }
    .cover .inside { padding: 40px 18px 38px; }
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 18px; }
    .page h1[style] { font-size: 36px !important; }
    .page h2[style] { font-size: 28px !important; }
    .page h3[style] { font-size: 18px !important; }
    .cover h1 { font-size: 60px !important; }
    .cover .lede { font-size: 16.5px; }
    .cover-chips span { width: 100%; justify-content: center; }
    .cover-bottom { margin-top: 64px; }
    .cover-index { grid-template-columns: 1fr; }
    .cover .meta { grid-template-columns: 1fr 1fr; }
    .time-head {
      display: none;
    }
    .time-row {
      grid-template-columns: 1fr auto auto;
      gap: 8px 10px;
      padding: 11px 12px;
      align-items: start;
    }
    .time-row .time-track {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
    }
    .actual-value,
    .typical-value {
      font-size: 11px;
      line-height: 1.3;
      white-space: nowrap;
    }
    .actual-value::before,
    .typical-value::before {
      display: block;
      margin-bottom: 2px;
      font-family: 'Inter', sans-serif;
      font-size: 8px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }
    .actual-value::before {
      content: "Shipped";
    }
    .typical-value::before {
      content: "Typical";
    }
    table {
      display: block;
      overflow-x: auto;
      white-space: normal;
    }
    [data-screen-label="22 Appendix A patterns"] table {
      display: block;
      overflow: visible;
      font-size: 13px;
    }
    [data-screen-label="22 Appendix A patterns"] table thead {
      display: none;
    }
    [data-screen-label="22 Appendix A patterns"] table tbody,
    [data-screen-label="22 Appendix A patterns"] table tr,
    [data-screen-label="22 Appendix A patterns"] table td {
      display: block;
      width: 100%;
    }
    [data-screen-label="22 Appendix A patterns"] table tr {
      border: 1px solid var(--rule);
      border-radius: 6px;
      background: #fff;
      padding: 12px;
      margin-bottom: 10px;
    }
    [data-screen-label="22 Appendix A patterns"] table td {
      border: 0;
      padding: 4px 0;
      text-align: left !important;
    }
    [data-screen-label="22 Appendix A patterns"] table td:first-child {
      font-weight: 700;
      color: var(--ink);
      padding-bottom: 8px;
      border-bottom: 1px solid var(--rule);
      margin-bottom: 6px;
    }
    [data-screen-label="22 Appendix A patterns"] table td:not(:first-child) {
      display: grid;
      grid-template-columns: 104px 1fr;
      gap: 12px;
      align-items: center;
      min-height: 30px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
    }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(2)::before { content: "Default"; }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(3)::before { content: "Loading"; }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(4)::before { content: "Streaming"; }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(5)::before { content: "Half-loaded"; }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(6)::before { content: "Error"; }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(7)::before { content: "Empty"; }
    [data-screen-label="22 Appendix A patterns"] table td:nth-child(8)::before { content: "Refusal"; }
    [data-screen-label="22 Appendix A patterns"] table td:not(:first-child)::before {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 600;
    }
    .stat-tile .v { font-size: 34px; }
  }

  @media print {
    .web-nav,
    .download-pdf-button { display: none !important; }
    html, body {
      background: #fff;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    * {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    .page {
      margin: 0 !important;
      box-shadow: none !important;
      width: 8.5in !important;
      height: 11in !important;
      min-height: 11in !important;
      max-height: 11in !important;
      overflow: hidden !important;
      page-break-after: always !important;
      break-after: page !important;
      page-break-inside: avoid !important;
      break-inside: avoid !important;
    }
    .page:last-child {
      page-break-after: auto !important;
      break-after: auto !important;
    }
    .cover {
      background: #10110d !important;
      isolation: auto !important;
      print-color-adjust: exact !important;
      -webkit-print-color-adjust: exact !important;
    }
    .cover::before {
      display: none !important;
      content: none !important;
      background: none !important;
      print-color-adjust: exact !important;
      -webkit-print-color-adjust: exact !important;
    }
    .cover .mascot {
      display: none !important;
    }
    .cover-bottom {
      grid-template-columns: 1fr !important;
      grid-template-areas: "meta" !important;
    }
    .cover .inside {
      z-index: 1 !important;
    }
    .cover .page-header,
    .cover .page-footer {
      z-index: 1 !important;
    }
    @page { size: Letter portrait; margin: 0; }

  }