:root{--ink: #18212f;--muted: #5d6878;--paper: #fff9ea;--panel: #fffdf6;--accent: #9b4d00;--gold: #f6c453;--line: #e7ddc4;--sidebar-w: 17rem}*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);font-family:Avenir Next,Avenir,Trebuchet MS,Arial,sans-serif;line-height:1.5}.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}.content{min-width:0;padding:2.5rem clamp(1.25rem,4vw,3rem) 4rem}.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;background:var(--ink);color:#f4eeda;padding:1.5rem 1rem 2rem}.brand{padding:0 .5rem 1.25rem;border-bottom:1px solid rgba(244,238,218,.15);margin-bottom:1rem}.brand-title{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.01em}.brand-sub{margin:.15rem 0 0;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}.nav-part{margin-bottom:1.25rem}.nav-part-title{margin:0 .5rem .4rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:#f4eeda8c}.nav ul{list-style:none;margin:0;padding:0}.nav-link{display:flex;align-items:center;gap:.6rem;padding:.4rem .55rem;border-radius:7px;color:#f4eeda;text-decoration:none;font-size:.9rem}.nav-link:hover{background:#f4eeda14}.nav-link.active{background:var(--gold);color:var(--ink);font-weight:700}.nav-link.muted{color:#f4eeda80}.nav-num{flex:none;width:1.4rem;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}.nav-text{flex:1}.nav-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#46c67c}.nav-link.active .nav-dot{background:#17653a}.chapter{max-width:78rem}.chapter-lede,.example-intro{max-width:46rem}.example{max-width:none}.chapter-head{border-bottom:2px solid var(--ink);padding-bottom:1.25rem;margin-bottom:1.75rem}.chapter-kicker{margin:0 0 .4rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.chapter-head h1{margin:0;font-size:2.1rem;letter-spacing:-.02em}.chapter-lede{color:var(--muted);max-width:44rem;margin:0 0 2rem}.example{border:2px solid var(--ink);border-radius:12px;background:var(--panel);padding:1.25rem 1.25rem 1.35rem;margin:0 0 1.75rem;box-shadow:6px 6px #18212f1a;scroll-margin-top:1.5rem}.example-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.35rem}.example-head h3{margin:0 0 .4rem;font-size:1.2rem}.chip{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:#fdeccd;border:1px solid #f0d49a;border-radius:999px;padding:.15rem .6rem}.example-intro{color:var(--muted);margin:0 0 1rem;max-width:44rem}.link-btn{flex:none;padding:.35rem .75rem;border:1.5px solid var(--ink);border-radius:7px;background:transparent;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap}.link-btn:hover{background:#fdeccd}.env-note{border:2px dashed var(--line);border-radius:12px;padding:2rem;color:var(--muted);background:var(--panel)}.env-note-tag{margin:0 0 .5rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-size:.75rem}.text-link{color:var(--accent);font-weight:600;text-decoration:none}.text-link:hover{text-decoration:underline}.chapter-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}.chapter-nav-link{display:flex;flex-direction:column;gap:.1rem;padding:.7rem 1rem;border:2px solid var(--ink);border-radius:10px;background:var(--panel);text-decoration:none;color:var(--ink);max-width:46%}.chapter-nav-link:hover{background:#fdeccd}.chapter-nav-link.next{text-align:right;align-items:flex-end}.chapter-nav-link .dir{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);font-weight:700}.chapter-nav-link .label{font-weight:600}@media (max-width: 820px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto}.nav ul{display:flex;flex-wrap:wrap;gap:.25rem}.nav-link{padding:.3rem .5rem}}@media (max-width: 700px){.example{padding:.9rem .75rem 1rem}.example .sp-layout{flex-direction:column}.example .sp-layout>.sp-stack{width:100%!important;min-width:0!important;flex:none}.example .sp-layout>.sp-stack:first-child{height:320px}}