/* Academic notes site — light, clean, no dark theme, no emoji styling. */
:root{
  --ink:#1d1d1f;
  --sub:#6e6e73;
  --faint:#8a8a8e;
  --bg:#fbfbfd;
  --card:#ffffff;
  --code-bg:#f5f5f7;
  --line:#e3e3e6;
  --accent:#0071e3;
  --accent-soft:rgba(0,113,227,.08);
  --warn-bg:#fff7ed;
  --warn-line:#f0c98a;
  --warn-ink:#7a4f12;
  --note-bg:#f2f7ff;
  --note-line:#b9d6f5;
  --note-ink:#1c4e89;
  --ok-bg:#f2faf4;
  --ok-line:#bfe3c8;
  --ok-ink:#1d7d34;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.72;font-size:16.5px;letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---------- layout ---------- */
.layout{display:flex;max-width:1120px;margin:0 auto;gap:36px;padding:0 24px;}
.sidebar{
  width:232px;flex:0 0 232px;position:sticky;top:0;height:100vh;
  overflow-y:auto;padding:32px 0 48px;
}
.content{flex:1 1 auto;max-width:780px;padding:36px 0 96px;min-width:0;}
.sidebar .brand{font-weight:700;font-size:16px;color:var(--ink);display:block;margin-bottom:4px;}
.sidebar .brand small{display:block;font-weight:500;font-size:12.5px;color:var(--sub);margin-top:2px;}
.sidebar nav{margin-top:22px;}
.sidebar nav .group{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:18px 0 6px;}
.sidebar nav a{display:block;color:var(--sub);font-size:14px;padding:5px 10px;border-radius:7px;}
.sidebar nav a:hover{background:var(--code-bg);text-decoration:none;color:var(--ink);}
.sidebar nav a.active{color:var(--accent);background:var(--accent-soft);font-weight:600;}
.sidebar nav a.sub{padding-left:22px;font-size:13.5px;}

/* ---------- typography ---------- */
h1{font-size:32px;line-height:1.18;font-weight:700;letter-spacing:-0.02em;margin:8px 0 14px;}
h2{font-size:21px;font-weight:700;letter-spacing:-0.015em;margin:40px 0 12px;padding-top:8px;}
h3{font-size:17px;font-weight:650;margin:26px 0 8px;}
p{margin:11px 0;max-width:720px;}
ul,ol{margin:10px 0 10px 22px;max-width:720px;}
li{margin:6px 0;}
strong{font-weight:650;}
.subtitle{font-size:18px;color:var(--sub);margin:6px 0;}
.meta{font-size:13.5px;color:var(--faint);margin:6px 0 18px;}
.lead{font-size:17.5px;color:#3a3a3c;max-width:680px;}

/* ---------- components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:16px 0;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:900px){.grid2{grid-template-columns:1fr;}}
.callout{border-radius:12px;padding:14px 16px;margin:16px 0;font-size:15.5px;border:1px solid;}
.callout.note{background:var(--note-bg);border-color:var(--note-line);color:var(--note-ink);}
.callout.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink);}
.callout.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink);}
.callout .tag{font-weight:700;display:block;margin-bottom:4px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
table{border-collapse:collapse;width:100%;max-width:720px;margin:14px 0;font-size:15px;}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-weight:600;color:var(--sub);font-size:13px;letter-spacing:.02em;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
code{font-family:var(--mono);font-size:.85em;background:var(--code-bg);padding:1.5px 6px;border-radius:5px;}
pre{background:var(--code-bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow-x:auto;margin:14px 0;}
pre code{background:none;padding:0;font-size:13.5px;line-height:1.6;}
figure{margin:18px 0;}
figure img{max-width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;}
figcaption{font-size:13.5px;color:var(--sub);margin-top:8px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;}
.chip{font-size:12.5px;color:var(--sub);background:var(--code-bg);border-radius:7px;padding:3px 10px;}
.pill{display:inline-block;font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 11px;}
.pill.null{background:rgba(122,79,18,.12);color:var(--warn-ink);}
.pill.tool{background:var(--accent-soft);color:var(--accent);}
.pill.explore{background:rgba(110,110,115,.12);color:var(--sub);}
.toc-anchor{scroll-margin-top:24px;}
.src{font-size:13px;color:var(--faint);}
.src code{font-size:12px;}
.eq{
  text-align:center;font-style:italic;font-size:18px;
  margin:18px 0;padding:14px 18px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow-x:auto;white-space:nowrap;
}
.eq sub{font-style:normal;}
footer{margin-top:64px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--sub);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;}

/* ---------- pitfall taxonomy cards ---------- */
.pitfall{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:14px 0;}
.pitfall h3{margin-top:0;}
.pitfall .row{display:grid;grid-template-columns:130px 1fr;gap:8px 16px;font-size:15px;margin:8px 0;}
.pitfall .row b{color:var(--sub);font-weight:600;font-size:13.5px;padding-top:2px;}
@media(max-width:700px){.pitfall .row{grid-template-columns:1fr;gap:2px;}}

/* ---------- mobile ---------- */
@media(max-width:860px){
  .layout{flex-direction:column;gap:0;padding:0 18px;}
  .sidebar{position:static;width:auto;flex:none;height:auto;border-bottom:1px solid var(--line);padding:18px 0;}
  .sidebar nav{display:flex;flex-wrap:wrap;gap:4px;}
  .sidebar nav .group{width:100%;margin:10px 0 2px;}
  .sidebar nav a{padding:5px 10px;}
  h1{font-size:27px;}
}