.colorconverter-swatch{height:10rem;border-radius:var(--qet-radius-md);box-shadow:var(--qet-border-hairline);transition:background var(--qet-transition-fast)}.colorconverter-inputs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--qet-space-3);align-items:start}.colorconverter-picker{margin-top:calc(var(--qet-text-2xs) * 1.3 + var(--qet-space-2));cursor:pointer}.colorconverter-picker input{display:block;width:3.25rem;height:2.85rem;padding:.2rem;border:none;border-radius:var(--qet-radius-sm);background:var(--qet-surface-container-lowest);box-shadow:var(--qet-border-hairline);cursor:pointer}.colorconverter-text{font-family:var(--qet-font-mono)}.colorconverter-image{position:relative;width:fit-content;max-width:100%;margin-inline:auto}.colorconverter-canvas{display:block;max-width:100%;max-height:28rem;border-radius:var(--qet-radius-md);box-shadow:var(--qet-border-hairline);cursor:crosshair}.colorconverter-marker{position:absolute;width:1.25rem;height:1.25rem;border:2px solid #ffffff;border-radius:50%;box-shadow:0 0 0 1px #0009;transform:translate(-50%,-50%);pointer-events:none}.colorconverter-image-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--qet-space-2);font-size:var(--qet-text-sm)}.colorconverter-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:var(--qet-space-3);margin:0;padding:0;list-style:none}.colorconverter-palette-item{display:grid;justify-items:center;gap:var(--qet-space-1)}.colorconverter-palette-swatch{width:100%;height:3.5rem;border:none;border-radius:var(--qet-radius-sm);box-shadow:var(--qet-border-hairline);cursor:pointer}.colorconverter-palette-swatch-current{outline:3px solid var(--qet-primary);outline-offset:2px}.colorconverter-palette-hex{font-family:var(--qet-font-mono);font-size:var(--qet-text-sm)}.colorconverter-export{margin:0;max-height:14rem;padding:var(--qet-space-3);overflow:auto;border-radius:var(--qet-radius-sm);background:var(--qet-surface-container-low);font-family:var(--qet-font-mono);font-size:var(--qet-text-sm);white-space:pre}