/* ═══════════════════════════════════════════════════════════════════════════
   CueLight landing — "Signal Deck" dark studio.
   Tokens mirror the app (editor2-tokens.css / capture-design-tokens.css):
   dark canvas, teal→indigo brand gradient, coral tally = recording only,
   per-tool identity colors. Bricolage / Hanken / JetBrains Mono.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #141019;
  --bg-2: #17151f;
  --panel: #1b1826;
  --panel-2: #211d2b;
  --well: #100c17;
  --line: #2c2836;
  --ink: #f3f1f7;
  --ink-2: #a29db4;
  --ink-3: #726c85;
  --brand-a: #22c3b6;
  --brand-b: #5b6ef5;
  --grad: linear-gradient(135deg, #22c3b6 0%, #5b6ef5 100%);
  --tally: #ff6a5d;
  --accent: #7c6bf0;
  --spectrum: linear-gradient(90deg, #ff6a5d, #f0913f, #f0c94b, #8fe3c5, #22c3b6, #5fb0f5, #5b6ef5, #c86ff0);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 1180px;
  --r-card: 14px;
  --r-ctrl: 9px;
  --ease-snap: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.booting { overflow: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; letter-spacing: -.02em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }

/* ambient studio grain / vignette */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 0%, rgba(91, 110, 245, .10), transparent 60%),
              radial-gradient(90% 80% at 10% 100%, rgba(34, 195, 182, .07), transparent 55%);
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 11px 20px; border-radius: var(--r-ctrl); font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--ease-snap), filter .2s, background .2s;
  white-space: nowrap;
}
.btn.lg { padding: 15px 28px; font-size: 16px; }
.btn.full { width: 100%; }
.btn-primary { background: var(--grad); color: #10131c; box-shadow: 0 8px 30px -12px rgba(91, 110, 245, .8); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand-a); transform: translateY(-2px); }

/* ── typography helpers ────────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7vw, 82px); line-height: 1.02; }
.display.sm { font-size: clamp(30px, 4.6vw, 54px); font-weight: 700; }
.eyebrow { color: var(--brand-a); font-size: 12px; letter-spacing: .16em; margin: 0 0 18px; }
.lede { color: var(--ink-2); font-size: clamp(16px, 1.6vw, 20px); max-width: 30ch; margin: 18px 0 0; }
.section-lede { color: var(--ink-2); max-width: 52ch; margin: 14px auto 0; }
.tag { color: var(--ink); font-size: 13px; margin: 22px 0 0; padding: 7px 12px; display: inline-block;
  background: var(--well); border: 1px solid var(--line); border-radius: 7px; }
.micro { color: var(--ink-3); font-size: 12.5px; letter-spacing: .04em; margin: 18px 0 0; }

/* ═══ BOOT PRELOADER ═══════════════════════════════════════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: grid; place-content: center; justify-items: center; gap: 26px;
}
.boot.gone { display: none; }
.boot-mark { width: 108px; height: 108px; }
.boot-read { color: var(--ink-2); font-size: 13px; letter-spacing: .18em; }
.lamp-svg { width: 100%; height: 100%; display: block; }
.lamp-live { filter: drop-shadow(0 0 9px rgba(255, 106, 93, .85)); }

/* ═══ HUD FRAME ════════════════════════════════════════════════════════════ */
.hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.rec-bracket { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(243, 241, 247, .5); }
.hud > .rec-bracket { width: 30px; height: 30px; border-color: rgba(243, 241, 247, .28); }
.rec-bracket.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.rec-bracket.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.rec-bracket.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.rec-bracket.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.hud-sep { color: var(--ink-3); }
.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); transition: background .3s; }
.hud-dot.live { background: var(--tally); box-shadow: 0 0 10px var(--tally); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 72%, 100% { opacity: .4; } }

/* ═══ SPECTRUM RAIL ════════════════════════════════════════════════════════ */
.rail { position: fixed; top: 0; right: 0; width: 3px; height: 100vh; z-index: 40; background: rgba(255, 255, 255, .04); }
.rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--spectrum); background-size: 100% 100vh; }

/* ═══ NAV ══════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: linear-gradient(var(--bg), rgba(20, 16, 25, 0));
  transition: background .3s;
}
.nav.solid { background: rgba(20, 16, 25, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.brand-mark { width: 30px; height: 30px; display: block; }
.brand-mark.lg { width: 64px; height: 64px; }
.nav-links { display: flex; gap: 26px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

/* ═══ THE STAGE — faithful mini editor2 (design box 1160×640, one scale knob) ═
   Anatomy + hexes mirror apps/extension/entrypoints/editor2 (see plan).
   CSS default = fully assembled editor (tiers C/D); cinematic JS transforms
   chrome out for Act I and materializes it at DIRECT. ═════════════════════ */
:root {
  --e2-bg: #08070c; --e2-surface: #121017; --e2-surface-2: #191621;
  --e2-surface-3: #211d2b; --e2-sunken: #0b0910;
  --e2-border: #302c3c; --e2-border-strong: #6b6873;
  --e2-t1: #f5f3fa; --e2-t2: #cfcbdb; --e2-t3: #aaa5ba; --e2-t4: #8b8699;
  --e2-accent: #7c6bf0; --e2-playhead: #ff8a45;
}

.stage-wrap {
  position: fixed; z-index: 20; top: 50%; right: 5vw; width: min(46vw, 620px);
  aspect-ratio: 1160 / 640; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.stage-wrap.show { opacity: 1; }
.stage-scaler {
  position: absolute; top: 0; left: 0; width: 1160px; height: 640px;
  transform: scale(var(--stage-scale, .5)); transform-origin: top left;
  perspective: 1600px;   /* the exploded view tilts the whole editor inside */
}
/* preserve-3d chain so region + block lifts escape their containers */
.mini-editor, .me-middle, .me-canvas-cell, .me-canvas,
.me-timeline, .me-tl-body, .me-lane.blocks, .me-lane.blocks .me-lane-track {
  transform-style: preserve-3d;
}
.me-lane { position: relative; }   /* anchors the AUDIO / DIRECTION tags */

/* ── shell ── */
.mini-editor {
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-rows: 58px 1fr 240px;
  font-family: var(--font-ui);
}
.mini-editor::before { /* editor frame: appears with the chrome (--chrome 0→1) */
  content: ""; position: absolute; inset: -1px; border-radius: 16px; z-index: 0;
  background: var(--e2-bg); border: 1px solid var(--e2-border);
  box-shadow: 0 60px 140px -50px rgba(0, 0, 0, .95);
  opacity: var(--chrome, 1);
}
.me-header, .me-middle, .me-timeline { position: relative; z-index: 1; min-height: 0; }
.me-spacer { flex: 1; }

/* ── header (58px) ── */
.me-header {
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--e2-border); border-radius: 16px 16px 0 0;
}
.me-iconbtn { width: 34px; height: 34px; display: grid; place-content: center; border-radius: 9px;
  background: var(--e2-surface-3); border: 1px solid var(--e2-border-strong); color: var(--e2-t2); font-size: 14px; }
.me-title-dot { width: 11px; height: 11px; border-radius: 4px; background: var(--e2-accent); }
.me-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--e2-t1); letter-spacing: -.01em; }
.me-saved { font-size: 10.5px; padding: 4px 10px; border-radius: 99px;
  background: rgba(53, 193, 180, .12); border: 1px solid rgba(53, 193, 180, .35); color: #8fe3c5; }
/* the ON AIR readout, carried by the editor's own header (real-editor style) */
.me-hud { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 10.5px; letter-spacing: .06em; color: var(--e2-t3);
  background: var(--e2-sunken); border: 1px solid var(--e2-border); border-radius: 20px; padding: 5px 13px; }
.me-hud b { font-weight: 500; color: var(--e2-t2); }
.me-hud i { font-style: normal; flex: none; }
.me-divider { width: 1px; height: 26px; background: var(--e2-border-strong); }
.me-export { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px;
  background: var(--e2-surface-3); border: 1px solid var(--e2-border-strong); color: var(--e2-t1);
  font-size: 13px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.me-export i { font-style: normal; opacity: .65; font-size: 10px; border-left: 1px solid var(--e2-border); padding-left: 7px; }
.me-export-menu { position: absolute; right: 14px; top: 52px; width: 226px; z-index: 30;
  background: var(--e2-surface-2); border: 1px solid var(--e2-border); border-radius: 12px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); padding: 8px; opacity: 0; pointer-events: none; }
.me-export-menu p { margin: 4px 8px 6px; font-size: 9px; letter-spacing: .08em; color: var(--e2-t4); }
.me-export-menu span { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--e2-t1); }
.me-export-menu span:first-of-type { background: rgba(124, 107, 240, .14); }
.me-export-menu em { font-style: normal; font-size: 10px; color: var(--e2-t4); }

/* ── middle: rail · canvas · inspector ── */
.me-middle { display: grid; grid-template-columns: 148px 1fr 300px; }

.me-rail { position: relative; background: var(--e2-surface); border-right: 1px solid var(--e2-border);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 8px; align-content: start; }
.me-tool { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 48px; justify-content: center; padding: 6px 4px; border-radius: 8px;
  background: transparent; border: 0; color: #9d98ad; font-family: var(--font-ui); cursor: default; }
.me-tool i { font-style: normal; font-size: 16px; line-height: 1; }
.me-tool b { font-weight: 500; font-size: 9.5px; line-height: 1.1; letter-spacing: .01em; }
.me-tool.lead { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 8px;
  min-height: 38px; padding: 7px 10px; font-size: 10.5px; font-weight: 500;
  border-bottom: 1px solid var(--e2-border); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.rail-active { position: absolute; z-index: 0; border-radius: 9px; opacity: 0;
  background: rgba(124, 107, 240, .18); box-shadow: inset 0 0 0 1px rgba(124, 107, 240, .42); }

/* ── canvas cell: the persistent composition ── */
.me-canvas-cell { position: relative; display: flex; align-items: center; justify-content: center;
  min-width: 0; }
.me-canvas { position: relative; width: 608px; height: 342px; }
.stage {
  position: absolute; inset: 0; border-radius: var(--r-card);
  background: #0c0912; padding: 16px; overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px var(--line);
}
.stage-brackets .rec-bracket { border-color: rgba(255, 106, 93, .55); width: 18px; height: 18px; }
.stage-brackets .tl { top: 10px; left: 10px; } .stage-brackets .tr { top: 10px; right: 10px; }
.stage-brackets .bl { bottom: 10px; left: 10px; } .stage-brackets .br { bottom: 10px; right: 10px; }

/* screen track — dark "Pulse" dashboard being recorded */
.scr { position: absolute; inset: 16px; border-radius: 9px; overflow: hidden;
  background: #16121f; border: 1px solid #332f4a; transform-origin: 84% 16%; }
.scr-chrome { height: 24px; background: #211c30; display: flex; align-items: center; gap: 6px; padding: 0 10px; }
.scr-chrome .dot { width: 7px; height: 7px; border-radius: 50%; opacity: .8; flex: none; }
.dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
/* real omnibox: full-width bar, lock dot, quiet mono URL */
.scr-url { flex: 1; margin-left: 8px; display: flex; align-items: center; gap: 6px;
  font-size: 8.5px; color: #726c85; background: #100c17; padding: 3px 10px; border-radius: 6px;
  border: 1px solid #241f33; }
.scr-lock { width: 6px; height: 6px; border-radius: 2px; background: #4a4460; flex: none; }
.scr-chrome-btn { width: 12px; height: 12px; border-radius: 4px; background: #2c2740; flex: none; }
.scr-body { display: flex; height: calc(100% - 24px); }
.scr-side { width: 21%; background: #151021; padding: 10px 8px; display: flex; flex-direction: column; gap: 7px; }
.sn { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.sn i { width: 7px; height: 7px; border-radius: 3px; background: #3a3450; flex: none; }
.sn b { height: 6px; border-radius: 3px; background: #332d47; display: block; }
.sn.active { background: rgba(124, 107, 240, .14); }
.sn.active i { background: var(--e2-accent); } .sn.active b { background: #57508a; }
.scr-main { flex: 1; padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.scr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scr-title-bar { width: 32%; height: 10px; border-radius: 4px; background: #332d47; }
.scr-actions { display: flex; align-items: center; gap: 8px; }
.scr-search { width: 64px; height: 16px; border-radius: 8px; background: #1a1527; border: 1px solid #292239; }
.scr-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--grad); flex: none; }
.scr-chart { position: relative; flex: 1; min-height: 62px; background: #1a1527;
  border: 1px solid #292239; border-radius: 8px; padding: 6px; }
.scr-chart svg { width: 100%; height: 100%; display: block; }
.scr-chart .grid { stroke: rgba(243, 241, 247, .06); stroke-width: 1; }
.scr-chart .pt { fill: #f5f3fa; } .scr-chart .pt-glow { fill: rgba(91, 110, 245, .35); }
.scr-tip { position: absolute; right: 15%; top: 3px; font-size: 8px; color: #cdc6fb;
  background: #100c17; border: 1px solid rgba(124, 107, 240, .5); padding: 2px 6px; border-radius: 5px; }
.scr-stats { display: flex; gap: 8px; }
.scr-stat { flex: 1; background: #1a1527; border: 1px solid #292239; border-radius: 7px; padding: 7px 9px; }
.scr-stat b { display: block; font-size: 11px; color: var(--e2-t1); font-weight: 600; }
.scr-stat b.up { color: #8fe3c5; }
.scr-stat span { display: block; margin-top: 4px; height: 5px; width: 60%; border-radius: 3px; background: #332d47; }
.scr-list { display: flex; flex-direction: column; gap: 6px; }
.scr-lrow { display: flex; align-items: center; gap: 8px; }
.scr-lrow i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #3a3450, #57508a); flex: none; }
.scr-lrow b { height: 6px; border-radius: 3px; background: #2c2740; }
.scr-lrow em { margin-left: auto; font-style: normal; font-size: 8.5px; color: var(--e2-t4); }
.scr-target { border: 0; cursor: default; background: var(--grad); color: #10131c;
  font-weight: 700; font-size: 9.5px; padding: 5px 12px; border-radius: 6px; flex: none;
  font-family: var(--font-ui); box-shadow: 0 4px 14px -6px rgba(91, 110, 245, .9); }
.scr-sheen { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 32%); }

/* reticle — frames the export-button region (app header, top-right) */
.reticle { position: absolute; width: 30%; height: 22%; left: 62%; top: 4%; opacity: 0; pointer-events: none; overflow: visible; }
.reticle-box { fill: rgba(124, 107, 240, .1); stroke: var(--accent); stroke-width: 2; }
.reticle-x { stroke: rgba(124, 107, 240, .55); stroke-width: 1; stroke-dasharray: 4 4; }
.reticle-label { position: absolute; left: 62%; top: 28%; font-size: 10px; color: var(--accent);
  background: var(--well); padding: 3px 8px; border-radius: 5px; border: 1px solid var(--accent); opacity: 0; }

/* camera track — rim-lit presenter silhouette (separate layer).
   Lit like a studio at night: violet room, warm key, teal→indigo backlight halo
   behind the head so the figure reads as "a person on camera", never a void. */
.cam { position: absolute; width: 17%; aspect-ratio: 1; left: 5%; bottom: 7%;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 22%, #453c6c, #262040 52%, #141021 78%);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .8), 0 0 0 1.5px rgba(255, 255, 255, .26),
              0 0 18px -4px rgba(91, 110, 245, .3); }
.cam svg { position: absolute; inset: 8% 13% 0; width: 74%; height: 92%; z-index: 2; }
.sil-head, .sil-body { fill: #141021; }
.sil-rim { stroke: url(#rimG); stroke-width: 3.2; fill: none; stroke-linecap: round; opacity: .95; }
.cam-backlight { position: absolute; left: 28%; top: 16%; width: 44%; height: 44%; z-index: 1;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(120, 140, 255, .35), rgba(34, 195, 182, .12) 55%, transparent 72%); }
.cam-key { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 24% 16%, rgba(245, 205, 140, .2), transparent 50%); }
.cam::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 4;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .4); }
.cam-live { position: absolute; right: 11%; bottom: 13%; width: 4px; height: 4px; border-radius: 50%;
  background: var(--tally); box-shadow: 0 0 7px var(--tally); z-index: 5; }

.ripple { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }

/* ── PROOF v3: exploded view — the editor's own regions lift on Z ────────── */
.proof-glow { position: absolute; left: 50%; top: 50%; width: 150%; height: 170%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(circle at 50% 45%, rgba(91, 110, 245, .28), rgba(34, 195, 182, .10) 48%, transparent 70%); }
.proof-tag { position: absolute; top: -13px; left: 14px; z-index: 30; opacity: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; white-space: nowrap;
  padding: 4px 11px; border-radius: 6px; background: #100c17;
  color: var(--pc, #f3f1f7); border: 1px solid color-mix(in oklab, var(--pc, #f3f1f7) 55%, transparent);
  box-shadow: 0 0 16px -5px var(--pc, #f3f1f7); pointer-events: none; }

/* ── inspector (300px) ── */
.me-inspector { position: relative; background: var(--e2-surface); border-left: 1px solid var(--e2-border); }
.me-panel { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; }
.me-panel[data-panel="project"] { opacity: 1; }
.me-phead { display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  border-bottom: 1px solid var(--e2-border); min-height: 48px; }
.me-ptile { width: 30px; height: 30px; border-radius: 8px; background: var(--tile, #3a3550);
  display: grid; place-content: center; font-size: 13px; color: var(--e2-t2); flex: none; }
.me-ptt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--e2-t1); }
.me-ptt i { font-style: normal; font-size: 9.5px; color: var(--e2-t3); }
.me-pbadge { margin-left: auto; font-size: 9px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--bc, #726d82); color: var(--bc, #726d82); }
.me-tabs { display: flex; margin: 8px 10px 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.me-tabs span { flex: 1; text-align: center; padding: 5px 8px; border-radius: 6px; font-size: 10.5px; color: var(--e2-t3); }
.me-tabs .on { background: var(--e2-surface-3); color: var(--e2-t1); }
.me-pbody { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
.me-ptitle { font-size: 9px; letter-spacing: .08em; color: var(--e2-t3); margin: 0; font-weight: 600; }
.me-prop { display: flex; justify-content: space-between; font-size: 11px; color: var(--e2-t2); }
.me-prop em { font-style: normal; color: var(--e2-t1); font-size: 10.5px; }
.me-slider { font-size: 11px; color: var(--e2-t2); }
.me-slider em { float: right; font-style: normal; color: var(--e2-t1); }
.me-track { margin-top: 9px; height: 4px; border-radius: 2px; background: var(--e2-border-strong); position: relative; }
.me-thumb { position: absolute; top: 50%; left: 0%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--e2-t1); border: 3px solid var(--e2-accent); transform: translate(-50%, -50%); }
.me-hint { font-size: 9.5px; color: var(--e2-t4); line-height: 1.45; margin: 0; }
.me-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.me-chips span { padding: 4px 8px; border-radius: 999px; border: 1px solid var(--e2-border-strong);
  color: var(--e2-t2); font-size: 9.5px; }
.me-laytokens { display: flex; flex-wrap: wrap; gap: 5px; }
.me-laytokens span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 6px; color: var(--lt);
  border: 1px solid color-mix(in oklab, var(--lt) 45%, transparent); }
.me-shapes { display: flex; gap: 6px; }
.me-shapes span { width: 30px; height: 24px; display: grid; place-content: center;
  border: 1px solid var(--e2-border-strong); border-radius: 6px; color: var(--e2-t2); font-size: 12px; }
.me-shapes .on { border-color: var(--e2-accent); color: #cdc6fb; background: rgba(124, 107, 240, .15); }
.me-pfoot { margin-top: auto; padding: 8px 12px; border-top: 1px solid var(--e2-border);
  background: #141019; font-size: 8.5px; letter-spacing: .08em; color: var(--e2-t3); }

/* ── timeline (240px) ── */
.me-timeline { background: var(--e2-sunken); border-top: 1px solid var(--e2-border);
  border-radius: 0 0 16px 16px; display: flex; flex-direction: column; }
.me-tl-toolbar { height: 44px; flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border-bottom: 1px solid var(--e2-border); }
.me-tl-tool { padding: 6px 10px; border-radius: 8px; background: var(--e2-surface-2);
  border: 1px solid var(--e2-border-strong); font-size: 10.5px; color: var(--e2-t2); }
.me-tl-tool i { font-style: normal; opacity: .7; font-size: 9px; }
.me-tl-tool.accent { border-color: rgba(53, 193, 180, .45); color: #8fe3c5; }
.me-tl-play { width: 32px; height: 32px; border-radius: 50%; background: var(--e2-t1); color: var(--e2-bg);
  display: grid; place-content: center; font-size: 11px; margin-left: 8px; }
.me-tl-time { font-size: 11px; color: var(--e2-t1); }
.me-tl-zoom { font-size: 9.5px; color: #8b8498; }
.me-tl-body { flex: 1; position: relative; padding: 6px 14px 10px 0; min-height: 0; }
.me-ruler { height: 22px; margin-left: 72px; display: flex; justify-content: space-between;
  align-items: flex-start; border-bottom: 1px solid rgba(243, 241, 247, .08); }
.me-ruler span { font-size: 8.5px; color: var(--e2-t3); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.me-ruler span::after { content: ""; width: 1px; height: 7px; background: rgba(243, 241, 247, .28); }
.me-lane { display: flex; margin-top: 6px; }
.me-lane-label { width: 72px; flex: none; padding: 4px 8px 0 14px; font-size: 9.5px;
  color: var(--e2-t2); letter-spacing: .04em; }
.me-lane-track { flex: 1; position: relative; border-radius: 8px;
  background: rgba(20, 16, 25, .6); border: 1px solid #1b1826; overflow: hidden; }
.me-lane.video .me-lane-track { height: 58px; display: flex; }
.me-lane.video .me-lane-track > i { flex: 1; border-right: 1px solid rgba(0, 0, 0, .4); }
.me-wave { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.me-clip-badge { position: absolute; right: 8px; bottom: 5px; z-index: 4; font-size: 8px;
  letter-spacing: .08em; color: rgba(243, 241, 247, .55); }
.me-clip-rate { position: absolute; left: 8px; top: 4px; z-index: 4; font-size: 8.5px; color: var(--e2-t1);
  background: rgba(16, 13, 22, .85); padding: 1px 5px; border-radius: 4px; }
.me-lane.blocks .me-lane-track { height: 66px; background: rgba(20, 16, 25, .35); overflow: visible; }
.me-block { position: absolute; height: 26px; border-radius: 6px; display: inline-flex; align-items: center;
  gap: 5px; padding: 0 8px 0 10px; font-size: 10px; white-space: nowrap;
  background: color-mix(in oklab, var(--tc) 18%, #14101d);
  color: color-mix(in oklab, var(--tc) 55%, #f5f3fa);
  border: 1px solid rgba(255, 255, 255, .1); }
.me-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 6px 0 0 6px; background: var(--tc); }
.me-block i { font-style: normal; font-size: 11px; opacity: .85; }
.me-block b { font-weight: 500; }
.me-block em { font-style: normal; font-size: 8px; background: rgba(0, 0, 0, .34);
  padding: 1px 5px; border-radius: 999px; margin-left: 2px; }
.me-playhead { position: absolute; top: 6px; bottom: 8px; left: 90px; width: 2px; z-index: 10;
  background: linear-gradient(180deg, #ffa066 0%, var(--e2-playhead) 18%, rgba(255, 138, 69, .5) 72%, rgba(255, 138, 69, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 138, 69, .45); }
.me-playhead::after { content: ""; position: absolute; top: 0; bottom: 12%; left: -3px; width: 8px;
  background: linear-gradient(180deg, rgba(255, 138, 69, .26), transparent 85%);
  filter: blur(4px); pointer-events: none; }
.me-playhead i { position: absolute; top: -9px; left: 50%; width: 11px; height: 11px;
  transform: translateX(-50%) rotate(45deg); border-radius: 3px;
  background: linear-gradient(135deg, #ffb27d, var(--e2-playhead));
  border: 2px solid var(--e2-sunken);
  box-shadow: 0 0 12px rgba(255, 138, 69, .8), 0 1px 4px rgba(0, 0, 0, .5); }

.stage-spec { text-align: center; margin-top: 14px; font-size: 11px; color: var(--ink-3); letter-spacing: .08em;
  position: absolute; top: 100%; left: 0; right: 0; }

/* ── studio light ambient: aurora washes + spotlight + film grain ────────── */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb-blob { position: absolute; border-radius: 50%; filter: blur(90px); mix-blend-mode: screen;
  will-change: transform; }
.amb-blob.a { width: 52vw; height: 52vw; left: -12vw; top: -14vw; opacity: .17;
  background: radial-gradient(circle at 50% 50%, #22c3b6, transparent 65%); }
.amb-blob.b { width: 56vw; height: 56vw; right: -16vw; top: 6vh; opacity: .15;
  background: radial-gradient(circle at 50% 50%, #5b6ef5, transparent 65%); }
.amb-blob.c { width: 44vw; height: 44vw; left: 24vw; bottom: -20vw; opacity: .12;
  background: radial-gradient(circle at 50% 50%, #7c6bf0, transparent 65%); }
.amb-spot { position: absolute; left: 50%; top: -12vh; width: 90vw; height: 80vh;
  transform: translateX(-50%); opacity: .09;
  background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(243, 241, 247, .5) 50%, transparent 58%); }
.amb-grain { position: absolute; inset: -60px; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-24px, 12px); }
  40% { transform: translate(14px, -20px); } 60% { transform: translate(-10px, -14px); }
  80% { transform: translate(20px, 18px); } 100% { transform: translate(0, 0); }
}
/* volumetric beams canvas — above the aurora, below all content */
.beams { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.beams canvas { width: 100%; height: 100%; display: block; }
body.has-beams .amb-spot { display: none; }   /* the 3D rig replaces the DOM cone */

/* ═══ STUDIO (pinned scrollytelling, Acts I–IV) ════════════════════════════ */
.studio { position: relative; height: 100vh; z-index: 25; }
.studio-inner { position: relative; height: 100vh; display: flex; align-items: center; }
.beats { position: absolute; left: clamp(16px, 6vw, 90px); top: 50%; transform: translateY(-50%);
  width: min(46vw, 560px); height: 60vh; }
.beats .beat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.beat[data-beat="raw"] { opacity: 1; }

/* ── the lower-third caption band (words live BELOW the editor, never over it) ── */
.captions { position: absolute; opacity: 0; pointer-events: none; height: 150px;
  /* left/top/width set by JS to sit exactly beneath the expanded editor */ }
.captions .beat.cap { position: absolute; inset: 0; opacity: 0;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 3vw, 44px);
  align-items: start; padding-top: 14px; border-top: 1px solid var(--line); }
.cap-step { margin: 0 0 7px; font-size: 10.5px; letter-spacing: .14em; color: var(--brand-a); }
.cap[data-beat="zoom"] .cap-step { color: #a99bff; }
.cap[data-beat="layout"] .cap-step { color: #8fa0f0; }
.cap[data-beat="camera"] .cap-step { color: #f7c77b; }
.cap[data-beat="speed"] .cap-step { color: #22c3b6; }
.cap[data-beat="proof"] .cap-step { color: var(--ink-2); }
.cap[data-beat="render"] .cap-step { color: #a99bff; }
.cap-h { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(21px, 2.1vw, 29px); line-height: 1.08; margin: 0; color: var(--ink); }
.cap-p { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 2px 0 10px; max-width: 54ch; }
.cap .tag { margin: 0; font-size: 12px; }
.cap .preset-grid { margin: 2px 0 10px; }
.cap-dots { position: absolute; top: -22px; right: 2px; display: flex; gap: 7px; }
.cap-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.beat-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.preset-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.preset { font-family: var(--font-mono); font-size: 12px; padding: 8px 13px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: .2s; }
.preset.active { border-color: var(--brand-a); color: var(--ink); background: var(--panel-2); }
.preset.raw { border-color: rgba(255, 138, 69, .5); color: #ffb98a; }

/* ═══ LAYOUTS (interactive) ════════════════════════════════════════════════ */
section.layouts, section.editor, section.own, section.pricing, section.faq { position: relative; z-index: 2; padding: clamp(90px, 13vh, 150px) 0; text-align: center; }
.layout-demo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 46px; text-align: left; }
.layout-stage { position: relative; aspect-ratio: 16 / 9; background: #0c0912; border-radius: var(--r-card);
  border: 1px solid var(--line); overflow: hidden; box-shadow: inset 0 0 60px rgba(0, 0, 0, .5); }
.ls-screen { position: absolute; border-radius: 8px; background: #16121f;
  border: 1px solid #332f4a; transition: all .5s var(--ease-snap); inset: 8%; overflow: hidden;
  padding: 8% 6% 12%; display: flex; flex-direction: column; gap: 8px; }
.ls-screen svg { flex: 1; width: 100%; min-height: 0; }
.ls-screen .grid { stroke: rgba(243, 241, 247, .06); stroke-width: 1; }
.ls-row { height: 6px; border-radius: 3px; background: #2c2740; display: block; }
.ls-cam { position: absolute; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 22%, #453c6c, #262040 52%, #141021 78%);
  border: 1.5px solid rgba(255, 255, 255, .26); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .8),
  0 0 18px -4px rgba(91, 110, 245, .3);
  transition: all .5s var(--ease-snap); width: 18%; aspect-ratio: 1; left: 8%; bottom: 10%; }
.ls-cam svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.ls-cam .sil-rim { stroke: #22c3b6; stroke-width: 3.2; fill: none; stroke-linecap: round; opacity: .9; }
.ls-cam::before { content: ""; position: absolute; left: 28%; top: 16%; width: 44%; height: 44%; z-index: 1;
  border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(120, 140, 255, .32), transparent 70%); }
.ls-cam::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .55); }
.layout-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lcard { width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px;
  text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctrl);
  padding: 12px 16px; cursor: pointer; transition: .2s; color: var(--ink); }
.lcard:hover { border-color: var(--ink-3); }
.lcard.active { border-color: var(--brand-a); background: var(--panel-2); box-shadow: 0 0 0 1px var(--brand-a); }
.lcard .key { grid-row: 1 / 3; align-self: center; width: 30px; height: 30px; display: grid; place-content: center;
  background: var(--well); border: 1px solid var(--line); border-radius: 7px; font-size: 14px; }
.lcard b { font-weight: 600; } .lcard em { grid-column: 2; color: var(--ink-2); font-size: 13.5px; font-style: normal; }

/* ═══ EDITOR tools ═════════════════════════════════════════════════════════ */
.tools { list-style: none; margin: 46px auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 760px; }
.tools li { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 40px;
  background: var(--panel); border: 1px solid var(--line); font-size: 15px; font-weight: 500;
  border-left: 3px solid var(--c); }
.tools li span { color: var(--c); font-size: 15px; }

/* ═══ OWNERSHIP band ═══════════════════════════════════════════════════════ */
.own { background: var(--well); border-block: 1px solid var(--line); }
.own-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 44px 0; text-align: left; }
.own-col .lbl { color: var(--brand-a); font-size: 11px; letter-spacing: .14em; }
.own-col p { color: var(--ink-2); margin: 10px 0 0; font-size: 15px; }
.own-diagram { display: flex; align-items: center; justify-content: center; gap: 0; margin: 40px 0 26px; flex-wrap: wrap; }
.node { padding: 14px 22px; border-radius: 10px; font-size: 14px; font-family: var(--font-mono); position: relative; }
.node.you { background: var(--panel-2); border: 1px solid var(--brand-a); color: var(--ink); }
.node.cut { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-3); text-decoration: line-through; }
.node.cut i { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-family: var(--font-ui);
  font-style: normal; font-size: 11px; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.wire { width: 70px; height: 2px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 5px, transparent 5px 10px); margin: 0 6px; }
.own-claim { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.4vw, 26px); margin: 30px auto 0; max-width: 24ch; }

/* ═══ PRICING ══════════════════════════════════════════════════════════════ */
.plate { max-width: 440px; margin: 40px auto 0; background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 18px; padding: 26px; text-align: left; position: relative;
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, .9); }
.plate-head { font-size: 11px; letter-spacing: .1em; color: var(--ink-2); padding-bottom: 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .03), transparent); }
.plate-price { display: flex; align-items: baseline; gap: 14px; margin: 20px 0; }
.plate-price .now { font-size: 54px; font-weight: 600; }
.plate-price .life { color: var(--brand-a); font-size: 11px; letter-spacing: .12em; }
.incl { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.incl li { padding-left: 24px; position: relative; color: var(--ink-2); font-size: 14.5px; }
.incl li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-a); font-weight: 700; }
.plate-foot { color: var(--ink-3); font-size: 12.5px; margin: 16px 0 0; line-height: 1.5; }
.seats { margin-top: 20px; color: var(--ink-3); font-size: 12.5px; }
.seats a { color: var(--brand-a); text-decoration: underline; }

/* ═══ FAQ ══════════════════════════════════════════════════════════════════ */
.faq-list { max-width: 720px; margin: 40px auto 0; text-align: left; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq-list summary { list-style: none; cursor: pointer; padding: 18px 4px; font-weight: 600; font-size: 17px;
  display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--brand-a); font-size: 22px; transition: transform .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { color: var(--ink-2); margin: 0 4px 18px; max-width: 60ch; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════════════ */
.foot { position: relative; z-index: 2; padding: 80px 0 60px; border-top: 1px solid var(--line); text-align: center; }
.foot-in { display: grid; justify-items: center; gap: 18px; }
.tagline { font-size: clamp(40px, 7vw, 78px); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-links { display: flex; gap: 22px; color: var(--ink-2); font-size: 14px; }
.foot-links a:hover { color: var(--ink); }
.foot-claim { color: var(--ink-3); font-size: 12px; letter-spacing: .04em; }

/* ═══ TIER C — mobile / narrow (editor renders fully assembled, static) ════ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }        /* keep only Buy on narrow */
  .nav { height: 60px; }
  .me-hud { display: none; }                      /* header too narrow at mobile scale */
  .stage-wrap { position: relative; top: auto; right: auto; transform: none; width: 100%; margin: 30px auto 34px; opacity: 1; }
  /* inspector hidden below 900 — canvas gets the room; rail + timeline stay */
  .me-middle { grid-template-columns: 148px 1fr; }
  .me-inspector { display: none; }
  .studio { height: auto; }
  .studio-inner { position: relative; height: auto; display: block; padding: 90px 0 40px; }
  .beats { position: relative; width: 92vw; margin: 0 auto; height: auto; left: auto; top: auto; transform: none; }
  .beats .beat, .captions .beat.cap { position: relative; inset: auto; opacity: 1; margin-bottom: 56px; }
  .captions { position: relative; opacity: 1; pointer-events: auto; height: auto;
    width: 92vw; margin: 0 auto; left: auto; top: auto; }
  .captions .beat.cap { grid-template-columns: 1fr; gap: 6px; padding-top: 18px; }
  .cap-dots { display: none; }
  .layout-demo { grid-template-columns: 1fr; }
  .own-cols { grid-template-columns: 1fr; }
  .amb-grain { animation: none; }
}

/* ═══ TIER D — reduced motion (assembled editor, end-state, no tweens) ═════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boot { display: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .stage-wrap { position: relative; top: auto; right: auto; transform: none; opacity: 1; width: min(760px, 92vw); margin: 40px auto 46px; }
  .studio { height: auto; }
  .studio-inner { position: relative; height: auto; display: block; padding: 110px 0 40px; }
  .beats { position: relative; width: min(680px, 92vw); margin: 0 auto; height: auto; left: auto; top: auto; transform: none; }
  .beats .beat, .captions .beat.cap { position: relative; inset: auto; opacity: 1; margin-bottom: 64px; }
  .captions { position: relative; opacity: 1; pointer-events: auto; height: auto;
    width: min(680px, 92vw); margin: 0 auto; left: auto; top: auto; }
  .cap-dots { display: none; }
}