:root {
  /* Override these variables to theme the widget on another site. */
  --a11y-widget-accent: var(--secondary-bright);
  --a11y-widget-trigger-background: var(--surface-container-lowest);
  --a11y-widget-trigger-color: var(--on-surface);
  --a11y-widget-surface: var(--surface-container-lowest);
  --a11y-widget-surface-raised: var(--surface-container);
  --a11y-widget-text: var(--on-surface);
  --a11y-widget-text-muted: var(--on-surface-variant);
  --a11y-widget-outline: var(--on-surface-muted);
  --a11y-widget-focus: var(--secondary-bright);
  --a11y-widget-offset: var(--space-lg);
  --a11y-widget-size: calc(var(--space-xl) + var(--space-lg));
  --a11y-widget-panel-width: var(--book-detail-cover-max);
  --a11y-widget-panel-max-height: 36rem;
  --a11y-text-scale-large: 112.5%;
  --a11y-text-scale-larger: 125%;
}

.a11y-preferences {
  position: fixed;
  right: max(var(--a11y-widget-offset), env(safe-area-inset-right));
  bottom: max(var(--a11y-widget-offset), env(safe-area-inset-bottom));
  z-index: 1050;
  color: var(--a11y-widget-text);
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
}

.a11y-preferences *,
.a11y-preferences *::before,
.a11y-preferences *::after {
  box-sizing: border-box;
}

.a11y-preferences__trigger {
  width: var(--a11y-widget-size);
  height: var(--a11y-widget-size);
  margin-left: auto;
  border: var(--rule-thin) solid var(--a11y-widget-outline);
  border-radius: 50%;
  background: var(--a11y-widget-trigger-background);
  color: var(--a11y-widget-trigger-color);
  box-shadow: 0 var(--space-sm) var(--space-xl) rgba(var(--shadow-rgb), 0.42);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color var(--duration-short) var(--transition-smooth), color var(--duration-short) var(--transition-smooth), transform var(--duration-short) var(--transition-smooth);
}

.a11y-preferences__trigger:hover,
.a11y-preferences__trigger[aria-expanded="true"] {
  background: var(--a11y-widget-surface-raised);
  color: var(--a11y-widget-accent);
}

.a11y-preferences__trigger:hover {
  transform: translateY(calc(var(--space-3xs) * -1));
}

.a11y-preferences__trigger svg {
  width: var(--space-xl);
  height: var(--space-xl);
}

.a11y-preferences__panel {
  position: absolute;
  right: 0;
  bottom: calc(var(--a11y-widget-size) + var(--space-sm));
  width: min(var(--a11y-widget-panel-width), calc(100vw - (var(--a11y-widget-offset) * 2)));
  max-height: min(var(--a11y-widget-panel-max-height), calc(100vh - (var(--a11y-widget-offset) * 3) - var(--a11y-widget-size)));
  overflow-y: auto;
  border: var(--rule-thin) solid var(--a11y-widget-outline);
  border-radius: var(--radius-btn);
  background: var(--a11y-widget-surface);
  box-shadow: 0 var(--space-lg) calc(var(--space-3xl) - var(--space-xs)) rgba(var(--shadow-rgb), 0.52);
}

.a11y-preferences__panel[hidden] {
  display: none;
}

.a11y-preferences__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--a11y-widget-surface-raised);
}

.a11y-preferences__title {
  color: var(--a11y-widget-text);
  font-family: 'Georgia', serif;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}

.a11y-preferences__close {
  width: calc(var(--space-xl) + var(--space-md));
  height: calc(var(--space-xl) + var(--space-md));
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--a11y-widget-text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: var(--text-xl);
  line-height: 1;
}

.a11y-preferences__close:hover {
  background: var(--a11y-widget-surface);
}

.a11y-preferences__content {
  padding: var(--space-lg);
}

.a11y-preferences__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: calc(var(--space-xl) + var(--space-lg));
  padding: var(--space-sm) 0;
}

.a11y-preferences__row + .a11y-preferences__row {
  border-top: var(--rule-thin) solid var(--a11y-widget-outline);
}

.a11y-preferences__label {
  color: var(--a11y-widget-text);
  font-size: var(--text-base);
  font-weight: 500;
}

.a11y-preferences__stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.a11y-preferences__step,
.a11y-preferences__toggle {
  min-width: calc(var(--space-xl) + var(--space-md));
  min-height: calc(var(--space-xl) + var(--space-md));
  border: var(--rule-thin) solid var(--a11y-widget-outline);
  border-radius: var(--radius-btn);
  background: var(--a11y-widget-surface-raised);
  color: var(--a11y-widget-text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.a11y-preferences__step:disabled {
  color: var(--a11y-widget-text-muted);
  cursor: default;
}

.a11y-preferences__amount {
  min-width: calc(var(--space-3xl) - var(--space-xs));
  color: var(--a11y-widget-text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.a11y-preferences__toggle {
  min-width: calc(var(--space-3xl) + var(--space-md));
  padding: var(--space-xs) var(--space-md);
}

.a11y-preferences__toggle[aria-pressed="true"] {
  border-color: var(--a11y-widget-accent);
  color: var(--a11y-widget-accent);
}

.a11y-preferences__footer {
  padding: 0 var(--space-lg) var(--space-lg);
}

.a11y-preferences__reset {
  width: 100%;
  min-height: calc(var(--space-xl) + var(--space-md));
  border: var(--rule-thin) solid var(--a11y-widget-outline);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--a11y-widget-text);
  cursor: pointer;
  font: inherit;
  font-weight: 500;
}

.a11y-preferences__reset:hover:not(:disabled) {
  background: var(--a11y-widget-surface-raised);
}

.a11y-preferences__reset:disabled {
  color: var(--a11y-widget-text-muted);
  cursor: default;
}

.a11y-preferences button:focus-visible {
  outline: var(--space-3xs) solid var(--a11y-widget-focus);
  outline-offset: var(--space-2xs);
}

.a11y-preferences__status {
  position: absolute;
  width: var(--rule-thin);
  height: var(--rule-thin);
  padding: 0;
  margin: calc(var(--rule-thin) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html[data-a11y-text-size="large"] {
  font-size: var(--a11y-text-scale-large);
}

html[data-a11y-text-size="larger"] {
  font-size: var(--a11y-text-scale-larger);
}

html[data-a11y-contrast="true"] {
  --surface: var(--surface-container-lowest);
  --surface-bright: var(--surface-container-lowest);
  --surface-container-low: var(--surface-container-lowest);
  --surface-container: var(--surface-container-lowest);
  --surface-container-high: var(--surface-container-highest);
  --on-surface-dim: var(--on-surface);
  --on-surface-variant: var(--on-surface);
  --on-surface-muted: var(--on-surface);
}

html[data-a11y-underline-links="true"] body a:not(.btn):not(.logo):not(.carousel-slide-link) {
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--space-2xs);
}

html[data-a11y-reduce-motion="true"] {
  scroll-behavior: auto;
}

html[data-a11y-reduce-motion="true"] a,
html[data-a11y-reduce-motion="true"] .site-header,
html[data-a11y-reduce-motion="true"] .nav-link::after,
html[data-a11y-reduce-motion="true"] .mobile-nav-toggle span,
html[data-a11y-reduce-motion="true"] .nav-menu,
html[data-a11y-reduce-motion="true"] .btn,
html[data-a11y-reduce-motion="true"] .book-cover,
html[data-a11y-reduce-motion="true"] .book-card,
html[data-a11y-reduce-motion="true"] .book-card-image,
html[data-a11y-reduce-motion="true"] .press-card,
html[data-a11y-reduce-motion="true"] .carousel-track,
html[data-a11y-reduce-motion="true"] .carousel-arrow,
html[data-a11y-reduce-motion="true"] .carousel-dot::after,
html[data-a11y-reduce-motion="true"] .a11y-preferences__trigger {
  transition: none;
}

html[data-a11y-reduce-motion="true"] .btn:hover,
html[data-a11y-reduce-motion="true"] .book-cover:hover,
html[data-a11y-reduce-motion="true"] .book-card:hover,
html[data-a11y-reduce-motion="true"] .book-card:hover .book-card-image,
html[data-a11y-reduce-motion="true"] .press-card:hover,
html[data-a11y-reduce-motion="true"] .a11y-preferences__trigger:hover {
  transform: none;
}

@media (max-width: 480px) {
  .a11y-preferences {
    --a11y-widget-offset: var(--space-md);
  }

  .a11y-preferences__panel {
    max-height: calc(100vh - (var(--a11y-widget-offset) * 3) - var(--a11y-widget-size));
  }
}

@media (forced-colors: active) {
  .a11y-preferences__trigger,
  .a11y-preferences__panel,
  .a11y-preferences__step,
  .a11y-preferences__toggle,
  .a11y-preferences__reset {
    border-color: ButtonText;
  }
}