:root,
:root[data-theme="light"],
:root[data-theme="system"] {
    color-scheme: light;
    --site-bg: #f9fafb;
    --site-surface: #ffffff;
    --site-surface-soft: #f3f4f6;
    --site-surface-tint: #eef2ff;
    --site-heading: #111827;
    --site-text: #1f2937;
    --site-muted: #4b5563;
    --site-subtle: #6b7280;
    --site-border: #e5e7eb;
    --site-ring: #f3f4f6;
    --site-accent: #4f46e5;
    --site-accent-hover: #4338ca;
    --site-link: #4f46e5;
    --site-info: #1d4ed8;
    --site-success: #047857;
    --site-success-bg: #dcfce7;
    --site-success-border: #86efac;
    --site-error: #b91c1c;
    --site-warning: #92400e;
    --site-warning-bg: #fffbeb;
    --site-warning-border: #fde68a;
    --site-purple: #7e22ce;
    --site-purple-bg: #f3e8ff;
    --site-on-accent: #ffffff;
    --site-nav: rgba(255, 255, 255, 0.95);
    --site-pattern: #e5e7eb;
    --site-shadow: rgba(15, 23, 42, 0.12);
    --primary-color: #2c3e50;
    --accent-color: #2563eb;
    --text-color: #333333;
    --bg-color: #f9f9f9;
    --white: #ffffff;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --site-bg: #0f172a;
    --site-surface: #1e293b;
    --site-surface-soft: #273449;
    --site-surface-tint: rgba(99, 102, 241, 0.16);
    --site-heading: #f8fafc;
    --site-text: #e5e7eb;
    --site-muted: #cbd5e1;
    --site-subtle: #94a3b8;
    --site-border: #334155;
    --site-ring: #273449;
    --site-accent: #818cf8;
    --site-accent-hover: #a5b4fc;
    --site-link: #a5b4fc;
    --site-info: #93c5fd;
    --site-success: #6ee7b7;
    --site-success-bg: #064e3b;
    --site-success-border: #047857;
    --site-error: #fda4af;
    --site-warning: #fde68a;
    --site-warning-bg: #451a03;
    --site-warning-border: #a16207;
    --site-purple: #d8b4fe;
    --site-purple-bg: #3b0764;
    --site-on-accent: #0f172a;
    --site-nav: rgba(30, 41, 59, 0.95);
    --site-pattern: #334155;
    --site-shadow: rgba(0, 0, 0, 0.36);
    --primary-color: #f8fafc;
    --accent-color: #93c5fd;
    --text-color: #e5e7eb;
    --bg-color: #0f172a;
    --white: #1e293b;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        color-scheme: dark;
        --site-bg: #0f172a;
        --site-surface: #1e293b;
        --site-surface-soft: #273449;
        --site-surface-tint: rgba(99, 102, 241, 0.16);
        --site-heading: #f8fafc;
        --site-text: #e5e7eb;
        --site-muted: #cbd5e1;
        --site-subtle: #94a3b8;
        --site-border: #334155;
        --site-ring: #273449;
        --site-accent: #818cf8;
        --site-accent-hover: #a5b4fc;
        --site-link: #a5b4fc;
        --site-info: #93c5fd;
        --site-success: #6ee7b7;
        --site-success-bg: #064e3b;
        --site-success-border: #047857;
        --site-error: #fda4af;
        --site-warning: #fde68a;
        --site-warning-bg: #451a03;
        --site-warning-border: #a16207;
        --site-purple: #d8b4fe;
        --site-purple-bg: #3b0764;
        --site-on-accent: #0f172a;
        --site-nav: rgba(30, 41, 59, 0.95);
        --site-pattern: #334155;
        --site-shadow: rgba(0, 0, 0, 0.36);
        --primary-color: #f8fafc;
        --accent-color: #93c5fd;
        --text-color: #e5e7eb;
        --bg-color: #0f172a;
        --white: #1e293b;
    }
}

html,
body {
    background-color: var(--site-bg);
    color: var(--site-text);
}

body,
nav,
main,
section,
footer,
div,
blockquote,
input,
select,
textarea,
button,
a {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

[class~="bg-gray-50"] { background-color: var(--site-bg) !important; }
[class~="bg-gray-100"] { background-color: var(--site-surface-soft) !important; }
[class~="bg-gray-200"] { background-color: var(--site-border) !important; }
[class~="bg-white"] { background-color: var(--site-surface) !important; }
[class~="bg-white/95"],
[class~="bg-white/80"] { background-color: var(--site-nav) !important; }
[class~="bg-indigo-50"],
[class~="bg-indigo-100"] { background-color: var(--site-surface-tint) !important; }
[class~="bg-green-100"] { background-color: var(--site-success-bg) !important; }
[class~="bg-yellow-50"] { background-color: var(--site-warning-bg) !important; }
[class~="bg-purple-100"] { background-color: var(--site-purple-bg) !important; }

[class~="text-gray-900"],
[class~="text-gray-800"],
[class~="text-gray-700"] { color: var(--site-heading) !important; }
[class~="text-gray-600"],
[class~="text-gray-500"] { color: var(--site-muted) !important; }
[class~="text-gray-400"] { color: var(--site-subtle) !important; }
[class~="text-indigo-600"],
[class~="text-indigo-700"] { color: var(--site-link) !important; }
[class~="text-blue-600"] { color: var(--site-info) !important; }
[class~="text-green-500"],
[class~="text-green-600"],
[class~="text-emerald-600"] { color: var(--site-success) !important; }
[class~="text-red-500"] { color: var(--site-error) !important; }
[class~="text-yellow-800"],
[class~="text-amber-600"] { color: var(--site-warning) !important; }
[class~="text-purple-600"] { color: var(--site-purple) !important; }

[class~="border-gray-100"],
[class~="border-gray-200"],
[class~="border-gray-300"],
[class~="border-white"] { border-color: var(--site-border) !important; }
[class~="border-green-200"] { border-color: var(--site-success-border) !important; }
[class~="border-yellow-200"] { border-color: var(--site-warning-border) !important; }
[class~="ring-gray-100"] { --tw-ring-color: var(--site-ring) !important; }

[class~="hover:bg-gray-200"]:hover,
[class~="hover:bg-indigo-50"]:hover { background-color: var(--site-surface-tint) !important; }
[class~="hover:text-gray-600"]:hover,
[class~="hover:text-indigo-600"]:hover { color: var(--site-link) !important; }

input,
select,
textarea {
    background-color: var(--site-surface);
    border-color: var(--site-border);
    color: var(--site-text);
}

input::placeholder,
textarea::placeholder { color: var(--site-subtle); }

.hero-pattern,
.page-pattern {
    background-color: var(--site-bg) !important;
    background-image: radial-gradient(var(--site-pattern) 1.5px, transparent 1.5px) !important;
}

.container {
    background-color: var(--site-surface);
    box-shadow: 0 2px 12px var(--site-shadow);
}

.last-updated { color: var(--site-subtle) !important; }

::selection {
    background: color-mix(in srgb, var(--site-accent) 24%, transparent);
    color: var(--site-heading);
}

.site-theme-selector {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 70;
    display: inline-flex;
    max-width: calc(100vw - 2rem);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-theme-track {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--site-border);
    border-radius: 9999px;
    background: var(--site-nav);
    box-shadow: 0 8px 24px var(--site-shadow);
    backdrop-filter: blur(16px);
    transition: width 180ms ease, box-shadow 180ms ease;
}

.site-theme-selector.is-expanded .site-theme-track {
    width: min(18rem, calc(100vw - 2rem));
}

.site-theme-options {
    display: grid;
    visibility: hidden;
    min-width: 0;
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, padding 160ms ease;
}

.site-theme-selector.is-expanded .site-theme-options {
    visibility: visible;
    padding: 0 0.25rem;
    opacity: 1;
    pointer-events: auto;
}

.site-theme-option,
.site-theme-trigger {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--site-muted);
    cursor: pointer;
}

.site-theme-option {
    min-height: 2rem;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.site-theme-option:hover {
    background: var(--site-surface-soft);
    color: var(--site-heading);
}

.site-theme-option[aria-pressed="true"] {
    background: var(--site-accent);
    color: var(--site-on-accent);
}

.site-theme-trigger {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
}

.site-theme-selector.is-expanded .site-theme-trigger {
    width: 0;
    flex-basis: 0;
    opacity: 0;
    pointer-events: none;
}

.site-theme-option:focus-visible,
.site-theme-trigger:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--site-accent) 55%, transparent);
    outline-offset: 2px;
}

.site-theme-option svg,
.site-theme-trigger svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

@media (max-width: 480px) {
    .site-theme-selector {
        top: 4.75rem;
        right: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }

    .site-theme-selector.is-expanded .site-theme-track {
        width: min(18rem, calc(100vw - 1.5rem));
    }

    .site-theme-option {
        padding-inline: 0.35rem;
        font-size: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-theme-track,
    .site-theme-options,
    body,
    nav,
    main,
    section,
    footer,
    div,
    blockquote,
    input,
    select,
    textarea,
    button,
    a {
        transition: none !important;
    }
}