/* Illustrative depth only. These layers do not encode radius, location or temperature. */
.sky--depth{--atmosphere-colour:239,203,160;background:#000000}
.sky--depth .atmosphere-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.sky--depth .sky-grain{opacity:.2}.sky--depth .sky-orbit{opacity:.24}
.sky--depth .stars{position:relative;z-index:1}
.sky--depth .sky-caption{z-index:2}
.sky--depth .star-visual{--radiance:.5;--parallax-x:0px;--parallax-y:0px;transform:translate3d(var(--parallax-x),var(--parallax-y),0);isolation:isolate}
.sky--depth .star-halo{background:radial-gradient(ellipse 90px 86px at 50% 52%,rgba(var(--star-color),.32),rgba(var(--star-color),.12) 28%,rgba(var(--star-color),.035) 53%,transparent 80%);opacity:calc(.17 + var(--radiance)*.83);transform:none;transition:opacity .1s linear}
.sky--depth .star-halo:after{background:radial-gradient(ellipse 150px 125px at 50% 52%,rgba(var(--star-color),.065),rgba(var(--star-color),.02) 45%,transparent 78%)}
.sky--depth .star-core{width:25px;height:25px;z-index:3;overflow:hidden;isolation:isolate;background:rgb(var(--star-color));opacity:calc(.58 + var(--radiance)*.42);box-shadow:0 0 5px 1px rgba(var(--star-color),.66),0 0 14px 3px rgba(var(--star-color),.4),0 0 32px 8px rgba(var(--star-color),.15),0 0 64px 10px rgba(var(--star-color),.05);transition:opacity .1s linear}
.sky--depth .star-core:after{display:none}
.sky--depth .stellar-surface{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 39% 35%,#fff9e4 0%,#fff6dd 17%,rgba(var(--star-color),.98) 45%,rgba(var(--star-color),.74) 66%,rgba(var(--star-color),.32) 88%,#3b3d4f 100%);box-shadow:inset -2px -2px 4px #171c343d,inset 1px 1px 4px #fffbe542}
.sky--depth .stellar-surface:after{content:'';position:absolute;inset:0;opacity:.21;border-radius:inherit;background:radial-gradient(ellipse 4px 2px at 24% 37%,#fff8d859,transparent 100%),radial-gradient(ellipse 3px 4px at 53% 27%,#463d3547,transparent 100%),radial-gradient(ellipse 2px 3px at 64% 61%,#fff3bd80,transparent 100%),radial-gradient(ellipse 3px 2px at 34% 65%,#483b314d,transparent 100%),radial-gradient(ellipse 2px 2px at 75% 35%,#fff6d980,transparent 100%),radial-gradient(ellipse 3px 2px at 45% 46%,#fffce54d,transparent 100%)}
.sky--depth .stellar-limb{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 48% 46%,transparent 37%,#080d1712 65%,#0509154d 92%,#05091580 100%);box-shadow:inset 0 0 1px #fff1c287;mix-blend-mode:multiply}
.sky--depth .stellar-inner-corona{position:absolute;left:50%;top:52%;width:39px;height:39px;transform:translate(-50%,-50%);border-radius:50%;z-index:2;opacity:calc(.18 + var(--radiance)*.42);background:radial-gradient(circle,transparent 31%,rgba(var(--star-color),.2) 37%,rgba(var(--star-color),.07) 50%,transparent 72%);pointer-events:none}
.sky--depth .stellar-diffraction{position:absolute;left:50%;top:52%;width:100px;height:1px;transform:translate(-50%,-50%) rotate(-23deg);z-index:1;opacity:calc(.08 + var(--radiance)*.18);background:linear-gradient(90deg,transparent,rgba(var(--star-color),.12) 22%,rgba(var(--star-color),.7) 50%,rgba(var(--star-color),.12) 78%,transparent);pointer-events:none}
.sky--depth .stellar-diffraction:after{content:'';position:absolute;left:50%;top:50%;width:72px;height:1px;transform:translate(-50%,-50%) rotate(90deg);background:inherit;opacity:.7}
.sky--depth .stellar-orbital-plane{position:absolute;left:50%;top:52%;width:118px;height:118px;transform:translate(-50%,-50%) rotate(-23deg) scaleY(.54);border-radius:50%;border:1px solid rgba(var(--star-color),.13);opacity:0;pointer-events:none;transition:opacity .55s ease}
.sky--depth .star-choice[aria-pressed=true] .stellar-orbital-plane{opacity:.48}
.sky--depth .star-ring{width:99px;height:99px;border-color:rgba(var(--star-color),.18);opacity:0}
.sky--depth .star-choice[aria-pressed=true] .star-ring{opacity:.8}
.sky--depth .star-ring:after{width:3px;height:3px;top:-2px;background:rgba(var(--star-color),.85)}
.sky--depth .star-choice:hover .star-ring{opacity:.75}
.sky--depth .star-choice[aria-pressed=true] .star-name{color:#fff8ed}
.sky--depth .star-choice[data-observation-gap=true] .stellar-diffraction{opacity:.03}
.sky--depth .star-choice[data-observation-gap=true] .stellar-surface{filter:saturate(.45)}
.sky--depth[data-reduced-atmosphere=true] .star-visual{transform:none}
@media(max-width:760px){.sky--depth .star-core{width:21px;height:21px}.sky--depth .star-halo{background:radial-gradient(ellipse 73px 72px at 50% 52%,rgba(var(--star-color),.29),rgba(var(--star-color),.09) 32%,rgba(var(--star-color),.02) 58%,transparent 80%)}.sky--depth .star-halo:after{background:radial-gradient(ellipse 110px 100px at 50% 52%,rgba(var(--star-color),.04),transparent 76%)}.sky--depth .star-ring{width:83px;height:83px}.sky--depth .stellar-orbital-plane{width:95px;height:95px}.sky--depth .stellar-diffraction{width:76px}.sky--depth .stellar-diffraction:after{width:55px}}
@media(max-width:390px){.sky--depth .star-core{width:18px;height:18px}.sky--depth .star-ring{width:72px;height:72px}.sky--depth .stellar-orbital-plane{width:83px;height:83px}.sky--depth .stellar-inner-corona{width:32px;height:32px}.sky--depth .stellar-diffraction{width:65px}}
@media(prefers-reduced-motion:reduce){.sky--depth .star-visual{transform:none!important}.sky--depth .star-ring,.sky--depth .stellar-orbital-plane,.sky--depth .star-core,.sky--depth .star-halo{transition:none!important}}

/* The nine-light field shares fixed optical layers at a compact spacing. */
.sky--depth:has(.star-choice:nth-child(9)) .star-halo{background:radial-gradient(ellipse 56px 52px at 50% 52%,rgba(var(--star-color),.29),rgba(var(--star-color),.10) 28%,rgba(var(--star-color),.025) 54%,transparent 80%)}
.sky--depth:has(.star-choice:nth-child(9)) .star-halo:after{background:radial-gradient(ellipse 82px 64px at 50% 52%,rgba(var(--star-color),.05),transparent 78%)}
.sky--depth:has(.star-choice:nth-child(9)) .star-ring{width:58px;height:58px}
.sky--depth:has(.star-choice:nth-child(9)) .stellar-orbital-plane{width:72px;height:72px}
.sky--depth:has(.star-choice:nth-child(9)) .stellar-diffraction{width:72px}
.sky--depth:has(.star-choice:nth-child(9)) .stellar-diffraction:after{width:50px}
@media(max-width:760px){.sky--depth:has(.star-choice:nth-child(9)) .star-ring{width:62px;height:62px}.sky--depth:has(.star-choice:nth-child(9)) .stellar-orbital-plane{width:76px;height:76px}}
