@font-face{font-family:"Diary Serif";src:local("Songti SC"),local("STSong"),local("Noto Serif CJK SC");font-display:swap}
:root{--cream:#fffaf6;--blush:#f8e8e7;--rose:#d9828d;--deep:#6e4d4e;--ink:#493c3c;--muted:#8b7774;--sage:#8f9d86;--line:rgba(110,77,78,.18);--serif:"Diary Serif","Songti SC","STSong",serif;--sans:"Hiragino Sans GB","PingFang SC",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--blush)}
body{margin:0;color:var(--ink);background:var(--cream);font-family:var(--serif);overflow-x:hidden}
button{font:inherit}
.skip-link{position:fixed;z-index:100;top:8px;left:8px;padding:10px 14px;background:var(--ink);color:white;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.paper-grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.21;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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E")}
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:calc(13px + env(safe-area-inset-top)) 18px 12px;background:linear-gradient(to bottom,rgba(255,250,246,.92),rgba(255,250,246,0));pointer-events:none}
.brand{margin:0;font:500 10px/1 var(--sans);letter-spacing:.22em;color:var(--muted)}
.sound-control{pointer-events:auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:99px;background:rgba(255,250,246,.88);color:var(--deep);font:500 11px/1 var(--sans);letter-spacing:.08em;box-shadow:0 5px 24px rgba(110,77,78,.08);backdrop-filter:blur(8px)}
.sound-control:focus-visible,.back-top:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.sound-icon{display:flex;align-items:center;gap:2px;height:13px}.sound-icon i{width:2px;height:5px;border-radius:2px;background:currentColor}.sound-control[aria-pressed="true"] .sound-icon i{animation:wave .8s ease-in-out infinite alternate}.sound-control[aria-pressed="true"] .sound-icon i:nth-child(2){animation-delay:-.35s}.sound-control[aria-pressed="true"] .sound-icon i:nth-child(3){animation-delay:-.6s}
.chapter{position:relative;min-height:100svh;padding:96px max(26px,calc((100vw - 540px)/2)) 72px;display:flex;flex-direction:column;justify-content:center;isolation:isolate;overflow:hidden}
.chapter:nth-child(odd){background:var(--cream)}.chapter:nth-child(even){background:var(--blush)}
.hero{text-align:center;background:linear-gradient(160deg,#fffaf6 0 48%,#f7e4e4 48.1% 100%)}
.eyebrow{margin:0 0 22px;color:var(--rose);font:600 11px/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase}
h1{margin:0;color:var(--deep);font-weight:400;line-height:.8}.number{font-size:clamp(112px,38vw,184px);letter-spacing:-.08em}.unit{font-size:24px;margin-left:12px;writing-mode:vertical-rl;letter-spacing:.18em}
.lead{max-width:300px;margin:40px auto 0;font-size:16px;line-height:2;letter-spacing:.08em;color:var(--muted)}
.scroll-note{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font:500 9px/1 var(--sans);letter-spacing:.22em;color:var(--muted)}.scroll-note span{display:block;width:1px;height:30px;background:var(--rose);animation:breathe 1.8s ease-in-out infinite}
.sprig{position:absolute;top:8%;right:-16px;width:130px;height:170px;opacity:.62;transform:rotate(12deg)}.sprig span{position:absolute;inset:0;border-left:1px solid var(--sage);border-radius:50%;transform:rotate(36deg)}.sprig i{position:absolute;width:24px;height:12px;border:1px solid var(--sage);border-radius:100% 0 100% 0}.sprig i:nth-child(2){top:50px;left:25px;transform:rotate(35deg)}.sprig i:nth-child(3){top:83px;left:59px;transform:rotate(-45deg)}.sprig i:nth-child(4){top:120px;left:69px;transform:rotate(28deg)}
.chapter-count{position:absolute;top:84px;left:max(24px,calc((100vw - 540px)/2));width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--rose);font-size:12px}
.letter{position:relative;z-index:2;max-width:430px;margin:auto;width:100%}.letter h2,.date-card h2{margin:0 0 28px;color:var(--deep);font-weight:500;font-size:clamp(30px,9.5vw,48px);line-height:1.35;letter-spacing:.06em}.letter>p:not(.eyebrow){margin:0 0 16px;font-size:16px;line-height:2.15;letter-spacing:.055em;text-align:justify}
.note .letter{padding:38px 28px;background:rgba(255,250,246,.72);border:1px solid rgba(217,130,141,.15);box-shadow:18px 18px 0 rgba(217,130,141,.08)}
.petals b{position:absolute;width:12px;height:19px;border-radius:100% 0 100% 0;background:rgba(217,130,141,.27);animation:float 8s linear infinite}.petals b:nth-child(1){top:16%;left:78%}.petals b:nth-child(2){top:68%;left:12%;animation-delay:-3s}.petals b:nth-child(3){top:42%;left:90%;animation-delay:-5s}
.thanks{background:linear-gradient(90deg,var(--blush),#f9eeee)}.thanks .letter{padding-left:48px}.vertical-title{position:absolute;left:18px;bottom:10%;font-size:72px;color:rgba(217,130,141,.12);writing-mode:vertical-rl;letter-spacing:.18em}
.date{background:#f4eee5!important}.date-card{position:relative;max-width:420px;margin:auto;padding:44px 28px 38px;background:var(--cream);border-top:3px double var(--rose);border-bottom:1px solid var(--line);text-align:center;box-shadow:0 22px 60px rgba(93,69,66,.11)}.date-numerals{margin:0 0 20px;color:var(--rose);font:400 clamp(38px,11vw,56px)/1 var(--serif);letter-spacing:.05em}.date-card h2{font-size:17px;margin-bottom:14px}.date-card>p:not(.eyebrow):not(.date-numerals):not(.aside){font-size:15px;letter-spacing:.12em}.date-card .aside{margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);font-size:14px;line-height:2;color:var(--muted)}.seal{position:absolute;right:18px;top:18px;width:32px;height:32px;border:1px solid var(--rose);color:var(--rose);display:grid;place-items:center;font-size:14px;transform:rotate(6deg)}
.future{justify-content:flex-start;padding-top:150px}.future .letter{margin:0 auto}.future .letter h2{font-size:clamp(38px,12vw,58px)}.future .letter>p:last-child{max-width:330px}.line-art{position:absolute;right:-28px;bottom:-12px;width:220px;height:260px;fill:none;stroke:rgba(143,157,134,.58);stroke-width:1.2}.line-art .leaf{fill:rgba(143,157,134,.08)}
.finale{text-align:center;color:#fff;background:var(--deep)!important}.final-copy{max-width:440px;margin:auto;padding-bottom:52px}.finale .eyebrow{color:#e7afb5}.finale h2{margin:0;font-weight:400;font-size:clamp(28px,8.7vw,44px);line-height:1.7;letter-spacing:.06em}.keep{white-space:nowrap}.love{margin:48px 0 24px;font-size:clamp(48px,15vw,72px);letter-spacing:.14em;color:#f3c8cc}.signature{margin:0;font-size:14px;letter-spacing:.2em}.date-stamp{margin:46px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);max-width:280px;font:400 10px/1.4 var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.62)}
.back-top{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.28);border-radius:99px;background:transparent;color:white;font:500 11px/1 var(--sans);letter-spacing:.12em}.back-top span{margin-left:7px}.noscript{position:fixed;bottom:0;left:0;right:0;z-index:50;margin:0;padding:10px;background:#fff;text-align:center;font-size:12px}
.reveal{opacity:1;transform:translateY(18px);transition:transform .9s cubic-bezier(.2,.8,.2,1)}.reveal.is-visible{transform:none}
@keyframes wave{to{height:13px}}@keyframes breathe{50%{transform:scaleY(.45);opacity:.4}}@keyframes float{50%{transform:translate(-16px,28px) rotate(100deg)}}
@media (max-width:340px){.chapter{padding-left:20px;padding-right:20px}.note .letter{padding:30px 22px}.letter>p:not(.eyebrow){font-size:15px}.topbar{padding-left:12px;padding-right:12px}.brand{letter-spacing:.12em}.sound-control{padding:0 10px}.number{font-size:104px}}
@media (min-width:700px){body{background:#eadbda}.topbar{max-width:540px;margin:auto}.chapter{max-width:540px;margin:auto;box-shadow:0 0 70px rgba(73,60,60,.1)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.scroll-note span,.petals b,.sound-icon i{animation:none!important}}