:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #050b16; color: var(--fg); font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
main { min-height: 100svh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #152846 0%, #081321 42%, #050b16 100%); }
.deck { width: min(1440px, 100%); aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--bg); box-shadow: 0 30px 90px rgba(0, 0, 0, .52); }
.slide { display: none; position: relative; height: 100%; overflow: hidden; padding: 58px 70px 56px; background: var(--bg); }
.slide.active { display: block; }
.slide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--margo-background-overlay, transparent), radial-gradient(circle at 82% 10%, rgba(91,140,255,.16), transparent 26%), radial-gradient(circle at 10% 100%, rgba(64,105,187,.11), transparent 34%); opacity: var(--margo-background-opacity, 1); }
.slide:not([style])::before { background: radial-gradient(circle at 82% 10%, rgba(91, 140, 255, .30), transparent 34%), radial-gradient(circle at 8% 100%, rgba(64, 105, 187, .24), transparent 42%); }
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(circle at 8% 17%, #bfd1ff 0 1px, transparent 1.6px), radial-gradient(circle at 53% 24%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 76% 71%, #9dbbff 0 1px, transparent 1.5px), radial-gradient(circle at 32% 82%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 92% 32%, #fff 0 1px, transparent 1.5px); background-size: 211px 173px, 293px 257px, 359px 307px, 431px 389px, 521px 463px; }
.slide > * { position: relative; z-index: 1; }
.deck-logo { position: absolute; top: 34px; left: 42px; color: #f6f8ff; font-size: 14px; font-weight: 700; letter-spacing: -.035em; z-index: 5; }
.deck-logo span { color: var(--accent); margin-right: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.deck-footer { position: absolute; right: 42px; bottom: 34px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; z-index: 5; }
.slide-count { position: absolute; left: 42px; bottom: 34px; color: var(--muted); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .08em; z-index: 5; }
.slide-shell { height: 100%; display: grid; align-content: center; min-width: 0; }
.slide-meta { display: flex; gap: 9px; align-items: center; margin-bottom: 22px; color: var(--accent); font: 700 12px/1 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.slide-meta::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.prose { max-width: 1100px; }
.prose h1, .prose h2, .prose h3, .prose p, .prose ul { margin: 0 0 18px; }
.prose h1 { max-width: 15ch; font-size: 66px; line-height: .98; letter-spacing: -.062em; }
.prose h2 { max-width: 23ch; font-size: 46px; line-height: 1.02; letter-spacing: -.055em; }
.prose h3 { font-size: 20px; line-height: 1.1; letter-spacing: -.025em; }
.prose p, .prose li { max-width: 62ch; color: var(--muted); font-size: 21px; line-height: 1.32; letter-spacing: -.02em; }
.prose strong { color: var(--fg); }
.prose ul { padding-left: 24px; }
.prose li { padding-left: 7px; margin-bottom: 9px; }
.prose li::marker { color: var(--accent); }
.title-slide { align-content: center; padding-left: 12.5%; }
.title-slide .title-kicker { margin-bottom: 25px; color: var(--accent); font: 700 14px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.title-slide h1 { max-width: 12ch; margin: 0 0 25px; font-size: 78px; line-height: .93; letter-spacing: -.072em; }
.title-slide p { max-width: 37ch; margin: 0; color: #dbe5fa; font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.title-slide p + p { margin-top: 28px; color: var(--muted); font-size: 17px; font-weight: 400; letter-spacing: 0; }
.title-slide .title-rule { width: 72px; height: 3px; margin: 0 0 30px; background: var(--accent); }
.section-slide { padding-left: 13%; }
.section-slide .section-number { margin-bottom: 24px; color: var(--accent); font: 700 17px/1 ui-monospace, monospace; letter-spacing: .12em; }
.section-slide h1 { max-width: 10ch; margin: 0; font-size: 82px; line-height: .91; letter-spacing: -.07em; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.proof-point { min-height: 190px; padding: 22px 0 0; border-top: 2px solid rgba(91,140,255,.82); }
.proof-point__value { color: var(--fg); font-size: 52px; font-weight: 750; line-height: 1; letter-spacing: -.065em; }
.proof-point__label { margin-top: 12px; color: #dbe5fa; font-size: 17px; font-weight: 650; line-height: 1.18; }
.proof-point__detail { max-width: 25ch; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.25; }
.operating-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 38px; border-top: 1px solid rgba(177, 202, 255, .28); }
.operating-stage { min-height: 236px; padding: 22px 22px 0 0; border-right: 1px solid rgba(177, 202, 255, .22); }
.operating-stage:not(:first-child) { padding-left: 22px; }
.operating-stage:last-child { border-right: 0; }
.operating-stage__number { color: var(--accent); font: 700 13px/1 ui-monospace, monospace; letter-spacing: .1em; }
.operating-stage__title { margin: 35px 0 12px; color: var(--fg); font-size: 25px; font-weight: 720; line-height: 1; letter-spacing: -.04em; }
.operating-stage__body { color: var(--muted); font-size: 15px; line-height: 1.3; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.comparison__side { min-height: 270px; padding: 25px 28px; border: 1px solid rgba(173, 199, 255, .22); background: rgba(12, 27, 49, .7); }
.comparison__side--accent { border-top: 3px solid var(--accent); background: linear-gradient(145deg, rgba(29, 64, 126, .52), rgba(12, 27, 49, .78)); }
.comparison__label { margin-bottom: 24px; color: var(--accent); font: 700 11px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.comparison__side h3 { margin: 0 0 20px; color: var(--fg); font-size: 25px; letter-spacing: -.04em; }
.comparison__side p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.35; }
.credential-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.credential-grid > div { min-height: 160px; padding: 22px; border: 1px solid rgba(173, 199, 255, .18); background: rgba(12, 27, 49, .5); }
.credential-grid strong { display: block; margin-bottom: 12px; color: var(--fg); font-size: 20px; line-height: 1.05; letter-spacing: -.035em; }
.credential-grid span { color: var(--muted); font-size: 15px; line-height: 1.3; }
.closing-slide { align-content: center; padding-left: 13%; }
.closing-slide h1 { max-width: 11ch; margin: 0 0 28px; font-size: 78px; line-height: .92; letter-spacing: -.07em; }
.closing-slide p { margin: 0 0 10px; color: #dbe5fa; font-size: 22px; line-height: 1.28; }
.closing-slide a { color: var(--accent); text-decoration: none; }
.controls { position: absolute; right: 33px; top: 25px; display: flex; gap: 7px; z-index: 8; }
.slide-nav { width: 32px; height: 32px; border: 1px solid rgba(190,210,255,.32); background: rgba(8,19,34,.74); color: var(--fg); cursor: pointer; font-size: 20px; line-height: 1; }
.slide-nav:hover, .slide-nav:focus-visible { border-color: var(--accent); outline: none; }
.slide-nav:disabled { opacity: .28; cursor: default; }
.slide-dots { position: absolute; top: 73px; right: 43px; display: flex; gap: 6px; z-index: 8; }
.slide-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(213,226,255,.28); cursor: pointer; }
.slide-dot[aria-current="true"] { width: 21px; border-radius: 4px; background: var(--accent); }
@media (max-width: 900px) { main { padding: 0; } .deck { width: 100%; } .slide { padding: 11% 9%; } .title-slide, .section-slide, .closing-slide { padding-left: 12%; } .prose h1, .title-slide h1, .closing-slide h1 { font-size: clamp(34px, 8vw, 68px); } .prose h2 { font-size: clamp(28px, 5vw, 46px); } .prose p, .prose li { font-size: clamp(15px, 2vw, 21px); } .proof-grid, .credential-grid { gap: 11px; } .proof-point__value { font-size: clamp(27px, 5vw, 52px); } .operating-stage__title { font-size: clamp(15px, 2.2vw, 25px); } .operating-stage__body, .credential-grid span { font-size: clamp(10px, 1.35vw, 15px); } }
@media print { @page { size: 16in 9in; margin: 0; } html, body, main { width: 16in; height: auto; background: var(--bg); } main { display: block; padding: 0; } .deck { width: 16in; height: auto; overflow: visible; box-shadow: none; } .slide { display: block; width: 16in; height: 9in; break-after: page; page-break-after: always; } .slide:last-child { break-after: auto; page-break-after: auto; } .controls, .slide-dots, .slide-count { display: none; } }