:root { --ink:#1a1a1a; --dim:#666; --rule:#e4e4e7; --bg:#fff; --accent:#0f9d58; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.6;
  font:16px/1.6 ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; }
header { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  padding:1.5rem max(1.5rem,calc(50vw - 32rem)) .5rem; }
.brand { font-weight:650; font-size:1.25rem; color:var(--ink); text-decoration:none; }
.tagline { color:var(--dim); font-size:.9rem; }
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--rule);
  padding:0 max(1.5rem,calc(50vw - 32rem)); }
.tab { padding:.55rem 1rem; text-decoration:none; color:var(--dim); font-size:.95rem;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab.active { color:var(--ink); font-weight:600; border-bottom-color:var(--accent); }
main { max-width:64rem; margin:0 auto; padding:2rem max(1.5rem,calc(50vw - 32rem)); }
.lede { color:var(--dim); max-width:42rem; margin:0 0 2rem; }
.card { border:1px solid var(--rule); border-radius:10px; margin-bottom:1rem;
  transition:border-color .15s ease; }
.card:hover { border-color:var(--ink); }
.card-link { display:block; padding:1.25rem; text-decoration:none; color:inherit; }
.card h2 { margin:.5rem 0 .5rem; font-size:1.1rem; }
.card p { margin:0; color:var(--dim); font-size:.94rem; }
.badge { display:inline-block; padding:.15rem .5rem; border-radius:99px; color:#fff;
  font-size:.7rem; font-weight:650; letter-spacing:.03em; text-transform:uppercase; }
.crumb { margin:0 0 1.5rem; font-size:.9rem; }
.crumb a { color:var(--dim); text-decoration:none; }
.crumb a:hover { color:var(--ink); }
.notebook { max-width:72rem; }
/* nbconvert's lab template ships its own padding; ours already positions the page. */
.notebook .jp-Notebook { padding:0 !important; }
@media (prefers-color-scheme:dark) {
  :root { --ink:#e8e8ea; --dim:#a0a0a8; --rule:#2c2c30; --bg:#141416; }
}