:root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#243b48;background:#f3f3ec;font-synthesis:none;--ink:#243b48;--muted:#7c8a8c;--gold:#b6a47e;--ease:cubic-bezier(.2,.7,.2,1)}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #b6a47e;outline-offset:5px}button{color:inherit}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}.topbar{height:94px;padding:0 5.4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8ded66b}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;letter-spacing:.2em;font-size:18px}.brand svg{width:36px;height:36px;color:#6c8b8b}.brand i{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-left:21px;border-left:1px solid #ccd4cd;padding-left:25px}.quiet-button{border:0;background:none;display:flex;align-items:center;gap:8px;font-size:11px;color:#718282;letter-spacing:.06em}.quiet-button svg{width:20px;height:20px}.experience{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:7%;max-width:1320px;padding:40px 5.4% 50px;margin:0 auto;align-items:center}.scene-shell{position:relative;min-width:0;border-radius:0;overflow:hidden;box-shadow:0 26px 70px #183c5230,0 3px 12px #234a4d12;border:1px solid #cbdbde;background:#5c70b2}.scene{position:relative;width:100%;aspect-ratio:1000/1433;overflow:hidden;isolation:isolate;--px:0px;--py:0px;--light:brightness(1);--star-opacity:.8;--orbit-opacity:.3}.scene img{display:block;user-select:none;-webkit-user-drag:none;pointer-events:none;width:100%;height:auto}.sky{position:absolute;inset:0;transition:opacity 2s ease;z-index:-3;opacity:0}.sky-day{background:linear-gradient(175deg,#6269cc 0%,#8fbded 41%,#dbf5ed 77%,#5bb3ca 100%)}.sky-dusk{background:linear-gradient(165deg,#6059b3 0%,#ad82ce 30%,#efd1bc 65%,#95b7ce 100%)}.sky-night{background:linear-gradient(160deg,#282957,#505db7 38%,#a2b8d1 78%,#4585b1 100%)}[data-sky=day]>.sky-day,[data-sky=dusk]>.sky-dusk,[data-sky=night]>.sky-night{opacity:1}[data-sky=day].scene{--star-opacity:.22;--orbit-opacity:.3;--light:brightness(1.03) saturate(.98)}[data-sky=dusk].scene{--star-opacity:.5;--orbit-opacity:.34;--light:brightness(.92) sepia(.07)}[data-sky=night].scene{--light:brightness(.72) saturate(.84);--star-opacity:.9;--orbit-opacity:.27}.day-lit{filter:var(--light);transition:filter 2s}.sky-grain{position:absolute;inset:0;z-index:-1;opacity:.16;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='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.32' d='M0 0h160v160H0z'/%3E%3C/svg%3E");pointer-events:none}.scene>.stars{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--star-opacity);transition:opacity 2s;animation:twinkle 9s ease-in-out infinite alternate}.ornament{position:absolute;z-index:1;pointer-events:none}.parallax{transform:translate(calc(var(--px)*.45),calc(var(--py)*.45))}.jelly-one{width:13%;left:2%;top:4%}.jelly-two{width:10%;left:23%;top:3.8%}.jelly-three{width:9%;left:3%;top:20%}.whale{width:44%;left:57%;top:3%;transform:rotate(6deg) translate(calc(var(--px)*.4),calc(var(--py)*.4))}.butterfly-one{width:8%;left:15%;top:14%}.butterfly-two{width:8%;left:-1%;top:29%}.map{width:12%;right:1%;top:30%;transform:rotate(8deg)}.drift{animation:drift 7s ease-in-out infinite alternate}.jelly-two .drift{animation-delay:-3s;animation-duration:9s}.jelly-three .drift{animation-delay:-5s}.whale .drift{animation-duration:16s}.butterfly .drift{animation-duration:5s}.cloud{position:absolute;z-index:2;pointer-events:none}.cloud-one{width:28%;right:-4%;top:50.5%}.cloud-two{width:22%;left:42%;top:60%}.cloud-drift{animation:cloudDrift 35s ease-in-out infinite alternate}.cloud-two .cloud-drift{animation-delay:-17s;animation-duration:43s}.clock{position:absolute;z-index:3;left:11.4%;top:6.9%;width:75.8%;aspect-ratio:1;filter:drop-shadow(0 12px 18px #19335050)}.clock img{position:absolute;inset:0;width:100%;height:100%}.clock-window{position:absolute;inset:11.5%;border-radius:50%;overflow:hidden;background:#818baf}.clock-scenery{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#a8c2dc,#6e817f)}.clock-scenery img{object-fit:cover;filter:brightness(.84) saturate(.73);opacity:.95}.forest-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 75%,#a3bfee35,transparent 70%);transition:background 2s}.clock-frame{pointer-events:none;z-index:3}.clock-hand{z-index:4;transform-origin:50% 50%;will-change:transform;transition:opacity .7s}.clock-hub{z-index:5;transition:opacity .7s}.clock-toggle{position:absolute;z-index:7;width:16%;height:16%;left:42%;top:42%;border:0;border-radius:50%;background:transparent;padding:0}.hub-ring{position:absolute;inset:4px;border:1px solid #fbefb480;border-radius:50%;box-shadow:0 0 15px #e4e1ff50;opacity:0;transition:opacity .3s,transform .4s}.clock-toggle:hover .hub-ring,.clock-toggle:focus-visible .hub-ring{opacity:1;transform:scale(1.2)}.clock-hint{position:absolute;z-index:8;bottom:23%;left:0;width:100%;text-align:center;font-size:clamp(7px,.75vw,11px);letter-spacing:.14em;color:#fff5d1;text-shadow:0 1px 4px #273248;pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s}.clock:hover .clock-hint,.clock:focus-within .clock-hint{opacity:1;transform:none}.scope-window{position:absolute;inset:0;z-index:1;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.95);transition:opacity .9s,transform 1.6s var(--ease);background:#7c9b9c}.scope-landscape{position:absolute;inset:0;opacity:0;transition:opacity 1.1s}.scope-window[data-landscape=forest] .scope-forest,.scope-window[data-landscape=sea] .scope-sea,.scope-window[data-landscape=mountain] .scope-mountain{opacity:1}.scope-forest{background:radial-gradient(ellipse at 55% 90%,#c7dfca,#556d68)}.scope-forest img{object-fit:cover;transform:scale(1.14);filter:brightness(1.08) saturate(.8);animation:lensPan 26s ease-in-out infinite alternate}.lens-sky{position:absolute;inset:0;background:linear-gradient(#9dbdd0,#d6e7d6 65%,#62a6ba)}.clock .lens-wave-back{height:63%;top:42%;object-fit:fill;transform:scale(1.15);animation:lensWater 12s ease-in-out infinite alternate}.clock .lens-wave-front{height:55%;top:62%;object-fit:fill;animation:lensWater 8s ease-in-out infinite alternate-reverse}.clock .lens-dolphin{width:27%;height:auto;left:55%;top:58%;transform:rotate(-8deg);animation:drift 7s ease-in-out infinite alternate}.clock .lens-cloud{width:63%;height:auto;left:6%;top:23%;animation:cloudDrift 30s ease-in-out infinite alternate}.clock .lens-mountain{width:128%;height:auto;left:-19%;top:40%}.clock .lens-mountain-wave{width:115%;height:28%;top:81%;left:-8%;object-fit:fill;animation:lensWater 14s ease-in-out infinite alternate}.scope-shade{position:absolute;inset:0;box-shadow:inset 0 0 50px 10px #18212b90,inset 0 0 8px 4px #fff2bb50;border-radius:50%}.reticle{position:absolute;inset:0;width:100%;height:100%;stroke:#faf4cd90;stroke-width:1;fill:none}.scope-caption{position:absolute;bottom:12%;left:0;width:100%;text-align:center;color:#fff8dc;font-size:clamp(9px,1vw,13px);letter-spacing:.3em;text-shadow:0 1px 5px #18212b}.scene[data-view=scope] .scope-window{opacity:1;transform:scale(1)}.scene[data-view=scope] .clock-hand,.scene[data-view=scope] .clock-hub{opacity:0;pointer-events:none}.scene[data-view=scope] .clock-toggle{width:100%;height:100%;left:0;top:0;border-radius:50%}.scene[data-view=scope] .hub-ring{display:none}.scene[data-view=scope] .clock-hint{bottom:21%}.wave{position:absolute;left:0;width:100%;overflow:hidden;pointer-events:none;filter:var(--light);transition:filter 2s}.wave-track{position:absolute;inset:0 auto 0 0;width:400%;display:flex;animation:waveLoop 36s linear infinite;will-change:transform}.scene .wave-track img{flex:0 0 25%;width:25%;height:100%;object-fit:fill}.wave-track .mirrored{transform:scaleX(-1)}.wave-back{z-index:4;bottom:1%;height:27%}.wave-mid{z-index:7;bottom:-5%;height:24%;opacity:.96}.wave-front{z-index:8;bottom:-8%;height:21%}.wave-mid .wave-track{animation-duration:27s;animation-direction:reverse}.wave-front .wave-track{animation-duration:20s}.voyage-group{position:absolute;z-index:6;width:78%;left:-4%;bottom:3%;height:43%;transform-origin:48% 88%;animation:boatBob 8s ease-in-out infinite}.scene .boat,.scene .boat-front{position:absolute;width:100%;height:100%;left:0;bottom:0;object-fit:contain;object-position:bottom}.boat-front{clip-path:polygon(0 74%,35% 78%,100% 66%,100% 100%,0 100%);z-index:3}.pilot{position:absolute;z-index:2;width:44%;height:68%;left:32%;bottom:21%;border:0;padding:0;background:transparent;transform:rotate(-1deg)}.pilot img{height:100%;width:100%;object-fit:contain;object-position:bottom}.pilot:focus-visible{outline-offset:0;border-radius:35%}.lens-spark{position:absolute;width:8px;height:8px;border:1px solid #fff7be;border-radius:50%;right:2%;top:23%;box-shadow:0 0 14px #ffefa6;animation:spark 5s ease-in-out infinite}.scene>.dolphin{position:absolute;z-index:5;width:15%;right:22%;bottom:20%;transform:rotate(-14deg);animation:dolphinLeap 12s ease-in-out infinite}.scene-signature{position:absolute;z-index:10;bottom:2%;width:100%;text-align:center;color:#d5f3edbc;font-size:clamp(8px,.75vw,11px);letter-spacing:.3em;pointer-events:none}.story-panel{padding:18px 0 10px}.eyebrow{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:.18em;color:#7e8e8b}.live-dot{width:5px;height:5px;border-radius:50%;background:#9aac99;box-shadow:0 0 0 4px #9aac9917}.digital-clock{display:flex;align-items:baseline;gap:14px;margin:10px 0 24px}.digital-clock time{font-family:Georgia,"Times New Roman",serif;font-size:47px;letter-spacing:.025em;font-variant-numeric:tabular-nums;font-weight:400}.digital-clock>span{font-size:10px;color:#94a19b;letter-spacing:.1em}.sky-controls{display:flex;gap:3px;padding:4px;background:#e6ebe43d;border:1px solid #d8e0d7;border-radius:6px;margin-bottom:45px}.sky-controls button{border:0;background:none;color:#82918b;font-size:11px;padding:8px 5px;flex:1;border-radius:3px;transition:background .3s,color .3s}.sky-controls button[aria-pressed=true]{background:#fffef9;box-shadow:0 2px 5px #264b3d0b;color:#456861}.small-heading{font-size:10px;letter-spacing:.24em;color:#9b9d82;margin:0}.intro h1{font-family:Georgia,"Songti SC","SimSun",serif;font-weight:400;font-size:clamp(34px,3.2vw,43px);line-height:1.7;letter-spacing:.08em;margin:18px 0 19px}.intro-copy{font-size:12px;line-height:2.2;letter-spacing:.03em;color:#85908a;margin-bottom:31px}.primary-button{display:flex;align-items:center;justify-content:center;gap:13px;background:#3f625e;color:#f5f6e9;border:1px solid #3f625e;padding:14px 20px;border-radius:4px;font-size:12px;letter-spacing:.1em;transition:background .3s,transform .3s}.primary-button:hover{background:#31544e;transform:translateY(-2px)}.primary-button svg{width:24px;height:24px}.primary-button>span{margin-left:15px;font-size:17px;color:#c7d4bd}.interaction-note{font-size:9px;letter-spacing:.04em;color:#a3aaa0;margin:12px 0 0}.preview-letter{display:flex;align-items:center;gap:14px;border-top:1px solid #d7ded3;margin-top:48px;padding-top:25px;font-family:"Songti SC","SimSun",serif;font-size:12px;color:#9a9e8b;letter-spacing:.06em}.letter-stamp{color:#b4ab88;font-size:28px;line-height:1}.panel-footer{display:flex;gap:12px;align-items:center;margin-top:55px;font-size:9px;letter-spacing:.12em;color:#a2aca1}.footer-wave{font-size:30px;color:#8da9a0;line-height:1}.scope-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.text-button{border:0;background:transparent;padding:5px 0;color:#8d9b8c;font-size:10px}.text-button:hover{color:#3f625e}.landscape-controls{display:flex;gap:10px;margin-bottom:28px}.landscape-controls button{padding:0 0 7px;background:none;border:1px solid transparent;border-radius:4px;flex:1;font-size:10px;letter-spacing:.1em;color:#84958b;overflow:hidden}.landscape-controls button[aria-pressed=true]{border-color:#a9b7a1;color:#3f625e;background:#fffdf2}.thumb{display:block;height:48px;margin-bottom:6px;background-size:cover;background-position:center;border-radius:3px;opacity:.7}.thumb-sea{background-color:#a8cedb;background-image:url(assets/wave-back.webp)}.journal-heading{display:flex;align-items:center;gap:10px;margin-bottom:14px}.journal-heading h2{font-size:17px;font-weight:400;letter-spacing:.12em;margin:0}.note-kind{font-size:8px;color:#a19c81;border:1px solid #d8d4be;padding:2px 5px;border-radius:2px}.letter{background:linear-gradient(120deg,#fffdf5,#f8f5e9);border:1px solid #e6e3d2;border-radius:3px;padding:23px 22px 16px;box-shadow:0 6px 17px #6d705308;min-height:225px;position:relative}.letter:before{content:"";position:absolute;right:15px;top:17px;width:20px;height:27px;border:1px solid #b7c0a435;transform:rotate(9deg)}.letter-location{font-size:9px;letter-spacing:.15em;color:#adb197;margin:0 0 15px}.letter h3{font-family:Georgia,"Songti SC","SimSun",serif;font-size:18px;font-weight:400;line-height:1.5;color:#516f64;margin:0 0 14px;overflow-wrap:anywhere}.letter-body{font-size:11px;color:#8c927f;line-height:2.1;white-space:pre-line;margin:0 0 17px;overflow-wrap:anywhere;max-height:250px;overflow:auto}.letter-tail{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#a4ab96;font-size:9px}.note-list{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:15px 0 20px}.note-list button{width:18px;height:18px;border:0;background:none;position:relative;padding:0}.note-list button:before{content:"";width:4px;height:4px;border-radius:50%;background:#c9d0c0;position:absolute;inset:7px}.note-list button[aria-pressed=true]:before{background:#759785;width:13px;height:4px;left:2px;right:auto;border-radius:3px}.write-button{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;padding:11px;background:transparent;border:1px dashed #c3ceba;border-radius:4px;font-size:11px;color:#81917c}.write-button:hover{background:#edf0e6}.privacy-note{font-size:8px;line-height:1.8;color:#a3ac9c;text-align:center}.diary-view{animation:enter .6s var(--ease)}.diary-view~.panel-footer{margin-top:29px}.note-dialog{width:min(440px,calc(100% - 36px));border:1px solid #d4dccb;border-radius:10px;background:#f8f8ef;color:var(--ink);padding:28px;box-shadow:0 30px 100px #183b4c40}.note-dialog::backdrop{background:#18313c66;backdrop-filter:blur(5px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between}.dialog-heading h2{font-size:19px;font-weight:400;letter-spacing:.1em;margin:0}.close-dialog{border:0;background:none;font-size:25px;color:#8c9e8f}.note-dialog p{font-size:11px;color:#91a08d;line-height:1.8;margin:12px 0 22px}.note-dialog label{display:block;font-size:11px;letter-spacing:.04em;margin:18px 0 9px;color:#798c7a}.note-dialog input,.note-dialog textarea{display:block;width:100%;border:1px solid #d7dfce;border-radius:4px;background:#fffff8;color:#4c6554;padding:12px;outline:none;font-size:12px;line-height:1.8;resize:vertical}.note-dialog input:focus,.note-dialog textarea:focus{border-color:#93aa8d}.note-dialog input::placeholder,.note-dialog textarea::placeholder{color:#b3bcaa}.form-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:12px}.form-bottom small{font-size:10px;color:#a2ad98}.form-bottom .primary-button{font-size:11px;padding:11px 15px}.note-dialog .dialog-privacy{font-size:9px;margin:17px 0 0;color:#a3ae9c}.toast{position:fixed;z-index:100;bottom:25px;left:50%;max-width:90%;transform:translate(-50%,12px);padding:13px 20px;color:#f8faee;background:#426052eb;font-size:11px;border-radius:5px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 8px 25px #223c4a20}.toast.visible{opacity:1;transform:translate(-50%,0)}[data-motion=off] *,[data-motion=off] .wave-track{animation-play-state:paused!important}.scene[data-motion=off]{--px:0px!important;--py:0px!important}

@keyframes waveLoop{to{transform:translateX(-50%)}}@keyframes drift{from{transform:translateY(-5px) rotate(-1deg)}to{transform:translateY(8px) rotate(2deg)}}@keyframes boatBob{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-1.2%) rotate(1deg)}}@keyframes cloudDrift{from{transform:translateX(-5%)}to{transform:translateX(7%)}}@keyframes twinkle{from{opacity:calc(var(--star-opacity)*.65)}to{opacity:var(--star-opacity)}}@keyframes spark{0%,70%,100%{opacity:.3;transform:scale(.6)}80%{opacity:1;transform:scale(1.6)}}@keyframes dolphinLeap{0%,65%,100%{transform:translateY(28%) rotate(-15deg);opacity:.1}75%,84%{transform:translateY(-8%) rotate(5deg);opacity:1}90%{transform:translateY(15%) rotate(20deg);opacity:.7}}@keyframes lensPan{from{transform:scale(1.14) translate(-1%,-1%)}to{transform:scale(1.2) translate(1%,2%)}}@keyframes lensWater{from{transform:translateX(-3%) scale(1.15)}to{transform:translateX(3%) scale(1.15)}}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.experience{max-width:1380px;grid-template-columns:minmax(0,1fr) 350px;gap:100px}.topbar{padding:0 max(5.4%,calc((100vw - 1230px)/2))}}@media(max-width:1050px){.experience{grid-template-columns:minmax(0,1fr) 285px;gap:5%;padding-top:30px}.story-panel{padding:0}.intro h1{font-size:34px}.sky-controls{margin-bottom:30px}.intro-copy{font-size:11px}.panel-footer{margin-top:35px}.letter{padding:18px}.topbar{height:80px}.preview-letter{margin-top:30px}.digital-clock{margin-bottom:16px}.digital-clock time{font-size:40px}}@media(max-width:760px){.topbar{height:72px;padding:0 6%}.brand{font-size:16px;gap:9px}.brand i{display:none}.brand svg{width:30px}.quiet-button{font-size:10px}.experience{display:flex;flex-direction:column;gap:0;padding:22px 5% 35px;max-width:580px}.scene-shell{width:100%;border-radius:0}.story-panel{width:100%;padding:30px 4% 0;display:grid;grid-template-columns:1fr;position:relative}.time-block{display:flex;justify-content:space-between;align-items:center}.digital-clock{margin:0;gap:9px}.digital-clock time{font-size:33px}.digital-clock>span{font-size:8px}.eyebrow{font-size:9px}.sky-controls{margin:18px 0 30px;max-width:360px}.intro h1{font-size:33px;line-height:1.65;margin:15px 0}.intro-copy{font-size:12px}.intro .primary-button{width:100%}.interaction-note{text-align:center;font-size:9px}.preview-letter{margin-top:30px}.panel-footer{margin-top:28px;justify-content:center}.clock-hint{font-size:8px}.landscape-controls .thumb{height:62px}.letter{min-height:220px;padding:24px}.letter-body{font-size:12px}.letter h3{font-size:20px}.privacy-note{font-size:9px}.scope-top{margin-bottom:18px}.scene-signature{font-size:8px}.scene-shell{box-shadow:0 18px 40px #183c5225}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.diary-view{animation:none}}