.prompter-page { margin: 0; overflow: hidden; background: #000; }
.prompter { --prompter-font-size: 64px; --prompter-margin: 10%; position: fixed; inset: 0; overflow: hidden; background: var(--color-prompter-background); color: var(--color-prompter-text); touch-action: none; user-select: none; cursor: default; }
.prompter[data-theme="light"] { background: #fdfcf8; color: #111; }
.prompter__viewport { position: absolute; inset: 0; overflow: hidden; }
.prompter__content { background: transparent !important; border: 0 !important; color: inherit; padding: 0 var(--prompter-margin) 60vh !important; font-size: var(--prompter-font-size); line-height: 1.5; will-change: transform; border-radius: 0 !important; }
.prompter__content .piece + .piece { margin-block-start: 0.6em; }
.prompter__content .piece__label { font-size: 0.3em; color: inherit; opacity: 0.5; }
.prompter__content .translation { color: inherit; opacity: 0.75; font-size: 0.8em; }
.prompter__content .piece--pause { font-size: 0.4em; border-color: currentColor; color: inherit; opacity: 0.6; }
.prompter__end { text-align: center; opacity: 0.3; font-size: 0.5em; padding-block: 1em; }
.prompter__reading-line { position: absolute; inset-inline: 0; height: 0; border-top: 2px solid rgb(251 146 60 / 70%); pointer-events: none; }
.prompter__reading-line::before { content: "▶"; position: absolute; inset-inline-start: 4px; top: -0.75em; color: rgb(251 146 60 / 90%); font-size: 1.1rem; }
[dir="rtl"] .prompter__reading-line::before { content: "◀"; }
.prompter__countdown { position: absolute; inset-inline: 0; top: 12%; display: grid; justify-items: center; gap: 0.3rem; pointer-events: none; text-shadow: 0 2px 10px rgb(0 0 0 / 60%); }
.prompter__countdown strong { font-size: 5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.prompter__countdown span { font-size: 1.4rem; }
.prompter__countdown small { opacity: 0.6; }
.prompter__progress { position: absolute; inset-inline: 0; top: 0; height: 3px; background: rgb(255 255 255 / 8%); }
.prompter__progress div { height: 100%; width: 0; background: rgb(251 146 60 / 80%); }
.prompter__controls { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: center; padding: var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / 85%)); transition: opacity 0.3s; font-family: var(--font-ui); font-size: 0.85rem; color: #fff; }
.prompter__controls.is-hidden { opacity: 0; pointer-events: none; }
.prompter__controls .button { --button-background: rgb(255 255 255 / 12%); --button-color: #fff; --button-border: rgb(255 255 255 / 20%); }
.prompter__controls .button--primary { --button-background: var(--color-accent); --button-border: var(--color-accent); min-width: 3.2rem; }
.prompter__slider { display: grid; gap: 2px; font-size: 0.7rem; opacity: 0.85; }
.prompter__slider input { width: 7rem; accent-color: #fb923c; }
.prompter:fullscreen { cursor: none; }
.prompter:fullscreen .prompter__controls:not(.is-hidden) ~ *, .prompter:not(.is-playing) { cursor: default; }