.tool{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--bg-raised);padding:var(--space-5);margin-bottom:var(--space-4);position:relative}@media (width>=640px){.tool{padding:var(--space-6)}}.tool__progress{align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);display:flex}.tool__progress-bar{background:var(--bg-inset);border-radius:var(--radius-full);flex:1;height:5px;overflow:hidden}.tool__progress-fill{background:var(--accent);border-radius:var(--radius-full);min-width:4px;height:100%;transition:width .2s}.tool__progress-label{font-size:var(--step--1);color:var(--text-muted);white-space:nowrap}.dropzone{border:1.5px dashed var(--border-strong);background:var(--bg-subtle);border-radius:11px;transition:border-color .15s,background-color .15s}.dropzone.is-dragging{border-color:var(--rule);background:var(--bg-inset)}.dropzone.is-disabled{opacity:.55}.dropzone__button{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-8) var(--space-5);border-radius:var(--radius);text-align:center;background:0 0;border:0;flex-direction:column;display:flex}.dropzone--compact .dropzone__button{padding:var(--space-5);justify-content:center;gap:var(--space-3);flex-direction:row}.dropzone__icon{width:34px;height:34px;color:var(--accent)}.dropzone--compact .dropzone__icon{width:22px;height:22px}.dropzone__label{letter-spacing:-.015em;color:var(--text);font-size:16px;font-weight:600}.dropzone--compact .dropzone__label{font-size:var(--step-0)}.dropzone__hint{font-size:var(--step--1);color:var(--text-muted)}.dropzone--compact .dropzone__hint{display:none}.tool__controls{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border)}.tool__controls-title{font-size:var(--step--1);letter-spacing:.03em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--space-4);font-weight:650}.control-grid{gap:var(--space-4) var(--space-5);grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start;display:grid}.control-row{align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;display:flex}.field__row{justify-content:space-between;align-items:baseline;gap:var(--space-3);display:flex}.field__row output{font-size:var(--step--1);color:var(--text-muted);font-weight:600}.input-group{align-items:stretch;display:flex}.input-group input{border-top-right-radius:0;border-bottom-right-radius:0}.input-group__suffix{padding-inline:var(--space-3);background:var(--bg-inset);border:1px solid var(--border-strong);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--step--1);color:var(--text-muted);white-space:nowrap;border-left:0;place-items:center;display:grid}.color-field{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.color-field__hex{text-transform:uppercase;flex:none;width:8.5ch}.color-field__presets{gap:var(--space-1);display:flex}.color-swatch{border-radius:var(--radius-sm);border:1px solid var(--border-strong);width:24px;height:24px;padding:0}.color-swatch:hover{outline:2px solid var(--accent);outline-offset:1px}.tool__notice{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-size:var(--step--1);border:1px solid var(--border);background:var(--bg-subtle);color:var(--text-muted)}.tool__notice--warn{border-color:color-mix(in srgb, var(--warn) 35%, transparent);background:var(--warn-subtle);color:var(--text)}.results{margin-top:var(--space-5);padding:var(--space-4);margin-inline:calc(var(--space-5) * -1);margin-bottom:calc(var(--space-5) * -1);border-top:1px solid var(--border);background:var(--bg-subtle);border-radius:0 0 var(--radius-lg) var(--radius-lg)}@media (width>=640px){.results{margin-inline:calc(var(--space-6) * -1);margin-bottom:calc(var(--space-6) * -1);padding:var(--space-5)}}.result-list{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.result-row{gap:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);grid-template-columns:54px 1fr auto;align-items:center;padding:12px 14px;display:grid}.result-row__thumb{border-radius:var(--radius-sm);background:linear-gradient(45deg, var(--bg-inset) 25%, transparent 25%) 0 0 / 12px 12px, linear-gradient(-45deg, var(--bg-inset) 25%, transparent 25%) 0 6px / 12px 12px, linear-gradient(45deg, transparent 75%, var(--bg-inset) 75%) 6px -6px / 12px 12px, linear-gradient(-45deg, transparent 75%, var(--bg-inset) 75%) -6px 0 / 12px 12px;flex-shrink:0;place-items:center;width:56px;height:56px;display:grid;overflow:hidden}.result-row__thumb img{object-fit:contain;width:100%;height:100%}.result-row__placeholder{background:var(--bg-inset);width:100%;height:100%}.result-row__body{min-width:0}.result-row__name{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px;font-weight:600;overflow:hidden}.result-row__meta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);margin-top:4px;font-size:12px}.result-row__error{font-size:var(--step--2);color:var(--danger);margin-top:2px}.result-row__warn{font-size:var(--step--2);color:var(--warn);margin-top:var(--space-1)}.result-row__actions{align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end;display:flex}@media (width<=560px){.result-row{grid-template-columns:44px 1fr;grid-template-areas:"thumb body""actions actions"}.result-row__thumb{grid-area:thumb;width:44px;height:44px}.result-row__body{grid-area:body}.result-row__actions{grid-area:actions;justify-content:flex-start}}.badge{border-radius:var(--radius-full);font-family:var(--font-mono);letter-spacing:.02em;background:var(--bg-inset);color:var(--text-muted);white-space:nowrap;padding:5px 11px;font-size:11.5px;font-weight:500;display:inline-block}.badge--good{background:var(--good-subtle);color:var(--good)}.badge--warn{background:var(--warn-subtle);color:var(--warn)}.results__footer{gap:var(--space-4);margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.results__summary{font-size:var(--step--1);color:var(--text-muted)}.results__actions{gap:var(--space-2);align-items:center;margin-left:auto;display:flex}.compare{border-radius:var(--radius);border:1px solid var(--border);user-select:none;touch-action:none;cursor:ew-resize;background:var(--bg-inset);margin-top:var(--space-5);position:relative;overflow:hidden}.compare__img{pointer-events:none;width:100%;height:auto;display:block}.compare__clip{position:absolute;inset:0}.compare__clip .compare__img{object-fit:contain;width:100%;height:100%}.compare__handle{pointer-events:none;background:#fff;width:2px;position:absolute;top:0;bottom:0;transform:translate(-1px);box-shadow:0 0 0 1px #00000040}.compare__grip{border-radius:var(--radius-full);background:#fff;width:34px;height:34px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 6px #0000004d}.compare__grip:before,.compare__grip:after{content:"";border-top:2px solid #444;border-right:2px solid #444;width:6px;height:6px;position:absolute;top:50%}.compare__grip:before{left:9px;transform:translateY(-50%)rotate(-135deg)}.compare__grip:after{right:9px;transform:translateY(-50%)rotate(45deg)}.compare__badge{top:var(--space-3);padding:2px var(--space-2);border-radius:var(--radius-sm);color:#fff;font-size:var(--step--2);pointer-events:none;background:#0000009e;font-weight:600;position:absolute}.compare__badge--left{left:var(--space-3)}.compare__badge--right{right:var(--space-3)}.compare__range{opacity:0;cursor:ew-resize;width:100%;height:100%;margin:0;position:absolute;inset:auto 0 0}.compare__range:focus-visible{opacity:.01;outline:3px solid var(--accent);outline-offset:-3px}.preview-pane{margin-top:var(--space-5);border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(45deg, var(--bg-inset) 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(-45deg, var(--bg-inset) 25%, transparent 25%) 0 8px / 16px 16px, linear-gradient(45deg, transparent 75%, var(--bg-inset) 75%) 8px -8px / 16px 16px, linear-gradient(-45deg, transparent 75%, var(--bg-inset) 75%) -8px 0 / 16px 16px;min-height:220px;padding:var(--space-4);place-items:center;display:grid;overflow:hidden}.preview-pane img,.preview-pane canvas{object-fit:contain;max-width:100%;max-height:60vh}.stage{touch-action:none;user-select:none;border-radius:var(--radius);background:var(--bg-inset);place-items:center;display:grid;position:relative;overflow:hidden}.stage canvas{cursor:grab;max-width:100%;display:block}.stage canvas:active{cursor:grabbing}.preset-groups{gap:var(--space-5);display:grid}.preset-group__title{font-size:var(--step--1);margin-bottom:var(--space-3);font-weight:650}.preset-list{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin:0;padding:0;list-style:none;display:grid}.preset-chip{align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;font-size:var(--step--1);text-align:left;width:100%;display:flex}.preset-chip:hover{border-color:var(--accent-border)}.preset-chip[data-selected=true]{border-color:var(--accent);background:var(--accent-subtle)}.preset-chip__name{font-weight:600;display:block}.preset-chip__dims{font-size:var(--step--2);color:var(--text-muted);font-variant-numeric:tabular-nums}.meta-table{border-collapse:collapse;width:100%;font-size:var(--step--1);margin-top:var(--space-4)}.meta-table th,.meta-table td{text-align:left;padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border);vertical-align:top}.meta-table th{color:var(--text-muted);white-space:nowrap;width:40%;font-weight:600}.meta-table tr[data-sensitive=true] td{color:var(--danger);font-weight:600}.gps-alert{gap:var(--space-3);padding:var(--space-4);border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);background:var(--danger-subtle);border-radius:var(--radius);margin-top:var(--space-4);font-size:var(--step--1);align-items:flex-start;display:flex}.gps-alert strong{color:var(--danger)}.output-list{margin:var(--space-4) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.output-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--step--1);background:var(--bg);display:flex}.output-item__preview{object-fit:contain;flex-shrink:0;width:32px;height:32px}.output-item__name{font-family:var(--font-mono);font-size:var(--step--2)}.output-item__meta{color:var(--text-muted);font-size:var(--step--2);white-space:nowrap;margin-left:auto}.snippet{margin-top:var(--space-4);position:relative}.snippet pre{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-4);font-size:var(--step--2);line-height:1.6;overflow-x:auto}.snippet code{background:0 0;padding:0}.snippet__copy{top:var(--space-2);right:var(--space-2);position:absolute}.cropper{margin-top:var(--space-5)}.cropper .stage{width:fit-content;max-width:100%;margin-inline:auto}.cropper__controls{align-items:center;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap;display:flex}.cropper__zoom{align-items:center;gap:var(--space-3);flex:1;min-width:200px;display:flex}.cropper__zoom input[type=range]{flex:1}.cropper__zoom output{font-size:var(--step--1);color:var(--text-muted);text-align:right;min-width:4.5ch}.position-grid{background:var(--bg-inset);border-radius:var(--radius-sm);grid-template-columns:repeat(3,1fr);gap:3px;width:96px;padding:3px;display:grid}.position-grid button{aspect-ratio:1;background:var(--bg);border:0;border-radius:3px;padding:0}.position-grid button:hover{background:var(--accent-subtle)}.position-grid button[aria-pressed=true]{background:var(--accent)}