/* Layout: genome-browser metaphor. A fixed "track rail" on the left lists chapters like browser tracks;
   the reading column sits beside it. Each omics layer owns one nucleotide-trace colour, used everywhere that layer appears. */
:root{
  --paper:#EEF2F0; --paper-2:#E2E8E5; --card:#F8FAF9; --ink:#13201C; --ink-2:#4B5C56; --ink-3:#73847E; --rule:#C6D0CC;
  --dna:#1C7F4E; --epi:#5E7D1A; --rna:#2756B8; --prot:#A86A10; --met:#B83A2A; --mic:#7A3FA0; --int:#0D6E68;
  --dna-bg:#D9EDE2; --rna-bg:#DCE5F6; --prot-bg:#F3E6CF; --met-bg:#F5DCD7; --int-bg:#D3EAE7; --mic-bg:#E9DDF1; --epi-bg:#E4ECD0;
  --accent:#0D6E68; --mark:#F4E27A;
  --f-display:"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body:"Literata", Georgia, "Times New Roman", serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --s-1:.8125rem; --s0:1.0625rem; --s1:1.25rem; --s2:1.6rem; --s3:2.2rem; --s4:3.2rem; --s5:4.6rem;
  --rail:288px; --measure:44rem;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0E1513; --paper-2:#16201D; --card:#121B18; --ink:#E1E9E5; --ink-2:#A0B1AB; --ink-3:#768882; --rule:#2A3733;
  --dna:#4CC38A; --epi:#A6C64B; --rna:#7BA3FF; --prot:#E9B04F; --met:#F27C69; --mic:#C08AE6; --int:#4FC4B8;
  --dna-bg:#14301F; --rna-bg:#18243F; --prot-bg:#33270F; --met-bg:#3A1C17; --int-bg:#11302D; --mic-bg:#2C1C38; --epi-bg:#25300F;
  --accent:#4FC4B8; --mark:#5B5214; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0E1513; --paper-2:#16201D; --card:#121B18; --ink:#E1E9E5; --ink-2:#A0B1AB; --ink-3:#768882; --rule:#2A3733;
  --dna:#4CC38A; --epi:#A6C64B; --rna:#7BA3FF; --prot:#E9B04F; --met:#F27C69; --mic:#C08AE6; --int:#4FC4B8;
  --dna-bg:#14301F; --rna-bg:#18243F; --prot-bg:#33270F; --met-bg:#3A1C17; --int-bg:#11302D; --mic-bg:#2C1C38; --epi-bg:#25300F;
  --accent:#4FC4B8; --mark:#5B5214; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--s0); line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px}
::selection{background:var(--mark)}

/* ---------- Shell ---------- */
.topbar{display:none}
.rail{position:fixed; top:0; left:0; bottom:0; width:var(--rail); background:var(--paper-2); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; z-index:20; padding-top:env(safe-area-inset-top,0px)}
.rail-head{padding:20px 20px 14px; border-bottom:1px solid var(--rule)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-mark{display:grid; grid-template-columns:repeat(4,5px); gap:2px; align-items:end; height:22px}
.brand-mark i{display:block; width:5px; border-radius:1px}
.brand-mark i:nth-child(1){height:22px; background:var(--dna)} .brand-mark i:nth-child(2){height:14px; background:var(--rna)}
.brand-mark i:nth-child(3){height:18px; background:var(--prot)} .brand-mark i:nth-child(4){height:10px; background:var(--met)}
.brand-name{font-family:var(--f-display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; line-height:1.1}
.brand-name small{display:block; font-family:var(--f-mono); font-weight:400; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.search{margin-top:14px; position:relative}
.search input{width:100%; font:inherit; font-family:var(--f-mono); font-size:.8rem; padding:8px 10px 8px 30px; border:1px solid var(--rule); background:var(--card); color:var(--ink); border-radius:4px}
.search svg{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--ink-3)}
.toc{overflow-y:auto; flex:1; padding:10px 0 24px}
.toc-part{font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); padding:16px 20px 6px}
.toc a{display:grid; grid-template-columns:8px 1fr; gap:10px; align-items:center; padding:5px 20px; color:var(--ink-2); text-decoration:none; font-family:var(--f-display); font-size:.92rem; line-height:1.3}
.toc a .sw{width:8px; height:8px; border-radius:1px; background:var(--c, var(--ink-3)); opacity:.55}
.toc a:hover{color:var(--ink); background:color-mix(in srgb, var(--paper) 60%, transparent)}
.toc a[aria-current="page"]{color:var(--ink); background:var(--card); font-weight:600}
.toc a[aria-current="page"] .sw{opacity:1; height:16px}
.rail-foot{border-top:1px solid var(--rule); padding:10px 20px; display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-3)}
.theme-btn{font:inherit; background:none; border:1px solid var(--rule); color:var(--ink-2); padding:4px 8px; border-radius:4px; cursor:pointer}
.results{display:none; position:absolute; left:0; right:0; top:calc(100% + 6px); background:var(--card); border:1px solid var(--rule); border-radius:4px; max-height:60vh; overflow:auto; z-index:40; box-shadow:0 10px 30px rgba(0,0,0,.15)}
.results.on{display:block}
.results a{display:block; padding:8px 10px; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); font-size:.82rem; line-height:1.35}
.results a b{font-family:var(--f-display)} .results a span{display:block; color:var(--ink-3); font-family:var(--f-mono); font-size:.7rem}
.results .none{padding:10px; font-size:.8rem; color:var(--ink-3)}

main{margin-left:var(--rail); min-height:100vh}
.chapter{display:none; padding-inline:clamp(16px,5vw,72px); padding-block:48px 80px}
.chapter.on{display:block}
.chapter > *{max-width:var(--measure)}
.chapter > .wide, .chapter > .hero, .chapter > .chap-head, .chapter > .pager{max-width:68rem}

/* ---------- Chapter heading ---------- */
.chap-head{border-bottom:1px solid var(--rule); padding-bottom:24px; margin-bottom:32px}
.track{display:flex; gap:10px; align-items:center; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); flex-wrap:wrap}
.track .chip{color:var(--c); background:var(--cb); padding:2px 8px; border-radius:2px; font-weight:600}
h1,h2,h3,h4{font-family:var(--f-display); text-wrap:balance; line-height:1.15; letter-spacing:-.005em; margin:0}
h1{font-size:clamp(2.1rem,4.6vw,4.2rem); font-weight:700; margin-top:12px; letter-spacing:-.02em}
.dek{font-size:var(--s1); color:var(--ink-2); margin-top:14px; max-width:44rem; line-height:1.5}
h2{font-size:var(--s3); font-weight:700; margin:56px 0 16px; padding-top:12px}
h3{font-size:var(--s1); font-weight:600; margin:32px 0 10px}
h4{font-size:var(--s0); font-weight:600; margin:22px 0 6px}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em; margin:0 0 1.1em} li{margin:.25em 0}
li::marker{color:var(--ink-3)}
strong{font-weight:600}
em{font-style:italic}
code,.mono{font-family:var(--f-mono); font-size:.86em}
code{background:var(--paper-2); padding:1px 5px; border-radius:3px}
.seq{font-family:var(--f-mono); letter-spacing:.12em; word-break:break-all}
.seq .A{color:var(--dna)} .seq .C{color:var(--rna)} .seq .G{color:var(--prot)} .seq .T,.seq .U{color:var(--met)}
.seq .x{opacity:.45}
.onpage{display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--f-mono); font-size:.76rem; margin:-12px 0 28px}
.onpage button{font:inherit; background:none; border:none; padding:0; color:var(--ink-2); cursor:pointer; border-bottom:1px dotted var(--ink-3)}
.onpage button:hover{color:var(--accent)}

/* ---------- Callouts ---------- */
.note{border-top:2px solid var(--c, var(--ink)); background:var(--card); padding:14px 18px 6px; margin:22px 0}
.note > .lbl{display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c, var(--ink-2)); margin-bottom:6px; font-weight:600}
.note.key{--c:var(--accent)} .note.pit{--c:var(--met)} .note.gap{--c:var(--mic)} .note.bench{--c:var(--prot)} .note.eg{--c:var(--rna)}
.note p:last-child, .note ul:last-child{margin-bottom:.6em}

/* ---------- Tables ---------- */
.tbl{overflow-x:auto; margin:18px 0 26px; border:1px solid var(--rule); background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:.86rem; line-height:1.45}
th{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:left; font-weight:500; background:var(--paper-2)}
th,td{padding:9px 12px; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:none}
td:first-child{font-family:var(--f-display); font-weight:600; white-space:nowrap}
td.wrap{white-space:normal}
.grp td{background:var(--paper-2); font-family:var(--f-mono); font-weight:500; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2)}
.pill{display:inline-block; font-family:var(--f-mono); font-size:.68rem; padding:1px 6px; border-radius:2px; border:1px solid var(--rule); white-space:nowrap; color:var(--ink-2)}
.stage-P{color:var(--dna); border-color:currentColor} .stage-S{color:var(--rna); border-color:currentColor} .stage-T{color:var(--prot); border-color:currentColor}
.lvl{font-family:var(--f-mono); letter-spacing:1px; white-space:nowrap; color:var(--accent)}
.lvl i{font-style:normal; color:var(--rule)}

/* ---------- Grids & cards ---------- */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:16px; margin:20px 0}
.cols > *{min-width:0}
.card{background:var(--card); border:1px solid var(--rule); padding:16px 18px}
.card h4{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:4px 16px; font-size:.9rem}
.kv dt{font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding-top:3px}
.kv dd{margin:0}
figure{margin:26px 0} figcaption{font-family:var(--f-mono); font-size:.74rem; color:var(--ink-3); margin-top:8px; line-height:1.5}
.fig{overflow-x:auto; background:var(--card); border:1px solid var(--rule); padding:16px}
.fig svg{display:block; width:100%; height:auto; min-width:560px}
.fig svg text{font-family:var(--f-mono); fill:var(--ink)}

/* ---------- Home ---------- */
.hero{padding-top:8px}
.hero .eyebrow{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.hero h1{font-size:clamp(2.6rem,7vw,5.6rem); line-height:.98; max-width:16ch}
.hero h1 .l{color:var(--rna)}
#trace{width:100%; height:120px; display:block; margin:28px 0 6px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.trace-cap{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-3); gap:12px; flex-wrap:wrap}
.layers{margin:36px 0; border-top:1px solid var(--rule)}
.layer{display:grid; grid-template-columns:11rem 1fr 9rem; gap:20px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink)}
.layer:hover{background:var(--card)}
.layer .nm{font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--c)}
.layer .ds{font-size:.92rem; color:var(--ink-2); line-height:1.45; min-width:0}
.layer .bar{height:10px; background:var(--cb); position:relative}
.layer .bar i{position:absolute; inset:0 auto 0 0; background:var(--c); width:var(--w)}
.layer .mol{font-family:var(--f-mono); font-size:.68rem; color:var(--ink-3); margin-top:4px; text-align:right}
.paths{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:0; border:1px solid var(--rule); background:var(--card)}
.paths > div{padding:18px; border-right:1px solid var(--rule); min-width:0}
.paths > div:last-child{border-right:none}
.paths h4{margin:0 0 4px} .paths .mono{color:var(--ink-3); font-size:.72rem}
.paths ol{margin:10px 0 0; font-size:.9rem}

.pager{display:flex; justify-content:space-between; gap:16px; margin-top:64px; border-top:1px solid var(--rule); padding-top:18px}
.pager a{text-decoration:none; color:var(--ink); max-width:48%}
.pager a span{display:block; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
.pager a b{font-family:var(--f-display); font-size:1.1rem}
.pager a.nx{text-align:right; margin-left:auto}

/* Atlas filters */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; align-items:center}
.filters input,.filters select{font-family:var(--f-mono); font-size:.8rem; padding:7px 9px; border:1px solid var(--rule); background:var(--card); color:var(--ink); border-radius:4px}
.filters input{flex:1 1 14rem; min-width:0}
.count{font-family:var(--f-mono); font-size:.74rem; color:var(--ink-3)}

/* Codon wheel table */
.codon{font-family:var(--f-mono); font-size:.76rem}
.codon td{text-align:center; white-space:nowrap; font-family:var(--f-mono); font-weight:400}
.codon td.stop{color:var(--met); font-weight:600} .codon td.start{color:var(--dna); font-weight:600}

.gloss dt{font-family:var(--f-display); font-weight:600; margin-top:12px}
.gloss dd{margin:2px 0 0; color:var(--ink-2); font-size:.95rem}

.byline{display:flex; flex-direction:column; gap:2px; margin-top:22px; padding:12px 0 12px 16px; border-left:3px solid var(--rna); max-width:52rem}
.byline .by-lbl{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.byline .by-name{font-family:var(--f-display); font-weight:700; font-size:1.45rem; color:var(--ink); text-decoration:none; line-height:1.2}
.byline .by-name:hover{color:var(--accent)}
.byline .by-aff{font-family:var(--f-mono); font-size:.78rem; color:var(--ink-2); line-height:1.5}
/* generated figures */
.figx{margin:26px 0}
.chapter > .figx, .chapter > .anat, .chapter > .steps{max-width:68rem}
.figx .fig svg{min-width:640px}
.figx .fig svg .lbl{fill:var(--ink-2)} .figx .fig svg .mut{fill:var(--ink-3)}
.illus{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--rule); padding:1px 6px; border-radius:2px; margin-left:6px}
.anat{font-family:var(--f-mono); font-size:.8rem; background:var(--card); border:1px solid var(--rule); padding:14px 16px; overflow-x:auto; line-height:1.8; white-space:pre}
.anat .k{color:var(--ink-3)}
/* wet-lab step strips */
.steps{list-style:none; padding:0; margin:20px 0 26px; display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:0; counter-reset:st; border:1px solid var(--rule); background:var(--card)}
.steps li{counter-increment:st; margin:0; padding:14px 14px 14px; border-right:1px solid var(--rule); border-bottom:3px solid var(--c, var(--accent)); position:relative; min-width:0}
.steps li::before{content:counter(st, decimal-leading-zero); display:block; font-family:var(--f-mono); font-size:.68rem; color:var(--c, var(--accent)); font-weight:600; letter-spacing:.06em}
.steps li b{display:block; font-family:var(--f-display); font-size:.95rem; margin:2px 0 4px; line-height:1.25}
.steps li span{display:block; font-size:.8rem; line-height:1.45; color:var(--ink-2)}
/* contact */
.contact{display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:0; border:1px solid var(--rule); background:var(--card); margin:20px 0}
.contact > div{padding:18px 20px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); min-width:0}
.contact dt{font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3)}
.contact dd{margin:4px 0 0; font-family:var(--f-display); font-size:1.08rem; font-weight:500; overflow-wrap:anywhere}
.copy{font-family:var(--f-mono); font-size:.7rem; margin-left:8px; background:none; border:1px solid var(--rule); color:var(--ink-2); padding:2px 7px; border-radius:3px; cursor:pointer}
@media (max-width:900px){
  :root{--rail:0px}
  .topbar{display:flex; position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--paper-2); border-bottom:1px solid var(--rule); padding:10px 16px; align-items:center; justify-content:space-between}
  .menu-btn{font-family:var(--f-mono); font-size:.78rem; background:var(--card); color:var(--ink); border:1px solid var(--rule); padding:6px 10px; border-radius:4px}
  .rail{width:min(320px,88vw); transform:translateX(-102%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.25)}
  .rail.open{transform:none}
  .layer{grid-template-columns:1fr; gap:6px}
  .layer .mol{text-align:left}
  .chapter{padding-block:28px 60px}
  .paths > div{border-right:none; border-bottom:1px solid var(--rule)}
}