@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap');
:root{
  --bg:#05050f;--bg2:#0d0d1a;--bg3:#141428;
  --border:rgba(255,255,255,.08);
  --claude:#c47aff;--claude2:#9b4dff;
  --gpt:#10a37f;--gemini:#4285f4;
  --gold:#fbbf24;--green:#34d399;--blue:#60a5fa;--red:#f87171;--orange:#fb923c;
  --text:#f0f0f8;--text2:#a0a0c0;--text3:#505070;
  --mono:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#000;font-family:'Inter',sans-serif;overflow:hidden;}
.deck{width:100%;height:100%;position:relative;}
.slide{position:absolute;inset:0;width:100%;height:100%;display:none;background:var(--bg);color:var(--text);overflow:hidden;}
.slide.active{display:flex;}
.slide::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(196,122,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(196,122,255,.025) 1px,transparent 1px);
  background-size:60px 60px;}
.slide-inner{position:relative;z-index:10;width:100%;height:100%;display:flex;flex-direction:column;padding:3rem 4rem 5rem;}
.center{align-items:center;justify-content:center;text-align:center;}
.row{flex-direction:row;gap:3rem;align-items:center;}
/* stars bg helper */
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:.4;pointer-events:none;}
/* type */
.tag{display:inline-block;background:rgba(196,122,255,.12);border:1px solid rgba(196,122,255,.4);color:var(--claude);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .85rem;border-radius:20px;margin-bottom:1.1rem;}
h1{font-size:4rem;font-weight:900;line-height:1.05;letter-spacing:-.03em;}
h2{font-size:2.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;}
h3{font-size:1.4rem;font-weight:700;}
.grad{background:linear-gradient(135deg,var(--claude),#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.grad-green{background:linear-gradient(135deg,#34d399,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.grad-gold{background:linear-gradient(135deg,#fbbf24,#f87171);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.grad-orange{background:linear-gradient(135deg,#fb923c,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.subtitle{font-size:1.2rem;color:var(--text2);margin-top:.7rem;line-height:1.6;}
.lead{font-size:1.05rem;color:var(--text2);line-height:1.75;}
.divider{width:56px;height:3px;background:linear-gradient(90deg,var(--claude),transparent);border-radius:2px;margin:1.1rem 0;}
/* cards */
.card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:16px;padding:1.4rem;transition:border-color .2s;}
.card:hover{border-color:rgba(196,122,255,.3);}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
/* code */
.code{background:#0d0d1a;border:1px solid rgba(196,122,255,.25);border-radius:12px;padding:1.3rem 1.5rem;font-family:var(--mono);font-size:.86rem;line-height:1.85;color:var(--text);position:relative;}
.code .lbl{position:absolute;top:-.6rem;left:1.2rem;background:var(--bg);color:var(--claude);font-size:.68rem;font-weight:700;letter-spacing:.1em;padding:0 .5rem;font-family:'Inter',sans-serif;}
.kw{color:var(--claude);font-weight:700;}
.kw2{color:var(--green);}
.kw3{color:var(--gold);}
.kw4{color:var(--blue);}
.kw5{color:var(--red);}
.cm{color:var(--text3);font-style:italic;}
/* badge */
.badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.05);border:1px solid var(--border);padding:.3rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600;}
/* step */
.step{display:flex;align-items:flex-start;gap:1rem;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;}
.step-n{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(196,122,255,.2);color:var(--claude);font-weight:900;font-size:.9rem;}
/* compare bad/good */
.bad{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.25);border-radius:14px;padding:1.2rem;}
.good{background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.25);border-radius:14px;padding:1.2rem;}
/* note box */
.note{background:rgba(196,122,255,.07);border:1px solid rgba(196,122,255,.2);border-radius:12px;padding:1rem 1.4rem;}
.note-green{background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.2);border-radius:12px;padding:1rem 1.4rem;}
.note-gold{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.2);border-radius:12px;padding:1rem 1.4rem;}
.note-blue{background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.2);border-radius:12px;padding:1rem 1.4rem;}
/* stat */
.stat-num{font-size:2.8rem;font-weight:900;background:linear-gradient(135deg,var(--claude),#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
/* nav */
.nav-bar{position:fixed;bottom:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:1rem;padding:.75rem 2rem;background:rgba(5,5,15,.95);border-top:1px solid var(--border);backdrop-filter:blur(20px);}
.nav-btn{background:rgba(196,122,255,.12);border:1px solid rgba(196,122,255,.3);color:var(--claude);padding:.4rem 1.2rem;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;transition:all .2s;}
.nav-btn:hover{background:rgba(196,122,255,.25);}
.nav-sec{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text2);}
.nav-sec:hover{color:var(--text);background:rgba(255,255,255,.08);}
.slide-counter{color:var(--text2);font-size:.85rem;min-width:80px;text-align:center;}
.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--claude);transition:width .3s ease;z-index:1001;}
.pdf-btn{position:fixed;top:1rem;right:1rem;z-index:1001;background:rgba(196,122,255,.15);border:1px solid rgba(196,122,255,.3);color:var(--claude);padding:.4rem 1rem;border-radius:8px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;}
.back-link{position:fixed;top:1rem;left:1rem;z-index:1001;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text2);padding:.4rem 1rem;border-radius:8px;font-family:'Inter',sans-serif;font-size:.75rem;text-decoration:none;}
/* claude logo inline */
.claude-logo{display:inline-flex;align-items:center;gap:.4rem;background:rgba(196,122,255,.15);border:1px solid rgba(196,122,255,.3);padding:.25rem .7rem;border-radius:8px;font-size:.82rem;font-weight:700;color:var(--claude);}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* =============================================
   MOBILE RESPONSIVE — slides adapt to phone
   ============================================= */
@media (max-width:768px){
  /* Body: allow scrolling on mobile */
  html,body{overflow:auto;height:auto;}
  .deck{height:auto;position:static;}

  /* Slides: stack vertically, each = card */
  .slide{
    position:relative;inset:auto;
    width:100%;height:auto;min-height:100svh;
    display:none;overflow:visible;
    border-bottom:1px solid var(--border);
  }
  .slide.active{display:flex;}

  /* On mobile show ALL slides (scroll mode) */
  body.mobile-scroll .slide{display:flex!important;}

  /* Inner padding */
  .slide-inner{
    padding:2rem 1.25rem 5.5rem;
    height:auto;min-height:100svh;
  }

  /* Typography scale-down */
  h1{font-size:2rem;letter-spacing:-.02em;}
  h2{font-size:1.5rem;}
  h3{font-size:1.1rem;}
  .subtitle{font-size:1rem;}
  .lead{font-size:.92rem;}
  .tag{font-size:.65rem;padding:.22rem .7rem;}

  /* Grids → single column */
  .g2,.g3,.g4{grid-template-columns:1fr;gap:.85rem;}

  /* Row layouts → vertical */
  .row{flex-direction:column;gap:1.5rem;}

  /* Cards */
  .card{padding:1rem;}

  /* Code blocks */
  .code{font-size:.75rem;padding:1rem 1rem;line-height:1.65;overflow-x:auto;}

  /* Steps */
  .step{padding:.8rem 1rem;gap:.8rem;}
  .step-n{width:28px;height:28px;font-size:.78rem;}

  /* Notes */
  .note,.note-green,.note-gold,.note-blue{padding:.8rem 1rem;}

  /* Stat number */
  .stat-num{font-size:2.2rem;}

  /* Nav bar — compact 2 rows on very small */
  .nav-bar{
    gap:.5rem;padding:.55rem .75rem;
    flex-wrap:wrap;justify-content:center;
  }
  .nav-btn{padding:.35rem .7rem;font-size:.75rem;}
  .slide-counter{min-width:52px;font-size:.75rem;}

  /* Hide back-link & pdf-btn (space-constrained) */
  .back-link,.pdf-btn{font-size:.68rem;padding:.3rem .7rem;top:.5rem;}
  .back-link{left:.5rem;}
  .pdf-btn{right:.5rem;}

  /* Scroll-mode toggle button */
  .scroll-toggle{
    position:fixed;bottom:4.2rem;right:.75rem;z-index:1002;
    background:rgba(196,122,255,.2);border:1px solid rgba(196,122,255,.4);
    color:var(--claude);padding:.4rem .8rem;border-radius:8px;
    font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;
    cursor:pointer;backdrop-filter:blur(10px);
  }

  /* Bad/good side-by-side fallback */
  .bad,.good{padding:1rem;}
}

/* Extra small phones */
@media (max-width:400px){
  h1{font-size:1.7rem;}
  h2{font-size:1.3rem;}
  .slide-inner{padding:1.5rem 1rem 5.5rem;}
  .code{font-size:.7rem;}
}

@media print{
  body{background:#fff;overflow:visible;}
  .nav-bar,.progress-bar,.pdf-btn,.back-link{display:none!important;}
  .slide{position:relative;display:flex!important;page-break-after:always;height:720px;width:1280px;}
  .deck{height:auto;}
}