html {
    --a11y-font-scale: 1;
    --a11y-filter: none;
    --a11y-panel-bg: #ffffff;
    --a11y-panel-text: #1b1b1b;
    --a11y-panel-muted: #525f7f;
    --a11y-action-bg: #f5f8ff;
    --a11y-action-border: rgba(31, 110, 235, 0.2);
    --a11y-action-text: #1b1b1b;
    --a11y-action-icon: #1f6feb;
    --a11y-action-hover-bg: #e7f0ff;
    --a11y-action-hover-shadow: rgba(31, 110, 235, 0.15);
    --a11y-action-active-bg: #1f6feb;
    --a11y-action-active-text: #ffffff;
    --a11y-action-active-border: #1f6feb;
    --a11y-action-active-icon: #ffffff;
    --a11y-action-contrast-active-bg: #ffffff;
    --a11y-action-contrast-active-text: #1b1b1b;
    --a11y-action-contrast-active-border: rgba(31, 110, 235, 0.4);
    --a11y-action-contrast-active-icon: #1f6feb;
    font-size: calc(var(--a11y-font-scale) * 100%);
    filter: var(--a11y-filter);
}

.accessibility-widget {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

@media (max-width: 576px) {
    .accessibility-widget {
        bottom: 5.5rem;
        left: 1rem;
    }
}

.accessibility-toggle {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #1f6feb, #1fa3eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(17, 75, 143, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accessibility-toggle:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.accessibility-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 34px rgba(17, 75, 143, 0.35);
}

.accessibility-toggle-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.accessibility-panel {
    width: min(90vw, 21.25rem);
    border-radius: 1rem;
    background: var(--a11y-panel-bg);
    color: var(--a11y-panel-text);
    box-shadow: 0 24px 80px rgba(17, 43, 80, 0.25);
    padding: 1.25rem;
    border: 1px solid rgba(17, 75, 143, 0.1);
    display: none;
    max-height: min(90vh, calc(100vh - 3rem));
    overflow-y: auto;
}

.accessibility-widget.is-open .accessibility-panel {
    display: block;
    animation: accessibility-fade-in 0.25s ease;
}

@keyframes accessibility-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accessibility-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.accessibility-panel__title {
    font-size: 1.1rem;
    margin: 0;
}

.accessibility-close {
    border: none;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.5rem;
}

.accessibility-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.accessibility-panel__description {
    font-size: 0.85rem;
    color: var(--a11y-panel-muted);
    margin-bottom: 1rem;
}

.accessibility-panel__section + .accessibility-panel__section {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(82, 95, 127, 0.1);
}

.accessibility-panel__subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.accessibility-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.accessibility-action {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--a11y-action-border);
    background: var(--a11y-action-bg);
    color: var(--a11y-action-text);
    padding: 0.75rem;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.85rem;
    min-width: 0;
    text-align: left;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.accessibility-action i {
    font-size: 1.2rem;
    color: var(--a11y-action-icon);
    transition: color 0.2s ease;
}

.accessibility-action span {
    display: block;
    line-height: 1.3;
    min-width: 0;
    word-break: break-word;
}

.accessibility-action:hover,
.accessibility-action:focus-visible {
    background: var(--a11y-action-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 10px 30px var(--a11y-action-hover-shadow);
    outline: none;
}

.accessibility-action.is-active {
    background: var(--a11y-action-active-bg);
    color: var(--a11y-action-active-text);
    border-color: var(--a11y-action-active-border);
}

.accessibility-action.is-active i {
    color: var(--a11y-action-active-icon);
}

.accessibility-action[data-toggle="invertContrast"].is-active {
    background: var(--a11y-action-contrast-active-bg);
    color: var(--a11y-action-contrast-active-text);
    border-color: var(--a11y-action-contrast-active-border);
}

.accessibility-action[data-toggle="invertContrast"].is-active i {
    color: var(--a11y-action-contrast-active-icon);
}

.accessibility-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.accessibility-font {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: center;
}

.accessibility-font__value {
    font-weight: 600;
    text-align: center;
    font-size: 0.95rem;
}

.accessibility-panel__footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(82, 95, 127, 0.1);
}

.accessibility-reset {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    font-weight: 600;
}

.accessibility-reset span {
    text-align: center;
    flex: 1 1 auto;
}

/* Accessibility modes */

html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert picture,
html.a11y-invert canvas,
html.a11y-invert svg {
    filter: invert(1) hue-rotate(180deg);
}

body.a11y-highlight-links a {
    outline: 3px solid #ff9800 !important;
    outline-offset: 2px;
    background: rgba(255, 152, 0, 0.12);
}

body.a11y-highlight-links a:focus-visible {
    outline-width: 4px;
}

body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4,
body.a11y-highlight-headings h5,
body.a11y-highlight-headings h6 {
    background: linear-gradient(90deg, rgba(255, 235, 59, 0.4), rgba(255, 193, 7, 0.6));
    padding: 0.2em 0.4em;
    border-radius: 0.5em;
}

/* Reset filters on widget */
html.a11y-invert .accessibility-widget {
    filter: invert(1) hue-rotate(180deg);
    --a11y-panel-bg: #0f172a;
    --a11y-panel-text: #f8fafc;
    --a11y-panel-muted: rgba(248, 250, 252, 0.75);
    --a11y-action-bg: rgba(15, 23, 42, 0.65);
    --a11y-action-border: rgba(148, 196, 255, 0.35);
    --a11y-action-text: #f8fafc;
    --a11y-action-icon: #8bcaff;
    --a11y-action-hover-bg: rgba(26, 35, 58, 0.85);
    --a11y-action-hover-shadow: rgba(139, 202, 255, 0.25);
    --a11y-action-active-bg: #f8fafc;
    --a11y-action-active-text: #0a1428;
    --a11y-action-active-border: rgba(248, 250, 252, 0.8);
    --a11y-action-active-icon: #0a1428;
    --a11y-action-contrast-active-bg: rgba(8, 13, 26, 0.95);
    --a11y-action-contrast-active-text: #f8fafc;
    --a11y-action-contrast-active-border: rgba(139, 202, 255, 0.6);
    --a11y-action-contrast-active-icon: #8bcaff;
}