@charset "UTF-8";
:root{color-scheme:dark;--ink:#f0eee5;--muted:#bdc8c9;--warm:#dfbaa0;--serif:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;--sans:"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:#192e38;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--warm);outline-offset:7px}button{border:0}a{color:inherit;text-decoration:none}svg{display:block}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.experience{position:relative;isolation:isolate;width:100%;height:100svh;min-height:780px;overflow:hidden;background:linear-gradient(140deg,#182e3a,#34505c)}
.landscape{position:absolute;inset:0;background:url("assets/winter-background.svg") center bottom / cover no-repeat;z-index:-5}.sky-light{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,35,44,.69),rgba(22,43,52,.27) 43%,transparent 70%);z-index:-3}.warmth{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 68%,#c6a06b22,transparent 42%);opacity:0;transition:opacity 3s;pointer-events:none;z-index:-2}.vignette{position:absolute;inset:0;background:linear-gradient(180deg,#11263142,transparent 20%,transparent 70%,#112732c9);z-index:2;pointer-events:none}.experience:after{content:"";position:absolute;inset:0;opacity:.035;z-index:8;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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23n)'/%3E%3C/svg%3E")}
#snow{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.site-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:38px 4.7%}.brand{display:flex;align-items:center;gap:14px}.brand-star{height:31px;width:31px;fill:none;stroke:var(--warm);stroke-width:1}.brand>span{font-family:var(--serif);font-size:21px;letter-spacing:5px}.brand small{display:block;font-family:Georgia,serif;font-size:7px;letter-spacing:2.1px;margin-top:8px;color:#c1ccca}.header-right{display:flex;align-items:center;gap:26px;font-size:11px;letter-spacing:2px;color:#c3cdcb}.header-divider{width:1px;height:16px;background:#bdc7c333}.sound-button{display:flex;align-items:center;gap:10px;padding:10px 0;background:none;font-size:10px;letter-spacing:1px}.sound-bars{display:flex;align-items:center;gap:3px;height:17px}.sound-bars i{height:5px;width:2px;background:#d4c0a7;border-radius:2px;transition:height .5s}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:8px}.sound-bars i:nth-child(4){height:15px}.sound-button[aria-pressed="true"] .sound-bars i{animation:sound-wave 1.2s ease-in-out infinite alternate}.sound-button[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:-.3s}.sound-button[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:-.6s}.sound-button[aria-pressed="true"] .sound-bars i:nth-child(4){animation-delay:-.9s}
.story-copy{position:absolute;left:10%;top:27%;z-index:5;animation:reveal-copy 1.8s ease both}.eyebrow{display:flex;align-items:center;gap:12px;font:9px Georgia,serif;letter-spacing:3.5px;color:#d0cabb}.tiny-line{width:30px;height:1px;background:#c6ae91}h1{font-family:var(--serif);font-size:clamp(43px,4.3vw,72px);font-weight:400;line-height:1.55;letter-spacing:5px;margin:25px 0 8px;text-shadow:0 3px 25px #172c3777}.title-accent{color:#e2bea5}.title-period{margin-left:-9px}.english-line{font:italic 17px Georgia,"Times New Roman",serif;letter-spacing:.4px;color:#bfc6bd;margin:10px 0 36px}.story-caption{display:flex;align-items:stretch;gap:17px;min-height:61px}.caption-line{width:1px;background:linear-gradient(#c5ad89aa,#c5ad8911);margin:3px 0}.story-caption p{margin:0;font-size:12px;font-weight:300;line-height:2.2;letter-spacing:2px;color:#c5cdca;transition:opacity .25s,transform .25s}.story-caption p.changing{opacity:0;transform:translateY(5px)}.story-actions{display:flex;align-items:center;gap:25px;margin-top:31px}.primary-button{min-width:171px;display:flex;align-items:center;justify-content:space-between;gap:27px;padding:17px 23px;background:#e3d7bd;color:#293b40;border:1px solid #efe5d0;border-radius:3px;font-size:12px;letter-spacing:2px;box-shadow:0 3px 25px #091d2822;transition:background .3s,transform .3s,box-shadow .3s}.primary-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .3s}.primary-button:hover{background:#f2e7d1;transform:translateY(-2px);box-shadow:0 6px 28px #dfc8a21c}.primary-button:hover svg{transform:translateX(3px)}.letter-link{padding:12px 0;background:none;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1px;color:#c2ccc8;transition:color .3s}.letter-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2}.letter-link:hover{color:#efceb0}.little-note{display:flex;align-items:center;gap:7px;margin-top:19px;font-size:9px;letter-spacing:2px;color:#98acae}.little-note>span{width:3px;height:3px;border-radius:50%;background:#bdb497}
.illustration{position:absolute;width:min(49vw,750px);right:3.5%;bottom:8.7%;z-index:3;pointer-events:none}.couple{width:100%;height:auto;overflow:visible;filter:drop-shadow(0 4px 10px #102b3212)}.scene-annotation{position:absolute;right:0;top:51%;writing-mode:vertical-rl;font-family:var(--serif);font-size:10px;letter-spacing:4px;color:#d0d6c9;opacity:0;transform:translateY(10px);transition:opacity 2s 1s,transform 2s 1s}.scene-annotation i{display:inline-block;height:36px;width:1px;background:linear-gradient(#d8c6a480,transparent);margin-top:15px}.boy-arrival{opacity:0;transform:translateX(-95px);transition:transform 3s cubic-bezier(.22,.61,.36,1),opacity 1.6s}.umbrella{transform:rotate(-8deg);transform-origin:344px 475px;opacity:0;transition:transform 2.5s cubic-bezier(.22,.61,.36,1),opacity 1.4s}.umbrella-canopy{transform:scaleX(.12) scaleY(.8);transform-origin:383px 222px;transition:transform 2.3s cubic-bezier(.2,.75,.2,1)}.holding-hand{opacity:0;transition:opacity 1s}.girl-face{transform:rotate(5deg);transform-origin:413px 492px;transition:transform 2s}.heart-moment{opacity:0;transform:translateY(5px);transition:opacity 1.5s 1s,transform 1.5s 1s}.scarf-tail{transform-origin:434px 503px;animation:scarf-breeze 5s ease-in-out infinite}.experience[data-chapter="1"] .boy-arrival,.experience[data-chapter="2"] .boy-arrival{transform:translateX(0);opacity:1}.experience[data-chapter="2"] .umbrella{transform:rotate(0);opacity:1}.experience[data-chapter="2"] .umbrella-canopy{transform:scale(1)}.experience[data-chapter="2"] .holding-hand{opacity:1}.experience[data-chapter="2"] .girl-face{transform:rotate(-3deg)}.experience[data-chapter="2"] .heart-moment{opacity:.85;transform:translateY(0)}.experience[data-chapter="2"] .scene-annotation{opacity:.7;transform:translateY(0)}.experience[data-chapter="2"] .warmth{opacity:1}
.scene-coordinates{position:absolute;left:4.9%;bottom:165px;display:flex;gap:20px;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font:8px Georgia,serif;letter-spacing:2px;color:#98aaab;z-index:4}.scene-coordinates span+span{font:9px var(--serif);letter-spacing:1px;color:#c1c5b5}.scene-footer{position:absolute;z-index:5;bottom:0;left:4.7%;right:4.7%;height:104px;border-top:1px solid #d3d9cd24;display:flex;align-items:center;justify-content:space-between;gap:20px}.chapter-navigation{display:flex;gap:26px}.chapter{display:grid;grid-template-columns:auto auto;gap:11px;position:relative;background:none;padding:15px 0;font-size:10px;letter-spacing:2px;color:#83999e;transition:color .5s}.chapter-number{font:italic 12px Georgia,serif;letter-spacing:0}.chapter i{position:absolute;height:1px;bottom:4px;left:0;width:100%;background:#9aa5a633;overflow:hidden}.chapter i:after{content:"";display:block;width:100%;height:100%;background:#dbbe9c;transform:scaleX(0);transform-origin:left;transition:transform .8s}.chapter.active{color:#e3cfb3}.chapter.active i:after{transform:scaleX(1)}.chapter:hover{color:#e3cfb3}.footer-quote{font-family:var(--serif);font-size:11px;letter-spacing:2px;color:#b8c5c1}.snow-button{display:flex;gap:9px;align-items:center;background:none;padding:12px 0;font-size:10px;letter-spacing:1px;color:#bcc9c7}.snow-button svg{width:16px;height:16px;fill:none;stroke:#bac8c3;stroke-width:1}.snow-button:hover{color:#ead1b3}
.letter-dialog{border:1px solid #d1bca0;padding:42px 44px 30px;width:min(430px,calc(100vw - 36px));max-height:calc(100svh - 45px);background:#eee8dc;color:#4d534e;box-shadow:0 30px 100px #07192266;overflow:auto;outline:0}.letter-dialog[open]{animation:letter-appear .5s ease both}.letter-dialog::backdrop{background:#0c222bb3;backdrop-filter:blur(10px)}.close-letter{position:absolute;top:12px;right:12px;width:32px;height:32px;display:grid;place-items:center;background:none;color:#777c72}.close-letter svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}.letter-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #b5a9926b;font:9px Georgia,serif;letter-spacing:3px;color:#99866c}.letter-topline svg{width:19px;height:19px;fill:none;stroke:#a99a7e;stroke-width:1}.letter-date{display:block;font:10px var(--serif);letter-spacing:2px;color:#949081;margin:24px 0}.letter-dialog h2{font:24px var(--serif);letter-spacing:3px;font-weight:400;margin:0 0 22px}.letter-body{font:13px/2.3 var(--serif);letter-spacing:1px}.letter-body p{margin:0 0 18px}.letter-emphasis{color:#9b7260}.letter-signature{margin:29px 0 28px;text-align:right;font:12px var(--serif);letter-spacing:2px}.letter-signature span{display:inline-block;font-size:21px;margin-left:9px}.letter-signature svg{display:inline-block;vertical-align:middle;width:13px;height:13px;fill:none;stroke:#a7906f;margin-left:13px}.letter-bottom{display:block;padding-top:18px;border-top:1px solid #b5a9926b;font:7px Georgia,serif;letter-spacing:2px;color:#9b927d;text-align:center}
@keyframes reveal-copy{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes scarf-breeze{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}@keyframes sound-wave{from{height:4px}to{height:17px}}@keyframes letter-appear{from{opacity:0;transform:translateY(14px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(min-width:1700px){.story-copy{left:13%;top:29%}.illustration{right:10%}.landscape{background-position:center 70%}}
@media(max-width:1100px) and (min-width:701px){.story-copy{left:8%;top:27%}h1{font-size:44px;letter-spacing:3px}.illustration{width:58vw;right:-7%;bottom:11%}.story-actions{gap:17px}.primary-button{min-width:150px;padding:15px 18px}.letter-link{font-size:9px}.scene-annotation{display:none}.footer-quote{font-size:9px;letter-spacing:1px}.scene-coordinates{left:3%}.sky-light{background:linear-gradient(90deg,#11232caa,#162b3455 45%,transparent 78%)}}
@media(max-width:700px){.experience{height:100svh;min-height:820px;max-height:1200px}.site-header{padding:25px 25px}.brand{gap:10px}.brand-star{width:25px;height:25px}.brand>span{font-size:17px;letter-spacing:4px}.brand small{font-size:5px;letter-spacing:1.4px;margin-top:5px}.header-note,.header-divider{display:none}.header-right{gap:0}.sound-button{font-size:9px;gap:8px}.sound-bars{transform:scale(.8)}.story-copy{top:139px;left:0;width:100%;text-align:center;padding:0 20px}.eyebrow{justify-content:center;font-size:7px;letter-spacing:2.7px;gap:9px}.tiny-line{width:20px}.eyebrow:after{content:"";width:20px;height:1px;background:#c6ae91}h1{font-size:38px;line-height:1.55;letter-spacing:3px;margin:16px 0 8px}h1 br{display:none}h1 .title-accent:before{content:""}h1{max-width:360px;margin-left:auto;margin-right:auto}h1 br{display:block}.title-period{margin-left:-7px}.english-line{font-size:12px;letter-spacing:.15px;margin:12px 0 17px}.story-caption{justify-content:center;min-height:50px;gap:0}.caption-line{display:none}.story-caption p{font-size:10px;line-height:2;letter-spacing:1.7px}.story-actions{position:absolute;top:calc(100svh - 139px - 140px);left:0;width:100%;justify-content:center;margin:0;gap:23px}.primary-button{min-width:153px;padding:13px 17px;font-size:11px;gap:17px}.primary-button svg{width:15px;height:15px}.letter-link{font-size:9px;gap:7px}.letter-link svg{width:13px;height:13px}.little-note{display:none}.illustration{width:465px;max-width:none;bottom:145px;right:calc(50% - 226px)}.scene-annotation{display:none}.landscape{background-size:auto 100%;background-position:62% bottom}.sky-light{background:linear-gradient(180deg,#142b3599,#142b3555 33%,transparent 65%)}.vignette{background:linear-gradient(180deg,#10263022,transparent 45%,transparent 64%,#112b35d9 89%,#112b35f0)}.scene-footer{height:79px;left:25px;right:25px;gap:10px;align-items:center}.chapter-navigation{gap:23px}.chapter{font-size:9px;gap:8px;padding:12px 0}.chapter-number{font-size:11px}.footer-quote{display:none}.snow-button{font-size:9px;gap:6px}.snow-button svg{width:14px;height:14px}.scene-coordinates{left:22px;bottom:210px;font-size:6px;letter-spacing:1.5px;gap:14px}.scene-coordinates span+span{font-size:7px}.warmth{background:radial-gradient(ellipse at 64% 65%,#c6a06b2c,transparent 42%)}.letter-dialog{padding:35px 28px 25px}}
@media(max-width:700px) and (max-height:819px){.story-copy{top:113px}.story-actions{top:567px}.illustration{width:430px;right:calc(50% - 208px);bottom:144px}h1{font-size:35px;margin-top:13px}.english-line{margin-bottom:13px}}
@media(max-width:370px){.site-header{padding-left:20px;padding-right:20px}.story-copy{padding:0 12px}h1{font-size:32px;letter-spacing:2px}.eyebrow{font-size:6px}.illustration{width:415px;right:calc(50% - 200px)}.chapter-navigation{gap:16px}.scene-footer{left:20px;right:20px}.story-actions{gap:18px}.primary-button{min-width:143px}.letter-link{font-size:8px}.scene-coordinates{left:15px}}
@media(max-width:700px) and (min-height:930px){.story-copy{top:16%}.illustration{width:520px;bottom:155px;right:calc(50% - 253px)}.story-actions{position:fixed;top:auto;bottom:105px}}
/* Keep the entire desktop composition inside shorter laptop windows. */
.sound-button,.letter-link,.snow-button,.chapter,.primary-button { min-height:44px; }
.close-letter { width:44px; height:44px; top:6px; right:6px; }
.experience[data-chapter="1"] .umbrella { opacity:1; }
.holding-hand { opacity:1; }
@media(min-width:701px) {
  .experience { min-height:680px; }
  .illustration { bottom:105px; width:min(49vw,calc((100svh - 100px) * .98),750px); }
}
@media(min-width:701px) and (max-height:760px) {
  .story-copy { top:24%; }
  h1 { font-size:clamp(40px,4.1vw,58px); line-height:1.45; margin:20px 0 6px; }
  .english-line { margin:10px 0 25px; font-size:15px; }
  .story-actions { margin-top:24px; }
  .scene-footer { height:84px; }
  .illustration { bottom:85px; }
  .little-note { margin-top:15px; }
}
@media(min-width:701px) and (max-width:1100px) {
  .illustration { right:-1%; width:min(60vw,calc((100svh - 80px) * 1.05)); }
}
/* On phones, reserve separate vertical bands for the copy, canopy and controls. */
@media(max-width:700px) {
  .site-header { padding-top:calc(25px + env(safe-area-inset-top,0px)); }
  .scene-footer { padding-bottom:env(safe-area-inset-bottom,0px); }
  .story-copy { top:110px; }
  h1 { font-size:35px; line-height:1.5; }
  .illustration { width:400px; right:calc(50% - 195px); bottom:145px; }
  .story-actions { position:absolute; top:calc(100svh - 250px); bottom:auto; }
}
@media(max-width:700px) and (max-height:819px) {
  .story-copy { top:102px; }
  h1 { font-size:34px; }
  .illustration { width:390px; right:calc(50% - 190px); bottom:145px; }
  .story-actions { top:578px; }
}
@media(max-width:370px) {
  h1 { font-size:33px; }
  .illustration { width:380px; right:calc(50% - 185px); }
}
@media(max-width:700px) and (min-height:930px) {
  .story-copy { top:14%; }
  .illustration { width:460px; right:calc(50% - 224px); bottom:155px; }
  .story-actions { position:fixed; top:auto; bottom:105px; }
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.boy-arrival{transform:none}.scarf-tail{transform:none}}