:root {
      color-scheme: dark;
      --bg: #090d18;
      --bg-elevated: #0d1322;
      --surface: rgba(18, 26, 43, .82);
      --surface-solid: #121a2b;
      --surface-2: #182238;
      --surface-3: #202c45;
      --text: #f3f6fb;
      --text-2: #bec8d9;
      --muted: #8795ab;
      --line: rgba(181, 196, 221, .14);
      --line-strong: rgba(181, 196, 221, .24);
      --accent: #7de1ce;
      --accent-2: #8ba7ff;
      --accent-3: #d5a8ff;
      --accent-soft: rgba(125, 225, 206, .12);
      --accent-line: rgba(125, 225, 206, .34);
      --danger: #ff9c9c;
      --shadow-lg: 0 28px 80px rgba(0, 0, 0, .36);
      --shadow-md: 0 16px 44px rgba(0, 0, 0, .22);
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --sidebar-width: 304px;
      --topbar-height: 68px;
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --ease-standard: cubic-bezier(.2, .8, .2, 1);
    }

    html[data-theme="light"] {
      color-scheme: light;
      --bg: #f5f7fb;
      --bg-elevated: #ffffff;
      --surface: rgba(255, 255, 255, .86);
      --surface-solid: #ffffff;
      --surface-2: #eef2f8;
      --surface-3: #e5eaf3;
      --text: #111827;
      --text-2: #3f4b5f;
      --muted: #68758a;
      --line: rgba(29, 43, 70, .12);
      --line-strong: rgba(29, 43, 70, .22);
      --accent: #087f70;
      --accent-2: #425fca;
      --accent-3: #7a4ba0;
      --accent-soft: rgba(8, 127, 112, .09);
      --accent-line: rgba(8, 127, 112, .25);
      --shadow-lg: 0 28px 80px rgba(30, 45, 75, .15);
      --shadow-md: 0 16px 44px rgba(30, 45, 75, .10);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-height) + 24px); }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 78% 8%, rgba(80, 112, 221, .12), transparent 30rem),
        radial-gradient(circle at 20% 90%, rgba(64, 183, 155, .08), transparent 34rem),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .35;
      background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: linear-gradient(to bottom, black, transparent 75%);
      z-index: -1;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    a { color: var(--accent); text-underline-offset: .18em; }
    ::selection { background: var(--accent); color: #07110f; }
    [hidden] { display: none !important; }

    .skip-link {
      position: fixed; left: 16px; top: 12px; z-index: 1000;
      transform: translateY(-140%); background: var(--text); color: var(--bg);
      padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 700;
      transition: transform 180ms var(--ease-out);
    }
    .skip-link:focus { transform: translateY(0); }

    .progress-track { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; background: transparent; }
    .progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 18px var(--accent); transition: width 100ms linear; }

    .app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns 360ms var(--ease-out); }
    .sidebar {
      position: sticky; top: 0; align-self: start; height: 100vh; z-index: 30;
      padding: 24px 18px 18px;
      border-right: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
      backdrop-filter: blur(20px) saturate(130%);
      display: flex; flex-direction: column; gap: 22px;
      transition: opacity 280ms var(--ease-out), transform 360ms var(--ease-out), width 360ms var(--ease-out);
    }
    .brand { display: flex; align-items: center; gap: 12px; padding: 2px 7px 10px; }
    .brand-mark {
      position: relative; width: 38px; height: 38px; flex: none; border-radius: 12px;
      background: linear-gradient(145deg, rgba(125,225,206,.24), rgba(139,167,255,.24));
      border: 1px solid var(--line-strong); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 12px 28px rgba(0,0,0,.16);
    }
    .brand-mark::before, .brand-mark::after { content: ""; position: absolute; border-radius: 50%; border: 2px solid var(--accent); }
    .brand-mark::before { width: 17px; height: 17px; inset: 8px auto auto 8px; }
    .brand-mark::after { width: 7px; height: 7px; right: 7px; bottom: 7px; border-color: var(--accent-2); background: var(--surface-solid); }
    .brand-copy { min-width: 0; }
    .brand-copy strong { display: block; font-size: 14px; letter-spacing: -.01em; line-height: 1.25; }
    .brand-copy span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }

    .sidebar-section-title { padding: 0 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .chapter-nav { display: grid; gap: 5px; overflow-y: auto; padding: 2px 4px 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
    .chapter-link {
      position: relative; width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) 8px; gap: 9px; align-items: start;
      text-align: left; border: 1px solid transparent; background: transparent; border-radius: 12px; padding: 10px 9px;
      cursor: pointer; transition: transform 220ms var(--ease-out), background 220ms, border-color 220ms, box-shadow 220ms;
    }
    .chapter-link:hover { background: var(--surface); border-color: var(--line); transform: translateX(2px); }
    .chapter-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .chapter-link.is-active { background: linear-gradient(115deg, var(--accent-soft), transparent 90%); border-color: var(--accent-line); box-shadow: inset 3px 0 var(--accent); transform: translateX(3px); }
    .chapter-link__number { color: var(--muted); font: 700 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; padding-top: 2px; }
    .chapter-link.is-active .chapter-link__number { color: var(--accent); }
    .chapter-link__copy { min-width: 0; }
    .chapter-link__copy strong { display: block; font-size: 12.5px; line-height: 1.3; }
    .chapter-link__copy small { display: none; color: var(--muted); font-size: 10px; line-height: 1.35; margin-top: 3px; }
    .chapter-link__dot { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background 200ms, border-color 200ms, box-shadow 200ms; }
    .chapter-link.is-active .chapter-link__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
    .sidebar-footer { margin-top: auto; border-top: 1px solid var(--line); padding: 14px 8px 0; }
    .sidebar-progress { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }
    .sidebar-progress strong { color: var(--text-2); font-variant-numeric: tabular-nums; }
    .sidebar-progress-track { height: 5px; margin-top: 9px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
    .sidebar-progress-fill { height: 100%; width: 10%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 420ms var(--ease-out); }

    .main { min-width: 0; }
    .topbar {
      position: sticky; top: 0; z-index: 25; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between;
      padding: 0 clamp(18px, 3vw, 44px); border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(18px) saturate(130%);
    }
    .topbar-left { display: flex; align-items: center; min-width: 0; gap: 12px; }
    .menu-button { display: none; }
    .breadcrumb { display: flex; align-items: center; min-width: 0; gap: 9px; font-size: 12px; color: var(--muted); }
    .breadcrumb strong { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
    .breadcrumb-index { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); background: var(--surface); }
    .topbar-actions { display: flex; align-items: center; gap: 7px; }
    .icon-button, .search-button {
      height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center; transition: transform 180ms var(--ease-out), border-color 180ms, background 180ms;
    }
    .icon-button { width: 38px; padding: 0; }
    .icon-button svg, .search-button svg, .menu-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .icon-button:hover, .search-button:hover { transform: translateY(-1px); border-color: var(--line-strong); background: var(--surface-2); }
    .icon-button:focus-visible, .search-button:focus-visible, .menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .search-button { gap: 9px; padding: 0 11px; color: var(--text-2); font-size: 12px; }
    .kbd { display: inline-flex; align-items: center; min-width: 24px; height: 21px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: inset 0 -1px var(--line); }

    .stage { padding: clamp(32px, 5vw, 72px) clamp(18px, 5vw, 72px) 80px; }
    .chapter { max-width: 1240px; margin: 0 auto; transform-origin: center top; }
    .chapter-header { max-width: 850px; margin-bottom: 34px; }
    .chapter-kicker { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
    .chapter-kicker span { width: 28px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
    .chapter-header h1 { margin: 13px 0 12px; font-size: clamp(40px, 6vw, 74px); line-height: .99; letter-spacing: -.055em; font-weight: 750; max-width: 900px; }
    .chapter-header > p { margin: 0; color: var(--text-2); font-size: clamp(16px, 2vw, 20px); line-height: 1.6; max-width: 760px; }

    .hero-card {
      position: relative; overflow: hidden; margin: 8px 0 54px; padding: clamp(28px, 5vw, 54px); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(125,225,206,.10), rgba(139,167,255,.08) 46%, rgba(213,168,255,.06)), var(--surface);
      box-shadow: var(--shadow-lg); isolation: isolate;
    }
    .hero-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 25% 75%, rgba(255,255,255,.03)); pointer-events: none; }
    .hero-card__glow { position: absolute; width: 420px; height: 420px; right: -160px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(139,167,255,.28), transparent 68%); filter: blur(12px); z-index: -1; animation: breathe 7s ease-in-out infinite alternate; }
    @keyframes breathe { from { transform: scale(.88) translate3d(0,0,0); opacity: .55; } to { transform: scale(1.08) translate3d(-12px,18px,0); opacity: .9; } }
    .hero-card__content { position: relative; z-index: 1; }
    .eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .eyebrow__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(125,225,206,.45); animation: pulse 2.4s ease-out infinite; }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(125,225,206,.42); } 70% { box-shadow: 0 0 0 9px rgba(125,225,206,0); } 100% { box-shadow: 0 0 0 0 rgba(125,225,206,0); } }
    .hero-card h2 { margin: 18px 0 14px; font-size: clamp(34px, 5vw, 64px); line-height: 1.02; letter-spacing: -.045em; max-width: 820px; }
    .hero-card p { color: var(--text-2); font-size: clamp(16px, 2vw, 20px); max-width: 740px; margin: 0 0 28px; }
    .pipeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 26px 0 30px; }
    .pipeline-step { border: 1px solid var(--line); background: color-mix(in srgb, var(--surface-solid) 76%, transparent); border-radius: 999px; padding: 7px 11px; color: var(--text-2); font-size: 11px; font-weight: 750; letter-spacing: .01em; }
    .pipeline-arrow { color: var(--muted); font-size: 13px; }
    .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 0 0 28px; }
    .hero-stats > div { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 12, 22, .18); }
    html[data-theme="light"] .hero-stats > div { background: rgba(255,255,255,.42); }
    .hero-stats strong { display: block; color: var(--text); font-size: 24px; line-height: 1; letter-spacing: -.04em; }
    .hero-stats span { display: block; color: var(--muted); margin-top: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .primary-action, .secondary-action { height: 44px; border-radius: 11px; padding: 0 17px; cursor: pointer; font-size: 13px; font-weight: 750; transition: transform 180ms var(--ease-out), box-shadow 180ms, border-color 180ms; }
    .primary-action { border: 1px solid transparent; background: var(--text); color: var(--bg); box-shadow: 0 12px 26px rgba(0,0,0,.18); }
    .secondary-action { border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); }
    .primary-action:hover, .secondary-action:hover { transform: translateY(-2px); }

    .content-layout { display: grid; grid-template-columns: minmax(0, 850px) minmax(180px, 230px); justify-content: space-between; gap: clamp(36px, 5vw, 72px); align-items: start; }
    .prose { min-width: 0; }
    .prose > :first-child { margin-top: 0; }
    .prose h2, .prose h3, .prose h4 { position: relative; scroll-margin-top: calc(var(--topbar-height) + 24px); color: var(--text); line-height: 1.18; letter-spacing: -.025em; }
    .prose h2 { margin: 60px 0 18px; padding-top: 16px; font-size: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
    .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
    .prose h3 { margin: 38px 0 14px; font-size: clamp(22px, 3vw, 28px); }
    .prose h4 { margin: 28px 0 12px; font-size: 19px; }
    .heading-anchor { position: absolute; left: -24px; top: auto; opacity: 0; color: var(--muted); text-decoration: none; font-size: .55em; font-weight: 600; transition: opacity 160ms; }
    .prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .prose h4:hover .heading-anchor, .heading-anchor:focus { opacity: 1; }
    .prose p { color: var(--text-2); margin: 0 0 18px; }
    .prose strong { color: var(--text); font-weight: 720; }
    .prose em { color: var(--text-2); }
    .prose ul, .prose ol { color: var(--text-2); padding-left: 1.35rem; margin: 0 0 22px; }
    .prose li { margin: 7px 0; padding-left: .25rem; }
    .prose li::marker { color: var(--accent); }
    .prose hr { height: 1px; border: 0; background: var(--line); margin: 44px 0; }
    .prose .callout { margin: 24px 0; padding: 20px 22px; border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: linear-gradient(100deg, var(--accent-soft), transparent); color: var(--text); }
    .prose .callout p:last-child { margin-bottom: 0; }
    .prose code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .88em; color: color-mix(in srgb, var(--accent) 75%, var(--text)); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: .15em .38em; }
    .heading-anchor svg { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .prose .start-path-intro { max-width: 720px; margin-bottom: 16px; color: var(--muted); }
    .prose .start-path { list-style: none; counter-reset: start-path; display: grid; gap: 11px; margin: 0 0 28px; padding: 0; }
    .prose .start-path > li { counter-increment: start-path; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; padding: 16px 17px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 90%, transparent)); transition: transform 180ms var(--ease-out), border-color 180ms, box-shadow 180ms; }
    .prose .start-path > li:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 13px 34px rgba(0,0,0,.08); }
    .prose .start-path > li::before { content: counter(start-path, decimal-leading-zero); display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--accent-line); border-radius: 11px; color: var(--accent); background: var(--accent-soft); font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
    .start-path__copy { min-width: 0; }
    .start-path__copy > strong { display: block; margin: 1px 0 4px; color: var(--text); font-size: 14px; line-height: 1.4; }
    .start-path__copy > span { display: block; color: var(--text-2); font-size: 11px; line-height: 1.55; }
    .start-path__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
    .prose a.os-action-link, .prose a.prose-resource-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); text-decoration: none; transition: transform 170ms var(--ease-out), border-color 170ms, background 170ms; }
    .prose a.os-action-link { padding: 8px 10px; font-size: 10px; line-height: 1.2; }
    .prose a.prose-resource-link { padding: 4px 8px; vertical-align: baseline; font-size: .86em; }
    .prose a.os-action-link:hover, .prose a.prose-resource-link:hover { transform: translateY(-1px); border-color: var(--accent-line); background: var(--accent-soft); }
    .prose a.os-action-link:focus-visible, .prose a.prose-resource-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .os-action-link__label, .prose-resource-link__label { font-weight: 720; white-space: nowrap; }
    .os-action-link__source, .prose-resource-link__source { color: var(--muted); font: 600 8px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
    .os-action-link svg, .prose-resource-link svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    @media (max-width: 620px) {
      .prose .start-path > li { grid-template-columns: 36px minmax(0, 1fr); gap: 11px; padding: 14px; }
      .prose .start-path > li::before { width: 34px; height: 34px; border-radius: 10px; }
      .start-path__actions { display: grid; grid-template-columns: 1fr; }
      .prose a.os-action-link { justify-content: space-between; width: 100%; }
      .os-action-link__source, .prose-resource-link__source { display: none; }
    }
    .prose pre { position: relative; margin: 24px 0; padding: 21px 22px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: #080d18; box-shadow: inset 0 1px rgba(255,255,255,.03); scrollbar-width: thin; }
    html[data-theme="light"] .prose pre { background: #121827; }
    .prose pre code { padding: 0; border: 0; background: transparent; color: #d9e2f2; line-height: 1.75; }
    .copy-code { position: absolute; top: 9px; right: 9px; height: 28px; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 0 9px; background: rgba(255,255,255,.06); color: #b7c3d6; cursor: pointer; font-size: 10px; font-weight: 750; transition: background 160ms, color 160ms; }
    .copy-code:hover { background: rgba(255,255,255,.12); color: #fff; }
    .table-wrap { width: 100%; margin: 24px 0 30px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); }
    .prose table { width: 100%; min-width: 610px; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
    .prose th { padding: 13px 15px; color: var(--text); background: var(--surface-2); border-bottom: 1px solid var(--line-strong); text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
    .prose td { padding: 13px 15px; color: var(--text-2); border-bottom: 1px solid var(--line); vertical-align: top; }
    .prose tr:last-child td { border-bottom: 0; }
    .prose tbody tr { transition: background 160ms; }
    .prose tbody tr:hover { background: var(--accent-soft); }
    .task-list-item { list-style: none; margin-left: -1.2rem !important; }
    .task-list-item input { appearance: none; width: 17px; height: 17px; margin: 0 9px 0 0; vertical-align: -3px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); cursor: pointer; transition: background 180ms, border-color 180ms, box-shadow 180ms; }
    .task-list-item input:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface-solid); }
    .task-list-item:has(input:checked) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }

    .on-this-page { position: sticky; top: calc(var(--topbar-height) + 30px); max-height: calc(100vh - var(--topbar-height) - 60px); }
    .on-this-page__inner { border-left: 1px solid var(--line); padding-left: 18px; }
    .on-this-page__title { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 12px; }
    .local-toc { display: grid; gap: 4px; max-height: 70vh; overflow-y: auto; margin-left: -19px; padding-left: 19px; scrollbar-width: none; }
    .local-toc a { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; text-decoration: none; padding: 5px 0 5px 10px; border-left: 1px solid transparent; margin-left: -19px; transition: color 160ms, border-color 160ms, transform 160ms; }
    .local-toc a:hover { color: var(--text-2); }
    .local-toc a.is-active { color: var(--accent); border-color: var(--accent); transform: translateX(3px); }

    .chapter-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 68px; padding-top: 28px; border-top: 1px solid var(--line); }
    .pager-button { min-height: 78px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 16px 18px; cursor: pointer; text-align: left; transition: transform 220ms var(--ease-out), border-color 220ms, background 220ms; }
    .pager-button--next { text-align: right; }
    .pager-button:hover { transform: translateY(-3px); border-color: var(--accent-line); background: var(--accent-soft); }
    .pager-label { display: block; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }
    .pager-title { display: block; color: var(--text); font-size: 14px; font-weight: 720; }

    .search-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: min(14vh, 120px) 18px 24px; background: rgba(2, 5, 11, .72); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
    .search-overlay.is-open { opacity: 1; pointer-events: auto; }
    .search-dialog { width: min(680px, 100%); max-height: min(680px, 78vh); display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface-solid); box-shadow: 0 36px 100px rgba(0,0,0,.5); transform: translateY(-18px) scale(.98); opacity: 0; transition: transform 260ms var(--ease-out), opacity 180ms; overflow: hidden; }
    .search-overlay.is-open .search-dialog { transform: translateY(0) scale(1); opacity: 1; }
    .search-input-row { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
    .search-input-row svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
    .search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
    .search-input::placeholder { color: var(--muted); }
    .search-close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
    .search-close svg { width: 15px; height: 15px; stroke: currentColor; }
    .search-results { overflow-y: auto; padding: 8px; }
    .search-result { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; text-align: left; border: 1px solid transparent; border-radius: 12px; background: transparent; padding: 11px; cursor: pointer; transition: background 150ms, border-color 150ms; }
    .search-result:hover, .search-result.is-selected { background: var(--accent-soft); border-color: var(--accent-line); }
    .search-result__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--accent); background: var(--surface-2); font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
    .search-result__copy { min-width: 0; }
    .search-result__copy strong { display: block; font-size: 13px; line-height: 1.35; }
    .search-result__meta { display: block; color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 3px; }
    .search-empty { padding: 38px 24px; text-align: center; color: var(--muted); font-size: 13px; }
    .search-footer { display: flex; align-items: center; gap: 13px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

    .mobile-scrim { display: none; position: fixed; inset: 0; z-index: 27; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity 200ms; }
    .back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 20; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 180ms, transform 220ms var(--ease-out), border-color 180ms; }
    .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .back-to-top:hover { border-color: var(--accent-line); }

    body.focus-mode .app-shell { grid-template-columns: 0 minmax(0,1fr); }
    body.focus-mode .sidebar { opacity: 0; pointer-events: none; transform: translateX(-100%); }
    body.focus-mode .content-layout { grid-template-columns: minmax(0, 900px); justify-content: center; }
    body.focus-mode .on-this-page { display: none; }
    body.focus-mode .stage { padding-inline: clamp(20px, 8vw, 120px); }

    @media (max-width: 1080px) {
      :root { --sidebar-width: 268px; }
      .content-layout { grid-template-columns: minmax(0, 1fr); }
      .on-this-page { display: none; }
    }
    @media (max-width: 820px) {
      .app-shell { display: block; }
      .sidebar { position: fixed; left: 0; top: 0; width: min(328px, 88vw); transform: translateX(-104%); box-shadow: var(--shadow-lg); }
      body.mobile-nav-open .sidebar { transform: translateX(0); }
      .mobile-scrim { display: block; pointer-events: none; }
      body.mobile-nav-open .mobile-scrim { opacity: 1; pointer-events: auto; }
      .menu-button { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
      .topbar { padding-inline: 14px; }
      .search-button span:not(.kbd) { display: none; }
      .search-button { width: 38px; padding: 0; }
      .search-button .kbd { display: none; }
      .breadcrumb > span:not(.breadcrumb-index) { display: none; }
      .chapter-header h1 { font-size: clamp(38px, 12vw, 58px); }
      .stage { padding-top: 36px; }
      .hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .chapter-pager { grid-template-columns: 1fr; }
      .pager-button--next { text-align: left; }
      .icon-button[data-action="focus"] { display: none; }
    }
    @media (max-width: 520px) {
      .stage { padding-inline: 15px; padding-bottom: 54px; }
      .topbar-actions { gap: 5px; }
      .icon-button[data-action="print"] { display: none; }
      .chapter-header { margin-bottom: 26px; }
      .hero-card { padding: 24px 19px; margin-bottom: 38px; border-radius: 19px; }
      .hero-stats { gap: 8px; }
      .hero-stats > div { padding: 13px; }
      .pipeline-arrow { display: none; }
      .pipeline { gap: 6px; }
      .prose h2 { font-size: 29px; }
      .prose .callout { padding: 17px; }
      .table-wrap { border-radius: 12px; }
      .heading-anchor { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

    @media print {
      :root { color-scheme: light; }
      body { background: white !important; color: black; font-size: 10pt; }
      body::before, .sidebar, .topbar, .progress-track, .on-this-page, .chapter-pager, .back-to-top, .search-overlay, .mobile-scrim, .hero-actions, .copy-code { display: none !important; }
      .app-shell, .main { display: block !important; }
      .stage { padding: 0 !important; }
      .chapter, .chapter[hidden] { display: block !important; max-width: none; page-break-before: always; }
      .chapter:first-child { page-break-before: auto; }
      .chapter-header { margin: 0 0 18pt; }
      .chapter-header h1 { font-size: 28pt; color: black; }
      .chapter-header p, .prose p, .prose li, .prose td { color: #333; }
      .content-layout { display: block; }
      .hero-card, .table-wrap, .prose pre, .prose .callout { box-shadow: none; break-inside: avoid; }
      .hero-card { background: #f4f6f9; border-color: #bbb; }
      .prose h2, .prose h3 { color: black; break-after: avoid; }
      .prose h2 { border-color: #ccc; }
      .table-wrap { border-color: #bbb; overflow: visible; }
      .prose table { min-width: 0; font-size: 8pt; }
      .prose th { color: black; background: #eee; }
      .prose pre { white-space: pre-wrap; background: #f3f3f3; border-color: #ccc; }
      .prose pre code { color: #111; }
      a { color: black; text-decoration: none; }
    }