body {
    --mono: "Consolas", "Courier New", monospace;
    --serif: "Iowan Old Style", Georgia, "Times New Roman", serif;
    --sans: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 20%),
        linear-gradient(180deg, #0d1114 0%, #090c0f 100%);
}

.audience-page {
    display: grid;
    gap: var(--space-3);
    min-height: 100vh;
    padding: var(--space-3);
}

.deck-caption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    transition:
        opacity 180ms var(--ease-out),
        transform 180ms var(--ease-out);
}

.caption-main,
.caption-tools {
    display: grid;
    gap: var(--space-2);
}

.caption-tools {
    justify-items: end;
}

.deck-eyebrow {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.deck-meta,
.cards-deck,
.compare-deck,
.context-rail,
.prompt-deck {
    margin: 0;
    padding: 0;
    list-style: none;
}

.deck-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.deck-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.deck-status {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: right;
}

.caption-actions,
.floating-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.caption-actions button,
.floating-actions button {
    appearance: none;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.caption-actions button:hover,
.floating-actions button:hover {
    color: rgba(255, 255, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.22);
}

.floating-actions {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10;
}

.stage {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: calc(100vh - 136px);
    padding: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 24%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 84px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 26%),
        color-mix(in srgb, var(--bg-subtle) 92%, black 8%);
}

.slide-scale-shell {
    position: relative;
    width: var(--shell-render-width, 1400px);
    height: var(--shell-render-height, 900px);
}

.slide-shell {
    position: absolute;
    inset: 0 auto auto 0;
    width: var(--shell-width, 1400px);
    height: var(--shell-height, 900px);
    overflow: hidden;
    border-radius: 34px;
    transform: scale(var(--slide-scale, 1));
    transform-origin: top left;
    color: var(--slide-ink, #f3efe7);
    background: var(--slide-bg, linear-gradient(180deg, #211913 0%, #18120e 100%));
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.36);
    transition:
        background 240ms var(--ease-out),
        box-shadow 240ms var(--ease-out);
}

.slide-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.slide-shell[data-palette="copper"] {
    --slide-bg:
        radial-gradient(circle at 12% 16%, rgba(255, 216, 168, 0.12), transparent 22%),
        linear-gradient(180deg, #211710 0%, #17100c 100%);
    --panel-bg: rgba(255, 246, 236, 0.06);
    --panel-border: rgba(255, 226, 190, 0.18);
    --slide-accent: #f0b56a;
}

.slide-shell[data-palette="indigo"] {
    --slide-bg:
        radial-gradient(circle at 86% 14%, rgba(150, 167, 255, 0.16), transparent 22%),
        linear-gradient(180deg, #111726 0%, #0d1019 100%);
    --panel-bg: rgba(232, 239, 255, 0.05);
    --panel-border: rgba(158, 180, 255, 0.18);
    --slide-accent: #8ea2ff;
}

.slide-shell[data-palette="olive"] {
    --slide-bg:
        radial-gradient(circle at 16% 82%, rgba(186, 214, 135, 0.12), transparent 22%),
        linear-gradient(180deg, #161a13 0%, #10130f 100%);
    --panel-bg: rgba(245, 250, 238, 0.05);
    --panel-border: rgba(196, 219, 154, 0.18);
    --slide-accent: #b8cb7d;
}

.slide-shell[data-palette="teal"] {
    --slide-bg:
        radial-gradient(circle at 80% 18%, rgba(117, 221, 203, 0.12), transparent 24%),
        linear-gradient(180deg, #111a1a 0%, #0c1313 100%);
    --panel-bg: rgba(236, 255, 251, 0.05);
    --panel-border: rgba(121, 213, 197, 0.18);
    --slide-accent: #79d5c5;
}

.slide-shell[data-palette="berry"] {
    --slide-bg:
        radial-gradient(circle at 14% 18%, rgba(247, 166, 203, 0.12), transparent 22%),
        linear-gradient(180deg, #21131a 0%, #160d12 100%);
    --panel-bg: rgba(255, 240, 247, 0.05);
    --panel-border: rgba(240, 156, 195, 0.18);
    --slide-accent: #e79bc0;
}

.slide-shell[data-palette="slate"] {
    --slide-bg:
        radial-gradient(circle at 86% 84%, rgba(170, 188, 210, 0.1), transparent 20%),
        linear-gradient(180deg, #15181d 0%, #0f1216 100%);
    --panel-bg: rgba(245, 248, 252, 0.05);
    --panel-border: rgba(166, 184, 206, 0.18);
    --slide-accent: #9aadc5;
}

.slide-noise,
.title-field,
.body-field,
.slide-figure,
.aside-field,
.cards-deck,
.compare-deck,
.context-rail,
.prompt-deck,
.slide-footer,
.slide-top {
    position: absolute;
    box-sizing: border-box;
}

.title-field,
.body-field,
.aside-field {
    inset: 0;
}

.slide-figure {
    display: grid;
    gap: 12px;
    margin: 0;
}

.figure-frame {
    position: relative;
    min-height: 0;
    border-top: 1px solid var(--panel-border);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
        rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.slide-figure[data-kind="placeholder"] .figure-frame::before {
    content: "";
    position: absolute;
    inset: 22px 22px 48px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(circle at 28% 30%, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 56%);
}

.slide-figure[data-kind="placeholder"] .figure-frame::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    height: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.figure-caption {
    display: grid;
    gap: 6px;
}

.figure-label,
.figure-note {
    margin: 0;
}

.figure-label {
    color: var(--slide-accent);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.figure-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    line-height: 1.55;
}

.slide-noise {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
        repeating-linear-gradient(0deg, transparent 0, transparent 15px, rgba(255, 255, 255, 0.018) 15px, rgba(255, 255, 255, 0.018) 16px);
    opacity: 0.4;
    pointer-events: none;
}

.slide-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
}

.slide-kicker,
.slide-index,
.footer-left,
.footer-right {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.slide-index {
    font-variant-numeric: tabular-nums;
}

.slide-title-line,
.slide-body-line,
.slide-aside-line {
    position: absolute;
    white-space: pre;
}

.slide-title-line {
    letter-spacing: -0.05em;
}

.slide-body-line {
    color: rgba(255, 255, 255, 0.84);
}

.slide-aside-line {
    color: color-mix(in srgb, var(--slide-accent) 54%, white 46%);
    font-family: var(--mono);
    letter-spacing: 0.03em;
}

.cards-deck,
.compare-deck,
.context-rail,
.prompt-deck {
    display: grid;
    gap: 16px;
    align-content: start;
    overflow: hidden;
}

.cards-deck {
    grid-template-columns: repeat(var(--deck-columns, 2), minmax(0, 1fr));
}

.compare-deck {
    grid-template-columns: repeat(var(--compare-columns, 3), minmax(0, 1fr));
}

.context-rail {
    grid-template-columns: 1fr;
}

.prompt-deck {
    grid-template-columns: repeat(var(--prompt-columns, 1), minmax(0, 1fr));
}

.cards-deck.deck-compact,
.compare-deck.deck-compact,
.context-rail.deck-compact,
.prompt-deck.deck-compact {
    gap: 12px;
}

.cards-deck.deck-tight,
.compare-deck.deck-tight,
.context-rail.deck-tight,
.prompt-deck.deck-tight {
    gap: 8px;
}

.info-card,
.compare-card,
.context-card,
.prompt-card {
    padding: 12px 0 14px;
    border: 0;
    border-top: 1px solid var(--panel-border);
    background: transparent;
    backdrop-filter: none;
}

.compare-card {
    padding-top: 10px;
}

.card-label {
    margin: 0 0 8px;
    color: var(--slide-accent);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.card-title {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 1.24rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.card-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.96rem;
    line-height: 1.55;
}

.compare-card .card-text {
    font-size: 0.88rem;
    line-height: 1.42;
}

.context-card .card-title {
    font-size: 1rem;
}

.deck-compact .card-title {
    font-size: 1.08rem;
}

.deck-compact .card-text {
    font-size: 0.9rem;
    line-height: 1.48;
}

.deck-tight .card-label {
    margin-bottom: 6px;
    font-size: 9px;
}

.deck-tight .card-title {
    margin-bottom: 6px;
    font-size: 0.98rem;
}

.deck-tight .card-text {
    font-size: 0.84rem;
    line-height: 1.38;
}

.slide-figure[data-kind="case-study"] .figure-frame {
    padding: 18px;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
}

.case-study-shell {
    display: grid;
    gap: 12px;
}

.case-study-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.case-study-kicker,
.case-study-state {
    color: var(--slide-accent);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.case-study-state {
    color: rgba(255, 255, 255, 0.58);
}

.case-study-title,
.case-study-body {
    margin: 0;
}

.case-study-title {
    font-family: var(--serif);
    font-size: 1.34rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

.case-study-body {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.95rem;
    line-height: 1.58;
}

.case-study-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.case-study-signals span {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slide-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.slide-shell[data-layout="manifesto"] .slide-noise {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
        linear-gradient(90deg, transparent 0, transparent 82%, rgba(255, 255, 255, 0.02) 82%, rgba(255, 255, 255, 0.02) 100%);
}

.slide-shell[data-layout="process"] .slide-noise {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%),
        repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(255, 255, 255, 0.018) 23px, rgba(255, 255, 255, 0.018) 24px);
}

.slide-shell[data-layout="surfaces"] .slide-noise {
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.05), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 20%);
}

.slide-shell[data-layout="principles"] .slide-noise {
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 19px, rgba(255, 255, 255, 0.015) 19px, rgba(255, 255, 255, 0.015) 20px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%);
}

.slide-shell[data-layout="prompt"] .slide-noise {
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.06), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%);
}

.slide-shell[data-theory="true"] .slide-aside-line {
    color: color-mix(in srgb, var(--slide-accent) 68%, white 32%);
}

.slide-shell[data-compare="true"] .compare-card {
    background: color-mix(in srgb, var(--panel-bg) 82%, var(--slide-accent) 18%);
}

body[data-embedded="true"] .audience-page,
body[data-mode="present"] .audience-page {
    padding: 0;
    gap: 0;
}

body[data-embedded="true"] .deck-caption,
body[data-embedded="true"] .floating-actions {
    display: none;
}

body[data-embedded="true"] .stage {
    min-height: 100vh;
    border: 0;
    padding: 16px;
}

body[data-mode="present"] .stage {
    min-height: 100vh;
    border: 0;
    padding: 12px;
}

body[data-mode="viewer"] .stage {
    min-height: calc(100vh - 32px);
    padding: 16px;
}

body[data-chrome-hidden="true"] .deck-caption {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

body[data-mode="present"][data-chrome-hidden="true"] .deck-caption {
    display: none;
}

body[data-chrome-hidden="true"] .floating-actions {
    opacity: 0.78;
}

body[data-mode="viewer"] .deck-status {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 960px) {
    .deck-caption {
        display: grid;
    }

    .caption-tools {
        justify-items: start;
    }

    .deck-status {
        text-align: left;
    }

    .stage {
        min-height: calc(100vh - 180px);
        padding: var(--space-3);
    }
}