:root{
  --bg:#ffffff; --fg:#1a1d21; --muted:#5b6570; --line:#e3e7ec; --soft:#f6f8fa;
  --accent:#1a5d8f; --accent-soft:#e8f1f8; --warn:#8a5a00; --warn-soft:#fdf4e3;
  --good:#1d6f42; --bad:#9a2c2c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-block:14px}
.brand{font-weight:650;letter-spacing:-.01em;color:var(--fg);text-decoration:none;font-size:17px}
nav.site{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
nav.site a{color:var(--muted);text-decoration:none;font-size:15px}
nav.site a:hover,nav.site a.on{color:var(--accent)}
h1{font-size:31px;line-height:1.22;letter-spacing:-.02em;margin:34px 0 10px}
h2{font-size:22px;letter-spacing:-.01em;margin:38px 0 10px;padding-top:6px}
h3{font-size:17px;margin:26px 0 8px}
p{margin:0 0 14px}
.lede{font-size:18px;color:#333a42}
a{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:14px}
code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);
  padding:1px 5px;border-radius:4px}
.tablewrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:460px}
th,td{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.pick td{background:var(--accent-soft)}
.note{background:var(--soft);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;padding:14px 16px;margin:18px 0}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note p:last-child{margin-bottom:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.card{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--bg)}
.card h4{margin:0 0 6px;font-size:16px}
.card p{margin:0;font-size:14.5px;color:var(--muted)}
.card .big{font-size:26px;font-weight:650;color:var(--fg);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;display:block;margin-bottom:2px}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:6px;
  padding:10px 18px;font-size:15px;font-weight:550;cursor:pointer;text-decoration:none}
.btn:hover{background:#14486e}
.btn[disabled]{background:#9aa5b1;cursor:not-allowed}
.btn.sec{background:var(--bg);color:var(--accent);border:1px solid var(--line)}
label{display:block;font-weight:600;font-size:14px;margin:14px 0 5px}
select,input[type=text],textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:6px;font:15px/1.4 inherit;background:var(--bg);color:var(--fg);min-width:0}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.step{border-top:1px solid var(--line);padding-top:20px;margin-top:26px}
.step .n{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.09em;text-transform:uppercase}
footer.site{border-top:1px solid var(--line);margin-top:52px;padding:26px 0 44px;
  color:var(--muted);font-size:14px}
.pill{display:inline-block;font-size:12px;font-weight:650;padding:2px 9px;border-radius:999px;
  background:var(--soft);color:var(--muted);border:1px solid var(--line)}
.pill.ok{background:#e8f5ee;color:var(--good);border-color:#c5e5d3}
.pill.no{background:#fdecec;color:var(--bad);border-color:#f3cfcf}
.bar{height:7px;border-radius:4px;background:var(--soft);overflow:hidden;min-width:70px}
.bar>span{display:block;height:100%;background:var(--accent)}
@media(max-width:760px){
  h1{font-size:26px}
  header.site .wrap{gap:12px}
  nav.site{margin-left:0;width:100%;gap:14px}
}

figure.arch{margin:22px 0 26px;border:1px solid var(--line);border-radius:9px;
  padding:10px 10px 4px;background:var(--bg)}
figure.arch img{display:block;width:100%;height:auto}
figure.arch figcaption{font-size:13.5px;color:var(--muted);padding:8px 6px 10px;line-height:1.5}

figure.arch figcaption .smi{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
  display:grid;gap:10px}
figure.arch figcaption .smi code{display:inline-block;margin-top:3px;font-size:12.5px;
  line-height:1.45;word-break:break-all;white-space:normal;background:var(--soft);
  padding:5px 8px;border-radius:5px;color:var(--fg);user-select:all}

/* ---- Ketcher panes ----------------------------------------------------
   Editors are stacked full width, never side by side: Ketcher's top toolbar
   does not fit in a half-width column and silently truncates, hiding exactly
   the controls people reach for. Learned on the kinase site. */
.ketcher-box{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.ketcher-box iframe{display:block;width:100%;height:460px;border:0}
@media(max-width:760px){ .ketcher-box iframe{height:380px} }
.smiles-out{font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;color:var(--fg)}
.gate{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;
  padding:14px 16px;background:var(--soft);margin:18px 0}
.gate-title{font-weight:650;font-size:15px;display:block;margin-bottom:4px}
.gate-sub,.gate-fine{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.gate-fine{margin:8px 0 0}
.gate-unlock{font-size:13px;color:var(--accent);font-weight:600;margin:8px 0 0}
.gate input{max-width:360px}
[data-needs-email][disabled]{opacity:.5;cursor:not-allowed;background:var(--soft)}
.hint{font-size:13.5px;color:var(--muted);margin:4px 0 8px}

nav.sister{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  align-items:baseline;font-size:14px}
nav.sister b{grid-column:1/-1;color:var(--fg);font-size:13px;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:2px}
nav.sister a{white-space:nowrap;font-weight:550}
@media(max-width:600px){ nav.sister{grid-template-columns:1fr;gap:2px}
  nav.sister span{margin-bottom:8px} }

/* ---- feedback bar and Talk to us -------------------------------------- */
.fb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:18px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}
.fb .fbnote{flex:1;min-width:200px;max-width:420px}
.fb button[disabled]{opacity:.5}
.fbmsg{color:var(--good)}
dialog.talk{border:1px solid var(--line);border-radius:10px;padding:22px 24px;
  max-width:520px;width:92%;color:var(--fg);background:var(--bg)}
dialog.talk::backdrop{background:rgba(20,24,28,.45)}
#talkbtn{background:none;border:0;color:var(--muted);font:inherit;font-size:15px;
  cursor:pointer;padding:0}
#talkbtn:hover{color:var(--accent)}

/* Receptor search sits directly above its dropdown and drives it. */
.rxsearch{margin-bottom:6px}
.rxcount{margin:0 0 6px;min-height:1.1em}

/* The ranking pages follow the model's own letter order: LSL is ligand,
   sequence, ligand and SLS is sequence, ligand, sequence, so the steps are
   laid out in that order rather than grouping both compounds together. */
.lede-order{margin:0 0 18px 0;color:var(--muted)}
/* The alternative path is a sibling of the numbered steps, not a step. It gets
   its own quiet card rather than a dashed rule, which read as a zipper. */
.step.alt{border-left:none;background:var(--soft);border:1px solid var(--line);
  border-radius:8px;padding:16px 18px}
.step.alt .n{display:none}
.ligrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.ligname{flex:0 1 260px;min-width:0;padding:7px 9px;border:1px solid var(--line);
  border-radius:6px;font:inherit;font-size:14px;background:var(--bg);color:inherit}
.ligname:focus{outline:2px solid var(--accent);outline-offset:1px}
.ligrow .smiles-out{flex:1 1 100%;min-width:0}
@media (max-width:560px){ .ligname{flex:1 1 100%} }

/* When the models were built, said once near the top of the overview. A
   published accuracy with no build date behind it cannot be checked later. */
.build-stamp{margin:0 0 22px 0;padding:10px 13px;border-left:3px solid var(--accent);
  background:var(--soft);border-radius:0 6px 6px 0;font-size:14.5px}

/* The download page: a shell command someone is meant to copy, and the release
   line that says which build these files came from. */
.cmd{font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--soft);
  border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0;
  overflow-x:auto;white-space:pre}
.relstamp{margin:0 0 18px;padding:10px 13px;border-left:3px solid var(--accent);
  background:var(--soft);border-radius:0 6px 6px 0;font-size:14.5px}

/* The strength control on the methods page. Same idea as the targets slider on
   the sibling site: show the coverage-for-accuracy trade rather than print it. */
.cutbox{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:14px 16px;background:var(--soft);margin:16px 0}
.cutbox input[type=range]{width:100%;margin:10px 0 2px}
.cutscale{display:flex;justify-content:space-between;font-size:12.5px;
  color:var(--muted);text-align:center;gap:6px}

/* The worked example's SMILES, in a field you can select and copy. An image is
   not copyable, and the whole point of showing the example is that someone can
   paste it into the tool and get the same answer. */
.copyrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 6px}
.copyrow label{flex:1 1 100%;font-size:12.5px;color:var(--muted);margin:0}
.copyrow input{flex:1 1 320px;min-width:0;font:13px ui-monospace,Menlo,monospace;
  padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--ink)}
figcaption{font-size:14px;color:var(--ink);margin-top:10px;line-height:1.55}
figcaption .small{display:block;margin-top:4px}