:root{color-scheme:dark;--ink:#f9f7ff;--glass:rgba(18,17,66,.72);--coral:#ff9d91;--gold:#ffd56a;--aqua:#74f2e5}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#070b38;color:var(--ink);font-family:"Trebuchet MS","Avenir Next",system-ui,sans-serif}
body{display:grid;place-items:center;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overflow:hidden}
button{font:inherit;min-width:44px;min-height:44px;touch-action:manipulation}
.storybook{width:min(1180px,100%);display:grid;gap:12px}
.screen{position:relative;width:100%;aspect-ratio:16/9;border-radius:clamp(18px,3vw,38px);overflow:hidden;background:#10165b;box-shadow:0 26px 80px rgba(0,0,0,.46),inset 0 0 0 1px rgba(255,255,255,.18)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.025);transition:opacity .85s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.scene.active{opacity:1;transform:scale(1);z-index:1}
.scene.leaving{opacity:0;transform:scale(1.035);z-index:2}
.screen:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(4,6,40,.18),transparent 35%,transparent 70%,rgba(4,6,40,.1)),linear-gradient(0deg,rgba(3,5,34,.58),transparent 42%)}
.cover,.ending{position:absolute;inset:0;z-index:5;display:grid;align-content:center;justify-items:start;padding:clamp(28px,6vw,84px);max-width:68%;text-shadow:0 3px 18px rgba(0,0,0,.5)}
.ending{max-width:none;justify-items:center;text-align:center;background:radial-gradient(circle,rgba(33,35,105,.18),rgba(6,8,46,.68))}
.eyebrow{margin:0 0 10px;text-transform:uppercase;letter-spacing:.2em;font-weight:900;font-size:clamp(.7rem,1.4vw,1rem);color:var(--aqua)}
h1,.ending h2{font-family:Georgia,serif;font-size:clamp(2.25rem,6vw,5.7rem);line-height:.9;margin:0;letter-spacing:-.045em}
h1 span,.ending h2 span{color:var(--gold)}
.lesson{font-size:clamp(1rem,2vw,1.35rem);line-height:1.45;max-width:28rem;margin:22px 0}
.start{border:0;border-radius:999px;padding:13px 22px;color:#13204f;background:linear-gradient(135deg,var(--gold),#ff9d91);font-weight:900;box-shadow:0 10px 28px rgba(255,157,145,.28);cursor:pointer}
.caption{position:absolute;z-index:5;left:clamp(14px,3vw,36px);right:clamp(14px,3vw,36px);bottom:clamp(14px,2.5vw,28px);padding:clamp(14px,2vw,22px) clamp(16px,2.4vw,28px);border:1px solid rgba(255,255,255,.22);border-radius:clamp(16px,2vw,24px);background:var(--glass);backdrop-filter:blur(15px);box-shadow:0 12px 40px rgba(0,0,0,.22)}
.page-number{margin:0;color:var(--aqua);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.17em}
.caption h2{margin:3px 0 8px;font-family:Georgia,serif;font-size:clamp(1.25rem,2.8vw,2.2rem)}
.dialogue{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:clamp(.98rem,2vw,1.35rem);line-height:1.35}
.line{margin:0}.speaker{font-weight:900;color:var(--gold)}.line.bibi .speaker{color:var(--coral)}
.controls{display:grid;grid-template-columns:auto 1fr auto auto auto auto;align-items:center;gap:8px;padding:6px;border-radius:999px;background:rgba(19,20,72,.9);border:1px solid rgba(255,255,255,.13);box-shadow:0 12px 34px rgba(0,0,0,.3)}
.controls button{border:0;border-radius:999px;padding:10px 16px;color:#fff;background:rgba(255,255,255,.08);font-weight:800;cursor:pointer}
.controls button:hover{background:rgba(255,255,255,.16)}.controls button:disabled{opacity:.35;cursor:default}.controls .next{color:#15204b;background:linear-gradient(135deg,var(--gold),var(--coral))}
.progress{display:flex;justify-content:center;gap:7px}.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);transition:.3s}.dot.active{width:25px;border-radius:8px;background:var(--aqua)}
[hidden]{display:none!important}
@media (orientation:portrait) and (max-width:900px){body{align-content:center}.screen{aspect-ratio:4/5}.scene{object-position:center}.cover{max-width:92%;align-content:end;padding-bottom:11vh}.caption{bottom:18px}.dialogue{display:grid}.controls{grid-template-columns:repeat(5,1fr)}.progress{grid-column:1/-1;grid-row:1}.controls button{padding:11px 10px}.controls button span{display:none}}
@media (min-width:768px) and (max-width:1366px){.controls button{min-height:52px}.caption{max-width:calc(100% - 42px)}.dialogue{gap:10px 28px}}
@media (max-height:620px) and (orientation:landscape){body{padding:6px}.storybook{gap:6px}.screen{max-height:calc(100dvh - 68px);width:auto;justify-self:center}.caption{padding:10px 16px;bottom:8px}.caption h2{margin:1px 0 4px}.controls button{min-height:46px;padding:7px 14px}}

/* Movie-style subtitles */
.caption{left:50%;right:auto;bottom:clamp(12px,2.2vw,24px);width:min(88%,880px);transform:translateX(-50%);padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none;text-align:center;pointer-events:none}
.caption .page-number,.caption h2{display:none}
.dialogue{display:flex;justify-content:center;font-size:clamp(1.05rem,2.15vw,1.55rem);line-height:1.35}
.subtitle-line{margin:0;padding:.38em .72em;border-radius:.5em;background:rgba(0,0,0,.68);box-decoration-break:clone;-webkit-box-decoration-break:clone;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.95);font-weight:700;max-width:100%}
.subtitle-line .speaker{color:var(--gold)}
.subtitle-line.bibi .speaker{color:#ffb5ad}
.subtitle-line.narrator .speaker{color:var(--aqua)}
@media (orientation:portrait) and (max-width:900px){.caption{bottom:14px;width:92%}.dialogue{display:flex}.subtitle-line{padding:.42em .68em}}




body.fullscreen-open{overflow:hidden}
.storybook.pseudo-fullscreen{position:fixed;inset:0;z-index:9999;width:100vw;max-width:none;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#070b38;align-content:center}
.storybook.pseudo-fullscreen .screen{max-height:calc(100dvh - 82px);justify-self:center}