*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#799ca9;color:#fff7e7;font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ffe0a7;outline-offset:5px}#experience{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:360px;overflow:hidden;--grade-saturation:1;--grade-contrast:1.03;--grade-sepia:.025;--grain-opacity:.035}#world{display:block;width:100%;height:100%;filter:saturate(var(--grade-saturation)) contrast(var(--grade-contrast)) sepia(var(--grade-sepia));touch-action:pan-y}#window-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2;transition:opacity .65s,filter 1.2s}#experience[data-view=mirror] #window-frame{opacity:0}#experience[data-weather=night] #window-frame{filter:brightness(.5) saturate(.7)}#experience[data-weather=dusk] #window-frame{filter:sepia(.15) brightness(.88)}#experience[data-weather=snow] #window-frame{filter:brightness(.93) saturate(.65)}#experience[data-weather=rain] #window-frame{filter:brightness(.7) saturate(.7)}#glass-effects{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.8}.grain{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:var(--grain-opacity);mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.vignette{position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(180deg,#0a263840,transparent 18%,transparent 66%,#0c203c65),radial-gradient(ellipse at center,transparent 45%,#071b3028 100%)}header{position:absolute;left:34px;right:34px;top:25px;z-index:8;display:flex;justify-content:space-between;align-items:center;gap:20px;text-shadow:0 1px 8px #14324290}.wordmark{color:inherit;text-decoration:none;font:17px "SimSun",serif;letter-spacing:.23em}.wordmark span{display:block;font:7px/2.8 Georgia,serif;letter-spacing:.16em;opacity:.7}.top-tools{display:flex;gap:25px;font-size:11px}.top-tools button{padding:8px 0}.top-tools span{opacity:.6;margin-left:3px}.view-switch{position:absolute;z-index:8;left:50%;top:28px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;background:#18344355;border:1px solid #f5edda2a;backdrop-filter:blur(8px)}.view-switch button{font-size:11px;letter-spacing:.1em;padding:8px 16px;opacity:.6;white-space:nowrap}.view-switch button[aria-pressed=true]{background:#f6e9ceeb;color:#294451;opacity:1}.caption{position:absolute;z-index:7;left:5%;bottom:210px;pointer-events:none;text-shadow:0 2px 15px #0b294f80;transition:opacity .4s}.caption>p:first-child{font:8px Georgia,serif;letter-spacing:.2em;opacity:.7;margin:0 0 11px}.caption h1{font:400 clamp(20px,2.3vw,32px)/1.5 "Songti SC","SimSun",serif;letter-spacing:.15em;margin:0 0 9px}.caption>p:last-child{font-size:11px;letter-spacing:.12em;opacity:.75;margin:0;line-height:1.9}#experience[data-view=mirror] .caption{left:34px;bottom:198px}.caption h1{max-width:85vw}footer{position:absolute;z-index:8;left:34px;right:34px;bottom:30px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px}.window-dock{display:flex;align-items:center;gap:20px}.dock-label{font-size:10px;letter-spacing:.2em;writing-mode:vertical-rl;opacity:.75}.weather-windows{display:flex;gap:13px}.weather-window{position:relative;width:69px;padding:0;opacity:.72;transition:opacity .25s,transform .25s}.weather-window:hover,.weather-window[aria-pressed=true]{opacity:1;transform:translateY(-4px)}.preview{display:block;position:relative;width:100%;height:91px;border:3px solid #6b5a45;border-radius:16px 16px 3px 3px;outline:1px solid #a8936b99;background-size:auto 100%;background-position:center;box-shadow:0 4px 18px #122b3f35;overflow:hidden}.preview::after{content:"";position:absolute;inset:0;border:1px solid #e3d5ae55;box-shadow:inset 3px 0 7px #061c3a40;pointer-events:none}.weather-window[aria-pressed=true] .preview{outline:2px solid #ffe1a0;box-shadow:0 0 20px #ffd48935}.sunny{background-image:url('./assets/sky.png')}.dusk{background-image:url('./assets/dusk.png')}.night{background-image:url('./assets/aurora-sky.png');background-color:#102345}.snow{background-image:url('./assets/snow-starry-sky.png');background-color:#c4d3de}.rain{background-image:url('./assets/storm-sky.png');background-color:#5b7382}.weather-name{display:block;margin-top:10px;font-size:11px;letter-spacing:.15em}.weather-index{display:block;margin-top:4px;font:8px Georgia,serif;opacity:.45}.playback{display:flex;gap:22px;align-items:center;padding-bottom:20px;font-size:10px;letter-spacing:.06em}.playback button{padding:8px 0;white-space:nowrap}.filter-control{display:flex;align-items:center;gap:9px;white-space:nowrap}.filter-control input{width:65px;height:2px;accent-color:#efdcaf}.filter-control output{font-size:8px;opacity:.65;min-width:27px}.hint{position:absolute;z-index:8;bottom:10px;right:34px;font-size:9px;letter-spacing:.08em;opacity:.55;margin:0;pointer-events:none}#curtain{position:absolute;inset:0;z-index:12;opacity:0;pointer-events:none;background:#dce4de;transition:opacity .35s}#curtain.active{opacity:1}#restore{display:none;position:absolute;z-index:9;right:22px;top:22px;font-size:11px;padding:10px 14px;background:#18364770;border:1px solid #ffffff25}.clean header,.clean footer,.clean .caption,.clean .hint,.clean .view-switch{opacity:0;pointer-events:none}.clean #restore{display:block}header,footer,.hint,.view-switch{transition:opacity .35s}dialog{background:#263f4df5;color:#f8efdc;border:1px solid #fff1ce30;padding:34px;width:min(430px,calc(100% - 32px));box-shadow:0 20px 100px #0c253755}dialog::backdrop{background:#152e4360;backdrop-filter:blur(6px)}dialog h2{font:400 27px "SimSun",serif;margin:16px 0 26px}dialog p{font-size:12px;line-height:2;opacity:.82}dialog small{font-size:10px;line-height:1.8;opacity:.6}.eyebrow{font-size:10px!important;letter-spacing:.2em}dl{display:grid;grid-template-columns:1fr 1.3fr;font-size:12px;gap:14px}dd{margin:0;opacity:.65}#help-close{float:right;font-size:10px}#loading{position:absolute;inset:0;z-index:20;background:#aec3c6;color:#334d5a;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .8s,visibility .8s}.loading-brand{font:24px/2 "SimSun",serif;letter-spacing:.3em}.loading-line{height:1px;width:150px;background:#53707a30;overflow:hidden;margin:15px 0}.loading-line span{display:block;width:55%;height:1px;background:#53707a;animation:passing 2.2s ease-in-out infinite}#loading-text{font-size:11px;letter-spacing:.15em}#loading.done{opacity:0;visibility:hidden}#error{position:absolute;inset:0;z-index:25;background:#aec3c6;color:#334d5a;padding:25vh 10vw}#error button{padding:12px 0;border-bottom:1px solid}#error h2{font-weight:400}#error p{font-size:13px;line-height:1.8}@keyframes passing{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@media(max-width:760px){header{left:20px;right:20px;top:20px}.wordmark{font-size:14px}.wordmark span{font-size:6px;letter-spacing:.1em}.top-tools{gap:16px;font-size:10px}#fullscreen{display:none}.view-switch{top:83px}.view-switch button{padding:7px 13px;font-size:10px}.caption{left:22px!important;bottom:229px!important}.caption h1{font-size:20px;line-height:1.7}.caption>p:last-child{font-size:10px}.caption>p:first-child{font-size:7px}footer{left:20px;right:20px;bottom:max(36px,env(safe-area-inset-bottom));gap:22px;flex-direction:column;align-items:stretch}.window-dock{gap:9px;justify-content:center}.dock-label{display:none}.weather-windows{gap:12px;justify-content:space-between;width:100%;max-width:390px}.weather-window{width:calc((100vw - 88px)/5);max-width:69px}.preview{height:75px;border-radius:13px 13px 2px 2px}.weather-name{font-size:10px;margin-top:8px}.weather-index{font-size:7px}.playback{justify-content:space-between;gap:12px;padding-bottom:0;font-size:10px}.filter-control{gap:6px}.filter-control input{width:51px}.hint{bottom:13px;right:20px;left:20px;text-align:center;font-size:8px}#window-frame{width:145%;max-width:none;left:-4%;object-fit:fill}#experience[data-view=mirror] .caption>p:last-child{max-width:290px}}
@media(max-height:550px) and (min-width:761px){header{top:15px}.view-switch{top:15px}.caption{bottom:160px!important}.caption h1{font-size:23px}footer{bottom:20px}.preview{height:65px}.weather-window{width:52px}.hint{bottom:5px}.playback{padding-bottom:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

#experience[data-weather=rain] #window-frame{filter:brightness(.8) saturate(.92) sepia(.12)}

.autumn{background-image:url('./assets/autumn-sky.png');background-color:#d9b176}
#journey-toggle{border:1px solid #f3d9a17a;border-radius:24px;padding:9px 13px;letter-spacing:.08em;background:#293e4d40;white-space:nowrap}
#journey-toggle[aria-pressed=true]{background:#f1dfb7;color:#263b47}
.journey-info{display:none;position:absolute;left:34px;bottom:104px;z-index:8;pointer-events:none;text-shadow:0 2px 8px #132b49}
.journey-info p{font-size:11px;letter-spacing:.12em;margin:0 0 13px;opacity:.85}
#journey-progress{width:180px;height:1px;background:#f5e5bd35}
#journey-progress span{display:block;width:var(--progress,0%);height:100%;background:#f3dfb3}
#experience[data-mode=loop] .window-dock{display:none}
#experience[data-mode=loop] .journey-info{display:block}
#experience[data-mode=loop] footer{justify-content:flex-start}
#experience[data-mode=loop] .caption{bottom:165px!important}
#experience[data-mode=loop] .playback{padding-bottom:0}
.clean .journey-info{opacity:0}
@media(max-width:760px){.weather-windows{gap:8px}.weather-window{width:calc((100vw - 80px)/6);max-width:60px}.preview{height:68px}.playback{gap:8px;font-size:9px}.filter-control input{width:40px}#journey-toggle{padding:9px 10px;font-size:10px}.journey-info{left:22px;bottom:108px}#experience[data-mode=loop] .caption{bottom:178px!important}.caption>p:last-child{max-width:315px}.weather-name{letter-spacing:.05em}}

#experience[data-view] #window-frame{filter:brightness(var(--frame-brightness,1)) saturate(.87)}