.crop-practice{margin-block:32px;padding:clamp(20px,3vw,32px);border:1px solid #ccd9e5;border-block-start:4px solid #28689f;border-radius:14px;background:#fff;color:#20242a}
.crop-practice>h2{margin-block:0 16px;color:#002355}.crop-practice p{line-height:1.7}.crop-practice [hidden]{display:none}
.crop-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);gap:32px;align-items:start;margin-block:24px}
.crop-preview{margin:0;min-width:0}.crop-frame{aspect-ratio:1;overflow:hidden;border:2px solid #17314b;background:#edf3f9;max-width:560px;margin-inline:auto}
.crop-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;max-width:none}
.crop-preview figcaption{font-size:.95rem;line-height:1.6;margin-block-start:16px}.crop-preview figcaption strong{display:block;color:#002355;margin-block-end:6px}
.crop-controls{min-width:0;padding:24px;border:1px solid #ccd9e5;border-radius:12px;background:#f5f8fb}
.crop-controls label{display:block;font-weight:700;margin-block-end:8px}.crop-controls select{width:100%;min-height:48px;margin-block-end:24px;font:inherit}
.crop-controls input[type=range]{display:block;width:100%;min-height:44px;direction:ltr;margin-block:8px 20px;accent-color:#28689f}
.crop-controls input:disabled{opacity:.45}.crop-controls output{font-weight:400;margin-inline-start:8px}.crop-controls button{margin-block-start:8px;white-space:normal}
.crop-controls :is(input,select,button):focus-visible{outline:3px solid #28689f;outline-offset:4px}
.crop-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:24px}.crop-readout>div{padding:16px;border:1px solid #d5e0eb;border-radius:10px}.crop-readout dt{font-weight:700;color:#002355}.crop-readout dd{margin:8px 0 0;font-size:1.1rem}
.crop-message{padding:16px;border-inline-start:4px solid #28689f;background:#edf3f9;font-weight:700}.crop-note{font-size:.95rem;color:#465567}.crop-practice ol{padding-inline-start:24px}.crop-practice li{margin-block:12px}.crop-practice--case{background:#f5f8fb}
@media(max-width:767px){.crop-workspace{grid-template-columns:minmax(0,1fr);gap:20px}.crop-frame{max-width:400px}.crop-controls{padding:20px}.crop-readout{grid-template-columns:minmax(0,1fr)}}