:root{color-scheme:light;--cream:#fff6db;--ink:#3d4773}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b224c}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--cream);display:grid;place-items:center}
button,input{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid #fff3ac;outline-offset:5px}
button:active{transform:scale(.975)}
[hidden]{display:none!important}
#app{width:100%;max-width:480px;height:100svh;min-height:570px;max-height:1100px;position:relative;isolation:isolate;overflow:hidden;background:#17569b;--header-top:29px;--header-left:26px;--header-right:24px}
#app > .site-header{position:absolute;z-index:10;top:calc(env(safe-area-inset-top) + var(--header-top));left:var(--header-left);right:var(--header-right);height:44px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:"Songti SC",STSong,serif;font-size:13px;letter-spacing:2px}
.sound{color:var(--cream);border:1px solid #fff5dc50;background:#174c8645;backdrop-filter:blur(10px);border-radius:20px;padding:8px 9px;display:flex;gap:6px;align-items:center;font-size:10px;letter-spacing:1px}
.scene,.world,.sky-shade,.particles{position:absolute;inset:0}
.scene{z-index:-1}
.world{background-image:url('assets/journey-poster.webp?v=20261026-act3-review1');background-size:cover;background-position:center;transition:filter .4s}
.sky-shade{background:linear-gradient(#052e6b28,transparent 35%,transparent 75%,#d8d8f630)}
.particles i{position:absolute;background:#ffefc5;border-radius:50%;box-shadow:0 0 8px #fff6c9;animation:twinkle 3s infinite alternate;pointer-events:none}
.screen{position:absolute;inset:0}
.eyebrow{font-size:9px;letter-spacing:3px;font-weight:400;opacity:.85}
.welcome-heading{position:absolute;top:10.5%;left:0;width:100%;text-align:center;text-shadow:0 2px 16px #16498940}
.welcome h1{font-family:"Kaiti SC",STKaiti,"Songti SC",serif;font-weight:400;font-size:35px;line-height:1.4;letter-spacing:4px;margin:17px 0 9px}
.welcome-heading p{font-size:12px;letter-spacing:2px;margin:10px 0}
.welcome-bottom{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 29px);left:28px;right:28px;text-align:center;color:var(--ink)}
.primary{width:100%;min-height:58px;border:1px solid #fffdf1;border-radius:40px;background:linear-gradient(112deg,#e9ddff 5%,#f9dfea 60%,#ffedce);box-shadow:inset 0 0 17px #fff9,0 5px 22px #76659a1c;display:flex;align-items:center;justify-content:center;gap:22px;color:#424773;font-family:"Songti SC",STSong,serif;font-size:19px;letter-spacing:1px;transition:box-shadow .2s,transform .2s}
.primary:hover{box-shadow:inset 0 0 20px #fff,0 0 22px #fff5cc55}
.primary[aria-disabled=true]{filter:saturate(.7)}
.consent{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:15px;white-space:nowrap;font-size:10px;letter-spacing:.2px}
.consent input{appearance:none;flex:0 0 15px;width:15px;height:15px;border:1px solid #606b94;border-radius:50%;margin:0 5px 0 0;background:#ffffff30;cursor:pointer;position:relative}
.consent input:checked{background:#475d90;border-color:#475d90}
.consent input:checked:after{content:'✓';position:absolute;inset:-1px;color:white;text-align:center;font-size:12px}
.consent label{cursor:pointer;padding:8px 0}
.privacy-link{border:0;background:none;color:#3b4876;padding:8px 0;font-size:10px;text-decoration:underline;text-underline-offset:3px}
.consent-hint{font-size:9px;letter-spacing:1px;margin:3px 0 0;min-height:14px;opacity:.75}
.consent-hint.error{color:#8c344c;opacity:1}
.load-heading{position:absolute;top:19%;left:32px;right:32px;text-align:center}
.load-heading h1{font-family:"Songti SC",serif;font-size:29px;font-weight:400;letter-spacing:4px;line-height:1.8;margin:18px 0}
.load-heading p{font-size:11px;letter-spacing:2px}
.load-bottom{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 69px);left:40px;right:40px;color:#3d4773}
.progress-copy{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;letter-spacing:1px;margin-bottom:17px}
.progress-copy b{font-family:Georgia,serif;font-size:29px;font-weight:400}
.progress-copy small{font-size:13px;margin-left:3px}
#progress{height:5px;border:1px solid #fff8;border-radius:5px;background:#929bd32b}
#fill{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#ecdbff,#ffdcaa);position:relative;transition:width .18s linear}
#fill span{position:absolute;right:-9px;top:-11px;font-size:24px;color:#fff0bc;text-shadow:0 0 4px #fcba72,0 0 16px #fff8dc}
.micro{text-align:center;font-size:10px;letter-spacing:1px;margin-top:23px}
.text-button{display:block;border:0;background:none;margin:auto;color:#3d4773;text-decoration:underline;font-size:12px;padding:12px}
.loading~footer{opacity:.6}
footer{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 10px);left:0;width:100%;text-align:center;color:#53648b80;font-size:7px;letter-spacing:2px;pointer-events:none}
#app[data-stage=loading] .world{filter:brightness(.82) saturate(.92)}
#app[data-stage=welcome] .welcome{animation:appear 1.2s both}
.journey{pointer-events:none}
.journey p{position:absolute;bottom:13%;width:100%;text-align:center;font-size:12px;letter-spacing:2px;text-shadow:0 1px 10px #28435c;animation:appear .6s both}
.skip{pointer-events:auto;position:absolute;right:24px;bottom:calc(env(safe-area-inset-bottom) + 34px);background:#163e6a40;border:1px solid #fff5;color:white;border-radius:20px;font-size:10px;padding:10px 14px;backdrop-filter:blur(8px)}
#app[data-stage=journey] header{opacity:0;transition:opacity .4s}
.report{background:linear-gradient(#fff6e7f5 0%,#fff5e8ec 60%,#ecdcf3ac);color:#565075;animation:appear 1s both}
.report-content{padding:calc(env(safe-area-inset-top) + 119px) 30px 35px;text-align:center;position:absolute;inset:0;overflow:auto}
.report-star{font-size:57px;color:#c8a667;margin:24px 0 4px}
.report-year{font-family:Georgia,serif;font-size:16px;letter-spacing:5px;color:#9b83a5}
.report h1{font-family:"Songti SC",serif;font-weight:400;font-size:29px;letter-spacing:3px;line-height:1.7;margin:18px 0}
.divider{color:#c5a777;font-size:13px}
.report p{font-size:12px;line-height:2.1;letter-spacing:1px}
.memory{margin:28px auto 14px;display:flex;flex-direction:column;gap:12px;font-size:10px;letter-spacing:1px}
.memory strong{font-family:Georgia,serif;font-size:42px;font-weight:400;color:#665583;letter-spacing:1px}
.memory small{font-family:"Songti SC",serif;font-size:13px}
.demo-label{font-size:9px;opacity:.55}
.report .primary{margin-top:28px;min-height:49px;font-size:14px}
#app[data-stage=report] header{color:#625577}
#app[data-stage=report] .brand{color:#625577}
#app[data-stage=report] .sound{color:#625577;background:#fff3;border-color:#62557733}
dialog{position:absolute;top:auto;bottom:0;left:0;right:0;margin:0 auto;width:100%;max-width:480px;max-height:86%;border:0;border-radius:26px 26px 0 0;padding:12px 25px calc(env(safe-area-inset-bottom) + 22px);color:#4d4e73;background:#fff9f0;box-shadow:0 -10px 60px #182b5844}
dialog::backdrop{background:#0b214d88;backdrop-filter:blur(6px)}
.sheet-handle{width:34px;height:3px;border-radius:3px;background:#b6acc7;margin:0 auto 25px}
.sheet-head{display:flex;align-items:center;justify-content:space-between}
.sheet-head .eyebrow{font-size:8px;letter-spacing:1.5px}
.close{border:0;background:#ede7f0;color:#5b567b;border-radius:50%;width:30px;height:30px;font-size:24px;line-height:1}
h2{font-family:"Songti SC",serif;font-size:23px;font-weight:400;margin:18px 0}
.sheet-body{max-height:44svh;overflow:auto;overscroll-behavior:contain;padding-right:5px;font-size:12px;line-height:1.9}
.sheet-body h3{font-size:13px;margin:20px 0 4px}
.sheet-body p{margin:6px 0}
.sheet-note{text-align:center;font-size:10px;opacity:.6;margin:12px 0 0}
dialog .primary{font-size:15px;min-height:48px;margin-top:20px}
#notice{position:absolute;left:20px;right:20px;top:calc(env(safe-area-inset-top) + 78px);z-index:20;border:1px solid #fff7;background:#fff7e9ed;color:#585775;border-radius:16px;padding:12px 15px;text-align:center;font-size:11px;box-shadow:0 4px 25px #132b5a22}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes twinkle{from{opacity:.1;transform:scale(.6)}to{opacity:.85;transform:scale(1.1)}}
@media(min-width:600px){
 body{min-height:100svh;padding:24px;background:radial-gradient(ellipse at 50% 40%,#294979,#101e3d 70%)}
 #app{height:min(844px,calc(100svh - 48px));width:min(390px,100%);border-radius:28px;box-shadow:0 30px 100px #050e2b88;border:1px solid #fff2}
 dialog{max-width:390px}
}
@media(max-height:720px){
 .welcome-heading{top:12%}
 .welcome h1{font-size:30px;line-height:1.35;margin:12px 0}
 .welcome-bottom{bottom:calc(env(safe-area-inset-bottom) + 22px)}
 .primary{min-height:49px;font-size:17px}
 .consent{margin-top:8px}
 .report-content{padding-top:100px}
 .report-star{margin-top:15px;font-size:35px}
 .report h1{font-size:25px;margin:10px 0}
 .memory{margin:18px auto 12px}
 .report .primary{margin-top:18px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
 .particles{display:none}
 .world{will-change:auto}
}