/* Shared base: local fonts, colour tokens, reset. No external resources. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg: #05090d;
  --surface: #0b1318;
  --surface-2: #111c22;
  --line: rgba(160, 220, 230, 0.14);
  --text: #e6f1f3;
  --muted: #8aa0a8;
  --cyan: #22d3ee;
  --green: #34e89e;
  --amber: #fbbf24;
  --coral: #fb5c7c;
  /* nucleotide colours: A green, C cyan, G amber, T coral */
  --A: var(--green);
  --C: var(--cyan);
  --G: var(--amber);
  --T: var(--coral);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* language toggle, shared look */
.lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-family: var(--mono); }
.lang button { padding: 4px 10px; border-radius: 999px; color: var(--muted); }
.lang button[aria-pressed="true"] { background: rgba(34, 211, 238, 0.16); color: var(--text); }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

.icon { width: 1.15em; height: 1.15em; flex: none; }

.back { position: fixed; left: 12px; bottom: 12px; z-index: 50; font: 12px var(--mono); color: var(--muted); text-decoration: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(5, 9, 13, 0.7); }
.back:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}