/* src/theme-tokens.css */
/*
  UXPIN THEME TOKENS - integrated with the Wire theme editor.
  This file is the single source of truth for the design: every color, font,
  radius and shadow lives here as a CSS variable.
  KEEP THE STRUCTURE: exactly one "html:root:not(.dark)" block (light scheme)
  and one "html:root.dark" block (dark scheme), one "--token: value;" per line.
  Change VALUES or add/remove token lines - never rename or merge the blocks.
  Tailwind utilities read these through tailwind.config.js (bg-bg, text-text,
  bg-primary, font-display, ...), so editing a token restyles the whole page.
*/
html:root:not(.dark) {
  --color-bg: #ecebe5;
  --color-surface: #f6f5f0;
  --color-surface-alt: #e1e0d9;
  --color-text: #0b0b12;
  --color-muted: #4b4b5a;
  --color-primary: #1a24e8;
  --color-primary-hover: #1019c4;
  --color-primary-active: #0b1299;
  --color-primary-contrast: #ffffff;
  --color-secondary: #0b0b12;
  --color-secondary-hover: #232331;
  --color-secondary-contrast: #ecebe5;
  --color-accent: #1a24e8;
  --color-accent-hover: #1019c4;
  --color-accent-contrast: #ffffff;
  --color-link: #1a24e8;
  --color-link-hover: #1019c4;
  --color-border: rgb(11 11 18 / 0.18);
  --color-success: #12805c;
  --color-error: #c4261d;
  --color-glass: rgb(11 11 18 / 0.5);
  --color-nav-glass: rgb(236 235 229 / 0.94);
  --color-primary-soft: rgb(26 36 232 / 0.1);
  --color-primary-glow: rgb(26 36 232 / 0.4);
  --color-accent-soft: rgb(26 36 232 / 0.1);
  --color-accent-glow: rgb(26 36 232 / 0.35);
  --color-caption-bg: rgb(11 11 18 / 0.62);
  --color-scrim: rgb(11 11 18 / 0.72);
  --color-scrim-soft: rgb(11 11 18 / 0.35);
  --color-ink: #0b0b12;
  --color-paper: #ecebe5;
  --color-cobalt: #1a24e8;
  --color-cobalt-light: #7d86ff;
  --color-disc: #85858c;
  --color-halftone: rgb(11 11 18 / 0.5);
  --color-halftone-light: rgb(236 235 229 / 0.32);
  --color-rule: rgb(11 11 18 / 0.2);
  --color-ed-bg: #0d0e15;
  --color-ed-panel: #14161f;
  --color-ed-panel-2: #1b1e29;
  --color-ed-line: rgb(236 235 229 / 0.1);
  --color-ed-line-2: rgb(236 235 229 / 0.2);
  --color-ed-text: #eceae4;
  --color-ed-muted: rgb(236 235 229 / 0.58);
  --color-ed-faint: rgb(236 235 229 / 0.32);
  --color-ed-accent: #7d86ff;
  --color-ed-accent-soft: rgb(125 134 255 / 0.2);
  --color-clip-video: #2a33b4;
  --color-clip-video-2: #3640d6;
  --color-clip-weak: #2b2d3b;
  --color-clip-audio: #3a3f5c;
  --color-clip-broll: #d8d6cc;
  --color-clip-cap: #8a8d9e;
  --color-silence: rgb(236 235 229 / 0.07);
  --color-wave: #aab0ff;
  --color-wave-noise: rgb(236 235 229 / 0.38);
  --color-wave-music: #5560ff;
  --color-warn: #f2c14e;
  --fx-sky-top: #0b0d2e;
  --fx-sky-mid: #1d27a8;
  --fx-sky-low: #7d86ff;
  --fx-sun: #ecebe5;
  --fx-far: #151a5e;
  --fx-mid: #0e1038;
  --fx-near: #07071a;
  --fx-window: #f1ecd6;
  --fx-ground: #0a0b24;
  --fx-wet: #3a44e0;
  --fx-skin: #cfc8b8;
  --fx-coat: #05050f;
  --fx-rim: #b8bdff;
  --fx-desk: #d9d7cd;
  --fx-desk-2: #bdbbb0;
  --fx-screen: #1a24e8;
  --fx-screen-2: #a6adff;
  --display-font: "Space Grotesk", system-ui, sans-serif;
  --body-font: "IBM Plex Sans", system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --shadow-xs: 0 1px 0 rgb(11 11 18 / 0.12);
  --shadow-sm: 0 6px 18px rgb(11 11 18 / 0.14);
  --shadow-md: 0 14px 40px rgb(11 11 18 / 0.2);
  --shadow-lg: 0 30px 80px rgb(11 11 18 / 0.32);
  --shadow-xl: 0 40px 110px rgb(11 11 18 / 0.45);
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html:root.dark {
  --color-bg: #0b0b12;
  --color-surface: #14161f;
  --color-surface-alt: #0f1018;
  --color-text: #ecebe5;
  --color-muted: #a3a3b4;
  --color-primary: #4d57ff;
  --color-primary-hover: #1019c4;
  --color-primary-active: #0b1299;
  --color-primary-contrast: #ffffff;
  --color-secondary: #ecebe5;
  --color-secondary-hover: #ffffff;
  --color-secondary-contrast: #0b0b12;
  --color-accent: #7d86ff;
  --color-accent-hover: #1019c4;
  --color-accent-contrast: #0b0b12;
  --color-link: #7d86ff;
  --color-link-hover: #1019c4;
  --color-border: rgb(236 235 229 / 0.16);
  --color-success: #12805c;
  --color-error: #c4261d;
  --color-glass: rgb(11 11 18 / 0.5);
  --color-nav-glass: rgb(11 11 18 / 0.94);
  --color-primary-soft: rgb(26 36 232 / 0.1);
  --color-primary-glow: rgb(26 36 232 / 0.4);
  --color-accent-soft: rgb(26 36 232 / 0.1);
  --color-accent-glow: rgb(26 36 232 / 0.35);
  --color-caption-bg: rgb(11 11 18 / 0.62);
  --color-scrim: rgb(11 11 18 / 0.72);
  --color-scrim-soft: rgb(11 11 18 / 0.35);
  --color-ink: #0b0b12;
  --color-paper: #ecebe5;
  --color-cobalt: #1a24e8;
  --color-cobalt-light: #7d86ff;
  --color-disc: #85858c;
  --color-halftone: rgb(236 235 229 / 0.4);
  --color-halftone-light: rgb(236 235 229 / 0.32);
  --color-rule: rgb(236 235 229 / 0.2);
  --color-ed-bg: #0d0e15;
  --color-ed-panel: #14161f;
  --color-ed-panel-2: #1b1e29;
  --color-ed-line: rgb(236 235 229 / 0.1);
  --color-ed-line-2: rgb(236 235 229 / 0.2);
  --color-ed-text: #eceae4;
  --color-ed-muted: rgb(236 235 229 / 0.58);
  --color-ed-faint: rgb(236 235 229 / 0.32);
  --color-ed-accent: #7d86ff;
  --color-ed-accent-soft: rgb(125 134 255 / 0.2);
  --color-clip-video: #2a33b4;
  --color-clip-video-2: #3640d6;
  --color-clip-weak: #2b2d3b;
  --color-clip-audio: #3a3f5c;
  --color-clip-broll: #d8d6cc;
  --color-clip-cap: #8a8d9e;
  --color-silence: rgb(236 235 229 / 0.07);
  --color-wave: #aab0ff;
  --color-wave-noise: rgb(236 235 229 / 0.38);
  --color-wave-music: #5560ff;
  --color-warn: #f2c14e;
  --fx-sky-top: #0b0d2e;
  --fx-sky-mid: #1d27a8;
  --fx-sky-low: #7d86ff;
  --fx-sun: #ecebe5;
  --fx-far: #151a5e;
  --fx-mid: #0e1038;
  --fx-near: #07071a;
  --fx-window: #f1ecd6;
  --fx-ground: #0a0b24;
  --fx-wet: #3a44e0;
  --fx-skin: #cfc8b8;
  --fx-coat: #05050f;
  --fx-rim: #b8bdff;
  --fx-desk: #d9d7cd;
  --fx-desk-2: #bdbbb0;
  --fx-screen: #1a24e8;
  --fx-screen-2: #a6adff;
  --display-font: "Space Grotesk", system-ui, sans-serif;
  --body-font: "IBM Plex Sans", system-ui, sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --shadow-xs: 0 1px 0 rgb(11 11 18 / 0.12);
  --shadow-sm: 0 6px 18px rgb(11 11 18 / 0.14);
  --shadow-md: 0 14px 40px rgb(11 11 18 / 0.2);
  --shadow-lg: 0 30px 80px rgb(11 11 18 / 0.32);
  --shadow-xl: 0 40px 110px rgb(11 11 18 / 0.45);
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* src/styles.css */
/*
  Custom CSS beyond Tailwind utilities: keyframes, pseudo-elements, complex
  selectors. Plain CSS only - @apply/@tailwind are not processed here.
  Colors and fonts must reference the tokens: var(--color-primary), etc.
  The editor UI lives in editor.css, the footage and its overlays in footage.css.
*/

html:root:not(.dark) { color-scheme: light; }
html:root.dark { color-scheme: dark; }

section[id] { scroll-margin-top: 56px; }

:focus-visible {
  outline: 2px solid var(--color-cobalt-light);
  outline-offset: 3px;
}
::selection { background: var(--color-cobalt); color: var(--color-primary-contrast); }

body { overflow-x: clip; }

/* ---------- Nav: transparent, tone follows the scene ---------- */
.site-nav {
  --nav-fg: var(--color-text);
  color: var(--nav-fg);
  border-bottom: 1px solid transparent;
  transition: color 420ms var(--ease-standard), background-color 420ms var(--ease-standard),
    border-color 420ms var(--ease-standard);
}
.site-nav[data-tone="on-ink"] { --nav-fg: var(--color-paper); }
.site-nav.is-solid { --nav-fg: var(--color-text); background: var(--color-nav-glass); border-bottom-color: var(--color-rule); }
.site-nav .nav-burger { color: inherit; }
/* the wordmark clears the cobalt band instead of sitting on it */
.site-nav > nav { padding-left: calc(var(--band) + 20px); }
.nav-link { opacity: 0.7; transition: opacity var(--duration-fast) var(--ease-standard); }
.nav-link:hover { opacity: 1; }
.mobile-menu { background: var(--color-bg); color: var(--color-text); border-top: 1px solid var(--color-rule); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--mono-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform 120ms var(--ease-standard);
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary { border: 1px solid var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: var(--color-bg); }
.btn-light { background: var(--color-paper); color: var(--color-ink); }
.btn-light:hover { background: var(--color-surface); }
.btn-ghost-light { border: 1px solid var(--color-halftone-light); color: var(--color-paper); }
.btn-ghost-light:hover { border-color: var(--color-paper); background: var(--color-halftone-light); }

/* ---------- Story stage ---------- */
:root { --band: clamp(14px, 3.2vw, 48px); }
.story { position: relative; --copy-w: clamp(300px, 31vw, 460px); }
.story-pin { position: relative; min-height: 100svh; background: var(--color-ink); color: var(--color-paper); overflow: hidden; }

/* no-JS and fallback: stack hero, then chapters, no editor */
.hero-copy { position: relative; padding: 112px 24px 56px; max-width: 760px; }
.copy { position: relative; padding: 0 24px 24px; display: grid; gap: 32px; }
.chapter { border-top: 1px solid var(--color-halftone-light); padding-top: 20px; max-width: 520px; }
.world, .region, .doves, .finale { display: none; }
.finale { padding: 40px 24px 72px; }

.hero-title {
  font-size: clamp(2.7rem, 7.4vw, 7.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.hero-word-mask { padding-bottom: 0.16em; margin-bottom: -0.16em; }
.hero-sub { margin-top: 20px; font-size: clamp(1rem, 1.5vw, 1.35rem); max-width: 28ch; opacity: 0.88; }
.hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { margin-top: 28px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }
.hero-proof b { font-weight: 500; color: var(--color-paper); }

.ch-kicker { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.ch-kicker span { color: var(--color-cobalt); font-weight: 500; }
.ch-title { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.8rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.035em; }
.ch-text { margin-top: 14px; max-width: 34ch; font-size: clamp(0.9rem, 1.05vw, 1.05rem); line-height: 1.5; color: var(--color-muted); }
.finale-title { font-size: clamp(2.6rem, 6.4vw, 6.4rem); font-weight: 600; line-height: 0.92; letter-spacing: -0.045em; }
.finale-sub { margin-top: 18px; max-width: 34ch; font-size: clamp(1rem, 1.4vw, 1.25rem); opacity: 0.88; }

/* JS-driven stage */
.has-story .story-pin { height: 100svh; min-height: 0; }
.has-story .world, .has-story .region, .has-story .doves { display: block; position: absolute; inset: 0; }
.has-story .region { overflow: hidden; }
.has-story .rig { position: absolute; inset: 0; }
.has-story .hero-copy {
  position: absolute; z-index: 6; left: clamp(20px, 5vw, 76px); bottom: var(--hero-bottom, clamp(70px, 11vh, 130px));
  padding: 0; max-width: min(92vw, 880px);
}
.has-story .hero-title { text-shadow: 0 2px 30px var(--color-scrim); }
.has-story .copy { position: absolute; z-index: 5; display: block; padding: 0; inset: 0; pointer-events: none; color: var(--color-text); }
.has-story .chapter {
  position: absolute; top: 0; bottom: 0; width: min(26vw, 420px); display: flex; flex-direction: column; justify-content: center;
  border: 0; padding: 72px clamp(16px, 2vw, 32px) 40px; max-width: none; opacity: 0; background: var(--color-bg);
}
.has-story .chapter[data-side="L"] { left: var(--band); padding-left: clamp(16px, 2.4vw, 40px); border-right: 1px solid var(--color-rule); }
.has-story .chapter[data-side="R"] { right: 0; border-left: 1px solid var(--color-rule); }
.has-story .chapter[data-valign="top"] { justify-content: flex-start; padding-top: 18vh; }
.has-story .ch-kicker::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 14px; background: var(--color-cobalt); }
.has-story .ch-title { font-size: clamp(1.7rem, 3vw, 3.2rem); letter-spacing: -0.04em; line-height: 1; }
.has-story .ch-text { margin-top: 14px; max-width: 30ch; font-size: clamp(0.9rem, 1.05vw, 1.05rem); color: var(--color-muted); }
.has-story .finale {
  display: flex; flex-direction: column; justify-content: flex-end; position: absolute; inset: 0; z-index: 7;
  padding: 0 clamp(20px, 5vw, 76px) clamp(56px, 11vh, 120px); opacity: 0; pointer-events: none; color: var(--color-paper);
}
.has-story .finale a { pointer-events: auto; }
.has-story .hero-copy a { pointer-events: auto; }

/* intro choreography starts from an empty dark canvas */
.has-story [data-i-frame], .has-story [data-i-ui], .has-story [data-timeline],
.has-story [data-i-playhead], .has-story [data-hero-fade], .has-story .hero-title { opacity: 0; }
.has-story .finale::before {
  content: ""; position: absolute; inset: 35% 0 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--color-scrim), transparent);
}

/* ---------- Paper world (poster language, decorative) ---------- */
.world { z-index: 0; opacity: 0; }
.w-band { position: absolute; left: 0; top: 0; bottom: 0; width: var(--band); background: var(--color-cobalt); }
.w-band i { position: absolute; left: 0; bottom: 7%; width: 340%; height: 12px; background: var(--color-ink); }
.w-layer { position: absolute; inset: 0; will-change: transform; }
.w-dots {
  position: absolute; right: 2.5vw; top: 12vh; width: 38vw; height: 66vh; border: 1px solid var(--color-cobalt);
  background-image: radial-gradient(var(--color-halftone) 1.2px, transparent 1.7px); background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(120deg, var(--color-ink) 30%, transparent 95%);
  mask-image: linear-gradient(120deg, var(--color-ink) 30%, transparent 95%);
}
.w-block { position: absolute; right: 6vw; bottom: 5vh; width: 15vw; height: 6.5vh; background: var(--color-cobalt); }
.w-disc { position: absolute; right: -6vw; top: 4vh; width: 27vw; aspect-ratio: 1; border-radius: 50%; background: var(--color-disc); opacity: 0.85; }
.w-black { position: absolute; left: calc(var(--band) + 3vw); top: 15vh; width: clamp(34px, 4.4vw, 70px); aspect-ratio: 1; border-radius: 50%; background: var(--color-ink); }
.w-orbit {
  position: absolute; right: -10vw; top: 50%; width: min(86vw, 1200px); transform: translateY(-50%);
  stroke: var(--color-ink); stroke-width: 0.8; opacity: 0.32; animation: orbit 220s linear infinite;
}
.w-orbit-dot { fill: var(--color-cobalt); stroke: none; }
@keyframes orbit { to { transform: translateY(-50%) rotate(360deg); } }
.w-star {
  position: absolute; left: calc(var(--band) + clamp(14px, 2.4vw, 40px)); top: 26vh; width: 40px; fill: var(--color-ink); opacity: 0;
}
.w-note {
  position: absolute; right: 20px; bottom: 14px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
}

/* ---------- Doves: the finished video leaves ---------- */
.doves { z-index: 8; pointer-events: none; }
.dove { position: absolute; left: 50%; top: 52%; width: 56px; opacity: 0; fill: var(--color-paper); }
.dove .dv-wing { fill: var(--color-cobalt-light); transform-origin: 40% 80%; animation: flap 0.9s ease-in-out infinite alternate; }
.dove:nth-child(2) { width: 38px; }
.dove:nth-child(3) { width: 30px; }
.dove:nth-child(2) .dv-wing { animation-delay: -0.3s; }
.dove:nth-child(3) .dv-wing { animation-delay: -0.6s; }
@keyframes flap { from { transform: rotate(8deg) scaleY(1); } to { transform: rotate(-14deg) scaleY(0.55); } }

/* ---------- Tail sections (after the story) ---------- */
.tail-section { background: var(--color-bg); color: var(--color-text); }
.tail-section--alt { background: var(--color-surface-alt); }
.tail-band { position: absolute; left: 0; top: 0; bottom: 0; width: var(--band, 28px); background: var(--color-cobalt); }
.plans { border-top: 1px solid var(--color-text); }
.plan { display: flex; flex-direction: column; padding: 32px 28px 36px; border-bottom: 1px solid var(--color-rule); }
@media (min-width: 768px) {
  .plan { border-left: 1px solid var(--color-rule); border-bottom: 0; }
  .plan:first-child { border-left: 0; }
}
.plan-per { color: var(--color-muted); }
.plan--pop { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.plan--pop svg, .plan--pop .plan-per { color: var(--color-primary-contrast); opacity: 0.9; }
.faq-list { border-bottom: 1px solid var(--color-rule); }
.faq { border-top: 1px solid var(--color-rule); }
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform var(--duration-normal) var(--ease-standard); }
.faq[open] .faq-icon { transform: rotate(45deg); color: var(--color-cobalt); }
.faq[open] .faq-body { animation: faq-in var(--duration-slow) var(--ease-standard); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cta-section { background: var(--color-ink); color: var(--color-paper); }
.cta-dots {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  background-image: radial-gradient(var(--color-cobalt-light) 1.1px, transparent 1.6px); background-size: 10px 10px; opacity: 0.35;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-ink) 90%);
  mask-image: linear-gradient(90deg, transparent, var(--color-ink) 90%);
}
.cta-form { padding: 28px; border: 1px solid var(--color-halftone-light); background: var(--color-scrim-soft); }
.field {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font-family: var(--body-font); font-size: 14px; line-height: 1.2;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.cta-form .field { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-halftone-light); }
.field::placeholder { color: var(--color-muted); }
.field:hover { border-color: var(--color-muted); }
.field:focus { outline: none; border-color: var(--color-cobalt-light); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field[aria-invalid="true"] { border-color: var(--color-error); }
.cta-form .text-error { color: var(--color-warn); }

.link { color: var(--color-link); text-underline-offset: 3px; }
.link:hover { text-decoration: underline; }

/* ---------- Small screens: copy moves under the editor ---------- */
@media (max-width: 899px) {
  .story { --copy-h: clamp(210px, 33svh, 300px); }
  .has-story .chapter, .has-story .chapter[data-side] { top: auto; bottom: 0; left: var(--band); right: 0; width: auto; height: 34svh; padding: 0 18px 20px 14px; justify-content: center; border: 0; border-top: 1px solid var(--color-rule); }
  .has-story .chapter[data-valign="top"] { padding-top: 0; justify-content: center; }
  .w-dots, .w-block, .w-note { display: none; }
  .w-disc { width: 60vw; right: -22vw; top: 6vh; }
  .w-star { top: auto; bottom: calc(var(--copy-h) - 6px); }
  .w-black { top: 9vh; }
}

/* reduced motion: the finished editor sits in the page, chapters read in order */
.static-story .region { display: block; position: relative; height: min(76vw, 640px); margin: 0 auto; max-width: 1100px; overflow: hidden; }
.static-story .rig { position: absolute; inset: 0; }
.static-story .story-pin { padding-bottom: 40px; }
.static-story .finale { display: block; }

@media (prefers-reduced-motion: reduce) {
  .w-orbit, .dove .dv-wing { animation: none !important; }
  .btn:active:not(:disabled) { transform: none; }
  .faq[open] .faq-body { animation: none; }
}


/* src/editor.css */
/*
  The Nightcut editor as it appears inside the story: a 1200 x 720 design-space
  surface. The camera scales and pans it, so every size here is in design px.
*/
.editor {
  position: absolute; left: 0; top: 0; width: 1200px; height: 720px; transform-origin: 0 0;
  background: var(--color-ed-bg); color: var(--color-ed-text); border: 1px solid var(--color-ed-line-2);
  font: 12px/1.35 var(--body-font); box-shadow: var(--shadow-xl); overflow: hidden;
}
.editor b, .editor strong { font-weight: 500; }

/* ----- title bar ----- */
.ed-titlebar { height: 32px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--color-ed-line); }
.ed-dots { display: flex; gap: 5px; }
.ed-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--color-ed-line-2); }
.ed-title { font: 500 11px var(--mono-font); letter-spacing: 0.04em; }
.ed-title em { font-style: normal; color: var(--color-ed-faint); margin-left: 8px; }
.ed-proc { margin-left: auto; font: 10px var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ed-accent); opacity: 0; animation: proc 17s linear infinite; }
.ed-proc::after { content: "..."; display: inline-block; width: 1.4em; text-align: left; }
@keyframes proc { 0%, 38%, 46%, 100% { opacity: 0; } 40%, 44% { opacity: 1; } }
.ed-meters { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.ed-meters i { width: 3px; height: 100%; background: var(--color-ed-accent); transform-origin: bottom; animation: meter 1.3s ease-in-out infinite alternate; }
.ed-meters i:nth-child(2) { animation-duration: 0.9s; animation-delay: -0.4s; }
.ed-meters i:nth-child(3) { animation-duration: 1.7s; animation-delay: -0.8s; }
@keyframes meter { from { transform: scaleY(0.25); } to { transform: scaleY(0.9); } }
.ed-dur { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono-font); }
.ed-dur b { font-size: 9px; letter-spacing: 0.14em; color: var(--color-ed-accent); }
.ed-dur output { font-size: 13px; font-weight: 500; }

/* ----- three columns ----- */
.ed-main { display: grid; grid-template-columns: 230px 640px 330px; height: 420px; }
.ed-bin, .ed-text { position: relative; background: var(--color-ed-panel); }
.ed-bin { border-right: 1px solid var(--color-ed-line); }
.ed-text { border-left: 1px solid var(--color-ed-line); }
.ed-head { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font: 10px var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ed-muted); border-bottom: 1px solid var(--color-ed-line); }
.ed-count { position: relative; display: inline-block; min-width: 40px; text-align: right; }
.ed-count b { font-weight: 400; }
.ed-count b + b { position: absolute; right: 0; opacity: 0; }

/* ----- media bin ----- */
.bin-list { position: relative; height: 384px; }
.clip {
  position: absolute; left: 8px; right: 8px; top: 4px; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 8px;
  background: var(--color-ed-panel-2); border: 1px solid var(--color-ed-line); border-radius: 2px;
}
.clip b { display: block; font: 500 11px var(--mono-font); }
.clip em { display: block; font: 10px var(--mono-font); font-style: normal; color: var(--color-ed-faint); }
.clip .x2 { margin-left: auto; text-decoration: none; font: 500 9px var(--mono-font); padding: 1px 4px; background: var(--color-ed-accent); color: var(--color-ink); opacity: 0; }
.clip .wv { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 5px; background: repeating-linear-gradient(90deg, var(--color-ed-line-2) 0 2px, transparent 2px 4px); text-decoration: none; }
.clip .wv::after { content: ""; position: absolute; left: 12%; width: 56%; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--color-ed-accent) 0 2px, transparent 2px 4px); transform: scaleX(var(--id, 0)); transform-origin: left; }
.th { flex: none; width: 56px; height: 32px; border-radius: 1px; background-color: var(--color-clip-video); position: relative; overflow: hidden; }
.th-city { background-image: linear-gradient(var(--fx-sky-top), var(--fx-sky-mid) 60%, var(--fx-sky-low)); }
.th-city::before { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: repeating-linear-gradient(90deg, var(--fx-mid) 0 7px, var(--fx-far) 7px 11px); }
.th-city::after { content: ""; position: absolute; left: 60%; bottom: 0; width: 5px; height: 20px; background: var(--fx-coat); border-radius: 3px 3px 0 0; }
.th-face { background-image: radial-gradient(circle at 50% 42%, var(--fx-skin) 0 22%, transparent 23%), linear-gradient(var(--color-clip-video), var(--fx-sky-top)); }
.th-desk { background-image: linear-gradient(var(--fx-screen) 0 0), linear-gradient(var(--fx-desk) 0 0); background-size: 56% 56%, 100% 100%; background-repeat: no-repeat; background-position: 50% 28%, 0 0; }
.th-screen { background-image: linear-gradient(var(--fx-screen-2) 0 0), linear-gradient(var(--fx-screen) 0 0); background-size: 30% 70%, 100% 100%; background-repeat: no-repeat; background-position: 12% 50%, 0 0; }
.th-wave { background-image: repeating-linear-gradient(90deg, var(--color-wave) 0 2px, transparent 2px 5px); background-size: 100% 46%; background-position: 0 50%; background-repeat: no-repeat; background-color: var(--color-clip-audio); }

/* ----- preview ----- */
.ed-preview { position: relative; background: var(--color-ed-bg); }
.pv-top { height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font: 10px var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ed-muted); }
.pv-ratios { display: flex; gap: 4px; }
.pv-ratios b { padding: 2px 6px; border: 1px solid var(--color-ed-line); font-weight: 400; transition: background-color 220ms var(--ease-standard), color 220ms var(--ease-standard); }
.pv-ratios b.on { background: var(--color-ed-text); color: var(--color-ink); border-color: transparent; }
.pv-stage { position: relative; height: 360px; display: flex; align-items: center; justify-content: center; }
.pv-platform { position: absolute; right: 10px; bottom: 6px; font: 10px var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ed-accent); opacity: 0; }
.pv-bottom { position: relative; height: 34px; }
.pv-row { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 12px; }
.pv-transport { color: var(--color-ed-muted); }
.pv-tc2 { font: 11px var(--mono-font); color: var(--color-ed-text); }
.pv-fit { margin-left: auto; font: 10px var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; }
.pv-cmd, .pv-capstyles { opacity: 0; }
.pv-cmd { margin: 4px 10px; inset: 0; background: var(--color-ed-panel-2); border: 1px solid var(--color-ed-line-2); border-radius: 2px; padding: 0 6px 0 10px; gap: 8px; }
.cmd-star { width: 12px; fill: var(--color-ed-accent); flex: none; }
.cmd-text { font: 12px var(--mono-font); }
.cmd-caret { width: 1px; height: 14px; background: var(--color-ed-text); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cmd-go { margin-left: auto; font: 500 10px var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; background: var(--color-ed-text); color: var(--color-ink); border-radius: 1px; }
.pv-capstyles { gap: 6px; }
.cs-label { font: 10px var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ed-muted); margin-right: 6px; }
.pv-capstyles b { font: 10px var(--mono-font); letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--color-ed-line-2); font-weight: 400; transition: background-color 220ms var(--ease-standard), color 220ms var(--ease-standard); }
.pv-capstyles b.on { background: var(--color-ed-text); color: var(--color-ink); border-color: transparent; }

/* ----- transcript ----- */
.tx { padding: 14px 16px; }
.tx p { margin: 0; }
.tx time { font: 10px var(--mono-font); color: var(--color-ed-faint); margin-right: 8px; }
.tx-spk { font: 500 10px var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ed-accent); }
.tx-s { margin-top: 12px !important; padding-left: 10px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.5; color: var(--color-ed-muted); transition: color 320ms var(--ease-standard), border-color 320ms var(--ease-standard); }
.tx-s.is-hl { color: var(--color-ed-text); border-left-color: var(--color-ed-accent); }
.tx-cut { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; max-width: 190px; border-radius: 1px; }
.tx-cut.is-sel { background: var(--color-ed-accent-soft); box-shadow: 0 0 0 1px var(--color-ed-accent); }
.tx-key { position: absolute; right: 14px; bottom: 14px; font: 500 10px var(--mono-font); letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--color-ed-line-2); background: var(--color-ed-panel-2); opacity: 0; }

/* ----- timeline ----- */
.ed-timeline { position: relative; height: 268px; border-top: 1px solid var(--color-ed-line-2); background: var(--color-ed-panel); }
.tl-head { height: 28px; display: flex; align-items: center; gap: 18px; padding: 0 16px 0 12px; font: 10px var(--mono-font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ed-muted); }
.tl-versions { display: flex; gap: 6px; margin-left: 12px; }
.tl-versions b { font-weight: 400; padding: 2px 8px; border: 1px solid var(--color-ed-line); color: var(--color-ed-faint); transition: color 320ms var(--ease-standard), background-color 320ms var(--ease-standard); }
.tl-versions b.on { background: var(--color-ed-text); color: var(--color-ink); border-color: transparent; }
.tl-zoom { margin-left: auto; }
.tl-ruler { position: relative; height: 22px; margin: 0 16px 0 96px; border-bottom: 1px solid var(--color-ed-line); background: repeating-linear-gradient(90deg, var(--color-ed-line-2) 0 1px, transparent 1px 27.2px) bottom / 100% 5px no-repeat; }
.tl-ruler span { position: absolute; top: 2px; font: 9px var(--mono-font); color: var(--color-ed-faint); }
.tl-ruler span[data-rl="1"] { left: 25%; } .tl-ruler span[data-rl="2"] { left: 50%; } .tl-ruler span[data-rl="3"] { left: 75%; } .tl-ruler span[data-rl="4"] { right: 0; }
.tl-body { position: relative; margin-right: 16px; }
.trk { display: flex; border-bottom: 1px solid var(--color-ed-line); }
.trk-h { flex: none; width: 96px; padding: 5px 10px; font: 9px var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ed-faint); }
.trk-h b { display: block; font-weight: 400; }
.trk-c { position: relative; flex: 1; overflow: hidden; }
.trk--v2 { height: 36px; } .trk--v1 { height: 52px; } .trk--cap { height: 28px; } .trk--audio { height: 80px; border-bottom: 0; }
.trk--audio .trk-h b:first-child { height: 44px; } .trk--audio .trk-h b:last-child { height: 36px; }
.trk--audio canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.seg { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 2px; overflow: hidden; font: 9px var(--mono-font); line-height: 1.2; padding: 4px 6px; white-space: nowrap; will-change: transform, width; }
.seg--keep { background-color: var(--color-clip-video); box-shadow: inset 1px 0 0 var(--color-clip-video-2); color: var(--color-ed-text); }
.seg--keep, .seg--weak { background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 30px); animation: film 7s linear infinite; }
@keyframes film { to { background-position-x: 30px; } }
.seg--weak { background-color: var(--color-clip-weak); color: var(--color-ed-faint); }
.seg--sil { background: repeating-linear-gradient(135deg, var(--color-silence) 0 3px, transparent 3px 7px); border: 1px dashed var(--color-ed-line); top: 14px; bottom: 14px; }
.blk { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 2px; overflow: hidden; padding: 3px 6px; font: 500 9px var(--mono-font); white-space: nowrap; opacity: 0; will-change: transform, width; }
.blk--broll { background: var(--color-clip-broll); color: var(--color-ink); }
.blk--ph { border: 1px dashed var(--color-ed-accent); background: var(--color-ed-accent-soft); color: var(--color-ed-accent); }
.blk--cap { background: var(--color-clip-cap); color: var(--color-ink); top: 5px; bottom: 5px; padding: 1px 5px; }
.xfade { position: absolute; top: 14px; width: 9px; height: 24px; margin-left: -4px; background: var(--color-ed-text); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: 0; }
.au-tag { position: absolute; left: 6px; font: 9px var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; padding: 1px 5px; background: var(--color-ed-bg); opacity: 0; }
.au-tag--noise { top: 4px; color: var(--color-wave-noise); }
.au-tag--fx { bottom: 4px; left: auto; right: 6px; color: var(--color-ed-accent); }

.playhead { position: absolute; top: -22px; bottom: 0; left: 96px; width: 1px; background: var(--color-ed-text); z-index: 8; will-change: transform; pointer-events: none; }
.playhead b { position: absolute; top: -2px; left: 0; transform: translate(-50%, -100%); padding: 1px 5px; font: 500 9px var(--mono-font); background: var(--color-cobalt); color: var(--color-primary-contrast); }
.tl-hl { position: absolute; top: 36px; height: 52px; left: 96px; width: 0; border: 1px solid var(--color-ed-accent); background: var(--color-ed-accent-soft); z-index: 6; opacity: 0; pointer-events: none; overflow: hidden; }
.tl-hl::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; background: linear-gradient(90deg, transparent, var(--color-ed-accent-soft), transparent); animation: sweep 1.6s linear infinite; }
@keyframes sweep { to { transform: translateX(360%); } }
.tl-chip { position: absolute; z-index: 9; top: 9px; left: 96px; font: 10px var(--mono-font); letter-spacing: 0.04em; padding: 3px 8px; background: var(--color-ed-text); color: var(--color-ink); opacity: 0; white-space: nowrap; pointer-events: none; }
.tl-chip b { color: var(--color-cobalt); margin-left: 6px; }
.tl-tags { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.tl-scan { position: absolute; top: -22px; bottom: 0; left: 96px; width: 40px; z-index: 5; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--color-ed-accent-soft)); border-right: 1px solid var(--color-ed-accent); will-change: transform; }

.tag { position: absolute; font: 500 9px var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; background: var(--color-ed-text); color: var(--color-ink); opacity: 0; white-space: nowrap; }
.tl-tags .tag { top: 0; }

/* ----- cursor ----- */
.ed-cursor { position: absolute; left: 0; top: 0; margin: -2px 0 0 -3px; z-index: 40; opacity: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
.ed-cursor path { fill: var(--color-ed-text); stroke: var(--color-ink); stroke-width: 1.2; }

/* ----- ambient + reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .ed-proc, .ed-meters i, .seg--keep, .seg--weak, .cmd-caret, .tl-hl::after { animation: none !important; }
}


/* src/footage.css */
/*
  The project footage: a following shot of a creator walking through Lisbon at
  dusk, drawn in SVG and treated with halftone, grain and a slow glitch while it
  is still raw. All colors come from the --fx-* tokens.
*/
.frame { position: relative; width: 640px; height: 360px; overflow: hidden; background: var(--fx-sky-top); flex: none; box-shadow: 0 0 0 1px var(--color-ed-line-2); }
.fx-wrap {
  position: absolute; top: 0; left: 0; width: 640px; height: 360px;
  --fx-b: 0.74; --fx-sa: 0.62; --fx-c: 0.9; --fx-h: 14deg;
  filter: brightness(var(--fx-b)) saturate(var(--fx-sa)) contrast(var(--fx-c)) hue-rotate(var(--fx-h));
}
.fx-shake { position: absolute; inset: 0; will-change: transform; }
.fx-svg { display: block; width: 100%; height: 100%; }

.fx-s0 { stop-color: var(--fx-sky-top); } .fx-s1 { stop-color: var(--fx-sky-mid); } .fx-s2 { stop-color: var(--fx-sky-low); }
.fx-w0 { stop-color: var(--fx-wet); stop-opacity: 0.5; } .fx-w1 { stop-color: var(--fx-ground); stop-opacity: 0; }
.fx-sun { fill: var(--fx-sun); opacity: 0.82; }
.fx-ground { fill: var(--fx-ground); }
.fx-b-far { fill: var(--fx-far); } .fx-b-mid { fill: var(--fx-mid); } .fx-b-near { fill: var(--fx-near); }
.fx-win { fill: var(--fx-window); opacity: 0.8; }
.fx-win--blink { animation: win 5.5s steps(1) infinite; }
@keyframes win { 0%, 62%, 100% { opacity: 0.8; } 64%, 70% { opacity: 0.1; } }
.fx-lamp { fill: var(--fx-near); } .fx-lamp-glow { fill: var(--fx-window); opacity: 0.9; }
.fx-pan { animation: fx-pan 120s linear infinite; }
.fx-pan--mid { animation-duration: 56s; } .fx-pan--near { animation-duration: 22s; }
@keyframes fx-pan { to { transform: translateX(-1600px); } }
.fx-shadow { fill: var(--fx-near); opacity: 0.55; }
.fx-coat { fill: var(--fx-coat); } .fx-skin { fill: var(--fx-skin); }
.fx-rim { fill: none; stroke: var(--fx-rim); stroke-width: 3; opacity: 0.6; stroke-linecap: round; }
.fx-bob { animation: bob 0.68s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.fx-limb { transform-box: fill-box; transform-origin: 50% 2%; }
.fx-leg-a, .fx-arm-b { animation: swing-a 0.68s ease-in-out infinite alternate; }
.fx-leg-b, .fx-arm-a { animation: swing-b 0.68s ease-in-out infinite alternate; }
@keyframes swing-a { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes swing-b { from { transform: rotate(20deg); } to { transform: rotate(-20deg); } }
/* footage waits for the intro, then plays */
.has-story:not(.is-playing) .fx-pan, .has-story:not(.is-playing) .fx-bob, .has-story:not(.is-playing) .fx-limb { animation-play-state: paused; }
.story-pin:not(.is-playing) .fx-pan, .story-pin:not(.is-playing) .fx-bob, .story-pin:not(.is-playing) .fx-limb { animation-play-state: paused; }

/* subject bracket, only when the editor is "reading" the shot */
.fx-bracket { position: absolute; left: 63.2%; top: 36.7%; width: 62px; height: 70px; margin: -35px 0 0 -31px; opacity: 0; }
.fx-bracket i { position: absolute; width: 11px; height: 11px; border: 0 solid var(--color-ed-accent); }
.fx-bracket i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; } .fx-bracket i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.fx-bracket i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; } .fx-bracket i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }

/* b-roll */
.broll { position: absolute; inset: 0; opacity: 0; background: var(--fx-desk); }
.broll svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bro-bg { fill: var(--fx-desk); } .bro-desk { fill: var(--fx-desk-2); } .bro-base { fill: var(--color-ink); opacity: 0.85; }
.bro-lid { fill: var(--color-ink); } .bro-screen { fill: var(--fx-screen); }
.bro-ui { fill: var(--fx-screen-2); opacity: 0.85; } .bro-ui--wide { fill: var(--fx-desk); opacity: 0.95; }
.bro-mug { fill: var(--fx-screen); } .bro-book { fill: var(--color-ink); opacity: 0.8; }
.broll svg { transform-origin: 40% 45%; animation: bro-drift 14s ease-in-out infinite alternate; }
@keyframes bro-drift { from { transform: scale(1); } to { transform: scale(1.09); } }

/* print + signal texture */
.pv-halftone { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.5; background-image: radial-gradient(var(--color-ink) 0.85px, transparent 1.35px); background-size: 4px 4px; }
.pv-glitch { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pv-glitch i { position: absolute; left: 0; right: 0; height: 7px; background: var(--color-ed-text); mix-blend-mode: difference; opacity: 0; animation: glitch 7s steps(1) infinite; }
.pv-glitch i:nth-child(1) { top: 28%; } .pv-glitch i:nth-child(2) { top: 61%; height: 3px; animation-delay: -3s; animation-duration: 9s; } .pv-glitch i:nth-child(3) { top: 79%; height: 11px; animation-delay: -5s; animation-duration: 11s; }
@keyframes glitch { 0%, 91%, 100% { opacity: 0; transform: translateX(0); } 92% { opacity: 0.55; transform: translateX(-14px); } 94% { opacity: 0.3; transform: translateX(10px); } 96% { opacity: 0; } }

/* monitor chrome */
.pv-chrome { position: absolute; inset: 0; pointer-events: none; font: 10px var(--mono-font); letter-spacing: 0.08em; color: var(--color-ed-text); text-shadow: 0 1px 6px var(--color-scrim); }
.pv-rec { position: absolute; left: 16px; top: 12px; display: flex; align-items: center; gap: 6px; }
.pv-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-error); animation: rec 1.6s steps(1) infinite; }
@keyframes rec { 50% { opacity: 0.2; } }
.pv-tc { position: absolute; right: 16px; top: 12px; }
.pv-corner { position: absolute; width: 10px; height: 10px; border: 0 solid var(--color-ed-text); opacity: 0.55; }
.pv-corner--tl { left: 8px; top: 8px; border-width: 1px 0 0 1px; } .pv-corner--tr { right: 8px; top: 8px; border-width: 1px 1px 0 0; }
.pv-corner--bl { left: 8px; bottom: 8px; border-width: 0 0 1px 1px; } .pv-corner--br { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }
.pv-tags .tag[data-ptag="speaker"] { left: 68%; top: 18%; } .pv-tags .tag[data-ptag="key"] { left: 68%; top: 30%; }
.pv-tags .tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px; background: var(--color-ed-text); }

/* captions: four treatments, one composition */
.cap-layer { position: absolute; left: 0; right: 0; bottom: 11%; height: 64px; pointer-events: none; }
.cap { position: absolute; left: 6%; right: 6%; bottom: 0; margin: 0; text-align: center; opacity: 0; }
.cap .w { opacity: 0; transition: opacity 180ms var(--ease-standard), color 180ms var(--ease-standard); }
.cap .w.on { opacity: 1; }
.cap--minimal { font: 500 15px var(--body-font); color: var(--color-ed-text); text-shadow: 0 1px 10px var(--color-scrim); }
.cap--editorial { font: 400 11px var(--mono-font); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ed-text); padding-top: 8px; border-top: 1px solid var(--color-ed-text); left: 14%; right: 14%; }
.cap--bold { font: 700 24px/1 var(--display-font); letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-ed-text); text-shadow: 0 2px 0 var(--color-ink); }
.cap--bold .w:nth-child(4) { color: var(--color-cobalt-light); }
.cap--social { font: 600 17px/1.45 var(--display-font); }
.cap--social .w { display: inline-block; margin: 0 2px; padding: 0 7px; background: var(--color-ed-text); color: var(--color-ink); }
.cap--social .w.on:last-child { background: var(--color-cobalt); color: var(--color-primary-contrast); transform: rotate(-2deg) scale(1.05); }

/* mini color panel */
.adjust { position: absolute; right: 12px; top: 34px; width: 146px; padding: 8px 10px; background: var(--color-caption-bg); border: 1px solid var(--color-ed-line-2); opacity: 0; font: 9px var(--mono-font); letter-spacing: 0.1em; text-transform: uppercase; }
.adjust p { margin: 0 0 6px; color: var(--color-ed-muted); }
.adjust label { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px; margin-top: 5px; }
.adjust i { position: relative; height: 2px; background: var(--color-ed-line-2); }
.adjust b { position: absolute; left: calc(var(--p, 0) * 100%); top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--color-ed-text); border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .fx-pan, .fx-bob, .fx-limb, .fx-win--blink, .pv-glitch i, .broll svg, .pv-rec i { animation: none !important; }
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: var(--mono-font);
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}
:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.top-0 {
  top: 0px;
}
.z-50 {
  z-index: 50;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-11 {
  height: 2.75rem;
}
.h-14 {
  height: 3.5rem;
}
.h-6 {
  height: 1.5rem;
}
.min-h-\[1rem\] {
  min-height: 1rem;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[64px\] {
  min-height: 64px;
}
.w-11 {
  width: 2.75rem;
}
.w-6 {
  width: 1.5rem;
}
.w-full {
  width: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-prose {
  max-width: 65ch;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.border {
  border-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-border {
  border-color: var(--color-border);
}
.bg-bg {
  background-color: var(--color-bg);
}
.p-4 {
  padding: 1rem;
}
.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.font-body {
  font-family: var(--body-font);
}
.font-display {
  font-family: var(--display-font);
}
.font-mono {
  font-family: var(--mono-font);
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[clamp\(2\.25rem\2c 5vw\2c 4\.25rem\)\] {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
}
.text-\[clamp\(2rem\2c 3\.6vw\2c 3rem\)\] {
  font-size: clamp(2rem, 3.6vw, 3rem);
}
.text-\[clamp\(2rem\2c 4\.6vw\2c 3\.75rem\)\] {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-\[1\.02\] {
  line-height: 1.02;
}
.leading-\[1\.04\] {
  line-height: 1.04;
}
.leading-\[1\] {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-\[-0\.035em\] {
  letter-spacing: -0.035em;
}
.tracking-\[-0\.03em\] {
  letter-spacing: -0.03em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-accent {
  color: var(--color-accent);
}
.text-error {
  color: var(--color-error);
}
.text-muted {
  color: var(--color-muted);
}
.text-text {
  color: var(--color-text);
}
.underline {
  text-decoration-line: underline;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) {

  .sm\:w-auto {
    width: auto;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:\!px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}
@media (min-width: 768px) {

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}