:root{--bg:#100b20;--plum:#24132e;--pink:#ffb9d3;--rose:#e89ab4;--gold:#e8c59b;--cream:#fff7e9;--ink:#653e4d;--muted:#d0bcd0}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--cream);font-family:Cairo,Tahoma,sans-serif;background:radial-gradient(ellipse at 50% 0,#492851 0,transparent 45%),radial-gradient(ellipse at 92% 65%,#2a193a 0,transparent 40%),var(--bg)}button,a,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.stars,.floating-hearts{position:absolute;inset:0}.star{position:absolute;width:var(--size);height:var(--size);padding:0;border:0;border-radius:50%;background:#fff7d4;box-shadow:0 0 9px 2px #ffe9b66b;opacity:.55;animation:twinkle 3s ease-in-out var(--delay) infinite alternate}.wish-star{pointer-events:auto;width:9px;height:9px;background:var(--gold);box-shadow:0 0 16px 5px #e8c59b99}.floating-heart{position:absolute;bottom:-40px;color:#f4a5c3;opacity:.24;font-size:19px;animation:rise var(--duration) linear forwards}@keyframes twinkle{to{opacity:1;transform:scale(1.5)}}@keyframes rise{to{transform:translateY(-112vh) rotate(28deg);opacity:0}}@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.07)}}@keyframes enter{to{opacity:1;transform:translateY(0)}}@keyframes flipNext{50%{transform:rotateY(-88deg);opacity:.2}}@keyframes flipPrev{50%{transform:rotateY(88deg);opacity:.2}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shower{to{transform:translate(var(--x),105vh) rotate(560deg);opacity:0}}.welcome{position:relative;z-index:1;min-height:100svh;display:grid;place-items:center;padding:22px}.welcome.leaving{animation:fade .42s ease both}@keyframes fade{to{opacity:0;transform:scale(1.03)}}.welcome-card{position:relative;width:min(100%,700px);padding:62px 30px;text-align:center;border:1px solid #efd1e035;border-radius:32px;background:linear-gradient(145deg,#ffffff10,#ffffff03);box-shadow:0 35px 110px #0008,inset 0 0 80px #ffb0c90d;backdrop-filter:blur(15px)}.intro-item{opacity:0;transform:translateY(12px);animation:enter .6s ease forwards}.intro-item:nth-child(1){animation-delay:.15s}.intro-item:nth-child(2){animation-delay:.28s}.intro-item:nth-child(3){animation-delay:.38s}.intro-item:nth-child(4){animation-delay:.48s}.intro-item:nth-child(5){animation-delay:.58s}.intro-item:nth-child(6){animation-delay:.68s}.intro-item:nth-child(7){animation-delay:.78s}.intro-item:nth-child(8){animation-delay:.88s}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:.77rem;font-weight:700;letter-spacing:1px}.big-heart{display:block;margin:auto;color:#e98aa7;border:0;background:transparent;font-size:78px;line-height:1;text-shadow:0 0 40px #f99cb777;animation:heartbeat 2.1s ease-in-out infinite}.intro-label,.micro{color:var(--muted)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Amiri,serif}h1{margin:0;color:#ffe0eb;font-size:clamp(4.7rem,13vw,8rem);line-height:1.3;text-shadow:0 0 55px #f08cba50}.tagline{font:1.45rem/2 Amiri,serif;color:#fbe2e9}.ornament{margin:20px;color:var(--gold);font-size:1.2rem}.micro{margin:20px 0 0;font-size:.74rem}.skip,.text-button{position:absolute;top:20px;left:24px;border:0;background:transparent;color:var(--muted);font-size:.75rem}.primary,.secondary,.icon-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff35;border-radius:40px;padding:11px 22px;text-decoration:none;transition:transform .25s,background .25s,box-shadow .25s}.primary{background:linear-gradient(110deg,#f9bdd1,#e68aac);color:#391329;font-weight:800;box-shadow:0 9px 30px #f78aaf35}.secondary,.icon-button{background:#ffffff12;color:#fff0f5}button:hover:not(:disabled),a:hover{transform:translateY(-3px);box-shadow:0 9px 28px #f78aaf30}button:disabled{cursor:not-allowed;opacity:.35}main{position:relative;z-index:1}.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:13px 5%;border-bottom:1px solid #ffffff18;background:#100b20b8;backdrop-filter:blur(14px)}.brand{color:var(--pink);font:700 1.8rem Amiri,serif;text-decoration:none}.top-actions{display:flex;gap:8px}.icon-button{padding:8px 11px;font-size:.73rem}.hero{min-height:75vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.hero h2,.section h2,.book-section h2{margin:0;color:var(--pink);font-size:clamp(2.7rem,7vw,5rem)}.hero>p:not(.eyebrow){max-width:590px;line-height:2.2;color:#f4dce8}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.secret-heart{margin-top:35px;border:0;background:transparent;color:#e99bb8;font-size:2rem;animation:heartbeat 2.5s infinite}.player{position:fixed;z-index:4;bottom:18px;left:18px;display:grid;grid-template-columns:auto minmax(100px,1fr) auto;align-items:center;gap:8px;width:min(430px,calc(100vw - 36px));padding:10px 12px;border:1px solid #ffffff28;border-radius:21px;background:#211529e8;box-shadow:0 15px 40px #0008;backdrop-filter:blur(16px)}.record{display:grid;place-items:center;width:35px;height:35px;border:2px solid #d99aae;border-radius:50%;color:var(--pink);font-size:14px}.spinning{animation:spin 4s linear infinite}.track-info{display:grid;min-width:0}.track-info span{overflow:hidden;color:#ffe7ef;font-size:.72rem;white-space:nowrap;text-overflow:ellipsis}.track-info small{color:var(--muted);font-size:.62rem}.player-controls{display:flex;gap:2px}.player button{border:0;background:transparent;color:var(--cream);padding:4px}.player .play{width:28px;height:28px;border-radius:50%;background:var(--rose);color:#3a172a}.player input{grid-column:2/4;width:100%;accent-color:var(--rose)}.time{font-size:.59rem;color:var(--muted)}.volume{font-size:1rem}.book-section,.section{padding:80px 18px;text-align:center;scroll-margin-top:60px}.book-stage{max-width:620px;margin:32px auto 18px;perspective:1700px}.book{position:relative;margin:auto;width:min(100%,560px);aspect-ratio:1/1.18;filter:drop-shadow(0 28px 25px #0007);transform-style:preserve-3d}.back-cover{position:absolute;inset:8px -9px 8px 9px;border-radius:16px 4px 4px 16px;background:linear-gradient(90deg,#805567,#b98576);z-index:-2}.book-spine{position:absolute;z-index:-1;top:7px;bottom:7px;right:-10px;width:20px;border-radius:0 7px 7px 0;background:linear-gradient(90deg,#c99a83,#684b56)}.page{position:absolute;inset:0;overflow:hidden;border:8px solid #fff7ec;border-radius:5px 17px 17px 5px;outline:1px solid #c9a990;background:radial-gradient(circle at 50% 20%,#fffef9,#f8e7dc);box-shadow:inset -14px 0 20px #98765b26;color:var(--ink);transform-origin:right center;backface-visibility:hidden}.page:after{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,#ab7d6208 0 1px,transparent 1px 5px);content:""}.page.turn-next{animation:flipNext .58s ease-in-out}.page.turn-prev{animation:flipPrev .58s ease-in-out}.page-inner{position:absolute;z-index:1;inset:12px;display:flex;flex-direction:column;justify-content:space-between;padding:15px;border:1px solid #c99a8365}.page-decoration{color:#b28771;letter-spacing:8px}.page-body{display:grid;justify-items:center;align-content:center;min-height:70%;padding:12px}.page-art{display:grid;place-items:center;width:56px;height:56px;margin:auto;border:1px solid #c69c86;border-radius:50%;color:#ad647e;font-size:1.8rem}.page-art.photo{border-radius:3px}.page-art.final{color:#d05b85;font-size:2.5rem}.page-body h3{margin:9px 0;color:#a34b71;font-size:clamp(2.3rem,6vw,3.8rem)}.page-body p{max-width:390px;margin:0;font:1.2rem/2 Amiri,serif;color:#77515e}.page-footer{display:flex;justify-content:space-between;color:#ae8493;font-size:.72rem}.book-meta{display:flex;align-items:center;gap:12px;max-width:460px;margin:0 auto 17px;color:var(--gold);font-size:.8rem}.progress-line{flex:1;height:3px;overflow:hidden;border-radius:4px;background:#ffffff20}.progress-line i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--gold));transition:width .35s}.navigation{display:flex;justify-content:center;gap:12px}.hint,.muted{color:var(--muted);font-size:.82rem;line-height:2}.section{max-width:1050px;margin:auto}.section h2{font-size:clamp(2.4rem,6vw,4rem)}.envelope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:35px}.envelope{position:relative;display:grid;place-items:center;min-height:170px;padding:20px;border:0;border-radius:6px;background:linear-gradient(145deg,#d9a79d,#b9747a);box-shadow:0 16px 28px #0004;color:#683742;perspective:600px}.envelope:before{position:absolute;inset:0;background:linear-gradient(145deg,transparent 49%,#edc4b5 50%);content:""}.flap{position:absolute;z-index:2;top:0;left:0;width:100%;height:55%;clip-path:polygon(0 0,100% 0,50% 100%);background:#edc4b5;transform-origin:top;transition:transform .5s}.letter{position:relative;z-index:1;display:grid;gap:8px;width:86%;padding:20px 12px;transform:translateY(15px);background:#fff5e7;opacity:0;transition:transform .5s,opacity .3s;font:1rem/1.7 Amiri,serif}.letter small{color:#a47477;font: .6rem Cairo}.envelope.open .flap{transform:rotateX(180deg);z-index:0}.envelope.open .letter{opacity:1;transform:translateY(-20px)}.envelope-label{position:absolute;bottom:12px;z-index:3;color:#ffece0;font-size:.72rem}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:32px}.polaroid{display:grid;gap:9px;padding:10px 10px 16px;border:0;background:#fff9ef;color:#704858;box-shadow:0 14px 22px #0004;font: .72rem Cairo;transform:rotate(-2deg);transition:transform .25s}.polaroid:nth-child(even){transform:rotate(2deg)}.polaroid:hover{transform:rotate(0) translateY(-8px)}.photo-slot{display:grid;place-items:center;aspect-ratio:1/1.1;overflow:hidden;background:linear-gradient(135deg,#e8bdc0,#d2a0a9);color:#fff6e9;font:2.8rem Amiri}.photo-slot img,.dialog-photo img{width:100%;height:100%;object-fit:cover}.birthday{padding-bottom:150px}.cake-wrap{display:grid;place-items:center;margin:28px auto}.cake{position:relative;width:270px;height:220px;border:0;background:transparent}.cake-top,.cake-body,.cake-plate,.candle{position:absolute;display:block}.cake-plate{bottom:22px;right:20px;left:20px;height:13px;border-radius:50%;background:#d8a29f;box-shadow:0 4px 0 #8d5969}.cake-body{right:38px;bottom:34px;left:38px;height:110px;border-radius:13px 13px 30px 30px;background:repeating-linear-gradient(90deg,#e88fa6 0 24px,#f6b7bf 24px 48px);box-shadow:inset 0 10px #fff3e3aa}.cake-top{right:38px;bottom:132px;left:38px;height:24px;border-radius:50%;background:#fff2df}.candle{bottom:153px;width:10px;height:45px;border-radius:6px;background:repeating-linear-gradient(45deg,#f9d3d8 0 4px,#e989a6 4px 8px)}.candle:nth-child(1){right:68px}.candle:nth-child(2){right:113px}.candle:nth-child(3){right:158px}.candle:nth-child(4){right:203px}.candle:after{position:absolute;top:-18px;right:-4px;width:18px;height:23px;border-radius:50% 50% 50% 0;background:#ffd56b;box-shadow:0 0 18px #ffc768;content:"";transform:rotate(45deg);transition:opacity .25s,transform .3s}.candle.out:after{opacity:0;transform:translateY(12px) scale(.2)}.cake-hint{color:var(--gold);font-size:.86rem}.birthday-reveal{margin:24px auto;padding:20px;max-width:500px;border:1px solid #ffffff25;border-radius:18px;background:#ffffff0b;font:1.55rem/1.8 Amiri,serif}.signature{color:var(--gold);font-size:1rem}.confetti{position:fixed;z-index:10;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-30px;color:var(--pink);font-style:normal;font-size:20px;animation:shower var(--d) ease-in forwards}.toast{position:fixed;z-index:20;bottom:96px;right:50%;width:min(360px,calc(100vw - 40px));padding:12px 17px;border:1px solid #ffffff30;border-radius:18px;background:#2d1b37ee;color:#fff2f7;text-align:center;opacity:0;pointer-events:none;transform:translate(50%,15px);transition:.3s}.toast.show{opacity:1;transform:translate(50%,0)}.photo-dialog{width:min(560px,90vw);border:1px solid #d8aa9a;border-radius:18px;background:#fff6e9;color:#67404f;text-align:center;box-shadow:0 30px 90px #000}.photo-dialog::backdrop{background:#100b20cc}.dialog-close{float:left;border:0;background:transparent;color:#67404f;font-size:2rem}.dialog-photo{display:grid;place-items:center;min-height:290px;background:#e5b8bd;color:white;font:4rem Amiri}footer{padding:30px;text-align:center;border-top:1px solid #ffffff18;color:#bca5ba;font-size:.78rem}@media(max-width:700px){.welcome-card{padding:50px 18px}.topbar{padding:11px 4%}.brand{font-size:1.55rem}.icon-button{font-size:.62rem;padding:7px}.player{grid-template-columns:auto 1fr auto;bottom:10px;left:10px;width:calc(100vw - 20px)}.player-controls{display:none}.book-section,.section{padding:62px 13px}.book{width:min(100%,430px)}.page-inner{inset:7px;padding:10px}.page-body p{font-size:1.05rem}.envelope-grid{grid-template-columns:1fr;max-width:330px;margin-inline:auto}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.cake{transform:scale(.86)}.birthday{padding-bottom:130px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}