:root {
    --snow-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='white'%3E%3Ccircle cx='22' cy='38' r='2.4' fill-opacity='.9'/%3E%3Ccircle cx='96' cy='126' r='1.8' fill-opacity='.7'/%3E%3Ccircle cx='168' cy='28' r='3' fill-opacity='.85'/%3E%3Ccircle cx='236' cy='204' r='2' fill-opacity='.75'/%3E%3Ccircle cx='272' cy='92' r='2.8' fill-opacity='.9'/%3E%3Ccircle cx='58' cy='252' r='2.2' fill-opacity='.8'/%3E%3Ccircle cx='196' cy='282' r='1.6' fill-opacity='.7'/%3E%3Ccircle cx='140' cy='190' r='2.4' fill-opacity='.85'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='.9' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath transform='translate(126 72)' d='M0 -8V8M-6.9 -4L6.9 4M-6.9 4L6.9 -4'/%3E%3Cpath transform='translate(246 150)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3Cpath transform='translate(40 160)' d='M0 -7V7M-6 -3.5L6 3.5M-6 3.5L6 -3.5'/%3E%3Cpath transform='translate(210 250)' d='M0 -6V6M-5.2 -3L5.2 3M-5.2 3L5.2 -3'/%3E%3C/g%3E%3C/svg%3E");
    --leaf-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg transform='translate(50 60) rotate(25) scale(1.2)' fill='%23e8710a'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(190 40) rotate(-40)' fill='%23c2410c'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(300 130) rotate(70) scale(1.3)' fill='%23eab308'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(120 200) rotate(-15) scale(1.1)' fill='%23b45309'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(250 280) rotate(140) scale(1.2)' fill='%23d97706'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3Cg transform='translate(40 310) rotate(-80)' fill='%23ca8a04'%3E%3Cpath d='M0 -14C10 -8 12 6 0 16C-12 6 -10 -8 0 -14Z'/%3E%3Cpath d='M0 -12V14' stroke='%23000' stroke-opacity='.25' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
    --lights-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56'%3E%3Cpath d='M0 4Q40 32 80 4Q120 32 160 4' fill='none' stroke='%23245c3a' stroke-width='1.6'/%3E%3Cg fill='%23222'%3E%3Crect x='18' y='13' width='4' height='4'/%3E%3Crect x='38' y='17' width='4' height='4'/%3E%3Crect x='58' y='13' width='4' height='4'/%3E%3Crect x='98' y='13' width='4' height='4'/%3E%3Crect x='118' y='17' width='4' height='4'/%3E%3Crect x='138' y='13' width='4' height='4'/%3E%3C/g%3E%3Cellipse cx='20' cy='22' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='40' cy='26' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3Cellipse cx='60' cy='22' rx='4' ry='5.5' fill='%234dff88'/%3E%3Cellipse cx='100' cy='22' rx='4' ry='5.5' fill='%234da6ff'/%3E%3Cellipse cx='120' cy='26' rx='4' ry='5.5' fill='%23ff4d4d'/%3E%3Cellipse cx='140' cy='22' rx='4' ry='5.5' fill='%23ffd24d'/%3E%3C/svg%3E");
}

.snowfall,
.leaf-fall {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 30;
}

.snowfall {
    display: var(--snow-display);
}

.leaf-fall {
    display: var(--leaf-display);
}

.snowfall::before,
.snowfall::after,
.leaf-fall::before,
.leaf-fall::after {
    content: "";
    position: absolute;
    background-repeat: repeat;
    will-change: transform;
}

.snowfall::before {
    top: -600px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--snow-tile);
    background-size: 300px 300px;
    opacity: 0.9;
    animation: snowFallNear 18s linear infinite;
}

.snowfall::after {
    top: -500px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--snow-tile);
    background-size: 500px 500px;
    opacity: 0.6;
    animation: snowFallFar 30s linear infinite;
}

.leaf-fall::before {
    top: -720px;
    left: 0;
    right: -360px;
    bottom: 0;
    background-image: var(--leaf-tile);
    background-size: 360px 360px;
    opacity: 0.9;
    animation: leafFallNear 26s linear infinite;
}

.leaf-fall::after {
    top: -540px;
    left: -540px;
    right: 0;
    bottom: 0;
    background-image: var(--leaf-tile);
    background-size: 540px 540px;
    opacity: 0.7;
    animation: leafFallFar 40s linear infinite;
}

.light-string {
    display: var(--lights-display);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    pointer-events: none;
    z-index: 100;
    background-image: var(--lights-tile);
    background-repeat: repeat-x;
    background-size: 160px 56px;
    animation: lightTwinkle 2.6s ease-in-out infinite alternate;
}

@keyframes snowFallNear {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 600px, 0);
    }
}

@keyframes snowFallFar {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, 500px, 0);
    }
}

@keyframes leafFallNear {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-360px, 720px, 0);
    }
}

@keyframes leafFallFar {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(540px, 540px, 0);
    }
}

@keyframes lightTwinkle {
    from {
        opacity: 0.65;
        filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.5));
    }

    to {
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(255, 214, 120, 0.9));
    }
}

@media (prefers-reduced-motion: reduce) {

    .snowfall::before,
    .snowfall::after,
    .leaf-fall::before,
    .leaf-fall::after,
    .light-string {
        animation: none;
    }
}

#navbar .brand {
    position: relative;
}

#navbar .brand::after {
    content: "";
    position: absolute;
    top: -9px;
    right: -9px;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

:root[data-theme="halloween"] #navbar .brand::after {
    content: "🎃";
}

:root[data-theme="autumn"] #navbar .brand::after {
    content: "🍂";
}

:root[data-theme="winter"] #navbar .brand::after {
    content: "❄️";
}

:root[data-theme="christmas"] #navbar .brand::after {
    content: "🎄";
}

.st-themes {
    padding: 14px 16px 16px;
}

.st-sub {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.st-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.st-theme-grid:last-child {
    margin-bottom: 0;
}

.st-theme {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--search-bg);
    color: var(--muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.st-theme .ico {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.st-theme span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.st-theme:hover {
    color: var(--text);
}

.st-theme.on {
    border-color: var(--text);
    background: var(--hover-bg);
    color: var(--text);
    font-weight: 600;
}