:root {
    --bg:        #0a0a0b;
    --bg-2:      #121214;
    --ink:       #f5f1e8;
    --ink-dim:   #a8a29a;
    --ink-mute:  #6b6860;
    --rule:      rgba(245,241,232,0.12);
    --rule-2:    rgba(245,241,232,0.06);
    --gold:      oklch(0.80 0.12 78);
    --gold-dim:  oklch(0.65 0.10 78);
    --crimson:   oklch(0.62 0.17 28);
    --green:     oklch(0.72 0.14 155);
    --blue:      oklch(0.72 0.10 240);

    --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --f-serif: "Instrument Serif", "Times New Roman", serif;
  }

  :root[data-theme="light"] {
    --bg:        #f6f1e7;
    --bg-2:      #eee7dc;
    --ink:       #15130f;
    --ink-dim:   #4d473f;
    --ink-mute:  #746d62;
    --rule:      rgba(21,19,15,0.20);
    --rule-2:    rgba(21,19,15,0.11);
    --gold:      oklch(0.48 0.11 78);
    --gold-dim:  oklch(0.56 0.09 78);
    --crimson:   oklch(0.48 0.16 28);
    --green:     oklch(0.45 0.13 155);
    --blue:      oklch(0.45 0.10 240);
  }

  html, body { margin: 0; padding: 0; background: var(--bg); }
  body { font-family: var(--f-sans); }

  deck-stage { background: var(--bg); }

  /* ───── slide base ───── */
  .slide {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    padding: 140px 120px 100px;
    display: flex;
    flex-direction: column;
    position: relative;
    letter-spacing: -0.01em;
    word-break: keep-all;
  }
  .slide.center { align-items: center; justify-content: center; padding: 80px; text-align: center; }
  .slide.warm   { background: #0d0b08; }
  .slide.ivory  { background: var(--ink); color: #0a0a0b; }
  :root[data-theme="light"] .slide[style*="background:#000"],
  :root[data-theme="light"] .slide[style*="background: #000"],
  :root[data-theme="light"] .slide.warm,
  :root[data-theme="light"] .slide.ivory {
    background: var(--bg) !important;
    color: var(--ink);
  }

  /* slide chrome: top-right part indicator */
  .chrome {
    position: absolute;
    top: 44px;
    left: 120px;
    right: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 24px;
    letter-spacing: 0.14em;
    color: var(--ink-mute);
    text-transform: uppercase;
    z-index: 5;
  }
  .chrome .part { color: var(--gold); }
  .chrome .title { color: var(--ink-mute); font-size: 16px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; }
  .ivory .chrome .part { color: oklch(0.45 0.12 78); }
  .ivory .chrome { color: #6b6860; }

  /* type */
  .eyebrow {
    font-family: var(--f-mono);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 40px;
  }
  .title {
    font-size: 96px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0;
  }
  .title.med { font-size: 80px; }
  .title.sm  { font-size: 64px; }
  .subtitle {
    font-size: 38px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ink-dim);
    max-width: 1400px;
    margin-top: 36px;
  }
  .body {
    font-size: 32px;
    line-height: 1.45;
    color: var(--ink-dim);
    max-width: 1300px;
  }
  .kicker {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 42px;
    color: var(--ink-dim);
    letter-spacing: -0.01em;
  }

  /* utility */
  .fill { flex: 1; }
  .row  { display: flex; align-items: baseline; gap: 24px; }
  .col  { display: flex; flex-direction: column; }
  .mono { font-family: var(--f-mono); }
  .serif { font-family: var(--f-serif); font-style: italic; }

  /* placeholder stripe (for screenshot zones we don't have) */
  .ph {
    background: repeating-linear-gradient(45deg,
      rgba(245,241,232,0.035),
      rgba(245,241,232,0.035) 10px,
      transparent 10px,
      transparent 20px);
    border: 1px solid var(--rule);
    color: var(--ink-mute);
    font-family: var(--f-mono);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* quote slide */
  .pullquote {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 108px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 1500px;
    text-align: center;
  }
  .pullquote b { color: var(--gold); font-style: normal; font-family: var(--f-sans); font-weight: 500; }

  /* tiny annotation line */
  .annot {
    font-family: var(--f-mono);
    font-size: 24px;
    color: var(--ink-mute);
    letter-spacing: 0.04em;
  }