@font-face{font-family:Orbitron;src:url('assets/orbitron.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Space Mono;src:url('assets/space-mono.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url('assets/cormorant.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url('assets/cormorant-italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
:root{color-scheme:dark;--pink:#ff3caf;--rose:#ff9cd4;--white:#f9e7f2;--muted:#a38d9c;--mono:'Space Mono',monospace;--edge:26px}
*{box-sizing:border-box}html{min-width:320px;background:#080709;scroll-behavior:smooth}body{margin:0;color:var(--white);font-family:var(--mono);background:#080709}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #ffc5e8;outline-offset:7px}button{border:0;background:none}::selection{background:#8e125e;color:#fff}main:focus{outline:none}.skip-link{position:fixed;top:-80px;left:36px;padding:12px;background:#280e20;z-index:20}.skip-link:focus{top:30px}
.universe{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#08090a}.ambient{position:absolute;inset:-10%;background:radial-gradient(ellipse 30% 30% at 50% 52%,#b0005a47,transparent 90%),radial-gradient(ellipse 44% 40% at 50% 63%,#6b003c33,transparent 100%),radial-gradient(ellipse 80% 60% at 50% 90%,#1f001520,transparent);animation:breathe 9s ease-in-out infinite alternate}#rain{position:absolute;inset:0;width:100%;height:100%}.vignette{position:absolute;inset:0;background:linear-gradient(0deg,#08090af2 0%,transparent 20%,transparent 75%,#08090ace 100%),radial-gradient(ellipse at center,transparent 25%,#07090b66 70%,#07090bdb 100%)}.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#00000018 4px);opacity:.4}.frame{position:fixed;inset:var(--edge);border:1px solid #eeb7d315;pointer-events:none;z-index:5}.frame i{position:absolute;width:9px;height:9px;border-color:#d0a9c4a6;border-style:solid}.frame i:nth-child(1){top:-1px;left:-1px;border-width:1px 0 0 1px}.frame i:nth-child(2){top:-1px;right:-1px;border-width:1px 1px 0 0}.frame i:nth-child(3){bottom:-1px;left:-1px;border-width:0 0 1px 1px}.frame i:nth-child(4){bottom:-1px;right:-1px;border-width:0 1px 1px 0}.page-shell{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:var(--edge)}
.header{height:91px;padding:0 31px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:2}.brand{display:flex;align-items:center;gap:23px}.brand-mark{font:700 24px Orbitron,sans-serif;letter-spacing:-2px;color:#f8dded}.brand-mark span{font-size:17px;color:var(--pink);margin:0 3px}.brand-caption{font-size:8px;letter-spacing:2px;color:#b69bab;padding-left:22px;border-left:1px solid #b891aa32}.header nav{display:flex;gap:33px;align-items:center}.nav-link{position:relative;font-size:9px;letter-spacing:1.8px;padding:12px 0;color:#c7adbd;transition:color .2s}.nav-link:hover{color:#ffb4e2}.nav-link.active{color:#ffc0e5}.nav-link.active:after{content:'';position:absolute;bottom:3px;left:50%;height:3px;width:3px;background:var(--pink);border-radius:50%;box-shadow:0 0 8px var(--pink)}.nav-link span{font-size:12px;color:#e994c2;margin-left:5px}
main{flex:1;display:grid;place-items:center;position:relative}.hero{width:100%;text-align:center;padding:45px 24px 50px;position:relative}.eyebrow{display:flex;align-items:center;justify-content:center;gap:17px;font-size:9px;letter-spacing:3px;color:#deb2cb;margin:0 0 31px}.eyebrow span{height:1px;width:26px;background:linear-gradient(90deg,transparent,#e55c9b)}.eyebrow span:last-child{transform:rotate(180deg)}h1{margin:0;font-family:Orbitron,Arial,sans-serif;font-weight:700;line-height:1.1;isolation:isolate}.initials{display:flex;align-items:center;justify-content:center;gap:27px;font-size:clamp(110px,13.7vw,192px);letter-spacing:-.035em;color:#220b1c;-webkit-text-stroke:2px #ffd1ed;filter:drop-shadow(0 0 2px #ff4bb7) drop-shadow(0 0 7px #ff129e) drop-shadow(0 0 25px #e90090);text-shadow:0 0 3px #ff62bd;line-height:1.05}.plus{font-size:.67em;margin-top:-.04em;-webkit-text-stroke:1.6px #ffd1ed}.forever{display:block;font-size:clamp(29px,5.7vw,79px);letter-spacing:.015em;margin-top:13px;color:#5c123e;-webkit-text-stroke:1.25px #ffc3e8;text-shadow:0 0 3px #ff7cc9;filter:drop-shadow(0 0 3px #ff2bad) drop-shadow(0 0 13px #f90098)}.tagline{font-size:clamp(11px,1.25vw,17px);letter-spacing:.055em;color:#f2cadd;margin:24px 0 0;text-shadow:0 0 20px #ef88c577}.dedication{margin-top:38px}.tiny-heart{color:#f28ac2;display:block;font-size:22px;line-height:1;margin-bottom:13px;text-shadow:0 0 15px #ff27a1aa}.dedication p{font:italic 30px/1.3 Cormorant,Georgia,serif;margin:0;color:#ffe6f4}.dedication-note{display:block;font-size:9px;letter-spacing:1.5px;color:#c49fb5;margin-top:9px}.letter-trigger{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:29px;padding:16px 20px;border:1px solid #f19ac43b;background:linear-gradient(120deg,#a1256b18,#5c204c15);border-radius:3px;font-size:10px;letter-spacing:.4px;transition:background .3s,border-color .3s,box-shadow .3s,transform .3s;color:#f5cfe5}.letter-trigger:hover{background:#b6246c26;border-color:#e777b68c;box-shadow:0 0 28px #d7237b22;transform:translateY(-2px)}.letter-trigger svg{width:17px;height:17px;fill:none;stroke:#ed96c7;stroke-width:1.3}.button-arrow{margin-left:10px;font-size:15px}.side-note{position:absolute;top:50%;font-size:7px;letter-spacing:2px;color:#9c7c91;writing-mode:vertical-rl;z-index:1}.side-note.left{left:31px;transform:translateY(-50%) rotate(180deg)}.side-note.right{right:31px;transform:translateY(-50%)}
.footer{min-height:63px;margin:0 31px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #d7a4c117;font-size:7px;letter-spacing:1.35px;z-index:2}.forever-status{display:flex;align-items:center;gap:9px;color:#a9919f}.status-dot{height:4px;width:4px;border-radius:50%;background:#f87fbf;box-shadow:0 0 9px #f92098}.love-button{display:flex;align-items:center;gap:9px;padding:10px;color:#ad8a9e;font-size:7px;letter-spacing:1.4px;position:absolute;left:50%;transform:translateX(-50%)}.love-button>span:first-child{font-size:16px;color:#f488c3}.love-button:hover{color:#ffd7ef}.motion-button{display:flex;align-items:center;gap:8px;padding:12px 0;font-size:7px;letter-spacing:1.3px;color:#b69eac}.motion-button:hover{color:#ffc7e9}.motion-button svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.3}.play-icon{display:none}.motion-button[aria-pressed="true"] .pause-icon{display:none}.motion-button[aria-pressed="true"] .play-icon{display:block}
dialog,.letter-sheet{width:min(560px,calc(100% - 32px));max-height:calc(100svh - 40px);border:1px solid #b9648e5c;border-radius:3px;padding:0;background:radial-gradient(ellipse at top,#3b1429 0%,#160f16 55%,#100e13 100%);color:#f5dceb;box-shadow:0 0 100px #d41c6720,0 25px 100px #000b;overflow:auto;scrollbar-width:thin;scrollbar-color:#6c344f transparent}dialog::backdrop{background:#07050bcc;backdrop-filter:blur(9px)}dialog[open]{animation:letter-in .45s ease both}.letter-inner{padding:48px 52px 32px;text-align:center;position:relative}.close-letter{position:absolute;top:12px;right:16px;padding:8px;font:28px/1 Arial,sans-serif;color:#bf8fa9}.close-letter:hover{color:#fff}.letter-kicker{font-size:8px;letter-spacing:2px;color:#c68aa9;margin:0 0 20px}.letter-heart{font-size:26px;color:#ff93ce;text-shadow:0 0 15px #ff38a5}.letter-inner h2{font:400 53px/1.03 Cormorant,Georgia,serif;margin:15px 0 26px;letter-spacing:-1px}.letter-inner h2 em{color:#ffafd8}.letter-copy{font:400 20px/1.45 Cormorant,Georgia,serif;color:#d6bccb}.letter-copy p{margin:0 0 16px}.letter-anniversary{color:#ffe0f1;font-style:italic}.signature{font:italic 21px/1.4 Cormorant,Georgia,serif;color:#eab9d4;margin:24px 0}.signature>span{display:block;font-size:29px;margin-top:5px}.signature span span{font:17px var(--mono);margin-left:5px}.letter-end{padding-top:20px;border-top:1px solid #b67a991f;font-size:7px;letter-spacing:2px;color:#aa7a94}body.letter-open{overflow:hidden}#love-message{position:fixed;left:50%;bottom:106px;transform:translate(-50%,10px);opacity:0;transition:opacity .6s,transform .6s;pointer-events:none;text-align:center;font:italic 24px Cormorant,Georgia,serif;color:#ffcee9;text-shadow:0 2px 12px #000,0 0 30px #ff38a5;z-index:7;width:calc(100% - 40px)}#love-message.visible{opacity:1;transform:translate(-50%,0)}
@keyframes breathe{from{opacity:.65;transform:scale(.95)}to{opacity:1;transform:scale(1.1)}}@keyframes letter-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}body.motion-paused .ambient{animation-play-state:paused}
@media(min-width:1600px){.hero{padding-top:70px;padding-bottom:70px}.dedication{margin-top:48px}.letter-trigger{margin-top:35px}}
@media(max-width:900px){.brand-caption{display:none}.side-note{display:none}.hero{padding-left:22px;padding-right:22px}.love-label{display:none}.initials{font-size:clamp(115px,18vw,170px)}.forever{font-size:clamp(29px,6.5vw,60px)}.header{height:80px}.eyebrow{margin-bottom:30px}.footer{font-size:6px;letter-spacing:1px}}
@media(max-width:560px){:root{--edge:14px}.header{padding:0 17px;height:72px}.brand-mark{font-size:22px}.header nav{gap:23px}.nav-link{font-size:8px;letter-spacing:1.4px}.hero{padding:35px 12px 43px}.eyebrow{font-size:7px;letter-spacing:1.8px;gap:11px;margin-bottom:32px}.eyebrow span{width:19px}.initials{font-size:clamp(100px,26vw,142px);gap:15px;-webkit-text-stroke:1.4px #ffd1ed;filter:drop-shadow(0 0 2px #ff4bb7) drop-shadow(0 0 7px #ff129e) drop-shadow(0 0 19px #e90090)}.plus{-webkit-text-stroke:1.2px #ffd1ed}.forever{font-size:clamp(23px,7.2vw,39px);margin-top:17px;letter-spacing:0;-webkit-text-stroke:.85px #ffc3e8}.tagline{font-size:10px;letter-spacing:0;margin-top:20px}.dedication{margin-top:36px}.dedication p{font-size:27px}.dedication-note{font-size:8px;letter-spacing:.9px}.letter-trigger{font-size:9px;padding:15px 16px;margin-top:28px}.footer{margin:0 17px;min-height:70px}.forever-status{max-width:150px;line-height:1.8;gap:7px;font-size:6px;letter-spacing:1px}.status-dot{flex-shrink:0}.motion-button{font-size:6px;gap:5px;letter-spacing:.9px}.love-button{display:none}.letter-inner{padding:44px 27px 27px}.letter-inner h2{font-size:49px}.letter-kicker{font-size:7px;letter-spacing:1.2px}.letter-copy{font-size:19px}}
@media(max-height:760px) and (min-width:561px){.header{height:68px}.hero{padding:24px}.eyebrow{margin-bottom:18px}.initials{font-size:120px}.forever{font-size:54px}.tagline{margin-top:16px;font-size:13px}.dedication{margin-top:22px}.dedication p{font-size:26px}.tiny-heart{margin-bottom:8px;font-size:18px}.letter-trigger{margin-top:19px;padding:12px 16px}.footer{min-height:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient,dialog[open]{animation:none}*,*::before,*::after{transition-duration:.01ms!important}}

.letter-page{min-height:100svh;padding:28px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#4a0c2e55,transparent 70%),#080709}.letter-sheet{display:block;flex:none;max-height:none;margin:0 auto;overflow:visible}.back-home{padding:22px;font-size:9px;letter-spacing:1.5px;color:#eab9d4}.back-home:hover{color:#fff}