.image-lab{margin:2rem 0;border:1px solid #cad5df;border-radius:10px;background:#fff;padding:clamp(16px,3vw,28px);color:#1d2a36}.image-lab *{box-sizing:border-box}.image-lab [hidden]{display:none!important}.image-lab h2{font-size:1.2rem;margin:0 0 10px}.image-lab h3{font-size:1.15rem;margin:0 0 14px}.image-lab p{line-height:1.55;margin:8px 0;overflow-wrap:anywhere}.lab-inputs{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}.lab-controls{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:20px;margin-top:24px}.image-lab label{display:flex;flex-direction:column;gap:8px;font-weight:650;min-width:0}.image-lab input:not([type=checkbox]),.image-lab select{width:100%;min-width:0;max-width:100%;font:inherit}.image-lab input[type=number],.image-lab input[type=color],.image-lab select{min-height:44px;padding:8px;border:1px solid #bac8d5;border-radius:5px;background:#fff;color:inherit}.image-lab input[type=file]{padding:8px 0;font-size:.9rem}.image-lab input[type=range]{min-height:32px;accent-color:#146ce4}.image-lab input[type=checkbox]{width:18px;height:18px;accent-color:#146ce4}.image-lab output{font-weight:500}.lab-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:22px 0 12px}.lab-actions button{min-height:44px}.image-lab .lab-actual-size{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:.9rem;font-weight:500}.lab-note{font-size:.85rem;color:#526171}.lab-status{padding:12px 14px;background:#eff6fd;border-radius:5px;color:#224a73;font-size:.95rem}.lab-error{color:#9c2929;border-left:3px solid #be4848;padding:8px 12px;background:#fff5f3}.lab-source{display:grid;grid-template-columns:minmax(200px,1fr) 1.2fr;gap:24px;margin:24px 0;padding-bottom:24px;border-bottom:1px solid #d6dfe7}.lab-preview{height:220px;display:flex;align-items:center;justify-content:center;overflow:auto;border:1px solid #d4dbe2;border-radius:5px;background-color:#fff;background-image:linear-gradient(45deg,#e8ecef 25%,transparent 25%),linear-gradient(-45deg,#e8ecef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ecef 75%),linear-gradient(-45deg,transparent 75%,#e8ecef 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.lab-preview img,.lab-preview canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;flex-shrink:0}.lab-actual .lab-preview{display:block}.lab-actual .lab-preview img,.lab-actual .lab-preview canvas{max-width:none;max-height:none;width:auto;height:auto}.lab-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.lab-result{padding:16px;border:1px solid #d6dfe7;border-radius:7px;min-width:0}.lab-result .lab-preview{height:190px;margin-bottom:16px}.lab-result p{font-size:.86rem}.lab-result .lab-result-size{font-size:1rem;font-weight:700}.lab-result .button{display:inline-flex;margin-top:12px;max-width:100%;white-space:normal;min-height:44px;align-items:center}.image-lab :focus-visible{outline:3px solid #78b8ff;outline-offset:3px}.image-lab button:disabled{opacity:.6;cursor:wait}@media(max-width:800px){.lab-results{grid-template-columns:1fr}.lab-result .lab-preview{height:250px}.lab-controls{grid-template-columns:1fr 1fr}.lab-controls label:first-child{grid-column:1/-1}.lab-result{display:flex;flex-direction:column}.lab-result .button{align-self:flex-start}}@media(max-width:520px){.lab-inputs,.lab-source{grid-template-columns:1fr}.lab-controls{gap:14px}.lab-source{gap:14px}.image-lab{padding:16px;margin:20px 0}.lab-actions{align-items:stretch}.lab-actions .button{flex:1 1 auto}.lab-actions .lab-actual-size{width:100%}.lab-preview{height:190px}.lab-result .lab-preview{height:210px}}

.image-lab fieldset{border:0;padding:0;margin:0;min-width:0}
@media(max-width:520px){.lab-page .page-heading h1{font-size:1.75rem;line-height:1.25;text-wrap:balance}}