/* talk.css · the talk theme: colours, type, the slide box on the stage, rise animation, kicker, title, subtitle, gold-ring bullets, chips, cards, code, figures, LIVE badges, prompt box. A deck links this and keeps only its own overrides. */
:root {
        color-scheme: dark;
        --void: #070A12;
        --bg1: #0a1426;
        --panel: rgba(255, 255, 255, 0.035);
        --line: rgba(139, 153, 181, 0.16);
        --ink: #D7E1F0;
        --mut: #8B99B5;
        --faint: #5b6c85;
        --cyan: #5CD6EC;
        --cyan-soft: rgba(92, 214, 236, 0.12);
        --gold: #F2C46B;
        --gold-soft: rgba(242, 196, 107, 0.10);
        --red: #E06C75;
        --green: #7EC699;
        --green-soft: rgba(126, 198, 153, 0.12);
        --sans: "Avenir Next", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
        --mono: "SF Mono", "Cascadia Code", Menlo, Consolas, ui-monospace, monospace;
    }
/* Rules paint with these variables, so a theme (html-tools theme.js) reaches them. A translucent tint is
   color-mix(in srgb, var(--x) P%, transparent) with P = n / 255: Chrome rounds a legacy rgba() alpha to 8 bits,
   so 45.098% paints the pixels rgba(…, 0.45) painted. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
        background: radial-gradient(ellipse 90% 70% at 70% -10%, var(--bg1), var(--void) 60%);
        color: var(--ink);
        font-family: var(--sans);
        overflow: hidden;
    }
.slide {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: calc(6 * var(--sh) / 100) calc((calc(100 * var(--sw) / 100) - min(calc(88 * var(--sw) / 100), 72rem)) / 2) calc(10 * var(--sh) / 100);
        opacity: 0;
        visibility: hidden;
        transform: translateX(4%) scale(0.985);
        transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.5s;
    }
.slide.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; z-index: 2; }
.rise { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.12s + var(--i, 0) * 0.09s); }
.slide.active .rise { opacity: 1; transform: none; }
h1 { font-weight: 800; font-size: clamp(34px, calc(4.6 * var(--sw) / 100), 66px); letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-weight: 800; font-size: clamp(26px, calc(3.2 * var(--sw) / 100), 44px); letter-spacing: -0.015em; margin-bottom: calc(3 * var(--sh) / 100); text-wrap: balance; }
.kicker {
        font-family: var(--mono);
        font-size: clamp(14px, calc(1.3 * var(--sw) / 100), 18px);
        font-weight: 600;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: calc(1.6 * var(--sh) / 100);
    }
p.body { font-size: clamp(18px, calc(1.7 * var(--sw) / 100), 26px); color: var(--mut); max-width: calc(62 * var(--sw) / 100); line-height: 1.5; text-wrap: pretty; }
p.body strong { color: var(--ink); }
.foot-note { color: var(--faint); font-size: clamp(16px, calc(1.5 * var(--sw) / 100), 22px); margin-top: calc(2.4 * var(--sh) / 100); max-width: calc(70 * var(--sw) / 100); text-wrap: pretty; }
.foot-note a { text-decoration: none; }
ul { list-style: none; max-width: calc(60 * var(--sw) / 100); }
li a { overflow-wrap: anywhere; }
li {
        color: var(--mut);
        font-size: clamp(18px, calc(1.7 * var(--sw) / 100), 26px);
        line-height: 1.5;
        padding: calc(0.85 * var(--sh) / 100) 0 calc(0.85 * var(--sh) / 100) 1.6em;
        position: relative;
        text-wrap: pretty;
    }
li strong { color: var(--ink); }
li::before { content: ''; position: absolute; left: 0.1em; top: calc(calc(0.85 * var(--sh) / 100) + 0.36em); width: 0.5em; height: 0.5em; box-sizing: border-box; border: 2px solid var(--gold); border-radius: 50%; }
.chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6em; margin-top: calc(2 * var(--sh) / 100); }
.chip {
        display: inline-block;
        background: var(--cyan-soft);
        border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
        color: var(--cyan);
        border-radius: 999px;
        padding: 0.5em 1.05em;
        font-size: clamp(16px, calc(1.5 * var(--sw) / 100), 22px);
        font-weight: 600;
        letter-spacing: 0.03em;
    }
.chip.gold { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 45.098%, transparent); color: var(--gold); }
.chip.green { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 45.098%, transparent); color: var(--green); }
.row { display: flex; gap: calc(1.4 * var(--sw) / 100); align-items: stretch; }
.col { display: flex; flex-direction: column; gap: calc(1.4 * var(--sh) / 100); }
.card {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: calc(2.2 * var(--sh) / 100) calc(1.5 * var(--sw) / 100);
        flex: 1;
    }
.card.hl { border-color: color-mix(in srgb, var(--gold) 45.098%, transparent); background: var(--gold-soft); }
a.card { display: block; text-decoration: none; cursor: pointer; transition: border-color 150ms; }
a.card:hover { border-color: var(--cyan); }
.slide.dense .card { padding: calc(1.2 * var(--sh) / 100) calc(1.2 * var(--sw) / 100); }
.slide.dense .lbl { margin-bottom: calc(0.4 * var(--sh) / 100); font-size: clamp(18px, calc(1.7 * var(--sw) / 100), 23px); }
.slide.dense .note { margin-top: calc(0.4 * var(--sh) / 100); font-size: clamp(14px, calc(1.35 * var(--sw) / 100), 19px); }
.slide.dense li { padding-top: calc(0.55 * var(--sh) / 100); padding-bottom: calc(0.55 * var(--sh) / 100); }
.slide.dense .foot-note { margin-top: calc(1.2 * var(--sh) / 100); }
.slide.figure h2 { margin-bottom: calc(1.6 * var(--sh) / 100); }
.slide.figure .diagram-frame { width: calc(74 * var(--sw) / 100); max-width: none; margin-left: calc((100% - calc(74 * var(--sw) / 100)) / 2); }
.slide.figure ul { max-width: none; }
.slide.figure li { font-size: clamp(16px, calc(1.5 * var(--sw) / 100), 22px); line-height: 1.45; padding-top: calc(0.45 * var(--sh) / 100); padding-bottom: calc(0.45 * var(--sh) / 100); }
.slide.figure .chips { margin-top: calc(1.2 * var(--sh) / 100); gap: 0.45em; }
.slide.figure .chip { font-size: clamp(15px, calc(1.35 * var(--sw) / 100), 19px); padding: 0.45em 1em; }
.slide.figure > .diagram + ul, .slide.figure > .diagram + .row, .slide.figure > .diagram + .chips, .slide.figure > .diagram + .foot-note { margin-top: calc(1.6 * var(--sh) / 100); }
.slide.figure .card { padding: calc(1.2 * var(--sh) / 100) calc(1.2 * var(--sw) / 100); }
.slide.figure .lbl { font-size: clamp(18px, calc(1.7 * var(--sw) / 100), 23px); margin-bottom: calc(0.4 * var(--sh) / 100); }
.slide.figure .note { font-size: clamp(14px, calc(1.35 * var(--sw) / 100), 19px); margin-top: calc(0.4 * var(--sh) / 100); line-height: 1.4; }
.slide.figure .foot-note { margin-top: calc(1.2 * var(--sh) / 100); max-width: none; }
.slide.figure .row { gap: calc(1 * var(--sw) / 100); }
.slide.figure .row > .diagram-frame { width: auto; max-width: none; margin-left: 0; height: auto; align-self: stretch; flex: 2; }
.slide.figure p.body { max-width: none; }
.slide.figure .keyline { margin: calc(1.4 * var(--sh) / 100) 0; }
.slide.fullbleed { padding: 0; }
.slide.fullbleed .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.slide.fullbleed .diagram-frame { position: absolute; inset: 0; width: calc(100 * var(--sw) / 100); max-width: none; height: calc(100 * var(--sh) / 100); }
.lbl { font-family: var(--mono); font-size: clamp(20px, calc(1.9 * var(--sw) / 100), 26px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: calc(1 * var(--sh) / 100); }
.note { font-size: clamp(16px, calc(1.5 * var(--sw) / 100), 22px); color: var(--mut); margin-top: calc(0.7 * var(--sh) / 100); line-height: 1.45; text-wrap: pretty; }
.note strong { color: var(--ink); }
.bignum { font-family: var(--mono); font-size: clamp(30px, calc(3.6 * var(--sw) / 100), 56px); font-weight: 800; letter-spacing: -0.01em; color: var(--cyan); }
a.live {
        font-family: var(--mono);
        font-size: clamp(12px, calc(1.1 * var(--sw) / 100), 15px);
        letter-spacing: 0.12em;
        color: var(--void);
        background: var(--gold);
        padding: 0.4em 0.9em;
        border-radius: 4px;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        margin-bottom: calc(1.4 * var(--sh) / 100);
    }
a.live:hover { filter: brightness(1.12); }
a.live[hidden] { display: none; }
.code {
        font-family: var(--mono);
        font-size: clamp(17px, calc(1.6 * var(--sw) / 100), 24px);
        text-align: left;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: calc(2.2 * var(--sh) / 100) calc(1.8 * var(--sw) / 100);
        line-height: 1.6;
        color: var(--ink);
        white-space: pre;
        overflow-x: auto;
        max-width: calc(68 * var(--sw) / 100);
    }
.code .k { color: var(--cyan); }
li code, p code, .concept code { font-family: var(--mono); font-size: 0.86em; color: var(--cyan); background: color-mix(in srgb, var(--cyan) 7.8431%, transparent); padding: 0 0.3em; border-radius: 4px; }
.code .c { color: var(--faint); }
.diagram-frame { position: relative; }
.diagram-frame .gfx { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
.promptbox {
        font-family: var(--mono);
        font-size: clamp(16px, calc(1.5 * var(--sw) / 100), 21px);
        line-height: 1.35;
        display: flex;
        align-items: center;
        gap: 0.6em;
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: calc(2 * var(--sh) / 100) calc(1.6 * var(--sw) / 100);
        max-width: calc(68 * var(--sw) / 100);
        max-height: calc(46 * var(--sh) / 100);
        overflow-y: auto;
        line-height: 1.55;
        color: var(--mut);
        white-space: pre-wrap;
    }
.prompt-final {
        font-family: var(--mono);
        font-size: clamp(16px, calc(1.6 * var(--sw) / 100), 24px);
        color: var(--cyan);
        margin-top: calc(1.6 * var(--sh) / 100);
    }
.promptbox .hl { color: var(--ink); }
.promptbox .final { color: var(--cyan); }
.shots { display: flex; gap: calc(1.2 * var(--sw) / 100); align-items: flex-start; }
.shots figure { flex: 1; max-width: calc(24 * var(--sw) / 100); }
.shots a { display: block; }
.shots img { width: 100%; max-height: calc(26 * var(--sh) / 100); object-fit: cover; object-position: top center; border: 1px solid var(--line); border-radius: 10px; display: block; transition: border-color 150ms; }
.shots a:hover img { border-color: var(--cyan); }
.shots figcaption { font-family: var(--mono); font-size: clamp(14px, calc(1.25 * var(--sw) / 100), 18px); color: var(--faint); margin-top: calc(0.6 * var(--sh) / 100); }
.shots.uniform img { height: calc(20 * var(--sh) / 100); object-fit: cover; object-position: center; }
.shots.compact img { height: calc(14 * var(--sh) / 100); }
.diagram { max-width: calc(70 * var(--sw) / 100); }
.diagram svg { width: 100%; height: auto; display: block; }
.bookend { display: none; grid-template-columns: 1fr 1fr; gap: calc(1 * var(--sw) / 100); }
.bookend figure { margin: 0; }
.tagline { font-family: var(--mono); font-size: clamp(14px, calc(1.25 * var(--sw) / 100), 18px); color: var(--faint); margin-top: calc(0.5 * var(--sh) / 100); text-align: center; }
.tag { font-family: var(--mono); font-size: clamp(14px, calc(1.2 * var(--sw) / 100), 17px); color: var(--faint); }
a.live + .tag { margin-left: 0.8em; }
.concept {
        font-size: clamp(22px, calc(2.3 * var(--sw) / 100), 34px);
        color: var(--ink);
        max-width: calc(62 * var(--sw) / 100);
        line-height: 1.5;
        text-wrap: balance;
    }
/* one vertical rhythm between a slide's major blocks */
    .slide > :is(.code, .chips, .shots, .row, .promptbox, .diagram, .bookend, ul, .concept)
        + :is(.code, .chips, .shots, .row, .promptbox, .diagram, .bookend, ul, .concept) {
        margin-top: calc(2.6 * var(--sh) / 100);
    }
.slide > p:has(> a.live) { margin-bottom: calc(0.6 * var(--sh) / 100); }
/* the settings cog */
    #cog {
        position: fixed;
        top: calc(2.2 * var(--sh) / 100);
        right: calc(2 * var(--sw) / 100);
        z-index: 60;
        width: 2.4em;
        height: 2.4em;
        font-size: clamp(13px, calc(1.15 * var(--sw) / 100), 17px);
        line-height: 1;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--panel);
        color: var(--mut);
        cursor: pointer;
        opacity: 0.35;
        transition: opacity 150ms, color 150ms, border-color 150ms;
    }
body:has(.appframe.open) #cog { opacity: 0; pointer-events: none; }
/* the simulation badge, visible to the room */
    .simbadge {
        font-family: var(--mono);
        font-size: clamp(11px, calc(0.95 * var(--sw) / 100), 14px);
        letter-spacing: 0.18em;
        color: var(--void);
        background: var(--red);
        border-radius: 4px;
        padding: 0.32em 0.6em;
        margin-left: 0.6em;
        vertical-align: 0.12em;
    }
/* the inline file and command viewer */
    #viewer {
        position: fixed;
        inset: 0;
        z-index: 70;
        display: none;
        align-items: center;
        justify-content: center;
        padding: calc(5 * var(--sh) / 100) calc(4 * var(--sw) / 100);
        background: rgba(3, 6, 14, 0.86);
        backdrop-filter: blur(6px);
    }
body:has(.appframe.open) #hud, body:has(.appframe.open) #partchip, body:has(.appframe.open) #rail { opacity: 0; pointer-events: none; }
body:has(.appframe.open) #democlose { display: block; }
.ctx-fill { width: 0; transition: width 0.8s ease 0.25s; }
.slide.active .ctx-fill { width: var(--w); }
.poll { display: flex; flex-direction: column; gap: calc(0.6 * var(--sh) / 100); width: calc(34 * var(--sw) / 100); min-width: 20rem; }
.poll button {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 1rem;
        font: inherit;
        font-size: clamp(14px, calc(1.4 * var(--sw) / 100), 20px);
        color: var(--ink);
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: calc(1.1 * var(--sh) / 100) calc(1 * var(--sw) / 100);
        cursor: pointer;
        position: relative;
        text-align: left;
    }
.poll button .bar { position: absolute; inset: 0 auto 0 0; background: var(--cyan-soft); border-radius: 10px; width: 0; transition: width 200ms ease-out; }
.poll button .label, .poll button .count { position: relative; }
.poll button .count { font-family: var(--mono); color: var(--cyan); }
.poll button .net { font-family: var(--mono); font-size: 0.72em; color: var(--gold); margin-left: 0.5em; }
#timer { font-family: var(--mono); font-size: clamp(13px, calc(1.2 * var(--sw) / 100), 17px); color: var(--gold); display: none; margin-left: 1em; }
#timer.on { display: inline; }
.qr {
        width: calc(16 * var(--sw) / 100);
        min-width: 12rem;
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dashed var(--gold);
        border-radius: 10px;
        padding: 0.5rem;
        font-family: var(--mono);
        font-size: clamp(10px, calc(0.9 * var(--sw) / 100), 13px);
        color: var(--faint);
        text-align: center;
    }
.qr img { width: 100%; display: block; }
.qr img[hidden] { display: none; }
.qr .qr-missing { display: none; font-size: clamp(18px, calc(1.8 * var(--sw) / 100), 26px); font-weight: 800; color: var(--red); padding: calc(3 * var(--sh) / 100) 0; letter-spacing: 0.06em; }
.qr img[hidden] + .qr-missing { display: block; }
.glitch { position: relative; }
.glitch::after {
        content: '';
        position: absolute;
        left: -0.5vw;
        right: 30%;
        top: 55%;
        height: 3px;
        background: var(--red);
        opacity: 0.55;
        transform: skewX(-20deg);
    }
.part { align-items: flex-start; }
.part .art { width: min(calc(38 * var(--sw) / 100), 27rem); margin-bottom: calc(3 * var(--sh) / 100); }
.part .art svg { width: 100%; height: auto; display: block; }
.part h1 { font-size: clamp(44px, calc(6 * var(--sw) / 100), 88px); }
.keyline { width: calc(22 * var(--sw) / 100); height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: calc(2.4 * var(--sh) / 100) 0; }
.chat { display: flex; flex-direction: column; gap: calc(1.2 * var(--sh) / 100); width: min(calc(62 * var(--sw) / 100), 46rem); }
.bubble { max-width: 78%; padding: calc(1.2 * var(--sh) / 100) calc(1.2 * var(--sw) / 100); border-radius: 16px; font-size: clamp(18px, calc(1.7 * var(--sw) / 100), 24px); line-height: 1.45; text-align: left; text-wrap: pretty; }
.bubble.user { align-self: flex-end; background: rgba(255, 255, 255, 0.09); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: transparent; color: var(--mut); padding-left: 0; }
.termline {
        font-family: var(--mono);
        font-size: clamp(20px, calc(2.4 * var(--sw) / 100), 36px);
        color: var(--ink);
        text-align: left;
    }
.prompt-glyph { color: var(--green); margin-right: 0.6em; }
.cursor {
        display: inline-block;
        width: 0.55em;
        height: 1.15em;
        background: var(--ink);
        margin-left: 0.15em;
        vertical-align: text-bottom;
        animation: blink 1.05s steps(1) infinite;
    }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
        .cursor { animation: none; }
    }
@media (prefers-reduced-motion: reduce) {
        .slide, .rise, .poll button .bar, #rail { transition: none; }
    }
/* stage: slides fill the fixed-aspect box published by runtime/stage.js */
    html, body { background: var(--void, #070A12); }
.slide { inset: auto; left: var(--sx, 0px); top: var(--sy, 0px); width: var(--sw, 100vw); height: var(--sh, 100vh); }