/* Homepage: a single, quiet, full-viewport love letter. */
.home{height:100dvh;min-height:540px;overflow:hidden;background:#000;isolation:isolate}
.home .stars{position:fixed;inset:0;z-index:0;pointer-events:none;background-color:#000;background-image:radial-gradient(circle,white 0 1px,transparent 1.4px),radial-gradient(circle,#fff 0 1.25px,transparent 1.7px),radial-gradient(circle,#fff 0 .75px,transparent 1.2px);background-size:83px 83px,149px 149px,43px 43px;background-position:0 0,31px 71px,14px 23px;animation:drift-stars 65s linear infinite}
.home .aurora,.home .grain{display:none}
.home header,.home main,.home footer{position:relative;z-index:1}
@keyframes drift-stars{to{background-position:560px -760px,-390px 620px,280px -440px}}
.home header{height:76px}
.home main{height:calc(100dvh - 44px);display:grid;place-items:center}
.home .hero{width:min(650px,100%);min-height:0;padding:38px 30px 30px;background:#000;clip-path:none}
.home .tiny-heart{margin:0 0 20px;font-size:2.5rem}
.home .verse{max-width:560px;margin:0 0 28px;color:#e7c8dc;font:italic 500 clamp(1.65rem,3.5vw,3.15rem)/1.18 "Playfair Display",serif;letter-spacing:-.035em}
.home .verse span{color:var(--pink)}
.home .heart-player span{font-size:6rem}
.home footer{height:44px;padding:8px 0 18px}
.home .audio-status{margin:7px 0 0;font-size:.7rem}
@media(max-width:650px){.home{min-height:0}.home main,.home footer{width:calc(100% - 28px)}.home main{height:calc(100dvh - 36px)}.home .hero{padding:30px 18px 20px}.home .verse{font-size:clamp(1.45rem,7.1vw,2.1rem);line-height:1.22;margin:0 0 24px}.home .heart-player span{font-size:5rem}.home .audio-status{font-size:.64rem}.home footer{height:36px;padding:4px 0 12px}}

:root{--ink:#fff6ff;--muted:#d4abc9;--pink:#ff4fa3;--violet:#9d67ff;--bg:#11051e}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:"DM Mono",monospace;letter-spacing:.025em}
.aurora{position:fixed;width:55vw;height:55vw;border-radius:50%;filter:blur(80px);opacity:.25;pointer-events:none;z-index:-2}
.a1{top:-25vw;left:-18vw;background:#d520a2}
.a2{right:-25vw;bottom:-30vw;background:#5639ff}
.grain{position:fixed;inset:0;opacity:.2;pointer-events:none;z-index:4;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='.35'/%3E%3C/svg%3E")}
header,main,footer{width:min(1120px,calc(100% - 40px));margin:auto}
header{height:94px;display:flex;align-items:center;justify-content:space-between}
.brand{color:var(--ink);text-decoration:none;font-family:"Playfair Display",serif;font-size:1.45rem;font-style:italic}
.brand::first-letter{color:var(--pink)}
nav{display:flex;gap:24px}
nav a{color:var(--muted);text-decoration:none;font-size:.66rem;transition:.25s}
nav a:hover,nav a.active{color:var(--ink);text-shadow:0 0 12px var(--pink)}
.frame{border:1px solid rgba(255,129,208,.54);box-shadow:0 0 8px rgba(255,79,163,.4),inset 0 0 17px rgba(157,103,255,.08);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{50%{border-color:#ffb6de;box-shadow:0 0 22px rgba(255,79,163,.75),inset 0 0 25px rgba(157,103,255,.16)}
}
.hero{min-height:560px;display:flex;align-items:center;flex-direction:column;justify-content:center;text-align:center;padding:58px 20px;background:linear-gradient(125deg,rgba(255,79,163,.08),rgba(76,45,152,.1));clip-path:polygon(0 4%,4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%)}
.eyebrow{font-size:.65rem;color:#ffa8d3;letter-spacing:.22em}
.tiny-heart{color:var(--pink);font-size:2rem;margin:24px 0 3px;text-shadow:0 0 18px var(--pink)}
h1,h2{font-family:"Playfair Display",serif;font-weight:500;letter-spacing:-.045em}
h1{font-size:clamp(3rem,7vw,6.5rem);line-height:.92;margin:0}
em{color:#ff8bc5;font-weight:500}
.lede{color:var(--muted);font-size:.85rem;max-width:380px;line-height:1.7;margin:26px 0}
.heart-player{border:0;background:transparent;color:var(--pink);cursor:pointer;display:grid;place-items:center;gap:4px;font-family:inherit}
.heart-player span{font-size:5rem;line-height:.8;filter:drop-shadow(0 0 10px var(--pink));transition:.25s}
.heart-player:hover span,.heart-player.playing span{transform:scale(1.15);filter:drop-shadow(0 0 23px #ff70b7)}
.heart-player.playing span{animation:beat .7s infinite alternate}
@keyframes beat{to{transform:scale(1.25)}
}
.heart-player small,.audio-status{font-size:.58rem;text-transform:uppercase;letter-spacing:.16em}
.audio-status{height:14px;color:var(--muted)}
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px auto 80px}
.card{min-height:205px;padding:24px;background:rgba(255,255,255,.025)}
.card span{font-size:.65rem;color:var(--pink)}
h2{font-size:1.8rem;margin:30px 0 8px}
.card p,.timeline p{color:var(--muted);font-size:.75rem;line-height:1.7}
.page{padding:70px 0 80px}
.page h1{margin:22px 0 55px}
.timeline{max-width:700px;border-left:1px solid var(--pink);padding-left:26px;display:grid;gap:20px}
.timeline article{padding:22px;background:rgba(255,255,255,.025)}
.timeline b{font-size:.67rem;color:#ffa8d3}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.note{min-height:190px;padding:25px;text-align:left;color:var(--ink);background:rgba(255,255,255,.025);font:500 1.4rem/1.35 "Playfair Display",serif;cursor:pointer;transition:.25s}
.note:hover,.note.open{background:rgba(255,79,163,.14);transform:translateY(-6px)}
footer{text-align:center;padding:25px 0 35px;color:var(--muted);font-size:.62rem}
footer span{color:var(--pink)}
@media(max-width:650px){header{height:80px;width:calc(100% - 28px)}
nav{gap:12px}
nav a{font-size:.56rem}
main,footer{width:calc(100% - 28px)}
.hero{min-height:calc(100vh - 120px);padding:40px 16px}
.moments,.notes{grid-template-columns:1fr;margin-bottom:45px}
.card{min-height:150px}
.page{padding-top:45px}
.page h1{margin-bottom:36px}
.notes .note{min-height:135px}
}
.home .dedication{margin:-10px 0 26px;color:#ffa8d3;font:italic 500 clamp(1.2rem,2.625vw,2.36rem)/1.2 "Playfair Display",serif;letter-spacing:-.025em}
.home main{height:calc(100dvh - 120px)}
.game-wrap{max-width:580px;margin:0 auto;text-align:center}.game-wrap h1{font-size:clamp(2.8rem,6vw,5rem);margin:20px 0 10px}.game-copy{color:var(--muted);font-size:.72rem;line-height:1.7;margin:0 auto 22px;max-width:500px}.game-status{min-height:2.5em;margin:18px 0;color:#ffa8d3;font-size:.7rem;line-height:1.5}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px;background:rgba(255,79,163,.2);max-width:420px;margin:auto}.square{aspect-ratio:1;border:1px solid rgba(255,129,208,.62);background:rgba(0,0,0,.6);color:var(--ink);font:500 clamp(3.4rem,12vw,6rem)/1 "Playfair Display",serif;cursor:pointer;transition:.2s}.square:hover:not(:disabled){background:rgba(255,79,163,.2)}.square.x{color:#ff8bc5}.square.o{color:#b795ff}.square:disabled{cursor:not-allowed}.game-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}.game-button{border:1px solid var(--pink);background:transparent;color:var(--ink);padding:10px 14px;font:inherit;font-size:.62rem;letter-spacing:.08em;cursor:pointer}.game-button:hover{background:rgba(255,79,163,.18)}
@media(max-width:650px){.home main{height:calc(100dvh - 116px)}.home .dedication{font-size:clamp(1.1rem,5.3vw,1.58rem);margin:-8px 0 22px}.game-wrap{padding-top:10px}.board{max-width:350px}}