:root {
  color-scheme: dark;
  --site-bg: #08080a;
  --site-fg: #ededee;
  --site-muted: #8f8f98;
  --site-accent: #ee7746;
  --site-accent-light: #f6a27c;
  --site-border: rgb(255 255 255 / 7%);
  --site-border-strong: rgb(255 255 255 / 10%);
  --site-button-bg: rgb(255 255 255 / 4%);
  --site-heading: linear-gradient(180deg, #fff 30%, rgb(255 255 255 / 48%));
  --site-panel: linear-gradient(180deg, #121214, #0b0b0d);
  --site-heading-glow: radial-gradient(closest-side, rgb(238 119 70 / 12%), transparent);
  --site-download-glow: radial-gradient(
    ellipse at 50% 130%,
    rgb(238 119 70 / 16%),
    transparent 65%
  );
  --site-preview-mask: linear-gradient(180deg, #000 42%, transparent 88%);
  --site-preview-fade: linear-gradient(180deg, transparent, #0b0b0d);
  --site-key-bg: linear-gradient(180deg, #26262a, #19191c);
  --site-key-accent-bg: linear-gradient(180deg, #2a211d, #1b1512);
  --site-key-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%), 0 0 0 1px rgb(255 255 255 / 7%), 0 3px 0 #040405;
  --site-key-accent-shadow:
    inset 0 1px 0 rgb(255 200 170 / 12%), 0 0 0 1px rgb(238 119 70 / 35%), 0 3px 0 #040405,
    0 0 22px -4px rgb(238 119 70 / 45%);
  --site-button-shadow: 0 0 0 1px rgb(255 255 255 / 20%), 0 10px 32px -10px rgb(255 255 255 / 40%);
  --site-icon-shadow: drop-shadow(0 18px 34px rgb(0 0 0 / 75%))
    drop-shadow(0 2px 4px rgb(0 0 0 / 50%));
  --site-wordmark: linear-gradient(180deg, rgb(255 255 255 / 9%), transparent 85%);
  --site-font: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --site-display-font: "Inter Tight", var(--site-font);
  --site-duration: 150ms;
  --site-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --site-duration: 0ms;
  }
}