/* ───────── deck: real 16:9 slides scaled to the window, 3D transitions between them ───────── */
#deck { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #12152e 0%, #05060d 70%); }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: 50% 50%;
}
/* transition effects layer (stage coordinates) */
#fx { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
#fx .flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
/* one fixed background for the whole deck; slides are transparent layers of text on top */
#bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background:
    radial-gradient(1200px 820px at 90% -8%, rgba(96, 70, 200, 0.26), transparent 62%),
    radial-gradient(1000px 760px at -4% 104%, rgba(40, 96, 230, 0.2), transparent 62%),
    linear-gradient(155deg, #0e1230 0%, #090c20 46%, #05060d 100%);
}
#stage > canvas#gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; z-index: 2; }
.slide.on { visibility: visible; }
.tvflash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; pointer-events: none; }
#bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(ellipse at 35% 55%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 35% 55%, #000 0%, transparent 70%);
}
.orb { position: absolute; width: 980px; height: 980px; border-radius: 50%; pointer-events: none; }
.orb.o1 { top: -420px; right: -300px; background: radial-gradient(circle, rgba(130, 90, 255, 0.22), transparent 64%); }
.orb.o2 { bottom: -460px; left: -340px; background: radial-gradient(circle, rgba(60, 120, 255, 0.18), transparent 64%); }
/* night-road light trails drifting behind everything */
.trail { position: absolute; height: 3px; border-radius: 3px; pointer-events: none; filter: blur(1.5px); opacity: 0; }
.trail.w { background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.7), rgba(255, 255, 255, 0.95)); box-shadow: 0 0 14px rgba(255, 240, 200, 0.6); }
.trail.r { background: linear-gradient(90deg, rgba(255, 40, 40, 0.95), rgba(255, 60, 60, 0.6), transparent); box-shadow: 0 0 14px rgba(255, 40, 40, 0.6); }
.slide button, .slide input, .slide [data-nonav] { pointer-events: auto; }

/* ───────── type ───────── */
.kicker {
  display: inline-flex; align-items: center; gap: 12px; font: 800 30px/1 var(--body); color: var(--sign-ink); margin-bottom: 18px;
  background: var(--sign); padding: 10px 22px 11px; border-radius: 10px;
  box-shadow: inset 0 0 0 3px var(--sign-ink), inset 0 0 0 5px var(--sign), 0 12px 34px -14px rgba(255, 214, 10, 0.6);
}
.title { font: 700 156px/0.9 var(--display); margin: 0; letter-spacing: 0.005em; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.title.huge { font-size: 226px; line-height: 0.86; }
.title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0 0.16em; margin: -0.06em 0 -0.16em; }
.title .w > span { display: inline-block; }
.lead { font: 600 42px/1.42 var(--body); color: #dadee8; margin: 28px 0 0; }
.lead b { color: var(--sign); font-weight: 800; }

.head { position: absolute; top: 76px; right: 120px; width: 1150px; text-align: right; z-index: 2; }
.head.center { left: 140px; right: 140px; width: auto; text-align: center; }
.head.center .kicker { justify-content: center; }
.head.top { top: 56px; }
.body { position: absolute; right: 120px; top: 330px; width: 860px; display: grid; gap: 22px; z-index: 2; }
.body.wide { width: 1080px; }

/* ───────── footer ───────── */
.foot {
  position: absolute; left: 120px; right: 120px; bottom: 36px; display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.09); font: 600 23px var(--body); color: #8b91a6; z-index: 2;
}
.foot .num { font: 700 48px/1 var(--display); color: var(--sign); letter-spacing: 1px; }
.foot .num::after { content: ' / 08'; font: 600 21px var(--body); color: #5e6378; }

/* ───────── 3D viewports ───────── */
.viz { position: absolute; left: 70px; top: 120px; width: 880px; height: 840px; z-index: 1; }
.viz::before {
  content: ''; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(255, 224, 110, 0.13), rgba(150, 130, 255, 0.05) 42%, transparent 68%);
}
.viz canvas, .viz img.snap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.viz.wide { left: 120px; right: 120px; width: auto; top: 250px; height: 450px; }
.viz.wide::before { inset: 0 10%; }
.viz.narrow { left: 40px; top: 200px; width: 700px; height: 760px; }
.viz.full { inset: 0; width: auto; height: auto; }
.viz.full::before { inset: 20% 25% 0; }
.viz.screen {
  left: 80px; top: 150px; width: 900px; height: 560px; border-radius: 30px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 10px #0b0d16, 0 0 0 12px rgba(255, 255, 255, 0.14), 0 40px 110px -24px rgba(0, 0, 0, 0.9);
}
.viz.screen::before { display: none; }
.viz-cap { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 600 25px var(--body); color: #9097ad; z-index: 2; }

/* ───────── slide 1 ───────── */
.s1 .viz { left: 30px; top: 110px; width: 960px; height: 880px; }
.s1-text { position: absolute; right: 120px; top: 50%; transform: translateY(-50%); width: 820px; z-index: 2; }
.s1 .title.huge { font-size: 236px; }
.presenters { display: flex; gap: 22px; margin-top: 52px; }
.who {
  display: flex; align-items: center; gap: 16px; padding: 12px 32px 12px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font: 800 38px var(--body);
}
.who .av { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; color: var(--sign-ink); }
.who.c1 .av { background: var(--sign); }
.who.c2 .av { background: #ff4b4b; }
.who.c3 .av { background: #4d86ff; }

/* ───────── cards ───────── */
.fact {
  display: flex; gap: 26px; align-items: flex-start; padding: 24px 30px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.1); border-right: 6px solid var(--sign);
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.7);
}
.fact b { display: block; font: 800 40px/1.22 var(--body); color: #fff; }
.fact p { margin: 6px 0 0; font: 400 31px/1.38 var(--body); color: #c8ccd8; }
.fact .ic {
  flex: none; width: 76px; height: 76px; border-radius: 16px; display: grid; place-items: center; font-size: 38px; color: var(--sign-ink);
  background: var(--sign); box-shadow: inset 0 0 0 3px var(--sign-ink), inset 0 0 0 6px var(--sign), 0 12px 30px -12px rgba(255, 214, 10, 0.6);
}
.fact .ic svg { stroke-width: 2.4; }
.fact.sm { padding: 16px 24px; gap: 20px; border-radius: 16px; align-items: center; }
.fact.sm b { font-size: 33px; }
.fact.sm p { font-size: 25px; margin-top: 2px; }
.fact.sm .ic { width: 60px; height: 60px; font-size: 29px; border-radius: 13px; }
.s4 .body { top: 300px; gap: 14px; width: 800px; }

.flow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.flow span { padding: 10px 24px; border-radius: 10px; font: 800 30px var(--body); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); white-space: nowrap; }
.flow span.hot { background: var(--sign); border-color: var(--sign); color: var(--sign-ink); }
.flow i { width: 38px; height: 4px; background: var(--sign); border-radius: 3px; position: relative; flex: none; }
.flow i::after { content: ''; position: absolute; left: -12px; top: -6px; border: 8px solid transparent; border-right: 11px solid var(--sign); }

/* slide 3 */
.drinks { position: absolute; left: 150px; right: 150px; top: 700px; display: grid; grid-template-columns: 1fr 120px 1fr 120px 1fr; align-items: center; z-index: 2; }
.dcard { text-align: center; padding: 14px 18px 16px; border-radius: 18px; background: rgba(8, 10, 22, 0.78); border: 1px solid rgba(255, 255, 255, 0.11); border-bottom: 5px solid var(--sign); }
.dcard b { display: block; font: 700 64px/1 var(--display); margin-bottom: 6px; }
.dcard span { display: inline-block; font: 600 28px var(--body); color: #cdd1dc; margin: 2px 10px 0; }
.dcard i { display: inline-block; font: 800 28px var(--body); font-style: normal; color: var(--sign); margin: 2px 10px 0; }
.eq { text-align: center; font: 700 140px var(--display); color: var(--sign); text-shadow: 0 0 40px rgba(255, 214, 10, 0.5); }
.note { position: absolute; left: 0; right: 0; bottom: 128px; text-align: center; font: 600 36px var(--body); color: #d3d7e2; margin: 0; z-index: 2; }
.note b { color: var(--sign); font-weight: 800; }

/* slide 4 */
.bac-hud {
  position: absolute; top: 22px; right: 22px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end;
  padding: 12px 22px 8px; border-radius: 14px; background: rgba(5, 7, 16, 0.76); border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 5px solid var(--sign);
}
.bac-hud span { font: 600 21px var(--body); color: #bcc2d2; }
.bac-hud output { font: 700 84px/0.95 var(--display); color: var(--sign); direction: ltr; }
.bac { position: absolute; left: 80px; top: 750px; width: 900px; z-index: 2; }
.bac input { width: 100%; direction: ltr; accent-color: #ffd60a; height: 34px; margin: 0; cursor: pointer; }
.bac-ticks { display: flex; justify-content: space-between; direction: ltr; font: 700 21px var(--body); color: var(--muted); }
.bac p { margin: 14px 0 0; font: 800 32px/1.35 var(--body); color: #fff; min-height: 82px; }

/* slide 5 */
.bigstat { display: flex; align-items: center; gap: 34px; padding: 4px 0 14px; }
.bigstat b { font: 700 230px/0.85 var(--display); color: var(--sign); white-space: nowrap; text-shadow: 0 0 60px rgba(255, 214, 10, 0.25); }
.bigstat p { margin: 0; font: 600 36px/1.32 var(--body); color: #e6e9f1; }

/* slide 6 */
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lim { padding: 24px 30px; border-radius: 18px; background: rgba(61, 123, 255, 0.11); border: 1px solid rgba(61, 123, 255, 0.42); display: flex; flex-direction: column; }
.lim.red { background: rgba(255, 59, 59, 0.11); border-color: rgba(255, 59, 59, 0.46); }
.lim .who { all: unset; font: 700 25px/1.3 var(--body); color: #d3d7e2; min-height: 62px; }
.lim b { font: 700 168px/0.86 var(--display); color: #fff; margin: 6px 0 8px; }
.lim .u { font: 700 26px var(--body); color: #eceef4; }
.lim .s { font: 400 23px var(--body); color: var(--muted); margin-top: 6px; }
.line { font: 600 31px/1.42 var(--body); color: #d8dbe5; margin: 4px 0; }
.line b { color: var(--sign); font-weight: 800; white-space: nowrap; }
.s6 .line { max-width: 980px; }
.s6 .body { top: 290px; gap: 18px; }
.s6 .lim { padding: 18px 28px; }
.s6 .lim .who { min-height: 34px; }
.s6 .lim b { font-size: 140px; }
.s6 .chip { font-size: 24px; padding: 9px 18px; }
.s6 .chips { gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 12px; font: 700 27px var(--body);
  background: rgba(255, 59, 59, 0.13); border: 1px solid rgba(255, 90, 90, 0.42); color: #ffe3e0;
}
.chip svg { color: #ff7d7d; font-size: 28px; }

/* slide 7 */
.myths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.myth { padding: 22px 26px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.myth p { margin: 0; display: flex; gap: 12px; align-items: flex-start; }
.myth .m { font: 700 29px/1.3 var(--body); color: #ff9a9a; text-decoration: line-through; text-decoration-color: rgba(255, 90, 90, 0.75); margin-bottom: 10px; }
.myth .f { font: 600 28px/1.35 var(--body); color: #effff4; }
.myth .m svg { color: var(--red); flex: none; margin-top: 4px; }
.myth .f svg { color: var(--green); flex: none; margin-top: 4px; }
.prevent { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.prevent b { font: 700 58px/1 var(--display); color: var(--sign); margin-left: 8px; }
.prevent span {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 12px; font: 700 25px var(--body);
  background: rgba(47, 212, 124, 0.12); border: 1px solid rgba(47, 212, 124, 0.42); color: #dfffea;
}
.prevent span svg { color: var(--green); }

/* slide 8 */
.s8 .lead { max-width: 1640px; margin: 18px auto 0; font-size: 34px; }
.cta { position: absolute; left: 0; right: 0; bottom: 84px; text-align: center; z-index: 2; }
.cta .btn-hot { font-size: 52px; padding: 22px 70px; }
.cta .btn-hot svg { font-size: 60px; }
.cta p { margin: 26px 0 0; font: 700 70px/1 var(--display); color: #fff; letter-spacing: 0.01em; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6); }

/* ───────── chrome ───────── */
#progress { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; z-index: 19; background: rgba(255, 255, 255, 0.05); }
#progress i { display: block; height: 100%; width: 0; background: var(--sign); margin-inline-start: auto; box-shadow: 0 0 12px rgba(255, 214, 10, 0.6); }
#bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px); display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 999px; background: rgba(8, 10, 22, 0.9); border: 1px solid var(--line);
  opacity: 0; transition: opacity 0.3s, transform 0.3s; z-index: 20;
}
#bar.show { opacity: 1; transform: translate(-50%, 0); }
#bar button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; font-size: 19px; display: grid; place-items: center; }
#bar button:hover { background: rgba(255, 255, 255, 0.1); }
#bNum { min-width: 54px; text-align: center; color: var(--muted); direction: ltr; font-size: 15px; font-weight: 700; }
#notes {
  position: fixed; top: 16px; left: 16px; width: 420px; max-height: calc(100vh - 100px); overflow: auto; z-index: 21;
  padding: 20px 24px; border-radius: 18px; background: rgba(8, 10, 22, 0.96); border: 1px solid var(--line);
  font-size: 18px; line-height: 1.6; display: none;
}
#notes.show { display: block; }
#notes h4 { margin: 0 0 4px; font: 700 34px var(--display); color: var(--sign); }
#notesWho { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
#notes p { margin: 0; white-space: pre-line; }
#black { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.4s; z-index: 30; }
#black.on { opacity: 1; pointer-events: auto; }
#start {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(900px 600px at 50% 46%, rgba(255, 214, 10, 0.07), transparent 70%),
    radial-gradient(1200px 800px at 90% -10%, rgba(96, 70, 200, 0.22), transparent 62%),
    #070914;
}
#start h1 { font: 700 clamp(70px, 11vw, 176px)/0.9 var(--display); margin: 14px 0 40px; }
#start .kicker { font-size: clamp(16px, 1.6vw, 26px); justify-content: center; }
#start .btn-hot { font-size: clamp(20px, 2vw, 32px); padding: 0.7em 1.8em; }
#start .keys { margin-top: 34px; color: var(--muted); font-size: clamp(13px, 1.1vw, 18px); padding: 0 16px; }
kbd { display: inline-block; min-width: 1.8em; padding: 0.1em 0.45em; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); font: 700 0.95em var(--body); color: #fff; }
#start.gone { opacity: 0; pointer-events: none; transition: opacity 0.7s; }