:root{
  /* Brand Palette */
  --color-dark-teal:#1b6875;           /* Primary */
  --color-dark-teal-hover:#137f8b;     /* Primary hover */
  --color-apple-green:#a9c23f;         /* Accent / Success */
  --color-turquoise:#179dab;           /* Secondary accent */
  --color-black:#1f1f23;               /* Background base */
  --color-almost-black:#3f3f43;        /* Secondary background */
  --color-dark-cool-gray:#73757f;      /* Neutral */

  /* Semantics */
  --bg: var(--color-black);
  --surface: #131720;
  --surface-2:#1b2130;
  --text:#e6eefb;
  --muted:#9fb0c7;
  --accent: var(--color-dark-teal);
  --accent-2: var(--color-apple-green);
  --ok: var(--color-apple-green);
  --warn:#ffb020;
  --danger:#ff5d5d;

  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --transition: 280ms cubic-bezier(.2,.8,.2,1);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family:var(--font); overflow:hidden;
  background:
    radial-gradient(120vw 120vh at 20% -10%, rgba(27,104,117,.12), transparent 55%),
    radial-gradient(100vw 100vh at 110% 10%, rgba(169,194,63,.12), transparent 60%),
    linear-gradient(180deg,#0b0e13 0%, #111726 60%, #0b0e13);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{ color: var(--accent); text-decoration: none }
a:hover{ text-decoration: underline }

/* Toolbar */
.toolbar{
  position:fixed; inset:16px 16px auto 16px; z-index:70;
  display:flex; gap:12px; align-items:center; padding:8px 12px; border-radius:999px;
  background:rgba(7,10,16,.55); backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.06); box-shadow:var(--shadow);
}
.toolbar .brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:22px; }
.toolbar button, .toolbar .pill{
  background:var(--surface-2); border:1px solid rgba(255,255,255,.08);
  color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700; font-size:14px;
  transition:transform var(--transition), background var(--transition);
}
.toolbar .pill{ pointer-events:none; opacity:.9; }
.toolbar button:hover{ transform: translateY(-1px); }
.toolbar .spacer{ flex:1; }

/* Deck */
#deck{ height:100vh; width:100vw; display:flex; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.slide{
  min-width:100vw; height:100vh;
  padding:8vh clamp(28px,6vw,96px) 12vh;
  display:grid; grid-template-rows:auto 1fr; gap:28px;
  background:
    radial-gradient(80vw 60vh at 10% -20%, rgba(27,104,117,.16), transparent 60%),
    radial-gradient(60vw 60vh at 100% 10%, rgba(169,194,63,.16), transparent 60%);
}
.hgroup h1{ margin:0 0 8px 0; line-height:1.05; font-size:clamp(36px,6vw,72px); }
.hgroup h2{ margin:0; color:var(--muted); font-weight:600; font-size:clamp(22px,2.6vw,36px); }
.kicker{ display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:#b6c4da; opacity:.9; }

.content{ align-self:start; font-size:clamp(18px,1.5vw,22px); color:#d6e3f8; }
.content p{ margin:.6em 0; }
.content ul{ margin:0; padding-left:1.1em; display:grid; gap:.35em; }

.grid-2{ display:grid; gap:24px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ display:grid; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.card{
  background:var(--surface); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px; box-shadow:var(--shadow);
  transition: transform var(--transition), background var(--transition);
}
.card:hover{ transform: translateY(-2px); background:#141a26; }

.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  background:#0f1420; border:1px solid rgba(255,255,255,.08); font-weight:700; font-size:12px; }
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 10px rgba(169,194,63,.5); }

/* Progress */
.progress{ position:fixed; left:0; right:0; bottom:0; height:6px; background:rgba(255,255,255,.06); z-index:80; }
.progress>div{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width var(--transition); }

/* Overlay Menu */
#menu{ position:fixed; inset:0; background:rgba(5,8,12,.86); backdrop-filter: blur(10px);
  opacity:0; pointer-events:none; transition: opacity var(--transition); display:grid; place-items:center; z-index:75; }
#menu.open{ opacity:1; pointer-events:auto; }
.menu-inner{ width:min(100%,1100px); padding:28px; display:grid; gap:18px; }
.menu-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.menu-card{ padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.menu-card h4{ margin:0 0 6px 0; }
.menu-card p{ margin:0; color:var(--muted); }

/* Controls */
.ctrl{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ctrl label{ font-size:13px; color:var(--muted); }
.switch{ position:relative; width:44px; height:24px; background:#263044; border-radius:999px; border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.switch i{ position:absolute; top:50%; left:2px; transform:translateY(-50%); width:20px; height:20px; background:white; border-radius:50%; transition:left var(--transition); }
.switch[data-on="true"] i{ left:22px; }

/* Presenter notes */
#notes{ position:fixed; right:16px; bottom:16px; width:min(560px,44vw); max-height:45vh; overflow:auto;
  background:rgba(10,14,20,.75); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px; z-index:76; display:none; }
#notes.open{ display:block; }
#notes h4{ margin:0 0 6px 0; }
.note{ font-size:14px; color:#c8d7ee; border-top:1px dashed rgba(255,255,255,.1); padding-top:8px; margin-top:8px; }

/* Poll & Quiz */
.poll, .quiz{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.poll button, .quiz button{ background:#0f1520; color:var(--text); border:1px solid rgba(255,255,255,.08); padding:10px 12px; border-radius:999px; cursor:pointer; font-weight:700; }
.poll button.active{ background:var(--accent-2); color:#04110a; }
.quiz .result{ font-weight:700; margin-left:6px; }
.quiz.correct .result{ color:var(--ok); }
.quiz.incorrect .result{ color:var(--danger); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  border:1px solid color-mix(in oklab, var(--accent) 65%, black);
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 70%, #fff0), color-mix(in oklab, var(--accent) 55%, #0000));
  color:white; font-weight:800; letter-spacing:.2px; cursor:pointer
}
.btn:hover{ background:linear-gradient(180deg, var(--color-dark-teal-hover), color-mix(in oklab, var(--color-dark-teal-hover) 65%, #0000)); }

/* Token chips */
.token{ display:inline-grid; grid-template-columns:38px auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.swatch{ width:38px; height:24px; border-radius:6px; border:1px solid rgba(255,255,255,.12); }

/* Slide Nav Arrows */
.nav-arrow{
  position:fixed; bottom:24px; z-index:77;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:12px 18px; min-width:62px; height:56px; border-radius:999px;
  background:rgba(7,10,16,.7); backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.12); color:var(--text);
  font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow:var(--shadow), 0 8px 24px rgba(0,0,0,.5);
  font-size:20px;
  transition: transform var(--transition), background var(--transition), opacity var(--transition), box-shadow var(--transition);
}
.nav-arrow:hover{ transform: translateY(-2px); background:rgba(12,16,24,.78); box-shadow:var(--shadow), 0 10px 28px rgba(0,0,0,.55), 0 0 18px color-mix(in oklab, var(--accent) 36%, transparent); }
.nav-arrow:focus-visible{ outline: none; box-shadow: var(--shadow), 0 0 0 3px color-mix(in oklab, var(--accent) 50%, transparent); }
.nav-arrow.left{ left:16px; }
.nav-arrow.right{ right:16px; }
.nav-arrow.disabled{ opacity:.45; pointer-events:none; }

/* Print */
@media print{
  body{ overflow:auto; background:white; color:#111; }
  #deck{ display:block; }
  .slide{ min-width:auto; height:auto; page-break-after:always; background:white; color:#111; }
  .toolbar, #menu, #notes, .progress{ display:none !important; }
  .nav-arrow{ display:none !important; }
}