@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  :where(:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
}

@layer base {
  @font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  }

  @font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  }

  html {
    background-color: var(--color-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-attachment: fixed;
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: var(--leading-normal);
    font-feature-settings: "cv11", "ss01", "ss03";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3, h4 {
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }
  h4 { font-size: var(--text-md); }

  p {
    line-height: var(--leading-relaxed);
    color: var(--color-fg);
  }

  a {
    color: var(--color-accent);
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-out);
  }

  a:hover { color: var(--color-accent-hover); text-decoration: underline; }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  code {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    padding: 0.1em 0.35em;
  }

  pre {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-subtle);
    border-radius: 6px;
    padding: var(--space-4);
    overflow-x: auto;
    line-height: var(--leading-snug);
  }

  pre code { background: none; border: 0; padding: 0; }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-12) 0;
  }

  blockquote {
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-4);
    color: var(--color-fg-muted);
  }

  ::selection {
    background: var(--color-accent);
    color: var(--color-bg);
  }

  @media print {
    .site-nav, .site-footer, .labs-frame, .featured-list .badge, .chapter-rail {
      display: none !important;
    }
    html { background: #fff; }
    body { background: #fff; color: #000; font-size: 11pt; }
    a { color: #000; text-decoration: underline; }
    .page { padding: 1rem; display: block; }
    h1, h2, h3 { page-break-after: avoid; }
  }
}