@font-face{font-family:Cormorant;src:url('/fonts/cormorant-regular.woff') format('woff');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url('/fonts/cormorant-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope.woff') format('woff');font-weight:400 500;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ink:#090b17;--ivory:#f4eee5;--gold:#d7b888;--muted:#a5a3b2;--serif:Cormorant,'Times New Roman',serif;--sans:Manrope,Arial,sans-serif}
*{box-sizing:border-box}
html{min-width:280px;background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ivory);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;-webkit-tap-highlight-color:transparent}
::selection{background:#d7b88840;color:var(--ivory)}
.atmosphere,#panorama,#sky,.sky-fallback,.horizon-clip,.reading-shade{position:fixed;inset:0;pointer-events:none}
.atmosphere{background:radial-gradient(ellipse at 50% 45%,#11121e 0%,#04060d 100%);z-index:0}
#panorama{width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.5s}
body.panorama-ready #panorama{opacity:1}
#sky{width:100%;height:100%;z-index:1}
.reading-shade{z-index:1;background:radial-gradient(ellipse at 50% 44%,#060914c4 0%,#0609147a 32%,#0609141a 72%),linear-gradient(0deg,#050812bb,transparent 22%,transparent 82%,#05081266);transition:opacity .5s}
body.sky-exploring .reading-shade{opacity:.8}
.sky-fallback{z-index:0;background-image:radial-gradient(1px 1px at 12% 22%,#fff9,transparent),radial-gradient(1px 1px at 86% 17%,#fff8,transparent),radial-gradient(1px 1px at 30% 69%,#fff8,transparent),radial-gradient(1px 1px at 78% 80%,#fff8,transparent),radial-gradient(1px 1px at 90% 47%,#fff6,transparent)}
.horizon-clip{overflow:hidden;z-index:1}
.horizon{position:absolute;inset:auto -30vw -77vw;height:100vw;border:1px solid #d7b88812;border-radius:50%;box-shadow:0 -4px 100px #a58ec908}
.page{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;padding:0 48px}
.masthead{height:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:11px;color:#c8c3c8;font-size:9px;text-transform:uppercase;letter-spacing:.29em}
.brand-star{color:var(--gold);font-size:23px;line-height:1}
main{width:100%;max-width:1080px;margin:auto;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 0 28px}
main{isolation:isolate}
.main-placeholder{width:100%;flex:1}
main[hidden],.main-placeholder[hidden],body.sky-exploring main{display:none!important}
main>div,main>section{flex-shrink:0}
.closing-line{white-space:nowrap}
.little-panda{display:inline-block;font-family:Arial,sans-serif;font-style:normal;font-size:.82em;line-height:1;margin-left:2px;vertical-align:baseline}
body.love-exploring .reading-shade{opacity:.12}
body.love-exploring .masthead{opacity:.5}
.masthead{transition:opacity .8s ease}
.eyebrow{margin:0 0 28px;color:var(--gold);text-transform:uppercase;font-size:9px;letter-spacing:.3em;line-height:1.8}
h1{display:flex;align-items:baseline;justify-content:center;gap:24px;margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(82px,9.2vw,134px);line-height:1.05;letter-spacing:-.045em}
.name{display:block}
.yasmina{font-style:italic}
.ampersand{font-size:.43em;font-style:italic;color:var(--gold);font-weight:400;letter-spacing:-.04em;align-self:center;padding-top:12px}
.invitation-slot{width:100%;margin-top:23px}
.invitation{font-family:var(--serif);font-size:23px;line-height:1.4;letter-spacing:.005em;color:#c0b9c8;margin:0}
.countdown{margin-top:46px}
.countdown-caption{display:flex;align-items:center;justify-content:center;gap:14px;font-size:8px;letter-spacing:.25em;text-transform:uppercase;color:#c8b399}
.little-line{width:28px;height:1px;background:linear-gradient(90deg,transparent,#b99e6e70)}
.little-line:last-child{transform:rotate(180deg)}
.seconds{font-family:var(--serif);font-size:clamp(78px,7vw,104px);line-height:1.16;letter-spacing:.015em;min-width:6ch;font-weight:400;font-variant-numeric:lining-nums tabular-nums;color:#f2dfbc;text-shadow:0 0 35px #ddb87e12;margin-top:4px}
.seconds-label{font-size:10px;letter-spacing:.07em;color:#c1bac9;margin:0;line-height:1.7}
.moment{color:#cbc4ce;margin:27px 0 0;font-size:11px;letter-spacing:.045em;line-height:1.7}
.moment time>span{color:var(--gold);padding:0 8px}
.timezone{display:block;color:#9591a4;font-size:9px;letter-spacing:.07em;margin-top:2px}
.wish{width:100%;margin-top:29px;display:flex;align-items:center;flex-direction:column}
.spark-button{width:56px;height:56px;border:0;background:transparent;color:#e8c995;position:relative;display:grid;place-items:center;cursor:pointer;outline-offset:5px;border-radius:50%;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:color .35s,transform .35s}
.spark-button svg{filter:drop-shadow(0 0 8px #efc58060);transition:transform .6s}
.spark-ring{position:absolute;inset:1px;border:1px solid #c4a77930;border-radius:50%;transition:transform .6s,border-color .6s}
.spark-button::before{content:'';position:absolute;inset:-10px;background:radial-gradient(circle,#d6ad6c19,transparent 65%);border-radius:50%}
.spark-button:hover,.spark-button:focus-visible{color:#fff2d1;transform:scale(1.07)}
.spark-button:focus-visible{outline:1px solid var(--gold)}
.spark-button:hover .spark-ring{border-color:#d4b98b70;transform:rotate(45deg) scale(1.1)}
.spark-button.lit svg{transform:rotate(90deg) scale(1.2)}
.spark-button.lit .spark-ring{transform:scale(1.35);border-color:#d9b47800}
.wish-message{width:340px;max-width:100%;min-height:2.8em;margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:#bcb3c3;transition:opacity .35s,color .35s}
.wish-message.revealed{color:#e2c69f}
footer{width:100%;max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px;flex-shrink:0;padding:15px 0 24px;color:#908a9e}
footer p{font-family:var(--serif);font-size:16px;font-style:italic;line-height:1.5;margin:0}
.footer-tools{display:flex;align-items:center;gap:28px;flex-shrink:0}
.sky-control{position:relative;text-align:center}
.motion-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 13px;color:#c4bba9;background:#080c1466;border:1px solid #d7b88836;border-radius:24px;cursor:pointer;font-size:9px;letter-spacing:.025em;transition:background .3s,border-color .3s;color-scheme:dark}
.motion-button:hover,.motion-button[aria-pressed="true"]{background:#d7b88810;border-color:#d7b88880;color:#f0d8ad}
.motion-button:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.motion-button:disabled{cursor:wait}
.motion-status{position:absolute;left:50%;top:100%;width:185px;transform:translateX(-50%);font-family:var(--sans);font-size:8px;font-style:normal;line-height:1.3;margin:4px 0 0;color:#b8acba;pointer-events:none}
body.sky-exploring{touch-action:pan-y pinch-zoom;cursor:grab}
body.sky-dragging{cursor:grabbing;user-select:none}
body.sky-exploring button{cursor:pointer}
.footer-break{display:none}
.signature{font-family:var(--serif);font-size:17px;color:#c5b193;letter-spacing:.12em;white-space:nowrap}
.signature span{font-size:12px;padding:0 6px;color:#7a6e73}
.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-script{font-size:13px;max-width:290px;line-height:1.6;color:var(--gold)}
body.arrived .seconds{font-size:clamp(58px,6.8vw,96px);letter-spacing:-.025em;min-width:0;font-style:italic;line-height:1.4}
@media(min-width:1500px){main{padding-top:45px}.countdown{margin-top:56px}.wish{margin-top:36px}}
@media(max-width:600px){
 .page{padding:0 24px;min-height:100svh}
 .masthead{height:73px;font-size:8px;letter-spacing:.25em;gap:9px;padding-top:env(safe-area-inset-top,0px)}
 .brand-star{font-size:21px}
 main{padding:26px 0 24px;max-width:390px}
 .eyebrow{font-size:7px;letter-spacing:.24em;margin-bottom:26px;line-height:1.8}
 h1{flex-direction:column;align-items:center;gap:0;font-size:clamp(72px,20.8vw,91px);line-height:.91;letter-spacing:-.045em}
 .ampersand{font-size:30px;line-height:1;padding:8px 0 7px;letter-spacing:-.02em}
 .raul{margin-left:-.03em}
 .invitation-slot{margin-top:25px}
 .invitation{font-size:20px;line-height:1.35}
 .countdown{margin-top:34px;width:100%}
 .countdown-caption{font-size:7px;letter-spacing:.24em;gap:12px}
 .little-line{width:24px}
 .seconds{font-size:clamp(69px,20vw,87px);margin-top:6px;line-height:1.16;letter-spacing:.005em;min-width:0}
 .seconds-label{font-size:9px;letter-spacing:.06em}
 .moment{font-size:10px;margin-top:22px}
 .timezone{font-size:8px;margin-top:3px}
 .wish{margin-top:24px}
 .spark-button{height:49px;width:49px}
 .spark-button svg{width:23px;height:23px}
 .wish-message{font-size:15px;margin-top:10px}
 footer{min-height:83px;padding:16px 2px calc(19px + env(safe-area-inset-bottom,0px));gap:15px}
 footer p{font-size:14px;line-height:1.45}
 .footer-break{display:block}
 .signature{font-size:15px}
 .footer-tools{gap:0}
 .footer-tools .signature{display:none}
 .motion-button{font-size:8px;padding:0 10px;gap:5px}
 .motion-status{font-size:7px;left:auto;right:0;width:150px;transform:none;margin-top:3px;text-align:right}
 footer>p{max-width:calc(100% - 115px)}
 .horizon{inset:auto -70vw -96vw;height:125vw}
 body.arrived .seconds{font-size:56px;line-height:1.5}
}
@media(max-height:740px) and (max-width:600px){
 .masthead{height:59px}main{padding:10px 0 4px}.eyebrow{margin-bottom:14px}h1{font-size:70px}.ampersand{padding:6px 0;font-size:25px}.invitation-slot{margin-top:20px}.invitation{font-size:18px}.countdown{margin-top:25px}.seconds{font-size:70px}.moment{margin-top:16px}.wish{margin-top:14px}.wish-message{margin-top:7px}footer{min-height:65px;padding-top:8px;padding-bottom:calc(15px + env(safe-area-inset-bottom,0px))}footer p{font-size:13px}
}
@media(max-width:340px){.page{padding:0 18px}.eyebrow{font-size:6.5px;letter-spacing:.2em}h1{font-size:69px}.seconds{font-size:65px}.wish-message{font-size:14px}}
@media(prefers-reduced-motion:no-preference){
.introduction{animation:reveal 1.5s .05s backwards}
.invitation{animation:reveal 1.5s .05s backwards}
.countdown{animation:reveal 1.5s .2s backwards}
.wish{animation:reveal 1.5s .4s backwards}
 @keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}