:root{--night:#080a1d;--indigo:#15183b;--lavender:#a898dc;--cyan:#75cad4;--moon:#eee9f7}body{color:var(--moon);background:var(--night);font-family:"Noto Serif SC","Songti SC",STSong,Georgia,serif}.night-story{display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,rgba(73,74,141,.34),transparent 35%),radial-gradient(circle at 17% 74%,rgba(59,116,134,.2),transparent 29%),linear-gradient(180deg,#0a0c23,#11132c 60%,#080a19)}
.ambient-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}.aurora{position:absolute;z-index:1;top:-20%;left:5%;width:90%;height:55%;border-radius:50%;background:conic-gradient(from 130deg,transparent,rgba(90,188,192,.14),rgba(145,105,200,.17),transparent 45%);filter:blur(38px);animation:aurora 17s ease-in-out infinite alternate;pointer-events:none}.horizon{position:absolute;z-index:3;right:0;bottom:0;left:0;height:18svh;display:flex;align-items:flex-end;justify-content:space-around;opacity:.42;pointer-events:none}.horizon::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,#070918)}.horizon i{position:relative;width:12%;height:var(--h,60%);background:linear-gradient(90deg,#080a18,#11152b);box-shadow:inset 5px 0 10px rgba(94,116,164,.08)}.horizon i:nth-child(1){--h:35%}.horizon i:nth-child(2){--h:70%}.horizon i:nth-child(3){--h:50%}.horizon i:nth-child(4){--h:82%}.horizon i:nth-child(5){--h:48%}.horizon i:nth-child(6){--h:64%}
.gift-tool{background:rgba(8,10,29,.48);border-color:rgba(198,205,255,.18)}.night-stage{position:relative;z-index:6;width:min(90vw,620px);min-height:100svh;padding:clamp(86px,12svh,116px) clamp(20px,7vw,54px) clamp(72px,9svh,88px);display:flex;flex-direction:column;align-items:center;text-align:center}.coordinates{width:100%;display:flex;justify-content:space-between;gap:16px;margin:0;color:rgba(205,211,242,.55);font:500 9px/1.4 system-ui,sans-serif;letter-spacing:.2em}.night-title{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,30px);width:100%;margin-top:clamp(34px,6svh,60px)}.night-title span{max-width:42%;overflow-wrap:anywhere;white-space:normal;font-weight:400;letter-spacing:.16em;text-shadow:0 0 34px rgba(172,157,234,.35)}.night-title i{color:var(--cyan);font:300 13px/1 system-ui,sans-serif;opacity:.7}.orbit-heart{width:clamp(205px,55vw,340px);margin:clamp(8px,2svh,18px) auto -8px}.orbit-heart svg{width:100%;overflow:visible}.orbit{fill:none;stroke:rgba(125,181,200,.13);stroke-width:1}.orbit-one{animation:orbit-shift 8s ease-in-out infinite alternate}.orbit-two{animation:orbit-shift 10s -3s ease-in-out infinite alternate-reverse}.heart-line{fill:rgba(106,100,171,.04);stroke:url(#nightLine);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:url(#nightGlow)}.traveler{fill:#e9fbff;filter:url(#nightGlow);opacity:0}.night-copy{display:grid;gap:7px;max-width:34em;margin-top:auto;color:rgba(238,233,247,.86);font-size:clamp(13px,3.6vw,17px);line-height:1.72;letter-spacing:.08em}.message-line{display:block;opacity:0}.night-ending{display:grid;justify-items:center;gap:7px;margin-top:clamp(28px,5svh,48px)}.night-ending>span{color:var(--cyan);font:600 8px/1.3 system-ui,sans-serif;letter-spacing:.28em}.night-ending time{font:400 clamp(19px,5vw,27px)/1.2 Georgia,serif;letter-spacing:.18em}.night-ending .gift-action{min-height:40px;margin-top:12px;color:var(--night);background:linear-gradient(90deg,#b9e0df,#cabbe9);font:700 11px/1 system-ui,sans-serif;letter-spacing:.09em;box-shadow:0 10px 32px rgba(111,188,200,.15)}
.scene{opacity:0}.is-playing .scene-1{animation:night-in 1.2s .4s both}.is-playing .scene-2{animation:night-in 1.4s 1.8s both}.is-playing .scene-3{animation:night-in 1s 3s both}.is-playing .heart-line{animation:trace 3.8s var(--ease-cinematic) 3.4s forwards}.is-playing .traveler{animation:traveler-in .8s 3.6s both}.is-playing .scene-4{animation:night-in .4s 6.2s both}.is-playing .message-line{animation:sentence 1.1s var(--ease-cinematic) calc(6.5s + var(--line-index)*.85s) forwards}.is-playing .scene-5{animation:night-in 1.3s 9.7s both}
@keyframes night-in{from{opacity:0;transform:translateY(10px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}@keyframes trace{to{stroke-dashoffset:0}}@keyframes traveler-in{to{opacity:1}}@keyframes sentence{from{opacity:0;letter-spacing:.18em;filter:blur(3px)}to{opacity:1;letter-spacing:.08em;filter:none}}@keyframes aurora{to{transform:translate3d(8%,6%,0) rotate(10deg);opacity:.74}}@keyframes orbit-shift{to{transform:translateY(4px) scale(1.02)}}
@media(max-height:740px){.night-stage{padding-top:72px;padding-bottom:48px}.night-title{margin-top:25px}.orbit-heart{width:185px}.night-copy{font-size:13px}.night-ending{margin-top:20px}.night-ending .gift-action{margin-top:7px}}@media(max-width:390px){.coordinates span{display:none}.night-title{gap:9px}.gift-footer-mark{opacity:.35}}