/* Deck layout. reveal.js runs with disableLayout: true, so nothing is scaled
   and pointer coordinates inside canvases and iframes stay exact. Every size
   here is responsive (vw/vh/clamp) instead. */

html, body { height: 100%; overflow: hidden; }
.reveal-viewport { background: transparent !important; }
.reveal { font-family: var(--font-body); color: var(--ink); font-size: clamp(16px, 1.55vw, 30px); }

.reveal .slides { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; left: 0 !important; top: 0 !important; transform: none !important; text-align: left; }
.reveal .slides > section {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 4.5vh 4.5vw 7vh;
  flex-direction: column; justify-content: center; gap: 2.2vh;
}
.reveal .slides > section.present { display: flex !important; }
.reveal .slides > section.act { justify-content: flex-start; padding-top: 2.5vh; padding-bottom: 6vh; gap: 1.2vh; }

.reveal h1 { font-size: clamp(2.6rem, 8vw, 7.5rem); line-height: .95; margin: 0; }
.reveal h2 { font-size: clamp(1.8rem, 4.2vw, 4.2rem); line-height: 1.05; margin: 0; }
.reveal h3 { font-size: clamp(1.2rem, 2.2vw, 2rem); margin: 0; }
.reveal p  { margin: 0; line-height: 1.35; }
.reveal .lead { font-size: 1.35em; color: var(--muted); max-width: 40em; }
.reveal .center { align-items: center; text-align: center; }
.reveal .kicker { text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: .8em; color: var(--pink); }

/* controls / progress in the neon palette */
.reveal .controls { color: var(--cyan); }
.reveal .progress { color: var(--pink); height: 4px; }
.reveal .slide-number { background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 14px; }

/* ---------- activity slide header ---------- */
.act-head { display: flex; align-items: center; gap: 1.2vw; flex-wrap: nowrap; }
/* the subtitle gives way (…) before the buttons ever wrap to a second line */
.act-head > .muted { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-head > h2, .act-head > .btn, .act-head > .pill { flex: none; white-space: nowrap; }
.reveal a { color: var(--cyan); }
.act-head h2 { font-size: clamp(1.5rem, 3vw, 3rem); }
.act-head .spacer { flex: 1; }
.act-head .btn { font-size: .7em; }
.frame {
  flex: 1; min-height: 0; width: 100%;
  border: 1px solid var(--stroke); border-radius: var(--radius);
  background: rgba(10,7,32,.45);
  box-shadow: var(--shadow);
}
.timer { font-family: var(--font-mono); cursor: pointer; min-width: 5.2em; justify-content: center; }
.timer.running { border-color: var(--lime); color: var(--lime); }
.timer.done { border-color: var(--red); color: var(--red); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- title ---------- */
.title-orbit { position: relative; width: min(38vh, 40vw); height: min(38vh, 40vw); margin: 0 auto 2vh; }
.title-orbit .core { position: absolute; inset: 28%; display: grid; place-items: center; font-size: min(12vh, 12vw); filter: drop-shadow(0 0 30px rgba(139,92,255,.8)); animation: float 4s ease-in-out infinite; }
.title-orbit .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(255,255,255,.18); animation: spin 22s linear infinite; }
.title-orbit .ring span { position: absolute; font-size: min(5vh, 5vw); transform: translate(-50%, -50%); animation: spin 22s linear infinite reverse; }
@keyframes float { 50% { transform: translateY(-10px) scale(1.04); } }

/* ---------- AI used today ---------- */
.today { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4vw; }
.today .glass { padding: 2.2vh 1vw; text-align: center; font-weight: 600; }
.today .glass .e { font-size: 2.4em; display: block; }

/* ---------- rules vs learning ---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; }
.flow { display: grid; gap: 1.2vh; padding: 3vh 2vw; }
.flow .inputs { display: flex; gap: .6em; justify-content: center; }
.flow .chip { padding: .45em 1em; border-radius: 14px; font-weight: 700; background: rgba(255,255,255,.08); border: 1px solid var(--stroke); }
.flow .box { text-align: center; padding: 1.4vh; border-radius: 16px; font-family: var(--font-display); font-size: 1.3em; }
.flow .arrow { text-align: center; font-size: 1.8em; color: var(--muted); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }
.flow .out { text-align: center; }
.flow .out .chip { font-size: 1.1em; }
.chip.hl { border-color: var(--pink); color: var(--pink); box-shadow: var(--glow-pink); }
.chip.hl2 { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); }

/* ---------- nested circles ---------- */
.nest-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3vw; align-items: center; }
.nest { position: relative; width: min(60vh, 44vw); aspect-ratio: 1; margin: 0 auto; }
.nest .c { position: absolute; border-radius: 50%; display: flex; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.nest .c span { margin-top: 5%; font-size: 1.05em; }
.nest .ai { inset: 0;   background: radial-gradient(circle at 50% 30%, rgba(139,92,255,.35), rgba(139,92,255,.1)); border: 3px solid var(--violet); box-shadow: 0 0 40px rgba(139,92,255,.4); }
.nest .ml { inset: 17%; background: rgba(34,228,255,.14); border: 3px solid var(--cyan); box-shadow: var(--glow-cyan); }
.nest .dl { inset: 36%; background: rgba(255,79,216,.18); border: 3px solid var(--pink); box-shadow: var(--glow-pink); align-items: center; }
.nest .dl span { margin: 0; }
.nest .c.fragment { transform: scale(.4); opacity: 0; transition: transform .8s cubic-bezier(.2,1.5,.4,1), opacity .5s; }
.nest .c.fragment.visible { transform: scale(1); opacity: 1; }
.defs { display: grid; gap: 1.8vh; }
.defs .glass { padding: 1.6vh 1.4vw; }
.defs b { font-family: var(--font-display); }

/* ---------- neural net canvas ---------- */
#nn { width: 100%; flex: 1; min-height: 0; }
.nn-labels { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-weight: 700; }

/* ---------- AI can do ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3vw; }
.gcard { padding: 2vh 1.1vw; display: grid; gap: .6vh; align-content: start; }
.gcard .e { font-size: 2.3em; line-height: 1; }
.gcard h3 { font-size: 1.1em; }
.gcard p { color: var(--muted); font-size: .8em; }
.gcard.fragment { transform: translateY(30px) rotateX(40deg); opacity: 0; transition: transform .6s cubic-bezier(.2,1.4,.4,1), opacity .4s; }
.gcard.fragment.visible { transform: none; opacity: 1; }
.gcard.warn { border-color: rgba(255,90,110,.45); }

/* ---------- bias stats ---------- */
.stat { font-family: var(--font-display); font-size: 3.2em; line-height: 1; }

/* ---------- takeaways / links / QR ---------- */
.take { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5vw; }
.take .glass { padding: 2.5vh 1.3vw; font-size: 1.15em; }
.take .n { font-family: var(--font-display); font-size: 2.6em; line-height: 1; }
.home { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3vw; align-items: center; }
.links { display: grid; gap: 1.2vh; }
.links a { font-size: 1.1em; display: flex; gap: .7em; align-items: center; padding: 1.3vh 1.2vw; color: var(--ink); text-decoration: none; }
.links a small { color: var(--muted); display: block; font-size: .7em; }
.links a:hover { border-color: var(--cyan); }
.qr { background: #fff; padding: 14px; border-radius: 20px; width: min(42vh, 30vw); margin: 0 auto; box-shadow: var(--glow-cyan); }
.qr svg { display: block; width: 100%; height: auto; }
.qr-url { text-align: center; font-family: var(--font-mono); font-size: .75em; color: var(--muted); margin-top: 1vh; word-break: break-all; }

/* fragments: a nicer default */
.reveal .fragment.pop { transform: scale(.6); opacity: 0; transition: all .5s cubic-bezier(.2,1.6,.4,1); }
.reveal .fragment.pop.visible { transform: scale(1); opacity: 1; }

/* phones / narrow windows: stack the two-column layouts */
@media (max-width: 820px) {
  .act-head { flex-wrap: wrap; }
  .versus, .nest-wrap, .home, .take { grid-template-columns: 1fr; }
  .gallery, .today { grid-template-columns: repeat(2, 1fr); }
  .reveal .slides > section { justify-content: flex-start; overflow-y: auto; }
}

/* ---------- presenter, bonus badge, Python grid ---------- */
.presenter {
  font-family: var(--font-display); font-weight: 700; font-size: 1.35em; margin-top: 1.2vh !important;
  display: inline-flex; align-items: center; gap: .5em; padding: .35em 1.1em; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--stroke); box-shadow: 0 0 30px rgba(139,92,255,.35);
}
.presenter span { filter: drop-shadow(0 0 10px rgba(255,197,61,.7)); }
.pill.bonus { color: var(--amber); border-color: var(--amber); background: rgba(255,197,61,.12); font-size: .6em; }
.pygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1vw; }
.pycard {
  all: unset; cursor: pointer; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .6em;
  padding: 1.4vh 1vw; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid var(--stroke);
  transition: transform .2s cubic-bezier(.2,1.4,.4,1), border-color .2s, box-shadow .2s;
}
.pycard:hover, .pycard:focus-visible { transform: translateY(-4px) rotate(-.6deg); border-color: #ffd43b; box-shadow: 0 0 22px rgba(255,212,59,.35); }
.pycard .e { grid-row: span 2; font-size: 2em; line-height: 1; align-self: center; }
.pycard b { font-family: var(--font-display); font-size: .95em; }
.pycard small { color: var(--muted); font-family: var(--font-mono); font-size: .68em; }
.pycard small i { font-style: normal; color: #ffd43b; font-size: 1.25em; }
.pycard.fragment { opacity: 0; transform: scale(.7); transition: all .45s cubic-bezier(.2,1.6,.4,1); }
.pycard.fragment.visible { opacity: 1; transform: none; }
@media (max-width: 820px) { .pygrid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- title presenter card, careers, tools path ---------- */
.presenter-card { display: grid; justify-items: center; gap: .6vh; margin-top: 1.2vh; }
.presenter-card .presenter { margin-top: 0 !important; }
.presenter-card .affil { margin: 0; color: var(--muted); font-size: .85em; line-height: 1.35; text-align: center; }
.presenter-card .affil b { color: var(--ink); font-weight: 700; letter-spacing: .02em; }
.careers .gcard h3 { font-size: 1em; }
.toolpath { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1vw; counter-reset: none; }
.toolpath li { display: grid; grid-template-columns: auto 1fr; gap: .7vw; align-items: start; padding: 1.6vh 1vw; margin: 0; }
.toolpath .n { font-family: var(--font-display); font-size: 2em; line-height: 1; }
.toolpath h3 { font-size: .95em; margin: 0 0 .25em; }
.toolpath p { color: var(--muted); font-size: .72em; margin: 0 0 .3em; }
.toolpath small { font-family: var(--font-mono); font-size: .62em; color: var(--amber); }
.toolpath li.fragment { opacity: 0; transform: translateX(-24px); transition: all .45s cubic-bezier(.2,1.4,.4,1); }
.toolpath li.fragment.visible { opacity: 1; transform: none; }
@media (max-width: 820px) { .toolpath { grid-template-columns: repeat(2, 1fr); } }

/* ---------- title slide: data constellation (deck.js · Hero) ---------- */
.reveal .slides > section.title-slide { overflow: hidden; }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.title-slide > :not(.hero-net):not(aside) { position: relative; z-index: 1; }
.title-orbit::after {
  content: ""; position: absolute; inset: 18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(34,228,255,.35) 35%, rgba(255,79,216,.18) 60%, transparent 72%);
  opacity: 0; transform: scale(.7);
}
.title-orbit.zap::after { animation: zap .55s ease-out; }
@keyframes zap { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.25); } }