@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&display=swap');

:root {
  color-scheme: dark;
  --background: #0c0c0e;
  --text: #f0f0f2;
  --accent: #a995ed;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: var(--background); color: var(--text); isolation: isolate; }
#background { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
::selection { color: var(--background); background: var(--accent); }
.site-header { padding: 40px 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-size: 25px; font-weight: 600; letter-spacing: -1px; }
.wordmark > span { font-weight: 400; }
.wordmark .period { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.fallback { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; z-index: -1; color: var(--accent); opacity: 0.25; font: 700 min(34vw, 55vh, 440px) monospace; }

@media (max-width: 700px) {
  .site-header { padding: 28px 24px; }
  .wordmark { font-size: 23px; }
}