.img-color{cursor:pointer;height:44px;padding:4px}.img-chips{flex-wrap:wrap;gap:8px;display:flex}.img-chips button{border:1px solid var(--line-2);background:var(--surface);min-height:40px;color:var(--ink);font:inherit;cursor:pointer;border-radius:999px;padding:0 14px;font-size:14px;font-weight:600}.img-chips button[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}.img-preview{background:repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px;border:1px solid var(--line);border-radius:12px;place-items:center;display:grid;overflow:hidden}.img-preview canvas,.img-preview img{object-fit:contain;max-width:100%;height:auto;max-height:70vh;display:block}.img-split{grid-template-columns:minmax(0,1fr);gap:18px;display:grid}@media (min-width:760px){.img-split{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}}.img-stack{flex-direction:column;gap:14px;min-width:0;display:flex}.crop-stage{touch-action:none;-webkit-user-select:none;user-select:none;background:#111;border-radius:10px;max-width:100%;margin:0 auto;line-height:0;position:relative;overflow:hidden}.crop-stage canvas{width:100%;height:auto;display:block}.crop-box{cursor:move;touch-action:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 9999px #0000008c}.crop-box:before,.crop-box:after{content:"";pointer-events:none;border:0 solid #ffffff73;position:absolute}.crop-box:before{border-left-width:1px;border-right-width:1px;inset:0 33.33%}.crop-box:after{border-top-width:1px;border-bottom-width:1px;inset:33.33% 0}.crop-h{touch-action:none;z-index:2;width:28px;height:28px;margin:-14px 0 0 -14px;position:absolute}.crop-h:after{content:"";border:2px solid var(--brand);background:#fff;border-radius:4px;position:absolute;inset:7px}.crop-h[data-h=nw]{cursor:nwse-resize;top:0;left:0}.crop-h[data-h=ne]{cursor:nesw-resize;top:0;left:100%}.crop-h[data-h=sw]{cursor:nesw-resize;top:100%;left:0}.crop-h[data-h=se]{cursor:nwse-resize;top:100%;left:100%}.crop-h[data-h=n]{cursor:ns-resize;top:0;left:50%}.crop-h[data-h=s]{cursor:ns-resize;top:100%;left:50%}.crop-h[data-h=w]{cursor:ew-resize;top:50%;left:0}.crop-h[data-h=e]{cursor:ew-resize;top:50%;left:100%}@media (pointer:coarse){.crop-h{width:40px;height:40px;margin:-20px 0 0 -20px}.crop-h:after{inset:11px}}.crop-nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}@media (max-width:480px){.crop-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}.rot-preview{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;place-items:center;min-height:220px;padding:16px;display:grid;overflow:hidden}.rot-preview canvas{max-width:100%;height:auto;max-height:320px;display:block}.cp-stage{cursor:crosshair;touch-action:none;border:1px solid var(--line);border-radius:10px;line-height:0;position:relative;overflow:hidden}.cp-stage canvas{width:100%;height:auto;display:block}.cp-swatch{border:1px solid var(--line);height:96px;font:700 18px var(--mono);border-radius:14px;place-items:center;display:grid}.cp-values{gap:8px;display:grid}.cp-values .row{border:1px solid var(--line);background:var(--surface);border-radius:10px;justify-content:space-between;gap:8px;padding:8px 10px}.cp-values code{font:15px var(--mono);overflow-wrap:anywhere;min-width:0}.cp-palette{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;display:grid}.cp-palette button{border:1px solid var(--line);min-height:64px;font:600 12px var(--mono);cursor:pointer;border-radius:12px;justify-content:center;align-items:flex-end;padding:6px;display:flex}.cp-palette button[aria-pressed=true]{outline:3px solid var(--brand);outline-offset:2px}.b64-preview img{max-width:100%;max-height:320px;margin:0 auto;display:block}.fav-previews{border:1px solid var(--line);background:repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px;border-radius:12px;flex-wrap:wrap;align-items:flex-end;gap:16px;padding:16px;display:flex}.fav-previews figure{flex-direction:column;align-items:center;gap:6px;margin:0;display:flex}.fav-previews figcaption{color:var(--ink-3);font-size:12px}.fav-tab{background:var(--surface-2);border:1px solid var(--line);max-width:220px;color:var(--ink-2);border-bottom:0;border-radius:10px 10px 0 0;align-items:center;gap:8px;padding:8px 14px;font-size:13px;display:inline-flex}
