:root {
  --tmua-ink: 27, 26, 24;
  --tmua-paper: 239, 237, 231;
  --ink: var(--tmua-ink);
  --paper: var(--tmua-paper);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --tmua-ink: 230, 228, 223;
  --tmua-paper: 17, 17, 16;
  color-scheme: dark;
}

:root[data-theme] body {
  --ink: var(--tmua-ink);
  --paper: var(--tmua-paper);
  background-color: rgb(var(--paper));
  color: rgb(var(--ink));
}

html {
  min-height: 100%;
  background: rgb(var(--paper));
}

body {
  min-height: 100%;
}

body,
button,
input,
select,
textarea {
  font-family: 'Archivo', Arial, sans-serif;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(var(--ink));
  outline-offset: 4px;
}

[data-bg] {
  background-image: radial-gradient(rgba(var(--ink), .075) 1.1px, transparent 1.5px);
  background-position: center;
  background-size: 26px 26px;
}

[data-dots] {
  font-weight: 700;
  letter-spacing: .02em;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, transparent 31%);
  -webkit-mask-size: max(3.4px, .062em) max(3.4px, .062em);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, transparent 31%);
  mask-size: max(3.4px, .062em) max(3.4px, .062em);
}

:root[data-theme="light"] [data-dots] {
  font-weight: 900;
  letter-spacing: -.038em;
  -webkit-mask-image: none;
  mask-image: none;
}

[data-theme-toggle] {
  color: rgb(var(--ink));
}

.guide-header {
  background: rgb(var(--paper)) !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}