:root[data-theme="halloween"] {
    --bg: #0a0604;
    --text: #f5ebe6;
    --text: #ff7518;
    --muted: #a37559;
    --border: #3d1c0c;
    --bg-elevated: rgba(255, 117, 24, 0.12);
    --bg-card: rgba(28, 14, 8, 0.6);
    --bg-card-hover: rgba(46, 21, 10, 0.85);
    --bg-code: #050201;
    --code-inline-bg: rgba(255, 117, 24, 0.15);
    --code-inline-text: #ff944d;
    --code-text: #fed7aa;
    --bg-menu: #0e0704;
    --bg-modal: rgba(10, 6, 4, 0.92);
    --hover-bg: rgba(255, 117, 24, 0.12);
    --search-bg: rgba(255, 117, 24, 0.08);
    --search-panel-bg: rgba(14, 7, 4, 0.95);
    --code-group-bg: #1c0e07;
    --code-group-panel-bg: #0a0604;
    --code-tab-active: #ff7518;
    --footer-border: #3d1c0c;
    --border-subtle: rgba(255, 117, 24, 0.15);
    --btn-primary-bg: #ff7518;
    --btn-primary-text: #000000;
    --btn-home-bg: #ff7518;
    --btn-home-text: #000000;
    --callout-note-bg: rgba(255, 117, 24, 0.14);
    --callout-info-bg: rgba(168, 85, 247, 0.15);
    --callout-warning-bg: rgba(255, 154, 77, 0.18);
    --callout-warning-text: #ffaa5e;
    --body-radial-tint: rgba(10, 6, 4, 0.85);
    --skeleton-pulse-1: rgba(255, 117, 24, 0.06);
    --skeleton-pulse-2: rgba(255, 117, 24, 0.18);
    --spider-display: block;
    --cobweb-display: block;
    --spider-thread: rgba(255, 154, 77, 0.4);

    --hl-comment: #7c4f34;
    --hl-punct: #fed7aa;
    --hl-func: #ff944d;
    --hl-keyword: #a855f7;
    --hl-string: #84cc16;
    --hl-var: #ff7518;
    --hl-op: #a855f7;
    --hl-num: #f59e0b;
    --hl-param: #ffedd5;
    --hl-class: #c084fc;
    --hl-tag: #ff7518;
    --hl-deleted-color: #ef4444;
    --hl-deleted-bg: rgba(239, 68, 68, 0.2);
    --hl-inserted-color: #84cc16;
    --hl-inserted-bg: rgba(132, 204, 22, 0.2);
}

:root[data-theme="christmas"] {
    --bg: #07110c;
    --text: #f4efe6;
    --text: #ff5c5c;
    --muted: #8fa89a;
    --border: #1f3a2b;
    --bg-elevated: rgba(255, 92, 92, 0.1);
    --bg-card: rgba(10, 26, 18, 0.6);
    --bg-card-hover: rgba(18, 44, 30, 0.85);
    --bg-code: #040a07;
    --code-inline-bg: rgba(245, 196, 81, 0.14);
    --code-inline-text: #f5c451;
    --code-text: #e8f5e9;
    --bg-menu: #09150e;
    --bg-modal: rgba(7, 17, 12, 0.9);
    --hover-bg: rgba(255, 92, 92, 0.12);
    --search-bg: rgba(245, 196, 81, 0.08);
    --search-panel-bg: rgba(9, 21, 14, 0.95);
    --code-group-bg: #11261a;
    --code-group-panel-bg: #07110c;
    --code-tab-active: #ff5c5c;
    --footer-border: #1f3a2b;
    --border-subtle: rgba(245, 196, 81, 0.14);
    --btn-primary-bg: #d92d3a;
    --btn-primary-text: #ffffff;
    --btn-home-bg: #d92d3a;
    --btn-home-text: #ffffff;
    --callout-note-bg: rgba(47, 191, 113, 0.14);
    --callout-info-bg: rgba(245, 196, 81, 0.14);
    --callout-warning-bg: rgba(255, 92, 92, 0.18);
    --callout-warning-text: #ff9a9a;
    --body-radial-tint: rgba(7, 17, 12, 0.85);
    --skeleton-pulse-1: rgba(245, 196, 81, 0.06);
    --skeleton-pulse-2: rgba(245, 196, 81, 0.16);
    --snow-display: block;
    --lights-display: block;

    --hl-comment: #5f8a72;
    --hl-punct: #e8f5e9;
    --hl-func: #f5c451;
    --hl-keyword: #ff6b6b;
    --hl-string: #5fd68f;
    --hl-var: #ff9f68;
    --hl-op: #ff6b6b;
    --hl-num: #f5c451;
    --hl-param: #fdf2d0;
    --hl-class: #7fe3b0;
    --hl-tag: #ff6b6b;
    --hl-deleted-color: #ff6b6b;
    --hl-deleted-bg: rgba(255, 107, 107, 0.18);
    --hl-inserted-color: #5fd68f;
    --hl-inserted-bg: rgba(95, 214, 143, 0.18);
}

:root[data-theme="autumn"] {
    --bg: #1a0f08;
    --text: #f7ead7;
    --text: #f4b942;
    --muted: #a68a6d;
    --border: #3a2412;
    --bg-elevated: rgba(244, 185, 66, 0.1);
    --bg-card: rgba(40, 23, 11, 0.6);
    --bg-card-hover: rgba(58, 36, 18, 0.85);
    --bg-code: #0e0703;
    --code-inline-bg: rgba(244, 185, 66, 0.14);
    --code-inline-text: #f4b942;
    --code-text: #fde7c0;
    --bg-menu: #1a0f08;
    --bg-modal: rgba(26, 15, 8, 0.9);
    --hover-bg: rgba(244, 185, 66, 0.12);
    --search-bg: rgba(244, 185, 66, 0.08);
    --search-panel-bg: rgba(26, 15, 8, 0.95);
    --code-group-bg: #28170b;
    --code-group-panel-bg: #1a0f08;
    --code-tab-active: #f4b942;
    --footer-border: #3a2412;
    --border-subtle: rgba(244, 185, 66, 0.14);
    --btn-primary-bg: #f4b942;
    --btn-primary-text: #1a0f08;
    --btn-home-bg: #f4b942;
    --btn-home-text: #1a0f08;
    --callout-note-bg: rgba(200, 69, 44, 0.16);
    --callout-info-bg: rgba(132, 160, 60, 0.16);
    --callout-warning-bg: rgba(244, 185, 66, 0.18);
    --callout-warning-text: #f8cf7a;
    --body-radial-tint: rgba(26, 15, 8, 0.85);
    --skeleton-pulse-1: rgba(244, 185, 66, 0.06);
    --skeleton-pulse-2: rgba(244, 185, 66, 0.17);
    --leaf-display: block;

    --hl-comment: #8a6a4a;
    --hl-punct: #fde7c0;
    --hl-func: #f4b942;
    --hl-keyword: #e0643f;
    --hl-string: #a3b94a;
    --hl-var: #e8913a;
    --hl-op: #e0643f;
    --hl-num: #f4b942;
    --hl-param: #fdf0d8;
    --hl-class: #d9a35b;
    --hl-tag: #e0643f;
    --hl-deleted-color: #e0643f;
    --hl-deleted-bg: rgba(224, 100, 63, 0.18);
    --hl-inserted-color: #a3b94a;
    --hl-inserted-bg: rgba(163, 185, 74, 0.18);
}

:root[data-theme="winter"] {
    --bg: #0d1b2a;
    --text: #e6f0fa;
    --text: #d6ecff;
    --muted: #7f98b3;
    --border: #1b2c44;
    --bg-elevated: rgba(138, 209, 255, 0.1);
    --bg-card: rgba(16, 32, 52, 0.6);
    --bg-card-hover: rgba(26, 48, 76, 0.85);
    --bg-code: #08121e;
    --code-inline-bg: rgba(138, 209, 255, 0.14);
    --code-inline-text: #8ad1ff;
    --code-text: #cfe4f7;
    --bg-menu: #0d1b2a;
    --bg-modal: rgba(13, 27, 42, 0.88);
    --hover-bg: rgba(138, 209, 255, 0.1);
    --search-bg: rgba(138, 209, 255, 0.08);
    --search-panel-bg: rgba(13, 27, 42, 0.95);
    --code-group-bg: #132640;
    --code-group-panel-bg: #0d1b2a;
    --code-tab-active: #8ad1ff;
    --footer-border: #1b2c44;
    --border-subtle: rgba(138, 209, 255, 0.14);
    --btn-primary-bg: #8ad1ff;
    --btn-primary-text: #06101c;
    --btn-home-bg: #8ad1ff;
    --btn-home-text: #06101c;
    --callout-note-bg: rgba(138, 209, 255, 0.14);
    --callout-info-bg: rgba(185, 166, 255, 0.14);
    --callout-warning-bg: rgba(255, 214, 138, 0.16);
    --callout-warning-text: #ffd68a;
    --body-radial-tint: rgba(13, 27, 42, 0.85);
    --skeleton-pulse-1: rgba(138, 209, 255, 0.06);
    --skeleton-pulse-2: rgba(138, 209, 255, 0.16);
    --snow-display: block;

    --hl-comment: #5b7491;
    --hl-punct: #cfe4f7;
    --hl-func: #8ad1ff;
    --hl-keyword: #b9a6ff;
    --hl-string: #9be7d4;
    --hl-var: #ffb4c7;
    --hl-op: #8ad1ff;
    --hl-num: #ffd68a;
    --hl-param: #e6f0fa;
    --hl-class: #a9e4ff;
    --hl-tag: #b9a6ff;
    --hl-deleted-color: #ff8fa3;
    --hl-deleted-bg: rgba(255, 143, 163, 0.18);
    --hl-inserted-color: #9be7d4;
    --hl-inserted-bg: rgba(155, 231, 212, 0.18);
}

.cobweb {
    display: var(--cobweb-display);
    position: fixed;
    width: 160px;
    height: 160px;
    pointer-events: none;
    z-index: 35;
    opacity: 0.8;
}

.cobweb-top-left {
    top: 0;
    left: 0;
    transform: scaleX(-1);
}

.cobweb-top-right {
    top: 0;
    right: 0;
}

.cobweb-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.spider-container {
    display: var(--spider-display);
    position: fixed;
    top: 0;
    right: 12%;
    pointer-events: none;
    z-index: 100;
    animation: spiderDescend 10s ease-in-out infinite;
}

.spider-thread {
    width: 1.5px;
    height: 100vh;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--spider-thread);
}

.spider-body {
    position: relative;
    width: 48px;
    height: 48px;
    margin-top: 100px;
    pointer-events: auto;
    cursor: pointer;
    animation: spiderSway 3s ease-in-out infinite alternate;
}

.spider-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    scale: 2;
    padding-top: 20px;
}

@keyframes spiderDescend {
    0% {
        transform: translateY(-80px);
    }

    45% {
        transform: translateY(240px);
    }

    55% {
        transform: translateY(240px);
    }

    90% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-80px);
    }
}

@keyframes spiderSway {
    0% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

@keyframes spiderDrop {
    from {
        transform: translateY(240px);
    }

    to {
        transform: translateY(130vh);
    }
}

: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;
}