:root {
    color-scheme: dark;
    --ui-background: #101114;
    --ui-panel: #1b1d22;
    --ui-raised: #272a30;
    --ui-border: #555862;
    --ui-text: #f6f4f0;
    --ui-muted: #c0bec0;
    --ui-accent: #e8bf65;
}

html { scroll-behavior: smooth; }
body { background: var(--ui-background); color: var(--ui-text); }
::selection { background: #e8bf65; color: #101114; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
}
:where(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:is([data-public-spa], [data-experience-spa], [data-admin-spa]) {
    min-height: 100dvh;
    background: radial-gradient(circle at 85% 0%, #44262b66, transparent 34%), var(--ui-background);
}
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) > main > header {
    min-height: 72px;
    border-color: #ffffff22;
    background: #101114e8;
    backdrop-filter: blur(16px);
}
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) > main > div[class*="overflow-y-auto"] {
    scrollbar-color: #555862 transparent;
    scrollbar-width: thin;
}
:is([data-public-sidebar], [data-experience-sidebar-panel], [data-admin-sidebar]) {
    background: #17191ef5;
    border-color: #ffffff22;
}
:is([data-public-sidebar], [data-experience-sidebar-panel], [data-admin-sidebar]) nav a {
    min-height: 46px;
    border-radius: 14px;
}
:is([data-public-sidebar], [data-experience-sidebar-panel], [data-admin-sidebar]) nav a:hover,
:is([data-public-sidebar], [data-experience-sidebar-panel], [data-admin-sidebar]) nav a[aria-current="page"] {
    background: #e8bf651c;
    color: var(--ui-text);
}

:is([data-public-spa], [data-experience-spa], [data-admin-spa]) :is(input, select, textarea) {
    min-height: 44px;
    border-color: #ffffff40;
    background-color: #24262c;
    color: var(--ui-text);
}
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) :is(input, textarea)::placeholder {
    color: #bbb9bb;
}
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) :is(input, select, textarea):focus {
    border-color: var(--ui-accent);
}
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) button,
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) a {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) button:not(:disabled):active,
:is([data-public-spa], [data-experience-spa], [data-admin-spa]) a:active {
    transform: translateY(1px);
}

@media (max-width: 639px) {
    :is([data-public-spa], [data-experience-spa], [data-admin-spa]) > main > header {
        padding-inline: 16px;
    }
    :is([data-public-spa], [data-experience-spa], [data-admin-spa]) > main > div[class*="overflow-y-auto"] {
        padding: 20px 16px 36px;
    }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}