/* ============================================
           Accessibility widget
           ============================================ */
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('fonts/OpenDyslexic-Regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('fonts/OpenDyslexic-Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('fonts/OpenDyslexic-Italic.woff2') format('woff2');
            font-weight: 400;
            font-style: italic;
            font-display: swap;
        }
        @font-face {
            font-family: 'OpenDyslexic';
            src: url('fonts/OpenDyslexic-Bold-Italic.woff2') format('woff2');
            font-weight: 700;
            font-style: italic;
            font-display: swap;
        }

        .a11y-fab {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #146ff8;
            color: #fff;
            border: none;
            cursor: pointer;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
            z-index: 999998;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease, background 0.2s ease;
        }
        .a11y-fab:hover { transform: scale(1.08); background: #0c5fda; }
        .a11y-fab:focus { outline: 3px solid #ffd60a; outline-offset: 2px; }
        .a11y-fab svg { width: 32px; height: 32px; fill: #fff; }

        .a11y-panel {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 380px;
            max-width: 100%;
            background: #fff;
            color: #111;
            z-index: 999999;
            box-shadow: -8px 0 30px rgba(0, 0, 0, 0.3);
            transform: translateX(100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
            line-height: 1.5;
        }
        .a11y-panel.open { transform: translateX(0); }
        .a11y-panel * { box-sizing: border-box; }

        .a11y-header {
            padding: 16px 20px;
            background: #146ff8;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .a11y-header h2 { font-size: 1.05rem; margin: 0; font-weight: 700; }
        .a11y-close {
            background: transparent;
            border: 2px solid #fff;
            color: #fff;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.1rem;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .a11y-close:hover { background: rgba(255, 255, 255, 0.15); }

        .a11y-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 20px;
        }
        .a11y-section { margin-bottom: 24px; }
        .a11y-section-title {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #555;
            letter-spacing: 0.07em;
            margin-bottom: 10px;
        }
        .a11y-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        .a11y-tile {
            background: #f4f6fb;
            border: 2px solid transparent;
            border-radius: 8px;
            padding: 10px 6px;
            cursor: pointer;
            text-align: center;
            font-size: 0.75rem;
            color: #111;
            transition: background 0.15s, border-color 0.15s;
            min-height: 78px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-family: inherit;
        }
        .a11y-tile:hover { background: #e8edf7; }
        .a11y-tile.active {
            background: #146ff8;
            color: #fff;
            border-color: #0c5fda;
        }
        .a11y-tile .a11y-icon { font-size: 1.4rem; line-height: 1; }
        .a11y-tile .a11y-label { font-weight: 600; }

        .a11y-stepper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #f4f6fb;
            border-radius: 8px;
            padding: 10px 14px;
            margin-bottom: 8px;
        }
        .a11y-stepper-label { font-size: 0.85rem; font-weight: 600; }
        .a11y-stepper-controls { display: flex; gap: 10px; align-items: center; }
        .a11y-stepper button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background: #146ff8;
            color: #fff;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 700;
        }
        .a11y-stepper button:hover { background: #0c5fda; }
        .a11y-stepper-value { min-width: 50px; text-align: center; font-weight: 700; }

        .a11y-footer {
            padding: 12px 20px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            gap: 8px;
        }
        .a11y-footer button {
            flex: 1;
            padding: 10px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
            font-family: inherit;
        }
        .a11y-reset { background: #d93025; color: #fff; }
        .a11y-reset:hover { background: #b1271f; }
        .a11y-hide { background: #555; color: #fff; }
        .a11y-hide:hover { background: #333; }

        .a11y-reading-guide {
            position: fixed;
            left: 0;
            right: 0;
            height: 40px;
            background: rgba(20, 111, 248, 0.18);
            border-top: 2px solid #146ff8;
            border-bottom: 2px solid #146ff8;
            pointer-events: none;
            z-index: 999997;
            display: none;
        }
        .a11y-reading-guide.active { display: block; }

        .a11y-reading-mask {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 999996;
            display: none;
        }
        .a11y-reading-mask.active { display: block; }

        .a11y-magnifier {
            position: fixed;
            background: #fff;
            color: #000;
            border: 2px solid #146ff8;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 1.6rem;
            font-weight: 600;
            pointer-events: none;
            z-index: 999997;
            display: none;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            max-width: 320px;
            word-wrap: break-word;
        }

        @media (max-width: 480px) {
            .a11y-panel { width: 100%; }
        }

        /* ============================================
           Accessibility modes (applied to #a11y-target)
           ============================================ */
        #a11y-target.a11y-readable-font,
        #a11y-target.a11y-readable-font * {
            font-family: 'OpenDyslexic', 'Verdana', 'Tahoma', Arial, sans-serif !important;
            letter-spacing: 0.02em !important;
            word-spacing: 0.08em !important;
        }

        #a11y-target.a11y-highlight-titles :is(h1, h2, h3, h4, h5, h6) {
            outline: 3px dashed #ffd60a !important;
            outline-offset: 4px !important;
            background: rgba(255, 214, 10, 0.08) !important;
        }

        #a11y-target.a11y-highlight-links a {
            background: #ffd60a !important;
            color: #000 !important;
            text-decoration: underline !important;
            padding: 0 3px;
            border-radius: 2px;
        }

        #a11y-target.a11y-highlight-hover *:hover {
            outline: 3px solid #ff007f !important;
            outline-offset: 2px !important;
        }

        #a11y-target.a11y-highlight-focus *:focus {
            outline: 4px solid #146ff8 !important;
            outline-offset: 2px !important;
        }

        #a11y-target.a11y-hide-images img,
        #a11y-target.a11y-hide-images picture,
        #a11y-target.a11y-hide-images video {
            display: none !important;
        }

        #a11y-target.a11y-stop-animations,
        #a11y-target.a11y-stop-animations *,
        #a11y-target.a11y-stop-animations *::before,
        #a11y-target.a11y-stop-animations *::after {
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important;
        }

        #a11y-target.a11y-dark-contrast,
        #a11y-target.a11y-dark-contrast * {
            background-color: #000 !important;
            color: #fff !important;
            border-color: #fff !important;
        }
        #a11y-target.a11y-dark-contrast a { color: #ffd60a !important; }
        #a11y-target.a11y-dark-contrast img { filter: brightness(0.85); }

        #a11y-target.a11y-light-contrast,
        #a11y-target.a11y-light-contrast * {
            background-color: #fff !important;
            color: #000 !important;
            border-color: #000 !important;
        }
        #a11y-target.a11y-light-contrast a { color: #0033aa !important; }

        #a11y-target.a11y-high-contrast { filter: contrast(1.6); }
        #a11y-target.a11y-high-saturation { filter: saturate(2.2); }
        #a11y-target.a11y-low-saturation { filter: saturate(0.4); }
        #a11y-target.a11y-grayscale { filter: grayscale(1); }

        html.a11y-big-cursor-black,
        html.a11y-big-cursor-black * {
            cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpolygon points='4,2 4,28 11,21 16,30 22,28 17,18 26,18' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
        }
        html.a11y-big-cursor-white,
        html.a11y-big-cursor-white * {
            cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 32 32'%3E%3Cpolygon points='4,2 4,28 11,21 16,30 22,28 17,18 26,18' fill='white' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important;
        }