:root { color-scheme: light; --accent: #FF4801; --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); --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; }
    body { max-width: 1040px; margin: 0 auto; padding: var(--space-4); color: var(--text); font: 16px/1.6 FT Kunst Grotesk, -apple-system, BlinkMacSystemFont, 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: rgba(245, 241, 235, 0.82); }
    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-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: #0b1020; color: #f9fafb; 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 Apercu Mono Pro, 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 { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.18); }
    .textarea-fallback[hidden] { display: none; }
    .cm-editor { flex: 1; min-height: 18rem; background: transparent; color: var(--text); font: 14px/1.5 Apercu Mono Pro, SF Mono, Fira Code, Consolas, monospace; }
    .cm-editor.cm-focused { outline: 0; box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.18); }
    .cm-scroller { font-family: inherit; line-height: 1.5; }
    .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; }
    .brand { font-weight: 800; }
    .nav-links { display: flex; gap: .35rem; }
    .nav-links a { padding: 0 .9rem; 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); }
        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; margin-bottom: var(--space-2); animation: header-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-emerge {
      to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
    }
    .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 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); border-radius: 9999px; padding: .72rem 1rem; background: var(--accent); 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); 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); }
    .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); 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-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); }
    .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; }
    @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; }