@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("../fonts/anybody-roman-v13-8dfc02cc.woff2") format("woff2");
}

@font-face {
  font-family: "Anybody";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("../fonts/anybody-italic-v13-fa4b7398.woff2") format("woff2");
}

@font-face {
  font-family: "Azeret Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/azeret-mono-v21-20cbb538.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --color-ground: #d8d2c7;
  --color-surface: #e8e3da;
  --color-ink: #111319;
  --color-muted: #5b5a5e;
  --color-violet: #6739de;
  --color-violet-text: #6233d5;
  --color-on-violet: #fff;
  --color-cyan: #14cdbd;
  --color-line: color-mix(in srgb, var(--color-ink) 24%, transparent);
  --color-focus: var(--color-violet);
  --levitation-shadow: rgb(28 21 39 / 28%);
  --levitation-contact: rgb(28 21 39 / 38%);
  --levitation-halo: color-mix(in srgb, var(--color-violet) 34%, transparent);
  --levitation-halo-secondary: color-mix(in srgb, var(--color-cyan) 28%, transparent);
  --levitation-edge: rgb(255 255 255 / 62%);
  --font-sans: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Azeret Mono", "SFMono-Regular", Consolas, monospace;
  --content-max: 90rem;
  --page-gutter: clamp(1rem, 3.5vw, 4rem);
  --grid-gap: clamp(0.75rem, 1.8vw, 2rem);
  --radius-sm: 0.1875rem;
  --touch-target: 2.75rem;
  --header-height: 4.5rem;
  --duration-micro: 180ms;
  --duration-reveal: 380ms;
  --duration-morph: 720ms;
  --duration-fold: 960ms;
  --ease-morph: cubic-bezier(.22,1,.36,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ground: #21172a;
  --color-surface: #2c2037;
  --color-ink: #f3edf5;
  --color-muted: #b6aab9;
  --color-violet: #7c55f2;
  --color-violet-text: #9878ff;
  --color-cyan: #35d8c5;
  --color-line: color-mix(in srgb, var(--color-ink) 22%, transparent);
  --color-focus: var(--color-cyan);
  --levitation-shadow: rgb(4 2 8 / 52%);
  --levitation-contact: rgb(4 2 8 / 68%);
  --levitation-halo: color-mix(in srgb, var(--color-violet) 42%, transparent);
  --levitation-halo-secondary: color-mix(in srgb, var(--color-cyan) 30%, transparent);
  --levitation-edge: rgb(243 237 245 / 18%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-ground: #21172a;
    --color-surface: #2c2037;
    --color-ink: #f3edf5;
    --color-muted: #b6aab9;
    --color-violet: #7c55f2;
    --color-violet-text: #9878ff;
    --color-cyan: #35d8c5;
    --color-line: color-mix(in srgb, var(--color-ink) 22%, transparent);
    --color-focus: var(--color-cyan);
    --levitation-shadow: rgb(4 2 8 / 52%);
    --levitation-contact: rgb(4 2 8 / 68%);
    --levitation-halo: color-mix(in srgb, var(--color-violet) 42%, transparent);
    --levitation-halo-secondary: color-mix(in srgb, var(--color-cyan) 30%, transparent);
    --levitation-edge: rgb(243 237 245 / 18%);
  }
}