<style>
    /* ====== Baseline (non-invasive) ====== */
    :root {
      --a11y-z: 99999;
      --a11y-radius: 14px;
      --a11y-gap: .75rem;
      --a11y-shadow: 0 10px 30px rgba(0,0,0,.2);
      --a11y-border: 1px solid rgba(0,0,0,.15);
      --a11y-bg: #fff;
      --a11y-fg: #111;
      --a11y-muted: #666;
      --a11y-focus: 2px solid #005f99;
    }
    .a11y-skiplink{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .a11y-skiplink:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;padding:.5rem .75rem;background:#fff;border:2px solid #005f99;z-index:var(--a11y-z)}

    /* Floating toggle button */
    .a11y-toggle {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: var(--a11y-z);
      border-radius: 999px;
      border: var(--a11y-border);
      background: var(--a11y-bg);
      color: var(--a11y-fg);
      padding: .6rem .9rem;
      box-shadow: var(--a11y-shadow);
      cursor: pointer;
    }
    .a11y-toggle:focus{outline:var(--a11y-focus);outline-offset:2px}

    /* Panel */
    .a11y-panel {
      position: fixed;
      right: 16px;
      bottom: 70px;
      width: min(92vw, 360px);
      max-height: min(80vh, 520px);
      overflow:auto;
      z-index: var(--a11y-z);
      background: var(--a11y-bg);
      color: var(--a11y-fg);
      border-radius: var(--a11y-radius);
      border: var(--a11y-border);
      box-shadow: var(--a11y-shadow);
      padding: 1rem;
      display: none;
    }
    .a11y-panel.open{display:block}
    .a11y-panel h2{margin:0 0 .25rem;font-size:1.1rem}
    .a11y-section{padding:.75rem;border-radius:12px;border:1px dashed #ddd;margin-top:.5rem}
    .a11y-row{display:flex;align-items:center;gap:var(--a11y-gap);justify-content:space-between;margin:.4rem 0}
    .a11y-row label{flex:1}
    .a11y-actions{display:flex;gap:var(--a11y-gap);margin-top:.75rem}
    .a11y-actions button{flex:1}

    /* Basic button styling matching your site */
    .a11y-panel button,
    .a11y-toggle {
      font: inherit;
      border: none;
      border-radius: 10px;
      padding: .6rem .8rem;
    }

    /* ====== Preference classes (attach to <body>) ====== */
    /* These align with classes already in your CSS: simplifiedFont, simplifiedLayout, highContrast */
    body.largerText { font-size: 112%; line-height: 1.6; }
    body.underlineLinks a { text-decoration: underline !important; text-underline-offset: 2px; }
    body.readingRuler * { background-image: none; }
    /* High contrast class expected to be defined in host CSS; add safe fallback */
    body.highContrast { background:#000 !important; color:#ff0 !important; }
    body.highContrast a { color:#0ff !important; }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      * { animation: none !important; transition: none !important; }
    }