@font-face { font-family: "JetBrainsMonoNL Nerd Font Mono"; src: url("../assets/fonts/JetBrainsMonoNLNerdFontMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrainsMonoNL Nerd Font Mono"; src: url("../assets/fonts/JetBrainsMonoNLNerdFontMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrainsMonoNL Nerd Font Mono"; src: url("../assets/fonts/JetBrainsMonoNLNerdFontMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root { --bg:#070d10; --fg:#e8f0f2; --muted:#9aafb6; --faint:#6d838c; --leaf:#6baa88; --teal:#5aa8a0; --border:color-mix(in oklab,#e8f0f2 12%,transparent); --font:"JetBrainsMonoNL Nerd Font Mono", ui-monospace, monospace; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; min-height:100dvh; background:linear-gradient(180deg,#05090b,#070d10 40%,#091317); color:var(--fg); font-family:var(--font); font-variant-ligatures:none; line-height:1.6; }
a { color: inherit; }
.text-max { width: min(100% - 2rem, 46rem); margin-inline: auto; }

.site-foot { border-top: 1px solid var(--border); padding: 1.25rem 1rem 2rem; color: var(--faint); font-size: 0.75rem; text-align: center; }
.site-foot a { color: var(--muted); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--leaf);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}
.model-jump {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--border);
}
.model-jump .text-max {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding-block: 0.6rem;
  font-size: 0.72rem;
}
.model-jump a { color: var(--teal); text-decoration: none; }
.model-jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-header { border-bottom:1px solid var(--border); }
.text-header .text-max { display:flex; justify-content:space-between; align-items:center; min-height:4rem; gap:1rem; }
.text-brand { text-decoration:none; display:flex; flex-direction:column; }
.text-brand small { color:var(--faint); font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; }
.back-link { color:var(--muted); font-size:0.8rem; text-decoration:none; }
.eyebrow { margin:2rem 0 0; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
h1 { margin:0.5rem 0 0; font-size:clamp(2rem,6vw,3.2rem); font-weight:500; letter-spacing:-0.04em; }
.lede { margin:1rem 0; color:var(--muted); max-width:38rem; }
.poke {
  margin: 1.1rem 0 0;
  max-width: 40rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.poke strong { color: var(--fg); font-weight: 500; }
.poke em, .clout { color: var(--leaf); font-style: normal; }
.links { font-size:0.8rem; color:var(--teal); }
.links a { color:var(--teal); }
.links .link-primary { color:var(--teal); font-weight:500; }
.links .link-sister { color:var(--muted); font-size:0.75rem; }
.picker { margin:2.5rem 0; padding-top:1.5rem; border-top:1px solid var(--border); scroll-margin-top: 3.25rem; }
.picker h2 { margin:0 0 0.35rem; font-size:1.1rem; font-weight:500; }
.picker h2 a { text-decoration:none; }
.picker h2 a:hover { text-decoration:underline; text-underline-offset:4px; }
.board-link { margin:0 0 1rem; font-size:0.78rem; color:var(--teal); }
.board-link a { color:var(--teal); }
h3 a { text-decoration:none; }
h3 a:hover { text-decoration:underline; text-underline-offset:3px; }
ol { list-style:none; padding:0; margin:0; display:grid; gap:1.25rem; }
.rank { font-size:0.72rem; color:var(--leaf); letter-spacing:0.04em; }
h3 { margin:0.25rem 0; font-size:1rem; font-weight:500; line-height:1.4; }
.why { margin:0.35rem 0; color:var(--muted); font-size:0.88rem; }
.meta { margin:0; font-size:0.68rem; color:var(--faint); }