:root{--ink:#4e2939;--muted:#886878;--pink:#e987ad;--pink-dark:#c95686;--rose:#fff1f6;--paper:#fffafc;--line:#f2d7e2;--lilac:#f1e8ff;--peach:#fff0e7;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#fffafc;color:var(--ink);font-family:var(--sans);overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' 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='.12'/%3E%3C/svg%3E")}.topbar{height:78px;padding:0 7vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(225,166,190,.25);background:rgba(255,250,252,.86);backdrop-filter:blur(16px);position:sticky;top:0;z-index:20}.brand{text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:-.04em;font-size:1.15rem}.brand-heart{color:var(--pink-dark);margin-right:4px}.brand-dot{color:var(--pink-dark)}nav{display:flex;gap:28px}nav a,.back-top{font-size:.78rem;color:var(--muted);text-decoration:none;transition:color .2s}nav a:hover,.back-top:hover{color:var(--pink-dark)}.sound-toggle{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;color:var(--pink-dark);font:600 .75rem var(--sans);cursor:pointer}.sound-toggle span{color:var(--muted);margin-left:5px}.section{padding:110px 9vw;position:relative}.hero{min-height:690px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:4vw;padding-top:80px;padding-bottom:90px;background:radial-gradient(ellipse at 78% 42%,#ffe0ec 0,rgba(255,224,236,.3) 28%,transparent 55%),linear-gradient(130deg,#fff9fb,#fff0f6 70%,#fdf4ff)}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.65rem;font-weight:700;color:var(--pink-dark);margin:0 0 22px}.tiny-heart{font-size:.8rem;margin-right:8px}.hero h1,.section-heading h2,.future-copy h2,.closing h2{font:600 clamp(2.8rem,5.2vw,5rem)/1.12 var(--serif);letter-spacing:-.045em;margin:0;color:#542b3e}.hero h1 em,.section-heading h2 em,.future-copy h2 em,.closing h2 em{font-weight:500;color:var(--pink-dark)}.hero-sub{font-size:1rem;line-height:1.85;color:var(--muted);max-width:480px;margin:25px 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;gap:18px;padding:14px 19px;border-radius:999px;font:600 .78rem var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s;border:0}.button:hover{transform:translateY(-3px)}.primary{background:var(--pink-dark);color:white;box-shadow:0 10px 25px rgba(201,86,134,.2)}.primary:hover{box-shadow:0 14px 30px rgba(201,86,134,.28)}.ghost{background:rgba(255,255,255,.65);border:1px solid var(--line);color:var(--ink)}.relationship-counter{display:inline-flex;align-items:center;gap:13px;margin-top:28px;padding:13px 17px;border:1px solid rgba(233,135,173,.28);border-radius:18px;background:rgba(255,255,255,.62);box-shadow:0 10px 28px rgba(122,52,82,.045);backdrop-filter:blur(8px)}.counter-heart{font-size:1.55rem;color:var(--pink-dark);animation:breathe 3s ease-in-out infinite}.counter-label{display:block;color:#b17c95;font-size:.61rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}.relationship-counter strong{display:block;font:600 1.05rem var(--serif);color:#7e3d5c}.counter-sparkle{color:#d47ba0;margin-left:8px;animation:twinkle 2.5s infinite}
.little-note{margin-top:22px;color:#aa8293;font-size:.7rem;letter-spacing:.02em}.pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e68aae;margin-right:9px;box-shadow:0 0 0 5px rgba(230,138,174,.13)}.hero-art{height:460px;position:relative;display:grid;place-items:center}.heart-glow{width:240px;height:240px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#ffd0e1 0,#ffdfeb 35%,rgba(255,222,235,.2) 68%,transparent 70%);animation:breathe 4s ease-in-out infinite}.heart-shape{font-size:150px;line-height:1;color:#e986ad;text-shadow:0 18px 45px rgba(201,86,134,.28);animation:float 4s ease-in-out infinite;filter:drop-shadow(0 8px 8px rgba(201,86,134,.15))}.orbit{position:absolute;border:1px solid rgba(216,124,161,.24);border-radius:50%;transform:rotate(-24deg)}.orbit-one{width:360px;height:190px}.orbit-two{width:420px;height:290px;transform:rotate(55deg)}.spark{position:absolute;color:#d56b98;font-size:1.5rem;animation:twinkle 3s infinite}.s1{top:70px;left:23%}.s2{right:15%;top:130px;animation-delay:1s}.s3{bottom:75px;right:26%;animation-delay:1.8s}.floating-note{position:absolute;background:rgba(255,255,255,.8);border:1px solid rgba(242,215,226,.9);border-radius:14px;padding:12px 16px;box-shadow:0 10px 35px rgba(122,52,82,.08);font:italic .95rem var(--serif);color:var(--pink-dark);backdrop-filter:blur(8px)}.note-top{top:90px;right:4%;transform:rotate(7deg)}.note-bottom{bottom:70px;left:0;transform:rotate(-6deg)}.scroll-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#b68a9e;display:flex;align-items:center;gap:10px}.scroll-hint span{height:28px;width:1px;background:#d99bb5}.intro-strip{padding:36px 9vw;background:#fff;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;border-top:1px solid #f8e6ed;border-bottom:1px solid #f8e6ed}.intro-strip p{font:italic 1.15rem var(--serif);margin:0;color:#7a435b}.intro-strip span{font-size:.7rem;color:#c07a99}.section-heading{text-align:center;max-width:650px;margin:0 auto 60px}.section-heading .eyebrow{margin-bottom:16px}.section-heading h2,.future-copy h2{font-size:clamp(2.5rem,4vw,3.8rem)}.section-heading>p:last-child{color:var(--muted);line-height:1.8;font-size:.9rem;max-width:500px;margin:20px auto 0}.story-section{background:#fffafc}.timeline{max-width:780px;margin:0 auto;position:relative}.timeline:before{content:"";position:absolute;left:27px;top:20px;bottom:25px;width:1px;background:linear-gradient(var(--pink),#f5dce6)}.timeline-item{display:grid;grid-template-columns:56px 1fr;gap:22px;margin-bottom:22px;position:relative}.timeline-marker{width:55px;height:55px;border-radius:50%;background:#fff0f6;border:1px solid #f3d2df;display:grid;place-items:center;color:var(--pink-dark);font-size:1.15rem;z-index:1;box-shadow:0 5px 18px rgba(201,86,134,.08)}.timeline-card{padding:25px 30px;background:white;border:1px solid #f5e2e9;border-radius:18px;box-shadow:0 12px 40px rgba(112,54,79,.035)}.timeline-label,.memory-date{font-size:.61rem;letter-spacing:.16em;color:var(--pink-dark);font-weight:700}.timeline-card h3,.memory-card h3{font:600 1.35rem var(--serif);margin:9px 0}.timeline-card p,.memory-card p{font-size:.82rem;line-height:1.8;color:var(--muted);margin:0}.edit-hint{text-align:center;font-size:.7rem;color:#ba91a3;margin:36px 0 0}.memories-section{background:linear-gradient(180deg,#fff4f8,#fffafc);}.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1050px;margin:0 auto}.memory-card{position:relative;min-height:260px;border:1px solid rgba(233,185,205,.6);border-radius:22px;padding:27px;overflow:hidden;transition:transform .25s,box-shadow .25s}.memory-card:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(112,54,79,.08)}.memory-pink{background:linear-gradient(145deg,#fff0f6,#fffafd)}.memory-peach{background:linear-gradient(145deg,#fff0e7,#fffaf6)}.memory-lilac{background:linear-gradient(145deg,#f2eaff,#fffaff)}.memory-icon{font-size:1.8rem;margin-bottom:28px;color:#d66d99}.memory-card h3{margin-bottom:10px}.card-heart{position:absolute;right:24px;bottom:15px;font-size:2.5rem;color:rgba(218,117,157,.18)}.memory-add{max-width:1050px;margin:20px auto 0;border:1px dashed #e5b4c8;border-radius:18px;padding:20px 24px;display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.55)}.add-plus{height:40px;width:40px;border-radius:50%;background:#ffe6ef;color:var(--pink-dark);display:grid;place-items:center;font-size:1.4rem}.memory-add strong{font-size:.83rem}.memory-add p{margin:5px 0 0;font-size:.75rem;color:var(--muted)}.add-tag{margin-left:auto;font-size:.65rem;color:var(--pink-dark);background:#ffeaf2;padding:7px 10px;border-radius:999px}.letter-section{background:#fff;overflow:hidden;display:grid;place-items:center;padding-top:120px;padding-bottom:120px}.letter-paper{position:relative;max-width:620px;width:100%;text-align:center;padding:55px 65px;background:linear-gradient(145deg,#fff9fb,#fff0f6);border:1px solid #f0d4e0;border-radius:4px 22px 22px 22px;box-shadow:0 25px 70px rgba(125,57,85,.1)}.letter-paper:before{content:"";position:absolute;top:0;left:0;width:55px;height:55px;background:linear-gradient(135deg,#f9dce7 50%,transparent 51%);border-radius:4px 0 0 0}.letter-top{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#bc7b98}.letter-heart{font-size:2.2rem;color:var(--pink-dark);margin:25px 0 12px;animation:breathe 3s infinite}.letter-paper h2{font:600 clamp(2rem,4vw,3rem)/1.15 var(--serif);margin:0 0 20px}.letter-body{font:italic 1.05rem/1.9 var(--serif);color:#86576d;margin:0 auto 22px;max-width:450px}.letter-signoff{font:italic 1rem var(--serif);color:var(--pink-dark);margin-bottom:27px}.letter-decoration{position:absolute;font-size:5rem;color:#f7d6e3;opacity:.75}.decor-left{left:10%;top:20%}.decor-right{right:12%;bottom:17%}.future-section{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:#fff4f8;min-height:620px}.future-copy>p:not(.eyebrow){color:var(--muted);font-size:.9rem;line-height:1.9;max-width:470px;margin:25px 0}.future-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:27px}.future-pills span{font-size:.7rem;background:#fff;border:1px solid #f1d5e1;border-radius:999px;padding:10px 13px;color:#a65b7e}.future-art{height:350px;position:relative;overflow:hidden;border-radius:25px;background:linear-gradient(#d9c8e8,#f9d8e5 75%,#ffe9ed);box-shadow:0 18px 55px rgba(137,80,114,.12)}.moon{position:absolute;right:17%;top:14%;font-size:3rem;color:#fff4fb;text-shadow:0 0 30px #fff;transform:rotate(-25deg)}.hill{position:absolute;bottom:-55px;width:120%;height:180px;border-radius:50%}.hill-back{background:#c6a8c7;left:-30%;bottom:-75px}.hill-front{background:#8f6c94;right:-35%;bottom:-110px}.tiny-house{position:absolute;bottom:66px;left:45%;transform:translateX(-50%);width:90px}.roof{width:0;height:0;border-left:52px solid transparent;border-right:52px solid transparent;border-bottom:57px solid #8b536f;margin-left:-7px}.house-body{height:67px;background:#fff0f5;width:84px;margin-left:4px;position:relative;border-radius:2px 2px 0 0}.window{position:absolute;top:15px;left:14px;width:17px;height:17px;background:#f1a6c3;border:3px solid #fff8fa}.door{position:absolute;bottom:0;right:13px;width:21px;height:37px;background:#bd7897;border-radius:10px 10px 0 0}.smoke{position:absolute;top:-20px;right:-20px;color:#fff4f8;animation:float 4s infinite}.future-caption{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff7fc;font:italic 1rem var(--serif);z-index:2}.closing{text-align:center;background:radial-gradient(ellipse at 50% 0%,#ffe0ec,transparent 65%),#fffafc;padding-top:100px;padding-bottom:100px}.closing-heart{font-size:2.5rem;color:var(--pink-dark);animation:breathe 3s infinite}.closing>p{color:#b16e8b;text-transform:uppercase;letter-spacing:.2em;font-size:.65rem;margin:20px 0}.closing h2{font-size:clamp(2.7rem,5vw,4.5rem)}.closing>span{display:block;color:#bd8ba1;font-size:.7rem;margin-top:25px;letter-spacing:.08em}.footer{display:flex;align-items:center;justify-content:space-between;padding:28px 7vw;border-top:1px solid #f3dce6;background:#fff}.footer p{font-size:.7rem;color:#b28da0}.love-dialog{border:1px solid #f0cbd9;border-radius:24px;background:linear-gradient(145deg,#fffafd,#fff0f6);color:var(--ink);padding:42px 38px;max-width:480px;width:calc(100% - 32px);box-shadow:0 30px 100px rgba(90,40,65,.2);text-align:center}.love-dialog::backdrop{background:rgba(70,34,53,.35);backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#a86b86;font-size:1.7rem;cursor:pointer}.dialog-heart{font-size:2.4rem;color:var(--pink-dark);margin-bottom:10px}.love-dialog h2{font:600 2.2rem var(--serif);margin:0 0 18px}.love-dialog>p:not(.eyebrow){font:1rem/1.85 var(--serif);color:#86576d}.dialog-sign{display:block;margin-top:25px;font:italic 1rem var(--serif);color:var(--pink-dark)}#heartLayer{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}.flying-heart{position:absolute;bottom:-30px;color:#e77da6;animation:rise 3.6s ease-in forwards;text-shadow:0 4px 15px rgba(200,75,126,.18)}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.95}100%{transform:translateY(-110vh) rotate(35deg);opacity:0}}@media(max-width:900px){.topbar{padding:0 5vw}nav{gap:14px}nav a{font-size:.7rem}.section{padding-left:6vw;padding-right:6vw}.hero{gap:1vw}.hero-art{transform:scale(.85)}.memory-grid{gap:12px}.memory-card{padding:21px}.future-section{gap:5vw}}@media(max-width:680px){.topbar{height:68px}.topbar nav{display:none}.sound-toggle{padding:9px 11px}.section{padding:78px 6vw}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:65px;min-height:auto}.hero h1{font-size:clamp(2.7rem,12vw,4rem)}.hero-art{height:330px;transform:scale(.88);margin-top:10px;margin-bottom:15px}.relationship-counter{max-width:100%;padding:12px 14px}.relationship-counter strong{font-size:.98rem}.heart-glow{width:210px;height:210px}.heart-shape{font-size:130px}.orbit-one{width:300px;height:160px}.orbit-two{width:340px;height:230px}.note-top{right:2%;top:35px}.note-bottom{left:1%;bottom:35px}.scroll-hint{display:none}.intro-strip{padding:28px 7vw;text-align:center;gap:10px}.intro-strip p{font-size:1rem}.section-heading{margin-bottom:40px}.timeline-item{grid-template-columns:43px 1fr;gap:12px}.timeline:before{left:21px}.timeline-marker{width:43px;height:43px}.timeline-card{padding:20px}.timeline-card h3{font-size:1.2rem}.memory-grid{grid-template-columns:1fr}.memory-card{min-height:210px}.memory-icon{margin-bottom:18px}.memory-add{align-items:flex-start;padding:17px}.add-tag{display:none}.letter-paper{padding:45px 24px}.letter-decoration{font-size:3rem}.decor-left{left:3%;top:8%}.decor-right{right:4%;bottom:7%}.future-section{grid-template-columns:1fr}.future-art{height:300px}.footer{gap:12px;flex-wrap:wrap}.footer p{order:3;flex-basis:100%;margin:0}.love-dialog{padding:38px 24px}.love-dialog h2{font-size:1.8rem}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Supabase login screen */
[hidden] { display: none !important; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:32px 18px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 15% 10%,rgba(255,205,225,.75),transparent 42%),radial-gradient(ellipse at 90% 85%,rgba(226,205,247,.62),transparent 38%),linear-gradient(145deg,#fff9fc,#fff0f6 58%,#fff8fb); }
.login-stars { position:absolute; top:7%; left:0; right:0; text-align:center; color:#d68cac; opacity:.7; letter-spacing:.4em; font-size:clamp(1.2rem,3vw,2rem); animation:float 5s ease-in-out infinite; }
.login-card { width:min(100%,430px); padding:clamp(28px,6vw,48px); position:relative; z-index:1; text-align:center; background:rgba(255,255,255,.78); border:1px solid rgba(237,193,211,.8); border-radius:28px; box-shadow:0 25px 80px rgba(128,67,96,.13); backdrop-filter:blur(14px); }
.login-heart { color:var(--pink-dark); font-size:2.2rem; animation:breathe 3s infinite; margin-bottom:8px; }
.login-card .eyebrow { margin-bottom:14px; }
.login-card h1 { font:600 clamp(2.6rem,10vw,3.6rem)/1.05 var(--serif); margin:0 0 18px; }
.login-card h1 em { color:var(--pink-dark); font-weight:500; }
.login-intro { color:var(--muted); font-size:.9rem; line-height:1.7; margin:0 auto 28px; max-width:300px; }
#loginForm { text-align:left; }
#loginForm label { display:block; color:#9a617c; font-size:.76rem; font-weight:700; margin:16px 0 7px; }
#loginForm input { width:100%; border:1px solid #eed1de; border-radius:13px; background:#fffafd; color:var(--ink); padding:14px 15px; font:inherit; font-size:.9rem; outline:none; transition:border-color .2s,box-shadow .2s; }
#loginForm input:focus { border-color:#d985a8; box-shadow:0 0 0 4px rgba(217,133,168,.13); }
.login-submit { width:100%; justify-content:center; margin-top:23px; }
.login-submit:disabled,.reset-password:disabled { opacity:.55; cursor:not-allowed; }
.login-message { min-height:1.2em; margin:13px 0 0; font-size:.75rem; line-height:1.5; color:#a34b6d; text-align:center; }
.login-message.success { color:#52806b; }
.reset-password { border:0; background:transparent; color:#a76582; text-decoration:underline; text-underline-offset:3px; font:inherit; font-size:.75rem; margin-top:15px; cursor:pointer; }
.login-footnote { margin:26px 0 0; color:#c08aa1; font-size:.67rem; letter-spacing:.06em; }
.header-actions { display:flex; align-items:center; gap:10px; }
.logout-button { border:1px solid #efd4df; background:rgba(255,255,255,.72); border-radius:999px; padding:9px 12px; color:#a76582; font:inherit; font-size:.72rem; cursor:pointer; }
.logout-button:hover { background:#fff0f6; }
@media(max-width:680px) { .login-card{border-radius:23px}.header-actions{gap:6px}.logout-button{padding:8px 9px;font-size:.68rem} }