/* LLM Anatomy Atlas — academic journal visual system.
   Warm paper ground, serif headings, hairline rules, restrained oxblood accent. */

:root {
  --bg: #f8f6f1;
  --surface: #fffdf9;
  --ink: #21201b;
  --muted: #6f6a5c;
  --rule: #ddd6c6;
  --rule-strong: #b9b09a;
  --accent: #8c2f1b;
  --accent-soft: #f3e4de;
  --link: #1f4d5c;
  --head-bg: #f1ecdf;
  --chip-bg: #efe9da;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif KR", "Batang", "Noto Naskh Arabic", "Geeza Pro", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
code { font-family: var(--mono); font-size: 0.82em; background: var(--chip-bg); padding: 0.08em 0.35em; border-radius: 3px; word-break: break-all; }
.hide { display: none; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.sub { display: block; font-size: 0.72rem; color: var(--muted); font-family: var(--sans); }

.skip {
  position: absolute; inset-inline-start: -999px; top: 0; background: var(--accent); color: #fff;
  padding: 8px 14px; z-index: 100; font-family: var(--sans); font-size: 0.85rem;
}
.skip:focus { inset-inline-start: 8px; }

/* masthead */
.masthead { border-bottom: 3px double var(--rule-strong); background: var(--surface); }
.mast-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; padding-bottom: 10px; }
.brand-link { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 8px;
  font-weight: 900; font-size: 24px; color: var(--accent);
}
.brand-name { display: block; font-size: 1.28rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; }
.brand-tag { display: block; font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
[dir="rtl"] .brand-tag { letter-spacing: 0; }

.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none; cursor: pointer; font-family: var(--sans); font-size: 0.85rem;
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: 6px 12px; background: var(--bg);
  display: inline-flex; align-items: center; gap: 8px;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.caret { width: 0; height: 0; border-inline-start: 5px solid transparent; border-inline-end: 5px solid transparent; border-top: 6px solid var(--muted); display: inline-block; }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; min-width: 160px;
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 6px;
  display: grid; box-shadow: 0 8px 24px rgba(40, 34, 20, 0.12);
}
.lang-menu a { padding: 7px 10px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 0.9rem; }
.lang-menu a:hover { background: var(--head-bg); }
.lang-menu a.on { color: var(--accent); font-weight: 700; }

/* nav */
.nav { display: block; }
.nav-toggle { display: none; }
.navlinks { display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 4px 0 10px; }
.navlinks a {
  font-family: var(--sans); font-size: 0.86rem; text-decoration: none; color: var(--ink);
  padding: 5px 10px; border-radius: 5px; letter-spacing: 0.01em;
}
.navlinks a:hover { background: var(--head-bg); color: var(--accent); }
.navlinks a.active { background: var(--accent); color: #fff; }

/* breadcrumbs */
.crumbs { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumb-sep { margin-inline: 2px; color: var(--rule-strong); }

/* page head */
.page-head { padding: 26px 0 6px; max-width: 62rem; }
.page-head h1 { font-size: 2.1rem; line-height: 1.2; margin: 6px 0 14px; font-weight: 800; letter-spacing: -0.01em; }
.kicker { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 0; }
[dir="rtl"] .kicker { letter-spacing: 0; }
.lead { font-size: 1.02rem; color: #35322a; max-width: 56rem; }

/* hero */
.hero { padding: 34px 0 10px; max-width: 66rem; }
.hero h1 { font-size: 2.6rem; line-height: 1.15; margin: 8px 0 16px; font-weight: 800; letter-spacing: -0.015em; }
.hero .lead { font-size: 1.12rem; }
.hero-cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

.btn {
  display: inline-block; font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  background: var(--accent); color: #fff; padding: 10px 20px; border-radius: 6px; text-decoration: none; border: 1px solid var(--accent); cursor: pointer;
}
.btn:hover { background: #722413; color: #fff; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }
.btn.sm { padding: 6px 12px; font-size: 0.82rem; }

/* stats band */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule-strong); border-block: 1px solid var(--rule-strong); margin: 26px 0 8px;
}
.stat { background: var(--surface); padding: 16px 18px; text-align: center; }
.stat-n { display: block; font-size: 1.7rem; font-weight: 800; color: var(--accent); }
.stat-l { display: block; font-family: var(--sans); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 2px; }

/* section cards */
.rule-h { font-size: 1.15rem; margin: 30px 0 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-weight: 800; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 30px; }
.card {
  display: flex; flex-direction: column; gap: 6px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px; padding: 16px 18px; text-decoration: none; color: inherit;
}
.card:hover { border-color: var(--accent); box-shadow: 0 3px 14px rgba(60, 40, 20, 0.08); }
.card-no { font-family: var(--sans); font-size: 0.72rem; color: var(--rule-strong); letter-spacing: 0.1em; }
.card-t { font-weight: 800; font-size: 1.06rem; color: var(--accent); }
.card-d { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 14px; }
.filters input[type="search"], .filters select, .filters label.lbl {
  font-family: var(--sans); font-size: 0.88rem;
}
.filters input[type="search"] { flex: 1 1 220px; max-width: 320px; padding: 8px 12px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }
.filters select { padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface); color: var(--ink); max-width: 340px; }
.chk { font-family: var(--sans); font-size: 0.88rem; display: inline-flex; gap: 6px; align-items: center; }
.count { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); border: 1px solid var(--rule); padding: 3px 10px; border-radius: 99px; }

/* tables */
.tbl-scroll { overflow-x: auto; margin-bottom: 24px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.tbl { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 0.86rem; min-width: 720px; }
.tbl.kv, .tbl.cmp { min-width: 0; }
.tbl th, .tbl td { padding: 9px 12px; text-align: start; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl thead th { background: var(--head-bg); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: #55503f; position: sticky; top: 0; white-space: nowrap; }
[dir="rtl"] .tbl thead th { letter-spacing: 0; }
.tbl thead th button { all: unset; cursor: pointer; font: inherit; color: inherit; display: inline-flex; gap: 4px; }
.tbl thead th button::after { content: "↕"; opacity: 0.35; font-size: 0.8em; }
.tbl thead th button.sorted-asc::after { content: "↑"; opacity: 1; }
.tbl thead th button.sorted-desc::after { content: "↓"; opacity: 1; }
.tbl tbody tr:hover { background: #f7f3e9; }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: none; }
.tbl .num { text-align: end; font-variant-numeric: tabular-nums; }
.tbl.kv th[scope="row"] { font-weight: 600; color: #55503f; width: 34%; min-width: 130px; font-size: 0.8rem; }
.tbl.mono td { font-family: var(--mono); font-size: 0.78rem; word-break: break-word; }
.note-box { background: var(--surface); border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); border-radius: 8px; padding: 4px 20px 14px; margin-bottom: 10px; }

/* chips */
.chip {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; background: var(--chip-bg);
  border: 1px solid var(--rule); border-radius: 99px; padding: 2px 9px; text-decoration: none; color: var(--ink);
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-gqa { background: #e8eef2; border-color: #c4d3dc; }
.chip-mla { background: var(--accent-soft); border-color: #dfbfb2; }
.chip-linear_hybrid { background: #e9e7f3; border-color: #c9c4e0; }
.chips { line-height: 2.1; }
.chips-cell { max-width: 260px; }

/* evolution blocks */
.evo-block { margin: 18px 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; }
.evo-block h3 { margin: 0 0 6px; font-size: 1.02rem; }
.evo-block p { margin: 4px 0; font-size: 0.95rem; }
.evo-flex { display: flex; gap: 20px; align-items: center; }
.evo-flex .evo-text { flex: 1 1 55%; min-width: 0; }
.evo-flex .evo-svg { flex: 0 1 320px; }
.evo-flex .evo-svg svg { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .evo-flex { flex-direction: column; align-items: stretch; } .evo-flex .evo-svg { flex-basis: auto; max-width: 340px; } }

/* heatmap */
.heatmap-wrap { position: relative; max-width: 720px; }
.heatmap-wrap canvas { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: 8px; cursor: crosshair; }
.sim-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--ink); color: #fff; font-family: var(--sans); font-size: 0.75rem;
  padding: 6px 10px; border-radius: 6px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.hm-legend { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin-top: 8px; }
.hm-legend .hm-scale { flex: 0 1 180px; height: 10px; border-radius: 5px; background: linear-gradient(to right, #f1ecdf, #8c2f1b); border: 1px solid var(--rule); }

/* view toggle */
.view-btn { opacity: 0.75; }
.view-btn.view-on { opacity: 1; background: var(--accent); color: #fff; }
.view-btn.view-on:hover { background: #722413; color: #fff; }

/* charts general */
.chart { margin: 20px 0 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 14px 8px; }
.chart.arch-d svg, .chart.moe-d svg, .chart.lane svg, .chart.bars svg { width: 100%; height: auto; display: block; }
.chart figcaption { padding: 8px 4px 6px; }

/* charts */
.chart { margin: 20px 0 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 18px 14px 8px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--rule); stroke-width: 0.6; }
.chart .tick { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.chart circle { stroke: #fff; stroke-width: 0.8; }
.chart circle:hover { r: 6; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--sans); font-size: 0.76rem; color: var(--muted); padding: 10px 4px 6px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: 5px; }

/* timeline list */
.year-g { break-inside: avoid; }
.tl-list { list-style: none; margin: 0 0 14px; padding: 0; }
.tl-list li { padding: 7px 0; border-bottom: 1px dotted var(--rule); font-family: var(--sans); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tl-list time { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); flex: 0 0 62px; }

/* wall cards */
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 30px; }
.mcard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; text-decoration: none; color: inherit; }
.mcard:hover { border-color: var(--accent); }
.mcard-fam { font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.mcard-name { font-weight: 800; font-size: 0.98rem; }
.mcard-meta { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); }

/* similarity list */
.sim-list { list-style: none; padding: 0; margin: 8px 0; }
.sim-list li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--rule); font-family: var(--sans); font-size: 0.9rem; }
.sim-list .score { font-family: var(--mono); font-size: 0.78rem; color: var(--accent); margin-inline-start: auto; }

/* quiz */
.quiz { background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 24px; margin: 18px 0 30px; max-width: 46rem; }
.quiz-q { font-size: 1.1rem; font-weight: 700; margin: 0 0 14px; }
.quiz-progress { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin-bottom: 10px; }
.quiz-opt {
  display: block; width: 100%; text-align: start; font-family: var(--sans); font-size: 0.92rem;
  background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 8px;
  padding: 10px 14px; margin: 8px 0; cursor: pointer; color: var(--ink);
}
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt.correct { background: #e7f0e5; border-color: #4f7a46; font-weight: 600; }
.quiz-opt.wrong { background: #f6e3de; border-color: var(--accent); }
.quiz-opt:disabled { cursor: default; }
.quiz-verdict { font-family: var(--sans); font-size: 0.9rem; margin: 10px 0; font-weight: 600; }
.quiz-score { font-size: 1.3rem; font-weight: 800; color: var(--accent); }

/* config explorer */
.code { background: #26241d; color: #e8e2d0; border-radius: 10px; padding: 18px; font-family: var(--mono); font-size: 0.8rem; overflow-x: auto; max-height: 480px; }
.config-details summary { cursor: pointer; font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin-bottom: 10px; }

/* compare table */
.tbl.cmp th[scope="row"] { width: 180px; }

/* footer */
.foot { border-top: 3px double var(--rule-strong); background: var(--surface); margin-top: 46px; }
.foot-inner { padding: 22px 22px 30px; font-family: var(--sans); font-size: 0.8rem; color: var(--muted); }
.foot-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* note */
.note { font-family: var(--sans); font-size: 0.85rem; background: var(--accent-soft); border-inline-start: 3px solid var(--accent); padding: 8px 14px; border-radius: 6px; display: inline-block; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero h1 { font-size: 1.9rem; }
  .page-head h1 { font-size: 1.6rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .nav-toggle {
    display: block; background: none; border: 1px solid var(--rule-strong); border-radius: 6px;
    padding: 8px 10px; cursor: pointer; margin: 6px 0;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }
  .navlinks { display: none; }
  .navlinks.open { display: flex; flex-direction: column; }
}

[dir="rtl"] .tl-list time { flex: 0 0 auto; }