:root {
  color-scheme: light dark;
  --link-color: #1a5fb4;
  --link-hover: #0b3d82;
  --divider-color: #d0d0d0;
  --active-bg: rgba(26, 95, 180, 0.12);
  --active-category-bg: rgba(26, 95, 180, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --link-color: #8ab4f8;
    --link-hover: #aecbfa;
    --divider-color: #444;
    --active-bg: rgba(138, 180, 248, 0.18);
    --active-category-bg: rgba(138, 180, 248, 0.08);
  }
}

* { box-sizing: border-box; }

body { font-family: system-ui, sans-serif; margin: 0; }

a:link, a:visited { color: var(--link-color); }
a:hover, a:focus-visible { color: var(--link-hover); }

#layout {
  display: flex;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

#sidebar {
  flex: 0 0 240px;
  padding: 1rem;
  border-right: 1px solid var(--divider-color);
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: auto;
}

#content {
  flex: 1;
  min-width: 0;
  padding: 1rem;
  overflow-wrap: break-word;
}
#content pre, #content table { overflow-x: auto; }

#header h1, #header h3 { margin: 0.2rem 0; }

ul { padding-left: 1.5rem; }

.top-nav { list-style: none; padding-left: 0; font-size: 0.92rem; }
.top-nav > li { margin-bottom: 0.7rem; }
.top-nav ul { margin-top: 0.35rem; }
.top-nav ul li { margin-bottom: 0.4rem; }

.top-nav li.active-category > a { font-weight: bold; }

.top-nav a.active {
  background: var(--active-bg);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  margin-left: -0.3rem;
}
.top-nav a.active::before { content: "\25b8\00a0"; }

.nav-toggle { display: none; }
.nav-toggle-label { display: none; }

@media (max-width: 700px) {
  #layout { flex-direction: column; }
  #sidebar {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--divider-color);
    position: static;
    max-height: none;
  }
  .nav-toggle-label {
    display: block;
    cursor: pointer;
    font-weight: bold;
    padding: 0.5rem 0;
  }
  #sidebar nav {
    display: none;
    max-height: 50vh;
    overflow-y: auto;
  }
  #sidebar .nav-toggle:checked ~ nav { display: block; }
  #content { width: 100%; }
}