*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-fallback);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.bg {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-bg-fallback);
}

.bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bg-position);
}

#fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.fx-branches {
  position: absolute;
  inset: 0;
  display: var(--branches-display, none);
  opacity: var(--branches-opacity);
}

.fx-branch {
  position: absolute;
  top: 0;
  display: block;
  width: clamp(5rem, 20vw, 16rem);
  height: 100%;
  object-fit: fill;
  transition: transform var(--branches-transition);
  will-change: transform;
}

.fx-branch-left {
  left: 0;
}

.fx-branch-right {
  right: 0;
  transform: scaleX(-1);
}

#fx.is-scrolled .fx-branch-left {
  transform: translateX(-75%);
}

#fx.is-scrolled .fx-branch-right {
  transform: translateX(75%) scaleX(-1);
}

.fog {
  position: absolute;
  left: 0;
  bottom: var(--f-offset);
  width: 200%;
  height: var(--f-height);
  display: var(--f-display);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  opacity: var(--f-mid);
  will-change: transform, opacity;
  animation-name: fog-drift, fog-breathe;
  animation-duration: var(--f-drift), var(--f-breathe);
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite;
}

.fog-1 {
  --f-offset: var(--fog-1-offset);
  --f-height: var(--fog-1-height);
  --f-display: var(--fog-1-display);
  --f-drift: var(--fog-1-drift);
  --f-breathe: var(--fog-1-breathe);
  --f-lo: var(--fog-1-lo);
  --f-hi: var(--fog-1-hi);
  --f-mid: calc((var(--f-lo) + var(--f-hi)) / 2);
  animation-direction: var(--fog-1-dir), normal;
}

.fog-2 {
  --f-offset: var(--fog-2-offset);
  --f-height: var(--fog-2-height);
  --f-display: var(--fog-2-display);
  --f-drift: var(--fog-2-drift);
  --f-breathe: var(--fog-2-breathe);
  --f-lo: var(--fog-2-lo);
  --f-hi: var(--fog-2-hi);
  --f-mid: calc((var(--f-lo) + var(--f-hi)) / 2);
  animation-direction: var(--fog-2-dir), normal;
}

.fog-half {
  float: left;
  width: 50%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 100% 100%;
}

.fog-1 .fog-half {
  background-image: url("../img/fog1.png");
}

.fog-2 .fog-half {
  background-image: url("../img/fog2.png");
}

.fx-rays {
  position: absolute; inset: 0; display: var(--rays-display);
  opacity: calc(var(--rays-opacity) * var(--rays-pulse-effective-min));
  animation: rays-pulse var(--rays-pulse-dur) ease-in-out infinite alternate;
  mix-blend-mode: var(--rays-blend); will-change: opacity;
}

.fx-rays > i {
  position: absolute; left: calc(var(--rays-x) * 100% - var(--rays-box-w) / 2);
  top: calc(var(--rays-y) * 100%); width: var(--rays-box-w); height: var(--len);
  transform-origin: 50% 0; rotate: calc(var(--aim) - 180deg); scale: 1 1;
  background: conic-gradient(from calc(180deg - var(--hw)) at 50% 0, transparent 0deg, rgb(var(--rays-color) / calc(var(--pk) * 0.55)) calc(var(--hw) * 0.55), rgb(var(--rays-color) / var(--pk)) var(--hw), rgb(var(--rays-color) / calc(var(--pk) * 0.55)) calc(var(--hw) * 1.45), transparent calc(var(--hw) * 2));
  -webkit-mask-image: var(--rays-falloff); mask-image: var(--rays-falloff);
  --swell: calc(var(--rays-swell) * var(--motion-intensity)); --sway: calc(var(--rays-sway) * var(--motion-intensity));
  animation: rays-intensity calc(var(--t) * 1s) ease-in-out calc(var(--t) * -0.61 * 1s) infinite alternate,
    rays-swell calc(var(--t) * 1.37s) ease-in-out calc(var(--t) * -0.37 * 1s) infinite alternate,
    rays-sway calc(var(--t) * 0.79s) ease-in-out calc(var(--t) * -0.83 * 1s) infinite alternate;
  will-change: rotate, scale, opacity;
}

.fx-rays > .r1 { --aim: var(--ray-1-angle); --hw: var(--ray-1-hw); --len: var(--ray-1-len); --pk: var(--ray-1-pk); --t: var(--ray-1-t); }
.fx-rays > .r2 { --aim: var(--ray-2-angle); --hw: var(--ray-2-hw); --len: var(--ray-2-len); --pk: var(--ray-2-pk); --t: var(--ray-2-t); }
.fx-rays > .r3 { --aim: var(--ray-3-angle); --hw: var(--ray-3-hw); --len: var(--ray-3-len); --pk: var(--ray-3-pk); --t: var(--ray-3-t); }
.fx-rays > .r4 { --aim: var(--ray-4-angle); --hw: var(--ray-4-hw); --len: var(--ray-4-len); --pk: var(--ray-4-pk); --t: var(--ray-4-t); }
.fx-rays > .r5 { --aim: var(--ray-5-angle); --hw: var(--ray-5-hw); --len: var(--ray-5-len); --pk: var(--ray-5-pk); --t: var(--ray-5-t); }

.fx-lit {
  position: absolute;
  inset: 0;
  display: var(--rays-lit-display);
  opacity: var(--rays-pulse-effective-min);
  animation: rays-pulse var(--rays-pulse-dur) ease-in-out infinite alternate;
  -webkit-mask-image: var(--rays-lit-mask), var(--rays-lit-fade);
  -webkit-mask-composite: source-over, source-over, source-over, source-over, source-in;
  mask-image: var(--rays-lit-mask), var(--rays-lit-fade);
  mask-composite: add, add, add, add, intersect;
  will-change: opacity;
}

.fx-lit-fog .fog-half {
  background-image: none;
  background-color: rgb(var(--rays-lit-color) / var(--rays-lit-opacity));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: repeat-x;
  mask-size: 100% 100%;
  mask-repeat: repeat-x;
}

.fx-lit-fog.fog-1 .fog-half {
  -webkit-mask-image: url("../img/fog1.png");
  mask-image: url("../img/fog1.png");
}

.fx-lit-fog.fog-2 .fog-half {
  -webkit-mask-image: url("../img/fog2.png");
  mask-image: url("../img/fog2.png");
}

.fx-spores {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  display: var(--spores-enabled);
  opacity: var(--spores-opacity);
  pointer-events: none;
  overflow: hidden;
}

.fx-spores > i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--spores-color)) 0 30%, transparent 70%);
  will-change: transform;
  animation: spore-drift var(--dur) ease-in-out var(--delay) infinite, spore-twinkle var(--tw) ease-in-out var(--tw-delay) infinite alternate;
}

.fx-spores > i:nth-child(1) { --x: 78%; --y: 92%; --s: 1; --particle-size: 2px; --dx1: -48px; --dy1: 34px; --dx2: 51px; --dy2: -39px; --dur: 16.2s; --delay: -7.3s; --tw: 5.2s; --tw-delay: -1.1s; --o: 0.96; }
.fx-spores > i:nth-child(2) { --x: 15%; --y: 76%; --s: 2; --particle-size: 4px; --dx1: 53px; --dy1: -37px; --dx2: -46px; --dy2: 40px; --dur: 17.4s; --delay: -12.1s; --tw: 6.4s; --tw-delay: -3.7s; --o: 0.85; }
.fx-spores > i:nth-child(3) { --x: 91%; --y: 98%; --s: 1; --particle-size: 2px; --dx1: -45px; --dy1: -32px; --dx2: -55px; --dy2: 38px; --dur: 18.6s; --delay: -18.6s; --tw: 7.1s; --tw-delay: -5.2s; --o: 0.94; }
.fx-spores > i:nth-child(4) { --x: 40%; --y: 84%; --s: 3; --particle-size: 6px; --dx1: 60px; --dy1: 44px; --dx2: -56px; --dy2: -41px; --dur: 19.8s; --delay: -23.5s; --tw: 10.3s; --tw-delay: -8.4s; --o: 0.72; }
.fx-spores > i:nth-child(5) { --x: 65%; --y: 68%; --s: 2; --particle-size: 4px; --dx1: -49px; --dy1: 36px; --dx2: 47px; --dy2: -39px; --dur: 21.1s; --delay: -9.8s; --tw: 8.2s; --tw-delay: -2.3s; --o: 0.83; }
.fx-spores > i:nth-child(6) { --x: 24%; --y: 73%; --s: 1; --particle-size: 2px; --dx1: 46px; --dy1: 33px; --dx2: -52px; --dy2: -35px; --dur: 22.3s; --delay: -15.4s; --tw: 5.7s; --tw-delay: -4.6s; --o: 0.98; }
.fx-spores > i:nth-child(7) { --x: 55%; --y: 95%; --s: 3; --particle-size: 6px; --dx1: -59px; --dy1: 45px; --dx2: 57px; --dy2: -42px; --dur: 23.5s; --delay: -31.2s; --tw: 12s; --tw-delay: -9.5s; --o: 0.69; }
.fx-spores > i:nth-child(8) { --x: 8%; --y: 88%; --s: 2; --particle-size: 4px; --dx1: 48px; --dy1: -34px; --dx2: -54px; --dy2: 39px; --dur: 24.7s; --delay: -17.7s; --tw: 9.6s; --tw-delay: -6.1s; --o: 0.87; }
.fx-spores > i:nth-child(9) { --x: 82%; --y: 77%; --s: 1; --particle-size: 2px; --dx1: -47px; --dy1: -38px; --dx2: 50px; --dy2: 32px; --dur: 25.9s; --delay: -20.3s; --tw: 6.2s; --tw-delay: -0.8s; --o: 0.95; }
.fx-spores > i:nth-child(10) { --x: 47%; --y: 62%; --s: 4; --particle-size: 8px; --dx1: 64px; --dy1: 47px; --dx2: -61px; --dy2: -43px; --dur: 27.1s; --delay: -11.6s; --tw: 11.8s; --tw-delay: -7.4s; --o: 0.60; }
.fx-spores > i:nth-child(11) { --x: 34%; --y: 100%; --s: 1; --particle-size: 2px; --dx1: -50px; --dy1: -36px; --dx2: 45px; --dy2: 41px; --dur: 28.3s; --delay: -14.2s; --tw: 8.7s; --tw-delay: -3.1s; --o: 0.97; }
.fx-spores > i:nth-child(12) { --x: 99%; --y: 71%; --s: 2; --particle-size: 4px; --dx1: -54px; --dy1: 39px; --dx2: -49px; --dy2: -42px; --dur: 29.5s; --delay: -26.8s; --tw: 7.8s; --tw-delay: -10.2s; --o: 0.82; }
.fx-spores > i:nth-child(13) { --x: 6%; --y: 79%; --s: 1; --particle-size: 2px; --dx1: 45px; --dy1: 32px; --dx2: -48px; --dy2: 37px; --dur: 16.8s; --delay: -19.1s; --tw: 5.5s; --tw-delay: -2.7s; --o: 0.93; }
.fx-spores > i:nth-child(14) { --x: 28%; --y: 90%; --s: 2; --particle-size: 4px; --dx1: -52px; --dy1: 40px; --dx2: 57px; --dy2: -38px; --dur: 18.1s; --delay: -8.5s; --tw: 10.8s; --tw-delay: -6.8s; --o: 0.86; }
.fx-spores > i:nth-child(15) { --x: 73%; --y: 74%; --s: 3; --particle-size: 6px; --dx1: 58px; --dy1: -43px; --dx2: -63px; --dy2: 42px; --dur: 19.3s; --delay: -28.4s; --tw: 9.1s; --tw-delay: -1.9s; --o: 0.70; }
.fx-spores > i:nth-child(16) { --x: 50%; --y: 96%; --s: 4; --particle-size: 8px; --dx1: -65px; --dy1: 48px; --dx2: 62px; --dy2: -45px; --dur: 20.6s; --delay: -35.7s; --tw: 11.6s; --tw-delay: -5.6s; --o: 0.58; }
.fx-spores > i:nth-child(17) { --x: 96%; --y: 86%; --s: 1; --particle-size: 2px; --dx1: 47px; --dy1: -35px; --dx2: -51px; --dy2: 38px; --dur: 21.8s; --delay: -16.9s; --tw: 6.6s; --tw-delay: -9.1s; --o: 0.92; }
.fx-spores > i:nth-child(18) { --x: 33%; --y: 58%; --s: 2; --particle-size: 4px; --dx1: 55px; --dy1: 38px; --dx2: -50px; --dy2: -44px; --dur: 23.1s; --delay: -22.7s; --tw: 7.4s; --tw-delay: -4.2s; --o: 0.84; }
.fx-spores > i:nth-child(19) { --x: 90%; --y: 45%; --s: 3; --particle-size: 6px; --dx1: -57px; --dy1: 42px; --dx2: 61px; --dy2: -40px; --dur: 24.3s; --delay: -27.3s; --tw: 11.9s; --tw-delay: -11.3s; --o: 0.68; }
.fx-spores > i:nth-child(20) { --x: 13%; --y: 66%; --s: 4; --particle-size: 8px; --dx1: 63px; --dy1: -46px; --dx2: -60px; --dy2: 44px; --dur: 25.6s; --delay: -40.6s; --tw: 8.4s; --tw-delay: -2.1s; --o: 0.56; }
.fx-spores > i:nth-child(21) { --x: 58%; --y: 53%; --s: 1; --particle-size: 2px; --dx1: -46px; --dy1: -33px; --dx2: 49px; --dy2: 36px; --dur: 26.8s; --delay: -12.8s; --tw: 5.9s; --tw-delay: -7.9s; --o: 0.91; }
.fx-spores > i:nth-child(22) { --x: 83%; --y: 6%; --s: 2; --particle-size: 4px; --dx1: 51px; --dy1: 36px; --dx2: -58px; --dy2: 40px; --dur: 28.1s; --delay: -29.8s; --tw: 11.2s; --tw-delay: -3.4s; --o: 0.81; }
.fx-spores > i:nth-child(23) { --x: 29%; --y: 22%; --s: 3; --particle-size: 6px; --dx1: -60px; --dy1: 41px; --dx2: 56px; --dy2: 35px; --dur: 29.3s; --delay: -34.1s; --tw: 9.9s; --tw-delay: -8.8s; --o: 0.71; }
.fx-spores > i:nth-child(24) { --x: 69%; --y: 38%; --s: 2; --particle-size: 4px; --dx1: 54px; --dy1: 42px; --dx2: -47px; --dy2: 34px; --dur: 17.6s; --delay: -24.6s; --tw: 7.6s; --tw-delay: -5.9s; --o: 0.80; }

.fx-gust {
  position: absolute;
  inset: 0;
  display: var(--gust-display);
  overflow: hidden;
  pointer-events: none;
  animation: gust-fade var(--gust-cycle) linear var(--gust-cycle-offset) infinite;
  will-change: opacity;
}

.fx-gust > i {
  position: absolute;
  left: -60vw;
  top: var(--gust-y);
  width: var(--gust-width);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gust-color) 30%, var(--gust-color) 70%, transparent);
  animation: gust-cross var(--gust-cycle) linear var(--gust-cycle-offset) infinite;
  will-change: transform;
}

.fx-gust > i:nth-child(1) { --gust-y: 24%; --gust-width: 42vw; }
.fx-gust > i:nth-child(2) { --gust-y: 51%; --gust-width: 58vw; }
.fx-gust > i:nth-child(3) { --gust-y: 76%; --gust-width: 36vw; }

.fx-rain {
  position: absolute;
  inset: -100%;
  display: var(--rain-display, none);
  pointer-events: none;
  background-image: repeating-linear-gradient(105deg, transparent 0 78px, var(--rain-color) 79px 80px, transparent 81px 320px);
  animation: rain-fall var(--rain-fall) linear infinite, var(--rain-cycle-animation, rain-cycle) var(--rain-cycle) linear infinite;
  animation-delay: 0s, var(--rain-cycle-offset);
}

.fx-rain-far {
  --rain-fall: var(--rain-fall-far);
  --rain-layer-opacity: 0.5;
}

.fx-rain-near {
  --rain-fall: var(--rain-fall-near);
  --rain-layer-opacity: 0.9;
}

@media (max-width: 600px) {
  .fx-spores > i:nth-child(n + 13) {
    display: none;
  }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--scrim-gradient);
}

.content {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  justify-content: var(--content-justify);
  align-items: var(--content-align);
  gap: var(--section-gap);
  padding: var(--page-pad);
  padding-bottom: max(var(--page-pad), env(safe-area-inset-bottom));
  text-align: var(--content-text-align);
  text-shadow: var(--text-shadow);
}

.content > * {
  width: 100%;
  max-width: var(--content-width);
}

.name {
  margin: 0;
  padding-inline-end: var(--tracking-name);
  font-size: var(--size-name);
  font-weight: var(--weight-name);
  letter-spacing: var(--tracking-name);
  text-transform: var(--name-transform);
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--links-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-underline-offset: from-font;
  transition: color var(--duration-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-accent);
}

.about {
  color: var(--color-text-dim);
}

.songs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.song {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--links-gap);
  padding-block: var(--song-row-pad);
  border-bottom: 1px solid var(--hairline);
}

.song-title,
.song-time {
  font-size: var(--size-small);
}

.song-time {
  color: var(--color-text-dim);
}

.song-link {
  text-decoration: none;
}

.names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.names .section-heading,
.vote-hint,
.vote-status,
.vote-actions {
  margin: 0;
}

.vote-fieldset {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vote-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--links-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vote-option label {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  opacity: var(--vote-idle-opacity);
  cursor: pointer;
  transition: opacity var(--vote-transition), transform var(--vote-transition);
}

.vote-option label::after {
  position: absolute;
  right: 0;
  bottom: 0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--vote-transition);
}

.vote-option input:checked + label {
  opacity: var(--vote-selected-opacity);
  text-shadow: var(--vote-selected-glow);
}

.vote-option input:checked + label::after {
  transform: scaleX(1);
}

.vote-option input:focus-visible + label {
  outline: 1px solid var(--color-focus);
  outline-offset: 4px;
}

.vote-status {
  color: var(--color-text-dim);
  font-size: var(--size-small);
}

.vote-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--links-gap);
}

.vote-send[aria-disabled="true"] {
  cursor: default;
}

.vote-copy {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: from-font;
  cursor: pointer;
}

.vote-copy:hover,
.vote-copy:focus-visible {
  color: var(--color-accent);
}

@media (hover: hover) {
  .vote-option label:hover {
    opacity: var(--vote-hover-opacity);
  }
}

.song-play {
  appearance: none;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.song-play::before,
.song-play::after {
  content: "";
  grid-area: 1 / 1;
}

.song-play::before {
  width: 0.65rem;
  height: 0.8rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.song[data-state="playing"] .song-play::before,
.song[data-state="playing"] .song-play::after {
  width: 0.2rem;
  height: 0.75rem;
  clip-path: none;
}

.song[data-state="playing"] .song-play::before {
  transform: translateX(-0.16rem);
}

.song[data-state="playing"] .song-play::after {
  background: currentColor;
  transform: translateX(0.16rem);
}

.song-seek {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  appearance: none;
  background: linear-gradient(to right, var(--progress-fill) 0 var(--seek, 0%), var(--progress-track) var(--seek, 0%) 100%) center / 100% var(--progress-height) no-repeat;
  cursor: pointer;
}

.song-seek::-webkit-slider-runnable-track {
  height: var(--progress-height);
  background: transparent;
}

.song-seek::-moz-range-track {
  height: var(--progress-height);
  background: transparent;
}

.song-seek::-webkit-slider-thumb {
  width: 0.65rem;
  height: 0.65rem;
  margin-top: calc((var(--progress-height) - 0.65rem) / 2);
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
}

.song-seek::-moz-range-thumb {
  width: 0.65rem;
  height: 0.65rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
}

.song[data-state="loading"] .song-seek,
.song[data-state="playing"] .song-seek,
.song[data-state="paused"] .song-seek {
  display: block;
}

.song[data-state="loading"] {
  animation: player-pulse var(--duration-slow) var(--ease-slow) infinite;
}

.song[data-state="error"] .song-title,
.song[data-state="error"] .song-time {
  color: var(--color-text-dim);
}

@keyframes player-pulse {
  50% {
    opacity: 0.55;
  }
}

@keyframes fog-drift {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-50%,0,0);
  }
}

@keyframes fog-breathe {
  0%,100% {
    opacity: var(--f-lo);
  }
  40% {
    opacity: var(--f-hi);
  }
  70% {
    opacity: var(--f-mid);
  }
}

@keyframes rays-pulse {
  to {
    opacity: 1;
  }
}

@keyframes rays-intensity {
  from { opacity: calc(1 - (1 - 0.4) * var(--motion-intensity)); } to { opacity: 1; }
}

@keyframes rays-swell {
  from { scale: calc(1 - var(--swell)) 1; } to { scale: calc(1 + var(--swell)) 1; }
}

@keyframes rays-sway {
  from { rotate: calc(var(--aim) - 180deg - var(--sway)); } to { rotate: calc(var(--aim) - 180deg + var(--sway)); }
}

@keyframes spore-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(var(--dx1), var(--dy1), 0); }
  75% { transform: translate3d(var(--dx2), var(--dy2), 0); }
}

@keyframes spore-twinkle {
  0% { opacity: calc(var(--o) * 0.2); }
  100% { opacity: var(--o); }
}

@keyframes rain-fall {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(309px, 83px, 0); }
}

@keyframes gust-fade {
  0%, 67% { opacity: 0; }
  70%, 89% { opacity: var(--gust-opacity); }
  93%, 100% { opacity: 0; }
}

@keyframes gust-cross {
  0%, 68% { transform: translate3d(0, 0, 0); }
  79% { transform: translate3d(50vw, 0, 0); }
  91%, 100% { transform: translate3d(calc(100vw + 60vw), 0, 0); }
}

@keyframes rain-cycle {
  0%, 30% { opacity: 0; }
  36%, 56% { opacity: calc(var(--rain-opacity-max) * var(--rain-layer-opacity)); }
  62%, 100% { opacity: 0; }
}

@keyframes rain-always-on {
  0%, 100% { opacity: calc(var(--rain-opacity-max) * var(--rain-layer-opacity)); }
}

.song:target .song-title {
  color: var(--color-accent);
}

:focus-visible {
  outline: 1px solid var(--color-focus);
  outline-offset: 4px;
}

::selection {
  color: var(--color-text);
  background: var(--selection-bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .song[data-state="loading"] {
    animation: none;
  }

  .fog {
    animation-duration: var(--f-drift), var(--f-breathe) !important;
    animation-iteration-count: infinite !important;
  }

  .fx-rays,
  .fx-lit {
    animation: none !important;
  }

  .fx-rays {
    opacity: var(--rays-opacity) !important;
  }

  .fx-rays > i {
    animation: none !important;
    opacity: 0.85 !important;
    rotate: calc(var(--aim) - 180deg) !important;
    scale: 1 1 !important;
  }

  .vote-option label,
  .vote-option label::after {
    transition: none;
  }

  .fx-lit {
    opacity: 0.85;
  }

  .fx-spores > i {
    animation: none !important;
  }

  .fx-spores {
    display: none;
  }

  .fx-rain {
    display: none;
  }

  .fx-gust {
    display: none;
  }

  .fx-branches,
  .fx-branch {
    transition: none;
  }
}