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

* {
  margin: 0;
  border-radius: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--ink);
  scrollbar-color: rgba(139, 92, 246, .45) transparent;
  scrollbar-width: thin;
}

body {
  min-height: 100vh;
  background: var(--ink);
  color: var(--text-body);
  font: 400 var(--size-body)/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
  background: var(--violet);
  color: #fff;
}

:focus-visible {
  outline: 1px solid var(--violet);
  outline-offset: 3px;
}

/* On the elements and not on a class, so that a select written in future is themed without anyone
   having to remember the class. Both declarations are load-bearing. The list a select drops down is
   the browser's own surface with no page behind it, so it needs a background that is opaque --- see
   --field-surface --- and `appearance: none` on the control means color-scheme will not colour the
   list for us. An <option> has no colour of its own anywhere else in these stylesheets, so without
   the second it falls back to the browser's black on the browser's white. */
select,
optgroup,
option {
  background-color: var(--field-surface);
  color: var(--text-heading);
}

/* A class that sets display: wins over the user agent's rule for [hidden], so a node hidden from
   script would otherwise stay on the page. Said once here rather than beside every component. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.noscript {
  padding: var(--page-padding);
  color: var(--text-body);
}

.micro {
  font: 400 var(--size-micro)/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-label);
}