.color-picker-page .color-picker-workbench{display:grid;grid-template-columns:minmax(0,1fr)minmax(15rem,20rem);gap:1rem 1.5rem;max-width:70rem}.color-picker-page .color-picker-hex,.color-picker-page .color-picker-channel{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.35rem;align-items:center}.color-picker-page .color-picker-hex input,.color-picker-page .color-picker-channel input[type=number]{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--jw-color-border-strong);border-radius:0;background:0 0;color:var(--jw-color-text);font:inherit;padding:.3rem .4rem}.color-picker-page .color-picker-editor{display:grid;grid-template-columns:minmax(0,1fr)2rem;gap:.5rem;min-width:0}.color-picker-page .color-picker-canvas-wrap,.color-picker-page .color-picker-strip-wrap{position:relative;min-width:0}.color-picker-page canvas{display:block;width:100%;height:auto;border:1px solid var(--jw-color-border-strong);cursor:crosshair;touch-action:none}.color-picker-page .color-picker-strip{height:100%}.color-picker-page .color-picker-canvas-marker,.color-picker-page .color-picker-strip-marker{position:absolute;z-index:1;pointer-events:none;box-sizing:border-box;border:2px solid var(--jw-color-picker-marker);box-shadow:0 0 0 1px var(--jw-color-picker-marker-outline)}.color-picker-page .color-picker-canvas-marker{width:.8rem;height:.8rem;transform:translate(-50%,-50%);border-radius:50%}.color-picker-page .color-picker-strip-marker{left:-.2rem;right:-.2rem;height:.45rem;transform:translateY(-50%)}.color-picker-page .color-picker-controls{display:grid;align-content:start;gap:1rem}.color-picker-page .color-picker-group{display:grid;gap:.4rem;min-width:0;margin:0;padding:.75rem 0;border:0;border-top:1px solid var(--jw-color-border-soft)}.color-picker-page .color-picker-group legend{padding:0 .35rem 0 0;font-weight:700}.color-picker-page .color-picker-channel{grid-template-columns:1.1rem 1.5rem minmax(0,1fr)}.color-picker-page .color-picker-channel input[type=radio]{accent-color:var(--jw-color-text)}.color-picker-page .color-picker-channel span{font-weight:700}.color-picker-page .color-picker-palette{max-width:70rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--jw-color-border-soft)}.color-picker-page .color-picker-palette-add{position:absolute;top:.35rem;right:.35rem;display:inline-flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;padding:0;border:0;background:0 0;color:inherit;font-size:var(--jw-text-heading-small);line-height:1}.color-picker-page .color-picker-palette-add:active,.color-picker-page .color-picker-palette-add:focus-visible,.color-picker-page .color-picker-palette-remove:active,.color-picker-page .color-picker-palette-remove:focus-visible{color:var(--jw-color-accent);outline:none}@media(hover:hover) and (pointer:fine){.color-picker-page .color-picker-palette-add:hover,.color-picker-page .color-picker-palette-add:focus-visible,.color-picker-page .color-picker-palette-remove:hover,.color-picker-page .color-picker-palette-remove:focus-visible{color:var(--jw-color-accent);outline:none}}.color-picker-page .color-picker-palette-list{display:flex;flex-wrap:wrap;gap:.75rem;min-height:2.2rem;margin-top:.75rem}.color-picker-page .color-picker-palette-custom{display:contents}.color-picker-page .color-picker-palette-item{position:relative;display:grid;align-content:end;gap:.25rem;width:12rem;min-height:7rem;box-sizing:border-box;padding:.5rem;border:0;border-radius:0;color:var(--jw-color-picker-label);cursor:default}.color-picker-page .color-picker-palette-values{display:grid;justify-items:end;gap:.1rem;text-align:right;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:var(--jw-text-xs)}.color-picker-page .color-picker-palette-remove{position:absolute;top:.35rem;right:.35rem;padding:0;border:0;background:0 0;color:inherit;font-size:var(--jw-text-heading-small);line-height:1}.color-picker-page .color-picker-palette-actions{display:contents}.color-picker-page .color-picker-palette-item,.color-picker-page .color-picker-swatch-new{text-shadow:var(--jw-shadow-picker-label)}.color-picker-page [data-copy-value]{cursor:copy}.color-picker-page .color-picker-palette-add,.color-picker-page .color-picker-palette-remove{cursor:pointer}.color-picker-page [data-copy-value].is-copied{color:var(--jw-color-accent)}@media(max-width:48rem){.color-picker-page .color-picker-workbench{grid-template-columns:1fr}}