*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
  line-height: 1.6;
}

/* -- Home -- */
#home {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh; padding: 20px;
}
#home h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 6px; }
#home p.tagline { color: #666; margin-bottom: 28px; text-align: center; max-width: 420px; font-size: 14px; line-height: 1.6; }
#home .input-row { display: flex; gap: 8px; width: 100%; max-width: 460px; }
#home input {
  flex: 1; padding: 10px 12px; font-size: 14px;
  border: 1px solid #ccc; border-radius: 3px;
  font-family: monospace; outline: none;
}
#home button {
  padding: 10px 18px; font-size: 14px; cursor: pointer;
  background: #111; color: #fff; border: none; border-radius: 3px; font-weight: 500;
}
#home .examples { color: #aaa; font-size: 12px; margin-top: 16px; }
#home .examples a { color: #888; }

/* -- Loading / Error -- */
#loading, #error {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh; padding: 20px;
}
#error h2 { font-size: 18px; margin-bottom: 10px; }
#error p { color: #666; margin-bottom: 20px; text-align: center; max-width: 400px; }
#error a {
  padding: 8px 16px; background: #111; color: #fff;
  text-decoration: none; border-radius: 3px; font-size: 13px;
}

/* -- Docs layout -- */
#docs { display: none; }

/* -- Sidebar -- */
#sidebar {
  width: 260px; min-width: 260px; border-right: 1px solid #e0e0e0;
  padding: 8px 16px 14px; overflow-y: auto; height: 100vh;
  position: sticky; top: 0;
}
#sidebar-overlay.open { display: block; }
#sidebar.open { padding-top: 48px; }
#sidebar .brand a {
  display: block;
  text-decoration: none;
  color: #555;
  font-weight: 600;
  line-height: 1.7;
  border-left: 2px solid transparent;
  font-size: 23.5px;
  letter-spacing: 0.5px;
}
body.dark #sidebar .brand a {
  color: #c0c0c0;
}
#sidebar .repo-name {
  font-weight: 600; font-size: 14px; margin-top: 4px;
  color: #111; font-family: monospace;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #e0e0e0;
}

#sidebar ul { list-style: none; }
#sidebar li { margin: 0; }
#sidebar .nav-row { display: flex; align-items: baseline; gap: 2px; }
#sidebar .toggle-btn {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 9px; color: #888; font-family: monospace; width: 14px; flex-shrink: 0;
  text-align: center;
}
#sidebar .spacer { width: 14px; display: inline-block; flex-shrink: 0; }
#sidebar a.nav-link {
  text-decoration: none; color: #555; font-weight: 400;
  line-height: 1.7; border-left: 2px solid transparent;
  padding-left: 6px; display: block; font-size: 13.5px;
}
#sidebar a.nav-link.child { font-size: 12.5px; }
#sidebar a.nav-link.active { color: #000; font-weight: 600; border-left-color: #000; }
#sidebar ul ul { padding-left: 14px; }
#sidebar-title {
  display: flex;
  flex-wrap: wrap;
}

/* -- Content -- */
#content {
  flex: 1; min-width: 0; max-width: 780px;
  margin: 0 auto; padding: 28px 40px 60px;
}

/* -- Article typography -- */
article h1, article h2, article h3, article h4, article h5, article h6 {
  margin-top: 1.8em; margin-bottom: 0.4em; line-height: 1.3;
}
article h1 { font-size: 1.75em; padding-bottom: 0.3em; border-bottom: 1px solid #e0e0e0; }
article h2 { font-size: 1.35em; padding-bottom: 0.2em; border-bottom: 1px solid #eee; }
article h3 { font-size: 1.1em; }
article h4, article h5, article h6 { font-size: 1em; }
article p { line-height: 1.7; margin: 0.7em 0; }
article a { color: #0366d6; }
article pre {
  background: #f6f6f6; padding: 12px 14px; overflow-x: auto;
  border: 1px solid #e0e0e0; border-radius: 3px;
  font-size: 13px; line-height: 1.5;
}
article code {
  background: #f0f0f0; padding: 1px 4px; border-radius: 2px; font-size: 0.88em;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}
article pre code { background: none; padding: 0; font-size: inherit; }
article blockquote { border-left: 3px solid #ddd; margin: 1em 0; padding: 0.4em 1em; color: #555; }
article table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 14px; }
article th, article td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
article th { background: #f6f6f6; font-weight: 600; }
article img { max-width: 100%; height: auto; }
article ul, article ol { padding-left: 1.5em; line-height: 1.7; }
article li { margin: 0.25em 0; }
article hr { border: none; border-top: 1px solid #e0e0e0; margin: 2em 0; }

.top-buttons {
  position: fixed; top: 16px; right: 20px;
  display: flex; gap: 8px; z-index: 10;
}
.sidebar-buttons {
  position: relative; display: flex; gap: 6px; margin-top: 6px;
}
.icon-btn {
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  cursor: pointer; padding: 5px 6px; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1;
}
.icon-btn:hover { background: #f0f0f0; }

/* Dark mode */
body.dark { background: #161b22; color: #c9d1d9; }
body.dark .icon-btn { background: #161b22; }
body.dark .icon-btn { border-color: #333; }
body.dark .icon-btn:hover { background: #21262d; }
body.dark #sidebar { border-right-color: #30363d; }
body.dark #sidebar .repo-name { color: #c9d1d9; }
body.dark #home input { background: #0d1117; color: #c9d1d9; border-color: #333; }
body.dark #home button { background: #f0f0f0; color: #111; }
body.dark article a { color: #58a6ff; }
body.dark article pre { background: #0d1117; border-color: #30363d; }
body.dark article code { background: #21262d; }
body.dark article pre code { background: none; }
body.dark article th { background: #161b22; }
body.dark article th, body.dark article td { border-color: #30363d; }
body.dark article blockquote { border-left-color: #30363d; color: #8b949e; }
body.dark article h1 { border-bottom-color: #21262d; }
body.dark article h2 { border-bottom-color: #21262d; }
body.dark #sidebar a.nav-link { color: #8b949e; }
body.dark #sidebar a.nav-link.active { color: #f0f0f0; border-left-color: #f0f0f0; }

#menu-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 20;
  background: #fff; border: 1px solid #ddd; border-radius: 4px;
  padding: 6px 8px; cursor: pointer; font-size: 18px; line-height: 1;
  color: inherit;
}
body.dark #menu-toggle { background: #161b22; border-color: #333; }

#sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 14;
}

@media (max-width: 768px) {
  #menu-toggle { display: block; }

  #sidebar {
    position: fixed; left: -280px; top: 0; z-index: 15;
    width: 260px; height: 100vh;
    background: #fff; transition: left 0.2s ease;
  }
  body.dark #sidebar { background: #161b22; }

  #sidebar.open { left: 0; }
  #sidebar.open ~ #sidebar-overlay { display: block; }

  #content { padding: 28px 20px 60px; }
  .top-buttons { right: 12px; }
}

.sticky-title {
  display: none; position: fixed; top: 0; left: 260px; right: 0;
  padding: 15px 40px; font-weight: 600; font-size: 20px;
  background: #fff; border-bottom: 1px solid #e0e0e0;
  z-index: 10; font-family: monospace;
}
body.dark .sticky-title { background: #161b22; border-bottom-color: #30363d; color: #c9d1d9; }

@media (max-width: 768px) {
  .sticky-title { left: 0; padding-left: 60px; }
}