*{box-sizing:border-box;margin:0;padding:0} :root{--wine:#651b34;--deep:#260812;--gold:#e0bf7b;--goldlight:#f6e2b3;--rose:#d99aaa;--cream:#fff6ed;--muted:#c9aab3}html{scroll-behavior:smooth;scroll-padding-top:75px}body{font-family:'DM Sans',sans-serif;background:var(--deep);color:var(--cream);overflow-x:hidden}.topbar{height:66px;padding:0 clamp(16px,5vw,70px);display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;z-index:9;background:#200711ed;border-bottom:1px solid #d5b16a3d;backdrop-filter:blur(12px)}.brand{font:1.1rem 'Playfair Display',serif;color:var(--goldlight);white-space:nowrap}nav{display:flex;gap:clamp(12px,2.5vw,30px);font-size:.75rem}nav a{color:#ead6dc;text-decoration:none}nav a:hover{color:var(--gold)}section{text-align:center;padding:92px 20px}.hero{min-height:calc(100vh - 66px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 25%,#67233a,#3b1021 43%,#210711 80%);padding-top:55px}.eyebrow{font-size:.67rem;letter-spacing:.2em;color:var(--gold);font-weight:600}.hero h1{font:clamp(3.3rem,9vw,6.2rem)/1.08 'Great Vibes',cursive;color:var(--goldlight);margin:20px 0;text-shadow:0 3px 30px #0005}.hero h1 em{font-style:normal;color:#f3c8d3}.subtitle{font:1.1rem 'Playfair Display',serif}.muted{font-size:.88rem;color:var(--muted);line-height:1.8;margin-top:12px}.envelope-stage{margin-top:42px;display:flex;flex-direction:column;align-items:center;perspective:1000px}.envelope-stage>p:first-child{font-size:.82rem;color:#f2d9df;margin-bottom:18px}.envelope{width:min(82vw,360px);height:225px;border:0;background:transparent;position:relative;cursor:pointer;filter:drop-shadow(0 20px 22px #0005);transition:transform .25s}.envelope:hover{transform:translateY(-4px)}.env-back{position:absolute;inset:20px 0 0;border:1px solid #e4bd7b;border-radius:7px;background:linear-gradient(140deg,#a13d55,#5b142b 65%,#3b0b1c)}.letter-preview{position:absolute;z-index:2;left:8%;right:8%;bottom:20px;height:170px;padding:25px 12px;background:linear-gradient(145deg,#fff2d6,#e7cda1);color:#6c2438;border-radius:4px;display:flex;align-items:center;flex-direction:column;gap:12px;box-shadow:0 0 18px #0003;transition:transform .9s cubic-bezier(.2,.75,.25,1)}.letter-preview>span{font-size:1.1rem}.letter-preview strong{font:1.6rem 'Great Vibes',cursive;font-weight:400}.letter-preview small{font:.72rem 'Playfair Display',serif;font-style:italic}.env-front{position:absolute;z-index:3;left:0;right:0;bottom:0;height:78%;border-radius:0 0 7px 7px;background:linear-gradient(145deg,#8b2d46,#4e1025);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-bottom:1px solid #e0bd78}.env-flap{position:absolute;z-index:4;top:20px;left:0;right:0;height:57%;background:linear-gradient(155deg,#a23c55,#65172e);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .8s ease}.wax{position:absolute;z-index:5;left:50%;top:52%;transform:translate(-50%,-10%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#e8c985,#8d5727 70%);border:2px solid #f1d99d;box-shadow:0 3px 8px #250812;font:1rem 'Playfair Display',serif;color:#5a182b;transition:opacity .3s}.envelope.is-open .env-flap{transform:rotateX(180deg);z-index:1}.envelope.is-open .letter-preview{transform:translateY(-105px)}.envelope.is-open .wax{opacity:0}.open-status{min-height:22px;margin-top:7px;color:var(--goldlight);font:italic 1rem 'Playfair Display',serif}.scroll{margin-top:24px;color:#d8b8c2;font-size:.75rem;text-decoration:none}.heading{max-width:760px;margin:0 auto 38px}.heading h2,.ending h2{font:clamp(2.7rem,6vw,4.2rem)/1.1 'Great Vibes',cursive;margin:14px 0;color:var(--cream)}.heading h2 em,.ending h2 em{font-style:normal;color:var(--goldlight)}.ornament{color:var(--gold);letter-spacing:.2em}.letter-section{background:linear-gradient(#2a0a17,#3b1020,#2b0a18)}.paper{max-width:750px;margin:auto;position:relative;text-align:left;padding:clamp(28px,6vw,60px);background:linear-gradient(135deg,#fff2d9,#f0d8b1);color:#4b2630;box-shadow:0 25px 70px #0004;border:1px solid #e5c47e;outline:1px solid #d7b56b;outline-offset:6px;font:1rem/1.9 'Playfair Display',serif}.flower{position:absolute;top:10px;right:20px;color:#a16b50;font-size:2rem}.greeting{font:2rem 'Great Vibes',cursive;color:#7a243e;margin-bottom:18px}.paper p{margin-bottom:16px}.paper .highlight{color:#7d1f3d;font-weight:600}.signature{font:2.4rem 'Great Vibes',cursive;color:#78243d}.paper-heart{position:absolute;right:25px;bottom:15px;color:#8b263e}.gallery-section{background:#210711}.gallery{max-width:1000px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:center}.gallery figure{background:#f5e4ca;padding:9px 9px 15px;transform:rotate(-2deg);box-shadow:0 13px 28px #0004;transition:transform .2s}.gallery figure:nth-child(even){transform:rotate(2deg)}.gallery figure:hover{transform:rotate(0) translateY(-5px)}.gallery img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:linear-gradient(145deg,#ecd6cb,#a96d78)}.gallery figcaption{padding:12px 3px 0;color:#5c2738;font:1.1rem 'Great Vibes',cursive}.tip{max-width:760px;margin:30px auto 0;font-size:.78rem;line-height:1.8;color:#c7aab4}.tip code{color:var(--goldlight);background:#ffffff0d;padding:2px 5px}.counter-section{background:linear-gradient(160deg,#4a1528,#260812)}.counter{max-width:460px;margin:auto;padding:32px 20px;border:1px solid #b58a53;border-radius:8px;background:#260812b5}.counter strong{display:block;font:clamp(4.5rem,12vw,6.8rem)/1 'Playfair Display',serif;color:var(--goldlight)}.counter span{display:block;margin-top:10px;font-size:.9rem;letter-spacing:.08em}.counter small{display:block;margin-top:22px;padding-top:17px;border-top:1px solid #b58a534d;color:#d8b9c2;font:italic 1rem 'Playfair Display',serif}.messages-section{background:#2b0b19}.messages{max-width:900px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.messages button{min-height:155px;padding:18px 12px;border:1px solid #96536a;border-radius:8px;background:#3b1020;color:var(--cream);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;cursor:pointer;transition:.2s}.messages button:hover,.messages button:focus-visible{transform:translateY(-4px);border-color:var(--gold);background:#4a1428}.messages button span{font-size:1.6rem;color:var(--gold)}.messages button b{font:1.05rem 'Playfair Display',serif;font-weight:400}.messages button small{font-size:.7rem;color:#d3b2bd}.reveal{max-width:760px;min-height:68px;margin:26px auto 0;padding:18px;border:1px dashed #a77959;color:var(--goldlight);font:italic 1.1rem/1.7 'Playfair Display',serif}.ending{background:radial-gradient(ellipse at center,#641e35,#210711 70%);padding:100px 20px}.big-heart{font-size:3rem;color:var(--gold);margin-bottom:20px;animation:beat 1.8s infinite}.ending>p:not(.eyebrow){max-width:560px;margin:18px auto;color:#d5b8c1;line-height:1.8;font-size:.9rem}.end-signature{font:2.4rem 'Great Vibes',cursive;color:var(--goldlight);margin:28px 0 8px}.last{font:italic .85rem 'Playfair Display',serif!important;color:#b98c9b!important}@keyframes beat{50%{transform:scale(1.12)}}footer{padding:22px 12px;text-align:center;background:#16040b;border-top:1px solid #d6b46a35;color:#c7aab4;font-size:.75rem}@media(max-width:760px){.topbar{height:auto;min-height:62px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.topbar nav{width:100%;justify-content:center;flex-wrap:wrap;gap:10px 18px}.hero{min-height:calc(100vh - 90px)}section{padding:72px 17px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;gap:15px}.gallery figure,.gallery figure:nth-child(even){transform:none}.messages{grid-template-columns:repeat(2,minmax(0,1fr))}.paper{padding:32px 24px}}@media(max-width:370px){.gallery{gap:10px}.gallery figure{padding:6px}.gallery figcaption{font-size:1rem}.messages button b{font-size:.95rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

:root{--wine:#633b78;--deep:#21132b;--gold:#d8b7ef;--goldlight:#f2e4ff;--rose:#e6aeca;--cream:#fff8fc;--muted:#cbbbd1}
body{background:var(--deep)}
.topbar{background:#1b1025ed;border-bottom-color:#d8b7ef55}
.hero{background:radial-gradient(ellipse at 50% 25%,#704888,#422c55 43%,#21132b 80%)}
.hero h1 em{color:#f0c4dc}
.env-back{border-color:#e4c5f3;background:linear-gradient(140deg,#9e6bb5,#654279 65%,#452d58)}
.env-front{background:linear-gradient(145deg,#8d5ca5,#58376f);border-bottom-color:#d8b7ef}
.env-flap{background:linear-gradient(155deg,#a878bf,#704888)}
.wax{background:radial-gradient(circle at 30% 25%,#f1d8f4,#9662a0 70%);border-color:#f5e4ff;color:#452d58}
.letter-section{background:linear-gradient(#2c1938,#3c254b,#2c1938)}
.gallery-section{background:#21132b}
.gallery img{background:linear-gradient(145deg,#f0d7e5,#a783bd)}
.tip{color:#cbbbd1}
.tip code{color:var(--goldlight)}
.counter-section{background:linear-gradient(160deg,#4c3260,#21132b)}
.counter{border-color:#bca2cc;background:#21132bb5}
.counter small{border-top-color:#bca2cc66;color:#d4c3dd}
.messages-section{background:#2b1a38}
.messages button{border-color:#795c8e;background:#3c294c}
.messages button:hover,.messages button:focus-visible{background:#4b3260}
.messages button small{color:#d4c3dd}
.reveal{border-color:#a88cbb}
.ending{background:radial-gradient(ellipse at center,#67447c,#21132b 70%)}
.ending>p:not(.eyebrow){color:#d4c3dd}
.last{color:#c0a3ce!important}
footer{background:#180e20;border-top-color:#d8b7ef55;color:#cbbbd1}
.welcome-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#704888,#422c55 52%,#21132b 100%);padding:48px 20px}
.welcome-screen h1{font:clamp(3.6rem,10vw,7rem)/1.05 'Great Vibes',cursive;color:var(--cream);margin:18px 0;text-shadow:0 3px 30px #0005}
.welcome-screen h1 em{font-style:normal;color:#f0c4dc}
.welcome-screen>p:not(.eyebrow){max-width:400px;color:#e3d3eb;font:1rem/1.8 'Playfair Display',serif}
.welcome-button{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:13px 22px;border:1px solid #e8d1f4;border-radius:999px;background:#ffffff14;color:var(--cream);font-size:.85rem;text-decoration:none;transition:background .2s,transform .2s}
.welcome-button:hover,.welcome-button:focus-visible{background:#ffffff28;transform:translateY(-2px)}
.welcome-button:focus-visible{outline:2px solid var(--goldlight);outline-offset:4px}
.welcome-heart{position:absolute;bottom:28px;color:#e6aeca;font-size:1.6rem;animation:beat 1.8s infinite}
body:not(.entered) .topbar,
body:not(.entered) main>section:not(.welcome-screen),
body:not(.entered) footer{display:none}
body.entered .welcome-screen{display:none}
.welcome-screen .envelope-stage{margin-top:24px}
.welcome-screen .envelope{width:min(72vw,300px);height:190px}
.welcome-screen .letter-preview{height:145px}
.welcome-screen .env-back{inset:16px 0 0}
.welcome-screen .env-flap{top:16px}
.gallery-carousel{max-width:560px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:14px}
.gallery{width:min(100%,420px);display:block;margin:0}
.gallery figure{width:100%;margin:0;transform:none!important}
.gallery figure[hidden]{display:none}
.gallery img{max-height:520px;aspect-ratio:3/4}
.gallery-control{flex:0 0 42px;width:42px;height:42px;border:1px solid #bca2cc;border-radius:50%;background:#ffffff12;color:var(--goldlight);font:2rem/1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.gallery-control:hover,.gallery-control:focus-visible{background:#ffffff28;transform:scale(1.06)}
.gallery-control:focus-visible{outline:2px solid var(--goldlight);outline-offset:3px}
.gallery-autoplay{margin-top:18px;padding:9px 16px;border:1px solid #bca2cc;border-radius:999px;background:#ffffff12;color:var(--goldlight);font: .8rem 'DM Sans',sans-serif;cursor:pointer;transition:background .2s}
.gallery-autoplay:hover,.gallery-autoplay:focus-visible{background:#ffffff28}
.gallery-autoplay:focus-visible{outline:2px solid var(--goldlight);outline-offset:3px}
.gallery-status{margin:16px auto 0;color:var(--muted);font-size:.8rem}