html[data-theme-mode="light"] {
    color-scheme: light;
    --ds-on-accent: #ffffff;
    --ds-danger: #9f3024;
    --ds-success: #286144;
    --ds-audience-children: var(--ds-light-children);
    --ds-audience-children-bright: var(--ds-light-children-bright);
    --ds-audience-youth: var(--ds-light-youth);
    --ds-audience-youth-bright: var(--ds-light-youth-bright);
    --ds-audience-adults: var(--ds-light-adults);
    --ds-audience-adults-bright: var(--ds-light-adults-bright);
    --ds-audience-blog: var(--ds-light-blog);

    --ds-bg: var(--ds-light-bg);
    --ds-bg-elevated: var(--ds-light-bg-elevated);
    --ds-surface: var(--ds-light-surface);
    --ds-surface-2: var(--ds-light-surface-2);
    --ds-surface-3: var(--ds-light-surface-3);

    --ds-text: var(--ds-light-text);
    --ds-text-soft: var(--ds-light-text-soft);
    --ds-text-muted: var(--ds-light-text-muted);

    --ds-gold: var(--ds-light-gold);
    --ds-gold-bright: var(--ds-light-gold-bright);
    --ds-gold-deep: var(--ds-light-gold-deep);

    --ds-accent: var(--ds-gold);
    --ds-accent-bright: var(--ds-gold-bright);
    --ds-accent-soft: rgba(121, 86, 23, 0.10);

    --ds-border: rgba(81, 64, 38, 0.26);
    --ds-border-strong: rgba(81, 64, 38, 0.48);
    --ds-focus: #5f4211;

    --ds-shadow-sm: 0 0.55rem 1.6rem rgba(76, 56, 31, 0.08);
    --ds-shadow-md: 0 1.25rem 3.5rem rgba(76, 56, 31, 0.13);
    --ds-shadow-lg: 0 2rem 6rem rgba(76, 56, 31, 0.18);
}

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

@media (prefers-color-scheme: light) {
    html[data-theme-mode="auto"] {
        color-scheme: light;
    --ds-on-accent: #ffffff;
    --ds-danger: #9f3024;
    --ds-success: #286144;
    --ds-audience-children: var(--ds-light-children);
    --ds-audience-children-bright: var(--ds-light-children-bright);
    --ds-audience-youth: var(--ds-light-youth);
    --ds-audience-youth-bright: var(--ds-light-youth-bright);
    --ds-audience-adults: var(--ds-light-adults);
    --ds-audience-adults-bright: var(--ds-light-adults-bright);
    --ds-audience-blog: var(--ds-light-blog);

        --ds-bg: var(--ds-light-bg);
        --ds-bg-elevated: var(--ds-light-bg-elevated);
        --ds-surface: var(--ds-light-surface);
        --ds-surface-2: var(--ds-light-surface-2);
        --ds-surface-3: var(--ds-light-surface-3);

        --ds-text: var(--ds-light-text);
        --ds-text-soft: var(--ds-light-text-soft);
        --ds-text-muted: var(--ds-light-text-muted);

        --ds-gold: var(--ds-light-gold);
        --ds-gold-bright: var(--ds-light-gold-bright);
        --ds-gold-deep: var(--ds-light-gold-deep);

        --ds-accent: var(--ds-gold);
        --ds-accent-bright: var(--ds-gold-bright);
        --ds-accent-soft: rgba(121, 86, 23, 0.10);

        --ds-border: rgba(81, 64, 38, 0.26);
        --ds-border-strong: rgba(81, 64, 38, 0.48);
        --ds-focus: #5f4211;

        --ds-shadow-sm: 0 0.55rem 1.6rem rgba(76, 56, 31, 0.08);
        --ds-shadow-md: 0 1.25rem 3.5rem rgba(76, 56, 31, 0.13);
        --ds-shadow-lg: 0 2rem 6rem rgba(76, 56, 31, 0.18);
    }
}


html[data-font-scale="0"] {
    font-size: 100%;
}

html[data-font-scale="1"] {
    font-size: 110%;
}

html[data-font-scale="2"] {
    font-size: 120%;
}

html[data-font-scale="3"] {
    font-size: 130%;
}

html[data-readable-font="1"] {
    --ds-font-display: var(--ds-font-body);
    --ds-font-editorial: var(--ds-font-body);
}

html[data-readable-font="1"] body,
html[data-readable-font="1"] button,
html[data-readable-font="1"] input,
html[data-readable-font="1"] select,
html[data-readable-font="1"] textarea {
    letter-spacing: 0.012em;
}

html[data-readable-font="1"] p,
html[data-readable-font="1"] li {
    line-height: 1.75;
}

html[data-colorblind="1"] {
    --ds-accent: #75b7e5;
    --ds-accent-bright: #a6d4f4;
    --ds-accent-soft: rgba(117, 183, 229, 0.12);
    --ds-focus: #a6d4f4;
}

html[data-theme-mode="light"][data-colorblind="1"] {
    --ds-accent: #165d87;
    --ds-accent-bright: #0e496c;
    --ds-accent-soft: rgba(22, 93, 135, 0.10);
    --ds-focus: #0e496c;
}

@media (prefers-color-scheme: light) {
    html[data-theme-mode="auto"][data-colorblind="1"] {
        --ds-accent: #165d87;
        --ds-accent-bright: #0e496c;
        --ds-accent-soft: rgba(22, 93, 135, 0.10);
        --ds-focus: #0e496c;
    }
}

html[data-high-contrast="1"][data-high-contrast] {
    color-scheme: dark;
    --ds-gold: #ffd65a;
    --ds-gold-bright: #fff0a8;
    --ds-gold-deep: #ffd65a;
    --ds-on-accent: #000000;
    --ds-danger: #ffffff;
    --ds-success: #ffffff;
    --ds-audience-children: #ffd65a;
    --ds-audience-children-bright: #fff0a8;
    --ds-audience-youth: #ffd65a;
    --ds-audience-youth-bright: #fff0a8;
    --ds-audience-adults: #ffd65a;
    --ds-audience-adults-bright: #fff0a8;
    --ds-audience-blog: #ffd65a;
    --ds-bg: #000;
    --ds-bg-elevated: #000;
    --ds-surface: #080808;
    --ds-surface-2: #111;
    --ds-surface-3: #1a1a1a;
    --ds-text: #fff;
    --ds-text-soft: #fff;
    --ds-text-muted: #e6e6e6;
    --ds-accent: #ffd65a;
    --ds-accent-bright: #fff0a8;
    --ds-accent-soft: rgba(255, 214, 90, 0.16);
    --ds-border: rgba(255, 255, 255, 0.55);
    --ds-border-strong: #fff;
    --ds-focus: #00e5ff;
}

html[data-high-contrast="1"] :focus-visible {
    outline-width: 4px;
}

.ds-preferences__backdrop {
    position: fixed;
    z-index: var(--ds-z-backdrop);
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(4px);
}

.ds-preferences__dialog {
    position: fixed;
    z-index: var(--ds-z-dialog);
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--ds-space-3);
    pointer-events: none;
}

.ds-preferences__panel {
    inline-size: min(100%, 44rem);
    max-block-size: calc(100dvh - 1.5rem);
    overflow: auto;
    padding: var(--ds-space-5);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
    background: var(--ds-bg-elevated);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-lg);
    pointer-events: auto;
}

.ds-preferences__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ds-space-4);
    align-items: start;
}

.ds-preferences__header h2 {
    margin: 0;
    font-size: var(--ds-font-h2);
    line-height: var(--ds-line-heading);
}

.ds-preferences__header p {
    max-inline-size: 58ch;
    margin: var(--ds-space-2) 0 0;
    color: var(--ds-text-soft);
}

.ds-preferences__close {
    display: inline-grid;
    inline-size: var(--ds-touch);
    block-size: var(--ds-touch);
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: var(--ds-text);
    cursor: pointer;
}

.ds-preferences__close:hover,
.ds-preferences__close:focus-visible {
    border-color: var(--ds-border);
    background: var(--ds-accent-soft);
}

.ds-preferences__notice {
    margin: var(--ds-space-5) 0 0;
    padding: var(--ds-space-3) var(--ds-space-4);
    border-inline-start: 3px solid var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-text-soft);
    font-size: 0.88rem;
}

.ds-preferences__notice--temporary {
    display: grid;
    gap: var(--ds-space-2);
}

.ds-preferences__notice p {
    margin: 0;
}

.ds-preferences__notice button {
    justify-self: start;
    min-block-size: var(--ds-control-height);
    padding: 0;
    background: transparent;
    color: var(--ds-text);
    text-decoration: underline;
    text-underline-offset: 0.22em;
    cursor: pointer;
}

.ds-preferences__rows {
    display: grid;
    gap: var(--ds-space-4);
    margin-block-start: var(--ds-space-5);
}

.ds-preferences__row {
    display: grid;
    gap: var(--ds-space-3);
    padding-block: var(--ds-space-4);
    border-block-start: 1px solid var(--ds-border);
}

.ds-preferences__row-label strong {
    font-size: 0.94rem;
}

.ds-preferences__segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ds-space-2);
}

.ds-preferences__segmented button,
.ds-preferences__font-controls button,
.ds-preferences__toggle,
.ds-preferences__footer button {
    min-block-size: var(--ds-control-height);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-soft);
    cursor: pointer;
}

.ds-preferences__segmented button:hover,
.ds-preferences__segmented button:focus-visible,
.ds-preferences__font-controls button:hover,
.ds-preferences__font-controls button:focus-visible,
.ds-preferences__toggle:hover,
.ds-preferences__toggle:focus-visible,
.ds-preferences__footer button:hover,
.ds-preferences__footer button:focus-visible {
    border-color: var(--ds-border-strong);
    color: var(--ds-text);
}

.ds-preferences__segmented button[aria-pressed="true"] {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
    color: var(--ds-text);
}

.ds-preferences__font-controls {
    display: grid;
    grid-template-columns: var(--ds-touch) minmax(4rem, auto) var(--ds-touch);
    gap: var(--ds-space-2);
    align-items: center;
}

.ds-preferences__font-controls output {
    text-align: center;
    color: var(--ds-text-soft);
    font-variant-numeric: tabular-nums;
}

.ds-preferences__toggle {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: var(--ds-space-3);
    padding: 0.45rem 0.75rem;
    text-align: start;
}

.ds-preferences__toggle-track {
    position: relative;
    display: inline-block;
    inline-size: 2.45rem;
    block-size: 1.4rem;
    flex: none;
    border: 1px solid var(--ds-border-strong);
    border-radius: 999px;
    background: var(--ds-surface-3);
}

.ds-preferences__toggle-track::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.18rem;
    inline-size: 0.92rem;
    block-size: 0.92rem;
    border-radius: 50%;
    background: var(--ds-text-soft);
    transform: translateY(-50%);
    transition:
        inset-inline-start var(--ds-motion-fast) var(--ds-ease-standard),
        background-color var(--ds-motion-fast) var(--ds-ease-standard);
}

.ds-preferences__toggle[aria-pressed="true"] .ds-preferences__toggle-track {
    border-color: var(--ds-accent);
    background: var(--ds-accent-soft);
}

.ds-preferences__toggle[aria-pressed="true"] .ds-preferences__toggle-track::after {
    inset-inline-start: 1.22rem;
    background: var(--ds-accent-bright);
}

[dir="rtl"] .ds-preferences__toggle[aria-pressed="true"] .ds-preferences__toggle-track::after {
    inset-inline-start: 0.18rem;
    inset-inline-end: 1.22rem;
}

.ds-preferences__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    align-items: center;
    justify-content: space-between;
    margin-block-start: var(--ds-space-5);
    padding-block-start: var(--ds-space-4);
    border-block-start: 1px solid var(--ds-border);
}

.ds-preferences__footer button {
    padding-inline: 1rem;
}

.ds-preferences__error {
    flex-basis: 100%;
    margin: 0;
    color: var(--ds-danger);
    font-size: 0.88rem;
}

@media (min-width: 48rem) {
    .ds-preferences__dialog {
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
    }

    .ds-preferences__panel {
        inline-size: min(32rem, 100%);
        max-block-size: 100dvh;
        min-block-size: 100dvh;
        border-block: 0;
        border-inline-end: 0;
        border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg);
        padding: clamp(1.5rem, 3vw, 2.25rem);
    }

    [dir="rtl"] .ds-preferences__panel {
        border-inline-start: 0;
        border-inline-end: 1px solid var(--ds-border-strong);
        border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0;
    }

    .ds-preferences__row {
        grid-template-columns: minmax(9rem, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
    }
}

.ds-preferences__segmented button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding-inline: 0.55rem;
}