:root {
    color-scheme: light;
    --theme-bg: #fffdfb;
    --theme-surface: rgba(255, 255, 255, .82);
    --theme-surface-raised: #ffffff;
    --theme-text: #3d393d;
    --theme-muted: #858085;
    --theme-border: #ebe5e7;
    --theme-accent: #858085;
    --theme-accent-hover: #686468;
    --theme-accent-text: #858085;
    --theme-accent-soft: #efedef;
    --theme-accent-line: #d2d0d2;
    --theme-danger: #686468;
    --theme-danger-soft: rgba(104, 100, 104, .13);
    --bg: var(--theme-bg);
    --text: var(--theme-text);
    --ink: var(--theme-text);
    --muted: var(--theme-muted);
    --border: var(--theme-border);
    --yellow: #d2d0d2;
    --yellow-hover: var(--theme-accent-text);
    --yellow-soft: var(--theme-accent-soft);
    --yellow-strong: #d2d0d2;
    --yellow-line: var(--theme-accent-line);
    --queue-ink: var(--theme-text);
    --queue-muted: var(--theme-muted);
    --queue-line: var(--theme-border);
    --queue-yellow: var(--theme-accent);
    --queue-soft: var(--theme-accent-soft);
    --panel: rgba(255, 255, 255, .82);
    --panel-border: var(--theme-border);
    --shadow: rgba(41, 39, 42, .08);
    --danger: var(--theme-danger);
    --danger-soft: var(--theme-danger-soft);
}

* {
    scrollbar-width: none !important;
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.scroll-reveal {
    opacity: 0;
    filter: blur(7px);
    translate: 0 24px;
    transition:
        opacity .9s ease,
        filter .9s ease,
        translate .9s cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(var(--reveal-index, 0) * 55ms);
}

.scroll-reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal.is-visible {
        opacity: 1;
        filter: none;
        translate: none;
        transition: none;
    }
}

html,
body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text);
}

body {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

html body.oauth-public-page {
    background: var(--bg) !important;
    color: var(--text) !important;
    color-scheme: light;
    cursor: var(--oauth-cursor) !important;
}

html body.oauth-public-page[data-color-scheme="dark"] {
    color-scheme: dark;
}

html body.oauth-public-page .oauth-page-content {
    position: relative;
    isolation: isolate;
}

html body.oauth-public-page .dot-field::after {
    opacity: .28;
    background: color-mix(in srgb, var(--bg) 24%, transparent);
    mix-blend-mode: normal;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

html body.oauth-public-page[data-color-scheme="dark"] :is(.oauth-brand, .oauth-message p, .oauth-verified-label, .oauth-profile, .legal-copy) {
    color: var(--text);
}

html body.oauth-public-page[data-color-scheme="dark"] :is(.oauth-page-links a, .oauth-request, .oauth-verified-card) {
    border-color: rgba(255, 255, 255, .16) !important;
    background-color: rgba(255, 255, 255, .07) !important;
}

html body.oauth-public-page[data-color-scheme="dark"] {
    background: var(--bg) !important;
}

html body.oauth-public-page :is(
    .oauth-brand,
    .oauth-message h1,
    .oauth-verified-label,
    .oauth-account-copy small,
    .oauth-powered,
    .oauth-verify-link,
    .oauth-profile
) {
    color: var(--oauth-accent) !important;
}

html body.oauth-public-page :is(a, button):focus-visible {
    outline-color: var(--oauth-accent) !important;
}

html body.oauth-public-page ::selection {
    background: color-mix(in srgb, var(--oauth-accent) 28%, var(--bg));
    color: var(--text);
}

html body :is(
    .admin-card,
    .admin-delete-confirmation,
    .api-form,
    .api-list-panel,
    .script-manager,
    .admin-dialog,
    .review-card,
    .reviews-modal,
    .modal-review-mini,
    .profile-chip,
    .selected-review-card,
    .queue-modal,
    .queue-menu,
    .admin-submit,
    .action-option,
    .api-eye-button,
    .queue-submit,
    .oauth-card-menu,
    .oauth-request,
    .bot-card,
    .construction-dialog,
    .status-card,
    .api-request-row
) {
    border-color: var(--theme-border) !important;
    background-color: var(--theme-surface) !important;
    color: var(--theme-text);
    box-shadow: 0 10px 24px var(--shadow);
}

html body .admin-card-media {
    background: linear-gradient(100deg, var(--theme-accent-soft) 25%, var(--theme-surface-raised) 42%, var(--theme-accent-soft) 62%) !important;
}

html body .admin-card-media.media-loaded {
    background: var(--theme-accent-soft) !important;
}

html body .partner-card,
html body .partner-card.is-expanded {
    border-color: var(--theme-border) !important;
    background: #fff !important;
    color: var(--theme-text);
    box-shadow: 0 5px 14px rgba(41, 39, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
}

html body .partner-card.is-expanded {
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(41, 39, 42, .12), inset 0 1px 0 #fff;
}

html body .partner-card::before {
    border-color: rgba(255, 255, 255, .7);
}

html body :is(.category-brand, .category-nav .nav-link, .nav-link) {
    color: var(--theme-text) !important;
}

html body .category-search {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface-raised) !important;
    color: var(--theme-accent-text) !important;
}

html body .category-search:focus-within,
html body .category-search.has-query {
    border-color: var(--theme-accent-line) !important;
    background: var(--theme-surface-raised) !important;
    box-shadow: none;
}

html body .category-search input::placeholder {
    color: var(--theme-muted) !important;
}

html body :is(.category-entry, .job) {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 5px 14px rgba(41, 39, 42, .06);
}

html body :is(.category-entry:hover, .category-entry:focus-visible, .job:hover, .job:focus-visible) {
    border-color: var(--theme-border) !important;
    background: var(--theme-surface) !important;
    box-shadow: 0 5px 14px rgba(41, 39, 42, .06);
}

html body .category-entry-icon {
    border-radius: 10px;
    background: transparent !important;
}

html body :is(.job-group-icon, .category-entry-icon) {
    background: transparent !important;
}

html body :is(.category-entry-copy strong, .category-entry-copy span, .job-content, .job-title, .job-showcase) {
    color: var(--theme-text);
}

html body :is(.category-arrow, .work-column h2.category-heading span) {
    color: var(--theme-accent-text) !important;
}

html body .dot-field::after {
    display: none !important;
}

html body .group-icon-wrap {
    background: transparent !important;
}

html body .admin-submit {
    border-color: var(--theme-accent-line) !important;
    color: var(--theme-accent-text) !important;
}

html body .admin-card-action {
    border: 0 !important;
    background-color: transparent !important;
    color: var(--theme-accent-text) !important;
}

html body .file-picker {
    border-color: var(--theme-accent-line) !important;
    background-color: var(--theme-accent-soft) !important;
}

html body :is(
    input,
    select,
    textarea,
    .api-code-preview,
    .api-request-content,
    .queue-menu,
    .queue-field input,
    .script-editor-grid textarea
) {
    border-color: var(--theme-border) !important;
    background-color: var(--theme-surface-raised) !important;
    color: var(--theme-text) !important;
}

html body :is(
    .admin-card:hover,
    .admin-card:focus-visible,
    .action-option:hover,
    .action-option:focus-visible,
    .api-request-row:hover,
    .api-request-row:focus-visible,
    .oauth-card-menu button:hover,
    .bot-card:hover,
    .bot-card:focus-visible
) {
    border-color: var(--theme-border) !important;
    background-color: var(--theme-surface-raised) !important;
}

html body .job:hover :is(.job-title, .job-showcase) {
    color: var(--theme-text) !important;
}

html body :is(
    .admin-card-action,
    .admin-status,
    .admin-project-copy a,
    .admin-add-card .plus,
    .api-card-symbol,
    .api-icon,
    .api-back-button,
    .api-view-more,
    .api-request-status.is-success,
    .api-request-method,
    .queue-status,
    .queue-count,
    .queue-section-add,
    .queue-close,
    .site-footer a,
    .scroll-cue,
    .oauth-verify-link,
    .oauth-profile,
    .portal-logout
) {
    color: var(--theme-accent-text) !important;
}

html body :is(
    .admin-form input,
    .admin-form select,
    .admin-form textarea,
    .admin-submit,
    .action-option,
    .file-picker,
    .api-eye-button,
    .queue-submit,
    .user-result,
    .oauth-page-links a
) {
    border-color: var(--theme-border);
    color: var(--theme-text);
}

html body :is(.admin-submit:hover, .admin-submit:focus-visible, .queue-submit:hover) {
    border-color: var(--theme-accent-line);
    background-color: var(--theme-surface-raised);
    color: var(--theme-text);
}

html body :is(.admin-form input:focus, .admin-form select:focus, .queue-field input:focus) {
    outline-color: var(--theme-accent-line);
    border-color: var(--theme-accent-line);
}

html body .status-card.is-offline {
    border-color: var(--theme-danger) !important;
    background-color: var(--theme-danger-soft) !important;
}

html body .status-card.is-offline :is(.status-pill, .status-value, .status-label, .status-meta) {
    color: var(--theme-danger) !important;
}

html body .status-card :is(.status-name, .status-value, .status-pill, .status-meta),
html body .status-card .status-value .suffix {
    color: var(--theme-text);
}

html body .status-card .status-bars span {
    background: linear-gradient(180deg, var(--theme-accent-hover), var(--theme-accent)) !important;
}

html body .status-card.is-offline .status-bars span {
    background: linear-gradient(180deg, #f3a19a, var(--theme-danger)) !important;
}

html body .queue-dropzone.is-over,
html body .queue-item.is-dropping,
html body .queue-board.is-dragging .queue-dropzone:not(.is-over) {
    border-color: var(--theme-accent-line);
    background-color: var(--theme-accent-soft);
}

::selection {
    background: var(--theme-accent-soft);
    color: var(--theme-text);
}