/* Standalone installation illustration: replaceable without changing the guide. */
.technical-header { margin: 48px 48px 0; max-width: 1080px; }
.technical-version { color: var(--muted); font-size: 13px; margin-top: 16px; }
.install-diagram { margin: 44px 0 0; display: grid; grid-template-columns: minmax(240px, .85fr) minmax(320px, 1.15fr); column-gap: 64px; align-items: start; }
.diagram-command { padding-top: 44px; display: flex; flex-direction: column; gap: 18px; }
.diagram-command-label { font-size: 12px; color: var(--muted); }
.diagram-command > code { font-size: 17px; color: var(--gold-bright); }
.diagram-connection { width: 100%; height: 1px; background: var(--gold-line); transform-origin: left; margin-top: 12px; }
.repo-label { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.repo-label svg { width: 26px; height: 22px; color: var(--muted); }
.repo-tree { margin: 18px 0 0 12px; padding-left: 24px; border-left: 1px solid var(--line); font-size: 13px; }
.tree-existing { color: var(--muted); margin-bottom: 18px; }
.memory-label { color: var(--gold-bright); font-family: 'SFMono-Regular',Consolas,monospace; }
.memory-files { margin: 12px 0 18px 5px; padding-left: 20px; border-left: 1px solid var(--gold-line); }
.memory-files > div { margin-top: 9px; }
.memory-files > div > span { display: inline-block; color: var(--muted); font-size: 11px; margin-left: 16px; }
.support-files { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; padding-top: 6px; }
.history-file { margin-left: 18px; }
.agent-pointers { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11px; }
.agent-pointers span { flex-basis: 100%; color: var(--muted); }
.diagram-end { grid-column: 1/-1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; margin-top: 32px; }
.diagram-end a { color: var(--muted); min-height: 32px; }
.diagram-end a:hover { color: var(--gold-bright); }
.diagram-controls { display: flex; align-items: center; gap: 24px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.diagram-controls button { background: none; border: 0; padding: 0; min-height: 44px; font-size: inherit; }
.diagram-controls a { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; }
.diagram-controls button:hover,.diagram-controls a:hover { color: var(--gold-bright); }
#contents { scroll-margin-top: 24px; }
@media (max-width:760px) {
  .technical-header { margin: 28px 22px 0; }
  .install-diagram { grid-template-columns: 1fr; margin-top: 28px; gap: 28px; }
  .diagram-command { padding-top: 0; gap: 10px; }
  .diagram-command > code { font-size: 15px; }
  .diagram-connection { display: none; }
  .diagram-repo { padding-left: 8px; }
  .memory-files > div > span { margin-left: 12px; }
  .diagram-end { margin-top: 0; gap: 6px; }
  .diagram-controls { gap: 16px; flex-wrap: wrap; }
  .diagram-controls > span { flex-basis: 100%; }
}