/* Narrated scene frame, controls and captions (page chrome around a scene). */

.ts-scene { margin: 0; display: grid; gap: var(--s-3); container-type: inline-size; min-width: 0; }
.ts-frame {
  position: relative; width: 100%; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 9;
  background: #0D1B2A; isolation: isolate;
  box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 30px 60px -40px rgb(13 27 42 / .55);
}
.ts-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; contain: layout paint; }
.ts-scene:not([data-ready]) .ts-frame::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, #0D1B2A 30%, #16283C 50%, #0D1B2A 70%);
  background-size: 200% 100%; animation: ts-shimmer 1.6s linear infinite;
}
@keyframes ts-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ts-scene:not([data-ready]) .ts-frame::after { animation: none; } }
.ts-scene[data-error] .ts-frame::after { animation: none; }

.ts-bar { display: flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; }
.ts-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  height: 2.5rem; min-width: 2.5rem; padding: 0 0.7rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font-size: var(--t-sm); font-weight: 650;
}
.ts-btn:hover { border-color: var(--ink); }
.ts-btn[hidden] { display: none; }
.ts-btn svg { width: 1rem; height: 1rem; }
.ts-play { padding: 0; width: 2.5rem; }
.ts-play [data-icon] { display: none; }
.ts-play[data-state="playing"] [data-icon="pause"],
.ts-play[data-state="paused"] [data-icon="play"],
.ts-play[data-state="ended"] [data-icon="replay"] { display: block; }
.ts-play:not([data-state]) [data-icon="play"] { display: block; }
.ts-sound { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ts-sound:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ts-sound[aria-pressed="true"] { background: var(--bg); border-color: var(--line); color: var(--ink); }
.ts-sound [data-icon="on"], .ts-sound[aria-pressed="true"] [data-icon="off"] { display: none; }
.ts-sound[aria-pressed="true"] [data-icon="on"] { display: block; }

.ts-progress { flex: 1; display: flex; gap: 3px; align-items: center; min-width: 0; height: 2.75rem; border-radius: 6px; cursor: pointer; }
.ts-progress:focus-visible { outline-offset: 2px; }
.ts-seg { --fill: 0%; position: relative; flex-basis: 0; min-width: 6px; height: 100%; display: flex; align-items: center; }
.ts-seg::before { content: ""; width: 100%; height: 6px; border-radius: 3px; background: var(--line); }
.ts-seg::after { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; height: 6px; width: 0; border-radius: 3px; background: var(--ink); }
.ts-seg[data-done]::after { width: 100%; }
.ts-seg[data-current]::after { width: var(--fill); }
.ts-seg:hover::before { background: var(--ink-3); }
.ts-time { flex: none; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }

.ts-caption {
  min-height: 3.2em; font-size: var(--t-lg); line-height: 1.45; color: var(--ink); max-width: 46em; font-weight: 500;
}
html[lang^="zh"] .ts-caption { line-height: 1.6; }
.ts-note { font-size: var(--t-xs); color: var(--ink-3); }

.section--band .ts-btn { background: transparent; border-color: var(--band-line); color: var(--band-ink); }
.section--band .ts-btn:hover { border-color: var(--band-ink); }
.section--band .ts-sound { background: var(--orange); border-color: var(--orange); color: #0D1B2A; }
.section--band .ts-sound[aria-pressed="true"] { background: transparent; border-color: var(--band-line); color: var(--band-ink); }
.section--band .ts-seg::before { background: var(--band-line); }
.section--band .ts-seg::after { background: var(--band-ink); }
.section--band .ts-caption { color: var(--band-ink); }
.section--band .ts-time, .section--band .ts-note { color: var(--band-ink-2); }

.ts-transcript { font-size: var(--t-sm); color: var(--ink-2); }
.ts-transcript summary { cursor: pointer; width: max-content; }
.ts-transcript ol { margin-top: var(--s-3); padding-left: 2em; display: grid; gap: var(--s-2); max-width: 46em; }

@media (max-width: 559px) {
  .ts-big { font-size: .9rem; padding: .55em .9em .55em .75em; }
  .ts-time { display: none; }
  .ts-bar { flex-wrap: wrap; row-gap: 0; }
  .ts-progress { order: 3; flex-basis: 100%; }
  .ts-seg { min-width: 0; }
  .ts-sound { padding: 0; width: 2.75rem; height: 2.75rem; }
  .ts-sound .ts-sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ts-play { width: 2.75rem; height: 2.75rem; }
  .ts-caption { font-size: var(--t-md); }
}

/* Embed page (video export): full-bleed frame, no chrome. */
body[data-embed] { margin: 0; background: #0D1B2A; overflow: hidden; font-family: var(--font); }
html[lang^="zh"] body[data-embed] { font-family: var(--font), var(--font-zh); }
body[data-embed] .ts-scene { gap: 0; }
body[data-embed] .ts-frame { border-radius: 0; box-shadow: none; width: 100vw; height: 100vh; aspect-ratio: auto !important; }
body[data-embed] .ts-bar, body[data-embed] .ts-transcript { display: none; }
body[data-embed] .ts-caption { display: none; }
body[data-embed][data-captions] .ts-caption {
  display: block; position: fixed; left: 50%; bottom: 5.5vh; transform: translateX(-50%); width: min(84vw, 1500px);
  text-align: center; color: #fff; font-size: 3.1vh; line-height: 1.35; font-weight: 600; min-height: 0;
  padding: 0.5em 0.9em; border-radius: 0.4em; background: rgb(6 14 23 / .72);
}
body[data-embed][data-captions] .ts-caption:empty { display: none; }

/* Scenes are pure functions of time: no CSS transitions/animations inside the stage,
   so live playback and frame-by-frame export look identical. */
.ts-stage *, .ts-stage *::before, .ts-stage *::after { transition: none !important; animation: none !important; }

/* In-frame "Play with sound": the obvious first action; hidden once sound is on. */
.ts-big {
  position: absolute; left: clamp(10px, 2.5%, 22px); bottom: clamp(10px, 3%, 24px); z-index: 5;
  display: inline-flex; align-items: center; gap: .55em; padding: .7em 1.1em .7em .9em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--orange); color: #0D1B2A; font-weight: 750; font-size: clamp(.9rem, .8rem + .4vw, 1.05rem);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .6), 0 0 0 4px rgb(242 106 33 / .25);
}
.ts-big svg { width: 1.15em; height: 1.15em; }
.ts-big:hover { background: #fff; }
.ts-big[hidden] { display: none; }
body[data-embed] .ts-big { display: none; }

/* Reserve the frame's shape before the player runs (no layout jump; #anchors land where they should). */
.ts-scene[data-aspect="9:16"] .ts-frame { aspect-ratio: 9 / 16; }
@container (max-width: 599px) { .ts-scene:not([data-narrow-below]) .ts-frame { aspect-ratio: 4 / 5; } }
@container (max-width: 759px) { .ts-scene[data-narrow-below="760"] .ts-frame { aspect-ratio: 4 / 5; } }

/* After two seconds of silent playback the big button shrinks to an icon so it never hides the story. */
.ts-big--compact { width: 48px; height: 48px; padding: 0; justify-content: center; }
.ts-big--compact span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ts-big--compact svg { width: 22px; height: 22px; margin-left: 2px; }