*{box-sizing:border-box}body{background:var(--wasd-color-surface-canvas);color:var(--wasd-color-text-default);font-family:var(--wasd-typography-family-sans);margin:0}button,input,textarea{font:inherit}.image-color-picker{--image-picker-accent:#be123c;--image-picker-accent-2:#0f766e;--image-picker-panel-tint:color-mix(in srgb, var(--wasd-color-surface-canvas) 88%, #be123c 12%);background:linear-gradient(135deg, color-mix(in srgb, var(--wasd-color-surface-raised) 90%, #be123c 10%), var(--wasd-color-surface-raised) 52%), var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-md);box-shadow:var(--wasd-shadow-sm);color:var(--wasd-color-text-default);inline-size:100%;padding:var(--wasd-spacing-4)}.image-color-picker--teaser{block-size:100%;overflow:hidden}.image-color-picker--teaser .image-color-picker__header,.image-color-picker--teaser .image-color-picker__exports{display:none}.image-color-picker__header h2,.image-color-picker__header p,.image-color-picker__panel h3,.image-color-picker__hint,.image-color-picker__status{margin:0}.image-color-picker__workspace{align-items:start;gap:var(--wasd-spacing-4);grid-template-columns:minmax(17rem,.75fr) minmax(24rem,1.25fr);display:grid}.image-color-picker__controls,.image-color-picker__results{min-inline-size:0}.image-color-picker__results{top:var(--wasd-spacing-4);position:sticky}.image-color-picker__panel,.image-color-picker__canvas-panel{background:var(--wasd-color-surface-canvas);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);gap:var(--wasd-spacing-3);min-inline-size:0;padding:var(--wasd-spacing-4);display:grid}.image-color-picker__file-input{display:none}.image-color-picker__hint,.image-color-picker__status{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-size-body-sm)}.image-color-picker__canvas-panel{padding:var(--wasd-spacing-3)}.image-color-picker__canvas{background:linear-gradient(45deg, color-mix(in srgb, var(--wasd-color-surface-raised) 92%, #000 8%) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--wasd-color-surface-raised) 92%, #000 8%) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--wasd-color-surface-raised) 92%, #000 8%) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--wasd-color-surface-raised) 92%, #000 8%) 75%), var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);cursor:crosshair;object-fit:contain;background-position:0 0,0 .75rem,.75rem -.75rem,-.75rem 0;background-size:1.5rem 1.5rem;max-block-size:30rem;inline-size:100%;display:block}.image-color-picker__canvas:focus-visible{outline:3px solid color-mix(in srgb, var(--image-picker-accent) 48%, transparent);outline-offset:2px}.image-color-picker__selected-swatch{background:var(--selected-background);border-radius:var(--wasd-radius-sm);color:var(--selected-foreground);min-block-size:9rem;padding:var(--wasd-spacing-3);align-items:end;display:grid}.image-color-picker__selected-swatch strong,.image-color-picker__palette-color strong,.image-color-picker__details dd{font-family:var(--wasd-typography-family-mono);letter-spacing:0}.image-color-picker__details{gap:var(--wasd-spacing-2);margin:0;display:grid}.image-color-picker__details div{background:var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);align-items:center;gap:var(--wasd-spacing-2);padding:var(--wasd-spacing-2);grid-template-columns:3rem minmax(0,1fr);display:grid}.image-color-picker__details dt{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-size-label-sm);font-weight:var(--wasd-typography-weight-semibold)}.image-color-picker__details dd{overflow-wrap:anywhere;min-inline-size:0;margin:0}.image-color-picker__palette{gap:var(--wasd-spacing-2);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.image-color-picker__palette-color{background:var(--palette-background);border-radius:var(--wasd-radius-sm);color:var(--palette-foreground);cursor:pointer;gap:var(--wasd-spacing-2);min-block-size:7rem;padding:var(--wasd-spacing-3);text-align:start;border:0;display:grid}.image-color-picker__palette-color:focus-visible{outline:3px solid color-mix(in srgb, var(--image-picker-accent) 48%, transparent);outline-offset:2px}.image-color-picker__palette-color span{font-size:var(--wasd-typography-size-label-sm);font-weight:var(--wasd-typography-weight-semibold);opacity:.8}.image-color-picker__palette-color strong{align-self:end}.image-color-picker__export-block{gap:var(--wasd-spacing-2);min-inline-size:0;display:grid}.image-color-picker__export-block strong{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-size-label-sm);font-weight:var(--wasd-typography-weight-semibold)}.image-color-picker__code{background:var(--wasd-color-surface-raised);border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);color:var(--wasd-color-text-default);font-family:var(--wasd-typography-family-mono);font-size:var(--wasd-typography-size-body-sm);min-block-size:8rem;inline-size:100%;padding:var(--wasd-spacing-3);resize:vertical;line-height:1.45}.image-color-picker__code:focus{outline:3px solid color-mix(in srgb, var(--image-picker-accent) 48%, transparent);outline-offset:2px}@media (width<=64rem){.image-color-picker__workspace{grid-template-columns:1fr}.image-color-picker__results{position:static}}@media (width<=38rem){.image-color-picker{box-shadow:none;padding:var(--wasd-spacing-3);border-inline:0;border-radius:0}.image-color-picker__palette{grid-template-columns:repeat(2,minmax(0,1fr))}}