body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 860px; margin: 0 auto; padding: 24px; line-height: 1.6; color: #1a1a1a; }
nav { margin-bottom: 24px; font-size: 0.9em; }
nav a { margin-right: 12px; }
h1, h2, h3 { line-height: 1.3; }
pre { background: #f4f4f4; padding: 12px; overflow-x: auto; border-radius: 4px; }
code { background: #f4f4f4; padding: 2px 4px; border-radius: 3px; }
pre code { background: none; padding: 0; }
#search-box { width: 100%; padding: 8px; font-size: 1em; margin-bottom: 16px; box-sizing: border-box; }
#search-results { list-style: none; padding: 0; }
#search-results li { margin-bottom: 8px; }
body.with-toc { max-width: 1280px; }
.layout { display: flex; gap: 32px; align-items: flex-start; }
.toc { flex: 0 0 290px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; font-size: 0.9em; line-height: 1.45; border-right: 1px solid #e5e7eb; padding-right: 14px; box-sizing: border-box; }
.content { flex: 1 1 auto; min-width: 0; }
.toc-heading { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin: 0 0 8px; }
.toc details { margin: 3px 0; }
.toc summary { cursor: pointer; padding: 2px 0; }
.toc summary a { color: inherit; text-decoration: none; }
.toc summary a:hover { text-decoration: underline; }
.toc .toc-playbook > summary { font-weight: 600; }
.toc .toc-chapter { margin-left: 14px; }
.toc ul { list-style: none; margin: 2px 0 8px 30px; padding: 0; }
.toc li { margin: 3px 0; }
.toc li a { color: #4b5563; text-decoration: none; }
.toc li a:hover { color: #5b21b6; text-decoration: underline; }
.toc .toc-current > summary { color: #5b21b6; font-weight: 600; }
@media (max-width: 800px) {
  .layout { display: block; }
  .toc { position: static; max-height: none; border-right: none; border-bottom: 1px solid #e5e7eb; padding: 0 0 12px; margin-bottom: 20px; }
}
body.wide { max-width: none; }
#mm-breadcrumb { margin: 0 0 16px; font-size: 0.95em; }
#mm-breadcrumb button { background: none; border: none; padding: 0; margin: 0; color: #5b21b6; text-decoration: underline; cursor: pointer; font: inherit; }
#mm-breadcrumb .mm-crumb-current { font-weight: 600; }
#mm-breadcrumb .mm-crumb-sep { margin: 0 8px; color: #999; }
.mm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.mm-box { display: block; padding: 18px; border: 1px solid #ccc; border-radius: 10px; background: #f7f7f9; cursor: pointer; text-align: left; font: inherit; color: #1a1a1a; text-decoration: none; box-sizing: border-box; width: 100%; }
.mm-box:hover { background: #eef2ff; border-color: #6366f1; }
.mm-box-title { display: block; font-weight: 600; }
.mm-box.mm-leaf { background: #fff; border-style: dashed; }
.mm-box.mm-leaf .mm-box-title { font-weight: 400; }
.mm-box-count { display: block; font-size: 0.85em; color: #666; margin-top: 6px; }
.viz-container { width: 100%; height: 640px; border: 1px solid #ddd; border-radius: 8px; position: relative; }
.graph-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.graph-tabs a { padding: 6px 12px; border: 1px solid #d1d5db; border-radius: 999px; color: #374151; text-decoration: none; font-size: 0.9em; }
.graph-tabs a:hover { border-color: #6366f1; background: #eef2ff; }
.graph-tabs a.current { background: #6366f1; border-color: #6366f1; color: #fff; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.88em; color: #4b5563; margin: 0 0 6px; }
.graph-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 2px solid; }
.swatch-home { background: #e0e7ff; border-color: #6366f1; }
.swatch-shared { background: #fef3c7; border-color: #d97706; }
.swatch-external { background: #f3f4f6; border-color: #9ca3af; border-style: dashed; }
.graph-hint { font-size: 0.88em; color: #6b7280; margin: 0 0 10px; }
div.vis-tooltip { position: absolute; padding: 6px 10px; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); font-size: 13px; color: #1f2937; white-space: nowrap; pointer-events: none; z-index: 10; }