/* Astronomical patch around the Moon. Coordinates are returned by the API. */
.vs-northern .sky-moon{position:relative;isolation:isolate;overflow:visible}
.vs-northern .sky-moon>.phase-hero{position:relative;z-index:2}
.vs-northern .sky-moon .field-img{display:none}
.vs-live-sky-field{
  position:absolute;
  z-index:1;
  width:min(520px,calc(100vw - 8px));height:390px;
  left:50%;top:46%;
  transform:translate(-50%,-50%);
  border-radius:38% 42% 34% 39%;
  pointer-events:none;
  opacity:.97;
  background:
    radial-gradient(ellipse at 50% 50%,transparent 20%,rgba(108,93,157,.07) 58%,transparent 82%),
    radial-gradient(ellipse at 50% 48%,rgba(33,31,58,.1),transparent 74%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 0 70%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 0 70%,transparent 100%);
}
.vs-sky-lines{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible}
.vs-sky-lines line{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vs-sky-lines line.nearby{stroke:rgba(205,196,235,.34);stroke-width:.56;filter:drop-shadow(0 0 2px rgba(165,151,214,.34))}
.vs-sky-lines line.primary{stroke:rgba(244,232,255,.72);stroke-width:.9;filter:drop-shadow(0 0 3.5px rgba(193,170,235,.64))}
.vs-constellation-star{
  position:absolute;z-index:2;width:1.7px;height:1.7px;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(241,235,252,.7);box-shadow:0 0 4px rgba(199,181,236,.48)
}
.vs-constellation-star.primary{width:2.2px;height:2.2px;background:#fff8e9;box-shadow:0 0 6px rgba(255,240,205,.82),0 0 10px rgba(190,168,235,.45)}
.vs-constellation-label{
  position:absolute;z-index:2;transform:translate(-50%,-50%);color:rgba(229,216,247,.64);
  font:300 7.5px/1 Montserrat,sans-serif;letter-spacing:1.7px;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(5,7,16,.95);white-space:nowrap
}
.vs-constellation-label.primary{color:rgba(255,244,221,.82);font-size:8.5px;letter-spacing:2.2px}
.vs-background-star{
  position:absolute;z-index:0;width:var(--star-size,1px);height:var(--star-size,1px);
  transform:translate(-50%,-50%);border-radius:50%;opacity:var(--star-opacity,.45);
  background:#f7f4ee;box-shadow:0 0 4px rgba(238,232,246,.52)
}
.vs-background-star.warm{background:#f3dfb7;box-shadow:0 0 5px rgba(224,190,132,.48)}
.vs-background-star.cool{background:#dbe8ff;box-shadow:0 0 5px rgba(154,184,240,.46)}
.vs-real-star{
  position:absolute;z-index:2;
  width:var(--size,3px);height:var(--size,3px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff9e8;
  box-shadow:0 0 5px rgba(246,232,192,.95),0 0 12px rgba(169,157,236,.5);
}
.vs-real-star.below{opacity:.2;box-shadow:none}
.vs-real-planet{
  position:absolute;
  display:block;
  transform:translate(-50%,-50%);
  z-index:3;color:#fff7e8;
  font-family:Montserrat,sans-serif;
  font-size:8.5px;letter-spacing:.12px;
  text-shadow:0 1px 7px rgba(0,0,0,.9);
  white-space:nowrap;
}
.vs-real-planet i{
  position:relative;width:9px;height:9px;flex:0 0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fffef4 0 13%,#ead49d 28%,#a88155 72%,#55443b 100%);
  box-shadow:0 0 8px rgba(241,209,143,.9),0 0 18px rgba(199,169,234,.48);
}
.vs-real-planet i::after{content:"";position:absolute;inset:1px 2px 4px 1px;border-radius:50%;background:rgba(255,255,255,.24);filter:blur(.5px)}
.vs-real-planet.below,.vs-real-planet.daylight{opacity:.46}
.vs-real-planet.visible{filter:drop-shadow(0 0 7px rgba(239,219,176,.34))}
.vs-real-planet.planet-mars i{background:radial-gradient(circle at 34% 28%,#ffe5ca,#c76f51 48%,#703a35 100%)}
.vs-real-planet.planet-jupiter i{background:linear-gradient(170deg,#efe2c5 15%,#a77c61 32%,#e8d1ad 48%,#815f52 62%,#d9bd91 80%)}
.vs-real-planet.planet-saturn i::before{content:"";position:absolute;left:-4px;top:3px;width:15px;height:4px;border:1px solid rgba(232,214,173,.72);border-radius:50%;transform:rotate(-18deg)}
.vs-real-planet.planet-venus i{background:radial-gradient(circle at 34% 28%,#fff,#f6e6bd 34%,#cba66d 100%)}
.vs-real-planet.planet-mercury i{background:radial-gradient(circle at 34% 28%,#ece8db,#9a9184 62%,#5c5753 100%)}
.vs-sky-caption{
  width:calc(100% - 30px);max-width:390px;box-sizing:border-box;
  margin:8px auto 10px;
  padding:10px 14px 11px;
  text-align:center;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(66,59,90,.34),rgba(15,16,29,.28));
  box-shadow:inset 0 1px rgba(255,250,240,.06),0 12px 25px rgba(0,0,0,.15);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.vs-sky-caption span,.vs-sky-caption strong,.vs-sky-caption small{display:block}
.vs-sky-kicker{color:rgba(232,218,190,.78);font:300 .52rem/1.25 Montserrat,sans-serif;letter-spacing:1.45px;text-transform:uppercase}
.vs-sky-caption strong{margin-top:4px;color:#fff9ef;font-family:Cormorant,serif;font-size:1.05rem;font-weight:500}
.vs-sky-caption small{margin:4px auto 0;max-width:274px;font-family:Montserrat,sans-serif}
.vs-sky-constellations{color:rgba(230,222,235,.78);font-size:.63rem;font-weight:300;line-height:1.45}
.vs-sky-detail{color:rgba(226,216,202,.82);font-size:.66rem;font-weight:300;line-height:1.45}
.vs-sky-explanation{color:rgba(211,204,217,.72);font-size:.59rem;font-weight:300;line-height:1.52;letter-spacing:.08px}
@media(max-width:360px){.vs-live-sky-field{width:calc(100vw - 4px);height:350px}.vs-real-planet{font-size:7.7px}.vs-sky-caption{max-width:282px}}