* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#deckViewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#deckRoot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
}

/* ── Typography ── */
h1 {
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
    background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 60%, var(--pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  h1.large { font-size: 3.5rem; }
h2 {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-2);
  }
  h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--sp-2);
  }
  .subtitle {
    font-size: var(--fs-lg);
    color: var(--text-dim);
    margin-top: var(--sp-2);
    line-height: 1.5;
  }
  .small-text {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    line-height: 1.45;
  }
  .tiny {
    font-size: var(--fs-xs);
    color: var(--text-dim);
  }

/* ── Highlight spans ── */
.hl        { color: var(--accent); font-weight: 600; }
  .hl-green  { color: var(--green);  font-weight: 600; }
  .hl-red    { color: var(--red);    font-weight: 600; }
  .hl-orange { color: var(--orange); font-weight: 600; }
  .hl-purple { color: var(--purple); font-weight: 600; }
  .hl-yellow { color: var(--yellow); font-weight: 600; }
  .hl-cyan   { color: var(--cyan);   font-weight: 600; }
  .hl-pink   { color: var(--pink);   font-weight: 600; }

/* ── Interactive reveal ── */
.reveal-btn {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    border: 1px dashed var(--purple);
    background: rgba(88,40,184,0.08);
    color: var(--purple);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: var(--sp-2);
  }
  .reveal-btn:hover { background: rgba(88,40,184,0.16); }
  .hidden-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.6s ease, opacity 0.4s ease, margin 0.4s ease;
    margin-top: 0;
  }
  .hidden-content.revealed {
    max-height: 32rem;
    opacity: 1;
    margin-top: var(--sp-3);
  }
  .hidden-content.revealed.settled {
    max-height: none;
    overflow: visible;
  }

/* ── Speaker notes (hidden by default for projector) ── */
.speaker-notes { display: none; margin-top: auto; padding-top: var(--sp-3); }
  .show-notes .speaker-notes { display: block; }
  .notes-toggle {
    font-family: 'Inter', sans-serif;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-dim);
    background: none;
    border: 1px solid var(--border);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
  }
  .notes-toggle:hover { background: var(--surface2); }
  .notes-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
  }
  .notes-body.open {
    max-height: 25rem;
    opacity: 1;
    margin-top: var(--sp-2);
  }
  .notes-body p {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    line-height: 1.55;
    font-style: italic;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface2);
    border-radius: var(--radius-sm);
    border-left: 0.2rem solid var(--accent);
  }

/* ── Spacers ── */
.spacer-sm { height: var(--sp-3); }
  .spacer    { height: var(--sp-4); }
  .spacer-lg { height: var(--sp-5); }

/* ── Utility classes ── */
.text-base { font-size: var(--fs-base); }
.text-sm   { font-size: var(--fs-sm); }
.text-xs   { font-size: var(--fs-xs); }
.text-2xs  { font-size: var(--fs-2xs); }
.mono      { font-family: 'JetBrains Mono', monospace; }