/* RC171: all three modes, no external resources, readable mobile SVG visuals. */
.sk171-visual{--sk171-bg:#edf5fc;--sk171-card:#fff;--sk171-text:#172f49;--sk171-muted:#405f78;--sk171-edge:#aec8dc;--sk171-head:#205c88;background:var(--sk171-bg);color:var(--sk171-text);border:1px solid var(--sk171-edge);border-radius:18px;margin:22px 0;padding:18px;overflow-wrap:anywhere}
.sk171-visual-head>span{font-size:11px;letter-spacing:.08em;font-weight:800;color:var(--sk171-head)}.sk171-visual-head h3{font-size:clamp(18px,2.5vw,23px);line-height:1.3;color:var(--sk171-text);margin:6px 0}.sk171-visual-head p{margin:0 0 15px;font-size:14px;line-height:1.65;color:var(--sk171-muted)}
.sk171-visual-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(210px,1fr);gap:14px;min-width:0}.sk171-visual-stage{min-width:0;align-self:start;background:#f6fbff;border:1px solid #9fb9d0;padding:10px;border-radius:12px}.sk171-visual-stage svg{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:600/245}.sk171-visual-controls{min-width:0;background:var(--sk171-card);border:1px solid var(--sk171-edge);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:13px}.sk171-visual-controls label{color:var(--sk171-text);font-size:14px;font-weight:750}.sk171-visual-controls input[type=range]{width:100%;accent-color:#328ac2;min-height:28px;cursor:pointer}.sk171-visual-controls select{width:100%;min-height:43px;border-radius:9px;background:var(--sk171-bg);color:var(--sk171-text);border:1px solid var(--sk171-edge);padding:8px}.sk171-visual-controls :is(input,select):focus-visible{outline:3px solid #4d9ed8;outline-offset:3px}.sk171-visual-controls output{min-height:55px;display:block;border:1px solid var(--sk171-edge);border-radius:9px;padding:10px;font-weight:800;line-height:1.6;background:var(--sk171-bg);color:var(--sk171-text)}.sk171-visual-note{color:var(--sk171-muted);font-size:12px;line-height:1.65;margin:0}
:is(html.lessonsky-dark body,body.lessonsky-dark) .sk171-visual{--sk171-bg:#142840;--sk171-card:#213b57;--sk171-text:#f2f8ff;--sk171-muted:#c3d7e9;--sk171-edge:#4a7095;--sk171-head:#acd9fc}
:is(html.lessonsky-dim body,body.lessonsky-dim) .sk171-visual{--sk171-bg:#23384d;--sk171-card:#304e65;--sk171-text:#f6faff;--sk171-muted:#d0e1ef;--sk171-edge:#66839b;--sk171-head:#badfff}
@media(max-width:790px){.sk171-visual-grid{grid-template-columns:minmax(0,1fr)}.sk171-visual{padding:14px}.sk171-visual-stage{padding:6px}.sk171-visual-controls{gap:10px}}
@media(forced-colors:active){.sk171-visual,.sk171-visual-controls,.sk171-visual-stage{forced-color-adjust:auto;background:Canvas;color:CanvasText;border:1px solid CanvasText}}