/* Frame 0 and the film use identical cover cropping inside every viewport. */
.world{background-image:url('assets/journey-poster.webp?v=20261026-act3-review1');background-size:cover;background-position:50% 50%}
@supports(overflow:clip){#app{overflow:clip}}
#welcome{transition:opacity 180ms ease}
#app[data-stage=journey] #welcome{animation:none;opacity:0;pointer-events:none}
.journey-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;pointer-events:none;z-index:2}
#app[data-stage=journey].journey-has-frame .journey-film{opacity:1}
#app[data-stage=welcome] .sky-shade,#app[data-stage=journey] .sky-shade{background:none}
#app[data-stage=journey] .world{animation:none;transform:none}
#app[data-stage=journey] .ambient{transition-duration:180ms}
#app[data-stage=journey] .particles{opacity:0;transition:opacity 180ms}
#app[data-stage=journey] .journey p{display:none}
#app[data-stage=journey][data-journey-mode=preparing] .journey p{display:block;animation:appear .4s ease both}
#app[data-stage=journey] footer{opacity:0}
.journey-cover{position:absolute;inset:0;z-index:12;background:#f5eede;opacity:0;pointer-events:none;transition:opacity var(--handoff-cover-duration,160ms) linear}
.journey-cover-on .journey-cover{opacity:1}
@media(prefers-reduced-motion:reduce){
 .journey-film{display:none}
 .journey-cover{transition:none!important;transform:none!important}
}

/* A quiet pearl control, kept below the girl and her star. */
#app[data-stage=welcome],#app[data-stage=journey]{--journey-frame-bottom:env(safe-area-inset-bottom,0px)}
#app[data-stage=welcome] .world,#app[data-stage=journey] .world{bottom:var(--journey-frame-bottom)}
#app[data-stage=welcome] .journey-film,#app[data-stage=journey] .journey-film{height:calc(100% - var(--journey-frame-bottom))}
#app[data-stage=welcome] .ambient,#app[data-stage=journey] .ambient{top:calc((100% - var(--journey-frame-bottom)) / 2)}
.welcome-heading{top:8.7%;padding:0 18px}
.welcome h1{font-size:34px;line-height:1.38;margin:12px 0 8px}
.welcome-heading>p{margin:8px 0 0;font-size:11px;letter-spacing:1.8px}
.welcome-bottom{left:24px;right:24px;bottom:calc(env(safe-area-inset-bottom) + 8px);display:flex;flex-direction:column;align-items:center}
#start{position:relative;isolation:isolate;width:min(100%,286px);min-height:50px;padding:0 17px 0 24px;gap:17px;justify-content:space-between;border:1px solid #fffaf0;border-radius:27px;color:#615476;font-size:17px;letter-spacing:1.4px;background:linear-gradient(115deg,#f4edf7 0%,#fff8eb 74%,#f5e5ce 100%);box-shadow:inset 0 1px 0 #fff,0 4px 16px #586e8f26;transition:box-shadow .22s,border-color .22s,transform .16s}
#start:before{content:'';position:absolute;inset:3px;border:1px solid #c5aa7847;border-radius:inherit;pointer-events:none}
#start[aria-disabled=true]{filter:none;color:#71677f}
#start[aria-disabled=false]{border-color:#fff4ce;box-shadow:inset 0 1px 0 #fff,0 4px 18px #61739630,0 0 12px #fff4d655}
@media(hover:hover){#start:hover{box-shadow:inset 0 1px 0 #fff,0 7px 22px #425d8830}}
#start:active{transform:scale(.98);box-shadow:inset 0 1px 5px #cbb8a226,0 2px 7px #586e8f20}
.welcome-bottom .consent{margin:6px 0 0;min-height:34px;font-size:10px;gap:3px;color:#4d5578}
.welcome-bottom .consent input{width:18px;height:18px;flex-basis:18px;margin-right:4px;background:#fff8ef80;border-color:#6a7191}
.welcome-bottom .consent input:checked{background:#5a6187;border-color:#5a6187}
.welcome-bottom .consent input:checked:after{inset:0;font-size:13px}
.welcome-bottom .consent label,.welcome-bottom .privacy-link{padding:10px 0}
.welcome-bottom .consent-hint{position:absolute!important;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#app[data-stage=welcome] footer{display:none}
@media(max-height:720px){
 #app[data-stage=welcome],#app[data-stage=journey]{--journey-frame-bottom:calc(56px + env(safe-area-inset-bottom,0px));min-height:0}
 .welcome-heading{top:10.5%}
 .welcome h1{font-size:29px;line-height:1.3;margin:8px 0 6px}
 .welcome-heading>p{font-size:10px;margin-top:6px}
 .welcome-bottom{bottom:calc(env(safe-area-inset-bottom) + 7px)}
 #start{min-height:48px}
}
@media(max-width:350px){#start{width:264px;font-size:16px}.welcome-bottom{left:18px;right:18px}}
@media(prefers-reduced-motion:reduce){#start{transition:none}}

#app[data-stage=welcome] .scene:after,#app[data-stage=journey] .scene:after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--journey-frame-bottom) + 20px);z-index:1;background:linear-gradient(transparent 0%,#dce1f2 40%,#e8e2ef 100%);pointer-events:none}

/* User-supplied transparent artwork, shown verbatim inside cropped CSS viewports. */
#welcome .welcome-bottom{left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 5px)}
#welcome #start{display:block;position:relative;width:min(100%,324px);aspect-ratio:1828/357;height:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:hidden;isolation:isolate;color:inherit;filter:drop-shadow(0 3px 5px #75668918);transition:filter .2s,transform .15s}
#welcome #start:before,#welcome #start:after{content:none}
#welcome #start>img{position:absolute;max-width:none;width:118.81838%;height:auto;left:-10.39387%;top:-51.82073%;pointer-events:none;user-select:none}
#welcome #start[aria-disabled=true]{filter:drop-shadow(0 3px 5px #75668918)}
#welcome #start[aria-disabled=false]{filter:drop-shadow(0 0 5px #fff0b566) drop-shadow(0 3px 5px #75668920)}
#welcome #start:active{transform:scale(.975)}
@media(hover:hover){#welcome #start:hover{filter:brightness(1.035) drop-shadow(0 3px 7px #94776635)}}
#welcome .consent-art{display:block;position:relative;flex-shrink:0;width:min(100%,254px);height:44px;min-height:44px;margin:0;padding:0;gap:0;isolation:isolate}
#welcome .consent-art-frame{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1552/165;transform:translateY(-50%);overflow:hidden;pointer-events:none}
#welcome .consent-art-frame img{position:absolute;max-width:none;width:131.95876%;height:auto;left:-15.27062%;top:-184.84848%;pointer-events:none;user-select:none}
#welcome .consent-art #agree{position:absolute;z-index:3;left:calc(5.22% - 11px);top:calc(50% - 11px);width:22px;height:22px;min-height:0;margin:0;border:0;border-radius:50%;padding:0;background:none;appearance:none;cursor:pointer}
#welcome .consent-art #agree:checked{background:none;border:0}
#welcome .consent-art #agree:after{content:none}
#welcome .consent-art #agree:checked:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font:19px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:#5b536e;text-shadow:0 0 3px #fff6da}
#welcome .consent-art .consent-choice{position:absolute;z-index:2;left:0;top:0;width:48%;height:44px;padding:0;cursor:pointer}
#welcome .consent-art #privacy{position:absolute;left:48%;top:0;width:52%;height:44px;padding:0;border:0;border-radius:3px;background:none;box-shadow:none;font-size:inherit;color:inherit}
#welcome .consent-art #privacy:active{transform:none;background:#fff9e323}
#welcome .consent-art:has(#agree:focus-visible){outline:2px solid #fff3ac;outline-offset:2px;border-radius:6px}
@media(max-width:350px){#welcome #start{width:min(100%,280px)}#welcome .consent-art{width:min(100%,244px)}}
@media(prefers-reduced-motion:reduce){#welcome #start{transition:none}}

/* The authorization artwork is smaller; the independent touch targets stay 44px high. */
#welcome .consent-art{width:min(100%,216px)}
#welcome .consent-art #agree{left:calc(5.22% - 9.5px);top:calc(50% - 9.5px);width:19px;height:19px}
#welcome .consent-art #agree:checked:after{font-size:16px}
#welcome .welcome-heading-art{top:8.7%;left:0;width:100%;padding:0 18px}
#welcome .heading-art-frame{position:relative;width:100%;aspect-ratio:1424/690;overflow:hidden;pointer-events:none}
#welcome .heading-art-frame img{position:absolute;width:124.57865%;max-width:none;height:auto;left:-12.64045%;top:-21.73913%;user-select:none}
@media(max-height:720px){#welcome .welcome-heading-art{top:10.5%;padding:0 18px}}
@media(max-width:350px){#welcome .consent-art{width:min(100%,208px)}}

/* Icon-only sound toggle: a turning record when on, a quiet slash when off. */
#sound.sound{position:relative;width:44px;height:44px;min-width:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;backdrop-filter:none;color:#fff1cb;box-shadow:none;touch-action:manipulation;isolation:isolate}
#sound:before{content:'';position:absolute;inset:5px;border:1px solid #fff0c280;border-radius:50%;background:#163d7138;box-shadow:inset 0 0 7px #ffedbc0c;transition:background .22s,box-shadow .22s,border-color .22s;z-index:-1}
#sound .sound-disc{width:27px;height:27px;display:block;opacity:.78;transform-origin:center;animation:sound-record-turn 8s linear infinite;animation-play-state:paused;filter:drop-shadow(0 0 2px #fff0be24)}
#sound .sound-off-mark{position:absolute;left:9px;top:21px;width:26px;height:1.4px;border-radius:2px;background:currentColor;transform:rotate(-45deg);box-shadow:0 0 0 1.5px #194777a6;opacity:.9;transition:opacity .2s}
#sound[aria-pressed=true] .sound-disc{opacity:1;animation-play-state:running}
#sound[aria-pressed=true] .sound-off-mark{opacity:0}
#sound[aria-pressed=true]:before{border-color:#fff0c2cc;background:#234e7a59;box-shadow:inset 0 0 7px #ffedbc15,0 0 9px #ffe6a523}
#sound:active{transform:scale(.94)}
#app[data-stage=journey] #sound .sound-disc,.sound-suspended #sound .sound-disc{animation-play-state:paused}
#app[data-stage=report] #sound:before{background:#fff8;border-color:#a997b066}
#app[data-stage=report] #sound .sound-off-mark{box-shadow:0 0 0 1.5px #f5eede}
@keyframes sound-record-turn{to{transform:rotate(360deg)}}
@media(hover:hover){#sound:hover:before{border-color:#fff6d6;background:#42648b55}}
@media(prefers-reduced-motion:reduce){#sound .sound-disc{animation:none!important}#sound:before,#sound .sound-off-mark{transition:none}}