/* Space Eagle talk deck.
   Story layer: colour world of the Hidden Economics deck (Keynote export, background sampled 62,66,95).
   Flight Control: elements of the original Vue dashboard, recoloured into the same palette. */
@font-face { font-family: "Nunito"; src: url(assets/fonts/nunito-latin.woff2) format("woff2"); font-weight: 200 1000; font-display: block; }
:root {
  --slate: #3f425e; --slate-2: #363954; --slate-3: #2f3150; --line: #5d6080; --muted: #a0a2b8; --ink2: #d6d7e2;
  --orange: #f39c4d; --teal: #2ea9c8; --pink: #de6483; --green: #529c5e;
  --paper: #f8f4ea; --paper-ink: #2c2e45; --paper-muted: #6f7088; --paper-line: #ddd6c6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body { font-family: "Nunito", system-ui, sans-serif; color: #fff; }
#viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 1920px; height: 1080px; flex: none; transform-origin: center center; background: var(--slate); overflow: hidden; }
#counter { position: fixed; right: 12px; bottom: 8px; font: 12px "Nunito", sans-serif; color: rgba(255,255,255,.3); z-index: 99; }

.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; background: var(--slate); }
.slide.active { opacity: 1; visibility: visible; transition: opacity .5s ease; }

.logo { position: absolute; top: 34px; right: 40px; width: 44px; height: 44px; z-index: 60; transition: opacity .3s; }
.chips { display: flex; gap: 12px; }
.chips.top { position: absolute; top: 40px; left: 56px; z-index: 50; }
.chip { font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 5px 14px; border-radius: 6px; white-space: nowrap; }
.c-orange { background: var(--orange); } .c-teal { background: var(--teal); } .c-pink { background: var(--pink); } .c-green { background: var(--green); }
.c-flash { background: var(--paper-ink); color: var(--paper); }

/* ---------- title ---------- */
.title-slide { display: flex; flex-direction: column; justify-content: center; padding: 0 160px 30px; }
.title-slide h1 { font-size: 118px; font-weight: 300; line-height: 1.08; margin-top: 44px; max-width: 1500px; }
.title-slide h1 b { font-weight: 800; }
.title-slide .sub { font-size: 50px; color: var(--ink2); font-weight: 600; margin-top: 26px; }
.title-gauges { display: grid; grid-template-columns: repeat(4, 260px); gap: 30px; margin: 70px 0 0 -14px; }
.title-slide .byline { font-size: 28px; color: var(--muted); margin-top: 34px; letter-spacing: .04em; }

/* ---------- photos and video ---------- */
.slide.photo { background-size: cover; background-position: center; }
.video-full { background: #000; }
.video-full video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.black-start video { opacity: 0; transition: opacity .2s; }
.black-start.played video { opacity: 1; }
.black-start.ended video { opacity: 0; }
.cap { position: absolute; left: 56px; bottom: 56px; z-index: 5; display: flex; align-items: center; gap: 18px; background: var(--slate); padding: 16px 26px; border-radius: 10px; box-shadow: 0 6px 30px rgba(0,0,0,.25); max-width: 1500px; }
.cap-text { font-size: 34px; font-weight: 700; }
.slide[data-tl] .cap { bottom: 150px; }
.diptych { position: absolute; inset: 104px 56px 56px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.slide[data-tl] .diptych { bottom: 150px; }
.diptych .pic, .duo .pic { background-size: cover; background-position: center; border-radius: 12px; }
.duo { position: absolute; inset: 120px 56px 150px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vtrio { position: absolute; left: 56px; right: 56px; top: 110px; bottom: 270px; display: flex; gap: 24px; justify-content: center; }
.vtrio video { height: 100%; border-radius: 12px; object-fit: cover; }

/* ---------- split: media + text ---------- */
.split-media { display: grid; grid-template-columns: 1fr 1fr; }
.sm-media { margin: 120px 0 80px 56px; border-radius: 14px; overflow: hidden; position: relative; background: #000; }
.sm-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-media.photo-cover { background-size: cover; background-position: center; }
.sm-text { display: flex; flex-direction: column; justify-content: center; padding: 100px 110px 60px 90px; }
.huge { font-size: 92px; font-weight: 300; line-height: 1.08; }
.huge b { font-weight: 800; }
.eyebrow { font-size: 30px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.tag { font-size: 34px; color: var(--muted); margin-top: 34px; }
ul.kit { list-style: none; }
ul.kit li { font-size: 44px; font-weight: 700; padding: 13px 0; border-bottom: 1px solid var(--line); }
ul.kit li span { font-weight: 400; color: var(--muted); font-size: 32px; margin-left: 12px; }
ul.kit li:last-child { border-bottom: 0; }
.sm-media.chart { background: #fff; }
.sm-media.chart img, .sm-media.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chart .route { fill: none; stroke: var(--pink); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 2 26; }
.chart .garden { fill: var(--green); stroke: #fff; stroke-width: 5; }
.chart .lbl { font: 800 34px "Nunito"; fill: var(--paper-ink); paint-order: stroke; stroke: #fff; stroke-width: 8px; }
.chart .lbl.zone { fill: var(--pink); }

/* ---------- headings, statements ---------- */
.slide-h { position: absolute; top: 140px; left: 160px; right: 160px; font-size: 72px; font-weight: 800; }
.slide-h b { color: var(--teal); }
.statement { display: flex; flex-direction: column; justify-content: center; padding: 0 160px 40px; }
.statement .mid { font-size: 76px; font-weight: 300; line-height: 1.3; }
.statement .mid b { font-weight: 800; }

/* ---------- software ---------- */
.arch { position: absolute; left: 160px; right: 160px; top: 430px; display: grid; grid-template-columns: 1fr 200px 1fr 200px 1fr; align-items: stretch; }
.arch .node { background: var(--slate-2); border: 2px solid var(--line); border-radius: 16px; height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; text-align: center; }
.arch .k { font-size: 52px; font-weight: 800; }
.arch .v { font-size: 30px; color: var(--muted); }
.arch .link { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 28px; color: var(--muted); }
.arch .link::after { content: ""; width: 150px; height: 4px; background: var(--line); margin-top: 14px; }

/* ---------- self healing ---------- */
.heal { position: absolute; left: 160px; right: 160px; top: 330px; display: flex; flex-direction: column; gap: 36px; }
.watchdog { background: var(--pink); border-radius: 16px; padding: 46px 50px; display: flex; align-items: baseline; gap: 40px; }
.watchdog .w-k { font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }
.watchdog .w-v { font-size: 64px; font-weight: 800; }
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.state { border-radius: 14px; padding: 34px 30px; background: var(--slate-2); border-top: 10px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.state .s-k { font-size: 40px; font-weight: 800; }
.state .s-v { font-size: 32px; color: var(--muted); }
.state.ok { border-top-color: var(--green); } .state.slow { border-top-color: var(--teal); } .state.off { border-top-color: var(--pink); } .state.low { border-top-color: var(--orange); }

/* ---------- signal check (present day) ---------- */
.checkcard { position: absolute; right: 80px; top: 140px; width: 620px; background: rgba(54,57,84,.94); border-radius: 18px; padding: 36px 40px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cc-h { font-size: 26px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.cc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); font-size: 40px; }
.cc-row b { font-weight: 800; } .cc-row .bad { color: var(--pink); } .cc-row .warn { color: var(--orange); }

/* ---------- cold test readings ---------- */
.readings { position: absolute; left: 160px; right: 160px; top: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.reading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: start; }
.reading .r-h { grid-column: 1 / 4; font-size: 40px; font-weight: 800; margin-bottom: 10px; }

/* ---------- permit ---------- */
.permit { position: absolute; left: 160px; right: 160px; top: 300px; display: grid; grid-template-columns: 4fr 5fr; gap: 60px; }
.p-col { display: flex; flex-wrap: wrap; gap: 18px; align-content: flex-start; }
.p-h { width: 100%; font-size: 30px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.p-tile { background: var(--slate-2); border-radius: 12px; padding: 24px 26px; font-size: 34px; font-weight: 800; line-height: 1.2; flex: 1 1 40%; }
.p-tile span { font-weight: 400; color: var(--muted); font-size: 28px; }
.p-tile.hot { background: var(--pink); flex-basis: 100%; }
.p-tile.hot span { color: #fff; }

/* ---------- SMS ---------- */
.sms-slide .phone { position: absolute; left: 200px; top: 130px; bottom: 170px; width: 640px; background: #f2f2f6; border-radius: 40px; padding: 50px 36px; display: flex; flex-direction: column; gap: 22px; }
.bubble { display: flex; align-items: flex-end; gap: 14px; max-width: 90%; }
.bubble span { font-size: 32px; line-height: 1.3; padding: 18px 24px; border-radius: 26px; }
.bubble i { font-style: normal; font-size: 22px; color: #8e8ea0; font-variant-numeric: tabular-nums; }
.bubble.me { align-self: flex-end; flex-direction: row-reverse; }
.bubble.me span { background: #34c759; color: #fff; }
.bubble.it span { background: #e3e3ea; color: #1c1c1e; }
.bubble.wait span { color: #8e8ea0; letter-spacing: .2em; }
.sms-side { position: absolute; left: 960px; right: 140px; top: 0; bottom: 140px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- numbers, 3D track ---------- */
.num-gauges { position: absolute; left: 120px; right: 120px; top: 230px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.num-gauges .d-g .val { font-size: 64px; }
.num-gauges .d-g .sub { font-size: 22px; color: var(--muted); margin-top: 6px; max-width: 220px; text-align: center; }
.track-slide canvas { position: absolute; left: 0; top: 60px; width: 1920px; height: 1000px; }

/* ---------- end ---------- */
.end-slide .end-img { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: brightness(.65); }
.end-card { position: absolute; left: 140px; bottom: 140px; display: flex; flex-direction: column; gap: 18px; }
.end-card .qr { background: #fff; border-radius: 22px; padding: 26px; width: 330px; height: 330px; }
.end-card .qr img { width: 100%; height: 100%; display: block; }
.end-l { font-size: 34px; font-weight: 800; }
.end-n { font-size: 26px; color: var(--ink2); }

/* ---------- Flight Control dashboard ---------- */
.dash2 { position: absolute; left: 56px; right: 56px; top: 100px; bottom: 150px; display: flex; flex-direction: column; gap: 18px; }
.d-head { display: flex; align-items: center; gap: 40px; height: 52px; }
.d-title { font-size: 32px; font-weight: 800; }
.d-status { display: flex; gap: 30px; flex: 1; }
.d-st { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.d-st i { width: 18px; height: 18px; border-radius: 50%; background: var(--pink); }
.d-st.ok i { background: var(--green); }
.d-st .t { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.d-st .s { color: var(--muted); }
.d-speed { font-size: 22px; font-weight: 800; color: var(--orange); letter-spacing: .08em; text-transform: uppercase; }
.d-body { flex: 1; display: grid; grid-template-columns: 1fr 640px; gap: 34px; min-height: 0; }
.d-cam { background: var(--slate-2); border-radius: 14px; overflow: hidden; align-self: center; aspect-ratio: 16 / 9; width: 100%; }
.d-cam img, .d-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-side { display: flex; flex-direction: column; gap: 14px; }
.d-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.d-g { position: relative; aspect-ratio: 1.12; }
.d-g svg { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); }
.d-g path { fill: none; stroke: var(--line); stroke-width: 6; }
.d-g path.on { stroke: var(--orange); }
.dash-slide[data-tl="box"] .d-g path.on { stroke: var(--teal); }
.d-g .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 18px; line-height: 1.12; }
.d-g .lab { font-size: 22px; color: var(--ink2); }
.d-g .val { font-size: 56px; font-weight: 800; font-variant-numeric: tabular-nums; }
.d-g .val.long { font-size: 46px; }
.d-g .unit { font-size: 22px; color: var(--muted); }
.d-sensors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.d-s { display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: baseline; }
.d-s .lab { grid-column: 1 / 4; font-size: 18px; color: var(--muted); }
.d-s .bar { grid-column: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; align-self: center; }
.d-s .bar i { display: block; height: 100%; background: var(--teal); }
.d-s .val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.d-s .unit { font-size: 18px; color: var(--muted); min-width: 40px; }
.d-modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.d-modal span { font-size: 66px; font-weight: 800; background: var(--pink); padding: 16px 40px; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.dash2.lost .d-modal { display: flex; }
.dash2.lost .d-body { opacity: .4; transition: opacity .6s; }

/* ---------- day timeline ---------- */
#timeline { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; z-index: 40; pointer-events: none; transition: opacity .4s; background: linear-gradient(to top, rgba(54,57,84,.95) 0, rgba(54,57,84,.88) 70%, rgba(54,57,84,0) 100%); }
#timeline.hidden { opacity: 0; }
#timeline svg { position: absolute; left: 0; top: 0; }
.tl-base { stroke: #5d6080; stroke-width: 3; }
.tl-past { stroke: var(--orange); stroke-width: 5; stroke-linecap: round; }
.tl-past.box { stroke: var(--teal); }
.tl-hour { stroke: #5d6080; stroke-width: 2; }
.tl-hlabel { fill: #a0a2b8; font: 600 20px "Nunito", sans-serif; text-anchor: middle; }
.tl-ev { fill: #fff; } .tl-ev.box { fill: var(--teal); }
.tl-elabel { fill: #d6d7e2; font: 700 20px "Nunito", sans-serif; text-anchor: middle; }
.tl-now { fill: var(--orange); stroke: #fff; stroke-width: 4; } .tl-now.box { fill: var(--teal); }
.tl-area { fill: rgba(46,169,200,.25); }
.tl-curve { fill: none; stroke: var(--teal); stroke-width: 3; }
.tl-clock { position: absolute; top: 2px; transform: translateX(-50%); background: var(--orange); color: #fff; border-radius: 8px; padding: 4px 14px; font-size: 30px; white-space: nowrap; display: flex; gap: 12px; align-items: baseline; }
.tl-clock b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-clock span { font-size: 22px; font-weight: 700; }
.tl-clock.box { background: var(--teal); }

/* ---------- flashbacks: variant A, paper (default) ---------- */
.fb-a .slide.flash { background: var(--paper); color: var(--paper-ink); }
.fb-a .flash .slide-h, .fb-a .flash .huge, .fb-a .flash .mid { color: var(--paper-ink); }
.fb-a .flash .eyebrow, .fb-a .flash .tag, .fb-a .flash .p-h, .fb-a .flash ul.kit li span { color: var(--paper-muted); }
.fb-a .flash ul.kit li { border-color: var(--paper-line); }
.fb-a .flash .arch .node, .fb-a .flash .state, .fb-a .flash .p-tile { background: #fff; border-color: var(--paper-line); color: var(--paper-ink); box-shadow: 0 4px 18px rgba(44,46,69,.08); }
.fb-a .flash .arch .v, .fb-a .flash .state .s-v, .fb-a .flash .p-tile span, .fb-a .flash .arch .link { color: var(--paper-muted); }
.fb-a .flash .arch .link::after { background: var(--paper-line); }
.fb-a .flash .p-tile.hot { background: var(--pink); color: #fff; }
.fb-a .flash .p-tile.hot span { color: #fff; }
.fb-a .flash .watchdog { color: #fff; }
.fb-a .flash .d-g path { stroke: var(--paper-line); }
.fb-a .flash .d-g path.on { stroke: var(--orange); }
.fb-a .flash .d-g .lab, .fb-a .flash .reading .r-h { color: var(--paper-ink); }
.fb-a .flash .d-g .unit { color: var(--paper-muted); }
.fb-a .flash .sm-media { box-shadow: 0 10px 40px rgba(44,46,69,.18); }
.fb-a .flash .slide-h b { color: var(--teal); }
body.fb-a .slide.flash.active ~ .logo { filter: none; }

/* ---------- flashbacks: variant B, sepia rewind ---------- */
.fb-b .slide.flash { background: #2b2c3f; }
.fb-b .slide.flash .sm-media, .fb-b .slide.flash .readings, .fb-b .slide.flash .chart { filter: sepia(.55) saturate(.8); }
.fb-b .slide.flash::before { content: attr(data-flash); position: absolute; right: 70px; bottom: 50px; font-size: 120px; font-weight: 800; color: rgba(255,255,255,.06); text-transform: uppercase; white-space: nowrap; }

/* ---------- flashbacks: variant C, framed card over a dimmed present ---------- */
.fb-c .slide.flash { background: radial-gradient(ellipse at center, #4a4d6d 0%, #23243a 100%); }
.fb-c .slide.flash > *:not(.chips) { transform: scale(.9); transform-origin: center; }
.fb-c .slide.flash::after { content: ""; position: absolute; inset: 70px 90px; border: 3px solid rgba(248,244,234,.35); border-radius: 26px; pointer-events: none; }

/* presenter thumbnails: no transitions */
body.thumb .slide { transition: none; }
.fb-a.on-flash .logo { filter: invert(1) brightness(.35); }

/* fixes after the second render */
.d-g { aspect-ratio: 1.38; }
.d-g .val { font-size: 52px; }
.sms-slide .phone { bottom: auto; top: 190px; padding-bottom: 60px; }
.num-gauges { top: 50%; transform: translateY(-60%); }
.readings { top: 290px; gap: 80px; }
.reading { gap: 4px; }
.reading .r-g .d-g { aspect-ratio: 1.05; }

/* ---------- flashback transition ---------- */
.slide.wipe-in-left { animation: wipeL .8s cubic-bezier(.7,0,.2,1) both; z-index: 20; }
.slide.wipe-in-right { animation: wipeR .8s cubic-bezier(.7,0,.2,1) both; z-index: 20; }
@keyframes wipeL { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes wipeR { from { clip-path: inset(0 0 0 100%); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
#stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 80; pointer-events: none; opacity: 0;
  font-size: 64px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 22px 44px; border-radius: 16px; display: flex; gap: 26px; align-items: center; white-space: nowrap; }
#stamp span { font-size: 56px; letter-spacing: -.1em; }
#stamp.rewind { background: var(--paper-ink); color: var(--paper); }
#stamp.forward { background: var(--orange); color: #fff; }
#stamp.show { animation: stamp 1.3s ease both; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- layout fixes after the full review ---------- */
.arch { top: 400px; }
.arch .node { height: 320px; }
.arch .k { font-size: 58px; }
.arch .v { font-size: 32px; }
.arch .link { font-size: 30px; }
.heal { top: 340px; gap: 44px; }
.watchdog { padding: 60px 56px; }
.watchdog .w-v { font-size: 72px; }
.state { padding: 46px 36px; }
.state .s-k { font-size: 46px; }
.state .s-v { font-size: 36px; }
.readings { top: 360px; }
.reading .r-h { font-size: 48px; margin-bottom: 26px; }
.reading .r-g .d-g { aspect-ratio: .95; }
.reading .d-g .val { font-size: 66px; }
.reading .d-g .lab { font-size: 28px; }
.permit { top: 330px; gap: 70px; }
.p-tile { font-size: 38px; padding: 30px 30px; }
.p-tile span { font-size: 30px; }
.p-h { font-size: 32px; }
.vtrio { bottom: 230px; }
.arch { grid-template-columns: 1fr 170px 1fr 170px 1fr; }
.arch .k { font-size: 54px; }
.readings { top: 290px; left: 160px; right: 160px; grid-template-columns: 1fr; gap: 40px; }
.reading { grid-template-columns: 380px repeat(3, 1fr); gap: 30px; align-items: center; }
.reading .r-h { grid-column: auto; margin: 0; font-size: 50px; }
.reading .r-g .d-g { aspect-ratio: 1.25; }

/* ---------- semantic colours and readability ---------- */
.d-g path.on { stroke: var(--teal); }
.d-g[data-tone="orange"] path.on { stroke: var(--orange); }
.d-g[data-tone="pink"] path.on { stroke: var(--pink); }
.d-g[data-tone="green"] path.on { stroke: var(--green); }
.d-g[data-tone="teal"] path.on, .dash-slide[data-tl="box"] .d-g[data-tone="teal"] path.on { stroke: var(--teal); }
.dash-slide[data-tl="box"] .d-g[data-tone="orange"] path.on { stroke: var(--orange); }
.dash-slide[data-tl="box"] .d-g[data-tone="pink"] path.on { stroke: var(--pink); }
.dash-slide[data-tl="box"] .d-g[data-tone="green"] path.on { stroke: var(--green); }
.d-g path { stroke-width: 7; }
.d-s .bar i { background: var(--teal); transition: background .3s; }
.d-s[data-tone="orange"] .bar i { background: var(--orange); }
.d-s[data-tone="pink"] .bar i { background: var(--pink); }
.d-s[data-tone="green"] .bar i { background: var(--green); }
.d-s .lab { font-size: 21px; color: var(--ink2); }
.d-s .val { font-size: 30px; }
.d-s .unit { font-size: 20px; }
.d-s .bar { height: 8px; }
.d-sensors { gap: 14px 30px; }
.d-g .lab { font-size: 24px; }
.d-st { font-size: 22px; }
#stamp.forward.box { background: var(--teal); }
.d-status { gap: 22px; }
.d-st { font-size: 19px; white-space: nowrap; gap: 8px; }
.d-st .t { letter-spacing: .03em; }
.d-g .in .sub { font-size: 20px; font-weight: 700; color: var(--pink); margin-top: 2px; }

/* modal sits over the camera, so altitude and the other gauges stay readable */
.d-modal { inset: auto; left: 0; top: 70px; width: calc(100% - 674px); bottom: 0; }
.dash2.lost .d-body { opacity: 1; }
.dash2.lost .d-cam { opacity: .35; transition: opacity .6s; }
.dash2.lost .d-side { opacity: .75; }
.d-speed.fast { background: var(--orange); color: #fff; padding: 4px 14px; border-radius: 8px; font-size: 26px; letter-spacing: .04em; }
.map-attr { position: absolute; right: 30px; bottom: 18px; font-size: 16px; color: var(--muted); }
/* title: byline as footer, gauges as a centred band (variant chosen after comparing) */
.title-slide { justify-content: flex-start; padding-top: 170px; }
.title-slide .byline { position: absolute; left: 160px; bottom: 70px; margin: 0; font-size: 30px; }
.title-gauges { margin: 0; position: absolute; left: 0; right: 0; bottom: 200px; justify-content: center; grid-template-columns: repeat(4, 280px); gap: 70px; }
.title-slide { align-items: center; text-align: center; }
.title-slide .chips { justify-content: center; }
.title-slide .byline { left: 0; right: 0; text-align: center; }

/* ---------- self healing v2: two equal halves, both animated ---------- */
.heal2 { position: absolute; left: 160px; right: 160px; top: 290px; bottom: 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.hcard { background: #fff; border-radius: 18px; padding: 44px 48px; box-shadow: 0 6px 24px rgba(44,46,69,.08); display: flex; flex-direction: column; color: var(--paper-ink); }
.h-eyebrow { font-size: 26px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-muted); margin-bottom: 16px; }
.h-line { font-size: 48px; font-weight: 300; line-height: 1.15; }
.h-line b { font-weight: 800; }
.proc { margin-top: auto; display: flex; align-items: center; gap: 28px; background: var(--paper); border-radius: 14px; padding: 30px 34px; }
.proc .spin { width: 92px; height: 92px; flex: none; stroke: var(--paper-muted); animation: spinner 6s linear infinite; }
.proc .p-name { font: 700 38px "Courier New", monospace; }
.p-state { position: relative; flex: 1; height: 54px; }
.p-state i { position: absolute; right: 0; top: 0; font-style: normal; font-size: 32px; font-weight: 800; padding: 6px 18px; border-radius: 10px; color: #fff; opacity: 0; white-space: nowrap; }
.p-state .s1, .p-state .s4 { background: var(--green); }
.p-state .s2 { background: var(--pink); }
.p-state .s3 { background: var(--orange); }
.p-state .s1 { animation: st1 6s infinite; } .p-state .s2 { animation: st2 6s infinite; } .p-state .s3 { animation: st3 6s infinite; } .p-state .s4 { animation: st4 6s infinite; }
@keyframes st1 { 0%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes st2 { 0%, 39% { opacity: 0; } 40%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes st3 { 0%, 59% { opacity: 0; } 60%, 78% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes st4 { 0%, 79% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes spinner { 0%, 59% { transform: rotate(0); stroke: var(--paper-line); } 60% { stroke: var(--orange); } 79% { transform: rotate(720deg); stroke: var(--orange); } 80%, 100% { transform: rotate(720deg); stroke: var(--paper-line); } }
.lvl { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 20px; padding: 18px 20px; border-radius: 12px; margin-top: 10px; opacity: .35; border-left: 8px solid transparent; }
.lvl .lk { font-size: 36px; font-weight: 800; }
.lvl .lv { font-size: 30px; color: var(--paper-muted); }
.lvl.l1 { animation: lvl1 8s infinite; } .lvl.l2 { animation: lvl2 8s infinite; } .lvl.l3 { animation: lvl3 8s infinite; } .lvl.l4 { animation: lvl4 8s infinite; }
@keyframes lvl1 { 0%, 23% { opacity: 1; background: var(--paper); border-left-color: var(--green); } 25%, 100% { opacity: .35; background: transparent; border-left-color: transparent; } }
@keyframes lvl2 { 0%, 24% { opacity: .35; } 25%, 48% { opacity: 1; background: var(--paper); border-left-color: var(--teal); } 50%, 100% { opacity: .35; background: transparent; border-left-color: transparent; } }
@keyframes lvl3 { 0%, 49% { opacity: .35; } 50%, 73% { opacity: 1; background: var(--paper); border-left-color: var(--pink); } 75%, 100% { opacity: .35; background: transparent; border-left-color: transparent; } }
@keyframes lvl4 { 0%, 74% { opacity: .35; } 75%, 98% { opacity: 1; background: var(--paper); border-left-color: var(--orange); } 100% { opacity: .35; } }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.bars i { width: 11px; background: var(--paper-line); border-radius: 2px; }
.bars i:nth-child(1) { height: 25%; } .bars i:nth-child(2) { height: 50%; } .bars i:nth-child(3) { height: 75%; } .bars i:nth-child(4) { height: 100%; }
.bars.b4 i { background: var(--green); }
.bars.b2 i:nth-child(-n+2) { background: var(--teal); }
.bars.b0 i { background: var(--paper-line); }
.bat { width: 56px; height: 28px; border: 4px solid var(--orange); border-radius: 6px; position: relative; }
.bat::before { content: ""; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 12px; background: var(--orange); border-radius: 2px; }
.bat::after { content: ""; position: absolute; right: -10px; top: 6px; width: 5px; height: 9px; background: var(--orange); border-radius: 1px; }
.proc { margin: auto 0; }
.hcard .lvl:first-of-type { margin-top: 18px; }
.heal2 { bottom: 150px; }
.lvl { padding: 26px 22px; margin-top: 14px; }

/* permit: one grid, equal tiles, the key condition as a full-width band */
.permit2 { position: absolute; left: 160px; right: 160px; top: 320px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; column-gap: 24px; row-gap: 24px; }
.permit2 .p-h { margin: 0 0 -6px; font-size: 30px; }
.permit2 .p-tile { height: 160px; display: flex; flex-direction: column; justify-content: center; gap: 8px; font-size: 38px; padding: 0 30px; }
.permit2 .p-tile span { font-size: 30px; }
.permit2 .p-tile.hot { grid-column: 1 / 5; height: 120px; font-size: 44px; text-align: center; align-items: center; }
.fb-a .flash .permit2 .p-tile { background: #fff; box-shadow: 0 4px 18px rgba(44,46,69,.08); color: var(--paper-ink); }
.fb-a .flash .permit2 .p-tile span { color: var(--paper-muted); }
.fb-a .flash .permit2 .p-tile.hot { background: var(--pink); color: #fff; }
.permit2 { top: 345px; }

/* fragments */
.frag { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.frag.on { opacity: 1; transform: none; }
/* heal animations only run once their card is shown, so each starts from the beginning */
.p-state i, .proc .spin, .lvl { animation-play-state: paused; }
.hcard.on .p-state i, .hcard.on .proc .spin, .hcard.on .lvl { animation-play-state: running; }
.hcard:not(.on) .p-state i, .hcard:not(.on) .proc .spin, .hcard:not(.on) .lvl { animation: none; }
/* permit: the key condition as an accent, not a block */
.fb-a .flash .permit2 .p-tile.hot { background: #fff; color: var(--pink); border-left: 12px solid var(--pink); height: 110px; font-size: 40px; }
.proc .p-name { font-size: 32px; }
.p-state i { font-size: 26px; padding: 6px 14px; }
.p-state { height: 48px; }

/* heal: left animation stops once the right half is in; right levels are clicked through */
.slide[data-frags="2"] .p-state i, .slide[data-frags="2"] .proc .spin { animation: none !important; }
.slide[data-frags="2"] .p-state .s1 { opacity: 1; }
.slide[data-frags="2"] .p-state .s2, .slide[data-frags="2"] .p-state .s3, .slide[data-frags="2"] .p-state .s4 { opacity: 0; }
.slide[data-frags="2"] .hcard:first-child { opacity: .55; transition: opacity .5s; }
.lvl, .hcard.on .lvl { animation: none !important; opacity: .45; background: transparent; border-left-color: transparent; transition: opacity .3s, background .3s, border-color .3s; }
.lvl.cur { opacity: 1 !important; background: var(--paper); }
.lvl.l1.cur { border-left-color: var(--green); } .lvl.l2.cur { border-left-color: var(--teal); }
.lvl.l3.cur { border-left-color: var(--pink); } .lvl.l4.cur { border-left-color: var(--orange); }

/* tones also on paper (flashback) gauges */
.fb-a .flash .d-g[data-tone="teal"] path.on { stroke: var(--teal); }
.fb-a .flash .d-g[data-tone="green"] path.on { stroke: var(--green); }
.fb-a .flash .d-g[data-tone="orange"] path.on { stroke: var(--orange); }
.fb-a .flash .d-g[data-tone="pink"] path.on { stroke: var(--pink); }

/* attempt 2: the real 15:00 forecast route, drawn in on entry */
.chart .fc-route { fill: none; stroke: var(--paper-ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #fff); }
.slide.active .chart .fc-route { animation: fcDraw 3.2s ease-in-out .4s backwards; }
@keyframes fcDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chart .burst { fill: var(--pink); stroke: #fff; stroke-width: 5; }
.chart .land { fill: var(--orange); stroke: #fff; stroke-width: 5; }
.slide.active .chart .fc-pin.p1 { animation: fcPin .4s ease 2.6s backwards; }
.slide.active .chart .fc-pin.p2 { animation: fcPin .4s ease 3.6s backwards; }
@keyframes fcPin { from { opacity: 0; } to { opacity: 1; } }
.chart .lbl.fc-cap { font-size: 26px; font-weight: 700; }
.mid .frag { display: inline-block; }

/* ending like the other talks: a wave, then Q&A (with the QR code to the LinkedIn post) */
.end-wave { display: flex; align-items: center; justify-content: center; }
.end-wave .wave { font-size: 150px; line-height: 1; }
.end-qa .qa-main { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.end-qa .qa-main h2 { font-size: 150px; font-weight: 800; margin: 0; line-height: 1; }
.end-qa .qa-main .chip { font-size: 26px; }
.end-qa .qa-qr { position: absolute; right: 110px; bottom: 110px; display: flex; align-items: center; gap: 30px; }
.end-qa .qa-qr .qr { background: #fff; border-radius: 16px; padding: 10px; width: 230px; height: 230px; order: 2; }
.end-qa .qa-qr .qr img { width: 100%; height: 100%; display: block; }
.end-qa .qa-qr p { font-size: 32px; line-height: 1.35; color: var(--ink2, #c9cbe0); text-align: right; margin: 0; }
.end-qa .qa-qr p b { color: #fff; }

.cc-row .good { color: var(--green); }
.track-slide .checkcard.final { top: 120px; }

/* heal: all link states shown together once the card is in (no click-through) */
.lvl, .hcard.on .lvl { opacity: 1 !important; }
.lvl.l1 { border-left-color: var(--green); } .lvl.l2 { border-left-color: var(--teal); }
.lvl.l3 { border-left-color: var(--pink); } .lvl.l4 { border-left-color: var(--orange); }