:root{--bg:#08060d;--bg2:#120b16;--rose:#d77b93;--rose2:#f0a9ba;--cream:#fff7f2;--muted:#c9bdc5;--glass:rgba(255,255,255,.075);--line:rgba(255,255,255,.12);--shadow:0 24px 80px rgba(0,0,0,.42)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--cream);font-family:'DM Sans',sans-serif;overflow-x:hidden}button{font:inherit}img,video{display:block;max-width:100%}.app{min-height:100vh;background:radial-gradient(circle at 20% 10%,rgba(190,70,105,.18),transparent 30%),radial-gradient(circle at 85% 60%,rgba(109,74,132,.16),transparent 30%),linear-gradient(180deg,#06050a,#0d0811 55%,#07050a)}.noise{position:fixed;inset:0;pointer-events:none;opacity:.10;z-index:90;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}.topbar{position:fixed;top:max(14px,env(safe-area-inset-top));left:16px;right:16px;z-index:70;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;transition:.45s opacity,.45s transform}.brand,.music{pointer-events:auto;background:rgba(9,7,13,.64);border:1px solid var(--line);backdrop-filter:blur(18px);border-radius:999px;color:#fff}.brand{padding:10px 15px;font-weight:700;letter-spacing:.04em}.brand b{color:var(--rose2)}.music{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer}.music-dot{width:9px;height:9px;border-radius:50%;background:#777}.music.on .music-dot{background:#ff90ad;box-shadow:0 0 18px #ff90ad}.music small{opacity:.72}.music.pulse{animation:pulseMusic 1.9s ease-in-out infinite}@keyframes pulseMusic{0%,100%{box-shadow:0 0 0 rgba(239,158,180,0)}50%{box-shadow:0 0 0 10px rgba(239,158,180,.06)}}.progress{position:fixed;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08);z-index:80;transition:.4s opacity}.progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c96482,#f1b0c0);box-shadow:0 0 18px rgba(241,176,192,.4);transition:width .2s}.secret-counter{position:fixed;left:16px;bottom:18px;z-index:48;display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:rgba(7,5,10,.58);border:1px solid var(--line);backdrop-filter:blur(14px);font-size:.75rem;color:#bfb1ba;transition:.35s opacity,.35s transform}.secret-counter b{font-family:'Playfair Display';color:var(--rose2);font-size:1rem}.hero{min-height:100dvh;display:grid;place-items:center;padding:110px 22px 86px;position:relative;overflow:hidden}.hero::before{content:"21";position:absolute;font:700 clamp(11rem,35vw,32rem)/1 'Playfair Display';color:rgba(255,255,255,.025);right:-4vw;bottom:-10vh;pointer-events:none}.hero-card{width:min(880px,100%);position:relative;z-index:2}.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.76rem;color:#e5a8b8;font-weight:700}.hero h1,.scene h2,.letter h2,.final h2,.gallery h2,.accepted h3{font-family:'Playfair Display',serif;letter-spacing:-.035em}.hero h1{font-size:clamp(3rem,8vw,6.8rem);line-height:.95;margin:14px 0 22px;max-width:820px}.hero-lines{display:grid;gap:8px;margin-bottom:30px}.hero-lines p{margin:0;color:var(--muted);font-size:clamp(1rem,2.2vw,1.25rem)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.cta,.ghost,.voice-btn{border:0;border-radius:999px;padding:15px 22px;font-weight:700;cursor:pointer;transition:.2s transform,.2s filter,.25s box-shadow}.cta{background:linear-gradient(135deg,#ca6684,#ef9eb4);color:#170910;box-shadow:0 16px 36px rgba(211,109,139,.27)}.ghost,.voice-btn{background:rgba(255,255,255,.075);color:#fff;border:1px solid var(--line)}.cta:hover,.ghost:hover,.voice-btn:hover{transform:translateY(-2px)}.cta-heart{position:relative;overflow:hidden}.cta-heart::after{content:"";position:absolute;inset:-40%;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.4),transparent 65%);transform:translateX(-120%);animation:shine 3.2s linear infinite}@keyframes shine{to{transform:translateX(120%)}}.hint{font-size:.88rem;color:#9e9199;margin-top:12px}.cinema-intro{position:fixed;inset:0;z-index:200;background:#020204;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.55s opacity;padding:24px;text-align:center}.cinema-intro.show{opacity:1;pointer-events:auto}.cinema-copy{font:600 clamp(1.6rem,6vw,4rem)/1.2 'Playfair Display';max-width:900px;opacity:0;transform:translateY(12px);transition:.5s opacity,.5s transform;color:#fff7f2}.cinema-copy.visible{opacity:1;transform:none}.story{position:relative}.scene{min-height:100dvh;display:grid;align-items:center;padding:104px 20px 72px;position:relative;isolation:isolate;overflow:hidden}.scene-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(46px) saturate(.8);transform:scale(1.12);opacity:.13;z-index:-2;transition:.8s transform,.5s opacity}.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,10,.94),rgba(7,5,10,.72) 50%,rgba(7,5,10,.89));z-index:-1}.scene-watermark{position:absolute;right:2vw;bottom:-4vh;font:700 clamp(7rem,20vw,18rem)/1 'Playfair Display';color:rgba(255,255,255,.018);pointer-events:none}.scene-wrap{width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:34px;align-items:center}.visual{position:relative;min-width:0}.main-photo{aspect-ratio:4/5;overflow:hidden;border-radius:30px;border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);background:#161019;transform:rotate(-1deg)}.main-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.main-photo:hover img{transform:scale(1.035)}.mini-stack{position:absolute;right:-18px;bottom:-26px;display:flex;gap:10px}.mini{width:118px;aspect-ratio:1;border-radius:18px;overflow:hidden;border:4px solid #f5eae6;box-shadow:0 16px 40px rgba(0,0,0,.35);transform:rotate(4deg)}.mini:nth-child(2){transform:rotate(-5deg) translateY(15px)}.mini img{width:100%;height:100%;object-fit:cover}.copy{padding:8px 0}.scene-number{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#a999a4}.scene-number b{font-family:'Playfair Display';font-size:1.5rem;color:#e9afbe}.scene h2{font-size:clamp(2.5rem,5.7vw,5.4rem);line-height:.96;margin:0 0 22px}.scene p{font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.72;color:#d8cdd3;margin:0 0 20px}.quote{padding:18px 20px;border-left:2px solid #e18aa3;background:linear-gradient(90deg,rgba(215,123,147,.09),transparent);font-family:'Playfair Display';font-style:italic;font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.5;color:#fff3f5;border-radius:0 18px 18px 0}.secret-btn{margin-top:18px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:#f7d9e2;border-radius:999px;padding:11px 15px;cursor:pointer}.secret{display:none;margin-top:12px;padding:14px 16px;border-radius:18px;background:rgba(215,123,147,.1);color:#f3cbd5}.secret.show{display:block;animation:fade .35s ease}.pet-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.pet-strip span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:.88rem;color:#eadde2}.mood-playful .scene-bg{opacity:.18;filter:blur(44px) saturate(1.05)}.mood-home::after{background:linear-gradient(90deg,rgba(20,10,13,.92),rgba(26,15,19,.72) 50%,rgba(10,7,10,.9))}.mood-serious{background:#050508}.mood-serious .scene-bg{opacity:.07;filter:grayscale(.4) blur(48px)}.mood-serious .quote{border-left-color:#a88994;background:linear-gradient(90deg,rgba(120,100,110,.08),transparent)}.mood-romantic .scene-bg{opacity:.2;filter:blur(46px) saturate(1.1)}.mood-heal{background:radial-gradient(circle at 70% 30%,rgba(170,110,145,.12),transparent 34%)}.scene-video{margin-top:22px;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#050507;box-shadow:0 18px 44px rgba(0,0,0,.26);padding:12px;display:grid;gap:12px;justify-items:center}.video-head{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;color:#f5d6df;font-size:.82rem}.video-head small{color:#bdaeb6}.video-stage{position:relative;width:100%;display:grid;place-items:center}.scene-video video{width:min(100%,430px);max-height:min(78dvh,720px);border-radius:18px;object-fit:contain;background:#000;aspect-ratio:9/16}.replay-btn{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;border:1px solid rgba(255,255,255,.2);background:rgba(5,4,7,.72);color:white;border-radius:999px;padding:11px 15px;backdrop-filter:blur(14px);font-weight:700;white-space:nowrap}.scene-video.playing .replay-btn{opacity:.72}.scene-video.expanded{border-color:rgba(239,158,180,.28);box-shadow:0 22px 54px rgba(0,0,0,.36),0 0 0 1px rgba(239,158,180,.08) inset}.scene-video.landscape video{width:min(100%,900px);aspect-ratio:auto}.chat-interlude{min-height:54dvh;display:grid;place-items:center;padding:70px 18px;background:linear-gradient(180deg,#070509,#0d0910,#070509)}.chat-phone{width:min(520px,100%);padding:14px;border-radius:28px;background:#0d1010;border:1px solid rgba(255,255,255,.10);box-shadow:0 22px 70px rgba(0,0,0,.35)}.chat-top{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 14px;color:#f6eef2}.chat-top small{color:#85918d}.chat-bubble{margin-left:auto;max-width:88%;padding:13px 15px;border-radius:18px 18px 5px 18px;background:#163b2f;color:#f5fbf7;box-shadow:0 12px 24px rgba(0,0,0,.18)}.chat-bubble p{margin:0;line-height:1.55}.chat-time{text-align:right;color:#7f8e88;font-size:.72rem;padding:7px 5px 0}.typing-dots{display:inline-flex;gap:3px;margin-bottom:8px}.typing-dots i{width:5px;height:5px;background:#98b2a7;border-radius:50%;animation:typing 1.2s infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-3px);opacity:1}}.letter{min-height:100dvh;display:grid;place-items:center;padding:110px 20px 88px;background:radial-gradient(circle at 50% 30%,rgba(182,79,108,.14),transparent 30%)}.letter-card{width:min(820px,100%);padding:clamp(26px,5vw,54px);background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:32px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.letter h2{font-size:clamp(2.5rem,6vw,5.3rem);line-height:.98;margin:12px 0 26px}.letter p{color:#d8cdd3;line-height:1.78;font-size:1.07rem}.gallery{padding:90px 16px 100px;max-width:1260px;margin:auto}.gallery-head{max-width:760px;margin:0 auto 28px;text-align:center}.gallery h2{font:700 clamp(2.4rem,6vw,5rem)/1 'Playfair Display';margin:10px 0 16px}.gallery p{color:var(--muted);line-height:1.6}.gallery-grid{columns:4 220px;column-gap:12px}.gallery-item{break-inside:avoid;margin:0 0 12px;border-radius:18px;overflow:hidden;background:#141018;border:1px solid rgba(255,255,255,.08);cursor:pointer}.gallery-item img{width:100%;height:auto;transition:transform .35s}.gallery-item:hover img{transform:scale(1.025)}.pre-final{min-height:100dvh;display:grid;place-items:center;padding:90px 22px;text-align:center;background:#020103}.pre-final .beats{display:grid;gap:20px;max-width:820px}.beat{opacity:.18;font:600 clamp(1.45rem,4.4vw,3.4rem)/1.25 'Playfair Display';transition:.55s opacity,.55s transform}.beat.active{opacity:1;color:#fff;transform:translateY(-3px)}.big21{font:700 clamp(9rem,32vw,24rem)/.8 'Playfair Display';color:rgba(215,123,147,.12);margin-top:24px}.final{min-height:100dvh;display:grid;place-items:center;padding:100px 20px;background:radial-gradient(circle at 50% 35%,rgba(212,98,131,.14),transparent 34%),#030205;text-align:center}.final-card{max-width:900px}.final .date{font:italic 600 2rem 'Playfair Display';color:#e799ad}.final h2{font-size:clamp(3rem,8vw,7rem);line-height:.95;margin:14px 0 26px}.voice-btn{margin:14px auto 4px}.voice-status{min-height:24px;color:#dcb9c3;font-size:.9rem;margin:5px 0 10px}.final-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.cry-msg{min-height:30px;margin-top:18px;color:#e8bdc8}.accepted{display:none;margin-top:30px;padding:24px;border:1px solid rgba(239,158,180,.32);background:rgba(215,123,147,.08);border-radius:26px}.accepted.show{display:block;animation:fade .5s}.accepted h3{font:700 2rem 'Playfair Display';margin:0 0 10px}.accepted p{color:#dccfd5;line-height:1.65}.next{color:#f2a9bb!important;font-weight:700}.nav-hint{position:fixed;right:18px;bottom:22px;z-index:50;background:rgba(7,5,10,.62);border:1px solid var(--line);border-radius:999px;padding:10px 13px;color:#c8bbc2;font-size:.8rem;backdrop-filter:blur(14px);transition:.3s opacity,.3s transform}.nav-hint.hide{opacity:0;transform:translateY(10px);pointer-events:none}.toast{position:fixed;left:50%;bottom:72px;z-index:160;transform:translate(-50%,14px);opacity:0;pointer-events:none;max-width:min(90vw,520px);padding:12px 16px;border-radius:18px;background:rgba(12,8,13,.88);border:1px solid rgba(239,158,180,.22);backdrop-filter:blur(16px);color:#f7e6ec;text-align:center;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:120;display:none;align-items:center;justify-content:center;padding:20px}.lightbox.open{display:flex}.lightbox img{max-width:min(95vw,1100px);max-height:88dvh;object-fit:contain;border-radius:18px}.lb-close,.lb-prev,.lb-next{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:46px;height:46px;border-radius:50%;font-size:1.4rem;cursor:pointer}.lb-close{top:18px;right:18px}.lb-prev{left:18px}.lb-next{right:18px}.hearts{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}.heart{position:absolute;bottom:-40px;animation:floatUp 4s ease-in forwards}.flash{position:fixed;inset:0;background:radial-gradient(circle,#f6afc2,transparent 60%);opacity:0;pointer-events:none;z-index:149}.flash.go{animation:flash .8s ease}.reveal-ready{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease,filter .75s ease;filter:blur(6px)}.reveal-ready.in-view,.scene.in-view .reveal-up,.scene.in-view{opacity:1;transform:none;filter:none}.reveal-up{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}.scene.in-view .delay-1{transition-delay:.05s}.scene.in-view .delay-2{transition-delay:.18s}.scene.in-view .scene-bg{transform:scale(1.07);opacity:.18}.cinematic-final .topbar,.cinematic-final .progress,.cinematic-final .secret-counter,.cinematic-final .nav-hint{opacity:0;pointer-events:none;transform:translateY(-10px)}@keyframes floatUp{0%{transform:translateY(0) scale(.8);opacity:0}10%{opacity:1}100%{transform:translateY(-110vh) rotate(18deg) scale(1.2);opacity:0}}@keyframes flash{50%{opacity:.42}}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:900px){.scene-wrap{grid-template-columns:1fr;gap:28px}.visual{max-width:680px;margin:auto;width:100%}.main-photo{aspect-ratio:4/3.8}.mini-stack{right:8px;bottom:-20px}.copy{padding-top:14px}.gallery-grid{columns:3 180px}.secret-counter{bottom:12px}}@media(max-width:600px){.topbar{left:10px;right:10px}.brand{padding:9px 12px;font-size:.85rem}.music-label{display:none}.music{width:44px;height:44px;justify-content:center;padding:0}.hero{padding:104px 18px 74px}.hero h1{font-size:clamp(2.8rem,14vw,4.5rem)}.hero-actions{flex-direction:column}.hero-actions button{width:100%;min-height:52px}.scene{padding:88px 16px 64px;min-height:auto}.main-photo{aspect-ratio:4/4.3;border-radius:24px;transform:none}.mini{width:84px}.scene h2{font-size:clamp(2.55rem,12vw,4.2rem)}.scene p{font-size:1rem}.quote{font-size:1.06rem}.secret-btn{width:100%;min-height:48px}.scene-video{padding:9px;margin-top:18px}.video-head{font-size:.74rem}.video-head small{display:none}.scene-video video{width:min(100%,390px);max-height:72dvh;border-radius:15px}.replay-btn{bottom:11px;padding:10px 13px;font-size:.88rem}.chat-interlude{min-height:44dvh;padding:48px 14px}.chat-phone{border-radius:22px}.gallery{padding-inline:10px}.gallery-grid{columns:2 150px;column-gap:8px}.gallery-item{margin-bottom:8px;border-radius:14px}.nav-hint{display:none}.secret-counter{left:10px;bottom:10px;font-size:.7rem}.final{padding:86px 16px}.final-actions{flex-direction:column}.final-actions button,.voice-btn{width:100%;min-height:52px}.lb-prev,.lb-next{bottom:18px;top:auto}.lb-prev{left:calc(50% - 58px)}.lb-next{right:calc(50% - 58px)}.cinema-copy{font-size:clamp(1.55rem,9vw,2.5rem)}.toast{bottom:64px;font-size:.9rem}}@media(max-width:380px){.brand{font-size:.75rem}.mini{width:72px}.scene h2{font-size:2.4rem}.scene{padding-inline:13px}.gallery-grid{columns:2 130px}.secret-counter span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal-ready,.reveal-up{opacity:1!important;transform:none!important;filter:none!important}}