/* Shared live-talk engine — SDSU AI, Science & Robotics Workshop.
   Same UX as worldmodel-talk: dark stage, big type, ←/→ steps, P pause, N notes, T timer. */
:root{
  --bg:#0d1b2a; --bg2:#13253a; --ink:#eef3fa; --dim:#9fb2c8;
  --red:#A6192E; --red2:#d84a5f; --gold:#FFC72C; --blue:#4dd0ff; --green:#3fb950;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden}

/* ---------- slides ---------- */
.slide{position:absolute;inset:0;display:none;padding:6vh 7vw 12vh;flex-direction:column;justify-content:center}
.slide.active{display:flex;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slide .notes{display:none}

.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  font-size:clamp(12px,1.4vw,17px);margin:0 0 1.2vh}
.eyebrow::before{content:"";display:inline-block;width:2.2em;height:2px;background:var(--gold);
  vertical-align:middle;margin-right:.8em}
h1{font-size:clamp(34px,6.2vw,84px);line-height:1.04;margin:0 0 2vh;font-weight:800}
h2{font-size:clamp(26px,4vw,54px);line-height:1.08;margin:0 0 2.5vh;font-weight:800}
.sub{color:var(--dim);font-size:clamp(17px,2.2vw,28px);line-height:1.35;max-width:34em;margin:0}
.big{font-size:clamp(20px,2.7vw,34px);line-height:1.35}
.gold{color:var(--gold)} .blue{color:var(--blue)} .red{color:var(--red2)} .green{color:var(--green)}
.dim{color:var(--dim)}

ul.list{list-style:none;padding:0;margin:1vh 0 0;font-size:clamp(17px,2.3vw,30px);line-height:1.4}
ul.list li{margin:0 0 1.6vh;padding-left:1.3em;position:relative}
ul.list li::before{content:"▸";position:absolute;left:0;color:var(--gold)}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5vw;align-items:start}
.cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2vw;align-items:stretch}
.card{background:var(--bg2);border:1px solid #24405e;border-radius:16px;padding:2.4vh 1.6vw;
  font-size:clamp(14px,1.8vw,22px);line-height:1.4}
.card h3{margin:0 0 1vh;font-size:clamp(17px,2.2vw,28px);color:var(--gold)}
.card .ic{font-size:clamp(28px,4vw,52px);line-height:1;margin-bottom:1vh}

.punch{border-left:6px solid var(--gold);padding:1.2vh 1.4vw;background:rgba(255,199,44,.08);
  font-size:clamp(19px,2.6vw,34px);font-weight:700;border-radius:0 12px 12px 0;margin-top:2vh}
kbd{background:#22384f;border:1px solid #35516f;border-bottom-width:3px;border-radius:6px;
  padding:.08em .45em;font:inherit;font-size:.85em}

/* step reveals */
.step{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.step.shown{opacity:1;transform:none}

/* divider + title slides */
.slide.divider{background:linear-gradient(160deg,var(--red) 0%,#7e1322 100%);align-items:flex-start}
.slide.divider .part{color:var(--gold);font-weight:800;letter-spacing:.25em;font-size:clamp(14px,1.8vw,22px)}
.slide.divider h1{color:#fff}
.slide.divider .sub{color:#f2d9dd}
.slide.title{background:radial-gradient(120% 120% at 20% 10%,#1c3452 0%,var(--bg) 60%)}

/* live-demo (iframe) slides */
.slide.demo{padding:4vh 4vw 11vh}
.demo-head{display:flex;align-items:baseline;gap:1.2vw;margin-bottom:1.4vh}
.demo-head h2{margin:0;font-size:clamp(20px,2.8vw,38px)}
.badge{background:var(--gold);color:#1a1a1a;font-weight:800;font-size:clamp(11px,1.3vw,15px);
  padding:.25em .8em;border-radius:999px;white-space:nowrap}
.demo iframe{flex:1;width:100%;border:0;border-radius:14px;background:#f5f5f7;min-height:0;
  box-shadow:0 14px 40px rgba(0,0,0,.45)}
.demo .hint{color:var(--dim);font-size:clamp(12px,1.5vw,17px);margin:1vh 0 0}

/* inline canvas stage */
.stage{width:100%;border-radius:14px;background:#091420;border:1px solid #22384f;display:block}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;
  justify-content:center;padding:10px 16px 14px;
  background:linear-gradient(transparent,rgba(6,13,21,.85) 45%)}
#hud button{background:#1b2f45;border:1px solid #2d4a68;color:var(--ink);border-radius:999px;
  min-width:44px;height:38px;font-size:16px;font-weight:700;cursor:pointer;padding:0 14px}
#hud button:hover{background:#24405e}
#counter{color:var(--dim);font-weight:700;font-size:14px;min-width:64px;text-align:center}
#timer{color:var(--gold);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;display:none}
#timer.on{display:block}
#bar{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:41;transition:width .25s}
#keysHint{position:fixed;right:14px;bottom:58px;color:#54708e;font-size:12px;z-index:40;text-align:right}
#notesPanel{position:fixed;left:0;right:0;bottom:0;max-height:38vh;overflow:auto;z-index:50;display:none;
  background:rgba(9,18,28,.97);border-top:2px solid var(--gold);padding:14px 22px 60px;
  font-size:15px;line-height:1.5;color:#d7e3f2;white-space:pre-wrap}
#notesPanel.on{display:block}
#notesPanel b{color:var(--gold)}
#testBadge{position:fixed;top:10px;left:10px;z-index:60;padding:8px 14px;border-radius:8px;font-weight:800;display:none}
@media (max-width:640px){.cols,.cols3{grid-template-columns:1fr}.slide{padding:4vh 6vw 13vh}}