#story-layer{position:fixed;inset:0;z-index:200;background:#080e20;color:#eff4ff;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;overflow:hidden;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom));font-family:Noto,system-ui,sans-serif;box-sizing:border-box}
#story-layer button{min-height:48px;font:inherit;color:inherit;cursor:pointer;border:1px solid #53668c;border-radius:13px;background:#18253c;padding:10px 18px;touch-action:manipulation}
#story-layer button:focus-visible{outline:3px solid #fff1bf;outline-offset:3px}#story-layer button:disabled{opacity:.35;cursor:default}
#story-layer .primary{background:linear-gradient(110deg,#eeb75d,#ffe5a8);border-color:#ffe3ab;color:#211b23;font-weight:800}
#story-layer.brand-opening{display:flex;flex-direction:column;align-items:center;justify-content:center}
.story-brand-logo{width:min(65vw,270px);height:225px;object-fit:contain;filter:drop-shadow(0 0 28px #716eff33);transition:height .6s,width .6s}
.brand-caption{color:#adbad1;font-size:16px;margin:16px 0}.brand-ready .story-brand-logo{height:130px;width:160px}.brand-ready .brand-caption{display:none}
#story-entry{display:grid;width:min(100%,380px);gap:12px;text-align:center;transition:opacity .5s,max-height .6s;max-height:0;opacity:0;visibility:hidden;overflow:hidden}.brand-ready #story-entry{max-height:330px;opacity:1;visibility:visible;margin-top:20px}
#story-entry h1{font-size:32px;margin:0;color:#ffdf9b;letter-spacing:-1px}#story-entry p{font-size:18px;line-height:1.65;margin:8px 0 10px;color:#bccce5}
.story-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 10%,#415c8c55,transparent 65%),linear-gradient(#070c19,#122643 75%,#192b40);pointer-events:none}.story-region-1{background:radial-gradient(ellipse at 50% 10%,#8c714155,transparent 65%),linear-gradient(#17131c,#423522 75%,#38251b)}.story-region-2{background:radial-gradient(ellipse at 50% 10%,#418c8955,transparent 65%),linear-gradient(#08131c,#123b43 75%,#192b40)}.story-region-3{background:radial-gradient(ellipse at 50% 10%,#8c484155,transparent 65%),linear-gradient(#180d19,#431f25 75%,#302131)}.story-region-4{background:radial-gradient(ellipse at 50% 10%,#86418c55,transparent 65%),linear-gradient(#110b22,#281b45 75%,#32234e)}
.story-moon{position:absolute;top:10%;left:calc(50% - 58px);width:116px;height:116px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#d9e9ff,#8aafd6 50%,#375980);box-shadow:0 0 80px #a1c7ff44,inset -24px -9px 4px #080d21da}.story-horizon{position:absolute;bottom:0;width:100%;height:50%;background:linear-gradient(165deg,transparent 42%,#081421 42.4%),linear-gradient(195deg,transparent 33%,#0d1c31 33.5%)}
.story-star{position:absolute;color:#a8d1ff;font-size:30px;animation:story-twinkle 3s ease-in-out infinite}.star-a{left:18%;top:17%}.star-b{right:20%;top:32%;font-size:20px;animation-delay:1s}
.story-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;color:#d6e4fa;width:100%;max-width:640px;justify-self:center;min-height:28px}.story-top small{font-size:12px;color:#adc3df;white-space:nowrap}
.story-panel{position:relative;z-index:1;align-self:center;justify-self:center;display:flex;flex-direction:column;gap:18px;width:min(100%,520px);box-sizing:border-box;padding:26px 24px;background:linear-gradient(150deg,#12233ce8,#0b1429f2);border:1px solid #7e98c977;border-radius:24px;box-shadow:0 25px 70px #0007}
.story-speaker{font-size:15px;color:#b8d9ff}.story-panel h1{font-size:28px;line-height:1.35;margin:0;color:#ffe3a3;word-break:keep-all}.story-panel p{font-size:20px;line-height:1.8;color:#dfe8f6;margin:0;word-break:keep-all}.story-objective{display:grid;gap:6px;padding-top:14px;border-top:1px solid #6c84ab44}.story-objective span{font-size:13px;color:#97b6dd}.story-objective b{font-size:16px;line-height:1.5;font-weight:500;color:#ffe0a3;word-break:keep-all}
.story-actions{position:relative;z-index:1;display:grid;gap:10px;width:min(100%,520px);justify-self:center;flex-shrink:0}.story-actions #story-skip{font-size:15px;background:#102039c9;border-color:#466085}.story-library{position:relative;z-index:1;align-self:center;justify-self:center;width:min(100%,520px)}.story-library h1{font-size:26px;margin:0 0 8px;color:#ffe3a3}.story-library>p{font-size:15px;margin:0 0 18px;color:#afc5e6}.story-entries{display:grid;gap:8px}.story-entries button{display:flex;align-items:center;gap:14px;text-align:left;background:#102039e8!important;padding:12px 14px!important}.story-entries button>span{font-size:20px;color:#ffe0a3;min-width:28px}.story-entries button>div{display:grid;gap:5px;flex:1;min-width:0}.story-entries b{font-size:17px;font-weight:600}.story-entries small{font-size:13px;color:#a7bddc}.story-entries i{font-size:24px;font-style:normal;color:#adc5eb}.story-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b6cbe9;font-size:16px}.story-pager button{font-size:15px!important;min-height:44px!important}
@keyframes story-twinkle{50%{opacity:.35;transform:scale(.8)}}
@media(max-height:740px){#story-layer{gap:12px;padding-top:max(12px,env(safe-area-inset-top))}.story-panel{padding:20px;gap:14px}.story-panel h1{font-size:25px}.story-panel p{font-size:18px;line-height:1.65}.story-moon{top:9%;width:90px;height:90px;left:calc(50% - 45px)}.brand-ready .story-brand-logo{height:100px}.brand-ready #story-entry{margin-top:8px}.story-library>p{margin-bottom:12px}.story-entries button{padding:9px 12px!important}.story-entries b{font-size:16px}.story-entries small{font-size:12px}}
@media(max-height:620px){#story-layer{gap:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.story-panel{padding:16px;gap:10px}.story-panel h1{font-size:23px}.story-panel p{font-size:17px;line-height:1.6}.story-speaker{font-size:13px}.story-objective{padding-top:9px;gap:4px}.story-objective b{font-size:15px}.story-actions{gap:7px}.story-library h1{font-size:22px}.story-library>p{font-size:13px}.story-entries{gap:6px}.story-entries button{padding:7px 10px!important}.story-entries b{font-size:15px}.story-entries button>div{gap:3px}}
@media(max-height:500px) and (min-width:600px){#story-layer.story-reading{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto minmax(0,1fr);gap:12px}.story-top{grid-column:1/-1;max-width:none}.story-reading .story-panel{width:100%;padding:16px;gap:8px}.story-panel p{font-size:16px;line-height:1.6}.story-panel h1{font-size:22px}.story-reading .story-actions{align-self:end}.story-moon{left:12%;top:33%}#story-layer.brand-opening{flex-direction:row;gap:35px}.brand-ready #story-entry{width:330px}.brand-ready .story-brand-logo{width:160px;height:150px}.brand-caption{display:none}.story-library{align-self:stretch}.story-archive .story-entries{grid-template-columns:repeat(2,minmax(0,1fr))}.story-library h1{font-size:20px}.story-library>p{margin:4px 0 8px}.story-archive .story-actions{grid-template-columns:1fr 1fr;max-width:620px;align-items:center}.story-entries b{font-size:14px}.story-entries button{gap:8px}.story-entries button>span{min-width:20px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.story-star{animation:none}.story-brand-logo,#story-entry{transition:none}}

/* Three-page illustrated conversations. */
#story-layer.story-reading{gap:10px;padding:16px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom))}.story-scene-content{position:relative;z-index:1;min-height:0;width:min(100%,680px);margin:auto;display:flex;height:100%;flex-direction:column;gap:10px}.story-scene-content>h1{font-size:24px;text-align:center;margin:0;color:#ffe1a0;flex-shrink:0}.story-cast{display:flex;justify-content:center;align-items:flex-end;flex:1;min-height:80px;max-height:300px}.story-cast canvas{width:48%;height:100%;object-fit:contain;opacity:.62;filter:brightness(.7);transform:scale(.9);transition:opacity .2s}.story-cast canvas.speaking{opacity:1;filter:drop-shadow(0 0 16px #d8bcfa66);transform:scale(1)}.story-scene-content .story-panel{position:relative;flex-shrink:0;margin:0;padding:16px 18px;max-width:none;align-self:stretch;background:#0d1932ed;border:1px solid #687ba3;border-radius:18px}.story-panel .story-dialogue{font-size:18px;line-height:1.6;margin:8px 0;color:#fff3cf}.story-panel .story-narration{font-size:14px;line-height:1.65;color:#c3d0e5;margin:0}.story-read-buttons{display:grid;grid-template-columns:1fr 2fr;gap:8px}.story-page-dots{display:flex;justify-content:center;gap:7px}.story-page-dots i{width:7px;height:7px;border-radius:50%;background:#536789}.story-page-dots i.active{width:22px;background:#ffe1a0;border-radius:5px}.story-reading .story-actions{gap:8px}.story-reading #story-skip{min-height:36px;padding:4px}
@media(max-height:700px){.story-scene-content>h1{font-size:21px}.story-scene-content .story-panel{padding:12px 14px}.story-panel .story-dialogue{font-size:16px;line-height:1.5}.story-panel .story-narration{font-size:13px;line-height:1.55}.story-reading .story-top{font-size:13px}.story-reading .story-actions button{min-height:42px}.story-cast{max-height:160px}}