:root{color-scheme:dark;font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:#f7e4c8;background:#100807;font-synthesis:none;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0}html,body{width:100%;min-height:100%;overflow-x:hidden}
#scene{position:relative;width:100%;height:100svh;height:100dvh;overflow:hidden;background:#100807}
#field{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 67% 48%,#9e34110b,transparent 47%),radial-gradient(ellipse at 78% 70%,#75240f08,transparent 40%),radial-gradient(ellipse at center,transparent 40%,#0c07054d 100%);animation:atmosphere 16s ease-in-out infinite alternate}
@keyframes atmosphere{to{opacity:.5}}
.greeting{position:absolute;left:9.5%;top:35.5%;width:30%;pointer-events:none}
#recipient{margin:0 0 23px;font-size:clamp(18px,1.65vw,27px);font-weight:300;letter-spacing:.20em;line-height:1.7;overflow-wrap:anywhere;color:#dab994}
h1{margin:0;font-size:clamp(28px,3vw,51px);letter-spacing:.17em;line-height:1.5;font-weight:300;text-shadow:0 0 32px #e7a56314}
.hairline{width:53px;height:1px;background:linear-gradient(90deg,#c5945690,transparent);margin:26px 0 0}
#message{position:absolute;left:9.5%;width:29%;max-width:490px;font-size:clamp(15px,1.16vw,18px);line-height:2;letter-spacing:.055em;color:#dfbc97;margin:0;white-space:pre-line;visibility:hidden;overflow-wrap:anywhere;pointer-events:none;text-wrap:pretty}
#message.revealed{visibility:visible;animation:reveal 1.55s cubic-bezier(.16,.7,.3,1) both}
#message.revealed:after{content:"";position:absolute;inset:-8px -18px;pointer-events:none;background:linear-gradient(108deg,transparent 42%,#f0c88714 49%,#ffe2ae25 50%,transparent 58%);background-size:240% 100%;animation:lightSweep 1.6s ease-out both}
@keyframes reveal{0%{clip-path:inset(-12px 100% -12px -12px);filter:brightness(1.8);transform:translateY(3px);text-shadow:0 0 14px #e8b55a55}65%{filter:brightness(1.12)}100%{clip-path:inset(-12px -20px);filter:brightness(1);transform:translateY(0);text-shadow:0 0 0 transparent}}
@keyframes lightSweep{0%{background-position:100% 0;opacity:0}25%{opacity:1}100%{background-position:-30% 0;opacity:0}}
#flower{position:absolute;border:0;background:none;border-radius:48%;padding:0;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
#flower:focus-visible{outline:1px solid #deb27180;outline-offset:5px}
#hint{position:absolute;left:0;right:0;bottom:0;color:#ba9871;font-family:inherit;font-size:12px;letter-spacing:.3em;animation:hint 8s forwards;pointer-events:none}
@keyframes hint{0%,12%{opacity:0}25%,66%{opacity:.65}100%{opacity:0}}
#signature{position:absolute;bottom:max(29px,calc(env(safe-area-inset-bottom) + 12px));left:5%;width:90%;text-align:center;font-size:12px;line-height:1.7;letter-spacing:.18em;color:#a48a70;margin:0;pointer-events:none}
.no-script{position:absolute;top:25%;width:100%;text-align:center;line-height:3;background:#180c09;padding:20px}
@media(max-width:700px) and (orientation:portrait){
 .greeting{top:max(7.5%,calc(env(safe-area-inset-top) + 22px));left:8%;width:84%;text-align:center}
 #recipient{font-size:18px;margin-bottom:10px;letter-spacing:.13em;line-height:1.65}
 h1{font-size:clamp(27px,7.3vw,32px);letter-spacing:.15em}
 .hairline{display:none}
 #message{left:8.5%;width:83%;max-width:none;bottom:max(10.5%,calc(env(safe-area-inset-bottom) + 68px));font-size:16px;line-height:1.85;letter-spacing:.025em;text-align:center}
 #signature{bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px))}
}
@media(max-height:520px) and (orientation:landscape){
 .greeting{left:max(7%,calc(env(safe-area-inset-left) + 18px));top:max(13%,calc(env(safe-area-inset-top) + 12px));width:35%}
 #recipient{font-size:16px;line-height:1.5;margin-bottom:9px}h1{font-size:27px;letter-spacing:.10em}.hairline{display:none}
 #message{left:max(7%,calc(env(safe-area-inset-left) + 18px));width:35%;font-size:14px;line-height:1.65;letter-spacing:.02em}
 #signature{bottom:max(12px,env(safe-area-inset-bottom));font-size:12px}
}
@media(prefers-reduced-motion:reduce){.ambient{animation:none}#hint{animation:none;opacity:.5}#message.revealed{animation:none}#message.revealed:after{display:none}}