/* ── Page palette ─────────────────────────── */
:root{
  --header-h:4.25rem;
  --stage:#13171d;
  --stage-soft:#1b2028;
  --stage-line:#343c48;
  --v4-teal:#3a8a7a;
  --v4-teal-soft:#213b34;
  --v4-blue:#3f79a7;
  --v4-amber:#bf762e;
  --v4-rose:#b7515d;
  --v4-line:#d9ccbc;
}

/* ── Step dots (floating bottom) ─────────── */
.step-dots-wrap{
  pointer-events:none;
  position:fixed;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
}
.step-dots{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(27,29,33,.1);
  border-radius:999px;
  box-shadow:0 2px 12px rgba(22,28,38,.1);
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:.6rem .4rem;
  pointer-events:auto;
}
.step-dot{
  background:rgba(27,29,33,.18);
  border-radius:2px;
  cursor:pointer;
  height:.9rem;
  transition:background .22s ease,height .22s ease;
  width:.38rem;
}
.step-dot.is-active{background:var(--v4-teal);height:1.6rem}

/* ── Scroll-snap container ─────────────── */
.snap-wrap{
  height:calc(100vh - var(--header-h));
  overflow-y:scroll;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}

/* ── Each slide ────────────────────────── */
.slide{
  align-items:center;
  display:grid;
  gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:1fr 1.3fr;
  height:calc(100vh - var(--header-h));
  padding:clamp(1.25rem,3vw,2.5rem) clamp(1.25rem,4vw,3.5rem);
  scroll-snap-align:start;
}

/* ── Left: heading ─────────────────────── */
.slide-copy{display:flex;flex-direction:column;justify-content:center}

.slide-num{
  color:rgba(107,80,162,.18);
  display:block;
  font-family:var(--font-display);
  font-size:clamp(3.5rem,6vw,6rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  margin-bottom:.2rem;
}

.slide-label{
  color:var(--color-learn);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.08em;
  margin-bottom:.65rem;
  text-transform:uppercase;
}

.slide-copy h2{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3.6rem);
  letter-spacing:-.03em;
  line-height:1.08;
  margin-bottom:.6rem;
}

.slide-hint{
  color:var(--color-muted);
  font-size:.95rem;
  line-height:1.6;
  max-width:26rem;
  opacity:.7;
}

.slide-body{
  color:var(--color-muted);
  font-size:clamp(.95rem,1.2vw,1.06rem);
  line-height:1.72;
  max-width:30rem;
}

/* Cover slide */
.slide--cover .slide-copy h2{
  font-size:clamp(2.8rem,5.5vw,5rem);
  max-width:13ch;
}

.slide--cover .slide-hint{
  font-size:1.05rem;
  opacity:.8;
}

/* ── Right: light panel (matches cover) ── */
.slide-panel{
  background:#fffaf2;
  border:1px solid var(--v4-line);
  border-radius:8px;
  box-shadow:0 24px 70px rgba(61,49,37,.14);
  color:var(--color-text);
  display:flex;
  flex-direction:column;
  height:min(calc(100vh - var(--header-h) - 5rem),44rem);
  overflow:hidden;
  position:relative;
}

.panel-top{
  align-items:center;
  background:#29231e;
  color:#fbf5eb;
  display:flex;
  flex-shrink:0;
  gap:.75rem;
  padding:.85rem 1rem;
}
.panel-top__label{color:#cfc5b7;font-size:.88rem;margin-left:auto}

.panel-body{flex:1;min-height:0;overflow:hidden;padding:1.25rem}

/* ── Shared panel components ──────────── */
.screen-line{
  background:#fff;
  border:1px solid #e2d8ca;
  border-radius:8px;
  padding:.9rem;
  position:relative;
}

.plabel{
  color:var(--color-muted);
  font-size:.76rem;
  font-weight:800;
  margin:0 0 .6rem;
  text-transform:uppercase;
}

.sentence{
  color:var(--color-text);
  font-family:var(--font-display);
  font-size:clamp(1.35rem,2vw,1.8rem);
  font-weight:800;
  line-height:1.3;
  margin:0;
}

.blank{
  background:var(--color-text);
  border:1px solid transparent;
  color:#fff;
  display:inline-block;
  min-width:4.5rem;
  padding:0 .4rem;
  text-align:center;
}
.blank.is-filled{background:var(--v4-teal);border-color:var(--v4-teal);color:#fff}

.choices{display:grid;gap:.5rem;margin-top:.7rem}

.choice{
  align-items:center;
  background:#fff;
  border:1px solid #e2d8ca;
  color:var(--color-text);
  cursor:pointer;
  display:flex;
  gap:.75rem;
  justify-content:space-between;
  min-height:2.7rem;
  padding:.55rem .8rem;
  text-align:left;
  transition:background .15s,border-color .15s,color .15s;
  width:100%;
}
.choice:hover{background:#f5ede2;border-color:#c8b89e}
.choice.is-right{background:#e8f5f0;border-color:var(--v4-teal);color:#1a3830}
.choice.is-off{background:#fdf0f0;border-color:#d08488;color:#5a2025}
.choice__word{font-size:1rem;font-weight:600}
.choice__hint{color:var(--color-muted);font-size:.82rem;text-align:right}

.feedback{background:#e8f5f0;border:1px solid #b5ddd3;color:#1a3830;font-size:.93rem;margin-top:.7rem;padding:.7rem}
.feedback.is-warn{background:#fdf0f0;border-color:#e0a8ad;color:#5a2025}
.feedback p{color:inherit;margin:0}
.slide-panel p:not([class]){color:inherit}

.inline-btn{background:#fff;border:1px solid #d0c2ad;color:var(--color-text);cursor:pointer;font:inherit;font-weight:800;margin-top:.7rem;min-height:2.2rem;padding:.45rem .85rem}
.inline-btn:hover{background:#f5ede2}

.try-btn{background:none;border:none;color:var(--color-muted);cursor:pointer;font:inherit;font-size:.85rem;margin-top:.75rem;padding:0;text-decoration:underline;text-underline-offset:.2em}
.try-btn:hover{color:var(--color-text)}

/* Prob bars */
.prob-bars{display:grid;gap:.48rem;margin-top:.75rem}
.prob-row{align-items:center;display:grid;gap:.6rem;grid-template-columns:5.5rem 1fr 3rem}
.prob-row b{color:var(--color-text);font-size:.9rem;font-weight:800;text-align:right}
.prob-row b.is-picked{color:var(--v4-teal)}
.prob-track{background:#e8e0d4;height:.58rem;overflow:hidden}
.prob-fill{background:var(--v4-blue);height:100%;transform:scaleX(0);transform-origin:left;transition:transform 520ms cubic-bezier(.34,1.1,.64,1);width:100%}
.prob-fill.is-winner{background:var(--v4-teal)}
.prob-pct{color:var(--color-muted);font-size:.8rem;font-variant-numeric:tabular-nums;opacity:0;transition:opacity 280ms ease}
.prob-pct.on{opacity:1}

/* Mini-map */
.mini-map{display:grid;gap:.5rem;margin-top:.75rem}
.map-row{align-items:center;background:#fff;border:1px solid #e2d8ca;display:grid;gap:.65rem;grid-template-columns:7rem 1fr;min-height:3.2rem;padding:.6rem .85rem}
.map-row strong{color:var(--color-text)}
.map-row span{color:var(--color-muted)}
.practice-row{background:#fff;border:1px solid #e2d8ca;display:block;grid-template-columns:none;min-height:auto;padding:.75rem .85rem}
.practice-row span{color:var(--color-text);display:block;font-size:.95rem;line-height:1.5}
.practice-row strong{color:var(--color-muted);display:block;font-size:.72rem;font-weight:800;letter-spacing:.07em;margin-top:.4rem;opacity:.6;text-transform:uppercase;white-space:nowrap}
.cmp-grid{display:grid;gap:.5rem;grid-template-columns:1fr 1fr;margin-top:.75rem}
.cmp-card{background:#fff;border:1px solid #e2d8ca;border-radius:4px;padding:.75rem}
.cmp-card strong{color:var(--color-text);display:block;font-weight:700;margin-bottom:.3rem}
.cmp-card span{color:var(--color-muted);font-size:.85rem;line-height:1.4}
.cmp-same{background:#e8f5f0;border:1px solid var(--v4-teal);border-radius:4px;color:#1a3830;font-size:.95rem;margin-top:.5rem;padding:.75rem}
.cmp-same strong{color:var(--v4-teal);font-weight:800}
.map-row mark{background:rgba(183,81,93,.12);color:#8a3540;padding:.05rem .2rem}
.map-row em{color:var(--v4-teal);font-style:normal;font-weight:800}

/* Example wall */
.example-wall{display:grid;gap:.5rem;grid-template-columns:1fr 1fr;margin-top:.75rem}
.example-card{background:#fff;border-left:4px solid var(--c);color:var(--color-text);min-height:3rem;padding:.6rem .75rem}
.example-card small{color:var(--color-muted);display:block;font-weight:800;margin-bottom:.2rem}

/* Look-back */
.lookback-sentence{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.word-chip{background:#fff;border:1px solid #e2d8ca;color:var(--color-text);font-family:var(--font-display);font-size:1.2rem;font-weight:800;padding:.15rem .32rem}
.word-chip.is-target,.word-chip.is-answer{background:#e8f5f0;border-color:var(--v4-teal);color:#1a3830}

/* Context picker */
.ctx-picker{display:flex;flex-wrap:wrap;gap:.5rem}
.ctx-picker .choice{flex:1 1 auto;justify-content:center;min-height:2.4rem;padding:.45rem .7rem;width:auto}
.ctx-picker .choice__word{font-size:.86rem}
.ctx-picker .choice.is-active{background:#e8f5f0;border-color:var(--v4-teal);color:#1a3830}
.ctx-line{color:var(--color-muted);font-size:.9rem;line-height:1.5;margin:0 0 .55rem}

/* Chat thread */
.chat-thread{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.65rem}
.chat-row{display:flex;flex-direction:column;gap:.18rem}
.chat-row--user{align-items:flex-end}
.chat-row--ai{align-items:flex-start}
.chat-name{color:var(--color-muted);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chat-bubble{border-radius:1rem;font-size:.9rem;line-height:1.55;max-width:84%;padding:.6rem .85rem}
.chat-bubble--user{background:#1d4668;border-bottom-right-radius:.2rem;color:#fff}
.chat-bubble--ai{background:#f0ede8;border-bottom-left-radius:.2rem;color:#1d1f24}
.wrong-prompt{color:var(--color-muted);font-size:.86rem;margin:.1rem 0 .35rem}

/* Summary flow */
.summary-flow{display:grid;gap:.7rem;grid-template-columns:1fr auto 1fr auto 1fr;margin-top:.75rem}
.summary-box{background:#fff;border:1px solid #e2d8ca;color:var(--color-text);min-height:5.5rem;padding:.9rem}
.summary-box strong{color:var(--color-text);display:block;font-family:var(--font-display);font-size:1.25rem;line-height:1.1;margin-bottom:.4rem}
.summary-arrow{align-self:center;background:#e8e0d4;color:var(--color-text);display:grid;height:2.2rem;place-items:center;width:2.2rem}

/* Chain animation */
.chain-built{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem;min-height:2.4rem}
.chain-thinking{align-items:center;border-top:1px solid #e2d8ca;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem;min-height:2.8rem;padding-top:.7rem}
.ghost-word{color:#a09890;font-size:1rem;font-weight:800;padding:.2rem .35rem;transition:color .18s,background .18s,opacity .15s}
.ghost-word.g-real.g-chosen{background:#e8f5f0;border:1px solid var(--v4-teal);color:var(--v4-teal)}
.ghost-word.g-fade{opacity:0}
.piece{background:#fff;border:1px solid #e2d8ca;color:var(--color-text);padding:.38rem .55rem}
.piece.is-new{animation:newpiece 600ms ease}
@keyframes newpiece{0%,100%{background:#fff}40%{background:#e8f5f0}}

/* Arc (look-back) */
.arc-svg{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}
.arc-path{fill:none;opacity:0;stroke:var(--v4-teal);stroke-linecap:round;stroke-width:2.5;transition:opacity .25s}
.arc-path.on{opacity:.72}

/* ── Cover scene (light, v3 style) ─────── */
.cover-scene{
  background:#fffaf2;
  border:1px solid var(--v4-line);
  border-radius:8px;
  box-shadow:0 24px 70px rgba(61,49,37,.14);
  height:min(calc(100vh - var(--header-h) - 5rem),44rem);
  overflow:hidden;
}
.cover-scene img{
  display:block;
  height:100%;
  object-fit:cover;
  width:100%;
}
.cs-dot{border-radius:2px;display:inline-block;height:.58rem;width:.58rem}
.cs-dot--rose{background:#d96b74}
.cs-dot--amber{background:#dda052}
.cs-dot--teal{background:#67b3a4}

/* ── Dark theme ───────────────────────────
   The interactions and hierarchy stay unchanged; only the paper, ink,
   borders, and semantic feedback colors move onto a night palette. */
html[data-theme="dark"]{
  --v4-teal:#69c6b4;
  --v4-teal-soft:#203e38;
  --v4-blue:#78add8;
  --v4-amber:#e2a35f;
  --v4-rose:#df7d88;
  --v4-line:#3b4350;
}

html[data-theme="dark"] .step-dots{
  background:rgba(18,22,27,.86);
  border-color:rgba(238,241,245,.14);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
html[data-theme="dark"] .step-dot{background:rgba(238,241,245,.24)}
html[data-theme="dark"] .step-dot.is-active{background:var(--v4-teal)}
html[data-theme="dark"] .slide-num{color:rgba(169,146,222,.3)}

html[data-theme="dark"] .slide-panel,
html[data-theme="dark"] .cover-scene{
  background:#171c23;
  border-color:var(--v4-line);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}
html[data-theme="dark"] .cover-scene img{filter:brightness(.78) saturate(.9)}
html[data-theme="dark"] .panel-top{background:#0d1014;color:#f1f3f6}
html[data-theme="dark"] .panel-top__label{color:#aeb6c2}

html[data-theme="dark"] .screen-line,
html[data-theme="dark"] .choice,
html[data-theme="dark"] .inline-btn,
html[data-theme="dark"] .map-row,
html[data-theme="dark"] .practice-row,
html[data-theme="dark"] .cmp-card,
html[data-theme="dark"] .example-card,
html[data-theme="dark"] .word-chip,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .piece{
  background:#20262e;
  border-color:#39424f;
}

html[data-theme="dark"] .choice:hover,
html[data-theme="dark"] .inline-btn:hover{background:#29313b;border-color:#566273}
html[data-theme="dark"] .blank{background:#6d56a4;color:#fff}
html[data-theme="dark"] .choice.is-right,
html[data-theme="dark"] .feedback,
html[data-theme="dark"] .cmp-same,
html[data-theme="dark"] .word-chip.is-target,
html[data-theme="dark"] .word-chip.is-answer,
html[data-theme="dark"] .ghost-word.g-real.g-chosen{
  background:#18332e;
  border-color:var(--v4-teal);
  color:#b8e4da;
}
html[data-theme="dark"] .ctx-picker .choice.is-active{
  background:#18332e;
  border-color:var(--v4-teal);
  color:#b8e4da;
}
html[data-theme="dark"] .choice.is-off,
html[data-theme="dark"] .feedback.is-warn{
  background:#3b2227;
  border-color:#9e5861;
  color:#f0b0b8;
}
html[data-theme="dark"] .prob-track,
html[data-theme="dark"] .summary-arrow{background:#333b46}
html[data-theme="dark"] .map-row mark{background:rgba(223,125,136,.16);color:#f0a6af}
html[data-theme="dark"] .chat-bubble--user{background:#315f86;color:#fff}
html[data-theme="dark"] .chat-bubble--ai{background:#272e37;color:#eef1f5}
html[data-theme="dark"] .chain-thinking{border-color:#39424f}
html[data-theme="dark"] .ghost-word{color:#929cab}

@keyframes newpiece-dark{0%,100%{background:#20262e}40%{background:#18332e}}
html[data-theme="dark"] .piece.is-new{animation-name:newpiece-dark}

/* ── Responsive ────────────────────────── */
@media(max-width:64rem){
  .snap-wrap{height:auto;overflow:visible;scroll-snap-type:none}
  .slide{grid-template-columns:1fr;height:auto;min-height:100svh;padding-bottom:3rem;padding-top:2.5rem}
  .slide-panel{height:auto;min-height:24rem}
  .panel-body{overflow:visible}
  .summary-flow,.confidence,.example-wall{grid-template-columns:1fr}
  .summary-arrow{justify-self:center;transform:rotate(90deg)}
  .map-row{grid-template-columns:1fr}
  .cover-scene{aspect-ratio:16 / 9;height:auto;min-height:0}
  .step-dots-wrap{display:none}
}

@media(max-width:42rem){
  .slide-num{font-size:3rem}
  .slide-copy h2{font-size:1.65rem}
  .sentence{font-size:1.3rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}