/* Molecular-dynamics explainer. Restyled to match the site's post design
   system (bloom_filter / context-length): Charter serif body, Inter sans for
   display, the shared indigo palette, and the same backbar / hero / footer
   chrome. The token NAMES below (--surface-1, --neural, --classical, ...) are
   read by lib/draw.js theme() to colour the canvases, so they are kept; only
   their VALUES point at the site palette now. */

:root {
  color-scheme: light dark;

  /* ---- site palette (shared with the other posts) ---- */
  --paper:#F6F7F8; --surface:#FFFFFF; --raise:#FBFBFC;
  --ink:#14171C; --ink-2:#333A44; --ink-soft:#5A616B;
  --line:#E5E7EB; --line-2:#EEF0F2; --accent:#33409E; --accent-ink:#33409E;
  --code-bg:#F1F2F6; --code-ink:#2B3350; --tag:#EDEFF6;
  --shadow:0 10px 30px -18px rgba(20,23,28,.28);
  --serif:"Charter","Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Inter","Helvetica Neue","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"SF Mono","JetBrains Mono","Fira Code",ui-monospace,Menlo,Consolas,monospace;

  /* ---- tokens read by draw.js (mapped onto the site palette) ---- */
  --surface-0:#F6F7F8; --surface-1:#FFFFFF; --surface-2:#EEF0F2;
  --border:#E5E7EB;
  --text-primary:#14171C; --text-secondary:#333A44; --text-muted:#5A616B;
  --neural:#33409E;     /* the ML / accent colour */
  --classical:#C0602E;  /* the classical / pair-potential colour */
  --good:#0F9E77; --danger:#C2413C; --violet:#6C5CB8;
}
@media (prefers-color-scheme:dark) {
  :root:where(:not([data-theme="light"])) {
    --paper:#0E1116; --surface:#161A21; --raise:#1B202A;
    --ink:#E7EAF0; --ink-2:#C3C9D2; --ink-soft:#8E96A2;
    --line:#232833; --line-2:#1C212A; --accent:#93A0F2; --accent-ink:#A6B1F6;
    --code-bg:#171C26; --code-ink:#C4CCE6; --tag:#1B2130;
    --shadow:0 14px 34px -18px rgba(0,0,0,.7);
    --surface-0:#0E1116; --surface-1:#161A21; --surface-2:#1B202A;
    --border:#232833;
    --text-primary:#E7EAF0; --text-secondary:#C3C9D2; --text-muted:#8E96A2;
    --neural:#93A0F2; --classical:#E3945C;
    --good:#38C9A0; --danger:#E4736E; --violet:#A99BE8;
  }
}
:root[data-theme="dark"] {
  --paper:#0E1116; --surface:#161A21; --raise:#1B202A;
  --ink:#E7EAF0; --ink-2:#C3C9D2; --ink-soft:#8E96A2;
  --line:#232833; --line-2:#1C212A; --accent:#93A0F2; --accent-ink:#A6B1F6;
  --code-bg:#171C26; --code-ink:#C4CCE6; --tag:#1B2130;
  --shadow:0 14px 34px -18px rgba(0,0,0,.7);
  --surface-0:#0E1116; --surface-1:#161A21; --surface-2:#1B202A;
  --border:#232833;
  --text-primary:#E7EAF0; --text-secondary:#C3C9D2; --text-muted:#8E96A2;
  --neural:#93A0F2; --classical:#E3945C;
  --good:#38C9A0; --danger:#E4736E; --violet:#A99BE8;
}
:root[data-theme="light"] {
  --paper:#F6F7F8; --surface:#FFFFFF; --raise:#FBFBFC;
  --ink:#14171C; --ink-2:#333A44; --ink-soft:#5A616B;
  --line:#E5E7EB; --line-2:#EEF0F2; --accent:#33409E; --accent-ink:#33409E;
  --code-bg:#F1F2F6; --code-ink:#2B3350; --tag:#EDEFF6;
  --shadow:0 10px 30px -18px rgba(20,23,28,.28);
  --surface-0:#F6F7F8; --surface-1:#FFFFFF; --surface-2:#EEF0F2;
  --border:#E5E7EB;
  --text-primary:#14171C; --text-secondary:#333A44; --text-muted:#5A616B;
  --neural:#33409E; --classical:#C0602E;
  --good:#0F9E77; --danger:#C2413C; --violet:#6C5CB8;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s,color .35s;
}
.wrap { position:relative; z-index:1; max-width:780px; margin:0 auto; padding:0 22px 120px; }
.wrap.wide { max-width:1040px; }

/* ---------- backbar + progress ---------- */
.progress { position:fixed; top:0; left:0; height:2px; background:var(--accent); width:0; z-index:70; transition:width .1s linear; }
.backbar { position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 85%,transparent);
  backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s; }
.backbar.scrolled { border-color:var(--line); }
.backbar-in { max-width:780px; margin:0 auto; padding:0 22px; height:56px; display:flex;
  align-items:center; justify-content:space-between; font-family:var(--sans); gap:14px; }
.back { display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:.9rem; font-weight:600; text-decoration:none; }
.back:hover { color:var(--accent-ink); }
.back svg { width:16px; height:16px; }
.series { display:flex; gap:4px; font-family:var(--sans); font-size:.82rem; }
.series a { color:var(--ink-soft); text-decoration:none; font-weight:600; padding:5px 11px; border-radius:8px; border:1px solid transparent; }
.series a:hover { background:var(--surface); }
.series a.here { color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 9%,transparent); }
.series .n { color:var(--ink-soft); font-weight:500; opacity:.7; }
.toggle { width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); cursor:pointer; display:grid; place-items:center; flex:0 0 auto; }
.toggle:hover { border-color:var(--accent); }
.toggle svg { width:17px; height:17px; }

/* ---------- hero ---------- */
header.hero { padding:48px 0 8px; }
.eyebrow { display:flex; align-items:center; gap:12px; font-family:var(--sans); margin-bottom:20px; flex-wrap:wrap; }
.eyebrow .cat { font-size:.72rem; font-weight:700; color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 9%,transparent); border-radius:100px; padding:4px 12px; }
.eyebrow .meta { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
h1 { font-family:var(--sans); font-size:clamp(2rem,5vw,2.85rem); line-height:1.1; letter-spacing:-.025em;
  font-weight:720; margin:0 0 18px; text-wrap:balance; color:var(--ink); }
.post-rule { height:1px; background:var(--line); margin:30px 0 26px; }

/* ---------- typography ---------- */
h2 { font-family:var(--sans); font-weight:680; font-size:clamp(1.5rem,4vw,2rem); line-height:1.15;
  margin:1.9em 0 .5em; letter-spacing:-.022em; color:var(--ink); scroll-margin-top:70px; }
h3 { font-family:var(--sans); font-weight:660; font-size:1.15rem; margin:1.7em 0 .3em; color:var(--ink); letter-spacing:-.01em; }
p { margin:.85em 0; color:var(--ink-2); }
.lede { font-size:1.16rem; line-height:1.6; color:var(--ink-2); }
strong, b { color:var(--ink); font-weight:640; }
a { color:var(--accent-ink); }
ul, ol { color:var(--ink-2); padding-left:1.25em; }
li { margin:.4em 0; }
.num { font-family:var(--mono); font-size:.94em; }

/* ---------- equation ---------- */
.eq { display:block; text-align:center; font-family:var(--mono); font-size:1.02rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px 14px; margin:22px 0; overflow-x:auto; color:var(--ink); }
.eq .an { color:var(--neural); font-weight:600; }
.eq .an2 { color:var(--classical); font-weight:600; }

code { font-family:var(--mono); font-size:.86em; background:var(--code-bg); color:var(--code-ink); padding:1px 5px; border-radius:5px; }

/* ---------- callouts ---------- */
.note, .keypoint { border-radius:12px; padding:15px 18px; margin:22px 0; font-size:1rem; }
.keypoint { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; }
.keypoint b { color:var(--accent-ink); }
.note { background:var(--raise); border:1px dashed var(--line); color:var(--ink-2); }
.keypoint p:last-child, .note p:last-child { margin-bottom:0; }
.keypoint p:first-child, .note p:first-child { margin-top:0; }

/* ---------- widgets ---------- */
.widget { background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px; box-shadow:var(--shadow); margin:26px 0; }
.widget canvas { display:block; width:100%; touch-action:none; border-radius:10px; }
.widget-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--sans); font-weight:660; font-size:.92rem; color:var(--ink); margin:0 0 12px; }
.widget-head .tag { font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--tag); border-radius:5px; padding:2px 8px; font-weight:500; white-space:nowrap; }
.widget-body { margin:0; }
.widget-note { font-family:var(--sans); font-size:.86rem; color:var(--ink-soft);
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }

.controls { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-top:16px; }
.ctl { display:flex; align-items:center; gap:10px; }
.ctl label { font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; }
input[type=range] { -webkit-appearance:none; appearance:none; width:150px; height:5px; border-radius:3px; background:var(--line); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:19px; height:19px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:3px solid var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.22); }
input[type=range]::-moz-range-thumb { width:19px; height:19px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--surface); }
.val { font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:.95rem; color:var(--ink); min-width:56px; }

button { font-family:var(--sans); font-weight:620; font-size:.82rem; padding:8px 15px; border-radius:9px;
  cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); transition:transform .12s,border-color .2s,background .2s; }
button:hover { border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); }
button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
:root[data-theme="dark"] button.active { color:#0E1116; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) button.active { color:#0E1116; } }
.seg { display:inline-flex; }
.seg button { border-radius:0; }
.seg button:first-child { border-radius:9px 0 0 9px; }
.seg button:last-child { border-radius:0 9px 9px 0; }
.seg button + button { border-left:none; }

.readout { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px; margin-top:14px; }
.readout > div { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.rk { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.rv { font-family:var(--sans); font-size:1.15rem; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); margin-top:2px; }

.legend { display:flex; gap:16px; flex-wrap:wrap; font-family:var(--sans); font-size:.8rem; color:var(--ink-soft); margin-top:12px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:13px; height:3px; border-radius:2px; display:inline-block; }
.legend i.dot { width:9px; height:9px; border-radius:50%; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.82rem; margin:22px 0; }
th, td { text-align:left; padding:9px 11px; border-bottom:1px solid var(--line-2); color:var(--ink-2); }
th { font-family:var(--sans); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:last-child td { border-bottom:0; }
td b { color:var(--ink); }

/* ---------- next card + footer ---------- */
.next { display:block; text-decoration:none; margin-top:48px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); transition:border-color .2s; }
.next:hover { border-color:var(--accent); }
.next .k { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.next .t { font-family:var(--sans); font-size:1.2rem; font-weight:680; color:var(--ink); margin-top:4px; letter-spacing:-.01em; }
.next .d { color:var(--ink-soft); font-size:.95rem; margin-top:4px; }

.foot { margin-top:80px; padding-top:26px; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); }
.foot a { font-weight:600; }
.post-foot { margin-top:40px; }
.post-foot .card { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:var(--shadow); }
.post-foot img { width:52px; height:52px; border-radius:11px; object-fit:cover; border:1px solid var(--line); }
.post-foot .n { font-family:var(--sans); }
.post-foot .n b { font-weight:680; letter-spacing:-.01em; color:var(--ink); }
.post-foot .n span { color:var(--ink-soft); font-size:.88rem; }
.post-foot .to-all { margin-left:auto; font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--accent-ink); text-decoration:none; }

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s,transform .7s; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }

@media (max-width:560px) {
  body { font-size:17px; }
  .widget { padding:14px; }
  .backbar-in { padding:0 16px; }
  .wrap { padding:0 16px 100px; }
}