*{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,select,textarea{font:inherit}.color-palette{--color-tool-accent:#4f46e5;--color-tool-accent-2:#0f766e;--color-tool-panel-tint:color-mix(in srgb, var(--wasd-color-surface-canvas) 88%, var(--color-tool-accent) 12%);background:linear-gradient(135deg, color-mix(in srgb, var(--wasd-color-surface-raised) 88%, #4f46e5 12%), var(--wasd-color-surface-raised) 48%), 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)}.color-palette--teaser{block-size:100%;overflow:hidden}.color-palette--teaser .color-palette__header,.color-palette--teaser .color-palette__panel--exports{display:none}.color-palette__header h2,.color-palette__header p,.color-palette__panel h3,.color-palette__status{margin:0}.color-palette__workspace{align-items:start;gap:var(--wasd-spacing-4);grid-template-columns:minmax(18rem,.88fr) minmax(22rem,1.12fr);display:grid}.color-palette__controls,.color-palette__results{min-inline-size:0}.color-palette__results{top:var(--wasd-spacing-4);position:sticky}.color-palette__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}.color-palette__field-grid{gap:var(--wasd-spacing-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.color-palette__field,.color-palette__export-block{gap:var(--wasd-spacing-2);min-inline-size:0;display:grid}.color-palette__range-field{grid-column:1/-1}.color-palette__field>span,.color-palette__export-block>strong{color:var(--wasd-color-text-muted);font-size:var(--wasd-typography-text-style-label-sm-font-size);font-weight:var(--wasd-typography-weight-medium)}.color-palette__field .wasd-input-root,.color-palette__field .wasd-input-control,.color-palette__field .wasd-select{inline-size:100%;min-inline-size:0}.color-palette__color-control{align-items:center;gap:var(--wasd-spacing-2);grid-template-columns:3rem minmax(0,1fr);display:grid}.color-palette__color-input{appearance:none;border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);cursor:pointer;background:0 0;block-size:2.75rem;inline-size:3rem;padding:.2rem}.color-palette__color-input:focus,.color-palette__range-row input:focus,.color-palette__code:focus,.color-palette__swatch:focus-visible,.color-palette__shade:focus-visible{outline:3px solid color-mix(in srgb, var(--color-tool-accent) 48%, transparent);outline-offset:2px}.color-palette__range-row{align-items:center;gap:var(--wasd-spacing-3);grid-template-columns:minmax(0,1fr) 4rem;display:grid}.color-palette__range-row input{accent-color:var(--color-tool-accent);inline-size:100%}.color-palette__range-row output{background:var(--color-tool-panel-tint);border:var(--wasd-border-width-thin) solid color-mix(in srgb, var(--color-tool-accent) 35%, var(--wasd-color-border-subtle));border-radius:var(--wasd-radius-sm);font-family:var(--wasd-typography-family-mono);font-weight:var(--wasd-typography-weight-semibold);padding:var(--wasd-spacing-2);text-align:center}.color-palette__actions{margin-block-start:var(--wasd-spacing-1)}.color-palette__status{color:var(--wasd-color-text-muted);min-block-size:1.35em}.color-palette__preview{border:var(--wasd-border-width-thin) solid var(--wasd-color-border-subtle);border-radius:var(--wasd-radius-sm);min-block-size:11rem;padding:var(--wasd-spacing-4);align-items:end;display:grid;overflow:hidden}.color-palette__preview div{border-radius:var(--wasd-radius-sm);color:#fff;gap:var(--wasd-spacing-1);inline-size:fit-content;padding:var(--wasd-spacing-3);background:#0000006b;border:1px solid #ffffff52;display:grid}.color-palette__preview strong,.color-palette__swatch strong,.color-palette__shade strong{font-family:var(--wasd-typography-family-mono);letter-spacing:0}.color-palette__swatches{gap:var(--wasd-spacing-2);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));display:grid}.color-palette__swatch,.color-palette__shade{background:var(--swatch-background);border-radius:var(--wasd-radius-sm);color:var(--swatch-foreground);cursor:pointer;min-block-size:8.5rem;padding:var(--wasd-spacing-3);text-align:start;border:0;display:grid}.color-palette__swatch span,.color-palette__shade span{font-size:var(--wasd-typography-size-label-sm);font-weight:var(--wasd-typography-weight-semibold)}.color-palette__swatch strong,.color-palette__shade strong{align-self:end}.color-palette__swatch small{opacity:.82}.color-palette__ramp{gap:var(--wasd-spacing-2);grid-template-columns:repeat(5,minmax(0,1fr));display:grid}.color-palette__shade{min-block-size:5.75rem}.color-palette__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}@media (width<=64rem){.color-palette__workspace{grid-template-columns:1fr}.color-palette__results{position:static}}@media (width<=38rem){.color-palette{box-shadow:none;padding:var(--wasd-spacing-3);border-inline:0;border-radius:0}.color-palette__field-grid,.color-palette__ramp{grid-template-columns:1fr}}