@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --bg: #05060a;
  --bg2: #0a0e18;
  --bg3: #0f1628;
  --accent: #0a84ff;
  --accent2: #3b5bfd;
  --teal: #00f5d4;
  --violet: #a855f7;
  --white: #f0f4ff;
  --muted: #8b95ad;
  --card: rgba(15, 22, 40, 0.65);
  --border: rgba(255, 255, 255, 0.08);
  --glass: rgba(8, 12, 24, 0.55);
  --font-d: "Space Grotesk", system-ui, sans-serif;
  --font-b: "DM Sans", system-ui, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, monospace;
  --radius: 18px;
  --nav-h: 84px;
  --nav-h-s: 68px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-b);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.container {
  width: min(1200px, 92vw);
  margin-inline: auto;
}

.mono-label {
  font-family: var(--font-m);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

code {
  font-family: var(--font-m);
  font-size: 0.9em;
  color: var(--teal);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}