/* video-kit: base styling of videos — fonts, default tokens, the frame, scenes, chapter labels,
 * progress bar, subtitles and the player. Frame 1920×1080, vertical — 1080×1920 (#stage.v),
 * captions in the frame — #stage.cc. The palette and scene layout come from the project (scenes.css next to film.js):
 * it is loaded after this file and overrides the :root tokens.
 * Fonts: Source Serif 4 (Serif), Golos Text (Sans), JetBrains Mono (Mono) — OFL, see fonts/. */
@font-face { font-family: Serif; font-weight: 400; src: url(../fonts/serif-400-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Serif; font-weight: 400; src: url(../fonts/serif-400-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2248; }
@font-face { font-family: Serif; font-weight: 400; font-style: italic; src: url(../fonts/serif-400i-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Serif; font-weight: 400; font-style: italic; src: url(../fonts/serif-400i-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2248; }
@font-face { font-family: Serif; font-weight: 600; src: url(../fonts/serif-600-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Serif; font-weight: 600; src: url(../fonts/serif-600-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212, U+2248; }
@font-face { font-family: Sans; font-weight: 400; src: url(../fonts/golos-400-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Sans; font-weight: 400; src: url(../fonts/golos-400-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: Sans; font-weight: 600; src: url(../fonts/golos-600-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Sans; font-weight: 600; src: url(../fonts/golos-600-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: Sans; font-weight: 700; src: url(../fonts/golos-700-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Sans; font-weight: 700; src: url(../fonts/golos-700-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }
@font-face { font-family: Mono; font-weight: 400; src: url(../fonts/mono-400-cyr.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Mono; font-weight: 400; src: url(../fonts/mono-400-lat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-21FF, U+2212; }

:root {
  --bg: #EDEFF3; --paper: #F8F9FB; --mist: #DCE2EC; --line: #D8DEE8; --haze: #D3E1F0;
  --ink: #0F1A2E; --ink2: #2C3A55; --muted: #56627A; --cloud: #9AA4B6;
  --accent: #3346E8; --accent-d: #2433B8; --accent-soft: #DDE1FF; --steel: #8FA3CC; --civic: #0B7A6A; --sky: #5BB6E0;
  --accent-on-dark: #8E9AFF; /* accent on a dark blue background (contrast) */
}
* { box-sizing: border-box; }

/* ================================================================ frame */
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: clip;
  background: var(--bg); transform-origin: 0 0; font-family: Sans, sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#bg { position: absolute; inset: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(2px); }
.b1 { width: 900px; height: 900px; background: var(--mist); opacity: .45; }
.b2 { width: 620px; height: 620px; background: var(--haze); opacity: .35; }
.b3 { width: 380px; height: 380px; background: #C7D2E8; opacity: .28; }

#scenes { position: absolute; inset: 0; }
/* persistent layers under the scenes (film.layers): an anatomy figure, a machine */
.layer { position: absolute; inset: 0; overflow: clip; }

/* dialogue participants (film.speakers): badges at the bottom left, the speaker is highlighted */
#speakers { position: absolute; left: 140px; bottom: 44px; display: flex; gap: 26px; }
.spk { display: flex; align-items: center; gap: 14px; opacity: .45; transition: none; }
.spk.on { opacity: 1; }
.spk .ava { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 600 26px/1 Sans, sans-serif; font-style: normal; color: var(--paper); background: var(--muted); }
.spk[data-voice=""] .ava { background: var(--accent); }
.spk.on .ava { box-shadow: 0 0 0 4px var(--bg), 0 0 0 6.5px currentColor; color: var(--paper); }
.spk .wave { position: absolute; right: -6px; bottom: -4px; display: flex; gap: 2px; align-items: end; height: 18px; padding: 3px 4px; border-radius: 8px; background: var(--ink); }
.spk .wave s { display: block; width: 3px; height: 12px; border-radius: 2px; background: var(--paper); transform-origin: 50% 100%; text-decoration: none; }
.spk:not(.on) .wave { display: none; }
.spk span { display: flex; flex-direction: column; gap: 4px; }
.spk span b { font: 600 24px/1 Sans, sans-serif; color: var(--ink); }
.spk span small { font: 400 15px/1 Mono, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#cc[data-voice] span { box-shadow: inset 6px 0 0 var(--accent); }
#cc[data-voice=""] span { box-shadow: none; }
.scene { position: absolute; inset: 0; overflow: clip; display: none; }
.scene.dark { background: var(--ink); color: var(--paper); }
.scene.dark em { color: var(--accent-on-dark); }
.scene.dark .strike::after { background: var(--accent-on-dark); }
.scene.accent { background: var(--accent); color: #fff; }

/* shared scene typography */
.mono { font: 400 22px/1.1 Mono, monospace; letter-spacing: .1em; text-transform: uppercase; }
.scene em { font-style: italic; color: var(--accent); }
.h2 { position: absolute; left: 140px; top: 140px; margin: 0; font: 400 78px/1.08 Serif; letter-spacing: -.015em; }
.w { display: inline-block; }
/* strike-through and underline are drawn by --k (0..1) */
.strike { position: relative; display: inline-block; }
.strike::after { content: ''; position: absolute; left: -6px; right: -6px; top: 56%; height: 6px; border-radius: 3px; background: var(--accent); transform: scaleX(var(--k, 0)); transform-origin: 0 50%; }

/* ================================================================ layers above the scenes */
#chrome { position: absolute; inset: 0; pointer-events: none; }
#kicker { position: absolute; left: 140px; top: 64px; display: flex; gap: 18px; align-items: center; font: 400 23px/1 Mono, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--cloud); }
#kicker .num { color: var(--accent); }
#brand { position: absolute; right: 140px; top: 64px; display: flex; gap: 12px; align-items: center; font: 400 21px/1 Mono, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--cloud); }
#brand svg { width: 22px; height: 22px; }
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(15, 26, 46, .06); }
#progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 0; }
#chrome.dark #kicker { color: #6F7C98; }
#chrome.dark #kicker .num { color: var(--accent-on-dark); }
#chrome.dark #progress { background: rgba(248, 249, 251, .08); }
#chrome.accent #progress i { background: var(--paper); }
#cc { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); width: max-content; max-width: 1500px; text-align: center; pointer-events: none; }
#cc span { display: inline; padding: 6px 18px; border-radius: 10px; background: rgba(15, 26, 46, .86); color: var(--paper); font: 600 38px/1.55 Sans, sans-serif; box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: 0 0 0 1.5px rgba(248, 249, 251, .14); }
#cc i { font-style: normal; }
#cc i.on { color: var(--accent-on-dark); }


/* ================================================================ vertical frame 1080×1920 (?v)
 * Margins 80px; the meaningful part — between 200 and 1650px in height (Reels/Shorts put captions and buttons at the bottom). */
#stage.v { width: 1080px; height: 1920px; }
#stage.v .b1 { width: 1000px; height: 1000px; }
#stage.v .b2 { width: 760px; height: 760px; }
#stage.v #kicker { left: 80px; top: 120px; font-size: 24px; }
#stage.v #brand { display: none; }
#stage.v #speakers { left: 80px; top: 176px; bottom: auto; gap: 22px; }
#stage.v .spk .ava { width: 52px; height: 52px; font-size: 24px; }
/* captions — above the bottom strip of the Reels/Shorts interface (≈320px from the bottom) */
#stage.v #cc { bottom: 330px; max-width: 940px; }
#stage.v #cc span { font-size: 48px; padding: 8px 22px; border-radius: 14px; }
#stage.v .mono { font-size: 24px; }
#stage.v .h2 { left: 80px; top: 200px; width: 920px; font-size: 72px; text-wrap: balance; }

/* ================================================================ player (hidden in render) */
html { color-scheme: dark; }
html, body { margin: 0; height: 100%; }
body { background: #0B1222; color: #E6EAF2; font: 15px/1.4 Sans, system-ui, sans-serif; overflow: hidden; }
body.render { background: var(--bg); }
body.render #ctrl, body.render #cover, body.render #menu { display: none; }
#player { position: fixed; inset: 0; display: flex; flex-direction: column; }
#frame { position: relative; flex: 1; min-height: 0; overflow: hidden; }
body.render #frame { overflow: visible; }
#cover { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(11, 18, 34, .28); border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
#cover .go { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#cover .btn { width: 104px; height: 104px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 16px 50px rgba(0, 0, 0, .35); transition: transform .2s; }
#cover:hover .btn { transform: scale(1.06); }
#cover .btn svg { width: 40px; height: 40px; margin-left: 6px; }
#cover .lbl { padding: 6px 14px; border-radius: 999px; background: rgba(15, 26, 46, .8); font: 600 15px Sans, sans-serif; letter-spacing: .02em; }
#ctrl { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: #0F1A2E; border-top: 1px solid #1E2A42; }
#ctrl button { flex: none; height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: 600 13px Sans, sans-serif; cursor: pointer; display: inline-grid; place-items: center; }
#ctrl button:hover, #ctrl button[aria-pressed="true"] { background: #22304A; }
#ctrl button:focus-visible, #track:focus-visible, #cover:focus-visible .btn, #menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#ctrl button[aria-pressed="true"] { color: var(--accent); }
#ctrl button svg { width: 18px; height: 18px; }
#time { flex: none; font: 400 13px Mono, monospace; color: #9AA6BE; min-width: 92px; text-align: center; }
#chap { flex: none; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9AA6BE; font-size: 13px; }
#track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
#track .rail { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: #33415F; }
#track .fill { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--accent); }
#track .tick { position: absolute; top: 9px; width: 2px; height: 10px; margin-left: -1px; background: #0F1A2E; }
#track .knob { position: absolute; top: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #EDEFF3; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
#track .tip { position: absolute; bottom: 30px; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: #EDEFF3; color: #0F1A2E; font: 600 12px Sans, sans-serif; white-space: nowrap; pointer-events: none; display: none; }
#track:hover .tip { display: block; }
#menu { position: absolute; right: 16px; bottom: 68px; width: 320px; max-height: calc(100% - 90px); overflow: auto; padding: 8px; border-radius: 14px; background: #17233B; border: 1px solid #2A3856; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); display: none; }
#menu.open { display: block; }
#menu button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: baseline; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; font: 400 14px Sans, sans-serif; cursor: pointer; }
#menu button:hover { background: #22304A; }
#menu button.on { background: #22304A; color: #fff; }
#menu .n { font: 400 12px Mono, monospace; color: var(--accent); }
#menu .tm { font: 400 12px Mono, monospace; color: #8592AD; }
@media (max-width: 640px) {
  #ctrl { flex-wrap: wrap; gap: 4px 6px; padding: 8px 10px 10px; }
  #track { order: -1; flex-basis: 100%; }
  #chap { flex: 1; max-width: none; }
  #menu { left: 10px; right: 10px; width: auto; bottom: 96px; }
  #cover .btn { width: 76px; height: 76px; }
}

/* ================================================================ AI shots (lib/art.js: shot('id') → <img class="shot">)
 * The image fills the frame; motion — ken() / shake() from lib/motion.js (transform). */
.shot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; display: block; user-select: none; }