:root{--pink:#f3bfd1;--pink-deep:#c87998;--cream:#fff9f0;--ink:#624c55;--muted:#987f89;--lav:#e9def4;--blue:#d9edf7;--shadow:0 18px 60px rgba(128,83,105,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',sans-serif;color:var(--ink);background:#f8e7ed}body{overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}#scene-wrap{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:linear-gradient(180deg,#dcecf6 0%,#f9e9ef 55%,#f9e4d8 100%)}#world{position:absolute;inset:0;width:100%;height:100%;display:block}.scene-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 42%,rgba(255,248,244,.3) 100%)}.top-mark{position:absolute;top:25px;left:30px;z-index:3;font:600 11px 'DM Sans';letter-spacing:.19em;color:#8e7380}.mark-dot{color:#d18da8;font-size:19px;vertical-align:-2px;margin-right:8px}.sound-toggle{position:absolute;top:20px;right:25px;z-index:5;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.55);backdrop-filter:blur(12px);border-radius:30px;padding:9px 13px;color:#8f6b7c}.sound-toggle span{font-size:18px}.sound-toggle i{font-style:normal;font-size:10px;margin-left:6px;text-transform:uppercase;letter-spacing:.08em}.intro-copy{position:absolute;z-index:3;left:50%;top:12%;transform:translateX(-50%);width:min(92%,650px);text-align:center;transition:opacity .7s,transform .7s}.intro-copy.gone{opacity:0;pointer-events:none;transform:translate(-50%,-15px)}.eyebrow,.mini-kicker{font-size:10px;letter-spacing:.2em;font-weight:700;color:#b27e91}.intro-copy h1{font:600 clamp(42px,7vw,76px)/.99 'Fredoka',sans-serif;letter-spacing:-.04em;color:#93677b;margin:14px 0 10px;text-shadow:0 3px 0 rgba(255,255,255,.55)}.intro-copy h1 em{font-style:normal;color:#d17f9e}.intro-copy h1 span{font-size:.55em;vertical-align:middle}.intro-sub{font:18px 'Kalam',cursive;color:#9e7b87;margin:12px 0 20px}.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:15px;border:0;border-radius:999px;padding:15px 24px;background:linear-gradient(135deg,#e9a9c0,#d88daa);color:#fff;font-size:11px;font-weight:700;letter-spacing:.11em;box-shadow:0 10px 25px rgba(195,119,151,.28);text-decoration:none;transition:transform .25s,box-shadow .25s}.primary-btn:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(195,119,151,.35)}.primary-btn span{font-size:17px}.microcopy{font:12px 'Kalam';color:#b08e9b;margin-top:12px}.world-hint{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);z-index:3;padding:10px 18px;border-radius:30px;background:rgba(255,255,255,.53);backdrop-filter:blur(12px);font:13px 'Kalam';color:#9d7889;white-space:nowrap;transition:opacity .5s}.world-hint.hide{opacity:0}.hint-sparkle{color:#d28ba6;margin:0 8px}.scene-bottom{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;color:#ae8b98;font:12px 'Kalam';white-space:nowrap}.scene-bottom span{color:#d28ba6;margin:0 8px}.gift-label{position:absolute;z-index:4;display:none;transform:translate(-50%,-100%);padding:9px 13px;background:rgba(255,250,247,.9);border:1px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 8px 24px rgba(107,78,90,.12);pointer-events:none;text-align:center;white-space:nowrap}.gift-label b{display:block;font:600 11px 'Fredoka';letter-spacing:.08em;color:#9a637b}.gift-label small{font-size:10px;color:#a88d98}.loader{position:fixed;inset:0;z-index:30;background:#f9e7ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:opacity .5s}.loader.done{opacity:0;pointer-events:none}.loader-pig{font-size:48px;animation:bob 1.2s infinite ease-in-out}.loader-title{font:600 22px 'Fredoka';color:#986a7e}.loader-track{width:170px;height:5px;background:#efd0dc;border-radius:10px;overflow:hidden}.loader-track span{display:block;width:45%;height:100%;background:#d58eaa;border-radius:10px;animation:load 1.2s infinite ease-in-out}.loader small{font:12px 'Kalam';color:#ae8c99}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(240%)}}@keyframes bob{50%{transform:translateY(-9px) rotate(-5deg)}}
.experience{position:fixed;inset:0;z-index:10;min-height:100svh;overflow-y:auto;padding:78px clamp(18px,5vw,76px) 70px;background:radial-gradient(circle at 15% 10%,#fff9f1 0,#fff6f0 38%,#f7e6ed 100%);overflow:hidden}.experience:before,.experience:after{content:'✿';position:absolute;color:rgba(211,151,174,.2);font-size:120px;pointer-events:none}.experience:before{top:30px;right:7%}.experience:after{bottom:15px;left:4%;font-size:90px}.hidden{display:none!important}.back-btn{position:absolute;top:24px;left:clamp(18px,5vw,76px);z-index:5;border:1px solid #efdce3;background:rgba(255,255,255,.68);border-radius:30px;padding:10px 16px;color:#9a7484;font-size:12px;backdrop-filter:blur(10px)}.back-btn span{margin-right:7px}.page{position:relative;z-index:1;max-width:1120px;margin:0 auto;animation:pageIn .55s ease both}@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.page-heading{text-align:center;margin:10px auto 38px}.page-heading h2,.music-copy h2{font:600 clamp(34px,5vw,54px)/1.05 'Fredoka';color:#91677a;margin:10px 0}.page-heading h2 span{font-size:.7em}.page-heading p{font:16px 'Kalam';color:#a88995;margin:0}.reel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:920px;margin:0 auto}.reel-card{border:1px solid rgba(255,255,255,.9);padding:10px;background:rgba(255,255,255,.67);border-radius:19px;text-align:left;text-decoration:none;color:inherit;box-shadow:0 10px 35px rgba(141,100,119,.08);transition:transform .25s,box-shadow .25s;min-width:0}.reel-card:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--shadow)}.reel-art{height:170px;border-radius:13px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}.reel-art>span{position:absolute;top:12px;left:13px;font:600 11px 'Fredoka';color:rgba(100,75,89,.6)}.reel-art b{font:600 27px/1 'Fredoka';color:#8f6378;position:relative;z-index:1}.art-one{background:linear-gradient(145deg,#f7c9d9,#ffe9d7)}.art-sun{position:absolute;font-size:100px;color:#fff2bb;right:15px;top:12px;opacity:.8}.art-heart{position:absolute;left:18px;bottom:10px;font-size:50px;color:#fff8f1}.art-two{background:linear-gradient(145deg,#d8e9f5,#f4d5e0)}.art-flower{position:absolute;font-size:120px;color:#fff9e9;right:12px;opacity:.65}.art-three{background:linear-gradient(145deg,#e6dcf5,#f9dce7)}.art-cloud{position:absolute;font-size:100px;color:#fff;top:-5px;right:12px;opacity:.65}.art-four{background:linear-gradient(145deg,#f7dfb9,#f5cbd9)}.art-star{position:absolute;font-size:120px;color:#fff7d6;right:12px;opacity:.75}.reel-meta{display:flex;align-items:center;justify-content:space-between;padding:12px 4px 3px;gap:8px}.reel-meta span{font-size:9px;letter-spacing:.12em;color:#ad8b98;font-weight:700}.reel-meta strong{font-size:9px;letter-spacing:.08em;color:#b87591}.secret-card{width:100%;font:inherit}.secret-art{height:170px;border-radius:13px;background:linear-gradient(145deg,#f2d8e4,#e8dff3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#9b7085;position:relative;overflow:hidden}.secret-art:before,.secret-art:after{content:'✦';position:absolute;font-size:35px;color:rgba(255,255,255,.75)}.secret-art:before{top:14px;left:20px}.secret-art:after{bottom:12px;right:20px}.secret-art .lock{font-size:34px}.secret-art span{font-size:9px;letter-spacing:.15em}.secret-art b{font:600 23px 'Fredoka'}.secret-art small{font:12px 'Kalam'}.secret-reveal{max-width:580px;margin:32px auto 0;padding:30px 20px;text-align:center;border-radius:24px;background:#fff7f3;border:1px solid #f1dce3;box-shadow:var(--shadow);animation:pageIn .5s}.reveal-curtain{font-size:45px;animation:bob 1.5s infinite}.secret-reveal h3{font:600 clamp(28px,5vw,44px)/1.05 'Fredoka';color:#b35f83;margin:12px}.secret-reveal p:not(.mini-kicker){font:14px 'Kalam';color:#a88b96}.soft-btn{border:1px solid #eacbd8;background:#fff;border-radius:30px;padding:10px 18px;color:#a56f86}.letter-layout{display:grid;grid-template-columns:240px minmax(0,760px);gap:35px;justify-content:center;align-items:start}.letter-side{position:sticky;top:100px;text-align:center;padding-top:65px}.puppy-scene{position:relative;width:205px;height:210px;margin:0 auto;background:radial-gradient(circle,#fff 0,#f8e2e9 70%);border-radius:48% 52% 45% 55%;display:flex;align-items:center;justify-content:center}.puppy{font-size:91px;filter:drop-shadow(0 9px 7px rgba(120,75,90,.13));animation:bob 2.2s infinite ease-in-out}.puppy-heart{position:absolute;right:26px;top:28px;font-size:35px;color:#d78da9;animation:heart 1.5s infinite}@keyframes heart{50%{transform:scale(1.2)}}.puppy-caption{position:absolute;bottom:-15px;right:-20px;background:#fff9f0;border-radius:15px;padding:9px 12px;font:13px/1.2 'Kalam';color:#a77a8d;transform:rotate(5deg);box-shadow:0 6px 15px #a67b8b1c}.side-note{font:16px 'Kalam';color:#b18a99;margin-top:38px;line-height:1.3}.letter-paper{background:#fffdf8;border:1px solid #f0e5d9;border-radius:5px 5px 17px 17px;padding:clamp(23px,4vw,48px);box-shadow:0 20px 65px rgba(118,88,76,.11);position:relative}.letter-paper:before{content:'';position:absolute;inset:9px;border:1px solid #f3e9df;pointer-events:none}.paper-top,.paper-bottom{position:relative;display:flex;justify-content:space-between;color:#c28da0;font-size:9px;letter-spacing:.15em;font-weight:700}.paper-top{padding-bottom:20px;border-bottom:1px solid #f0e5df}.paper-top span:last-child{font-size:18px}.letter-content{position:relative;padding-top:17px;font:15px/1.9 'DM Sans';color:#6f5b61;white-space:pre-line}.letter-content p{margin:0 0 17px}.letter-signoff{position:relative;margin-top:28px;padding-top:20px;border-top:1px solid #f0e5df;font:16px 'Kalam';color:#a47b8b}.letter-signoff span{font-size:20px;color:#b96f8c}.paper-bottom{justify-content:center;margin-top:28px;padding-top:15px;border-top:1px solid #f3e9df;font:10px 'Kalam';letter-spacing:.03em;color:#c2a4a7}.music-layout{display:grid;grid-template-columns:minmax(280px,460px) minmax(300px,480px);gap:clamp(30px,7vw,90px);align-items:center;justify-content:center;min-height:70vh}.record-stage{height:390px;position:relative;display:flex;align-items:center;justify-content:center}.record-shadow{position:absolute;width:290px;height:40px;bottom:48px;background:rgba(115,82,99,.14);filter:blur(18px);border-radius:50%}.record{width:min(68vw,310px);height:min(68vw,310px);max-width:310px;max-height:310px;border-radius:50%;background:repeating-radial-gradient(circle at center,#27252c 0 2px,#333039 3px 4px,#25232a 5px 7px);box-shadow:0 20px 35px rgba(67,48,60,.2);position:relative;animation:spin 7s linear infinite}.record:after{content:'';position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.record-label{position:absolute;inset:35%;border-radius:50%;background:linear-gradient(145deg,#f5c5d6,#d88eaa);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;font:12px 'Fredoka';z-index:1}.record-label b{font-size:21px}.record-label i{font-style:normal;font-size:15px;margin-top:3px}@keyframes spin{to{transform:rotate(360deg)}}.tonearm{position:absolute;width:110px;height:8px;background:linear-gradient(#e9e1d8,#a99da0);right:9%;top:25%;border-radius:10px;transform:rotate(36deg);transform-origin:right center;box-shadow:0 3px 5px #6e566522}.tonearm:before{content:'';position:absolute;right:-5px;top:-8px;width:17px;height:17px;border-radius:50%;background:#d6a0b4;border:3px solid #fff}.music-spark{position:absolute;color:#d08aa6;font-size:35px;animation:bob 2s infinite}.s1{top:12%;left:13%}.s2{top:26%;right:12%;animation-delay:.6s}.s3{bottom:19%;left:18%;animation-delay:1s}.music-copy h2 em{font-style:normal;color:#d18aa5}.music-copy>p{font:15px/1.8 'DM Sans';color:#88727b}.playlist-chip{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.72);border:1px solid #f0e0e6;border-radius:16px;padding:13px 15px;margin:23px 0;max-width:370px}.chip-icon{width:39px;height:39px;border-radius:12px;background:#f5d5e0;display:grid;place-items:center;color:#b66f8d;font-size:20px}.playlist-chip b,.playlist-chip small{display:block}.playlist-chip b{font:600 16px 'Fredoka';color:#93677b}.playlist-chip small{font-size:10px;color:#a88f98;margin-top:3px}.chip-heart{margin-left:auto;color:#d28da7;font-size:21px}.playlist-btn{font-size:10px}.music-footnote{font:14px 'Kalam'!important;color:#b08798!important;max-width:350px;margin-top:20px!important}.celebration-content{text-align:center;max-width:780px;margin:4vh auto 0;padding:35px 15px}.cake-emoji{font-size:95px;filter:drop-shadow(0 12px 10px #b17c8c2b);animation:bob 2s infinite}.celebration-content h2{font:500 clamp(30px,5vw,53px)/1.16 'Fredoka';color:#91677b;margin:20px 0 28px}.celebration-content h2 em{font-style:normal;color:#d183a1}.wish-message{margin:35px auto 0;padding:28px 20px;max-width:510px;border:1px solid #f0dce4;border-radius:24px;background:rgba(255,255,255,.65);animation:pageIn .5s}.wish-pig{font-size:55px}.wish-message h3{font:600 34px/1.1 'Fredoka';color:#bd7793;margin:10px}.wish-message p{font:16px 'Kalam';color:#9e7c89}.confetti-text{font-size:24px;color:#d493ac;letter-spacing:12px}.mobile-gift-nav{position:fixed;z-index:8;bottom:12px;left:50%;transform:translateX(-50%);padding:8px 13px;display:none;gap:17px;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border:1px solid #fff;border-radius:22px;box-shadow:0 8px 25px #76536220}.mobile-gift-nav button{border:0;background:none;color:#9b6d82;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:2px}.mobile-gift-nav small{font-size:9px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#fff9f2;padding:11px 18px;border-radius:30px;color:#987183;box-shadow:var(--shadow);z-index:40;font-size:12px;transition:.3s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){#scene-wrap{min-height:650px;height:100svh}.top-mark{top:17px;left:17px;font-size:9px;letter-spacing:.13em}.sound-toggle{top:12px;right:12px}.intro-copy{top:10%;width:94%}.intro-copy h1{font-size:clamp(42px,12vw,62px)}.intro-sub{font-size:16px}.world-hint{bottom:65px;font-size:12px}.scene-bottom{bottom:20px;font-size:10px}.experience{padding:76px 16px 90px}.back-btn{top:17px;left:16px;padding:9px 13px;font-size:11px}.page-heading{margin:7px auto 25px}.page-heading h2{font-size:37px}.page-heading p{font-size:14px}.reel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reel-art,.secret-art{height:135px}.reel-art b{font-size:23px}.reel-meta{flex-direction:column;align-items:flex-start;gap:5px;padding:10px 3px 3px}.letter-layout{display:flex;flex-direction:column;gap:18px;align-items:stretch}.letter-side{position:relative;top:auto;padding-top:5px;display:flex;align-items:center;justify-content:center;gap:20px}.puppy-scene{width:115px;height:115px;margin:0}.puppy{font-size:60px}.puppy-heart{right:9px;top:7px;font-size:23px}.puppy-caption{font-size:10px;right:-35px;bottom:-8px}.side-note{margin:0;font-size:14px;text-align:left}.letter-paper{padding:24px 19px}.letter-content{font-size:14px;line-height:1.8}.music-layout{display:flex;flex-direction:column;gap:12px;min-height:auto;padding-top:0}.record-stage{height:270px;width:100%}.record{width:220px;height:220px}.record-shadow{width:220px;bottom:15px}.tonearm{right:15%;top:17%;transform:scale(.8) rotate(36deg)}.music-copy{text-align:center}.music-copy h2{font-size:40px}.music-copy>p{font-size:14px}.playlist-chip{margin:20px auto}.music-footnote{margin-left:auto!important;margin-right:auto!important}.celebration-content{margin:2vh auto 0;padding:20px 5px}.cake-emoji{font-size:75px}.celebration-content h2{font-size:34px}.mobile-gift-nav{display:flex!important}.reel-card{padding:7px;border-radius:15px}.secret-reveal{padding:23px 14px}.secret-reveal h3{font-size:31px}}
@media(max-width:380px){.reel-grid{gap:9px}.reel-art,.secret-art{height:118px}.reel-art b{font-size:20px}.reel-meta span,.reel-meta strong{font-size:8px}.letter-content{font-size:13px}.intro-copy h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}