:root {
      color-scheme: light;
      --paper: #f6f3ec;
      --paper-2: #fffdf8;
      --ink: #17201d;
      --muted: #66716c;
      --line: #d9d7cc;
      --line-strong: #bbbdb3;
      --navy: #172f3b;
      --teal: #0d756a;
      --teal-soft: #dceee8;
      --amber: #be6a2c;
      --amber-soft: #f4e7d8;
      --blue: #315d92;
      --blue-soft: #e3eaf3;
      --code: #101b20;
      --code-ink: #e7eee9;
      --code-muted: #91a49c;
      --shadow: 0 18px 52px rgba(23, 32, 29, 0.08);
      --radius: 18px;
    }
    * { box-sizing: border-box; }
    /* Keep scrolling available while removing visible scrollbar tracks. */
    * { scrollbar-width: none; }
    *::-webkit-scrollbar { display: none; }
    html { scroll-behavior: smooth; scroll-padding-top: 24px; }
    body {
      margin: 0;
      background:
        radial-gradient(circle at 79% -5%, rgba(190, 106, 44, 0.10), transparent 28rem),
        var(--paper);
      color: var(--ink);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.58;
    }
    a { color: inherit; }
    code, pre { font-family: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace; }
    .shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100vh; }
    .rail {
      position: sticky;
      inset: 0 auto 0 0;
      height: 100vh;
      overflow-y: auto;
      padding: 26px 22px 34px;
      background: var(--navy);
      color: #f6f8f7;
      border-right: 1px solid rgba(255,255,255,0.08);
    }
    .rail-kicker {
      margin: 0 0 8px;
      color: #9fc8bd;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }
    .rail h1 {
      margin: 0;
      max-width: 12ch;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.72rem;
      font-weight: 500;
      line-height: 1.08;
    }
    .rail-intro { margin: 13px 0 24px; color: #b9c8c6; font-size: 0.88rem; }
    .rail-group {
      margin: 20px 0 8px;
      color: #7fa69e;
      font-size: 0.67rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .rail ol { margin: 0; padding: 0; list-style: none; }
    .rail li { margin: 2px 0; }
    .rail nav a {
      display: grid;
      grid-template-columns: 25px 1fr;
      gap: 8px;
      align-items: start;
      padding: 7px 9px;
      border-radius: 9px;
      color: #d5dfdc;
      font-size: 0.81rem;
      line-height: 1.32;
      text-decoration: none;
      transition: background 120ms ease, color 120ms ease;
    }
    .rail nav a:hover, .rail nav a.active { background: rgba(255,255,255,0.09); color: #fff; }
    .nav-number { color: #8fc5b8; font-variant-numeric: tabular-nums; font-weight: 800; }
    .rail-links {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 12px;
      margin-top: 26px;
      padding-top: 18px;
      border-top: 1px solid rgba(255,255,255,0.13);
      color: #b9c8c6;
      font-size: 0.76rem;
    }
    .main { min-width: 0; padding: 34px clamp(24px, 4.4vw, 76px) 80px; }
    .main-inner { max-width: 1320px; margin: 0 auto; }
    .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 5vw, 64px);
      border: 1px solid var(--line);
      border-radius: 26px;
      background: rgba(255,253,248,0.86);
      box-shadow: var(--shadow);
    }
    .hero::after {
      position: absolute;
      width: 340px;
      height: 340px;
      right: -140px;
      bottom: -190px;
      border: 42px solid rgba(13,117,106,0.07);
      border-radius: 50%;
      content: "";
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 18px;
      color: var(--teal);
      font-size: 0.72rem;
      font-weight: 850;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .eyebrow::before { width: 26px; height: 2px; background: currentColor; content: ""; }
    .hero h2 {
      margin: 0;
      max-width: 880px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.45rem, 5.8vw, 5.25rem);
      font-weight: 500;
      letter-spacing: -0.045em;
      line-height: 0.98;
    }
    .hero h2 em { color: var(--amber); font-style: normal; white-space: nowrap; }
    .hero-lede {
      max-width: none;
      margin: 25px 0 0;
      color: #4e5a55;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.1rem, 1.7vw, 1.32rem);
      line-height: 1.55;
    }
    .hero-equation {
      display: block;
      width: max-content;
      max-width: 100%;
      margin: 0.18em 0 0.28em;
      overflow: visible;
      color: #302b26;
      font-size: 0.94em;
    }
    .status-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
    .status { padding: 15px 17px; border: 1px solid var(--line); border-radius: 13px; background: rgba(246,243,236,0.62); }
    .status strong { display: block; margin-bottom: 4px; font-size: 0.8rem; letter-spacing: 0.02em; }
    .status span { color: var(--muted); font-size: 0.82rem; }
    .historical-remarks { margin: 30px 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,248,0.74); }
    .historical-remarks h3 { margin-top: 0; }
    .historical-remarks h4 { margin-bottom: 8px; }
    .historical-remarks p { line-height: 1.65; }
    .historical-remarks .plain-note { margin-top: 8px; padding-top: 0; border-top: 0; font-size: 0.95rem; }
    .route { margin: 30px 0 46px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,248,0.74); }
    .route-head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; margin-bottom: 15px; }
    .route h3 { margin: 0; font-size: 0.9rem; }
    .route p { margin: 0; color: var(--muted); font-size: 0.79rem; }
    .route-grid { display: grid; grid-template-columns: repeat(12, minmax(44px, 1fr)); gap: 5px; }
    .route-grid a {
      display: grid;
      place-items: center;
      min-height: 44px;
      border-radius: 10px;
      color: white;
      font-size: 0.77rem;
      font-weight: 850;
      text-decoration: none;
    }
    .route-grid a:nth-child(-n+2) { background: var(--teal); }
    .route-grid a:nth-child(n+3):nth-child(-n+8) { background: var(--blue); }
    .route-grid a:nth-child(n+9) { background: var(--amber); }
    .route-grid a:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .section-break { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin: 54px 0 20px; }
    .section-break span { color: var(--muted); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
    .section-break::after { height: 1px; background: var(--line-strong); content: ""; }
    .beat {
      display: grid;
      grid-template-columns: minmax(290px, 0.82fr) minmax(460px, 1.18fr);
      margin: 0 0 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper-2);
      box-shadow: 0 8px 28px rgba(23,32,29,0.045);
      overflow: hidden;
      scroll-margin-top: 24px;
    }
    .story { padding: clamp(24px, 3vw, 38px); }
    .formal { min-width: 0; padding: clamp(20px, 2.6vw, 32px); background: #edf0eb; border-left: 1px solid var(--line); }
    .beat-topline { display: flex; gap: 9px; align-items: center; margin-bottom: 15px; }
    .beat-number {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--navy);
      color: white;
      font-size: 0.78rem;
      font-weight: 850;
      flex: 0 0 auto;
    }
    .phase { padding: 5px 9px; border-radius: 999px; background: var(--teal-soft); color: #075f56; font-size: 0.66rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
    .phase.transform { background: var(--blue-soft); color: #315d92; }
    .phase.close { background: var(--amber-soft); color: #8f4c1e; }
    .story h3 {
      margin: 0 0 16px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.5rem, 2.5vw, 2.08rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.14;
    }
    .story p { margin: 0 0 15px; color: #3d4944; }
    .story p:last-child { margin-bottom: 0; }
    .math-card { margin: 19px 0; padding: 14px 16px; border-left: 3px solid var(--amber); background: #f7efe5; overflow-x: auto; color: #302b26; font-size: 0.96rem; }
    .plain-note { margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.83rem; }
    .plain-note strong { color: var(--ink); }
    .plain-note a { color: #315f58; text-underline-offset: 2px; }
    .formal-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 13px; }
    .formal-kicker { margin: 0 0 3px; color: var(--muted); font-size: 0.67rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }
    .formal-title { margin: 0; font-size: 0.91rem; }
    .source-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
    .source-links a {
      padding: 5px 8px;
      border: 1px solid #c7cec8;
      border-radius: 8px;
      background: rgba(255,255,255,0.65);
      color: #46534d;
      font-size: 0.69rem;
      font-weight: 750;
      text-decoration: none;
      white-space: nowrap;
    }
    .source-links a:hover { border-color: var(--teal); color: var(--teal); }
    pre {
      margin: 0;
      padding: 17px 18px;
      border: 1px solid #26383d;
      border-radius: 13px;
      background: var(--code);
      color: var(--code-ink);
      font-size: clamp(0.72rem, 0.92vw, 0.82rem);
      line-height: 1.55;
      overflow: auto;
      white-space: pre;
      tab-size: 2;
    }
    pre + pre, pre + details, details + pre { margin-top: 10px; }
    .comment { color: var(--code-muted); }
    details { margin-top: 10px; border: 1px solid #cad0ca; border-radius: 11px; background: rgba(255,255,255,0.52); overflow: hidden; }
    summary { cursor: pointer; padding: 11px 13px; color: #46534d; font-size: 0.76rem; font-weight: 800; list-style-position: inside; }
    details pre { border: 0; border-radius: 0; }
    .formal-note { margin: 12px 2px 0; color: var(--muted); font-size: 0.76rem; }
    .formal-note code { padding: 1px 4px; border-radius: 4px; background: rgba(23,47,59,0.08); color: #263c43; }
    .endpoint { margin-top: 48px; padding: clamp(28px, 5vw, 58px); border-radius: 24px; background: var(--navy); color: white; box-shadow: var(--shadow); }
    .endpoint .eyebrow { color: #9fd5c7; }
    .endpoint h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.9rem); font-weight: 500; line-height: 1.08; }
    .endpoint p { max-width: 780px; margin: 19px 0 0; color: #cbd8d5; }
    .endpoint code { color: #fff; }
    .provenance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
    .provenance div { padding: 15px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.05); color: #d5dfdc; font-size: 0.78rem; }
    .provenance strong { display: block; margin-bottom: 4px; color: white; }
    footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 18px 2px 0; color: var(--muted); font-size: 0.77rem; }
    :focus-visible { outline: 3px solid #d99253; outline-offset: 3px; }
    @media (max-width: 1120px) {
      .shell { grid-template-columns: 1fr; }
      .rail { position: relative; height: auto; }
      .rail h1 { max-width: none; }
      .rail nav ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
      .rail-group { grid-column: 1 / -1; }
      .rail-links { margin-top: 18px; }
    }
    @media (max-width: 900px) {
      .beat { grid-template-columns: 1fr; }
      .formal { border-left: 0; border-top: 1px solid var(--line); }
      .status-row, .provenance { grid-template-columns: 1fr; }
      .route-grid { grid-template-columns: repeat(6, 1fr); }
    }
    @media (max-width: 620px) {
      .main { padding: 18px 13px 52px; }
      .hero { padding: 26px 21px; border-radius: 18px; }
      .rail nav ol { grid-template-columns: 1fr; }
      .route { padding: 15px; }
      .route-head { display: block; }
      .route-head p { margin-top: 4px; }
      .route-grid { grid-template-columns: repeat(4, 1fr); }
      .story, .formal { padding: 21px 17px; }
      .formal-head { display: block; }
      .source-links { justify-content: flex-start; margin-top: 10px; }
      footer { display: block; }
    }
    @media print {
      body { background: white; }
      .shell { display: block; }
      .rail, .route { display: none; }
      .main { padding: 0; }
      .hero, .beat, .endpoint { break-inside: avoid; box-shadow: none; }
      .beat { grid-template-columns: 42% 58%; }
      details > * { display: block; }
    }