:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1f2328;
  --muted: #59636e;
  --link: #0550ae;
  --border: #d6d6d6;
  --sidebar-bg: #f7f7f7;
  --code-bg: #f7f7f7;
  --code-text: #1f2328;
  --mark-bg: #fff8c5;
  --k-syntax: #cf222e;
  --k-type: #953800;
  --k-operator: #8250df;
  --k-number: #0550ae;
  --k-string: #0a3069;
  --k-comment: #59636e;
  --k-paren: #59636e;
  --k-symbol: #1f2328;
  --k-invalid: #82071e;
  --k-invalid-bg: #ffebe9;
  --sans: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono CJK JP", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --text: #e6edf3;
    --muted: #9198a1;
    --link: #4493f8;
    --border: #444444;
    --sidebar-bg: #1b1b1b;
    --code-bg: #1b1b1b;
    --code-text: #e6edf3;
    --mark-bg: #5a4a0b;
    --k-syntax: #ff7b72;
    --k-type: #ffa657;
    --k-operator: #d2a8ff;
    --k-number: #79c0ff;
    --k-string: #a5d6ff;
    --k-comment: #9198a1;
    --k-paren: #9198a1;
    --k-symbol: #e6edf3;
    --k-invalid: #ffdcd7;
    --k-invalid-bg: #67060c;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-autospace: normal; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.75 var(--sans); }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* Narrow screens: a top bar and an off-canvas sidebar that opens below it, so the
   menu button stays reachable while the drawer is open. */
:root { --topbar: 3rem; }
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem;
  height: var(--topbar); padding: 0 1rem; background: var(--sidebar-bg); border-bottom: 1px solid var(--border);
}
.topbar .site { color: var(--text); font-weight: 600; text-decoration: none; }
.menu {
  font: inherit; line-height: 1.5; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: .2rem .8rem; cursor: pointer;
}
#Sidebar {
  position: fixed; top: var(--topbar); bottom: 0; left: 0; z-index: 4; width: min(20rem, 85vw);
  transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s;
  overflow-y: auto; padding: 1rem; background: var(--sidebar-bg); border-right: 1px solid var(--border);
  font-size: .9rem; line-height: 1.5;
}
body.sidebar-open #Sidebar { transform: none; visibility: visible; box-shadow: 0 0 1.5rem rgb(0 0 0 / 30%); }
@media (prefers-reduced-motion: reduce) {
  #Sidebar { transition: none; }
}

/* Wide screens: the sidebar is a sticky column. */
@media (min-width: 60rem) {
  body { display: grid; grid-template-columns: 17rem minmax(0, 1fr); }
  .topbar { display: none; }
  #Sidebar {
    position: sticky; top: 0; height: 100vh; width: auto; transform: none; visibility: visible; transition: none;
  }
  body.sidebar-open #Sidebar { box-shadow: none; }
}

#Sidebar .site { display: block; margin-bottom: .75rem; font-size: 1.05rem; font-weight: 700; color: var(--text); text-decoration: none; }
#Sidebar .site[aria-current="page"] { text-decoration: underline; }
#Search {
  width: 100%; font: inherit; padding: .4rem .6rem; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px;
}
.chapters ol, .chapters ul, #Results ol { list-style: none; margin: 0; padding: 0; }
.chapters { margin-top: 1rem; }
.chapters ul { margin: .2rem 0 .4rem .3rem; padding-left: .6rem; border-left: 1px solid var(--border); }
.chapters a { display: block; padding: .2rem .4rem; border-radius: 4px; color: var(--text); text-decoration: none; }
.chapters ul a { color: var(--muted); }
.chapters a[aria-current="page"] { font-weight: 700; }
.chapters a:hover, #Results a:hover { background: var(--bg); text-decoration: underline; }

#Results { margin-top: .75rem; }
#Results .summary { margin: 0 0 .5rem; color: var(--muted); }
#Results a { display: block; padding: .4rem; border-radius: 4px; color: var(--text); text-decoration: none; }
#Results .heading { display: block; font-weight: 600; color: var(--link); }
#Results .page, #Results .excerpt { display: block; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
mark { background: var(--mark-bg); color: var(--text); }

main { min-width: 0; padding: 1.5rem 1rem 3rem; }
@media (min-width: 60rem) {
  main { padding: 2rem 2.5rem 4rem; }
}
article, .pager { max-width: 46rem; margin: 0 auto; }
article h1 { margin: .5rem 0 1.5rem; font-size: 2rem; line-height: 1.3; }
article h2 { margin: 2.5rem 0 1rem; padding-bottom: .3rem; font-size: 1.5rem; line-height: 1.35; border-bottom: 1px solid var(--border); }
article h3 { margin: 2rem 0 .75rem; font-size: 1.2rem; line-height: 1.4; }
article :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 4rem; }
code { padding: .1em .3em; border-radius: 4px; font-family: var(--mono); font-size: .9em; color: var(--code-text); background: var(--code-bg); overflow-wrap: anywhere; }
pre {
  overflow-x: auto; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 6px;
  font-size: .875rem; line-height: 1.5; color: var(--code-text); background: var(--code-bg);
}
pre code { padding: 0; font-size: inherit; background: none; overflow-wrap: normal; }
table { display: block; overflow-x: auto; margin: 1rem 0; border-collapse: collapse; }
th, td { padding: .4rem .7rem; border: 1px solid var(--border); vertical-align: top; }
th { background: var(--sidebar-bg); }
blockquote { margin: 1rem 0; padding: 0 1rem; color: var(--muted); border-left: .25rem solid var(--border); }

/* One color per src/highlight.js token kind; whitespace is unstyled text. */
.k-syntax { color: var(--k-syntax); }
.k-type { color: var(--k-type); }
.k-operator { color: var(--k-operator); }
.k-number { color: var(--k-number); }
.k-string { color: var(--k-string); }
.k-comment { color: var(--k-comment); }
.k-paren { color: var(--k-paren); }
.k-symbol { color: var(--k-symbol); }
.k-invalid { color: var(--k-invalid); background: var(--k-invalid-bg); text-decoration: underline wavy; }

.pager { display: flex; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.pager .next { margin-left: auto; text-align: right; }
.pager .direction { display: block; font-size: .85rem; color: var(--muted); }