/* Christmas decoration layer: the site as a Light-O-Rama sequence playing a Christmas song.
   Decoration only, never text: lanes, cells and fade ramps (brand/BRAND.md, option E), lit
   in Christmas colours, plus props drawn as pixel art made of sequencer cells. Loaded only
   while config.js has season: 'christmas' (build-site.js adds this <link>, the hero markup
   and the small date script). Set season: '' and rebuild to turn it all off.
   Phones and narrow screens (under 960px): only the tree, the snow and the footer greeting
   are added to the lanes. prefers-reduced-motion: no snow, no sleigh, everything still.
   The drawings themselves are generated: edit the grids in make-season-art.js. */

:root {
  --xmas-red: #e23d4b;    /* Christmas Red */
  --xmas-green: #1fa65a;  /* Pine Green */
  --xmas-white: #fff4d6;  /* Warm White */
  /* Bulb Gold is the brand's var(--gold). Night is var(--night). */
}

/* ---- 1. Hero backdrop: a faint 5-lane sequencer grid with a playhead ------------------ */

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

.sh-grid {
  position: absolute;
  inset: 0;
  padding: 64px 16px 28px;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  opacity: 0.12;           /* phones: the text spans the whole hero, so keep it faint */
}

/* Desktop: the text is the left column. Up to 20% overall (cap 25%), faded to half behind
   the text so muted copy keeps at least 6:1 contrast even over a lit warm-white cell. */
@media (min-width: 960px) {
  .sh-grid {
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 52%, #000 64%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 52%, #000 64%);
  }
}

.sh-lane {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 244, 214, 0.35);  /* channel row line */
}

.sh-lane:last-of-type {
  border-bottom: 1px solid rgba(255, 244, 214, 0.35);
}

.sh-label {
  flex: 0 0 84px;
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--xmas-white);
  white-space: nowrap;
}

.sh-cells {
  flex: 1;
  display: flex;
  gap: 3px;
  height: 12px;
}

.sh-cells i {
  flex: 1;
  border-radius: 2px;
  background: var(--xmas-white);
}

/* Mega Tree: red/green chase */
.sh-mega i { background: var(--xmas-red); animation: sh-chase 2.56s linear infinite; animation-delay: calc(var(--i) * 0.08s - 2.56s); }
.sh-mega i:nth-child(even) { background: var(--xmas-green); }

/* Roofline: warm white twinkle */
.sh-roof i { opacity: 0.35; animation: sh-twinkle 3.1s ease-in-out infinite; animation-delay: calc(var(--r) * -0.31s); }

/* Arches: gold fade ramps, eight cells each */
.sh-arch i { background: var(--gold); animation: sh-ramp 2s linear infinite; animation-delay: calc(var(--k) * -0.25s); }

/* Candy Canes: red and warm white stripes that swap */
.sh-cane i { animation: sh-swap 1.6s steps(1) infinite; }
.sh-cane i:nth-child(even) { animation-delay: -0.8s; }

/* Star: gold sparkle */
.sh-star i { background: var(--gold); opacity: 0.3; animation: sh-twinkle 2.3s ease-in-out infinite; animation-delay: calc(var(--r) * -0.23s); }

/* Playhead: a thin line sweeping left to right across the cells, every 16s */
.sh-playhead {
  position: absolute;
  top: 56px;
  bottom: 20px;
  left: 110px;   /* 16px padding + 84px label + 10px gap */
  right: 16px;
  animation: sh-sweep 16s linear infinite;
}

.sh-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--xmas-white);
}

@keyframes sh-chase   { 0% { opacity: 1; } 25%, 100% { opacity: 0.15; } }
@keyframes sh-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes sh-ramp    { 0% { opacity: 0.06; } 100% { opacity: 1; } }
@keyframes sh-swap    { 0% { background: var(--xmas-red); } 50% { background: var(--xmas-white); } }
@keyframes sh-sweep   { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ---- Pixel art: every drawing is cells (box-shadows, one per cell, from make-season-art.js).
   font-size sets the cell size; each cell leaves a 1px gap, like a sequencer grid. ---------- */

.px {
  position: relative;
  display: block;
  flex: none;
  font-size: 3px;
}

.px::before,
.px::after {
  content: "";
  position: absolute;
  left: -1em;
  top: -1em;
  width: calc(1em - 1px);
  height: calc(1em - 1px);
}

/* ---- 2. The tree: builds bottom to top with the playhead (same 16s), then twinkles ----- */

.px-tree {
  position: absolute;
  right: 10px;
  bottom: 10px;
  opacity: 0.6;
  animation: tree-build 16s infinite;
}

.px-tree::after {
  animation: px-twinkle 1.8s ease-in-out infinite;
}

@keyframes tree-build {
  0%   { clip-path: inset(100% 0 0 0); animation-timing-function: steps(16, end); }
  75%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes px-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- 3. Snow: 25 tiny warm-white cells, falling slowly, hero only --------------------- */

.sh-snow i {
  position: absolute;
  top: -6px;
  left: var(--x);
  width: 3px;
  height: 3px;
  background: var(--xmas-white);
  opacity: 0.45;
  animation: snow-fall var(--t) linear var(--d) infinite, snow-drift 6s ease-in-out var(--d) infinite alternate;
}

@keyframes snow-fall  { from { top: -6px; } to { top: 100%; } }
@keyframes snow-drift { from { transform: translateX(-6px); } to { transform: translateX(6px); } }

/* ---- 4. Santa: sleigh and reindeer across the top, about once every 30s (desktop) ------- */

.px-sleigh {
  position: absolute;
  top: 24px;
  left: 0;
  opacity: 0;
  animation: sleigh-ride 30s linear 4s infinite;
}

/* Fades out well before the top-right nav links. */
@keyframes sleigh-ride {
  0%        { transform: translateX(-160px); opacity: 0; }
  2%        { opacity: 0.55; }
  26%       { opacity: 0.55; }
  30%, 100% { transform: translateX(calc(100vw - 340px)); opacity: 0; }
}

/* ---- 5. Lane props on the hero's top lane (desktop): a present, a snowflake and a star -- */

.px-laneprops {
  position: absolute;
  right: 40px;
  top: calc(64px + (100% - 92px) / 10);   /* the middle of the top lane (see .sh-grid) */
  width: 23em;
  height: 5em;
  margin-top: -2.5em;
  opacity: 0.5;
}

/* ---- 6. Holiday shelf (desktop): hanukkiah, Star of David, dreidel, kinara ------------ */

.sh-shelf {
  position: absolute;
  right: 90px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  opacity: 0.6;
}

.px-hanukkiah {
  font-size: 4px;
}

/* A flame: one gold cell floating a cell above its candle. Only on candles the date script
   marks lit, so an unlit hanukkiah is just the candles. */
.hk-f {
  position: absolute;
  width: calc(1em - 1px);
  height: calc(1em - 1px);
  border-radius: 50% 50% 1px 1px;
  background: var(--gold);
  visibility: hidden;
}

.hk-f.lit {
  visibility: visible;
}

.px-kinara {
  display: none;   /* shown Dec 26 to Jan 1 (date script) */
  background: rgba(255, 244, 214, 0.3);   /* a faint warm plate, so the black candle shows */
  outline: 2px solid rgba(255, 244, 214, 0.3);
  border-radius: 1px;
}

[data-kwanzaa] .px-kinara {
  display: block;
}

/* ---- 7. New Year's: pixel fireworks above the showcase (right column), Dec 31 and Jan 1 */

.sh-fireworks {
  display: none;
  position: absolute;
  top: 70px;
  left: 58%;
  right: 150px;   /* clear of the top lane's props */
  height: 110px;
}

[data-new-year] .sh-fireworks {
  display: block;
}

.px-burst {
  position: absolute;
  font-size: 4px;
  opacity: 0;
  animation: burst 4.5s steps(6, end) infinite;
}

.px-burst.b1 { left: 0;   top: 34px; }
.px-burst.b2 { left: 42%; top: 0;    animation-delay: 1.5s; }
.px-burst.b3 { left: 84%; top: 44px; animation-delay: 3s; }

@keyframes burst {
  0%        { transform: scale(0.3); opacity: 0; }
  10%       { opacity: 0.7; }
  40%       { transform: scale(1); opacity: 0.6; }
  60%, 100% { transform: scale(1.1); opacity: 0; }
}

/* ---- 8. Section dividers: one lane of cells, a slow red to green fade ramp, with props -- */

.lanes {
  position: relative;
  overflow: hidden;
}

.lanes img {
  visibility: hidden;   /* keeps the divider's height, so nothing on the page moves */
}

.lanes::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  background: linear-gradient(90deg, var(--xmas-red), var(--xmas-green), var(--xmas-red), var(--xmas-green));
  background-size: 300% 100%;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 16px);
  mask-image: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 16px);
  animation: lanes-fade 14s ease-in-out infinite alternate;
}

@keyframes lanes-fade { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* Props standing on the divider lane: present, star, snowflake, candy cane, wreath, Santa hat.
   Their bottom row sits 2px above the lane's cells. */
.lanes:not(:has(+ .footer))::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  width: calc(1em - 1px);
  height: calc(1em - 1px);
  margin-top: calc(-7em - 6px);
  font-size: 3px;
  opacity: 0.85;
}

/* ---- 9. "See it in action": a thin lane underline that twinkles warm white ------------- */

.videos h2 {
  position: relative;
}

.videos h2::before,
.videos h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 200px;
  height: 3px;
  margin-left: -100px;
  background: repeating-linear-gradient(90deg, var(--xmas-white) 0 8px, transparent 8px 20px);
  animation: h2-twinkle 2.4s ease-in-out infinite;
}

.videos h2::after {
  background-position: 10px 0;   /* the cells in between the first set */
  animation-delay: -1.2s;
}

@keyframes h2-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

/* ---- 10. Above the footer: a quiet lane with a greeting (the date script rotates it) --- */

.lanes:has(+ .footer) {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lanes:has(+ .footer) img {
  display: none;
}

.lanes:has(+ .footer)::after {
  content: "Merry Christmas from AnySequence";
  content: "Merry Christmas from AnySequence" / "";   /* decoration: screen readers skip it */
  order: -1;
  flex: none;
  font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.lanes[data-greet]:has(+ .footer)::after {
  content: attr(data-greet) " from AnySequence";
  content: attr(data-greet) " from AnySequence" / "";
}

.lanes:has(+ .footer)::before {
  position: static;
  flex: 1;
  height: 6px;
  margin: 0;
  opacity: 0.45;
  background: linear-gradient(90deg, var(--xmas-red), var(--gold), var(--xmas-green), var(--xmas-white), var(--xmas-red));
  background-size: 300% 100%;
  animation-duration: 20s;
}

/* ---- Desktop: the tree and shelf sit in the hero's bottom-right corner, clear of the
   text column and the showcase. -------------------------------------------------------- */

@media (min-width: 960px) {
  .px-tree {
    right: 24px;
    bottom: 14px;
    font-size: 4px;
  }
}

/* ---- Phones and narrow screens: only the tree, snow and footer greeting are added ------ */

@media (max-width: 959px) {
  .px-sleigh,
  .px-laneprops,
  .sh-shelf,
  [data-new-year] .sh-fireworks {
    display: none;
  }
  .lanes:not(:has(+ .footer))::after {
    content: none;
  }
}

/* ---- Reduced motion: no snow, no sleigh, every cell lit and still ---------------------- */

@media (prefers-reduced-motion: reduce) {
  .season-hero *,
  .season-hero *::before,
  .season-hero *::after,
  .lanes::before,
  .videos h2::before,
  .videos h2::after {
    animation: none !important;
  }
  .sh-snow,
  .px-sleigh {
    display: none;
  }
  .sh-mega i, .sh-roof i, .sh-star i { opacity: 0.85; }
  .sh-arch i { opacity: calc((var(--k) + 1) / 8); }   /* a still fade ramp */
  .sh-cane i:nth-child(odd) { background: var(--xmas-red); }
  .sh-playhead { transform: translateX(62%); }
  .px-tree { clip-path: none; }
  .px-burst { opacity: 0.6; transform: none; }
  .videos h2::before, .videos h2::after { opacity: 0.6; }
}

/* ---- The drawings (generated by make-season-art.js; edit the grids there) ------------- */

/* build:pixel-art: written by make-season-art.js. Don't edit by hand. */
.px-tree { width: 11em; height: 16em; }

.px-tree::before {
  box-shadow:
    6em 4em var(--xmas-green),
    5em 5em var(--xmas-green),
    6em 5em var(--xmas-green),
    7em 5em var(--xmas-green),
    4em 6em var(--xmas-green),
    5em 6em var(--xmas-green),
    7em 6em var(--xmas-green),
    8em 6em var(--xmas-green),
    5em 7em var(--xmas-green),
    6em 7em var(--xmas-green),
    7em 7em var(--xmas-green),
    4em 8em var(--xmas-green),
    5em 8em var(--xmas-green),
    6em 8em var(--xmas-green),
    8em 8em var(--xmas-green),
    9em 8em var(--xmas-green),
    3em 9em var(--xmas-green),
    4em 9em var(--xmas-green),
    5em 9em var(--xmas-green),
    6em 9em var(--xmas-green),
    7em 9em var(--xmas-green),
    8em 9em var(--xmas-green),
    9em 9em var(--xmas-green),
    3em 10em var(--xmas-green),
    5em 10em var(--xmas-green),
    6em 10em var(--xmas-green),
    7em 10em var(--xmas-green),
    9em 10em var(--xmas-green),
    2em 11em var(--xmas-green),
    3em 11em var(--xmas-green),
    4em 11em var(--xmas-green),
    5em 11em var(--xmas-green),
    6em 11em var(--xmas-green),
    7em 11em var(--xmas-green),
    8em 11em var(--xmas-green),
    9em 11em var(--xmas-green),
    10em 11em var(--xmas-green),
    3em 12em var(--xmas-green),
    4em 12em var(--xmas-green),
    6em 12em var(--xmas-green),
    7em 12em var(--xmas-green),
    8em 12em var(--xmas-green),
    9em 12em var(--xmas-green),
    10em 12em var(--xmas-green),
    2em 13em var(--xmas-green),
    3em 13em var(--xmas-green),
    5em 13em var(--xmas-green),
    6em 13em var(--xmas-green),
    7em 13em var(--xmas-green),
    8em 13em var(--xmas-green),
    10em 13em var(--xmas-green),
    1em 14em var(--xmas-green),
    2em 14em var(--xmas-green),
    3em 14em var(--xmas-green),
    4em 14em var(--xmas-green),
    5em 14em var(--xmas-green),
    7em 14em var(--xmas-green),
    8em 14em var(--xmas-green),
    9em 14em var(--xmas-green),
    10em 14em var(--xmas-green),
    11em 14em var(--xmas-green),
    5em 15em var(--xmas-white),
    6em 15em var(--xmas-white),
    7em 15em var(--xmas-white),
    5em 16em var(--xmas-white),
    6em 16em var(--xmas-white),
    7em 16em var(--xmas-white);
}

.px-tree::after {
  box-shadow:
    6em 1em var(--gold),
    5em 2em var(--gold),
    6em 2em var(--gold),
    7em 2em var(--gold),
    6em 3em var(--gold),
    6em 6em var(--xmas-red),
    7em 8em var(--xmas-white),
    4em 10em var(--gold),
    8em 10em var(--xmas-red),
    5em 12em var(--xmas-red),
    4em 13em var(--xmas-white),
    9em 13em var(--gold),
    6em 14em var(--xmas-red);
}

.px-hanukkiah { width: 17em; height: 14em; }

.px-hanukkiah::before {
  box-shadow:
    9em 3em var(--xmas-white),
    9em 4em var(--xmas-white),
    1em 5em var(--xmas-white),
    3em 5em var(--xmas-white),
    5em 5em var(--xmas-white),
    7em 5em var(--xmas-white),
    9em 5em var(--xmas-white),
    11em 5em var(--xmas-white),
    13em 5em var(--xmas-white),
    15em 5em var(--xmas-white),
    17em 5em var(--xmas-white),
    1em 6em var(--xmas-white),
    3em 6em var(--xmas-white),
    5em 6em var(--xmas-white),
    7em 6em var(--xmas-white),
    9em 6em var(--gold),
    11em 6em var(--xmas-white),
    13em 6em var(--xmas-white),
    15em 6em var(--xmas-white),
    17em 6em var(--xmas-white),
    1em 7em var(--xmas-white),
    3em 7em var(--xmas-white),
    5em 7em var(--xmas-white),
    7em 7em var(--xmas-white),
    9em 7em var(--gold),
    11em 7em var(--xmas-white),
    13em 7em var(--xmas-white),
    15em 7em var(--xmas-white),
    17em 7em var(--xmas-white),
    1em 8em var(--gold),
    3em 8em var(--gold),
    5em 8em var(--gold),
    7em 8em var(--gold),
    9em 8em var(--gold),
    11em 8em var(--gold),
    13em 8em var(--gold),
    15em 8em var(--gold),
    17em 8em var(--gold),
    1em 9em var(--gold),
    2em 9em var(--gold),
    3em 9em var(--gold),
    4em 9em var(--gold),
    5em 9em var(--gold),
    6em 9em var(--gold),
    7em 9em var(--gold),
    8em 9em var(--gold),
    9em 9em var(--gold),
    10em 9em var(--gold),
    11em 9em var(--gold),
    12em 9em var(--gold),
    13em 9em var(--gold),
    14em 9em var(--gold),
    15em 9em var(--gold),
    16em 9em var(--gold),
    17em 9em var(--gold),
    9em 10em var(--gold),
    9em 11em var(--gold),
    9em 12em var(--gold),
    6em 13em var(--gold),
    7em 13em var(--gold),
    8em 13em var(--gold),
    9em 13em var(--gold),
    10em 13em var(--gold),
    11em 13em var(--gold),
    12em 13em var(--gold),
    5em 14em var(--gold),
    6em 14em var(--gold),
    7em 14em var(--gold),
    8em 14em var(--gold),
    9em 14em var(--gold),
    10em 14em var(--gold),
    11em 14em var(--gold),
    12em 14em var(--gold),
    13em 14em var(--gold);
}

.px-star-david { width: 9em; height: 9em; }

.px-star-david::before {
  box-shadow:
    5em 1em var(--xmas-white),
    4em 2em var(--xmas-white),
    6em 2em var(--xmas-white),
    1em 3em var(--xmas-white),
    2em 3em var(--xmas-white),
    3em 3em var(--xmas-white),
    4em 3em var(--xmas-white),
    5em 3em var(--xmas-white),
    6em 3em var(--xmas-white),
    7em 3em var(--xmas-white),
    8em 3em var(--xmas-white),
    9em 3em var(--xmas-white),
    2em 4em var(--xmas-white),
    3em 4em var(--xmas-white),
    7em 4em var(--xmas-white),
    8em 4em var(--xmas-white),
    2em 5em var(--xmas-white),
    8em 5em var(--xmas-white),
    2em 6em var(--xmas-white),
    3em 6em var(--xmas-white),
    7em 6em var(--xmas-white),
    8em 6em var(--xmas-white),
    1em 7em var(--xmas-white),
    2em 7em var(--xmas-white),
    3em 7em var(--xmas-white),
    4em 7em var(--xmas-white),
    5em 7em var(--xmas-white),
    6em 7em var(--xmas-white),
    7em 7em var(--xmas-white),
    8em 7em var(--xmas-white),
    9em 7em var(--xmas-white),
    4em 8em var(--xmas-white),
    6em 8em var(--xmas-white),
    5em 9em var(--xmas-white);
}

.px-dreidel { width: 5em; height: 7em; }

.px-dreidel::before {
  box-shadow:
    3em 1em var(--xmas-white),
    3em 2em var(--xmas-white),
    1em 3em var(--gold),
    2em 3em var(--gold),
    3em 3em var(--gold),
    4em 3em var(--gold),
    5em 3em var(--gold),
    1em 4em var(--gold),
    2em 4em var(--gold),
    3em 4em var(--gold),
    4em 4em var(--gold),
    5em 4em var(--gold),
    1em 5em var(--gold),
    2em 5em var(--gold),
    3em 5em var(--gold),
    4em 5em var(--gold),
    5em 5em var(--gold),
    2em 6em var(--gold),
    3em 6em var(--gold),
    4em 6em var(--gold),
    3em 7em var(--gold);
}

.px-kinara { width: 19em; height: 7em; }

.px-kinara::before {
  box-shadow:
    10em 1em #000,
    1em 2em var(--xmas-red),
    4em 2em var(--xmas-red),
    7em 2em var(--xmas-red),
    10em 2em #000,
    13em 2em var(--xmas-green),
    16em 2em var(--xmas-green),
    19em 2em var(--xmas-green),
    1em 3em var(--xmas-red),
    4em 3em var(--xmas-red),
    7em 3em var(--xmas-red),
    10em 3em #000,
    13em 3em var(--xmas-green),
    16em 3em var(--xmas-green),
    19em 3em var(--xmas-green),
    1em 4em var(--xmas-red),
    4em 4em var(--xmas-red),
    7em 4em var(--xmas-red),
    10em 4em #000,
    13em 4em var(--xmas-green),
    16em 4em var(--xmas-green),
    19em 4em var(--xmas-green),
    1em 5em var(--gold),
    4em 5em var(--gold),
    7em 5em var(--gold),
    10em 5em var(--gold),
    13em 5em var(--gold),
    16em 5em var(--gold),
    19em 5em var(--gold),
    1em 6em var(--gold),
    2em 6em var(--gold),
    3em 6em var(--gold),
    4em 6em var(--gold),
    5em 6em var(--gold),
    6em 6em var(--gold),
    7em 6em var(--gold),
    8em 6em var(--gold),
    9em 6em var(--gold),
    10em 6em var(--gold),
    11em 6em var(--gold),
    12em 6em var(--gold),
    13em 6em var(--gold),
    14em 6em var(--gold),
    15em 6em var(--gold),
    16em 6em var(--gold),
    17em 6em var(--gold),
    18em 6em var(--gold),
    19em 6em var(--gold),
    2em 7em var(--gold),
    3em 7em var(--gold),
    4em 7em var(--gold),
    5em 7em var(--gold),
    6em 7em var(--gold),
    7em 7em var(--gold),
    8em 7em var(--gold),
    9em 7em var(--gold),
    10em 7em var(--gold),
    11em 7em var(--gold),
    12em 7em var(--gold),
    13em 7em var(--gold),
    14em 7em var(--gold),
    15em 7em var(--gold),
    16em 7em var(--gold),
    17em 7em var(--gold),
    18em 7em var(--gold);
}

.px-sleigh { width: 47em; height: 8em; }

.px-sleigh::before {
  box-shadow:
    4em 1em var(--xmas-red),
    32em 1em var(--gold),
    34em 1em var(--gold),
    44em 1em var(--gold),
    46em 1em var(--gold),
    3em 2em var(--xmas-red),
    4em 2em var(--xmas-white),
    5em 2em var(--xmas-red),
    33em 2em var(--gold),
    45em 2em var(--gold),
    3em 3em var(--xmas-red),
    4em 3em var(--xmas-red),
    5em 3em var(--xmas-red),
    32em 3em var(--gold),
    33em 3em var(--gold),
    34em 3em var(--gold),
    35em 3em var(--gold),
    44em 3em var(--gold),
    45em 3em var(--gold),
    46em 3em var(--gold),
    47em 3em var(--xmas-red),
    1em 4em var(--xmas-red),
    3em 4em var(--xmas-red),
    4em 4em var(--xmas-red),
    5em 4em var(--xmas-red),
    10em 4em var(--xmas-red),
    31em 4em var(--gold),
    32em 4em var(--gold),
    43em 4em var(--gold),
    44em 4em var(--gold),
    1em 5em var(--xmas-red),
    2em 5em var(--xmas-red),
    3em 5em var(--xmas-red),
    4em 5em var(--xmas-red),
    5em 5em var(--xmas-red),
    6em 5em var(--xmas-red),
    7em 5em var(--xmas-red),
    8em 5em var(--xmas-red),
    9em 5em var(--xmas-red),
    10em 5em var(--xmas-red),
    11em 5em var(--xmas-white),
    12em 5em var(--xmas-white),
    13em 5em var(--xmas-white),
    14em 5em var(--xmas-white),
    15em 5em var(--xmas-white),
    16em 5em var(--xmas-white),
    17em 5em var(--xmas-white),
    18em 5em var(--xmas-white),
    19em 5em var(--xmas-white),
    20em 5em var(--xmas-white),
    21em 5em var(--xmas-white),
    22em 5em var(--xmas-white),
    23em 5em var(--xmas-white),
    24em 5em var(--xmas-white),
    25em 5em var(--xmas-white),
    26em 5em var(--xmas-white),
    27em 5em var(--gold),
    28em 5em var(--gold),
    29em 5em var(--gold),
    30em 5em var(--gold),
    31em 5em var(--gold),
    32em 5em var(--gold),
    37em 5em var(--gold),
    38em 5em var(--gold),
    39em 5em var(--gold),
    40em 5em var(--gold),
    41em 5em var(--gold),
    42em 5em var(--gold),
    43em 5em var(--gold),
    44em 5em var(--gold),
    2em 6em var(--xmas-red),
    3em 6em var(--xmas-red),
    4em 6em var(--xmas-red),
    5em 6em var(--xmas-red),
    6em 6em var(--xmas-red),
    7em 6em var(--xmas-red),
    8em 6em var(--xmas-red),
    9em 6em var(--xmas-red),
    18em 6em var(--gold),
    19em 6em var(--gold),
    20em 6em var(--gold),
    21em 6em var(--gold),
    22em 6em var(--gold),
    23em 6em var(--gold),
    24em 6em var(--gold),
    25em 6em var(--gold),
    26em 6em var(--gold),
    27em 6em var(--gold),
    28em 6em var(--gold),
    29em 6em var(--gold),
    30em 6em var(--gold),
    31em 6em var(--gold),
    37em 6em var(--gold),
    38em 6em var(--gold),
    39em 6em var(--gold),
    40em 6em var(--gold),
    41em 6em var(--gold),
    42em 6em var(--gold),
    43em 6em var(--gold),
    2em 7em var(--gold),
    9em 7em var(--gold),
    18em 7em var(--gold),
    20em 7em var(--gold),
    24em 7em var(--gold),
    26em 7em var(--gold),
    36em 7em var(--gold),
    38em 7em var(--gold),
    41em 7em var(--gold),
    43em 7em var(--gold),
    1em 8em var(--gold),
    2em 8em var(--gold),
    3em 8em var(--gold),
    4em 8em var(--gold),
    5em 8em var(--gold),
    6em 8em var(--gold),
    7em 8em var(--gold),
    8em 8em var(--gold),
    9em 8em var(--gold),
    10em 8em var(--gold),
    11em 8em var(--gold);
}

.hk-s { left: 8em; top: 0; }

.hk-1 { left: 16em; top: 2em; }

.hk-2 { left: 14em; top: 2em; }

.hk-3 { left: 12em; top: 2em; }

.hk-4 { left: 10em; top: 2em; }

.hk-5 { left: 6em; top: 2em; }

.hk-6 { left: 4em; top: 2em; }

.hk-7 { left: 2em; top: 2em; }

.hk-8 { left: 0em; top: 2em; }

.px-burst { width: 9em; height: 9em; }

.px-burst.b1::before {
  box-shadow:
    5em 1em var(--gold),
    2em 2em var(--gold),
    5em 2em var(--gold),
    8em 2em var(--gold),
    3em 3em var(--gold),
    7em 3em var(--gold),
    1em 5em var(--gold),
    2em 5em var(--gold),
    5em 5em var(--xmas-white),
    8em 5em var(--gold),
    9em 5em var(--gold),
    3em 7em var(--gold),
    7em 7em var(--gold),
    2em 8em var(--gold),
    5em 8em var(--gold),
    8em 8em var(--gold),
    5em 9em var(--gold);
}

.px-burst.b2::before {
  box-shadow:
    5em 1em var(--xmas-red),
    2em 2em var(--xmas-red),
    5em 2em var(--xmas-red),
    8em 2em var(--xmas-red),
    3em 3em var(--xmas-red),
    7em 3em var(--xmas-red),
    1em 5em var(--xmas-red),
    2em 5em var(--xmas-red),
    5em 5em var(--xmas-white),
    8em 5em var(--xmas-red),
    9em 5em var(--xmas-red),
    3em 7em var(--xmas-red),
    7em 7em var(--xmas-red),
    2em 8em var(--xmas-red),
    5em 8em var(--xmas-red),
    8em 8em var(--xmas-red),
    5em 9em var(--xmas-red);
}

.px-burst.b3::before {
  box-shadow:
    5em 1em var(--xmas-green),
    2em 2em var(--xmas-green),
    5em 2em var(--xmas-green),
    8em 2em var(--xmas-green),
    3em 3em var(--xmas-green),
    7em 3em var(--xmas-green),
    1em 5em var(--xmas-green),
    2em 5em var(--xmas-green),
    5em 5em var(--xmas-white),
    8em 5em var(--xmas-green),
    9em 5em var(--xmas-green),
    3em 7em var(--xmas-green),
    7em 7em var(--xmas-green),
    2em 8em var(--xmas-green),
    5em 8em var(--xmas-green),
    8em 8em var(--xmas-green),
    5em 9em var(--xmas-green);
}

.lanes:not(:has(+ .footer))::after {
  box-shadow:
    20em 2em var(--gold),
    22em 2em var(--gold),
    21em 3em var(--gold),
    19em 4em var(--xmas-red),
    20em 4em var(--xmas-red),
    21em 4em var(--gold),
    22em 4em var(--xmas-red),
    23em 4em var(--xmas-red),
    19em 5em var(--xmas-red),
    20em 5em var(--xmas-red),
    21em 5em var(--gold),
    22em 5em var(--xmas-red),
    23em 5em var(--xmas-red),
    19em 6em var(--xmas-red),
    20em 6em var(--xmas-red),
    21em 6em var(--gold),
    22em 6em var(--xmas-red),
    23em 6em var(--xmas-red),
    73em 2em var(--gold),
    72em 3em var(--gold),
    73em 3em var(--gold),
    74em 3em var(--gold),
    71em 4em var(--gold),
    72em 4em var(--gold),
    73em 4em var(--gold),
    74em 4em var(--gold),
    75em 4em var(--gold),
    72em 5em var(--gold),
    73em 5em var(--gold),
    74em 5em var(--gold),
    72em 6em var(--gold),
    74em 6em var(--gold),
    123em 2em var(--xmas-white),
    125em 2em var(--xmas-white),
    127em 2em var(--xmas-white),
    124em 3em var(--xmas-white),
    125em 3em var(--xmas-white),
    126em 3em var(--xmas-white),
    123em 4em var(--xmas-white),
    124em 4em var(--xmas-white),
    125em 4em var(--xmas-white),
    126em 4em var(--xmas-white),
    127em 4em var(--xmas-white),
    124em 5em var(--xmas-white),
    125em 5em var(--xmas-white),
    126em 5em var(--xmas-white),
    123em 6em var(--xmas-white),
    125em 6em var(--xmas-white),
    127em 6em var(--xmas-white),
    176em 1em var(--xmas-red),
    177em 1em var(--xmas-white),
    175em 2em var(--xmas-white),
    178em 2em var(--xmas-red),
    175em 3em var(--xmas-red),
    175em 4em var(--xmas-white),
    175em 5em var(--xmas-red),
    175em 6em var(--xmas-white),
    228em 1em var(--xmas-green),
    229em 1em var(--xmas-green),
    230em 1em var(--xmas-green),
    227em 2em var(--xmas-green),
    231em 2em var(--xmas-green),
    227em 3em var(--xmas-green),
    231em 3em var(--xmas-green),
    227em 4em var(--xmas-green),
    231em 4em var(--xmas-green),
    228em 5em var(--xmas-green),
    229em 5em var(--xmas-red),
    230em 5em var(--xmas-green),
    229em 6em var(--xmas-red),
    283em 2em var(--xmas-white),
    281em 3em var(--xmas-red),
    282em 3em var(--xmas-red),
    280em 4em var(--xmas-red),
    281em 4em var(--xmas-red),
    282em 4em var(--xmas-red),
    279em 5em var(--xmas-red),
    280em 5em var(--xmas-red),
    281em 5em var(--xmas-red),
    282em 5em var(--xmas-red),
    279em 6em var(--xmas-white),
    280em 6em var(--xmas-white),
    281em 6em var(--xmas-white),
    282em 6em var(--xmas-white),
    283em 6em var(--xmas-white);
}

.px-laneprops::before {
  box-shadow:
    2em 1em var(--gold),
    4em 1em var(--gold),
    3em 2em var(--gold),
    1em 3em var(--xmas-red),
    2em 3em var(--xmas-red),
    3em 3em var(--gold),
    4em 3em var(--xmas-red),
    5em 3em var(--xmas-red),
    1em 4em var(--xmas-red),
    2em 4em var(--xmas-red),
    3em 4em var(--gold),
    4em 4em var(--xmas-red),
    5em 4em var(--xmas-red),
    1em 5em var(--xmas-red),
    2em 5em var(--xmas-red),
    3em 5em var(--gold),
    4em 5em var(--xmas-red),
    5em 5em var(--xmas-red),
    10em 1em var(--xmas-white),
    12em 1em var(--xmas-white),
    14em 1em var(--xmas-white),
    11em 2em var(--xmas-white),
    12em 2em var(--xmas-white),
    13em 2em var(--xmas-white),
    10em 3em var(--xmas-white),
    11em 3em var(--xmas-white),
    12em 3em var(--xmas-white),
    13em 3em var(--xmas-white),
    14em 3em var(--xmas-white),
    11em 4em var(--xmas-white),
    12em 4em var(--xmas-white),
    13em 4em var(--xmas-white),
    10em 5em var(--xmas-white),
    12em 5em var(--xmas-white),
    14em 5em var(--xmas-white),
    21em 1em var(--gold),
    20em 2em var(--gold),
    21em 2em var(--gold),
    22em 2em var(--gold),
    19em 3em var(--gold),
    20em 3em var(--gold),
    21em 3em var(--gold),
    22em 3em var(--gold),
    23em 3em var(--gold),
    20em 4em var(--gold),
    21em 4em var(--gold),
    22em 4em var(--gold),
    20em 5em var(--gold),
    22em 5em var(--gold),
    0em 0em var(--night),
    1em 0em var(--night),
    2em 0em var(--night),
    3em 0em var(--night),
    4em 0em var(--night),
    5em 0em var(--night),
    6em 0em var(--night),
    0em 1em var(--night),
    1em 1em var(--night),
    2em 1em var(--night),
    3em 1em var(--night),
    4em 1em var(--night),
    5em 1em var(--night),
    6em 1em var(--night),
    0em 2em var(--night),
    1em 2em var(--night),
    2em 2em var(--night),
    3em 2em var(--night),
    4em 2em var(--night),
    5em 2em var(--night),
    6em 2em var(--night),
    0em 3em var(--night),
    1em 3em var(--night),
    2em 3em var(--night),
    3em 3em var(--night),
    4em 3em var(--night),
    5em 3em var(--night),
    6em 3em var(--night),
    0em 4em var(--night),
    1em 4em var(--night),
    2em 4em var(--night),
    3em 4em var(--night),
    4em 4em var(--night),
    5em 4em var(--night),
    6em 4em var(--night),
    0em 5em var(--night),
    1em 5em var(--night),
    2em 5em var(--night),
    3em 5em var(--night),
    4em 5em var(--night),
    5em 5em var(--night),
    6em 5em var(--night),
    0em 6em var(--night),
    1em 6em var(--night),
    2em 6em var(--night),
    3em 6em var(--night),
    4em 6em var(--night),
    5em 6em var(--night),
    6em 6em var(--night),
    9em 0em var(--night),
    10em 0em var(--night),
    11em 0em var(--night),
    12em 0em var(--night),
    13em 0em var(--night),
    14em 0em var(--night),
    15em 0em var(--night),
    9em 1em var(--night),
    10em 1em var(--night),
    11em 1em var(--night),
    12em 1em var(--night),
    13em 1em var(--night),
    14em 1em var(--night),
    15em 1em var(--night),
    9em 2em var(--night),
    10em 2em var(--night),
    11em 2em var(--night),
    12em 2em var(--night),
    13em 2em var(--night),
    14em 2em var(--night),
    15em 2em var(--night),
    9em 3em var(--night),
    10em 3em var(--night),
    11em 3em var(--night),
    12em 3em var(--night),
    13em 3em var(--night),
    14em 3em var(--night),
    15em 3em var(--night),
    9em 4em var(--night),
    10em 4em var(--night),
    11em 4em var(--night),
    12em 4em var(--night),
    13em 4em var(--night),
    14em 4em var(--night),
    15em 4em var(--night),
    9em 5em var(--night),
    10em 5em var(--night),
    11em 5em var(--night),
    12em 5em var(--night),
    13em 5em var(--night),
    14em 5em var(--night),
    15em 5em var(--night),
    9em 6em var(--night),
    10em 6em var(--night),
    11em 6em var(--night),
    12em 6em var(--night),
    13em 6em var(--night),
    14em 6em var(--night),
    15em 6em var(--night),
    18em 0em var(--night),
    19em 0em var(--night),
    20em 0em var(--night),
    21em 0em var(--night),
    22em 0em var(--night),
    23em 0em var(--night),
    24em 0em var(--night),
    18em 1em var(--night),
    19em 1em var(--night),
    20em 1em var(--night),
    21em 1em var(--night),
    22em 1em var(--night),
    23em 1em var(--night),
    24em 1em var(--night),
    18em 2em var(--night),
    19em 2em var(--night),
    20em 2em var(--night),
    21em 2em var(--night),
    22em 2em var(--night),
    23em 2em var(--night),
    24em 2em var(--night),
    18em 3em var(--night),
    19em 3em var(--night),
    20em 3em var(--night),
    21em 3em var(--night),
    22em 3em var(--night),
    23em 3em var(--night),
    24em 3em var(--night),
    18em 4em var(--night),
    19em 4em var(--night),
    20em 4em var(--night),
    21em 4em var(--night),
    22em 4em var(--night),
    23em 4em var(--night),
    24em 4em var(--night),
    18em 5em var(--night),
    19em 5em var(--night),
    20em 5em var(--night),
    21em 5em var(--night),
    22em 5em var(--night),
    23em 5em var(--night),
    24em 5em var(--night),
    18em 6em var(--night),
    19em 6em var(--night),
    20em 6em var(--night),
    21em 6em var(--night),
    22em 6em var(--night),
    23em 6em var(--night),
    24em 6em var(--night);
}
/* /build:pixel-art */