:root {
  --bg: #14161b;
  --bg2: #181b21;
  --card: #1d212a;
  --border: #2c313d;
  --fg: #d9d7ce;
  --dim: #8d92a0;
  --accent: #a8c9b4;
  --accent2: #93b5a2;
  --red: #d99a9a;
  --amber: #cbb893;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  min-height: 100vh;
}
a { color: #aebcd9; text-decoration: none; }
a:hover { color: #ccd6ec; }
code, pre, .mono { font-family: var(--mono); }

/* ---------- layout ---------- */
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
section { margin: 4rem 0; }

/* ---------- nav ---------- */
nav {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: .9rem;
}
nav .brand { font-weight: 700; color: var(--fg); font-size: 1.05rem; }
nav .brand .dot { color: var(--accent); }
nav a { color: var(--dim); } nav a:hover { color: var(--fg); }
nav .spacer { flex: 1; }

/* ---------- hero ---------- */
.hero { padding: 5rem 0 3rem; }
.hero .kicker {
  font-family: var(--mono); font-size: .85rem; color: var(--accent);
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.03em;
}
.hero h1 .accent { color: var(--accent); }
.hero .sub {
  margin-top: 1.4rem; max-width: 42rem; font-size: 1.15rem; color: var(--dim);
}
.hero .cta { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.btn {
  display: inline-block; font-family: var(--mono); font-size: .95rem;
  padding: .75rem 1.5rem; border-radius: 8px; font-weight: 600;
  border: 1px solid var(--border); color: var(--fg); background: var(--card);
  cursor: pointer; transition: all .15s;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.btn.primary { background: var(--accent2); border-color: var(--accent2); color: #14161b; }
.btn.primary:hover { background: #b3d4bf; }

/* ---------- terminal ---------- */
.term {
  margin-top: 3rem; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.term .titlebar {
  display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.term .titlebar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.term .titlebar i:nth-child(1) { background: #ff5f57; }
.term .titlebar i:nth-child(2) { background: #febc2e; }
.term .titlebar i:nth-child(3) { background: #28c840; }
.term .titlebar span { margin-left: .5rem; font-family: var(--mono); font-size: .8rem; color: var(--dim); }
.term pre {
  padding: 1.2rem 1.4rem; height: 14rem; overflow-y: auto; font-size: .88rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-all; color: #c6c8cf;
}
.term .prompt { color: var(--accent); }
.term .out { color: var(--dim); }
.term .bad { color: var(--red); }
.cursor { display: inline-block; width: .55em; height: 1.1em; background: var(--fg); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.2rem 1.4rem;
}
.stat b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--fg); }
.stat span { font-size: .8rem; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- specimen cards ---------- */
.catname {
  font-family: var(--mono); font-size: .8rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .15em; margin: 2.5rem 0 1rem;
  border-bottom: 1px solid var(--border); padding-bottom: .5rem;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: .9rem; }
.card {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.2rem; transition: all .15s; position: relative;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.card .fid { font-family: var(--mono); font-size: .78rem; color: var(--dim); }
.card h3 { font-size: 1rem; margin: .25rem 0 .4rem; color: var(--fg); }
.card .meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pill {
  font-family: var(--mono); font-size: .68rem; padding: .15rem .5rem;
  border-radius: 4px; background: #262b36; color: var(--dim);
}
.pill.real { background: #332f27; color: #d6bfa0; }
.pill.sev-fatal { background: #352527; color: #d9a3a3; }
.pill.sev-severe { background: #332a27; color: #d4ac9a; }
.pill.sev-moderate { background: #2f2c25; color: var(--amber); }
.pill.sev-trivial { background: #272c38; color: var(--dim); }
.card .replay {
  position: absolute; top: 1rem; right: 1rem; color: var(--accent);
  font-size: 1.1rem; font-family: var(--mono);
}

/* ---------- how ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 1rem; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.4rem; }
.step .n { font-family: var(--mono); font-size: 2rem; font-weight: 800; color: var(--accent); }
.step h3 { margin: .5rem 0 .4rem; }
.step p { font-size: .9rem; color: var(--dim); }

/* ---------- code blocks ---------- */
pre.code {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 1.2rem 1.4rem; font-size: .86rem; overflow-x: auto;
}
pre.code .c { color: var(--dim); }
pre.code .s { color: #b3c5e6; }
h2.sec { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; }

/* ---------- filters ---------- */
.filters {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-bottom: 1.6rem; font-family: var(--mono); font-size: .78rem;
}
.flabel { color: var(--dim); margin: 0 .3rem 0 .6rem; }
.flabel:first-child { margin-left: 0; }
.fchip {
  font-family: var(--mono); font-size: .75rem; padding: .2rem .65rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--dim); cursor: pointer;
  transition: all .15s;
}
.fchip:hover { border-color: var(--accent); color: var(--fg); }
.fchip.active { background: var(--accent2); border-color: var(--accent2); color: #14161b; }
.catname:empty { display: none; }
.sortform { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .78rem; margin-left: 1rem; vertical-align: middle; }
.sortform select {
  font-family: var(--mono); font-size: .78rem; color: var(--fg);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 6px; padding: .3rem .6rem;
}
.sortform select:focus { outline: 1px solid var(--accent); }

/* ---------- report ---------- */
.grade .letter { font-size: 2.4rem; font-weight: 800; color: var(--accent); }
table.report { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.report th, table.report td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
table.report th { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; color: var(--dim); }
tr.pass td { color: #b0c9a4; } tr.fail td { color: #d9a3a3; }

/* ---------- specimen page ---------- */
.page-header { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.page-header .fid { font-family: var(--mono); color: var(--accent); }
.anatomy-body { white-space: pre-wrap; font-size: 1.02rem; }
.pill.test { background: #26303a; color: #9db8cc; }
.pill.src { background: #2b2f28; color: #b9c4a4; cursor: pointer; }
.pill.src:hover { color: var(--accent); }
.use-case { color: var(--dim); margin-top: .6rem; }
.tests-line { display: flex; gap: .4rem; flex-wrap: wrap; }
.citation { color: var(--dim); font-size: .9rem; margin-top: 1rem; }
.sigbox { font-size: .8rem; }

.secsub { color: var(--dim); margin: -0.5rem 0 1.2rem; }

/* ---------- use cases ---------- */
.uses { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .9rem; }
.use {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.1rem 1.3rem; color: var(--fg);
  transition: all .15s;
}
.use:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.use h3 { font-size: 1rem; margin-bottom: .4rem; }
.use p { font-size: .87rem; color: var(--dim); }

/* ---------- hall of fame ---------- */
.grid.fame .card { border-color: #3a3440; }
.grid.fame .card:hover { border-color: var(--amber); }

/* ---------- footer ---------- */
footer {
  margin-top: 5rem; padding: 2rem 0; border-top: 1px solid var(--border);
  color: var(--dim); font-size: .85rem; font-family: var(--mono);
}
.fcols { display: flex; gap: 4rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.fcols h4 { color: var(--fg); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.fcols a { display: block; padding: .15rem 0; }
.ftail { color: var(--dim); }
.back { font-family: var(--mono); font-size: .85rem; }

/* ---------- docs ---------- */
.toc {
  float: right; width: 200px; margin: 0 0 2rem 2rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.2rem; font-family: var(--mono); font-size: .8rem;
}
.toc h4 { color: var(--fg); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.toc a { display: block; padding: .2rem 0; color: var(--dim); }
.toc a:hover { color: var(--fg); }
.docs section { margin: 3rem 0; }
.docs h3.sub { font-family: var(--mono); font-size: 1rem; color: var(--accent); margin: 1.5rem 0 .5rem; }
.doc { max-width: 46rem; margin: .8rem 0; }
.doc-table { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: .88rem; margin: 1rem 0; }
.doc-table th { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; color: var(--dim); text-align: left; }
.doc-table th, .doc-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
.doc-table td code { color: var(--accent); }
@media (max-width: 640px) { .toc { float: none; width: auto; margin: 0 0 1.5rem; } }

@media (max-width: 640px) {
  .wrap { padding: 0 1rem; }
  .hero { padding: 3rem 0 2rem; }
  .hero h1 { font-size: 2.2rem; }
  .term pre { font-size: .78rem; height: 12rem; }
  .grid { grid-template-columns: 1fr; }
  .uses { grid-template-columns: 1fr; }
  .fcols { gap: 2rem; }
  nav { gap: 1rem; font-size: .82rem; }
  table.report { font-size: .8rem; }
}

/* headline exhibit */
.star { border: 1px solid var(--sev-fatal, #d99a9a); border-radius: 10px; padding: 1.5rem; margin-bottom: 2.5rem; background: linear-gradient(135deg, rgba(217,154,154,.06), transparent 60%); }
.star-kicker { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--sev-fatal, #d99a9a); margin-bottom: .9rem; }
.star-body { display: flex; gap: 2rem; align-items: flex-start; }
.star-text { flex: 1; }
.star-text h2 { margin: 0 0 .6rem; }
.star-hook { color: var(--dim); line-height: 1.6; max-width: 46rem; }
.star-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.star-card { min-width: 13rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.star-card .fid { color: var(--dim); font-size: .75rem; }
.star-stat b { font-size: 1.4rem; color: var(--fg); display: block; }
.star-stat span { font-size: .72rem; color: var(--dim); }
@media (max-width: 700px) { .star-body { flex-direction: column; } .star-card { min-width: 0; width: 100%; } }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--dim); }
.btn.ghost:hover { color: var(--fg); border-color: var(--accent); }