:root { color: #f7f0df; background: #09111b; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; background: radial-gradient(circle at 78% 8%, #354e68 0, #09111b 46rem); } a { color: #f4d58d; }
button { border: 1px solid #f1d18a; border-radius: .2rem; padding: .65rem .9rem; color: #18130b; background: #f1d18a; cursor: pointer; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } button:disabled { opacity: .55; cursor: wait; }
button.secondary { color: #f7f0df; background: transparent; border-color: #73879c; }
input, textarea, select { width: 100%; margin-top: .35rem; padding: .55rem; border: 1px solid #7b8ca1; border-radius: .2rem; color: #f7f0df; background: #142334; }
.library-shell, .reader-shell { width: min(1050px, calc(100% - 2rem)); margin: auto; padding: clamp(1.5rem, 5vw, 5rem) 0; }
.masthead { max-width: 720px; padding: 2rem 0 3rem; }.eyebrow { margin: 0 0 .45rem; color: #e9c779; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { max-width: 14ch; margin: 0; font: clamp(2.5rem, 6vw, 5rem)/.98 Georgia, serif; }.lede { max-width: 62ch; color: #c7d3df; font-size: 1.1rem; line-height: 1.65; }
.upload-card, .notice, .source-card, .audio-panel { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #60738a; background: #101d2ce8; box-shadow: 0 1.3rem 3rem #0005; }
.upload-card { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }.upload-card h2, .section-heading h2 { margin: 0; font: 2rem Georgia, serif; }.upload-card form { display: grid; gap: 1rem; align-content: start; }.upload-card label, .audio-panel label { font-size: .8rem; font-weight: 700; }
.book-stage { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; margin: 0 0 2rem; padding: 1.2rem 1.4rem; border-left: 4px solid #e9c779; background: #173149; }.book-stage h2, .book-stage p { margin: 0; }.book-stage h2 { font: 1.7rem Georgia, serif; }.book-stage-state { margin-top: .35rem !important; color: #f3d795; font-size: .84rem; font-weight: 800; }.book-stage-description { margin-top: .4rem !important; color: #c7d3df; font-size: .84rem; }.book-stage-actions { display: grid; justify-items: end; gap: .45rem; }.book-stage-actions .action-status { max-width: 28rem; text-align: right; }
.status { min-height: 1.2rem; color: #f3d795; line-height: 1.4; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 3rem 0 1rem; }.book-list { display: grid; gap: .7rem; }
.book-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; border-left: 3px solid #e9c779; background: #132336; }.book-row h3, .book-row p { margin: 0; }.book-row h3 { font: 1.35rem Georgia, serif; }.book-row p:not(.eyebrow) { color: #c7d3df; font-size: .82rem; }.book-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .6rem; align-items: center; }.book-actions .action-status { flex-basis: 100%; text-align: right; }.empty { color: #c7d3df; }.notice { margin-top: 3rem; color: #c7d3df; line-height: 1.6; }
.reader-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }.badge { max-width: 36ch; margin: 0; color: #f2d995; font-size: .75rem; text-align: right; }.reader { min-height: 68vh; display: grid; grid-template-rows: 1fr auto; border: 1px solid #8f7950; background: #0f1c2a; box-shadow: 0 2rem 5rem #0007; }
.scene-art { display: grid; align-content: end; min-height: 24rem; padding: clamp(1.5rem, 5vw, 4rem); background: linear-gradient(145deg, #37546c, #192c3e 50%, #0a1320); }.scene-art h1 { max-width: 22ch; font-size: clamp(2.2rem, 5vw, 4.2rem); }.scene-art p { max-width: 65ch; color: #d4e0e8; line-height: 1.55; }.soundscape { color: #f0d58f !important; font-size: .9rem; }
.reader-card { margin: -1rem clamp(.8rem, 4vw, 3.5rem) 1.2rem; padding: 1.3rem clamp(1rem, 3vw, 2rem); border: 1px solid #d7bd7c; background: #091321ef; }.reader-line { min-height: 3.4rem; margin: .5rem 0 1rem; font: clamp(1.12rem, 2vw, 1.45rem)/1.55 Georgia, serif; }.reader-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }.reader-controls button { flex: 0 1 auto; }.reader-controls #advance { min-width: 9rem; margin-left: auto; }.reader-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid #53647a; }.reader-progress .status { flex: 1 1 14rem; margin: 0; }.reader-scene-jump { color: #d4e0e8; font-size: .8rem; }.reader-scene-jump summary { cursor: pointer; color: #f3d795; font-weight: 800; }.reader-scene-jump label { display: grid; gap: .2rem; margin-top: .5rem; color: #d4e0e8; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.reader-scene-jump select { min-width: 15rem; margin: 0; }
.audio-panel { display: grid; gap: .75rem; margin-top: 1rem; }.audio-panel[hidden] { display: none; }.audio-panel p { margin: 0; color: #c7d3df; }.source-card { margin-top: 1rem; }.source-card p { line-height: 1.55; }.source-card details { color: #d4e0e8; }
@media (max-width: 700px) { .upload-card { grid-template-columns: 1fr; }.book-row { align-items: flex-start; flex-direction: column; }.book-actions { align-items: stretch; flex-direction: column; }.book-actions .action-status, .book-stage-actions .action-status { text-align: left; }.book-stage { align-items: flex-start; flex-direction: column; }.book-stage-actions { justify-items: start; }.reader-head { align-items: flex-start; gap: .8rem; flex-direction: column; }.badge { text-align: left; }.scene-art { min-height: 22rem; } }

.scene-art { position: relative; overflow: hidden; isolation: isolate; }
.scene-art::before, .scene-art::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.scene-art::before { inset: 0; background: radial-gradient(circle at 76% 18%, #f7e3a488 0 8%, transparent 9%), linear-gradient(155deg, #65758b, #263d54 50%, #091525); }
.scene-art::after { right: -9%; bottom: -20%; width: 78%; height: 70%; border-radius: 50% 50% 0 0; background: #081a2b88; box-shadow: -20rem 5rem 0 #122b3d88; }
.scene-art[data-tone="sea"]::before { background: radial-gradient(circle at 76% 18%, #f7e3a488 0 8%, transparent 9%), linear-gradient(155deg, #4e97aa, #174665 52%, #071c30); }
.scene-art[data-tone="storm"]::before { background: radial-gradient(circle at 76% 18%, #dce5ef55 0 6%, transparent 7%), linear-gradient(155deg, #64748b, #253348 52%, #080f1b); }
.scene-art[data-tone="night"]::before { background: radial-gradient(circle at 76% 18%, #f7e3a499 0 5%, transparent 6%), linear-gradient(155deg, #17274a, #0d1930 52%, #050914); }
.scene-copy { position: relative; z-index: 1; }.stage-cast { position: absolute; z-index: 0; right: clamp(1rem, 8vw, 8rem); bottom: 1.2rem; display: flex; align-items: end; gap: clamp(.7rem, 3vw, 2.5rem); }
.stage-figure { display: grid; justify-items: center; min-width: 5rem; color: #f7f0df; filter: drop-shadow(0 .7rem .5rem #0008); opacity: .68; transform: scale(.92); transition: opacity .2s, transform .2s; }.stage-figure[data-active="true"] { opacity: 1; transform: scale(1); }
.stage-figure span { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border: .18rem solid #f2d995; border-radius: 50%; color: #132337; background: #d6aa75; font: 1.4rem Georgia, serif; }.stage-figure b { display: block; width: 5.5rem; height: 7rem; margin-top: -.25rem; border-radius: 48% 48% 12% 12%; background: linear-gradient(105deg, #162a3d, #6e8091); }.stage-figure small { margin-top: .3rem; color: #f4d58d; font-weight: 800; }.scene-art[data-tone="sea"] .stage-figure b { background: linear-gradient(105deg, #102d45, #4b8497); }.scene-art[data-tone="storm"] .stage-figure b { background: linear-gradient(105deg, #121923, #687489); }

.scene-art.has-scene-art { background-color: #09111b; background-position: center; background-size: cover; }.scene-art.has-scene-art::before { background: linear-gradient(90deg, #07111c88 0%, transparent 68%); }.scene-art.has-scene-art::after { background: none; }.art-status { color: #f4d58d !important; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Book Studio scene art follows the original player: metadata above, artwork unobscured, dialogue protected below. */
.reader { display: block; min-height: 0; overflow: hidden; }.book-scene-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: .9rem 1rem; border-bottom: 1px solid #8f7950; background: #112238; }.book-scene-meta h1 { max-width: none; font-size: clamp(1.3rem, 3vw, 2rem); }.book-scene-meta p { margin: 0; }.scene-state { max-width: 34rem; color: #c7d3df; font-size: .82rem; text-align: right; }.scene-state .art-status { margin-top: .35rem; }.reader .scene-art { display: block; min-height: min(64vh, 44rem); padding: 0; background-position: center; background-size: cover; }.reader .scene-art.has-scene-art::before { background: linear-gradient(0deg, #07111c66 0%, transparent 55%); }.reader .reader-card { position: relative; z-index: 2; margin: -5.4rem clamp(.8rem, 4vw, 3.5rem) 1.2rem; }.source-card .soundscape { color: #f0d58f; font-size: .9rem; }
.art-review form { display: grid; gap: .8rem; margin-top: 1rem; }.art-review label { color: #d4e0e8; font-size: .84rem; font-weight: 700; }.art-review textarea { min-height: 5rem; resize: vertical; }
@media (max-width: 700px) { .book-scene-meta { display: block; }.scene-state { margin-top: .6rem; text-align: left; }.reader .scene-art { min-height: 58vh; }.reader .reader-card { margin-top: -3rem; }.reader-controls #advance { order: -1; flex-basis: 100%; margin-left: 0; }.reader-scene-jump { flex-basis: 100%; }.reader-scene-jump select { min-width: 0; } }