html,body,#root{margin:0;min-height:100%}html{scroll-behavior:smooth}body{background:#08060e}.birthday{--lavender:#cfb7f5;--soft:#b6a8c7;position:relative;background:#08060e;color:#f7f2ff;font-family:Arial,sans-serif;overflow:hidden}.birthday>div{background:transparent;max-width:none;padding:0;color:inherit}.birthday *{box-sizing:border-box}.birthday button,.birthday a{-webkit-tap-highlight-color:transparent}.birthday button{font-family:inherit;cursor:pointer}.birthday button:focus-visible,.birthday a:focus-visible{outline:2px solid #e2ccff;outline-offset:6px}.birthday h1,.birthday h2,.birthday h3,.birthday p{margin:0}.birthday h1,.birthday h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;line-height:1.1}.birthday em{font-weight:400;color:var(--lavender)}.stars{position:fixed;inset:0;pointer-events:none;z-index:1}.stars i{position:absolute;border-radius:100%;background:#d6afff;opacity:.35;box-shadow:0 0 7px #bb88ff;animation:float 8s ease-in-out infinite}.landing{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:50px 22px;position:relative;background:radial-gradient(ellipse at 50% 46%,#30144980 0,transparent 60%),#08060e;transition:opacity .7s,transform .7s;z-index:3}.landing.is-open{position:absolute;inset:0;opacity:0;transform:scale(1.03);pointer-events:none;visibility:hidden}.orb{width:76px;height:76px;border:1px solid #9b66d555;border-radius:50%;display:grid;place-items:center;margin-bottom:32px;box-shadow:0 0 70px #a055de30,inset 0 0 20px #b682ff15}.orb span{font-family:Georgia,serif;color:#c9a7f5;font-size:48px;line-height:1}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:600;color:#b4a0cf;line-height:1.7}.landing h1{font-size:clamp(44px,6.5vw,88px);margin:24px 0}.purple-heart{font-family:Arial,sans-serif;font-size:.52em;display:inline-block;vertical-align:middle}.intro{font-size:15px;line-height:1.9;color:#bfb0cf;margin-bottom:32px!important}.primary,.secondary{min-height:54px;padding:16px 25px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:.025em;border:1px solid #b385f66b;transition:transform .25s,box-shadow .25s;color:#fff}.primary{background:linear-gradient(135deg,#8952c7,#593188);box-shadow:0 6px 35px #9e53eb30,inset 0 1px 0 #ffffff25}.primary:hover,.primary:active,.secondary:hover{transform:translateY(-2px);box-shadow:0 7px 40px #ac69f54a}.secondary{background:#21142f99;border-color:#9a71c355}.tiny{font-size:11px;line-height:1.7;color:#9c88b3;margin-top:19px!important}.contents{max-width:1100px;margin:auto;padding:0 24px;position:relative;z-index:2;background:radial-gradient(ellipse at 50% 3%,#39165066,transparent 30%)}.contents.opened{animation:appear .8s ease-out}.topline{display:flex;justify-content:space-between;align-items:center;padding:27px 0;border-bottom:1px solid #cbb3e51a;font-size:10px;letter-spacing:.13em;color:#b4a4c6}.mini-heart{font-size:26px;color:#cdb0ec}.welcome{text-align:center;padding:80px 0 85px}.welcome h2{font-size:clamp(56px,8vw,100px);margin:22px 0 25px}.welcome>p:not(.eyebrow){font-size:14px;line-height:1.9;color:#b9aac9}.scroll-link{display:inline-flex;margin-top:30px;gap:18px;color:#ceb2ed;text-decoration:none;font-size:11px;letter-spacing:.08em;min-height:44px;align-items:center}.section-head{margin-bottom:27px;display:flex;justify-content:space-between;align-items:end;gap:20px}.birthday section h2{font-size:clamp(30px,4vw,45px)}.section-head h2{margin-top:10px}.small-emoji{font-size:.6em;vertical-align:middle}.aside{display:none;color:#a393b7;font-size:12px;line-height:1.7;text-align:right}.gallery{display:grid;grid-template-columns:1fr;gap:22px}.photo-card{margin:0;border-radius:22px;padding:9px;background:linear-gradient(150deg,#32204488,#15101f);border:1px solid #ad7dda30;box-shadow:0 10px 32px #0007;transition:transform .3s,box-shadow .3s}.photo-card:hover,.photo-card:focus-within{transform:translateY(-6px);box-shadow:0 12px 45px #6f31a333}.photo-button{padding:0;width:100%;background:none;border:0;display:block;position:relative;border-radius:15px;overflow:hidden}.photo-button img{width:100%;height:auto;display:block;border-radius:15px}.expand{position:absolute;right:12px;bottom:12px;width:32px;height:32px;border-radius:50%;background:#160d27b3;color:white;display:grid;place-items:center;font-size:18px;backdrop-filter:blur(10px)}.photo-card figcaption{padding:17px 7px 12px;display:flex;align-items:center;gap:14px;font-size:12px;color:#e5d6f4}.number{font-size:10px;color:#8e77ac;letter-spacing:.07em}.gallery-note{color:#857095;text-align:center;font-size:10px;margin-top:20px!important}.letter-section{padding:85px 0 0}.letter-section>.eyebrow{text-align:center;margin-bottom:21px}.glass{border:1px solid #aa80d333;background:linear-gradient(130deg,#2e1c4266,#171021b3);backdrop-filter:blur(15px);border-radius:27px;box-shadow:0 20px 65px #0004}.letter{padding:35px 26px;position:relative;max-width:760px;margin:auto}.letter-mark{position:absolute;right:25px;top:20px;font-family:Georgia,serif;font-size:90px;color:#ad7cdc27;line-height:1}.letter h2{margin-bottom:28px}.message{font-size:14px;line-height:1.95;color:#d0c4dd}.message p+p{margin-top:23px}.visible .message p{animation:appear 1s both}.signature{margin-top:30px;padding-top:20px;border-top:1px solid #ad80d526;font-size:12px;color:#c7a3ec;display:flex;justify-content:space-between;align-items:center}.signature span{font-size:26px}.wish-section{text-align:center;padding:90px 0 75px}.wish-section h2{margin:18px 0}.wish-section>p:not(.eyebrow):not(.tiny){font-size:13px;color:#aa99bf;line-height:1.8}.waves{height:65px;display:flex;gap:4px;align-items:center;justify-content:center;margin:30px 0 20px}.waves span{width:3px;background:linear-gradient(#dbc2fb,#8653b8);border-radius:3px;opacity:.5;transform:scaleY(.4)}.waves.active span{opacity:1;animation:wave .85s ease-in-out infinite alternate}.audio-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}.text-button{background:none;color:#c7afe3;border:0;min-height:44px;font-size:11px;width:100%}.audio-error{margin-top:15px!important;color:#eac6dc!important}.surprise-section{text-align:center;position:relative;padding:0 0 80px}.fine-rule{height:1px;max-width:160px;margin:0 auto 42px;background:linear-gradient(90deg,transparent,#aa76db66,transparent)}.surprise-trigger{margin-top:22px}.surprise{padding:30px 23px;margin:32px auto 0;max-width:650px;animation:appear .7s}.surprise-heart{color:#cfaef4;font-size:45px;display:block;margin-bottom:15px}.surprise p{font-size:14px;line-height:1.9;color:#cfbfdc}.surprise h2{font-size:30px!important;margin:24px 0 12px}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:0;width:5px;height:9px;opacity:0;animation:confetti 2.5s ease-out forwards}.timeline-section{max-width:700px;margin:auto;padding:20px 0 40px}.timeline-section>h2{margin:15px 0}.arrow{font-family:Arial,sans-serif;color:#9b6bca;font-size:.75em}.timeline-intro{font-size:13px;color:#aa98bf}.timeline{margin-top:35px;border-left:1px solid #9263bc50;margin-left:8px}.milestone{position:relative;margin:0 0 27px;padding-left:26px;display:flex;gap:19px;align-items:center}.timeline-dot{position:absolute;left:-5px;top:50%;height:9px;width:9px;background:#bd95e4;border-radius:50%;box-shadow:0 0 18px #b365e766}.milestone button{flex-shrink:0;border:1px solid #b77ded3d;background:#21152f;padding:4px;border-radius:13px;width:90px}.milestone img{width:100%;height:auto;border-radius:9px;display:block}.milestone .eyebrow{font-size:9px;letter-spacing:.15em}.milestone h3{font-size:13px;font-weight:400;line-height:1.7;color:#ded0ef;margin-top:9px}footer{text-align:center;padding:45px 0 65px}footer p{font-size:12px;line-height:1.9;color:#b29aca}.footer-heart{display:block;font-size:37px;color:#c49fe9;margin-bottom:15px;animation:heartbeat 3s ease-in-out infinite}.footer-line{display:block;width:42px;height:1px;margin:25px auto 0;background:#8b5bb561}.music-control{position:fixed;right:16px;bottom:17px;z-index:5;border:1px solid #bd98e44d;border-radius:100px;background:#1c102be6;color:#ddc5f5;font-size:10px;min-height:44px;padding:0 16px;backdrop-filter:blur(14px)}.lightbox{padding:30px 15px 18px;border:1px solid #ac79dc55;background:#110b1c;color:#f5edff;border-radius:22px;max-width:95vw;max-height:95svh;overflow:auto}.lightbox::backdrop{background:#05030be8;backdrop-filter:blur(12px)}.lightbox figure{margin:12px 0}.lightbox img{display:block;max-width:85vw;max-height:72svh;width:auto;height:auto;object-fit:contain;margin:auto;border-radius:9px}.lightbox figcaption{text-align:center;font-size:12px;margin-top:15px;color:#c9b3dd}.lightbox button{border:1px solid #9c70c33d;background:#281637;color:#ead6ff;min-width:44px;min-height:44px;border-radius:50%;font-size:21px}.lightbox-close{position:absolute;right:12px;top:10px;z-index:2}.lightbox-nav{display:flex;gap:25px;justify-content:center;align-items:center;margin-top:16px;font-size:12px;color:#ba9ed3}
@media(min-width:650px){.contents{padding:0 48px}.gallery{grid-template-columns:repeat(3,1fr);align-items:start;gap:19px}.photo-card:nth-child(2){margin-top:30px}.aside{display:block}.letter{padding:45px 55px}.message{font-size:16px}.milestone button{width:115px}.milestone{gap:30px;padding-left:40px}.milestone h3{font-size:17px}.topline{font-size:11px}.welcome{padding:95px 0 100px}}
@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.6;transform:translateY(-12px)}}@keyframes wave{from{transform:scaleY(.3)}to{transform:scaleY(1)}}@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}@keyframes confetti{0%{opacity:1;translate:0 -20px}100%{opacity:0;translate:0 450px;rotate:300deg}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.birthday *, .birthday *::before,.birthday *::after{animation:none!important;transition:none!important}.confetti{display:none}.waves.active span{transform:scaleY(1)}.landing.is-open{display:none}}
.birthday{min-height:100svh}.birthday h1,.birthday h2,.birthday h3{color:#f7f2ff}.birthday .contents .welcome h2{font-size:clamp(56px,8vw,100px)}.birthday [hidden]{display:none!important}.birthday>.site{padding:0;background:transparent}.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s}.reveal.visible{opacity:1;transform:translateY(0)}.landing{min-height:100svh}.birthday main:focus{outline:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
@font-face{font-family:WishEmoji;src:url('assets/wish-emoji.ttf') format('truetype');font-display:swap}.birthday{font-family:Arial,'Apple Color Emoji','Segoe UI Emoji',WishEmoji,sans-serif}.birthday h1,.birthday h2,.birthday h3{font-family:Georgia,'Times New Roman','Apple Color Emoji','Segoe UI Emoji',WishEmoji,serif}.purple-heart{font-family:'Apple Color Emoji','Segoe UI Emoji',WishEmoji,sans-serif}