@font-face{font-family:BirthdaySong;src:url('serif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BirthdaySong;src:url('serif-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
:root{--night:#132b46;--ink:#18344f;--ivory:#fbf5ea;--lilac:#c6b2d9;--sage:#91a291;--gold:#ffd093;--serif:BirthdaySong,'Songti SC','Noto Serif CJK SC',STSong,serif;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;--heading:clamp(24px,6.8vw,30px);--body:clamp(17px,4.7vw,20px)}
*{box-sizing:border-box}html{background:var(--night);color-scheme:dark}body{margin:0;min-width:280px;min-height:100svh;color:var(--ivory);font-family:var(--serif);-webkit-font-smoothing:antialiased;background:#0b2035}body::before{content:'';position:fixed;inset:-24px;background:linear-gradient(#0b2035a8,#0b2035ed),url('intro.png') center/cover;filter:blur(20px);pointer-events:none}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button:disabled:focus-visible{outline:none}h1,h2,p{margin:0}h1,h2{font-weight:400;text-wrap:balance}h1:focus,h2:focus{outline:none}[hidden]{display:none!important}svg{display:block}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:16px;top:-100px;z-index:100;color:var(--ink);background:var(--ivory);padding:12px 20px;border-radius:6px}.skip-link:focus{top:16px}
.experience{position:relative;margin-inline:auto;width:min(100%,560px);height:100svh;min-height:680px;max-height:1080px;isolation:isolate;overflow:hidden;background:var(--night);box-shadow:0 0 100px #04122280}.sky-backdrop{position:absolute;inset:-15px;z-index:-2;background:linear-gradient(#132b4640 10%,#132b4680 75%,#132b46cc),url('intro.png') center/cover;filter:blur(9px);opacity:.8}.toolbar{position:absolute;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 18px 8px;pointer-events:none}.toolbar button{pointer-events:auto}.icon-button{width:44px;height:44px;flex-shrink:0;display:inline-grid;place-items:center;border:1px solid #f9f0e033;border-radius:50%;background:#10294285;color:var(--ivory);transition:background .2s,border-color .2s,opacity .2s}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#284560cc;border-color:#fff9}.back-button[hidden]+.sound-button{margin-left:auto}.sound-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 12px;border:1px solid #f9f0e02b;border-radius:24px;color:#fff4df;background:#102942b5;backdrop-filter:blur(8px);font-family:var(--sans);font-size:12px;letter-spacing:.03em;transition:background .2s}.sound-button:hover{background:#284560dd}.sound-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sound-waves{display:none}.sound-button[aria-pressed=true] .sound-waves{display:block}.sound-button[aria-pressed=true] .sound-slash{display:none}
.stage{position:absolute;inset:0;min-height:100%;overflow:hidden}.scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none}.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#091e331a 0%,#0b203500 30%,#0b203500 72%,#0b203596 85%,#0b2035c9 100%)}.gift-copy{position:absolute;left:16px;right:16px;top:17%;text-align:center;text-shadow:0 2px 20px #071d35a0}.gift-copy h1{font-size:clamp(29px,8.2vw,42px);line-height:1.65;letter-spacing:.04em}.gift-copy h1 span{white-space:nowrap}.stage-controls{position:absolute;left:20px;right:20px;bottom:calc(8% + env(safe-area-inset-bottom));z-index:5;text-align:center}.stage-controls p{font-size:clamp(15px,4.1vw,19px);line-height:1.85;text-shadow:0 1px 12px #06182ad9;margin-bottom:20px;letter-spacing:.02em}.primary-button{position:relative;min-width:210px;min-height:52px;border:1px solid #fff5e4a1;border-radius:40px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:12px 28px;color:var(--ink);background:linear-gradient(105deg,#fff8ee,#f3e3cd);box-shadow:0 8px 26px #0317263d;font-size:19px;line-height:1.35;letter-spacing:.12em;transition:box-shadow .2s,background .2s,opacity .2s}.primary-button:hover{background:#fff9f0;box-shadow:0 10px 32px #03172670}.primary-button:active{box-shadow:0 4px 14px #03172650}.primary-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.primary-button:disabled{opacity:.65}
.wish-copy{position:absolute;left:20px;right:20px;top:17%;text-align:center;text-shadow:0 2px 18px #061b3280}.wish-copy h2{font-size:clamp(25px,7vw,35px);line-height:1.75;letter-spacing:.025em}.cake-visual{position:absolute;inset:0}.wish-shade{background:linear-gradient(180deg,#081f3020,transparent 36%,transparent 72%,#061c33c9 90%,#061c33e0)}.flame{position:absolute;z-index:2;width:13px;height:28px;transform:translate(-50%,-100%);transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 0 10px #ffc97d) drop-shadow(0 0 22px #ffbf4777)}.flame i{position:absolute;inset:0;display:block;border-radius:70% 35% 58% 45%;transform:rotate(5deg);background:radial-gradient(ellipse at 50% 75%,#fff 0%,#fff5ca 25%,#ffd073 62%,#ffac4766 90%)}.flame i::after{content:'';position:absolute;left:35%;bottom:4%;height:25%;width:30%;border-radius:50%;background:#c1d7ff}.candle-smoke{position:absolute;z-index:3;top:47%;left:44%;width:40px;height:70px;border-left:2px solid #e7e5e480;border-radius:50%;opacity:0;pointer-events:none}.cake-visual.is-out .flame{visibility:hidden}.wish-controls{bottom:calc(6% + env(safe-area-inset-bottom))}.wish-controls p{margin-bottom:18px}.sparkles{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.sparkle{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffe8ba;box-shadow:0 0 10px #ffe3aa}
.letter-stage{z-index:3;background:linear-gradient(#10294455,#1029446e)}.letter-surround{position:relative;width:100%;min-height:100%;padding:clamp(88px,12svh,124px) clamp(27px,6.5vw,43px) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center}.paper-stack{position:relative;width:100%;flex-shrink:0;height:clamp(450px,65svh,650px);perspective:1200px}.paper-shadow{position:absolute;inset:12px -10px 9px 10px;border-radius:13px;background:#d8d4cce0;transform:rotate(1deg);box-shadow:0 18px 50px #031a344a}.letter-deck{position:relative;height:100%;width:100%;touch-action:pan-y;perspective:1000px}.letter-card{position:absolute;inset:0;color:var(--ink);background-color:var(--ivory);background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="170" height="170"%3E%3Cfilter id="p"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".72" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Cpath fill="%238b8171" opacity=".065" filter="url(%23p)" d="M0 0h170v170H0z"/%3E%3C/svg%3E');border:1px solid #fffaf0a6;border-radius:13px;padding:clamp(33px,8vw,48px) clamp(24px,6.5vw,38px);box-shadow:0 16px 42px #04172b2b;overflow:hidden;transform-origin:50% 60%;backface-visibility:hidden;isolation:isolate}.card-text{position:relative;z-index:2}.letter-card h2{font-size:var(--heading);font-weight:600;line-height:1.65;letter-spacing:.015em;text-wrap:pretty}.salutation{font-size:16px;line-height:1.8;margin-bottom:27px;min-height:29px}.letter-body{font-size:var(--body);font-weight:400;line-height:1.95;letter-spacing:.015em;text-wrap:pretty}.paragraph-gap{margin-top:26px}.letter-card[data-card='0'] h2{margin-bottom:3px}.letter-card[data-card='1'] .card-text,.letter-card[data-card='2'] .card-text,.letter-card[data-card='3'] .card-text{padding-top:2px}.botanical{position:absolute;z-index:1;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:.94}.botanical-first{height:33%;width:40%;bottom:0;right:7%;transform:rotate(14deg)}.botanical-left{height:30%;width:44%;bottom:-4px;left:-9px;transform:rotate(-13deg)}.botanical-right{height:29%;width:40%;bottom:0;right:0;transform:rotate(13deg)}.botanical-journey{height:28%;width:33%;bottom:-5px;left:-5px;transform:rotate(-13deg)}.botanical-fifth{height:37%;width:45%;bottom:-10px;right:-3px;transform:rotate(10deg)}.embossed-age{position:absolute;right:20px;bottom:15px;font-size:61px;font-style:italic;font-family:Georgia,serif;color:#d8c6b4;opacity:.6}.paper-mountains{position:absolute;width:100%;height:31%;object-fit:cover;bottom:0;left:0;z-index:0;opacity:.8}.closing-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-block:28px;gap:9px}.closing-card h2{font-size:clamp(27px,7.2vw,32px);line-height:1.6;font-weight:600;flex-shrink:0}.pochacco{position:relative;display:block;height:44%;max-width:95%;width:auto;object-fit:contain;flex-shrink:1;min-height:130px;user-select:none;-webkit-user-drag:none}.closing-wish{font-size:clamp(23px,6vw,27px);line-height:1.6;letter-spacing:.06em;flex-shrink:0}.letter-navigation{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:14px;width:100%;min-height:44px;flex-shrink:0}.page-arrow{width:44px;height:44px;border-color:transparent;background:transparent;color:#f7e9d3}.page-arrow:disabled{opacity:.22}.page-arrow:hover:not(:disabled){background:#f9ead922}.page-arrow svg{height:19px;width:19px}.pagination{display:flex;align-items:center;justify-content:center}.page-dot{display:grid;place-items:center;width:32px;height:44px;border:0;background:transparent;padding:0}.page-dot span{display:block;width:7px;height:7px;border-radius:50%;background:#c3d2e477;transition:background .2s,transform .2s,box-shadow .2s}.page-dot.is-current span{background:#fff0d1;transform:scale(1.3);box-shadow:0 0 13px #ffe7ae44}.page-dot:hover span{background:#f8e7c5}.swipe-hint{font-size:14px;line-height:1.7;letter-spacing:.14em;color:#f1e5d3;text-shadow:0 1px 10px #081b32;margin-top:0}.read-again{margin-top:7px;border:0;border-bottom:1px solid #eadcc65c;color:#f2e6d5;background:transparent;font-size:13px;line-height:1.8;min-height:32px;padding:0 8px;letter-spacing:.08em}.read-again:hover{color:#fff}.narrow-only{display:none}.audio-notice{position:absolute;z-index:30;top:calc(66px + env(safe-area-inset-top));right:18px;left:18px;background:#102941ee;color:#f8eddf;border:1px solid #e9d6b52e;border-radius:12px;padding:12px 14px;line-height:1.6;font-family:var(--sans);font-size:13px;box-shadow:0 10px 24px #0002}.noscript-note{position:relative;z-index:99;padding:28px;background:var(--ivory);color:var(--ink);font-size:19px;line-height:2}
@media(min-width:700px){body{display:grid;place-items:center}.experience{border-inline:1px solid #e9d7b919}.letter-surround{padding-inline:45px}.letter-card{padding-inline:38px}.primary-button{min-width:235px}.gift-copy{top:15%}.wish-copy{top:15%}}
@media(max-width:360px){:root{--heading:23px;--body:17px}.letter-surround{padding-inline:25px}.letter-card{padding-inline:22px}.salutation{margin-bottom:21px}.paragraph-gap{margin-top:22px}.page-dot{width:28px}.gift-copy h1{font-size:29px}.stage-controls{left:12px;right:12px}.stage-controls p{font-size:14px}.narrow-only{display:block}}
@media(max-height:740px){.experience{min-height:650px}.gift-copy,.wish-copy{top:14%}.gift-copy h1{font-size:31px}.wish-copy h2{font-size:26px}.letter-surround{padding-top:75px;justify-content:flex-start}.paper-stack{height:450px}.letter-card{padding-top:30px}.salutation{margin-bottom:20px}.letter-body{font-size:17px;line-height:1.85}.letter-card h2{font-size:24px}.paragraph-gap{margin-top:21px}.closing-card h2{font-size:27px}.closing-wish{font-size:23px}.letter-navigation{margin-top:10px}.stage-controls{bottom:7%}.wish-controls{bottom:5%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.sparkles{display:none}}
/* Keep the closing greeting on its two intentional lines in mobile WebKit. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.closing-card h2{width:100%;max-width:100%;text-wrap:wrap;word-break:normal;overflow-wrap:normal}
.closing-card h2 span{display:block;white-space:nowrap}
/* Personal handwritten closing, traced from the supplied pen signature. */
.closing-card{gap:7px}
.closing-card .pochacco{height:38%;min-height:110px;max-height:220px}
.signature{width:clamp(120px,37vw,152px);height:auto;aspect-ratio:1360/740;flex-shrink:0;align-self:flex-end;margin:5px 0 0;color:#294159;pointer-events:none;user-select:none}
.signature-art{display:block;width:100%;height:auto;overflow:visible}
@media(max-height:740px){.closing-card{gap:5px;padding-block:22px}.closing-card .pochacco{height:38%;min-height:105px}.signature{width:clamp(116px,34vw,138px);margin-top:4px}}
/* Authorship: write From first, then follow the supplied signing video. */
.signature-wrap{display:flex;align-items:center;gap:5px;align-self:flex-end;flex-shrink:0;margin-top:5px;color:#294159;pointer-events:none;user-select:none}
.signature-wrap .signature{margin:0;align-self:auto}
.from-art{display:block;width:40px;height:25px;flex-shrink:0;transform:translateY(-8px)}
.signature-parts{opacity:0}
.site-credit{position:absolute;left:14px;right:14px;bottom:calc(11px + env(safe-area-inset-bottom));z-index:12;text-align:center;font-family:var(--sans);font-size:10px;line-height:1.5;letter-spacing:.055em;color:#d8e0e8;opacity:.78;pointer-events:none;white-space:nowrap}
@media(max-height:740px){.signature-wrap{margin-top:4px}.from-art{width:36px;height:23px}}
@media(max-height:680px){.letter-surround{padding-top:58px}.paper-stack{height:440px}}