:root {
  --manual-text: #202124;
  --manual-muted: #5f6368;
  --manual-border: #d9dee7;
  --manual-surface: #f8fafc;
  --manual-accent: #2563eb;
  --manual-accent-soft: #eff6ff;
  --manual-important: #b42318;
  --manual-important-soft: #fff4f2;
  --manual-tip: #047857;
  --manual-tip-soft: #ecfdf5;
  --manual-note: #4f46e5;
  --manual-note-soft: #f5f3ff;
}

body {
  color: var(--manual-text);
  font-family: "Noto Sans JP", "Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  line-height: 1.85;
}

#header,
#content,
#footnotes,
#footer {
  max-width: 1120px;
}

#header > h1:first-child {
  color: #111827;
  font-size: 2.15rem;
  letter-spacing: 0;
  line-height: 1.35;
}

#header .details {
  color: var(--manual-muted);
}

#content h2,
#content h3,
#content h4,
#content h5 {
  color: #111827;
  letter-spacing: 0;
}

#content h2 {
  border-bottom: 2px solid var(--manual-border);
  margin-top: 2.4em;
  padding-bottom: 0.25em;
}

#content h3 {
  border-left: 4px solid var(--manual-accent);
  margin-top: 2em;
  padding-left: 0.55em;
}

#content h4 {
  color: #1f2937;
  margin-top: 1.7em;
}

#toc.toc2 {
  background: #ffffff;
  border-right: 1px solid var(--manual-border);
}

#toc.toc2 #toctitle {
  color: #111827;
  font-weight: 700;
}

#toc.toc2 a {
  color: #374151;
}

#toc.toc2 a:hover {
  color: var(--manual-accent);
}

.paragraph p,
.dlist dd,
.ulist li,
.olist li {
  font-size: 1rem;
}

.imageblock {
  margin: 1.2rem 0 1.8rem;
}

.imageblock > .content {
  overflow-x: auto;
}

.imageblock img {
  background: #ffffff;
  border: 1px solid var(--manual-border);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.10);
  height: auto;
  max-width: 100%;
}

.imageblock img.manual-lightbox-target {
  cursor: zoom-in;
}

.imageblock img.manual-lightbox-target:focus {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}

.imageblock .title {
  color: var(--manual-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0.45rem;
}

.admonitionblock {
  background: var(--manual-surface);
  border: 1px solid var(--manual-border);
  border-left: 5px solid var(--manual-accent);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
}

.admonitionblock td.icon {
  padding-right: 0.65rem;
}

.admonitionblock td.icon .title {
  color: var(--manual-accent);
}

.admonitionblock.important {
  background: var(--manual-important-soft);
  border-left-color: var(--manual-important);
}

.admonitionblock.important td.icon .title {
  color: var(--manual-important);
}

.admonitionblock.tip {
  background: var(--manual-tip-soft);
  border-left-color: var(--manual-tip);
}

.admonitionblock.tip td.icon .title {
  color: var(--manual-tip);
}

.admonitionblock.note {
  background: var(--manual-note-soft);
  border-left-color: var(--manual-note);
}

.admonitionblock.note td.icon .title {
  color: var(--manual-note);
}

.dlist dt {
  color: #111827;
  font-weight: 700;
}

code,
kbd,
pre {
  font-family: "UDEV Gothic", "Cascadia Mono", "Consolas", monospace;
}

.manual-lightbox-open {
  overflow: hidden;
}

.manual-lightbox {
  align-items: center;
  background: rgba(17, 24, 39, 0.88);
  display: none;
  inset: 0;
  justify-content: center;
  padding: 32px;
  position: fixed;
  z-index: 10000;
}

.manual-lightbox.is-open {
  display: flex;
}

.manual-lightbox__figure {
  margin: 0;
  max-height: 100%;
  max-width: min(1180px, 96vw);
}

.manual-lightbox__image {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  display: block;
  max-height: calc(100vh - 112px);
  max-width: 100%;
}

.manual-lightbox__caption {
  color: #f8fafc;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 0.75rem;
  text-align: center;
}

.manual-lightbox__close {
  align-items: center;
  background: #ffffff;
  border: 0;
  border-radius: 999px;
  color: #111827;
  cursor: pointer;
  display: flex;
  font-size: 1.7rem;
  height: 44px;
  justify-content: center;
  line-height: 1;
  position: fixed;
  right: 24px;
  top: 20px;
  width: 44px;
}

.manual-lightbox__close:focus {
  outline: 3px solid rgba(147, 197, 253, 0.85);
  outline-offset: 3px;
}

@media screen and (max-width: 768px) {
  #header > h1:first-child {
    font-size: 1.6rem;
  }

  #content h2 {
    margin-top: 2em;
  }

  #content h3 {
    margin-top: 1.6em;
  }

  .manual-lightbox {
    padding: 16px;
  }

  .manual-lightbox__close {
    right: 12px;
    top: 12px;
  }

  .manual-lightbox__image {
    max-height: calc(100vh - 96px);
  }
}

@media print {
  #toc {
    display: none;
  }

  body {
    font-size: 10.5pt;
  }

  .imageblock img,
  .admonitionblock {
    box-shadow: none;
  }

  .manual-lightbox {
    display: none !important;
  }
}