:root {
  --a11y-color-text: #111111;
  --a11y-color-text-muted: #444444;
  --a11y-color-background: #ffffff;
  --a11y-color-surface: #f3f3f3;
  --a11y-color-border: #767676;
  --a11y-color-border-strong: #111111;
  --a11y-color-focus: #111111;
  --a11y-color-inverse: #ffffff;
  --a11y-color-shadow: rgba(0, 0, 0, 0.16);
  --a11y-radius-sm: 0.25rem;
  --a11y-radius-md: 0.5rem;
  --a11y-space-1: 0.25rem;
  --a11y-space-2: 0.5rem;
  --a11y-space-3: 0.75rem;
  --a11y-space-4: 1rem;
  --a11y-space-5: 1.5rem;
  --a11y-space-6: 2rem;
  --a11y-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --a11y-font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --a11y-shadow: 0 0.5rem 1rem var(--a11y-color-shadow);
}

.a11y-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.a11y-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  padding: var(--a11y-space-3) var(--a11y-space-4);
  background: var(--a11y-color-text);
  color: var(--a11y-color-inverse);
  text-decoration: none;
  z-index: 1000;
}

.a11y-skip-link:focus {
  transform: translateY(0);
}

.a11y-button,
.a11y-field,
.a11y-select,
.a11y-combobox__input,
.a11y-switch,
.a11y-pagination__link,
.a11y-menu-button__trigger,
.a11y-menu-button__item,
.a11y-tabs__tab,
.a11y-accordion__trigger,
.a11y-disclosure,
.a11y-tree [role="treeitem"] {
  font: inherit;
}

.a11y-button,
.a11y-pagination__link,
.a11y-menu-button__trigger,
.a11y-menu-button__item,
.a11y-tabs__tab,
.a11y-accordion__trigger,
.a11y-disclosure,
.a11y-switch,
.a11y-tree [role="treeitem"] {
  border: 2px solid var(--a11y-color-border-strong);
  background: var(--a11y-color-background);
  color: var(--a11y-color-text);
}

.a11y-button,
.a11y-pagination__link,
.a11y-menu-button__trigger,
.a11y-menu-button__item,
.a11y-tabs__tab,
.a11y-accordion__trigger,
.a11y-disclosure,
.a11y-switch {
  min-height: 2.75rem;
}

.a11y-button,
.a11y-menu-button__trigger,
.a11y-disclosure,
.a11y-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a11y-space-2);
  padding: 0.625rem 1rem;
  border-radius: var(--a11y-radius-md);
  text-decoration: none;
  cursor: pointer;
}

.a11y-button:hover,
.a11y-button:active,
.a11y-button[aria-pressed="true"],
.a11y-button--secondary,
.a11y-pagination__link[aria-current="page"],
.a11y-tabs__tab[aria-selected="true"],
.a11y-accordion__trigger[aria-expanded="true"],
.a11y-disclosure[aria-expanded="true"],
.a11y-menu-button__item:hover,
.a11y-menu-button__item:focus-visible,
.a11y-tree [role="treeitem"][aria-current="true"] {
  background: var(--a11y-color-text);
  color: var(--a11y-color-inverse);
}

.a11y-button--ghost {
  background: transparent;
}

.a11y-button[disabled],
.a11y-field:disabled,
.a11y-select:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.a11y-button:focus-visible,
.a11y-field:focus-visible,
.a11y-select:focus-visible,
.a11y-combobox__input:focus-visible,
.a11y-pagination__link:focus-visible,
.a11y-menu-button__trigger:focus-visible,
.a11y-menu-button__item:focus-visible,
.a11y-tabs__tab:focus-visible,
.a11y-accordion__trigger:focus-visible,
.a11y-disclosure:focus-visible,
.a11y-switch:focus-visible,
.a11y-tree [role="treeitem"]:focus-visible,
.a11y-tooltip__trigger:focus-visible {
  outline: 0.1875rem solid var(--a11y-color-focus);
  outline-offset: 0.1875rem;
}

.a11y-field,
.a11y-select,
.a11y-combobox__input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 2px solid var(--a11y-color-border-strong);
  border-radius: var(--a11y-radius-md);
  background: var(--a11y-color-background);
  color: var(--a11y-color-text);
}

.a11y-field[aria-invalid="true"],
.a11y-select[aria-invalid="true"],
.a11y-combobox__input[aria-invalid="true"] {
  border-width: 3px;
}

.a11y-fieldset {
  margin: 0;
  padding: var(--a11y-space-4);
  border: 2px solid var(--a11y-color-border-strong);
  border-radius: var(--a11y-radius-md);
}

.a11y-legend,
.a11y-label {
  font-weight: 700;
  color: var(--a11y-color-text);
}

.a11y-control-list {
  display: grid;
  gap: var(--a11y-space-3);
}

.a11y-check,
.a11y-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--a11y-space-2);
  color: var(--a11y-color-text);
}

.a11y-card,
.a11y-alert,
.a11y-toast,
.a11y-table,
.a11y-accordion,
.a11y-tabs,
.a11y-dialog__panel,
.a11y-combobox__listbox,
.a11y-menu-button__menu,
.a11y-code {
  background: var(--a11y-color-background);
  border: 2px solid var(--a11y-color-border-strong);
  border-radius: var(--a11y-radius-md);
}

.a11y-card,
.a11y-alert,
.a11y-toast,
.a11y-code {
  padding: var(--a11y-space-4);
}

.a11y-card {
  color: var(--a11y-color-text);
}

.a11y-alert,
.a11y-toast {
  border-left-width: 0.5rem;
}

.a11y-alert__title,
.a11y-card__title,
.a11y-dialog__title {
  margin: 0 0 var(--a11y-space-2);
}

.a11y-breadcrumb,
.a11y-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--a11y-space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.a11y-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-left: var(--a11y-space-2);
}

.a11y-breadcrumb__link,
.a11y-pagination__link,
.a11y-card a,
.a11y-alert a,
.a11y-table a,
.a11y-code a {
  color: var(--a11y-color-text);
  text-underline-offset: 0.15em;
}

.a11y-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--a11y-radius-md);
}

.a11y-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.a11y-table caption {
  padding: var(--a11y-space-4);
  text-align: left;
  font-weight: 700;
}

.a11y-table th,
.a11y-table td {
  padding: var(--a11y-space-3) var(--a11y-space-4);
  border-top: 1px solid var(--a11y-color-border);
  text-align: left;
  vertical-align: top;
}

.a11y-table thead th {
  background: var(--a11y-color-surface);
}

.a11y-accordion {
  overflow: hidden;
}

.a11y-accordion__heading {
  margin: 0;
}

.a11y-accordion__trigger {
  width: 100%;
  justify-content: space-between;
  border-width: 0 0 2px;
  border-radius: 0;
}

.a11y-accordion__trigger::after,
.a11y-disclosure::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-right: 0.125rem solid currentColor;
  border-bottom: 0.125rem solid currentColor;
  transform: rotate(45deg);
  flex: none;
}

.a11y-accordion__trigger[aria-expanded="true"]::after,
.a11y-disclosure[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

.a11y-accordion__panel,
.a11y-disclosure__panel,
.a11y-tabs__panel,
.a11y-dialog__body {
  padding: var(--a11y-space-4);
}

.a11y-disclosure {
  justify-content: space-between;
  width: 100%;
}

.a11y-tabs {
  overflow: hidden;
}

.a11y-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a11y-space-2);
  padding: var(--a11y-space-3);
  border-bottom: 2px solid var(--a11y-color-border-strong);
  background: var(--a11y-color-surface);
}

.a11y-tabs__tab {
  border-radius: var(--a11y-radius-sm);
  padding: 0.625rem 0.875rem;
  cursor: pointer;
}

.a11y-dialog {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--a11y-space-4);
  background: rgba(17, 17, 17, 0.7);
  z-index: 1000;
}

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

.a11y-dialog__panel {
  width: min(100%, 40rem);
  max-height: calc(100vh - 2 * var(--a11y-space-4));
  overflow: auto;
  box-shadow: var(--a11y-shadow);
}

.a11y-dialog__header,
.a11y-dialog__footer {
  padding: var(--a11y-space-4);
  border-bottom: 1px solid var(--a11y-color-border);
}

.a11y-dialog__footer {
  border-top: 1px solid var(--a11y-color-border);
  border-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--a11y-space-2);
}

.a11y-dialog-open,
.a11y-dialog-open body {
  overflow: hidden;
}

.a11y-menu-button {
  position: relative;
  display: inline-block;
}

.a11y-menu-button__menu {
  position: absolute;
  top: calc(100% + var(--a11y-space-2));
  left: 0;
  min-width: 14rem;
  padding: var(--a11y-space-2);
  list-style: none;
  margin: 0;
  box-shadow: var(--a11y-shadow);
  z-index: 10;
}

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

.a11y-menu-button__item {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: var(--a11y-radius-sm);
}

.a11y-switch {
  justify-content: space-between;
  width: 4rem;
  padding: 0.25rem;
  border-radius: 999px;
}

.a11y-switch::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--a11y-color-text);
  transform: translateX(0);
}

.a11y-switch[aria-checked="true"] {
  background: var(--a11y-color-text);
  color: var(--a11y-color-inverse);
}

.a11y-switch[aria-checked="true"]::after {
  background: var(--a11y-color-background);
  transform: translateX(1.25rem);
}

.a11y-tooltip {
  position: absolute;
  max-width: 20rem;
  padding: var(--a11y-space-2) var(--a11y-space-3);
  background: var(--a11y-color-text);
  color: var(--a11y-color-inverse);
  border-radius: var(--a11y-radius-sm);
  box-shadow: var(--a11y-shadow);
}

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

.a11y-combobox {
  position: relative;
}

.a11y-combobox__listbox {
  position: absolute;
  top: calc(100% + var(--a11y-space-1));
  right: 0;
  left: 0;
  max-height: 16rem;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: var(--a11y-space-1);
  box-shadow: var(--a11y-shadow);
  z-index: 10;
}

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

.a11y-combobox__option {
  padding: 0.625rem 0.75rem;
  border-radius: var(--a11y-radius-sm);
  cursor: pointer;
}

.a11y-combobox__option:hover,
.a11y-combobox__option.is-active,
.a11y-combobox__option[aria-selected="true"] {
  background: var(--a11y-color-text);
  color: var(--a11y-color-inverse);
}

.a11y-tree,
.a11y-tree [role="group"] {
  list-style: none;
  margin: 0;
  padding-left: var(--a11y-space-4);
}

.a11y-tree {
  padding-left: 0;
}

.a11y-tree [role="treeitem"] {
  display: block;
  width: 100%;
  margin-bottom: var(--a11y-space-2);
  padding: 0.625rem 0.875rem;
  border-radius: var(--a11y-radius-md);
  text-align: left;
  cursor: pointer;
}

.a11y-tree [role="group"][hidden] {
  display: none;
}

.a11y-code {
  font-family: var(--a11y-font-mono);
  overflow: auto;
}

.a11y-helper-text,
.a11y-error {
  margin-top: var(--a11y-space-2);
  color: var(--a11y-color-text-muted);
}

.a11y-error[role="alert"] {
  color: var(--a11y-color-text);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}