.solar-controls {
  position: fixed;
  z-index: 19;
  top: 98px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 20px minmax(64px, 1fr) 65px 43px;
  align-items: center;
  gap: 10px;
  width: min(338px, calc(100% - 48px));
  min-height: 40px;
  padding: 4px 5px 4px 12px;
  box-sizing: border-box;
  border: 1px solid #ffffff26;
  border-top-color: #ffffff50;
  border-radius: 999px;
  background: linear-gradient(110deg, #f7e7d214, #ffffff05 52%, #ffc89e12), #131e2a69;
  color: #fff3e6;
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 5px 22px #050b171c, inset 0 1px 0 #ffffff14;
  font-family: inherit;
  font-size: 11px;
}
.solar-controls__icon {
  display: block;
  font-size: 19px;
  line-height: 1;
  text-align: center;
  color: #ffe0b8;
  transition: transform .25s ease, text-shadow .25s ease;
}
.solar-controls:hover .solar-controls__icon {
  transform: rotate(-12deg);
  text-shadow: 0 0 12px #ffd59a88;
}
.solar-controls__range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: pan-y;
}
.solar-controls__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(to right, #ffe0b8 var(--solar-progress, 50%), #ffffff38 var(--solar-progress, 50%));
}
.solar-controls__range::-moz-range-track { height: 3px; border-radius: 10px; background: #ffffff38; }
.solar-controls__range::-moz-range-progress { height: 3px; border-radius: 10px; background: #ffe0b8; }
.solar-controls__range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  margin-top: -4.5px;
  border: 1px solid #fff9;
  border-radius: 50%;
  background: #fff2dd;
  box-shadow: 0 1px 5px #0005;
}
.solar-controls__range::-moz-range-thumb {
  height: 11px;
  width: 11px;
  border: 1px solid #fff9;
  border-radius: 50%;
  background: #fff2dd;
  box-shadow: 0 1px 5px #0005;
}
.solar-controls__range:focus-visible { outline: 2px solid #ffe2c8; outline-offset: 3px; border-radius: 10px; }
.solar-controls__time { white-space: nowrap; font: inherit; font-variant-numeric: tabular-nums; text-align: center; color: #fff4e9; }
.solar-controls__live {
  min-height: 30px;
  padding: 5px 8px;
  margin: 0;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  background: #ffffff05;
  color: #fff0df;
  font: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.solar-controls__live[aria-pressed="true"] { background: #ffe0b824; border-color: #ffe0b835; }
.solar-controls__live:hover { background: #ffe0b834; }
.solar-controls__live:focus-visible { outline: 2px solid #ffe2c8; outline-offset: 3px; }
@media (max-width: 700px) {
  .solar-controls { top: 82px; width: min(320px, calc(100% - 48px)); }
}
@media (prefers-reduced-motion: reduce) {
  .solar-controls__icon, .solar-controls__live { transition: none; }
  .solar-controls:hover .solar-controls__icon { transform: none; }
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .solar-controls { background: #263342ed; }
}

/* A small horizon and orbit; never blocks the page or claims fake progress. */
.sky-loading {
  position: fixed;
  z-index: 18;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 10px;
  border: 1px solid #ffe5c633;
  border-radius: 999px;
  background: #17233199;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff0da;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
  animation: sky-loading-in .4s ease;
  transition: opacity .4s ease, transform .4s ease;
}
.sky-loading--done { opacity: 0; transform: translateY(4px); }
.sky-loading__orbit {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid #ffe5c630;
  border-radius: 50%;
}
.sky-loading__orbit::after {
  content: '';
  position: absolute;
  inset: 17px -3px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffe3bcaa, transparent);
}
.sky-loading__orbit i {
  position: absolute;
  inset: 0;
  animation: sky-loading-orbit 3s linear infinite;
}
.sky-loading__orbit i::after {
  content: '';
  position: absolute;
  left: 13px;
  top: -3px;
  width: 7px;
  height: 7px;
  background: #ffdeb0;
  border-radius: 50%;
  box-shadow: 0 0 12px #ffcb8280;
}
@keyframes sky-loading-orbit { to { transform: rotate(360deg); } }
@keyframes sky-loading-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sky-loading, .sky-loading__orbit i { animation: none; transition: none; }
}