@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--bg:#08060e;--fg:#fbf8ff;--muted:#b9adca;--pink:#ef9caf;--gold:#f3c76d;--violet:#a59aff;--line:rgba(255,255,255,.12);--ease:cubic-bezier(.2,.82,.22,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:"DM Sans",sans-serif}body{overflow:hidden}button,input{font:inherit}button{cursor:pointer}
.hidden{display:none!important}.topbar{position:fixed;left:24px;right:24px;top:20px;z-index:80;display:flex;justify-content:space-between;align-items:center}.logo{font-weight:800;letter-spacing:.1em}.logo span{color:var(--pink)}.top-actions{display:flex;gap:8px}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.05);color:#fff}.icon-btn:hover{background:rgba(255,255,255,.1)}
.progress{position:fixed;right:21px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:8px}.dot{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:rgba(5,4,10,.56);color:#73687d;font-size:.7rem}.dot.active{background:var(--gold);color:#201419;border-color:transparent;box-shadow:0 0 0 6px rgba(243,199,109,.06)}
#app{width:100%;height:100%}.screen{position:absolute;inset:0;display:grid;align-items:center;padding:9vh 8vw;opacity:0;visibility:hidden;transform:translate3d(28px,0,0) scale(.985);transition:opacity .55s var(--ease),transform .72s var(--ease),visibility 0s linear .72s;overflow:hidden}.screen.active{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease),transform .72s var(--ease)}
.eyebrow{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:#d5aebe;margin-bottom:14px}.btn{border:0;border-radius:999px;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:700}.btn.primary{background:linear-gradient(112deg,var(--gold),#ef9caf);color:#1e151a;box-shadow:0 14px 38px rgba(243,199,109,.16);transition:.2s ease}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(239,156,175,.2)}.btn.small{padding:10px 14px}.btn.wide{width:100%}
.gate{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#2a1c3b,#100915 42%,#040308);overflow:hidden}.gate-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px);background-size:78px 78px;opacity:.2}.gate-glow{position:absolute;width:40vw;height:40vw;border-radius:50%;filter:blur(45px);opacity:.22}.g1{left:-15vw;top:0;background:#ef9caf}.g2{right:-15vw;bottom:-10vh;background:#a59aff}.gate-card{width:min(450px,92vw);padding:36px 34px;border-radius:30px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:0 45px 120px rgba(0,0,0,.48);text-align:center}.gate-seal{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:radial-gradient(circle at 30% 25%,#fff4d7,#f3c76d 52%,#a05f78);color:#2e1b22;font-size:2rem;box-shadow:0 0 44px rgba(243,199,109,.18);animation:sealFloat 3.2s ease-in-out infinite}.gate-card h1{font:700 4rem/1 "Playfair Display";margin:0}.gate-card p{color:var(--muted);line-height:1.7}.pass-row{display:flex;gap:8px;margin:20px 0 11px}.pass-row input{height:50px;flex:1;min-width:0;border:1px solid var(--line);border-radius:15px;background:rgba(0,0,0,.22);color:#fff;padding:0 15px}.pass-row button{width:50px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.05);color:#fff}.gate-card small{display:block;min-height:18px;color:#ffb7c7;margin-top:10px}

.s1-grid{position:absolute;inset:0;opacity:.11;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:68px 68px;transform:perspective(560px) rotateX(62deg) translateY(21%);transform-origin:center bottom}.s1-glow{position:absolute;inset:0;background:radial-gradient(circle at 70% 40%,rgba(239,156,175,.18),transparent 24%),radial-gradient(circle at 24% 80%,rgba(165,154,255,.13),transparent 26%),linear-gradient(160deg,#0d0913,#09060e)}.hero-copy{position:relative;z-index:5;max-width:690px}.hero-copy h2,.wish-copy h2,.gallery-header h2,.note-intro h2,.finale-card h2{font:600 clamp(3.5rem,7vw,7.4rem)/.92 "Playfair Display";letter-spacing:-.04em;margin:0 0 20px}.hero-copy em,.wish-copy em,.gallery-header em,.note-intro em,.finale-card em{color:#f4c9d4;font-style:italic}.hero-copy p,.wish-copy p,.gallery-header p,.note-intro p,.finale-card p{max-width:560px;color:var(--muted);line-height:1.85;font-size:1rem}.floating-word{position:absolute;color:rgba(255,255,255,.24);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;z-index:4;animation:drift 5s ease-in-out infinite}.w1{left:12%;top:21%}.w2{left:37%;bottom:15%;animation-delay:-1.7s}.w3{right:30%;top:16%;animation-delay:-3.2s}
.hero-orb{position:absolute;right:10vw;top:50%;width:min(390px,35vw);aspect-ratio:1;transform:translateY(-50%);display:grid;place-items:center;transform-style:preserve-3d;animation:orbIn .95s var(--ease) .1s both}.orb-core{width:48%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff4d3,#f3c76d 44%,#945770 100%);color:#2d1d22;font:5rem "Playfair Display";box-shadow:inset -20px -20px 28px rgba(60,21,39,.22),0 28px 80px rgba(243,199,109,.18)}.orb-ring{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;inset:4%;animation:spin 15s linear infinite}.r2{inset:17%;border-color:rgba(239,156,175,.2);animation-duration:11s;animation-direction:reverse}.r3{inset:29%;border-color:rgba(243,199,109,.15);animation-duration:20s}.orb-badge{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#b9aabf;white-space:nowrap}

.wish-screen{grid-template-columns:minmax(320px,470px) minmax(430px,560px);gap:clamp(30px,6vw,100px);justify-content:center;background:radial-gradient(circle at 72% 50%,rgba(239,156,175,.13),transparent 24%),radial-gradient(circle at 28% 82%,rgba(243,199,109,.08),transparent 24%),linear-gradient(145deg,#140b19,#08060d)}.wish-copy{position:relative;z-index:5;max-width:560px}.wish-status{display:inline-flex;align-items:center;gap:9px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.045);margin:9px 0 18px;color:#ded2e2;font-size:.8rem}.wish-status i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px rgba(243,199,109,.08);animation:pulseDot 1.6s ease-in-out infinite}
.cake-stage{position:relative;width:min(520px,42vw);aspect-ratio:1;border:0;padding:0;background:transparent;cursor:pointer;justify-self:center;display:grid;place-items:center;transform-style:preserve-3d;outline:0;filter:drop-shadow(0 28px 38px rgba(0,0,0,.24));animation:cakeIn .9s var(--ease) .08s both}.cake-stage:focus-visible{outline:2px solid rgba(243,199,109,.85);outline-offset:10px;border-radius:32px}.cake-aura{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle,rgba(243,199,109,.20),transparent 65%);filter:blur(8px);animation:aura 3.5s ease-in-out infinite}.cake-shadow{position:absolute;bottom:10%;width:62%;height:9%;border-radius:50%;background:rgba(0,0,0,.48);filter:blur(21px)}.cake-plate{position:absolute;bottom:17%;width:76%;height:10%;border-radius:50%;background:linear-gradient(180deg,#fff7fa,#b9889d 55%,#6f4a5d);box-shadow:inset 0 0 0 3px rgba(255,255,255,.22),0 18px 34px rgba(0,0,0,.28)}.cake-tier{position:absolute;left:50%;transform:translateX(-50%) translateZ(20px);border-radius:18px 18px 26px 26px;background:linear-gradient(150deg,#fff7f8,#e89ab4 50%,#7d3c59);box-shadow:inset -20px -18px 28px rgba(66,14,39,.22),inset 12px 10px 21px rgba(255,255,255,.25);transition:.3s ease}.tier-bottom{width:58%;height:25%;bottom:24%}.tier-top{width:49%;height:18%;bottom:44%;background:linear-gradient(150deg,#fff9fa,#efbac9 48%,#a45470)}.cake-icing{position:absolute;bottom:40.5%;width:58%;height:7.2%;border-radius:18px;background:linear-gradient(#fff9fa,#f6dce4);box-shadow:0 7px 14px rgba(72,22,46,.16);z-index:5}.cake-icing:after{content:"";position:absolute;inset:0 5%;background:radial-gradient(circle at 20% 86%,transparent 0 9px,#f8dce5 10px 13px,transparent 14px),radial-gradient(circle at 50% 90%,transparent 0 8px,#f8dce5 9px 12px,transparent 13px),radial-gradient(circle at 82% 84%,transparent 0 10px,#f8dce5 11px 14px,transparent 15px)}.cake-sprinkles{position:absolute;z-index:6;bottom:29%;left:50%;width:46%;height:18%;transform:translateX(-50%)}.cake-sprinkles i{position:absolute;width:7px;height:2px;border-radius:2px;background:#f3c76d}.cake-sprinkles i:nth-child(1){left:18%;top:28%;transform:rotate(20deg)}.cake-sprinkles i:nth-child(2){left:38%;top:46%;background:#ef9caf;transform:rotate(-25deg)}.cake-sprinkles i:nth-child(3){left:63%;top:26%;background:#a59aff;transform:rotate(38deg)}.cake-sprinkles i:nth-child(4){left:30%;top:72%;background:#fff}.cake-sprinkles i:nth-child(5){left:68%;top:72%;background:#ef9caf;transform:rotate(-38deg)}.cake-sprinkles i:nth-child(6){left:50%;top:78%;background:#f3c76d}.candle{position:absolute;bottom:59%;width:17px;height:70px;border-radius:9px 9px 4px 4px;background:repeating-linear-gradient(135deg,#fff 0 7px,#f3c76d 7px 14px);z-index:8;box-shadow:0 9px 14px rgba(0,0,0,.18)}.c1{left:37%}.c2{left:48%}.c3{left:58%}.candle i{position:absolute;top:-20px;left:50%;width:12px;height:22px;transform:translateX(-50%);border-radius:55% 45% 60% 40%;background:radial-gradient(circle at 45% 30%,#fff3ad,#ffd05f 42%,#ff7770 100%);box-shadow:0 0 23px 7px rgba(255,204,112,.36);animation:flicker .8s ease-in-out infinite alternate}.cake-label{position:absolute;bottom:27%;z-index:10;text-align:center;letter-spacing:.20em;font-size:.67rem;color:#fff4f5;text-shadow:0 2px 10px rgba(71,18,44,.35)}.tap-hint{position:absolute;bottom:1%;left:50%;transform:translateX(-50%);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3);white-space:nowrap}.cake-stage:hover .cake-tier{transform:translateX(-50%) translateY(-3px) translateZ(20px)}.cake-stage:active .cake-tier{transform:translateX(-50%) translateY(5px) translateZ(20px) scale(.985)}

.gallery-screen{display:block;padding-top:8vh;padding-bottom:3vh;background:radial-gradient(circle at 50% 0,rgba(165,154,255,.14),transparent 30%),linear-gradient(160deg,#09070f,#120a19);overflow:hidden}.gallery-header{width:min(1040px,100%);margin:0 auto 18px;display:grid;grid-template-columns:1fr .7fr;gap:5vw;align-items:end}.gallery-header h2{font-size:clamp(3.1rem,5.5vw,6rem)}.gallery-header p{align-self:end;max-width:440px}.gallery-grid{width:min(1040px,100%);height:59vh;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:13px;margin:0 auto 13px;overflow:visible}.memory{position:relative;min-width:0;min-height:0;border:1px solid rgba(255,255,255,.12);border-radius:21px;background:#110914;overflow:hidden;box-shadow:0 18px 46px rgba(0,0,0,.22);transform-style:preserve-3d;transition:.32s ease;appearance:none;color:#fff;padding:0}.memory img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:transform .55s var(--ease),filter .55s var(--ease)}.memory:hover{transform:translateY(-8px) rotateX(3deg) rotateY(-3deg) scale(1.015);box-shadow:0 28px 68px rgba(0,0,0,.3)}.memory:hover img{transform:scale(1.07);filter:saturate(1.04)}.memory:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(4,2,8,.84));pointer-events:none}.memory .meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:4;text-align:left}.memory .meta span{display:block;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#efc5d2}.memory .meta b{display:block;font-size:.84rem;margin-top:4px}.memory .card-shine{position:absolute;inset:0;z-index:3;background:linear-gradient(125deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);transform:translateX(-130%);transition:.8s var(--ease);pointer-events:none}.memory:hover .card-shine{transform:translateX(130%)}.video-memory{border-color:rgba(243,199,109,.25)}.play-badge{position:absolute;top:11px;right:11px;z-index:5;padding:6px 9px;border-radius:999px;background:rgba(10,7,14,.84);border:1px solid rgba(243,199,109,.3);color:#ffe29a;font-size:.58rem;letter-spacing:.14em}.gallery-nav{height:62px;display:flex;justify-content:center;align-items:center;position:relative;z-index:12}.gallery-nav .btn{min-width:190px}
.note-screen{grid-template-columns:minmax(300px,470px) minmax(500px,620px);gap:clamp(35px,6vw,100px);justify-content:center;background:radial-gradient(circle at 25% 50%,rgba(243,199,109,.10),transparent 24%),radial-gradient(circle at 78% 36%,rgba(239,156,175,.11),transparent 23%),#0b0710}.note-intro{position:relative;z-index:4}.note-intro h2{font-size:clamp(3.2rem,6vw,6.2rem)}.note-sticker{display:inline-flex;margin-top:20px;padding:8px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.04);color:#a99bad;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}.note-rays{position:absolute;right:7%;top:9%;width:33vw;height:33vw;border:1px solid rgba(243,199,109,.08);border-radius:50%;box-shadow:0 0 0 45px rgba(243,199,109,.02),0 0 0 90px rgba(239,156,175,.012);animation:spin 38s linear infinite;pointer-events:none}.note-card{position:relative;align-self:center;background:linear-gradient(145deg,#fffaf1,#f3e4da);color:#573645;width:min(620px,100%);padding:43px 47px 38px;border-radius:22px;box-shadow:0 36px 100px rgba(0,0,0,.36);transform:rotate(-1deg);overflow:hidden}.note-card:before{content:"";position:absolute;inset:12px;border:1px solid rgba(142,97,113,.14);border-radius:14px;pointer-events:none}.note-card:after{content:"";position:absolute;right:-45px;top:-45px;width:150px;height:150px;background:linear-gradient(135deg,transparent 49%,rgba(105,65,80,.08) 50%);pointer-events:none}.note-top{display:flex;justify-content:space-between;align-items:center;color:#a16d7d;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase}.note-top span:last-child{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#cc8e9a;color:#fff7f7;font:1.15rem "Playfair Display"}.note-card h3{font:2.6rem "Playfair Display";margin:18px 0 14px;color:#422733}.note-card p{position:relative;z-index:2;color:#725664;line-height:1.82;margin:12px 0}.note-sign{position:relative;z-index:2;color:#7c5b68;margin:22px 0}.note-sign strong{display:block;color:#be7186;font-size:1.8rem;margin-top:4px}.note-card .btn{position:relative;z-index:3}
.finale-screen{background:radial-gradient(circle at 50% 50%,rgba(243,199,109,.10),transparent 23%),linear-gradient(160deg,#07040c,#130a1a 56%,#08050d)}.finale-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(239,156,175,.10),transparent 23%),radial-gradient(circle at 10% 25%,rgba(165,154,255,.12),transparent 22%)}.finale-stars{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.4px);background-size:82px 82px;opacity:.19}.finale-orbit{position:absolute;left:50%;top:53%;width:80vw;height:38vh;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg);animation:spin 30s linear infinite}.o2{width:53vw;height:24vh;border-color:rgba(243,199,109,.12);animation-duration:20s;animation-direction:reverse}.finale-card{position:relative;z-index:4;text-align:center;max-width:780px;margin:0 auto}.sparkle-mark{font-size:2.4rem;color:var(--gold);text-shadow:0 0 30px rgba(243,199,109,.24);animation:twinkle 2.1s ease-in-out infinite}.finale-card h2{font-size:clamp(3.5rem,6.6vw,7rem)}.finale-card p{margin:0 auto 25px}.finale-line{display:flex;align-items:center;gap:10px;margin:25px 0;color:#dcc17f;font-size:.63rem;letter-spacing:.2em}.finale-line span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(243,199,109,.4))}
.modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px}.modal-backdrop{position:absolute;inset:0;background:rgba(3,2,8,.88)}.video-card{position:relative;width:min(980px,96vw);max-height:95vh;background:linear-gradient(160deg,#1a0f21,#0a070f);border:1px solid rgba(255,255,255,.14);border-radius:26px;overflow:hidden;box-shadow:0 46px 130px rgba(0,0,0,.58);animation:modalIn .42s var(--ease)}.video-head,.video-foot{padding:16px 19px;display:flex;justify-content:space-between;align-items:center;gap:12px}.video-head h3{margin:0;font:1.65rem "Playfair Display"}.close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:1.5rem}.video-frame{position:relative;padding:10px;background:#030208}.video-frame video{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:#000;border-radius:17px;max-height:70vh;image-rendering:auto;transform:translateZ(0);backface-visibility:hidden}.video-overlay{position:absolute;left:20px;right:20px;bottom:18px;z-index:8;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.video-overlay>*{pointer-events:auto}.video-overlay span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(7,4,10,.82);font-size:.74rem}.video-overlay button{border:0;border-radius:999px;padding:11px 15px;background:var(--gold);color:#201519;font-weight:800}.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;display:none;border:0;border-radius:999px;padding:13px 18px;background:var(--gold);color:#21161a;font-weight:800;box-shadow:0 14px 38px rgba(0,0,0,.3)}.video-error{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;max-width:78%;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.72);font-size:.74rem;text-align:center}.video-foot{color:#a89eae;font-size:.78rem}

#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:700;background:#22152a;border:1px solid var(--line);border-radius:999px;padding:10px 14px;transition:.25s}.show{opacity:1!important;transform:translate(-50%,0)!important}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes flicker{from{transform:translateX(-50%) scale(.92);opacity:.72}to{transform:translateX(-50%) scale(1.08);opacity:1}}@keyframes aura{50%{transform:scale(1.06);opacity:.9}}@keyframes orbIn{from{opacity:0;transform:translateY(-50%) scale(.88)}to{opacity:1;transform:translateY(-50%) scale(1)}}@keyframes cakeIn{from{opacity:0;transform:translateY(34px) scale(.86)}to{opacity:1;transform:none}}@keyframes twinkle{50%{transform:scale(1.18);opacity:.9}}@keyframes sealFloat{50%{transform:translateY(-5px) rotate(4deg)}}@keyframes drift{50%{transform:translateY(-10px)}}@keyframes pulseDot{50%{transform:scale(1.3);box-shadow:0 0 0 9px rgba(243,199,109,.02)}}@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fall{to{transform:translateY(112vh) rotate(520deg);opacity:0}}

@media(max-width:1000px){.hero-orb{right:2vw;opacity:.45}.wish-screen{grid-template-columns:1fr;gap:0}.wish-copy{text-align:center;max-width:700px;margin:auto}.cake-stage{width:min(480px,72vw)}.gallery-header{grid-template-columns:1fr;text-align:center;gap:5px}.gallery-header p{margin:0 auto}.gallery-grid{height:58vh}.note-screen{grid-template-columns:1fr;gap:2vh;text-align:center}.note-intro{margin:auto}.note-card{width:min(660px,92vw);margin:auto}.finale-card{max-width:760px}}
@media(max-width:700px){.topbar{left:13px;right:13px;top:13px}.progress{right:7px}.dot{width:31px;height:31px;font-size:.65rem}.screen{padding:9vh 6vw 5vh}.hero-copy h2,.wish-copy h2,.gallery-header h2,.note-intro h2,.finale-card h2{font-size:clamp(2.85rem,13vw,4.5rem)}.hero-copy{margin-top:13vh}.hero-orb{position:absolute;top:20%;right:-16vw;width:72vw}.floating-word{display:none}.cake-stage{width:min(90vw,420px)}.gallery-screen{padding-top:8vh}.gallery-grid{height:55vh;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,1fr);overflow-y:auto;padding:2px 2px 76px;scrollbar-width:thin}.gallery-nav{position:absolute;left:0;right:0;bottom:18px;height:52px;z-index:20}.gallery-nav .btn{min-width:190px}.memory{border-radius:17px}.memory .meta{left:10px;right:10px;bottom:8px}.memory .meta b{font-size:.76rem}.memory .meta span{font-size:.52rem}.note-screen{overflow:auto;padding-bottom:8vh}.note-card{padding:30px 24px 26px}.note-card h3{font-size:2.25rem}.video-card{width:96vw}.video-overlay{left:15px;right:15px;bottom:15px}.video-overlay button{padding:10px 13px}.gate-card{padding:28px 22px}.gate-card h1{font-size:3.2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* FINAL LAYOUT SAFETY: the gallery CTA always stays visible */
.gallery-screen{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.gallery-header{flex:0 0 auto}
.gallery-grid{flex:1 1 auto;min-height:0;max-height:none;margin-bottom:12px}
.gallery-nav{flex:0 0 58px}
@media(max-width:700px){
  .gallery-screen{display:block;position:relative}
  .gallery-grid{height:55vh;max-height:55vh}
  .gallery-nav{position:absolute}
}

/* Password input fix: keep the entire auth control above decorative layers. */
.gate-card{position:relative;z-index:20;pointer-events:auto}
.gate-seal,.gate-card h1,.gate-card p,.gate-card .eyebrow,.pass-row,.gate-card small{position:relative;z-index:21}
.pass-row{position:relative;z-index:30;isolation:isolate}
.pass-row input,.pass-row button{position:relative;z-index:31;pointer-events:auto;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.pass-row input{caret-color:#fff;-webkit-appearance:none;appearance:none}
.pass-row input::placeholder{color:rgba(255,255,255,.52)}
.pass-row input:focus{border-color:rgba(243,199,109,.68);box-shadow:0 0 0 4px rgba(243,199,109,.08)}
#passwordForm{position:relative;z-index:30}
.gate-glow,.gate-stars{pointer-events:none}
.input-shake{animation:inputShake .34s ease}
@keyframes inputShake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}100%{transform:translateX(0)}}

/* Unified media viewer: photos and videos intentionally share the same shell. */
.media-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:18px;isolation:isolate}
.media-modal.hidden{display:none!important}
.media-modal .modal-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(239,156,175,.12),transparent 35%),rgba(3,2,8,.91);backdrop-filter:blur(12px)}
.video-card,.image-card{position:relative;z-index:2;width:min(980px,96vw);max-height:95vh;background:linear-gradient(160deg,#1a0f21,#09060e);border:1px solid rgba(255,255,255,.15);border-radius:26px;overflow:hidden;box-shadow:0 46px 130px rgba(0,0,0,.62),0 0 80px rgba(239,156,175,.08);animation:modalIn .42s var(--ease)}
.video-head,.video-foot,.media-head,.media-foot{padding:16px 19px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.media-head h3{margin:0;font:1.65rem "Playfair Display"}
.media-foot{color:#a89eae;font-size:.78rem}
.close{flex:0 0 auto;width:42px;height:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.03));color:#fff;font-size:1.65rem;line-height:1;display:grid;place-items:center;transition:.2s ease;cursor:pointer;position:relative;z-index:20}
.close:hover,.close:focus-visible{background:rgba(239,156,175,.18);border-color:rgba(239,156,175,.5);transform:rotate(90deg) scale(1.05);outline:none}
.image-frame{position:relative;display:grid;place-items:center;min-height:min(64vh,650px);max-height:72vh;padding:22px;background:radial-gradient(circle at 50% 50%,rgba(165,154,255,.10),transparent 52%),#030208;overflow:hidden}
.image-frame:before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;pointer-events:none}
#fullImg{position:relative;z-index:2;display:block;width:auto;height:auto;max-width:min(90vw,900px);max-height:calc(72vh - 44px);object-fit:contain;border-radius:15px;box-shadow:0 28px 70px rgba(0,0,0,.45);user-select:none;-webkit-user-drag:none}
.image-corner{position:absolute;width:58px;height:58px;border-color:rgba(243,199,109,.55);z-index:3;pointer-events:none}
.image-corner.top-left{left:30px;top:30px;border-left:1px solid;border-top:1px solid}
.image-corner.bottom-right{right:30px;bottom:30px;border-right:1px solid;border-bottom:1px solid}
.video-frame{position:relative;padding:10px;background:#030208}
.video-frame video{display:block;width:100%;aspect-ratio:auto;object-fit:contain;background:#000;border-radius:17px;max-height:70vh}
.video-overlay{position:absolute;left:20px;right:20px;bottom:18px;z-index:8;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.video-overlay>*{pointer-events:auto}
.video-overlay span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(7,4,10,.82);font-size:.74rem}
.video-overlay button{border:0;border-radius:999px;padding:11px 15px;background:var(--gold);color:#201519;font-weight:800;cursor:pointer}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;display:none;border:0;border-radius:999px;padding:13px 18px;background:var(--gold);color:#21161a;font-weight:800;box-shadow:0 14px 38px rgba(0,0,0,.3)}
.video-error{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;max-width:78%;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.72);font-size:.74rem;text-align:center}
@media(max-width:700px){
  .media-modal{padding:9px}
  .video-card,.image-card{width:97vw;border-radius:21px}
  .media-head,.media-foot,.video-head,.video-foot{padding:13px 14px}
  .media-head h3,.video-head h3{font-size:1.3rem}
  .image-frame{min-height:54vh;max-height:65vh;padding:14px}
  #fullImg{max-width:91vw;max-height:calc(65vh - 28px);border-radius:12px}
  .image-frame:before{inset:10px}
  .image-corner{width:35px;height:35px}.image-corner.top-left{left:20px;top:20px}.image-corner.bottom-right{right:20px;bottom:20px}
}
/* 2026-08-22 FIRST PAGE REFINEMENT — clean birthday card scene, no V/star branding */
.logo{display:none!important}.mini-date{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.045);color:#e9dfe6;font:700 .72rem/1 "DM Sans",sans-serif;letter-spacing:.16em;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.birthday-screen{grid-template-columns:minmax(420px,.9fr) minmax(430px,1.1fr);gap:clamp(30px,6vw,100px);background:#08060e;isolation:isolate}
.s1-backdrop{position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 70% 48%,rgba(239,156,175,.16),transparent 27%),radial-gradient(circle at 18% 75%,rgba(165,154,255,.09),transparent 28%),linear-gradient(145deg,#0d0912 0%,#08060d 52%,#100914 100%)}
.s1-backdrop:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:74px 74px;mask-image:linear-gradient(to right,transparent,#000 45%,#000 100%)}
.s1-orbit{position:absolute;z-index:-2;border:1px solid rgba(255,255,255,.055);border-radius:50%;pointer-events:none}.orbit-a{width:48vw;height:48vw;right:-11vw;top:-12vw}.orbit-b{width:32vw;height:32vw;right:5vw;bottom:-16vw;border-style:dashed;border-color:rgba(239,156,175,.08);animation:spin 28s linear infinite}
.birthday-screen .hero-copy{position:relative;z-index:5;max-width:700px}.birthday-screen .hero-copy h2{font-size:clamp(4rem,7vw,7.6rem);margin-bottom:24px}.birthday-screen .hero-copy p{max-width:590px;font-size:1.04rem;color:#c1b5c5}.hero-actions{display:flex;align-items:center;gap:18px;margin-top:29px}.hero-note{font:italic .78rem/1.4 "Playfair Display",serif;color:#8f8293}.hero-progress{display:flex;align-items:center;gap:11px;margin-top:44px;color:#786d7f;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}.hero-progress i{display:block;width:64px;height:1px;background:linear-gradient(90deg,#ef9caf,rgba(239,156,175,.1))}.hero-progress span{color:#c6b8ca;font-weight:700}.hero-progress b{font-weight:500}
.birthday-art{position:relative;justify-self:center;width:min(520px,42vw);aspect-ratio:1;display:grid;place-items:center;perspective:1100px;transform-style:preserve-3d}.birthday-art:before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(239,156,175,.14),rgba(165,154,255,.035) 48%,transparent 69%);filter:blur(4px);animation:aura 4s ease-in-out infinite}.birthday-card{position:relative;z-index:5;width:62%;aspect-ratio:.78;border:1px solid rgba(255,255,255,.14);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025));box-shadow:0 40px 95px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px);display:flex;flex-direction:column;align-items:center;justify-content:center;transform-style:preserve-3d;overflow:hidden;transition:transform .15s linear}.birthday-card:before{content:"";position:absolute;inset:11px;border-radius:20px;border:1px solid rgba(255,255,255,.055)}.birthday-card:after{content:"";position:absolute;width:150%;height:35%;left:-35%;top:-18%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:rotate(-20deg);animation:cardSweep 5.5s ease-in-out infinite}.card-shimmer{position:absolute;inset:0;background:radial-gradient(circle at 50% 31%,rgba(239,156,175,.16),transparent 28%);pointer-events:none}.card-small{position:relative;z-index:2;font-size:.64rem;letter-spacing:.34em;color:#b4a5b8;margin-bottom:3px;transform:translateZ(25px)}.birthday-card strong{position:relative;z-index:2;font:600 clamp(6rem,10vw,9rem)/.82 "Playfair Display",serif;letter-spacing:-.075em;color:#fff8fb;text-shadow:0 10px 36px rgba(0,0,0,.24);transform:translateZ(45px)}.card-heart{position:relative;z-index:2;margin-top:15px;font:italic 2rem "Playfair Display",serif;color:#f2a9bc;transform:translateZ(55px);filter:drop-shadow(0 0 15px rgba(239,156,175,.23))}.card-line{position:relative;z-index:2;width:56px;height:1px;background:linear-gradient(90deg,transparent,#d4a4b3,transparent);margin:17px 0 13px}.birthday-card p{position:relative;z-index:2;margin:0;text-align:center;color:#9f929f;font-size:.66rem;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;transform:translateZ(24px)}
.art-ring{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}.ar1{inset:3%;animation:spin 22s linear infinite}.ar2{inset:17%;border-style:dashed;border-color:rgba(239,156,175,.12);animation:spin 16s linear infinite reverse}.art-chip{position:absolute;z-index:7;padding:9px 12px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(9,6,13,.72);backdrop-filter:blur(12px);color:#a99cad;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 28px rgba(0,0,0,.24);animation:drift 5s ease-in-out infinite}.chip-one{left:-2%;top:24%;transform:rotate(-5deg)}.chip-two{right:-4%;top:52%;animation-delay:-1.7s;transform:rotate(4deg)}.chip-three{left:4%;bottom:14%;animation-delay:-3.2s;transform:rotate(2deg);color:#d5b0bc}
@keyframes cardSweep{0%,62%{transform:translateX(-70%) rotate(-20deg)}82%,100%{transform:translateX(90%) rotate(-20deg)}}
@media(max-width:1000px){.birthday-screen{grid-template-columns:1fr}.birthday-screen .hero-copy{max-width:680px}.birthday-art{position:absolute;right:-7vw;top:17%;width:48vw;opacity:.5}.hero-progress{margin-top:35px}}
@media(max-width:700px){.mini-date{height:36px;min-width:58px}.birthday-screen{display:block;padding-top:17vh}.birthday-screen .hero-copy{margin-top:0}.birthday-screen .hero-copy h2{font-size:clamp(3.35rem,14vw,5rem)}.birthday-screen .hero-copy p{font-size:.92rem;max-width:82%}.hero-actions{flex-direction:column;align-items:flex-start;gap:11px}.hero-progress{margin-top:28px}.birthday-art{right:-31vw;top:19%;width:79vw;opacity:.32}.birthday-card{width:58%}.art-chip{display:none}}


/* 2026-08-22 VIDEO SIZE REFINEMENT
   Keep the cake film compact and size ACT III films close to their native
   resolution, preventing low-resolution clips from being stretched blurry. */
#videoModal.cake-video-modal .video-card,
#videoModal.gallery-video-modal .video-card{
  width:min(var(--video-modal-width,760px),90vw);
  max-height:92vh;
}
#videoModal.cake-video-modal .video-frame,
#videoModal.gallery-video-modal .video-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#videoModal.cake-video-modal .video-frame video,
#videoModal.gallery-video-modal .video-frame video{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:58vh;
  object-fit:contain;
  margin:0 auto;
  transform:none;
  backface-visibility:visible;
  image-rendering:auto;
}
@media(max-width:700px){
  #videoModal.cake-video-modal .video-card,
  #videoModal.gallery-video-modal .video-card{
    width:min(var(--video-modal-width,760px),94vw);
  }
  #videoModal.cake-video-modal .video-frame video,
  #videoModal.gallery-video-modal .video-frame video{
    max-height:54vh;
  }
}

/* 2026-08-22 MOBILE + DEPLOY STABILITY PASS
   Keeps the existing visual language while making every act usable on small
   screens and removing touch/layer conflicts around the final CTA. */
html,body,#app{width:100%;height:100%;min-height:100%;}
@supports (height:100dvh){html,body,#app{height:100dvh;min-height:100dvh}}
.screen{min-width:0;min-height:0;overscroll-behavior:contain}
.screen:not(.active){pointer-events:none}
.screen.active{pointer-events:auto}
.btn,.icon-btn,.dot,.memory,.cake-stage,.close,.video-overlay button{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#toFinal{
  position:relative;
  z-index:50;
  pointer-events:auto;
  min-height:50px;
  isolation:isolate;
}
.note-card{isolation:isolate}
.note-card>*{position:relative}
.note-card:before,.note-card:after,.note-rays{pointer-events:none}

/* Keep the web-optimised 720p source sharp instead of scaling it beyond the
   visible player. This also lowers compositing cost on phones. */
#videoModal .video-frame video{max-width:100%;will-change:auto;transform:none!important;backface-visibility:visible!important}

@media(max-width:700px){
  body{overflow:hidden;}
  .topbar{
    left:max(12px,env(safe-area-inset-left));
    right:max(12px,env(safe-area-inset-right));
    top:max(12px,env(safe-area-inset-top));
    z-index:120;
  }
  /* Side dots were overlapping content/touch targets on narrow screens. The
     story already has explicit next/replay controls, so keep mobile cleaner. */
  .progress{display:none}
  .screen{
    width:100%;
    height:100%;
    padding:calc(76px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    align-content:start;
  }

  /* Act I */
  .birthday-screen{display:flex;align-items:center;min-height:100%;padding-top:calc(92px + env(safe-area-inset-top));padding-bottom:calc(44px + env(safe-area-inset-bottom))}
  .birthday-screen .hero-copy{width:100%;margin:0;position:relative;z-index:8}
  .birthday-screen .hero-copy h2{font-size:clamp(3rem,14.5vw,4.55rem);line-height:.94;margin-bottom:18px}
  .birthday-screen .hero-copy p{max-width:88%;font-size:.93rem;line-height:1.72}
  .hero-actions{margin-top:24px;gap:12px;align-items:flex-start}
  .hero-actions .btn{max-width:100%;white-space:normal;text-align:center}
  .hero-progress{margin-top:25px}
  .birthday-art{right:-37vw;top:18%;width:86vw;opacity:.25;pointer-events:none}

  /* Act II */
  .wish-screen{display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:center;min-height:100%}
  .wish-copy{width:100%;margin:0 auto}
  .wish-copy h2{font-size:clamp(2.7rem,12vw,4rem);margin-bottom:14px}
  .wish-copy p{font-size:.9rem;line-height:1.65;margin-left:auto;margin-right:auto}
  .wish-status{margin:6px 0 14px}
  .cake-stage{width:min(82vw,350px);flex:0 0 auto;margin:0 auto}

  /* Act III */
  .gallery-screen{display:block;position:relative;padding-top:calc(82px + env(safe-area-inset-top));padding-bottom:calc(22px + env(safe-area-inset-bottom));overflow-y:auto}
  .gallery-header{display:block;margin-bottom:15px;text-align:left}
  .gallery-header h2{font-size:clamp(2.7rem,12vw,4rem);margin-bottom:8px}
  .gallery-grid{
    display:grid;
    height:auto!important;
    max-height:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none!important;
    grid-auto-rows:clamp(145px,42vw,185px);
    gap:10px;
    overflow:visible!important;
    padding:0 0 14px!important;
    margin-bottom:0;
  }
  .memory{min-height:145px}
  .gallery-nav{
    position:sticky!important;
    left:auto!important;right:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
    height:auto!important;
    padding:10px 0 4px;
    background:linear-gradient(180deg,transparent,rgba(9,7,15,.92) 38%,rgba(9,7,15,.98));
    z-index:60;
  }
  .gallery-nav .btn{width:min(100%,320px);min-height:50px}

  /* Act IV */
  .note-screen{
    display:block;
    text-align:left;
    padding-top:calc(88px + env(safe-area-inset-top));
    padding-bottom:calc(36px + env(safe-area-inset-bottom));
    overflow-y:auto;
  }
  .note-intro{width:100%;margin:0 0 24px;text-align:left}
  .note-intro h2{font-size:clamp(2.7rem,12vw,4rem);margin-bottom:12px}
  .note-intro p{font-size:.9rem;line-height:1.65}
  .note-sticker{margin-top:12px}
  .note-card{
    width:100%;
    max-width:none;
    margin:0;
    padding:28px 21px 24px;
    border-radius:20px;
    transform:none!important;
    overflow:visible;
  }
  .note-card h3{font-size:2.05rem;line-height:1.08;margin-top:16px}
  .note-card p{font-size:.91rem;line-height:1.68;margin:10px 0}
  .note-sign{margin:18px 0}
  #toFinal{display:flex;width:100%;min-height:54px;margin-top:8px;padding:14px 18px}

  /* Act V */
  .finale-screen{display:flex;align-items:center;min-height:100%;padding-top:calc(88px + env(safe-area-inset-top));padding-bottom:calc(38px + env(safe-area-inset-bottom));overflow-y:auto}
  .finale-card{width:100%;margin:auto}
  .finale-card h2{font-size:clamp(2.75rem,12vw,4rem)}
  .finale-card p{font-size:.91rem;line-height:1.68}
  .finale-line{margin:18px 0;font-size:.55rem;letter-spacing:.14em;gap:7px}
  .finale-line b{max-width:78%}

  /* Media viewer */
  .modal,.media-modal{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));overflow:auto}
  #videoModal .video-card,.image-card{width:100%;max-width:96vw;max-height:calc(100dvh - 16px);border-radius:20px}
  #videoModal .video-head,#videoModal .video-foot{padding:11px 12px}
  #videoModal .video-head .eyebrow{margin-bottom:4px;font-size:.54rem}
  #videoModal .video-head h3{font-size:1.2rem}
  #videoModal .video-frame{padding:6px}
  #videoModal .video-frame video{border-radius:13px;max-height:52dvh!important}
  .video-overlay{left:11px;right:11px;bottom:11px}
  .video-overlay span{display:none}
  .video-overlay button{padding:9px 12px;font-size:.75rem}
  .video-foot{flex-wrap:wrap;row-gap:8px}
  .video-foot>span{font-size:.68rem;max-width:56%}
  .video-foot .btn{margin-left:auto;min-height:40px}
  .video-error{max-width:84%;border-radius:16px;line-height:1.35}

  /* Password screen */
  .gate{padding:calc(16px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));overflow-y:auto}
  .gate-card{width:min(100%,430px);padding:25px 19px 22px;border-radius:24px}
  .gate-seal{width:64px;height:64px;margin-bottom:13px}
  .gate-card h1{font-size:3rem}
  .gate-card p{font-size:.9rem}
}

@media(max-width:380px){
  .screen{padding-left:14px;padding-right:14px}
  .birthday-screen .hero-copy h2,.wish-copy h2,.gallery-header h2,.note-intro h2,.finale-card h2{font-size:clamp(2.55rem,13vw,3.45rem)}
  .gallery-grid{grid-auto-rows:150px}
  .note-card{padding-left:17px;padding-right:17px}
  .note-card p{font-size:.87rem}
}

@media(max-height:700px) and (max-width:700px){
  .wish-screen{justify-content:flex-start}
  .cake-stage{width:min(70vw,285px)}
  .birthday-screen{align-items:flex-start}
  .finale-screen{align-items:flex-start}
}