[data-theme="halloween"] {
  --navy:        #1c1030;
  --navy-deep:   #0e0719;
  --navy-soft:   #34205a;
  --blue:        #c2410c;
  --blue-mid:    #f97316;
  --sky:         #ff8a1f;
  --sky-pale:    #ffd0a1;
  --paper:       #efe7dc;
  --paper-raised:#f7f1e8;
  --muted:       #7a6b8f;
  --ink-soft:    #4a3768;
  --line:        rgba(28, 16, 48, .12);
  --line-faint:  rgba(28, 16, 48, .06);
  --line-night:  rgba(255, 176, 104, .2);
  --muted-night: #b9a7d6;
  --ok-night:    #8fd14f;
  --accent-ink:  #9a3412;
  --app-bg:      #f2ece6;
  --app-sunken:  #f8f4ef;
  --app-line:    rgba(28, 16, 48, .11);
  --app-line-soft: rgba(28, 16, 48, .055);
}

[data-theme="christmas"] {
  --navy:        #141a3f;
  --navy-deep:   #0a0d26;
  --navy-soft:   #262f68;
  --blue:        #b3212f;
  --blue-mid:    #e0a82e;
  --sky:         #f2c14e;
  --sky-pale:    #f9e2a6;
  --paper:       #eeebe6;
  --paper-raised:#f6f4ef;
  --muted:       #6c7093;
  --ink-soft:    #343a66;
  --line:        rgba(20, 26, 63, .12);
  --line-faint:  rgba(20, 26, 63, .06);
  --line-night:  rgba(242, 193, 78, .2);
  --muted-night: #aab0d6;
  --ok-night:    #7ad7a4;
  --accent-ink:  #8f1a26;
  --app-bg:      #f1eff2;
  --app-sunken:  #f7f6f8;
  --app-line:    rgba(20, 26, 63, .11);
  --app-line-soft: rgba(20, 26, 63, .055);
}

[data-theme] .nav { background: color-mix(in srgb, var(--paper) 85%, transparent); }
[data-theme] .nav.scrolled { background: color-mix(in srgb, var(--paper) 96%, transparent); }
[data-theme] .btn--sky { box-shadow: 0 6px 24px -10px color-mix(in srgb, var(--sky) 90%, transparent); }
[data-theme] .hero-eyebrow { background: color-mix(in srgb, var(--sky) 12%, transparent); }
[data-theme] .price-cell--best { background: color-mix(in srgb, var(--sky) 12%, transparent); }
[data-theme] .app-nav a.active { background: color-mix(in srgb, var(--sky) 16%, transparent); }
[data-theme] .app-lang-switch a.active { background: color-mix(in srgb, var(--sky) 12%, transparent); }

[data-theme] .timeline { background: color-mix(in srgb, var(--navy-deep) 50%, transparent); }
[data-theme] .hero-stat,
[data-theme] .price-perk { background: color-mix(in srgb, var(--navy-deep) 55%, transparent); }
[data-theme] [fill="#3dbff0"] { fill: var(--sky); }
[data-theme] [fill="#4fd39b"] { fill: var(--ok-night); }
[data-theme] [fill="#162a5a"] { fill: var(--navy-soft); }
[data-theme] [fill="#93a7cc"] { fill: var(--muted-night); }
[data-theme] [stroke="#a8e4f8"] { stroke: var(--sky-pale); }

[data-theme] .nav-inner > a:first-child,
[data-theme] .app-brand { position: relative; }
[data-theme] .nav-inner > a:first-child::after,
[data-theme] .app-brand::after {
  position: absolute;
  left: 22px;
  bottom: -6px;
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}
[data-theme] .app-brand::after { left: 18px; bottom: -7px; font-size: .9rem; }
[data-theme="halloween"] .nav-inner > a:first-child::after,
[data-theme="halloween"] .app-brand::after { content: "🎃"; }
[data-theme="christmas"] .nav-inner > a:first-child::after,
[data-theme="christmas"] .app-brand::after { content: "🎄"; }

[data-theme="halloween"] .hero {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180'%3E%3Ccircle cx='170' cy='80' r='78' fill='%23ff9a3c' fill-opacity='.10'/%3E%3Ccircle cx='170' cy='80' r='60' fill='%23ffb460' fill-opacity='.16'/%3E%3Ccircle cx='170' cy='80' r='46' fill='%23ffe2b0'/%3E%3Ccircle cx='156' cy='66' r='7' fill='%23f3c98a'/%3E%3Ccircle cx='186' cy='98' r='5' fill='%23f3c98a'/%3E%3Cdefs%3E%3Cpath id='b' d='M20 6C19 4 18 4 17.5 5L17 3L16 6C12 3 6 2 0 5C3 6 5 8 5 11C8 9 12 10 14 13C16 11 18 12 20 15C22 12 24 11 26 13C28 10 32 9 35 11C35 8 37 6 40 5C34 2 28 3 24 6L23 3L22.5 5C22 4 21 4 20 6Z'/%3E%3C/defs%3E%3Cg fill='%2307040d'%3E%3Cuse href='%23b' transform='translate(142 62) scale(1.4)'/%3E%3Cuse href='%23b' transform='translate(36 34) rotate(-12) scale(.9)'/%3E%3Cuse href='%23b' transform='translate(84 118) rotate(9) scale(.7)'/%3E%3Cuse href='%23b' transform='translate(222 142) rotate(-6) scale(.55)'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 4% top 22px / 270px auto,
    radial-gradient(130% 100% at 15% 0%, var(--navy-soft) 0%, var(--navy) 42%, var(--navy-deep) 100%);
}
[data-theme="halloween"] .site-announcement,
[data-theme="halloween"] .app-announcement {
  background: linear-gradient(100deg, #ff8a1f, #f2600c);
  color: #1c1030;
}

[data-theme="christmas"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(3.5px 3.5px at 87px 43px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 171px 17px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 215px 142px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 98px 154px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 134px 59px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3.5px 3.5px at 27px 116px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 22px 66px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 146px 113px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 149px 36px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 20px 106px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 61px 16px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2px 2px at 39px 79px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 41px 35px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 83px 51px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 53px 100px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 21px 20px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 57px 132px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2px 2px at 114px 85px, rgba(255,255,255,0.7) 50%, transparent 51%);
  background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px;
  animation: noozly-snow 16s linear infinite;
}
[data-theme="christmas"] .site-announcement,
[data-theme="christmas"] .app-announcement {
  background: linear-gradient(100deg, #c8283a, #9e1c2b);
  color: #ffffff;
}

@keyframes noozly-snow {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px; }
}

[data-theme] .app-sidebar {
  background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 38%, var(--navy-deep) 100%);
  color: var(--white);
  border-color: transparent;
}
[data-theme] .app-brand,
[data-theme] .app-user-name { color: var(--white); }
[data-theme] .app-nav-burger span { background: var(--white); }
[data-theme] .app-nav-panel,
[data-theme] .app-sidebar-footer { border-color: var(--line-night); }
[data-theme] .app-nav-label { color: var(--muted-night); }
[data-theme] .app-nav a { color: rgba(255, 255, 255, .84); }
[data-theme] .app-nav a:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
[data-theme] .app-nav a.active { background: var(--sky); color: var(--navy); }
[data-theme] .app-link-muted { color: var(--muted-night); }
[data-theme] .app-link-muted:hover { color: var(--sky); }
[data-theme] .app-bell-btn { color: var(--white); }
[data-theme] .app-bell-btn:hover { background: rgba(255, 255, 255, .1); color: var(--sky); }
[data-theme] .app-bell-panel { color: var(--ink); }
[data-theme] .app-tabbar { border-top: 2px solid var(--sky); }

[data-theme] .app-sidebar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 12px;
  pointer-events: none;
}
[data-theme="halloween"] .app-sidebar::after {
  bottom: -15px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Crect x='15' y='1' width='2' height='3' rx='.6' fill='%236d9a2e'/%3E%3Cellipse cx='16' cy='9.5' rx='7' ry='5.5' fill='%23ff8a1f'/%3E%3Cellipse cx='16' cy='9.5' rx='2.6' ry='5.5' fill='%23f2600c'/%3E%3Cpath d='M12.5 8.5l1.6-1.8.6 2zM19.5 8.5l-1.6-1.8-.6 2zM13 11.2q3 2.2 6 0z' fill='%232a1405'/%3E%3Cpath d='M20 6C19 4 18 4 17.5 5L17 3L16 6C12 3 6 2 0 5C3 6 5 8 5 11C8 9 12 10 14 13C16 11 18 12 20 15C22 12 24 11 26 13C28 10 32 9 35 11C35 8 37 6 40 5C34 2 28 3 24 6L23 3L22.5 5C22 4 21 4 20 6Z' fill='%23a970ff' transform='translate(39 3) scale(.5)'/%3E%3C/svg%3E") 0 0 / 64px 16px repeat-x;
    height: 16px;
}
[data-theme="christmas"] .app-sidebar::after {
  background:
    radial-gradient(circle at 10px 6px, #e63946 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 30px 6px, #f2c14e 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 50px 6px, #5fb8ff 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 70px 6px, #ffffff 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    linear-gradient(transparent 5px, rgba(255, 255, 255, .28) 5px 6px, transparent 6px) 0 0 / 100% 12px repeat-x;
  animation: noozly-twinkle 2.4s ease-in-out infinite alternate;
}

@keyframes noozly-twinkle {
  from { filter: brightness(1); }
  to   { filter: brightness(1.45) drop-shadow(0 0 3px rgba(255, 220, 140, .7)); }
}

@media (min-width: 960px) {
  [data-theme] .app-body {
    background: radial-gradient(120% 90% at 0% 0%, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%) fixed;
  }
  [data-theme] .app-frame { position: relative; z-index: 1; }
  [data-theme] .app-sidebar { position: relative; padding-bottom: 96px; }
  [data-theme] .app-sidebar > * { position: relative; z-index: 1; }
  [data-theme] .app-sidebar > .app-sidebar-top { z-index: 2; }
  [data-theme] .app-sidebar::after {
    top: 0;
    bottom: 0;
    height: auto;
    background-size: auto;
    animation: none;
    filter: none;
  }
  [data-theme="halloween"] .app-sidebar::after {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 96'%3E%3Cdefs%3E%3Cpath id='b' d='M20 6C19 4 18 4 17.5 5L17 3L16 6C12 3 6 2 0 5C3 6 5 8 5 11C8 9 12 10 14 13C16 11 18 12 20 15C22 12 24 11 26 13C28 10 32 9 35 11C35 8 37 6 40 5C34 2 28 3 24 6L23 3L22.5 5C22 4 21 4 20 6Z'/%3E%3C/defs%3E%3Cg fill='%23ffb070' fill-opacity='.35'%3E%3Cuse href='%23b' transform='translate(150 6) scale(.8)'/%3E%3Cuse href='%23b' transform='translate(196 22) rotate(-10) scale(.55)'/%3E%3C/g%3E%3Cpath d='M0 96V70C30 58 62 56 92 64C124 72 156 60 186 54C212 49 234 54 248 60V96Z' fill='%2307040d'/%3E%3Cpath d='M30 72V56a9 9 0 0118 0v16z' fill='%232b1d44'/%3E%3Cpath d='M210 60V38M202 46h16' stroke='%232b1d44' stroke-width='4' stroke-linecap='round'/%3E%3Cg transform='translate(108 70) scale(1)'%3E%3Crect x='-1.5' y='-14' width='3' height='6' rx='1' fill='%236d9a2e'/%3E%3Cellipse cx='0' cy='0' rx='14' ry='10.5' fill='%23ff8a1f'/%3E%3Cellipse cx='0' cy='0' rx='5.5' ry='10.5' fill='%23f2600c'/%3E%3Cpath d='M-8-2l3.5-4 1.5 4.5zM8-2l-3.5-4-1.5 4.5zM-7 3q7 5 14 0l-3 1.5-2-1.5-2 1.5-2-1.5-2 1.5z' fill='%232a1405'/%3E%3C/g%3E%3Cg transform='translate(140 74) scale(0.7)'%3E%3Crect x='-1.5' y='-14' width='3' height='6' rx='1' fill='%236d9a2e'/%3E%3Cellipse cx='0' cy='0' rx='14' ry='10.5' fill='%23ff8a1f'/%3E%3Cellipse cx='0' cy='0' rx='5.5' ry='10.5' fill='%23f2600c'/%3E%3Cpath d='M-8-2l3.5-4 1.5 4.5zM8-2l-3.5-4-1.5 4.5zM-7 3q7 5 14 0l-3 1.5-2-1.5-2 1.5-2-1.5-2 1.5z' fill='%232a1405'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / 100% auto,
      radial-gradient(90% 40% at 100% 0%, rgba(255, 138, 31, .22), transparent 70%);
  }
  [data-theme="christmas"] .app-sidebar::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 96'%3E%3Cpath d='M0 96V72C40 60 82 62 124 70C166 78 206 64 248 66V96Z' fill='%23eef2fa'/%3E%3Cg fill='%232f7a5f'%3E%3Cpath d='M58 22l-13 21h7l-11 18h11l-12 15h36l-12-15h11l-11-18h7z'/%3E%3Cpath d='M196 40l-9 15h5l-8 13h8l-9 10h26l-9-10h8l-8-13h5z'/%3E%3C/g%3E%3Cg fill='%23eef2fa'%3E%3Cpath d='M58 22l-5 8h10z'/%3E%3Cpath d='M45 43h26l-3 4h-20z' fill-opacity='.8'/%3E%3Cpath d='M196 40l-4 6h8z'/%3E%3C/g%3E%3Cg fill='%23e63946'%3E%3Ccircle cx='52' cy='52' r='1.8'/%3E%3Ccircle cx='66' cy='64' r='1.8'/%3E%3Ccircle cx='192' cy='62' r='1.5'/%3E%3C/g%3E%3Cg fill='%23f2c14e'%3E%3Ccircle cx='63' cy='44' r='1.8'/%3E%3Ccircle cx='49' cy='68' r='1.8'/%3E%3Ccircle cx='200' cy='70' r='1.5'/%3E%3C/g%3E%3Cg fill='%23f2c14e'%3E%3Ccircle cx='58' cy='21' r='3'/%3E%3Ccircle cx='196' cy='39' r='2.4'/%3E%3C/g%3E%3Cg%3E%3Crect x='96' y='62' width='16' height='13' rx='1.5' fill='%23c8283a'/%3E%3Crect x='102.5' y='62' width='3' height='13' fill='%23f2c14e'/%3E%3Crect x='114' y='66' width='12' height='10' rx='1.5' fill='%23f2c14e'/%3E%3Crect x='118.5' y='66' width='3' height='10' fill='%23c8283a'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(3.5px 3.5px at 87px 43px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 171px 17px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 215px 142px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 98px 154px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 134px 59px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3.5px 3.5px at 27px 116px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 22px 66px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 146px 113px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 149px 36px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 20px 106px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 61px 16px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2px 2px at 39px 79px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 41px 35px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 83px 51px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 53px 100px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 21px 20px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 57px 132px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2px 2px at 114px 85px, rgba(255,255,255,0.7) 50%, transparent 51%);
    background-repeat: no-repeat, repeat;
    background-position: center bottom;
    background-size: 100% auto, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px;
    animation: noozly-sidebar-snow 16s linear infinite;
  }
  [data-theme] .app-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    z-index: 2;
    pointer-events: none;
  }
  [data-theme="halloween"] .app-frame::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 16'%3E%3Crect x='15' y='1' width='2' height='3' rx='.6' fill='%236d9a2e'/%3E%3Cellipse cx='16' cy='9.5' rx='7' ry='5.5' fill='%23ff8a1f'/%3E%3Cellipse cx='16' cy='9.5' rx='2.6' ry='5.5' fill='%23f2600c'/%3E%3Cpath d='M12.5 8.5l1.6-1.8.6 2zM19.5 8.5l-1.6-1.8-.6 2zM13 11.2q3 2.2 6 0z' fill='%232a1405'/%3E%3Cpath d='M20 6C19 4 18 4 17.5 5L17 3L16 6C12 3 6 2 0 5C3 6 5 8 5 11C8 9 12 10 14 13C16 11 18 12 20 15C22 12 24 11 26 13C28 10 32 9 35 11C35 8 37 6 40 5C34 2 28 3 24 6L23 3L22.5 5C22 4 21 4 20 6Z' fill='%23a970ff' transform='translate(39 3) scale(.5)'/%3E%3C/svg%3E") 0 0 / 64px 16px repeat-x;
    height: 16px;
  }
  [data-theme="christmas"] .app-frame::before {
    background:
      radial-gradient(circle at 10px 6px, #e63946 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 30px 6px, #f2c14e 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 50px 6px, #5fb8ff 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    radial-gradient(circle at 70px 6px, #ffffff 0 3.2px, transparent 3.8px) 0 0 / 80px 12px repeat-x,
    linear-gradient(transparent 5px, rgba(255, 255, 255, .28) 5px 6px, transparent 6px) 0 0 / 100% 12px repeat-x;
    animation: noozly-twinkle 2.4s ease-in-out infinite alternate;
  }
  [data-theme="christmas"] .app-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(3.5px 3.5px at 87px 43px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 171px 17px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 215px 142px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 98px 154px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 134px 59px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3.5px 3.5px at 27px 116px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 22px 66px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 146px 113px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(3px 3px at 149px 36px, rgba(255,255,255,0.9) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 20px 106px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 61px 16px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2px 2px at 39px 79px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 41px 35px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 83px 51px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 53px 100px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 21px 20px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2.5px 2.5px at 57px 132px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(2px 2px at 114px 85px, rgba(255,255,255,0.7) 50%, transparent 51%);
    background-size: 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px, 140px 140px;
    animation: noozly-snow 16s linear infinite;
  }
}

@keyframes noozly-sidebar-snow {
  from { background-position: center bottom, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: center bottom, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 220px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px, 0 140px; }
}

@media (max-width: 720px) {
  [data-theme="halloween"] .hero { background-position: right 10px top 14px, 0 0; background-size: 150px auto, auto; }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="christmas"] .hero::before,
  [data-theme="christmas"] .app-page::before,
  [data-theme="christmas"] .app-sidebar::after,
  [data-theme="christmas"] .app-frame::before { animation: none; }
}