/* Independent, optional snowfall layer. It deliberately stays separate from the retired tech particles. */
.snowfall-field {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  user-select: none;
}

body[data-role="guest"] .snowfall-field,
body[data-snowfall="off"] .snowfall-field {
  display: none !important;
}

.snowflake {
  position: absolute;
  top: -12vh;
  left: var(--snow-left);
  color: rgba(67, 116, 166, var(--snow-opacity));
  font-family: Arial, "PingFang SC", sans-serif;
  font-size: var(--snow-size);
  font-weight: 700;
  line-height: 1;
  text-shadow:
    0 0 2px rgba(255, 255, 255, .98),
    0 0 7px rgba(64, 119, 176, .62),
    0 2px 4px rgba(37, 74, 112, .28);
  opacity: 1;
  filter: blur(var(--snow-blur));
  will-change: transform;
  animation: complaint-snowfall var(--snow-duration) linear var(--snow-delay) infinite;
}

.snowflake-near {
  font-weight: 900;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 1),
    0 0 10px rgba(48, 105, 164, .75),
    0 3px 5px rgba(35, 67, 101, .32);
}

body[data-theme="dark"] .snowflake {
  color: rgba(255, 250, 244, var(--snow-opacity));
  text-shadow:
    0 0 3px rgba(255, 255, 255, .96),
    0 0 9px rgba(255, 219, 214, .72),
    0 2px 5px rgba(117, 30, 27, .45);
}

.snow-toggle[aria-pressed="true"] {
  color: #7d2521;
  border-color: #e5b5b2;
  background: #fff2f1;
}

body[data-theme="dark"] .snow-toggle[aria-pressed="true"] {
  color: #fff7f4;
  border-color: #a8635d;
  background: rgba(196, 58, 49, .18);
}

.snow-toggle[aria-pressed="true"] .snow-toggle-icon {
  color: #2e6fae;
  background: #e7f3ff;
}

body[data-theme="dark"] .snow-toggle[aria-pressed="true"] .snow-toggle-icon {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

@keyframes complaint-snowfall {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }
  48% {
    transform: translate3d(var(--snow-drift-mid), 48vh, 0) rotate(var(--snow-rotation-mid));
  }
  100% {
    transform: translate3d(var(--snow-drift), 116vh, 0) rotate(var(--snow-rotation));
  }
}

@media (max-width: 780px) {
  .snowflake:nth-child(n + 57) {
    display: none;
  }
}

@media (max-width: 480px) {
  .snowflake:nth-child(n + 43) {
    display: none;
  }
}