/* ============================================================
   Folveo — Homepage-only styles (index.html)
   Loaded AFTER styles.css. Scope: the redesigned VI homepage.
   Sub-pages do NOT load this file → zero risk to them.
   New class namespaces added per phase:
     P0 foundation : .stage, .stage--dark, .stage--light, .spotlight
     P1 hero+ai    : .hero-anim*        (added in phase 1)
     P3 click-fix  : .fix-sim*          (added in phase 3)
     P4 presenter  : .presenter-sim*, .spot-cursor  (added in phase 4)
     P5 remote     : .phone-remote*     (added in phase 5)
     P6 showcase   : .deck-frame*        (added in phase 6)
   ============================================================ */

/* ---------- stage system: dark <-> light rhythm ---------- */
.stage {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  isolation: isolate; /* keep spotlight/glow z-index local to the section */
}
@media (max-width: 760px) { .stage { padding: 68px 0; } }

/* dark stage = the default site palette (matches body) */
.stage--dark {
  background: var(--stage-bg);
  color: var(--fg);
}

/* light stage = inverted section; remap text tokens to the light scale.
   .gradient-text keeps the accent gradient (reads fine on light). */
.stage--light {
  background: var(--light-bg);
  color: var(--light-fg);
}
.stage--light .eyebrow { color: var(--light-muted); }
.stage--light .section-head h2,
.stage--light h2,
.stage--light h3 { color: var(--light-fg); }
.stage--light .section-head p,
.stage--light p { color: var(--light-muted); }
.stage--light .lead { color: var(--light-muted); }

/* soft seams top + bottom so light<->dark transitions never hard-jump,
   including where a light stage is followed by a plain dark .section.
   .stage has isolation:isolate, so a z-index:-1 pseudo sits above the
   section's own background but below content. */
.stage--light::before,
.stage--dark::before,
.stage--light::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 96px;
  z-index: -1; pointer-events: none;
}
.stage--light::before { top: 0; background: linear-gradient(180deg, rgba(7,17,31,.06), transparent); }
.stage--dark::before  { top: 0; background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.stage--light::after  { bottom: 0; height: 64px; background: linear-gradient(0deg, rgba(7,17,31,.07), transparent); }

/* ---------- spotlight: the signature dark-stage material ---------- */
.spotlight {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--spotlight);
}
@media (prefers-reduced-motion: reduce) {
  .spotlight { opacity: .85; } /* static, no pulsing (any animation added later must respect this) */
}

/* ============================================================
   P1 — Hero "AI builds a slide" animation
   One engine (home.js), two mount points ([data-hero-anim]).
   Decorative (aria-hidden). Real H1/lead/CTA stay in the DOM.
   Timeline (JS toggles step classes on .hero-anim):
     .is-type → .is-outline → .is-build → .is-done
   No-JS / reduced-motion: jumps straight to .is-done (static composed frame).
   ============================================================ */

/* app window chrome */
.ha-stage { position: relative; height: 400px; padding: 24px; overflow: hidden; }
@media (max-width: 640px) { .ha-stage { height: 360px; padding: 18px; } }

/* prompt bar */
.ha-prompt {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 13px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-strong);
  font-size: 16px; color: var(--fg); position: relative; z-index: 3;
}
.ha-prompt .ha-spark { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent-2); }
.ha-typed { white-space: nowrap; overflow: hidden; }
.ha-caret { width: 2px; height: 20px; background: var(--accent-2); display: inline-block; animation: haBlink 1s steps(1) infinite; }
@keyframes haBlink { 50% { opacity: 0; } }
.ha-send { margin-left: auto; flex: 0 0 auto; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 9px; background: var(--grad); color: #fff; opacity: .55; }

/* status pill */
.ha-status {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-size: 13.5px; color: var(--fg-muted); opacity: 0; transform: translateY(-4px);
  transition: opacity .3s, transform .3s;
}
.ha-status .ha-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--accent-2); animation: haSpin .7s linear infinite; }
@keyframes haSpin { to { transform: rotate(360deg); } }

/* outline chips */
.ha-outline { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.ha-chip {
  font-size: 13px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.06);
  border: 1px solid var(--border-strong); color: var(--fg-muted);
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
.ha-chip:nth-child(1){transition-delay:.05s}.ha-chip:nth-child(2){transition-delay:.13s}.ha-chip:nth-child(3){transition-delay:.21s}.ha-chip:nth-child(4){transition-delay:.29s}.ha-chip:nth-child(5){transition-delay:.37s}

/* deck of mini slides */
/* build: slides pop into a stack (staggered) */
/* done (and no-JS composed frame): fan out like a hand of cards under the spotlight */
/* mini-slide looks (distinct archetypes so it reads as "real slides") */

/* replay button */
.ha-replay {
  display: inline-flex; align-items: center; gap: 8px; margin: 20px auto 0;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--fg-muted);
  font: inherit; font-size: 13.5px; font-weight: 600; transition: color .15s, border-color .15s;
}
.ha-replay:hover { color: var(--fg); border-color: var(--accent-2); }
.ha-replay svg { width: 15px; height: 15px; }

/* No-JS / reduced-motion: show the finished composed frame, no motion */
@media (prefers-reduced-motion: reduce) {
  .ha-caret { animation: none; } .ha-status .ha-spin { animation: none; }
}

/* ============================================================
   P2 — Stage 2 "Interactive slides" (LIGHT stage) + reusable
   light-surface overrides shared by every .stage--light (P4/P6/P7).
   The shared .demo-*/.feature/.value-card/.pricing-note classes use
   white-alpha dark-surface tokens (styles.css) that vanish on light,
   so remap them here, SCOPED under .stage--light. Sub-pages never
   load home.css, so slide-tuong-tac/ keeps its dark demo untouched.
   ============================================================ */

/* shared light card surface (demo card + feature + value cards) */
.stage--light .demo-card,
.stage--light .feature,
.stage--light .value-card {
  background: #fff;
  border-color: rgba(15, 23, 42, .10);
  box-shadow: 0 20px 50px -24px rgba(15, 23, 42, .28);
}
.stage--light .feature:hover,
.stage--light .value-card:hover { background: #fff; border-color: rgba(15, 23, 42, .22); }

/* slide-style chrome bar so the demo reads as a real interactive slide */
.demo-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; background: #eef1f6; border-bottom: 1px solid rgba(15, 23, 42, .08);
}
.demo-chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(15, 23, 42, .16); }
.demo-chrome > span:first-of-type { margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--light-muted); }
.demo-chrome-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--accent); }
.demo-chrome-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }

/* tabs on light */
.stage--light .demo-tabs { background: #eef1f6; border-bottom-color: rgba(15, 23, 42, .08); }
.stage--light .demo-tab { color: var(--light-muted); }
.stage--light .demo-tab:hover { color: var(--light-fg); }
.stage--light .demo-tab.is-active { background: var(--grad); color: #fff; }

/* demo body text + controls on light */
.stage--light .demo-q { color: var(--light-fg); }
.stage--light .demo-q b { color: var(--accent); }
.stage--light .demo-opt { background: #f5f7fb; border-color: rgba(15, 23, 42, .12); color: var(--light-fg); }
.stage--light .demo-opt:hover { border-color: var(--accent-2); }
.stage--light .demo-opt.correct { border-color: #16a34a; background: rgba(22, 163, 74, .10); color: #166534; }
.stage--light .demo-opt.wrong { border-color: var(--coral); background: rgba(249, 115, 98, .10); color: #b91c1c; }
.stage--light .demo-result.ok { color: #15803d; }
.stage--light .demo-result.no { color: #dc2626; }
.stage--light .demo-figure { color: var(--light-muted); }
.stage--light .demo-figure b { color: var(--light-fg); }
.stage--light .demo-bar > i { color: var(--light-muted); }
.stage--light .demo-reveal-list li { background: #f5f7fb; border-color: rgba(15, 23, 42, .14); color: var(--light-muted); }
.stage--light .demo-reveal-list li.shown { color: var(--light-fg); border-color: rgba(15, 23, 42, .22); }

/* feature card innards on light */
.stage--light .feature h3 { color: var(--light-fg); }
.stage--light .feature p { color: var(--light-muted); }
.stage--light .feature-ic { background: #eef2f9; border-color: rgba(15, 23, 42, .10); }
.stage--light .feature-ic svg { color: var(--accent); }

/* note + secondary button on light */
.stage--light .pricing-note { background: #fff; border-color: rgba(15, 23, 42, .10); color: var(--light-muted); }
.stage--light .pricing-note b { color: var(--light-fg); }
.stage--light .btn-secondary { background: #fff; color: var(--light-fg); border-color: rgba(15, 23, 42, .14); }
.stage--light .btn-secondary:hover { background: #f1f4f9; }

/* let tabs share width evenly and never overflow the card on narrow screens */
.stage--light .demo-tab { min-width: 0; white-space: nowrap; }

/* keyboard focus stays visible on light surfaces */
.stage--light .demo-tab:focus-visible,
.stage--light .demo-opt:focus-visible,
.stage--light .demo-reveal-btn:focus-visible,
.stage--light .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Shared spinner + pulse (reused by §3 editor "AI đang sửa" + element markers) */
.fix-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--accent-2); animation: haSpin .7s linear infinite; }
@keyframes fixPulse { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ============================================================
   P4 — Stage 4 "Presenter toolkit" (LIGHT stage)
   Left: a CSS speaker-view mockup (current + next + notes + timer).
   Right: a REAL spotlight cursor — mousemove sets --mx/--my (rAF,
   home.js), a radial mask dims around the pointer. Pointer-mode
   chips switch spotlight / laser / rainbow (visual only). Touch,
   no-JS and reduced-motion fall back to a static centred spotlight.
   ============================================================ */

/* speaker-view device (dark screen reads as a real presenter display) */
.presenter-sim { background: #0c1a30; border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(15,23,42,.5); display: flex; flex-direction: column; }
.ps-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 12.5px; font-weight: 600; color: var(--fg-dim); background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); }
.ps-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.ps-body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; padding: 16px; }
.ps-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--fg-dim); margin-bottom: 7px; text-transform: uppercase; }
.ps-slide { border-radius: 10px; border: 1px solid var(--border); }
.ps-slide--current { aspect-ratio: 16/9; padding: 16px; background: linear-gradient(135deg, #16386a, #0b1f3b); display: flex; flex-direction: column; justify-content: space-between; }
.ps-slide--current b { font-size: 15px; color: #fff; }
.ps-bars { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.ps-bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--grad); }
.ps-bars i:nth-child(1){ height: 50%; } .ps-bars i:nth-child(2){ height: 78%; } .ps-bars i:nth-child(3){ height: 100%; }
.ps-slide--next { aspect-ratio: 16/9; padding: 12px; background: #f4f7fb; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ps-nb { height: 7px; border-radius: 3px; background: rgba(15,23,42,.2); }
.ps-nb.lg { width: 80%; } .ps-nb.md { width: 60%; } .ps-nb.sm { width: 40%; background: var(--accent); }
.ps-timer { margin-top: 12px; }
.ps-timer b { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ps-notes { padding: 14px 16px 18px; border-top: 1px solid var(--border); }
.ps-notes p { font-size: 13.5px; color: var(--fg-muted); margin: 0; line-height: 1.55; }


/* ============================================================
   P5 — Stage 5 "Phone Remote" (DARK, understated — last stage)
   A phone mockup "controls" a mock deck: prev/next, laser, timer,
   blackout. Deliberately calmer/smaller than stages 1-2. Pure
   client simulation — the QR is decorative, NO real endpoint,
   and copy never exposes Wi-Fi/HTTP/token internals (brand rule).
   ============================================================ */


/* mock presentation screen (understated size) */
.rs-slide { position: absolute; inset: 0; padding: clamp(16px, 4vw, 30px); display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: 0; transition: opacity .45s ease; }
.rs-slide--1 { opacity: 1; background: linear-gradient(135deg, #143968, #0b1f3b); }
.rs-slide--2 { background: linear-gradient(135deg, #10294a, #0a1830); }
.rs-kicker { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--accent-2); }
.rs-slide b { font-size: clamp(16px, 3.4vw, 24px); color: #fff; }
.rs-sub { font-size: 12px; color: var(--fg-muted); }
.rs-timer { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; z-index: 3; }
.rs-timer b { font-size: 12.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rs-black { position: absolute; inset: 0; background: #05070c; opacity: 0; transition: opacity .3s; z-index: 4; pointer-events: none; }

/* phone mockup + remote buttons */
.phone-remote { flex: 0 0 auto; width: 156px; border-radius: 26px; padding: 14px 12px 16px; background: #10203a; border: 1px solid var(--border-strong); box-shadow: 0 26px 60px -26px rgba(0,0,0,.75); }
.pr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 2px 2px 10px; border-bottom: 1px solid var(--border); }
.pr-qr { width: 24px; height: 24px; border-radius: 5px; background: conic-gradient(from 0deg, #e6ecf5 25%, #0b1f3b 0 50%, #e6ecf5 0 75%, #0b1f3b 0); background-size: 8px 8px; }
.pr-title { font-size: 11.5px; font-weight: 700; color: var(--fg-muted); }
.pr-nav { display: flex; gap: 8px; margin-bottom: 8px; }
.pr-btn { border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 600; border-radius: 11px; padding: 10px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.pr-btn--nav { flex: 1; display: grid; place-items: center; }
.pr-btn--nav svg { width: 18px; height: 18px; }
.pr-btn:hover { border-color: var(--accent-2); }
.pr-btn:active { background: var(--grad); color: #fff; }
.pr-tools { display: flex; flex-direction: column; gap: 8px; }
.pr-btn[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.pr-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.remote-note { text-align: center; margin: 22px auto 0; font-size: 13px; color: var(--fg-dim); }

@media (prefers-reduced-motion: reduce) {
  .rs-slide, .rs-laser, .rs-timer, .rs-black { transition: none; }
}

/* ============================================================
   P6 — Showcase live-embed (LIGHT stage)
   The 6 authored demo decks (assets/decks/*.html, intrinsic
   1920x1080, self-contained) are lazy-mounted as sandboxed iframes
   and CSS-scaled to the frame width by home.js mountDecks(). Each
   frame reserves a 16:9 box (CLS ~0) with a gradient poster that
   fades on load; <noscript> falls back to a link. Zero external
   requests at runtime by construction.
   ============================================================ */
@media (max-width: 920px) { .deck-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .deck-grid { grid-template-columns: 1fr; } }


@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   REDESIGN (consolidation) — §3 Tạo→Tinh chỉnh, §4 element library,
   §5 present+remote, "còn nữa" strip. Reuses .demo-*/.deck-frame/
   .presenter-sim/.spot-*/.phone-remote where possible.
   ============================================================ */

/* §3 — 3-step flow strip (dark) */

/* §3 — editor mock (dark) */
.editor { max-width: 1000px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0c1a30; border: 1px solid var(--border-strong); box-shadow: 0 50px 100px -34px rgba(0,0,0,.7); }
.editor-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); }
.editor-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.2); }
.editor-bar-title { margin-left: 12px; font-size: 12.5px; color: var(--fg-dim); }
.editor-mode { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.editor-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; }
@media (max-width: 780px) { .editor-body { grid-template-columns: 1fr; } }

.editor-canvas { padding: 20px; display: grid; place-items: center; border-right: 1px solid var(--border); background: radial-gradient(120% 100% at 50% 0%, rgba(124,107,255,.10), transparent 60%); }
@media (max-width: 780px) { .editor-canvas { border-right: 0; border-bottom: 1px solid var(--border); } }
.ed-stage { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); background: #0b1f3b; box-shadow: 0 30px 70px -30px rgba(0,0,0,.6); }
/* real-slide layer (iframe scaled from 1920x1080); fades in over the mock */
.ed-real { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.ed-real__scaler { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; }
.ed-real__scaler iframe { width: 1920px; height: 1080px; border: 0; display: block; }
.ed-stage.is-real .ed-real { opacity: 1; }

.editor-inspector { padding: 18px 18px 22px; background: rgba(255,255,255,.02); }
.ei-head { font-size: 12px; font-weight: 700; color: var(--fg-dim); margin-bottom: 12px; }
.ei-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: var(--surface-2); margin-bottom: 16px; }
.ei-tab { flex: 1; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ei-tab.is-active { background: var(--grad); color: #fff; }
.ei-tab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ei-panel { display: none; }
.ei-panel.is-active { display: block; animation: demoFade .3s ease; }
.ei-hint { font-size: 12.5px; color: var(--fg-dim); margin: 0 0 16px; line-height: 1.5; }
.ei-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fg-muted); margin-bottom: 16px; }
.ei-ctrl input[type=range] { flex: 0 0 55%; accent-color: var(--accent-2); }
.ei-field { margin-bottom: 16px; }
.ei-field > span { display: block; font-size: 13px; color: var(--fg-muted); margin-bottom: 8px; }
.ei-swatches { display: flex; gap: 8px; }
.ei-sw { width: 28px; height: 28px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.ei-sw.is-active { border-color: #fff; }
.ei-sw--w { background: #F4F7FB; } .ei-sw--b { background: #3B82F6; } .ei-sw--v { background: #7C6BFF; } .ei-sw--o { background: #FB923C; }
.ei-sw:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ei-note { font-size: 13.5px; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; line-height: 1.45; }
.ei-ai-btn { width: 100%; padding: 10px; border: 0; border-radius: 10px; background: var(--grad); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ei-ai-btn:hover { filter: brightness(1.08); }
.ei-fixing { display: none; align-items: center; gap: 9px; font-size: 13px; color: var(--fg-muted); margin-top: 12px; }
.editor-inspector.is-fixing .ei-ai-btn, .editor-inspector.is-fixing .ei-note { display: none; }
.editor-inspector.is-fixing .ei-fixing { display: flex; }
.editor-caption { text-align: center; margin: 22px auto 0; font-size: 14px; color: var(--fg-muted); }

/* §3 — deck filmstrip (showcase woven in) */

/* §4 — element palette (light) */
.el-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,23,42,.10); color: var(--light-fg); font-size: 14px; font-weight: 600; box-shadow: 0 10px 26px -18px rgba(15,23,42,.35); transition: transform .15s, border-color .15s; }
.el-chip:hover { transform: translateY(-2px); border-color: var(--accent-2); }
.el-chip svg { width: 20px; height: 20px; color: var(--accent); }

/* §5 — present grid + canvas fx + phone caption */
.spot-fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pr-cap { font-size: 10.5px; color: var(--fg-dim); text-align: center; margin: 0 0 12px; }

/* "còn nữa" strip (dark) */
/* ============================================================
   "Còn nữa" v2 — a bento: one wide interoperability showpiece
   (Import → deck.folveo → Export) + 4 supporting tiles.
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } }

.bento-tile { padding: 26px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, background .15s; }
.bento-tile:hover { border-color: var(--border-strong); background: var(--surface-2); }
.bento-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border-strong); margin-bottom: 16px; }
.bento-ic svg { width: 23px; height: 23px; color: var(--accent-2); }
.bento-tile h3 { font-size: 16px; margin: 0 0 8px; }
.bento-tile p { font-size: 13.5px; color: var(--fg-muted); margin: 0; line-height: 1.55; }

/* interoperability showpiece — spans the full row */
.bento-io { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; background: radial-gradient(120% 140% at 50% -20%, rgba(124,107,255,.12), transparent 60%), var(--surface); }
.bento-io__head h3 { font-size: 19px; margin: 0 0 4px; }
.bento-io__head p { font-size: 14px; color: var(--fg-muted); margin: 0; }
.bento-io__foot { font-size: 13.5px; color: var(--fg-muted); line-height: 1.6; margin: 4px 0 0; }
.bento-io__foot b { color: var(--fg); font-weight: 600; }

.io-flow { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; margin: 22px 0 20px; }
.io-col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.io-label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); }
.io-chip { padding: 8px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.io-chip--native { background: var(--grad-soft); border-color: var(--accent-2); color: #fff; }
.io-arrow { color: var(--accent-2); flex: 0 0 auto; }
.io-arrow svg { width: 40px; height: 22px; }
.io-core { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.io-deck { position: relative; width: 108px; height: 68px; }
.io-deck i { position: absolute; inset: 0; border-radius: 10px; border: 1px solid var(--border-strong); box-shadow: 0 16px 34px -18px rgba(0,0,0,.7); }
.io-deck i:nth-child(1) { background: #0f2a50; transform: translate(-14px, 8px) rotate(-7deg); }
.io-deck i:nth-child(2) { background: #12325e; transform: translate(0, 4px) rotate(0deg); }
.io-deck i:nth-child(3) { background: linear-gradient(135deg, #3B82F6, #7C6BFF); transform: translate(14px, 0) rotate(7deg); }
.io-core-name { font-size: 12.5px; color: var(--fg-muted); }
.io-core-name b { color: var(--fg); font-weight: 700; }
@media (max-width: 620px) {
  .io-arrow svg { transform: rotate(90deg); }
  .io-col { align-items: center; }
}

/* no-JS: hide non-functional editor affordances (the static slide still reads) */
html:not(.js) .ei-fixing { display: none; }

/* ============================================================
   §4 v3 — Element GALLERY, polished: premium chips (gradient icon
   tiles + cycle progress bar), a rich slide canvas (layered glow,
   grid texture, slide footer), and staggered entrance choreography
   per element type. The "Câu đố" chip swaps in the live quiz.
   ============================================================ */
.el-stage { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: stretch; margin-bottom: 8px; }
@media (max-width: 900px) { .el-stage { grid-template-columns: 1fr; } }

.el-menu { display: grid; grid-template-columns: 1fr; gap: 9px; align-content: start; }
@media (max-width: 900px) { .el-menu { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
.el-chip {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px;
  border-radius: 14px; background: #fff; border: 1px solid rgba(15,23,42,.10);
  color: var(--light-fg); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left;
  box-shadow: 0 8px 22px -16px rgba(15,23,42,.4);
  transition: transform .18s ease, border-color .18s, box-shadow .18s, background .18s, color .18s;
}
.el-chip svg { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--grad-soft); color: var(--accent); flex: 0 0 auto; transition: background .18s, color .18s; }
.el-chip:hover { transform: translateX(4px); border-color: var(--accent-2); box-shadow: 0 14px 30px -16px rgba(59,130,246,.45); }
.el-chip.is-active { background: linear-gradient(120deg, #3B82F6, #7C6BFF); color: #fff; border-color: transparent; box-shadow: 0 16px 36px -14px rgba(124,107,255,.6); }
.el-chip.is-active svg { background: rgba(255,255,255,.18); color: #fff; }
.el-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* auto-cycle progress bar on the active chip (only while cycling) */
.el-stage.is-cycling .el-chip.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255,255,255,.75); transform-origin: left; animation: elCycle 2600ms linear both;
}
@keyframes elCycle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* — the slide canvas: layered glow + grid texture + footer — */
.el-canvas { min-width: 0; }
.el-slide {
  position: relative; aspect-ratio: 16/9; border-radius: 20px; overflow: hidden;
  padding: clamp(18px, 3vw, 32px) clamp(20px, 3.4vw, 36px) clamp(12px, 2vw, 18px);
  background:
    radial-gradient(70% 90% at 82% -10%, rgba(124,107,255,.38), transparent 60%),
    radial-gradient(50% 70% at 4% 100%, rgba(59,130,246,.20), transparent 62%),
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(150deg, #0f2a50 0%, #0b1e3c 46%, #081426 100%);
  background-size: auto, auto, 46px 46px, 46px 46px, auto;
  border: 1px solid rgba(15,23,42,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 42px 90px -36px rgba(13,32,61,.6), 0 26px 70px -30px rgba(124,107,255,.38);
  display: flex; flex-direction: column;
}
.el-slide[hidden], .el-quiz[hidden] { display: none; } /* author display beats the hidden attr otherwise */
.el-slide-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #9fb2cc; }
.el-slide-kicker::before { content: ""; width: 20px; height: 2.5px; border-radius: 2px; background: var(--grad); }
.el-slide-title { font-size: clamp(20px, 2.8vw, 30px); font-weight: 800; color: #fff !important; margin: 7px 0 16px; }
.el-render { position: relative; flex: 1; min-height: 0; }
.eld { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.eld.is-active { opacity: 1; }
.el-slide-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; font-weight: 600; letter-spacing: .05em; color: #5b7392; }
.esf-brand { display: inline-flex; align-items: center; gap: 6px; }
.esf-brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.el-quiz .demo-card { margin: 0; box-shadow: 0 42px 90px -36px rgba(13,32,61,.35); }
.el-canvas-cap { font-size: 13px; color: var(--light-muted); margin: 14px 2px 0; }

/* — the 8 mini element renderings — */
.eld-bars { display: flex; align-items: flex-end; gap: clamp(12px, 2.4vw, 28px); height: 86%; width: min(460px, 84%); border-bottom: 2px solid rgba(255,255,255,.18); }
.eld-bars i { flex: 1; position: relative; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #7C6BFF, #3B82F6); box-shadow: 0 14px 30px -12px rgba(59,130,246,.6); }
.eld-bars i b { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #fff; }
.eld-bars i span { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #9fb2cc; }

.eld-stat { min-width: clamp(84px, 16vw, 136px); padding: clamp(10px, 2vw, 18px); border-radius: 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); text-align: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.eld-stat b { display: block; font-size: clamp(20px, 3.4vw, 34px); font-weight: 800; color: #fff; line-height: 1.1; }
.eld-stat span { font-size: 11.5px; color: #9fb2cc; }
.eld-stat--hl { background: linear-gradient(135deg, rgba(59,130,246,.4), rgba(124,107,255,.4)); border-color: rgba(124,107,255,.55); box-shadow: 0 16px 40px -16px rgba(124,107,255,.6); }

.eld-tl { display: flex; justify-content: space-between; width: min(500px, 92%); position: relative; padding-top: 10px; }
.eld-tl::before { content: ""; position: absolute; left: 4%; right: 4%; top: 16px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #3B82F6, #7C6BFF); transform-origin: left; }
.eld-tl i { position: relative; font-style: normal; text-align: center; width: 22%; }
.eld-tl i::before { content: ""; display: block; width: 13px; height: 13px; margin: 0 auto 8px; border-radius: 50%; background: #3B82F6; border: 3px solid #0d203d; box-shadow: 0 0 0 2px #3B82F6; }
.eld-tl i b { display: block; font-size: 12.5px; color: #fff; }
.eld-tl i span { font-size: 11px; color: #9fb2cc; }
.eld-tl--now::before { background: #7C6BFF !important; box-shadow: 0 0 0 2px #7C6BFF, 0 0 14px 2px rgba(124,107,255,.7) !important; }

.eld-plan { min-width: clamp(112px, 20vw, 164px); padding: clamp(10px, 2vw, 16px); border-radius: 15px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.eld-plan b { display: block; font-size: 13px; color: #9fb2cc; }
.eld-plan em { display: block; font-style: normal; font-size: clamp(18px, 3vw, 28px); font-weight: 800; color: #fff; margin: 4px 0 8px; }
.eld-plan span { display: block; font-size: 11.5px; color: #cdd8ea; margin-top: 3px; }
.eld-plan--hl { background: linear-gradient(160deg, rgba(59,130,246,.42), rgba(124,107,255,.3)); border-color: rgba(124,107,255,.55); box-shadow: 0 16px 40px -16px rgba(124,107,255,.55); }

.eld-quote { flex-direction: column; text-align: center; padding: 0 8%; }
.eld-quote blockquote { font-size: clamp(15px, 2.4vw, 22px); font-weight: 600; color: #fff; line-height: 1.45; margin: 0 0 10px; }
.eld-quote blockquote::before { content: "“"; display: block; font-size: clamp(30px, 5vw, 52px); line-height: .6; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.eld-quote cite { font-style: normal; font-size: 12.5px; color: #9fb2cc; }

.eld-hub { position: relative; width: min(300px, 70%); height: 90%; }
.eld-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 12px 18px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px -8px rgba(124,107,255,.8); z-index: 2; }
.eld-sat { position: absolute; left: 50%; top: 50%; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #cdd8ea; font-size: 11.5px; transform: translate(-50%,-50%) rotate(var(--a)) translateX(clamp(90px, 14vw, 130px)) rotate(calc(var(--a) * -1)); }

.eld-icons { flex-wrap: wrap; align-content: center; max-width: min(440px, 92%); margin: 0 auto; }
.eld-ic { width: clamp(88px, 15vw, 120px); padding: clamp(8px, 1.6vw, 14px) 6px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); text-align: center; font-size: clamp(17px, 2.6vw, 24px); }
.eld-ic span { display: block; font-size: 11.5px; color: #cdd8ea; margin-top: 5px; }

.eld-step { padding: clamp(10px, 2vw, 16px) clamp(12px, 2.2vw, 20px); border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); text-align: center; }
.eld-step i { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 7px; border-radius: 8px; background: var(--grad); color: #fff; font-style: normal; font-size: 13px; font-weight: 800; }
.eld-step b { font-size: 12.5px; color: #fff; }
.eld-arrow { color: #5b7392; font-size: 18px; }

/* — entrance choreography (motion-safe only; no-JS default chart stays composed) — */
@media (prefers-reduced-motion: no-preference) {
  .eld-bars i { transform: scaleY(0); transform-origin: bottom; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
  .eld.is-active .eld-bars i { transform: scaleY(1); }
  .eld.is-active .eld-bars i:nth-child(1){transition-delay:.05s}.eld.is-active .eld-bars i:nth-child(2){transition-delay:.15s}.eld.is-active .eld-bars i:nth-child(3){transition-delay:.25s}.eld.is-active .eld-bars i:nth-child(4){transition-delay:.35s}
  .eld-bars i b, .eld-bars i span { opacity: 0; transition: opacity .3s ease .5s; }
  .eld.is-active .eld-bars i b, .eld.is-active .eld-bars i span { opacity: 1; }

  .eld-stat, .eld-plan, .eld-ic, .eld-step { opacity: 0; translate: 0 16px; transition: opacity .4s ease, translate .45s cubic-bezier(.2,.7,.2,1); }
  .eld.is-active .eld-stat, .eld.is-active .eld-plan, .eld.is-active .eld-ic, .eld.is-active .eld-step { opacity: 1; translate: 0 0; }
  .eld.is-active > :nth-child(1){transition-delay:.05s}.eld.is-active > :nth-child(2){transition-delay:.15s}.eld.is-active > :nth-child(3){transition-delay:.25s}
  .eld.is-active > :nth-child(4){transition-delay:.32s}.eld.is-active > :nth-child(5){transition-delay:.4s}.eld.is-active > :nth-child(6){transition-delay:.48s}

  .eld-tl::before { transform: scaleX(0); transition: transform .6s cubic-bezier(.2,.7,.2,1) .1s; }
  .eld.is-active .eld-tl::before { transform: scaleX(1); }
  .eld-tl i { opacity: 0; translate: -8px 0; transition: opacity .35s ease, translate .4s ease; }
  .eld.is-active .eld-tl i { opacity: 1; translate: 0 0; }
  .eld.is-active .eld-tl i:nth-child(1){transition-delay:.15s}.eld.is-active .eld-tl i:nth-child(2){transition-delay:.3s}.eld.is-active .eld-tl i:nth-child(3){transition-delay:.45s}.eld.is-active .eld-tl i:nth-child(4){transition-delay:.6s}

  .eld-quote blockquote, .eld-quote cite { opacity: 0; translate: 0 12px; transition: opacity .45s ease, translate .5s ease; }
  .eld.is-active .eld-quote blockquote, .eld.is-active blockquote { opacity: 1; translate: 0 0; }
  .eld.is-active cite { opacity: 1; translate: 0 0; transition-delay: .25s; }

  .eld-core { opacity: 0; transition: opacity .35s ease .05s; }
  .eld-sat { opacity: 0; transition: opacity .35s ease; }
  .eld.is-active .eld-core { opacity: 1; }
  .eld.is-active .eld-sat { opacity: 1; }
  .eld.is-active .eld-sat:nth-child(2){transition-delay:.2s}.eld.is-active .eld-sat:nth-child(3){transition-delay:.32s}.eld.is-active .eld-sat:nth-child(4){transition-delay:.44s}.eld.is-active .eld-sat:nth-child(5){transition-delay:.56s}

  .eld-arrow { opacity: 0; transition: opacity .3s ease .45s; }
  .eld.is-active .eld-arrow { opacity: 1; }
}

/* ============================================================
   §5 v2 — ONE connected presenting scene: big audience screen +
   speaker view + phone. The phone TRACKPAD drives the laser /
   spotlight pointer on the screen (mirrors product Protocol v2:
   normalized x/y + ~750ms watchdog). prev/next + timer + blackout
   all sync across the scene. Pointer overlays use --px/--py.
   ============================================================ */
/* one rig: screen + speaker + phone inside a shared panel (cohesion) */
.show-scene {
  display: grid; grid-template-columns: 1fr 218px; grid-template-areas: "screen phone" "speaker phone";
  gap: 20px; align-items: start; position: relative;
  padding: 18px; border-radius: 24px;
  background: rgba(255,255,255,.025); border: 1px solid var(--border);
}
@media (max-width: 860px) {
  /* stack screen → phone → speaker; screen stays STICKY so the trackpad
     demo is visible while the phone is used (the .stage overflow is
     relaxed on this section for sticky to work) */
  .show-scene { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 12px; }
  /* double-class selectors so these beat the base rules that appear later in the file */
  .show-scene .scene-screen { position: sticky; top: 68px; z-index: 30; order: 1; width: 100%; box-shadow: 0 24px 50px -18px rgba(0,0,0,.85); } /* below the 60px mobile sticky nav */
  .show-scene .phone-remote--scene { order: 2; margin: 0 auto; }
  .show-scene .scene-speaker { order: 3; }
  .show-scene .scene-sync { display: none; } /* beats the later base rule */
  #present.stage { overflow: visible; }
}
.scene-screen { grid-area: screen; }
.scene-speaker { grid-area: speaker; min-width: 0; }
.phone-remote--scene { grid-area: phone; align-self: center; }
/* the "sync" pill sits on the seam between screen and speaker view */
.scene-sync {
  grid-area: speaker; justify-self: center; align-self: start; z-index: 3;
  transform: translateY(-50%) translateY(-10px);
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px;
  background: #0c1a30; border: 1px solid var(--border-strong); box-shadow: 0 10px 26px -12px rgba(0,0,0,.7);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--fg-muted);
}
.scene-sync i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }

/* audience screen */
.scene-screen { --px: 50%; --py: 45%; position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #0b1f3b; border: 1px solid var(--border-strong); box-shadow: 0 40px 90px -34px rgba(0,0,0,.75); }
.scene-screen .rs-slide { position: absolute; inset: 0; padding: clamp(18px, 3.6vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 10px; opacity: 0; transition: opacity .45s ease; }
.scene-screen .rs-slide--1 { opacity: 1; background: linear-gradient(135deg, #143968, #0b1f3b); }
.scene-screen .rs-slide--2 { background: linear-gradient(135deg, #10294a, #0a1830); }
.show-scene.is-slide2 .rs-slide--1 { opacity: 0; }
.show-scene.is-slide2 .rs-slide--2 { opacity: 1; }
.scene-screen .rs-slide b { font-size: clamp(19px, 3.2vw, 32px); }
.rs-list { list-style: none; margin: 6px 0 0; display: flex; flex-direction: column; gap: 9px; }
.rs-list li { position: relative; padding-left: 22px; font-size: clamp(12.5px, 1.8vw, 16px); color: #cdd8ea; }
.rs-list li::before { content: ""; position: absolute; left: 0; top: .48em; width: 9px; height: 9px; border-radius: 2.5px; background: var(--grad); }
.scene-tag { position: absolute; left: 12px; top: 10px; z-index: 5; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--fg-dim); background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 999px; pointer-events: none; }
.scene-screen .spot-annotate { position: absolute; right: 14px; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent-2); opacity: .85; pointer-events: none; }
.scene-screen .spot-annotate svg { width: 40px; height: 21px; }

/* pointer overlays (laser dot / spotlight dim) at --px/--py */
.sc-laser, .sc-spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.sc-laser::before { content: ""; position: absolute; left: var(--px); top: var(--py); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: radial-gradient(circle, #ff4040 0, #ff4040 34%, rgba(255,64,64,.35) 60%, transparent 74%); box-shadow: 0 0 16px 5px rgba(255,40,40,.65); }
.sc-spot { background: radial-gradient(circle 100px at var(--px) var(--py), rgba(5,10,18,0) 0, rgba(5,10,18,0) 78px, rgba(5,10,18,.86) 175px); transition: opacity .25s ease; }
.scene-screen.is-pointing.mode-laser .sc-laser { opacity: 1; }
.scene-screen.is-pointing.mode-spotlight .sc-spot { opacity: 1; }
.scene-screen .spot-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* base .rs-timer/.rs-black rules live in §remote-stage above; only the
   scene-specific z-index bump + visible states differ here */
.scene-screen .rs-timer { z-index: 5; }
.scene-screen .rs-black { z-index: 6; }
.scene-screen.is-timer .rs-timer { opacity: 1; }
.scene-screen.is-black .rs-black { opacity: 1; }

/* speaker view mirrors the scene slide */
.scene-speaker .ps-cur-2 { display: none; }
.show-scene.is-slide2 .scene-speaker .ps-cur-1 { display: none; }
.show-scene.is-slide2 .scene-speaker .ps-cur-2 { display: block; }

/* phone with trackpad */
.phone-remote--scene { width: 218px; }
.pr-seg { display: flex; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--border); margin-bottom: 10px; }
.pr-seg-btn { flex: 1; padding: 7px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pr-seg-btn.is-active { background: var(--grad); color: #fff; }
.pr-seg-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.pr-pad { position: relative; aspect-ratio: 4/3.4; border-radius: 13px; margin-bottom: 10px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border: 1px dashed rgba(255,255,255,.22); display: grid; place-items: center; cursor: crosshair; touch-action: none; transition: border-color .2s, background .2s; }
.pr-pad.is-touch { border-color: var(--accent-2); border-style: solid; background: rgba(124,107,255,.10); }
.pr-pad-hint { font-size: 10.5px; line-height: 1.5; color: var(--fg-dim); text-align: center; pointer-events: none; padding: 0 8px; }
.pr-pad.is-touch .pr-pad-hint { opacity: .35; }
.pr-pad-dot { display: none; }

/* fallbacks: reduced-motion static spotlight; no-JS hides interactive-only bits */
.scene-screen.is-static .sc-spot { opacity: 1; transition: none; }
html:not(.js) .pr-pad, html:not(.js) .pr-seg { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scene-screen .rs-slide, .sc-laser, .sc-spot, .rs-timer, .rs-black { transition: none; }
}

/* ============================================================
   §3 v3 — STUDIO journey (prompt → clarify → build → real deck → edit)
   Shell reuses .editor/.editor-bar/.editor-body/.ed-stage/.ei-*.
   ============================================================ */
/* author display values (grid/flex) must never beat the hidden attribute */
.studio [hidden] { display: none !important; }

/* step indicator in the window bar */
.st-steps { display: flex; gap: 4px; margin-left: auto; list-style: none; padding: 0; }
.st-steps li { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: var(--fg-dim); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; }
.st-steps li.is-on { color: #fff; background: var(--grad-soft); border-color: var(--border-strong); }
@media (max-width: 640px) {
  .studio .editor-bar { flex-wrap: wrap; }
  .st-steps { margin-left: 0; width: 100%; order: 9; margin-top: 6px; }
  .st-steps li { padding: 4px 8px; font-size: 9.5px; }
}

/* stages A–C container */
.st-flow { padding: clamp(22px, 4vw, 40px); max-width: 720px; margin: 0 auto; min-height: 300px; }
.st-prompt { font-size: 15.5px; }
.st-send { cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s, box-shadow .2s; }
.st-send.is-hot { opacity: 1; transform: scale(1.04); box-shadow: 0 8px 24px -8px rgba(124,107,255,.8); }

/* clarifying chat */
.st-chat { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.st-msg { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.st-msg.is-in { opacity: 1; transform: none; }
.st-ai { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--grad); border-radius: 7px; padding: 3px 7px; }
.st-choices { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 40px; }
.st-choice { padding: 8px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--fg); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.st-choice:hover { border-color: var(--accent-2); }
.st-choice.is-picked { background: var(--grad); color: #fff; border-color: transparent; }
.st-choice:disabled:not(.is-picked) { opacity: .45; cursor: default; }
.st-choice:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* build */
.st-build { margin-top: 22px; }
.ha-status.is-on { opacity: 1; transform: none; }
.ha-chip.is-in { opacity: 1; transform: none; }
.st-progress { height: 5px; border-radius: 3px; margin-top: 20px; background: rgba(255,255,255,.08); overflow: hidden; }
.st-progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--grad); }

/* deck stage: viewer + rail (inside .editor-body grid) */
.st-deck .editor-canvas { display: grid; gap: 12px; align-content: start; place-items: stretch; }
.st-deck .ed-stage, .st-rail { width: 100%; }
.st-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.st-thumb { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: #0d2038; border: 1px solid var(--border-strong); opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .4s ease, border-color .15s, box-shadow .15s; }
.st-thumb.is-in { opacity: 1; transform: none; }
.st-thumb:hover { border-color: var(--accent-2); }
.st-thumb.is-active { border-color: var(--accent-2); box-shadow: 0 0 0 2px rgba(124,107,255,.5); }
.st-thumb:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* editable thumb gets a tiny ✦ badge */
.st-thumb[data-thumb-editable]::after { content: "✦"; position: absolute; right: 4px; top: 2px; z-index: 2; font-size: 11px; color: #fff; text-shadow: 0 1px 6px rgba(124,107,255,1); }
.st-scale { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; pointer-events: none; }
.st-scale iframe { width: 1920px; height: 1080px; border: 0; display: block; }

.st-noscript { padding: 20px 24px; font-size: 14px; color: var(--fg-muted); line-height: 1.6; }
.st-noscript a { color: var(--accent-2); }
.st-replay-wrap { text-align: center; padding-bottom: 18px; }
html:not(.js) .ha-caret, html:not(.js) .st-send, html:not(.js) .st-steps { display: none; }

@media (prefers-reduced-motion: reduce) {
  .st-msg, .st-thumb, .ha-chip, .st-send { transition: none; }
  .st-progress i { transition: none !important; }
}

/* mobile: rail wraps to 3 columns so thumbs stay tappable */
@media (max-width: 640px) { .st-rail { grid-template-columns: repeat(3, 1fr); } .st-flow { min-height: 240px; } }

/* ============================================================
   §3 v4 — REAL editing engine surfaces: parent-side hit layer,
   hover/select rings mapped from slide coords, dynamic control
   groups per element type, per-element reset.
   ============================================================ */
.ed-tag {
  position: absolute; left: -2px; top: -24px; font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: #7C6BFF; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}

/* dynamic control groups */
.ei-group { margin-bottom: 14px; }
.ei-btns { display: flex; align-items: center; gap: 6px; }
.ei-tbtn {
  width: 32px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--fg-muted); font: inherit; font-size: 13.5px; font-weight: 800;
  transition: background .15s, color .15s, border-color .15s;
}
.ei-tbtn--i { font-style: italic; font-family: Georgia, serif; }
.ei-tbtn svg { width: 15px; height: 15px; }
.ei-tbtn:hover { color: var(--fg); border-color: var(--accent-2); }
.ei-tbtn.is-active { background: var(--grad); color: #fff; border-color: transparent; }
.ei-tbtn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.ei-sep { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.ei-sw--navy { background: #123a63; }
.ei-sw--warm { background: #7c2d12; }
.ei-sw--ink { background: #0D203D; }
.ei-reset {
  width: 100%; margin-top: 4px; padding: 8px 10px; cursor: pointer;
  border-radius: 9px; border: 1px dashed var(--border-strong); background: transparent;
  color: var(--fg-dim); font: inherit; font-size: 12.5px; font-weight: 600;
  transition: color .15s, border-color .15s;
}
.ei-reset:hover { color: var(--fg); border-color: var(--accent-2); }

/* ============================================================
   §3 v5 — IN-PAGE editable slide (.ed-live): a 1:1 copy of
   demo-value.html rendered directly in the page (1920x1080,
   scaled via transform) so hover/click editing is plain DOM —
   works everywhere, no iframe, no contentDocument, no sandbox.
   Slide rules below are copied from assets/decks/decks.css and
   scoped under .ed-live (no class collisions with the landing).
   ============================================================ */
.ed-live { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: top left; cursor: crosshair; }
.ed-live:focus-visible { outline: 3px solid var(--accent-2); outline-offset: -3px; }
.ed-live .slide--split {
  width: 1920px; height: 1080px; position: relative; overflow: hidden; display: flex;
  background: #0D203D; color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; text-align: left;
}
.ed-live .col-text { width: 50%; padding: 120px 90px 120px 140px; display: flex; flex-direction: column; justify-content: center; }
.ed-live .s-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 26px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9FB2CC; }
.ed-live .s-eyebrow::before { content: ""; width: 44px; height: 4px; border-radius: 4px; background: linear-gradient(120deg, #3B82F6, #7C6BFF); }
.ed-live .s-h2 { font-size: 92px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 30px 0 0; color: #fff; }
.ed-live .s-grad { background: linear-gradient(120deg, #3B82F6, #7C6BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ed-live .bullets { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.ed-live .bullets li { position: relative; padding-left: 52px; font-size: 30px; color: #dbe4f0; }
.ed-live .bullets li::before { content: ""; position: absolute; left: 0; top: 4px; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(120deg, #3B82F6, #7C6BFF); }
.ed-live .bullets li::after { content: ""; position: absolute; left: 10px; top: 13px; width: 8px; height: 13px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(42deg); }
.ed-live .col-photo { width: 50%; position: relative; }
.ed-live .ph { position: absolute; inset: 0; background-image: url('../decks/img/workspace.jpg'); background-size: cover; background-position: center; }
.ed-live .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0D203D 0%, transparent 22%); }
.ed-live .stat-card { position: absolute; left: -110px; bottom: 130px; z-index: 3; width: 380px; background: rgba(15,26,46,.72); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 34px 38px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.ed-live .stat-card__num { font-size: 82px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ed-live .stat-card__lbl { font-size: 25px; color: #9FB2CC; margin-top: 10px; }

/* hover-inspect + selection, drawn right on the elements */
.ed-live .is-hov { outline: 4px dashed rgba(124,107,255,.9); outline-offset: 10px; cursor: grab; }
.ed-live .is-sel { outline: 6px solid #7C6BFF; outline-offset: 12px; cursor: grab; }
.ed-live .is-dragging { cursor: grabbing; }

/* type tag (parent coords, follows the hovered element) */
.ed-tag {
  position: absolute; z-index: 8; opacity: 0; pointer-events: none;
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: #7C6BFF; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  transition: opacity .12s ease;
}
.ed-tag.is-on { opacity: 1; }

/* §3 studio moved INTO the hero — spacing below the headline block */
.hero-studio { margin-top: clamp(30px, 5vw, 56px); }

/* §10 — hero 3D canvas (hero-3d.js, desktop-only). Sits between the bg
   photo (z:-2, DOM order puts canvas above it) and the vignette (z:-1),
   so .hero::after still fades the 3D layer into the page background. */
.hero-3d {
  /* z:0 + DOM order (before .hero-inner) keeps it above the .hero::after
     vignette — which is opaque at the bottom and would swallow the wave —
     but below all hero content. Bottom fade is done by the mask instead. */
  position: absolute; top: 0; left: 0; z-index: 0;
  /* hero section is taller than the viewport (it contains the studio demo);
     cap the canvas to the first screen so the wave sits behind headline+CTA */
  width: 100%; height: min(100%, 100vh);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-3d.is-live { opacity: 1; }