.prologue{position:fixed;inset:0;box-sizing:border-box;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#042644;color:#101923;touch-action:manipulation;overscroll-behavior:none;font-family:Arial,Helvetica,sans-serif}
.prologue::backdrop{background:#042644}
.prologue-fade{position:absolute;inset:0;z-index:6;background:#000;opacity:0;pointer-events:none}
.prologue[data-phase=riding],.prologue[data-phase=riding]::backdrop{background:transparent}
.prologue[data-phase=riding]>:not(.prologue-fade){display:none!important}
.prologue-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#b98e78}
.prologue-scene::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 54% 25% at 50% 48%,rgba(231,198,171,.2) 0%,rgba(231,198,171,.13) 46%,rgba(231,198,171,0) 100%);opacity:0;transition:opacity .7s ease;pointer-events:none}
.prologue[data-phase=title] .prologue-scene::after{opacity:1}
.prologue-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.prologue-scene[data-panel=aerial] .prologue-photo{position:absolute;top:0;left:0;width:100%;height:auto;min-height:0;object-fit:fill;object-position:center top;will-change:transform}
.prologue-credit{position:absolute;top:43%;left:16px;right:16px;margin:0;text-align:center;color:#102b38;font-size:clamp(27px,7.2vw,46px);font-weight:850;letter-spacing:-.8px;line-height:1.08;text-shadow:0 1px 10px #f3d8c088;opacity:1;pointer-events:none;z-index:2}
.prologue-credit>strong,.prologue-credit>span,.prologue-credit>small{opacity:0}
.prologue-credit strong{display:block;font:inherit;text-transform:uppercase;letter-spacing:.08em}
.prologue-credit span,.prologue-credit small{display:block;text-transform:uppercase}
.prologue-credit span{margin-top:14px;font-size:.46em;font-weight:750;letter-spacing:4px}
.prologue-credit small{margin-top:9px;font-size:.34em;font-weight:700;letter-spacing:2.5px}
.prologue-tap{position:absolute;top:0;bottom:0;width:50%;margin:0;padding:0;border:0;background:transparent!important;border-radius:0;box-shadow:none;z-index:4;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.prologue-left{left:0}.prologue-right{right:0}
.prologue-tap:focus{outline:none}.prologue-tap:focus-visible{outline:2px dashed #ffe48a;outline-offset:-5px}
.prologue-dialogue{position:absolute;inset:0;padding-bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;z-index:3}
.prologue-side,.prologue-bottom{position:absolute;display:flex;flex-direction:column;gap:6px}
.prologue-bubble{position:relative;margin:0;padding:6px 9px;border:2px solid #101923;border-radius:16px 17px 16px 4px;background:#fffdf0;box-shadow:3px 3px 0 #101923;font-size:var(--bubble-font,14px);font-weight:400;line-height:1.22;visibility:hidden}
.prologue-bubble strong{font-weight:900;font-size:1.08em}.prologue-bubble[data-speaker=You]{background:#dceef8;border-radius:16px 16px 4px 16px}
.prologue-bubble.is-visible{visibility:visible;animation:prologue-ink .45s ease-out}
.prologue-status{position:absolute;top:44%;left:20px;right:20px;margin:0;padding:18px;border-radius:12px;background:#062644e8;color:#fff;text-align:center;pointer-events:none;z-index:5;font-size:16px;line-height:1.4}
.prologue:not([data-phase=loading]):not([data-phase=error]) .prologue-status{width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.prologue [hidden]{display:none!important}
@keyframes prologue-ink{from{opacity:0}to{opacity:1}}
@media(max-height:650px){.prologue-bubble{padding:4px 7px}.prologue-side,.prologue-bottom{gap:5px}}
@media(orientation:landscape){.prologue-scene[data-panel=conversation] .prologue-photo{width:auto;max-width:100%;height:100%;object-fit:contain}.prologue-scene{background:radial-gradient(ellipse at bottom right,#7c918d,#273d46 70%)}}
@media(prefers-reduced-motion:reduce){.prologue-bubble.is-visible{animation-duration:.2s}.prologue-photo{will-change:auto}.prologue-scene::after{transition-duration:.12s}}

/* Let the first line appear after the aerial panel begins fading in. */
.prologue[data-line="0"] .prologue-bubble.is-visible{animation:prologue-ink .65s ease-out .45s both}
@media(prefers-reduced-motion:reduce){.prologue[data-line="0"] .prologue-bubble.is-visible{animation-duration:.2s;animation-delay:.1s}}