.sb-nst {
position: relative;
display: grid; grid-template-columns: 260px 1fr;
min-height: 480px;
font-family: 'Caveat', 'Comic Sans MS', cursive;
background: #fbf6e8;
color: #2a2418;
border-radius: 6px; overflow: hidden;
border: 1px solid #2a2418;
background-image:
repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.18) 27px 28px),
radial-gradient(circle at 100% 100%, transparent 18px, #fbf6e8 18px);
background-position: 0 14px, 0 0;
}
.sb-nst-side {
position: relative;
background:
repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.18) 27px 28px),
rgba(248,242,224,0.6);
background-position: 0 14px, 0 0;
border-right: 1px dashed rgba(42,36,24,0.35);
padding: 18px 16px;
overflow-y: auto; max-height: 480px;
}
.sb-nst-side::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(225deg, #fbf6e8 50%, rgba(42,36,24,0.12) 50%); }
.sb-nst-side header { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1.5px dashed #2a2418; position: relative; }
.sb-nst-tab { width: 18px; height: 18px; flex-shrink: 0; background: #d4533a; border: 1.5px solid #2a2418; transform: rotate(-12deg); }
.sb-nst-side h3 { margin: 0; font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700; color: #2a2418; line-height: 1; flex: 1; }
.sb-nst-date { font-family: 'Caveat', cursive; font-size: 14px; color: #6a5a3c; transform: rotate(-3deg); }
.sb-nst-side details { padding: 4px 0; }
.sb-nst-side summary {
cursor: pointer; padding: 6px 4px;
font-family: 'Caveat', cursive;
font-size: 22px; font-weight: 700; color: #2a2418;
list-style: none; display: flex; align-items: center; justify-content: space-between;
transition: color 0.14s;
}
.sb-nst-side summary::-webkit-details-marker { display: none; }
.sb-nst-side summary:hover { color: #d4533a; }
.sb-nst-side summary::after {
content: '+';
font-family: 'Caveat', cursive; font-size: 28px; line-height: 0.6; font-weight: 400;
color: #d4533a;
transition: transform 0.22s;
}
.sb-nst-side details[open] summary::after { content: '−'; }
.sb-nst-side ul { list-style: none; margin: 4px 0 12px 22px; padding: 0; display: flex; flex-direction: column; gap: 0; border-left: 1.5px dashed #d4533a; }
.sb-nst-side li { padding-left: 12px; position: relative; }
.sb-nst-side li::before { content: '·'; position: absolute; left: -4px; top: 50%; transform: translateY(-60%); color: #d4533a; font-size: 24px; line-height: 0; }
.sb-nst-side a {
display: block;
padding: 4px 6px;
font-family: 'Caveat', cursive;
font-size: 18px; color: #2a2418; text-decoration: none;
transition: color 0.14s, padding-left 0.14s;
}
.sb-nst-side a:hover { color: #d4533a; padding-left: 10px; }
.sb-nst-side a[aria-current="page"] {
color: #d4533a;
font-weight: 700;
background-image: linear-gradient(transparent 60%, rgba(255,232,99,0.7) 60%);
}
.sb-nst-side footer { margin-top: 16px; padding-top: 10px; border-top: 1.5px dashed rgba(42,36,24,0.4); text-align: center; font-family: 'Caveat', cursive; font-size: 18px; color: #6a5a3c; transform: rotate(-1deg); }
.sb-nst-main {
position: relative;
padding: 32px 40px 32px 70px;
background-image:
repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.22) 27px 28px),
rgba(255,250,232,0.6);
background-position: 0 14px, 0 0;
}
.sb-nst-main::before {
content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 1.5px; background: #d44a4a; opacity: 0.55;
}
.sb-nst-eye { font-family: 'Caveat', cursive; font-size: 16px; color: #d4533a; transform: rotate(-1deg); display: inline-block; margin-bottom: 6px; }
.sb-nst-main h2 { margin: 0 0 14px; font-family: 'Caveat', cursive; font-size: clamp(38px, 5.5vw, 64px); font-weight: 700; color: #2a2418; line-height: 1; transform: rotate(-0.5deg); }
.sb-nst-main p { margin: 0 0 18px; font-family: 'Caveat', cursive; font-size: 19px; color: #2a2418; line-height: 1.55; max-width: 460px; }
.sb-nst-main code { font-family: 'Courier New', monospace; font-size: 14px; color: #d4533a; background: transparent; padding: 1px 5px; border: 1.5px dashed rgba(212,83,58,0.45); border-radius: 0; }
.sb-nst-main blockquote {
position: relative;
margin: 0; padding: 12px 18px 12px 32px;
font-family: 'Caveat', cursive; font-size: 20px; color: #4a4030;
line-height: 1.5; max-width: 480px;
border-left: 3px solid #d4533a;
font-style: italic;
}
.sb-nst-quote-mark { position: absolute; left: 6px; top: -6px; font-family: 'Caveat', cursive; font-size: 64px; line-height: 1; color: #d4533a; opacity: 0.4; font-style: normal; }
.sb-nst-main blockquote cite { display: block; margin-top: 6px; font-size: 16px; color: #6a5a3c; font-style: normal; }
@media (max-width: 720px) {
.sb-nst { grid-template-columns: 1fr; }
.sb-nst-side { max-height: none; border-right: 0; border-bottom: 1px dashed rgba(42,36,24,0.4); }
.sb-nst-main { padding-left: 40px; }
} <div class="sb-nst">
<aside class="sb-nst-side" aria-label="Primary">
<header>
<span class="sb-nst-tab" aria-hidden="true"></span>
<h3>Field Notes</h3>
<span class="sb-nst-date">07 / Mar / 26</span>
</header>
<nav aria-label="Primary">
<details open>
<summary>Authentication</summary>
<ul>
<li><a href="#!" aria-current="page">API keys</a></li>
<li><a href="#!">OAuth tokens</a></li>
<li><a href="#!">Webhooks</a></li>
</ul>
</details>
<details>
<summary>Resources</summary>
<ul>
<li><a href="#!">Customers</a></li>
<li><a href="#!">Subscriptions</a></li>
<li><a href="#!">Invoices</a></li>
<li><a href="#!">Charges</a></li>
</ul>
</details>
<details>
<summary>Errors</summary>
<ul>
<li><a href="#!">Status codes</a></li>
<li><a href="#!">Error responses</a></li>
</ul>
</details>
</nav>
<footer>— No. 47 —</footer>
</aside>
<main class="sb-nst-main">
<span class="sb-nst-eye">— On Authentication</span>
<h2>Native HTML<br/>does the work.</h2>
<p>Each top-level section is a real <code><details></code>/<code><summary></code> — the browser handles keyboard navigation, <code>aria-expanded</code> state, and Enter/Space toggling. No script, no library, no boilerplate.</p>
<blockquote>
<span class="sb-nst-quote-mark" aria-hidden="true">"</span>
Build with the platform. The platform has been thinking about your problem for thirty years.
<cite>— margin note, 2026</cite>
</blockquote>
</main>
</div>