:root { color-scheme:light; --ink:#271e24; --paper:#fff5df; --sans:'Instrument Sans',Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; --sun-rise:calc(92px + env(safe-area-inset-bottom)); }
body { color:var(--ink); font-family:var(--sans); }
[hidden] { display:none!important; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; border:0; background:transparent; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
button:focus-visible { outline:none; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:7px; }
input:focus-visible { outline:0; border-bottom-width:2px; }
h1,h2,h3,p { margin:0; font-weight:400; }
#convergence { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; opacity:0; }
#experience { position:fixed; inset:0; pointer-events:none; z-index:2; }
.scene { position:absolute; inset:0; padding:max(30px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)); }
.scene button,.scene input { pointer-events:auto; }
#about-open { position:absolute; top:calc(19px + env(safe-area-inset-top)); right:max(24px,env(safe-area-inset-right)); min-height:44px; padding:8px; font-size:10px; letter-spacing:.13em; }
.invitation { position:absolute; width:min(880px,calc(100% - 44px)); top:47%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.invitation h1 { font-family:var(--serif); font-size:clamp(36px,5.4vw,72px); line-height:1.08; letter-spacing:-.022em; white-space:pre-line; }
.invitation .choose { margin-top:50px; font-size:12px; line-height:1.7; }
#months { display:grid; grid-template-columns:repeat(12,1fr); gap:6px; max-width:750px; margin:18px auto 0; }
#months button { min-height:48px; font-size:11px; letter-spacing:.08em; padding:8px 4px; }
#months button:hover { text-decoration:underline; text-underline-offset:7px; }
#month-label { text-align:center; font-size:11px; letter-spacing:.2em; }
#instruction { position:absolute; top:48%; left:0; right:0; text-align:center; font:400 13px/1.5 var(--sans); transition:opacity .6s; }
#instruction.used { opacity:0; }
/* The viewport edge is the horizon. Only the upper half of the disc is visible.
   The hit area extends above it, independently of the drawing and safe area. */
#sun-area { position:fixed; z-index:5; bottom:0; left:50%; width:152px; height:0; transform:translateX(-50%); color:var(--paper); }
#sun { position:absolute; bottom:0; left:50%; transform:translateX(-50%); padding:0; width:133px; height:calc(85.5px + env(safe-area-inset-bottom)); touch-action:manipulation; }
#sun svg { position:absolute; width:152px; height:152px; left:50%; bottom:-76px; transform:translateX(-50%); fill:currentColor; pointer-events:none; transition:bottom .45s cubic-bezier(.22,.65,.3,1); }
#sun-area.menu-open #sun { bottom:calc(var(--sun-rise) - 28.5px); height:66.5px; }
#sun-area.menu-open #sun svg { bottom:-47.5px; }
#sun { transition:bottom .45s cubic-bezier(.22,.65,.3,1); }
#sun:focus-visible { outline:none; }
#sun:focus-visible svg { filter:drop-shadow(0 0 5px var(--paper)); }
#sun:hover circle { opacity:.88; }
#rays line { stroke:currentColor; stroke-width:1.25; stroke-linecap:round; opacity:0; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .4s ease-out,opacity .4s ease-out; }
#rays line.lit { opacity:1; stroke-dashoffset:0; }
#sun-menu { position:absolute; bottom:calc(124px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,7px); width:max-content; max-width:calc(100vw - 40px); text-align:center; color:var(--ink); opacity:0; transition:opacity .22s,transform .35s ease; }
#sun-area.menu-open #sun-menu { opacity:1; transform:translate(-50%,0); }
#sun-menu button { display:block; margin:0 auto; min-height:40px; font-size:13px; padding:8px 0; position:relative; }
#sun-menu button::after { content:''; position:absolute; left:0; right:0; bottom:7px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .2s; }
#sun-menu button:hover::after,#sun-menu button:focus-visible::after { transform:scaleX(1); }
#sun-menu button:focus-visible { text-decoration:none; font-weight:500; }
#sun-menu button:focus-visible::after { height:2px; }
#final-count { position:absolute; bottom:68px; left:0; right:0; text-align:center; font-size:12px; }
#countdown { position:fixed; inset:0; display:grid; place-items:center; font:400 44px/1 var(--sans); color:var(--paper); }
.sending,.confirmation { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:auto; pointer-events:auto; }
.sending { bottom:190px; }
.sending h2 { font:400 clamp(28px,3.4vw,42px)/1.12 var(--serif); letter-spacing:-.015em; margin-bottom:44px; }
.send-options { display:flex; gap:72px; width:min(620px,100%); }
.send-options form { flex:1; min-width:0; text-align:left; }
.send-options h3 { font:400 18px/1.4 var(--sans); margin-bottom:26px; }
.send-options label { display:block; font-size:11px; margin-bottom:9px; }
.send-options input { width:100%; background:transparent; border:0; border-bottom:1px solid currentColor; border-radius:0; color:inherit; padding:10px 0; font-size:16px; }
.send-options input::placeholder { color:inherit; opacity:.55; }
.send-options button,.confirmation button { margin-top:22px; min-height:44px; padding:8px 0; font-size:12px; text-decoration:underline; text-underline-offset:7px; }
.prototype-note { margin-top:24px; font-size:10px; }
.confirmation h2 { font:400 clamp(36px,5vw,60px)/1.12 var(--serif); }
#about { border:0; padding:60px 36px 42px; color:var(--ink); background:transparent; width:min(680px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; }
#about::backdrop { background:#fff5df70; backdrop-filter:blur(16px); }
#about-close { position:absolute; right:28px; top:6px; min-height:44px; padding:8px; font-size:11px; }
#about h2 { font:400 36px/1.1 var(--serif); margin-bottom:22px; }
#about h3 { font:400 12px/1.5 var(--sans); letter-spacing:.15em; margin-bottom:10px; }
#about p { font:400 14px/1.75 var(--sans); }
#about section { margin-top:26px; }
#about .sound-properties { white-space:pre-line; margin-bottom:12px; }
#about .about-end { white-space:pre-line; font:400 28px/1.2 var(--serif); margin-top:38px; }
#error { position:fixed; z-index:10; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#ffefdccc; text-align:center; padding:30px; gap:25px; }
#error button { min-height:48px; text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#debug { z-index:8; max-width:calc(100vw - 24px); }
body[data-state="transition"] .scene { opacity:0; transition:opacity .3s; }
@media(max-width:650px) {
 .scene { padding-top:calc(24px + env(safe-area-inset-top)); }
 .invitation { top:46%; }
 .invitation h1 { font-size:clamp(33px,8.5vw,52px); }
 .invitation .choose { margin-top:36px; font-size:11px; }
 #months { grid-template-columns:repeat(6,1fr); gap:6px; max-width:380px; margin-top:14px; }
 .send-options { flex-direction:column; gap:25px; max-width:310px; }
 .sending { bottom:185px; }
 .sending h2 { margin-bottom:28px; font-size:28px; }
 .send-options h3 { font-size:17px; margin-bottom:12px; }
 .send-options button { margin-top:10px; }
 #about { padding:58px 12px 36px; width:calc(100% - 38px); }
 #about-close { right:0; }
 #about h2 { font-size:32px; }
}
@media(max-height:650px) { .sending { justify-content:flex-start; } .invitation .choose { margin-top:26px; } .invitation h1 { font-size:36px; } }
@media(prefers-reduced-motion:reduce) { #sun,#sun svg,#sun-menu,#rays line,#instruction,#sun-menu button::after { transition:none; } }

/* Delivery feedback occupies only a small line in the existing send scene. */
#send-status{font:inherit;font-size:12px;line-height:1.5;max-width:42em;margin:20px auto 0;text-align:center;}