/* ============================================================
   EDUSION — reading & accessibility tools (a11y.js)
   1. page effects (scoped so the widget itself never changes)
   2. contrast themes
   3. the widget
   ============================================================ */

/* ============================================================ 1. page effects */

/* Bigger text: the site sizes in px, so the page content is zoomed (never the widget). */
html[data-a11y-text] body > :not(.a11y-ui) {
  zoom: var(--a11y-z, 1);
}
/* viewport units inside zoomed content would grow past the screen; divide them back */
html[data-a11y-text] .ws {
  min-height: calc(100svh / var(--a11y-z));
}
html[data-a11y-text] .ws-history {
  max-height: calc(100svh / var(--a11y-z) - 57px);
  height: calc(100svh / var(--a11y-z) - 57px);
}
html[data-a11y-text] .ws-rail {
  max-height: calc(100svh / var(--a11y-z) - 57px);
}
html[data-a11y-text] .ws-main {
  min-height: calc(100svh / var(--a11y-z) - 57px);
}
html[data-a11y-text] .ws-panel--map[data-on],
html[data-a11y-text] #panel-chat[data-on] {
  height: calc(100svh / var(--a11y-z) - 110px);
  min-height: 0;
}
html[data-a11y-text] .ws-zero {
  min-height: calc(100svh / var(--a11y-z) - 210px);
}
html[data-a11y-text] .toasts {
  width: min(calc(92vw / var(--a11y-z)), 440px);
}
html[data-a11y-text] .auth,
html[data-a11y-text] .nf {
  min-height: calc(100svh / var(--a11y-z));
}
@media (max-width: 900px) {
  html[data-a11y-text] .ws-history {
    height: calc(100svh / var(--a11y-z));
    max-height: calc(100svh / var(--a11y-z));
  }
  html[data-a11y-text] .ws[data-layout='phone'] .ws-pane--src {
    max-height: none;
  }
}
/* zoomed desktop that is effectively narrow (classes set by a11y.js): mirror app.css's 900px / 560px layout */
/* (the Sources and Study tools panels follow ws-layout.js, which treats this as the tablet layout) */
html.a11y-w900 .ws-history {
  position: fixed;
  top: 57px;
  left: 0;
  bottom: 0;
  height: auto;
  max-height: none;
  z-index: 100;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
}
html.a11y-w900 .ws-strip {
  display: none !important;
}
html.a11y-w900 .ws-top__session {
  display: none;
}
html.a11y-w900 .doc-layout {
  grid-template-columns: 1fr;
}
html.a11y-w900 .doc-toc {
  position: static;
  order: -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  border-left: 0;
  padding-left: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
html.a11y-w900 .doc-toc h3 {
  width: 100%;
  margin: 0;
}
html.a11y-w900 :is(.asset-head, .mm-bar) {
  align-items: flex-start;
  flex-wrap: wrap;
}
html.a11y-w900 :is(.asset-acts, .mm-actions) {
  flex-wrap: wrap;
}
html.a11y-w560 :is(.asset-head, .mm-bar) {
  flex-direction: column;
}
html.a11y-w560 .mm-actions {
  width: 100%;
  flex-wrap: wrap;
}

/* large text on phones: the icon top bar stays one line; the title keeps its ellipsis */
@media (max-width: 600px) {
  html[data-a11y-text] .ws-top {
    height: auto;
    min-height: 57px;
  }
}

/* Line height: body text only; big headings (h1, h2) keep their own tight spacing */
html[data-a11y-lh='1'] body :not(.a11y-ui, .a11y-ui *, h1, h1 *, h2, h2 *) {
  line-height: 1.8 !important;
}
html[data-a11y-lh='2'] body :not(.a11y-ui, .a11y-ui *, h1, h1 *, h2, h2 *) {
  line-height: 2.05 !important;
}
html[data-a11y-lh='3'] body :not(.a11y-ui, .a11y-ui *, h1, h1 *, h2, h2 *) {
  line-height: 2.35 !important;
}

/* Text spacing (WCAG 1.4.12 values) */
html.a11y-spacing body :not(.a11y-ui, .a11y-ui *) {
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

/* Readable font */
html.a11y-font body :not(.a11y-ui, .a11y-ui *, code, kbd, pre, samp) {
  font-family: 'Atkinson Hyperlegible', 'Noto Sans Devanagari', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-style: normal !important;
}

/* Align text left */
html.a11y-align body :is(p, li, h1, h2, h3, h4, h5, h6, dd, dt, blockquote, figcaption, td, th, small, label, .lead):not(.a11y-ui, .a11y-ui *) {
  text-align: left !important;
  text-align-last: auto !important;
  hyphens: manual !important;
}

/* Highlight links & buttons */
html.a11y-links body :is(a[href], button, [role='button'], [role='tab'], input[type='submit'], summary):not(.a11y-ui, .a11y-ui *) {
  outline: 2px dashed #c26a00 !important;
  outline-offset: 2px !important;
}
html.a11y-links body a[href]:not(.a11y-ui, .a11y-ui *) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}
html.a11y-links[data-a11y-contrast='dark'] body :is(a[href], button, [role='button'], [role='tab'], input[type='submit'], summary):not(.a11y-ui, .a11y-ui *) {
  outline-color: #ffc94d !important;
}

/* Big cursor (black arrow, white edge; blue over things you can click) */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8.2-6.6 1.9L9.6 19z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.a11y-cursor :is(a[href], button, [role='button'], [role='tab'], label, select, summary, .fc-card, input[type='checkbox'], input[type='radio']),
html.a11y-cursor :is(a[href], button, [role='button'], [role='tab'], label, summary) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 8.2-6.6 1.9L9.6 19z' fill='%231c4ed0' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, pointer !important;
}
html.a11y-cursor :is(input:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']), textarea, [contenteditable]) {
  cursor: text !important;
}
html.a11y-cursor .cursor-dot,
html.a11y-cursor .cursor-ring {
  display: none !important;
}

/* Strong focus outline */
html.a11y-focus body :focus-visible:not(.a11y-ui, .a11y-ui *) {
  outline: 3px solid #0b0d12 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 3px #ffd400 !important;
  border-radius: 4px;
}
html.a11y-focus .ch-form:focus-within {
  outline: 3px solid #0b0d12 !important;
  box-shadow: 0 0 0 6px #ffd400 !important;
}

/* Pause animations (mirrors base.css reduced motion, but stops them fully) */
html.a11y-motion,
html.a11y-focusmode {
  scroll-behavior: auto !important;
}
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after,
html.a11y-focusmode *,
html.a11y-focusmode *::before,
html.a11y-focusmode *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html.a11y-motion .marq__track,
html.a11y-focusmode .marq__track {
  animation: none !important;
  transform: none !important;
}
html.a11y-motion [data-reveal],
html.a11y-focusmode [data-reveal] {
  transform: none !important;
  filter: none !important;
}
html.a11y-motion :is(.cursor-dot, .cursor-ring),
html.a11y-focusmode :is(.cursor-dot, .cursor-ring) {
  display: none !important;
}

/* Focus mode: quiet backgrounds everywhere; on /app only the study panel stays */
html.a11y-focusmode :is(.atmos, .rings, .stage__rings) {
  display: none !important;
}
html.a11y-focusmode :is(.ws-history, .ws-pane--src, .ws-history-backdrop, .ws-sidebar-toggle, .ws-strip, .ws-mseg, .ws-pane-scrim, .ws-dropmask) {
  display: none !important;
}
/* the study tools stay (they switch what is studied); decorative emoji go, the tool emoji stay as
   their icons, toned down */
html.a11y-focusmode .ws-greet__emo,
html.a11y-focusmode .ws-src-empty__emo,
html.a11y-focusmode .ws-made__empty .emo,
html.a11y-focusmode .ws-addsheet__tip .emo {
  display: none !important;
}
html.a11y-focusmode :is(.ws-tile, .ws-made__item, .ws-opt) .emo {
  filter: grayscale(1);
  opacity: 0.7;
}
html.a11y-focusmode .ws-main {
  max-width: 920px;
  margin-inline: auto;
}
html.a11y-focusmode .ws-body {
  justify-content: center;
}

/* Read aloud: what is being read */
.a11y-reading {
  outline: 3px solid #f2b705 !important;
  outline-offset: 4px;
  border-radius: 6px;
  scroll-margin: 120px;
}
::highlight(a11y-sent) {
  background-color: rgba(255, 214, 51, 0.32);
}
::highlight(a11y-word) {
  background-color: #ffd633;
  color: #0b0d12;
}
html.a11y-read main :is(p, li, h1, h2, h3, h4, h5, h6, dd, dt, blockquote, figcaption, td, th):not(:has(p, li)):hover {
  outline: 2px dashed rgba(47, 107, 255, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
  cursor: pointer;
}

/* ============================================================ 2. contrast */

/* High contrast: darker ink, solid surfaces, visible edges */
html[data-a11y-contrast='high'] {
  --canvas: #ffffff;
  --canvas-2: #ffffff;
  --canvas-3: #f1f2f4;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --ink: #000000;
  --ink-2: #1b2029;
  --ink-3: #262c36;
  --ink-4: #454c59;
  --hair: rgba(0, 0, 0, 0.42);
  --hair-2: rgba(0, 0, 0, 0.62);
  --hair-3: rgba(0, 0, 0, 0.82);
  --accent: #0037c0;
  --accent-deep: #00288f;
  --accent-soft: rgba(0, 55, 192, 0.1);
  --accent-soft-2: rgba(0, 55, 192, 0.2);
  --accent-hair: rgba(0, 55, 192, 0.65);
  --sage: #24502d;
  --amber: #6a4b00;
  --clay: #8c2f17;
  --dark: #000000;
  --dark-ink-2: rgba(255, 255, 255, 0.86);
}
html[data-a11y-contrast='high'] body main a[href]:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-a11y-contrast='high'] :is(.ws-top, .ws-rail, .nav, .nav-wrap.is-stuck .nav) {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-a11y-contrast='high'] .ws-history-item.is-active {
  box-shadow: inset 0 0 0 2px var(--accent);
}
html[data-a11y-contrast='high'] :is(.ws-account, .ws-search__input) {
  border-color: var(--ink);
}
html[data-a11y-contrast='high'] [data-tip]::after {
  outline: 1px solid #ffffff;
}
html[data-a11y-contrast='high'] .fc-face--back .fc-face__foot,
html[data-a11y-contrast] .footer__bottom,
html[data-a11y-contrast] .footer h4 {
  color: rgba(255, 255, 255, 0.85);
}
html[data-a11y-contrast='high'] .qz-opt[data-state='right'],
html[data-a11y-contrast='high'] .qz-opt[data-state='right'] i {
  color: #1d4424;
}
html[data-a11y-contrast='high'] .qz-opt[data-state='wrong'],
html[data-a11y-contrast='high'] .qz-opt[data-state='wrong'] i {
  color: #7a2410;
}
html[data-a11y-contrast='high'] ::placeholder {
  color: #3d4450;
  opacity: 1;
}
html[data-a11y-contrast='high'] .map-card span {
  color: inherit;
}

/* Dark mode */
html[data-a11y-contrast='dark'] {
  color-scheme: dark;
  --canvas: #0e1116;
  --canvas-2: #11151b;
  --canvas-3: #1a1f27;
  --paper: #171b22;
  --surface: rgba(23, 27, 34, 0.86);
  --surface-strong: rgba(23, 27, 34, 0.96);
  --ink: #eef1f6;
  --ink-2: #bdc5d1;
  --ink-3: #a9b2bf;
  --ink-4: #8d96a5;
  --hair: rgba(255, 255, 255, 0.1);
  --hair-2: rgba(255, 255, 255, 0.18);
  --hair-3: rgba(255, 255, 255, 0.3);
  --accent: #7ea6ff;
  --accent-deep: #a9c2ff;
  --accent-soft: rgba(126, 166, 255, 0.14);
  --accent-soft-2: rgba(126, 166, 255, 0.26);
  --accent-hair: rgba(126, 166, 255, 0.5);
  --sage: #92c79d;
  --amber: #e3bb63;
  --clay: #f0a088;
  --dark: #262c38;
  --dark-2: #1d222c;
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lift-2: 0 12px 24px -18px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --lift-3: 0 20px 40px -24px rgba(0, 0, 0, 0.6), 0 4px 10px -6px rgba(0, 0, 0, 0.4);
  --lift-4: 0 40px 80px -40px rgba(0, 0, 0, 0.7), 0 8px 20px -12px rgba(0, 0, 0, 0.45);
}
html[data-a11y-contrast='dark'] body {
  background: var(--canvas);
}
/* surfaces that were hard-coded white */
html[data-a11y-contrast='dark'] :is(.ws-top, .nav, .nav-wrap.is-stuck .nav) {
  background: rgba(17, 21, 27, 0.9);
}
html[data-a11y-contrast='dark'] .ws-rail {
  background: var(--canvas);
}
html[data-a11y-contrast='dark'] :is(.ws-src, .seg button[aria-selected='true'], .ws-input, .fc-face, .qz-card, .rp-doc, .brief-doc, .map-card, .ch-msg--ai, .ch-typing, kbd, .mm-actions > button:not(.regen-btn), .auth__card) {
  background: var(--paper);
  color: var(--ink);
}
html[data-a11y-contrast='dark'] :is(.bigdrop, .regen-btn, .ghost-btn, .ch-sug button, .qz-opt) {
  background: rgba(255, 255, 255, 0.04);
}
html[data-a11y-contrast='dark'] :is(.ghost-btn:hover:not([disabled]), .qz-opt:hover:not([disabled]):not([aria-disabled='true']), .btn--ghost:hover) {
  background: rgba(255, 255, 255, 0.1);
}
html[data-a11y-contrast='dark'] :is(.seg, .qz-fb) {
  background: rgba(255, 255, 255, 0.06);
}
html[data-a11y-contrast='dark'] .ch-form {
  background: rgba(23, 27, 34, 0.94);
}
html[data-a11y-contrast='dark'] .mm-frame {
  background: linear-gradient(to bottom right, #171b22, #12161c);
}
html[data-a11y-contrast='dark'] .mm-frame::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
}
/* light-on-ink controls flip to ink-on-light */
html[data-a11y-contrast='dark'] .btn {
  --btn-bg: #eef1f6;
  --btn-fg: #0b0d12;
}
html[data-a11y-contrast='dark'] .btn:hover {
  background: #ffffff;
}
html[data-a11y-contrast='dark'] .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
}
html[data-a11y-contrast='dark'] .btn--invert {
  --btn-bg: #eef1f6;
  --btn-fg: #0b0d12;
}
html[data-a11y-contrast='dark'] :is(.skip-link, .app-tab[data-on], .icon-btn) {
  color: #0b0d12;
}
html[data-a11y-contrast='dark'] .fc-face--back .fc-face__foot {
  color: rgba(255, 255, 255, 0.74);
}
html[data-a11y-contrast='dark'] .listen-btn[aria-pressed='true'] {
  color: #0b0d12;
}
html[data-a11y-contrast='dark'] .qz-opt[data-state='right'],
html[data-a11y-contrast='dark'] .qz-opt[data-state='right'] i {
  color: #a4d8ae;
}
html[data-a11y-contrast='dark'] .qz-opt[data-state='wrong'],
html[data-a11y-contrast='dark'] .qz-opt[data-state='wrong'] i {
  color: #f5b2a0;
}
html[data-a11y-contrast='dark'] .map-card span {
  color: var(--ink-3);
}
html[data-a11y-contrast='dark'] .map-card--root,
html[data-a11y-contrast='dark'] .map-card--root span {
  color: #ffffff;
}
html[data-a11y-contrast='dark'] .map-card--root .map-card__note {
  color: rgba(255, 255, 255, 0.72);
}
html[data-a11y-contrast='dark'] .mm-frame {
  --mm-halo: #151920;
}
html[data-a11y-contrast='dark'] .fc-face--back {
  border-color: var(--hair-3);
}
html[data-a11y-contrast='dark'] ::placeholder {
  color: #9aa3b1;
  opacity: 1;
}
/* landing page demo cards */
html[data-a11y-contrast='dark'] :is(.dropzone, .about-card, .pdf-page, .notes-card, .src-chip, .app-preview, .float-badge, .chaos__item, .result, .metric, .mini-chip, .tool-pill, .brief-mini, .flash__face:not(.flash__face--back), .quiz__opt, .report, .bubble--ai, .chat__input) {
  background: var(--paper);
  color: var(--ink);
}
html[data-a11y-contrast='dark'] :is(.hp-float, .hp-src:first-of-type, .hp-seg span[data-on], .hp-concept) {
  background: var(--paper);
  color: var(--ink);
}
html[data-a11y-contrast='dark'] :is(.app-bar, .app-rail, .hp-bar, .hp-rail, .marq, .step__mini) {
  background: rgba(255, 255, 255, 0.04);
}
html[data-a11y-contrast='dark'] :is(.map-stage, .about) {
  background: var(--canvas-2);
}
html[data-a11y-contrast='dark'] .report::after {
  background: linear-gradient(to bottom, rgba(23, 27, 34, 0), var(--paper));
}
html[data-a11y-contrast='dark'] .atmos__floor {
  display: none;
}
html[data-a11y-contrast='dark'] .atmos {
  opacity: 0.25;
}

/* ============================================================ 3. widget */
.a11y-ui,
.a11y-ui * {
  box-sizing: border-box;
  font-family: var(--font-sans);
  letter-spacing: normal;
  word-spacing: normal;
  text-align: left;
  line-height: 1.4;
}
.a11y-root {
  --aw-paper: #ffffff;
  --aw-canvas: #f4f5f7;
  --aw-ink: #0b0d12;
  --aw-ink-2: #555f6f;
  --aw-hair: rgba(11, 13, 18, 0.1);
  --aw-hair-2: rgba(11, 13, 18, 0.16);
  --aw-accent: #2f6bff;
  --aw-accent-deep: #1c4ed0;
  --aw-accent-soft: #edf2ff;
  --aw-focus: #1c4ed0;
  color: var(--aw-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.a11y-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.a11y-ic {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
}
.a11y-ui :focus-visible {
  outline: 3px solid var(--aw-focus, #1c4ed0);
  outline-offset: 2px;
}
.a11y-ui [hidden] {
  display: none !important;
}

/* floating button */
.a11y-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147482990;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--aw-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(28, 78, 208, 0.6), 0 2px 6px rgba(11, 13, 18, 0.18), inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  transition: transform 160ms ease, background 160ms ease;
}
.a11y-fab:hover {
  background: var(--aw-accent-deep);
  transform: scale(1.05);
}
.a11y-fab:focus-visible {
  outline: 3px solid #0b0d12;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #ffd400;
}
.a11y-fab__ic {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
.a11y-root--hidden .a11y-fab {
  display: none;
}

/* one-time tip */
.a11y-hint {
  position: fixed;
  left: 84px;
  bottom: 28px;
  z-index: 2147482990;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: #0b0d12;
  color: #fff;
  box-shadow: 0 12px 28px -12px rgba(11, 13, 18, 0.5);
  animation: a11yIn 260ms ease-out;
}
.a11y-hint::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: #0b0d12;
  transform: rotate(45deg);
}
.a11y-hint--bar {
  left: auto;
  bottom: auto;
}
.a11y-hint--bar::before {
  left: auto;
  right: 22px;
  top: -4px;
  margin-top: 0;
}
.a11y-hint__open {
  border: 0;
  background: none;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 4px;
  white-space: nowrap;
}
.a11y-hint__x {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.a11y-hint__x .a11y-ic {
  width: 14px;
  height: 14px;
}
.a11y-ui .a11y-hint :focus-visible {
  outline-color: #ffd400;
}

/* scrim + panel */
.a11y-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147482991;
  background: rgba(11, 13, 18, 0.08);
}
.a11y-panel {
  position: fixed;
  left: 20px;
  bottom: 84px;
  z-index: 2147482992;
  width: 384px;
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
  display: flex;
  flex-direction: column;
  background: var(--aw-canvas);
  border: 1px solid var(--aw-hair-2);
  border-radius: 20px;
  box-shadow: 0 40px 80px -30px rgba(11, 13, 18, 0.45), 0 10px 24px -12px rgba(11, 13, 18, 0.2);
  overflow: hidden;
  animation: a11yIn 200ms ease-out;
}
.a11y-root--bar .a11y-panel {
  left: auto;
  right: 16px;
  top: 64px;
  bottom: auto;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
}
@keyframes a11yIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.a11y-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--aw-paper);
  border-bottom: 1px solid var(--aw-hair);
}
.a11y-head__ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--aw-accent);
  color: #fff;
  flex: none;
}
.a11y-head__txt {
  flex: 1;
  min-width: 0;
}
.a11y-head h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.a11y-head h2.serif-accent {
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 0;
}
.a11y-head h2.serif-accent:is(:lang(hi), :lang(mr)) {
  font-size: 19px;
  font-weight: 600;
}
.a11y-ui .a11y-head h2:focus,
.a11y-ui .a11y-head h2:focus-visible {
  outline: none;
}
.a11y-head p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--aw-ink-2);
}
.a11y-x {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--aw-hair-2);
  border-radius: 50%;
  background: var(--aw-paper);
  color: var(--aw-ink);
  cursor: pointer;
  flex: none;
}
.a11y-x:hover {
  background: var(--aw-canvas);
}
.a11y-x .a11y-ic {
  width: 18px;
  height: 18px;
}
.a11y-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 14px 18px;
  scrollbar-width: thin;
}
.a11y-sec {
  margin-top: 14px;
}
.a11y-sec__h {
  margin: 0 2px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aw-ink-2);
}

/* profiles */
.a11y-profs {
  display: grid;
  gap: 8px;
}
.a11y-prof {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid var(--aw-hair);
  border-radius: 14px;
  background: var(--aw-paper);
  color: var(--aw-ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
  transition: border-color 140ms linear, background 140ms linear;
}
.a11y-prof:hover {
  border-color: rgba(47, 107, 255, 0.45);
}
.a11y-prof__ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--aw-accent-soft);
  color: var(--aw-accent-deep);
  flex: none;
}
.a11y-prof__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.a11y-prof__txt strong {
  font-size: 14.5px;
  font-weight: 600;
}
.a11y-prof__txt span {
  font-size: 12.5px;
  color: var(--aw-ink-2);
}
.a11y-switch {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #c9ced8;
  position: relative;
  flex: none;
  transition: background 140ms linear;
}
.a11y-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 140ms ease;
}
.a11y-prof[aria-pressed='true'] {
  border-color: var(--aw-accent);
  background: var(--aw-accent-soft);
}
.a11y-prof[aria-pressed='true'] .a11y-prof__ic {
  background: var(--aw-accent);
  color: #fff;
}
.a11y-prof[aria-pressed='true'] .a11y-switch {
  background: var(--aw-accent-deep);
}
.a11y-prof[aria-pressed='true'] .a11y-switch i {
  transform: translateX(16px);
}

/* option cards */
.a11y-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.a11y-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 104px;
  padding: 12px;
  border: 1.5px solid var(--aw-hair);
  border-radius: 14px;
  background: var(--aw-paper);
  color: var(--aw-ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04);
  transition: border-color 140ms linear, background 140ms linear;
}
.a11y-card:hover {
  border-color: rgba(47, 107, 255, 0.45);
}
.a11y-card__ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f1f3f7;
  color: var(--aw-ink);
  margin-bottom: 4px;
}
.a11y-card__check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: var(--aw-accent-deep);
  color: #fff;
}
.a11y-card__check .a11y-ic {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}
.a11y-card__label {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
}
.a11y-card__val {
  font-size: 12px;
  color: var(--aw-ink-2);
}
.a11y-card__dev:not(:empty) {
  font-size: 11.5px;
  color: var(--aw-accent-deep);
  font-weight: 500;
}
.a11y-dots {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
}
.a11y-dots i {
  width: 18px;
  height: 5px;
  border-radius: 99px;
  background: #d5d9e1;
}
.a11y-dots i.on {
  background: var(--aw-accent-deep);
}
.a11y-card[aria-pressed='true'] {
  border-color: var(--aw-accent);
  background: var(--aw-accent-soft);
}
.a11y-card[aria-pressed='true'] .a11y-card__ic {
  background: var(--aw-accent);
  color: #fff;
}
.a11y-card[aria-pressed='true'] .a11y-card__check {
  display: grid;
}
.a11y-card--wide {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.a11y-card--wide .a11y-card__ic {
  margin: 0;
}
.a11y-card--wide .a11y-card__val {
  margin-left: auto;
}
.a11y-chev .a11y-ic {
  width: 18px;
  height: 18px;
  transition: transform 160ms ease;
}
.a11y-card--wide[aria-expanded='true'] .a11y-chev .a11y-ic {
  transform: rotate(180deg);
}

/* study extras. "Read this page aloud" is the panel's one primary action: the site's glossy accent pill
   (base.css .btn-primary: soft top highlight, wide soft drop, no bottom line), at panel width */
.a11y-readpage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  background-color: var(--aw-accent-deep);
  background-image: linear-gradient(180deg, #4079ff 0%, #2f63f6 55%, #2b58ea 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 16px -6px rgba(40, 82, 230, 0.42), 0 2px 6px -2px rgba(40, 82, 230, 0.2);
  transition: filter 0.15s linear, box-shadow 0.25s ease, transform 0.16s ease;
}
.a11y-readpage:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 22px -8px rgba(40, 82, 230, 0.48), 0 3px 8px -3px rgba(40, 82, 230, 0.22);
}
.a11y-readpage:active {
  transform: translateY(1px);
  filter: brightness(0.98);
}
html[data-a11y-contrast] .a11y-readpage {
  background-image: none;
  box-shadow: none;
}
.a11y-readpage .a11y-ic {
  width: 16px;
  height: 16px;
}
.a11y-note {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--aw-paper);
  border: 1px dashed var(--aw-hair-2);
  font-size: 12.5px;
  color: var(--aw-ink-2);
}
.a11y-outline {
  margin-top: 8px;
  padding: 6px;
  border: 1px solid var(--aw-hair);
  border-radius: 14px;
  background: var(--aw-paper);
  max-height: 260px;
  overflow-y: auto;
}
.a11y-outline ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.a11y-outline button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--aw-ink);
  font-size: 13.5px;
  cursor: pointer;
}
.a11y-outline button:hover {
  background: var(--aw-accent-soft);
}
.a11y-ol--h1 button {
  font-weight: 600;
}
.a11y-ol--h3 button {
  padding-left: 22px;
}
.a11y-ol--h4 button {
  padding-left: 34px;
  color: var(--aw-ink-2);
}
.a11y-outline .a11y-note {
  margin: 0;
  border: 0;
}
.a11y-voice {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--aw-hair);
  border-radius: 14px;
  background: var(--aw-paper);
}
.a11y-voice__lab {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--aw-ink-2);
}

/* voice picker: trigger + listbox popover (a bottom sheet on phones) */
.a11y-vp {
  position: relative;
}
.a11y-vp__trig {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--aw-hair-2);
  border-radius: 12px;
  background: var(--aw-paper);
  color: var(--aw-ink);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms linear, box-shadow 120ms linear;
}
.a11y-vp__trig:hover,
.a11y-vp__trig[aria-expanded='true'] {
  border-color: var(--aw-accent);
}
.a11y-vp__trig[aria-expanded='true'] {
  box-shadow: 0 0 0 3px var(--aw-accent-soft);
}
.a11y-vp__cur {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.a11y-vp__curname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.a11y-vp__curlang {
  flex: none;
  font-size: 12px;
  color: var(--aw-ink-2);
}
.a11y-vp__chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--aw-ink-2);
  transition: transform 160ms ease;
}
.a11y-vp__trig[aria-expanded='true'] .a11y-vp__chev {
  transform: rotate(180deg);
}
.a11y-vp__pop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: 420px;
  background: var(--aw-paper);
  border: 1px solid var(--aw-hair-2);
  border-radius: 14px;
  box-shadow: 0 24px 48px -20px rgba(11, 13, 18, 0.35), 0 6px 14px -8px rgba(11, 13, 18, 0.18);
  overflow: hidden;
  transform-origin: 50% 0;
}
.a11y-vp__pop.is-up {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: 50% 100%;
}
.a11y-vp__head,
.a11y-vp__scrim {
  display: none;
}
.a11y-vp__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 6px 6px;
  scrollbar-width: thin;
}
.a11y-ui .a11y-vp__list:focus-visible {
  outline: none;
}
.a11y-vp__gh {
  padding: 12px 10px 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--aw-ink-2);
}
.a11y-vp__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 5px 6px 5px 10px;
  border-radius: 10px;
  color: var(--aw-ink);
  cursor: pointer;
}
.a11y-vp__opt.is-active {
  background: var(--aw-accent-soft);
}
.a11y-vp__list:focus-visible .a11y-vp__opt.is-active {
  box-shadow: inset 0 0 0 2px var(--aw-focus);
}
.a11y-vp__ck {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--aw-accent-deep);
  stroke-width: 2.4;
  opacity: 0;
}
.a11y-vp__opt[aria-selected='true'] .a11y-vp__ck {
  opacity: 1;
}
.a11y-vp__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
}
.a11y-vp__name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.a11y-vp__opt[aria-selected='true'] .a11y-vp__name {
  font-weight: 600;
}
.a11y-vp__sub {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--aw-ink-2);
}
.a11y-vp__tags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.a11y-vp__tag {
  padding: 0 6px;
  border: 1px solid var(--aw-hair-2);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.02em;
  color: var(--aw-ink-2);
}
.a11y-vp__tag--muted {
  padding: 0 2px;
  border-color: transparent;
  font-weight: 500;
}
.a11y-vp__play {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--aw-ink-2);
  cursor: pointer;
}
.a11y-vp__play .a11y-ic {
  width: 13px;
  height: 13px;
}
.a11y-vp__play:hover {
  background: rgba(118, 118, 128, 0.14);
  color: var(--aw-ink);
}
.a11y-vp__play.is-playing {
  background: var(--aw-accent-deep);
  color: #fff;
}
.a11y-vp__note {
  flex: none;
  padding: 10px 14px 6px;
  border-top: 1px solid var(--aw-hair);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--aw-ink-2);
}
.a11y-vp__note p {
  margin: 0;
}
.a11y-vp__note .a11y-vh {
  margin-top: 2px;
}
.a11y-vp__all {
  flex: none;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border: 0;
  border-top: 1px solid var(--aw-hair);
  background: var(--aw-paper);
  color: var(--aw-ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.a11y-vp__all[aria-pressed='true'] .a11y-switch {
  background: var(--aw-accent-deep);
}
.a11y-vp__all[aria-pressed='true'] .a11y-switch i {
  transform: translateX(18px);
}
.a11y-ui .a11y-vp__all:focus-visible,
.a11y-ui .a11y-vp__x:focus-visible {
  outline-offset: -3px;
}

/* speed: segmented control */
.a11y-speed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.a11y-speed .a11y-voice__lab {
  margin: 0;
}
.a11y-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: rgba(118, 118, 128, 0.12);
}
.a11y-seg button {
  min-width: 50px;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--aw-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.a11y-seg button:hover {
  color: var(--aw-ink);
}
.a11y-seg button[aria-checked='true'] {
  background: var(--aw-paper);
  color: var(--aw-ink);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(11, 13, 18, 0.14), 0 0 0 0.5px rgba(11, 13, 18, 0.08);
}
html[data-a11y-contrast='high'] .a11y-seg button[aria-checked='true'] {
  box-shadow: inset 0 0 0 2px var(--aw-ink);
}
.a11y-ui .a11y-pspeed {
  width: auto;
  min-width: 46px;
  padding: 0 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 599px) {
  .a11y-vp__pop,
  .a11y-vp__pop.is-up {
    --sheet: 1;
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 20;
    max-height: 82vh !important;
    max-height: 82dvh !important;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px -12px rgba(11, 13, 18, 0.35);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .a11y-vp__pop.is-dragging {
    user-select: none;
  }
  .a11y-vp__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 16px 6px;
    touch-action: none;
  }
  .a11y-vp__head::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 99px;
    background: rgba(60, 60, 67, 0.3);
  }
  .a11y-vp__head strong {
    font-size: 17px;
    font-weight: 650;
  }
  .a11y-vp__x {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(118, 118, 128, 0.14);
    color: var(--aw-ink);
    cursor: pointer;
  }
  .a11y-vp__x .a11y-ic {
    width: 16px;
    height: 16px;
  }
  .a11y-vp__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, 0.35);
  }
  .a11y-vp__list {
    padding: 0 8px 8px;
  }
  .a11y-vp__opt {
    min-height: 52px;
  }
  .a11y-vp__play {
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .a11y-vp__chev,
  .a11y-vp__trig {
    transition: none;
  }
}
@media (forced-colors: active) {
  .a11y-vp__opt.is-active,
  .a11y-seg button[aria-checked='true'] {
    outline: 2px solid Highlight;
  }
  .a11y-vp__opt[aria-selected='true'] .a11y-vp__ck {
    color: Highlight;
  }
}
.a11y-ui select {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--aw-hair-2);
  border-radius: 10px;
  background: var(--aw-paper);
  color: var(--aw-ink);
  font-size: 13.5px;
}

/* shortcuts */
.a11y-keys dl {
  margin: 0;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--aw-paper);
  border: 1px solid var(--aw-hair);
}
.a11y-keys dl > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--aw-hair);
}
.a11y-keys dl > div:last-child {
  border-bottom: 0;
}
.a11y-keys dt {
  flex: none;
  min-width: 112px;
  font-size: 12px;
  color: var(--aw-ink-2);
}
.a11y-keys dd {
  margin: 0;
  font-size: 13px;
}
.a11y-ui kbd {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--aw-hair-2);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--aw-canvas);
  color: var(--aw-ink);
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-align: center;
}
.a11y-foot-note {
  margin: 12px 2px 0;
  font-size: 12.5px;
  color: var(--aw-ink-2);
}

/* sticky footer */
.a11y-foot {
  padding: 10px 14px 12px;
  background: var(--aw-paper);
  border-top: 1px solid var(--aw-hair);
}
.a11y-foot__btns {
  display: flex;
  gap: 8px;
}
/* footer actions are quiet secondary pills: white, hairline edge, ink text ("Reset all" is not the main job) */
.a11y-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--aw-paper);
  color: var(--aw-ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--aw-hair-2), 0 1px 2px rgba(11, 13, 18, 0.04);
  transition: background-color 0.15s linear, box-shadow 0.2s ease;
}
.a11y-btn .a11y-ic {
  width: 16px;
  height: 16px;
}
.a11y-btn:hover {
  background: var(--aw-canvas);
  box-shadow: inset 0 0 0 1px rgba(11, 13, 18, 0.22), 0 1px 2px rgba(11, 13, 18, 0.05);
}
.a11y-btn .a11y-ic {
  color: var(--aw-ink-2);
}
.a11y-btn--ghost {
  box-shadow: none;
  background: transparent;
  color: var(--aw-ink-2);
}
.a11y-btn--ghost:hover {
  background: var(--aw-paper);
  box-shadow: inset 0 0 0 1px var(--aw-hair);
}
.a11y-hint-line {
  margin: 8px 2px 0;
  font-size: 11.5px;
  color: var(--aw-ink-2);
}

/* reading ruler + mask: never catch clicks */
.a11y-ruler,
.a11y-mask {
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2147482980;
}
.a11y-ruler {
  top: 0;
  height: 40px;
  background: rgba(255, 214, 51, 0.2);
  border-top: 2px solid rgba(214, 160, 0, 0.75);
  border-bottom: 2px solid rgba(214, 160, 0, 0.75);
  mix-blend-mode: multiply;
}
html[data-a11y-contrast='dark'] .a11y-ruler {
  mix-blend-mode: normal;
  background: rgba(255, 214, 51, 0.12);
}
.a11y-mask {
  background: rgba(8, 10, 16, 0.62);
}
.a11y-mask--t {
  top: 0;
}
.a11y-mask--b {
  bottom: 0;
}

/* selection "Read" button */
.a11y-selread {
  position: fixed;
  z-index: 2147482995;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: #0b0d12;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(11, 13, 18, 0.6);
}
.a11y-selread .a11y-ic {
  width: 16px;
  height: 16px;
}
.a11y-ui .a11y-selread:focus-visible,
.a11y-ui .a11y-player :focus-visible {
  outline-color: #ffd400;
}

/* player bar */
.a11y-player {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2147482993;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 14px;
  border-radius: 999px;
  background: #0b0d12;
  color: #fff;
  box-shadow: 0 20px 40px -18px rgba(11, 13, 18, 0.7);
  animation: a11yIn 200ms ease-out;
}
.a11y-player__ic .a11y-ic {
  width: 18px;
  height: 18px;
  color: #ffd633;
}
.a11y-player__st {
  font-size: 13px;
  font-weight: 500;
  min-width: 92px;
}
.a11y-pbtn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.a11y-pbtn:hover {
  background: rgba(255, 255, 255, 0.22);
}
.a11y-pbtn .a11y-ic {
  width: 16px;
  height: 16px;
}
.a11y-ui .a11y-player .a11y-pspeed {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: #1d212b;
}
/* on /app's chat tab, sit above the message box */
html:has(#panel-chat[data-on]) .a11y-player {
  bottom: 86px;
}

/* ============================================================ phones */
@media (max-width: 599px) {
  .a11y-fab {
    left: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }
  .a11y-fab__ic {
    width: 25px;
    height: 25px;
  }
  .a11y-hint {
    left: 70px;
    bottom: 18px;
  }
  .a11y-hint--bar {
    left: auto;
    bottom: auto;
  }
  .a11y-scrim {
    background: rgba(11, 13, 18, 0.45);
  }
  .a11y-panel,
  .a11y-root--bar .a11y-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    animation-name: a11ySheet;
  }
  .a11y-head {
    position: relative;
    padding-top: 20px;
  }
  .a11y-head::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 99px;
    background: #d5d9e1;
  }
  .a11y-foot {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .a11y-player {
    left: 10px;
    right: 10px;
    transform: none;
    bottom: 12px;
  }
  .a11y-player__st {
    flex: 1;
    min-width: 0;
  }
  .a11y-keys dt {
    min-width: 96px;
  }
}
@keyframes a11ySheet {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .a11y-ui,
  .a11y-ui * {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .a11y-card[aria-pressed='true'],
  .a11y-prof[aria-pressed='true'] {
    outline: 3px solid Highlight;
  }
  .a11y-fab {
    border: 2px solid ButtonText;
  }
}

/* "Get a better <language> voice" (panel + player) */
.a11y-vh {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}
.a11y-vh summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--aw-accent-deep, #1c4ed0);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.a11y-vh__body {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--aw-paper, #fff);
  border: 1px solid var(--aw-hair-2, rgba(11, 13, 18, 0.14));
  color: var(--aw-ink-2, #3d4553);
}
.a11y-vh__body p {
  margin: 0 0 8px;
}
.a11y-vh__x {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.a11y-player--help {
  flex-wrap: wrap;
  border-radius: 20px;
  max-width: min(520px, calc(100vw - 20px));
}
.a11y-player .a11y-vh-slot {
  flex-basis: 100%;
}
.a11y-player .a11y-vh-slot:empty {
  display: none;
}
.a11y-player .a11y-vh {
  margin: 0 0 2px;
}
.a11y-player .a11y-vh summary {
  color: #ffd633;
}
.a11y-player .a11y-vh__body {
  background: #1d212b;
  border-color: rgba(255, 255, 255, 0.2);
  color: #e8ebf1;
}
.a11y-player .a11y-pbtn[hidden] {
  display: none;
}
/* Devanagari labels in the panel need a little more room for vowel signs */
.a11y-ui :is(:lang(hi), :lang(mr)):is(.a11y-card__label, .a11y-card__val, .a11y-prof__txt, .a11y-sec__h, .a11y-btn, .a11y-player__st) {
  line-height: 1.45;
  letter-spacing: 0;
}

/* ============================================================ 4. iOS layer: grouped inset lists, sheet
   Sections read like iOS Settings: rounded white groups, hairline separators inset past the
   icon tile, switches for on/off options. On phones the panel is a bottom sheet that can be
   dragged down to close (motion.js); Escape, the close button and the scrim still work. */
.a11y-root {
  --aw-canvas: #f2f3f7;
  --aw-sep: rgba(60, 60, 67, 0.16);
}
.a11y-panel {
  animation: none;
  border-radius: 18px;
  transform-origin: 90% 0;
}
.a11y-head {
  background: var(--aw-canvas);
  border-bottom-color: transparent;
}
.a11y-head h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.a11y-head__ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.a11y-x {
  width: 32px;
  height: 32px;
  border: 0;
  background: rgba(118, 118, 128, 0.14);
}
.a11y-x .a11y-ic {
  width: 16px;
  height: 16px;
}
.a11y-body {
  padding: 0 16px 20px;
}
.a11y-sec {
  margin-top: 22px;
}
.a11y-sec:first-child {
  margin-top: 6px;
}
.a11y-sec__h {
  margin: 0 16px 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--aw-ink-2);
}
/* groups */
.a11y-profs,
.a11y-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-radius: 12px;
  background: var(--aw-paper);
  overflow: hidden;
}
.a11y-profs > * + *,
.a11y-grid > * + * {
  background-image: linear-gradient(var(--aw-sep), var(--aw-sep));
  background-size: calc(100% - 58px) 1px;
  background-position: right top;
  background-repeat: no-repeat;
}
/* rows */
.a11y-prof,
.a11y-card {
  position: relative;
  min-height: 54px;
  padding: 9px 14px;
  border: 0;
  border-radius: 0;
  background-color: var(--aw-paper);
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s linear;
}
.a11y-prof:hover,
.a11y-card:hover {
  border-color: transparent;
  background-color: #f7f8fa;
}
.a11y-prof:active,
.a11y-card:active {
  background-color: #eceef2;
}
.a11y-prof[aria-pressed='true'],
.a11y-card[aria-pressed='true'] {
  background-color: var(--aw-paper);
}
.a11y-ui :is(.a11y-prof, .a11y-card):focus-visible {
  outline-offset: -3px;
  border-radius: 12px;
}
.a11y-prof {
  gap: 14px;
}
.a11y-prof__ic,
.a11y-card__ic {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 8px;
  background: #e8ecf5;
  color: var(--aw-accent-deep);
}
.a11y-prof__ic .a11y-ic,
.a11y-card__ic .a11y-ic {
  width: 18px;
  height: 18px;
}
.a11y-prof__txt strong,
.a11y-card__label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.a11y-prof__txt span,
.a11y-card__val {
  font-size: 12.5px;
  color: var(--aw-ink-2);
}
/* iOS switch */
.a11y-switch {
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: #c9ced8;
  transition: background-color 0.2s linear;
}
.a11y-switch i {
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-spring, 0.4s) var(--spring, ease);
}
.a11y-prof[aria-pressed='true'] .a11y-switch i {
  transform: translateX(18px);
}
/* option rows: icon | label + level | dots or a switch */
.a11y-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-areas: 'ic label end' 'ic val end' 'ic dev end';
  grid-template-rows: minmax(min-content, 1fr) auto auto;
  column-gap: 14px;
  row-gap: 0;
  align-items: center;
  align-content: stretch;
  text-align: left;
}
.a11y-card__ic {
  grid-area: ic;
  grid-row: 1 / -1;
  align-self: center;
}
.a11y-card__label {
  grid-area: label;
  align-self: center;
}
.a11y-card:is(:has(.a11y-dots), .a11y-card--wide) .a11y-card__label {
  align-self: end;
}
.a11y-card__val {
  grid-area: val;
}
.a11y-card__val:empty,
.a11y-card__dev:empty {
  display: none;
}
.a11y-card__dev {
  grid-area: dev;
}
.a11y-card .a11y-dots {
  grid-area: end;
  grid-row: 1 / -1;
  margin: 0;
  padding: 0;
}
.a11y-card .a11y-dots i {
  width: 14px;
  height: 6px;
}
.a11y-card__check {
  display: none !important;
}
.a11y-card[aria-pressed='true'] .a11y-card__ic,
.a11y-prof[aria-pressed='true'] .a11y-prof__ic {
  background: var(--aw-accent);
  color: #fff;
}
/* on/off options get a switch (drawn here; aria-pressed stays the state) */
.a11y-card:not(:has(.a11y-dots)):not(.a11y-card--wide)::after {
  content: '';
  grid-area: end;
  grid-row: 1 / -1;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: #c9ced8;
  transition: background-color 0.2s linear;
}
.a11y-card:not(:has(.a11y-dots)):not(.a11y-card--wide)::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 34px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-spring, 0.4s) var(--spring, ease);
  z-index: 1;
}
.a11y-card[aria-pressed='true']:not(:has(.a11y-dots)):not(.a11y-card--wide)::after {
  background: var(--aw-accent-deep);
}
.a11y-card[aria-pressed='true']:not(:has(.a11y-dots)):not(.a11y-card--wide)::before {
  transform: translateX(18px);
}
.a11y-card--wide {
  grid-template-areas: 'ic label end' 'ic val end';
}
.a11y-card--wide .a11y-card__val {
  margin: 0;
}
.a11y-card--wide .a11y-chev {
  grid-area: end;
  grid-row: 1 / -1;
}
.a11y-readpage {
  min-height: 46px;
}
.a11y-keys dl {
  padding: 2px 16px;
  border: 0;
  border-radius: 12px;
}
.a11y-keys dl > div {
  border-bottom-color: var(--aw-sep);
}
.a11y-foot {
  background: var(--aw-canvas);
  border-top-color: var(--aw-sep);
}
.a11y-btn {
  min-height: 44px;
  font-size: 14.5px;
}
@media (max-width: 599px) {
  .a11y-panel,
  .a11y-root--bar .a11y-panel {
    --sheet: 1;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    border: 0;
    animation: none;
    box-shadow: 0 -10px 40px -12px rgba(11, 13, 18, 0.35);
  }
  .a11y-panel.is-dragging {
    user-select: none;
  }
  .a11y-head {
    padding-top: 24px;
    touch-action: none;
  }
  .a11y-head::before {
    top: 8px;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    background: rgba(60, 60, 67, 0.3);
  }
  .a11y-scrim {
    background: rgba(0, 0, 0, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .a11y-switch i,
  .a11y-card::before {
    transition: none !important;
  }
}
html:is(.a11y-motion, .a11y-focusmode) .a11y-ui :is(.a11y-switch i, .a11y-card::before) {
  transition: none !important;
}
@media (forced-colors: active) {
  .a11y-card:not(:has(.a11y-dots)):not(.a11y-card--wide)::after {
    border: 1px solid ButtonText;
  }
  .a11y-card[aria-pressed='true']:not(:has(.a11y-dots)):not(.a11y-card--wide)::after {
    background: Highlight;
  }
}
/* on/off rows: the switch shows the state, so no "On/Off" words beside it (aria-pressed carries it) */
.a11y-card:not(:has(.a11y-dots)):not(.a11y-card--wide) .a11y-card__val {
  display: none;
}

/* ============================================================ depth off in the contrast profiles
   High contrast and dark: the gradient, gloss and glass tokens turn into flat colour
   (gradient text is already gated on html:not([data-a11y-contrast]) in base.css / site.css). */
html[data-a11y-contrast] {
  --grad-accent: none;
  --grad-accent-soft: none;
  --grad-ink: none;
  --grad-surface: none;
  --grad-canvas: none;
  --grad-dark: none;
  --grad-accent-text: none;
  --hi-inset: 0 0 #0000;
  --hi-inset-soft: 0 0 #0000;
  --lo-inset: 0 0 #0000;
  --ring-halo: 0 0 #0000;
  --glass-blur: none;
  --glass-edge: 0 0 #0000;
}
html[data-a11y-contrast='high'] {
  --glass-fill: #ffffff;
  --glass-fill-strong: #ffffff;
  --glass-shadow: 0 0 0 1px var(--hair-2);
}
html[data-a11y-contrast='dark'] {
  --glass-fill: rgba(17, 21, 27, 0.96);
  --glass-fill-strong: rgba(17, 21, 27, 0.96);
  --glass-shadow: 0 0 0 1px var(--hair);
}
/* dark: the accent pill is light-on-dark ink like the other filled controls */
html[data-a11y-contrast='dark'] .btn-primary {
  --btn-bg: var(--accent-deep);
  --btn-fg: #0b0d12;
}
html[data-a11y-contrast='dark'] .btn-primary:hover:not(:disabled) {
  background-color: #c4d5ff;
}
html[data-a11y-contrast='dark'] .btn-arrow .arrow {
  background: #0b0d12;
  color: #fff;
}
html[data-a11y-contrast='dark'] :is(.ws-tile, .ws-tile__emo, .ws-opt__ic) {
  background: var(--paper);
}
html[data-a11y-contrast] .ws-tile__emo {
  box-shadow: 0 0 0 1px var(--hair);
}
html[data-a11y-contrast] .hero {
  background: var(--canvas);
}

/* voice picker polish (design review): quieter repeated play buttons, a one-line note, bigger phone targets */
.a11y-vp__play {
  opacity: 0.5;
  transition: opacity 120ms linear;
}
.a11y-vp__opt.is-active .a11y-vp__play,
.a11y-vp__play.is-playing,
.a11y-vp__play:hover {
  opacity: 1;
}
@media (hover: none) {
  .a11y-vp__play {
    opacity: 0.8;
  }
}
.a11y-vp__note p {
  display: inline;
}
.a11y-vp__note .a11y-vh {
  display: inline;
  margin: 0 0 0 4px;
}
.a11y-vp__note .a11y-vh summary {
  display: inline;
  min-height: 0;
}
.a11y-vp__note .a11y-vh[open] .a11y-vh__body {
  display: block;
  margin-top: 6px;
}
@media (max-width: 599px) {
  .a11y-seg button {
    min-height: 40px;
    min-width: 56px;
  }
}