.image-resizer{width:100%;padding:var(--s5);background-color:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);gap:var(--s4);flex-direction:column;margin:0 auto;display:flex}.image-resizer .lede{color:var(--text-2);font-size:.92rem}.image-resizer .drop{gap:var(--s3);padding:var(--s5);background-color:var(--surface-inset);border:2px dashed var(--border-strong);border-radius:var(--r);text-align:center;flex-direction:column;display:flex}.image-resizer .drop.over{border-color:var(--accent);background-color:var(--accent-soft)}.image-resizer .drop label{color:var(--text);font-weight:600}.image-resizer .drop input[type=file]{width:100%;min-height:var(--tap);padding:var(--s2);background-color:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer;font-size:.88rem}.image-resizer input[type=range]{width:100%;min-height:var(--tap);accent-color:var(--accent);cursor:pointer}.image-resizer .preview{padding:var(--s3);background-color:var(--surface-inset);border:1px solid var(--border);border-radius:var(--r);background-image:linear-gradient(45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-2) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;justify-content:center;display:flex}.image-resizer .preview img{border-radius:var(--r-sm);max-width:100%;height:auto}.image-resizer .actions{gap:var(--s2);flex-wrap:wrap;display:flex}.image-resizer .download{min-height:var(--tap);padding:0 var(--s5);background-color:var(--accent);border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--accent-fg);justify-content:center;align-items:center;font-weight:650;text-decoration:none;display:inline-flex}.image-resizer .download:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}