:root {
  --bg: transparent;
  --panel: rgba(255, 255, 255, 0.78);
  --line: rgba(255, 255, 255, 0.85);
  --text: #16324c;
  --muted: #5d7d98;
  --yellow: #f0b429;
  --green: #1f9d72;
  --red: #e15d6a;
}

body {
  color: var(--text);
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(255, 226, 150, 0.95), transparent 58%),
    radial-gradient(700px 360px at 0% 8%, rgba(255, 255, 255, 0.72), transparent 60%),
    linear-gradient(180deg, #79c6f8 0%, #b9e4ff 34%, #e7f6ff 68%, #f8fcff 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 40px;
}

body::before {
  width: 120px;
  height: 42px;
  top: 108px;
  right: 7%;
  box-shadow:
    36px 14px 0 8px rgba(255, 255, 255, 0.92),
    72px 6px 0 -2px rgba(255, 255, 255, 0.8),
    -28px 16px 0 2px rgba(255, 255, 255, 0.75);
}

body::after {
  width: 90px;
  height: 34px;
  top: 220px;
  left: 4%;
  opacity: 0.8;
  box-shadow:
    28px 10px 0 6px rgba(255, 255, 255, 0.85),
    -22px 12px 0 0 rgba(255, 255, 255, 0.7);
}

.site-nav,
.page { position: relative; z-index: 1; }

body .site-nav {
  background: rgba(255, 255, 255, 0.48);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
}

body .site-nav a { color: #1d4668; }

body .site-nav > a[aria-current="page"] {
  background: #2f8fe0;
  color: #fff;
}

body .site-nav .nav-bgm button {
  border-color: rgba(47, 143, 224, 0.45);
  color: #1d4668;
}

body .site-nav .nav-bgm button[aria-pressed="true"] {
  background: #2f8fe0;
  color: #fff;
  border-color: transparent;
}

.page { width: min(880px, 100%); }

h1 { color: #12324a; }

.sub,
.status { color: #4f7592; }

.status.live { color: #178a68; }
.status.bad { color: #d45364; }

.search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0 0 14px;
  color: #4f7592;
  font-size: 12px;
  font-weight: 650;
}

.search select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.78);
  color: #16324c;
  border-radius: 16px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 8px 22px rgba(70, 140, 190, 0.12);
}

.day { font: inherit; cursor: pointer; }

.save-note {
  margin: -4px 0 14px;
  color: #8a5a12;
  font-size: 13px;
}

.now,
.day,
.hour {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 28px rgba(70, 130, 180, 0.14);
}

.now {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  align-items: center;
  border-radius: 28px;
  padding: 22px 20px;
  margin-bottom: 16px;
  background:
    radial-gradient(160px 110px at 100% 0%, rgba(255, 214, 120, 0.95), transparent 72%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(219, 239, 255, 0.82));
}

.now-temp {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #12324a;
  font-variant-numeric: tabular-nums;
}

.now-sky { font-size: 18px; font-weight: 700; color: #1d4d73; }
.now small { color: #5d7d98; }

.now-facts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.now-facts li,
.chips span {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(180, 214, 238, 0.8);
  border-radius: 999px;
  padding: 6px 10px;
  color: #5d7d98;
  font-size: 13px;
}

.now-facts b,
.chips b { color: #16324c; font-weight: 700; }

.now .meter { grid-column: 1 / -1; }

.days {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.day {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.1fr) auto;
  grid-template-areas:
    "when sky temp"
    "pop pop pop"
    "chips chips chips";
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  color: var(--text);
  border-radius: 22px;
  padding: 14px;
}

.day[aria-pressed="true"] {
  border-color: rgba(47, 143, 224, 0.35);
  background:
    radial-gradient(120px 80px at 100% 0%, rgba(255, 226, 160, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(214, 236, 255, 0.9));
}

.when { grid-area: when; }
.when strong { display: block; font-size: 16px; color: #12324a; }
.when span,
.sky small,
.temp small { color: #5d7d98; font-size: 12px; }

.sky { grid-area: sky; font-weight: 700; color: #1d4d73; }
.temp {
  grid-area: temp;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: #12324a;
}
.temp .lo { color: #6d8eaa; font-weight: 600; margin-left: 6px; }

.pop {
  grid-area: pop;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meter { min-width: 0; }
.pop-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #5d7d98;
  font-size: 12px;
  margin-bottom: 4px;
}
.pop-label b { color: #1d74c7; }

.bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(47, 143, 224, 0.16);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7ec8ff, #2f8fe0);
}

.chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.hours { margin-top: 18px; }
.hours h2 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #12324a;
}

.hour-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.hour {
  flex: 0 0 92px;
  text-align: center;
  border-radius: 18px;
  padding: 10px 8px;
  font-size: 12px;
  color: #5d7d98;
}

.hour .meter { margin-top: 8px; text-align: left; }
.hour .pop-label { font-size: 10px; }
.hour .bar { height: 4px; }

.hour b {
  display: block;
  color: #12324a;
  font-size: 14px;
  margin: 4px 0;
}

.hour .pop-label b { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  body::before { right: -20px; top: 86px; }
  body::after { display: none; }
  .now { grid-template-columns: 1fr; }
  .now-temp { font-size: 48px; }
  .day {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "when temp"
      "sky sky"
      "pop pop"
      "chips chips";
  }
}