/* BeeDB writing, shares the tokens and type of index.html */
:root{
  --bg:#f7f7f5; --paper:#ffffff; --ink:#181818; --ink-2:#34342f; --muted:#5b5b57; --faint:#8a8a85;
  --line:#deded9; --line-2:#ebebe6; --blue:#174fc4; --rust:#ad4420; --ok:#2b7a52; --max:1180px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131313; --paper:#1a1a1a; --ink:#ecebe8; --ink-2:#d2d0cb; --muted:#a4a29d; --faint:#7a7873;
    --line:#2e2e2c; --line-2:#242422; --blue:#8aabff; --rust:#e8906a; --ok:#6fcf97;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
a:hover{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:2px}
img{max-width:100%}
code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--line-2); padding:1px 5px; border-radius:3px}

.site{width:min(var(--max), calc(100% - 56px)); margin:auto}
@media (max-width:560px){ .site{width:calc(100% - 32px)} }

.top{height:72px; border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; gap:20px}
.name{font-weight:700; letter-spacing:-.025em; font-size:20px}
.nav{display:flex; gap:22px; color:var(--muted); font-size:14px; flex-wrap:wrap}
.nav .on{color:var(--blue); font-weight:600}

.kicker{color:var(--blue); font-size:11.5px; font-weight:700; letter-spacing:.11em; margin-bottom:16px}
h1{font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:clamp(32px,4.2vw,52px);
  line-height:1.06; letter-spacing:-.045em; margin:0 0 16px; max-width:16em; text-wrap:balance}

/* ── index ─────────────────────────────────────────────────── */
.index-hero{padding:64px 0 40px; border-bottom:1px solid var(--line)}
.intro{font-size:17.5px; line-height:1.62; color:var(--ink-2); max-width:40em; margin:0}
.index-main{padding:44px 0 90px}
.section-title{display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:6px}
.section-title h2{font-size:11.5px; text-transform:uppercase; letter-spacing:.11em; margin:0; font-weight:700}
.section-title span{font:11px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--faint)}
.row{display:grid; grid-template-columns:128px minmax(0,1fr); gap:24px; padding:20px 0;
  border-bottom:1px solid var(--line)}
@media (max-width:640px){ .row{grid-template-columns:1fr; gap:6px} }
.row .date{font:11px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--faint); padding-top:4px;
  letter-spacing:.06em; text-transform:uppercase}
.row h3{font-size:17.5px; margin:0 0 4px; letter-spacing:-.016em; font-weight:650}
.row p{font-size:15px; color:var(--muted); margin:0}
a.row:hover h3{color:var(--blue)}

/* ── article ───────────────────────────────────────────────── */
.article{display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:clamp(28px,3.4vw,48px);
  padding:52px 0 40px}
@media (max-width:900px){ .article{grid-template-columns:1fr} }
.article h1{font-size:clamp(30px,3.7vw,46px)}
.art-meta{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--faint);
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 30px; display:flex; gap:16px; flex-wrap:wrap}
.prose{max-width:none; font-size:17.5px; line-height:1.7; color:var(--ink-2)}
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > pre{max-width:38em}
.prose h2{max-width:38em}
.prose p{margin:0 0 18px}
.prose strong{color:var(--ink); font-weight:650}
.prose h2{font-size:20px; font-weight:650; letter-spacing:-.015em; color:var(--ink);
  margin:34px 0 14px; padding-top:4px}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px}
.prose li{margin-bottom:8px}
.prose blockquote{margin:24px 0; padding:2px 0 2px 18px; border-left:2px solid var(--rust);
  font-family:Georgia,serif; font-size:19px; line-height:1.55; color:var(--ink)}
.prose pre{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:14px 16px;
  overflow-x:auto; font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-2); margin:0 0 22px}
.prose pre code{background:none; padding:0; font-size:inherit}
.figure{margin:32px 0 34px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); padding:18px; max-width:none; width:100%}
.figure img{display:block; width:100%; height:auto}
.figcap{font-size:13px; color:var(--muted); margin:10px 2px 0; line-height:1.55}
.art-nav{display:flex; justify-content:space-between; gap:18px; border-top:1px solid var(--line);
  margin-top:36px; padding-top:18px; font-size:14px; font-weight:600; flex-wrap:wrap}
.art-nav a{color:var(--blue)}
.art-nav .none{color:var(--faint)}
.rail{align-self:start; position:sticky; top:28px}
.rail h3{font-size:11px; text-transform:uppercase; letter-spacing:.11em; margin:0 0 12px; color:var(--faint)}
.rail ol{margin:0; padding-left:20px; font-size:13.5px; color:var(--muted); line-height:1.65}
.rail li{margin-bottom:8px}
.rail li.here{color:var(--ink); font-weight:650}
.rail li.here a{color:var(--ink)}

footer{border-top:1px solid var(--line); padding:24px 0 60px; color:var(--faint); font-size:13px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:var(--muted)}

.tablewrap{overflow-x:auto; margin:0 0 24px; max-width:100%}
.prose table{border-collapse:collapse; font-size:15px; min-width:min(100%,520px)}
.prose th{text-align:left; font-weight:650; color:var(--ink); border-bottom:1px solid var(--line);
  padding:8px 18px 8px 0; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em}
.prose td{border-bottom:1px solid var(--line-2); padding:9px 18px 9px 0; vertical-align:top; color:var(--ink-2)}
.prose tr:last-child td{border-bottom:0}

.rail li.extra{margin-top:12px; padding-top:10px; border-top:1px solid var(--line-2)}