.playback-modal[hidden]{display:none}.playback-modal{position:fixed;inset:0;z-index:1200;background:rgba(2,8,18,.82);backdrop-filter:blur(12px);display:grid;place-items:center;padding:24px;overflow:auto}.playback-card{width:min(760px,94vw);max-height:90vh;overflow:auto;background:#0d1b2d;border:1px solid #294263;border-radius:22px;box-shadow:0 28px 90px rgba(0,0,0,.6);padding:24px;color:#eef6ff}.playback-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.playback-head h2{margin:0;font-size:1.45rem}.playback-head p{margin:6px 0 0;color:#9fb3cb;max-width:560px}.playback-close{border:0;background:#172a43;color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.3rem;cursor:pointer}.playback-text{max-height:220px;overflow:auto;margin:20px 0;padding:14px 16px;border-radius:14px;background:#091525;color:#cfe0f3;line-height:1.5;white-space:pre-wrap}.playback-controls{display:grid;grid-template-columns:auto auto auto 1fr;gap:10px;align-items:center}.playback-controls button,.playback-downloads button{border:1px solid #365276;background:#172b46;color:#fff;border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer}.playback-controls .playback-play{background:linear-gradient(90deg,#45d8e8,#6279ff);color:#07111f;border:0}.playback-range{width:100%}.playback-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#93a9c1;font-size:.85rem}.playback-status{min-height:1.3em;margin:14px 0 0;color:#72e0ee;display:flex;align-items:center;gap:9px}.playback-status.busy{padding:11px 14px;border:1px solid #42d7e833;border-radius:14px;background:#0b1727b3}.playback-status.busy::before{content:"";width:15px;height:15px;border:2px solid rgba(114,224,238,.25);border-top-color:#72e0ee;border-radius:50%;animation:playback-spin .8s linear infinite;flex:0 0 auto}.playback-rate{display:flex;align-items:center;gap:8px;margin-top:14px;color:#9fb3cb}.playback-rate select{background:#11243b;color:#fff;border:1px solid #365276;border-radius:9px;padding:7px 9px}.playback-downloads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.playback-downloads button:disabled{opacity:.55;cursor:wait}.playback-note{margin:12px 0 0;color:#8198b2;font-size:.78rem;line-height:1.45}.upload-preview audio[hidden]{display:none!important}@keyframes playback-spin{to{transform:rotate(360deg)}}@media(max-width:700px){.playback-controls{grid-template-columns:repeat(3,1fr)}.playback-range{grid-column:1/-1}.playback-downloads{grid-template-columns:1fr}.playback-card{padding:18px}.playback-status.busy{padding:10px 12px}}
.playback-card{position:relative;z-index:1;pointer-events:auto}.playback-card button,.playback-card input,.playback-card select{pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:rgba(66,215,232,.22)}

.playback-chapters{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:12px}
.playback-chapters[hidden]{display:none}
.playback-chapters button{border:1px solid #365276;background:#172b46;color:#fff;border-radius:12px;padding:9px 14px;font-weight:700;cursor:pointer}
.playback-chapters button:hover:not(:disabled){border-color:#42d7e8;background:#1d3350}
.playback-chapters button:disabled{opacity:.4;cursor:default}
#playbackChapterLabel{text-align:center;color:#93a9c1;font-size:.9rem}
@media(max-width:560px){.playback-chapters{grid-template-columns:1fr 1fr;grid-template-areas:"label label" "prev next"}#playbackChapterLabel{grid-area:label}#playbackPrevChapter{grid-area:prev}#playbackNextChapter{grid-area:next}}
.playback-translating{margin:0 0 12px;padding:9px 13px;border:1px solid #42d7e833;border-radius:12px;background:#42d7e80d;color:#8fd6e6;font-size:12.5px;line-height:1.45}
.playback-translating[hidden]{display:none}

.playback-language{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;margin-bottom:12px}
.playback-language select[hidden],.playback-language label[hidden]{display:none}
.playback-language[hidden]{display:none}
.playback-language label{color:#93a9c1;font-size:.9rem}
.playback-language select{width:100%;background:#11243b;color:#fff;border:1px solid #365276;border-radius:9px;padding:8px 9px}
.playback-language select:disabled{opacity:.55;cursor:wait}
.playback-language__note{grid-column:1/-1;color:#8198b2;font-size:.78rem;line-height:1.4}
.playback-language__note:empty{display:none}
@media(max-width:560px){.playback-language{grid-template-columns:1fr}}

.playback-followalong{display:block;margin:6px 0 10px;padding:0;border:0;background:none;color:#72e0ee;font-size:.82rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.playback-followalong[hidden]{display:none}
.playback-followalong:hover{color:#9ceffa}

/* What is still playing once the player is closed.
   Closing the card used to leave narration running with no control anywhere on
   the page — the only notice of it was written inside the card that had just
   been hidden. */
.now-playing{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:1100;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;width:min(620px,94vw);padding:10px 12px;border:1px solid #294263;border-radius:16px;background:#0d1b2def;backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.55);color:#eef6ff}
.now-playing[hidden]{display:none}
.now-playing__open{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-width:0;padding:4px 6px;border:0;border-radius:11px;background:none;color:inherit;text-align:left;cursor:pointer}
.now-playing__open:hover{background:#17294180}
.now-playing__what{min-width:0}
.now-playing__what b{display:block;font-size:.93rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-playing__what small{display:block;color:#93a9c1;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.now-playing__wave{width:9px;height:16px;border-radius:2px;background:linear-gradient(180deg,#45d8e8,#6279ff);animation:now-playing-wave 1s ease-in-out infinite;flex:0 0 auto}
.now-playing.is-paused .now-playing__wave{animation:none;opacity:.45}
.now-playing button{font-weight:700;cursor:pointer}
.now-playing__play{border:0;border-radius:12px;padding:10px 14px;background:linear-gradient(90deg,#45d8e8,#6279ff);color:#07111f}
.now-playing__stop{border:1px solid #365276;border-radius:12px;padding:10px 14px;background:#172b46;color:#fff}
.now-playing__stop:hover{border-color:#42d7e8;background:#1d3350}
@keyframes now-playing-wave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@media(max-width:560px){.now-playing{grid-template-columns:minmax(0,1fr) auto;bottom:10px}.now-playing__open{grid-column:1/-1}}
body.has-now-playing{padding-bottom:104px}
@media(max-width:560px){body.has-now-playing{padding-bottom:150px}}

/* Waiting for the first chapter: title, what is happening, and how far along.
   A transport with nothing to act on, a speed setting for silence and three
   download buttons for a book that does not exist yet are all noise, and a
   disabled row of them reads as a player that has broken rather than one that
   is not needed yet. */
.playback-card.is-waiting .playback-controls,
.playback-card.is-waiting .playback-meta,
.playback-card.is-waiting .playback-rate,
.playback-card.is-waiting .playback-downloads,
.playback-card.is-waiting .playback-note{display:none}
.playback-card.is-waiting{width:min(560px,94vw)}