@font-face{font-family:Christmas;src:url('./fonts/christmas-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:WinterLetter;src:url('./fonts/winter-letter.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:WinterTitle;src:url('./fonts/winter-title.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--night:#071a15;--text:#eee9d9;--muted:#a8b7a8;--gold:#e8c78a;--line:rgba(230,215,178,.2);--panel:#102b22;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:var(--night)}
body{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button,input,textarea{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
button:disabled{cursor:wait}
button svg,a svg{width:21px;height:21px;fill:currentColor;display:block;flex-shrink:0}
[hidden]{display:none!important}
.postcard{position:relative;isolation:isolate;width:100%;height:100svh;min-height:620px;overflow:hidden;background:radial-gradient(ellipse at 14% 36%,rgba(54,82,67,.29),transparent 46%),radial-gradient(ellipse at 87% 68%,rgba(68,76,43,.17),transparent 42%),radial-gradient(ellipse at 50% 62%,#15392b 0,#0b231b 34%,#071a15 64%,#061510 100%)}
@supports(height:100dvh){.postcard{height:100dvh}}
#scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,14,10,.12),transparent 28%,transparent 70%,rgba(3,14,10,.34));box-shadow:inset 0 0 110px 28px rgba(0,8,5,.2)}
.topbar{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:calc(25px + env(safe-area-inset-top,0px)) 38px 0;animation:fade-in 1.4s both;z-index:2}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#e5d5ae;font-family:WinterTitle,"STKaiti","KaiTi",serif;font-size:24px;line-height:1.3;letter-spacing:1.5px;white-space:nowrap}
.wordmark svg{width:22px;height:22px;color:#cabb92}
.top-actions{display:flex;align-items:center;gap:10px}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(13,37,27,.45);color:#c9d1be;transition:background .2s,border-color .2s,transform .2s}
.icon-button:hover{background:#204331;border-color:#998c68}
.icon-button:active{transform:scale(.93)}
.music-button[aria-pressed=true]{color:var(--gold);border-color:rgba(232,199,138,.55)}
.greeting{position:absolute;inset:109px 20px auto;text-align:center;pointer-events:none;z-index:1}
.dedication{margin:0 0 13px;color:#d1d8c0;font-family:WinterLetter,"STKaiti","KaiTi",serif;font-size:18px;letter-spacing:2.4px;line-height:1.8;animation:rise-in 1.3s .1s both}
h1{margin:0;color:#f0e5c8;font-weight:400;line-height:.94;text-shadow:0 3px 35px rgba(224,196,129,.09)}
h1 span{display:inline-block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(44px,5.1vw,73px);letter-spacing:-3px;animation:rise-in 1.7s .3s both}
h1 em{display:inline-block;font-family:Christmas,Georgia,serif;font-weight:400;font-size:clamp(66px,7.4vw,106px);padding:0 8px 7px 14px;line-height:1.08;animation:rise-in 1.7s .45s both}
.greeting-line{font-family:WinterLetter,"STKaiti","KaiTi",serif;margin:14px auto 0;max-width:520px;line-height:1.75;letter-spacing:2.4px;font-size:17px;color:#d4d9be;overflow-wrap:anywhere;animation:rise-in 1.5s .8s both}
.tree-touch{position:absolute;z-index:1;left:50%;transform:translateX(-50%);top:31%;width:min(560px,88vw);height:calc(69% - 175px);border:0;border-radius:45% 45% 8% 8%;background:transparent;touch-action:none;cursor:grab}
.tree-touch:active{cursor:grabbing}
.tree-touch:focus-visible{outline:1px dashed rgba(232,199,138,.6);outline-offset:3px}
.star-touch{position:absolute;z-index:2;width:46px;height:46px;padding:0;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;touch-action:manipulation}
.star-touch:focus-visible{outline:1px dashed var(--gold);outline-offset:2px}
.bottom-area{position:absolute;bottom:calc(25px + var(--safe-bottom));left:20px;right:20px;text-align:center;z-index:2;animation:rise-in 1.5s 1.9s both}
.touch-hint{font-family:WinterLetter,"STKaiti","KaiTi",serif;font-size:14px;letter-spacing:1.5px;color:#b5c6ad;margin:0 0 21px}
.bottom-actions{display:flex;align-items:center;justify-content:center;gap:12px}
.wish-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:49px;padding:0 27px;border:1px solid #e6c78b;border-radius:999px;background:linear-gradient(115deg,#eed9ab,#d9b675);color:#20372a;font-family:WinterLetter,"STKaiti","KaiTi",serif;font-size:16px;font-weight:400;letter-spacing:1px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,250,233,.4),0 5px 26px rgba(11,20,12,.18);transition:transform .22s,box-shadow .22s,filter .22s}
.wish-button svg{width:19px;height:19px}
.wish-button:hover{filter:brightness(1.08);box-shadow:0 5px 28px rgba(218,185,120,.1)}
.wish-button:active{transform:scale(.97)}
.share-button{display:grid;place-items:center;width:49px;height:49px;border-radius:50%;border:1px solid #72836a;background:rgba(18,48,34,.5);color:#d5d5bb;transition:background .2s,transform .2s}
.share-button:hover{background:#264b35}
.share-button:active{transform:scale(.94)}
.sign-off{font-size:13px;letter-spacing:1.7px;color:#b1bda5;margin:21px 0 0;font-family:WinterLetter,"STKaiti","KaiTi",serif}
.toast{position:absolute;z-index:4;bottom:calc(184px + var(--safe-bottom));left:50%;transform:translate(-50%,8px);max-width:calc(100% - 40px);width:max-content;margin:0;padding:11px 18px;border:1px solid rgba(218,199,153,.22);border-radius:16px;background:rgba(11,35,25,.94);color:#e7dfc8;font-size:12px;line-height:1.7;text-align:center;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.toast.star-message{font-family:WinterLetter,"STKaiti","KaiTi",serif;font-size:18px;letter-spacing:1px;padding:13px 21px;color:#efdfb5;border-color:rgba(227,201,144,.45);box-shadow:0 0 45px rgba(214,193,123,.08)}
.celebration{position:absolute;z-index:3;top:48%;left:20px;right:20px;text-align:center;pointer-events:none;opacity:0;transform:translateY(10px);transition:opacity .7s,transform .7s;text-shadow:0 2px 18px #071a15,0 2px 12px #071a15}
.celebration span{font-family:WinterLetter,"STKaiti","KaiTi",serif;font-size:28px;letter-spacing:4px;color:#f1deb0}
.celebration p{font-size:12px;letter-spacing:3px;color:#e0dcc5;margin-top:15px}
.celebration.visible{opacity:1;transform:translateY(0)}
dialog{width:min(410px,calc(100vw - 38px));max-height:calc(100dvh - 50px);padding:36px 29px 29px;border:1px solid #496044;border-radius:24px;background:linear-gradient(145deg,#183a2b,#0d261c);color:var(--text);box-shadow:0 25px 90px rgba(0,10,4,.45);overflow-y:auto}
dialog[open]{animation:dialog-in .35s both}
dialog::backdrop{background:rgba(1,12,8,.65);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.dialog-close{position:absolute;right:15px;top:15px;width:35px;height:35px;border-color:transparent;background:transparent}
.dialog-close svg{width:19px;height:19px}
.dialog-star{display:block;color:var(--gold);margin-bottom:22px}
.dialog-star svg{fill:currentColor;width:31px;height:31px}
.dialog-kicker{font-family:WinterLetter,"STKaiti","KaiTi",serif;color:#bdc9b3;font-size:15px;letter-spacing:1.5px;margin:3px 0 11px}
dialog h2{font-family:WinterLetter,"STKaiti","KaiTi",serif;font-size:28px;font-weight:400;letter-spacing:1.5px;margin:0 0 28px;color:#eee3c9}
dialog label{display:block;font-size:12px;color:#d1d8c7;letter-spacing:1px;margin:17px 0 9px}
dialog input,dialog textarea{display:block;width:100%;border:1px solid #63765b;border-radius:12px;padding:13px 14px;background:#092017;color:#f0ebd9;font-size:16px;line-height:1.8;resize:none;outline:none}
dialog input::placeholder,dialog textarea::placeholder{color:#a4b39d;font-size:13px}
dialog input:focus,dialog textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,199,138,.1)}
.privacy-note{font-size:11px;color:#afbea4;line-height:1.8;margin:12px 0 22px;letter-spacing:.5px}
.dialog-submit{width:100%;margin-top:3px}
.share-dialog{padding-top:40px}
.share-dialog h2{margin-bottom:22px}
.share-dialog .dialog-submit{margin-top:24px}
.share-dialog .privacy-note{margin-bottom:0;text-align:center}
.optional{font-size:10px;color:#a8b99d;margin-left:6px}
.manual-copy{margin-top:16px}
.manual-copy input{font-size:12px}
.no-script{position:absolute;top:48%;text-align:center;width:100%;padding:20px;color:var(--text)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes rise-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1000px){.greeting{top:89px}.topbar{padding-left:52px;padding-right:52px}.bottom-area{bottom:31px}.sign-off{margin-top:22px}.tree-touch{top:30%;height:calc(70% - 173px)}}
@media(max-width:699px){.topbar{padding:calc(20px + env(safe-area-inset-top,0px)) 23px 0}.wordmark{font-size:20px;gap:7px;letter-spacing:.6px}.wordmark svg{width:18px;height:18px}.top-actions{gap:8px}.icon-button{width:40px;height:40px}.greeting{top:calc(100px + env(safe-area-inset-top,0px))}.dedication{font-size:16px;letter-spacing:1.6px;margin-bottom:15px;line-height:1.8;overflow-wrap:anywhere}h1 span{display:block;font-size:32px;line-height:.95;letter-spacing:-1px}h1 em{display:block;font-size:64px;line-height:.95;padding:2px 10px 8px 0}.greeting-line{font-size:15px;letter-spacing:1.8px;margin-top:11px;max-width:330px}.tree-touch{top:33%;height:calc(67% - 174px);width:90vw}.bottom-area{bottom:calc(23px + var(--safe-bottom))}.touch-hint{margin-bottom:19px;font-size:12px;letter-spacing:1.1px}.sign-off{font-size:12px;margin-top:20px}}
@media(max-height:740px) and (max-width:699px){.postcard{min-height:560px}.greeting{top:78px}.dedication{margin-bottom:11px;font-size:14px}h1 span{font-size:26px}h1 em{font-size:52px}.greeting-line{margin-top:7px;font-size:14px}.topbar{padding-top:14px}.bottom-area{bottom:calc(18px + var(--safe-bottom))}.touch-hint{margin-bottom:14px}.sign-off{margin-top:16px;font-size:11px}.wish-button{min-height:46px}.share-button{width:46px;height:46px}}
@media(max-width:359px){.wordmark{font-size:17px;letter-spacing:.3px}.topbar{padding-left:17px;padding-right:17px}.wordmark svg{width:16px;height:16px}.top-actions{gap:6px}.top-actions .icon-button{width:36px;height:36px}.dedication{letter-spacing:1px}.greeting-line{letter-spacing:1px}.sign-off{letter-spacing:1px}}
@media(max-height:530px) and (min-width:700px){.postcard{min-height:420px}.greeting{top:100px;left:7%;right:auto;width:38%;text-align:left}.dedication{font-size:11px;letter-spacing:2px}h1 span{font-size:39px;display:block}h1 em{font-size:68px;padding-left:0;display:block}.greeting-line{font-size:11px;letter-spacing:2px}.bottom-area{left:7%;right:auto;width:38%;bottom:35px;text-align:left}.bottom-actions{justify-content:flex-start}.touch-hint{display:none}.sign-off{margin-top:14px}.tree-touch{left:73%;top:20%;height:68%;width:43%}.topbar{padding-top:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.bottom-area,.greeting,.greeting>*{opacity:1;transform:none}}

/* Revision 4: the tree owns the frame; the greeting becomes a compact letter heading. */
@media(min-width:700px) and (min-height:531px){
 .greeting{top:82px}.dedication{margin-bottom:4px;font-size:17px;line-height:1.7}
 h1{display:flex;align-items:baseline;justify-content:center;gap:8px;line-height:1}
 h1 span{font-size:49px;line-height:1;letter-spacing:-2px}
 h1 em{font-size:76px;line-height:1.1;padding:0 5px 5px 0}
 .greeting-line{margin-top:4px;font-size:16px;line-height:1.7}
 .bottom-area{bottom:24px}.touch-hint{margin-bottom:15px}.sign-off{margin-top:17px}
}
@media(max-width:699px){
 .greeting{top:calc(91px + env(safe-area-inset-top,0px));left:18px;right:18px}
 .dedication{margin-bottom:5px;line-height:1.7}
 h1{display:flex;align-items:baseline;justify-content:center;gap:7px;line-height:1}
 h1 span{display:inline-block;font-size:26px;line-height:1;letter-spacing:-1.5px}
 h1 em{display:inline-block;font-size:53px;line-height:1.1;padding:0 3px 5px 0}
 .greeting-line{font-size:15px;line-height:1.7;margin-top:4px}
 .bottom-area{bottom:calc(18px + var(--safe-bottom))}
 .touch-hint{margin-bottom:14px}.sign-off{margin-top:16px}
}
@media(max-width:699px) and (min-height:900px){.greeting{top:calc(79px + env(safe-area-inset-top,0px))}}
@media(max-width:699px) and (max-height:740px){
 .greeting{top:75px}.dedication{font-size:14px;margin-bottom:4px}
 h1 span{font-size:23px}h1 em{font-size:46px}
 .greeting-line{font-size:14px;margin-top:2px}.bottom-area{bottom:calc(16px + var(--safe-bottom))}
 .touch-hint{margin-bottom:11px}.sign-off{margin-top:12px}
}
@media(max-width:359px){h1 span{font-size:22px}h1 em{font-size:43px}}