/*
 * Seasons — decoration hung on the header (core/seasons.php).
 *
 * Loaded only while a motif is showing. Two layers, both inside .header so they
 * travel with it, both aria-hidden and pointer-events: none so nothing here can
 * ever be in the way of a click:
 *
 *   .season-sky      the top of the page: bats, snow or confetti, and a glow.
 *                    It fades out once the page is scrolled, so it decorates
 *                    the arrival and never sits over text being read.
 *   .season-garland  a string hung under the bar, sixty items on a wire. It
 *                    stays with the bar when it sticks.
 *
 * Pictures are inline SVG and CSS, so there is nothing to fetch. Every
 * animation is inside prefers-reduced-motion: no-preference, and .season-still
 * (the motif's "Animated" switch off) stops them too.
 */

/* The logo and the menu above the decoration. */
.season-on .header-inner { position: relative; z-index: 2; }

.season { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* A phone menu is open: the decoration gets out of its way entirely. */
.header:has(.navbar.open) .season { display: none; }

.season-sky {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 240px;
  overflow: hidden;
  transition: opacity 0.6s;
}
.header.stuck .season-sky { opacity: 0; }

.season-garland {
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 46px;
  overflow: hidden;
  display: flex;
  background-repeat: repeat-x;
  background-position: 0 0;
  background-size: 56px 20px;
}
.season-garland i {
  flex: 0 0 56px;
  position: relative;
  height: 46px;
}
.season-garland i::before,
.season-garland i::after {
  content: "";
  position: absolute;
  left: 50%;
}

/* ================================================================ Halloween */

.season-halloween .season-garland {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20'%3E%3Cpath d='M0 3Q28 19 56 3' fill='none' stroke='%23704a26' stroke-width='1.6'/%3E%3C/svg%3E");
}
/* Pumpkin lanterns, hung at the bottom of every dip in the wire. */
.season-halloween .season-garland i::before {
  top: 9px;
  width: 24px; height: 22px;
  margin-left: -12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 7c1-4 3-5 6-5' stroke='%234a6b22' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='16' cy='18' rx='15' ry='11' fill='%23e8650f'/%3E%3Cellipse cx='9' cy='18' rx='6' ry='10' fill='%23f47d1e'/%3E%3Cellipse cx='23' cy='18' rx='6' ry='10' fill='%23f47d1e'/%3E%3Cellipse cx='16' cy='18' rx='5' ry='11' fill='%23ff8f2e'/%3E%3Cpath d='M8 16l3.5-4 3.5 4zM17 16l3.5-4 3.5 4z' fill='%23ffd166'/%3E%3Cpath d='M8 21q8 6 16 0l-2.4.8-1.3 1.6-1.6-1.4-2.7 1.8-2.7-1.8-1.6 1.4-1.3-1.6z' fill='%23ffd166'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 140, 20, 0.75));
}
.season-halloween .season-garland i:nth-child(even)::before { top: 10px; width: 20px; height: 18px; margin-left: -10px; }
/* Every seventh, a spider let down on its thread instead. */
.season-halloween .season-garland i:nth-child(7n+4)::before {
  top: 8px;
  width: 1px; height: 22px;
  margin-left: 0;
  background: rgba(230, 230, 230, 0.55);
  filter: none;
  transform-origin: top center;
}
.season-halloween .season-garland i:nth-child(7n+4)::after {
  top: 26px;
  width: 16px; height: 14px;
  margin-left: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg stroke='%23120c14' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 12L3 6M12 14L2 14M12 16L3 22M12 18L6 27M20 12l9-6M20 14h10M20 16l9 6M20 18l6 9'/%3E%3C/g%3E%3Cellipse cx='16' cy='16' rx='6' ry='7' fill='%23120c14'/%3E%3Ccircle cx='16' cy='8' r='4' fill='%23120c14'/%3E%3Ccircle cx='14.5' cy='7.5' r='1' fill='%23ff5a1f'/%3E%3Ccircle cx='17.5' cy='7.5' r='1' fill='%23ff5a1f'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 160, 60, 0.6));
}

/* An orange glow at the top of the page, darkening into purple. */
.season-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 120% at 85% -20%, rgba(255, 128, 20, 0.28), transparent 70%),
    radial-gradient(ellipse 70% 100% at 10% -30%, rgba(120, 40, 160, 0.25), transparent 70%);
}

/* A cobweb in the top left corner. */
.season-web {
  position: absolute;
  left: 0; top: 0;
  width: 120px; height: 120px;
  opacity: 0.32;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-width='0.8'%3E%3Cpath d='M0 0L120 18M0 0L104 64M0 0L64 104M0 0L18 120'/%3E%3Cpath d='M30 4.5Q24 15 26 26Q15 24 4.5 30'/%3E%3Cpath d='M58 9Q48 28 52 52Q28 48 9 58'/%3E%3Cpath d='M86 13Q72 41 78 78Q41 72 13 86'/%3E%3Cpath d='M112 17Q96 54 102 102Q54 96 17 112'/%3E%3C/g%3E%3C/svg%3E") 0 0 / contain no-repeat;
}

/*
 * Bats. Each flies its own loop inside .season-bats, whose box is the area the
 * owner chose; the loops are written in container units (cqw, cqh), so the same
 * six flights fill the whole top of the page, circle the title or keep to a
 * corner. Turning round is the scaleX going through zero, which reads as a bat
 * banking. The wings beat on the inner element, separately from the flight.
 */
.season-bats { position: absolute; container-type: size; }
.season-bats.bats-across { left: 0; right: 0; top: 0; height: 210px; }
.season-bats.bats-title {
  left: max(0px, calc((100vw - var(--wrap, 1180px)) / 2));
  top: 0;
  width: min(480px, 80vw);
  height: 150px;
}
.season-bats.bats-corner { right: 0; top: 0; width: min(520px, 60vw); height: 190px; }

.sn-bat {
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 23px;
  margin: -11px 0 0 -23px;
  opacity: 0;
}
.sn-bat i {
  display: block;
  width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23170e1f' d='M32 9c-1.6 0-2.6 1.4-2.6 1.4L27.8 6.6 28.6 13C22.4 6.4 13.6 3.6 0 4.6c6 2.6 9.2 6.6 9.4 12.2 3-3 7.4-3.2 10.2.2 2.4-3.2 6.8-3 8.6 1.2 1-2 2.4-3 3.8-3s2.8 1 3.8 3c1.8-4.2 6.2-4.4 8.6-1.2 2.8-3.4 7.2-3.2 10.2-.2.2-5.6 3.4-9.6 9.4-12.2C50.4 3.6 41.6 6.4 35.4 13l.8-6.4-1.6 3.8S33.6 9 32 9z'/%3E%3C/svg%3E") center / contain no-repeat;
  /* Black on a dark page needs a rim of firelight to be seen at all. */
  filter: drop-shadow(0 0 2px rgba(255, 170, 60, 0.95)) drop-shadow(0 0 7px rgba(255, 120, 20, 0.6));
}
.sn-bat-2, .sn-bat-5 { width: 36px; height: 18px; margin: -9px 0 0 -18px; }
.sn-bat-6 { width: 30px; height: 15px; margin: -7px 0 0 -15px; }

/* ================================================================ Christmas */

.season-christmas .season-garland {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20'%3E%3Cpath d='M0 3Q28 19 56 3' fill='none' stroke='%23386b3c' stroke-width='1.8'/%3E%3C/svg%3E");
}
.season-christmas .season-garland i { --bulb: #ff4d4d; }
.season-christmas .season-garland i:nth-child(4n+2) { --bulb: #48e08a; }
.season-christmas .season-garland i:nth-child(4n+3) { --bulb: #ffd34d; }
.season-christmas .season-garland i:nth-child(4n+4) { --bulb: #5aaeff; }
/* The cap, then the bulb hanging from it. */
.season-christmas .season-garland i::after {
  top: 9px;
  width: 6px; height: 4px;
  margin-left: -3px;
  border-radius: 1px;
  background: #3b4a3c;
}
.season-christmas .season-garland i::before {
  top: 12px;
  width: 9px; height: 14px;
  margin-left: -4.5px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: var(--bulb);
  box-shadow: 0 0 8px 2px var(--bulb);
}

/* Snow: two layers of flakes, each a tile that falls exactly its own height
   and repeats, so the fall never jumps. */
.season-christmas .season-fall,
.season-newyear .season-fall,
.season-cyberpunk .season-fall {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
}
.season-fall::before,
.season-fall::after {
  content: "";
  position: absolute;
  /* Wider than the page, so the sideways drift never shows an edge. */
  left: -40px; right: -40px;
  top: -300px; bottom: 0;
}
.season-christmas .season-fall::before {
  top: -200px;
  background-image:
    radial-gradient(2.2px 2.2px at 20px 30px, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 80px 120px, #fff 60%, transparent 70%),
    radial-gradient(2.6px 2.6px at 150px 60px, #fff 60%, transparent 70%),
    radial-gradient(2px 2px at 110px 170px, #fff 60%, transparent 70%),
    radial-gradient(2.4px 2.4px at 180px 150px, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 45px 95px, #fff 60%, transparent 70%),
    radial-gradient(2.2px 2.2px at 130px 15px, #fff 60%, transparent 70%),
    radial-gradient(2px 2px at 65px 185px, #fff 60%, transparent 70%),
    radial-gradient(2.4px 2.4px at 170px 100px, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 10px 140px, #fff 60%, transparent 70%).85;
}
.season-christmas .season-fall::after {
  background-image:
    radial-gradient(3.6px 3.6px at 40px 80px, #fff 60%, transparent 70%),
    radial-gradient(4.2px 4.2px at 200px 220px, #fff 60%, transparent 70%),
    radial-gradient(3.4px 3.4px at 260px 40px, #fff 60%, transparent 70%),
    radial-gradient(3.8px 3.8px at 120px 180px, #fff 60%, transparent 70%),
    radial-gradient(3px 3px at 280px 270px, #fff 60%, transparent 70%),
    radial-gradient(4px 4px at 90px 10px, #fff 60%, transparent 70%);
  background-size: 300px 300px;
  opacity: 0.85;
}

/* ================================================================= New Year */

.season-newyear .season-garland {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='20'%3E%3Cpath d='M0 3Q28 19 56 3' fill='none' stroke='%23c9a646' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* Pennants hung along the wire rather than one at each dip. */
.season-newyear .season-garland i::before {
  top: 10px;
  width: 18px; height: 20px;
  margin-left: -9px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg, #ffe08a, #d9a520);
}
.season-newyear .season-garland i:nth-child(3n+2)::before { background: linear-gradient(160deg, #f4f6fb, #a9b2c3); }
.season-newyear .season-garland i:nth-child(3n+3)::before { background: linear-gradient(160deg, #ff9ac4, #d94f8a); }
.season-newyear .season-garland i::after {
  top: 6px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #ffe08a;
  box-shadow: 0 0 6px 2px rgba(255, 220, 120, 0.7);
  opacity: 0;
}
.season-newyear .season-garland i:nth-child(5n+1)::after { opacity: 1; }

/* Confetti: snow's tiles again, in gold, silver, rose and teal slips. */
.season-newyear .season-fall::before {
  top: -200px;
  background-image:
    radial-gradient(3px 3px at 30px 40px, #ffd34d 60%, transparent 70%),
    radial-gradient(2.6px 2.6px at 140px 60px, #f4f6fb 60%, transparent 70%),
    radial-gradient(3px 3px at 60px 150px, #ff7eb3 60%, transparent 70%),
    radial-gradient(2.6px 2.6px at 170px 170px, #5ee0d1 60%, transparent 70%),
    radial-gradient(2.8px 2.8px at 100px 110px, #ffd34d 60%, transparent 70%),
    radial-gradient(3px 3px at 15px 180px, #f4f6fb 60%, transparent 70%),
    radial-gradient(2.6px 2.6px at 185px 20px, #ff7eb3 60%, transparent 70%),
    radial-gradient(3px 3px at 120px 5px, #5ee0d1 60%, transparent 70%);
  background-size: 200px 200px;
  opacity: 0.9;
}
.season-newyear .season-fall::after {
  background-image:
    radial-gradient(4px 4px at 40px 80px, #ffd34d 60%, transparent 70%),
    radial-gradient(4px 4px at 210px 230px, #ff7eb3 60%, transparent 70%),
    radial-gradient(4px 4px at 250px 30px, #f4f6fb 60%, transparent 70%),
    radial-gradient(4px 4px at 120px 260px, #5ee0d1 60%, transparent 70%),
    radial-gradient(4px 4px at 280px 150px, #ffd34d 60%, transparent 70%),
    radial-gradient(4px 4px at 160px 120px, #ff7eb3 60%, transparent 70%);
  background-size: 300px 300px;
  opacity: 0.9;
}

/* ================================================================ Cyberpunk */

/* Neon on both sides of the top of the page, over faint scanlines. */
.season-neon {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 55% 110% at 8% -25%, rgba(0, 240, 255, 0.26), transparent 70%),
    radial-gradient(ellipse 55% 110% at 92% -25%, rgba(255, 43, 214, 0.24), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}

/* Data rain: snow's falling tiles, as thin streaks of cyan and magenta. */
.season-cyberpunk .season-fall::before {
  top: -200px;
  background-image:
    radial-gradient(0.9px 9px at 20px 30px, rgba(0, 240, 255, 0.9) 30%, transparent 100%),
    radial-gradient(0.9px 12px at 75px 120px, rgba(255, 43, 214, 0.85) 30%, transparent 100%),
    radial-gradient(0.9px 8px at 140px 60px, rgba(0, 240, 255, 0.9) 30%, transparent 100%),
    radial-gradient(0.9px 10px at 110px 170px, rgba(0, 240, 255, 0.9) 30%, transparent 100%),
    radial-gradient(0.9px 14px at 180px 150px, rgba(255, 43, 214, 0.85) 30%, transparent 100%),
    radial-gradient(0.9px 7px at 45px 95px, rgba(0, 240, 255, 0.9) 30%, transparent 100%),
    radial-gradient(0.9px 11px at 160px 10px, rgba(0, 240, 255, 0.9) 30%, transparent 100%);
  background-size: 200px 200px;
  opacity: 0.8;
}
.season-cyberpunk .season-fall::after {
  background-image:
    radial-gradient(1.2px 18px at 40px 80px, rgba(0, 240, 255, 0.9) 30%, transparent 100%),
    radial-gradient(1.2px 22px at 200px 220px, rgba(255, 43, 214, 0.85) 30%, transparent 100%),
    radial-gradient(1.2px 16px at 260px 40px, rgba(0, 240, 255, 0.9) 30%, transparent 100%),
    radial-gradient(1.2px 20px at 120px 180px, rgba(255, 43, 214, 0.85) 30%, transparent 100%),
    radial-gradient(1.2px 15px at 280px 270px, rgba(0, 240, 255, 0.9) 30%, transparent 100%);
  background-size: 300px 300px;
  opacity: 0.7;
}

/* A scanner beam, sweeping down and fading out. */
.season-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.9) 25%, rgba(255, 43, 214, 0.9) 75%, transparent);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.8), 0 0 28px rgba(255, 43, 214, 0.45);
  opacity: 0;
}

/* Flying traffic: a light trail with a bright head, crossing now and then at
   its own height and speed. Container units again, like the bats. */
.season-drones { position: absolute; left: 0; right: 0; top: 0; height: 210px; container-type: size; }
.sn-drone {
  position: absolute;
  left: 0; top: 30%;
  width: 90px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--trail, #00f0ff));
  opacity: 0;
}
.sn-drone::after {
  content: "";
  position: absolute;
  right: -2px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px var(--trail, #00f0ff);
}
.sn-drone-1 { top: 18%; }
.sn-drone-2 { top: 52%; --trail: #ff2bd6; width: 120px; }
.sn-drone-3 { top: 74%; width: 60px; }
.sn-drone-4 { top: 36%; --trail: #f9f871; width: 50px; height: 1px; }
.sn-drone-5 { top: 62%; --trail: #ff2bd6; width: 70px; }

/* Under the bar: a circuit trace, cyan to magenta and back, with diamond nodes
   and every so often a lead running down to a ring. */
.season-cyberpunk .season-garland {
  background-image: linear-gradient(90deg, #00f0ff, #ff2bd6 50%, #00f0ff);
  background-size: 100% 2px;
  background-position: 0 6px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6));
}
.season-cyberpunk .season-garland i { --neon: #00f0ff; }
.season-cyberpunk .season-garland i:nth-child(n+16):nth-child(-n+45) { --neon: #ff2bd6; }
.season-cyberpunk .season-garland i:nth-child(7n+5) { --neon: #f9f871; }
.season-cyberpunk .season-garland i::before {
  top: 4px;
  width: 6px; height: 6px;
  margin-left: -3px;
  transform: rotate(45deg);
  background: var(--neon);
  box-shadow: 0 0 6px var(--neon);
}
.season-cyberpunk .season-garland i:nth-child(5n+3)::before {
  top: 7px;
  width: 1px; height: 17px;
  margin-left: 0;
  transform: none;
  background: linear-gradient(var(--neon), transparent 160%);
  box-shadow: none;
}
.season-cyberpunk .season-garland i:nth-child(5n+3)::after {
  top: 24px;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  border: 1px solid var(--neon);
  box-shadow: 0 0 6px var(--neon);
}
.season-cyberpunk .season-garland i:nth-child(10n+8)::before { height: 27px; }
.season-cyberpunk .season-garland i:nth-child(10n+8)::after { top: 34px; }

/* ---------------------------------------------- Cyberpunk, Dark terminal */

/* The bar and the strip under it dimmed to near black, so the teal reads like
   a screen. It stops above the page heading rather than greying it. */
.style-dark .season-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(1, 4, 8, 0.86), rgba(1, 4, 8, 0.6) 90px, transparent 135px);
}
/* A fine grid, fading out downwards. */
.style-dark .season-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(25, 230, 200, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 230, 200, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent 85%);
  mask-image: linear-gradient(#000 30%, transparent 85%);
}
/* Falling hex code instead of streaks. */
.season-cyberpunk.style-dark .season-fall::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20font-family%3D%27Consolas%2CMenlo%2Cmonospace%27%20font-size%3D%2711%27%3E%3Ctext%20x%3D%2715%27%20y%3D%27216%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.05%27%3E6%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%27230%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.1%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%27244%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.15%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%2718%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.2%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%2732%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.25%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%2746%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.3%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%2760%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.35%27%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%2774%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.4%27%3EE%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%2788%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.45%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%27102%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.5%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%2715%27%20y%3D%27116%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3E9%3C%2Ftext%3E%3Ctext%20x%3D%2749%27%20y%3D%27148%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.09%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%2749%27%20y%3D%27162%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.18%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2749%27%20y%3D%27176%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.28%27%3E6%3C%2Ftext%3E%3Ctext%20x%3D%2749%27%20y%3D%27190%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.37%27%3E4%3C%2Ftext%3E%3Ctext%20x%3D%2749%27%20y%3D%27204%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.46%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2749%27%20y%3D%27218%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3EF%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%2761%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.07%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%2775%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.14%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%2789%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.21%27%3EA%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%27103%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.28%27%3E6%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%27117%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.34%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%27131%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.41%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%27145%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.48%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2775%27%20y%3D%27159%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3EF%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%2774%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.06%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%2788%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.12%27%3E5%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27102%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.18%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27116%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.24%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27130%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.31%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27144%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.37%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27158%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.43%27%3E2%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27172%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.49%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%27111%27%20y%3D%27186%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3E9%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27166%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.06%27%3EE%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27180%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.11%27%3E9%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27194%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.17%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27208%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.22%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27222%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.28%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27236%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.33%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%27250%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.39%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%2724%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.44%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%2738%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.5%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27133%27%20y%3D%2752%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%2753%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.05%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%2767%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.1%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%2781%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.15%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%2795%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.2%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27109%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.25%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27123%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.3%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27137%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.35%27%3EA%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27151%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.4%27%3E9%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27165%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.45%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27179%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.5%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27165%27%20y%3D%27193%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%27200%27%20y%3D%2724%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.09%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27200%27%20y%3D%2738%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.18%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27200%27%20y%3D%2752%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.28%27%3E5%3C%2Ftext%3E%3Ctext%20x%3D%27200%27%20y%3D%2766%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.37%27%3E4%3C%2Ftext%3E%3Ctext%20x%3D%27200%27%20y%3D%2780%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.46%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27200%27%20y%3D%2794%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%27217%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.08%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%27231%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.16%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%27245%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.24%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%2719%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.31%27%3E4%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%2733%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.39%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%2747%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.47%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27221%27%20y%3D%2761%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.95%27%3EB%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-size: 240px 240px;
  top: -240px;
  opacity: 0.6;
}
.season-cyberpunk.style-dark .season-fall::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27360%27%20font-family%3D%27Consolas%2CMenlo%2Cmonospace%27%20font-size%3D%2714%27%3E%3Ctext%20x%3D%2725%27%20y%3D%2729%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.05%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%2725%27%20y%3D%2746%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.1%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2725%27%20y%3D%2763%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.15%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2725%27%20y%3D%2780%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.2%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%2725%27%20y%3D%2797%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.25%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2725%27%20y%3D%27114%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.3%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2725%27%20y%3D%27131%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.75%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27241%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.03%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27258%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.06%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27275%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.1%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27292%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.13%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27309%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.16%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27326%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.19%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27343%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.22%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%27360%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.25%27%3E4%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%2717%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.29%27%3E2%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%2734%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.32%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%2794%27%20y%3D%2751%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.75%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%27355%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.04%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%27372%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.08%27%3E4%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%2729%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.12%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%2746%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.16%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%2763%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.19%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%2780%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.23%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%2797%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.27%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%27114%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.31%27%3E3%3C%2Ftext%3E%3Ctext%20x%3D%27151%27%20y%3D%27131%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.75%27%3E6%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27196%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.05%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27213%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.1%27%3ED%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27230%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.15%27%3EF%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27247%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.2%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27264%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.25%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27281%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.3%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%27212%27%20y%3D%27298%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.75%27%3E6%3C%2Ftext%3E%3Ctext%20x%3D%27268%27%20y%3D%2756%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.07%27%3E9%3C%2Ftext%3E%3Ctext%20x%3D%27268%27%20y%3D%2773%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.14%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%27268%27%20y%3D%2790%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.21%27%3EC%3C%2Ftext%3E%3Ctext%20x%3D%27268%27%20y%3D%27107%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.28%27%3E5%3C%2Ftext%3E%3Ctext%20x%3D%27268%27%20y%3D%27124%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.75%27%3EE%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%27345%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.03%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%27362%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.06%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%2719%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.1%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%2736%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.13%27%3EB%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%2753%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.16%27%3E8%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%2770%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.19%27%3EF%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%2787%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.22%27%3E5%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%27104%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.25%27%3E5%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%27121%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.29%27%3E7%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%27138%27%20fill%3D%27%2319e6c8%27%20fill-opacity%3D%270.32%27%3E2%3C%2Ftext%3E%3Ctext%20x%3D%27330%27%20y%3D%27155%27%20fill%3D%27%23c8fff6%27%20fill-opacity%3D%270.75%27%3E3%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-size: 360px 360px;
  top: -360px;
  opacity: 0.35;
}
.style-dark .season-scan {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(25, 230, 200, 0.85) 30%, rgba(25, 230, 200, 0.85) 70%, transparent);
  box-shadow: 0 0 10px rgba(25, 230, 200, 0.6);
}
/* A HUD frame — four corner brackets — with a status readout in its corner. */
.season-hud {
  position: absolute;
  left: 12px; right: 12px; top: 10px;
  height: 205px;
  opacity: 0.55;
  background:
    linear-gradient(#19e6c8, #19e6c8) left top / 22px 1px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) left top / 1px 22px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) right top / 22px 1px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) right top / 1px 22px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) left bottom / 22px 1px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) left bottom / 1px 22px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) right bottom / 22px 1px no-repeat,
    linear-gradient(#19e6c8, #19e6c8) right bottom / 1px 22px no-repeat;
}
.season-hud::after {
  content: "LINK OK  //  NODE 7F3A  //  SYNC 99.8%  _";
  position: absolute;
  right: 8px; bottom: 6px;
  font: 10px/1 Consolas, Menlo, monospace;
  letter-spacing: 0.14em;
  color: #19e6c8;
  white-space: nowrap;
}
@media (max-width: 720px) { .season-hud::after { content: "LINK OK  //  7F3A  _"; } }

/* Under the bar: a thin data bus, square teal LEDs with the odd amber one, and
   leads down to small chips; packets of light run along it. */
.season-cyberpunk.style-dark .season-garland {
  background-image: linear-gradient(90deg, rgba(25, 230, 200, 0.15), rgba(25, 230, 200, 0.75) 50%, rgba(25, 230, 200, 0.15));
  background-size: 100% 1px;
  filter: drop-shadow(0 0 3px rgba(25, 230, 200, 0.45));
}
.style-dark .season-garland i:nth-child(n):nth-child(n) { --neon: #19e6c8; }
.style-dark .season-garland i:nth-child(9n+4):nth-child(n) { --neon: #ffb000; }
.style-dark .season-garland i:not(:nth-child(5n+3))::before {
  top: 4px;
  width: 4px; height: 4px;
  margin-left: -2px;
  transform: none;
}
.style-dark .season-garland i:nth-child(5n+3)::after {
  width: 8px; height: 5px;
  margin-left: -4px;
  border-radius: 1px;
  background: rgba(25, 230, 200, 0.15);
}
.sn-packet {
  position: absolute;
  left: 0; top: 5px;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #c8fff6);
  box-shadow: 0 0 6px #19e6c8;
  opacity: 0;
}

/* ================================================================== preview */

.season-note {
  /* At the top, under the string: the header's layer sits below the cookie
     banner and the lock warning, so the bottom edge is theirs. */
  position: fixed;
  right: 16px; top: calc(var(--head-h) + 52px);
  z-index: 3;
  pointer-events: auto;
  max-width: calc(100vw - 32px);
  padding: 8px 14px;
  border-radius: 999px;
  background: #2a1b3d;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.season-note:hover { color: #fff; background: #3a2754; text-decoration: none; }

/* ================================================================== motion */

@media (prefers-reduced-motion: no-preference) {
  .season-on:not(.season-still) .sn-bat { animation: bat-fly-1 22s linear infinite; }
  .season-on:not(.season-still) .sn-bat i { animation: bat-flap 0.22s ease-in-out infinite alternate; }
  .season-on:not(.season-still) .sn-bat-2 { animation: bat-fly-2 27s linear -6s infinite; }
  .season-on:not(.season-still) .sn-bat-3 { animation: bat-fly-3 19s linear -11s infinite; }
  .season-on:not(.season-still) .sn-bat-4 { animation: bat-fly-4 31s linear -3s infinite; }
  .season-on:not(.season-still) .sn-bat-5 { animation: bat-fly-4 25s linear -15s infinite; }
  .season-on:not(.season-still) .sn-bat-6 { animation: bat-fly-1 33s linear -20s infinite; }
  .season-on:not(.season-still) .sn-bat-2 i { animation-duration: 0.18s; }
  .season-on:not(.season-still) .sn-bat-6 i { animation-duration: 0.16s; }

  /* Lanterns flicker, each on its own beat; spiders bob on their threads. */
  .season-on:not(.season-still).season-halloween .season-garland i::before { animation: lantern 2.6s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-halloween .season-garland i:nth-child(3n)::before { animation-duration: 3.4s; animation-delay: -1s; }
  .season-on:not(.season-still).season-halloween .season-garland i:nth-child(7n+4)::before { animation: thread 4s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-halloween .season-garland i:nth-child(7n+4)::after { animation: spider 4s ease-in-out infinite alternate; }

  .season-on:not(.season-still).season-christmas .season-garland i::before { animation: twinkle 1.8s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-christmas .season-garland i:nth-child(3n)::before { animation-duration: 2.4s; animation-delay: -0.7s; }
  .season-on:not(.season-still).season-christmas .season-garland i:nth-child(5n+1)::before { animation-duration: 1.3s; animation-delay: -1.1s; }

  .season-on:not(.season-still) .season-fall::before { animation: fall-200 11s linear infinite; }
  .season-on:not(.season-still) .season-fall::after { animation: fall-300 17s linear infinite; }
  .season-on:not(.season-still).season-newyear .season-garland i:nth-child(5n+1)::after { animation: twinkle 1.4s ease-in-out infinite alternate; }

  /* Rain falls straight and fast; the beam sweeps; the traffic crosses now and
     then; a pulse runs along the circuit node by node. */
  .season-on:not(.season-still).season-cyberpunk .season-fall::before { animation: rain-200 2.6s linear infinite; }
  .season-on:not(.season-still).season-cyberpunk .season-fall::after { animation: rain-300 3.8s linear infinite; }
  .season-on:not(.season-still) .season-scan { animation: scan 7s ease-in-out infinite; }
  .season-on:not(.season-still) .sn-drone-1 { animation: drone-ltr 9s linear -2s infinite; }
  .season-on:not(.season-still) .sn-drone-2 { animation: drone-rtl 13s linear -7s infinite; }
  .season-on:not(.season-still) .sn-drone-3 { animation: drone-ltr 11s linear -5s infinite; }
  .season-on:not(.season-still) .sn-drone-4 { animation: drone-rtl 17s linear -1s infinite; }
  .season-on:not(.season-still) .sn-drone-5 { animation: drone-ltr 15s linear -11s infinite; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i::before,
  .season-on:not(.season-still).season-cyberpunk .season-garland i::after { animation: pulse 2.4s linear infinite; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+2)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+2)::after { animation-delay: -2.1s; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+3)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+3)::after { animation-delay: -1.8s; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+4)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+4)::after { animation-delay: -1.5s; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+5)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+5)::after { animation-delay: -1.2s; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+6)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+6)::after { animation-delay: -0.9s; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+7)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n+7)::after { animation-delay: -0.6s; }
  .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n)::before, .season-on:not(.season-still).season-cyberpunk .season-garland i:nth-child(8n)::after { animation-delay: -0.3s; }

  /* Dark terminal: code falls slower than rain, the grid drifts up, the
     readout's cursor blinks, packets run along the bus. */
  .season-on:not(.season-still) .style-dark .season-fall::before { animation: code-240 9s linear infinite; }
  .season-on:not(.season-still) .style-dark .season-fall::after { animation: code-360 16s linear infinite; }
  .season-on:not(.season-still) .style-dark .season-grid { animation: grid-drift 6s linear infinite; }
  .season-on:not(.season-still) .season-hud::after { animation: blink 1.1s steps(1) infinite; }
  .season-on:not(.season-still) .sn-packet-1 { animation: packet 3.6s linear infinite; }
  .season-on:not(.season-still) .sn-packet-2 { animation: packet 5.2s linear -2.3s infinite; }
  .season-on:not(.season-still) .sn-packet-3 { animation: packet 4.4s linear -3.9s infinite; }
}

/* Without motion the bats and the traffic would all sit stacked in one spot,
   and the beam would be a line stuck across the page. */
.season-still .season-bats, .season-still .season-drones, .season-still .season-scan { display: none; }
@media (prefers-reduced-motion: reduce) { .season-bats, .season-drones, .season-scan { display: none; } }

@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35) translateY(-3px); } }

/* Six wandering loops, in container units: 0 to 100 across, 0 to 100 down. */
@keyframes bat-fly-1 {
  0%   { opacity: 0; transform: translate(-6cqw, 55cqh) scaleX(1); }
  6%   { opacity: 1; }
  25%  { transform: translate(28cqw, 18cqh) scaleX(1); }
  45%  { transform: translate(52cqw, 70cqh) scaleX(1); }
  55%  { transform: translate(60cqw, 50cqh) scaleX(-1); }
  70%  { transform: translate(44cqw, 25cqh) scaleX(-1); }
  80%  { transform: translate(56cqw, 30cqh) scaleX(1); }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translate(106cqw, 40cqh) scaleX(1); }
}
@keyframes bat-fly-2 {
  0%   { opacity: 0; transform: translate(106cqw, 30cqh) scaleX(-1); }
  6%   { opacity: 1; }
  30%  { transform: translate(70cqw, 75cqh) scaleX(-1); }
  50%  { transform: translate(40cqw, 20cqh) scaleX(-1); }
  60%  { transform: translate(32cqw, 45cqh) scaleX(1); }
  72%  { transform: translate(48cqw, 80cqh) scaleX(1); }
  82%  { transform: translate(30cqw, 60cqh) scaleX(-1); }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-6cqw, 35cqh) scaleX(-1); }
}
@keyframes bat-fly-3 {
  0%   { opacity: 0; transform: translate(20cqw, 105cqh) scaleX(1); }
  8%   { opacity: 1; }
  25%  { transform: translate(35cqw, 40cqh) scaleX(1); }
  40%  { transform: translate(55cqw, 15cqh) scaleX(1); }
  50%  { transform: translate(68cqw, 45cqh) scaleX(-1); }
  62%  { transform: translate(50cqw, 70cqh) scaleX(-1); }
  75%  { transform: translate(38cqw, 35cqh) scaleX(1); }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate(80cqw, -10cqh) scaleX(1); }
}
@keyframes bat-fly-4 {
  0%   { opacity: 0; transform: translate(-6cqw, 20cqh) scaleX(1); }
  6%   { opacity: 1; }
  20%  { transform: translate(18cqw, 60cqh) scaleX(1); }
  35%  { transform: translate(38cqw, 30cqh) scaleX(1); }
  48%  { transform: translate(62cqw, 82cqh) scaleX(1); }
  58%  { transform: translate(78cqw, 40cqh) scaleX(1); }
  68%  { transform: translate(86cqw, 60cqh) scaleX(-1); }
  80%  { transform: translate(72cqw, 20cqh) scaleX(1); }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translate(106cqw, 45cqh) scaleX(1); }
}

@keyframes lantern { from { filter: drop-shadow(0 0 3px rgba(255, 140, 20, 0.5)) brightness(0.9); } to { filter: drop-shadow(0 0 8px rgba(255, 150, 30, 0.95)) brightness(1.12); } }
@keyframes thread { from { transform: scaleY(0.75); } to { transform: scaleY(1.15); } }
@keyframes spider { from { transform: translateY(-5px); } to { transform: translateY(3px); } }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes fall-200 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-20px, 200px, 0); } }
@keyframes code-240 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 240px, 0); } }
@keyframes code-360 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 360px, 0); } }
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 0 -28px; } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes packet {
  0%   { opacity: 0; transform: translateX(-30px); }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(100vw); }
}
@keyframes rain-200 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 200px, 0); } }
@keyframes rain-300 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 300px, 0); } }
@keyframes scan {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  55%  { opacity: 0.8; transform: translateY(220px); }
  60%, 100% { opacity: 0; transform: translateY(230px); }
}
@keyframes drone-ltr {
  0%   { opacity: 0; transform: translateX(-12cqw); }
  3%   { opacity: 1; }
  42%  { opacity: 1; }
  45%, 100% { opacity: 0; transform: translateX(112cqw); }
}
@keyframes drone-rtl {
  0%   { opacity: 0; transform: translateX(112cqw) scaleX(-1); }
  3%   { opacity: 1; }
  42%  { opacity: 1; }
  45%, 100% { opacity: 0; transform: translateX(-12cqw) scaleX(-1); }
}
@keyframes pulse {
  0%, 30%, 100% { opacity: 0.45; }
  8%  { opacity: 1; filter: brightness(1.6); }
}
@keyframes fall-300 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(30px, 300px, 0); } }

/* ============================================== more looks (FW 1.56.0) ===

   A motif's first style is the motif itself; another style is drawn under its
   own class, season-<motif>-<style>, so it has none of the first one's rules
   to undo (season_look()). Small things that move on their own path are spans
   in a .season-swarm, a box in container units like the bats'. */

.season {
  --m-heart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2022%27%3E%3Cpath%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3C%2Fsvg%3E");
  --m-leaf: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201.5l1.7%204.4%203-1.5-.6%204.6%204.1-1.3-1.4%203.6%203.2%201.3-4.8%202.5.8%202.7-4.6-1-1.4%203.4-1.4-3.4-4.6%201%20.8-2.7-4.8-2.5%203.2-1.3-1.4-3.6%204.1%201.3-.6-4.6%203%201.5z%27%2F%3E%3Cpath%20d%3D%27M11.4%2015h1.2v8h-1.2z%27%2F%3E%3C%2Fsvg%3E");
  --m-petal: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2014%27%3E%3Cpath%20d%3D%27M1%207C4%201%2013%200%2019%204c-2.5.2-3.2%201.6-2.4%203-.8%201.4-.1%202.8%202.4%203C13%2014%204%2013%201%207z%27%2F%3E%3C%2Fsvg%3E");
  --m-star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%201.5l3.1%206.6%207.2.9-5.3%205%201.4%207.1L12%2017.6%205.6%2021.1%207%2014l-5.3-5%207.2-.9z%27%2F%3E%3C%2Fsvg%3E");
  --m-blossom: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%276.5%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2717.2%27%20cy%3D%2710.3%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%2715.2%27%20cy%3D%2716.6%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%278.8%27%20cy%3D%2716.6%27%20r%3D%275%27%2F%3E%3Ccircle%20cx%3D%276.8%27%20cy%3D%2710.3%27%20r%3D%275%27%2F%3E%3C%2Fsvg%3E");
}
.season-swarm { position: absolute; left: 0; right: 0; top: 0; height: 230px; container-type: size; }
.season-swarm > :where(.sn-p) { position: absolute; left: 0; top: 0; opacity: 0; }
.season-veil.soft { position: absolute; inset: 0; background: linear-gradient(rgba(4, 6, 22, 0.6), rgba(4, 6, 22, 0.3) 90px, transparent 140px); }
.season-veil.deep { position: absolute; inset: 0; background: linear-gradient(rgba(2, 4, 14, 0.86), rgba(2, 4, 14, 0.55) 90px, transparent 140px); }
.season-stars {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 85%);
  mask-image: linear-gradient(#000 40%, transparent 85%);
}
.season-stars.stars-1 {
  background-image:
    radial-gradient(1.4px 1.4px at 20px 18px, #fff 60%, transparent 70%),
    radial-gradient(1px 1px at 70px 60px, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 130px 25px, #fff 60%, transparent 70%),
    radial-gradient(1.2px 1.2px at 190px 90px, #fff 60%, transparent 70%),
    radial-gradient(1px 1px at 40px 110px, #fff 60%, transparent 70%),
    radial-gradient(1.6px 1.6px at 160px 128px, #fff 60%, transparent 70%),
    radial-gradient(1.1px 1.1px at 100px 100px, #fff 60%, transparent 70%),
    radial-gradient(1px 1px at 205px 10px, #fff 60%, transparent 70%);
  background-size: 220px 140px;
  opacity: 0.8;
}
.season-stars.stars-2 {
  background-image:
    radial-gradient(2.2px 2.2px at 50px 40px, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 230px 120px, #fff 60%, transparent 70%),
    radial-gradient(2.6px 2.6px at 320px 30px, #fff 60%, transparent 70%),
    radial-gradient(2px 2px at 140px 170px, #fff 60%, transparent 70%);
  background-size: 360px 200px;
  opacity: 0.6;
}

/* ------------------------------------------------- Halloween · Haunted fog */

.season-halloween-fog .season-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 120% at 50% -35%, rgba(110, 210, 160, 0.2), transparent 70%),
    radial-gradient(ellipse 45% 100% at 0% -20%, rgba(120, 60, 170, 0.32), transparent 70%),
    radial-gradient(ellipse 45% 100% at 100% -20%, rgba(120, 60, 170, 0.32), transparent 70%);
}
.sn-fog {
  position: absolute;
  left: 0; right: 0;
  background-repeat: repeat-x;
}
.sn-fog-1 {
  top: 60px; height: 130px;
  background-size: 900px 100%;
  background-image:
    radial-gradient(ellipse 28% 45% at 15% 55%, rgba(215, 225, 240, 0.26), transparent 70%),
    radial-gradient(ellipse 22% 38% at 48% 45%, rgba(215, 225, 240, 0.2), transparent 70%),
    radial-gradient(ellipse 30% 50% at 82% 60%, rgba(215, 225, 240, 0.24), transparent 70%);
}
.sn-fog-2 {
  top: 110px; height: 120px;
  background-size: 1300px 100%;
  background-image:
    radial-gradient(ellipse 25% 45% at 25% 50%, rgba(190, 230, 215, 0.2), transparent 70%),
    radial-gradient(ellipse 30% 40% at 70% 55%, rgba(190, 230, 215, 0.18), transparent 70%);
}
.sn-ghost {
  width: 34px; height: 40px;
  margin: -20px 0 0 -17px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2038%27%3E%3Cpath%20d%3D%27M16%202C8.5%202%204%208%204%2015.5V36l4-3.2%204%203.2%204-3.2%204%203.2%204-3.2%204%203.2V15.5C28%208%2023.5%202%2016%202z%27%20fill%3D%27%23eef6ff%27%20fill-opacity%3D%27.88%27%2F%3E%3Cellipse%20cx%3D%2711.5%27%20cy%3D%2716%27%20rx%3D%272.4%27%20ry%3D%273.2%27%20fill%3D%27%231b2a3a%27%2F%3E%3Cellipse%20cx%3D%2720.5%27%20cy%3D%2716%27%20rx%3D%272.4%27%20ry%3D%273.2%27%20fill%3D%27%231b2a3a%27%2F%3E%3Cellipse%20cx%3D%2716%27%20cy%3D%2724%27%20rx%3D%272.6%27%20ry%3D%273.4%27%20fill%3D%27%231b2a3a%27%20fill-opacity%3D%27.8%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(180, 255, 220, 0.55));
}
.sn-ghost-2 { width: 26px; height: 31px; margin: -15px 0 0 -13px; }
.season-halloween-fog .season-garland { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2720%27%3E%3Cpath%20d%3D%27M0%203Q28%2019%2056%203%27%20fill%3D%27none%27%20stroke%3D%27%235b6b63%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fsvg%3E"); }
.season-halloween-fog .season-garland i::before {
  top: 9px;
  width: 14px; height: 17px;
  margin-left: -7px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2038%27%3E%3Cpath%20d%3D%27M16%202C8.5%202%204%208%204%2015.5V36l4-3.2%204%203.2%204-3.2%204%203.2%204-3.2%204%203.2V15.5C28%208%2023.5%202%2016%202z%27%20fill%3D%27%23eef6ff%27%20fill-opacity%3D%27.88%27%2F%3E%3Cellipse%20cx%3D%2711.5%27%20cy%3D%2716%27%20rx%3D%272.4%27%20ry%3D%273.2%27%20fill%3D%27%231b2a3a%27%2F%3E%3Cellipse%20cx%3D%2720.5%27%20cy%3D%2716%27%20rx%3D%272.4%27%20ry%3D%273.2%27%20fill%3D%27%231b2a3a%27%2F%3E%3Cellipse%20cx%3D%2716%27%20cy%3D%2724%27%20rx%3D%272.6%27%20ry%3D%273.4%27%20fill%3D%27%231b2a3a%27%20fill-opacity%3D%27.8%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(170, 255, 210, 0.75));
}
.season-halloween-fog .season-garland i:nth-child(even)::before {
  top: 11px;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #effff6, #74e0a8 60%, transparent 72%);
  filter: drop-shadow(0 0 6px rgba(120, 240, 170, 0.9));
}

/* ------------------------------------------- Christmas · Northern lights */

.sn-aurora {
  position: absolute;
  left: -20%; right: -20%;
  top: -30px; height: 210px;
  filter: blur(16px);
  mix-blend-mode: screen;
  opacity: 0.8;
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
.sn-aurora-1 { background: linear-gradient(100deg, transparent 8%, rgba(60, 255, 170, 0.55) 28%, rgba(60, 220, 255, 0.35) 45%, transparent 62%); }
.sn-aurora-2 { top: -10px; background: linear-gradient(80deg, transparent 30%, rgba(150, 90, 255, 0.45) 50%, rgba(60, 255, 190, 0.35) 68%, transparent 85%); }
.sn-aurora-3 { top: -50px; background: linear-gradient(95deg, transparent 50%, rgba(80, 255, 160, 0.4) 70%, rgba(200, 100, 255, 0.3) 85%, transparent 98%); }
.season-christmas-aurora .season-fall {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
}
.season-christmas-aurora .season-fall::before {
  top: -200px;
  background-image:
    radial-gradient(1.6px 1.6px at 30px 40px, #fff 60%, transparent 70%),
    radial-gradient(1.2px 1.2px at 120px 90px, #fff 60%, transparent 70%),
    radial-gradient(1.8px 1.8px at 170px 160px, #fff 60%, transparent 70%),
    radial-gradient(1.3px 1.3px at 70px 180px, #fff 60%, transparent 70%);
  background-size: 200px 200px;
  opacity: 0.75;
}
/* Icicles along an edge of ice: two to each step, of three lengths. */
.season-christmas-aurora .season-garland {
  background-image: linear-gradient(rgba(225, 242, 255, 0.85), rgba(225, 242, 255, 0.85));
  background-size: 100% 2px;
  background-position: 0 2px;
  background-repeat: no-repeat;
}
.season-christmas-aurora .season-garland i::before,
.season-christmas-aurora .season-garland i::after {
  top: 3px;
  width: 8px; height: 22px;
  margin-left: -4px;
  clip-path: polygon(0 0, 100% 0, 55% 100%);
  background: linear-gradient(rgba(245, 252, 255, 0.95), rgba(160, 210, 255, 0.45));
}
.season-christmas-aurora .season-garland i::before { left: 30%; }
.season-christmas-aurora .season-garland i::after { left: 74%; width: 6px; height: 13px; margin-left: -3px; }
.season-christmas-aurora .season-garland i:nth-child(3n)::before { height: 31px; }
.season-christmas-aurora .season-garland i:nth-child(5n+2)::before { height: 15px; }
.season-christmas-aurora .season-garland i:nth-child(4n+1)::after { height: 19px; }

/* ------------------------------------------------- New Year · Fireworks */

.sn-burst {
  width: 3px; height: 3px;
  border-radius: 50%;
  color: #ffd34d;
  box-shadow: 30px 0px 0 0 currentColor, 27.7px 11.5px 0 0 currentColor, 21.2px 21.2px 0 0 currentColor, 11.5px 27.7px 0 0 currentColor, 0px 30px 0 0 currentColor, -11.5px 27.7px 0 0 currentColor, -21.2px 21.2px 0 0 currentColor, -27.7px 11.5px 0 0 currentColor, -30px 0px 0 0 currentColor, -27.7px -11.5px 0 0 currentColor, -21.2px -21.2px 0 0 currentColor, -11.5px -27.7px 0 0 currentColor, -0px -30px 0 0 currentColor, 11.5px -27.7px 0 0 currentColor, 21.2px -21.2px 0 0 currentColor, 27.7px -11.5px 0 0 currentColor;
}
.sn-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 15px 0px 0 0 currentColor, 10.6px 10.6px 0 0 currentColor, 0px 15px 0 0 currentColor, -10.6px 10.6px 0 0 currentColor, -15px 0px 0 0 currentColor, -10.6px -10.6px 0 0 currentColor, -0px -15px 0 0 currentColor, 10.6px -10.6px 0 0 currentColor;
}
.sn-burst-1 { left: 12cqw; top: 38cqh; color: #ffd34d; }
.sn-burst-2 { left: 33cqw; top: 22cqh; color: #ff6fb5; }
.sn-burst-3 { left: 57cqw; top: 46cqh; color: #6fe3ff; }
.sn-burst-4 { left: 79cqw; top: 26cqh; color: #b6ff6f; }
.sn-burst-5 { left: 45cqw; top: 72cqh; color: #ffffff; }
.sn-burst-6 { left: 92cqw; top: 60cqh; color: #ff9f43; }
.season-newyear-fireworks .season-garland { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2720%27%3E%3Cpath%20d%3D%27M0%203Q28%2019%2056%203%27%20fill%3D%27none%27%20stroke%3D%27%23c9a646%27%20stroke-width%3D%271.4%27%2F%3E%3C%2Fsvg%3E"); }
.season-newyear-fireworks .season-garland i::before {
  top: 9px;
  width: 14px; height: 14px;
  margin-left: -7px;
  background: linear-gradient(#fff1b8, #e0a800);
  -webkit-mask: var(--m-star) center / contain no-repeat;
  mask: var(--m-star) center / contain no-repeat;
}
.season-newyear-fireworks .season-garland i:nth-child(even)::before {
  top: 11px;
  width: 10px; height: 10px;
  margin-left: -5px;
  background: linear-gradient(#ffffff, #a9b2c3);
}

/* ---------------------------------------------------------- Valentine's */

.season-valentine .season-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 120% at 50% -30%, rgba(255, 80, 140, 0.24), transparent 70%),
    radial-gradient(ellipse 40% 90% at 90% -20%, rgba(255, 150, 190, 0.2), transparent 70%);
}
/* Hearts rise: snow's tiles, moving up instead of down, fading in and out. */
.season-rise {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 55%, transparent);
  mask-image: linear-gradient(transparent, #000 25%, #000 55%, transparent);
}
.season-rise::before,
.season-rise::after {
  content: "";
  position: absolute;
  left: -40px; right: -40px;
  top: 0; bottom: -320px;
}
.season-valentine .season-rise::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cpath%20transform%3D%27translate%2818%2030%29%20scale%280.6%29%27%20fill%3D%27%23ff4d8d%27%20fill-opacity%3D%270.8%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3Cpath%20transform%3D%27translate%28120%2070%29%20scale%280.45%29%27%20fill%3D%27%23ff8fb8%27%20fill-opacity%3D%270.7%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3Cpath%20transform%3D%27translate%2870%20140%29%20scale%280.7%29%27%20fill%3D%27%23ff2e63%27%20fill-opacity%3D%270.75%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3Cpath%20transform%3D%27translate%28165%20160%29%20scale%280.5%29%27%20fill%3D%27%23ff8fb8%27%20fill-opacity%3D%270.7%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3C%2Fsvg%3E") 0 0 / 200px 200px; }
.season-valentine .season-rise::after { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27320%27%20height%3D%27320%27%3E%3Cpath%20transform%3D%27translate%2840%2060%29%20scale%280.95%29%27%20fill%3D%27%23ff2e63%27%20fill-opacity%3D%270.55%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3Cpath%20transform%3D%27translate%28220%20200%29%20scale%281.1%29%27%20fill%3D%27%23ff4d8d%27%20fill-opacity%3D%270.5%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3Cpath%20transform%3D%27translate%28260%2040%29%20scale%280.8%29%27%20fill%3D%27%23ffb3cf%27%20fill-opacity%3D%270.6%27%20d%3D%27M12%2021S3%2015.4%203%209a5%205%200%200%201%209-3%205%205%200%200%201%209%203c0%206.4-9%2012-9%2012z%27%2F%3E%3C%2Fsvg%3E") 0 0 / 320px 320px; }
.season-valentine .season-garland { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2720%27%3E%3Cpath%20d%3D%27M0%203Q28%2019%2056%203%27%20fill%3D%27none%27%20stroke%3D%27%23b0477a%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fsvg%3E"); }
.season-valentine .season-garland i::before {
  top: 9px;
  width: 14px; height: 13px;
  margin-left: -7px;
  background: #ff3d7f;
  -webkit-mask: var(--m-heart) center / contain no-repeat;
  mask: var(--m-heart) center / contain no-repeat;
}
.season-valentine .season-garland i:nth-child(even)::before { background: #ff9cc2; width: 11px; height: 10px; margin-left: -5.5px; top: 10px; }

/* --------------------------------------------------------------- Spring */

.season-spring .season-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 110% at 20% -30%, rgba(255, 180, 210, 0.24), transparent 70%),
    radial-gradient(ellipse 55% 110% at 80% -30%, rgba(170, 240, 210, 0.18), transparent 70%);
}
.sn-petal {
  width: 14px; height: 10px;
  background: linear-gradient(135deg, #ffe3ee, #ff9cc4);
  -webkit-mask: var(--m-petal) center / contain no-repeat;
  mask: var(--m-petal) center / contain no-repeat;
}
.sn-petal-1 { left: 4cqw; } .sn-petal-2 { left: 14cqw; } .sn-petal-3 { left: 25cqw; } .sn-petal-4 { left: 36cqw; } .sn-petal-5 { left: 47cqw; }
.sn-petal-6 { left: 58cqw; } .sn-petal-7 { left: 68cqw; } .sn-petal-8 { left: 77cqw; } .sn-petal-9 { left: 87cqw; } .sn-petal-10 { left: 96cqw; }
.sn-petal-3, .sn-petal-7 { width: 10px; height: 7px; }
.season-spring .season-garland { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2720%27%3E%3Cpath%20d%3D%27M0%203Q28%2019%2056%203%27%20fill%3D%27none%27%20stroke%3D%27%23c9a0b8%27%20stroke-width%3D%271.4%27%2F%3E%3C%2Fsvg%3E"); }
.season-spring .season-garland i { --flag: #ffc4da; }
.season-spring .season-garland i:nth-child(4n+2) { --flag: #bdf0d8; }
.season-spring .season-garland i:nth-child(4n+3) { --flag: #fff1a8; }
.season-spring .season-garland i:nth-child(4n+4) { --flag: #d9c8ff; }
.season-spring .season-garland i::before {
  top: 9px;
  width: 16px; height: 18px;
  margin-left: -8px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--flag);
}
.season-spring .season-garland i:nth-child(3n)::before {
  top: 8px;
  width: 14px; height: 14px;
  margin-left: -7px;
  clip-path: none;
  background: radial-gradient(circle at 50% 56%, #ffd166 0 16%, #ffd0e2 20%);
  -webkit-mask: var(--m-blossom) center / contain no-repeat;
  mask: var(--m-blossom) center / contain no-repeat;
}

/* --------------------------------------------------------- Summer night */

.season-summer .season-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(28, 18, 58, 0.5), transparent 140px),
    radial-gradient(ellipse 60% 100% at 50% -30%, rgba(255, 180, 90, 0.16), transparent 70%);
}
.sn-fly {
  width: 5px; height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #fdffd0, #c8ff4d);
  box-shadow: 0 0 8px 3px rgba(210, 255, 90, 0.6);
}
.sn-fly-1 { left: 6cqw; top: 30cqh; } .sn-fly-2 { left: 14cqw; top: 70cqh; } .sn-fly-3 { left: 22cqw; top: 45cqh; }
.sn-fly-4 { left: 31cqw; top: 80cqh; } .sn-fly-5 { left: 39cqw; top: 35cqh; } .sn-fly-6 { left: 46cqw; top: 62cqh; }
.sn-fly-7 { left: 53cqw; top: 25cqh; } .sn-fly-8 { left: 61cqw; top: 75cqh; } .sn-fly-9 { left: 68cqw; top: 40cqh; }
.sn-fly-10 { left: 75cqw; top: 66cqh; } .sn-fly-11 { left: 82cqw; top: 30cqh; } .sn-fly-12 { left: 88cqw; top: 78cqh; }
.sn-fly-13 { left: 94cqw; top: 48cqh; } .sn-fly-14 { left: 3cqw; top: 58cqh; }
.season-summer .season-garland { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2720%27%3E%3Cpath%20d%3D%27M0%203Q28%2019%2056%203%27%20fill%3D%27none%27%20stroke%3D%27%236b4a2a%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fsvg%3E"); }
.season-summer .season-garland i { --lamp: radial-gradient(circle at 50% 45%, #fff3c4, #ffb340 55%, #e8711a); --halo: rgba(255, 170, 60, 0.55); }
.season-summer .season-garland i:nth-child(3n+2) { --lamp: radial-gradient(circle at 50% 45%, #ffe6f0, #ff7aa8 55%, #d9406f); --halo: rgba(255, 120, 170, 0.5); }
.season-summer .season-garland i:nth-child(3n) { --lamp: radial-gradient(circle at 50% 45%, #fffbe0, #ffe066 55%, #e0b020); --halo: rgba(255, 225, 90, 0.5); }
.season-summer .season-garland i::before {
  top: 10px;
  width: 17px; height: 15px;
  margin-left: -8.5px;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 1.5px, transparent 1.5px 4.5px), var(--lamp);
  box-shadow: 0 0 10px 2px var(--halo);
}
.season-summer .season-garland i::after {
  top: 8px;
  width: 7px; height: 3px;
  margin-left: -3.5px;
  border-radius: 1px;
  background: #5a3a1a;
}

/* -------------------------------------------------------- Autumn leaves */

.season-autumn .season-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 120% at 30% -30%, rgba(255, 150, 40, 0.24), transparent 70%),
    radial-gradient(ellipse 50% 110% at 85% -30%, rgba(200, 60, 30, 0.2), transparent 70%);
}
.sn-leaf {
  width: 18px; height: 18px;
  background: #d9381e;
  -webkit-mask: var(--m-leaf) center / contain no-repeat;
  mask: var(--m-leaf) center / contain no-repeat;
}
.sn-leaf-2, .sn-leaf-6, .sn-leaf-9 { background: #f28c28; }
.sn-leaf-3, .sn-leaf-7 { background: #f2c12e; width: 14px; height: 14px; }
.sn-leaf-5, .sn-leaf-10 { background: #b8471f; width: 22px; height: 22px; }
.sn-leaf-1 { left: 5cqw; } .sn-leaf-2 { left: 15cqw; } .sn-leaf-3 { left: 26cqw; } .sn-leaf-4 { left: 37cqw; } .sn-leaf-5 { left: 48cqw; }
.sn-leaf-6 { left: 58cqw; } .sn-leaf-7 { left: 69cqw; } .sn-leaf-8 { left: 78cqw; } .sn-leaf-9 { left: 88cqw; } .sn-leaf-10 { left: 95cqw; }
.season-autumn .season-garland { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2756%27%20height%3D%2720%27%3E%3Cpath%20d%3D%27M0%203Q28%2019%2056%203%27%20fill%3D%27none%27%20stroke%3D%27%238a5a2b%27%20stroke-width%3D%271.6%27%2F%3E%3C%2Fsvg%3E"); }
.season-autumn .season-garland i { --leaf: #d9381e; }
.season-autumn .season-garland i:nth-child(3n+2) { --leaf: #f28c28; }
.season-autumn .season-garland i:nth-child(3n) { --leaf: #f2c12e; }
.season-autumn .season-garland i::before {
  top: 9px;
  width: 16px; height: 16px;
  margin-left: -8px;
  background: var(--leaf);
  -webkit-mask: var(--m-leaf) center / contain no-repeat;
  mask: var(--m-leaf) center / contain no-repeat;
  transform: rotate(-20deg);
}
.season-autumn .season-garland i:nth-child(even)::before { transform: rotate(25deg); }
/* Every fourth an acorn. */
.season-autumn .season-garland i:nth-child(4n)::before {
  top: 12px;
  width: 9px; height: 11px;
  margin-left: -4.5px;
  border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
  background: #a8692e;
  -webkit-mask: none;
  mask: none;
  transform: none;
}
.season-autumn .season-garland i:nth-child(4n)::after {
  top: 9px;
  width: 11px; height: 5px;
  margin-left: -5.5px;
  border-radius: 5px 5px 2px 2px;
  background: #5c3a1a;
}

/* ---------------------------------------------------- Cyberpunk · Matrix */

.style-matrix .season-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 6, 2, 0.88), rgba(0, 6, 2, 0.6) 90px, transparent 135px);
}
.season-cyberpunk.style-matrix .season-fall::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%20font-family%3D%27Consolas%2CMenlo%2Cmonospace%27%20font-size%3D%2712%27%3E%3Ctext%20x%3D%2716%27%20y%3D%27198%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.12%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2716%27%20y%3D%27212%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%2716%27%20y%3D%27226%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2716%27%20y%3D%27240%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.47%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2716%27%20y%3D%2714%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.58%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2716%27%20y%3D%2728%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%2793%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.1%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27107%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.2%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27121%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.3%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27135%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.4%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27149%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.5%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27163%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.6%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%2735%27%20y%3D%27177%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%2755%27%20y%3D%27222%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.12%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%2755%27%20y%3D%27236%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2755%27%20y%3D%27250%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%2755%27%20y%3D%2724%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.47%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%2755%27%20y%3D%2738%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.58%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2755%27%20y%3D%2752%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%2779%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.07%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%2793%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.14%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27107%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.21%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27121%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.28%27%3EQ%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27135%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27149%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.42%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27163%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.49%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27177%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.56%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27191%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.63%27%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2787%27%20y%3D%27205%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27117%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.09%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27131%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.18%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27145%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.26%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27159%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27173%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.44%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27187%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.52%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27201%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.61%27%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%27108%27%20y%3D%27215%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%2773%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.07%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%2787%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.14%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27101%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.21%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27115%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.28%27%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27129%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27143%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.42%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27157%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.49%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27171%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.56%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27185%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.63%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27130%27%20y%3D%27199%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%2759%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.07%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%2773%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.14%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%2787%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.21%27%3EQ%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27101%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.28%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27115%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27129%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.42%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27143%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.49%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27157%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.56%27%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27171%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.63%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27161%27%20y%3D%27185%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%2776%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.08%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%2790%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.16%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27104%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27118%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.31%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27132%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.39%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27146%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.47%27%3E%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27160%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.54%27%3E%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27174%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.62%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%27185%27%20y%3D%27188%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%27175%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.06%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%27189%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.13%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%27203%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.19%27%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%27217%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.25%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%27231%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.32%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%27245%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.38%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%2719%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.45%27%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%2733%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.51%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%2747%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.57%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%2761%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.64%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27204%27%20y%3D%2775%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%24%3C%2Ftext%3E%3Ctext%20x%3D%27229%27%20y%3D%27222%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.12%27%3EQ%3C%2Ftext%3E%3Ctext%20x%3D%27229%27%20y%3D%27236%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27229%27%20y%3D%27250%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3EX%3C%2Ftext%3E%3Ctext%20x%3D%27229%27%20y%3D%2724%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.47%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27229%27%20y%3D%2738%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.58%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27229%27%20y%3D%2752%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E1%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-size: 240px 240px;
  top: -240px;
  opacity: 0.85;
}
.season-cyberpunk.style-matrix .season-fall::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27360%27%20height%3D%27360%27%20font-family%3D%27Consolas%2CMenlo%2Cmonospace%27%20font-size%3D%2715%27%3E%3Ctext%20x%3D%2731%27%20y%3D%27143%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.05%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27160%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.1%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27177%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.15%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27194%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.2%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27211%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.25%27%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27228%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.3%27%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27245%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.35%27%3E%24%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27262%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.4%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%2731%27%20y%3D%27279%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27162%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.04%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27179%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.08%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27196%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.12%27%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27213%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.16%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27230%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.2%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27247%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.25%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27264%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.29%27%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27281%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.33%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27298%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.37%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27315%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.41%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%2779%27%20y%3D%27332%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27346%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.04%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27363%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.08%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%2720%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.11%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%2737%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.15%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%2754%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.19%27%3E%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%2771%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%2788%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.26%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27105%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.3%27%3EQ%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27122%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.34%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27139%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.38%27%3EQ%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27156%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.41%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27126%27%20y%3D%27173%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%27366%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.04%27%3E%26amp%3B%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%2723%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.08%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%2740%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.12%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%2757%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.16%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%2774%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.2%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%2791%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.25%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%27108%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.29%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%27125%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.33%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%27142%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.37%27%3E%2A%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%27159%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.41%27%3E%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27183%27%20y%3D%27176%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3EX%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%2768%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.05%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%2785%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.09%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27102%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.14%27%3EK%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27119%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.18%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27136%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27153%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.27%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27170%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.32%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27187%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.36%27%3E%24%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27204%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.4%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27232%27%20y%3D%27221%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27128%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.04%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27145%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.08%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27162%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.11%27%3E%26lt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27179%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.15%27%3E%26gt%3B%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27196%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.19%27%3E%3D%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27213%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27230%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.26%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27247%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.3%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27264%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.34%27%3E%24%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27281%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.38%27%3EX%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27298%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.41%27%3E1%3C%2Ftext%3E%3Ctext%20x%3D%27281%27%20y%3D%27315%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E0%3C%2Ftext%3E%3Ctext%20x%3D%27339%27%20y%3D%27248%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.08%27%3EZ%3C%2Ftext%3E%3Ctext%20x%3D%27339%27%20y%3D%27265%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.15%27%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%27339%27%20y%3D%27282%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.23%27%3E%3A%3C%2Ftext%3E%3Ctext%20x%3D%27339%27%20y%3D%27299%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.3%27%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%27339%27%20y%3D%27316%27%20fill%3D%27%232bff6a%27%20fill-opacity%3D%270.38%27%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%27339%27%20y%3D%27333%27%20fill%3D%27%23d8ffe0%27%20fill-opacity%3D%271%27%3E1%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-size: 360px 360px;
  top: -360px;
  opacity: 0.45;
}
.season-cyberpunk.style-matrix .season-garland {
  background-image: linear-gradient(90deg, rgba(43, 255, 106, 0.15), rgba(43, 255, 106, 0.8) 50%, rgba(43, 255, 106, 0.15));
  background-size: 100% 1px;
  filter: drop-shadow(0 0 3px rgba(43, 255, 106, 0.5));
}
.style-matrix .season-garland i:nth-child(n):nth-child(n) { --neon: #2bff6a; }
.style-matrix .season-garland i:not(:nth-child(5n+3))::before { top: 4px; width: 4px; height: 4px; margin-left: -2px; transform: none; }
.style-matrix .season-garland i:nth-child(5n+3)::after { width: 8px; height: 5px; margin-left: -4px; border-radius: 1px; background: rgba(43, 255, 106, 0.15); }
.style-matrix .sn-packet { background: linear-gradient(90deg, transparent, #d8ffe0); box-shadow: 0 0 6px #2bff6a; }

/* ------------------------------------------------------------ Synthwave */

.synth-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(36, 8, 64, 0.72), rgba(150, 30, 120, 0.32) 60%, transparent 80%);
}
/* The grid rolls out from under the bar, in perspective, and fades away
   before it reaches anything on the page. */
.synth-grid {
  position: absolute;
  left: -25%; right: -25%;
  top: var(--head-h, 92px);
  height: 130px;
  perspective: 240px;
  opacity: 0.5;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000, transparent 80%);
  mask-image: linear-gradient(#000, transparent 80%);
}
.synth-grid::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 400px;
  transform: rotateX(64deg);
  transform-origin: 50% 0;
  background-image:
    linear-gradient(rgba(255, 70, 170, 0.95) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 70, 170, 0.95) 1.5px, transparent 1.5px);
  background-size: 48px 48px;
}
/* The sun only where there is room for it beside the page. */
.synth-sun { display: none; }
@media (min-width: 1500px) {
  .synth-sun {
    display: block;
    position: absolute;
    right: calc((100vw - var(--wrap, 1180px)) / 4 - 45px);
    top: 34px;
    width: 90px; height: 90px;
    border-radius: 50%;
    opacity: 0.85;
    background: linear-gradient(#ffe66d, #ff8a3d 45%, #ff3f8e 85%);
    -webkit-mask-image: linear-gradient(#000 0 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85% 91%, transparent 91% 96%, #000 96%);
    mask-image: linear-gradient(#000 0 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 71%, #000 71% 79%, transparent 79% 85%, #000 85% 91%, transparent 91% 96%, #000 96%);
  }
}
.season-synthwave .season-garland {
  background-image: linear-gradient(90deg, #ff3f8e, #b44bff 50%, #3fd7ff);
  background-size: 100% 2px;
  background-position: 0 5px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 70, 170, 0.6));
}
.season-synthwave .season-garland i::before {
  top: 7px;
  width: 10px; height: 8px;
  margin-left: -5px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: #ff3f8e;
}
.season-synthwave .season-garland i:nth-child(n+31)::before { background: #3fd7ff; }
.season-synthwave .season-garland i:nth-child(3n)::before { background: #ffe66d; width: 6px; height: 5px; margin-left: -3px; }

/* ---------------------------------------------------------------- Space */

.sn-shoot {
  width: 120px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95));
  border-radius: 1px;
  transform-origin: 100% 50%;
}
.sn-sat {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #e8eeff;
}
.sn-sat::after {
  content: "";
  position: absolute;
  left: 4px; top: -1px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #ff4d4d;
  box-shadow: 0 0 5px 1px rgba(255, 77, 77, 0.8);
}
.season-space .season-garland {
  background-image: linear-gradient(90deg, rgba(170, 195, 255, 0.15), rgba(170, 195, 255, 0.5) 50%, rgba(170, 195, 255, 0.15));
  background-size: 100% 1px;
  background-position: 0 8px;
  background-repeat: no-repeat;
}
.season-space .season-garland i::before {
  top: 4px;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  background: #dfe8ff;
  -webkit-mask: var(--m-star) center / contain no-repeat;
  mask: var(--m-star) center / contain no-repeat;
}
.season-space .season-garland i:nth-child(5n+2)::before { width: 14px; height: 14px; margin-left: -7px; top: 1px; background: #fff7d6; }
.season-space .season-garland i:nth-child(3n)::before { opacity: 0.45; }

/* ----------------------------------------------------------- motion, too */

@media (prefers-reduced-motion: no-preference) {
  .season-on:not(.season-still) .sn-fog-1 { animation: fog-drift-900 48s linear infinite; }
  .season-on:not(.season-still) .sn-fog-2 { animation: fog-drift-1300 70s linear infinite reverse; }
  .season-on:not(.season-still) .sn-ghost-1 { animation: ghost-1 26s ease-in-out infinite; }
  .season-on:not(.season-still) .sn-ghost-2 { animation: ghost-2 34s ease-in-out -12s infinite; }
  .season-on:not(.season-still).season-halloween-fog .season-garland i::before { animation: twinkle 2.8s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-halloween-fog .season-garland i:nth-child(3n)::before { animation-duration: 3.6s; animation-delay: -1.2s; }

  .season-on:not(.season-still) .sn-aurora-1 { animation: aurora-a 14s ease-in-out infinite alternate; }
  .season-on:not(.season-still) .sn-aurora-2 { animation: aurora-b 19s ease-in-out infinite alternate; }
  .season-on:not(.season-still) .sn-aurora-3 { animation: aurora-a 23s ease-in-out -7s infinite alternate-reverse; }
  .season-on:not(.season-still).season-christmas-aurora .season-fall::before { animation: fall-200 16s linear infinite; }
  .season-on:not(.season-still) .season-stars.stars-1 { animation: twinkle-soft 4s ease-in-out infinite alternate; }

  .season-on:not(.season-still) .sn-burst { animation: burst 4.2s ease-out infinite; }
  .season-on:not(.season-still) .sn-burst-2 { animation-duration: 5.1s; animation-delay: -1.4s; }
  .season-on:not(.season-still) .sn-burst-3 { animation-duration: 3.7s; animation-delay: -2.6s; }
  .season-on:not(.season-still) .sn-burst-4 { animation-duration: 4.6s; animation-delay: -0.6s; }
  .season-on:not(.season-still) .sn-burst-5 { animation-duration: 5.6s; animation-delay: -3.3s; }
  .season-on:not(.season-still) .sn-burst-6 { animation-duration: 3.9s; animation-delay: -1.9s; }
  .season-on:not(.season-still).season-newyear-fireworks .season-garland i::before { animation: twinkle 1.6s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-newyear-fireworks .season-garland i:nth-child(3n)::before { animation-delay: -0.8s; }

  .season-on:not(.season-still) .season-rise::before { animation: rise-200 12s linear infinite; }
  .season-on:not(.season-still) .season-rise::after { animation: rise-320 19s linear infinite; }
  .season-on:not(.season-still).season-valentine .season-garland i::before { animation: twinkle 2s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-valentine .season-garland i:nth-child(3n)::before { animation-delay: -1s; }

  .season-on:not(.season-still) .sn-petal { animation: tumble 13s linear infinite; }
  .season-on:not(.season-still) .sn-petal-2, .season-on:not(.season-still) .sn-petal-7 { animation-duration: 16s; animation-delay: -5s; }
  .season-on:not(.season-still) .sn-petal-3, .season-on:not(.season-still) .sn-petal-9 { animation-duration: 11s; animation-delay: -8s; }
  .season-on:not(.season-still) .sn-petal-4, .season-on:not(.season-still) .sn-petal-10 { animation-duration: 15s; animation-delay: -2s; }
  .season-on:not(.season-still) .sn-petal-5, .season-on:not(.season-still) .sn-petal-8 { animation-duration: 12s; animation-delay: -10s; }
  .season-on:not(.season-still) .sn-petal-6 { animation-duration: 14s; animation-delay: -6.5s; }

  .season-on:not(.season-still) .sn-fly { animation: fly-a 9s ease-in-out infinite alternate, fly-blink 2.6s ease-in-out infinite; }
  .season-on:not(.season-still) .sn-fly:nth-child(even) { animation: fly-b 11s ease-in-out infinite alternate, fly-blink 3.4s ease-in-out -1.2s infinite; }
  .season-on:not(.season-still) .sn-fly:nth-child(3n) { animation-delay: -4s, -2.1s; }
  .season-on:not(.season-still) .sn-fly:nth-child(5n) { animation-delay: -7s, -0.5s; }
  .season-on:not(.season-still).season-summer .season-garland i::before { animation: lantern-soft 3.2s ease-in-out infinite alternate; }
  .season-on:not(.season-still).season-summer .season-garland i:nth-child(even)::before { animation-delay: -1.6s; }

  .season-on:not(.season-still) .sn-leaf { animation: tumble-leaf 12s linear infinite; }
  .season-on:not(.season-still) .sn-leaf-2, .season-on:not(.season-still) .sn-leaf-7 { animation-duration: 15s; animation-delay: -4s; }
  .season-on:not(.season-still) .sn-leaf-3, .season-on:not(.season-still) .sn-leaf-9 { animation-duration: 10s; animation-delay: -7s; }
  .season-on:not(.season-still) .sn-leaf-4, .season-on:not(.season-still) .sn-leaf-10 { animation-duration: 14s; animation-delay: -1.5s; }
  .season-on:not(.season-still) .sn-leaf-5, .season-on:not(.season-still) .sn-leaf-8 { animation-duration: 11s; animation-delay: -9s; }
  .season-on:not(.season-still) .sn-leaf-6 { animation-duration: 13s; animation-delay: -5.5s; }
  .season-on:not(.season-still).season-autumn .season-garland i:not(:nth-child(4n))::before { animation: sway 3.4s ease-in-out infinite alternate; }

  .season-on:not(.season-still) .style-matrix .season-fall::before { animation: code-240 5s linear infinite; }
  .season-on:not(.season-still) .style-matrix .season-fall::after { animation: code-360 8s linear infinite; }

  .season-on:not(.season-still) .synth-grid::before { animation: synth-roll 1.6s linear infinite; }

  .season-on:not(.season-still) .season-space .stars-1 { animation: star-drift-220 90s linear infinite, twinkle-soft 5s ease-in-out infinite alternate; }
  .season-on:not(.season-still) .season-space .stars-2 { animation: star-drift-360 60s linear infinite; }
  .season-on:not(.season-still) .sn-shoot-1 { animation: shoot-1 7s ease-in infinite; }
  .season-on:not(.season-still) .sn-shoot-2 { animation: shoot-2 11s ease-in -5s infinite; }
  .season-on:not(.season-still) .sn-sat-1 { animation: sat 48s linear infinite; }
  .season-on:not(.season-still) .sn-sat-1::after { animation: blink 1.2s steps(1) infinite; }
  .season-on:not(.season-still).season-space .season-garland i:nth-child(odd)::before { animation: twinkle 2.2s ease-in-out infinite alternate; }
}
/* Standing still, things that only make sense moving are not there at all. */
.season-still .season-swarm { display: none; }
@media (prefers-reduced-motion: reduce) { .season-swarm { display: none; } }

@keyframes fog-drift-900 { from { background-position: 0 0; } to { background-position: 900px 0; } }
@keyframes fog-drift-1300 { from { background-position: 0 0; } to { background-position: 1300px 0; } }
@keyframes ghost-1 {
  0%   { opacity: 0; transform: translate(6cqw, 45cqh); }
  15%  { opacity: 0.85; }
  30%  { transform: translate(26cqw, 22cqh); }
  42%  { opacity: 0.15; transform: translate(38cqw, 48cqh); }
  58%  { opacity: 0.85; transform: translate(54cqw, 28cqh); }
  85%  { opacity: 0.7; transform: translate(80cqw, 50cqh); }
  100% { opacity: 0; transform: translate(96cqw, 32cqh); }
}
@keyframes ghost-2 {
  0%   { opacity: 0; transform: translate(94cqw, 55cqh) scaleX(-1); }
  20%  { opacity: 0.75; transform: translate(74cqw, 30cqh) scaleX(-1); }
  45%  { opacity: 0.1; transform: translate(55cqw, 60cqh) scaleX(-1); }
  65%  { opacity: 0.75; transform: translate(36cqw, 35cqh) scaleX(-1); }
  100% { opacity: 0; transform: translate(4cqw, 50cqh) scaleX(-1); }
}
@keyframes aurora-a { from { transform: translateX(-6%) skewX(-8deg) scaleY(0.9); } to { transform: translateX(6%) skewX(8deg) scaleY(1.15); } }
@keyframes aurora-b { from { transform: translateX(5%) skewX(10deg) scaleY(1.1); opacity: 0.55; } to { transform: translateX(-5%) skewX(-6deg) scaleY(0.85); opacity: 0.85; } }
@keyframes twinkle-soft { from { opacity: 0.5; } to { opacity: 0.9; } }
@keyframes burst {
  0%   { opacity: 0; transform: scale(0.1); }
  3%   { opacity: 1; }
  30%  { opacity: 1; transform: scale(1); }
  55%  { opacity: 0; transform: scale(1.18) translateY(8px); }
  100% { opacity: 0; transform: scale(1.18) translateY(8px); }
}
@keyframes rise-200 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -200px, 0); } }
@keyframes rise-320 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -320px, 0); } }
@keyframes tumble {
  0%   { opacity: 0; transform: translate(0, -8cqh) rotate(0deg); }
  8%   { opacity: 0.95; }
  25%  { transform: translate(3cqw, 22cqh) rotate(110deg); }
  50%  { transform: translate(-2cqw, 50cqh) rotate(200deg); }
  75%  { transform: translate(4cqw, 78cqh) rotate(300deg); }
  90%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(1cqw, 104cqh) rotate(380deg); }
}
@keyframes tumble-leaf {
  0%   { opacity: 0; transform: translate(0, -10cqh) rotate(0deg); }
  8%   { opacity: 1; }
  20%  { transform: translate(5cqw, 15cqh) rotate(150deg); }
  40%  { transform: translate(-3cqw, 40cqh) rotate(260deg); }
  60%  { transform: translate(6cqw, 62cqh) rotate(420deg); }
  80%  { transform: translate(-2cqw, 84cqh) rotate(510deg); }
  92%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(3cqw, 105cqh) rotate(600deg); }
}
@keyframes fly-a { from { transform: translate(0, 0); } 50% { transform: translate(3cqw, -14cqh); } to { transform: translate(-2cqw, 10cqh); } }
@keyframes fly-b { from { transform: translate(0, 0); } 50% { transform: translate(-4cqw, 12cqh); } to { transform: translate(2cqw, -10cqh); } }
@keyframes fly-blink { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } }
@keyframes lantern-soft { from { filter: brightness(0.9); } to { filter: brightness(1.15); } }
@keyframes sway { from { transform: rotate(-25deg); } to { transform: rotate(15deg); } }
@keyframes synth-roll { from { background-position: 0 0; } to { background-position: 0 48px; } }
@keyframes star-drift-220 { from { background-position: 0 0; } to { background-position: -220px 0; } }
@keyframes star-drift-360 { from { background-position: 0 0; } to { background-position: -360px 0; } }
@keyframes shoot-1 {
  0%   { opacity: 0; transform: translate(20cqw, 12cqh) rotate(18deg); }
  2%   { opacity: 1; }
  9%   { opacity: 0; transform: translate(48cqw, 48cqh) rotate(18deg); }
  100% { opacity: 0; transform: translate(48cqw, 48cqh) rotate(18deg); }
}
@keyframes shoot-2 {
  0%   { opacity: 0; transform: translate(62cqw, 6cqh) rotate(24deg); }
  2%   { opacity: 1; }
  8%   { opacity: 0; transform: translate(86cqw, 44cqh) rotate(24deg); }
  100% { opacity: 0; transform: translate(86cqw, 44cqh) rotate(24deg); }
}
@keyframes sat {
  0%   { opacity: 0; transform: translate(-2cqw, 22cqh); }
  4%   { opacity: 0.9; }
  96%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(102cqw, 14cqh); }
}