/* Copyright (c) 2026 matoio.com. All rights reserved. */
/*
 * The final homepage. Layers: the three.js hall (fixed, 0), the page (1), header (50). Night is
 * the navy hall; light is "before the show": the house lights still on, warm wood and red velvet,
 * and copy sits on warm paper washes rather than white haze. Radii follow the kit: containers 20px,
 * inner 14px, controls 999px.
 */

:root {
  /* The kit's secondary inks are tuned for plain paper; over the lit hall they need more weight. */
  --mo-ink-2: #2c3253;
  --mo-ink-3: #3d4466;
  --a-wrap: min(1320px, calc(100% - 2 * var(--mo-gutter)));
  --a-scene: #b99a7b;
  --a-veil: 246 236 220;
  --a-s1: 0.86;
  --a-s2: 0.5;
  --a-card: rgb(252 246 236 / 0.9);
  --a-strip: #241a15;
  --a-strip-ink: #f5ede1;
  --a-strip-ink-2: rgb(245 237 225 / 0.7);
  --a-hole: rgb(255 236 206 / 0.9);
  --a-band: #1f1713;
  --a-cap-bg: linear-gradient(to top, rgb(20 14 10 / 0.94) 0, rgb(20 14 10 / 0.82) 34%, rgb(20 14 10 / 0.3) 72%, transparent);
  --a-tile-shadow: 0 20px 50px -24px rgb(60 30 15 / 0.6);
  --a-more-bg: #2a201b;
  --a-glow: rgb(214 120 70 / 0.35);
  --a-still-top: #c8ab8b;
  --a-still-bottom: #9c7b62;
  --a-still-glow: rgb(255 226 180 / 0.75);
  --a-seat: #8f3029;
  --a-screen-shadow: 0 0 0 1px rgb(40 20 10 / 0.18), 0 40px 90px -40px rgb(90 40 20 / 0.55);
  --a-slate: #fbf6ec;
  --a-slate-ink: #161c39;
}
:root[data-theme="dark"] {
  --a-scene: #060a1b;
  --a-veil: 8 12 32;
  --a-s1: 0.88;
  --a-s2: 0.55;
  --a-card: rgb(14 19 50 / 0.76);
  --a-strip: #03050d;
  --a-strip-ink: #f3efe8;
  --a-strip-ink-2: rgb(243 239 232 / 0.66);
  --a-hole: rgb(255 236 210 / 0.88);
  --a-band: #04061a;
  --a-cap-bg: linear-gradient(to top, rgb(6 9 26 / 0.95) 0, rgb(6 9 26 / 0.84) 34%, rgb(6 9 26 / 0.3) 72%, transparent);
  --a-tile-shadow: 0 24px 60px -26px rgb(0 0 0 / 0.8);
  --a-more-bg: #0d1230;
  --a-glow: rgb(255 214 170 / 0.32);
  --a-still-top: #0b1131;
  --a-still-bottom: #050819;
  --a-still-glow: rgb(255 214 170 / 0.16);
  --a-seat: #141c45;
  --a-screen-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 0 140px -10px rgb(255 214 170 / 0.32);
  --a-slate: #131834;
  --a-slate-ink: #eceef6;
}

html { scroll-behavior: smooth; }
.is-motion body { background: var(--a-scene); transition: background-color 600ms; }
body { overflow-x: clip; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- stage */
.stage { position: fixed; inset: 0 0 auto; height: 100lvh; z-index: 0; pointer-events: none; }
.stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1400ms var(--mo-ease); }
.stage.is-ready canvas { opacity: 1; }
.is-static .stage { display: none; }
main, .mo-footer { position: relative; z-index: 1; }
.mo-footer { background: var(--mo-bg); }

/* ---------------------------------------------------------------- shared type */
.wrap { width: var(--a-wrap); margin-inline: auto; }
.sec { position: relative; padding: clamp(96px, 15vh, 168px) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font: 500 12.5px/1 var(--mo-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mo-ink-3);
}
.eyebrow::before, .hero-eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--mo-tomato); }
.sec-title { font: 650 clamp(34px, 4.3vw, 64px)/1.06 var(--mo-font-display); letter-spacing: -0.03em; text-wrap: balance; }
:root[lang="zh"] .sec-title { font-weight: 600; line-height: 1.18; letter-spacing: 0.01em; }
:root[lang="zh"] :is(.sec-title, .hero-title, .closing-title, .frame-text h3) { word-break: keep-all; overflow-wrap: anywhere; }
.sec-sub { margin-top: 18px; max-width: 34em; color: var(--mo-ink-2); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; text-wrap: pretty; }
:root[lang="zh"] .sec-sub { max-width: 26em; line-height: 1.8; }
.sec-head { max-width: 760px; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mo-tomato); box-shadow: 0 0 0 4px rgb(235 69 52 / 0.18); animation: rec 1.6s ease-in-out infinite; flex: none; }
@keyframes rec { 50% { opacity: 0.35; } }

.rv-on .rv { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--mo-ease), transform 900ms var(--mo-ease); }
.rv-on .rv.is-in { opacity: 1; transform: none; }

/* Light theme: small text over the lit hall gets the darker ink, a little more weight, and a soft warm-paper halo. */
:root:not([data-theme="dark"]) :is(.eyebrow, .hero-eyebrow) { color: var(--mo-ink-2); font-weight: 600; }
:root:not([data-theme="dark"]) :is(.eyebrow, .hero-eyebrow, .sec-sub, .hero-sub, .local-copy, .lang-copy) {
  text-shadow: 0 0 1px rgb(var(--a-veil) / 0.9), 0 0 14px rgb(var(--a-veil) / 0.9);
}
:root:not([data-theme="dark"]) .line-chip:not([aria-pressed="true"]), :root:not([data-theme="dark"]) .lang-chip:not([aria-pressed="true"]) { background: rgb(var(--a-veil) / 0.8); color: var(--mo-ink); }

/* Section washes feather out at the section's top and bottom, so no hard edge shows while it scrolls in. */
.try::before, .how::before, .edit::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11vh, #000 calc(100% - 11vh), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 11vh, #000 calc(100% - 11vh), transparent 100%);
}

/* ---------------------------------------------------------------- pinned sections */
.pin { position: relative; height: 230vh; }
.pin-inner { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }

/* ---------------------------------------------------------------- hero: the opening shot */
.hero.pin { height: 250vh; --hero-out: 0; }
.hero-copy {
  position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; isolation: isolate;
  opacity: calc(1 - var(--hero-out)); transform: translateY(calc(var(--hero-out) * -48px));
}
.hero-copy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--a-veil) / var(--a-s1)) 0%, rgb(var(--a-veil) / var(--a-s2)) 30%, rgb(var(--a-veil) / 0) 54%),
    linear-gradient(0deg, rgb(var(--a-veil) / 0.5) 0%, rgb(var(--a-veil) / 0) 9%);
}
.hero-inner { align-self: center; padding-top: calc(var(--mo-nav-h) + 4vh); display: grid; justify-items: start; gap: 26px; }
.hero-eyebrow { font: 500 13px/1 var(--mo-font-mono); letter-spacing: 0.08em; color: var(--mo-ink-3); display: inline-flex; align-items: center; gap: 12px; }
.hero-title { font: 650 clamp(50px, 6.2vw, 104px)/1.0 var(--mo-font-display); letter-spacing: -0.04em; max-width: 9.5em; }
:root[lang="zh"] .hero-title { font-weight: 600; font-size: clamp(52px, 6.6vw, 112px); line-height: 1.1; letter-spacing: 0.01em; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-title .ln > span { display: inline-block; }
.rv-on .hero-title .ln > span { animation: rise 1200ms var(--mo-ease) var(--d, 0s) both; }
@keyframes rise { from { transform: translateY(108%); } }
.hero-sub { max-width: 28em; color: var(--mo-ink-2); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; text-wrap: pretty; }
:root[lang="zh"] .hero-sub { max-width: 22em; line-height: 1.8; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cta-row .mo-btn-ghost { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgb(var(--a-veil) / 0.35); }
.cta-row .mo-btn-ghost svg { width: 15px; height: 15px; }
.hero-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 0 28px; }
.now-pill { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--mo-line); background: rgb(var(--a-veil) / 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 12px/1 var(--mo-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mo-ink-2); }
.hero-scroll { width: 22px; height: 36px; border-radius: 999px; border: 1.5px solid var(--mo-line-strong); display: grid; justify-items: center; padding-top: 7px; }
.hero-scroll span { width: 3px; height: 7px; border-radius: 3px; background: var(--mo-ink-2); animation: scrollcue 1.8s var(--mo-ease) infinite; }
@keyframes scrollcue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/*
 * Still hero (no WebGL or reduced motion): a framed screen, seat silhouettes, and the wordmark's tomato o
 * whose oval hole is the lit lens. --glyph is the o's width; the hole (kit/tomato.js HOLE) is 41.3% of it,
 * centred, with its centre 47.6% of the width above the glyph's bottom, and sits on the beam's narrow end.
 */
.hero-still { display: none; --beam-r: max(var(--mo-gutter), 5vw); --beam-w: min(46vw, 780px); --beam-b: 14vh; --glyph: 84px; }
.is-static .hero-still { display: block; position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.still-hall { position: absolute; inset: 0; background: radial-gradient(60% 55% at 70% 32%, var(--a-still-glow), transparent 72%), linear-gradient(180deg, var(--a-still-top), var(--a-still-bottom)); }
.still-screen {
  position: absolute; z-index: 2; right: var(--beam-r); top: calc(var(--mo-nav-h) + 7vh); width: var(--beam-w); aspect-ratio: 16 / 9;
  border-radius: 4px; overflow: hidden; background: #05070f; box-shadow: 0 0 0 12px #03050d, var(--a-screen-shadow);
}
.still-screen img, .still-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still-screen video { opacity: 0; transition: opacity 600ms; }
.still-screen video.is-live { opacity: 1; }
/* The beam lies over the glyph so it visibly leaves the hole, fainter where it crosses the glyph's ring top and crown; the screen lies over the beam. */
.still-beam {
  position: absolute; z-index: 1; right: var(--beam-r); top: calc(var(--mo-nav-h) + 7vh); width: var(--beam-w); bottom: var(--beam-b); filter: blur(12px); mix-blend-mode: screen; opacity: 0.8;
  -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / 0.5) calc(var(--glyph) * 0.6), #000 calc(var(--glyph) * 2.6));
  mask-image: linear-gradient(0deg, rgb(0 0 0 / 0.5) calc(var(--glyph) * 0.6), #000 calc(var(--glyph) * 2.6));
}
.still-beam i {
  position: absolute; inset: 0; clip-path: polygon(-2% 0, 102% 0, calc(50% + var(--glyph) * 0.19) 100%, calc(50% - var(--glyph) * 0.19) 100%);
  background: linear-gradient(0deg, rgb(255 232 200 / 0.9), rgb(255 226 190 / 0.28) 55%, rgb(255 226 190 / 0.06));
}
.still-seats {
  position: absolute; inset: auto 0 0; height: 24vh;
  background:
    radial-gradient(22px 26px at 50% 100%, var(--a-seat) 96%, transparent 100%) 0 100% / 46px 40px repeat-x,
    radial-gradient(18px 22px at 50% 100%, var(--a-seat) 96%, transparent 100%) 12px calc(100% - 40px) / 38px 34px repeat-x,
    radial-gradient(15px 18px at 50% 100%, var(--a-seat) 96%, transparent 100%) 4px calc(100% - 74px) / 32px 28px repeat-x;
  opacity: 0.95;
}
.still-tomato { position: absolute; width: var(--glyph); right: calc(var(--beam-r) + var(--beam-w) / 2 - var(--glyph) / 2); bottom: calc(var(--beam-b) - var(--glyph) * 0.4755); filter: drop-shadow(0 0 26px rgb(255 214 170 / 0.5)); }
.still-tomato::before {
  content: ""; position: absolute; left: 29.4%; top: 49.3%; width: 41.3%; height: 29.9%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff4dc, #ffcf8e 55%, #ff9e5c 88%, #f0703e); box-shadow: 0 0 18px 4px rgb(255 200 140 / 0.6);
}
.still-tomato svg { position: relative; display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------- try a line */
.try { min-height: 100svh; display: grid; align-items: center; isolation: isolate; padding: calc(var(--mo-nav-h) + 48px) 0 72px; }
.try::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--a-veil) / var(--a-s1)) 0%, rgb(var(--a-veil) / var(--a-s2)) 34%, rgb(var(--a-veil) / 0) 54%);
}
.try-grid { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.is-motion .try-screen { display: none; }
.script {
  position: relative; margin-top: 30px; padding: 16px 20px 16px; max-width: 580px; border-radius: var(--mo-r-box);
  background: var(--a-card); border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
.script-head { display: flex; align-items: center; gap: 14px; }
.script-holes { flex: 1; height: 8px; background: radial-gradient(circle, var(--mo-line-strong) 1.6px, transparent 2.2px) 0 50% / 13px 8px repeat-x; }
.script-send { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mo-accent); color: var(--mo-on-accent); transition: transform 400ms var(--mo-ease); }
.script-send svg { width: 17px; height: 17px; }
.script.is-typing .script-send { transform: scale(0.9); opacity: 0.7; }
.script-line { margin: 14px 0 16px; min-height: 2.7em; font: 600 clamp(21px, 1.9vw, 27px)/1.35 var(--mo-font-display); letter-spacing: -0.012em; }
:root[lang="zh"] .script-line { letter-spacing: 0.02em; line-height: 1.5; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin: 0 2px -0.16em; background: var(--mo-tomato); animation: caret 1s steps(1) infinite; }
.script.is-typing .caret { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.script-ph { color: var(--mo-ink-3); font-weight: 500; }
.script.has-text .script-ph { display: none; }
.script-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding-top: 14px; border-top: 1px dashed var(--mo-line-strong); font-size: 14px; }
.now-tag { display: inline-flex; align-items: center; gap: 8px; align-self: center; font: 600 11.5px/1 var(--mo-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mo-accent); }
.now-film { font: 600 16px/1.3 var(--mo-font-display); color: var(--mo-ink); }
.now-style { color: var(--mo-ink-3); }
.line-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; max-width: 620px; }
.line-chip { max-width: 100%; min-height: 36px; padding: 0 15px; font-size: 13.5px; background: rgb(var(--a-veil) / 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.line-chip[aria-pressed="true"] { background: var(--mo-ink); color: var(--mo-bg); border-color: var(--mo-ink); }
.line-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* HTML screen (narrow and static): poster, clip, and a CSS film leader for the cut. */
.screen-box { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #05070f; box-shadow: 0 0 0 8px #03050d, var(--a-screen-shadow); }
.screen-box img, .screen-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen-box img:not([src]) { visibility: hidden; }
.screen-box video { opacity: 0; transition: opacity 120ms; }
.screen-box.is-live video { opacity: 1; }
.leader { position: absolute; inset: 0; display: none; place-items: center; background: radial-gradient(circle, #b5aea2 0%, #8d877c 55%, #5b564e 100%); overflow: hidden; }
.leader::before, .leader::after { content: ""; position: absolute; background: rgb(250 246 236 / 0.75); }
.leader::before { inset: 50% 0 auto; height: 1px; }
.leader::after { inset: 0 auto 0 50%; width: 1px; }
.screen-box.is-leader .leader { display: grid; animation: flicker 120ms steps(2) infinite; }
.leader-sweep { position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(rgb(22 20 18 / 0.35) var(--lsweep), transparent 0); animation: lsweep 320ms linear infinite; }
.leader-n { position: relative; width: 38%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 3px rgb(250 246 236 / 0.9), 0 0 0 10px transparent, 0 0 0 12px rgb(250 246 236 / 0.6); display: grid; place-items: center; font-size: clamp(40px, 9vw, 96px); color: #16130f; }
.leader-n b { grid-area: 1 / 1; font-weight: 400; opacity: 0; }
.is-leader .leader-n b { animation: lnum 960ms steps(1) both; }
.is-leader .leader-n b:nth-child(2) { animation-name: lnum2; }
.is-leader .leader-n b:nth-child(3) { animation-name: lnum3; }
@property --lsweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes lsweep { to { --lsweep: 360deg; } }
@keyframes lnum { 0% { opacity: 1; } 33% { opacity: 0; } }
@keyframes lnum2 { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } }
@keyframes lnum3 { 0% { opacity: 0; } 66% { opacity: 1; } }
@keyframes flicker { 50% { filter: brightness(1.12); } }
.screen-sub { position: absolute; inset: auto 6% 6.5%; text-align: center; color: #fbf7ee; font: 600 clamp(14px, 1.8vw, 22px)/1.25 var(--mo-font-ui); text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 14px rgb(0 0 0 / 0.6); }
.screen-sub:empty { display: none; }

/* ---------------------------------------------------------------- styles: into the screen, a wall, a strip, the projector */
/* 300vh of scroll for the whole sequence (timing in main.js SEQ); the same on phones. */
.styles.pin { height: 400vh; }
.styles-head .sec-title { max-width: 11em; }
.styles-head { position: relative; z-index: 2; padding-top: calc(var(--mo-nav-h) + 9vh); opacity: var(--head-k, 1); transform: translateY(calc((1 - var(--head-k, 1)) * -40px)); }
.is-motion .styles-head::before {
  content: ""; position: absolute; inset: -40px -60px -60px calc(-1 * var(--mo-gutter)); z-index: -1; pointer-events: none;
  background: radial-gradient(70% 80% at 20% 40%, rgb(var(--a-veil) / 0.8), rgb(var(--a-veil) / 0) 75%);
}
:root:not([data-theme="dark"]).is-motion .styles-head::before {
  inset: -80px -140px -90px calc(-1 * var(--mo-gutter));
  background: radial-gradient(75% 85% at 25% 45%, rgb(var(--a-veil) / 0.94), rgb(var(--a-veil) / 0.7) 50%, rgb(var(--a-veil) / 0) 80%);
}
.mosaic { position: absolute; inset: 0; z-index: 1; pointer-events: none; --cap: 0; visibility: hidden; will-change: transform, opacity; }
.is-static .mosaic { display: none; }
.film-band {
  position: absolute; left: -2px; right: -2px; top: 0; height: 0; opacity: 0;
  background: var(--a-band); box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.6);
}
.film-band::before, .film-band::after, .reel::before, .reel::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; background-position-x: var(--band-x, 0);
  background-image: repeating-linear-gradient(90deg, transparent 0 14px, var(--a-hole) 14px 30px, transparent 30px 44px);
  -webkit-mask: linear-gradient(transparent 0 2px, #000 2px 10px, transparent 10px); mask: linear-gradient(transparent 0 2px, #000 2px 10px, transparent 10px);
}
.film-band::before, .reel::before { top: 10px; }
.film-band::after, .reel::after { bottom: 10px; }
/* Tiles as in draft C (c/style.css .mtile). */
.mtile {
  position: absolute; left: 0; top: 0; width: 160px; height: 90px; border-radius: 14px; overflow: hidden; opacity: 0;
  background: var(--mo-bg-2); box-shadow: var(--a-tile-shadow); will-change: transform, width, height, opacity; contain: layout paint;
}
.mtile img, .mtile video, .reel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile img:not([src]) { visibility: hidden; }
.mtile video { opacity: 0; transition: opacity 500ms; }
.mtile video.is-on { opacity: 1; }
.mtile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); pointer-events: none; }
.mt-cap {
  position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 4px; padding: 34px 16px 14px; color: #fff;
  background: var(--a-cap-bg); opacity: var(--cap, 1); transform: translateY(calc((1 - var(--cap, 1)) * 12px));
}
.mt-cap b { font: 600 clamp(15px, 1.25vw, 20px)/1.15 var(--mo-font-display); letter-spacing: -0.01em; }
.mt-cap > span { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; opacity: 0.84; }
.mt-cap .mo-num { font-size: 13px; }
.mt-more, .reel-more { display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--a-more-bg); color: #f5ede1; }
.mt-more { box-shadow: inset 0 0 0 1.5px rgb(255 236 206 / 0.3), var(--a-tile-shadow); }
.more-mark { position: relative; width: clamp(34px, 3.4vw, 52px); }
.more-tomato svg { display: block; width: 100%; height: auto; }
.more-plus { position: absolute; right: -14px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; background: #f5ede1; box-shadow: 0 0 0 2px var(--a-more-bg); }
.more-plus::before, .more-plus::after { content: ""; position: absolute; inset: 9px 5px; background: var(--a-more-bg); border-radius: 2px; }
.more-plus::after { inset: 5px 9px; }
.more-text { font: 600 clamp(17px, 1.5vw, 24px)/1.2 var(--mo-font-display); letter-spacing: -0.01em; }

/* The strip as plain content (static version; read by assistive technology in the motion version). */
.reel { position: relative; margin: 44px 0 0; padding: 30px 0; background: var(--a-band); }
.is-motion .reel { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
.reel-list { list-style: none; margin: 0; padding: 0 var(--mo-gutter); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--mo-gutter); scrollbar-width: thin; }
.reel-frame { position: relative; flex: none; width: min(420px, 74vw); aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; scroll-snap-align: start; background: #0b0f22; }
.reel-media { position: absolute; inset: 0; }

/* ---------------------------------------------------------------- how: film-leader frames */
.how { isolation: isolate; }
.how::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 70% at 30% 50%, rgb(var(--a-veil) / var(--a-s1)), rgb(var(--a-veil) / 0.2) 80%); }
.strip {
  --hole: 12px;
  position: relative; list-style: none; margin: 52px 0 0; padding: calc(var(--hole) + 22px) 14px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  background: var(--a-strip); color: var(--a-strip-ink); border-radius: 10px;
  box-shadow: 0 50px 100px -50px rgb(0 0 0 / 0.75);
}
.strip::before, .strip::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: var(--hole); background: var(--a-hole);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='7' y='0' width='14' height='12' rx='3'/%3E%3C/svg%3E") 0 0 / 28px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='7' y='0' width='14' height='12' rx='3'/%3E%3C/svg%3E") 0 0 / 28px 12px repeat-x;
}
.strip::before { top: 11px; }
.strip::after { bottom: 11px; }
.frame {
  position: relative; display: grid; align-content: start; gap: 26px; min-height: 330px; padding: 26px 24px 28px; border-radius: 8px;
  background: linear-gradient(165deg, rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.02) 60%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.frame:nth-child(1) { --k: 0; }
.frame:nth-child(2) { --k: 1; }
.frame:nth-child(3) { --k: 2; }
.frame:nth-child(4) { --k: 3; }
.dial {
  position: relative; width: 116px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgb(250 246 236 / 0.8), inset 0 0 0 13px transparent, inset 0 0 0 14.5px rgb(250 246 236 / 0.3);
  background:
    linear-gradient(rgb(250 246 236 / 0.24), rgb(250 246 236 / 0.24)) center / 100% 1px no-repeat,
    linear-gradient(rgb(250 246 236 / 0.24), rgb(250 246 236 / 0.24)) center / 1px 100% no-repeat;
}
.dial-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgb(235 69 52 / 0.5) var(--sweep), transparent 0); }
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.is-running .dial-sweep { animation: sweep 1300ms cubic-bezier(0.5, 0, 0.3, 1) both; animation-delay: calc(var(--k) * 260ms + 200ms); }
@keyframes sweep { 0% { --sweep: 0deg; opacity: 1; } 80% { --sweep: 360deg; opacity: 1; } 100% { --sweep: 360deg; opacity: 0; } }
.dial-n { position: relative; font-size: 58px; line-height: 1; color: var(--a-strip-ink); }
.frame-text h3 { font: 600 21px/1.3 var(--mo-font-display); letter-spacing: -0.01em; }
:root[lang="zh"] .frame-text h3 { letter-spacing: 0.02em; }
.frame-text p { margin-top: 10px; color: var(--a-strip-ink-2); font-size: 15px; line-height: 1.65; }

/* ---------------------------------------------------------------- editing demo */
.edit { isolation: isolate; }
.edit::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--a-veil) / var(--a-s1)) 0%, rgb(var(--a-veil) / var(--a-s2)) 34%, rgb(var(--a-veil) / 0.2) 62%, rgb(var(--a-veil) / 0.4) 100%); }
.edit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.player { padding: 14px; border-radius: var(--mo-r-box); background: var(--mo-surface-solid); border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow); }
.player-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 12px; }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: rgb(235 69 52 / 0.12); color: var(--mo-accent); font: 600 13px/1 var(--mo-font-ui); }
.tool svg { width: 18px; height: 18px; }
.tc { font-size: 13px; color: var(--mo-ink-3); }
.player-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; container-type: inline-size; }
.player-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.paused { position: absolute; left: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(8 10 22 / 0.6); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.paused svg { width: 16px; height: 16px; }
.annot { position: absolute; inset: 0; }
.annot-box {
  position: absolute; left: 38.6%; top: 30.5%; width: 25%; height: 31%; border: 2px solid var(--mo-tomato); border-radius: 6px;
  box-shadow: 0 0 0 100vmax rgb(8 10 22 / 0.32);
}
.annot-box i { position: absolute; width: 9px; height: 9px; border-radius: 2px; background: #fff; border: 2px solid var(--mo-tomato); }
.annot-box i:nth-child(1) { left: -6px; top: -6px; }
.annot-box i:nth-child(2) { right: -6px; top: -6px; }
.annot-box i:nth-child(3) { left: -6px; bottom: -6px; }
.annot-box i:nth-child(4) { right: -6px; bottom: -6px; }
.annot-cursor { position: absolute; right: -16px; bottom: -20px; width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.4)); opacity: 0; }
.annot-note {
  position: absolute; left: 66%; top: 33%; width: 31%; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px;
  background: #fffdf8; color: #161c39; font-size: clamp(11.5px, 2.1cqi, 14px); line-height: 1.45; box-shadow: 0 16px 34px -14px rgb(0 0 0 / 0.55);
}
.annot-note .pin-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--mo-tomato); color: #fff; font-size: 11px; margin-top: 1px; }
.rv-on .player .annot-box { width: 0; height: 0; box-shadow: 0 0 0 100vmax rgb(8 10 22 / 0); }
.rv-on .player .annot-box i, .rv-on .player .annot-note, .rv-on .player .scrub-mark { opacity: 0; }
.rv-on .player.is-drawing .annot-box { animation: drawBox 1300ms cubic-bezier(0.6, 0.05, 0.25, 1) 500ms forwards, dimOut 700ms ease 1800ms forwards; }
.rv-on .player.is-drawing .annot-cursor { animation: cursor 2000ms ease 300ms both; }
.rv-on .player.is-drawing .annot-box i { animation: pop 300ms var(--mo-ease) 1800ms forwards; }
.rv-on .player.is-drawing .annot-note { animation: note 600ms var(--mo-ease) 2050ms forwards; }
.rv-on .player.is-drawing .scrub-mark { animation: pop 400ms var(--mo-ease) 2400ms forwards; }
@keyframes drawBox { to { width: 25%; height: 31%; } }
@keyframes dimOut { to { box-shadow: 0 0 0 100vmax rgb(8 10 22 / 0.32); } }
@keyframes cursor { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes note { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.scrub { position: relative; height: 4px; margin: 18px 4px 16px; border-radius: 999px; background: var(--mo-line); }
.scrub-fill { position: absolute; inset: 0 auto 0 0; width: 36%; border-radius: inherit; background: var(--mo-ink-2); }
.scrub-head { position: absolute; left: 36%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mo-ink); box-shadow: 0 0 0 4px rgb(var(--a-veil) / 0.6); }
.scrub-mark { position: absolute; left: 36%; bottom: 12px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50% 50% 50% 4px; transform-origin: 50% 100%; display: grid; place-items: center; background: var(--mo-tomato); color: #fff; font-size: 11px; rotate: -45deg; }
.tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 2px 0; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.quick .mo-chip { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.send { margin-left: auto; }

/* ---------------------------------------------------------------- batch */
.local.pin { height: 190vh; }
.langs.pin { height: 190vh; }
.batch .pin-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--a-veil) / var(--a-s1)) 0%, rgb(var(--a-veil) / var(--a-s2)) 32%, rgb(var(--a-veil) / 0) 52%); }
.batch-grid { height: 100%; display: grid; align-content: space-between; padding: calc(var(--mo-nav-h) + 7vh) 0 7vh; }
.batch-copy { max-width: 520px; }
.queue {
  list-style: none; margin: 0; padding: 8px 10px; width: min(470px, 100%); border-radius: var(--mo-r-box);
  background: var(--a-card); border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.queue li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 14px; padding: 7px 8px; font-size: 13.5px; }
.queue li + li { border-top: 1px solid var(--mo-line); }
.q-glyph { position: relative; width: 20px; aspect-ratio: 286 / 381; }
.q-glyph > span { position: absolute; inset: 0; }
.q-glyph svg { display: block; width: 100%; height: 100%; }
.q-ghost path { fill: var(--mo-line-strong); }
.q-fill { clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
.is-static .q-fill { transition: clip-path 1000ms var(--mo-ease) calc(var(--i) * 140ms); }
.q-line { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mo-ink-3); transition: color 300ms; }
.is-done .q-line { color: var(--mo-ink); }
.batch-still { display: none; }

/* ---------------------------------------------------------------- your films */
.local .pin-inner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--a-veil) / var(--a-s1)) 0%, rgb(var(--a-veil) / var(--a-s2)) 26%, rgb(var(--a-veil) / 0) 46%, rgb(var(--a-veil) / 0) 64%, rgb(var(--a-veil) / 0.35) 100%); }
/* Copy, a column kept free for the o (the camera aims the o's hole at its centre), and the file list. */
.local-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 460px) minmax(150px, 1fr) minmax(0, 430px); align-items: center; gap: clamp(24px, 4vw, 72px); padding-top: var(--mo-nav-h); }
.local-copy { max-width: 480px; }
.local-focus { align-self: stretch; }
.drive { justify-self: end; width: 100%; max-width: 430px; }
.drive-screen { padding: 14px 14px 10px; border-radius: 18px 18px 8px 8px; background: var(--mo-surface-solid); border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow); }
.drive-bar { display: flex; align-items: center; gap: 10px; padding: 2px 6px 12px; border-bottom: 1px solid var(--mo-line); color: var(--mo-ink); font: 600 14px/1 var(--mo-font-ui); }
.drive-bar svg { width: 20px; height: 20px; color: var(--mo-ink-2); }
.drive-bar .drive-lock { margin-left: auto; color: var(--mo-leaf-ink); }
.drive-files { list-style: none; margin: 0; padding: 4px 0 0; }
.file { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 6px; font-size: 14px; }
.file + .file { border-top: 1px solid var(--mo-line); }
.file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-meta { font-size: 12.5px; color: var(--mo-ink-3); }
.file-icon { position: relative; width: 22px; height: 27px; border-radius: 4px 9px 4px 4px; background: rgb(235 69 52 / 0.16); box-shadow: inset 0 0 0 1.5px rgb(235 69 52 / 0.55); }
.file-mp4 .file-icon::after { content: ""; position: absolute; left: 8px; top: 9px; border: 5px solid transparent; border-left: 7px solid var(--mo-tomato); border-right: 0; }
.file-srt .file-icon { background: rgb(0 154 123 / 0.14); box-shadow: inset 0 0 0 1.5px rgb(0 154 123 / 0.55); }
.file-srt .file-icon::after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 2px; border-radius: 2px; background: var(--mo-leaf); box-shadow: 0 4px 0 var(--mo-leaf), 0 8px 0 var(--mo-leaf); }
.drive-base { height: 14px; margin: 0 -26px; border-radius: 2px 2px 16px 16px; background: linear-gradient(180deg, var(--mo-line-strong), var(--mo-line)); box-shadow: var(--mo-shadow); }
.drive-base::before { content: ""; display: block; width: 18%; height: 5px; margin: 0 auto; border-radius: 0 0 6px 6px; background: var(--mo-line-strong); }

/* ---------------------------------------------------------------- languages */
/* The wash stays below the screen's subtitle line, so the line is never covered. */
.langs .pin-inner::before { content: ""; position: absolute; inset: auto 0 0; height: 36%; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgb(var(--a-veil) / 0.9) 0%, rgb(var(--a-veil) / 0.82) 60%, rgb(var(--a-veil) / 0) 100%); }
.lang-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px; padding-bottom: 8vh; }
.lang-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.lang-chip {
  appearance: none; cursor: pointer; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--mo-line-strong); background: rgb(var(--a-veil) / 0.4);
  color: var(--mo-ink-2); font: 500 15px/1.2 var(--mo-font-ui); transition: color 300ms, background-color 300ms, border-color 300ms, transform 400ms var(--mo-ease);
}
.lang-chip:hover { border-color: var(--mo-ink-3); color: var(--mo-ink); }
.lang-chip[aria-pressed="true"] { color: var(--mo-bg); background: var(--mo-ink); border-color: var(--mo-ink); transform: translateY(-2px); }
.lang-chip:focus-visible { outline: 2px solid var(--mo-focus); outline-offset: 3px; }
.lang-still { display: none; }

/* ---------------------------------------------------------------- closing slate */
.closing { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 0 0 11vh; isolation: isolate; }
.closing::before { content: ""; position: absolute; inset: auto 0 0; height: 55%; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgb(var(--a-veil) / 0.78), rgb(var(--a-veil) / 0)); }
.slate {
  --mo-ink: var(--a-slate-ink);
  position: relative; max-width: 700px; border-radius: 24px; overflow: hidden; color: var(--mo-ink);
  background: var(--a-slate); border: 1px solid var(--mo-line); box-shadow: var(--mo-shadow), 0 0 120px -30px var(--a-glow);
}
.slate-top { position: relative; display: block; height: 58px; }
.slate-base, .slate-arm { position: absolute; left: 0; right: 0; height: 29px; background: repeating-linear-gradient(-58deg, var(--a-slate-ink) 0 24px, var(--a-slate) 24px 48px); }
.slate-base { bottom: 0; border-bottom: 1px solid var(--mo-line); }
.slate-arm { top: 0; transform-origin: 0 100%; }
.slate.is-clap .slate-arm { animation: clap 1.1s var(--mo-ease) 1; }
@keyframes clap { 0% { transform: rotate(0); } 25% { transform: rotate(-11deg); } 55% { transform: rotate(-11deg); } 66% { transform: rotate(0); } 72% { transform: rotate(-1.5deg); } 80% { transform: rotate(0); } }
.slate-body { display: grid; gap: 22px; justify-items: start; padding: 34px clamp(24px, 4vw, 44px) 32px; }
.slate-kicker { display: flex; align-items: center; gap: 12px; font: 500 13px/1 var(--mo-font-mono); letter-spacing: 0.08em; color: var(--mo-ink-3); }
.slate-tomato { width: 20px; }
.slate-tomato svg { display: block; width: 100%; height: auto; }
.closing-title { font: 650 clamp(32px, 3.7vw, 56px)/1.08 var(--mo-font-display); letter-spacing: -0.03em; text-wrap: balance; }
:root[lang="zh"] .closing-title { font-weight: 600; line-height: 1.24; letter-spacing: 0.01em; }
.slate .cta-row { margin-top: 0; }
.slate .mo-btn-ghost { background: transparent; }
.slate-foot { display: grid; gap: 4px; padding-top: 18px; width: 100%; border-top: 1px dashed var(--mo-line-strong); }
.slate-platforms { font: 600 13px/1.4 var(--mo-font-mono); letter-spacing: 0.08em; color: var(--mo-ink-2); }
.slate-members { font-size: 13.5px; color: var(--mo-ink-3); }

/* ---------------------------------------------------------------- static version */
.is-static .pin { height: auto; }
.is-static .pin-inner { position: relative; height: auto; overflow: visible; }
.is-static .hero-copy { min-height: max(100svh, 640px); }
.is-static .styles-head { padding-top: clamp(96px, 15vh, 168px); }
.is-static .styles .pin-inner { padding-bottom: clamp(80px, 12vh, 140px); }
.is-static .batch-grid, .is-static .local-grid, .is-static .lang-grid { height: auto; padding: clamp(96px, 14vh, 160px) 0; }
.is-static .batch-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 48px; }
.is-static .batch-still {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; width: var(--a-wrap); margin: -40px auto 0; padding-bottom: clamp(80px, 12vh, 140px);
  perspective: 900px;
}
.is-static .batch-still span { aspect-ratio: 16 / 9; border-radius: 6px; background: center / cover no-repeat; box-shadow: 0 0 0 1px var(--mo-line), 0 10px 30px -14px var(--a-glow); opacity: 0.95; transform: rotateX(18deg); }
.is-static .langs .pin-inner::before { display: none; }
.is-static .lang-still { display: block; width: min(860px, var(--a-wrap)); margin: clamp(96px, 14vh, 160px) auto 0; }
.is-static .lang-grid { padding-top: 48px; }
.is-static .closing { padding-top: 12vh; }
.is-static .try::before, .is-static .batch .pin-inner::before, .is-static .local .pin-inner::before { opacity: 0; }
.is-static main { background: radial-gradient(70% 40% at 50% 0%, var(--a-still-glow), transparent 70%); }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1100px) {
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sec { padding: 96px 0; }
  .hero-copy::before { background: linear-gradient(180deg, rgb(var(--a-veil) / 0.9) 0%, rgb(var(--a-veil) / 0.7) 36%, rgb(var(--a-veil) / 0) 52%), linear-gradient(0deg, rgb(var(--a-veil) / 0.5) 0%, rgb(var(--a-veil) / 0) 8%); }
  .hero-inner { align-self: start; padding-top: calc(var(--mo-nav-h) + 26px); gap: 18px; }
  .hero-title { font-size: clamp(42px, 12vw, 64px); }
  :root[lang="zh"] .hero-title { font-size: clamp(46px, 13.4vw, 72px); }
  .cta-row .mo-btn-lg { min-height: 50px; padding: 0 22px; font-size: 15px; }
  .try::before { background: linear-gradient(180deg, rgb(var(--a-veil) / 0.85), rgb(var(--a-veil) / 0.92)); }
  .try-grid { grid-template-columns: minmax(0, 1fr); }
  .is-motion .try-screen { display: block; }
  .try-screen { order: 2; }
  .line-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--mo-gutter)); padding: 2px var(--mo-gutter) 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .line-chips::-webkit-scrollbar { display: none; }
  .line-chip { flex: none; max-width: 82vw; scroll-snap-align: start; }
  .styles-head { padding-top: calc(var(--mo-nav-h) + 28px); }
  .mt-cap { padding: 26px 12px 10px; }
  .mt-cap b { font-size: 15px; }
  .mt-cap > span { font-size: 12px; }
  .strip { grid-template-columns: minmax(0, 1fr); padding: 14px calc(var(--hole) + 22px); }
  .strip::before, .strip::after {
    inset: 10px auto 10px auto; width: var(--hole); height: auto;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='28'%3E%3Crect x='0' y='7' width='12' height='14' rx='3'/%3E%3C/svg%3E") 0 0 / 12px 28px repeat-y;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='28'%3E%3Crect x='0' y='7' width='12' height='14' rx='3'/%3E%3C/svg%3E") 0 0 / 12px 28px repeat-y;
  }
  .strip::before { left: 11px; }
  .strip::after { right: 11px; }
  .frame { min-height: 0; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 18px; }
  .dial { width: 84px; }
  .dial-n { font-size: 42px; }
  .edit-grid { grid-template-columns: minmax(0, 1fr); }
  .annot-note { left: 16%; top: 66%; width: 68%; }
  .send { width: 100%; }
  .batch .pin-inner::before { background: linear-gradient(180deg, rgb(var(--a-veil) / 0.9) 0%, rgb(var(--a-veil) / 0.4) 40%, rgb(var(--a-veil) / 0.2) 60%, rgb(var(--a-veil) / 0.85) 100%); }
  .batch-grid { padding: calc(var(--mo-nav-h) + 24px) 0 28px; }
  .queue li:nth-child(n + 5) { display: none; }
  .local .pin-inner::before { background: linear-gradient(180deg, rgb(var(--a-veil) / 0.9) 0%, rgb(var(--a-veil) / 0.55) 34%, rgb(var(--a-veil) / 0) 50%, rgb(var(--a-veil) / 0) 62%, rgb(var(--a-veil) / 0.85) 100%); }
  .local-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(120px, 1fr) auto; align-content: stretch; gap: 12px; padding: calc(var(--mo-nav-h) + 24px) 0 28px; }
  .drive { justify-self: stretch; padding: 0 12px; }
  .drive .file:nth-child(n + 5) { display: none; }
  .lang-grid { grid-template-columns: minmax(0, 1fr); align-content: end; gap: 24px; }
  .langs .pin-inner::before { height: 46%; }
  .lang-list { justify-content: flex-start; }
  .lang-chip { padding: 7px 14px; font-size: 14px; }
  .slate-body { gap: 18px; }
  .slate .cta-row .mo-btn { flex: 1 1 auto; }
  .is-static .batch-grid { grid-template-columns: minmax(0, 1fr); }
  .is-static .batch-still { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
  .is-static .hero .pin-inner { display: grid; grid-template-rows: auto auto auto; }
  .is-static .hero-copy { display: contents; }
  .is-static .hero-inner { grid-row: 1; }
  .is-static .hero-still { position: relative; grid-row: 2; z-index: 0; height: calc((100vw - 2 * var(--mo-gutter)) * 0.5625 + 150px); margin-top: 28px; }
  .is-static .hero-foot { grid-row: 3; padding-top: 16px; }
  .still-screen, .still-beam { right: var(--mo-gutter); left: var(--mo-gutter); width: auto; }
  .still-screen { top: 8px; box-shadow: 0 0 0 6px #03050d, var(--a-screen-shadow); }
  .hero-still { --beam-b: 54px; --glyph: 58px; }
  .still-beam { top: 8px; }
  .still-tomato { right: calc(50% - var(--glyph) / 2); }
  .still-seats { height: 70px; }
}
@media (max-width: 520px) {
  .mo-header { gap: 12px; }
  .mo-header .mo-tools { gap: 8px; }
  .mo-header .mo-btn { padding: 0 12px; }
  .mo-header .mo-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 820px) and (max-height: 700px) {
  .queue { display: none; }
}
@media (min-width: 821px) and (max-height: 760px) {
  .try { padding: calc(var(--mo-nav-h) + 24px) 0 48px; }
  .script { margin-top: 20px; }
  .line-chips { margin-top: 14px; }
  .queue li { padding: 5px 8px; }
}