main { box-sizing:border-box; max-width:var(--container); margin:0 auto; padding:var(--space-48) var(--web-gutter) 72px; display:flex; flex-direction:column; gap:var(--space-36); }
a { color:var(--chalk); }
a:hover { color:var(--signal); }
:focus-visible { outline:3px solid var(--signal); outline-offset:2px; }
.head { display:flex; flex-direction:column; gap:var(--space-16); }
.eyebrow { font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
h1 { margin:0; font:800 clamp(56px, 8vw, 96px)/.86 var(--font-display); text-transform:uppercase; color:var(--chalk); overflow-wrap:anywhere; }
.lede { margin:0; max-width:60ch; font-size:17px; line-height:1.5; color:var(--dim); }
.meta { display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-20); margin:0; font:500 13px/1.5 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--dim); }
.meta b { font-weight:500; color:var(--chalk); }
.cols { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-36) var(--web-gutter); }
.toc { flex:1 1 240px; max-width:300px; min-width:0; align-self:flex-start; display:flex; flex-direction:column; gap:var(--space-12); }
.toc-h { margin:0; font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.toc ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.toc-link { display:flex; align-items:baseline; gap:var(--space-12); min-height:44px; box-sizing:border-box; padding:13px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--chalk); font:700 18px/1.1 var(--font-display); text-transform:uppercase; }
.toc-link:hover { color:var(--signal); }
.toc-link span { flex:none; width:20px; font:600 13px/1 var(--font-mono); letter-spacing:.08em; color:var(--dim); }
.toc-link.quiet { color:var(--dim); }
.toc-more { display:flex; flex-wrap:wrap; gap:0 var(--space-16); font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.toc-more a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
@media (min-width:1000px) { .toc { position:sticky; top:var(--space-24); max-height:calc(100vh - 2*var(--space-24)); overflow:auto; } }
article { flex:999 1 560px; min-width:0; max-width:70ch; display:flex; flex-direction:column; }
.draft { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-10) var(--space-14); padding:var(--space-16); margin:0 0 var(--space-8); background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius-16); }
.draft p { margin:0; flex:1 1 300px; font-size:15px; line-height:1.55; color:var(--chalk); }
.sec { display:flex; flex-direction:column; gap:var(--space-14); padding:var(--space-36) 0 var(--space-28); border-top:1px solid var(--rule); scroll-margin-top:var(--space-24); }
.sec.first { border-top:0; padding-top:var(--space-28); }
.sec h2 { margin:0; display:flex; align-items:baseline; gap:var(--space-14); font:800 34px/.95 var(--font-display); text-transform:uppercase; color:var(--chalk); }
.sec h2 .num { flex:none; font:600 13px/1 var(--font-mono); letter-spacing:.08em; color:var(--dim); }
.sec p, .sec li { margin:0; font-size:17px; line-height:1.6; color:var(--chalk); }
.sec ul { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:var(--space-10); }
.sec li::marker { color:var(--dim); }
.todo { background:var(--raised); color:var(--dim); font-size:14px; line-height:1.6; padding:2px var(--space-6); border-radius:var(--radius-4); -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.sec > p.todo { display:block; padding:var(--space-12) var(--space-14); border-radius:var(--radius-10); }
.sec table { width:100%; border-collapse:collapse; font-size:16px; }
.sec th, .sec td { text-align:left; vertical-align:top; padding:var(--space-12) var(--space-12) var(--space-12) 0; border-bottom:1px solid var(--rule); line-height:1.55; color:var(--chalk); }
.sec th { border-top:1px solid var(--rule); font:600 13px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.sec td:first-child { width:30%; }
code { font:500 13px/1.5 var(--font-mono); overflow-wrap:anywhere; color:var(--chalk); }
.log { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.sec .log li { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-4) var(--space-20); padding:var(--space-12) 0; border-bottom:1px solid var(--rule); font-size:16px; line-height:1.5; }
.next { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:var(--space-12); padding-top:var(--space-8); }
.next a { display:flex; align-items:center; justify-content:space-between; gap:var(--space-12); padding:18px var(--space-20); border:1px solid var(--rule); border-radius:var(--radius-16); text-decoration:none; color:var(--chalk); }
.next a:hover { border-color:var(--signal); color:var(--chalk); }
.next a::after { content:""; flex:none; width:9px; height:9px; border-top:2px solid var(--dim); border-right:2px solid var(--dim); transform:rotate(45deg); }
.next a:hover::after { border-color:var(--signal); }
.next .k { display:flex; flex-direction:column; gap:var(--space-6); }
.next .k span:first-child { font:600 13px/1 var(--font-mono); letter-spacing:.08em; color:var(--dim); }
.next .k span:last-child { font:700 24px/1 var(--font-display); text-transform:uppercase; }
.src { display:flex; flex-direction:column; gap:var(--space-14); padding:var(--space-20); border:1px solid var(--rule); border-radius:var(--radius-16); }
.src-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-10) var(--space-16); }
.src-name { font:800 28px/.95 var(--font-display); text-transform:uppercase; color:var(--chalk); text-decoration:none; overflow-wrap:anywhere; }
a.src-name { text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:4px; }
.lic { display:inline-flex; align-items:center; min-height:44px; padding:0 var(--space-8); font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.src-lic { font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.src-body { display:flex; flex-direction:column; gap:var(--space-6); }
.src-k { font:600 13px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.sec .src-v { font-size:16px; line-height:1.55; }
.sec .credit { padding:var(--space-14) var(--space-16); border-radius:var(--radius-10); background:var(--panel); font-size:15px; line-height:1.55; }
.rows { margin:0; padding:0; border-top:1px solid var(--rule); }
.row { display:flex; flex-wrap:wrap; gap:var(--space-6) var(--space-20); padding:var(--space-16) 0; border-bottom:1px solid var(--rule); }
.row dt { flex:1 1 200px; min-width:0; margin:0; font:700 21px/1.1 var(--font-display); text-transform:uppercase; color:var(--chalk); }
.row dd { flex:999 1 300px; min-width:0; margin:0; font-size:16px; line-height:1.55; color:var(--chalk); }
.shows { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.sec .shows { padding:0; gap:0; }
.sec .shows li { display:flex; align-items:center; min-height:72px; box-sizing:border-box; padding:var(--space-12) 0; border-bottom:1px solid var(--rule); }
.sec .shows a, .sec .shows span { display:inline-flex; align-items:center; min-height:44px; font:700 22px/1 var(--font-display); text-transform:uppercase; color:var(--chalk); text-decoration:none; overflow-wrap:anywhere; }
.sec .shows a:hover { color:var(--signal); }
