/* AnimaGeo Guide — base styles + interactive-block additions at bottom. */

:root {
    --bg:          #fafbfc;
    --surface:     #ffffff;
    --surface-2:   #f3f5f8;
    --border:      #e1e4e8;
    --border-soft: #edeff2;
    --text:        #1a1f26;
    --text-muted:  #5a6470;
    --accent:      #4d87c6;
    --accent-dim:  #e4edf8;
    --warn:        #f15b5b;
    --warn-dim:    #fce6e4;
    --ok-dim:      #e3f4e9;
    --code-bg:     #272b32;
    --code-fg:     #e8eaed;
    --code-kw:     #c591e0;
    --code-str:    #9dce65;
    --code-num:    #e5a73c;
    --code-cmt:    #7e8894;
    --code-dsl:    #82c8e0;
    --shadow:      0 1px 2px rgba(20,30,50,.04), 0 1px 3px rgba(20,30,50,.03);
    --radius:      6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:         #0f1216;
        --surface:    #161a20;
        --surface-2:  #1d222a;
        --border:     #252a33;
        --border-soft:#1f242c;
        --text:       #e6e8eb;
        --text-muted: #8892a0;
        --accent:     #7eb0e0;
        --accent-dim: #1a2836;
        --warn:       #f08888;
        --warn-dim:   #2d1f1f;
        --ok-dim:     #1a2a20;
        --code-bg:    #0b0e12;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "SF Pro", "Segoe UI", system-ui, sans-serif;
    font-feature-settings: "ss01","ss02","cv01";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ─── Layout ──────────────────────────────────────────────────── */

.layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    max-width: 1480px;
    margin: 0 auto;
}

nav.side {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 18px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    font-size: 12.5px;
}

nav.side .brand {
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

nav.side .brand .title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

nav.side .brand .subtitle {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.01em;
}

nav.side ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav.side a {
    display: block;
    padding: 4px 18px 4px 22px;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .15s, border-color .15s, background .1s;
    line-height: 1.45;
}

nav.side a:hover {
    color: var(--text);
    background: var(--surface-2);
}

nav.side a.active {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 500;
}

nav.side a.current-page {
    color: var(--text);
    font-weight: 600;
}

nav.side a.disabled {
    color: var(--text-muted);
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

nav.side .group {
    padding: 12px 18px 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

main {
    padding: 28px 48px 80px;
    max-width: 100%;
    min-width: 0;
}

main.wide { max-width: 1080px; margin: 0 auto; }

/* ─── Typography ──────────────────────────────────────────── */

h1, h2, h3, h4 {
    letter-spacing: -0.012em;
    line-height: 1.2;
    font-weight: 650;
}

h1 {
    font-size: 24px;
    margin: 0 0 6px;
}

.subtitle-main {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0 0 24px;
    max-width: 80ch;
}

h2 {
    font-size: 19px;
    margin: 32px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 20px;
}

h3 {
    font-size: 15px;
    margin: 22px 0 8px;
    scroll-margin-top: 20px;
    font-weight: 600;
}

h4 {
    font-size: 12px;
    margin: 14px 0 4px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px 22px; padding: 0; }
li { margin: 2px 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: 650; }

/* ─── Code ────────────────────────────────────────────────── */

code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--surface-2);
    color: var(--text);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border-soft);
    white-space: nowrap;
}

pre {
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 12px 14px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    border: 1px solid var(--border);
    margin: 10px 0 16px;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
    border: 0;
    font-size: inherit;
    white-space: pre;
}

.kw   { color: var(--code-kw); }
.str  { color: var(--code-str); }
.num  { color: var(--code-num); }
.cmt  { color: var(--code-cmt); font-style: italic; }
.dsl  { color: var(--code-dsl); }

/* ─── Tables ─────────────────────────────────────────────── */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0 18px;
    font-size: 12.5px;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

table th, table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: top;
}

table th {
    background: var(--surface-2);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    text-transform: uppercase;
}

table tr:last-child td { border-bottom: none; }

table code {
    font-size: 11.5px;
    padding: 0 3px;
    background: var(--surface-2);
}

/* ─── Callouts ───────────────────────────────────────────── */

.callout {
    margin: 12px 0 16px;
    padding: 8px 12px 8px 38px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    position: relative;
    background: var(--surface);
    font-size: 12.5px;
}

.callout::before {
    position: absolute;
    left: 10px;
    top: 8px;
    font-weight: 700;
    font-size: 12px;
}

.callout.note   { border-left: 3px solid var(--accent); background: var(--accent-dim); color: var(--text); }
.callout.note::before   { content: "●"; color: var(--accent); }
.callout.warn   { border-left: 3px solid var(--warn);   background: var(--warn-dim);   color: var(--text); }
.callout.warn::before   { content: "▲"; color: var(--warn); }
.callout.tip    { border-left: 3px solid #58c57e;       background: var(--ok-dim);     color: var(--text); }
.callout.tip::before    { content: "★"; color: #2a7f49; }

.callout > :first-child { margin-top: 0; }
.callout > :last-child  { margin-bottom: 0; }

/* ─── Example card (code + visual) ──────────────────────── */

.ex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    margin: 12px 0 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.ex .ex-code {
    padding: 12px;
    background: var(--code-bg);
    overflow-x: auto;
}

.ex .ex-code pre {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 11.5px;
    line-height: 1.55;
}

.ex .ex-code .ex-label {
    color: var(--code-cmt);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    display: block;
}

.ex .ex-visual {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 180px;
    position: relative;
    border-left: 1px solid var(--border);
}

.ex .ex-visual img,
.ex .ex-visual video {
    max-width: 100%;
    max-height: 280px;
    width: auto;
    height: auto;
    display: block;
}

.ex .ex-visual .ex-cap {
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
    .ex .ex-visual { background: #ffffff; }
}

/* tall variant for animations (single-column stack) */
.ex.wide { grid-template-columns: 1fr; }
.ex.wide .ex-visual { min-height: auto; border-left: 0; border-top: 1px solid var(--border); }

/* Interactive examples: even with `.wide`, prefer a side-by-side layout when
 * screen is wide enough — it makes the code column narrower (less horizontal
 * scrolling of long DSL lines) and pairs each snippet visually with its
 * render. Falls back to stacked 1-col below 1000 px viewport. */
.ex.interactive.wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ex.interactive.wide .ex-visual {
    min-height: 180px;
    border-left: 1px solid var(--border);
    border-top: 0;
}

/* Scaffold panel — generated "host Python wrapper" shown on toggle.
 * Spans full width of the .ex grid so the generated Scene class can
 * breathe; its content wraps the DSL the user sees above. */
.ex.interactive .ex-scaffold {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    background: var(--code-bg);
}
.ex.interactive .ex-scaffold-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 12px 0;
}
.ex.interactive .ex-scaffold-header .ex-label {
    color: var(--code-cmt);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}
.ex.interactive .ex-scaffold-hint {
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
}
.ex.interactive .ex-scaffold-hint code {
    font-style: normal;
    background: transparent;
    padding: 0;
}
.ex.interactive .ex-scaffold-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.ex.interactive .ex-scaffold-tab {
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ex.interactive .ex-scaffold-tab:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.ex.interactive .ex-scaffold-tab.active {
    background: var(--accent, #4d87c6);
    border-color: var(--accent, #4d87c6);
    color: #fff;
}
.ex.interactive .ex-scaffold pre {
    margin: 0;
    padding: 10px 12px 12px;
    background: transparent;
    font-size: 11px;
    line-height: 1.55;
    overflow-x: auto;
}
.ex.interactive .btn.scaffold {
    /* muted compared to Run/Edit — this is a reference view, not an action */
    opacity: 0.85;
}
.ex.interactive.scaffold-open .btn.scaffold {
    opacity: 1;
    background: var(--bg-muted, rgba(0,0,0,0.05));
}

/* Two-variant comparison block: side-by-side host scripts above, a single
 * shared illustration below. Used in §5 to contrast "all styles in DSL"
 * vs "split construction/host" idioms without multiplying SVGs. */
.ex-compare {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--code-bg);
    margin: 16px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}
.ex-compare-col {
    padding: 10px 12px;
    border-right: 1px solid var(--border);
    min-width: 0;
}
.ex-compare-col:last-of-type {
    border-right: 0;
}
.ex-compare-col pre {
    margin: 0;
    background: transparent;
    font-size: 11px;
    line-height: 1.55;
    overflow-x: auto;
}
.ex-compare-label {
    color: var(--code-cmt);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.ex-compare-visual {
    grid-column: 1 / -1;
    background: #fff;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
}
.ex-compare-visual img {
    max-width: 100%;
    max-height: 260px;
    height: auto;
}
.ex-compare-cap {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 6px;
    font-style: italic;
}
@media (max-width: 900px) {
    .ex-compare {
        grid-template-columns: 1fr;
    }
    .ex-compare-col {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .ex-compare-col:last-of-type {
        border-bottom: 0;
    }
}

/* .ex-with-ggb — same layout as .ex (side-by-side code+visual), but
 * non-interactive (no Edit/Run); used when the example loads a .ggb file
 * rather than building via DSL. Download link points at /ggb/<name>.ggb. */
.ex-with-ggb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 14px 0;
    overflow: hidden;
    background: var(--code-bg);
}
.ex-with-ggb .ex-code {
    padding: 12px;
    min-width: 0;
    border-right: 1px solid var(--border);
    overflow-x: auto;
}
.ex-with-ggb .ex-code pre {
    margin: 0;
    background: transparent;
    font-size: 11.5px;
    line-height: 1.55;
}
.ex-with-ggb .ex-visual {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 180px;
}
.ex-with-ggb .ex-visual img {
    max-width: 100%;
    max-height: 280px;
    height: auto;
}
.ex-with-ggb .ex-placeholder {
    color: var(--text-muted);
    font-size: 11.5px;
    text-align: center;
    line-height: 1.5;
}
.ex-with-ggb .ex-downloads {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    font-size: 11.5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: var(--bg);
}
.ex-with-ggb .ex-downloads .lbl {
    color: var(--text-muted);
}
@media (max-width: 900px) {
    .ex-with-ggb {
        grid-template-columns: 1fr;
    }
    .ex-with-ggb .ex-code {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
}

@media (max-width: 1000px) {
    .ex.interactive.wide {
        grid-template-columns: 1fr;
    }
    .ex.interactive.wide .ex-visual {
        min-height: auto;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

/* Downloads row below example card */
.ex-downloads {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    font-size: 11px;
}

.ex-downloads .lbl {
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}

.ex-downloads a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.ex-downloads a:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

.ex-downloads a::before {
    content: "↓";
    font-weight: 700;
    color: var(--accent);
}

/* Row of small example cards */
.ex-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin: 10px 0 16px;
}

.ex-row .mini {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
}

.ex-row .mini img {
    width: 100%;
    display: block;
    aspect-ratio: 820 / 520;
    object-fit: contain;
    background: #fff;
}

.ex-row .mini .cap {
    padding: 4px 8px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    background: var(--surface-2);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

@media (prefers-color-scheme: dark) {
    .ex-row .mini, .ex-row .mini img { background: #fff; }
}

/* ─── Figures ─────────────────────────────────────────────── */

figure {
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

figure svg, figure img {
    max-width: 100%;
    height: auto;
}

figcaption {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
}

/* ─── Pills ──────────────────────────────────────────────── */

.pill {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    margin-left: 4px;
}

.pill.warn { background: var(--warn-dim); color: var(--warn); }
.pill.ok   { background: var(--ok-dim);   color: #2a7f49; }

/* ─── Landing cards ──────────────────────────────────────── */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 16px 0 24px;
}

.cards .card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, transform .1s;
}

.cards .card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none;
}

.cards .card .num {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
}

.cards .card .t {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 4px;
}

.cards .card .d {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ─── Details (collapsible) ──────────────────────────────── */

details {
    margin: 8px 0 12px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12.5px;
}

details > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 3px 0;
    user-select: none;
}

details[open] > summary {
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 6px;
}

/* ─── Anchor grid ─────────────────────────────────────── */

.anchor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 3px;
    max-width: 200px;
    margin: 10px 0 16px;
}

.anchor-grid .cell {
    padding: 10px 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.anchor-grid .cell.mc {
    color: var(--accent);
    background: var(--accent-dim);
    border-color: var(--accent);
}

/* ─── z-stack visual ──────────────────────────────────── */

.z-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 380px;
    margin: 10px 0 16px;
}

.z-stack .layer {
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
}

.z-stack .layer .z { color: var(--text-muted); }

/* ─── Page footer ────────────────────────────────────────── */

.footer-nav {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--border);
    font-size: 12px;
}

.footer-nav a {
    color: var(--text-muted);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.footer-nav a:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

hr.spacer {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 30px 0;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
    nav.side {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    main { padding: 18px 14px 60px; }
    h1 { font-size: 20px; }
    h2 { font-size: 17px; }
    .ex { grid-template-columns: 1fr; }
}

/* ─── Interactive example additions ─────────────────────── */

.ex.interactive .ex-code {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ex.interactive .ex-code pre {
    flex: 1 1 auto;
    overflow: auto;
    white-space: pre;
    min-height: 0;
}

.ex.interactive .ex-toolbar {
    position: absolute;
    top: 8px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.ex.interactive .btn {
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    color: var(--code-fg);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.ex.interactive .btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
}

.ex.interactive .btn.run {
    background: rgba(88,197,126,0.22);
    border-color: rgba(88,197,126,0.4);
    color: #cdebd6;
}

.ex.interactive .btn.run:hover {
    background: rgba(88,197,126,0.34);
    border-color: rgba(88,197,126,0.6);
}

.ex.interactive .btn.run.busy { opacity: 0.5; pointer-events: none; }
.ex.interactive .btn[disabled] { opacity: 0.4; cursor: default; }

/* Shown instead of Run/Reset once the guide discovers it's served
 * statically (no render server behind /render) — see interactive.js
 * enterStaticMode(). Informational, not an error: no warn colors. */
.ex.interactive .ex-static-note {
    flex: 0 0 auto;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    color: var(--code-fg);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    line-height: 1.5;
}

/* Edit mode uses an overlay: a transparent <textarea> on top of a colored
 * <pre>. Both share identical metrics (position/padding/line-height/font)
 * so caret lines up with the highlighted text underneath. The background
 * <pre> is re-rendered via highlightPython() on every `input` event. */
.ex.interactive .ex-editor-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 60px;
    overflow: hidden;
    resize: vertical;
    margin: 0;
    padding: 0;
}

.ex.interactive .ex-editor-bg,
.ex.interactive textarea.ex-editor {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.55;
    white-space: pre;
    tab-size: 4;
    overflow: auto;
}

.ex.interactive .ex-editor-bg {
    color: var(--code-fg);
    pointer-events: none;
    z-index: 1;
    scrollbar-width: none;  /* Firefox: hide — bg scrolls in lockstep with textarea */
}

.ex.interactive .ex-editor-bg::-webkit-scrollbar {
    display: none;
}

.ex.interactive .ex-editor-bg code {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    white-space: inherit;
}

.ex.interactive textarea.ex-editor {
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--accent);
    resize: none;
    outline: none;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
}

.ex.interactive textarea.ex-editor::selection {
    background: rgba(125, 170, 220, 0.35);
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.ex.interactive.editing .ex-code {
    box-shadow: inset 0 0 0 1px var(--accent);
}

.ex.interactive.editing .ex-label::after {
    content: " · edit mode";
    color: var(--accent);
}

.ex.interactive .ex-visual {
    position: relative;
}

.ex.interactive .ex-error {
    position: absolute;
    inset: 0;
    background: var(--warn-dim);
    color: var(--warn);
    padding: 12px 14px;
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    overflow: auto;
    display: none;
    white-space: pre-wrap;
    z-index: 1;
}

.ex.interactive.has-error .ex-error { display: block; }

.ex.interactive .ex-spinner {
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.9);
    padding: 2px 6px;
    border-radius: 3px;
    display: none;
}

.ex.interactive.rendering .ex-spinner { display: block; }

.ex.interactive .ex-meta {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s;
}

.ex.interactive.has-run .ex-meta { opacity: 1; }

/* Offline / disconnected server banner */
.server-status {
    position: fixed;
    bottom: 12px;
    right: 12px;
    padding: 6px 12px;
    background: var(--warn-dim);
    color: var(--warn);
    border: 1px solid var(--warn);
    border-radius: var(--radius);
    font-size: 11.5px;
    font-family: ui-monospace, monospace;
    max-width: 320px;
    display: none;
    z-index: 100;
}

.server-status.visible { display: block; }
.server-status code {
    background: rgba(0,0,0,0.1);
    color: inherit;
    padding: 0 4px;
}