html { font-size: calc(100% * var(--a11y-scale, 1)); }

.a11y { position: fixed; top: 46%; left: 0; z-index: 45; }
.a11y__toggle {
  display: grid; place-items: center; width: 46px; height: 50px; padding: 0;
  border: 2px solid var(--white); border-left: 0; border-radius: 0 12px 12px 0;
  background: var(--violet); color: var(--white); cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(24, 10, 40, .6);
}
.a11y__toggle svg { width: 28px; height: 28px; }
.a11y__toggle:hover { background: var(--plum); }
.a11y__panel {
  position: absolute; bottom: -120px; left: 54px;
  width: min(320px, calc(100vw - 66px)); max-height: calc(100vh - 110px); overflow-y: auto;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--white); color: var(--ink);
  box-shadow: 0 30px 60px -24px rgba(18, 8, 30, .6);
  font-family: var(--body); font-size: 1rem; line-height: 1.3;
}
.a11y__panel[hidden] { display: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.a11y__head h2 { font-size: 1.1875rem; font-weight: 800; color: var(--plum); outline: 0; }
.a11y__close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--plum); cursor: pointer; }
.a11y__close svg { width: 18px; height: 18px; }
.a11y__size { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 6px; border-radius: 12px; background: var(--mist-50); }
.a11y__size button { min-width: 48px; min-height: 40px; border: 1px solid var(--lilac); border-radius: 9px; background: var(--white); color: var(--plum); font-family: var(--head); font-weight: 800; cursor: pointer; }
.a11y__size span { font-weight: 700; color: var(--plum); }
.a11y__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a11y__grid button {
  min-height: 52px; padding: 8px; border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--white); color: var(--plum); font-family: var(--body); font-size: 1rem; font-weight: 700; cursor: pointer;
}
.a11y__grid button:hover { border-color: var(--violet); }
.a11y__grid button[aria-pressed="true"] { border-color: var(--plum); background: var(--plum); color: var(--white); }
.a11y__link { display: block; margin-top: 12px; color: var(--violet); font-weight: 700; text-align: center; }

@media (max-width: 980px) {
  .a11y { top: 38%; }
  .a11y__panel { bottom: auto; top: -130px; }
}

/* Applied to the whole page */
html.a11y-gray { filter: grayscale(1); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; }
html.a11y-font, html.a11y-font * { font-family: Arial, "Arial Hebrew", sans-serif !important; }
html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing dd, html.a11y-spacing summary, html.a11y-spacing td {
  line-height: 2 !important; letter-spacing: .05em !important; word-spacing: .12em !important;
}
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1.500' d='M4 2l15 12h-8l5 8-3 1.500-5-8L4 21z'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.a11y-contrast body,
html.a11y-contrast body *:not(svg):not(svg *):not(img):not(canvas) {
  background: #000 !important; color: #fff !important; border-color: #fff !important;
  box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important;
}
html.a11y-contrast a, html.a11y-contrast a * { color: #ff0 !important; }
html.a11y-contrast button[aria-pressed="true"] { background: #ff0 !important; color: #000 !important; }
html.a11y-contrast .q-opt[aria-pressed="true"] { outline: 3px solid #ff0; }
html.a11y-contrast .burger span, html.a11y-contrast .quiz__progress li { background: #fff !important; }
html.a11y-contrast .quiz__progress li.is-on { background: #ff0 !important; }
html.a11y-contrast .quiz__stage { display: none; }
html.a11y-contrast .quiz__shell { grid-template-columns: minmax(0, 1fr); }