*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: dark;
  --background: #171717;
  --text: #f4f4f1;
  --muted: #b4b4ae;
  --nav: #d6d6d0;
  --faint: #8b8b85;
  --line: #373735;
  --line-strong: #565652;
  --link-hover: #f0a53a;
  --nav-height: 60px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
    sans-serif;
  --heading: "IBM Plex Sans", Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --background: #f6f6f3;
    --text: #181818;
    --muted: #5f5f5a;
    --nav: #888883;
    --faint: #70706b;
    --line: #deded8;
    --line-strong: #c3c3bc;
    --link-hover: #c56b10;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --background: #f6f6f3;
  --text: #181818;
  --muted: #5f5f5a;
  --nav: #888883;
  --faint: #70706b;
  --line: #deded8;
  --line-strong: #c3c3bc;
  --link-hover: #c56b10;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background);
}

body {
  min-width: 320px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--text);
  color: var(--background);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}

a:active {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 999;
  padding: 0.65rem 0.9rem;
  background: var(--text);
  color: var(--background);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}

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

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

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

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

@media (prefers-contrast: more) {
  :root {
    --muted: #d7d7d2;
    --nav: #ecece7;
    --faint: #b8b7b2;
    --line: #66645f;
    --line-strong: #aaa8a1;
    --link-hover: #f0c56a;
  }

  :focus-visible {
    outline-width: 3px;
  }

  :root[data-theme="light"] {
    --muted: #3f3f3c;
    --nav: #5c5c57;
    --faint: #52524e;
    --line: #999994;
    --line-strong: #555551;
    --link-hover: #a34f0c;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --muted: #3f3f3c;
    --nav: #5c5c57;
    --faint: #52524e;
    --line: #999994;
    --line-strong: #555551;
    --link-hover: #a34f0c;
  }
}