.sm{margin:24px 0}.sm [hidden]{display:none!important}.sm-controls{display:flex;flex-wrap:wrap;align-items:end;gap:14px 22px;margin:22px 0}.sm-controls label{display:grid;gap:6px;min-width:150px}.sm-controls input,.sm-controls select{min-height:42px;max-width:100%;padding:7px;border:1px solid #ccd2df;border-radius:5px}.sm-controls input[type=checkbox]{min-height:0}.sm-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0}.sm-compare h2,.sm h2{font-size:19px}.sm-compare canvas{width:100%;max-height:420px;object-fit:contain;background-color:#f2f3f6;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border:1px solid #d9deea}.sm #sm-preview{display:block;width:100%;height:420px;max-height:70vw;margin:14px 0;background:#eee;border:1px solid #d9deea;touch-action:none;cursor:grab}.sm #sm-status{min-height:22px}.sm #sm-error{color:#a12622}.sm button,.sm a{min-height:44px;margin:8px 8px 8px 0}.sm button:focus-visible,.sm a:focus-visible,.sm select:focus-visible,.sm input:focus-visible{outline:3px solid rgba(66,76,185,.35);outline-offset:2px}@media(max-width:640px){.sm-compare{grid-template-columns:1fr}.sm #sm-preview{height:320px;max-height:88vw}.sm-controls label{flex:1 1 130px}}