.sr-visual { min-width: 0; }
.sr-visual p { margin: 0; }
.sr-visual .sr-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sr-flow .figure-arrow { width: 28px; top: 50%; transform: translateY(-50%); }
.sr-flow .figure-step { padding: 20px 18px; }
.sr-flow .figure-step p { font-size: 15px; }
.sr-visual .sr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.sr-card { padding: 20px; border: 1px solid var(--visual-line); background: var(--visual-surface); }
.sr-card h4 { font-size: 17px; }
.sr-visual .sr-card-report { border-color: var(--visual-yellow); }
.sr-card-report h4 { color: var(--visual-yellow); }
.sr-visual .sr-layers { display: grid; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
.sr-visual .sr-layer { margin: 0; padding: 12px 14px; font-weight: 700; overflow-wrap: anywhere; }
.sr-visual .sr-layer-in { color: var(--visual-ink); background: var(--visual-yellow); }
.sr-visual .sr-layer-out { border: 1px dashed var(--visual-muted); color: var(--visual-muted); font-weight: 400; }
.sr-layer-out span { display: block; margin-top: 2px; font-size: 13px; }
@media (max-width: 700px) {
  .sr-visual .sr-flow { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .sr-flow .figure-arrow { left: calc(50% - 14px); top: calc(100% + 3px); transform: rotate(90deg); }
  .sr-visual .sr-cards { grid-template-columns: minmax(0, 1fr); }
}