.color-result{min-width:0}.color-viewer{position:relative;margin:12px 0;border:1px solid var(--ui-line,#dce2ea);border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#e6eaf0 0% 25%,#fff 0% 50%) 50% / 16px 16px}.color-viewer canvas{display:block;width:100%;height:auto;border:0;cursor:crosshair}.color-viewer:focus-within{outline:3px solid #3979e5;outline-offset:3px}.color-marker{position:absolute;width:14px;height:14px;border:2px solid #fff;outline:2px solid #172236;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.color-coordinates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px}.color-coordinates button{grid-column:1/-1}.color-values{display:grid;gap:12px;margin:16px 0}.color-value-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px}.color-value-row label{grid-column:1/-1;font-size:14px;font-weight:600}.color-value-row input{min-width:0;width:100%;font-family:ui-monospace,monospace;font-size:14px;padding:10px}.color-value-row button{padding:8px 12px;min-height:44px}.color-picked-swatch,.color-chip{background:linear-gradient(var(--picked-color),var(--picked-color)),repeating-conic-gradient(#e6eaf0 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid #c7cfda;border-radius:6px}.color-picked-swatch{height:48px}.color-palette{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.color-palette li{display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid var(--ui-line,#dce2ea);border-radius:8px;padding:12px}.color-chip{display:block;height:48px}.color-palette strong{font-family:ui-monospace,monospace;font-size:16px}.color-palette p{overflow-wrap:anywhere;font-size:13px}.color-palette button{min-height:44px;padding:8px}.color-palette summary,#color-workspace>.ui-surface details summary{cursor:pointer;min-height:44px;padding:10px 0}.color-error{color:#b42318;font-size:14px}.color-error:empty{display:none}#color-workspace .ui-downloads>.ui-download{width:100%}#color-file-summary{overflow-wrap:anywhere}#color-picked-status{font-size:14px;font-weight:600;overflow-wrap:anywhere}@media(min-width:1100px){.color-palette{grid-template-columns:repeat(3,minmax(0,1fr))}}