:root {
    --bg: #f7f8fb;
    --bg-elev: #ffffff;
    --surface: #ffffff;
    --bg-sunk: #f1f3f8;
    --surface-2: #f1f3f8;
    --ink: #1d2433;
    --ink-2: #2c3447;
    --fg: #1d2433;
    --muted: #5c6678;
    --fg-muted: #5c6678;
    --muted-2: #8b94a7;
    --fg-faint: #8b94a7;
    --border: #e3e6ee;
    --border-strong: #c8cdda;

    /* Brand: indigo primary, teal accent — aligned with packages/web/tokens.css */
    --primary: #5b5bd6;
    --primary-hover: #4a4ac0;
    --primary-soft: #ecebff;
    --accent: #00a47c;
    --accent-soft: #d8f5ec;
    --warning: #c67a00;
    --warning-soft: #fff2db;
    --danger: #c33d3d;
    --danger-soft: #fde4e4;

    /* Back-compat aliases used by sections.jsx (rose → indigo, green/amber/blue/red unchanged) */
    --rose: var(--primary);
    --rose-soft: var(--primary-soft);
    --rose-deep: var(--primary-hover);
    --green: var(--accent);
    --green-soft: var(--accent-soft);
    --amber: var(--warning);
    --amber-soft: var(--warning-soft);
    --blue: var(--primary);
    --blue-soft: var(--primary-soft);
    --red: var(--danger);
    --red-soft: var(--danger-soft);

    --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(20, 24, 40, 0.06);
    --shadow-lg: 0 12px 32px rgba(20, 24, 40, 0.08);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
      "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  }
  [data-theme="dark"] {
    --bg: #11141c;
    --bg-elev: #181c27;
    --surface: #181c27;
    --bg-sunk: #0b0e15;
    --surface-2: #0b0e15;
    --ink: #e8ecf5;
    --fg: #e8ecf5;
    --ink-2: #c8cee0;
    --muted: #8b94a7;
    --fg-muted: #8b94a7;
    --muted-2: #5c6678;
    --fg-faint: #5c6678;
    --border: #262b38;
    --border-strong: #353c4d;
    --primary-soft: #25254a;
    --accent-soft: #143229;
    --warning-soft: #3b2c14;
    --danger-soft: #3b1818;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum";
  }
  code, .mono { font-family: var(--font-mono); }
  button { font-family: inherit; cursor: pointer; }
  ::selection { background: var(--primary); color: #fff; }

  /* --- Reveal-on-scroll utilities ---
     Animation timing is driven by JS (playReveal in atoms.jsx). The CSS
     here only sets the initial hidden state. We DO NOT use CSS animations
     or transitions for the actual reveal because in some sandboxed iframes
     the animation timeline never advances, leaving everything stuck. */
  .reveal,
  .will-reveal {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
  }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
  }

  /* Kinetic display text — each word slides in with stagger.
     Initial hidden state only; JS drives the reveal. */
  .kinetic .kword {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
  }

  /* Top scroll progress bar */
  .scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 50%, var(--accent)) 100%);
    z-index: 100;
    transition: width 0.12s linear;
    pointer-events: none;
  }

  /* Hero cursor blob — soft radial that follows pointer */
  .hero-blob {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
    border-radius: inherit;
  }
  .hero-blob::before {
    content: ""; position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    left: var(--mx, 50%); top: var(--my, 50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in oklab, var(--primary) 30%, transparent) 0%, transparent 60%);
    filter: blur(20px);
    transition: left 0.4s cubic-bezier(.22,.61,.36,1), top 0.4s cubic-bezier(.22,.61,.36,1);
  }

  /* Smoother card hover everywhere */
  .card { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.18s ease; }
  .pkg-card { transition: border-color 0.25s ease, transform 0.18s ease, box-shadow 0.25s ease; }
  .pkg-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn { transition: background 0.18s ease, border-color 0.18s ease, transform 0.06s ease, box-shadow 0.18s ease, color 0.18s ease; }
  .btn-primary:hover { box-shadow: 0 6px 20px color-mix(in oklab, var(--primary) 35%, transparent); }

  /* Phase rail — softer active transitions */
  .phase-cell { transition: background 0.3s ease, color 0.3s ease; }

  /* Reduce motion fallback */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* --- nav (matches prototype .topbar) --- */
  .topnav {
    position: sticky; top: 0; z-index: 50;
    height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .topnav-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 100%;
    padding: 0 24px; gap: 32px;
  }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--ink); }
  .brand-mark {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, #7d7df5, #5b5bd6);
    border-radius: 7px;
    display: grid; place-items: center;
    color: #fff; font-weight: 800; font-size: 14px;
    letter-spacing: -0.5px;
    box-shadow: var(--shadow-sm);
  }
  .brand-mark span { position: relative; z-index: 1; }
  .nav-links { display: flex; gap: 4px; flex: 1; justify-content: center; }
  .nav-link {
    padding: 6px 12px; border-radius: 6px;
    color: var(--muted); font-size: 14px; font-weight: 500;
    text-decoration: none; transition: background 0.12s, color 0.12s;
    border: none; background: none; cursor: pointer;
  }
  .nav-link:hover { color: var(--ink); background: var(--bg-sunk); }
  .nav-link.active { color: var(--primary); background: var(--primary-soft); }

  .persona-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg-sunk); border: 1px solid var(--border);
    padding: 3px; border-radius: 999px;
  }
  .persona-pill button {
    border: none; background: transparent;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--muted);
    cursor: pointer;
  }
  .persona-pill button.active {
    background: var(--surface); color: var(--ink);
    box-shadow: var(--shadow-sm);
  }

  /* --- layout --- */
  .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .container-wide { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
  .section { padding: 120px 0; border-bottom: 1px solid var(--border); position: relative; }
  .section-narrow { padding: 72px 0; }
  .section-head { max-width: 760px; margin-bottom: 56px; }
  .eyebrow {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--primary); font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 18px;
  }
  .h1 {
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 700; letter-spacing: -0.5px;
    line-height: 1.1; margin: 0 0 16px;
    text-wrap: balance;
  }
  .h2 {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700; letter-spacing: -0.3px;
    line-height: 1.15; margin: 0 0 12px;
    text-wrap: balance;
  }
  .h3 {
    font-size: 16px; font-weight: 600; letter-spacing: -0.1px;
    margin: 0 0 6px;
  }
  .lede {
    font-size: 15px; color: var(--muted); line-height: 1.6;
    margin: 0; text-wrap: pretty; max-width: 58ch;
  }
  .small { font-size: 13px; color: var(--muted); }
  .micro { font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }

  /* --- ui atoms (matches prototype) --- */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--ink);
    padding: 8px 14px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.04s;
  }
  .btn:hover { background: var(--bg-sunk); }
  .btn:active { transform: translateY(1px); }
  .btn-primary {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
  }
  .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  /* legacy alias: btn-rose now == btn-primary */
  .btn-rose {
    background: var(--primary); color: #fff; border-color: var(--primary);
  }
  .btn-rose:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  .btn-ghost {
    background: transparent; border-color: transparent;
    color: var(--muted);
  }
  .btn-ghost:hover { background: var(--bg-sunk); color: var(--ink); border-color: transparent; }
  .btn-sm { padding: 4px 10px; font-size: 12px; }
  .btn-danger {
    background: var(--surface); color: var(--danger);
    border-color: var(--danger-soft);
  }
  .btn-danger:hover { background: var(--danger-soft); }

  .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-sunk); color: var(--muted);
  }
  .badge-rose, .badge-blue { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
  .badge-green { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
  .badge-amber { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
  .badge-red { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

  .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted-2);
  }
  .dot-green { background: var(--accent); }
  .dot-amber { background: var(--warning); box-shadow: 0 0 0 0 var(--warning); animation: pulse 2s infinite; }
  .dot-rose { background: var(--primary); }
  .dot-blue { background: var(--primary); }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--warning) 50%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
  }

  .kbd {
    display: inline-block;
    padding: 1px 6px; font-family: var(--font-mono); font-size: 11px;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-bottom-width: 2px; border-radius: 4px;
    color: var(--ink); line-height: 1.4;
  }

  /* --- specific layouts --- */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
  @media (max-width: 900px) {
    .grid-2, .grid-3, .grid-feature { grid-template-columns: 1fr; }
    .container, .container-wide { padding: 0 20px; }
    .section { padding: 72px 0; }
    .nav-links { display: none; }
  }

  /* hero */
  .hero-canvas {
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-sunk) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    height: 100%;
    min-height: 360px;
    position: relative;
    overflow: hidden;
  }

  /* skill cards */
  .skill-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.04s;
  }
  .skill-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .skill-card:active { transform: translateY(1px); }
  .skill-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
  .skill-card .skill-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 6px; }
  .skill-card .skill-title { font-weight: 600; font-size: 14px; }
  .skill-card .skill-summary { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 6px 0 10px; min-height: 40px; }
  .skill-card .skill-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--muted); }

  /* segmented control */
  .seg {
    display: inline-flex; gap: 2px;
    padding: 3px; border-radius: 999px;
    background: var(--bg-sunk); border: 1px solid var(--border);
  }
  .seg button {
    border: none; background: transparent;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--muted);
    cursor: pointer;
  }
  .seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

  /* terminal */
  .terminal {
    background: #11141c; color: #d5dae6;
    border-radius: var(--radius);
    font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
    border: 1px solid #1c2030;
    overflow: hidden;
  }
  .terminal-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; background: #1a1e2a;
    border-bottom: 1px solid #252a39;
  }
  .terminal-head .tdot { width: 11px; height: 11px; border-radius: 50%; }
  .terminal-head .tdot:nth-child(1) { background: #ff5f57; }
  .terminal-head .tdot:nth-child(2) { background: #febc2e; }
  .terminal-head .tdot:nth-child(3) { background: #28c840; }
  .terminal-head .ttitle { margin-left: 8px; font-size: 12px; color: #8b94a7; }
  .terminal-body { padding: 16px 18px; min-height: 220px; }
  .term-line { white-space: pre-wrap; }
  .term-prompt { color: #7d7df5; }
  .term-dim { color: #6e7585; }
  .term-ok { color: #4cd9a9; }
  .term-warn { color: #ffc06e; }
  .term-cursor {
    display: inline-block; width: 7px; height: 14px;
    background: #d5dae6; vertical-align: text-bottom; margin-left: 2px;
    animation: blink 1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* phase rail */
  .phase-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
  .phase-cell { padding: 16px 18px; border-right: 1px solid var(--border); position: relative; cursor: pointer; transition: background 0.15s ease; }
  .phase-cell:last-child { border-right: none; }
  .phase-cell:hover { background: var(--bg-sunk); }
  .phase-cell.active { background: var(--primary); color: #fff; }
  .phase-cell.active .phase-num,
  .phase-cell.active .phase-desc { color: rgba(255,255,255,0.7); }
  .phase-num { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
  .phase-name { font-size: 14px; font-weight: 700; margin-top: 4px; letter-spacing: -0.1px; }
  .phase-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
  @media (max-width: 900px) {
    .phase-rail { grid-template-columns: repeat(2, 1fr); }
    .phase-cell { border-bottom: 1px solid var(--border); }
  }

  /* progress bar */
  .progress {
    height: 4px; background: var(--bg-sunk); border-radius: 999px; overflow: hidden;
  }
  .progress-fill {
    height: 100%; background: var(--primary); border-radius: 999px;
    transition: width 0.6s cubic-bezier(.2,.7,.2,1);
  }
  .progress-green .progress-fill { background: var(--accent); }
  .progress-amber .progress-fill { background: var(--warning); }

  /* tab bar inside demo cards */
  .demo-tabs {
    display: flex; gap: 2px;
    padding: 4px; background: var(--bg-sunk);
    border-radius: var(--radius-sm); border: 1px solid var(--border);
  }
  .demo-tabs button {
    border: none; background: transparent;
    padding: 6px 12px; border-radius: 4px;
    font-size: 13px; font-weight: 500; color: var(--muted);
    cursor: pointer; font-family: inherit;
  }
  .demo-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

  /* table */
  table.team { width: 100%; border-collapse: collapse; }
  table.team th, table.team td {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  table.team th { color: var(--muted); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; }
  table.team tr:last-child td { border-bottom: none; }

  /* row */
  .row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .row:last-child { border-bottom: none; }
  .row:hover { background: var(--bg-sunk); }

  /* caption */
  .caption {
    background: var(--primary-soft); border: 1px solid transparent;
    padding: 12px 14px; border-radius: var(--radius-sm);
    font-size: 13px; color: var(--primary); line-height: 1.55;
    display: flex; gap: 10px; align-items: start;
  }
  .caption strong { color: var(--ink); font-weight: 600; }

  /* arch list */
  .pkg-card {
    padding: 16px 18px; border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    display: flex; justify-content: space-between; align-items: start; gap: 16px;
  }
  .pkg-card .pkg-name { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--primary); }
  .pkg-card .pkg-desc { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
  .pkg-lines { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex-shrink: 0; }

  /* installer */
  .installer-frame {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
  }
  .installer-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  }

  /* footer */
  footer { padding: 40px 0; color: var(--muted); font-size: 13px; }
  footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 1px; }
  footer a:hover { border-color: var(--primary); color: var(--primary); }
  .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
  .footer-grid h4 { font-size: 11px; color: var(--muted); margin: 0 0 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); }
  .footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .footer-grid a { font-size: 13px; color: var(--ink); border: none; }
  .footer-grid a:hover { color: var(--primary); }
  @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

  /* --- Editorial design primitives --- */

  /* Chapter number marker — for section heads. Big mono numeric, hairline below */
  .chapter {
    display: flex; align-items: baseline; gap: 16px;
    padding-bottom: 14px; margin-bottom: 28px;
    border-bottom: 1px solid var(--border);
  }
  .chapter-num {
    font-family: var(--font-mono); font-size: 13px;
    color: var(--muted-2); letter-spacing: 0.06em;
    font-feature-settings: "tnum";
  }
  .chapter-label {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--primary); letter-spacing: 0.12em;
    text-transform: uppercase; font-weight: 500;
  }
  .chapter-spacer { flex: 1; height: 1px; background: var(--border); align-self: center; }

  /* Display h2 for editorial sections — larger, lighter weight, generous tracking */
  .h-display {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 600; letter-spacing: -0.8px;
    line-height: 1.04; margin: 0;
    text-wrap: balance;
  }
  .h-display em {
    font-style: italic; font-family: Georgia, "Songti SC", "STSong", serif;
    font-weight: 400; color: var(--primary);
  }

  /* Pull quote — editorial accent */
  .pull-quote {
    font-family: Georgia, "Songti SC", "STSong", serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.35; letter-spacing: -0.2px;
    color: var(--ink); margin: 0;
    text-wrap: balance;
  }
  .pull-quote::before { content: "“"; color: var(--primary); margin-right: 4px; }
  .pull-quote::after { content: "”"; color: var(--primary); margin-left: 2px; }
  .pull-attr {
    margin-top: 18px;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); letter-spacing: 0.04em;
  }
  .pull-attr::before { content: "— "; }

  /* Big stat — for "by the numbers" callouts */
  .stat-big {
    font-family: var(--font-mono);
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 600; letter-spacing: -2px;
    line-height: 1; color: var(--ink);
    font-feature-settings: "tnum";
  }
  .stat-big em {
    font-style: normal; font-size: 0.45em;
    color: var(--muted); margin-left: 4px;
    letter-spacing: -1px;
  }
  .stat-label {
    margin-top: 14px; font-size: 13px; color: var(--muted);
    line-height: 1.5; max-width: 22ch;
  }

  /* Two-column essay layout — narrow text column, balanced */
  .essay-grid {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
    align-items: start;
  }
  .essay-col p {
    font-size: 16px; line-height: 1.75;
    color: var(--ink-2); margin: 0 0 18px;
    text-wrap: pretty;
  }
  .essay-col p:last-child { margin-bottom: 0; }
  .essay-col strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 900px) { .essay-grid { grid-template-columns: 1fr; gap: 32px; } }

  /* Principle item — for manifesto */
  .principle {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 64px 1fr 2fr; gap: 32px;
    align-items: baseline;
  }
  .principle:last-child { border-bottom: none; }
  .principle-num {
    font-family: var(--font-mono); font-size: 13px;
    color: var(--muted-2); letter-spacing: 0.06em;
  }
  .principle-title {
    font-size: 22px; font-weight: 600; letter-spacing: -0.3px;
    line-height: 1.2; color: var(--ink);
  }
  .principle-body {
    font-size: 14.5px; line-height: 1.65; color: var(--muted);
  }
  .principle-body strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 900px) {
    .principle { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
    .principle-num { font-size: 11px; }
  }

  /* Comparison table — clean editorial table */
  .compare-table {
    width: 100%; border-collapse: collapse;
    font-size: 14px;
  }
  .compare-table th, .compare-table td {
    padding: 16px 12px; text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }
  .compare-table th {
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted); letter-spacing: 0.06em;
    text-transform: uppercase; font-weight: 500;
    border-bottom: 1px solid var(--border-strong);
  }
  .compare-table th:first-child, .compare-table td:first-child {
    padding-left: 0; width: 28%;
    color: var(--ink); font-weight: 500;
  }
  .compare-table td.win { color: var(--accent); }
  .compare-table td.lose { color: var(--muted-2); }
  .compare-table td.warn { color: var(--warning); }
  .compare-table .col-sharon { background: var(--primary-soft); padding-left: 16px; padding-right: 16px; }
  .compare-table .col-sharon-head {
    background: var(--primary); color: #fff;
    border-bottom-color: var(--primary);
    padding-left: 16px; padding-right: 16px;
    border-top-left-radius: 6px; border-top-right-radius: 6px;
  }

  /* Vertical chapter marker on side of section */
  .vmark {
    position: absolute; left: -28px; top: 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted-2); letter-spacing: 0.1em;
  }

  /* Code block — editorial style */
  .code-block {
    background: #11141c; color: #d5dae6;
    border-radius: var(--radius);
    padding: 18px 20px;
    font-family: var(--font-mono); font-size: 13px;
    line-height: 1.65;
    overflow-x: auto;
  }
  .code-block .ck { color: #c39dff; }     /* keyword */
  .code-block .cs { color: #ffc06e; }     /* string */
  .code-block .cc { color: #6e7585; }     /* comment */
  .code-block .ci { color: #4cd9a9; }     /* identifier */
  .code-block .cv { color: #7aa8ff; }     /* value */

  /* Marquee — endless scrolling tags band */
  .marquee {
    overflow: hidden; padding: 18px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track {
    display: inline-flex; gap: 32px; white-space: nowrap;
    animation: marquee 40s linear infinite;
    font-family: var(--font-mono); font-size: 14px;
    color: var(--muted);
  }
  .marquee-track span { display: inline-flex; align-items: center; gap: 8px; }
  .marquee-track span::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--primary-soft);
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }