/* Independent teaching illustrations; all controls keep normal document flow. */
.sanli-visual{width:100%;min-width:0;margin:0 0 24px;padding:16px;border:1px solid #dfe7da;border-radius:14px;background:#f9fbf6;box-sizing:border-box;overflow-wrap:anywhere}
.visual-sign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:18px;align-items:start;justify-items:center}
.visual-sign{margin:0;width:100%;max-width:210px;text-align:center;min-width:0}
.visual-sign svg{display:block;width:100%;height:auto;max-width:160px;aspect-ratio:1;margin:0 auto}
.visual-sign figcaption{font-size:18px;line-height:1.6;font-weight:600;color:#2d4a3c;margin:9px 0 0}
.visual-stage{display:block;width:100%;height:auto;max-height:280px;aspect-ratio:12/7;border:1px solid #d9e3d5;border-radius:9px;background:#edf3e9;overflow:hidden}
.visual-actor-label{font-size:22px;font-weight:700;fill:#203d30;paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.visual-cue{font-size:18px;font-weight:600;fill:#294d3e;paint-order:stroke;stroke:#fff;stroke-width:4px}
.visual-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0;font-size:16px;line-height:1.7;color:#334d3d}
.visual-legend>span{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.visual-legend i{width:14px;height:14px;border-radius:50%;border:1px solid #24453333;flex-shrink:0}
.visual-description{font-size:16px;line-height:1.85;color:#385440;margin:12px 0;white-space:pre-line;overflow-wrap:anywhere}
.visual-controls{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 10px;align-items:stretch}
.visual-controls button{font:inherit;font-size:16px;line-height:1.6;min-width:80px;min-height:44px;padding:8px 13px;border:1px solid #bdcdb3;border-radius:8px;background:#fff;color:#345b3e;white-space:normal;max-width:100%;flex:1 1 90px;cursor:pointer}
.visual-controls button:first-child{color:#fff;background:#3c7151;border-color:#3c7151}
.visual-controls button:hover:not(:disabled){border-color:#627f55;box-shadow:0 0 0 1px #627f55}
.visual-controls button:disabled{opacity:.5;cursor:default}
.visual-controls button:focus-visible,.visual-progress input:focus-visible{outline:3px solid #d67b2e;outline-offset:3px}
.visual-progress{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-width:0;font-size:15px;line-height:1.7;color:#486346;margin:8px 0}
.visual-progress input{flex:1 1 130px;min-width:0;max-width:100%;min-height:44px;accent-color:#3c7151;padding:0;margin:0}
.visual-progress output{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.visual-note{font-size:14px;line-height:1.8;color:#61745a;margin:13px 0 0;overflow-wrap:anywhere}
body.large .sanli-visual{padding:17px}
body.large .visual-sign-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
body.large .visual-sign figcaption{font-size:22px}
body.large .visual-description,body.large .visual-legend{font-size:20px;line-height:1.85}
body.large .visual-controls button{font-size:20px;line-height:1.6;flex-basis:110px;padding:10px 14px}
body.large .visual-progress,body.large .visual-note{font-size:18px;line-height:1.8}
@media(max-width:480px){
  .sanli-visual,body.large .sanli-visual{padding:12px;border-radius:11px}
  .visual-sign-grid{gap:15px}
  .visual-sign svg{max-width:145px}
  .visual-controls{gap:8px}
  .visual-controls button{flex-basis:85px;padding:8px 10px}
  body.large .visual-controls button{flex-basis:105px;padding:10px}
  .visual-progress>span{flex-basis:100%}
  .visual-progress input{flex-basis:110px}
}
@media(prefers-reduced-motion:reduce){.sanli-visual *{animation:none!important;transition:none!important}}