.ag section + section { margin-top: var(--space-7); }
.ag .ag-top { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-5); margin: 0 0 var(--space-6); }
.ag .ag-pdf { color: var(--text); font-weight: 600; white-space: nowrap; }
.ag .ag-h3 { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); }
.ag .ic { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ag .tag { font-size: var(--font-sm); font-weight: 600; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); padding: 0 var(--space-2); }

.ag .ring { display: block; width: 100%; max-width: 520px; margin: 0 auto var(--space-3); height: auto; }
.ag .ring a { cursor: pointer; text-decoration: none; }
.ag .spoke { stroke: var(--border); stroke-width: 1.5; }
.ag .core { fill: var(--accent); }
.ag .core-ic { fill: none; stroke: var(--on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag .core-t { fill: var(--on-accent); font-family: inherit; font-weight: 600; font-size: var(--font-base); text-anchor: middle; }
.ag .hubdot { fill: var(--surface-raised); stroke: var(--accent); stroke-width: 2; }
.ag .hub-ic { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ag .hub-t { fill: var(--text); font-family: inherit; font-weight: 600; font-size: var(--font-base); text-anchor: middle; }
.ag .hubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.ag .hub { background: var(--surface-raised); border: 1px solid var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-5); }
.ag .tree { display: block; width: 100%; height: auto; }
.ag .spine, .ag .thread { stroke: var(--border); stroke-width: 1.5; fill: none; }
.ag .node { fill: var(--canvas); stroke: var(--surface-recessed); }
.ag .node-in { fill: var(--surface-raised); stroke: var(--accent); }
.ag .node-t { fill: var(--text); font-family: inherit; font-weight: 500; font-size: var(--font-base); }
.ag .lead-t { fill: var(--accent); font-family: inherit; font-weight: 500; font-size: var(--font-micro); text-anchor: end; }
.ag .ex { margin-top: var(--space-3); font-size: var(--font-body); color: var(--text-secondary); }
.ag .ex summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: var(--font-body); }
.ag .ex ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }

.ag .anatomy { background: var(--surface-raised); border: 1px solid var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-5); }
.ag .chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.ag .chip-w { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.ag .chip { white-space: nowrap; border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4); font-weight: 600; font-size: var(--font-body); line-height: 1.3; }
.ag .chip-what { background: var(--accent); color: var(--on-accent); }
.ag .chip-where { background: var(--status-live); color: var(--on-accent); }
.ag .chip-when { background: var(--text); color: var(--on-accent); }
.ag .chip-how { background: var(--surface-raised); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.ag .chip-l { font-size: var(--font-sm); color: var(--text-secondary); font-weight: 500; }
.ag .pairs { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-4); }
.ag .pair { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.ag .weak { color: var(--text-secondary); font-style: italic; white-space: nowrap; }
.ag .arrow { color: var(--accent); font-weight: 700; }

.ag .flows { display: grid; gap: var(--space-5); }
.ag .flow { background: var(--surface-raised); border: 1px solid var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-5); }
.ag .flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-6); counter-reset: s; }
.ag .flow li { position: relative; background: var(--canvas); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); counter-increment: s; }
.ag .flow li + li::before { content: "→"; position: absolute; left: calc(-1 * var(--space-5)); top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; }
.ag .step-l { font-size: var(--font-sm); font-weight: 600; color: var(--accent); }
.ag .step-l::before { content: counter(s) "  "; }
.ag .step-q { font-size: var(--font-body); }

.ag .cards-set + .cards-set { margin-top: var(--space-5); }
.ag .starters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.ag .starter { background: var(--surface-raised); border: 1px solid var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.ag .starter-h { font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.ag .starter-q { font-size: var(--font-h3); font-weight: 600; line-height: 1.35; }
.ag .slot { font-style: italic; font-weight: 500; color: var(--accent); background: var(--canvas); border: 1px dashed var(--accent); border-radius: var(--radius-xs); padding: 0 var(--space-1); }
.ag .chip .slot { background: transparent; border-color: currentColor; color: inherit; }
.ag .good { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4); }
.ag .good li { display: flex; align-items: center; gap: var(--space-4); background: var(--surface-raised); border: 1px solid var(--surface-recessed); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-weight: 600; }
.ag .where { margin-top: var(--space-6); color: var(--text-secondary); font-size: var(--font-body); }
.ag .where summary { cursor: pointer; font-weight: 600; }
.ag .where-print { display: none; }

@media (max-width: 720px) {
  .ag .flow ol { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-6); }
  .ag .flow li + li::before { content: "↓"; left: 50%; top: calc(-1 * var(--space-5)); transform: translateX(-50%); }
  .ag .weak { white-space: normal; }
}