:root{--leafsmith-topbar-h:72px;--leafsmith-bar-h:var(--leafsmith-topbar-h);--leafsmith-col-left:230px;--leafsmith-col-main:760px;--leafsmith-col-right:200px;--leafsmith-gutter:max(24px,calc(50% - 640px));--bg:#fff;--ink:#222;--ink-strong:#111;--muted:#666;--quiet:#999;--line:#ddd;--panel:#f6f6f6;--code-bg:#f5f5f5;--accent:var(--ink-strong);--font:system-ui,sans-serif;font-family:var(--font);color:var(--ink)}body{margin:0;line-height:1.6}.leafsmith-topbar{position:sticky;top:0;z-index:10;background:var(--bg)}.leafsmith-topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(to right,transparent,var(--line) 18%,var(--line) 82%,transparent)}.leafsmith-topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;max-width:1280px;min-height:var(--leafsmith-topbar-h);margin:0 auto;padding:0 24px}.leafsmith-topbar a{color:inherit;font-size:26px;font-weight:700;text-decoration:none;text-align:center;letter-spacing:-.02em;line-height:1.2}.leafsmith-topbar .leafsmith-topbar-start{grid-column:1;justify-self:start;display:flex;align-items:center;gap:14px}.leafsmith-topbar .leafsmith-brand{grid-column:2;justify-self:center}.leafsmith-topbar .leafsmith-topbar-end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}.leafsmith-logo img{width:44px;height:44px;object-fit:contain;border-radius:8px}.leafsmith-shell{display:grid;grid-template-columns:var(--leafsmith-col-left) minmax(0,var(--leafsmith-col-main)) var(--leafsmith-col-right);gap:45px;max-width:1280px;margin:auto;padding:40px 24px}.leafsmith-reading{grid-column:2}
/* The two rails are pinned to the viewport rather than stuck to the shell.
 *
 * A sticky rail is only pinned while its containing block has room for it. The
 * shell's grid row is as tall as the reading column, so a rail is pushed back
 * up - and visibly moves - once the reading column runs out below it: at the
 * foot of a long page, and across most of a short one. A fixed rail has no
 * such room to run out of, so it holds its place for the whole of the scroll.
 *
 * Fixed elements leave the grid, so the shell keeps their tracks (the reading
 * column is placed in the middle one explicitly) and the rails are anchored to
 * the shell's own content edges instead. The gutter is the distance from the
 * viewport edge to that edge: the shell's 24px padding until the shell
 * reaches its 1280px maximum width, and half the leftover space after it, so
 * 640px is half of that maximum width.
 */
.leafsmith-sidebar{position:fixed;left:var(--leafsmith-gutter);top:calc(var(--leafsmith-bar-h) + 24px);width:var(--leafsmith-col-left);max-height:calc(100vh - var(--leafsmith-bar-h) - 48px);overflow:auto}.leafsmith-nav{display:grid;gap:0}.leafsmith-nav-link,.leafsmith-nav-link:visited{color:var(--muted)}
.leafsmith-nav-link{color:var(--muted);text-decoration:none;padding:6px 6px 6px 10px;border-left:2px solid transparent}.leafsmith-nav-link span{display:inline-block;width:30px;color:var(--quiet)}.leafsmith-nav-link.leafsmith-active{border-left-color:var(--accent);background:var(--panel);font-weight:700;color:var(--accent)}.leafsmith-toc{position:fixed;right:var(--leafsmith-gutter);top:calc(var(--leafsmith-bar-h) + 16px);width:var(--leafsmith-col-right);max-height:calc(100vh - var(--leafsmith-bar-h) - 16px);overflow:auto}.leafsmith-toc .leafsmith-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700;color:var(--quiet);margin:0 0 10px}.leafsmith-toc a,.leafsmith-toc a:visited{color:var(--muted)}
.leafsmith-toc a{display:block;border-left:1px solid var(--line);padding:5px 0 5px 10px;color:var(--muted);text-decoration:none;font-size:14px;line-height:1.35}.leafsmith-toc a[data-level='3']{padding-left:20px}.leafsmith-toc a[data-level='4']{padding-left:30px}.leafsmith-toc a:hover{color:var(--accent)}.leafsmith-toc a.leafsmith-active{color:var(--accent);font-weight:700;border-left-color:var(--accent)}#leafsmith-reading{scroll-margin-top:calc(var(--leafsmith-bar-h) + 16px)}.leafsmith-content :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:calc(var(--leafsmith-bar-h) + 16px)}.leafsmith-content img{max-width:100%;height:auto}.leafsmith-content table{border-collapse:collapse;width:100%;display:block;overflow:auto}.leafsmith-content th,.leafsmith-content td{border:1px solid var(--line);padding:8px 10px;text-align:left}.leafsmith-content pre{overflow:auto;background:var(--code-bg);padding:14px}.leafsmith-pager a,.leafsmith-pager a:visited{color:var(--ink)}
.leafsmith-pager{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:45px;padding-top:20px}.leafsmith-pager a:last-child{text-align:right}.leafsmith-pager small{display:block;color:var(--muted)}@media(max-width:1279px){.leafsmith-shell{grid-template-columns:var(--leafsmith-col-left) minmax(0,var(--leafsmith-col-main))}.leafsmith-toc{display:none}}@media(max-width:720px){.leafsmith-shell{display:block}.leafsmith-shell>aside{margin-bottom:30px}.leafsmith-sidebar{position:static;left:auto;width:auto;max-height:none;overflow:visible}}

.leafsmith-footer{text-align:center;color:var(--muted);font-size:13px;margin:30px 0 10px;padding:0 24px}
.leafsmith-footer a{color:inherit}
.leafsmith-footer p{margin:0}

.leafsmith-slot{margin-top:20px;font-size:13px;line-height:1.4}
.leafsmith-slot:empty{display:none}
.leafsmith-topbar-start>:first-child,.leafsmith-topbar-end>:first-child{margin:0}
.leafsmith-slot a{color:inherit}