:root {
  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --text: #1f2933;
  --muted: #52606d;
  --line: #d9dee3;
  --brand: #0b5394;
  --brand-ink: #ffffff;
  --link: #0b5394;
  --note: #e8f1fb;
  --note-line: #0b5394;
  --warning: #fdf1e6;
  --warning-line: #c2410c;
  --tip: #e9f7ef;
  --tip-line: #1e7f4f;
  --radius: 8px;
  --header-h: 56px;
  --sidebar-w: 270px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15191e;
    --bg-alt: #1d2329;
    --text: #e6e9ec;
    --muted: #a3adb8;
    --line: #313a44;
    --brand: #1f2a37;
    --link: #7cb7ff;
    --note: #1b2a3c;
    --warning: #3a2416;
    --tip: #16311f;
  }
}
:root[data-theme="dark"] {
  --bg: #15191e; --bg-alt: #1d2329; --text: #e6e9ec; --muted: #a3adb8; --line: #313a44;
  --brand: #1f2a37; --link: #7cb7ff; --note: #1b2a3c; --warning: #3a2416; --tip: #16311f;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--link); }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--brand); color: var(--brand-ink); padding: 8px; }
.skip:focus { left: 8px; z-index: 100; }

.site-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--brand); color: var(--brand-ink);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; white-space: nowrap; }
.brand img { background: #fff; border-radius: 50%; padding: 2px; }
.menu-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.5); color: inherit; font-size: 20px; border-radius: 6px; padding: 2px 10px; cursor: pointer; }
.search { position: relative; margin-left: auto; width: min(420px, 50vw); }
.search input {
  width: 100%; padding: 7px 12px; border-radius: 20px; border: 1px solid transparent;
  font: inherit; background: rgba(255,255,255,.95); color: #1f2933;
}
.search-results {
  position: absolute; right: 0; top: 42px; width: min(520px, 90vw); max-height: 70vh; overflow: auto;
  background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.search-results a { display: block; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.search-results a:last-child { border-bottom: 0; }
.search-results a.active, .search-results a:hover { background: var(--bg-alt); }
.search-results .r-title { font-weight: 600; }
.search-results .r-section { color: var(--muted); font-size: .85rem; margin-left: 6px; }
.search-results .r-snippet { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.search-results .r-empty { padding: 12px 14px; color: var(--muted); }
.search-results mark { background: #ffe58f; color: #000; padding: 0 1px; }

.layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
.sidebar {
  position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: 16px 12px 24px; background: var(--bg-alt); border-right: 1px solid var(--line);
}
.sidebar details { margin-bottom: 6px; }
.sidebar summary { cursor: pointer; font-weight: 600; padding: 6px 8px; border-radius: 6px; list-style: none; display: flex; align-items: center; }
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary::before { content: "\25B8"; display: inline-block; width: 16px; color: var(--muted); transition: transform .15s; }
.sidebar details[open] > summary::before { transform: rotate(90deg); }
.sidebar ul { list-style: none; margin: 0 0 4px; padding: 0 0 0 16px; }
.sidebar li a { display: block; padding: 5px 8px; border-radius: 6px; text-decoration: none; color: var(--text); font-size: .95rem; }
.sidebar li a:hover { background: var(--bg); }
.sidebar li a[aria-current="page"] { background: var(--link); color: #fff; font-weight: 600; }
.sidebar-foot { margin: 16px 8px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; }

.content { padding: 28px 48px 48px; max-width: 1200px; }
.crumb { margin: 0; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.content h1 { margin: 4px 0 8px; font-size: 2rem; line-height: 1.2; }
.summary { margin: 0 0 20px; font-size: 1.1rem; color: var(--muted); }
.content h2 { margin: 36px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 1.35rem; }
.content h3 { margin: 24px 0 8px; font-size: 1.1rem; }
.content p, .content li, .content blockquote, .content dl { max-width: 85ch; }
.content ol li, .content ul li { margin-bottom: 6px; }
.content code { background: var(--bg-alt); padding: 1px 5px; border-radius: 4px; }
.content table { border-collapse: collapse; margin: 16px 0; }
.content th, .content td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.content th { background: var(--bg-alt); }
.on-this-page { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin: 0 0 24px; font-size: .95rem; }
.on-this-page p { margin: 0 0 4px; font-weight: 600; }
.on-this-page ul { margin: 0; padding-left: 18px; }

figure { margin: 18px 0; }
figure a.zoom { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
figure img { display: block; }
img.inline { height: 1.5em; vertical-align: middle; border: 1px solid var(--line); border-radius: 3px; }
img.inline.button { height: 1.7em; border: 0; border-radius: 0; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: 6px; }

blockquote { margin: 18px 0; padding: 12px 16px; border-left: 4px solid var(--line); background: var(--bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }
blockquote p { margin: 0; }
.callout-note { background: var(--note); border-left-color: var(--note-line); }
.callout-warning { background: var(--warning); border-left-color: var(--warning-line); }
.callout-tip { background: var(--tip); border-left-color: var(--tip-line); }

.related { margin-top: 40px; }
.related ul { padding-left: 20px; }
.page-foot { margin-top: 32px; color: var(--muted); font-size: .85rem; }
.site-footer { grid-column: 1 / -1; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; text-align: center; }

.section-cards h2 { margin-top: 36px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; background: var(--bg-alt); }
.card h3 { margin: 0 0 8px; font-size: 1rem; }
.card ul { margin: 0; padding-left: 18px; font-size: .92rem; }

.keyword-list dt { font-weight: 600; margin-top: 8px; }
.keyword-list dd { margin: 0 0 4px 16px; }
.letter-jump a { margin-right: 8px; font-weight: 600; }

.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; background: #fff; }
.backdrop { display: none; position: fixed; inset: 0; z-index: 15; background: rgba(0,0,0,.4); }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .menu-toggle { display: inline-block; }
  .brand span { display: none; }
  .search { width: auto; flex: 1; }
  .sidebar {
    position: fixed; left: 0; top: var(--header-h); width: var(--sidebar-w); max-width: 85vw;
    transform: translateX(-100%); transition: transform .2s; z-index: 16;
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .backdrop { display: block; }
  .content { padding: 20px 16px 40px; }
  .content h1 { font-size: 1.6rem; }
}