:root {
  --a11y-font-scale: 1;
}

html {
  font-size: 100%;
}

.a11y-widget {
  position: fixed;
  z-index: 99990;
  font-family: Arial, sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

.a11y-pos-x-right {
  right: var(--a11y-offset-x, 24px);
  align-items: flex-end;
}

.a11y-pos-x-left {
  left: var(--a11y-offset-x, 24px);
  align-items: flex-start;
}

.a11y-pos-y-bottom {
  bottom: var(--a11y-offset-y, 24px);
}

.a11y-pos-y-top {
  top: var(--a11y-offset-y, 24px);
}

.a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 20, 0.36);
  z-index: 1;
}

.a11y-reading-mask {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  height: 150px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 99996;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

.a11y-reading-guide {
  display: none;
  position: fixed;
  left: 0;
  width: 100vw;
  height: 2px;
  transform: translateY(-1px);
  pointer-events: none;
  z-index: 99996;
  background: #f43f5e;
}

html.a11y-reading-mask-active .a11y-reading-mask {
  display: block;
}

html.a11y-reading-guide-active .a11y-reading-guide {
  display: block;
}

.a11y-fab {
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 50%;
  background: var(--a11y-fab-bg, #43d67a);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(8, 18, 34, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.a11y-fab:hover {
  background: var(--a11y-fab-hover, #38b86a);
  transform: scale(1.05);
}

.a11y-fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.a11y-fab-icon svg {
  width: 28px;
  height: 28px;
}

.a11y-panel {
  width: var(--a11y-panel-width, 340px);
  max-width: calc(100vw - 24px);
  max-height: min(82vh, 760px);
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 36px rgba(6, 14, 28, 0.45);
  position: relative;
  z-index: 2;
}

.a11y-header {
  background: #43d67a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.a11y-header-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.a11y-header-title-text {
  font-size: 18px;
}

.a11y-title-icon {
  display: inline-flex;
  align-items: center;
}
.a11y-title-icon svg {
  width: 20px;
  height: 20px;
}

.a11y-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.a11y-theme-toggle,
.a11y-close {
  border: 0;
  background: transparent;
  color: inherit;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.a11y-content {
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.a11y-section h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
}

.a11y-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.a11y-btn {
  border-radius: 6px;
  min-height: 68px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  gap: 6px;
  cursor: pointer;
}

.a11y-btn-active {
  outline: 2px solid #43d67a;
  outline-offset: -2px;
  box-shadow: inset 0 0 0 2px rgba(67, 214, 122, 0.28);
  transform: translateY(-1px);
}

.a11y-theme-dark .a11y-btn-active {
  background: #4f5f7a;
  border-color: #6ee7b7;
}

.a11y-theme-light .a11y-btn-active {
  background: #dff4e7;
  border-color: #2f855a;
}

.a11y-btn-wide {
  grid-column: 1 / -1;
}

.a11y-btn-icon {
  font-size: 22px;
  line-height: 1;
}

.a11y-btn-label {
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
}

.a11y-reset {
  border: 0;
  border-radius: 10px;
  min-height: 50px;
  font-size: 30px;
  font-weight: 700;
  cursor: pointer;
}

.a11y-theme-dark .a11y-panel {
  background: #1d2940;
  color: #f5f7fb;
}

.a11y-theme-dark .a11y-section h3 {
  color: #7685a3;
}

.a11y-theme-dark .a11y-btn {
  background: #3a465b;
  border-color: #4a576f;
  color: #f5f7fb;
}

.a11y-theme-dark .a11y-btn:hover {
  background: #45526a;
}

.a11y-theme-dark .a11y-close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.a11y-theme-dark .a11y-content::-webkit-scrollbar {
  width: 6px;
}

.a11y-theme-dark .a11y-content::-webkit-scrollbar-thumb {
  background: #62708b;
  border-radius: 20px;
}

.a11y-theme-dark .a11y-reset {
  background: #552733;
  color: #f9c0c8;
  font-size: 16px;
}

.a11y-theme-light .a11y-panel {
  background: #f5f8ff;
  color: #1d2a40;
}

.a11y-theme-light .a11y-section h3 {
  color: #5f6f88;
}

.a11y-theme-light .a11y-btn {
  background: #ffffff;
  border-color: #ced7e8;
  color: #1d2a40;
}

.a11y-theme-light .a11y-btn:hover {
  background: #edf3ff;
}

.a11y-theme-light .a11y-close:hover {
  background: rgba(29, 42, 64, 0.12);
}

.a11y-theme-light .a11y-content::-webkit-scrollbar {
  width: 6px;
}

.a11y-theme-light .a11y-content::-webkit-scrollbar-thumb {
  background: #afbdd8;
  border-radius: 20px;
}

.a11y-theme-light .a11y-reset {
  background: #f4d6dc;
  color: #852f3c;
  font-size: 16px;
}

@media (max-width: 480px) {
  .a11y-panel {
    width: min(var(--a11y-panel-width, 340px), calc(100vw - 16px));
  }
}

html.a11y-monochrome {
  filter: grayscale(100%) !important;
}

html.a11y-high-saturation {
  filter: saturate(200%) !important;
}

html.a11y-low-saturation {
  filter: saturate(55%) !important;
}

html.a11y-dark-contrast {
  background: #000 !important;
}

html.a11y-dark-contrast body > *:not([data-a11y-widget]) {
  filter: invert(1) hue-rotate(180deg) contrast(1.28) brightness(0.78) !important;
}

html.a11y-dark-contrast body > *:not([data-a11y-widget]) :where(img, video, picture, canvas, svg, iframe) {
  filter: invert(1) hue-rotate(180deg) !important;
}

html.a11y-light-contrast {
  background: #fff !important;
  color: #0f172a !important;
}

html.a11y-light-contrast body > *:not([data-a11y-widget]) {
  filter: none !important;
  background-color: #fff !important;
  color: #0f172a !important;
}

html.a11y-light-contrast a {
  color: #0b57d0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html.a11y-light-contrast :where(button, input, textarea, select) {
  background-color: #fff !important;
  color: #0f172a !important;
  border-color: #64748b !important;
}

html.a11y-light-contrast body > *:not([data-a11y-widget]) :where(img, video, picture, canvas, svg, iframe) {
  filter: none !important;
}

html.a11y-readable-font,
html.a11y-readable-font * {
  font-family: Arial, Helvetica, sans-serif !important;
}

html.a11y-letter-spacing,
html.a11y-letter-spacing * {
  letter-spacing: 0.12em !important;
}

html.a11y-word-spacing,
html.a11y-word-spacing * {
  word-spacing: 0.28em !important;
}

html.a11y-line-spacing,
html.a11y-line-spacing * {
  line-height: 2 !important;
}

html.a11y-highlight-links a,
html.a11y-highlight-links button {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 3px !important;
  background-color: #ff059c47 !important;
}

html.a11y-highlight-headings :where(h1, h2, h3, h4, h5, h6) {
  outline: 2px solid #ef4444 !important;
  outline-offset: 2px !important;
  padding: 4px !important;
  border-radius: 6px !important;
}

html.a11y-large-cursor-black,
html.a11y-large-cursor-black * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="%23000" stroke="%23FFF" stroke-width="2" d="M4 2l16 11-7 2 4 7-3 2-4-7-5 4z"/></svg>') 4 2, auto !important;
}

html.a11y-large-cursor-white,
html.a11y-large-cursor-white * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="%23FFF" stroke="%23000" stroke-width="2" d="M4 2l16 11-7 2 4 7-3 2-4-7-5 4z"/></svg>') 4 2, auto !important;
}

html.a11y-stop-animations *,
html.a11y-stop-animations *::before,
html.a11y-stop-animations *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

.a11y-alt-text-label {
  display: block;
  background: #000;
  color: #ff0;
  padding: 4px 8px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  border: 2px dashed #ff0;
  margin-top: 6px;
  border-radius: 6px;
}