:root { --wine:#4b1236; --rose:#d64a79; --pink:#f7a8bc; --gold:#f7cf75; --cream:#fff8f0; }
* { box-sizing:border-box; }
html { background:#17091d; }
body { margin:0; color:var(--cream); font-family:Arial, Helvetica, sans-serif; }
button { font:inherit; }
.app-shell { min-height:100svh; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 40%,#4b173f 0,#241027 44%,#130817 100%); padding:22px 22px 84px; }
.app-shell:before { content:""; position:fixed; inset:0; opacity:.22; pointer-events:none; background-image:radial-gradient(#fff 0.65px,transparent .8px); background-size:23px 23px; mask-image:linear-gradient(to bottom,#000,transparent 75%); }
header { width:min(1080px,100%); margin:auto; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:5; }
.brand { font-family:Georgia,serif; letter-spacing:.02em; font-weight:bold; font-size:18px; }.brand span,.site-footer span { color:var(--pink); }
.sound { width:42px;height:42px;border-radius:50%;border:1px solid #ffffff28;background:#ffffff0b;color:#fff;cursor:pointer;font-size:22px; }
.sound:hover { background:#ffffff18; }
.aurora { position:fixed;border-radius:50%;filter:blur(80px);opacity:.2;pointer-events:none; }.aurora-one{width:500px;height:500px;background:#b72c78;left:-200px;top:20%}.aurora-two{width:420px;height:420px;background:#6243d0;right:-180px;bottom:0}
.ambient-star{position:fixed;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.4;animation:twinkle 2.8s infinite alternate;pointer-events:none}@keyframes twinkle{to{opacity:1;box-shadow:0 0 8px #fff;transform:scale(1.8)}}
.progress-wrap { width:min(560px,88%); margin:24px auto 0; display:flex;align-items:center;gap:12px;position:relative;z-index:4}.progress{height:4px;flex:1;background:#ffffff18;border-radius:5px;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,var(--rose),var(--gold));transition:width .5s}.progress-wrap small{font-size:11px;color:#ffffff99}
.scene { display:none; position:relative; z-index:2; width:min(720px,100%); margin:0 auto; padding:54px 0 30px; text-align:center; animation:arrive .7s ease both; }.scene.active{display:block}@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eyebrow { color:var(--gold);font-weight:bold;font-size:11px;letter-spacing:.28em;margin:0 0 22px;text-transform:uppercase}.scene h1,.scene h2{font-family:Georgia,serif;margin:18px auto 16px;line-height:1.08;font-weight:500}.scene h1{font-size:clamp(40px,8vw,68px)}.scene h2{font-size:clamp(34px,7vw,52px)}.scene h1 em{display:block;color:var(--pink);font-style:italic}.lead{color:#fbeef5bf;font-family:Georgia,serif;font-size:17px;line-height:1.75;margin:0 auto 24px}.hint{display:block;color:#ffffff61;margin-top:17px;font-style:italic;font-family:Georgia,serif}
.primary,.ghost{border:0;border-radius:999px;cursor:pointer;transition:.25s}.primary{color:white;font-weight:bold;background:linear-gradient(135deg,#df4e80,#9e2e67);padding:15px 25px;box-shadow:0 13px 35px #d64a7938}.primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px #d64a7955}.primary span{margin-left:12px}.ghost{background:transparent;color:#ffffffa8;border:1px solid #ffffff24;padding:11px 18px}.ghost:hover{color:#fff;border-color:#ffffff58}
.gift{width:180px;height:155px;margin:5px auto 5px;position:relative;filter:drop-shadow(0 24px 30px #0008);animation:float 3s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px)}}.gift-box{position:absolute;bottom:0;left:25px;width:130px;height:105px;background:linear-gradient(135deg,#cf3f70,#7f1c58);border-radius:10px 10px 30px 30px;box-shadow:inset 0 0 0 2px #ffb2cb32}.gift-box:before{content:"";position:absolute;width:25px;height:100%;left:52px;background:linear-gradient(#f9d98c,#c6923f)}.gift-box span{position:absolute;font-size:28px;color:#ffe7a8;left:76px;top:35px;text-shadow:-31px -13px 0 #f8d17b,28px 20px 0 #f8d17b;animation:twinkle 1.8s infinite alternate}.gift-lid{position:absolute;z-index:2;top:33px;left:15px;width:150px;height:34px;background:linear-gradient(135deg,#ed6794,#96255f);border-radius:9px}.gift-lid:before,.gift-lid:after{content:"";position:absolute;top:-32px;width:43px;height:38px;border:9px solid #e1b85e}.gift-lid:before{left:40px;border-radius:40px 8px 0 8px;transform:rotate(15deg)}.gift-lid:after{right:40px;border-radius:8px 40px 8px 0;transform:rotate(-15deg)}.gift-lid b{position:absolute;z-index:2;left:64px;width:23px;height:34px;background:#e6bd66}
.sky-card{position:relative;width:min(560px,100%);height:330px;margin:24px auto 14px;border-radius:34px;overflow:hidden;background:radial-gradient(circle at 30% 25%,#59335f,#24162f 55%,#15101d);border:1px solid #ffffff1f;box-shadow:0 30px 60px #0005}.star-button{position:absolute;z-index:3;border:0;background:none;color:#ffe7a1;cursor:pointer;padding:10px;text-shadow:0 0 13px #ffc65d;transition:.3s;animation:pulse 1.6s infinite alternate}@keyframes pulse{to{transform:scale(1.2);filter:brightness(1.3)}}.star-button.found{color:#fff;transform:scale(1.35);text-shadow:0 0 10px #fff,0 0 25px #ffc95e;animation:none}.moon{position:absolute;right:8%;top:9%;font-size:65px;color:#f7dba0;text-shadow:0 0 30px #ffe9ac88}.hills{position:absolute;left:-5%;right:-5%;bottom:-50px;height:160px;background:#321634;border-radius:50% 50% 0 0;transform:rotate(3deg)}.hills:after{content:"";position:absolute;width:70%;height:110px;background:#200d27;border-radius:50% 50% 0 0;right:-10%;top:25px}.counter{font-size:13px;color:#ffffff99}.counter b{color:var(--gold);font-size:20px}
.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px auto 22px;perspective:1000px}.memory{height:220px;position:relative;padding:0;border:0;background:transparent;cursor:pointer;transform-style:preserve-3d;transition:transform .7s}.memory.open{transform:rotateY(180deg)}.memory-front,.memory-back{position:absolute;inset:0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;border:1px solid #ffffff20;overflow:hidden}.memory-front{background:linear-gradient(145deg,#65234d,#32172f)}.memory-front:before{content:"";position:absolute;inset:8px;border:1px solid #f1c96a45;border-radius:16px}.memory-front b{color:var(--gold);font-size:44px;text-shadow:0 0 25px #ffd67666}.memory-front small{color:#ffffff83;margin-top:22px}.memory-back{transform:rotateY(180deg);background:linear-gradient(145deg,#fff8ef,#f7dfdf);color:#4a1c35;padding:16px}.memory-back b{font-size:31px}.memory-back strong{font-family:Georgia,serif;margin:9px 0;font-size:17px}.memory-back small{font-family:Georgia,serif;line-height:1.5}.reveal{animation:arrive .6s both}
.envelope{width:115px;height:82px;margin:5px auto 25px;background:linear-gradient(145deg,#f7e9dc,#e8cabf);position:relative;border-radius:5px;box-shadow:0 15px 40px #0005;display:grid;place-items:center}.envelope:before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 60%,100% 0);background:#fff5e9}.envelope span{z-index:2;margin-top:28px;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#b73768;color:#fff}.letter{background:linear-gradient(145deg,#fffaf1,#f9eadd);color:#4f2940;text-align:left;padding:clamp(24px,5vw,44px);border-radius:4px;box-shadow:0 26px 70px #0006;transform:rotate(-.5deg);font-family:Georgia,serif;line-height:1.75;margin:25px auto;position:relative}.letter:before{content:"";position:absolute;inset:10px;border:1px solid #b3768733;pointer-events:none}.letter strong{display:block;text-align:center;color:#a52e5f;font-size:18px;margin:20px}.letter footer{text-align:right;margin-top:22px;font-style:italic}.letter footer b{font-size:20px;color:#a52e5f}
.site-footer{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#ffffff50;font-size:11px;letter-spacing:.04em}
@media(max-width:600px){.app-shell{padding:18px 16px 76px}.brand{font-size:15px}.scene{padding-top:38px}.memory-grid{grid-template-columns:1fr}.memory{height:170px}.sky-card{height:300px}.lead{font-size:15px}.gift{transform:scale(.88);margin-top:-8px;margin-bottom:-8px}@keyframes float{50%{transform:scale(.88) translateY(-8px)}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}