.tp-stage { --tp-bg: #000; --tp-ink: #fff; --tp-size: 6; --tp-w: 80; --tp-lh: 1.5; --tp-eye: 30; --tp-sx: 1; --tp-sy: 1;
  background: var(--tp-bg); color: var(--tp-ink); container-type: size; }
@media (max-width: 600px) { .tp-stage:not(.is-full) { aspect-ratio: 4 / 3; } }
.tp-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tp-view { position: absolute; inset: 0; overflow: hidden; container-type: size; background: var(--tp-bg); touch-action: none; cursor: grab; }
.tp-view.drag { cursor: grabbing; }
.tp-flip { position: absolute; inset: 0; transform: scale(var(--tp-sx), var(--tp-sy)); }
.tp-text { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: calc(var(--tp-w) * 1%); box-sizing: border-box;
  padding: calc(var(--tp-eye) * 1cqh - var(--tp-lh) * var(--tp-size) * .5cqw) 0 0; font: 600 calc(var(--tp-size) * 1cqw)/var(--tp-lh) system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tp-ink); will-change: transform; overflow-wrap: break-word; }
.tp-text p { margin: 0 0 calc(var(--tp-lh) * .5em); }
.tp-text .tp-gap { height: calc(var(--tp-lh) * .5em); margin: 0; }
.tp-cue { font-size: .62em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ffb000;
  border-left: .3em solid currentColor; padding-left: .5em; }
.tp-dir { opacity: .5; font-style: italic; font-weight: 500; }
.tp-text .w.said { opacity: .55; }
.tp-placeholder { opacity: .45; }
.tp-eye { position: absolute; left: 0; right: 0; top: calc(var(--tp-eye) * 1%); height: calc(var(--tp-lh) * var(--tp-size) * 1cqw); transform: translateY(-50%);
  pointer-events: none; background: color-mix(in srgb, var(--tp-ink) 7%, transparent); border-block: 1px solid color-mix(in srgb, var(--tp-ink) 18%, transparent); }
.tp-eye-l, .tp-eye-r { position: absolute; top: 50%; width: 0; height: 0; border: max(6px, 1.4cqw) solid transparent; transform: translateY(-50%); }
.tp-eye-l { left: 4px; border-left-color: #ff4d4d; }
.tp-eye-r { right: 4px; border-right-color: #ff4d4d; }
.tp-eye.off { display: none; }
.tp-count { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; font: 800 38cqh/1 system-ui, sans-serif;
  color: var(--tp-ink); background: color-mix(in srgb, var(--tp-bg) 70%, transparent); pointer-events: none; }
.tp-count[hidden] { display: none; }
.tp-bar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(128, 128, 128, .25); z-index: 3; pointer-events: none; }
.tp-bar span { display: block; height: 100%; width: 0; background: #ff4d4d; }
.tp-ctl { position: absolute; left: 12px; bottom: 12px; right: 150px; z-index: 5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; transition: opacity .3s; }
.tp-b { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(20, 22, 28, .72); color: #fff; cursor: pointer; padding: 0; }
.tp-b svg { width: 20px; height: 20px; }
.tp-b.tp-play { width: 48px; height: 48px; }
.tp-read { font-size: .85rem; font-weight: 600; color: #fff; background: rgba(20, 22, 28, .72); padding: 6px 10px; border-radius: 999px; }
.tp-exit { display: none; }
.tp-stage.is-full .tp-exit { display: inline-grid; }
.tp-stage.is-full .tp-ctl { right: 12px; justify-content: center; }
.tp-stage.is-full.st-idle .tp-ctl, .tp-stage.is-full.playing.st-idle .tp-ctl { opacity: 0; }
.tp-stage.is-full .tp-ctl:focus-within { opacity: 1 !important; }
.tp-stage.is-full .fs-btn { display: none; }
.tp-script { margin-top: 14px; }
.tp-script textarea { width: 100%; box-sizing: border-box; margin-top: 6px; font: inherit; font-size: .95rem; line-height: 1.5; color: var(--ink); background: var(--field);
  border: 1px solid var(--field-border); border-radius: 10px; padding: 10px 12px; resize: vertical; min-height: 160px; }
.tp-script-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.tp-script-row .hint { margin: 0; }
.tp-file { display: inline-flex; align-items: center; }
#tp-file-in:focus-visible + .tp-file { outline: 3px solid var(--focus); outline-offset: 2px; }
.tp-sws { display: grid; gap: 10px; }
.tp-sws .panel-h { margin: 0; }
.tp-colors { display: grid; grid-template-columns: auto 52px auto 52px; gap: 8px 10px; align-items: center; margin-top: 10px; }
.tp-colors input[type="color"] { width: 52px; height: 40px; padding: 0; border: 1px solid var(--field-border); border-radius: 10px; background: none; cursor: pointer; }
.panel [hidden] { display: none !important; }
#tp-voice[aria-pressed="true"] { background: #c62828; color: #fff; border-color: #c62828; }
@media (max-width: 420px) { .tp-stage .fs-btn span { display: none; } .tp-ctl { right: 64px; } .tp-read { display: none; } }
@media (prefers-reduced-motion: reduce) { .tp-ctl { transition: none; } }
.tp-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: 2; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--tp-bg) 85%, transparent)); }
.tp-stage.is-full.st-idle::after { opacity: 0; }