/* The holiday themes' decorations (see `index.tsx`). Hidden unless their
   theme is the page's; never take a click, never move the layout. */
.theme-decor {
  display: none;
  pointer-events: none;
  user-select: none;
}
/* (in both of a holiday's versions, light and dark) */
[data-theme^='halloween-'] .theme-decor[data-decor='halloween'],
[data-theme^='christmas-'] .theme-decor[data-decor='christmas'] {
  display: block;
}
.theme-decor * {
  pointer-events: none;
}
/* Over the whole area under the top bar (`Navigation/framer.tsx`) */
.decor-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: strict;
}

/* ---- Halloween ----------------------------------------------------------- */

/* Faint, so text under a web stays readable */
.decor-web {
  opacity: 0.32;
}

/* A spider on its thread (`Dangle`): the thread grows from the top while the
   spider drops by the same amount, on the same curve, so it hangs on its end.
   At rest (reduced motion) it hangs three quarters down. */
.decor-dangle {
  position: absolute;
  top: 0;
  transform-origin: 50% 0;
  animation: decor-sway calc(var(--dur) * 0.7) ease-in-out var(--delay) infinite alternate;
}
.decor-thread {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 1px;
  height: var(--len);
  background: linear-gradient(oklch(93% 0.02 80 / 0.25), oklch(93% 0.02 80 / 0.6));
  transform-origin: 50% 0;
  transform: scaleY(0.75);
  animation: decor-thread var(--dur) ease-in-out var(--delay) infinite;
}
.decor-spider {
  position: absolute;
  top: 0;
  display: block;
  transform: translateY(calc(var(--len) * 0.75));
  animation: decor-drop var(--dur) ease-in-out var(--delay) infinite;
  /* Lifted to a dusky purple with a pale rim: drawn near-black, it would
     vanish on the night base */
  filter: brightness(2.6) drop-shadow(0 0 1px oklch(93% 0.02 80 / 0.45));
}
.decor-spider > svg {
  display: block;
}
@keyframes decor-thread {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}
@keyframes decor-drop {
  0%, 100% { transform: translateY(calc(var(--len) * 0.4)); }
  50% { transform: translateY(var(--len)); }
}
/* (the bat, outlined by a candle-light glow, so it shows on the night) */
.decor-glow {
  filter: drop-shadow(0 0 1.5px oklch(92% 0.04 80 / 0.7));
}
@keyframes decor-sway {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

/* The jack-o'-lantern's candle flickers */
.decor-lantern {
  animation: decor-flicker 2.6s ease-in-out infinite;
}
@keyframes decor-flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: 0.82; }
  45% { opacity: 0.95; }
  70% { opacity: 0.86; }
}

/* A bat now and then: across the top of the content for ~5s of every 45s */
.decor-bat {
  position: absolute;
  top: 14%;
  transform: translateX(-60px);
  animation: decor-bat 45s linear 6s infinite;
  filter: drop-shadow(0 0 3px oklch(72% 0.17 52 / 0.5));
}
.decor-bat__flap {
  display: block;
  animation: decor-flap 0.28s ease-in-out infinite alternate;
}
.decor-bat__flap > svg {
  display: block;
}
@keyframes decor-bat {
  0% { transform: translate(-60px, 0); }
  4% { transform: translate(30vw, -18px); }
  8% { transform: translate(62vw, 10px); }
  12% { transform: translate(calc(100vw + 60px), -12px); }
  100% { transform: translate(calc(100vw + 60px), -12px); }
}
@keyframes decor-flap {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.55); }
}

/* ---- Christmas ----------------------------------------------------------- */

/* A string of lights hung under the top bar, as two layers of bulbs
   twinkling in turn (one background each, so any width is one element) */
.decor-lights {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 16px;
  background-repeat: repeat-x;
  background-size: 128px 16px;
}
.decor-lights--a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='16'%3E%3Cpath d='M0 1 Q16 9 32 1 T64 1 T96 1 T128 1' fill='none' stroke='%231f4a33' stroke-width='1.2'/%3E%3Crect x='14.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='16' cy='9.5' rx='2.6' ry='3.6' fill='%23e5483f'/%3E%3Crect x='78.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='80' cy='9.5' rx='2.6' ry='3.6' fill='%2341b06a'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px oklch(80% 0.14 85 / 0.6));
  animation: decor-twinkle 3.2s ease-in-out infinite alternate;
}
.decor-lights--b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='16'%3E%3Crect x='46.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='48' cy='9.5' rx='2.6' ry='3.6' fill='%23f2b92c'/%3E%3Crect x='110.5' y='3.5' width='3' height='3' fill='%231f4a33'/%3E%3Cellipse cx='112' cy='9.5' rx='2.6' ry='3.6' fill='%234aa8e8'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px oklch(80% 0.14 85 / 0.6));
  animation: decor-twinkle 3.2s ease-in-out -1.6s infinite alternate;
}
@keyframes decor-twinkle {
  from { opacity: 1; }
  to { opacity: 0.5; }
}

/* Light snow: a few slow flakes, white with an icy rim so they show on the
   cream surfaces too */
.decor-snow {
  position: absolute;
  inset: 0;
}
.decor-flake {
  position: absolute;
  top: -12px;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  background: oklch(99.5% 0.004 230);
  box-shadow: 0 0 0 1px oklch(78% 0.05 235 / 0.5);
  animation: decor-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.decor-flake--crystal {
  border-radius: 0;
  box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg stroke='%2390b4cf' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 -9V9M-7.8 -4.5L7.8 4.5M-7.8 4.5L7.8 -4.5'/%3E%3Cpath d='M-2 -7L0 -5L2 -7M-2 7L0 5L2 7' fill='none'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes decor-fall {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(var(--sway), calc(var(--app-height, 1vh) * 25)) rotate(45deg); }
  50% { transform: translate(0, calc(var(--app-height, 1vh) * 50)) rotate(90deg); }
  75% { transform: translate(calc(var(--sway) * -1), calc(var(--app-height, 1vh) * 75)) rotate(135deg); }
  100% { transform: translate(0, calc(var(--app-height, 1vh) * 100 + 24px)) rotate(180deg); }
}

/* ---- Reduced motion: everything still, nothing flying or falling --------- */
/* ---- The profile menu (`ProfileMenuDecor`) ------------------------------ */

/* Over the pop-up's border (out past its 8px padding and 1px border) */
.decor-frame {
  position: absolute;
  inset: -9px;
}
/* Its bulbs, twinkling in two groups out of step, glowing */
.decor-bulbs--a,
.decor-bulbs--b {
  filter: drop-shadow(0 0 2px oklch(82% 0.15 80 / 0.7));
  animation: decor-twinkle 3.2s ease-in-out infinite alternate;
}
.decor-bulbs--b {
  animation-delay: -1.6s;
}

/* The Halloween bunting's flags (and its bat), swaying from the string */
.decor-sway {
  transform-origin: 0 0;
  transform-box: view-box;
  animation: decor-sway 3.4s ease-in-out infinite alternate;
}
@keyframes decor-sway {
  from { rotate: -7deg; }
  to { rotate: 7deg; }
}

/* ---- The settings panel's scene (`SettingsScene`) ------------------------- */

/* At the foot of the settings, as tall as the art, its top (just its edge:
   on a wide panel the art's cropped to its lower half, where the hills and the
   sledding kid are) and sides fading into the panel so it doesn't sit there as a box (the settings are narrower
   than the panel on a wide screen) */
.decor-scene {
  position: relative;
  /* (taller on a wide panel, where the art's cropped to its width: so it
     still shows the hills' tops, the kid's run) */
  aspect-ratio: 400 / 130;
  min-height: 180px;
  max-height: 260px;
  margin-top: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 16%), linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect;
}
/* The graveyard's little ghost, floating among the graves */
.decor-ghost {
  animation: decor-ghost 4.5s ease-in-out infinite alternate;
}
@keyframes decor-ghost {
  from { transform: translateY(0); opacity: 0.85; }
  to { transform: translateY(-8px); opacity: 0.55; }
}
/* The graveyard's easter egg: a crosshair over it, and the zombie's head
   (only) takes the shot */
.theme-decor.decor-scene[data-decor='halloween'] {
  pointer-events: auto;
  cursor: crosshair;
}
.theme-decor .decor-zombie__head,
.theme-decor .decor-zombie__head * {
  pointer-events: auto;
}
/* Its head, shot: a flash, and the bits flying out and falling */
.decor-burst__flash {
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-burst-flash 0.35s ease-out forwards;
}
@keyframes decor-burst-flash {
  from { scale: 0.3; opacity: 0.9; }
  to { scale: 1.8; opacity: 0; }
}
.decor-burst__bit {
  animation: decor-burst-bit 1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes decor-burst-bit {
  0% { translate: 0 0; opacity: 1; }
  55% { translate: calc(var(--dx) * 1px) calc(var(--dy) * 1px); opacity: 1; }
  100% { translate: calc(var(--dx) * 1.25px) calc(var(--dy) * 1px + 22px); opacity: 0; }
}
/* (and grown back, popping in) */
.decor-zombie__head {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: decor-head-grow 0.4s ease-out;
}
@keyframes decor-head-grow {
  from { scale: 0; }
}

/* The hillside's easter egg: the sledding kid takes a click */
.theme-decor .decor-sledder__hit,
.theme-decor .decor-sledder__hit * {
  pointer-events: auto;
  cursor: var(--decor-cursor-pointer, pointer);
}
/* Upset: the kid flipping forward off the sled, face down into the snow (the
   body's drawn feet at its origin), legs kicking; the sled sliding on,
   tipping; a puff of snow, and the drift their head's in */
.decor-upset__kid {
  animation: decor-upset-kid 0.75s cubic-bezier(0.3, 0.1, 0.6, 1) forwards;
}
@keyframes decor-upset-kid {
  0% { transform: translate(0, -2px) rotate(0deg); }
  35% { transform: translate(-10px, -16px) rotate(-100deg); }
  70% { transform: translate(-20px, -14px) rotate(-160deg); }
  100% { transform: translate(-24px, -11px) rotate(-172deg); }
}
.decor-upset__legs {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: decor-upset-kick 0.22s ease-in-out 0.8s 10 alternate;
}
@keyframes decor-upset-kick {
  from { rotate: -14deg; }
  to { rotate: 14deg; }
}
.decor-upset__sled {
  animation: decor-upset-sled 1.1s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes decor-upset-sled {
  to { transform: translate(-40px, 0.5px) rotate(18deg); }
}
.decor-upset__drift {
  opacity: 0;
  animation: decor-upset-drift 0.1s linear 0.68s forwards;
}
@keyframes decor-upset-drift {
  to { opacity: 1; }
}
.decor-upset__puff circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-upset-puff 0.8s ease-out 0.68s forwards;
}
@keyframes decor-upset-puff {
  from { opacity: 0.95; scale: 0.3; }
  to { opacity: 0; scale: 1.8; translate: 0 -3px; }
}

/* Shot: it stops where it is (its walk, turn, steps and lurch held), falls
   back from its feet, flat, with a bounce; its head grown back, it gets up,
   and walks on from there. (At rest at each end, so it's down, still, under
   reduced motion too) */
/* (over the walk's own `animation`, set below) */
.decor-zombie.decor-zombie--stopped,
.decor-zombie--stopped .decor-zombie__turn,
.decor-zombie--stopped .decor-zombie__leg,
.decor-zombie--stopped .decor-zombie__lurch {
  animation-play-state: paused;
}
.decor-zombie__fall {
  rotate: -86deg;
  animation: decor-zombie-fall 0.75s cubic-bezier(0.55, 0, 0.9, 0.6) 0.12s backwards;
}
@keyframes decor-zombie-fall {
  0% { rotate: 0deg; }
  72% { rotate: -92deg; }
  86% { rotate: -82deg; }
  100% { rotate: -86deg; }
}
.decor-zombie__rise {
  animation: decor-zombie-rise 1.2s cubic-bezier(0.3, 0, 0.3, 1);
}
@keyframes decor-zombie-rise {
  0% { rotate: -86deg; }
  45% { rotate: -40deg; }
  80% { rotate: 6deg; }
  100% { rotate: 0deg; }
}

/* The graveyard's zombie: walking the length of the graveyard and back
   (from its spot between the graves: off the left to off the right), turning
   at each end, legs dragging in turn, lurching */
.decor-zombie {
  animation: decor-zombie-walk 70s linear infinite;
}
@keyframes decor-zombie-walk {
  0% { translate: -150px 0; }
  50% { translate: 310px 0; }
  100% { translate: -150px 0; }
}
.decor-zombie__turn {
  transform-box: fill-box;
  transform-origin: center;
  animation: decor-zombie-turn 70s step-end infinite;
}
@keyframes decor-zombie-turn {
  0% { scale: 1 1; }
  50% { scale: -1 1; }
}
.decor-zombie__leg {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: decor-zombie-step 1.4s ease-in-out infinite alternate;
}
.decor-zombie__leg--b {
  animation-delay: -1.4s;
}
@keyframes decor-zombie-step {
  from { rotate: -16deg; }
  to { rotate: 14deg; }
}
.decor-zombie__lurch {
  animation: decor-zombie-lurch 0.7s ease-in-out infinite alternate;
}
@keyframes decor-zombie-lurch {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 1.2px; rotate: 2deg; }
}

/* ---- The top bar's parade (`TopBarParade`) --------------------------------- */

/* Each crosses the bar once, left to right, from just off it to just past it */
.decor-parade__go {
  translate: -220px 0;
  animation: decor-parade-go var(--dur) linear var(--delay) both;
}
@keyframes decor-parade-go {
  to { translate: calc(100vw + 40px) 0; }
}
/* The sleigh rising and dipping as it flies */
.decor-parade__bob {
  animation: decor-parade-bob 2.4s ease-in-out infinite alternate;
}
@keyframes decor-parade-bob {
  from { translate: 0 -2px; }
  to { translate: 0 6px; }
}

/* ---- The cursor ------------------------------------------------------------ */

/* A witch on her broom at Halloween, a candy cane at Christmas (where there's a
   mouse), its tip the point; over what's clickable it sparkles. Text fields
   keep their caret. Outlined dark, then light, to show on any surface. */
@media (pointer: fine) {
  [data-theme^='halloween-'] {
    --decor-cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M2.5 2.5 L20 20%22 stroke=%22%23fff7e6%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M18.6 22.4 L22.4 18.6 L31 25.5 L25.5 31z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%223.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M15.5 9.2 Q20.5 10.5 23 15.5 Q19.5 14.6 17.4 15.4z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M13.6 15.4 L12.6 19.2 L10.6 19.8%22 fill=%22none%22 stroke=%22%23fff7e6%22 stroke-width=%223.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.6 10.6 L8.4 9.2%22 fill=%22none%22 stroke=%22%23fff7e6%22 stroke-width=%223.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12.2 9 Q11 12.5 11.4 14.6 L17.8 16.8 Q17.4 12 15.8 9z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2214.2%22 cy=%227.2%22 r=%222.1%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22/%3E%3Cpath d=%22M12.4 5 L15.9 5.1 L19.4 1.7 Q17.9 2.9 16.4 1.6z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M10.6 5.4 Q14.4 3.4 18.4 5.6 Q14.4 4.9 10.6 5.4z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M2.5 2.5 L20 20%22 stroke=%22%231a1222%22 stroke-width=%224.5%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2.5 2.5 L20 20%22 stroke=%22%239a6431%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M18.6 22.4 L22.4 18.6 L31 25.5 L25.5 31z%22 fill=%22%23e3b450%22 stroke=%22%231a1222%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M21.5 21.5 L28 28 M20.6 23 L26 29.4 M23 20.6 L29.4 26%22 stroke=%22%23b07f25%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M17.9 20.7 L20.7 17.9 L23 20.2 L20.2 23z%22 fill=%22%238a4fd0%22 stroke=%22%231a1222%22 stroke-width=%221%22/%3E%3Cpath d=%22M15.5 9.2 Q20.5 10.5 23 15.5 Q19.5 14.6 17.4 15.4z%22 fill=%22%234b2d73%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M13.6 15.4 L12.6 19.2 L10.6 19.8%22 fill=%22none%22 stroke=%22%231a1222%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.6 10.6 L8.4 9.2%22 fill=%22none%22 stroke=%22%232b1d3d%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12.2 9 Q11 12.5 11.4 14.6 L17.8 16.8 Q17.4 12 15.8 9z%22 fill=%22%232b1d3d%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2214.2%22 cy=%227.2%22 r=%222.1%22 fill=%22%2386c45c%22 stroke=%22%231a1222%22 stroke-width=%221%22/%3E%3Cpath d=%22M12.4 5 L15.9 5.1 L19.4 1.7 Q17.9 2.9 16.4 1.6z%22 fill=%22%232b1d3d%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M10.6 5.4 Q14.4 3.4 18.4 5.6 Q14.4 4.9 10.6 5.4z%22 fill=%22%232b1d3d%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.2 7 L11 7.6 L12.2 7.9z%22 fill=%22%2386c45c%22 stroke=%22%231a1222%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M13.4 3.9 L16.5 4%22 stroke=%22%23f58028%22 stroke-width=%221.1%22/%3E%3C/svg%3E") 3 3, auto;
    --decor-cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M2.5 2.5 L20 20%22 stroke=%22%23fff7e6%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M18.6 22.4 L22.4 18.6 L31 25.5 L25.5 31z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%223.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M15.5 9.2 Q20.5 10.5 23 15.5 Q19.5 14.6 17.4 15.4z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M13.6 15.4 L12.6 19.2 L10.6 19.8%22 fill=%22none%22 stroke=%22%23fff7e6%22 stroke-width=%223.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.6 10.6 L8.4 9.2%22 fill=%22none%22 stroke=%22%23fff7e6%22 stroke-width=%223.6%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12.2 9 Q11 12.5 11.4 14.6 L17.8 16.8 Q17.4 12 15.8 9z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2214.2%22 cy=%227.2%22 r=%222.1%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22/%3E%3Cpath d=%22M12.4 5 L15.9 5.1 L19.4 1.7 Q17.9 2.9 16.4 1.6z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M10.6 5.4 Q14.4 3.4 18.4 5.6 Q14.4 4.9 10.6 5.4z%22 fill=%22%23fff7e6%22 stroke=%22%23fff7e6%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M2.5 2.5 L20 20%22 stroke=%22%231a1222%22 stroke-width=%224.5%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M2.5 2.5 L20 20%22 stroke=%22%239a6431%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M18.6 22.4 L22.4 18.6 L31 25.5 L25.5 31z%22 fill=%22%23e3b450%22 stroke=%22%231a1222%22 stroke-width=%221.2%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M21.5 21.5 L28 28 M20.6 23 L26 29.4 M23 20.6 L29.4 26%22 stroke=%22%23b07f25%22 stroke-width=%22.9%22/%3E%3Cpath d=%22M17.9 20.7 L20.7 17.9 L23 20.2 L20.2 23z%22 fill=%22%238a4fd0%22 stroke=%22%231a1222%22 stroke-width=%221%22/%3E%3Cpath d=%22M15.5 9.2 Q20.5 10.5 23 15.5 Q19.5 14.6 17.4 15.4z%22 fill=%22%234b2d73%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M13.6 15.4 L12.6 19.2 L10.6 19.8%22 fill=%22none%22 stroke=%22%231a1222%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.6 10.6 L8.4 9.2%22 fill=%22none%22 stroke=%22%232b1d3d%22 stroke-width=%221.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M12.2 9 Q11 12.5 11.4 14.6 L17.8 16.8 Q17.4 12 15.8 9z%22 fill=%22%232b1d3d%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2214.2%22 cy=%227.2%22 r=%222.1%22 fill=%22%2386c45c%22 stroke=%22%231a1222%22 stroke-width=%221%22/%3E%3Cpath d=%22M12.4 5 L15.9 5.1 L19.4 1.7 Q17.9 2.9 16.4 1.6z%22 fill=%22%232b1d3d%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M10.6 5.4 Q14.4 3.4 18.4 5.6 Q14.4 4.9 10.6 5.4z%22 fill=%22%232b1d3d%22 stroke=%22%231a1222%22 stroke-width=%221%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M12.2 7 L11 7.6 L12.2 7.9z%22 fill=%22%2386c45c%22 stroke=%22%231a1222%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M13.4 3.9 L16.5 4%22 stroke=%22%23f58028%22 stroke-width=%221.1%22/%3E%3Cpath d=%22M4.5 13.5 L5.7 16.8 L9.0 18.0 L5.7 19.2 L4.5 22.5 L3.3 19.2 L0.0 18.0 L3.3 16.8z%22 fill=%22%23ffd23f%22 stroke=%22%231a1222%22 stroke-width=%22.8%22/%3E%3C/svg%3E") 3 3, pointer;
  }
  [data-theme^='christmas-'] {
    --decor-cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%23fff7e6%22 stroke-width=%227.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%231a1222%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%223.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%23e0322f%22 stroke-width=%223.8%22 stroke-dasharray=%222.6 2.6%22/%3E%3C/svg%3E") 4 4, auto;
    --decor-cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%23fff7e6%22 stroke-width=%227.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%231a1222%22 stroke-width=%226%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-width=%223.8%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M3.5 3.5 L19 19 Q23 23 27 19 Q30 15.5 26.5 12.5%22 fill=%22none%22 stroke=%22%23e0322f%22 stroke-width=%223.8%22 stroke-dasharray=%222.6 2.6%22/%3E%3Cpath d=%22M12 14 L13.2 17.3 L16.5 18.5 L13.2 19.7 L12 23 L10.8 19.7 L7.5 18.5 L10.8 17.3z%22 fill=%22%23ffd23f%22 stroke=%22%231a1222%22 stroke-width=%22.8%22/%3E%3C/svg%3E") 4 4, pointer;
  }
  :is([data-theme^='halloween-'], [data-theme^='christmas-']) body {
    cursor: var(--decor-cursor);
  }
  :is([data-theme^='halloween-'], [data-theme^='christmas-'])
    :is(a[href], button:not(:disabled), [role='button'], [role='radio'], [role='tab'], [role='menuitem'], label, select, summary, .btn, .cursor-pointer) {
    cursor: var(--decor-cursor-pointer);
  }
}

@media (prefers-reduced-motion: reduce) {
  .decor-burst {
    display: none;
  }
  .theme-decor,
  .theme-decor * {
    animation: none !important;
  }
  .decor-bat,
  .decor-snow {
    display: none;
  }
}

.top-nav {
  transition: all 1s ease;
}

#topMenu > * {
  /* // justify-content: center; */
  align-content: center;
  align-items: center;
  /* // transition: all 1s ease;
  // animation: grow 1s linear 1 forwards;
  // height: var(--ogHeight); */

}

#topMenu > *:not(:last-child) {
  display: none;
}

#subMenu > *:not(:last-child) {
  display: none;
}

/* // @keyframes grow {
//   0% {
//     height: var(--ogHeight);
//   }
//   100% {
//     height: var(--height);
//   }
// } */