:root {
    --presenter-canvas: #111827;
    --presenter-surface: #1f2937;
    --presenter-panel-alt: #243041;
    --presenter-accent: #6366f1;
    --presenter-accent-soft: #8b5cf6;
    --presenter-accent-muted: #334155;
    --presenter-accent-text: #ffffff;
    --presenter-text: #f8fafc;
    --presenter-surface-text: #f8fafc;
    --presenter-muted: #94a3b8;
    --presenter-soft-text: #cbd5e1;
    --presenter-border: #334155;
    --presenter-ring: rgba(99, 102, 241, 0.22);
    --presenter-shadow: rgba(2, 6, 23, 0.24);
    --presenter-accent-glow: rgba(99, 102, 241, 0.2);
    --presenter-qr-panel: #ffffff;
    --presenter-qr-text: #0f172a;
    --presenter-countdown-track: rgba(148, 163, 184, 0.18);
    --presenter-grid: rgba(248, 250, 252, 0.1);
    --presenter-chart-1: #6366f1;
    --presenter-chart-2: #8b5cf6;
    --presenter-chart-3: #14b8a6;
    --presenter-chart-4: #f59e0b;
    --presenter-chart-5: #10b981;
    --presenter-chart-6: #ef4444;
    --presenter-positive: #10b981;
    --presenter-warning: #f59e0b;
    --presenter-danger: #ef4444;
    --presenter-panel-radius: 1.5rem;
    --presenter-panel-radius-tight: 1.1rem;
    --presenter-button-radius: 1rem;
    --presenter-pill-radius: 999px;
    --presenter-chip-radius: 999px;
    --presenter-qr-radius: 1.5rem;
    --presenter-panel-border-width: 1px;
    --presenter-qr-border-width: 1px;
    --presenter-panel-shadow-elevated: 0 16px 28px var(--presenter-shadow);
    --presenter-button-shadow: 0 18px 36px var(--presenter-accent-glow);
    --presenter-panel-backdrop: blur(16px);
    --presenter-primary-bg: linear-gradient(145deg, var(--presenter-accent) 0%, color-mix(in srgb, var(--presenter-accent) 78%, #000 22%) 100%);
    --presenter-primary-border: color-mix(in srgb, var(--presenter-accent) 88%, transparent);
    --presenter-secondary-bg: var(--presenter-qr-panel);
    --presenter-secondary-border: rgba(255, 255, 255, 0.42);
    --presenter-secondary-text: var(--presenter-qr-text);
    --presenter-secondary-hover-bg: color-mix(in srgb, var(--presenter-qr-panel) 88%, var(--presenter-accent) 12%);
    --presenter-primary-letter-spacing: 0;
    --presenter-font-body: "Public Sans", sans-serif;
    --presenter-font-heading: "Space Grotesk", sans-serif;
    --presenter-font-metric: "Space Grotesk", sans-serif;
    --presenter-heading-transform: none;
    --presenter-heading-spacing: -0.03em;
    --presenter-heading-weight: 700;
    --presenter-button-transform: none;
    --presenter-button-weight: 700;
    --presenter-frame-opacity: 0;
    --presenter-frame-border: rgba(255, 255, 255, 0.14);
    --presenter-frame-glow: transparent;
    --presenter-panel-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
}

body.presenter-shell[data-presenter-chrome="sharp_stage"],
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] {
    --presenter-panel-radius: 1rem;
    --presenter-panel-radius-tight: 0.85rem;
    --presenter-button-radius: 0.8rem;
    --presenter-pill-radius: 0.85rem;
    --presenter-chip-radius: 0.8rem;
    --presenter-qr-radius: 1rem;
    --presenter-panel-border-width: 1.5px;
    --presenter-qr-border-width: 1.5px;
    --presenter-panel-shadow-elevated: none;
    --presenter-button-shadow: none;
    --presenter-panel-backdrop: none;
    --presenter-primary-bg: var(--presenter-accent);
    --presenter-secondary-bg: color-mix(in srgb, var(--presenter-surface) 82%, #fff 18%);
    --presenter-secondary-border: color-mix(in srgb, var(--presenter-border) 92%, transparent);
    --presenter-secondary-text: var(--presenter-text);
    --presenter-secondary-hover-bg: color-mix(in srgb, var(--presenter-surface) 70%, var(--presenter-accent) 30%);
    --presenter-primary-letter-spacing: 0.08em;
    --presenter-font-body: "IBM Plex Sans", sans-serif;
    --presenter-font-heading: "Sora", sans-serif;
    --presenter-font-metric: "Sora", sans-serif;
    --presenter-heading-transform: uppercase;
    --presenter-heading-spacing: 0.06em;
    --presenter-heading-weight: 800;
    --presenter-button-transform: uppercase;
    --presenter-button-weight: 800;
    --presenter-frame-opacity: 1;
    --presenter-frame-border: color-mix(in srgb, var(--presenter-accent) 44%, transparent);
    --presenter-frame-glow: color-mix(in srgb, var(--presenter-accent) 18%, transparent);
    --presenter-panel-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

body.presenter-shell[data-presenter-chrome="capsule_bold"],
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] {
    --presenter-panel-radius: 1.85rem;
    --presenter-panel-radius-tight: 1.35rem;
    --presenter-button-radius: 999px;
    --presenter-pill-radius: 999px;
    --presenter-chip-radius: 999px;
    --presenter-qr-radius: 1.8rem;
    --presenter-panel-shadow-elevated: 0 20px 36px var(--presenter-shadow);
    --presenter-button-shadow: 0 18px 34px var(--presenter-accent-glow);
    --presenter-panel-backdrop: blur(18px);
    --presenter-primary-bg: linear-gradient(135deg, color-mix(in srgb, var(--presenter-accent) 90%, #fff 10%) 0%, var(--presenter-accent) 58%, color-mix(in srgb, var(--presenter-accent) 82%, #000 18%) 100%);
    --presenter-secondary-bg: color-mix(in srgb, var(--presenter-qr-panel) 84%, var(--presenter-accent) 16%);
    --presenter-secondary-border: color-mix(in srgb, var(--presenter-accent) 40%, #fff 60%);
    --presenter-secondary-text: var(--presenter-qr-text);
    --presenter-secondary-hover-bg: color-mix(in srgb, var(--presenter-qr-panel) 72%, var(--presenter-accent) 28%);
    --presenter-font-body: "Public Sans", sans-serif;
    --presenter-font-heading: "Sora", sans-serif;
    --presenter-font-metric: "Sora", sans-serif;
    --presenter-heading-transform: none;
    --presenter-heading-spacing: -0.04em;
    --presenter-heading-weight: 700;
    --presenter-button-weight: 800;
    --presenter-frame-opacity: 0.6;
    --presenter-frame-border: color-mix(in srgb, var(--presenter-accent) 30%, transparent);
    --presenter-frame-glow: color-mix(in srgb, var(--presenter-accent) 12%, transparent);
    --presenter-panel-overlay: radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--presenter-accent) 14%, transparent), transparent 52%);
}

body.presenter-shell[data-presenter-chrome="editorial_frame"],
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] {
    --presenter-panel-radius: 1rem;
    --presenter-panel-radius-tight: 0.9rem;
    --presenter-button-radius: 0.85rem;
    --presenter-pill-radius: 0.8rem;
    --presenter-chip-radius: 0.8rem;
    --presenter-qr-radius: 1rem;
    --presenter-panel-border-width: 1.5px;
    --presenter-qr-border-width: 1.5px;
    --presenter-panel-shadow-elevated: 0 10px 18px rgba(15, 23, 42, 0.08);
    --presenter-button-shadow: none;
    --presenter-panel-backdrop: none;
    --presenter-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--presenter-accent) 92%, #fff 8%) 0%, var(--presenter-accent) 100%);
    --presenter-secondary-bg: rgba(255, 255, 255, 0.92);
    --presenter-secondary-border: color-mix(in srgb, var(--presenter-border) 85%, transparent);
    --presenter-secondary-text: var(--presenter-qr-text);
    --presenter-secondary-hover-bg: color-mix(in srgb, rgba(255, 255, 255, 0.92) 88%, var(--presenter-accent) 12%);
    --presenter-font-body: "Public Sans", sans-serif;
    --presenter-font-heading: "Fraunces", serif;
    --presenter-font-metric: "Fraunces", serif;
    --presenter-heading-transform: none;
    --presenter-heading-spacing: -0.03em;
    --presenter-heading-weight: 600;
    --presenter-button-weight: 600;
    --presenter-frame-opacity: 1;
    --presenter-frame-border: color-mix(in srgb, var(--presenter-border) 30%, transparent);
    --presenter-frame-glow: rgba(255, 255, 255, 0.32);
    --presenter-panel-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 100%);
}

body.presenter-shell[data-presenter-chrome="control_room"],
.presenter-preview-shell[data-presenter-chrome="control_room"] {
    --presenter-panel-radius: 0.95rem;
    --presenter-panel-radius-tight: 0.75rem;
    --presenter-button-radius: 0.8rem;
    --presenter-pill-radius: 0.7rem;
    --presenter-chip-radius: 0.7rem;
    --presenter-qr-radius: 1rem;
    --presenter-panel-border-width: 1px;
    --presenter-qr-border-width: 1.5px;
    --presenter-panel-shadow-elevated: 0 12px 22px rgba(3, 7, 18, 0.22);
    --presenter-button-shadow: 0 0 0 1px color-mix(in srgb, var(--presenter-accent) 16%, transparent);
    --presenter-panel-backdrop: none;
    --presenter-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--presenter-accent) 86%, #fff 14%) 0%, color-mix(in srgb, var(--presenter-accent) 72%, #000 28%) 100%);
    --presenter-secondary-bg: color-mix(in srgb, var(--presenter-surface) 88%, #0b1221 12%);
    --presenter-secondary-border: color-mix(in srgb, var(--presenter-accent) 22%, transparent);
    --presenter-secondary-text: var(--presenter-text);
    --presenter-secondary-hover-bg: color-mix(in srgb, var(--presenter-surface) 72%, var(--presenter-accent) 28%);
    --presenter-primary-letter-spacing: 0.05em;
    --presenter-font-body: "IBM Plex Sans", sans-serif;
    --presenter-font-heading: "IBM Plex Sans", sans-serif;
    --presenter-font-metric: "IBM Plex Mono", monospace;
    --presenter-heading-transform: none;
    --presenter-heading-spacing: 0.01em;
    --presenter-heading-weight: 700;
    --presenter-button-transform: uppercase;
    --presenter-button-weight: 700;
    --presenter-frame-opacity: 1;
    --presenter-frame-border: color-mix(in srgb, var(--presenter-accent) 26%, transparent);
    --presenter-frame-glow: rgba(15, 23, 42, 0.16);
    --presenter-panel-overlay: linear-gradient(90deg, color-mix(in srgb, var(--presenter-accent) 10%, transparent) 0 0.28rem, transparent 0.28rem 100%);
}

body.presenter-shell[data-presenter-chrome="monograph_frame"],
.presenter-preview-shell[data-presenter-chrome="monograph_frame"] {
    --presenter-panel-radius: 0.8rem;
    --presenter-panel-radius-tight: 0.65rem;
    --presenter-button-radius: 0.55rem;
    --presenter-pill-radius: 0.45rem;
    --presenter-chip-radius: 0.45rem;
    --presenter-qr-radius: 0.9rem;
    --presenter-panel-border-width: 1px;
    --presenter-qr-border-width: 1px;
    --presenter-panel-shadow-elevated: 0 10px 16px rgba(15, 23, 42, 0.05);
    --presenter-button-shadow: none;
    --presenter-panel-backdrop: none;
    --presenter-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--presenter-accent) 96%, #fff 4%) 0%, var(--presenter-accent) 100%);
    --presenter-primary-border: color-mix(in srgb, var(--presenter-accent) 42%, transparent);
    --presenter-secondary-bg: rgba(255, 255, 255, 0.92);
    --presenter-secondary-border: color-mix(in srgb, var(--presenter-border) 34%, transparent);
    --presenter-secondary-text: #111111;
    --presenter-secondary-hover-bg: color-mix(in srgb, rgba(255, 255, 255, 0.92) 92%, var(--presenter-accent) 8%);
    --presenter-primary-letter-spacing: 0.06em;
    --presenter-font-body: "Public Sans", sans-serif;
    --presenter-font-heading: "Public Sans", sans-serif;
    --presenter-font-metric: "IBM Plex Mono", monospace;
    --presenter-heading-transform: none;
    --presenter-heading-spacing: -0.03em;
    --presenter-heading-weight: 700;
    --presenter-button-transform: uppercase;
    --presenter-button-weight: 700;
    --presenter-frame-opacity: 1;
    --presenter-frame-border: color-mix(in srgb, var(--presenter-border) 22%, transparent);
    --presenter-frame-glow: rgba(255, 255, 255, 0.28);
    --presenter-panel-overlay: linear-gradient(180deg, color-mix(in srgb, var(--presenter-accent) 10%, transparent) 0 2px, transparent 2px 100%);
}

body.presenter-shell {
    background:
        radial-gradient(circle at 18% 18%, var(--presenter-accent-glow), transparent 24%),
        radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--presenter-accent) 28%, transparent), transparent 22%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 90%, #000 10%) 0%, var(--presenter-canvas) 100%);
    color: var(--presenter-text);
    font-family: var(--presenter-font-body);
    overflow: hidden;
    position: relative;
}

body.presenter-shell::after {
    content: "";
    position: fixed;
    inset: 0.9rem;
    border: 1px solid var(--presenter-frame-border);
    border-radius: calc(var(--presenter-panel-radius) + 0.6rem);
    box-shadow: inset 0 0 0 1px var(--presenter-frame-glow);
    opacity: var(--presenter-frame-opacity);
    pointer-events: none;
}

body.presenter-shell h1,
body.presenter-shell h2,
body.presenter-shell h3,
body.presenter-shell h4,
.presenter-preview-shell h1,
.presenter-preview-shell h2,
.presenter-preview-shell h3,
.presenter-preview-shell h4 {
    font-family: var(--presenter-font-heading);
    font-weight: var(--presenter-heading-weight);
    letter-spacing: var(--presenter-heading-spacing);
    text-transform: var(--presenter-heading-transform);
}

body.presenter-shell .text-6xl,
body.presenter-shell .text-5xl,
body.presenter-shell .text-4xl,
body.presenter-shell .text-3xl,
body.presenter-shell .text-2xl,
.presenter-preview-shell .text-5xl,
.presenter-preview-shell .text-2xl {
    font-family: var(--presenter-font-metric);
}

body.presenter-shell .presenter-button-primary,
body.presenter-shell .presenter-button-secondary,
body.presenter-shell .presenter-exit-button,
.presenter-preview-shell .presenter-button-primary,
.presenter-preview-shell .presenter-button-secondary {
    font-weight: var(--presenter-button-weight);
    text-transform: var(--presenter-button-transform);
}

body.presenter-shell[data-presenter-chrome="sharp_stage"]::after {
    inset: 1rem 1.1rem;
    border-width: 1.5px;
    box-shadow:
        inset 0 0 0 1px var(--presenter-frame-glow),
        inset 0 1.15rem 0 0 color-mix(in srgb, var(--presenter-accent) 18%, transparent),
        inset 0 -0.22rem 0 0 color-mix(in srgb, var(--presenter-accent) 34%, transparent);
}

body.presenter-shell[data-presenter-chrome="capsule_bold"]::after {
    border-style: solid;
    box-shadow:
        inset 0 0 0 1px var(--presenter-frame-glow),
        0 0 0 1px color-mix(in srgb, var(--presenter-accent) 8%, transparent);
}

body.presenter-shell[data-presenter-chrome="editorial_frame"]::after {
    inset: 1.2rem;
    border-width: 1.5px;
    border-radius: 1.6rem;
}

body.presenter-shell[data-presenter-chrome="monograph_frame"]::after {
    inset: 1.1rem;
    border-radius: 1rem;
}

body.presenter-shell[data-presenter-chrome="control_room"]::after {
    inset: 0.85rem;
    border-radius: 1.2rem;
    box-shadow:
        inset 0 0 0 1px var(--presenter-frame-glow),
        inset 0 0 0 999px rgba(3, 7, 18, 0.02);
}

body.presenter-shell[data-presenter-style="editorial"] {
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--presenter-accent) 22%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 94%, #fff 6%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-style="grid"]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--presenter-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--presenter-grid) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.48;
    pointer-events: none;
}

body.presenter-shell[data-presenter-style="neon"] {
    background:
        radial-gradient(circle at 20% 14%, color-mix(in srgb, var(--presenter-accent) 32%, transparent), transparent 18%),
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--presenter-chart-3) 22%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 90%, #05030b 10%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-style="contrast"] {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 92%, #000 8%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-chrome="soft_glass"] {
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--presenter-accent) 26%, transparent), transparent 20%),
        radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--presenter-chart-2) 16%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 92%, #05030b 8%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-chrome="sharp_stage"] {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--presenter-accent) 14%, transparent) 0 12%, transparent 12% 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 96%, #000 4%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-chrome="capsule_bold"] {
    background:
        radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--presenter-accent) 24%, transparent), transparent 18%),
        radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--presenter-chart-2) 18%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 90%, #12061d 10%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-chrome="editorial_frame"] {
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.24), transparent 16%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 96%, #fff 4%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-chrome="control_room"] {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--presenter-accent) 8%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 94%, #050814 6%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell[data-presenter-chrome="monograph_frame"] {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 98%, #fff 2%) 0%, var(--presenter-canvas) 100%);
}

body.presenter-shell .countdown-bar,
body.presenter-shell .bg-brand-500,
body.presenter-shell .bg-brand-600 {
    background: var(--presenter-accent) !important;
    color: var(--presenter-accent-text) !important;
}

body.presenter-shell .bg-brand-700 {
    background: color-mix(in srgb, var(--presenter-accent) 86%, #000 14%) !important;
    color: var(--presenter-accent-text) !important;
}

body.presenter-shell .bg-brand-900 {
    background: color-mix(in srgb, var(--presenter-accent) 22%, var(--presenter-surface) 78%) !important;
}

body.presenter-shell .text-brand-500,
body.presenter-shell .text-brand-400,
body.presenter-shell .text-brand-300 {
    color: var(--presenter-accent-soft) !important;
}

body.presenter-shell .bg-gray-800 {
    background:
        var(--presenter-panel-overlay),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 96%, transparent), color-mix(in srgb, var(--presenter-panel-alt) 94%, transparent)) !important;
    color: var(--presenter-surface-text) !important;
    border: var(--presenter-panel-border-width) solid var(--presenter-border);
    border-radius: var(--presenter-panel-radius) !important;
    box-shadow: var(--presenter-panel-shadow-elevated);
    backdrop-filter: var(--presenter-panel-backdrop);
    position: relative;
    overflow: hidden;
}

body.presenter-shell[data-presenter-style="contrast"] .bg-gray-800 {
    box-shadow: none;
    border-width: 1.5px;
}

body.presenter-shell[data-presenter-style="editorial"] .bg-gray-800 {
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
}

body.presenter-shell .bg-gray-700,
body.presenter-shell .bg-gray-700\/50 {
    background:
        var(--presenter-panel-overlay),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-panel-alt) 92%, transparent), color-mix(in srgb, var(--presenter-surface) 88%, transparent)) !important;
    border: 1px solid color-mix(in srgb, var(--presenter-border) 75%, transparent);
    border-radius: var(--presenter-panel-radius-tight) !important;
    overflow: hidden;
}

body.presenter-shell .text-white {
    color: var(--presenter-text) !important;
}

body.presenter-shell .text-gray-300 {
    color: var(--presenter-soft-text) !important;
}

body.presenter-shell .text-gray-400 {
    color: var(--presenter-muted) !important;
}

body.presenter-shell .text-gray-500 {
    color: color-mix(in srgb, var(--presenter-muted) 82%, var(--presenter-canvas) 18%) !important;
}

body.presenter-shell .border-gray-700 {
    border-color: var(--presenter-border) !important;
}

body.presenter-shell .bg-green-900 {
    background: color-mix(in srgb, var(--presenter-positive) 22%, var(--presenter-surface) 78%) !important;
}

body.presenter-shell .bg-yellow-900 {
    background: color-mix(in srgb, var(--presenter-warning) 24%, var(--presenter-surface) 76%) !important;
}

body.presenter-shell .bg-red-900 {
    background: color-mix(in srgb, var(--presenter-danger) 20%, var(--presenter-surface) 80%) !important;
}

body.presenter-shell .text-green-400,
body.presenter-shell .text-green-300 {
    color: var(--presenter-positive) !important;
}

body.presenter-shell .text-yellow-400,
body.presenter-shell .text-yellow-300 {
    color: var(--presenter-warning) !important;
}

body.presenter-shell .text-red-400,
body.presenter-shell .text-red-300 {
    color: var(--presenter-danger) !important;
}

.presenter-qr-card {
    background: var(--presenter-qr-panel) !important;
    color: var(--presenter-qr-text) !important;
    border: var(--presenter-qr-border-width) solid rgba(255, 255, 255, 0.55);
    border-radius: var(--presenter-qr-radius) !important;
    box-shadow: 0 18px 38px var(--presenter-shadow);
}

.presenter-button-primary {
    background: var(--presenter-primary-bg) !important;
    color: var(--presenter-accent-text) !important;
    border: 1px solid var(--presenter-primary-border);
    border-radius: var(--presenter-button-radius) !important;
    box-shadow: var(--presenter-button-shadow);
    letter-spacing: var(--presenter-primary-letter-spacing);
}

.presenter-button-primary:hover {
    filter: brightness(1.04);
}

.presenter-button-secondary {
    background: var(--presenter-secondary-bg) !important;
    color: var(--presenter-secondary-text) !important;
    border: 1px solid var(--presenter-secondary-border);
    border-radius: var(--presenter-button-radius) !important;
}

.presenter-button-secondary:hover {
    background: var(--presenter-secondary-hover-bg) !important;
}

.presenter-exit-button {
    background: color-mix(in srgb, var(--presenter-surface) 78%, transparent) !important;
    color: var(--presenter-muted) !important;
    border: 1px solid var(--presenter-border);
    border-radius: var(--presenter-button-radius) !important;
}

.presenter-exit-button:hover {
    color: var(--presenter-text) !important;
    background: color-mix(in srgb, var(--presenter-panel-alt) 88%, transparent) !important;
}

.presenter-preview-shell {
    min-height: 260px;
    background:
        radial-gradient(circle at 18% 16%, var(--presenter-accent-glow), transparent 25%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 94%, #000 6%) 0%, var(--presenter-canvas) 100%);
    color: var(--presenter-text);
    font-family: var(--presenter-font-body);
    position: relative;
}

.presenter-preview-shell::after {
    content: "";
    position: absolute;
    inset: 0.6rem;
    border: 1px solid var(--presenter-frame-border);
    border-radius: calc(var(--presenter-panel-radius) + 0.35rem);
    box-shadow: inset 0 0 0 1px var(--presenter-frame-glow);
    opacity: var(--presenter-frame-opacity);
    pointer-events: none;
}

.presenter-preview-shell[data-presenter-chrome="sharp_stage"]::after {
    border-width: 1.5px;
    box-shadow:
        inset 0 0 0 1px var(--presenter-frame-glow),
        inset 0 0.85rem 0 0 color-mix(in srgb, var(--presenter-accent) 18%, transparent),
        inset 0 -0.18rem 0 0 color-mix(in srgb, var(--presenter-accent) 34%, transparent);
}

.presenter-preview-shell[data-presenter-chrome="editorial_frame"]::after {
    inset: 0.85rem;
    border-width: 1.5px;
}

.presenter-preview-shell[data-presenter-chrome="monograph_frame"]::after {
    inset: 0.7rem;
    border-radius: 0.9rem;
}

.presenter-preview-shell[data-presenter-chrome="control_room"]::after {
    inset: 0.5rem;
}

.presenter-preview-shell[data-presenter-style="editorial"] {
    background:
        radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--presenter-accent) 18%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 96%, #fff 4%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-style="grid"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--presenter-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--presenter-grid) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: 0.44;
    pointer-events: none;
}

.presenter-preview-shell[data-presenter-style="neon"] {
    background:
        radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--presenter-accent) 30%, transparent), transparent 18%),
        radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--presenter-chart-3) 18%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 92%, #05030b 8%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-style="contrast"] {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 92%, #000 8%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-chrome="soft_glass"] {
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--presenter-accent) 24%, transparent), transparent 22%),
        radial-gradient(circle at 84% 8%, color-mix(in srgb, var(--presenter-chart-2) 16%, transparent), transparent 20%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 94%, #05030b 6%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-chrome="sharp_stage"] {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--presenter-accent) 14%, transparent) 0 12%, transparent 12% 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 96%, #000 4%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-chrome="capsule_bold"] {
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--presenter-accent) 20%, transparent), transparent 20%),
        radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--presenter-chart-2) 16%, transparent), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 92%, #12061d 8%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-chrome="editorial_frame"] {
    background:
        radial-gradient(circle at 12% 6%, rgba(255, 255, 255, 0.22), transparent 16%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 96%, #fff 4%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-chrome="control_room"] {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--presenter-accent) 8%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 94%, #050814 6%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-shell[data-presenter-chrome="monograph_frame"] {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-canvas) 98%, #fff 2%) 0%, var(--presenter-canvas) 100%);
}

.presenter-preview-panel {
    background:
        var(--presenter-panel-overlay),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 94%, transparent), color-mix(in srgb, var(--presenter-panel-alt) 92%, transparent));
    border: var(--presenter-panel-border-width) solid var(--presenter-border);
    border-radius: var(--presenter-panel-radius-tight);
    color: var(--presenter-surface-text);
    box-shadow: var(--presenter-panel-shadow-elevated);
    backdrop-filter: var(--presenter-panel-backdrop);
    position: relative;
    overflow: hidden;
}

.presenter-preview-shell[data-presenter-style="editorial"] .presenter-preview-panel {
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.presenter-preview-shell[data-presenter-style="contrast"] .presenter-preview-panel {
    box-shadow: none;
    border-width: 1.5px;
}

.presenter-preview-panel.alt {
    background:
        var(--presenter-panel-overlay),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-panel-alt) 94%, transparent), color-mix(in srgb, var(--presenter-surface) 88%, transparent));
}

.presenter-preview-pill {
    border: 1px solid color-mix(in srgb, var(--presenter-accent) 62%, transparent);
    background: color-mix(in srgb, var(--presenter-accent) 88%, #fff 12%);
    color: var(--presenter-accent-text);
    border-radius: var(--presenter-pill-radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.presenter-preview-qr {
    background: var(--presenter-qr-panel);
    color: var(--presenter-qr-text);
    box-shadow: 0 12px 24px var(--presenter-shadow);
    border-radius: var(--presenter-qr-radius) !important;
}

.presenter-preview-bar {
    background: linear-gradient(90deg, var(--presenter-accent), color-mix(in srgb, var(--presenter-accent) 72%, #fff 28%));
}

.presenter-preview-track {
    background: var(--presenter-countdown-track);
}

.presenter-preview-muted {
    color: color-mix(in srgb, var(--presenter-text) 72%, var(--presenter-canvas) 28%);
}

.presenter-preview-soft {
    color: color-mix(in srgb, var(--presenter-text) 84%, var(--presenter-canvas) 16%);
}

.presenter-preview-chip {
    background: color-mix(in srgb, var(--presenter-accent) 20%, var(--presenter-surface) 80%);
    color: var(--presenter-accent-soft);
    border: 1px solid color-mix(in srgb, var(--presenter-accent) 40%, transparent);
    border-radius: var(--presenter-chip-radius);
}

body.presenter-shell[data-presenter-chrome="soft_glass"] .bg-gray-800,
body.presenter-shell[data-presenter-chrome="soft_glass"] .bg-gray-700,
body.presenter-shell[data-presenter-chrome="soft_glass"] .bg-gray-700\/50,
.presenter-preview-shell[data-presenter-chrome="soft_glass"] .presenter-preview-panel {
    border-color: color-mix(in srgb, var(--presenter-accent) 18%, rgba(255, 255, 255, 0.18));
}

body.presenter-shell[data-presenter-chrome="sharp_stage"] .bg-gray-800,
body.presenter-shell[data-presenter-chrome="sharp_stage"] .bg-gray-700,
body.presenter-shell[data-presenter-chrome="sharp_stage"] .bg-gray-700\/50,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] .presenter-preview-panel {
    border-color: color-mix(in srgb, var(--presenter-accent) 38%, transparent) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 98%, #000 2%), color-mix(in srgb, var(--presenter-panel-alt) 96%, var(--presenter-canvas) 4%)) !important;
    box-shadow: none !important;
}

body.presenter-shell[data-presenter-chrome="sharp_stage"] .bg-gray-800::before,
body.presenter-shell[data-presenter-chrome="sharp_stage"] .bg-gray-700::before,
body.presenter-shell[data-presenter-chrome="sharp_stage"] .bg-gray-700\/50::before,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] .presenter-preview-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.22rem;
    background: linear-gradient(90deg, var(--presenter-accent) 0%, color-mix(in srgb, var(--presenter-accent) 58%, #fff 42%) 100%);
    pointer-events: none;
}

body.presenter-shell[data-presenter-chrome="sharp_stage"] .presenter-preview-pill,
body.presenter-shell[data-presenter-chrome="sharp_stage"] .presenter-preview-chip,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] .presenter-preview-pill,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] .presenter-preview-chip {
    background: var(--presenter-accent);
    color: var(--presenter-accent-text);
    letter-spacing: 0.08em;
}

body.presenter-shell[data-presenter-chrome="capsule_bold"] .bg-gray-800,
body.presenter-shell[data-presenter-chrome="capsule_bold"] .bg-gray-700,
body.presenter-shell[data-presenter-chrome="capsule_bold"] .bg-gray-700\/50,
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] .presenter-preview-panel {
    border-color: color-mix(in srgb, var(--presenter-accent) 30%, transparent) !important;
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--presenter-accent) 14%, transparent), transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 96%, transparent), color-mix(in srgb, var(--presenter-panel-alt) 94%, transparent)) !important;
}

body.presenter-shell[data-presenter-chrome="capsule_bold"] .presenter-preview-pill,
body.presenter-shell[data-presenter-chrome="capsule_bold"] .presenter-preview-chip,
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] .presenter-preview-pill,
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] .presenter-preview-chip {
    background: linear-gradient(135deg, color-mix(in srgb, var(--presenter-accent) 90%, #fff 10%) 0%, color-mix(in srgb, var(--presenter-accent) 74%, #000 26%) 100%);
    color: var(--presenter-accent-text);
    border-color: color-mix(in srgb, var(--presenter-accent) 48%, transparent);
}

body.presenter-shell[data-presenter-chrome="editorial_frame"] .bg-gray-800,
body.presenter-shell[data-presenter-chrome="editorial_frame"] .bg-gray-700,
body.presenter-shell[data-presenter-chrome="editorial_frame"] .bg-gray-700\/50,
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] .presenter-preview-panel {
    border-color: color-mix(in srgb, var(--presenter-border) 58%, transparent) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 98%, transparent), color-mix(in srgb, var(--presenter-panel-alt) 92%, transparent)) !important;
}

body.presenter-shell[data-presenter-chrome="editorial_frame"] .presenter-preview-pill,
body.presenter-shell[data-presenter-chrome="editorial_frame"] .presenter-preview-chip,
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] .presenter-preview-pill,
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] .presenter-preview-chip {
    background: rgba(255, 255, 255, 0.84);
    color: var(--presenter-accent);
    border-color: color-mix(in srgb, var(--presenter-border) 52%, transparent);
}

body.presenter-shell[data-presenter-chrome="monograph_frame"] .bg-gray-800,
body.presenter-shell[data-presenter-chrome="monograph_frame"] .bg-gray-700,
body.presenter-shell[data-presenter-chrome="monograph_frame"] .bg-gray-700\/50,
.presenter-preview-shell[data-presenter-chrome="monograph_frame"] .presenter-preview-panel {
    border-color: color-mix(in srgb, var(--presenter-border) 28%, transparent) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-accent) 10%, transparent) 0 2px, transparent 2px 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 99%, transparent), color-mix(in srgb, var(--presenter-surface) 95%, var(--presenter-canvas) 5%)) !important;
}

body.presenter-shell[data-presenter-chrome="monograph_frame"] .presenter-preview-pill,
body.presenter-shell[data-presenter-chrome="monograph_frame"] .presenter-preview-chip,
.presenter-preview-shell[data-presenter-chrome="monograph_frame"] .presenter-preview-pill,
.presenter-preview-shell[data-presenter-chrome="monograph_frame"] .presenter-preview-chip {
    background: rgba(255, 255, 255, 0.92);
    color: color-mix(in srgb, var(--presenter-accent) 88%, #111 12%);
    border-color: color-mix(in srgb, var(--presenter-border) 34%, transparent);
    box-shadow: none;
}

body.presenter-shell[data-presenter-chrome="monograph_frame"] h1,
body.presenter-shell[data-presenter-chrome="monograph_frame"] h2,
body.presenter-shell[data-presenter-chrome="monograph_frame"] h3,
.presenter-preview-shell[data-presenter-chrome="monograph_frame"] h3,
.presenter-preview-shell[data-presenter-chrome="monograph_frame"] h4 {
    line-height: 1.02;
}

body.presenter-shell[data-presenter-chrome="control_room"] .bg-gray-800,
body.presenter-shell[data-presenter-chrome="control_room"] .bg-gray-700,
body.presenter-shell[data-presenter-chrome="control_room"] .bg-gray-700\/50,
.presenter-preview-shell[data-presenter-chrome="control_room"] .presenter-preview-panel {
    border-color: color-mix(in srgb, var(--presenter-accent) 22%, transparent) !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--presenter-accent) 10%, transparent) 0 0.32rem, transparent 0.32rem 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--presenter-surface) 98%, #050814 2%), color-mix(in srgb, var(--presenter-panel-alt) 96%, #050814 4%)) !important;
}

body.presenter-shell[data-presenter-chrome="control_room"] .text-6xl,
body.presenter-shell[data-presenter-chrome="control_room"] .text-5xl,
body.presenter-shell[data-presenter-chrome="control_room"] .text-4xl,
body.presenter-shell[data-presenter-chrome="control_room"] .text-3xl,
body.presenter-shell[data-presenter-chrome="control_room"] .text-2xl,
.presenter-preview-shell[data-presenter-chrome="control_room"] .text-5xl,
.presenter-preview-shell[data-presenter-chrome="control_room"] .text-2xl {
    letter-spacing: -0.02em;
}

body.presenter-shell[data-presenter-chrome="control_room"] .presenter-preview-pill,
body.presenter-shell[data-presenter-chrome="control_room"] .presenter-preview-chip,
.presenter-preview-shell[data-presenter-chrome="control_room"] .presenter-preview-pill,
.presenter-preview-shell[data-presenter-chrome="control_room"] .presenter-preview-chip {
    font-family: var(--presenter-font-metric);
    letter-spacing: 0.06em;
}

body.presenter-shell[data-presenter-chrome="sharp_stage"] h1,
body.presenter-shell[data-presenter-chrome="sharp_stage"] h2,
body.presenter-shell[data-presenter-chrome="sharp_stage"] h3,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] h3,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] h4 {
    text-shadow: 0 10px 22px rgba(2, 6, 23, 0.16);
}

body.presenter-shell[data-presenter-chrome="editorial_frame"] h1,
body.presenter-shell[data-presenter-chrome="editorial_frame"] h2,
body.presenter-shell[data-presenter-chrome="editorial_frame"] h3,
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] h3,
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] h4 {
    line-height: 1.02;
}

body.presenter-shell[data-presenter-chrome="capsule_bold"] .text-6xl,
body.presenter-shell[data-presenter-chrome="capsule_bold"] .text-5xl,
body.presenter-shell[data-presenter-chrome="capsule_bold"] .text-4xl,
body.presenter-shell[data-presenter-chrome="capsule_bold"] .text-3xl,
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] .text-5xl,
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] .text-2xl {
    text-shadow: 0 14px 26px rgba(15, 23, 42, 0.16);
}

body.presenter-shell[data-presenter-chrome="sharp_stage"] .presenter-button-primary,
body.presenter-shell[data-presenter-chrome="sharp_stage"] .presenter-button-secondary,
body.presenter-shell[data-presenter-chrome="control_room"] .presenter-button-primary,
body.presenter-shell[data-presenter-chrome="control_room"] .presenter-button-secondary,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] .presenter-button-primary,
.presenter-preview-shell[data-presenter-chrome="sharp_stage"] .presenter-button-secondary,
.presenter-preview-shell[data-presenter-chrome="control_room"] .presenter-button-primary,
.presenter-preview-shell[data-presenter-chrome="control_room"] .presenter-button-secondary {
    box-shadow: none;
}

body.presenter-shell[data-presenter-chrome="capsule_bold"] .presenter-qr-card,
.presenter-preview-shell[data-presenter-chrome="capsule_bold"] .presenter-preview-qr {
    box-shadow:
        0 24px 42px var(--presenter-shadow),
        0 0 0 1px color-mix(in srgb, var(--presenter-accent) 18%, transparent);
}

body.presenter-shell[data-presenter-chrome="editorial_frame"] .presenter-qr-card,
.presenter-preview-shell[data-presenter-chrome="editorial_frame"] .presenter-preview-qr {
    box-shadow:
        0 14px 22px rgba(15, 23, 42, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.34);
}

.presenter-preview-positive {
    color: var(--presenter-positive);
}

.presenter-preview-warning {
    color: var(--presenter-warning);
}

.presenter-preview-danger {
    color: var(--presenter-danger);
}

.presenter-preview-swatch {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}