.sb-dual {
display: grid; grid-template-columns: 220px 1fr 200px;
min-height: 480px;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #f4ede0;
color: #1f3327;
border-radius: 6px; overflow: hidden;
}
.sb-dual-nav, .sb-dual-toc {
position: sticky; top: 0; align-self: start;
min-height: 480px; padding: 22px 18px;
background: #ece2cf;
border-right: 1px solid #c8b896;
display: flex; flex-direction: column; gap: 14px;
}
.sb-dual-nav header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #c8b896; margin-bottom: 4px; }
.sb-dual-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #2f5d40; box-shadow: inset 0 0 0 3px #ece2cf, 0 0 0 1px #2f5d40; }
.sb-dual-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #1f3327; line-height: 1; }
.sb-dual-name small { display: block; font-size: 9.5px; color: #8a6f4a; font-weight: 700; letter-spacing: 0.18em; margin-top: 4px; text-transform: uppercase; }
.sb-dual-toc { border-right: 0; border-left: 1px solid #c8b896; background: #f4ede0; }
.sb-dual-nav h3, .sb-dual-toc h3 {
margin: 12px 0 6px; font-size: 10.5px; font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase; color: #8a6f4a;
}
.sb-dual-nav h3:first-of-type, .sb-dual-toc h3:first-of-type { margin-top: 0; }
.sb-dual-nav ul, .sb-dual-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sb-dual-nav a, .sb-dual-toc a {
display: block;
padding: 7px 10px;
font-size: 13px; color: #4a5d52; text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.sb-dual-nav a:hover, .sb-dual-toc a:hover { color: #1f3327; border-left-color: #c8b896; background: rgba(0,0,0,0.03); }
.sb-dual-nav a[aria-current="page"] {
color: #fff; font-weight: 700;
background: #c45a3e;
border-radius: 4px;
border-left-color: transparent;
padding-left: 10px;
}
.sb-dual-toc a[aria-current="true"] { color: #2f5d40; font-weight: 700; border-left-color: #2f5d40; }
.sb-dual-edit { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #c8b896; font-size: 11px; color: #8a6f4a; font-style: italic; }
.sb-dual-main { padding: 32px 36px; max-width: 100%; overflow-x: hidden; background: #faf5ea; }
.sb-dual-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #c45a3e; text-transform: uppercase; }
.sb-dual-main h1 { margin: 6px 0 10px; font-size: clamp(32px, 4.5vw, 52px); font-weight: 900; color: #1f3327; letter-spacing: -0.03em; line-height: 1; }
.sb-dual-main h2 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; color: #2f5d40; letter-spacing: -0.01em; }
.sb-dual-lead { font-size: 16px; line-height: 1.6; color: #2a3d31; max-width: 540px; margin-bottom: 4px; }
.sb-dual-main p { margin: 0 0 10px; font-size: 13.5px; color: #2a3d31; line-height: 1.7; max-width: 560px; }
.sb-dual-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #c45a3e; background: rgba(196,90,62,0.08); padding: 1px 6px; border-radius: 3px; font-weight: 600; }
@media (max-width: 720px) {
.sb-dual { grid-template-columns: 1fr; }
.sb-dual-nav, .sb-dual-toc { position: static; min-height: auto; border: 0; border-bottom: 1px solid #c8b896; }
} <div class="sb-dual">
<aside class="sb-dual-nav" aria-label="Section navigation">
<header>
<span class="sb-dual-mark" aria-hidden="true"></span>
<span class="sb-dual-name">Birch<small>docs</small></span>
</header>
<h3>Getting started</h3>
<nav aria-label="Section navigation">
<ul>
<li><a href="#!">Installation</a></li>
<li><a href="#!" aria-current="page">Quick start</a></li>
<li><a href="#!">Configuration</a></li>
<li><a href="#!">Examples</a></li>
</ul>
</nav>
<h3>Concepts</h3>
<nav aria-label="Concepts">
<ul>
<li><a href="#!">Routing</a></li>
<li><a href="#!">Layouts</a></li>
<li><a href="#!">Data fetching</a></li>
</ul>
</nav>
<h3>Recipes</h3>
<nav aria-label="Recipes">
<ul>
<li><a href="#!">Auth</a></li>
<li><a href="#!">Forms</a></li>
</ul>
</nav>
</aside>
<main class="sb-dual-main">
<span class="sb-dual-eye">v3.4 · Feb 2026</span>
<h1>Quick start.</h1>
<p class="sb-dual-lead">Install the package and ship your first page in under five minutes. The CLI scaffolds a new project; the dev server starts on port 4321.</p>
<h2>Installation</h2>
<p>Run <code>npm create birch@latest</code>. The interactive CLI asks for your project name and template choice.</p>
<h2>Run the dev server</h2>
<p>Start the dev server with <code>npm run dev</code>. Hot-reload is enabled by default — edits to any file refresh the browser instantly.</p>
<p>Build for production with <code>npm run build</code>; the output is a static <code>dist/</code> ready for any host.</p>
</main>
<aside class="sb-dual-toc" aria-label="On this page">
<h3>On this page</h3>
<nav aria-label="On this page">
<ul>
<li><a href="#!" aria-current="true">Installation</a></li>
<li><a href="#!">Run the dev server</a></li>
<li><a href="#!">Build for prod</a></li>
<li><a href="#!">Deploy</a></li>
</ul>
</nav>
<p class="sb-dual-edit">Edit on GitHub →</p>
</aside>
</div> Live preview Edit any tab — preview updates live Ready