:root{
  --a11y-btn-size: 3em;
  --a11y-radius: 1em;
  --a11y-z: 2147483000;
  --a11y-shadow: 0 0.6em 1.4em rgba(0,0,0,.25);
  --a11y-bg: #ffffff;
  --a11y-text: #111;
  --a11y-border: rgba(0,0,0,.12);
}

/* Skip link */
.a11y-skip {
  position: fixed;
  top: 0.5em;
  inset-inline-start: 0.5em;
  background: #000;
  color: #fff;
  padding: .6em .9em;
  border-radius: .6em;
  transform: translateY(-200%);
  transition: transform .2s ease;
  z-index: var(--a11y-z);
  text-decoration: none;
}
.a11y-skip:focus { transform: translateY(0); outline: .2em solid #fff; }

/* Floating button */
.a11y-fab{
  position: fixed;
  inset-inline-start: 1em;
  bottom: 1em;
  width: var(--a11y-btn-size);
  height: var(--a11y-btn-size);
  border-radius: 50%;
  border: 0;
  background: #e53935;
  color: #fff;
  box-shadow: var(--a11y-shadow);
  z-index: var(--a11y-z);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.a11y-fab:focus-visible{ outline: .25em solid #fff; outline-offset: .25em; }

.a11y-fab svg{ width: 1.6em; height: 1.6em; }

/* Panel */
.a11y-panel{
  position: fixed;
  inset-inline-start: 1em;
  bottom: calc(1em + var(--a11y-btn-size) + .8em);
  width: min(22em, calc(100vw - 2em));
  background: var(--a11y-bg);
  color: var(--a11y-text);
  border: 1px solid var(--a11y-border);
  border-radius: var(--a11y-radius);
  box-shadow: var(--a11y-shadow);
  z-index: var(--a11y-z);
  padding: 1em;
  display: none;
}
.a11y-panel[aria-hidden="false"]{ display:block; }

.a11y-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1em;
  margin-bottom: .8em;
}
.a11y-title h2{
  font-size: 1.05em;
  margin:0;
}
.a11y-close{
  border: 1px solid var(--a11y-border);
  background: transparent;
  border-radius: .8em;
  padding: .35em .6em;
  cursor:pointer;
}
.a11y-close:focus-visible{ outline: .25em solid #000; outline-offset: .15em; }

.a11y-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .6em;
}
.a11y-action{
  border: 1px solid var(--a11y-border);
  background: #f7f7f7;
  color: #111;
  padding: .75em .8em;
  border-radius: .9em;
  cursor:pointer;
  font-size: 0.95em;
  text-align: start;
}
.a11y-action[aria-pressed="true"]{
  background: #111;
  color: #fff;
}
.a11y-action:focus-visible{ outline: .25em solid #111; outline-offset: .15em; }

.a11y-footer{
  margin-top: .8em;
  display:flex;
  gap:.6em;
}
.a11y-footer .a11y-action{ flex:1; text-align:center; }

/* Effects controlled by body classes */
body.a11y-font-plus{ font-size: calc(1em * var(--a11y-font-mult, 1.12)); }
body.a11y-font-plus-2{ font-size: calc(1em * var(--a11y-font-mult, 1.24)); }
body.a11y-font-plus-3{ font-size: calc(1em * var(--a11y-font-mult, 1.36)); }

body.a11y-contrast{
  filter: contrast(1.25) saturate(1.1);
}
body.a11y-invert{
  filter: invert(1) hue-rotate(180deg);
}
body.a11y-grayscale{
  filter: grayscale(1);
}
body.a11y-underline-links a{
  text-decoration: underline !important;
  text-underline-offset: .18em;
}
body.a11y-highlight-focus :focus{
  outline: .25em solid #ffcc00 !important;
  outline-offset: .15em !important;
}

/* Reduce motion helper */
body.a11y-reduce-motion *{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}