
:root{color-scheme:dark;--ink:#e8fbff;--aqua:#97f8eb;--navy:#032d40}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#022c41;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}.ocean{position:fixed;inset:0;background:linear-gradient(180deg,#001c3440,#00253630 60%,#002536ec),url('/ocean.png') center top/cover;z-index:-3;animation:sea 20s ease-in-out infinite alternate}.rays{position:fixed;inset:0;pointer-events:none;background:repeating-conic-gradient(from 160deg at 65% -20%,transparent 0deg 12deg,#b6ffff0c 13deg 17deg,transparent 18deg 30deg);z-index:-2;animation:sway 14s ease-in-out infinite alternate}header{display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;position:absolute;top:0;width:100%;z-index:2}.brand{font-size:12px;letter-spacing:2px;font-weight:bold;text-decoration:none;color:white}.brand span{color:var(--aqua);margin-left:8px}.motion{border:1px solid #ffffff45;border-radius:30px;background:#002e4550;color:white;padding:9px 13px;font-size:11px;cursor:pointer}main{max-width:1080px;margin:auto}.hero{min-height:860px;min-height:100svh;text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:105px 20px 24px;position:relative;text-shadow:0 3px 25px #002a43}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:bold;color:var(--aqua);margin:0 0 24px}.welcome{font-family:Georgia,serif;font-style:italic;font-size:22px;margin:0 0 4px}h1{font:normal clamp(78px,13vw,142px)/.83 Georgia,serif;letter-spacing:-5px;margin:13px 0 23px;position:relative}h1 em{font-size:.6em;color:#b6ffef;font-weight:normal;letter-spacing:-3px}h1 .spark{font-size:40px;position:absolute;right:-30px;bottom:14px;color:var(--aqua)}.birthday{font-size:13px;letter-spacing:.6px;margin:7px 0 24px}.birthday strong{color:var(--aqua)}.date-pill{display:flex;align-items:center;gap:18px;border-top:1px solid #bdf9ff66;border-bottom:1px solid #bdf9ff66;padding:14px 8px;margin-bottom:28px}.date-pill span{font-size:10px;letter-spacing:1px}.date-pill b{font:24px Georgia,serif}.button{display:flex;align-items:center;justify-content:space-between;gap:35px;background:var(--aqua);color:#003e4a;border:0;border-radius:8px;padding:17px 25px;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;text-shadow:none;min-height:55px;box-shadow:0 5px 30px #36ffd525;transition:transform .2s,background .2s}.button:hover{background:#c6fff5;transform:translateY(-2px)}.button:disabled{opacity:.7;cursor:wait}.tiny{font-size:11px;opacity:.8;max-width:320px}.scroll{color:#d2ffff;text-decoration:none;font-size:25px;margin-top:18px}.panel{background:linear-gradient(130deg,#043a4ff0,#032d40ed);border:1px solid #9aedff32;box-shadow:0 25px 90px #001a3355;border-radius:22px;margin:24px auto;padding:44px;max-width:680px;backdrop-filter:blur(15px)}h2{font:normal 44px/1.1 Georgia,serif;letter-spacing:-1px;margin:0 0 20px}.panel>p{color:#cae1e8;font-size:14px}.panel .eyebrow{color:var(--aqua);font-size:10px}.details{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;margin:30px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:24px 0}.details span{display:block;color:var(--aqua);font-size:10px;letter-spacing:2px;margin-bottom:6px}.details strong{font-size:14px}.details p{margin:4px 0;font-size:13px}.host a{color:var(--aqua);margin-left:10px}.rsvp{margin-top:40px}fieldset{border:0;padding:0;margin:25px 0}legend{font-size:13px;margin-bottom:12px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.choices label{cursor:pointer;position:relative}.choices input{position:absolute;opacity:0}.choices span{display:flex;flex-direction:column;padding:17px;border:1px solid #ffffff35;border-radius:12px;font-size:25px;color:var(--aqua);height:100%}.choices b{font-size:14px;color:white;margin-top:5px}.choices small{font-size:10px;color:#b9d4df}.choices input:checked+span{background:#7fffe91c;border:2px solid var(--aqua);padding:16px}.choices input:focus-visible+span{outline:3px solid white;outline-offset:3px}.field{display:block;font-size:13px;margin:19px 0}.field input,.field textarea{display:block;width:100%;font:16px Arial;color:white;background:#001e315e;border:1px solid #9eeaff40;border-radius:8px;padding:15px;margin-top:8px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#a1bec9}.field small{font-size:11px;color:#b9d4df;display:block;margin-top:7px}.rsvp .button{width:100%;margin-top:26px}.privacy{font-size:10px;color:#a8c6d1;margin:18px 0 0}.feedback{font-size:13px;color:#ffdbc1}.feedback:empty{display:none}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--aqua);outline-offset:4px}#success{text-align:center}.success-icon{color:var(--aqua);font-size:66px}h3{font:34px Georgia;margin:5px 0}#saved{font-size:14px}.secondary{background:transparent;color:var(--aqua);border:1px solid #87fce86b;border-radius:8px;padding:14px;width:100%;margin-top:12px;cursor:pointer}#success .tiny{margin:18px auto}footer{text-align:center;padding:40px 20px;font-size:11px;color:#b1d5df}footer span{display:block;font-size:24px;color:var(--aqua);margin-top:12px}.bubble{position:fixed;bottom:-50px;width:var(--size);height:var(--size);border:1px solid #d9ffff5e;border-radius:50%;box-shadow:inset 2px 2px 4px #ffffff30;left:var(--left);animation:rise var(--duration) linear infinite;animation-delay:var(--delay);pointer-events:none;z-index:-1}.paused *,.paused .ocean,.paused .rays{animation-play-state:paused!important}@keyframes rise{to{transform:translate(45px,-115vh);opacity:0}}@keyframes sea{to{transform:scale(1.07) translateY(-1%)}}@keyframes sway{to{transform:rotate(5deg);opacity:.5}}@media(max-width:600px){.hero{min-height:820px;min-height:100svh}.panel{margin:18px 16px;padding:28px 24px;border-radius:18px}h2{font-size:36px}.details{grid-template-columns:1fr;gap:18px}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:100px}.ocean{background-position:50% 0}.choices span{padding:12px}.choices input:checked+span{padding:11px}.choices small{font-size:9px}.rsvp{margin-top:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}[hidden]{display:none!important}

.swimmer{position:fixed;top:22%;right:-300px;width:220px;z-index:-1;pointer-events:none;filter:drop-shadow(0 10px 20px #00364c70);animation:swim 28s linear infinite}@keyframes swim{0%,12%{transform:translateX(0) rotate(-5deg)}85%,100%{transform:translateX(calc(-100vw - 600px)) translateY(140px) rotate(8deg)}}@media(prefers-reduced-motion:reduce){.swimmer{display:none}}
