:root {
  --bg:#fbfaf8; --fg:#1a1a1a; --mut:#6b6b6b; --line:#e3e0da; --band:#f2efe9;
  --eur:#4c72b0; --acgt:#dd8452; --card:#fff; --warn:#8a5a00; --warnbg:#fdf6e6;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#14140f; --fg:#ece9e3; --mut:#9b978f; --line:#302d27; --band:#1c1b16;
    --eur:#7fa3d8; --acgt:#e8a171; --card:#1a1915; --warn:#e0b768; --warnbg:#241f14;
  }
}
* { box-sizing:border-box; }
img { max-width:100%; }
body { background:var(--bg); color:var(--fg); margin:0;
  font:16px/1.65 ui-serif,Georgia,"Iowan Old Style",Palatino,serif; }
.wrap { max-width:960px; margin:0 auto; padding:56px 24px 96px; }
h1 { font-size:2.4rem; line-height:1.15; margin:0 0 .4em; letter-spacing:-.02em; }
h2 { font-size:1.35rem; margin:2.6em 0 .7em; letter-spacing:-.01em; }
.lede { font-size:1.16rem; color:var(--mut); max-width:62ch; margin:0 0 2em; }
p, li { max-width:68ch; }
.sub { color:var(--mut); font-size:.94rem; }
.fig { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:22px 20px 12px; margin:1.6em 0; overflow-x:auto; }
.key { display:flex; gap:22px; flex-wrap:wrap; font-size:.92rem; color:var(--mut);
  margin:0 0 14px; align-items:center; }
.key i { width:11px; height:11px; border-radius:50%; display:inline-block;
  margin-right:7px; vertical-align:-1px; }
.key i.de { background:var(--eur); }
.key i.da { background:var(--acgt); }
.band { fill:var(--band); }
.grid { stroke:var(--line); stroke-width:1; }
.grid.mid { stroke-dasharray:2 3; }
.ax { fill:var(--mut); font-size:11px; font-family:ui-sans-serif,system-ui,sans-serif; }
.lbl { fill:var(--fg); font-size:12.5px; font-family:ui-sans-serif,system-ui,sans-serif; }
.flag { fill:var(--warn); color:var(--warn); font-size:12px; }
.conn { stroke:var(--line); stroke-width:2.5; }
.eur { fill:var(--eur); } .acgt { fill:var(--acgt); }
circle { transition:r .12s ease; }
circle:hover { r:6.5; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:1.4em 0; }
@media (max-width:640px) { .cols { grid-template-columns:1fr; } h1 { font-size:1.9rem; }
  .wrap { padding:36px 18px 64px; } }
.cols section { background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; }
.cols h3 { margin:0 0 .5em; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.09em; color:var(--mut); font-family:ui-sans-serif,system-ui,sans-serif; }
.cols ul { list-style:none; margin:0; padding:0; }
.cols li { display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding:5px 0; border-bottom:1px solid var(--line); max-width:none; }
.cols li:last-child { border-bottom:0; }
.n { font-size:.97rem; }
.v { font-variant-numeric:tabular-nums; font-weight:600; font-size:1.06rem; }
.u { font-size:.7em; color:var(--mut); font-weight:400; }
.note { background:var(--warnbg); border-left:3px solid var(--warn);
  padding:14px 18px; border-radius:0 8px 8px 0; margin:1.5em 0; }
.note strong { color:var(--warn); }
.note p:last-child { margin-bottom:0; }
footer { margin-top:4em; padding-top:1.6em; border-top:1px solid var(--line);
  color:var(--mut); font-size:.9rem; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:var(--band); padding:.12em .38em; border-radius:4px; }