.system-tree .level-1 { grid-template-columns: minmax(0, 1fr); }
.system-tree ul[hidden] { display: none; }
.system-node > div { min-width: 0; }
.system-node .system-explanation { margin-top: 14px; color: #c7d0c8; font-size: 13px; line-height: 1.7; }
.system-node .system-example { margin-top: 12px; padding: 12px 14px; border-left: 2px solid var(--node); background: #14271e; color: #dce7df; font-size: 13px; line-height: 1.7; }
.system-node .system-explanation strong,
.system-node .system-example strong { display: block; margin-bottom: 4px; color: var(--node); font-size: 11px; }
@media (max-width: 720px) {
  .system-tree > ul { padding-left: 0; }
  .system-node:has(> button) { flex-wrap: wrap; }
  .system-node:has(> button) > div { flex-basis: 100%; }
  .system-tree li > ul { padding-left: 14px; margin-left: 9px; }
  .system-tree li > ul > li::before { left: -14px; width: 14px; }
  .system-node { padding: 12px 10px; }
}

.system-extension{margin-bottom:32px;padding:24px;border:1px solid #496352;border-radius:10px;background:#10251b}.system-extension span{font:10px monospace;color:#caff38}.system-extension h2{font:500 27px Georgia,serif}.system-extension p{max-width:900px;color:#bbcec0;line-height:1.7}.system-extension a{color:#7fe3ba;text-decoration:underline;text-underline-offset:3px}