/*  ML Learning Lab — Editorial Design System
    -------------------------------------------------
    Inspired by Distill.pub, Tufte's "Visual Display",
    and the academic monograph. Warm-paper light mode,
    Fraunces display, Source Serif body, JetBrains Mono
    for code, Computer Modern (via KaTeX) for math.
*/

/* Fonts are self-hosted (vendor/fonts/, regenerate with
   scripts/vendor-fonts.sh) rather than fetched from Google. Three reasons:
   the site claims to work offline and this is most of what broke that; a
   third-party request on every page view is a privacy leak the reader did not
   ask for; and the previous URL asked for Source Serif 4 as
   'opsz,wght,ital', which the css2 API rejects outright -- so the body face
   was never loading at all and every italic in the site was a synthesised
   oblique. */
@import url('../vendor/fonts/fonts.css');

:root {
    /* Paper palette (warm cream, ink near-black) */
    --paper:           #fbf8f3;   /* primary paper */
    --paper-deep:      #f4ede0;   /* sidebars, asides */
    --paper-vellum:    #f0e9da;   /* card / window chrome */
    --paper-rule:      #e3dac6;   /* hairline rules */
    --ink:             #1c1c1f;   /* body text */
    --ink-soft:        #3a3a3f;   /* secondary text */
    --ink-mute:        #6e6e74;   /* muted text */
    --ink-faint:       #9a958b;   /* captions, axis labels */

    /* Editorial accents — one dominant red (marginalia),
       deep blue for figures/links, restrained palette. */
    --red:             #b8312f;   /* marginalia, key concept */
    --red-deep:        #8c241f;
    --red-tint:        #f5e7e3;
    --blue:            #1d4ed8;   /* figure labels, links */
    --blue-deep:       #14306e;
    --blue-tint:       #e6ecf6;
    --teal:            #0f6e6a;
    --teal-tint:       #e1eeec;
    --plum:            #5a3a7a;
    --plum-tint:       #ece2f0;
    --sienna:          #a8530c;
    --sienna-deep:     #8a4209;
    --sienna-tint:     #f3e8d8;
    --olive:           #5a5a1c;
    --olive-tint:      #ece6cc;
    --ochre:           #b3791f;
    --ochre-tint:      #f4e6c8;
    --green:           #2d6a4f;
    --green-deep:      #1f5238;
    --green-tint:      #e0ede4;

    /* Legacy token names mapped to editorial values
       — every app that references --bg-primary etc.
       still works, but now renders on paper. */
    --bg-primary:      var(--paper);
    --bg-secondary:    var(--paper-deep);
    --bg-tertiary:     var(--paper-vellum);
    --bg-card:         var(--paper);
    --bg-input:        #fff;
    --bg-elevated:     var(--paper-vellum);
    --text-primary:    var(--ink);
    --text-secondary:  var(--ink-soft);
    --text-muted:      var(--ink-mute);
    --accent-blue:     var(--blue);
    --accent-green:    var(--green);
    --accent-purple:   var(--plum);
    --accent-orange:   var(--sienna);
    --accent-red:      var(--red);
    --accent-cyan:     var(--teal);
    --accent-pink:     var(--red);
    --accent-yellow:   var(--ochre);
    --border-color:    var(--paper-rule);
    --border-light:    #ece4d2;

    /* Figure tokens — the palette the canvases draw with.
       Canvas cannot read a custom property (ctx.fillStyle wants a literal), so
       every plate used to hardcode these hex codes and retheming meant a sed
       sweep across 297 files. js/figure.js resolves these once per theme and
       hands the drawing code plain strings, which is what makes the dark
       palette below possible at all. Names match Figure.palette() keys. */
    --fig-grid:        #cfc6b0;   /* graph hairlines */
    --fig-axis:        #1c1c1f;   /* axis lines and arrowheads */
    --fig-tick:        #9a958b;   /* numeric tick labels */
    --fig-label:       #1c1c1f;   /* axis names, in display italic */
    --fig-paper:       #fffdf7;   /* the figure's own ground */
    --fig-cell:        #fffefb;   /* matrix cell fill */
    --fig-cell-rule:   #e3dac6;   /* matrix cell border */
    --fig-rule:        #e3dac6;
    --fig-ink:         #1c1c1f;
    --fig-muted:       #6e6e74;
    --fig-faint:       #9a958b;
    --fig-blue:        #1d4ed8;
    --fig-red:         #b8312f;
    --fig-green:       #2d6a4f;
    --fig-teal:        #0f6e6a;
    --fig-plum:        #5a3a7a;
    --fig-ochre:       #b3791f;
    --fig-sienna:      #a8530c;
    --fig-olive:       #5a5a1c;
    --fig-torch:       #ee4c2c;   /* PyTorch brand, marks the active element */

    /* Typography stack */
    --font-display:    'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-body:       'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
    --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Spacing & rhythm (6px baseline) */
    --space-1: 6px;
    --space-2: 12px;
    --space-3: 18px;
    --space-4: 24px;
    --space-5: 36px;
    --space-6: 48px;
    --space-7: 72px;

    /* Radii kept conservative — editorial prefers right angles */
    --radius:    4px;
    --radius-sm: 3px;
    --radius-xs: 2px;

    /* Shadows are very subtle — paper doesn't glow */
    --shadow-sm:  0 1px 2px rgba(28,28,31,0.04);
    --shadow:     0 2px 6px rgba(28,28,31,0.06);
    --shadow-lg:  0 6px 20px rgba(28,28,31,0.10);

    --transition: all 0.18s cubic-bezier(.4,0,.2,1);

    /* Legacy "glow" tokens kept for class-compat; muted */
    --glow-blue:   0 0 0 1px rgba(29,78,216,0.18);
    --glow-green:  0 0 0 1px rgba(45,106,79,0.18);
    --glow-purple: 0 0 0 1px rgba(90,58,122,0.18);
}


/* ─── Dark mode ───────────────────────────────────────────────
   Same monograph, dimmed. Only the tokens change: every rule below this point
   is written against them, and js/figure.js resolves the --fig-* set at draw
   time, so the 297 canvases follow without touching a line of plate code.

   The block appears twice on purpose. The media query serves a reader whose OS
   asks for dark, with no JavaScript and therefore no flash of light page; the
   attribute selector serves an explicit choice, and has to win in both
   directions — including a reader on a dark OS who asks for light. CSS has no
   way to share one declaration list between a rule inside @media and one
   outside, so scripts/check.py compares them instead. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    /* Paper becomes a warm charcoal rather than black — the monograph reads
       as ink on a dim page, not as a terminal. */
    --paper:           #17150f;
    --paper-deep:      #1e1b14;
    --paper-vellum:    #242017;
    --paper-rule:      #3a3427;
    --ink:             #ece5d6;
    --ink-soft:        #c8c0ae;
    --ink-mute:        #9b9384;
    --ink-faint:       #756e60;

    /* Accents lightened until they hold contrast against the dark ground.
       Hue is preserved so a figure keeps meaning the same thing in both. */
    --red:             #e2706a;
    --red-deep:        #f0908a;
    --red-tint:        #3b211f;
    --blue:            #82a8f4;
    --blue-deep:       #a8c4f8;
    --blue-tint:       #1d2740;
    --teal:            #4fb5ae;
    --teal-tint:       #16302e;
    --plum:            #b492d8;
    --plum-tint:       #2c2339;
    --sienna:          #e28c48;
    --sienna-deep:     #f0a463;
    --sienna-tint:     #3b2617;
    --olive:           #b7b662;
    --olive-tint:      #2f2e19;
    --ochre:           #e2b257;
    --ochre-tint:      #3b3017;
    --green:           #6cba8e;
    --green-deep:      #8ccfa8;
    --green-tint:      #1a3026;

    --bg-input:        #201d16;
    --border-light:    #332d23;

    --fig-grid:        #3a3427;
    --fig-axis:        #ece5d6;
    --fig-tick:        #8e8677;
    --fig-label:       #ece5d6;
    --fig-paper:       #1a1710;
    --fig-cell:        #201d16;
    --fig-cell-rule:   #3a3427;
    --fig-rule:        #3a3427;
    --fig-ink:         #ece5d6;
    --fig-muted:       #9b9384;
    --fig-faint:       #756e60;
    --fig-blue:        #82a8f4;
    --fig-red:         #e2706a;
    --fig-green:       #6cba8e;
    --fig-teal:        #4fb5ae;
    --fig-plum:        #b492d8;
    --fig-ochre:       #e2b257;
    --fig-sienna:      #e28c48;
    --fig-olive:       #b7b662;
    --fig-torch:       #ff8563;

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
    --shadow:     0 2px 6px rgba(0,0,0,0.38);
    --shadow-lg:  0 6px 20px rgba(0,0,0,0.50);
    }

    /* The paper grain and the warm wash under body are light-mode artefacts:
       multiply-blending a dark speckle over a dark page only muddies it. */
    :root:not([data-theme="light"]) body { background-image: none; }
    :root:not([data-theme="light"]) body::before { display: none; }
    :root:not([data-theme="light"]) .topbar { background: rgba(23,21,15,0.88); }
    :root:not([data-theme="light"]) .figure-canvas { box-shadow: none; }
}

:root[data-theme="dark"] {
    /* Paper becomes a warm charcoal rather than black — the monograph reads
       as ink on a dim page, not as a terminal. */
    --paper:           #17150f;
    --paper-deep:      #1e1b14;
    --paper-vellum:    #242017;
    --paper-rule:      #3a3427;
    --ink:             #ece5d6;
    --ink-soft:        #c8c0ae;
    --ink-mute:        #9b9384;
    --ink-faint:       #756e60;

    /* Accents lightened until they hold contrast against the dark ground.
       Hue is preserved so a figure keeps meaning the same thing in both. */
    --red:             #e2706a;
    --red-deep:        #f0908a;
    --red-tint:        #3b211f;
    --blue:            #82a8f4;
    --blue-deep:       #a8c4f8;
    --blue-tint:       #1d2740;
    --teal:            #4fb5ae;
    --teal-tint:       #16302e;
    --plum:            #b492d8;
    --plum-tint:       #2c2339;
    --sienna:          #e28c48;
    --sienna-deep:     #f0a463;
    --sienna-tint:     #3b2617;
    --olive:           #b7b662;
    --olive-tint:      #2f2e19;
    --ochre:           #e2b257;
    --ochre-tint:      #3b3017;
    --green:           #6cba8e;
    --green-deep:      #8ccfa8;
    --green-tint:      #1a3026;

    --bg-input:        #201d16;
    --border-light:    #332d23;

    --fig-grid:        #3a3427;
    --fig-axis:        #ece5d6;
    --fig-tick:        #8e8677;
    --fig-label:       #ece5d6;
    --fig-paper:       #1a1710;
    --fig-cell:        #201d16;
    --fig-cell-rule:   #3a3427;
    --fig-rule:        #3a3427;
    --fig-ink:         #ece5d6;
    --fig-muted:       #9b9384;
    --fig-faint:       #756e60;
    --fig-blue:        #82a8f4;
    --fig-red:         #e2706a;
    --fig-green:       #6cba8e;
    --fig-teal:        #4fb5ae;
    --fig-plum:        #b492d8;
    --fig-ochre:       #e2b257;
    --fig-sienna:      #e28c48;
    --fig-olive:       #b7b662;
    --fig-torch:       #ff8563;

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.30);
    --shadow:     0 2px 6px rgba(0,0,0,0.38);
    --shadow-lg:  0 6px 20px rgba(0,0,0,0.50);
}

:root[data-theme="dark"] body { background-image: none; }
:root[data-theme="dark"] body::before { display: none; }
:root[data-theme="dark"] .topbar { background: rgba(23,21,15,0.88); }

/* The inset highlight plates draw inside a figure frame reads as a halo once
   the ground is dark. */
:root[data-theme="dark"] .figure-canvas { box-shadow: none; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.62;
    font-size: 17px;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image:
        radial-gradient(ellipse at top, rgba(184,49,47,0.018), transparent 60%),
        radial-gradient(ellipse at bottom, rgba(29,78,216,0.015), transparent 60%);
}

/* Subtle paper grain for atmosphere — pure CSS, no images */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    background-image:
        radial-gradient(circle at 13% 27%, rgba(28,28,31,0.012) 0.4px, transparent 0.8px),
        radial-gradient(circle at 71% 53%, rgba(28,28,31,0.010) 0.4px, transparent 0.8px),
        radial-gradient(circle at 47% 81%, rgba(28,28,31,0.012) 0.4px, transparent 0.8px);
    background-size: 4px 4px, 7px 7px, 5px 5px;
    mix-blend-mode: multiply;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ─── Topbar ─────────────────────────────────────────────────
   Editorial masthead. Thin hairline rule beneath, no shadow. */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 36px 16px;
    background: transparent;
    border-bottom: 1px solid var(--paper-rule);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(251,248,243,0.88);
}

.topbar-left {
    display: flex;
    align-items: baseline;
    gap: 24px;
}

.topbar-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.topbar-back:hover {
    color: var(--red);
    border-bottom-color: var(--red);
}

.topbar-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    font-variation-settings: "opsz" 60, "SOFT" 50;
    color: var(--ink);
    letter-spacing: -0.01em;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.topbar-title .icon {
    font-size: 14px;
    color: var(--red);
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ─── Main content & article layout ─────────────────────────
   Centered measure (~640px) with a right marginalia gutter
   for sidenotes. Falls back to single-column on narrow. */
.main-content {
    flex: 1;
    padding: var(--space-6) var(--space-5);
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 980px) {
    .main-content {
        display: grid;
        grid-template-columns: minmax(0, 680px) 280px;
        column-gap: 56px;
        align-items: start;
    }
    .main-content > * { grid-column: 1; }
    .main-content > .sidenote,
    .main-content > .marginalia,
    .main-content > .full-bleed,
    .main-content > .figure.wide { grid-column: 1 / -1; }
    .main-content > .sidenote-right,
    .main-content > .marginalia-right { grid-column: 2; }
}

/* ─── Editorial headings ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.18;
    font-variation-settings: "opsz" 96, "SOFT" 30;
}

h1 { font-size: 44px; margin-bottom: var(--space-3); }
h2 { font-size: 30px; margin: var(--space-5) 0 var(--space-2); }
h3 { font-size: 22px; margin: var(--space-4) 0 var(--space-2); }
h4 { font-size: 17px; margin: var(--space-3) 0 var(--space-1); }

p { margin-bottom: var(--space-3); }

a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(29,78,216,0.25);
    transition: var(--transition);
}
a:hover { color: var(--red); border-bottom-color: var(--red); }

em { font-style: italic; }
strong { font-weight: 600; color: var(--ink); }

::selection { background: var(--ochre-tint); color: var(--ink); }

/* ─── Section labels & meta (small caps) ───────────────────── */
.section-title,
.eyebrow {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.section-title::before,
.eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--ink-mute);
}

/* ─── Cards — restrained, hairline-bordered ────────────────── */
.card {
    background: var(--paper);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-4);
    transition: var(--transition);
    position: relative;
    margin-bottom: var(--space-4);
}
.card::before { content: none; }
.card:hover {
    border-color: var(--ink-faint);
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--paper-rule);
}

.card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ─── Buttons — editorial, low gloss ───────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
    background: var(--paper);
    color: var(--ink);
    box-shadow: none;
}

.btn-primary {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn-primary:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
    transform: none;
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper-rule);
}
.btn-secondary:hover {
    background: var(--paper-vellum);
    border-color: var(--ink-faint);
    color: var(--ink);
}

.btn-success {
    background: var(--green);
    border-color: var(--green);
    color: var(--paper);
}
.btn-success:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: var(--paper);
    transform: none;
}

.btn-danger {
    background: var(--red);
    border-color: var(--red);
    color: var(--paper);
}
.btn-danger:hover { background: var(--red-deep); border-color: var(--red-deep); transform: none; }

.btn-warning {
    background: var(--sienna);
    border-color: var(--sienna);
    color: var(--paper);
}
.btn-warning:hover { background: var(--sienna-deep); }

.btn-sm { padding: 6px 13px; font-size: 11px; }
.btn-lg { padding: 12px 26px; font-size: 13px; }
.btn-xs { padding: 4px 10px; font-size: 10px; }

/* ─── Forms ──────────────────────────────────────────────── */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--space-3);
}
.input-group label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-mute);
}

input[type="text"], input[type="number"], select, textarea {
    background: var(--bg-input);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    transition: var(--transition);
    width: 100%;
}

input[type="text"]:hover, input[type="number"]:hover, select:hover {
    border-color: var(--ink-faint);
}

input[type="range"] {
    padding: 0;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: var(--paper-rule);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    border: 2px solid var(--paper);
    transition: var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.18);
    background: var(--red);
}
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    cursor: pointer;
    border: 2px solid var(--paper);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
}

textarea {
    resize: vertical;
    line-height: 1.6;
}

canvas {
    border-radius: var(--radius);
    background: var(--fig-paper);
    border: 1px solid var(--paper-rule);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* ─── Layout helpers ───────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

.flex { display: flex; gap: var(--space-3); }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-3); }
.mt-3 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-3); }
.mb-3 { margin-bottom: var(--space-4); }

.text-center { text-align: center; }
.text-muted { color: var(--ink-mute); }
.text-secondary { color: var(--ink-soft); }
.text-sm { font-size: 14px; }
.text-xs { font-size: 12px; }

/* ─── Badges & tags (small-caps editorial) ─────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--paper-vellum);
    color: var(--ink-soft);
    border: 1px solid var(--paper-rule);
}
.badge-blue   { background: var(--blue-tint);   color: var(--blue);   border-color: var(--blue); }
.badge-green  { background: var(--green-tint);  color: var(--green);  border-color: var(--green); }
.badge-purple { background: var(--plum-tint);   color: var(--plum);   border-color: var(--plum); }
.badge-orange { background: var(--sienna-tint); color: var(--sienna); border-color: var(--sienna); }
.badge-red    { background: var(--red-tint);    color: var(--red);    border-color: var(--red); }
.badge-cyan   { background: var(--teal-tint);   color: var(--teal);   border-color: var(--teal); }
.badge-pink   { background: var(--red-tint);    color: var(--red);    border-color: var(--red); }
.badge-yellow { background: var(--ochre-tint);  color: var(--ochre);  border-color: var(--ochre); }

.ml-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--paper-vellum);
    border: 1px solid var(--paper-rule);
    padding: 3px 10px;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--red);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    background: var(--paper-vellum);
    border: 1px solid var(--paper-rule);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ─── Tabs ─────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: 0;
    background: transparent;
    padding: 0;
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--paper-rule);
    border-radius: 0;
    overflow-x: auto;
}

.tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--ink-mute);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--transition);
    white-space: nowrap;
}
.tab:hover { color: var(--ink); background: transparent; }
.tab.active {
    background: transparent;
    color: var(--red);
    border-bottom-color: var(--red);
    box-shadow: none;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ─── Code editor & output ─────────────────────────────────── */
.code-editor {
    background: var(--fig-cell);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.code-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: var(--paper-vellum);
    border-bottom: 1px solid var(--paper-rule);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
}

.code-editor-header span:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}
.code-editor-header span:first-child::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.code-editor textarea {
    width: 100%;
    min-height: 180px;
    padding: 16px 18px;
    background: transparent;
    border: none;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.65;
    resize: vertical;
    tab-size: 4;
}

.code-editor textarea:focus { outline: none; box-shadow: none; }
.code-editor textarea::selection { background: var(--ochre-tint); }

.output-panel {
    background: var(--paper-vellum);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.7;
    min-height: 80px;
    max-height: 320px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--ink);
    transition: border-color 0.3s ease;
}

.output-panel:empty::before {
    content: 'Output appears here.';
    color: var(--ink-faint);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
}

.output-line { margin-bottom: 2px; padding: 2px 0; }
.output-line.error { color: var(--red); }
.output-line.success { color: var(--green); }

.output-panel.loading {
    border-color: var(--blue);
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 6px,
        rgba(29,78,216,0.05) 6px, rgba(29,78,216,0.05) 12px
    );
}

.output-running {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-style: italic;
    font-family: var(--font-body);
}
.output-running::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--paper-rule);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Stat boxes — typeset like data labels ────────────────── */
.stat-box {
    text-align: left;
    padding: var(--space-3) var(--space-3);
    background: var(--paper);
    border: none;
    border-top: 1px solid var(--ink);
    border-radius: 0;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.stat-box::before { content: none; }
.stat-box:hover { background: var(--paper-vellum); }

.stat-value {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 96;
    font-size: 32px;
    font-weight: 400;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-feature-settings: "lnum" 1, "tnum" 1;
}
.stat-label {
    font-family: var(--font-sans);
    font-size: 10px;
    color: var(--ink-mute);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
}

/* ─── Formula — boxed equation, hairline-bordered ──────────── */
.formula {
    background: var(--paper-vellum);
    border: none;
    border-top: 1px solid var(--paper-rule);
    border-bottom: 1px solid var(--paper-rule);
    border-radius: 0;
    padding: 20px 24px;
    text-align: center;
    color: var(--ink);
    margin: var(--space-4) 0;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}
.formula::before, .formula::after { content: none; }
.formula .katex { font-size: 1.18em; color: var(--ink); }
.formula .katex .mord, .formula .katex .mop, .formula .katex .mrel,
.formula .katex .mbin, .formula .katex .mpunct, .formula .katex .mopen,
.formula .katex .mclose { color: var(--ink); }
.formula .katex .mord.text { color: var(--ink-soft); }

/* Equation number, displayed on the right margin */
.formula[data-eq]::after {
    content: "(" attr(data-eq) ")";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-faint);
    content: none;
}
.formula[data-eq] {
    padding-right: 56px;
}
.formula[data-eq]::after { content: "(" attr(data-eq) ")"; }

.formula-group {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-3) 0;
}
.formula-group .formula {
    flex: 1;
    min-width: 220px;
    margin: 0;
}

/* Inline math styling for KaTeX */
.katex { font-size: 1em; }

/* ─── Editorial callouts — info / tip / warning ────────────── */
.info-box {
    background: transparent;
    border: none;
    border-left: 3px solid var(--ink);
    border-radius: 0;
    padding: 2px 0 2px var(--space-3);
    margin: var(--space-3) 0 var(--space-4);
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--ink);
    line-height: 1.62;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
.info-box strong { color: var(--ink); font-weight: 600; }
.info-box em {
    display: block;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--paper-rule);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
}

/* Drop cap on the first paragraph of .info-box.lede */
.info-box.lede::first-letter,
.lede::first-letter {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144, "SOFT" 0;
    font-weight: 500;
    font-size: 64px;
    line-height: 0.84;
    float: left;
    padding: 6px 10px 0 0;
    color: var(--red);
    margin-top: 2px;
}

.tip-box {
    background: var(--teal-tint);
    border: none;
    border-left: 3px solid var(--teal);
    border-radius: 0;
    padding: var(--space-2) var(--space-3);
    font-size: 14px;
    color: var(--ink);
    margin: var(--space-3) 0;
    line-height: 1.6;
    font-family: var(--font-body);
}
.tip-box::before {
    content: 'Note. ';
    font-weight: 600;
    color: var(--teal);
    font-family: var(--font-display);
    font-style: italic;
}

.warning-box {
    background: var(--sienna-tint);
    border: none;
    border-left: 3px solid var(--sienna);
    border-radius: 0;
    padding: var(--space-2) var(--space-3);
    font-size: 14px;
    color: var(--ink);
    margin: var(--space-3) 0;
    line-height: 1.6;
    font-family: var(--font-body);
}
.warning-box::before {
    content: 'Caveat. ';
    font-weight: 600;
    color: var(--sienna);
    font-family: var(--font-display);
    font-style: italic;
}

/* ─── Learning objectives — table-like, minimal ────────────── */
.learning-objectives {
    background: transparent;
    border: none;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--paper-rule);
    border-radius: 0;
    padding: var(--space-3) 0;
    margin: var(--space-4) 0;
}

.learning-objectives-title {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.learning-objectives-title::before {
    content: '§';
    color: var(--red);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 400;
}

.learning-objectives ul {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: lo-counter;
}

.learning-objectives li {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    padding: 6px 0 6px 32px;
    position: relative;
    line-height: 1.55;
    counter-increment: lo-counter;
}

.learning-objectives li::before {
    content: counter(lo-counter, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 7px;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--red);
    font-feature-settings: "lnum" 1;
}

/* ─── Key concept — editorial pull-quote ───────────────────── */
.key-concept {
    background: transparent;
    border: none;
    border-left: 3px solid var(--red);
    border-radius: 0;
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "opsz" 60, "SOFT" 50;
    font-size: 22px;
    line-height: 1.34;
    color: var(--ink);
    margin: var(--space-5) 0 var(--space-3);
    position: relative;
}
.key-concept::before {
    content: 'In short';
    position: absolute;
    top: -22px;
    left: var(--space-4);
    font-family: var(--font-sans);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.22em;
}
.key-concept strong {
    color: var(--red);
    font-style: normal;
    font-weight: 600;
    font-family: var(--font-display);
}

/* ─── Tables (data tables) ────────────────────────────────── */
.table-wrapper {
    overflow-x: auto;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    margin: var(--space-3) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

th {
    background: transparent;
    padding: 10px 14px;
    text-align: left;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--ink-mute);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-bottom: 1px solid var(--ink);
}

td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--paper-rule);
    color: var(--ink);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--paper-vellum); }

/* ─── Sliders ─────────────────────────────────────────────── */
.slider-group {
    display: grid;
    grid-template-columns: 130px 1fr 58px;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding: 4px 0;
}
.slider-group label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink);
}
.slider-group input[type="range"] { width: 100%; }
.slider-group .slider-value {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--red);
    font-feature-settings: "tnum" 1;
}

/* ─── Progress bars ───────────────────────────────────────── */
.progress-bar {
    height: 3px;
    background: var(--paper-rule);
    border-radius: 0;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: var(--ink);
    border-radius: 0;
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

/* ─── Inline pieces ───────────────────────────────────────── */
.code-inline {
    font-family: var(--font-mono);
    font-size: 0.88em;
    padding: 1px 6px;
    background: var(--paper-vellum);
    border: 1px solid var(--paper-rule);
    border-radius: 2px;
    color: var(--ink);
}

.python-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--blue-tint);
    border: 1px solid var(--blue);
    padding: 2px 9px;
    border-radius: 2px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.keyboard-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ink-mute);
    font-family: var(--font-sans);
}
.keyboard-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: var(--paper);
    border: 1px solid var(--paper-rule);
    border-bottom-width: 2px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
}

.divider {
    height: 1px;
    background: var(--paper-rule);
    margin: var(--space-4) 0;
    border: none;
}

/* Decorative section break — printer's ornament */
.section-break {
    text-align: center;
    margin: var(--space-6) 0;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--ink-faint);
    letter-spacing: 1em;
    line-height: 1;
}
.section-break::before { content: '⁂'; }

/* ─── Navigation footer (prev/next) ──────────────────────── */
.nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: 1px solid var(--ink);
    font-family: var(--font-sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.nav-footer a {
    text-decoration: none;
    border: none;
    color: var(--ink-soft);
    padding: 0;
    background: transparent !important;
    font-weight: 600;
}
.nav-footer a:hover { color: var(--red); border: none; }

/* The footer's third slot, injected by js/plate-nav.js — never written into a
   plate. Quieter than the two arrows it sits between: reporting an error is
   available, not invited. */
.nav-footer .nav-report {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    order: 1;
}
.nav-footer [data-nav-next] { order: 2; }
.nav-footer .nav-report:hover { color: var(--red); }
@media (max-width: 640px) {
    /* Two arrows and a link do not fit one line on a phone; the report link
       drops below them rather than squeezing the neighbours' names. */
    .nav-footer { flex-wrap: wrap; row-gap: 10px; }
    .nav-footer .nav-report { order: 3; width: 100%; text-align: center; }
}
.nav-footer .btn,
.nav-footer .btn-secondary {
    background: transparent;
    border: none;
    padding: 8px 0;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    box-shadow: none;
}
.nav-footer .btn:hover { color: var(--red); background: transparent; }

/* ─── Editorial primitives (new) ─────────────────────────── */

/* Figure — wraps a canvas/image with a caption */
.figure {
    margin: var(--space-4) 0;
    counter-increment: figure-counter;
}
.figure > canvas,
.figure > img,
.figure > svg {
    display: block;
    width: 100%;
    height: auto;
    background: var(--fig-paper);
    border: 1px solid var(--paper-rule);
}
.figure-caption {
    margin-top: 8px;
    padding-left: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
    font-style: italic;
}
.figure-caption::before {
    content: 'Fig. ' counter(figure-counter) '. ';
    font-style: normal;
    font-weight: 600;
    color: var(--red);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 4px;
}

body { counter-reset: figure-counter; }

/* Sidenote / marginalia — floats right on wide screens,
   collapses inline on narrow. */
.sidenote, .marginalia {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: var(--space-2) 0;
    padding: 6px 14px;
    border-left: 2px solid var(--red);
    background: rgba(184,49,47,0.03);
}
.marginalia { font-style: italic; }
@media (min-width: 980px) {
    .main-content > .sidenote-right,
    .main-content > .marginalia-right {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.45;
        color: var(--ink-soft);
        background: transparent;
        border-left: 2px solid var(--red);
        padding: 2px 0 2px 12px;
    }
}

/* Article lede / running text */
.prose {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.62;
    color: var(--ink);
}
.prose p + p { text-indent: 1.4em; margin-top: 0; }
.prose p { margin-bottom: var(--space-2); }

/* Pullquote */
.pullquote {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 60;
    font-size: 26px;
    line-height: 1.3;
    color: var(--ink);
    margin: var(--space-5) 0;
    padding: 0 var(--space-4);
    text-align: center;
    font-weight: 400;
    font-style: italic;
}
.pullquote::before { content: '“'; color: var(--red); margin-right: 4px; }
.pullquote::after  { content: '”'; color: var(--red); margin-left: 4px; }

/* Definition list — for terminology */
dl.terms {
    margin: var(--space-3) 0;
    border-top: 1px solid var(--paper-rule);
}
dl.terms dt {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--ink);
    padding: var(--space-2) 0 2px;
}
dl.terms dd {
    font-size: 15px;
    color: var(--ink-soft);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--paper-rule);
    line-height: 1.55;
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .main-content { padding: var(--space-4) var(--space-3); }
    .topbar { padding: 14px 18px; }
    .card { padding: var(--space-3); }
    body { font-size: 16px; }
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    .slider-group { grid-template-columns: 1fr; gap: 4px; }
    .slider-group label { font-size: 14px; }
}

/* ─── Scrollbar (subtle, on paper) ────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--paper-rule); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ─── Motion ─────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.45s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes slideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp 0.5s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.pulse { animation: pulse 2.4s ease-in-out infinite; }

@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, var(--paper-vellum) 25%, var(--paper-deep) 50%, var(--paper-vellum) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.glow { box-shadow: var(--shadow-sm); }

/* Page-load staggered reveal */
.main-content > * { animation: fadeIn 0.6s cubic-bezier(.4,0,.2,1) backwards; }
.main-content > *:nth-child(1) { animation-delay: 0.04s; }
.main-content > *:nth-child(2) { animation-delay: 0.10s; }
.main-content > *:nth-child(3) { animation-delay: 0.16s; }
.main-content > *:nth-child(4) { animation-delay: 0.22s; }
.main-content > *:nth-child(5) { animation-delay: 0.28s; }
.main-content > *:nth-child(6) { animation-delay: 0.34s; }
.main-content > *:nth-child(7) { animation-delay: 0.40s; }
.main-content > *:nth-child(8) { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .main-content > * { animation: none; }
}

/* ─── Quiz engine — editorial worksheet ────────────────────── */
.quiz-container {
    background: var(--paper-vellum);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-4);
}

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--paper-rule);
}

.quiz-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-style: italic;
}
.quiz-title::before {
    content: '¶';
    color: var(--red);
    font-style: normal;
    font-size: 18px;
}

.quiz-progress-bar {
    width: 100%;
    height: 2px;
    background: var(--paper-rule);
    border-radius: 0;
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.quiz-progress-fill {
    height: 100%;
    background: var(--red);
    border-radius: 0;
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
}

.quiz-score {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    font-feature-settings: "tnum" 1;
}

.quiz-question {
    background: var(--paper);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    transition: var(--transition);
}
.quiz-question.correct {
    border-color: var(--green);
    background: var(--green-tint);
}
.quiz-question.incorrect {
    border-color: var(--red);
    background: var(--red-tint);
}

.quiz-question-number {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    margin-bottom: var(--space-1);
}

.quiz-question-text {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: var(--space-2);
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.quiz-code {
    background: var(--fig-cell);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    margin-bottom: var(--space-2);
    white-space: pre-wrap;
    line-height: 1.5;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    background: var(--paper);
    border: 1px solid var(--paper-rule);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
    font-size: 15px;
    text-align: left;
    color: var(--ink);
}
.quiz-option:hover:not(.disabled) {
    border-color: var(--ink);
    background: var(--paper-vellum);
}
.quiz-option.selected {
    border-color: var(--blue);
    background: var(--blue-tint);
}
.quiz-option.correct-answer {
    border-color: var(--green);
    background: var(--green-tint);
    color: var(--ink);
}
.quiz-option.wrong-answer {
    border-color: var(--red);
    background: var(--red-tint);
    color: var(--ink);
}
.quiz-option.disabled { cursor: default; opacity: 0.85; }
.quiz-option.disabled.correct-answer { opacity: 1; }

.quiz-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--paper-rule);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: var(--transition);
}
.quiz-option:hover:not(.disabled) .quiz-option-letter {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.quiz-option.correct-answer .quiz-option-letter { background: var(--green); color: var(--paper); border-color: var(--green); }
.quiz-option.wrong-answer   .quiz-option-letter { background: var(--red);   color: var(--paper); border-color: var(--red); }

.quiz-option-text {
    flex: 1;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    color: var(--ink);
}

.quiz-explanation {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-left: 2px solid var(--red);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 14px;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.55;
    display: none;
}
.quiz-question.answered .quiz-explanation { display: block; }

.quiz-results {
    text-align: center;
    padding: var(--space-5) var(--space-3);
    display: none;
}
.quiz-results.visible { display: block; }

.quiz-results-score {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-size: 72px;
    font-weight: 400;
    color: var(--red);
    margin-bottom: 6px;
    line-height: 1;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: var(--red);
    background-clip: initial;
}

.quiz-results-label {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-3);
}

.quiz-results-message {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.quiz-btn-retry {
    display: inline-block;
    padding: 10px 22px;
    background: var(--ink);
    color: var(--paper);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: var(--transition);
}
.quiz-btn-retry:hover {
    background: var(--red);
    color: var(--paper);
    transform: none;
    box-shadow: var(--shadow-sm);
}


/* ==========================================================================
   PLATE PRIMITIVES
   --------------------------------------------------------------------------
   Shared editorial furniture for the plates under <category>/<app-id>/.
   Every one of these rules used to be copy-pasted into the inline <style> of
   hundreds of plates; they live here so a change lands everywhere at once.

   This block sits at the END of the file deliberately: it occupies the cascade
   slot the inline copies used to hold. A plate that genuinely needs to differ
   still overrides it from its own <style>, which the browser applies later.
   ========================================================================== */

/* --- Plate header — meta strip, display title, deck --- */
.plate-meta {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-bottom:8px;
    border-bottom:1px solid var(--paper-rule);
    margin-bottom:18px;
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--ink-mute);
}
.plate-meta b {
    color:var(--red);
    font-weight:700;
    margin-right:4px;
}
h1.plate-title {
    font-family:var(--font-display);
    font-variation-settings:"opsz" 144,"SOFT" 0;
    font-size:56px;
    font-weight:400;
    line-height:1.02;
    letter-spacing:-0.022em;
    margin:8px 0 4px;
}
h1.plate-title em {
    color:var(--red);
    font-variation-settings:"opsz" 144,"SOFT" 100;
}
.plate-deck {
    font-family:var(--font-display);
    font-style:italic;
    font-variation-settings:"opsz" 60;
    font-size:19px;
    line-height:1.4;
    color:var(--ink-soft);
    max-width:56ch;
    margin-bottom:32px;
}

/* --- Workshop — two-column rail + figure --- */
.workshop {
    display:grid;
    grid-template-columns:240px 1fr;
    gap:36px;
    align-items:start;
    margin:24px 0 12px;
}
.workshop-rail .rail-section {
    border-top:1px solid var(--ink);
    padding:14px 0 18px;
}
.workshop-rail .rail-section:first-child {
    border-top-color:var(--paper-rule);
    padding-top:8px;
}
.workshop-rail .rail-label {
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--ink-mute);
    margin-bottom:8px;
}

/* --- Rail readouts --- */
.rail-stat {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
    padding:5px 0;
    border-bottom:1px dotted var(--paper-rule);
}
.rail-stat:last-child {
    border-bottom:none;
}
.rail-stat-label {
    font-family:var(--font-display);
    font-style:italic;
    font-size:14px;
    color:var(--ink-soft);
}
.rail-stat-value {
    font-family:var(--font-mono);
    font-size:14px;
    font-feature-settings:"tnum" 1;
    color:var(--ink);
}
.rail-stat .accent {
    color:var(--red);
}

/* --- Rail controls — sliders, steppers, toggles --- */
.slider-block {
    margin-bottom:8px;
}
.slider-block label {
    display:flex;
    justify-content:space-between;
    font-family:var(--font-display);
    font-style:italic;
    font-size:14px;
    color:var(--ink-soft);
    margin-bottom:4px;
}
.slider-block label .v {
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--ink);
}
.slider-block input[type=range] {
    width:100%;
}
.step-btns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-top:8px;
}
.step-btns button {
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.16em;
    border:1px solid var(--ink);
    background:var(--paper);
    color:var(--ink);
    padding:8px;
    cursor:pointer;
    width:100%;
}
.step-btns button:hover {
    background:var(--red);
    color:var(--paper);
    border-color:var(--red);
}
.toggle-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}
.toggle-row button {
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:500;
    border:1px solid var(--paper-rule);
    background:var(--paper);
    color:var(--ink-soft);
    padding:8px 4px;
    cursor:pointer;
}
.toggle-row button:hover {
    color:var(--red);
    border-color:var(--red);
}
.toggle-row button.active {
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
}

/* --- Control variants ---
   Two alternative layouts were each copy-pasted, byte-identical, into dozens of
   plates' inline <style>. They are one design decision apiece, so they live
   here as opt-in classes: a plate writes the class rather than the rule.
   The defaults above are still what most plates want; these are the exceptions
   that recur often enough to deserve a name. */

/* Stepper as a vertical stack — for rails too narrow for a 2-up grid, or where
   the buttons carry long labels ("Step forward" rather than "Step"). */
.step-btns.stacked {
    display:flex;
    flex-direction:column;
}

/* Toggles as an inline row of italic display-face labels rather than a fixed
   2-up grid of mono ones. Reads as a caption strip under a figure; add .wrap
   when there are more toggles than fit on one line. */
.toggle-row.inline {
    display:flex;
}
.toggle-row.inline.wrap {
    flex-wrap:wrap;
}
.toggle-row.inline button {
    flex:1;
    font-family:var(--font-display);
    font-style:italic;
    font-size:13px;
    background:transparent;
    padding:7px;
}

/* --- Figure — canvas plate and its control strip --- */
.figure-canvas {
    position:relative;
    background:var(--fig-paper);
    border:1px solid var(--paper-rule);
    padding:22px 22px 14px;
    margin:8px 0 14px;
}
.figure-canvas canvas {
    display:block;
    width:100%;
    cursor:crosshair;
    background:transparent;
    border:none;
    box-shadow:none;
}
.figure-controls {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-top:12px;
    margin-top:10px;
    border-top:1px solid var(--paper-rule);
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.16em;
    color:var(--ink-mute);
}
.figure-controls button {
    background:transparent;
    border:none;
    color:var(--ink-soft);
    font:inherit;
    cursor:pointer;
    padding:4px 8px;
    border-bottom:1px solid transparent;
}
.figure-controls button:hover {
    color:var(--red);
    border-bottom-color:var(--red);
}

/* --- Code plate — Skulpt editor and output --- */
.code-plate {
    background:var(--fig-paper);
    border:1px solid var(--paper-rule);
    padding:0;
    margin:8px 0 4px;
}
.code-plate-head {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:10px 18px;
    border-bottom:1px solid var(--paper-rule);
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--ink-mute);
}
.code-plate-head em {
    font-family:var(--font-display);
    font-style:italic;
    text-transform:none;
    letter-spacing:0;
    color:var(--ink-soft);
}
.code-plate textarea {
    width:100%;
    min-height:170px;
    background:var(--fig-paper);
    border:none;
    padding:14px 18px;
    font-family:var(--font-mono);
    font-size:13px;
    line-height:1.55;
    color:var(--ink);
    outline:none;
    resize:vertical;
    tab-size:4;
    -moz-tab-size:4;
}
.code-plate .out-rule {
    border-top:1px solid var(--paper-rule);
    padding:10px 18px;
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--ink-mute);
}
.code-plate .out-pre {
    font-family:var(--font-mono);
    font-size:13px;
    padding:6px 18px 14px;
    white-space:pre-wrap;
    color:var(--ink);
    min-height:30px;
}
.code-plate .out-pre.empty {
    color:var(--ink-faint);
    font-style:italic;
}
.run-btn {
    width:100%;
    font-family:var(--font-sans);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.16em;
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    padding:10px;
    cursor:pointer;
    margin-top:6px;
}
.run-btn:hover {
    background:var(--red);
    border-color:var(--red);
}

/* --- Narrow viewports: collapse the workshop to one column --- */
@media (max-width:760px) {
    .workshop {
        grid-template-columns:1fr;
        gap:18px;
    }
}

/* --- Compact viewports -----------------------------------------------------
   The plates are typeset for a wide column: a 56px display title, a 240px
   workshop rail beside a figure, and readout strips of four cells. None of that
   survives a phone, so below 760px the plate becomes a single column and the
   display type is scaled back to something readable at arm's length.

   Wide, indivisible content (readout strips, code panels) scrolls inside its
   own box rather than forcing the whole page sideways.
   --------------------------------------------------------------------------- */
@media (max-width: 760px) {
    h1.plate-title { font-size: 34px; letter-spacing: -0.015em; }
    .plate-deck { font-size: 17px; margin-bottom: 22px; }
    .plate-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        letter-spacing: 0.14em;
    }

    .figure-canvas { padding: 14px 14px 10px; }
    .figure-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        letter-spacing: 0.12em;
    }

    /* Readouts: let them wrap to two columns instead of squeezing to four. */
    .figure-readout { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
    .readout-cell:nth-child(2n) { border-right: none; padding-right: 0; }
    .readout-cell:nth-child(2n+1) { padding-left: 0; }

    /* Anything that genuinely cannot reflow scrolls in place. */
    .code-plate textarea, .code-plate .out-pre { font-size: 12px; }
    table { display: block; overflow-x: auto; max-width: 100%; }

    /* Comfortable tap targets. */
    .step-btns button, .toggle-row button, .run-btn { padding: 11px 8px; }
    .slider-block input[type=range] { height: 26px; }
}