/* ── Tokens ── */
        :root {
            /* Primary — deep indigo, sampled from the SRS Navigator app's "Graph" control. */
            --primary: oklch(0.45 0.16 266);
            --primary-hover: oklch(0.38 0.16 266);
            --primary-subtle: oklch(0.955 0.022 266);
            /* Text on the primary fill — near-white for AA contrast on indigo. */
            --on-primary: oklch(0.99 0 0);
            /* Background — clean, slightly-cool off-white, matched to the app canvas. */
            --bg: oklch(0.975 0.003 240);
            --bg-elevated: oklch(1 0 0);
            /* Surface — faint panels, hairline borders. */
            --surface: oklch(0.965 0.004 240);
            --surface-hover: oklch(0.945 0.005 240);
            --surface-border: oklch(0.900 0.006 240);
            /* Ink — near-black text, high contrast on off-white. */
            --ink: oklch(0.30 0.012 264);
            --ink-heading: oklch(0.19 0.018 264);
            /* Accent — teal, sampled from the CN nodes. Darkened for link contrast. */
            --accent: oklch(0.53 0.10 205);
            --accent-hover: oklch(0.46 0.11 205);
            /* Muted — secondary text, ≥4.5:1 on off-white. */
            --muted: oklch(0.47 0.012 264);
            --muted-light: oklch(0.57 0.012 264);
            /* Methodology node colors — sampled directly from the SRS Navigator app. */
            --step-context: oklch(0.52 0.16 305);
            --step-why: oklch(0.61 0.18 48);
            --step-glance: oklch(0.58 0.10 202);
            --step-what: oklch(0.58 0.10 202);
            --step-vision: oklch(0.55 0.12 150);
            --step-how: oklch(0.56 0.16 266);
            --step-nfr: oklch(0.54 0.15 320);
            /* Bolder accents — committed color moments */
            --cp-bold: oklch(0.55 0.17 50);          /* deepened amber for the hero "problem" word (4.8:1 on bg) */
            --primary-deep: oklch(0.30 0.12 266);    /* drenched dark indigo for the closing panel */
            --on-deep: oklch(0.99 0 0);
            --on-deep-muted: oklch(0.86 0.04 266);
            --chain-cp: oklch(0.84 0.13 55);         /* light node tints, ≥7.9:1 on the deep panel */
            --chain-cn: oklch(0.82 0.09 200);
            --chain-fr: oklch(0.88 0.05 266);
            --cn-text: oklch(0.50 0.10 202);          /* CN teal at text contrast (5:1 on surface) */
            --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
            --font-body: 'Figtree', system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
            --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8rem);
            --text-sm: clamp(0.825rem, 0.78rem + 0.2vw, 0.9rem);
            --text-base: clamp(0.95rem, 0.88rem + 0.25vw, 1.05rem);
            --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
            --text-xl: clamp(1.4rem, 1.2rem + 0.6vw, 1.65rem);
            --text-2xl: clamp(1.75rem, 1.4rem + 1vw, 2.1rem);
            --text-3xl: clamp(2.2rem, 1.7rem + 1.5vw, 2.8rem);
            --text-hero: clamp(3.2rem, 2.2rem + 3vw, 5rem);
            --space-xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
            --space-sm: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
            --space-md: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
            --space-lg: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
            --space-xl: clamp(2.5rem, 1.8rem + 2vw, 4rem);
            --space-2xl: clamp(4rem, 2.8rem + 3.5vw, 6.5rem);
            --space-section: clamp(5rem, 3.5rem + 4.5vw, 9rem);
            --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
        }

        /* ── Reset ── */
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: var(--font-body);
            font-size: var(--text-base);
            line-height: 1.7;
            color: var(--ink);
            background: var(--bg);
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        /* ── Typography ── */
        h1, h2, h3 {
            font-family: var(--font-display);
            color: var(--ink-heading);
            text-wrap: balance;
            letter-spacing: -0.02em;
        }
        h2 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; margin-bottom: var(--space-lg); }
        h3 { font-size: var(--text-xl); margin-bottom: var(--space-sm); color: var(--ink); }
        p { max-width: 68ch; }
        a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
        a:hover { color: var(--accent-hover); }
        a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
        code {
            font-family: var(--font-mono);
            font-size: 0.9em;
            color: var(--ink-heading);
            background: var(--surface);
            padding: 0.15em 0.4em;
            border-radius: 4px;
            border: 1px solid var(--surface-border);
        }
        pre {
            background: var(--bg-elevated);
            border: 1px solid var(--surface-border);
            border-radius: 8px;
            padding: var(--space-md);
            overflow-x: auto;
            margin: var(--space-md) 0;
        }
        pre code { background: none; border: none; padding: 0; font-size: var(--text-sm); line-height: 1.6; }

        /* ── Layout ── */
        .wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); }
        .section { padding: var(--space-section) 0; }
        .section + .section { border-top: 1px solid var(--surface-border); }

        /* ── Skip link ── */
        .skip-link {
            position: absolute; left: -9999px; top: var(--space-sm);
            background: var(--primary); color: var(--ink-heading);
            padding: var(--space-sm) var(--space-md); border-radius: 8px;
            font-weight: 600; z-index: 200;
        }
        .skip-link:focus { left: var(--space-md); }

        /* ── Nav ── */
        .site-nav {
            position: sticky; top: 0; z-index: 100;
            background: oklch(0.975 0.003 240 / 0.82);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--surface-border);
        }
        .site-nav .wrap {
            display: flex; align-items: center; justify-content: space-between;
            padding-top: var(--space-sm); padding-bottom: var(--space-sm);
            gap: var(--space-md);
        }
        .site-nav-brand {
            font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
            color: var(--ink-heading); text-decoration: none; white-space: nowrap;
        }
        .site-nav-brand span { color: var(--primary); }
        .site-nav-id { display: inline-flex; align-items: center; gap: var(--space-sm); min-width: 0; }
        .version-badge {
            font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400;
            line-height: 1.35; letter-spacing: 0.01em; white-space: nowrap;
            color: var(--primary); background: var(--primary-subtle);
            border: 1px solid color-mix(in oklch, var(--primary) 24%, transparent);
            border-radius: 999px; padding: 0.18em 0.62em; text-decoration: none;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
        }
        .version-badge:hover {
            color: var(--on-primary); background: var(--primary);
            border-color: var(--primary);
        }
        .version-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
        .site-nav-links {
            display: flex; gap: var(--space-md); list-style: none;
            flex-wrap: wrap; align-items: center;
        }
        .site-nav-links a {
            color: var(--muted); font-size: var(--text-sm); font-weight: 500;
            transition: color 0.2s ease;
            display: inline-flex; align-items: center; min-height: 24px; padding: 0.4rem 0;
        }
        .site-nav-links a:hover { color: var(--ink); }
        .gh-link {
            display: inline-flex; align-items: center; gap: 0.35em;
            color: var(--muted); font-size: var(--text-sm); font-weight: 500;
        }
        .gh-link:hover { color: var(--ink); }
        .gh-link svg { width: 18px; height: 18px; fill: currentColor; }

        /* ── Hero ── */
        .hero {
            padding: var(--space-2xl) 0 var(--space-section);
            position: relative; overflow: hidden;
        }
        .hero::before, .hero::after {
            content: ''; position: absolute; pointer-events: none; z-index: 0;
            width: clamp(280px, 42vw, 560px); height: clamp(280px, 42vw, 560px);
            border-radius: 50%;
        }
        .hero::before { /* indigo field, anchored behind the app frame */
            background: radial-gradient(circle, oklch(0.45 0.16 266 / 0.13), transparent 70%);
            top: 16%; right: -8%;
        }
        .hero::after { /* amber field, anchored behind the headline */
            background: radial-gradient(circle, oklch(0.61 0.18 48 / 0.11), transparent 70%);
            top: 44%; left: -10%;
        }
        .hero-content { position: relative; z-index: 1; display: grid; gap: var(--space-2xl); align-items: center; }
        @media (min-width: 900px) {
            .hero-content { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-section); }
        }
        .hero-copy { min-width: 0; }
        .hero-visual { margin: 0; min-width: 0; }
        .hero-visual .app-frame { transition: transform 0.4s var(--ease-out-quart); }
        @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
            .hero-visual .app-frame:hover { transform: translateY(-4px); }
        }
        .hero-visual figcaption {
            margin-top: var(--space-sm); font-size: var(--text-xs);
            color: var(--muted); text-align: center;
        }
        .hero h1 {
            font-size: var(--text-hero);
            line-height: 1.04;
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: var(--space-lg);
            max-width: 16ch;
        }
        .hero h1 .hl { color: var(--cp-bold); position: relative; white-space: nowrap; }
        .hero h1 .hl::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em;
            height: 0.1em; border-radius: 2px;
            background: var(--cp-bold); opacity: 0.22;
        }
        .hero-sub {
            font-size: var(--text-lg);
            color: var(--muted);
            max-width: 52ch;
            margin-bottom: var(--space-xl);
            line-height: 1.6;
        }
        .hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }
        .btn-primary {
            display: inline-flex; align-items: center; gap: 0.5em;
            background: var(--primary); color: var(--on-primary);
            padding: 0.75em 1.5em; border-radius: 8px;
            font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
            text-decoration: none; transition: background 0.2s ease;
        }
        .btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
        .btn-ghost {
            display: inline-flex; align-items: center; gap: 0.5em;
            background: transparent; color: var(--ink);
            padding: 0.75em 1.5em; border-radius: 8px;
            border: 1px solid var(--surface-border);
            font-family: var(--font-body); font-size: var(--text-base); font-weight: 500;
            text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease;
        }
        .btn-ghost:hover { background: var(--surface); border-color: var(--muted-light); color: var(--ink); }
        .hero-meta {
            margin-top: var(--space-xl); display: flex; gap: var(--space-md);
            flex-wrap: wrap; align-items: center;
        }
        .hero-badge {
            font-size: var(--text-xs); color: var(--muted);
            border: 1px solid var(--surface-border); padding: 0.3em 0.8em;
            border-radius: 100px; white-space: nowrap;
        }

        /* ── Problem section ── */
        .problem-before {
            background: var(--surface); border-radius: 10px;
            padding: var(--space-lg); margin: var(--space-lg) 0;
            max-width: 56ch;
        }
        .problem-before p { color: var(--muted); }
        .problem-before .quote {
            font-size: var(--text-lg); color: var(--ink);
            font-style: italic; margin-bottom: var(--space-md);
        }
        .problem-after {
            margin: var(--space-lg) 0; max-width: 56ch;
        }
        .problem-after .cp {
            font-family: var(--font-mono); font-size: var(--text-base);
            color: oklch(0.48 0.14 50); background: oklch(0.61 0.18 48 / 0.10);
            padding: var(--space-sm) var(--space-md); border-radius: 8px;
            display: block; margin: var(--space-md) 0;
        }
        .problem-after .cp b {
            display: block; font-weight: 600; letter-spacing: 0.01em;
            margin-bottom: var(--space-xs);
        }
        .problem-chain {
            font-family: var(--font-mono); font-size: var(--text-sm);
            line-height: 1.9; color: var(--muted);
            border-left: 2px solid var(--surface-border);
            padding-left: var(--space-md); margin: var(--space-md) 0;
        }
        .problem-chain b { color: var(--ink-heading); font-weight: 600; }
        .problem-chain span { color: var(--accent); padding: 0 0.15rem; }
        .problem-grid {
            display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
            gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center;
        }
        .problem-copy .problem-before:first-child { margin-top: 0; }
        .problem-figure { margin: 0; position: sticky; top: 2rem; }
        .problem-figure .app-frame img { background: var(--bg-elevated); }
        .problem-figure figcaption {
            margin-top: var(--space-md); color: var(--muted);
            font-size: var(--text-sm); max-width: 46ch;
        }
        .problem-figure figcaption strong { color: var(--cp-bold); font-weight: 700; }
        @media (max-width: 860px) {
            .problem-grid { grid-template-columns: 1fr; }
            .problem-figure { position: static; order: -1; }
            .problem-copy .problem-before, .problem-copy .problem-after { max-width: none; }
        }

        /* ── Flow (methodology timeline) ── */
        .method-grid {
            display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
            gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: start;
        }
        .method-aside { margin: var(--space-xl) 0 0; position: sticky; top: 2rem; }
        .method-aside figcaption {
            margin-top: var(--space-md); color: var(--muted);
            font-size: var(--text-sm); max-width: 42ch;
        }
        @media (max-width: 860px) {
            .method-grid { grid-template-columns: 1fr; }
            .method-aside { position: static; margin-top: 0; }
        }
        .flow { position: relative; padding-left: 2.5rem; margin: var(--space-xl) 0; }
        .flow::before {
            content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
            width: 2px; background: var(--surface-border);
        }
        .flow-step {
            position: relative; padding-bottom: var(--space-xl);
        }
        .flow-step:last-child { padding-bottom: 0; }
        .flow-dot {
            position: absolute; left: -2.5rem; top: 4px;
            width: 16px; height: 16px; border-radius: 50%;
            background: var(--dot-color, var(--muted));
        }
        .flow-name {
            font-family: var(--font-display); font-size: var(--text-xl);
            font-weight: 700; color: var(--ink-heading);
            margin-bottom: var(--space-xs);
        }
        .flow-question {
            font-size: var(--text-sm); color: var(--muted);
            font-style: italic; margin-bottom: var(--space-xs);
        }
        .flow-desc { color: var(--ink); max-width: 52ch; }
        .flow-cmd {
            display: inline-block; margin-top: var(--space-sm);
            font-family: var(--font-mono); font-size: var(--text-sm);
            color: var(--accent); background: var(--bg-elevated);
            padding: 0.2em 0.6em; border-radius: 4px;
            border: 1px solid var(--surface-border);
        }
        .flow-trace {
            margin-top: var(--space-xl); padding: var(--space-md) var(--space-lg);
            background: var(--surface); border-radius: 10px;
            font-family: var(--font-mono); font-size: var(--text-base);
            color: var(--ink); text-align: center; letter-spacing: 0.02em;
        }
        .flow-trace .arrow { color: var(--muted); margin: 0 0.3em; }
        .flow-trace .t-cp { color: var(--cp-bold); }
        .flow-trace .t-cn { color: var(--cn-text); }
        .flow-trace .t-fr { color: var(--primary); }

        /* ── CLI simulation: the assistant calling each skill ── */
        .cli-sim {
            border-radius: 12px; overflow: hidden;
            background: oklch(0.20 0.018 264);
            border: 1px solid oklch(0.32 0.02 264);
            box-shadow: 0 2px 4px oklch(0.15 0.02 264 / 0.2),
                        0 22px 48px oklch(0.20 0.03 264 / 0.28);
            max-width: 760px;
        }
        .cli-bar {
            display: flex; align-items: center; gap: 0.7rem;
            padding: 0.6rem 0.9rem; background: oklch(0.26 0.018 264);
            border-bottom: 1px solid oklch(0.34 0.02 264);
        }
        .cli-dots { display: flex; gap: 0.4rem; }
        .cli-dots span { width: 11px; height: 11px; border-radius: 50%; background: oklch(0.42 0.02 264); }
        .cli-title { font-family: var(--font-mono); font-size: var(--text-xs); color: oklch(0.72 0.015 264); }
        .cli-body {
            font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75;
            color: oklch(0.86 0.015 264); padding: var(--space-md) var(--space-lg) var(--space-lg);
        }
        .cli-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.75rem; }
        .cli-you { color: oklch(0.9 0.012 264); margin-bottom: 0.4rem; }
        .cli-caret { color: var(--step-what); font-weight: 700; }
        .cli-cmd { min-width: 15.5em; font-weight: 400; }
        .cli-cmd::before { content: '↳ '; color: oklch(0.55 0.015 264); font-weight: 400; }
        /* One command, many actions: the command recedes, the action carries the color. */
        .cli-base { color: oklch(0.62 0.015 264); }
        .cli-action { color: color-mix(in oklab, var(--c) 66%, white); font-weight: 600; }
        .cli-out { color: oklch(0.68 0.015 264); }
        .cli-done { margin-top: 0.5rem; color: var(--step-vision); font-weight: 600; }
        .cli-check { color: var(--step-vision); font-weight: 700; }
        .cli-cursor {
            display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.35em;
            background: oklch(0.82 0.015 264); vertical-align: text-bottom; border-radius: 1px;
        }
        @media (prefers-reduced-motion: no-preference) {
            .cli-line { opacity: 0; transform: translateY(6px);
                animation: cliReveal 13s var(--ease-out-quart) infinite both;
                animation-delay: calc(0.35s + var(--i) * 0.62s); }
            .cli-cursor { animation: cliBlink 1.05s steps(1) infinite; }
        }
        @keyframes cliReveal {
            0% { opacity: 0; transform: translateY(6px); }
            3% { opacity: 1; transform: translateY(0); }
            88% { opacity: 1; transform: translateY(0); }
            94%, 100% { opacity: 0; transform: translateY(0); }
        }
        @keyframes cliBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

        /* ── Classification ── */
        .class-grid { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
        .class-row {
            display: grid; grid-template-columns: auto 1fr;
            gap: var(--space-md); align-items: start;
            padding: var(--space-md) var(--space-lg);
            background: var(--surface); border-radius: 10px;
        }
        .class-indicator {
            width: 10px; height: 10px; border-radius: 50%;
            margin-top: 0.45em; flex-shrink: 0;
        }
        .class-label {
            font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700;
            color: var(--ink-heading);
        }
        .class-verb { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); }
        .class-desc { color: var(--ink); margin-top: var(--space-xs); }

        /* ── Commands table ── */
        .cmd-table { width: 100%; border-collapse: collapse; margin-top: var(--space-lg); }
        .cmd-table th {
            text-align: left; font-size: var(--text-sm); color: var(--muted);
            font-weight: 500; padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--surface-border);
        }
        .cmd-table td {
            padding: var(--space-sm) var(--space-md);
            border-bottom: 1px solid var(--surface-border);
            font-size: var(--text-sm);
        }
        .cmd-table tr:hover td { background: var(--surface); }
        .cmd-table .cmd-name {
            font-family: var(--font-mono); color: var(--accent); white-space: nowrap;
        }
        .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-lg); }
        .table-scroll .cmd-table { margin-top: 0; }

        /* ── App showcase (SRS Navigator) ── */
        .section-lead { color: var(--muted); max-width: 62ch; margin-bottom: var(--space-lg); }
        .section-lead strong { color: var(--ink-heading); font-weight: 600; }
        .legend-intro { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-sm); }
        .node-legend {
            list-style: none; display: flex; flex-wrap: wrap;
            gap: var(--space-md); margin-bottom: var(--space-lg);
        }
        .node-legend li {
            display: inline-flex; align-items: center; gap: 0.5rem;
            font-size: var(--text-sm); color: var(--muted);
        }
        .node-chip {
            font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
            color: color-mix(in oklab, var(--c) 76%, black); background: color-mix(in oklab, var(--c) 12%, transparent);
            border: 1px solid color-mix(in oklab, var(--c) 32%, transparent);
            padding: 0.2em 0.55em; border-radius: 6px; letter-spacing: 0.02em;
        }
        .app-frame {
            border-radius: 14px; overflow: hidden; background: var(--bg-elevated);
            box-shadow: 0 2px 4px oklch(0.2 0.02 264 / 0.05),
                        0 20px 44px oklch(0.42 0.05 25 / 0.12);
        }
        .app-frame-bar {
            display: flex; align-items: center; gap: 0.7rem;
            padding: 0.7rem 1rem; background: var(--surface);
            border-bottom: 1px solid var(--surface-border);
        }
        .app-dots { display: flex; gap: 0.4rem; }
        .app-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--surface-border); }
        .app-frame-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
        .app-frame img { display: block; width: 100%; height: auto; }
        .app-actions { margin-top: var(--space-lg); display: flex; gap: var(--space-md); flex-wrap: wrap; }

        /* ── Recorded /live demo ──
           The video carries no `autoplay` attribute: the attribute would start
           playback before site.js could read the reader's motion preference, and by
           then the opt-out has already been ignored. site.js starts it instead. */
        .app-demo-stage { position: relative; display: block; }
        .app-demo { display: block; width: 100%; height: auto; background: var(--bg-elevated); }
        .demo-toggle {
            position: absolute; right: 0.75rem; bottom: 0.75rem;
            display: inline-flex; align-items: center; gap: 0.45rem;
            padding: 0.42rem 0.8rem; border-radius: 8px;
            font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
            color: var(--on-deep); background: color-mix(in oklab, var(--primary-deep) 88%, transparent);
            border: 1px solid color-mix(in oklab, var(--on-deep) 20%, transparent); cursor: pointer;
            transition: opacity 0.25s var(--ease-out-quart), background 0.25s var(--ease-out-quart);
        }
        .demo-toggle:hover { background: var(--primary-deep); }
        .demo-toggle svg { width: 13px; height: 13px; }
        .demo-toggle .demo-toggle-pause { display: none; }
        .demo-toggle[aria-pressed="true"] .demo-toggle-play { display: none; }
        .demo-toggle[aria-pressed="true"] .demo-toggle-pause { display: inline; }
        /* While it is playing the control recedes, so the graph is what you look at. */
        @media (prefers-reduced-motion: no-preference) {
            .demo-toggle[aria-pressed="true"] { opacity: 0.35; }
            .app-demo-stage:hover .demo-toggle,
            .demo-toggle:focus-visible { opacity: 1; }
        }
        /* Nothing is moving, so nothing signals that the figure can be played. The
           control is the only affordance left — it stays put. */
        @media (prefers-reduced-motion: reduce) {
            .demo-toggle { opacity: 1; transition: none; }
        }

        /* ── Footer CTA ── */
        /* ── Footer CTA — drenched dark panel, the bold close ── */
        .footer-cta {
            background: var(--primary-deep);
            padding: var(--space-section) 0;
            text-align: center;
            position: relative; overflow: hidden;
        }
        .footer-cta::before {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background:
                radial-gradient(58% 80% at 12% 8%, oklch(0.61 0.18 48 / 0.16), transparent 60%),
                radial-gradient(58% 80% at 88% 92%, oklch(0.58 0.10 202 / 0.16), transparent 60%);
        }
        .footer-cta .wrap { position: relative; z-index: 1; }
        .cta-chain {
            font-family: var(--font-display); font-weight: 800;
            font-size: clamp(2.75rem, 1.6rem + 4.5vw, 5rem);
            letter-spacing: -0.03em; line-height: 1;
            margin: 0 auto var(--space-lg);
            display: flex; align-items: center; justify-content: center;
            gap: clamp(0.5rem, 2.5vw, 1.5rem);
        }
        .cta-chain .chain-cp { color: var(--chain-cp); }
        .cta-chain .chain-cn { color: var(--chain-cn); }
        .cta-chain .chain-fr { color: var(--chain-fr); }
        .cta-chain .chain-arrow { color: var(--on-deep-muted); font-weight: 400; font-size: 0.55em; }
        .footer-cta h2 { color: var(--on-deep); margin-bottom: var(--space-md); }
        .footer-cta p { margin: 0 auto var(--space-lg); color: var(--on-deep-muted); max-width: 54ch; }
        .footer-cta .hero-actions { justify-content: center; }
        .footer-cta .btn-primary { background: var(--on-deep); color: var(--primary-deep); }
        .footer-cta .btn-primary:hover { background: oklch(0.92 0.03 266); color: var(--primary-deep); }
        .footer-cta .btn-ghost { color: var(--on-deep); border-color: oklch(0.92 0.02 266 / 0.4); }
        .footer-cta .btn-ghost:hover { background: oklch(1 0 0 / 0.08); border-color: var(--on-deep); color: var(--on-deep); }

        /* ── Footer ── */
        .site-footer {
            padding: var(--space-xl) 0; text-align: center;
            border-top: 1px solid var(--surface-border);
        }
        .site-footer p { color: var(--muted-light); font-size: var(--text-sm); margin: 0 auto; }
        .site-footer a { color: var(--muted); display: inline-block; padding: 0.3rem 0.15rem; min-height: 24px; }
        .site-footer a:hover { color: var(--ink); }
        .footer-links { margin-top: var(--space-xs); }
        .footer-version { font-family: var(--font-mono); font-size: 0.92em; color: var(--accent); }
        .footer-version:hover { color: var(--accent-hover); }
        .footer-links a + a::before { content: ' · '; color: var(--muted-light); }

        /* ── Scroll reveal ── */
        .reveal { opacity: 1; }
        @media (prefers-reduced-motion: no-preference) {
            body.js .reveal {
                opacity: 0; transform: translateY(12px);
                transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart);
            }
            body.js .reveal.visible { opacity: 1; transform: translateY(0); }
        }

        /* ── Responsive ── */
        @media (max-width: 640px) {
            .site-nav-links { gap: var(--space-sm); }
            .site-nav-links a { font-size: var(--text-xs); }
            .hero h1 { max-width: none; }
            .hero-actions { flex-direction: column; align-items: stretch; }
            .btn-primary, .btn-ghost { justify-content: center; }
            .class-row { grid-template-columns: 1fr; }
            .class-indicator { display: none; }
            .cmd-table { font-size: var(--text-xs); }
            .cmd-table th:last-child, .cmd-table td:last-child { display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

/* ════════════════════════════════════════════════════════════════
   v2.0 — Skills + App: pillars, animated task bar, App subpage
   ════════════════════════════════════════════════════════════════ */

/* ── Hero feature line (Skills + App) ── */
.hero-features {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    display: flex; flex-wrap: wrap; gap: var(--space-md);
}
.hero-feature {
    display: inline-flex; align-items: baseline; gap: 0.45em;
    font-size: var(--text-sm); color: var(--ink);
}
.hero-feature b {
    font-family: var(--font-display); font-weight: 700; color: var(--ink-heading);
}
.hero-feature .hf-kind {
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
}
.hero-feature .hf-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--hf, var(--primary)); align-self: center;
}

/* ── Hero install CTA (primary action) ── */
.hero-install { margin-bottom: var(--space-lg); max-width: 34rem; }
.hero-install-label {
    display: flex; align-items: center; gap: 0.5em;
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: 0.01em; color: var(--muted);
    margin-bottom: var(--space-sm);
}
.copy-cmd {
    display: flex; align-items: center; gap: var(--space-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    padding: 0.5rem 0.5rem 0.5rem 0.85rem;
}
.copy-cmd:focus-within { border-color: var(--muted-light); }
.copy-cmd-text {
    flex: 1 1 auto; min-width: 0;
    background: none; border: none; padding: 0; border-radius: 0;
    font-family: var(--font-mono); font-size: var(--text-sm);
    line-height: 1.5; color: var(--ink-heading);
    white-space: normal; overflow-wrap: anywhere;
}
.copy-cmd-btn {
    flex: 0 0 auto; align-self: stretch;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    background: var(--primary); color: var(--on-primary);
    border: none; border-radius: 6px;
    padding: 0.5em 0.9em;
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background 0.2s ease;
}
.copy-cmd-btn:hover { background: var(--primary-hover); }
.copy-cmd-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.copy-cmd-btn.is-copied { background: var(--step-vision); }
.copy-cmd-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.copy-cmd-icon--done { display: none; }
.copy-cmd-btn.is-copied .copy-cmd-icon--copy { display: none; }
.copy-cmd-btn.is-copied .copy-cmd-icon--done { display: inline; }
.hero-install-promise {
    display: flex; align-items: center; gap: 0.5em;
    margin-top: var(--space-sm);
    font-size: var(--text-sm); color: var(--muted);
}
.hero-install-promise strong { color: var(--ink-heading); font-weight: 600; }
.hero-install-promise svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--cp-bold); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
@media (max-width: 640px) {
    .copy-cmd { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.75rem; }
    .copy-cmd-btn { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
    .copy-cmd-btn { transition: none; }
}

/* ── Two parts: Skills + App ── */
.parts-grid { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (min-width: 860px) { .parts-grid { grid-template-columns: 1fr 1fr; } }
.part {
    display: flex; flex-direction: column;
    padding: var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--surface-border);
    border-radius: 14px;
}
.part-tag {
    align-self: flex-start;
    font-family: var(--font-mono); font-size: var(--text-xs);
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--primary); background: var(--primary-subtle);
    border: 1px solid color-mix(in oklch, var(--primary) 22%, transparent);
    padding: 0.28em 0.72em; border-radius: 999px;
    margin-bottom: var(--space-md);
}
.part--app .part-tag {
    color: var(--cn-text);
    background: color-mix(in oklab, var(--accent) 10%, transparent);
    border-color: color-mix(in oklab, var(--accent) 28%, transparent);
}
.part h3 {
    font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800;
    letter-spacing: -0.02em; color: var(--ink-heading); margin-bottom: var(--space-sm);
}
.part > p { color: var(--muted); max-width: 48ch; }
.part-list { list-style: none; margin: var(--space-md) 0 var(--space-lg); display: flex; flex-direction: column; gap: 0.6rem; }
.part-list li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--text-sm); color: var(--ink); line-height: 1.5; }
.part-list li::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    margin-top: 0.5em; flex: 0 0 auto; background: var(--bullet, var(--primary));
}
.part-chain {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: var(--text-sm);
    margin: var(--space-sm) 0 var(--space-lg);
}
.part-chain .pc { padding: 0.15em 0.55em; border-radius: 6px; font-weight: 600; }
.part-chain .pc-cp { color: color-mix(in oklab, var(--step-why) 76%, black); background: color-mix(in oklab, var(--step-why) 12%, transparent); }
.part-chain .pc-cn { color: var(--cn-text); background: color-mix(in oklab, var(--step-what) 12%, transparent); }
.part-chain .pc-fr { color: color-mix(in oklab, var(--step-how) 76%, black); background: color-mix(in oklab, var(--step-how) 12%, transparent); }
.part-chain .pc-arrow { color: var(--muted-light); }
.part-cta { margin-top: auto; display: flex; gap: var(--space-md); flex-wrap: wrap; }
.part-link {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-weight: 600; font-size: var(--text-sm); color: var(--primary);
}
.part-link svg { width: 1em; height: 1em; transition: transform 0.2s var(--ease-out-quart); }
.part-link:hover { color: var(--primary-hover); }
@media (prefers-reduced-motion: no-preference) {
    .part-link:hover svg { transform: translateX(3px); }
}

/* ── Animated CP → CN → FR chain (the hero) ── */
/* An app-faithful animated SVG (assets/srs-chain.svg, generated by
   scripts/build-chain-animation.mjs). It reuses the real navigator's node colors and
   Phosphor icons, and its CSS keyframes build the traceability chain in the methodology's
   causal order: Customer Problems first, then the Needs that address them, then the
   Requirements that satisfy them, with links drawing in. Honors reduced-motion. */
.nav-embed {
    position: relative;
    background-color: var(--bg-elevated);
    overflow: hidden;
}
.nav-anim {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--bg-elevated);
}

/* ── App subpage ── */
.subhero { padding: var(--space-2xl) 0 var(--space-xl); position: relative; overflow: hidden; }
.subhero::before {
    content: ''; position: absolute; pointer-events: none; z-index: 0;
    width: clamp(280px, 42vw, 560px); height: clamp(280px, 42vw, 560px); border-radius: 50%;
    background: radial-gradient(circle, oklch(0.45 0.16 266 / 0.12), transparent 70%);
    top: 8%; right: -10%;
}
.subhero .hero-content { position: relative; z-index: 1; }
.breadcrumb {
    font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { margin: 0 0.5em; color: var(--muted-light); }
.subhero h1 {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.6rem, 1.9rem + 2.4vw, 4rem);
    line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-heading);
    margin-bottom: var(--space-md); max-width: 16ch;
}
.subhero h1 .hl { color: var(--primary); }

.feature-block { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) {
    .feature-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
    .feature-block.is-reversed .feature-media { order: -1; }
}
.feature-copy h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.feature-copy > p { color: var(--muted); max-width: 52ch; }
.feature-media { min-width: 0; }
.feature-eyebrow {
    display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs);
    font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent); margin-bottom: var(--space-sm);
}

/* Action map: what each node type can derive */
.action-map { list-style: none; margin: var(--space-lg) 0 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.action-row {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface); border-radius: 10px;
}
.action-from {
    font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
    color: color-mix(in oklab, var(--c) 72%, black);
    background: color-mix(in oklab, var(--c) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
    padding: 0.2em 0.6em; border-radius: 6px; white-space: nowrap; justify-self: start;
}
.action-to { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.action-pill {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
    color: var(--ink); background: var(--bg-elevated);
    border: 1px solid var(--surface-border); padding: 0.25em 0.55em; border-radius: 6px;
}
.action-pill.is-decompose { color: var(--primary); border-color: color-mix(in oklch, var(--primary) 30%, transparent); }

/* Health metric chips */
.metric-grid {
    display: flex; margin-top: var(--space-lg);
    background: var(--bg-elevated); border: 1px solid var(--surface-border);
    border-radius: 12px; overflow-x: auto;
}
.metric {
    flex: 1 0 auto; display: flex; align-items: baseline; gap: 0.6ch;
    padding: var(--space-md) var(--space-lg);
    border-right: 1px solid var(--surface-border); white-space: nowrap;
}
.metric:last-child { border-right: 0; }
.metric.is-alert { background: oklch(0.55 0.19 30 / 0.06); }
.metric .m-count { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--ink-heading); line-height: 1; }
.metric .m-count.alert { color: oklch(0.5 0.19 30); }
.metric .m-count.ok { color: oklch(0.42 0.15 145); }
.metric .m-label { font-size: var(--text-sm); color: var(--ink-body); margin: 0; }

@media (max-width: 640px) {
    .action-row { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* Subhero highlight underline tracks the primary (indigo), not the amber CP tint. */
.subhero h1 .hl::after { background: var(--primary); }

/* Stack the nav on narrow screens so wrapped links never collide with the brand. */
@media (max-width: 768px) {
    .site-nav .wrap { flex-wrap: wrap; row-gap: var(--space-sm); }
    .site-nav-links { width: 100%; order: 3; justify-content: flex-start; gap: var(--space-md); }
}

/* ── Learn from your current system (landing/onboarding) ── */
.learn-layout {
    display: grid; gap: var(--space-xl); grid-template-columns: 1fr;
    margin-top: var(--space-xl); align-items: start;
}
@media (min-width: 880px) {
    .learn-layout { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); }
}
.learn-copy h3 { margin-bottom: var(--space-sm); }
.learn-copy > p { color: var(--muted); max-width: 52ch; }
.learn-steps {
    list-style: none; margin: var(--space-lg) 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.learn-steps li {
    display: flex; align-items: flex-start; gap: 0.7rem;
    font-size: var(--text-sm); color: var(--ink); line-height: 1.5;
}
.learn-steps .ls-n {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary); font-family: var(--font-mono); font-weight: 600; font-size: 0.75rem;
}
.learn-alt { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-md); }

.learn-screen {
    background: var(--bg-elevated); padding: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-md);
}
.learn-screen-head h4 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.1rem; color: var(--ink-heading); margin: 0 0 0.25rem;
}
.learn-screen-head p { font-size: var(--text-sm); color: var(--muted); margin: 0; max-width: 42ch; }
.learn-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.learn-action {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.8rem 0.9rem; border-radius: 12px;
    border: 1px solid var(--surface-border); background: var(--surface);
}
.learn-action.is-primary { border-color: transparent; background: var(--primary); color: var(--on-primary); }
.la-icon {
    flex: 0 0 auto; display: inline-grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 8px;
    background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary);
}
.learn-action.is-primary .la-icon { background: oklch(1 0 0 / 0.16); color: var(--on-primary); }
.la-icon svg { width: 1.05rem; height: 1.05rem; }
.la-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.la-label { font-weight: 600; font-size: var(--text-sm); }
.la-desc { font-size: var(--text-xs); color: var(--muted); }
.learn-action.is-primary .la-desc { color: oklch(1 0 0 / 0.82); }
.learn-feats {
    list-style: none; margin: 0; padding: var(--space-sm) 0 0;
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
    border-top: 1px solid var(--surface-border);
}
.learn-feats li {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono);
}
.learn-feats .lf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--primary)); flex: 0 0 auto; }
.learn-media figcaption { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--muted); text-align: center; }

/* ── Home: app overview band ── */
.app-band { }
.app-band .feature-copy > p { color: var(--muted); }
.app-band .band-caps {
    list-style: none; margin: var(--space-lg) 0 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-sm);
}
.app-band .band-caps li {
    display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: baseline;
    font-size: var(--text-sm); color: var(--ink); line-height: 1.5;
}
.app-band .band-caps .bc-dot {
    width: 8px; height: 8px; border-radius: 50%; align-self: center;
    background: var(--c, var(--primary)); flex: 0 0 auto;
}
.app-band .band-caps strong { color: var(--ink-heading); font-weight: 600; }
.app-band .app-actions { margin-top: var(--space-lg); }

/* ── Docs page ── */
.docs-grid {
    max-width: 1240px; margin: 0 auto; padding: 0 var(--space-lg);
    display: grid; grid-template-columns: 1fr; gap: var(--space-lg);
}
@media (min-width: 940px) {
    .docs-grid { grid-template-columns: 244px minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
}
.docs-grid [id] { scroll-margin-top: 5.5rem; }

/* Sidebar */
.docs-sidebar { min-width: 0; }
@media (min-width: 940px) {
    .docs-sidebar {
        position: sticky; top: 4.75rem;
        max-height: calc(100vh - 6rem); overflow-y: auto;
        padding: var(--space-md) var(--space-md) var(--space-lg) 0;
        margin-top: var(--space-2xl);
        border-right: 1px solid var(--surface-border);
    }
}
.docs-sidebar-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    margin: var(--space-lg) 0 0;
    padding: 0.7rem 0.9rem; border: 1px solid var(--surface-border);
    border-radius: 10px; background: var(--bg-elevated);
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    color: var(--ink-heading); cursor: pointer;
}
.docs-sidebar-toggle:hover { background: var(--surface); }
.docs-sidebar-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.docs-sidebar[data-open="true"] .docs-sidebar-toggle svg { transform: rotate(180deg); }
@media (min-width: 940px) { .docs-sidebar-toggle { display: none; } }

.docs-nav { display: none; padding-top: var(--space-md); }
.docs-sidebar[data-open="true"] .docs-nav { display: block; }
@media (min-width: 940px) { .docs-nav { display: block; padding-top: 0; } }
.docs-nav-label {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light);
    margin: var(--space-lg) 0 var(--space-sm);
}
.docs-nav-label:first-child { margin-top: 0; }
.docs-nav-cat {
    font-size: var(--text-xs); font-weight: 600; color: var(--ink-heading);
    margin: var(--space-md) 0 var(--space-xs); letter-spacing: 0.01em;
}
.docs-nav ul { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.docs-nav li { margin: 0; }
.docs-nav a {
    position: relative; display: block; padding: 0.28rem 0 0.28rem 0.85rem;
    font-size: var(--text-sm); color: var(--muted); line-height: 1.35;
    border-radius: 4px; transition: color 0.15s ease;
}
.docs-nav a::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: transparent;
    transition: background 0.15s ease;
}
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.is-active { color: var(--primary); font-weight: 600; }
.docs-nav a.is-active::before { background: var(--primary); }

/* Main column */
.docs-main { min-width: 0; }
.docs-intro { padding: var(--space-2xl) 0 var(--space-md); }
.docs-intro .breadcrumb { margin-bottom: var(--space-md); }
.docs-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.4rem);
    line-height: 1.05; letter-spacing: -0.03em; color: var(--ink-heading);
    margin-bottom: var(--space-sm);
}
.docs-title span { color: var(--primary); }
.docs-lede { font-size: var(--text-lg); color: var(--muted); max-width: 56ch; line-height: 1.55; }
.docs-section { padding: var(--space-2xl) 0; border-top: 1px solid var(--surface-border); }
.docs-section > h2 { font-size: var(--text-2xl); margin-bottom: var(--space-sm); }
.docs-section .section-lead { margin-bottom: var(--space-lg); }
.docs-subhead {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
    margin: var(--space-2xl) 0 var(--space-md);
}
.docs-feature { margin-top: var(--space-2xl); }
.docs-feature:first-of-type { margin-top: var(--space-lg); }

/* Quick-start rail */
.qs-rail { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 620px) { .qs-rail { grid-template-columns: repeat(3, 1fr); } }
.qs-step {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: var(--space-md); border: 1px solid var(--surface-border);
    border-radius: 10px; background: var(--bg-elevated);
}
.qs-num {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
    color: var(--primary);
}
.qs-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--ink-heading); }
.qs-cmd {
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-heading);
    background: var(--surface); border: 1px solid var(--surface-border);
    border-radius: 6px; padding: 0.4em 0.6em; overflow-x: auto; white-space: nowrap;
}
.qs-line { font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }

/* Chooser list */
.doc-chooser {
    margin-top: var(--space-lg); border: 1px solid var(--surface-border);
    border-radius: 10px; overflow: hidden; background: var(--bg-elevated);
}
.doc-chooser a {
    display: grid; grid-template-columns: 1fr auto; gap: var(--space-md); align-items: center;
    padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--surface-border);
    color: var(--ink); transition: background 0.15s ease;
}
.doc-chooser a:first-child { border-top: 0; }
.doc-chooser a:hover { background: var(--surface); color: var(--ink); }
.dc-need { font-weight: 500; }
.dc-cmd { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); white-space: nowrap; }

/* Core concepts — editorial rows */
.concept-list { margin-top: var(--space-md); }
.concept {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md);
    padding: var(--space-lg) 0; border-top: 1px solid var(--surface-border);
}
.concept:first-child { border-top: 0; }
.concept-marker { width: 12px; height: 12px; border-radius: 50%; margin-top: 0.45rem; background: var(--c, var(--primary)); }
.concept h3 { margin-bottom: var(--space-xs); }
.concept p { color: var(--muted); max-width: 60ch; }
.concept pre { margin: var(--space-md) 0 0; }

/* Tutorials — stacked link cards */
.tut-list { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.tut {
    display: block; padding: var(--space-lg); border: 1px solid var(--surface-border);
    border-radius: 10px; background: var(--bg-elevated);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tut:hover { border-color: var(--muted-light); background: var(--bg-elevated); }
.tut-kicker {
    font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.02em; color: var(--accent);
}
.tut h3 { margin: var(--space-xs) 0 var(--space-xs); color: var(--ink-heading); }
.tut p { color: var(--muted); max-width: 62ch; }
.tut-more {
    display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--space-sm);
    font-size: var(--text-sm); font-weight: 600; color: var(--primary);
}
.tut-more svg { width: 15px; height: 15px; }

/* Feature list — grouped command rows */
.feat-list {
    margin-top: var(--space-md); border: 1px solid var(--surface-border);
    border-radius: 10px; overflow: hidden; background: var(--bg-elevated);
}
.feat-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md);
    align-items: baseline; padding: var(--space-md); border-top: 1px solid var(--surface-border);
}
.feat-row:first-child { border-top: 0; }
.feat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--primary)); align-self: start; margin-top: 0.5rem; }
.feat-cmd { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--ink-heading); word-break: break-word; }
.feat-desc { font-size: var(--text-sm); color: var(--muted); margin-top: 0.15rem; }
.feat-body { min-width: 0; }

@media (max-width: 620px) {
    .concept { grid-template-columns: 1fr; }
    .concept-marker { display: none; }
    .doc-chooser a { grid-template-columns: 1fr; gap: 0.35rem; }
    .dc-cmd { white-space: normal; overflow-wrap: anywhere; }
}