:root { color-scheme: light; --accent: #FF4801; --accent-text: #C83800; --accent-action: #C83800; --accent-hover: #FF7038; --accent-soft: rgba(255, 72, 1, 0.08); --text: #521000; --muted: rgba(82, 16, 0, 0.7); --page: #F5F1EB; --surface: #FFFBF5; --surface-2: #FFFDFB; --surface-3: #FEF7ED; --hairline: #EBD5C1; --hairline-soft: rgba(235, 213, 193, 0.5); --header-veil: rgba(245, 241, 235, 0.82); --header-veil-0: rgba(245, 241, 235, 0); --header-veil-solid: rgba(245, 241, 235, 0.95); --figure-paper: #F5F1EB; --terminal-bg: #0b1020; --terminal-ink: #f9fafb; --space-1: .5rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; }
    * { box-sizing: border-box; }
    html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    :where(a, button, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
    :where(button, input, textarea):disabled { cursor: not-allowed; opacity: .68; }
    body { max-width: 1040px; margin: 0 auto; padding: var(--space-4); color: var(--text); font: 100%/1.6 system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top left, rgba(255, 72, 1, 0.10), transparent 34rem), var(--page); }
    header { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--space-4)) var(--space-5); padding: var(--space-2) var(--space-4); backdrop-filter: blur(16px); background: var(--header-veil); }
    .skip-link { position: absolute; left: -9999px; }
    .skip-link:focus { position: fixed; left: var(--space-3); top: var(--space-3); z-index: 10; padding: .6rem 1rem; border: 1px solid var(--accent); border-radius: .5rem; background: var(--surface); color: var(--text); }
    nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    nav a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .22em; transition-property: color, text-decoration-color; transition-duration: 160ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
    nav a:hover { color: var(--accent-text); text-decoration-color: var(--accent); }
    .button:active { transform: scale(0.96); }
    h1, h2 { letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
    h1 { font-size: clamp(2.4rem, 4.5vw, 3.75rem); margin: 0 0 1rem; }
    h2 { margin-top: 0; }
    p, li { text-wrap: pretty; }
    pre { overflow: auto; padding: 1rem; border-radius: 1rem; background: var(--terminal-bg); color: var(--terminal-ink); box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 12px 42px rgba(0,0,0,.18); }
    textarea { box-sizing: border-box; width: 100%; height: auto; min-height: 18rem; padding: 0; overflow: hidden; resize: vertical; border: 0; outline: 0; background: transparent; color: var(--text); font: 14px/1.5 ui-monospace, SF Mono, Fira Code, Consolas, monospace; tab-size: 4; transition-property: box-shadow; transition-duration: 150ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
    textarea:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent-soft); }
    .textarea-fallback[hidden] { display: none; }
    .cm-editor { flex: 1; min-height: 18rem; background: transparent; color: var(--text); font: 14px/1.5 ui-monospace, SF Mono, Fira Code, Consolas, monospace; }
    .cm-editor.cm-focused { outline: 3px solid var(--accent-text); outline-offset: 3px; box-shadow: 0 0 0 6px var(--accent-soft); }
    .cm-scroller { font-family: inherit; line-height: 1.5; scrollbar-color: var(--accent-text) var(--surface-3); scrollbar-width: thin; }
    .cm-scroller::-webkit-scrollbar { width: 10px; height: 10px; }
    .cm-scroller::-webkit-scrollbar-track { background: var(--surface-3); }
    .cm-scroller::-webkit-scrollbar-thumb { border: 2px solid var(--surface-3); border-radius: 999px; background: var(--accent-text); }
    .cm-content { padding: 0; }
    .cm-line { padding: 0; }
    .cm-gutters { background: transparent; border-right: 1px solid var(--hairline-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
    .cm-lineNumbers .cm-gutterElement { padding: 0 var(--space-2) 0 0; min-width: 2ch; text-align: right; font-size: .85em; }
    .cm-activeLine, .cm-activeLineGutter { background: transparent; }
    .cm-selectionBackground, .cm-focused .cm-selectionBackground { background: rgba(255, 72, 1, 0.18) !important; }
    code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
    .syntax-inline { padding: .08rem .25rem; border-radius: .25rem; background: var(--accent-soft); color: var(--text); font-size: .94em; }
    /* Nav tap targets: block padding grows the hit area to ~43px while
       the negative margin cancels the layout growth. */
    .brand { font-weight: 800; padding-block: .55rem; margin-block: -.55rem; }
    .nav-links { display: flex; gap: .35rem; }
    .nav-links a { padding: .55rem .9rem; margin-block: -.55rem; color: var(--muted); }
    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top left; }
    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); transform-origin: top left; }
    .hero p { max-width: 60ch; color: var(--muted); font-size: 1rem; }
    @supports (animation-timeline: scroll()) {
      @media (prefers-reduced-motion: no-preference) {
        .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
        .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
        .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
        body:has(.hero) { padding-top: var(--space-2); }
        /* The brand blurs in on scroll, but the header (and its nav)
           stays readable from first paint — hiding the primary nav on
           landing fails the "where can I go?" test. The emerging veil
           lives on a pseudo-element and animates opacity only, which
           the compositor can do without repainting every scroll frame. */
        body:has(.hero) header { background: transparent; box-shadow: none; margin-bottom: var(--space-2); }
        body:has(.hero) header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--header-veil-solid); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); opacity: 0; animation: header-veil-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
        body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
      }
    }
    @keyframes hero-fade {
      to { opacity: 0; transform: scale(0.92) translateY(-8px); }
    }
    @keyframes hero-h1-morph {
      to { transform: scale(0.32) translate(-32%, -50%); opacity: 0; }
    }
    @keyframes hero-p-fade {
      to { opacity: 0; transform: translateY(-4px); }
    }
    @keyframes brand-focus {
      to { filter: blur(0); transform: scale(1); }
    }
    @keyframes header-veil-emerge {
      to { opacity: 1; }
    }
    .site-search { position: relative; width: 100%; max-width: none; margin: 0 0 var(--space-5); }
    .site-search input { width: 100%; min-height: 44px; padding: .6rem 1rem; border: 1px solid var(--hairline); border-radius: .75rem; background: var(--surface-2); color: var(--text); font: inherit; transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
    .site-search input:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-color: var(--accent-text); box-shadow: 0 0 0 6px var(--accent-soft); }
    .site-search input::placeholder { color: var(--muted); }
    .search-status { min-height: 1.4em; margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
    .search-results { position: absolute; inset-inline: 0; top: 100%; z-index: 3; margin: .35rem 0 0; padding: .35rem; list-style: none; border: 1px solid var(--hairline); border-radius: .75rem; background: var(--surface-2); box-shadow: 0 12px 42px rgba(0, 0, 0, .14); }
    .search-results li { margin: 0; }
    .search-results a { display: block; padding: .5rem .65rem; border-radius: .5rem; color: var(--text); text-decoration: none; }
    .search-results a:hover, .search-results a:focus-visible { background: var(--accent-soft); outline: 3px solid var(--accent-text); outline-offset: -1px; }
    .search-results .search-empty { padding: .5rem .65rem; color: var(--muted); }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
    .home-section { margin-top: var(--space-6); }
    .home-section:first-of-type { margin-top: 0; }
    .home-section .eyebrow { margin: 0 0 var(--space-2); }
    .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
    .card:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--accent); }
    .card:active { transform: translateY(0) scale(0.99); }
    .card h2 { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .18em; }
    .card:hover h2 { text-decoration-color: var(--accent); }
    .button { min-height: 40px; border: 1px solid var(--accent-action); border-radius: 9999px; padding: .72rem 1rem; background: var(--accent-action); color: white; cursor: pointer; font-weight: 650; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, opacity, border-style; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
    .button:hover { opacity: .95; border-color: var(--accent-hover); }
    .meta { color: var(--muted); font-variant-numeric: tabular-nums; }
    .eyebrow { margin: 0 0 var(--space-2); color: var(--accent-text); font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .text-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .22em; }
    .text-link:hover { color: var(--accent-text); }
    .example-shell { padding: clamp(var(--space-3), 3vw, var(--space-5)) 0; }
    .example-intro { max-width: 68ch; margin-bottom: var(--space-5); }
    .literate-program { margin: var(--space-5) 0; border-block: 1px solid var(--hairline); }
    .lesson-step { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.35fr); gap: clamp(var(--space-4), 4vw, var(--space-6)); align-items: start; padding: var(--space-4) 0; border-top: 1px dashed var(--hairline-soft); }
    .lesson-step:first-child { border-top: 0; }
    .lesson-step p { margin: 0; color: var(--muted); max-width: 38ch; }
    .lesson-step pre { margin: 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--accent); border-radius: 0; background: transparent; color: var(--text); box-shadow: none; }
    .lesson-step code { white-space: pre-wrap; }
    .lesson-step .shiki-block { margin: 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--accent); border-radius: 0; background: transparent !important; color: var(--text); box-shadow: none; white-space: pre-wrap; }
    .lesson-step .shiki-block .line { display: inline; }
    @media (max-width: 760px) { .mobile-run-first { display: flex; flex-direction: column; } .mobile-run-first .example-top { order: 0; } .mobile-run-first .example-intro { order: 1; margin-bottom: var(--space-3); } .mobile-run-first .playground { order: 2; margin-top: 0; margin-bottom: var(--space-5); } .mobile-run-first .literate-program { order: 3; margin-top: 0; } .mobile-run-first > h2 { order: 4; } .mobile-run-first > ul { order: 5; } .mobile-run-first .example-nav { order: 6; } }
    .cell-flow-prototype { padding: clamp(var(--space-3), 3vw, var(--space-5)) 0; }
    .notebook-hero { max-width: 68ch; margin-bottom: var(--space-4); }
    .cell-run-summary { margin: var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--hairline); border-radius: 1rem; background: var(--surface-2); }
    .cell-run-summary h2 { margin-bottom: .25rem; }
    .cell-run-summary p { max-width: 68ch; color: var(--muted); }
    .cell-run-summary summary { cursor: pointer; color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .22em; }
    .lp-cells { border-block: 1px solid var(--hairline); }
    .lp-cell { display: grid; grid-template-columns: minmax(17rem, .85fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-top: 1px dashed var(--hairline-soft); }
    .lp-cell:first-child { border-top: 0; }
    .cell-label { margin: 0 0 var(--space-2); color: var(--accent-text); font-size: .74rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
    .lp-prose p { margin: 0 0 var(--space-2); color: var(--muted); }
    .lp-prose p:last-child { margin-bottom: 0; }
    .cell-code-stack { min-width: 0; padding-left: var(--space-3); border-left: 2px solid var(--accent); }
    .cell-code-stack code { white-space: pre-wrap; }
    .cell-source pre, .cell-source .shiki-block, .cell-output pre { margin: 0; padding: 0; border-left: 0; border-radius: 0; background: transparent !important; color: var(--text); box-shadow: none; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }
    .cell-source .shiki-block .line { display: inline; }
    .cell-source { position: relative; }
    /* Icon-in-pill copy affordance. The glyphs are Lucide copy/check/x
       drawn as currentColor masks, so every token state (muted, hover,
       accent-on-copied, dark mode) flows through with no extra rules.
       The ::before overlay expands the tap target to ~44px without
       growing the visible pill. */
    .copy-button { position: absolute; top: -0.35rem; right: 0; display: grid; place-items: center; width: 1.9rem; height: 1.65rem; padding: 0; border: 1px solid var(--hairline); border-radius: 9999px; background: var(--surface-2); color: var(--muted); cursor: pointer; transition-property: color, border-color; transition-duration: 150ms; }
    .copy-button::before { content: ""; position: absolute; inset: -0.55rem; }
    .copy-button:hover, .copy-button:focus-visible { color: var(--text); border-color: var(--accent); }
    .copy-button:active { transform: scale(0.96); }
    .copy-button.copied { color: var(--accent); border-color: var(--accent); }
    .copy-icon { display: block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat; }
    .copy-button.copied .copy-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
    .copy-button.failed .copy-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
    .copy-status { position: absolute; left: -9999px; }
    @media (prefers-reduced-motion: no-preference) { .copy-button.copied .copy-icon { animation: copy-pop 150ms cubic-bezier(0, 0, 0.2, 1); } }
    @keyframes copy-pop { from { transform: scale(0.6); opacity: 0; } }
    .cell-output { margin-top: var(--space-3); padding: var(--space-3) 0 0; border-top: 1px solid var(--hairline-soft); background: transparent; }
    .unsupported-cell .cell-code-stack { border-left-style: dashed; }
    .notebook-notes { margin-top: var(--space-5); }
    @media (max-width: 780px) {
      .lp-cell, .lesson-step, .runner-grid { grid-template-columns: 1fr; }
      .lp-cell .cell-code-stack { max-width: 72ch; }
      .cell-output { max-width: none; }
      body { padding: .875rem; }
      header { margin-inline: -.875rem; padding-inline: .875rem; }
    }
    .playground { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
    .playground > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.03em; margin-bottom: var(--space-3); }
    .runner-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: var(--space-4); align-items: stretch; }
    @media (max-width: 980px) { .runner-grid { grid-template-columns: 1fr; } }
    .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
    .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
    .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04); transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
    .runner-editor:focus-within { box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04), 0 0 0 3px rgba(255, 72, 1, 0.12); }
    .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
    .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
    .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }
    .tool-button:hover { background: var(--surface-3); border-color: var(--accent); }
    .tool-button:active { transform: scale(0.96); }
    /* The share action exports the code rather than acting on it, so it
       sits apart from the Run/Reset pair at the toolbar's far edge. */
    .share-button { margin-left: auto; }
    .output-panel { background: var(--surface); }
    .journey-card ul { margin: var(--space-3) 0 0; padding-left: 1.2rem; color: var(--muted); }
    .journey-card li { text-wrap: pretty; }
    .journey-page { max-width: 820px; margin-inline: auto; }
    .journey-overview { max-width: 42rem; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--hairline-soft); }
    .journey-overview ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
    .journey-section { margin-block: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
    .journey-section h2 { margin-bottom: var(--space-2); }
    .journey-section > .meta { max-width: 58ch; }
    .journey-section-figure { margin: var(--space-4) auto; padding: 0; width: 100%; max-width: clamp(280px, 70vw, 640px); }
    .journey-section-figure svg { max-width: 100%; height: auto; display: block; }
    .journey-section-figure figcaption { margin-top: var(--space-2); color: var(--muted); font-size: .92rem; font-style: italic; max-width: 44ch; }
    .journey-list { display: grid; gap: 0; margin-top: var(--space-3); padding-left: 0; list-style: none; }
    .journey-list li { position: relative; margin-left: .45rem; padding: var(--space-3) 0 var(--space-3) var(--space-4); border-left: 2px solid var(--hairline); }
    .journey-list li::before { content: ""; position: absolute; left: -.42rem; top: 1.45rem; width: .7rem; height: .7rem; border: 1px solid var(--accent); border-radius: 999px; background: radial-gradient(circle, var(--accent) 0 .16rem, var(--surface) .17rem); box-shadow: 0 0 0 5px var(--page); }
    .journey-list li:has(.journey-gap-label)::before { background: var(--surface); }
    .journey-list .meta { max-width: 58ch; margin: .25rem 0 0; }
    .journey-item-title { font-weight: 750; }
    .journey-gap, .journey-gap-label { color: var(--muted); font-weight: 750; }
    .journey-gap-label { margin: 0; color: var(--muted); font-size: .86rem; letter-spacing: 0; text-transform: none; }
    .notes-list { margin: 0 0 var(--space-5); padding-left: 1.2rem; color: var(--muted); max-width: 58ch; }
    .notes-list li { margin-bottom: var(--space-1); text-wrap: pretty; }
    .example-top, .example-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .example-nav { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
    footer { margin-block: 2rem; color: var(--muted); }
    .site-footer-note { font-size: .82rem; text-align: center; }
    /* About page: prose sections plus a design-language section that
       renders the live tokens. Swatches composite each token over
       --surface so translucent tokens (veils, softs) display honestly;
       set the token per swatch with style="--swatch: var(--accent)". */
    .about-page { max-width: 820px; margin-inline: auto; }
    .about-section { margin-block: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
    .about-section h2 { margin-bottom: var(--space-2); }
    .about-section p:not(.cell-label) { max-width: 68ch; color: var(--muted); }
    .about-section > .cell-label { margin-top: var(--space-4); }
    .token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
    .token { display: flex; align-items: center; gap: .6rem; }
    .token code { font-size: .8rem; color: var(--muted); }
    .token-swatch { flex: none; width: 2.1rem; height: 1.4rem; border: 1px solid var(--hairline); border-radius: .35rem; background: linear-gradient(var(--swatch, transparent), var(--swatch, transparent)), var(--surface); }
    .token-bar { flex: none; height: .5rem; border: 1px solid var(--hairline); border-radius: 9999px; background: var(--accent-soft); }
    .type-specimen p { margin: 0 0 var(--space-2); }
    .type-specimen .meta { font-size: .88rem; }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; } }
    /* Cell banner: a figure attached to a cell renders in a banner row
       AFTER that cell, spanning the full content width. Cells always
       keep their prose|code 2-column grid; banners between cells hold
       one or many figures (small multiples). See docs/visual-explainer-spec.md. */
    .cell-banner { margin: var(--space-5) 0; padding: var(--space-4) 0; border-block: 1px dashed var(--hairline-soft); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); justify-items: center; }
    .cell-banner figure { margin: 0; padding: 0; width: 100%; max-width: clamp(240px, 45vw, 480px); }
    .cell-banner svg { max-width: 100%; height: auto; display: block; }
    .cell-banner figcaption { margin-top: var(--space-2); color: var(--muted); font-size: .92rem; font-style: italic; max-width: 44ch; }
    .cell-banner--1 { margin-block: var(--space-6); }
    .cell-banner--1 figure { width: 100%; max-width: clamp(280px, 65vw, 640px); }
    .cell-banner--1 figcaption { max-width: 42ch; }
    /* Dark palette: same warm hue family as the light theme, inverted.
       Marginalia figures keep their locked light palette, so in dark
       mode each SVG sits on a light "paper" chip instead of being
       recoloured — the grammar stays untouched. Shiki emits dual-theme
       CSS variables; the swap below activates the dark set. */
    @media (prefers-color-scheme: dark) {
      :root {
        color-scheme: dark;
        --accent: #FF6B2E;
        --accent-text: #FF8A57;
        --accent-action: #FF8A57;
        --accent-hover: #FF8A57;
        --accent-soft: rgba(255, 107, 46, 0.14);
        --text: #F3E7DC;
        --muted: rgba(243, 231, 220, 0.72);
        --page: #1B120B;
        --surface: #241810;
        --surface-2: #281B12;
        --surface-3: #2F2015;
        --hairline: #43301F;
        --hairline-soft: rgba(67, 48, 31, 0.6);
        --header-veil: rgba(27, 18, 11, 0.82);
        --header-veil-0: rgba(27, 18, 11, 0);
        --header-veil-solid: rgba(27, 18, 11, 0.95);
      }
      .cell-banner figure svg, .journey-section-figure svg { padding: var(--space-2); border-radius: .5rem; background: var(--figure-paper); }
      .button { color: #2A0B00; }
    }
    /* Non-motion accessibility signals. Reduced motion is handled by
       the transition kill switch and no-preference gates above; these
       cover the other two: solid chrome when translucency is reduced,
       defined borders and full-contrast prose when contrast is raised. */
    @media (prefers-reduced-transparency: reduce) {
      header, body:has(.hero) header { background: var(--page); backdrop-filter: none; box-shadow: 0 1px 0 var(--hairline); }
      body:has(.hero) header::before { content: none; }
      .search-results { background: var(--surface); }
    }
    @media (prefers-contrast: more) {
      header, body:has(.hero) header { background: var(--page); backdrop-filter: none; box-shadow: 0 1px 0 var(--text); }
      body:has(.hero) header::before { content: none; }
      .card, .runner-panel, .site-search input, .copy-button, .tool-button { border-color: var(--text); }
      .meta, .lp-prose p, .lesson-step p, .nav-links a { color: var(--text); }
    }