/* 1600 × 900 stage. No network dependencies, auto-running motion, or decorative HUD. */
:root {
  color-scheme: dark;
  --ink: #101114;
  --paper: #f5f5f7;
  --accent: #83dfce;
  --accent-ink: #087767;
  --stage-scale: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #08090b; }
body { color: #f5f5f7; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #218eeb; outline-offset: 6px; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 650; letter-spacing: -.052em; }
h1 { font-size: 172px; line-height: .95; }
h2 { font-size: 88px; line-height: 1.035; }
h3 { font-size: 38px; line-height: 1.15; }
p { font-size: 32px; line-height: 1.4; letter-spacing: -.015em; }
img { display: block; max-width: 100%; }
.notes { display: none; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.light { --muted: #6b6c73; --accent: #087767; background: var(--paper); color: var(--ink); color-scheme: light; }
.dark { --muted: #a4a7af; background: #08090b; color: #f5f5f7; color-scheme: dark; }
.slide { position: relative; width: 1600px; height: 900px; padding: 92px 104px; overflow: hidden; isolation: isolate; }
#deck { width: 1600px; transform-origin: 0 0; }
.js body { overflow: hidden; }
.js #viewport { position: fixed; inset: 0; overflow: hidden; touch-action: pan-y; }
.js #deck { position: absolute; height: 900px; transform: scale(var(--stage-scale)); }
.js .slide { position: absolute; inset: 0; display: none; }
.js .slide.active { display: block; animation: arrive .42s ease-out both; }
.js .slide.active.no-animation { animation: none; }
@keyframes arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.js .reveal { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .35s ease, transform .35s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; visibility: visible; }
.app-icon { border-radius: 23%; width: 144px; height: 144px; object-fit: contain; }
.app-icon.small { width: 88px; height: 88px; }
.symbol { width: 92px; height: 92px; object-fit: contain; }
.light .symbol { filter: brightness(0); }
.bottom-line { position: absolute; bottom: 92px; left: 104px; right: 104px; color: var(--muted); font-size: 30px; border-top: 1px solid #d4d4d9; padding-top: 26px; }
.source-link { position: absolute; bottom: 70px; left: 104px; font-size: 26px; text-decoration: none; color: var(--accent); }
.source-link:hover { text-decoration: underline; }

/* The original opening, distilled to type, portraits, and the real team photograph. */
.title-slide { padding-top: 80px; }
.title-lockup { position: relative; }
.carplay-mark { width: 102px; height: 102px; object-fit: cover; object-position: center 55%; border-radius: 24px; margin-bottom: 34px; }
.title-slide h1 { font-size: 176px; }
.title-slide .subtitle { margin-top: 33px; font-size: 36px; letter-spacing: -.025em; }
.event-line { position: absolute; bottom: 83px; font-size: 25px; color: #a4a7af; }
.title-promise { position: absolute; right: 105px; bottom: 85px; font-size: 27px; line-height: 1.3; text-align: right; color: #a4a7af; }
/* Preserve the pre-redesign speaker treatment, scaled from 1920 to 1600. */
.speaker-slide, .thanks-slide { background: #07040d; --accent: #78dac8; }
.speaker-slide { padding-top: 234px; }
.speaker-slide h2 { font-size: 72px; text-align: center; margin-bottom: 54px; }
.speaker-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.speaker, .contact { background: rgba(22, 12, 38, .75); border: 1px solid rgba(120, 218, 200, .18); border-radius: 22px; box-shadow: inset 0 1px 0 #ffffff14; }
.speaker { display: flex; align-items: center; gap: 34px; padding: 40px 43px; min-width: 0; }
.speaker > img { width: 200px; height: 200px; flex-shrink: 0; object-fit: cover; border: 2px solid #78dac8; border-radius: 27px; }
.speaker figcaption { min-width: 0; }
.speaker h3 { font-size: 43px; line-height: 1.05; letter-spacing: -.04em; white-space: nowrap; }
.speaker-role, .speaker-meta { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: -.025em; white-space: nowrap; }
.speaker .speaker-role { font-size: 25px; color: #78dac8; margin-top: 15px; font-weight: 600; }
.speaker .speaker-meta { font-size: 21px; color: #a4a7af; margin-top: 10px; }
.friendship-slide { padding: 0; }
.friendship-copy { position: absolute; left: 100px; top: 91px; z-index: 1; }
.friendship-copy h2 { margin-top: 44px; font-size: 73px; line-height: 1.08; letter-spacing: -.055em; }
.friendship-copy p { font-size: 29px; color: #afb2b9; margin-top: 40px; }
.friendship-photo { position: absolute; right: 0; top: 0; width: 780px; height: 900px; object-fit: cover; object-position: center 39%; }
.phone-copy { position: absolute; left: 124px; top: 170px; z-index: 1; }
.phone-copy h2 { font-size: 103px; }
.phone-copy .lead { font-size: 40px; margin-top: 48px; line-height: 1.45; color: #c3c7ce; }
.phone-copy .quiet { color: var(--accent); margin-top: 40px; font-size: 28px; }
.phone-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.phone-disclosure { position: absolute; left: 124px; bottom: 36px; color: #b8bbc2; font-size: 21px; }
.full-bleed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.photo-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #000c, #0001 85%), linear-gradient(0deg, #0008, transparent 40%); }
.question-slide h2 { font-size: 122px; line-height: 1.02; margin-top: 86px; max-width: 1200px; text-shadow: 0 2px 30px #0005; }
.photo-caption { position: absolute; left: 112px; bottom: 105px; font-size: 33px; }
.image-credit { position: absolute; right: 42px; bottom: 30px; font-size: 21px; color: #d0d0d3; }
.statement-slide { display: flex; flex-direction: column; justify-content: center; }
.js .statement-slide.active { display: flex; }
.statement-slide h2 { font-size: 123px; line-height: 1.07; }

/* Teaching pages: Apple’s diagrams, open space, and readable labels. */
.basics-slide h2 { font-size: 88px; }
.device-relationship { display: grid; grid-template-columns: 310px 130px 1fr; align-items: center; margin-top: 72px; }
.device-origin { text-align: center; }
.iphone-device { position: relative; aspect-ratio: 501 / 1024; border-radius: 18% / 8.8%; overflow: hidden; background: #000; box-shadow: 0 18px 32px #10111426; }
.iphone-hardware { width: 100%; height: 100%; object-fit: contain; }
.iphone-screen { position: absolute; left: 6%; top: 3%; width: 88%; height: 94%; object-fit: contain; border-radius: 12.5% / 5.75%; }
.device-origin .iphone-device { width: 148px; margin: 0 auto 27px; }
.device-origin p { font-size: 28px; }
.relationship-arrow { font-size: 64px; color: #898b92; text-align: center; display: block; }
.carplay-template img { width: 100%; height: 342px; object-fit: contain; mix-blend-mode: multiply; }
.carplay-template figcaption { font-size: 27px; margin-top: 22px; color: #61636b; text-align: center; }
.large-template { width: 790px; justify-self: end; }
/* Cause → rule → design response. These are comparisons, not numbered steps. */
.rules-slide h2 { font-size: 88px; }
.reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 105px; }
.reason-grid > div { border-top: 2px solid #babdc5; padding-top: 30px; }
.reason-grid h3 { font-size: 36px; }
.reason-grid p { font-size: 29px; color: #50545c; margin-top: 25px; line-height: 1.4; }
.reason-grid span { display: block; font-size: 27px; color: var(--accent); margin-top: 36px; }
.rules-slide .bottom-line { font-size: 28px; }
.boundary-slide .bottom-line { font-size: 26px; bottom: 62px; padding-top: 20px; }
.entitlement-slide h2 { font-size: 102px; max-width: 670px; }
.entitlement-meaning { position: absolute; left: 104px; top: 401px; width: 615px; font-size: 31px; color: #a4a7af; line-height: 1.5; }
.milestone-list { position: absolute; left: 790px; top: 140px; right: 104px; list-style: none; margin: 0; padding: 0; }
.milestone-list li { display: flex; gap: 26px; margin-bottom: 58px; }
.milestone-number { border: 1px solid #595d65; border-radius: 50%; width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; flex: 0 0 auto; color: var(--accent); }
.milestone-list h3 { font-size: 37px; letter-spacing: -.035em; }
.milestone-list p { color: #a4a7af; font-size: 27px; margin-top: 12px; max-width: 450px; }
.category-comparison { display: grid; grid-template-columns: 1fr 1fr; margin-top: 71px; }
/* A selectable entitlement-to-template matrix. Color encodes access, not decoration. */
.category-slide { padding: 73px 90px; }
.category-slide > h2 { font-size: 76px; }
.category-intro { color: #b6bac3; font-size: 29px; margin-top: 18px; }
.category-workbench { display: grid; grid-template-columns: 377px 1fr; gap: 58px; margin-top: 35px; }
.category-picker { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid #35383e; padding-right: 23px; }
.category-picker button { display: flex; align-items: center; gap: 15px; width: 100%; min-height: 45px; padding: 6px 10px; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 4px; color: #c3c7ce; background: transparent; text-align: left; font-size: 26px; line-height: 1.2; letter-spacing: -.025em; transition: color .2s, background .2s, border-color .2s; }
.category-picker button img { width: 27px; height: 27px; object-fit: contain; filter: brightness(0) invert(1); }
.category-picker button > span { margin-left: auto; opacity: 0; }
.category-picker button:hover { background: #1a2423; color: #fff; }
.category-picker button[aria-pressed="true"] { border-left-color: #83dfce; background: #19332e; color: #c1fff3; }
.category-picker button[aria-pressed="true"] > span { opacity: 1; }
.category-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.category-heading h3 { font-size: 43px; }
#category-version { font-size: 22px; color: #b6bac3; white-space: nowrap; }
#category-task { font-size: 29px; color: #d1d4da; margin-top: 8px; }
.entitlement-key { display: block; font: 24px/1.4 "SFMono-Regular", Consolas, monospace; margin-top: 15px; }
.entitlement-key > span { color: #a4a7af; }
.entitlement-key > strong { display: block; font-weight: 500; font-size: 29px; color: #83dfce; }
.template-board { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 22px 0 0; }
.template-board li { min-height: 83px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 13px; border: 1px solid #3c4048; border-radius: 7px; background: #111318; color: #b4b8c0; transition: color .3s, border-color .3s, background .3s; }
.template-board li > span { font-size: 25px; font-weight: 550; letter-spacing: -.03em; }
.template-board .template-status { font-size: 20px; line-height: 1.3; margin-top: 6px; color: #a4a7af; }
.template-board .is-available { color: #e9fff9; background: #17372f; border-color: #528e7e; }
.template-board .is-available .template-status { color: #a1e4d2; }
.template-board .is-versioned { background: #182f36; border-color: #527e92; }
.template-board .is-versioned .template-status { color: #b6def1; }
#category-rule { font-size: 25px; color: #cdd2db; margin-top: 18px; line-height: 1.35; }
.category-footer { position: absolute; left: 90px; right: 90px; bottom: 47px; border-top: 1px solid #41464e; padding-top: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 25px; }
.category-footer p { font-size: 29px; color: #f5f5f7; font-weight: 550; }
.category-footer a { font-size: 21px; color: #bdc4cf; text-decoration: none; }
.category-footer a:hover { text-decoration: underline; }
.category { padding: 15px 30px 20px 0; }
.category + .category { border-left: 1px solid #cccdd2; padding-left: 70px; }
.category .symbol { width: 78px; height: 78px; margin-bottom: 24px; }
.category h3 { font-size: 39px; }
.category p { color: #666972; font-size: 29px; margin: 14px 0 34px; }
.category code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 25px; color: #62656b; line-height: 1.6; }
.category code strong { color: #0a796b; font-weight: 600; font-size: 30px; }
.separate code strong { color: #53565f; }
.template-gallery-slide h2 { font-size: 86px; }
.template-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 104px; }
.template-gallery img { width: 100%; height: 205px; object-fit: contain; mix-blend-mode: multiply; }
.template-gallery figcaption { font-size: 32px; text-align: center; margin-top: 30px; font-weight: 600; letter-spacing: -.025em; }
.template-gallery figcaption span { display: block; font-size: 24px; margin-top: 20px; font-weight: 450; color: var(--accent); }
.chosen-template figcaption { color: var(--accent); }
.template-overview-slide h2 { font-size: 86px; }
.template-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 36px; margin-top: 48px; }
.template-overview img { width: 100%; height: 168px; object-fit: contain; mix-blend-mode: multiply; }
.template-overview figcaption { font-size: 28px; text-align: center; margin-top: 14px; font-weight: 600; letter-spacing: -.025em; }
.template-overview-slide .bottom-line { font-size: 28px; bottom: 68px; }
.driver-flow { display: grid; grid-template-columns: 1fr 90px 1fr 90px 260px; align-items: start; margin-top: 127px; }
.driver-flow figure > img { height: 230px; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.driver-flow .maps-destination > img { width: 180px; height: 230px; margin: 0 auto; }
.flow-arrow { font-size: 55px; color: #8b8d95; text-align: center; margin-top: 80px; }
.driver-flow figcaption { margin-top: 26px; text-align: center; font-size: 28px; line-height: 1.4; }
.driver-flow figcaption span { display: block; font-size: 38px; font-weight: 600; letter-spacing: -.04em; margin-bottom: 8px; }
.ai-slide h2 { font-size: 126px; margin-top: 55px; }
.authorship-lines { position: absolute; left: 910px; right: 100px; top: 227px; }
.authorship-lines p { font-size: 38px; margin-bottom: 37px; padding-bottom: 37px; border-bottom: 1px solid #3a3b41; line-height: 1.25; }
.authorship-lines p:last-child { border: 0; }
.context-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 111px; }
.context-columns > div { border-top: 2px solid #191b20; padding-top: 30px; }
.context-columns h3 { font-size: 42px; }
.context-columns p { color: #676a72; font-size: 31px; margin-top: 24px; line-height: 1.55; }
.scene-slide h2 { font-size: 91px; }
.scene-flow { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 98px 0 0; gap: 30px; }
.scene-flow li { position: relative; border-top: 2px solid #40434a; padding-top: 27px; transition: opacity .25s ease, border-color .25s ease; }
.js .scene-flow li { opacity: .42; }
.js .scene-flow li.is-focus, .js .scene-flow li.is-past { opacity: 1; }
.scene-flow li.is-focus { border-color: #83dfce; }
.scene-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -21px; top: -28px; font-size: 36px; color: #a4a7af; background: #08090b; padding: 0 4px; }
.scene-number { display: block; font-size: 24px; color: #83dfce; margin-bottom: 18px; }
.scene-flow h3 { font-size: 38px; line-height: 1.12; }
.scene-flow p { font-size: 26px; color: #aaadb4; margin-top: 23px; }
.scene-callout { position: absolute; bottom: 65px; left: 104px; right: 104px; border-top: 1px solid #40434a; padding-top: 22px; }
.scene-callout p { font-size: 27px; color: #c0c3ca; }
.scene-callout p + p { font-size: 24px; color: #a4a7af; margin-top: 10px; }
/* The boundary shows execution location, not another app or a second database. */
.shared-data-slide h2 { font-size: 78px; }
.architecture { display: grid; grid-template-columns: 1024px 1fr; gap: 60px; align-items: center; margin-top: 55px; }
.app-process { border: 2px solid #b7bbc4; border-radius: 22px; padding: 30px 34px 34px; background: #fff; }
.app-process > h3 { font-size: 30px; margin-bottom: 32px; }
.app-internals { display: grid; grid-template-columns: 390px 1fr; gap: 85px; align-items: center; }
.architecture h4 { font-size: 29px; line-height: 1.18; letter-spacing: -.03em; font-weight: 600; margin: 0; }
.shared-services p { margin-top: 18px; font-size: 25px; color: #555963; }
.scene-branches { position: relative; border-left: 2px solid #abb1bb; padding-left: 48px; }
.scene-branches::before { content: ""; width: 52px; height: 2px; background: #abb1bb; position: absolute; left: -54px; top: 50%; }
.scene-branches > div { position: relative; padding: 15px 0; }
.scene-branches > div::before { content: ""; width: 32px; height: 2px; background: #abb1bb; position: absolute; left: -48px; top: 32px; }
.scene-branches p { font-size: 24px; color: #555963; line-height: 1.35; margin-top: 9px; }
.carplay-branch h4 { color: var(--accent); }
.car-endpoint { align-self: end; padding-bottom: 12px; text-align: center; }
.car-endpoint img { width: 100%; height: 128px; object-fit: contain; mix-blend-mode: multiply; margin: 10px 0 14px; }
.car-endpoint h3 { font-size: 30px; }
.car-endpoint p { font-size: 24px; color: #555963; margin-top: 5px; }
.outbound-label, .inbound-label { display: block; font-size: 23px; color: var(--accent); }
.inbound-label { margin-top: 17px; }
.shared-data-slide .bottom-line { font-size: 29px; bottom: 68px; }
.data-cycle-slide h2 { font-size: 88px; }
.data-cycle { display: grid; grid-template-columns: 330px 52px 392px 52px 1fr; gap: 16px; margin-top: 58px; align-items: start; }
.cycle-stage h3 { font-size: 34px; margin-bottom: 26px; }
.station-record, .template-record { border-left: 3px solid #a8aeb9; padding-left: 22px; }
.template-record { border-color: var(--accent); }
.station-record p, .template-record p { font-size: 27px; line-height: 1.3; padding: 9px 0; }
.cycle-stage .cycle-detail { font-size: 24px; color: #555963; margin-top: 24px; }
.data-cycle > .flow-arrow { margin-top: 115px; font-size: 44px; }
.cycle-stage > img { width: 100%; height: 175px; object-fit: contain; mix-blend-mode: multiply; }
.cycle-stage figcaption { font-size: 24px; color: #555963; line-height: 1.35; margin-top: 15px; }
.callback-path { display: flex; gap: 22px; align-items: center; margin-top: 27px; color: var(--accent); }
.callback-path > span { font-size: 44px; }
.callback-path p { font-size: 29px; }
.data-cycle-slide .bottom-line { font-size: 28px; bottom: 62px; }
.iteration-slide h2 { font-size: 112px; margin-top: 38px; }
.iteration-notes { position: absolute; left: 860px; top: 88px; right: 90px; }
.mcp-brand { margin: 0 0 18px; }
.mcp-brand img { display: block; width: 420px; height: auto; }
.mcp-lead { font-size: 27px; font-weight: 400; color: #a4a7af; margin: 0 0 22px; line-height: 1.3; }
.iteration-notes > p.reveal { font-size: 36px; font-weight: 580; margin: 0 0 28px; line-height: 1.25; }
.iteration-notes > p.reveal span { font-size: 26px; font-weight: 400; color: #a4a7af; display: block; margin-top: 10px; }
.mcp-actions { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mcp-actions li { font-family: "SFMono-Regular", Consolas, monospace; font-size: 24px; letter-spacing: -.02em; color: #83dfce; padding-left: 22px; position: relative; }
.mcp-actions li::before { content: "→"; position: absolute; left: 0; color: #83dfce; }
/* A real phone runs the app; the Mac supplies the simulated car environment. */
.simulator-slide h2 { font-size: 88px; line-height: 1.02; }
.simulator-lead { margin-top: 12px; font-size: 31px; color: #666972; }
.simulator-layout { display: grid; grid-template-columns: 700px 1fr; gap: 64px; margin-top: 29px; align-items: start; }
.simulator-connection { padding-top: 0; }
.simulator-rig { display: grid; grid-template-columns: 120px 72px 1fr; gap: 12px; align-items: center; }
.simulator-phone, .simulator-mac { text-align: center; }
.simulator-phone .iphone-device { width: 104px; margin: 0 auto 23px; }
.simulator-rig h3 { font-size: 28px; letter-spacing: -.035em; }
.simulator-rig p { font-size: 21px; color: #666972; margin-top: 6px; }
.simulator-cable { align-self: center; margin-top: -70px; color: var(--accent); }
.simulator-cable > span:first-child { display: block; font-size: 23px; text-align: center; margin-bottom: 12px; }
.cable-line { display: block; height: 3px; background: var(--accent); position: relative; }
.cable-line::before, .cable-line::after { content: ""; position: absolute; width: 8px; height: 11px; top: -4px; border-radius: 2px; background: var(--accent); }
.cable-line::before { left: 0; }
.cable-line::after { right: 0; }
.simulator-laptop { position: relative; padding: 0 18px 12px; margin-bottom: 20px; }
.simulator-laptop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-radius: 2px 2px 12px 12px; background: #9a9ca3; }
.simulator-mac-screen { height: 190px; padding: 10px; border: 2px solid #4b4c52; border-radius: 17px 17px 0 0; background: #101114; box-shadow: 0 14px 28px #10111426, inset 0 1px 0 #ffffff26; }
.simulator-mac-screen img { width: 100%; height: 100%; object-fit: contain; }
.simulator-connection figcaption { margin-top: 14px; text-align: center; font-size: 20px; color: #666972; }
.simulator-steps { list-style: none; padding: 0; margin: 0; }
.simulator-steps li { display: flex; gap: 17px; margin-bottom: 15px; }
.simulator-steps li > span { width: 20px; flex-shrink: 0; font-size: 23px; line-height: 37px; color: var(--accent); }
.simulator-steps h3 { font-size: 33px; }
.simulator-steps p { font-size: 24px; line-height: 1.28; color: #666972; margin-top: 4px; }
.simulator-steps strong { font-weight: 600; color: var(--ink); }
.simulator-version-note { position: absolute; left: 104px; right: 104px; bottom: 54px; border-top: 1px solid #d4d4d9; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.simulator-version-note p { font-size: 20px; color: #4f525a; }
.simulator-version-note a { flex-shrink: 0; font-size: 21px; color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.testing-slide h2 { font-size: 105px; }
.test-sequence { display: flex; gap: 48px; margin-top: 129px; }
.test-sequence p { font-size: 49px; padding-top: 26px; border-top: 1px solid #46484e; flex: 1; letter-spacing: -.045em; }
.testing-context { position: absolute; left: 104px; bottom: 117px; color: #a4a7af; font-size: 30px; }

/* Real, unmodified app screenshots in a disclosed illustrative car setting. */
.car-reveal-slide { padding: 0; }
.car-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #000a, transparent 28%, transparent 65%, #000e); }
.car-reveal-slide > h2 { position: absolute; top: 65px; left: 100px; font-size: 72px; }
.walkthrough-display { position: absolute; left: 32.6%; top: 29.8%; width: 48.8%; height: 33%; transition: left .5s ease, top .5s ease, width .5s ease, height .5s ease; }
.walkthrough-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: screen-in .5s ease-out; }
.walkthrough-frame > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: #08090b; border: 6px solid #121317; border-radius: 22px; box-shadow: 0 0 0 1px #ffffff30, 0 22px 46px #0008; }
.car-reveal-slide[data-step]:not([data-step="0"]) .walkthrough-display { left: 10.5%; top: 21.5%; width: 79%; height: 55%; }
.car-reveal-slide .full-bleed { transition: opacity .5s ease; }
.car-reveal-slide[data-step]:not([data-step="0"]) .full-bleed { opacity: .28; }
.walkthrough-caption { position: absolute; left: 104px; bottom: 112px; }
.walkthrough-caption p { font-size: 64px; font-weight: 650; letter-spacing: -.045em; line-height: 1.1; }
.walkthrough-disclosure { position: absolute; left: 108px; bottom: 57px; font-size: 23px; color: #d2d4d9; }
.car-payoff { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 104px; animation: screen-in .5s ease-out; }
.car-payoff h3 { font-size: 116px; line-height: 1.04; letter-spacing: -.052em; }
.car-payoff p { font-size: 32px; color: #d2d4d9; margin-top: 48px; }
@media screen {
  .car-reveal-slide[data-step="4"] > h2,
  .car-reveal-slide[data-step="4"] .walkthrough-display,
  .car-reveal-slide[data-step="4"] .walkthrough-caption,
  .car-reveal-slide[data-step="4"] .walkthrough-disclosure { display: none; }
  .car-reveal-slide[data-step="4"] .full-bleed { opacity: .12; }
}
@keyframes screen-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.siri-slide { padding-top: 80px; }
.voice-symbol { width: 72px; height: 80px; object-fit: contain; margin-bottom: 48px; filter: brightness(0) invert(1); }
.siri-slide h2 { font-size: 99px; line-height: 1.11; max-width: 1350px; }
.voice-explanation { margin-top: 48px; font-size: 31px; color: #a4a7af; }
.takeaways { list-style: none; padding: 0; margin: 48px 0 0; }
.takeaways li { display: flex; gap: 28px; margin-bottom: 24px; }
.takeaways li > span { font-size: 29px; color: var(--accent); width: 52px; padding-top: 7px; }
.takeaways h3 { font-size: 36px; }
.takeaways p { font-size: 26px; color: #666972; margin-top: 6px; }
.thanks-slide { padding-top: 118px; }
.thanks-slide h2 { font-size: 72px; text-align: center; }
.thanks-subtitle { color: #d1d3da; font-size: 29px; margin-top: 16px; text-align: center; }
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; margin-top: 47px; }
.contact { display: flex; align-items: center; gap: 22px; padding: 27px 30px; min-width: 0; }
.contact .thanks-photo { width: 140px; height: 140px; flex-shrink: 0; object-fit: cover; border: 2px solid #78dac8; border-radius: 23px; }
.thanks-copy { flex: 1; min-width: 0; }
.contact h3 { font-size: 34px; line-height: 1.05; white-space: nowrap; }
.contact .speaker-role { font-size: 21px; color: #78dac8; margin-top: 12px; font-weight: 600; }
.contact .speaker-meta { font-size: 18px; color: #a4a7af; margin-top: 8px; }
.thanks-qr { display: flex; flex-direction: column; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; }
.thanks-qr img { width: 134px; height: 134px; padding: 7px; object-fit: contain; background: #fff; border-radius: 14px; }
.thanks-qr span { font-size: 18px; color: #78dac8; }
.apps-footer { margin-top: 42px; padding-top: 26px; border-top: 1px solid #ffffff38; }
.apps-title { text-align: center; font-size: 25px; font-weight: 600; margin-bottom: 26px; }
.app-collection { display: flex; justify-content: center; gap: 60px; }
.app-collection a { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; min-width: 142px; }
.app-collection img { width: 78px; height: 78px; object-fit: contain; border-radius: 18px; }
.app-collection span { font-size: 23px; color: #bec1c7; }

/* Presenter UI lives outside the slide, at device-pixel size. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-200%); background: #fff; color: #111; padding: 14px; border-radius: 8px; }
.skip-link:focus { transform: none; }
.toolbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; z-index: 20; padding: 5px 8px; border: 1px solid #ffffff26; border-radius: 12px; background: #181a1fed; box-shadow: 0 3px 15px #0002; opacity: .12; transition: opacity .2s; }
.toolbar:hover, .toolbar:focus-within, body.controls-visible .toolbar, .is-rehearsing .toolbar { opacity: 1; }
.toolbar button { border: 0; color: #eaedf2; background: transparent; padding: 7px 11px; min-height: 36px; border-radius: 6px; white-space: nowrap; font-size: 13px; }
.toolbar button:hover { background: #ffffff1a; }
.toolbar button:disabled { opacity: .3; cursor: default; }
.toolbar button[aria-pressed="true"] { background: #305d55; }
.toolbar-divider { height: 18px; border-left: 1px solid #ffffff30; margin: 0 4px; }
.progress-track { position: fixed; bottom: 0; left: 0; right: 0; height: 2px; z-index: 21; background: #ffffff10; }
#progress { height: 100%; width: 0; background: #83dfce; transition: width .25s ease; }
#rehearsal { position: fixed; top: 0; bottom: 0; right: 0; width: min(440px, 38vw); background: #17191e; border-left: 1px solid #ffffff15; z-index: 15; overflow-y: auto; padding: 28px 28px 45px; }
#rehearsal header > p { font-size: 13px; color: #aeb4bf; margin-bottom: 20px; }
#rehearsal h2 { font-size: 30px; letter-spacing: -.03em; line-height: 1.14; margin-top: 30px; }
#rehearsal-timing { color: #83dfce; font-size: 14px; margin-top: 12px; }
.timer-group { display: flex; gap: 8px; align-items: center; }
#timer { font: 26px "SFMono-Regular", Consolas, monospace; margin-right: auto; }
#rehearsal button { color: #e5e7ed; background: #2c3038; border: 1px solid #454a55; border-radius: 6px; padding: 7px 9px; font-size: 12px; }
#speaker-notes p { font-size: 17px; line-height: 1.55; margin-top: 19px; color: #e2e4e9; letter-spacing: normal; }
#speaker-notes .cue { color: #a8b1c2; font-size: 15px; font-style: italic; }
#speaker-notes .transition { border-left: 2px solid #83dfce; padding-left: 14px; color: #9ae5d7; }
#speaker-notes .source { font-size: 13px; color: #9bA3b2; overflow-wrap: anywhere; }
#rehearsal footer { border-top: 1px solid #ffffff24; margin-top: 26px; padding-top: 18px; }
#next-slide { font-size: 15px; color: #b3bac6; line-height: 1.4; margin-bottom: 16px; }
body.is-rehearsing #viewport { right: min(440px, 38vw); }
body.is-rehearsing .toolbar { left: calc((100vw - min(440px, 38vw)) / 2); }
dialog { border: 1px solid #4b505b; border-radius: 18px; padding: 28px; color: #eceff4; background: #181a20; width: min(1140px, calc(100vw - 40px)); max-height: 84vh; box-shadow: 0 30px 100px #0008; }
dialog::backdrop { background: #05060bc9; backdrop-filter: blur(9px); }
dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
dialog h2 { font-size: 30px; letter-spacing: -.04em; }
dialog header button { color: #fff; border: 0; background: transparent; font-size: 32px; padding: 0 8px; }
#overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.overview-item { border: 1px solid #3c414b; background: #23262e; color: #f1f3f6; padding: 16px; text-align: left; border-radius: 7px; min-height: 98px; font-size: 16px; line-height: 1.3; }
.overview-item > span { display: block; font-size: 12px; color: #98a2b3; margin-bottom: 9px; }
.overview-item[aria-current="true"] { border-color: #83dfce; background: #203b36; }
#help { max-width: 670px; }
#help dl { display: grid; grid-template-columns: 1fr 1.3fr; gap: 15px 20px; font-size: 15px; }
#help dt { font-weight: 600; color: #96e2d4; }
#help dd { margin: 0; color: #c5cbd5; }
#help > p { font-size: 14px; color: #9da7b7; margin-top: 30px; }
#blackout { position: fixed; inset: 0; background: #000; z-index: 90; display: grid; place-items: end center; padding-bottom: 30px; }
#blackout span { font-size: 13px; opacity: 0; transition: opacity .2s; }
#blackout:hover span { opacity: .5; }
#notice { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #32383f; color: white; padding: 14px 22px; max-width: 90vw; border-radius: 9px; z-index: 100; font-size: 15px; }
.no-script { position: fixed; bottom: 10px; left: 10px; background: #fff; color: #111; padding: 14px; font-size: 16px; z-index: 100; }
@media (max-width: 760px) {
  .toolbar { bottom: 10px; gap: 0; padding: 3px; }
  .toolbar button { font-size: 11px; padding: 6px 8px; min-height: 36px; }
  #open-presenter, .toolbar-divider { display: none; }
  body.is-rehearsing #viewport { right: 0; bottom: 46vh; }
  #rehearsal { top: 54vh; width: 100%; border-left: 0; border-top: 1px solid #ffffff26; padding: 20px 25px 75px; }
  body.is-rehearsing .toolbar { left: 50%; }
  #rehearsal h2 { margin-top: 20px; }
  #overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@page { size: 1600px 900px; margin: 0; }
@media print {
  html, body, .js body { overflow: visible !important; background: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #viewport, .js #viewport, body.is-rehearsing #viewport { position: static !important; overflow: visible; width: 1600px; }
  #deck, .js #deck { position: static; width: 1600px; height: auto; transform: none !important; }
  .slide, .js .slide, .js .slide.active { display: block !important; position: relative; break-after: page; page-break-after: always; animation: none; }
  .slide:last-child { break-after: auto; }
  .js .statement-slide.active, .statement-slide { display: flex !important; }
  .reveal, .js .reveal, .scene-flow li, .js .scene-flow li { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  #toolbar, #rehearsal, .progress-track, dialog, #blackout, #notice, .skip-link, .no-script, .sr-only { display: none !important; }
  .car-reveal-slide [data-cue] { display: none !important; }
  .car-reveal-slide [data-cue="1"] { display: flex !important; }
  .walkthrough-caption [data-cue="1"] { display: block !important; }
  .car-reveal-slide .walkthrough-display { left: 10.5%; top: 21.5%; width: 79%; height: 55%; }
  .car-reveal-slide .full-bleed { opacity: .28; }
}