:root{--pink:#ef5b90;--rose:#ff89b0;--lilac:#ae91fc;--ink:#3a3557;--muted:#797590;--paper:#fffafa;--line:rgba(230,165,199,.38);--shadow:0 28px 80px rgba(151,75,117,.15)}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100svh;overflow-x:hidden;background:#fff6fa;color:var(--ink);font-family:'Be Vietnam Pro',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ed64a0;outline-offset:4px}button:disabled{cursor:default}.visually-hidden{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 15% 15%,#ffe6ef 0,transparent 42%),radial-gradient(ellipse at 84% 78%,#eae8ff 0,transparent 42%),linear-gradient(150deg,#fff5f9,#fffcfd 55%,#f9f7ff)}.bg:before,.bg:after{content:"";position:absolute;width:44vw;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.25}.bg:before{background:#ff8fbe;left:-12vw;top:-19vw}.bg:after{background:#a9bfff;right:-12vw;bottom:-22vw}.bg-grid{position:absolute;inset:0;background-image:radial-gradient(#dc9ebe44 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#0003,transparent 80%)}
.petal-field{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}.petal{position:absolute;left:var(--x);top:-8%;width:var(--s);height:calc(var(--s)*.74);border-radius:66% 9% 65% 10%;background:var(--c);opacity:.44;animation:fall var(--duration) linear var(--delay) infinite;filter:drop-shadow(0 1px 2px #f48bab30)}@keyframes fall{to{transform:translate3d(var(--drift),115vh,0) rotate(560deg);opacity:0}}
.shell{min-height:100svh;display:flex;flex-direction:column;max-width:1160px;margin:auto;padding:18px 24px 24px;position:relative}.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:5}.brand{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:850;color:#98708d;background:#ffffffb9;padding:10px 15px;border:1px solid #fff;border-radius:999px;box-shadow:0 7px 22px #ad7e9b14}.brand svg{width:18px;height:18px;fill:#eb6898}.toolbar{display:flex;gap:8px;align-items:center}.pill{border:1px solid #fff;background:#fffcffdd;border-radius:999px;padding:11px 14px;box-shadow:0 6px 22px #b16c9719;font-size:12px;font-weight:750;color:#876b86;min-height:42px;display:inline-flex;align-items:center;gap:7px}.pill svg{width:17px;height:17px;fill:currentColor}.music.playing{color:#e63d82;background:#fff4fa}.progress-wrap{display:flex;gap:7px;align-items:center;justify-content:center;margin:14px auto 0;z-index:2}.dot{width:8px;height:8px;border-radius:999px;background:#e6cddc;transition:width .25s,background .25s}.dot.active{width:32px;background:linear-gradient(90deg,#ff6d9e,#b494fa)}.progress-caption{font-size:11px;font-weight:800;color:#b08ca6;margin-left:8px}
.story{flex:1;display:grid;align-items:center;min-height:560px;position:relative}.scene{grid-area:1/1;display:none;opacity:0;transform:translateY(14px)}.scene.is-active{display:block;animation:appear .62s cubic-bezier(.2,.7,.15,1) forwards}@keyframes appear{to{opacity:1;transform:translateY(0)}}.card{border:1px solid #fff;background:linear-gradient(135deg,#ffffffeb,#fffaffc9);border-radius:35px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}.lead-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.88fr);gap:15px;align-items:center;max-width:1000px;margin:24px auto;padding:40px 40px 45px}.eyebrow{font-size:12px;font-weight:850;letter-spacing:.16em;color:var(--pink);margin:0 0 12px}.title{font-size:clamp(37px,5.5vw,69px);font-weight:850;line-height:1.12;letter-spacing:-.055em;margin:0 0 18px;text-wrap:balance}.title em{font-style:normal;color:#ee5e92}.sub{line-height:1.92;color:var(--muted);font-size:15px;max-width:560px;margin:0 0 24px}.cta-row{display:flex;flex-wrap:wrap;gap:11px}.btn{border:none;min-height:53px;padding:15px 21px;border-radius:16px;font-size:13px;font-weight:850;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:transform .22s,box-shadow .22s}.btn:hover{transform:translateY(-2px)}.btn-main{color:#fff;background:linear-gradient(125deg,#fd6498,#f67fab 54%,#bc9cfc);box-shadow:0 14px 26px #ec679433}.btn-soft{border:1px solid #f1deea;color:#97597e;background:#fff}.btn svg{width:17px;height:17px;fill:currentColor}.fine{font-size:12px;color:#a18fa1;margin-top:14px;line-height:1.6}
.orbit-art{height:380px;display:grid;place-items:center;position:relative;isolation:isolate}.orbit-art:before{content:"";width:290px;height:290px;border-radius:50%;position:absolute;background:radial-gradient(circle,#ffe9f4,#fbe9ff 64%,transparent 70%);box-shadow:0 0 0 28px #fff7fc88,0 0 0 52px #ffe2ef33;animation:breathe 4.5s ease-in-out infinite;z-index:-1}@keyframes breathe{50%{transform:scale(1.07)}}.orb-svg{width:min(320px,95%);height:auto;filter:drop-shadow(0 25px 25px #db91b153);animation:orbfloat 4s ease-in-out infinite}@keyframes orbfloat{50%{transform:translateY(-10px) rotate(-3deg)}}.mini-heart{position:absolute;font-size:31px;animation:heartfloat 4.5s ease-in-out infinite;color:#f887a8}.mini-heart.ha{left:8%;top:22%}.mini-heart.hb{right:10%;top:13%;animation-delay:-1.5s}.mini-heart.hc{right:11%;bottom:12%;animation-delay:-2.8s}@keyframes heartfloat{50%{transform:translateY(-15px) scale(1.18)}}
.center-scene{text-align:center;max-width:950px;margin:20px auto}.stage-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid #f6dfea;color:#df739a;background:#fff9fd;border-radius:30px;padding:8px 13px;font-size:11px;font-weight:850;letter-spacing:.1em;margin-bottom:15px}.center-title{font-size:clamp(35px,6.5vw,70px);letter-spacing:-.055em;line-height:1.15;margin:0 0 16px;text-wrap:balance}.center-title span{color:var(--pink)}.center-text{color:var(--muted);line-height:1.9;max-width:660px;margin:0 auto 26px;font-size:16px}.heart-big{font-size:clamp(92px,18vw,170px);filter:drop-shadow(0 15px 15px #fa83af36);animation:heartbeat 1.8s ease-in-out infinite;margin:8px 0 15px}@keyframes heartbeat{20%{transform:scale(1.12)}40%{transform:scale(1)}60%{transform:scale(1.08)}}
.wish-panel{padding:28px;max-width:1030px;margin:22px auto}.wish-heading{text-align:center;margin-bottom:28px}.wish-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.wish{border:1px solid #ffedfa;border-radius:26px;background:linear-gradient(145deg,#fff,#fff7fc);padding:22px 19px;min-height:215px;text-align:left;opacity:0;transform:translateY(18px);animation:popwish .65s ease forwards;animation-delay:var(--delay)}.wish h3{margin:14px 0 9px;font-size:19px;line-height:1.3}.wish p{line-height:1.82;color:#81768d;font-size:13px;margin:0}.wish-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#fff0f6;color:#f46696}.wish-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.wish:nth-child(2) .wish-icon{background:#f0efff;color:#a17ae4}.wish:nth-child(3) .wish-icon{background:#fff4e9;color:#efa570}@keyframes popwish{to{opacity:1;transform:none}}.wish-panel .cta-row{justify-content:center;margin-top:25px}
.blossom{display:block;width:250px;max-width:90%;margin:-8px auto 8px;filter:drop-shadow(0 10px 16px #dba7bd22)}.tree-stroke{fill:none;stroke:#bf8b95;stroke-width:5;stroke-linecap:round;stroke-dasharray:650;stroke-dashoffset:650;animation:growTree 2.8s ease forwards}.tree-stroke.branch{stroke-width:3;animation-delay:.6s}.flower{opacity:0;transform-origin:center;animation:bloom .7s cubic-bezier(.16,.83,.26,1.2) forwards;animation-delay:var(--delay)}@keyframes growTree{to{stroke-dashoffset:0}}@keyframes bloom{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:scale(1)}}
.message-panel{padding:42px;max-width:830px;margin:25px auto;position:relative}.message-panel:after{content:'♡';position:absolute;right:25px;top:15px;font-size:90px;color:#fbd9e7;z-index:0;pointer-events:none}.message-inner{position:relative;z-index:1}.message-panel h2{font-size:clamp(29px,5vw,49px);line-height:1.2;letter-spacing:-.045em;margin:10px 0 22px}.message-box{border:1px solid #f3dbe8;border-radius:23px;background:linear-gradient(140deg,#fffafc,#fff);padding:23px 26px;color:#5d5975;font-size:clamp(15px,2vw,19px);line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:inset 0 0 0 4px #fff}.byline{text-align:right;color:#93849a;margin:18px 0 22px;font-size:13px}.byline strong{color:#e65e92;font-size:17px;display:block;margin-top:4px}
.final-card{max-width:790px;margin:25px auto;text-align:center;padding:44px 35px}.final-badge{font-size:95px;line-height:1.3;animation:heartbeat 2s infinite}.final-card h2{font-size:clamp(34px,5.3vw,61px);letter-spacing:-.05em;line-height:1.13;margin:8px 0 19px}.final-card p{line-height:1.9;color:#7e7894;max-width:580px;margin:0 auto 23px}.final-card .cta-row{justify-content:center}.quote-small{font-size:11px;color:#a39ab0;margin-top:16px}
.bottom{display:flex;justify-content:center;text-align:center;padding:15px 0 4px;font-size:11px;color:#ac96a7;line-height:1.7}.bottom a{font-weight:800;color:#d36b9a}
@media(max-width:820px){.lead-card{grid-template-columns:1fr;padding:28px}.orbit-art{order:-1;height:245px}.orbit-art:before{width:200px;height:200px}.orb-svg{width:205px}.mini-heart{font-size:21px}.wish-grid{grid-template-columns:1fr}.wish{min-height:0}.story{min-height:600px}.message-panel{padding:28px}}
@media(max-width:490px){.shell{padding:12px 13px 18px}.brand{font-size:10px;padding:9px 10px}.pill{font-size:11px;padding:9px}.progress-wrap{margin:12px 0}.story{min-height:510px;align-items:start}.lead-card{margin:8px auto 18px;padding:22px 18px;border-radius:27px}.orbit-art{height:210px}.title{font-size:clamp(31px,9vw,43px)}.sub{font-size:13px}.cta-row{flex-direction:column}.cta-row .btn{width:100%}.center-scene{margin-top:25px}.center-title{font-size:clamp(31px,9vw,46px)}.center-text{font-size:14px;padding:0 5px}.wish-panel{padding:19px 15px;margin-top:11px}.wish{padding:16px}.blossom{width:170px}.message-panel{margin-top:12px;padding:22px 16px}.message-box{padding:18px 16px;font-size:15px;line-height:1.9}.final-card{margin-top:18px;padding:30px 18px}.final-badge{font-size:80px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.petal-field{display:none}.tree-stroke{stroke-dashoffset:0}.flower,.wish{opacity:1;transform:none}}
/* Headings can be focused programmatically for assistive tech without a distracting focus rectangle. */
.scene h1[tabindex="-1"]:focus,.scene h2[tabindex="-1"]:focus{outline:none}
/* Long custom names are always wrapped rather than widening the mobile viewport. */
.title,.center-title,.message-panel h2,.final-card h2{overflow-wrap:anywhere}