.imgr{--imgr-checker:repeating-conic-gradient(var(--color-bg-muted) 0% 25%, var(--color-surface) 0% 50%) 50% / 12px 12px;gap:var(--space-8);border-radius:var(--radius-md);min-width:0;transition:outline-color var(--duration-fast) ease;display:grid}.imgr[data-dragging=true]{outline:2px dashed var(--color-brand);outline-offset:var(--space-2)}@media (width>=960px){.imgr .tool-layout:has(>.imgr-files)>.imgr-results{grid-area:1/2/span 2}.imgr .tool-layout>.imgr-files{grid-column:1}}@media (width>=960px) and (height<=759px){.imgr-results.tool-sticky{position:static}}.imgr .tool-row>.field{align-content:start}.imgr .imgr-size-row{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr))}.imgr-segmented label:has(input:disabled){opacity:.5;cursor:not-allowed}@media (width<=559px){.imgr-segmented{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;display:grid}.imgr-segmented label{padding:var(--space-1) var(--space-2);line-height:var(--leading-snug);text-align:center;justify-content:center}}.imgr-check-hint{padding-left:calc(18px + var(--space-2))}.imgr .tool-check:has(input:disabled){cursor:not-allowed}.imgr .tool-check:has(input:disabled)>span{color:var(--color-text-secondary)}.imgr-note{color:var(--color-text-secondary);font-size:var(--text-sm)}.imgr-options{gap:var(--space-3);display:grid}.imgr-dropzone{gap:var(--space-2);padding-block:var(--space-6);position:relative}.imgr-dropzone .imgr-dropzone__button svg{width:16px;height:16px;color:inherit}.imgr-dropzone__or{color:var(--color-text-secondary)}.imgr-dropzone__formats,.imgr-dropzone__more{color:var(--color-text-tertiary);font-size:var(--text-xs)}.imgr-dropzone:not(:focus-within) .imgr-dropzone__more{display:none}.imgr-dropzone--compact{justify-content:center;align-items:center;column-gap:var(--space-3);padding-block:var(--space-4);flex-wrap:wrap;display:flex}.imgr-dropzone--compact:not(:focus-within) .imgr-dropzone__formats{display:none}.imgr-dropzone--compact .imgr-dropzone__formats,.imgr-dropzone--compact .imgr-dropzone__more{flex-basis:100%}.imgr-type{gap:var(--space-3)}.imgr-type__all{gap:var(--space-2);display:grid}.imgr-tiles{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.imgr-tile{min-width:0;padding:var(--space-3) var(--space-1) var(--space-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-snug);text-align:center;cursor:pointer;transition:border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;align-content:start;justify-items:center;gap:2px;display:grid;position:relative}.imgr-tile input{opacity:0;pointer-events:none;position:absolute}.imgr-tile:hover{border-color:var(--color-border-hover);color:var(--color-text-heading)}.imgr-tile:has(input:checked){border-color:var(--color-brand);background:var(--color-brand-subtle);color:var(--color-brand);box-shadow:inset 0 0 0 1px var(--color-brand)}.imgr-tile:has(input:focus-visible){box-shadow:var(--shadow-focus)}.imgr-tile__visual{height:36px;margin-bottom:var(--space-1);place-items:center;display:grid}.imgr-tile__label{max-width:100%;color:var(--color-text-heading);font-weight:600}.imgr-tile:has(input:checked) .imgr-tile__label{color:var(--color-brand)}.imgr-tile__meta{max-width:100%;color:var(--color-text-tertiary);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.imgr-tile:has(input:checked) .imgr-tile__meta{color:var(--color-brand)}.imgr-shape{background:color-mix(in srgb, currentColor 12%, transparent);border:1.5px solid;border-radius:3px;display:block}.imgr-pict{width:40px;height:28px}.imgr-pict__image{fill:currentColor;fill-opacity:.45}.imgr-pict__bars{fill:currentColor;fill-opacity:.1}.imgr-pict__trim{fill:currentColor;fill-opacity:.15}.imgr-pict__frame,.imgr-pict__bounds{fill:none;stroke:currentColor;stroke-width:1.5px}.imgr-pict__bounds{stroke-dasharray:3 2}.imgr-range-head{justify-content:space-between;align-items:baseline;gap:var(--space-3);display:flex}.imgr-range-value{color:var(--color-text-heading);font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:600}.imgr-range{width:100%;min-height:24px;accent-color:var(--color-primary);cursor:pointer;margin:0}.imgr-range:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-xs);outline:none}.imgr-color{align-items:center;gap:var(--space-3);display:flex}.imgr-color input{width:3rem;height:40px;padding:var(--space-1);border:1px solid var(--color-border-input);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer}.imgr-color input:hover{border-color:var(--color-border-input-hover)}.imgr-color input:focus-visible{border-color:var(--color-brand);box-shadow:0 0 0 1px var(--color-brand);outline:none}.imgr-color__value{color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-sm)}.imgr-results:focus{outline:none}.imgr-results:focus-visible{box-shadow:var(--shadow-focus)}.imgr-status{color:var(--color-text-heading);font-size:var(--text-sm);font-weight:600}.imgr-status:empty{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.imgr-empty{gap:var(--space-1);padding:var(--space-4)}.imgr-download{position:relative}.imgr-download__note{top:calc(100% + var(--space-2));z-index:2;max-width:30rem;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-md);font-size:var(--text-xs);pointer-events:none;display:none;position:absolute;left:0}.imgr-download:has(.imgr-download__all:is(:hover,:focus-visible)) .imgr-download__note{display:block}.imgr-preview{align-items:center;gap:var(--space-5);grid-template-columns:minmax(0,1fr) auto;display:grid}.imgr-preview__main{gap:var(--space-4);min-width:0;display:grid}.imgr .tool-hero__value{font-size:clamp(2rem,1.5rem + 1.2vw,2.75rem)}.imgr .tool-stat__value{overflow-wrap:anywhere}.imgr-diagram{aspect-ratio:1;width:10rem;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-muted);place-items:center;display:grid}@media (width<=559px){.imgr-preview{grid-template-columns:minmax(0,1fr)}.imgr-diagram{aspect-ratio:auto;width:100%;height:10rem}}.imgr-diagram__scene{border-radius:var(--radius-xs);max-width:100%;position:relative;overflow:hidden}.imgr-diagram__canvas,.imgr-diagram__image,.imgr-diagram__photo,.imgr-diagram__window{position:absolute}.imgr-diagram__photo{object-fit:fill;max-width:none;display:block}.imgr-diagram__canvas{box-shadow:inset 0 0 0 1px var(--color-border-strong)}.imgr-diagram__canvas--transparent{background:var(--imgr-checker)}.imgr-diagram__image{background:linear-gradient(135deg, var(--color-brand-subtle), var(--color-info-subtle));color:var(--color-brand);place-items:center;display:grid}.imgr-diagram__image svg{width:24px;max-width:60%;height:24px;max-height:60%}.imgr-diagram__window{border:2px solid var(--color-brand);box-shadow:0 0 0 100vmax color-mix(in srgb, var(--color-bg-inverse) 45%, transparent);border-radius:2px}.imgr-plan{gap:var(--space-3);display:grid}.imgr-plan__text{color:var(--color-text-secondary);font-size:var(--text-sm)}.imgr-checks{gap:var(--space-2);font-size:var(--text-sm);margin:0;padding:0;list-style:none;display:grid}.imgr-checks--compact{margin-top:var(--space-2);font-size:var(--text-xs)}.imgr-check{gap:var(--space-2);color:var(--color-text);grid-template-columns:16px minmax(0,1fr);align-items:start;display:grid}.imgr-check svg{width:16px;height:16px;margin-top:2px}.imgr-checks--compact .imgr-check svg{width:14px;height:14px;margin-top:1px}.imgr-check--ok svg{color:var(--color-success)}.imgr-check--info svg{color:var(--color-info)}.imgr-check--warning svg{color:var(--color-warning)}.imgr-check--error svg,.imgr-check--error{color:var(--color-critical)}.imgr-files{gap:var(--space-4);min-width:0;padding-top:var(--space-5);border-top:1px solid var(--color-border);display:grid;container:imgr-files/inline-size}.imgr-files__title{font-size:var(--text-lg);scroll-margin-top:calc(var(--header-height) + var(--space-4))}.imgr-files__title:focus{outline:none}.imgr-files__title:focus-visible{border-radius:var(--radius-xs);box-shadow:var(--shadow-focus)}.imgr-list{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.imgr-item{gap:var(--space-2) var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);grid-template-columns:3.5rem minmax(0,1fr) auto;grid-template-areas:"thumb body body""thumb foot foot";align-items:start;display:grid}@container imgr-files (width>=520px){.imgr-item{column-gap:var(--space-4);padding:var(--space-4);grid-template-columns:4.5rem minmax(0,1fr) auto}}.imgr-item__foot{align-items:center;gap:var(--space-2) var(--space-3);flex-wrap:wrap;grid-area:foot;min-width:0;display:flex}.imgr-item__thumb{aspect-ratio:1;border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);background:var(--imgr-checker);width:100%;color:var(--color-text-tertiary);grid-area:thumb;place-items:center;display:grid;overflow:hidden}.imgr-item__thumb img{object-fit:contain;width:100%;height:100%}.imgr-item__thumb svg{width:24px;height:24px}.imgr-item__body{gap:var(--space-1);grid-area:body;justify-items:start;min-width:0;display:grid}.imgr-item__name,.imgr-item__source{padding-right:var(--space-8)}.imgr-item__name{max-width:100%;color:var(--color-text-heading);font-size:var(--text-sm);overflow-wrap:anywhere;font-weight:600}.imgr-item__source,.imgr-item__status{max-width:100%;color:var(--color-text-secondary);font-size:var(--text-xs);overflow-wrap:anywhere}.imgr-item__error{gap:var(--space-2);color:var(--color-critical);font-size:var(--text-sm);grid-template-columns:16px minmax(0,1fr);display:grid}.imgr-item__error svg{width:16px;height:16px;margin-top:2px}.imgr-item__sizes{margin:var(--space-1) 0;font-size:var(--text-sm);font-variant-numeric:tabular-nums;gap:2px;display:grid}.imgr-item__sizes div{gap:var(--space-2);grid-template-columns:3.25rem minmax(0,1fr);display:grid}.imgr-item__sizes dt{color:var(--color-text-secondary)}.imgr-item__sizes dd{color:var(--color-text-heading);margin:0}.imgr-item__sizes dd span{white-space:nowrap}.imgr-item--busy .imgr-item__thumb,.imgr-item--busy .imgr-item__sizes{opacity:.55}.imgr-item__download{min-height:36px;margin-left:auto}.imgr-item__remove{width:40px;height:40px;margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:background-color var(--duration-fast) ease, color var(--duration-fast) ease;background:0 0;border:0;grid-area:1/3;justify-self:end;place-items:center;padding:0;display:inline-grid}.imgr-item__remove:hover{background:var(--color-critical-subtle);color:var(--color-critical)}.imgr-item__remove:focus-visible{box-shadow:var(--shadow-focus);outline:none}.imgr-item__remove svg{width:18px;height:18px}@media (prefers-reduced-motion:no-preference){.imgr-item--busy .imgr-item__thumb{animation:1.2s ease-in-out infinite alternate imgr-pulse}@keyframes imgr-pulse{0%{opacity:.4}to{opacity:.75}}}