/* ドキュメントページ */
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; padding: 30px 0 10px; align-items: start; }
.doc-side { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; font-size: 14px; }
.docnav { display: grid; gap: 4px; margin-bottom: 18px; }
.docnav a { text-decoration: none; color: var(--ink-soft); font-weight: 700; padding: 8px 12px; border-radius: 4px; border: 1.5px solid transparent; }
.docnav a[aria-current="page"] { color: var(--ink); background: var(--label); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.toc summary { cursor: pointer; font-family: var(--f-pixel); font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 4px; border-left: 2px solid var(--rule); }
.toc li a { display: block; padding: 3px 10px; color: var(--ink-soft); text-decoration: none; line-height: 1.5; }
.toc li a:hover { color: var(--frog-deep); }
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-side { position: static; max-height: none; }
  .docnav { grid-auto-flow: column; overflow-x: auto; }
  .toc { background: var(--label); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; }
  .toc:not([open]) ol { display: none; }
}

.doc { padding: 34px clamp(18px, 4vw, 46px) 40px; min-width: 0; line-height: 1.95; }
.doc-src { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 18px; }
.doc h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 4vw, 36px); margin: 0 0 18px; }
.doc h2 { font-size: 22px; margin: 48px 0 14px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.doc h3 { font-size: 17px; margin: 32px 0 10px; color: var(--frog-deep); }
.doc h4 { font-size: 15px; margin: 24px 0 8px; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc li { margin-bottom: 4px; }
.doc :not(pre) > code { font-size: .88em; background: var(--paper-2); padding: 1px 6px; border-radius: 3px; word-break: break-word; }
.doc pre { margin: 0 0 18px; }
.doc pre code { background: none; padding: 0; font-size: 13px; }
.doc blockquote { margin: 0 0 16px; padding: 10px 18px; border-left: 4px solid var(--frog); background: var(--frog-wash); border-radius: 0 4px 4px 0; }
.doc blockquote p:last-child { margin-bottom: 0; }
.doc hr { border: 0; border-top: 1px dashed var(--rule); margin: 36px 0; }
.doc table { border-collapse: collapse; margin: 0 0 18px; font-size: 14px; display: block; overflow-x: auto; max-width: 100%; }
.doc th, .doc td { border: 1px solid var(--rule); padding: 7px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--paper-2); white-space: nowrap; }
.doc img { display: inline; }
.doc h2[id], .doc h3[id] { scroll-margin-top: 80px; }