* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #1a1a1a; display: flex; flex-direction: column; min-height: 100vh; }
.site-header { padding: 1rem 0 0.75rem 0; border-bottom: 1px solid #e0e0e0; background: #fff; }
.site-header-title { font-size: 1.125rem; font-weight: 600; color: #1a1a1a; padding-left: 1.5rem; }
.site-header-byline { font-size: 0.8125rem; color: #6b6b6b; padding-left: 1.5rem; margin-top: 0.15rem; }
.site-body { display: flex; flex: 1; min-height: 0; }
.sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid #e0e0e0; padding: 1rem 0; background: #fafafa; }
.nav-root { list-style: none; margin: 0; padding: 0 0 0 0.5rem; }
.nav-root ul { list-style: none; margin: 0; padding-left: 1rem; }
.sidebar a, .sidebar .nav-folder { display: block; padding: 0.25rem 0.5rem; text-decoration: none; }
.sidebar a { color: #1a1a1a; cursor: pointer; }
.sidebar a:hover { background: #eee; }
.sidebar a.active { font-weight: 600; background: #e8e8e8; }
.sidebar .nav-folder { color: #6b6b6b; font-size: 0.875em; font-weight: 600; cursor: default; letter-spacing: 0.02em; }
.sidebar .nav-folder:hover { background: transparent; }
.content { flex: 1; padding: 2rem 3rem; max-width: 52rem; }
.content :first-child { margin-top: 0; }
.content h1 { font-size: 1.75rem; margin: 0 0 1rem; }
.content h2 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; }
.content p { margin: 0 0 0.75rem; }
.content ul, .content ol { margin: 0 0 0.75rem; padding-left: 1.5rem; }
.content strong { font-weight: 600; }
.site-footer { border-top: 1px solid #e0e0e0; background: #fafafa; font-size: 0.8125rem; color: #6b6b6b; }
.site-footer-inner { padding: 1rem 1.5rem 1rem 1.5rem; }
.site-footer-line { margin-bottom: 0.25rem; }
.site-footer a { color: #6b6b6b; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer-optional { color: #6b6b6b; }

@media (max-width: 768px) {
  .site-header { padding: 1rem 1.5rem 0.75rem; }
  .site-header-title, .site-header-byline { padding-left: 0; }
  .site-body { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e0e0e0; padding: 0.5rem 0 0.75rem 1rem; }
  .nav-root { padding-left: 0.5rem; }
  .content { padding: 1.5rem 1.25rem; max-width: none; }
  .site-footer-inner { padding: 1rem 1.25rem; }
}