html[data-color-mode="light"] {
    color-scheme: light;
}

html[data-color-mode="dark"] {
    color-scheme: dark;
    --color-page: #0d0e11;
    --color-page-mid: #101116;
    --color-page-soft: #15161b;
    --color-page-end: #090a0c;
    --color-page-highlight: rgba(92, 94, 108, 0.2);
    --color-page-highlight-soft: rgba(58, 60, 72, 0.16);
    --color-surface: #1b1c22;
    --color-surface-subtle: #16171c;
    --color-surface-muted: #24252c;
    --color-surface-inverse: #111114;
    --color-command: #050506;
    --color-action: #f4f4f5;
    --color-action-hover: #dedee2;
    --color-action-active: #c8c8cf;
    --color-action-contrast: #111114;
    --color-glass: rgba(24, 25, 31, 0.72);
    --color-glass-strong: rgba(30, 31, 38, 0.84);
    --color-glass-control: rgba(36, 37, 45, 0.82);
    --color-glass-border: rgba(255, 255, 255, 0.1);
    --color-card-glass: rgba(22, 23, 29, 0.78);
    --color-card-glass-strong: rgba(32, 33, 40, 0.9);
    --color-card-glass-border: rgba(255, 255, 255, 0.14);
    --color-card-glass-highlight: rgba(255, 255, 255, 0.045);
    --color-chrome: rgba(15, 16, 20, 0.9);
    --color-chrome-strong: rgba(15, 16, 20, 0.97);
    --color-popover: rgba(27, 28, 34, 0.97);
    --color-popover-strong: rgba(27, 28, 34, 0.99);
    --color-field: rgba(31, 32, 39, 0.9);
    --color-layer-strong: rgba(255, 255, 255, 0.1);
    --color-layer: rgba(255, 255, 255, 0.075);
    --color-layer-soft: rgba(255, 255, 255, 0.055);
    --color-layer-faint: rgba(255, 255, 255, 0.035);
    --color-control-hover: rgba(255, 255, 255, 0.08);
    --color-backdrop: rgba(0, 0, 0, 0.66);
    --color-primary: #a882ff;
    --color-primary-hover: #b695ff;
    --color-primary-active: #cfbcff;
    --color-primary-soft: rgba(168, 130, 255, 0.18);
    --color-primary-border: rgba(168, 130, 255, 0.34);
    --color-success: #45c895;
    --color-success-strong: #8fe0be;
    --color-success-soft: rgba(69, 200, 149, 0.16);
    --color-warning: #f0a948;
    --color-warning-strong: #f6ca87;
    --color-warning-soft: rgba(240, 169, 72, 0.16);
    --color-danger: #ef7082;
    --color-danger-strong: #f5a5b0;
    --color-danger-soft: rgba(239, 112, 130, 0.16);
    --color-info: #6b9ce8;
    --color-info-strong: #a8c6f3;
    --color-info-soft: rgba(107, 156, 232, 0.16);
    --color-text: #f4f4f5;
    --color-text-soft: #c3c4ca;
    --color-text-muted: #9697a1;
    --color-text-faint: #71727d;
    --color-neutral: #4b4d57;
    --color-border: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.17);
    --color-focus: rgba(168, 130, 255, 0.38);
    --color-preview-surface: #18262a;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.26), 0 1px 3px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-command: 0 12px 28px rgba(0, 0, 0, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-soft: 0 24px 58px rgba(0, 0, 0, 0.32);
    --shadow-overlay: 0 28px 76px rgba(0, 0, 0, 0.48);
}

html[data-accent-color="purple"] {
    --color-primary: #8758ef;
    --color-primary-hover: #7346d8;
    --color-primary-active: #6237c1;
    --color-primary-soft: #eee8ff;
    --color-primary-border: rgba(135, 88, 239, 0.2);
    --color-focus: rgba(135, 88, 239, 0.34);
}

html[data-accent-color="blue"] {
    --color-primary: #3978f6;
    --color-primary-hover: #2868dc;
    --color-primary-active: #1c52b8;
    --color-primary-soft: #e9f0ff;
    --color-primary-border: rgba(57, 120, 246, 0.22);
    --color-focus: rgba(57, 120, 246, 0.34);
}

html[data-accent-color="teal"] {
    --color-primary: #0f9f9a;
    --color-primary-hover: #0b8783;
    --color-primary-active: #076e6b;
    --color-primary-soft: #ddf7f5;
    --color-primary-border: rgba(15, 159, 154, 0.22);
    --color-focus: rgba(15, 159, 154, 0.34);
}

html[data-accent-color="green"] {
    --color-primary: #229b68;
    --color-primary-hover: #188155;
    --color-primary-active: #126844;
    --color-primary-soft: #e1f6ec;
    --color-primary-border: rgba(34, 155, 104, 0.22);
    --color-focus: rgba(34, 155, 104, 0.34);
}

html[data-accent-color="orange"] {
    --color-primary: #d86b24;
    --color-primary-hover: #bf5815;
    --color-primary-active: #95400d;
    --color-primary-soft: #fff0e4;
    --color-primary-border: rgba(216, 107, 36, 0.22);
    --color-focus: rgba(216, 107, 36, 0.34);
}

html[data-accent-color="rose"] {
    --color-primary: #d94f70;
    --color-primary-hover: #c43d60;
    --color-primary-active: #9e2d4b;
    --color-primary-soft: #ffe8ef;
    --color-primary-border: rgba(217, 79, 112, 0.22);
    --color-focus: rgba(217, 79, 112, 0.34);
}

html[data-color-mode="dark"][data-accent-color="purple"] {
    --color-primary: #a882ff;
    --color-primary-hover: #b695ff;
    --color-primary-active: #cfbcff;
    --color-primary-soft: rgba(168, 130, 255, 0.18);
    --color-primary-border: rgba(168, 130, 255, 0.34);
    --color-focus: rgba(168, 130, 255, 0.38);
}

html[data-color-mode="dark"][data-accent-color="blue"] {
    --color-primary: #6b9cff;
    --color-primary-hover: #82abff;
    --color-primary-active: #afc8ff;
    --color-primary-soft: rgba(107, 156, 255, 0.18);
    --color-primary-border: rgba(107, 156, 255, 0.34);
    --color-focus: rgba(107, 156, 255, 0.38);
}

html[data-color-mode="dark"][data-accent-color="teal"] {
    --color-primary: #45c7c0;
    --color-primary-hover: #61d2cc;
    --color-primary-active: #94e3df;
    --color-primary-soft: rgba(69, 199, 192, 0.17);
    --color-primary-border: rgba(69, 199, 192, 0.32);
    --color-focus: rgba(69, 199, 192, 0.36);
}

html[data-color-mode="dark"][data-accent-color="green"] {
    --color-primary: #56c98f;
    --color-primary-hover: #6fd5a1;
    --color-primary-active: #9be4bd;
    --color-primary-soft: rgba(86, 201, 143, 0.17);
    --color-primary-border: rgba(86, 201, 143, 0.32);
    --color-focus: rgba(86, 201, 143, 0.36);
}

html[data-color-mode="dark"][data-accent-color="orange"] {
    --color-primary: #f09a5a;
    --color-primary-hover: #f5aa71;
    --color-primary-active: #f8c49d;
    --color-primary-soft: rgba(240, 154, 90, 0.17);
    --color-primary-border: rgba(240, 154, 90, 0.32);
    --color-focus: rgba(240, 154, 90, 0.36);
}

html[data-color-mode="dark"][data-accent-color="rose"] {
    --color-primary: #ef7f9a;
    --color-primary-hover: #f292a9;
    --color-primary-active: #f7b6c6;
    --color-primary-soft: rgba(239, 127, 154, 0.17);
    --color-primary-border: rgba(239, 127, 154, 0.32);
    --color-focus: rgba(239, 127, 154, 0.36);
}

.appearance-menu__panel {
    width: 19rem;
    padding: 0;
    overflow: hidden;
}

.appearance-menu__header {
    display: flex;
    padding: var(--space-4);
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.appearance-menu__header-icon,
.appearance-menu__mode-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.appearance-menu__header-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.appearance-menu__title {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.appearance-menu__description {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.appearance-menu__section {
    display: grid;
    padding: var(--space-4);
    gap: var(--space-2);
}

.appearance-menu__section + .appearance-menu__section {
    border-top: 1px solid var(--color-border);
}

.appearance-menu__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.appearance-menu__section-heading > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
}

.appearance-menu__section-label {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.appearance-menu__mode-list {
    display: grid;
    gap: var(--space-1);
}

.appearance-menu__mode {
    display: grid;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 var(--space-2);
    align-items: center;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-soft);
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    text-align: left;
}

.appearance-menu__mode:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}

.appearance-menu__mode.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
    font-weight: var(--font-weight-medium);
}

.appearance-menu__mode-icon {
    width: 2rem;
    height: 2rem;
    background: var(--color-layer);
    color: currentColor;
}

.appearance-menu__check {
    display: inline-flex;
    color: var(--color-primary);
    opacity: 0;
}

.appearance-menu__mode.is-active .appearance-menu__check {
    opacity: 1;
}

.appearance-menu__mode:focus-visible,
.appearance-menu__swatch:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.appearance-menu__swatches {
    display: grid;
    padding: var(--space-2) 0 var(--space-1);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-2);
}

.appearance-menu__swatch {
    position: relative;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-self: center;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
}

.appearance-menu__swatch > span {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-pill);
    background: var(--appearance-swatch);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.appearance-menu__swatch:hover,
.appearance-menu__swatch.is-active {
    border-color: var(--appearance-swatch);
    background: var(--color-layer);
}

.appearance-menu__swatch.is-active::after {
    position: absolute;
    right: 0.05rem;
    bottom: 0.05rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid var(--color-popover);
    border-radius: var(--radius-pill);
    background: var(--color-text);
    content: "";
}

.appearance-menu__swatch[data-accent-choice="purple"] { --appearance-swatch: #8758ef; }
.appearance-menu__swatch[data-accent-choice="blue"] { --appearance-swatch: #3978f6; }
.appearance-menu__swatch[data-accent-choice="teal"] { --appearance-swatch: #0f9f9a; }
.appearance-menu__swatch[data-accent-choice="green"] { --appearance-swatch: #229b68; }
.appearance-menu__swatch[data-accent-choice="orange"] { --appearance-swatch: #d86b24; }
.appearance-menu__swatch[data-accent-choice="rose"] { --appearance-swatch: #d94f70; }

@media (max-width: 22.49rem) {
    .appearance-menu__panel {
        width: calc(100vw - 2rem);
    }

    .appearance-menu__section,
    .appearance-menu__header {
        padding: var(--space-3);
    }
}