.process { margin-top: var(--section); }
.section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: var(--lead); }
.section-intro > p { font-size: 1rem; line-height: 1.6; max-width: 480px; color: #555; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step-visual { position: relative; aspect-ratio: 4 / 3; background: #f5f5f3; overflow: hidden; margin-bottom: 18px; }
.visual-label { position: absolute; left: var(--edge); top: var(--edge); font-size: 0.75rem; color: #555; z-index: 1; }
.source-visual { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
.source-visual::before { content: ""; grid-area: 1 / 1; aspect-ratio: 4 / 3; }
.source-content { grid-area: 1 / 1; display: grid; grid-template: auto 1fr / minmax(0, 1fr); gap: 16px; padding: 22px 24px; min-width: 0; }
.source-visual .visual-label { position: static; }
.source-visual pre { align-self: center; justify-self: center; min-width: 0; max-width: 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: clamp(0.65rem, 0.85vw, 0.8125rem); line-height: 1.55; color: #333; }
.source-visual code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.engine-visual { background: #e9e9e6; }
.engine-visual img { width: 100%; height: 100%; }
.export-visual { background: #eaeaf2; }
.export-visual img { width: 100%; height: 100%; object-fit: cover; }
.steps h3 { font-size: 1rem; line-height: 1.5; margin-bottom: 7px; }
.steps h3 span { margin-right: 8px; color: #666; font-size: 0.875rem; }
.steps p { font-size: 0.9375rem; line-height: 1.65; color: #555; max-width: 330px; }
@media (min-width: 1600px) {
  .section-intro, .steps { max-width: 1600px; }
}
@media (max-width: 850px) {
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .source-visual pre { font-size: 0.65rem; }
  :root { --edge: 16px; }
}
@media (max-width: 700px) {
  .section-intro { gap: 18px; }
  .section-intro > p { font-size: 1rem; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .steps p { max-width: 100%; }
  .step-visual { margin-bottom: 16px; }
  .source-visual pre { font-size: 0.8125rem; }
}
.missing { display: flex; flex-direction: column; gap: 24px; min-height: 60vh; justify-content: center; }
.missing a { color: #111; }