/* Darkmode, lightmode coloured modes*/


/* Standard theme: light mode */
/* Standard theme: light mode */
:root {
    color-scheme: light;
    --site-bg-color: rgb(255, 255, 255);
    --site-body-background:
        linear-gradient(
            180deg,
            rgb(255, 255, 255) 0%,
            rgb(252, 251, 255) 52%,
            rgb(247, 252, 255) 100%
        );
    --site-text-color: rgb(20, 20, 28);
    --main-bg-color: rgba(252, 252, 255, 0.96);
    --main-border-color: rgba(255, 0, 220, 0.72);
    --main-border-radius: 18px;
    --card-border-color: rgba(196, 40, 218, 0.52);
    --card-bg-color: rgba(241, 241, 246, 0.98);
    --card-text-color: rgb(31, 31, 42);
    --card-secondary-text-color: rgb(82, 82, 100);
    --card-border-radius: 18px;
    --card-default-shadow:
        0 12px 28px rgba(30, 30, 45, 0.18),
        0 0 14px rgba(204, 0, 255, 0.10);
    --card-shadow-color: rgba(30, 30, 45, 0.24);
    --card-hover-shadow:
        0 18px 44px rgba(30, 30, 45, 0.28),
        0 0 30px rgba(204, 0, 255, 0.25);
    --card-hover-border-color: rgba(255, 0, 220, 0.92);
    --card-glow-color: rgba(204, 0, 255, 0.10);
    --card-soft-glow-color: rgba(155, 90, 210, 0.10);
    --card-corner-glow-color: rgba(0, 190, 170, 0.14);
    --card-highlight-color: rgba(255, 255, 255, 0.48);
    --card-image-border-color: rgba(196, 40, 218, 0.42);
    --card-image-shadow:
        0 8px 18px rgba(30, 30, 45, 0.12);
    --card-image-hover-shadow:
        0 10px 24px rgba(120, 60, 180, 0.16);
    --card-gradient-pink: rgba(255, 0, 220, 0.18);
    --card-gradient-purple: rgba(150, 80, 255, 0.14);
    --card-gradient-green: rgba(0, 210, 170, 0.14);
    --badge-text-color: rgb(25, 25, 35);
    --badge-bg-color: rgba(255, 255, 255, 0.52);
    --badge-border-color: rgba(110, 90, 130, 0.68);
    --button-bg-color: rgba(204, 0, 255, 0.12);
    --button-border-color: rgba(204, 0, 255, 0.42);
    --button-text-color: rgb(25, 25, 35);
    --button-border-radius: 999px;
    --article-title-color: rgb(45, 35, 55);
    --nav-text-color: rgb(234, 6, 200);
    --nav-hover: rgb(88, 0, 70);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgb(0, 190, 170),
            rgb(230, 0, 200),
            rgb(145, 85, 235),
            rgb(0, 190, 170)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            rgba(255, 0, 220, 0),
            rgba(255, 0, 220, 0.90),
            rgba(0, 195, 160, 0.88),
            rgba(255, 0, 220, 0)
        );
    --site-heading-glow:
        drop-shadow(0 0 7px rgba(204, 0, 255, 0.24));
    --site-heading-line-shadow:
        0 0 10px rgba(204, 0, 255, 0.28);
    --article-accent-bg: rgba(204, 0, 255, 0.09);
    --article-accent-bg-strong: rgba(204, 0, 255, 0.16);
    --article-accent-border: rgba(204, 0, 255, 0.40);
    --article-accent-border-strong: rgba(204, 0, 255, 0.68);
    --social-page-background: rgba(250, 248, 252, 0.92);
    --social-page-border: rgba(204, 0, 255, 0.24);
    --social-page-shadow:
        0 20px 48px rgba(60, 50, 70, 0.18),
        0 0 24px rgba(204, 0, 255, 0.08);
        /* Form controls */
    --form-control-bg-color: var(--card-bg-color);
    --form-control-text-color: var(--card-text-color);
    --form-control-placeholder-color: var(--card-secondary-text-color);
    --form-control-border-color: var(--card-border-color);
    --form-control-focus-border-color: var(--card-hover-border-color);

    --form-control-focus-shadow:
        0 0 0 3px var(--card-soft-glow-color),
        0 0 18px var(--card-glow-color);
    --form-label-color: var(--card-text-color);
    --form-result-bg-color: var(--article-accent-bg-strong);
    --form-result-border-color: var(--article-accent-border-strong);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --site-bg-color: rgba(29, 29, 29);
    --site-text-color: rgba(220, 220, 200);
    --main-bg-color: rgba(32, 31, 31);
    --main-border-color: rgba(255, 0, 220, 0.75);
    --card-border-color: rgba(204, 0, 255, 0.75);
    --card-bg-color: rgb(45,45,45);
    --card-text-color: rgb(235,235,235);
    --card-secondary-text-color: rgb(180,180,180);
    --card-default-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 8px rgba(204,0,255,.10);
    --card-shadow-color: rgba(0,0,0,0.8);
    --card-hover-shadow: 0 18px 50px rgba(0, 0, 0, 0.85), 0 0 28px rgba(204, 0, 255, 0.45);
    --card-hover-border-color: rgba(204, 0, 255, 0.95);
    --card-glow-color: rgba(204, 0, 255, 0.16);
    --card-soft-glow-color: rgba(160, 60, 255, 0.16);
    --card-corner-glow-color: rgba(180, 0, 255, 0.32);
    --card-highlight-color: rgba(255, 255, 255, 0.06);
    --card-image-border-color: rgba(204, 0, 255, 0.65);
    --card-image-shadow: none;
    --card-image-hover-shadow: none;
    --card-gradient-pink: rgba(255, 0, 220, 0.24);
    --card-gradient-purple: rgba(120, 90, 255, 0.18);
    --card-gradient-green: rgba(0, 255, 200, 0.20);
    --badge-text-color: white;
    --badge-bg-color: rgba(255,255,255,0.15);
    --badge-border-color: rgba(255,255,255,0.35);
    --button-bg-color: rgba(204, 0, 255, 0.18);
    --button-border-color: rgba(204, 0, 255, 0.65);
    --button-text-color: rgb(235, 235, 235);
    --article-title-color: rgb(255, 230, 250);
    --site-body-background: var(--site-bg-color);
    --nav-text-color: rgb(234, 6, 200);
    --nav-hover: rgb(74, 0, 61);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgba(255, 235, 252, 1),
            rgba(255, 0, 220, 1),
            rgba(175, 80, 255, 1),
            rgba(0, 210, 120, 1)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 0, 220, 0.90),
            rgba(0, 210, 120, 0.82),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 9px rgba(204, 0, 255, 0.34));
    --site-heading-line-shadow:
        0 0 13px rgba(204, 0, 255, 0.38);
    --article-accent-bg: rgba(204, 0, 255, 0.12);
    --article-accent-bg-strong: rgba(204, 0, 255, 0.20);
    --article-accent-border: rgba(204, 0, 255, 0.48);
    --article-accent-border-strong: rgba(204, 0, 255, 0.78);
    --social-page-background: rgba(22, 18, 27, 0.84);
    --social-page-border: rgba(204, 0, 255, 0.24);
    --social-page-shadow:
        0 0 30px rgba(204, 0, 255, 0.18),
        0 20px 55px rgba(0, 0, 0, 0.42);
}

:root[data-theme="pink"] {
    color-scheme: dark;
    --site-bg-color: rgba(85, 1, 72);
    --site-text-color: rgba(222, 1, 188);
    --main-bg-color: rgba(66, 2, 56);
    --main-border-color: rgba(255, 0, 220, 0.75);
    --card-bg-color: rgb(70,0,55);
    --card-text-color: rgb(255,145,235);
    --card-secondary-text-color: rgb(255,170,240);
    --card-default-shadow: 0 8px 24px rgba(0,0,0,.40), 0 0 10px rgba(255,0,220,.12);
    --card-shadow-color: rgba(0,0,0,0.6);
    --card-hover-shadow: 0 20px 56px rgba(0, 0, 0, 0.8), 0 0 34px rgba(255, 0, 220, 0.65);
    --card-hover-border-color: rgba(255, 0, 220, 1);
    --card-glow-color: rgba(255, 0, 220, 0.18);
    --card-soft-glow-color: rgba(255, 0, 220, 0.16);
    --card-corner-glow-color: rgba(255, 0, 220, 0.30);
    --card-highlight-color: rgba(255, 255, 255, 0.06);
    --card-image-border-color: rgba(255, 0, 220, 0.75);
    --card-image-shadow: none;
    --card-image-hover-shadow: none;
    --card-gradient-pink: rgba(255, 80, 230, 0.22);
    --card-gradient-purple: rgba(170, 80, 255, 0.18);
    --card-gradient-green: rgba(0, 255, 190, 0.20);
    --badge-text-color: rgb(255,120,230);
    --badge-bg-color: rgba(255,255,255,0.15);
    --badge-border-color: rgba(255,0,220,0.6);
    --button-bg-color: rgba(255, 0, 220, 0.18);
    --button-border-color: rgba(255, 0, 220, 0.75);
    --button-text-color: rgb(255, 120, 230);
    --article-title-color: rgb(255, 115, 235);
    --site-body-background: var(--site-bg-color);
    --nav-text-color: rgb(255, 45, 222);
    --nav-hover: rgb(105, 0, 84);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgba(255, 175, 240, 1),
            rgba(255, 0, 220, 1),
            rgba(190, 70, 255, 1),
            rgba(0, 230, 170, 1)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 0, 220, 0.94),
            rgba(190, 70, 255, 0.90),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 10px rgba(255, 0, 220, 0.42));
    --site-heading-line-shadow:
        0 0 15px rgba(255, 0, 220, 0.42);
    --article-accent-bg: rgba(255, 0, 220, 0.13);
    --article-accent-bg-strong: rgba(255, 0, 220, 0.22);
    --article-accent-border: rgba(255, 0, 220, 0.50);
    --article-accent-border-strong: rgba(255, 0, 220, 0.82);
    --social-page-background: rgba(52, 0, 44, 0.82);
    --social-page-border: rgba(255, 0, 220, 0.30);
    --social-page-shadow:
        0 0 34px rgba(255, 0, 220, 0.28),
        0 18px 55px rgba(28, 0, 24, 0.48);
}

/*-------------------------------------------------------------------------------------------------*/
/* Aurora Dark */
/*-------------------------------------------------------------------------------------------------*/
:root[data-theme="aurora-dark"] {
    color-scheme: dark;
    --site-bg-color: #050816;
    --site-body-background:
        radial-gradient(circle at 12% 8%, rgba(124, 58, 237, 0.22), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(59, 130, 246, 0.16), transparent 30%),
        radial-gradient(circle at 52% 100%, rgba(45, 212, 191, 0.10), transparent 38%),
        linear-gradient(145deg, #050816 0%, #0b1028 46%, #061927 100%);
    --site-text-color: rgba(244, 247, 255, 0.98);
    --main-bg-color: rgba(10, 18, 40, 0.86);
    --main-border-color: rgba(124, 92, 246, 0.46);
    --card-bg-color: rgba(7, 12, 29, 0.92);
    --card-text-color: rgba(244, 247, 255, 0.98);
    --card-secondary-text-color: rgba(194, 205, 233, 0.88);
    --card-border-color: rgba(124, 92, 246, 0.46);
    --card-hover-border-color: rgba(96, 165, 250, 0.68);
    --card-default-shadow:
        0 18px 42px rgba(0, 0, 0, 0.46),
        0 0 18px rgba(96, 165, 250, 0.09);
    --card-shadow-color: rgba(0, 0, 0, 0.70);
    --card-hover-shadow:
        0 22px 58px rgba(0, 0, 0, 0.68),
        0 0 30px rgba(96, 165, 250, 0.20),
        0 0 42px rgba(139, 92, 246, 0.12);
    --card-glow-color: rgba(96, 165, 250, 0.16);
    --card-soft-glow-color: rgba(139, 92, 246, 0.14);
    --card-corner-glow-color: rgba(45, 212, 191, 0.22);
    --card-highlight-color: rgba(255, 255, 255, 0.055);
    --card-image-border-color: rgba(96, 165, 250, 0.46);
    --card-image-shadow: 0 0 14px rgba(96, 165, 250, 0.08);
    --card-image-hover-shadow: 0 0 20px rgba(139, 92, 246, 0.14);
    --card-gradient-pink: rgba(139, 92, 246, 0.22);
    --card-gradient-purple: rgba(59, 130, 246, 0.18);
    --card-gradient-green: rgba(45, 212, 191, 0.16);
    --badge-text-color: rgba(244, 247, 255, 0.98);
    --badge-bg-color: rgba(255, 255, 255, 0.08);
    --badge-border-color: rgba(96, 165, 250, 0.42);
    --button-bg-color: rgba(93, 63, 211, 0.24);
    --button-border-color: rgba(96, 165, 250, 0.48);
    --button-text-color: rgba(250, 252, 255, 0.98);
    --article-title-color: rgba(190, 207, 255, 1);
    --nav-text-color: rgb(68, 185, 205);
    --nav-hover: rgba(12, 74, 91, 0.92);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgba(244, 247, 255, 1),
            rgba(96, 165, 250, 1),
            rgba(139, 92, 246, 1),
            rgba(45, 212, 191, 1)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(96, 165, 250, 0.90),
            rgba(139, 92, 246, 0.90),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 9px rgba(96, 165, 250, 0.30))
        drop-shadow(0 0 20px rgba(139, 92, 246, 0.15));
    --site-heading-line-shadow:
        0 0 14px rgba(96, 165, 250, 0.30);
    --article-accent-bg: rgba(96, 165, 250, 0.08);
    --article-accent-bg-strong: rgba(139, 92, 246, 0.16);
    --article-accent-border: rgba(96, 165, 250, 0.36);
    --article-accent-border-strong: rgba(139, 92, 246, 0.64);
    --social-page-background: rgba(7, 12, 29, 0.84);
    --social-page-border: rgba(124, 92, 246, 0.34);
    --social-page-shadow:
        0 0 30px rgba(96, 165, 250, 0.16),
        0 0 52px rgba(139, 92, 246, 0.12);
}



/*-------------------------------------------------------------------------------------------------*/
/* Midnight Mint */
/*-------------------------------------------------------------------------------------------------*/
:root[data-theme="midnight-mint"] {
    color-scheme: dark;
    --site-bg-color: #031016;
    --site-body-background:
        radial-gradient(circle at 12% 8%, rgba(45, 212, 191, 0.18), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.16), transparent 30%),
        radial-gradient(circle at 52% 100%, rgba(16, 185, 129, 0.12), transparent 38%),
        linear-gradient(145deg, #031016 0%, #06212a 48%, #041820 100%);
    --site-text-color: rgba(238, 255, 252, 0.98);
    --main-bg-color: rgba(5, 29, 38, 0.86);
    --main-border-color: rgba(45, 212, 191, 0.38);
    --card-bg-color: rgba(4, 22, 31, 0.92);
    --card-text-color: rgba(238, 255, 252, 0.98);
    --card-secondary-text-color: rgba(181, 220, 217, 0.88);
    --card-border-color: rgba(45, 212, 191, 0.38);
    --card-hover-border-color: rgba(125, 211, 252, 0.68);
    --card-default-shadow:
        0 18px 42px rgba(0, 0, 0, 0.46),
        0 0 18px rgba(45, 212, 191, 0.09);
    --card-shadow-color: rgba(0, 0, 0, 0.68);
    --card-hover-shadow:
        0 22px 58px rgba(0, 0, 0, 0.66),
        0 0 30px rgba(45, 212, 191, 0.20),
        0 0 42px rgba(56, 189, 248, 0.12);
    --card-glow-color: rgba(45, 212, 191, 0.16);
    --card-soft-glow-color: rgba(56, 189, 248, 0.13);
    --card-corner-glow-color: rgba(16, 185, 129, 0.22);
    --card-highlight-color: rgba(255, 255, 255, 0.05);
    --card-image-border-color: rgba(45, 212, 191, 0.44);
    --card-image-shadow:
        0 0 14px rgba(45, 212, 191, 0.08);
    --card-image-hover-shadow:
        0 0 20px rgba(56, 189, 248, 0.14);
    --card-gradient-pink: rgba(45, 212, 191, 0.20);
    --card-gradient-purple: rgba(56, 189, 248, 0.17);
    --card-gradient-green: rgba(16, 185, 129, 0.16);
    --badge-text-color: rgba(238, 255, 252, 0.98);
    --badge-bg-color: rgba(255, 255, 255, 0.075);
    --badge-border-color: rgba(45, 212, 191, 0.42);
    --button-bg-color: rgba(20, 184, 166, 0.20);
    --button-border-color: rgba(45, 212, 191, 0.46);
    --button-text-color: rgba(245, 255, 253, 0.98);
    --article-title-color: rgba(173, 245, 235, 1);
    --nav-text-color: rgba(94, 234, 212, 1);
    --nav-hover: rgba(13, 78, 82, 0.90);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgba(238, 255, 252, 1),
            rgba(45, 212, 191, 1),
            rgba(56, 189, 248, 1),
            rgba(16, 185, 129, 1)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(45, 212, 191, 0.90),
            rgba(56, 189, 248, 0.88),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 9px rgba(45, 212, 191, 0.32))
        drop-shadow(0 0 19px rgba(56, 189, 248, 0.16));
    --site-heading-line-shadow:
        0 0 14px rgba(45, 212, 191, 0.30);
    --article-accent-bg: rgba(45, 212, 191, 0.075);
    --article-accent-bg-strong: rgba(56, 189, 248, 0.14);
    --article-accent-border: rgba(45, 212, 191, 0.34);
    --article-accent-border-strong: rgba(125, 211, 252, 0.60);
    --social-page-background: rgba(4, 22, 31, 0.84);
    --social-page-border: rgba(45, 212, 191, 0.30);
    --social-page-shadow:
        0 0 30px rgba(45, 212, 191, 0.16),
        0 0 52px rgba(56, 189, 248, 0.10);
}

/*-------------------------------------------------------------------------------------------------*/
/* Rose Night */
/*-------------------------------------------------------------------------------------------------*/
:root[data-theme="rose-night"] {
    color-scheme: dark;
    --site-bg-color: #180006;
    --site-body-background:
        radial-gradient(circle at 12% 8%, rgba(255, 50, 70, 0.24), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(255, 90, 110, 0.14), transparent 28%),
        radial-gradient(circle at 52% 100%, rgba(160, 20, 45, 0.18), transparent 38%),
        linear-gradient(
            135deg,
            rgba(24, 0, 6, 1) 0%,
            rgba(42, 0, 11, 1) 45%,
            rgba(58, 0, 16, 1) 100%
        );
    --site-text-color: rgba(255, 241, 243, 0.98);
    --main-bg-color: rgba(34, 0, 10, 0.76);
    --main-border-color: rgba(255, 72, 102, 0.38);
    --card-bg-color: rgba(24, 0, 7, 0.92);
    --card-text-color: rgba(255, 241, 243, 0.98);
    --card-secondary-text-color: rgba(216, 163, 173, 0.90);
    --card-border-color: rgba(255, 72, 102, 0.38);
    --card-hover-border-color: rgba(255, 110, 135, 0.72);
    --card-default-shadow:
        0 18px 44px rgba(0, 0, 0, 0.48),
        0 0 18px rgba(255, 72, 102, 0.11);
    --card-shadow-color: rgba(0, 0, 0, 0.72);
    --card-hover-shadow:
        0 22px 58px rgba(0, 0, 0, 0.70),
        0 0 30px rgba(255, 72, 102, 0.24),
        0 0 42px rgba(255, 110, 135, 0.12);
    --card-glow-color: rgba(255, 72, 102, 0.18);
    --card-soft-glow-color: rgba(255, 110, 135, 0.14);
    --card-corner-glow-color: rgba(255, 138, 122, 0.22);
    --card-highlight-color: rgba(255, 255, 255, 0.05);
    --card-image-border-color: rgba(255, 90, 120, 0.48);
    --card-image-shadow:
        0 0 14px rgba(255, 72, 102, 0.10);
    --card-image-hover-shadow:
        0 0 22px rgba(255, 110, 135, 0.16);
    --card-gradient-pink: rgba(255, 47, 94, 0.22);
    --card-gradient-purple: rgba(255, 77, 109, 0.16);
    --card-gradient-green: rgba(255, 138, 122, 0.14);
    --badge-text-color: rgba(255, 241, 243, 0.98);
    --badge-bg-color: rgba(255, 255, 255, 0.075);
    --badge-border-color: rgba(255, 90, 120, 0.44);
    --button-bg-color: rgba(255, 72, 102, 0.18);
    --button-border-color: rgba(255, 90, 120, 0.48);
    --button-text-color: rgba(255, 241, 243, 0.98);
    --article-title-color: rgba(255, 198, 207, 1);
    --nav-text-color: rgba(255, 77, 109, 1);
    --nav-hover: rgba(94, 8, 28, 0.92);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgba(255, 241, 243, 1),
            rgba(255, 77, 109, 1),
            rgba(255, 138, 122, 1),
            rgba(255, 47, 94, 1)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 77, 109, 0.92),
            rgba(255, 138, 122, 0.88),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 10px rgba(255, 72, 102, 0.34))
        drop-shadow(0 0 23px rgba(255, 30, 70, 0.17));

    --site-heading-line-shadow:
        0 0 15px rgba(255, 72, 102, 0.34);
    --article-accent-bg: rgba(255, 72, 102, 0.08);
    --article-accent-bg-strong: rgba(255, 90, 120, 0.16);
    --article-accent-border: rgba(255, 72, 102, 0.36);
    --article-accent-border-strong: rgba(255, 110, 135, 0.66);
    --social-page-background: rgba(24, 0, 7, 0.84);
    --social-page-border: rgba(255, 72, 102, 0.32);
    --social-page-shadow:
        0 0 32px rgba(255, 72, 102, 0.20),
        0 0 54px rgba(255, 110, 135, 0.10);
}

/*-------------------------------------------------------------------------------------------------*/
/* Lavender Summer */
/*-------------------------------------------------------------------------------------------------*/
:root[data-theme="lavender-summer"] {
    color-scheme: dark;
    --site-bg-color: #120816;
    --site-body-background:
        radial-gradient(circle at 12% 8%, rgba(244, 114, 182, 0.22), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(168, 85, 247, 0.20), transparent 30%),
        radial-gradient(circle at 52% 100%, rgba(251, 113, 133, 0.12), transparent 38%),
        linear-gradient(145deg, #120816 0%, #23102f 48%, #12071d 100%);
    --site-text-color: rgba(255, 245, 251, 0.98);
    --main-bg-color: rgba(34, 16, 45, 0.86);
    --main-border-color: rgba(244, 114, 182, 0.40);
    --card-bg-color: rgba(26, 11, 36, 0.92);
    --card-text-color: rgba(255, 245, 251, 0.98);
    --card-secondary-text-color: rgba(232, 199, 221, 0.88);
    --card-border-color: rgba(244, 114, 182, 0.40);
    --card-hover-border-color: rgba(216, 180, 254, 0.66);
    --card-default-shadow:
        0 18px 44px rgba(0, 0, 0, 0.46),
        0 0 18px rgba(244, 114, 182, 0.10);
    --card-shadow-color: rgba(0, 0, 0, 0.70);
    --card-hover-shadow:
        0 22px 58px rgba(0, 0, 0, 0.68),
        0 0 30px rgba(244, 114, 182, 0.20),
        0 0 42px rgba(168, 85, 247, 0.13);
    --card-glow-color: rgba(244, 114, 182, 0.17);
    --card-soft-glow-color: rgba(168, 85, 247, 0.14);
    --card-corner-glow-color: rgba(251, 113, 133, 0.22);
    --card-highlight-color: rgba(255, 255, 255, 0.052);
    --card-image-border-color: rgba(244, 114, 182, 0.46);
    --card-image-shadow:
        0 0 14px rgba(244, 114, 182, 0.09);
    --card-image-hover-shadow:
        0 0 21px rgba(168, 85, 247, 0.15);
    --card-gradient-pink: rgba(244, 114, 182, 0.22);
    --card-gradient-purple: rgba(168, 85, 247, 0.18);
    --card-gradient-green: rgba(251, 113, 133, 0.15);
    --badge-text-color: rgba(255, 245, 251, 0.98);
    --badge-bg-color: rgba(255, 255, 255, 0.075);
    --badge-border-color: rgba(244, 114, 182, 0.44);
    --button-bg-color: rgba(190, 75, 154, 0.20);
    --button-border-color: rgba(244, 114, 182, 0.46);
    --button-text-color: rgba(255, 250, 253, 0.98);
    --article-title-color: rgba(248, 194, 226, 1);
    --nav-text-color: rgb(184, 132, 242);
    --nav-hover: rgba(76, 42, 108, 0.92);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgba(255, 245, 251, 1),
            rgba(244, 114, 182, 1),
            rgba(216, 180, 254, 1),
            rgba(251, 113, 133, 1)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(244, 114, 182, 0.90),
            rgba(168, 85, 247, 0.88),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 9px rgba(244, 114, 182, 0.30))
        drop-shadow(0 0 20px rgba(168, 85, 247, 0.16));
    --site-heading-line-shadow:
        0 0 14px rgba(244, 114, 182, 0.30);
    --article-accent-bg: rgba(244, 114, 182, 0.075);
    --article-accent-bg-strong: rgba(168, 85, 247, 0.14);
    --article-accent-border: rgba(244, 114, 182, 0.34);
    --article-accent-border-strong: rgba(216, 180, 254, 0.62);
    --social-page-background: rgba(26, 11, 36, 0.84);
    --social-page-border: rgba(244, 114, 182, 0.32);
    --social-page-shadow:
        0 0 30px rgba(244, 114, 182, 0.17),
        0 0 52px rgba(168, 85, 247, 0.11);
}

/*-------------------------------------------------------------------------------------------------*/
/* Soft Light */
/*-------------------------------------------------------------------------------------------------*/
:root[data-theme="soft-light"] {
    color-scheme: light;
    --site-bg-color: rgb(229, 231, 240);
    --site-body-background:
        radial-gradient(
            circle at 12% 8%,
            rgba(167, 139, 250, 0.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(125, 211, 252, 0.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 52% 100%,
            rgba(94, 234, 212, 0.10),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgb(230, 232, 241) 0%,
            rgb(238, 237, 244) 48%,
            rgb(228, 236, 235) 100%
        );
    --site-text-color: rgb(38, 41, 59);
    --main-bg-color: rgba(237, 238, 245, 0.88);
    --main-border-color: rgba(109, 95, 170, 0.30);
    --main-border-radius: 18px;
    --card-bg-color: rgba(246, 246, 249, 0.84);
    --card-text-color: rgb(42, 45, 64);
    --card-secondary-text-color: rgb(94, 98, 122);
    --card-border-radius: 18px;
    --card-border-color: rgba(109, 95, 170, 0.28);
    --card-hover-border-color: rgba(69, 145, 150, 0.46);
    --card-default-shadow:
        0 16px 38px rgba(67, 72, 102, 0.16),
        0 0 12px rgba(112, 100, 180, 0.05);
    --card-shadow-color: rgba(67, 72, 102, 0.20);
    --card-hover-shadow:
        0 20px 46px rgba(67, 72, 102, 0.22),
        0 0 20px rgba(112, 100, 180, 0.09);
    --card-glow-color: rgba(112, 100, 180, 0.08);
    --card-soft-glow-color: rgba(90, 120, 180, 0.07);
    --card-corner-glow-color: rgba(69, 145, 150, 0.10);
    --card-highlight-color: rgba(255, 255, 255, 0.30);
    --card-image-border-color: rgba(109, 95, 170, 0.28);
    --card-image-shadow:
        0 8px 18px rgba(67, 72, 102, 0.11);
    --card-image-hover-shadow:
        0 10px 22px rgba(90, 110, 170, 0.13);
    --card-gradient-pink: rgba(177, 144, 205, 0.12);
    --card-gradient-purple: rgba(130, 146, 205, 0.12);
    --card-gradient-green: rgba(105, 178, 164, 0.10);
    --badge-text-color: rgb(45, 48, 68);
    --badge-bg-color: rgba(255, 255, 255, 0.40);
    --badge-border-color: rgba(109, 95, 170, 0.30);
    --button-bg-color: rgba(112, 105, 198, 0.11);
    --button-border-color: rgba(91, 112, 175, 0.32);
    --button-text-color: rgb(45, 48, 68);
    --button-border-radius: 999px;
    --article-title-color: rgb(54, 58, 91);
    --nav-text-color: rgb(182, 211, 221);
    --nav-hover: rgba(61, 86, 99, 0.88);
    --site-heading-gradient:
        linear-gradient(
            90deg,
            rgb(78, 87, 159),
            rgb(112, 100, 180),
            rgb(80, 132, 181),
            rgb(58, 142, 132)
        );
    --site-heading-line-gradient:
        linear-gradient(
            90deg,
            transparent,
            rgba(112, 100, 180, 0.68),
            rgba(58, 142, 132, 0.62),
            transparent
        );
    --site-heading-glow:
        drop-shadow(0 0 5px rgba(105, 95, 165, 0.12));
    --site-heading-line-shadow:
        0 0 7px rgba(105, 95, 165, 0.13);
    --article-accent-bg: rgba(109, 95, 170, 0.055);
    --article-accent-bg-strong: rgba(91, 112, 175, 0.095);
    --article-accent-border: rgba(109, 95, 170, 0.24);
    --article-accent-border-strong: rgba(91, 112, 175, 0.42);
    --social-page-background: rgba(240, 241, 246, 0.78);
    --social-page-border: rgba(109, 95, 170, 0.20);
    --social-page-shadow:
        0 18px 42px rgba(67, 72, 102, 0.15),
        0 0 18px rgba(109, 95, 170, 0.06);
}

/*-------------------------------------------------------------------------------------------------*/
/* Website particle layers */
/*-------------------------------------------------------------------------------------------------*/
body {
    position: relative;
    isolation: isolate;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";

    position: fixed;
    inset: -20px;
    z-index: 0;

    pointer-events: none;

    background-repeat: no-repeat;
    opacity: 0;
}

#site-header {
    position: relative;
    z-index: 100;
}

main,
footer {
    position: relative;
    z-index: 1;
}

/*-------------------------------------------------------------------------------------------------*/
/* Aurora Dark particles */
/*-------------------------------------------------------------------------------------------------*/
html[data-theme="aurora-dark"] body::before {
    opacity: 0.96;

    background:
        radial-gradient(circle at 6% 17%, rgba(230, 240, 255, 0.98) 0 0.10rem, rgba(96, 165, 250, 0.58) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 19% 74%, rgba(225, 216, 255, 0.94) 0 0.08rem, rgba(139, 92, 246, 0.46) 0.14rem, transparent 0.64rem),
        radial-gradient(circle at 33% 36%, rgba(225, 245, 255, 0.90) 0 0.07rem, rgba(59, 130, 246, 0.38) 0.13rem, transparent 0.58rem),
        radial-gradient(circle at 67% 18%, rgba(218, 255, 248, 0.94) 0 0.09rem, rgba(45, 212, 191, 0.46) 0.15rem, transparent 0.68rem),
        radial-gradient(circle at 82% 63%, rgba(230, 225, 255, 0.96) 0 0.10rem, rgba(139, 92, 246, 0.52) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 94% 29%, rgba(225, 242, 255, 0.94) 0 0.08rem, rgba(96, 165, 250, 0.42) 0.14rem, transparent 0.62rem),
        radial-gradient(circle at 72% 88%, rgba(220, 255, 248, 0.91) 0 0.07rem, rgba(45, 212, 191, 0.36) 0.13rem, transparent 0.58rem);

    filter:
        drop-shadow(0 0 6px rgba(96, 165, 250, 0.40))
        drop-shadow(0 0 14px rgba(139, 92, 246, 0.24));

    animation:
        siteParticlesFloatA 34s ease-in-out infinite alternate,
        siteParticlesTwinkleA 7.5s ease-in-out infinite;
}

html[data-theme="aurora-dark"] body::after {
    opacity: 0.86;

    background:
        radial-gradient(circle at 10% 29%, rgba(235, 245, 255, 0.96) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 15% 58%, rgba(228, 220, 255, 0.90) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 25% 11%, rgba(220, 245, 255, 0.82) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 37% 82%, rgba(232, 225, 255, 0.88) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 46% 21%, rgba(220, 255, 248, 0.80) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 57% 69%, rgba(230, 240, 255, 0.90) 0 0.04rem, transparent 0.15rem),
        radial-gradient(circle at 69% 41%, rgba(225, 218, 255, 0.86) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 78% 13%, rgba(220, 252, 248, 0.84) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 87% 78%, rgba(230, 242, 255, 0.92) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 96% 52%, rgba(232, 224, 255, 0.86) 0 0.03rem, transparent 0.14rem);

    filter:
        drop-shadow(0 0 4px rgba(96, 165, 250, 0.34))
        drop-shadow(0 0 9px rgba(139, 92, 246, 0.20));

    animation:
        siteParticlesFloatB 46s ease-in-out infinite alternate,
        siteParticlesTwinkleB 9.5s ease-in-out infinite;
}

/*-------------------------------------------------------------------------------------------------*/
/* Midnight Mint particles */
/*-------------------------------------------------------------------------------------------------*/
html[data-theme="midnight-mint"] body::before {
    opacity: 0.96;

    background:
        radial-gradient(circle at 8% 66%, rgba(225, 255, 250, 0.98) 0 0.10rem, rgba(45, 212, 191, 0.58) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 17% 21%, rgba(220, 248, 255, 0.94) 0 0.08rem, rgba(56, 189, 248, 0.44) 0.14rem, transparent 0.62rem),
        radial-gradient(circle at 39% 88%, rgba(220, 255, 242, 0.91) 0 0.07rem, rgba(16, 185, 129, 0.38) 0.13rem, transparent 0.58rem),
        radial-gradient(circle at 61% 34%, rgba(228, 255, 251, 0.96) 0 0.09rem, rgba(45, 212, 191, 0.48) 0.15rem, transparent 0.70rem),
        radial-gradient(circle at 76% 76%, rgba(220, 246, 255, 0.94) 0 0.10rem, rgba(56, 189, 248, 0.50) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 89% 15%, rgba(222, 255, 244, 0.92) 0 0.08rem, rgba(16, 185, 129, 0.40) 0.14rem, transparent 0.62rem),
        radial-gradient(circle at 96% 54%, rgba(226, 255, 252, 0.90) 0 0.07rem, rgba(45, 212, 191, 0.34) 0.13rem, transparent 0.58rem);

    filter:
        drop-shadow(0 0 6px rgba(45, 212, 191, 0.42))
        drop-shadow(0 0 14px rgba(56, 189, 248, 0.22));

    animation:
        siteParticlesFloatA 38s ease-in-out infinite alternate,
        siteParticlesTwinkleA 8s ease-in-out infinite;
}

html[data-theme="midnight-mint"] body::after {
    opacity: 0.86;

    background:
        radial-gradient(circle at 5% 38%, rgba(230, 255, 252, 0.94) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 14% 84%, rgba(220, 247, 255, 0.88) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 28% 46%, rgba(222, 255, 242, 0.82) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 35% 13%, rgba(225, 255, 251, 0.90) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 49% 71%, rgba(220, 246, 255, 0.86) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 58% 19%, rgba(222, 255, 244, 0.82) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 71% 91%, rgba(230, 255, 252, 0.90) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 79% 47%, rgba(220, 248, 255, 0.86) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 91% 31%, rgba(224, 255, 245, 0.88) 0 0.04rem, transparent 0.15rem),
        radial-gradient(circle at 97% 86%, rgba(230, 255, 252, 0.82) 0 0.03rem, transparent 0.13rem);

    filter:
        drop-shadow(0 0 4px rgba(45, 212, 191, 0.34))
        drop-shadow(0 0 9px rgba(56, 189, 248, 0.20));

    animation:
        siteParticlesFloatB 48s ease-in-out infinite alternate,
        siteParticlesTwinkleB 10s ease-in-out infinite;
}

/*-------------------------------------------------------------------------------------------------*/
/* Rose Night particles */
/*-------------------------------------------------------------------------------------------------*/
html[data-theme="rose-night"] body::before {
    opacity: 1;

    background:
        radial-gradient(circle at 14% 18%, rgba(255, 232, 237, 0.98) 0 0.10rem, rgba(255, 72, 102, 0.58) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 6% 72%, rgba(255, 220, 227, 0.94) 0 0.09rem, rgba(255, 90, 120, 0.50) 0.15rem, transparent 0.68rem),
        radial-gradient(circle at 31% 48%, rgba(255, 228, 233, 0.90) 0 0.07rem, rgba(255, 110, 135, 0.38) 0.13rem, transparent 0.58rem),
        radial-gradient(circle at 59% 84%, rgba(255, 235, 238, 0.94) 0 0.08rem, rgba(255, 72, 102, 0.44) 0.14rem, transparent 0.64rem),
        radial-gradient(circle at 73% 25%, rgba(255, 218, 226, 0.96) 0 0.10rem, rgba(255, 90, 120, 0.54) 0.17rem, transparent 0.78rem),
        radial-gradient(circle at 88% 69%, rgba(255, 232, 236, 0.96) 0 0.09rem, rgba(255, 72, 102, 0.48) 0.15rem, transparent 0.70rem),
        radial-gradient(circle at 97% 39%, rgba(255, 220, 227, 0.88) 0 0.07rem, rgba(255, 110, 135, 0.32) 0.12rem, transparent 0.56rem);

    filter:
        drop-shadow(0 0 6px rgba(255, 110, 138, 0.44))
        drop-shadow(0 0 14px rgba(255, 55, 95, 0.26));

    animation:
        siteParticlesFloatA 34s ease-in-out infinite alternate,
        siteParticlesTwinkleA 7.5s ease-in-out infinite;
}

html[data-theme="rose-night"] body::after {
    opacity: 0.88;

    background:
        radial-gradient(circle at 9% 31%, rgba(255, 242, 245, 0.96) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 18% 89%, rgba(255, 228, 233, 0.90) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 27% 13%, rgba(255, 235, 239, 0.84) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 42% 74%, rgba(255, 240, 243, 0.92) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 51% 28%, rgba(255, 230, 235, 0.84) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 64% 57%, rgba(255, 242, 245, 0.88) 0 0.04rem, transparent 0.15rem),
        radial-gradient(circle at 77% 91%, rgba(255, 232, 237, 0.88) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 83% 42%, rgba(255, 240, 243, 0.94) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 93% 17%, rgba(255, 226, 232, 0.86) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 98% 78%, rgba(255, 240, 243, 0.84) 0 0.03rem, transparent 0.14rem);

    filter:
        drop-shadow(0 0 4px rgba(255, 180, 192, 0.42))
        drop-shadow(0 0 9px rgba(255, 85, 118, 0.22));

    animation:
        siteParticlesFloatB 46s ease-in-out infinite alternate,
        siteParticlesTwinkleB 9.5s ease-in-out infinite;
}

/*-------------------------------------------------------------------------------------------------*/
/* Lavender Summer particles */
/*-------------------------------------------------------------------------------------------------*/
html[data-theme="lavender-summer"] body::before {
    opacity: 0.97;

    background:
        radial-gradient(circle at 7% 43%, rgba(255, 235, 248, 0.98) 0 0.10rem, rgba(244, 114, 182, 0.56) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 21% 14%, rgba(242, 232, 255, 0.94) 0 0.08rem, rgba(168, 85, 247, 0.46) 0.14rem, transparent 0.62rem),
        radial-gradient(circle at 36% 81%, rgba(255, 226, 238, 0.92) 0 0.09rem, rgba(251, 113, 133, 0.44) 0.15rem, transparent 0.68rem),
        radial-gradient(circle at 55% 37%, rgba(248, 235, 255, 0.90) 0 0.07rem, rgba(216, 180, 254, 0.36) 0.13rem, transparent 0.58rem),
        radial-gradient(circle at 69% 88%, rgba(255, 234, 248, 0.96) 0 0.10rem, rgba(244, 114, 182, 0.52) 0.17rem, transparent 0.76rem),
        radial-gradient(circle at 84% 23%, rgba(243, 232, 255, 0.94) 0 0.09rem, rgba(168, 85, 247, 0.48) 0.15rem, transparent 0.68rem),
        radial-gradient(circle at 95% 64%, rgba(255, 226, 237, 0.90) 0 0.07rem, rgba(251, 113, 133, 0.34) 0.13rem, transparent 0.58rem);

    filter:
        drop-shadow(0 0 6px rgba(244, 114, 182, 0.40))
        drop-shadow(0 0 14px rgba(168, 85, 247, 0.23));

    animation:
        siteParticlesFloatA 36s ease-in-out infinite alternate,
        siteParticlesTwinkleA 8s ease-in-out infinite;
}

html[data-theme="lavender-summer"] body::after {
    opacity: 0.87;

    background:
        radial-gradient(circle at 11% 76%, rgba(255, 240, 249, 0.94) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 16% 26%, rgba(242, 234, 255, 0.88) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 29% 57%, rgba(255, 230, 239, 0.86) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 41% 12%, rgba(250, 238, 255, 0.92) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 50% 91%, rgba(255, 238, 248, 0.88) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 62% 49%, rgba(242, 232, 255, 0.84) 0 0.03rem, transparent 0.13rem),
        radial-gradient(circle at 74% 17%, rgba(255, 230, 240, 0.88) 0 0.04rem, transparent 0.15rem),
        radial-gradient(circle at 81% 72%, rgba(250, 238, 255, 0.92) 0 0.04rem, transparent 0.16rem),
        radial-gradient(circle at 90% 38%, rgba(255, 236, 246, 0.86) 0 0.03rem, transparent 0.14rem),
        radial-gradient(circle at 97% 87%, rgba(242, 232, 255, 0.82) 0 0.03rem, transparent 0.13rem);

    filter:
        drop-shadow(0 0 4px rgba(244, 114, 182, 0.34))
        drop-shadow(0 0 9px rgba(168, 85, 247, 0.20));

    animation:
        siteParticlesFloatB 48s ease-in-out infinite alternate,
        siteParticlesTwinkleB 10s ease-in-out infinite;
}

/*-------------------------------------------------------------------------------------------------*/
/* Particle switch */
/*-------------------------------------------------------------------------------------------------*/
html[data-site-particles="off"] body::before,
html[data-site-particles="off"] body::after {
    display: none;
}

/*-------------------------------------------------------------------------------------------------*/
/* Particle animations */
/*-------------------------------------------------------------------------------------------------*/
@keyframes siteParticlesTwinkleA {
    0% {
        opacity: 0.38;
    }

    20% {
        opacity: 0.72;
    }

    45% {
        opacity: 0.48;
    }

    70% {
        opacity: 0.88;
    }

    100% {
        opacity: 0.42;
    }
}

@keyframes siteParticlesTwinkleB {
    0% {
        opacity: 0.22;
    }

    25% {
        opacity: 0.62;
    }

    50% {
        opacity: 0.30;
    }

    75% {
        opacity: 0.78;
    }

    100% {
        opacity: 0.26;
    }
}

@keyframes siteParticlesFloatA {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    25% {
        transform: translate3d(8px, -10px, 0px);
    }

    50% {
        transform: translate3d(-6px, 8px, 0px);
    }

    75% {
        transform: translate3d(10px, 6px, 0px);
    }

    100% {
        transform: translate3d(-8px, -6px, 0px);
    }
}

@keyframes siteParticlesFloatB {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    20% {
        transform: translate3d(-6px, 8px, 0px);
    }

    45% {
        transform: translate3d(10px, -6px, 0px);
    }

    70% {
        transform: translate3d(-8px, -10px, 0px);
    }

    100% {
        transform: translate3d(6px, 6px, 0px);
    }
}

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

    body::before,
    body::after {
        animation: none !important;
        transform: none !important;
    }
}

/*-------------------------------------------------------------------------------------------------*/
/* Website design controls inside the utility row */
/*-------------------------------------------------------------------------------------------------*/
#top-navigation-utility-row #site-modes {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

#top-navigation-utility-row #site-modes-row {
    width: auto;
    max-width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

/*-------------------------------------------------------------------------------------------------*/
/* Color mode selector */
/*-------------------------------------------------------------------------------------------------*/
#top-navigation-utility-row #toggle-site-color-mode {
    flex: 0 0 210px;
    width: 210px;
    min-width: 0;
    max-width: 210px;
    height: 40px;
    padding: 8px 13px;
    border: 1px solid var(--main-border-color);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.98);
    background: rgba(10, 14, 30, 0.84);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.06),
        0 0 14px var(--card-glow-color);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    outline: none;
    cursor: pointer;
}

#top-navigation-utility-row #toggle-site-color-mode:focus {
    border-color: var(--card-hover-border-color);
    box-shadow:
        0 0 0 3px var(--card-soft-glow-color),
        0 0 20px var(--card-glow-color);
}

#top-navigation-utility-row #toggle-site-color-mode option {
    color: rgba(255, 255, 255, 0.98);
    background: rgb(17, 18, 35);
}

/*-------------------------------------------------------------------------------------------------*/
/* Particle toggle */
/*-------------------------------------------------------------------------------------------------*/
#top-navigation-utility-row #toggle-site-particles {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-border-color);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.98);
    background: rgba(10, 14, 30, 0.84);
    font: inherit;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.06),
        0 0 14px var(--card-glow-color);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#top-navigation-utility-row #toggle-site-particles:hover {
    transform: translateY(-1px) scale(1.06);
    border-color: var(--card-hover-border-color);
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.08),
        0 0 22px var(--card-corner-glow-color);
}

#top-navigation-utility-row #toggle-site-particles[aria-pressed="false"] {
    opacity: 0.58;
    color: rgba(210, 210, 220, 0.92);
    box-shadow: none;
}

/*-------------------------------------------------------------------------------------------------*/
/* Tablet screens */
/*-------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1190px) {

    #top-navigation-utility-row #toggle-site-color-mode {
        height: 36px;
    }

    #top-navigation-utility-row #toggle-site-particles {
        flex-basis: 36px;
        width: 36px;
        min-width: 36px;
        max-width: 36px;
        height: 36px;
    }
}

/*-------------------------------------------------------------------------------------------------*/
/* Small screens */
/*-------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

    #top-navigation-utility-row #site-modes-row {
        gap: 6px;
    }

    #top-navigation-utility-row #toggle-site-color-mode {
        flex-basis: 145px;
        width: 145px;
        max-width: 145px;
        height: 34px;
        font-size: 0.76rem;
    }

    #top-navigation-utility-row #toggle-site-particles {
        flex-basis: 34px;
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        height: 34px;
    }
}

/*-------------------------------------------------------------------------------------------------*/
/* Very small screens */
/*-------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 480px) {

    #top-navigation-utility-row #site-modes-row {
        gap: 5px;
    }

    #top-navigation-utility-row #toggle-site-color-mode {
        flex-basis: 118px;

        width: 118px;
        max-width: 118px;
        height: 32px;

        padding-right: 6px;
        padding-left: 6px;

        font-size: 0.7rem;
    }

    #top-navigation-utility-row #toggle-site-particles {
        flex-basis: 32px;

        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
    }
}

@media screen and (max-width: 360px) {

    #top-navigation-utility-row #toggle-site-color-mode {
        flex-basis: 104px;

        width: 104px;
        max-width: 104px;

        font-size: 0.66rem;
    }

    #top-navigation-utility-row #toggle-site-particles {
        flex-basis: 30px;

        width: 30px;
        min-width: 30px;
        max-width: 30px;
        height: 30px;
    }
}