/* 2d Tree contents · contents tree with reading progress. Works with the page or a scrolling article. */
.pc-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:900px){.pc-toc{grid-template-columns:260px minmax(0,1fr);gap:56px}}
.pc-toc__nav{display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:24px}
.pc-toc__list,.pc-toc__list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px}
.pc-toc__list ol{padding-left:16px;margin-top:8px}
.pc-toc__list a{display:flex;gap:8px;color:var(--text-secondary)}
.pc-toc__list a::before{content:"└";color:rgba(245,245,245,.3)}
.pc-toc__list a:hover{color:var(--text)}
.pc-toc__list a[aria-current="true"]{color:var(--orange)}
.pc-toc__progress{display:flex;align-items:center;gap:12px}
.pc-toc__track{flex:1;height:6px;position:relative;background:repeating-linear-gradient(90deg,rgba(245,245,245,.18) 0 1px,transparent 1px 3px)}
.pc-toc__track i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--read,0) * 100%);background:var(--orange)}
.pc-toc__pct{font:12px var(--font-mono);color:var(--text-body);min-width:34px;text-align:right}
.pc-toc__article{display:flex;flex-direction:column;gap:20px;font-size:15px;line-height:1.7;color:rgba(245,245,245,.78)}
.pc-toc__article section{display:flex;flex-direction:column;gap:12px;padding-bottom:120px;max-width:60ch}
.pc-toc__article h3{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.03em;color:var(--text);margin:0}
.pc-toc__article p{margin:0}
/* boxed variant: the article scrolls inside a fixed-height panel */
.pc-toc--boxed{height:520px;border:1px solid var(--hairline);border-radius:var(--r-panel);background:var(--sunken);padding:40px}
.pc-toc--boxed .pc-toc__article{overflow-y:auto;padding-right:16px}