:root { color-scheme: light; --paper:#f8f9f6; --ink:#202c29; --muted:#56635d; --line:#dce2db; --green:#315e48; --wash:#edf1ea; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--green); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { text-decoration:underline; }
a:focus-visible { outline:2px solid var(--green); outline-offset:5px; border-radius:2px; }
.wrap { width:min(100% - 64px,1040px); margin-inline:auto; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:27px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); font-size:17px; font-weight:650; letter-spacing:-.3px; text-decoration:none; }
.brand-mark { display:inline-grid; place-items:center; width:35px; height:35px; background:var(--ink); color:var(--paper); border-radius:7px; font:600 17px/1 ui-monospace,monospace; }
nav { display:flex; gap:28px; font-size:14px; }
nav a { color:var(--muted); text-decoration:none; }
nav a[aria-current="page"] { color:var(--ink); text-decoration:underline; }
.skip { position:absolute; left:16px; top:-100px; padding:8px 14px; background:white; z-index:2; }
.skip:focus { top:10px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(35px,5.4vw,62px); line-height:1.12; font-weight:600; letter-spacing:-2px; margin-bottom:25px; }
h2 { font-size:24px; line-height:1.35; font-weight:600; letter-spacing:-.55px; }
h3 { font-size:23px; line-height:1.35; letter-spacing:-.45px; margin-bottom:10px; font-weight:600; }
.eyebrow { font:600 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:1.45px; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.eyebrow span { margin-inline:10px; color:#89958b; }
.hero { padding:77px 0 57px; max-width:740px; }
.hero h1 { font-size:clamp(43px,7vw,76px); letter-spacing:-3px; }
.lead { font-size:20px; line-height:1.7; color:var(--muted); }
.hero .lead { max-width:650px; margin-bottom:0; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid var(--ink); padding-bottom:14px; }
.section-heading h2 { font-size:16px; letter-spacing:0; margin:0; }
.section-heading span { color:var(--muted); font-size:12px; }
.note-list { padding:0; margin:0; list-style:none; }
.note-list li { display:grid; grid-template-columns:40px 1fr 22px; gap:19px; padding:31px 0; border-bottom:1px solid var(--line); }
.note-number { font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); padding-top:1px; }
.note-list .eyebrow { margin-bottom:8px; }
.note-list h3 a { color:var(--ink); text-decoration:none; }
.note-list p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.7; max-width:710px; margin-bottom:8px; }
.note-list .note-detail { margin-bottom:0!important; }
.note-arrow { color:var(--green); font-size:21px; padding-top:23px; }
.reading-note { max-width:740px; padding-top:52px; }
.reading-note h2 { font-size:23px; }
.article { max-width:740px; margin-inline:auto; padding-top:39px; }
.back { display:inline-block; font-size:13px; text-decoration:none; margin-bottom:42px; }
.article-header { margin-bottom:30px; }
.article-header h1 { font-size:clamp(34px,4.9vw,52px); letter-spacing:-1.8px; }
.prose p { margin-bottom:23px; }
.prose h2 { margin-top:36px; margin-bottom:16px; }
.prose code { font: .84em/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; background:var(--wash); padding:2px 5px; border-radius:3px; overflow-wrap:anywhere; }
pre { padding:20px 22px; border:1px solid var(--line); border-radius:6px; background:var(--wash); overflow-x:auto; margin:25px 0; max-width:100%; tab-size:2; }
.prose pre code { display:block; font-size:13px; background:none; padding:0; overflow-wrap:normal; }
.related { display:grid; gap:8px; padding-top:24px; margin-top:41px; border-top:1px solid var(--line); }
.related .eyebrow { margin:0; }
.related a { font-size:16px; text-decoration:none; }
.site-footer { margin-top:76px; border-top:1px solid var(--line); padding-block:25px 38px; font-size:12px; color:var(--muted); }
@media (max-width:600px) {
  body { font-size:16px; }
  .wrap { width:calc(100% - 36px); }
  .site-header { padding-block:20px; gap:12px; }
  .brand { font-size:15px; gap:9px; }
  .brand-mark { width:30px; height:30px; font-size:15px; }
  nav { gap:16px; font-size:13px; }
  .hero { padding-block:49px 39px; }
  .hero h1 { letter-spacing:-1.8px; }
  .lead { font-size:18px; }
  .note-list li { grid-template-columns:25px 1fr; gap:10px; padding-block:25px; }
  .note-arrow { display:none; }
  h3 { font-size:21px; }
  .article { padding-top:26px; }
  .article-header h1 { letter-spacing:-1px; }
  .back { margin-bottom:29px; }
  pre { padding:16px; }
  .site-footer { margin-top:51px; }
}
@media print {
  body { background:white; color:black; font-size:11pt; }
  .wrap { width:100%; }
  nav,.skip,.back,.related { display:none; }
  .article { padding-top:20px; }
  pre { white-space:pre-wrap; overflow-wrap:anywhere; }
}