* { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 88px; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--color-bg-canvas); color: var(--color-fg-default); font: var(--font-size-lg)/1.65 var(--font-family-sans); }
a { color: var(--color-bg-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 2px solid var(--color-bg-accent); outline-offset: 4px; }
.skip-link { position: fixed; top: -80px; left: var(--space-4); z-index: 10; background: var(--color-bg-raised); padding: var(--space-3); }
.skip-link:focus { top: var(--space-2); }
.masthead { position: sticky; top: 0; z-index: 5; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-8); background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-strong); }
.brand { display: flex; align-items: baseline; gap: var(--space-3); color: var(--color-fg-default); text-decoration: none; font-weight: 600; font-size: var(--font-size-xl); white-space: nowrap; }
.wordmark { font-family: var(--font-family-mono); font-size: var(--font-size-md); }
.wordmark span { color: var(--color-fg-muted); }
.header-actions { display: flex; align-items: center; gap: var(--space-5); font-size: var(--font-size-md); }
.header-actions a { text-decoration: none; }
button, .button { display: inline-block; font: 500 var(--font-size-md)/1.5 var(--font-family-sans); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-bg-accent); border-radius: var(--radius-control); color: var(--color-bg-accent); background: var(--color-bg-surface); cursor: pointer; text-decoration: none; }
.primary { background: var(--color-bg-accent); color: var(--color-fg-on-accent); }
.primary:hover { background: var(--color-accent-hover); color: var(--color-fg-on-accent); }
.layout { display: grid; grid-template-columns: 232px minmax(0, 800px) 192px; gap: var(--space-12); max-width: 1400px; margin: auto; padding: 0 var(--space-8); }
.sidebar, .page-toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 112px); overflow-y: auto; padding: var(--space-6) 0; font-size: var(--font-size-md); }
.sidebar nav a, .page-toc a { display: block; padding: var(--space-1) var(--space-3); text-decoration: none; }
.sidebar nav a[aria-current="page"] { background: var(--color-bg-accent-soft); border-left: 3px solid var(--color-bg-accent); font-weight: 600; }
.sidebar nav a:hover { background: var(--color-bg-hover); }
.nav-group { margin-top: var(--space-6); }
.nav-label, .guide-menu summary { display: block; color: var(--color-fg-muted); font: 500 var(--font-size-xs)/1.6 var(--font-family-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 0 var(--space-3); margin-bottom: var(--space-2); }
.guide-menu summary { cursor: pointer; }
.sidebar-note { color: var(--color-fg-muted); font-size: var(--font-size-sm); margin-top: var(--space-8); padding: var(--space-3); border-top: 1px solid var(--color-border-default); }
main { min-width: 0; padding: var(--space-12) 0 var(--space-8); }
h1, h2, h3 { line-height: 1.3; font-weight: 600; }
h1 { font-size: var(--font-size-2xl); margin: 0 0 var(--space-6); }
h2 { font-size: var(--font-size-xl); margin: var(--space-12) 0 var(--space-4); border-top: 1px solid var(--color-border-strong); padding-top: var(--space-6); }
h3 { font-size: var(--font-size-lg); margin: var(--space-6) 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }
li { margin-bottom: var(--space-2); }
code, pre { font-family: var(--font-family-mono); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
code { background: var(--color-bg-hover); padding: 2px var(--space-1); overflow-wrap: anywhere; }
pre { background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); padding: var(--space-4); overflow-x: auto; line-height: 1.7; margin: var(--space-4) 0 var(--space-6); }
pre code { background: none; padding: 0; overflow-wrap: normal; }
table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--font-size-md); }
th, td { padding: var(--space-3); border-bottom: 1px solid var(--color-border-default); text-align: left; vertical-align: top; min-width: 112px; }
th { background: var(--color-bg-surface); font-weight: 600; }
tr:hover td { background: var(--color-bg-hover); }
.admonition { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-status-warn); background: var(--color-bg-surface); margin: 0 0 var(--space-6); }
.admonition-title { color: var(--color-status-warn); font-weight: 600; }
.admonition-title::before { content: '◆ '; }
.admonition p:last-child { margin-bottom: 0; }
.headerlink { margin-left: var(--space-2); text-decoration: none; opacity: 0; }
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, .headerlink:focus { opacity: 1; }
.page-toc { border-left: 1px solid var(--color-border-default); }
.page-toc a { font-size: var(--font-size-sm); padding-bottom: var(--space-2); }
.page-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); padding: var(--space-5) 0; border-top: 1px solid var(--color-border-strong); }
footer { color: var(--color-fg-muted); font-size: var(--font-size-sm); margin-top: var(--space-8); }
.search { margin-top: var(--space-8); padding: 0 var(--space-3); }
.search label { display: block; margin-bottom: var(--space-2); }
.search input { width: 100%; padding: var(--space-2); background: var(--color-bg-raised); color: var(--color-fg-default); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); font: inherit; }
.search input::placeholder { color: var(--color-fg-muted); }
#search-status { font-size: var(--font-size-sm); margin-top: var(--space-2); }
#search-results { padding-left: var(--space-4); font-size: var(--font-size-sm); }
@media (max-width: 1200px) { .layout { grid-template-columns: 208px minmax(0, 1fr); gap: var(--space-8); } .page-toc { display: none; } }
@media (max-width: 760px) {
  .masthead { position: static; padding: var(--space-4); flex-wrap: wrap; }
  .header-actions { gap: var(--space-4); }
  .layout { display: block; padding: 0 var(--space-4); }
  .sidebar { position: static; max-height: none; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-strong); }
  .guide-menu summary { display: list-item; margin-left: var(--space-4); }
  .nav-group { margin-top: var(--space-4); }
  .sidebar-note { display: none; }
  .search { margin-top: var(--space-4); }
  main { padding-top: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }