.wishing-sky-page{overflow:auto;height:auto;min-height:100dvh;color:#e4dfd0;background:radial-gradient(ellipse at 50% 36%,#1d2b43 0%,#101b30 45%,#090f20 100%);color-scheme:dark}
.wishing-sky{width:min(940px,100%);margin:auto;padding:44px 28px 24px;text-align:center;user-select:text}
.sky-heading h1{font-size:clamp(25px,3vw,36px);letter-spacing:.12em;margin:0 0 12px}
.sky-heading>p{font-size:20px;font-style:italic;margin:0 0 16px}
.sky-heading .sky-disclosure{font-size:13px;line-height:1.7;font-style:normal;color:#aeb9c7;margin:0}
.constellation{height:clamp(240px,36vh,380px);position:relative;margin:20px 0 0;isolation:isolate}
.wish-star{position:absolute;width:48px;height:48px;padding:0;transform:translate(-50%,-50%);border-radius:50%;z-index:1}
.wish-star:before{content:'';position:absolute;inset:20px;background:#f3e9ce;border-radius:50%;box-shadow:0 0 12px 3px #d4deff55,0 0 30px 8px #b8cfff16;animation:star-breathe 5s ease-in-out infinite;animation-delay:var(--phase)}
.wish-star:after{content:'';position:absolute;inset:12px;border:1px solid #dce5f750;border-radius:50%;opacity:0;transition:opacity .5s,transform .5s;transform:scale(.7)}
.wish-star:hover:after,.wish-star:focus-visible:after,.wish-star[aria-pressed=true]:after{opacity:1;transform:scale(1)}
.wish-star:focus-visible{outline:1px solid #ead6a0;outline-offset:1px}
.personal-star:before{background:#ffe077;box-shadow:0 0 14px 5px #ffd04f65,0 0 36px 12px #ffce4920}
.sky-speck{position:absolute;width:2px;height:2px;background:#d5dff4;border-radius:50%;pointer-events:none}
@keyframes star-breathe{0%,100%{opacity:.65}50%{opacity:1}}
.wish-reading{min-height:128px;max-width:800px;margin:0 auto;padding:8px 0 20px;display:flex;flex-direction:column;justify-content:center}
#wish-kind{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#b8c3d1;margin:0 0 14px}
#wish-text{font-size:clamp(20px,2.3vw,26px);font-style:italic;line-height:1.5;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.wish-form{max-width:490px;margin:10px auto 0;text-align:left}
.wish-form label{display:block;font-size:18px;margin-bottom:12px}
.wish-form textarea{display:block;resize:vertical;min-height:76px;max-height:220px;width:100%;border:1px solid #a5b3c640;border-radius:3px;padding:13px 15px;background:#090f2033;color:#f1e8d5;font:17px/1.5 Baskerville,Georgia,serif}
.wish-form textarea::placeholder{color:#9ca9bb}.wish-form textarea:focus{outline:1px solid #ddc690;outline-offset:3px}
.wish-form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.wish-form-actions span{color:#aeb9c7;font-size:12px}.wish-form-actions .begin{margin:0;font-size:9px;letter-spacing:.12em}
.wish-added{min-height:145px;padding:25px 0 0}.wish-added p{font-style:italic;font-size:19px;margin:0}.wish-added .begin{margin-top:6px}
.sky-footer{margin-top:25px}.sky-footer a{display:inline-block;color:#c8cfda;text-decoration:none;margin:0}.sky-footer p{color:#9ca9bb;font-size:12px;margin:8px 0}
.wishing-sky button:hover,.sky-footer a:hover{color:#ffe3a5}
@media(max-width:600px){.wishing-sky{padding:32px 22px 24px}.sky-heading>p{font-size:18px}.sky-heading .sky-disclosure{font-size:12px}.constellation{height:250px;margin-top:10px}.wish-reading{min-height:140px}.wish-form-actions{flex-direction:column;align-items:flex-start;gap:0}.wish-form-actions span{margin-top:8px}.wish-form-actions .begin{align-self:flex-end}.sky-footer{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.wish-star:before{animation:none}}

/* Let the sky carry the invitation; keep supporting copy at the edge. */
.sky-heading h1{font-size:clamp(23px,3vw,30px);margin-bottom:0}
.constellation{margin-top:30px}
#wish-kind:empty{visibility:hidden}
.wish-form-actions{justify-content:flex-end}
.wish-added{min-height:145px;display:flex;align-items:center;justify-content:center;padding:0}
.wish-added[hidden]{display:none}
#sky-note{font-size:11px;line-height:1.6;max-width:360px;margin:12px auto 0;color:#95a2b5}
.personal-star.arriving{pointer-events:none;animation:wish-ascent 2.8s cubic-bezier(.22,.65,.25,1) both;z-index:3}
.personal-star.arriving:before{animation:wish-kindle 2.8s ease-out both}
.personal-star.arriving:after{animation:wish-halo 2.8s ease-out both;border-color:#ffe29690}
@keyframes wish-ascent{
  0%{transform:translate(calc(-50% + var(--release-x)),calc(-50% + var(--release-y))) scale(.35);opacity:0}
  12%{opacity:1}
  72%{transform:translate(-50%,-50%) scale(1.2);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes wish-kindle{
  0%{opacity:0;box-shadow:0 0 5px 2px #ffd04f65}
  22%{opacity:1;box-shadow:0 0 20px 8px #ffd04f80,0 18px 25px 4px #ffce4930}
  72%{opacity:1;box-shadow:0 0 26px 12px #ffd04f70,0 0 60px 20px #ffce4925}
  100%{opacity:1;box-shadow:0 0 14px 5px #ffd04f65,0 0 36px 12px #ffce4920}
}
@keyframes wish-halo{
  0%,60%{opacity:0;transform:scale(.3)}
  75%{opacity:.7}
  100%{opacity:0;transform:scale(3.5)}
}
@media(prefers-reduced-motion:reduce){
  .personal-star.arriving{animation:none;pointer-events:auto}
  .personal-star.arriving:before,.personal-star.arriving:after{animation:none}
}

/* The journey continues in the same document, over the still-living night. */
.sky-continuation{position:fixed;inset:0;z-index:20;overflow:auto;overscroll-behavior:contain;color:#e4dfd0;color-scheme:dark;background:radial-gradient(ellipse at 50% 36%,#1d2b43 0%,#101b30 45%,#090f20 100%);opacity:0;transition:opacity 1.8s ease;}
.sky-continuation.arrived{opacity:1}
.sky-continuation h1:focus{outline:none}
.sky-sound{position:absolute;top:12px;right:20px;min-height:44px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#b8c3d1}
.sky-continuation .wishing-sky{padding-top:65px}
@media(prefers-reduced-motion:reduce){.sky-continuation{transition-duration:.15s}}

.sky-continuation .wishing-sky,.sky-continuation .sky-sound{opacity:0;transition:opacity 1.3s ease .8s}
.sky-continuation.arrived .wishing-sky,.sky-continuation.arrived .sky-sound{opacity:1}
@media(prefers-reduced-motion:reduce){.sky-continuation .wishing-sky,.sky-continuation .sky-sound{transition-delay:0s}}

/* A small echo of the lantern's collection ring. */
.wish-star .selection-ripple{position:absolute;inset:18px;border:1px solid #f6dfab;border-radius:50%;pointer-events:none;animation:selection-ripple 1.25s cubic-bezier(.18,.6,.3,1) both}
@keyframes selection-ripple{0%{opacity:0;transform:scale(.65)}12%{opacity:.38}100%{opacity:0;transform:scale(4.8)}}
.wish-star:hover:after,.wish-star:focus-visible:after,.wish-star[aria-pressed=true]:after{opacity:.35}
@media(prefers-reduced-motion:reduce){.wish-star .selection-ripple{display:none;animation:none}}

/* Reserve the reading space so changing wishes never moves the form. */
#wish-kind{min-height:12px;flex:none}
#wish-text{height:3em;flex:none;display:flex;align-items:safe center;justify-content:center;overflow:auto;scrollbar-width:thin}
#sky-note{flex:none}
@media(max-width:600px){#wish-text{height:4.5em}}

.wishing-sky-page .wishing-sky{padding-top:65px}

.sky-sound{font-size:11px;top:max(12px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right))}
.wish-form-actions .begin{font-size:11px}
#sky-note{font-size:12px}
.wishing-sky{padding-bottom:max(24px,env(safe-area-inset-bottom))}
