:root {
  --ewp-bg-a: #f8fbff;
  --ewp-bg-b: #e8f3fb;
  --ewp-bg-c: #fbf7ee;
  --ewp-text-glow: rgba(255,255,255,.65);
  --ewp-fall-color: rgba(255,255,255,.88);
  --ewp-fall-color-2: rgba(219,234,248,.78);
  --ewp-drift-a: rgba(245,250,255,.92);
  --ewp-drift-b: rgba(219,233,246,.86);
  --ewp-sky-filter: none;
}

html.ewp-env-ready body {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(135deg, var(--ewp-bg-a), var(--ewp-bg-b) 48%, var(--ewp-bg-c)) !important;
  transition: background 1.2s ease, color 1s ease, filter 1s ease;
}

html.ewp-dawn {
  --ewp-bg-a: #fff8fb;
  --ewp-bg-b: #e8f3ff;
  --ewp-bg-c: #f7e9d8;
  --ewp-drift-a: rgba(255,249,252,.92);
  --ewp-drift-b: rgba(225,238,250,.86);
}

html.ewp-morning {
  --ewp-bg-a: #fbfdff;
  --ewp-bg-b: #e6f3ff;
  --ewp-bg-c: #f8fbff;
  --ewp-drift-a: rgba(250,253,255,.94);
  --ewp-drift-b: rgba(219,236,250,.88);
}

html.ewp-noon {
  --ewp-bg-a: #fffdf4;
  --ewp-bg-b: #edf7ff;
  --ewp-bg-c: #ffeec0;
  --ewp-text-glow: rgba(255,246,214,.72);
  --ewp-drift-a: rgba(255,253,241,.94);
  --ewp-drift-b: rgba(235,244,250,.82);
}

html.ewp-afternoon {
  --ewp-bg-a: #f8fbff;
  --ewp-bg-b: #dcecf8;
  --ewp-bg-c: #f8f0df;
  --ewp-drift-a: rgba(248,252,255,.92);
  --ewp-drift-b: rgba(219,234,246,.86);
}

html.ewp-dusk {
  --ewp-bg-a: #fff4df;
  --ewp-bg-b: #d8e2f4;
  --ewp-bg-c: #c9b4df;
  --ewp-text-glow: rgba(255,218,160,.48);
  --ewp-drift-a: rgba(255,245,226,.9);
  --ewp-drift-b: rgba(221,225,242,.82);
}

html.ewp-night {
  --ewp-bg-a: #101d35;
  --ewp-bg-b: #172f55;
  --ewp-bg-c: #0d1426;
  --ewp-text-glow: rgba(139,183,226,.32);
  --ewp-fall-color: rgba(215,232,255,.78);
  --ewp-fall-color-2: rgba(169,199,235,.58);
  --ewp-drift-a: rgba(207,226,246,.72);
  --ewp-drift-b: rgba(91,126,164,.52);
}

html.ewp-deep_night {
  --ewp-bg-a: #030712;
  --ewp-bg-b: #071527;
  --ewp-bg-c: #01030a;
  --ewp-text-glow: rgba(89,133,185,.24);
  --ewp-fall-color: rgba(202,224,255,.7);
  --ewp-fall-color-2: rgba(122,164,214,.46);
  --ewp-drift-a: rgba(196,218,242,.62);
  --ewp-drift-b: rgba(48,76,111,.5);
}

html.ewp-night body,
html.ewp-deep_night body {
  color-scheme: dark;
}

.ewp-weather-layer,
.ewp-drift-layer,
.ewp-sky-veil {
  position: fixed;
  pointer-events: none;
  z-index: 9990;
}

.ewp-sky-veil {
  inset: 0;
  background:
    radial-gradient(circle at 22% 12%, var(--ewp-text-glow), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.18), transparent 20%);
  mix-blend-mode: screen;
  opacity: .7;
}

html.ewp-night .ewp-sky-veil,
html.ewp-deep_night .ewp-sky-veil {
  background:
    radial-gradient(circle at 16% 14%, rgba(117,163,218,.25), transparent 20%),
    radial-gradient(circle at 74% 18%, rgba(255,255,255,.12), transparent 18%),
    radial-gradient(circle at 48% 42%, rgba(70,103,156,.13), transparent 34%);
  opacity: .86;
}

.ewp-weather-layer {
  inset: 0;
  overflow: hidden;
  z-index: 9991;
}

.ewp-particle {
  position: absolute;
  left: var(--x);
  top: -8vh;
  width: var(--s);
  height: var(--s);
  opacity: var(--o);
  transform: translate3d(0,0,0) rotate(var(--r));
  animation: ewpFall var(--d) linear infinite;
  animation-delay: var(--delay);
}

@keyframes ewpFall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(var(--r));
  }
  100% {
    transform: translate3d(var(--wind), 115vh, 0) rotate(calc(var(--r) + 260deg));
  }
}

html.ewp-weather-reverse_snow .ewp-particle {
  top: auto;
  bottom: -10vh;
  animation-name: ewpRise;
}

@keyframes ewpRise {
  0% {
    transform: translate3d(0, 10vh, 0) rotate(var(--r));
  }
  100% {
    transform: translate3d(var(--wind), -115vh, 0) rotate(calc(var(--r) - 220deg));
  }
}

html.ewp-weather-snow .ewp-particle {
  border-radius: 50%;
  background: var(--ewp-fall-color);
  box-shadow: 0 0 9px rgba(255,255,255,.72);
}

html.ewp-weather-gold_dust .ewp-particle {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,250,235,.98) 0%, rgba(248,231,185,.92) 42%, rgba(232,208,146,.72) 78%, rgba(255,244,214,.18) 100%);
  box-shadow:
    0 0 10px rgba(255,241,205,.55),
    0 0 18px rgba(245,223,166,.28);
}

html.ewp-weather-clock_ash .ewp-particle {
  width: calc(var(--s) * 1.6);
  height: 2px;
  border-radius: 999px;
  background: rgba(103,114,128,.55);
  box-shadow: 0 0 6px rgba(70,80,96,.22);
}

html.ewp-weather-blue_petals .ewp-particle {
  width: calc(var(--s) * 1.6);
  height: var(--s);
  border-radius: 80% 20% 70% 30%;
  background: rgba(110,168,220,.72);
  box-shadow: 0 0 10px rgba(110,168,220,.32);
}

html.ewp-weather-paper_snow .ewp-particle {
  width: calc(var(--s) * 1.8);
  height: calc(var(--s) * 1.15);
  border-radius: 2px;
  background: rgba(255,255,246,.78);
  box-shadow: inset 0 0 0 1px rgba(137,141,150,.12);
}

html.ewp-weather-star_frost .ewp-particle {
  background: transparent;
}

html.ewp-weather-star_frost .ewp-particle::before {
  content: "✦";
  color: rgba(210,230,255,.82);
  text-shadow: 0 0 10px rgba(154,197,255,.5);
  font-size: calc(var(--s) * 1.8);
  position: absolute;
  left: 0;
  top: -8px;
}

html.ewp-weather-silent_rain .ewp-particle {
  width: 1px;
  height: calc(var(--s) * 4);
  border-radius: 999px;
  background: rgba(166,197,230,.42);
  box-shadow: 0 0 8px rgba(166,197,230,.22);
}

html.ewp-weather-reverse_snow .ewp-particle {
  border-radius: 50%;
  background: rgba(229,242,255,.74);
  box-shadow: 0 0 9px rgba(229,242,255,.42);
}

.ewp-drift-layer {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ewp-drift-height, 24px);
  z-index: 9992;
  background:
    radial-gradient(ellipse at 12% 100%, var(--ewp-drift-a) 0 28%, transparent 29%),
    radial-gradient(ellipse at 36% 100%, var(--ewp-drift-b) 0 26%, transparent 27%),
    radial-gradient(ellipse at 66% 100%, var(--ewp-drift-a) 0 30%, transparent 31%),
    radial-gradient(ellipse at 88% 100%, var(--ewp-drift-b) 0 24%, transparent 25%),
    linear-gradient(180deg, transparent 0%, var(--ewp-drift-a) 68%, var(--ewp-drift-b) 100%);
  filter: drop-shadow(0 -8px 18px rgba(93,121,151,.08));
  transition: height .8s ease, background 1s ease;
}

.ewp-drift-layer::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.24));
  opacity: .7;
}

.ewp-env-widget {
  position: absolute;
  left: 26px;
  top: 24px;
  z-index: 20;
  max-width: 270px;
  border-radius: 20px;
  padding: 13px 14px;
  border: 1px solid rgba(207,181,103,.34);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px rgba(58,84,112,.14);
  color: #2d4965;
}

html.ewp-night .ewp-env-widget,
html.ewp-deep_night .ewp-env-widget {
  background: rgba(13,25,45,.72);
  border-color: rgba(153,184,218,.26);
  color: #d7e7f8;
}

.ewp-env-widget .env-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9a7c35;
  font-weight: 900;
  margin-bottom: 5px;
}

.ewp-env-widget .env-title {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px;
}

.ewp-env-widget .env-desc {
  font-size: 12px;
  line-height: 1.6;
  opacity: .82;
}

@media (max-width: 720px) {
  .ewp-env-widget {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 0 14px;
    max-width: none;
  }

  .ewp-drift-layer {
    height: min(var(--ewp-drift-height, 24px), 38px);
  }
}