.constellation-plate { position:relative; width:100%; aspect-ratio:1312 / 1875; background:#f8f3d4; overflow:hidden; }
.constellation-plate canvas,.constellation-plate .constellation-fallback { display:block; width:100%; height:100%; }
.constellation-plate [hidden] { display:none; }
.constellation-lights { position:absolute; inset:0; pointer-events:none; }
.constellation-light { --light:244,218,115; position:absolute; left:var(--x); top:var(--y); width:10%; min-width:48px; min-height:48px; aspect-ratio:1; transform:translate(-50%,-50%); border:0; padding:0; background:none; border-radius:50%; pointer-events:auto; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.constellation-light.cool { --light:205,231,221; }
.constellation-halo { position:absolute; inset:-32%; border-radius:50%; background:radial-gradient(ellipse,rgba(var(--light),.72),rgba(var(--light),.48) 18%,rgba(var(--light),.25) 36%,rgba(var(--light),.085) 55%,transparent 73%); mix-blend-mode:screen; pointer-events:none; opacity:.8; animation:constellation-glow 4.8s ease-in-out infinite; animation-delay:var(--delay); }
.constellation-light::after { content:''; position:absolute; inset:-8%; border:1px solid rgba(var(--light),.7); border-radius:50%; box-shadow:0 0 25px 7px rgba(var(--light),.17); opacity:0; transition:opacity .35s; }
.constellation-light[aria-pressed=true]::after { opacity:1; }
.constellation-light[aria-pressed=true] .constellation-halo { filter:brightness(1.3); }
.constellation-label { position:absolute; left:calc(50% + 20px); top:50%; transform:translateY(-50%); color:#faf4cf; font:italic 13px/1.4 Georgia,serif; white-space:nowrap; text-shadow:0 1px 4px #242c18,0 0 10px #242c18; opacity:0; transition:opacity .25s; pointer-events:none; }
.constellation-light.label-left .constellation-label { left:auto; right:calc(50% + 20px); }
.constellation-light:is(:hover,:focus-visible,[aria-pressed=true]) { z-index:2; }
.constellation-light:is(:hover,:focus-visible,[aria-pressed=true]) .constellation-label { opacity:1; }
.constellation-light:focus-visible { outline:1px solid #f7edbb; outline-offset:4px; }
.constellation-imprint { position:absolute; bottom:2.6%; left:9.5%; right:8.6%; display:flex; justify-content:space-between; color:#a79654; opacity:.6; font:clamp(4px,.6vw,7px)/1 Georgia,serif; pointer-events:none; }
.constellation-error { font:13px/1.6 var(--mono); color:var(--muted); margin-top:12px; }
.constellation-error[hidden] { display:none; }
.light-still .constellation-halo { animation:none; }
.offscreen .constellation-halo { animation-play-state:paused; }
@keyframes constellation-glow { 0%,100% { opacity:.28; transform:scale(.84); } 50% { opacity:1; transform:scale(1.22); } }
@media(max-width:480px) { .constellation-label { font-size:12px; left:calc(50% + 12px); } .constellation-light.label-left .constellation-label { right:calc(50% + 12px); } }
@media(prefers-reduced-motion:reduce) { .constellation-halo { animation:none; } .constellation-label,.constellation-light::after { transition:none; } }
@media(forced-colors:active) { .constellation-light { outline:1px solid ButtonText; } .constellation-label { color:CanvasText; background:Canvas; text-shadow:none; } }