.interactive-list { display: flex; flex-direction: column; gap: 2.5rem; }
.interactive { border-top: 1px solid var(--border); padding: 1.5rem 0 0; }
.interactive:first-child { border-top: none; padding-top: 0; }
.interactive h2 { font-size: 1rem; font-weight: 400; margin: 0 0 0.5rem; letter-spacing: 0; font-family: inherit; }
.interactive .desc { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; line-height: 1.5; max-width: 70ch; }
.interactive .svg-host, .interactive .dynkin-host { display: flex; justify-content: center; margin: 0.5rem 0 1rem; }
.interactive .svg-host svg { max-width: 100%; height: auto; border-radius: 4px; }

.controls { display: flex; align-items: center; gap: 0.75rem; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.controls label { color: var(--fg); font-family: inherit; font-size: 0.85rem; }
.controls input[type="range"] { flex: 1; accent-color: var(--accent-strong); min-width: 120px; }
.controls output { color: var(--accent-strong); font-family: inherit; font-size: 0.85rem; min-width: 4rem; text-align: right; }
.controls button, .controls select {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 3px; padding: 0.3rem 0.7rem; font-size: 0.82rem; cursor: pointer; font-family: inherit;
}
.controls button:hover, .controls select:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.status-label { color: var(--muted); font-family: inherit; font-size: 0.82rem; }