:root{color-scheme:dark;--navy:#202739;--cream:#f1e6d1;--ink:#614b3c;--muted:#b9b2a5;--serif:'Songti SC','Noto Serif CJK SC','STSong','SimSun',Georgia,serif}

*{box-sizing:border-box}
html{min-height:100%;background:#1c2130}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 12%,#30394d 0%,#242b3d 42%,#1b2030 100%);color:var(--cream);font-family:var(--serif);-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid #eec38d;outline-offset:5px}
button:disabled{cursor:wait}
button[hidden],[hidden]{display:none!important}
.story-shell{width:min(1080px,calc(100% - 72px));margin:auto;padding:12px 0 32px}
.topbar{height:48px;display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:#c7bca8;letter-spacing:.13em}
.top-controls{display:flex;align-items:center;gap:22px}
.quiet-button{padding:8px 2px;border:0;background:transparent;color:#c7bca8;font-size:12px;letter-spacing:.07em}
.quiet-button:hover{color:var(--cream)}
.quiet-button span[aria-hidden]{font-size:15px;margin-right:4px}
.picture-frame{border:13px solid var(--cream);box-shadow:0 20px 60px #0005,0 2px 4px #0006;background:var(--cream)}
.stage{position:relative;width:100%;aspect-ratio:3/2;max-height:660px;overflow:clip;isolation:isolate;background:#151e2b;container-type:inline-size}
.scene-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;position:absolute;inset:0;user-select:none;pointer-events:none}
.intro-scene,.flight-scene,.bridge-scene{position:absolute;inset:0;overflow:clip}
.intro-scene{z-index:10;transition:opacity 1.4s,transform 2.4s cubic-bezier(.22,.61,.36,1)}
.intro-scene.leaving{opacity:0;transform:scale(1.18);pointer-events:none}
.desk-image{object-position:50% 50%}
.lamp-glow{position:absolute;width:65%;height:75%;left:-22%;top:21%;background:radial-gradient(ellipse,#fcb95a26,transparent 67%);pointer-events:none;animation:lamplight 6s ease-in-out infinite alternate}
.paper-note{position:absolute;width:40%;min-width:270px;max-width:420px;left:50%;top:57%;margin:0;padding:clamp(22px,3.5cqw,40px) clamp(25px,4.1cqw,47px) clamp(18px,2.6cqw,30px);transform:translate(-50%,-42%) rotate(-4deg);color:#604a3b;background:linear-gradient(135deg,#fff5dd,#eadcc0);box-shadow:4px 15px 24px #21120c66,0 1px 2px #2c190a66;isolation:isolate}
.paper-note:before{content:'';position:absolute;inset:0;opacity:.18;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23b09268' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E");z-index:-1}
.note-sender{font-size:clamp(14px,1.8cqw,19px);margin:0 0 15px;letter-spacing:.08em}
.note-invitation{font-size:clamp(25px,3.5cqw,37px);line-height:1.65;letter-spacing:.08em;font-weight:400;margin:0 0 24px;white-space:nowrap}
.note-invitation span{color:#7b5141}
.paper-button{position:relative;min-width:64px;min-height:44px;border:0;background:transparent;color:#876c54;padding:8px 10px;font-size:17px;letter-spacing:.08em;display:block;margin:0 0 0 auto;transition:color .3s}
.paper-button:after{content:"";position:absolute;left:11px;right:11px;bottom:8px;height:1px;background:#94735655;transform:rotate(-3deg);transition:background .3s}
.paper-button:hover{color:#543b2c}
.paper-button:hover:after{background:#947356aa}
.paper-button:disabled{opacity:.4}
.note-fold{position:absolute;bottom:0;right:0;width:20px;height:20px;background:linear-gradient(135deg,#dfcbaa 50%,#68544444 51%,transparent 65%);filter:drop-shadow(-1px -1px 1px #735c3b20)}
.flight-scene{z-index:2;opacity:0;background:radial-gradient(ellipse at 50% 50%,#1f3041,#060d1c);transition:opacity 1.2s}
.flight-scene.active{opacity:1}
#earth,#route{position:absolute;inset:0;width:100%;height:100%}
#route{pointer-events:none}
.aerial{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;opacity:0;will-change:transform,opacity}
.flight-vignette{position:absolute;inset:0;background:linear-gradient(0deg,#030a20a8,transparent 23%,transparent 75%,#06101e59);pointer-events:none}
.flight-caption{position:absolute;left:0;right:0;top:9%;text-align:center;text-shadow:0 2px 18px #000,0 1px 4px #0009}
.flight-caption p{font-size:clamp(24px,3.5cqw,38px);font-weight:400;letter-spacing:.2em;margin:0 0 12px}
.overlay-button{border:1px solid #f1e6d146;color:#f2e8d7;background:#17213357;backdrop-filter:blur(8px);padding:10px 16px;font-size:12px;border-radius:22px;min-height:38px;letter-spacing:.07em}
.overlay-button:hover{background:#172133a8;border-color:#f1e6d193}
#skip-flight{position:absolute;right:24px;bottom:54px}
.travel-progress{position:absolute;bottom:22px;left:24px;right:24px;display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.15em;color:#f0e3ccba}
.travel-progress>div{height:1px;flex:1;background:#f0e3cc33}
.travel-progress i{height:1px;background:#f3c98a;display:block;width:0;box-shadow:0 0 7px #ffd49a;position:relative}
.travel-progress i:after{content:'';position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#ffe5b9;box-shadow:0 0 12px #ffda9a}
.bridge-scene{z-index:3;opacity:0;pointer-events:none;transition:opacity 2s}
.bridge-scene.visible{opacity:1;pointer-events:auto}
.street-images{position:absolute;inset:0;will-change:transform;transform:scale(1.015)}
.snow-scene-image{opacity:0}
.bridge-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 100% 83%,#111b2b50,transparent 64%),linear-gradient(0deg,#18202c77 0%,transparent 48%,transparent 80%,#1a233650)}
.place-mark{position:absolute;top:24px;left:28px;opacity:0;transition:opacity 1.5s;color:#f5e9d5;text-shadow:0 1px 10px #0007;display:flex;flex-direction:column;gap:6px}
.place-mark.visible{opacity:1}
.place-mark>span{font-size:12px;letter-spacing:.32em}
.place-mark small{font-size:11px;letter-spacing:.15em;opacity:.85}
#snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dialogue{position:absolute;right:6%;bottom:14%;width:min(41%,310px);pointer-events:none;color:#f3ecdf;text-align:right;text-shadow:0 1px 6px #101722d9,0 2px 18px #101722a6}
#whisper-lines{display:grid}
.whisper-line{grid-area:1/1;align-self:end;font-size:clamp(15px,1.7cqw,18px);font-weight:400;line-height:2.05;letter-spacing:.04em;margin:0;opacity:0;transform:translateX(5px);white-space:normal;overflow-wrap:break-word}
.cloud-veil{position:absolute;inset:-10%;z-index:20;background:radial-gradient(ellipse at 30% 40%,#d3dbe4 0%,#b8c3ce 45%,#8999ad 100%);opacity:0;pointer-events:none;filter:blur(20px);transform:scale(1.2)}
.pause-shade{position:absolute;inset:0;z-index:25;background:#111b2f7d;backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:23px}
.pause-shade>span{font-size:26px;letter-spacing:.2em}
.pause-shade button{color:var(--cream);border:1px solid #e5d9c480;padding:10px 25px;border-radius:24px;background:#14223930;font-size:14px}
.load-status{text-align:center;font-size:12px;line-height:1.7;color:#b9b2a5;letter-spacing:.06em;margin:16px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{text-align:center}
.stage[data-scene="intro"] .flight-scene,.stage[data-scene="intro"] .bridge-scene{pointer-events:none}
.stage[data-scene="flight"] .intro-scene{pointer-events:none}
.stage[data-scene="bridge"] .intro-scene,.stage[data-scene="bridge"] .flight-scene{visibility:hidden;pointer-events:none}
.is-paused *{animation-play-state:paused!important}

@keyframes lamplight{from{opacity:.45}
to{opacity:.9}
}

@media(min-width:1600px){.story-shell{width:1150px}
.stage{max-height:710px}
}

@media(max-width:650px){
.story-shell{width:calc(100% - 24px);padding:4px 0 24px}

.topbar{height:48px;margin:0 4px;font-size:11px}

.top-controls{gap:18px}

.picture-frame{border-width:8px}

.stage{aspect-ratio:auto;height:calc(100svh - 92px);min-height:410px;max-height:720px}

.desk-image{object-position:50% 55%}

.paper-note{width:76%;min-width:0;top:55%;padding:26px 28px 24px;transform:translate(-50%,-40%) rotate(-4deg)}

.note-sender{font-size:15px;margin-bottom:13px}

.note-invitation{font-size:29px;line-height:1.65;margin-bottom:20px}

.paper-button{font-size:16px;min-width:60px;min-height:44px}

.street-images img{object-position:58% center}

.dialogue{right:6%;bottom:12%;width:72%;max-width:275px}

.whisper-line{font-size:15px;line-height:2.1;letter-spacing:.03em}

.place-mark{top:19px;left:18px}

.place-mark>span{font-size:10px}

.place-mark small{font-size:10px}

.flight-caption{top:12%}

.flight-caption p{font-size:29px}

.travel-progress{left:16px;right:16px;bottom:19px;font-size:10px}

#skip-flight{right:15px;bottom:49px;font-size:11px}

.quiet-button{font-size:11px;min-height:44px}

}

@media(max-width:360px){.paper-note{padding:23px}
.note-invitation{font-size:26px}
.whisper-line{font-size:14px}
.stage{min-height:385px}
}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
.intro-scene,.bridge-scene{transition-duration:.6s}
.street-images{transform:none}
}