.cp-skip-nav{z-index:9999;color:#fff;background:#6c63ff;border-radius:0 0 8px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:0}.cp-skip-nav:focus{outline-offset:2px;outline:3px solid #fff;top:0}.cp-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cp-header-top{align-items:flex-start;gap:16px;margin-bottom:12px;display:flex}.cp-header-icon{background:#fef2f2;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:24px;display:flex}.cp-main-panel{grid-template-columns:340px 1fr;align-items:start;gap:18px;margin-bottom:18px;display:grid}.cp-picker-col{flex-direction:column;gap:0;min-width:0;display:flex}.cp-info-col{flex-direction:column;gap:14px;min-width:0;display:flex}.cp-panel-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.cp-color-name-badge{color:#6c63ff;background:#f0effe;border:1px solid #ddd8fc;border-radius:20px;padding:3px 10px;font-size:11.5px;font-weight:600}.cp-swatch-wrap{border:1px solid #e5e7eb;border-radius:12px;margin-bottom:14px;overflow:hidden}.cp-swatch-preview{cursor:pointer;justify-content:center;align-items:flex-end;height:120px;padding-bottom:10px;transition:background .15s;display:flex;position:relative}.cp-native-input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0;position:absolute;inset:0}.cp-native-input:focus-visible{opacity:.01;outline-offset:-3px;outline:3px solid #6c63ff}.cp-swatch-label{pointer-events:none;opacity:.7;-webkit-user-select:none;user-select:none;font-size:12px;font-weight:600}.cp-swatch-alpha{width:100%;height:8px}.cp-alpha-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.cp-alpha-label{color:#6b7280;white-space:nowrap;min-width:46px;font-size:12px;font-weight:500}.cp-alpha-val{color:#111827;text-align:right;font-variant-numeric:tabular-nums;min-width:36px;font-size:12px;font-weight:600}.cp-slider{-webkit-appearance:none;cursor:pointer;background:#e5e7eb;border-radius:99px;outline:none;flex:1;height:4px}.cp-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color,#6c63ff);cursor:pointer;border:2px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 4px #0003}.cp-slider:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-alpha-slider{background:linear-gradient(to right, transparent, var(--color,#6c63ff))}.cp-format-row{align-items:center;gap:8px;margin-bottom:10px;display:flex}.cp-format-label{color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;min-width:36px;font-size:11px;font-weight:700}.cp-format-input{color:#111827;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:8px;outline:none;flex:1;min-width:0;padding:7px 10px;font-family:Menlo,Monaco,Courier New,monospace;font-size:13px;transition:border-color .15s}.cp-format-input:focus{background:#fff;border-color:#6c63ff}.cp-rgb-inputs{flex:1;gap:5px;min-width:0;display:flex}.cp-rgb-single{text-align:center;min-width:0;flex:1!important;padding:7px 4px!important}.cp-copy-btn{color:#6c63ff;cursor:pointer;white-space:nowrap;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;flex-shrink:0;padding:7px 12px;font-size:12px;font-weight:600;transition:all .15s}.cp-copy-btn:hover{background:#f0effe;border-color:#6c63ff}.cp-copy-btn:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-copy-sm{color:#6c63ff;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #e5e7eb;border-radius:6px;flex-shrink:0;padding:4px 10px;font-size:11.5px;font-weight:600;transition:all .15s}.cp-copy-sm:hover{background:#f0effe;border-color:#6c63ff}.cp-copy-sm:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-preset-section{flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px;display:flex}.cp-preset-label{color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;font-size:11px;font-weight:700}.cp-preset-grid{flex-wrap:wrap;gap:6px;display:flex}.cp-preset-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;flex-shrink:0;width:22px;height:22px;transition:transform .15s,border-color .15s}.cp-preset-dot:hover{transform:scale(1.2)}.cp-preset-dot.active{border-color:#111827;transform:scale(1.15)}.cp-preset-dot:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-tabs{flex-wrap:wrap;gap:6px;margin-bottom:4px;display:flex}.cp-tab-btn{color:#6b7280;cursor:pointer;white-space:nowrap;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:500;transition:all .15s}.cp-tab-btn:hover{color:#6c63ff;border-color:#6c63ff}.cp-tab-btn.active{color:#fff;background:#6c63ff;border-color:#6c63ff;box-shadow:0 2px 8px #6c63ff40}.cp-tab-btn:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-tab-content{min-height:320px}.cp-tab-desc{color:#6b7280;margin-bottom:16px;font-size:13px;line-height:1.6}.cp-formats-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.cp-format-card{background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.cp-format-card-label{color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:700}.cp-format-card-value{color:#111827;word-break:break-all;flex:1;font-family:Menlo,Monaco,Courier New,monospace;font-size:12.5px}.cp-palette-strip{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.cp-palette-btn{color:#374151;cursor:pointer;white-space:nowrap;background:#fff;border:1.5px solid #e5e7eb;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .15s}.cp-palette-btn:hover{color:#6c63ff;background:#f5f4ff;border-color:#6c63ff}.cp-palette-btn.active{color:#fff;background:#6c63ff;border-color:#6c63ff}.cp-palette-btn:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-palette-swatches{flex-wrap:wrap;gap:10px;margin-bottom:16px;display:flex}.cp-palette-swatch-wrap{flex-direction:column;align-items:center;gap:6px;display:flex}.cp-palette-swatch{cursor:pointer;border:2px solid #0000000f;border-radius:12px;width:60px;height:60px;transition:transform .15s,box-shadow .15s}.cp-palette-swatch:hover{transform:scale(1.08);box-shadow:0 4px 16px #00000026}.cp-palette-swatch:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-palette-swatch-hex{color:#6b7280;cursor:pointer;font-family:monospace;font-size:11px;transition:color .15s}.cp-palette-swatch-hex:hover{color:#6c63ff}.cp-palette-swatch-hex:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-palette-copy-all{flex-wrap:wrap;gap:8px;display:flex}.cp-shades-list{flex-direction:column;gap:6px;display:flex}.cp-shade-row{border-bottom:1px solid #f5f5f5;align-items:center;gap:10px;padding:6px 0;display:flex}.cp-shade-row:last-child{border-bottom:none}.cp-shade-swatch{cursor:pointer;border:1px solid #00000014;border-radius:8px;flex-shrink:0;width:32px;height:32px;transition:transform .15s}.cp-shade-swatch:hover{transform:scale(1.1)}.cp-shade-swatch:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-shade-pct{color:#9ca3af;min-width:28px;font-size:12px;font-weight:600}.cp-shade-hex{color:#374151;flex:1;font-family:monospace;font-size:12.5px}.cp-contrast-previews{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;display:grid}.cp-contrast-preview{border-radius:10px;flex-direction:column;justify-content:center;gap:6px;min-height:70px;padding:12px;display:flex}.cp-contrast-rows{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.cp-contrast-row{background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;display:flex}.cp-contrast-pair{flex:1;align-items:center;gap:8px;display:flex}.cp-contrast-dot{border-radius:50%;flex-shrink:0;width:20px;height:20px}.cp-contrast-pair-label{color:#374151;font-size:12.5px}.cp-contrast-ratio{color:#111827;font-variant-numeric:tabular-nums;text-align:right;min-width:44px;font-size:13px;font-weight:700}.cp-contrast-badge{white-space:nowrap;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700}.cp-wcag-guide{background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;flex-wrap:wrap;gap:12px;padding:12px;display:flex}.cp-wcag-item{color:#6b7280;font-size:12px}.cp-gradient-preview{border:1px solid #e5e7eb;border-radius:12px;height:100px;margin-bottom:16px;transition:background .2s}.cp-gradient-controls{flex-direction:column;gap:10px;margin-bottom:14px;display:flex}.cp-gradient-type-strip{flex-wrap:wrap;gap:6px;display:flex}.cp-gradient-row{align-items:center;gap:10px;display:flex}.cp-color-mini{cursor:pointer;background:0 0;border:1.5px solid #e5e7eb;border-radius:8px;width:32px;height:32px;padding:2px}.cp-color-mini:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-gradient-code{background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;align-items:center;gap:10px;padding:10px 14px;display:flex}.cp-gradient-code code{color:#374151;word-break:break-all;flex:1;font-family:Menlo,Monaco,Courier New,monospace;font-size:12.5px}.cp-image-drop{cursor:pointer;background:#fafafa;border:2px dashed #d1d5db;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:160px;padding:28px;transition:all .2s;display:flex}.cp-image-drop:hover{background:#f5f4ff;border-color:#6c63ff}.cp-image-drop:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-drop-icon{font-size:36px}.cp-drop-title{color:#374151;margin:0;font-size:14px;font-weight:600}.cp-drop-sub{color:#9ca3af;margin:0;font-size:12px}.cp-image-canvas-wrap{flex-direction:column;align-items:flex-start;gap:0;display:flex}.cp-img-wrap{cursor:crosshair;border:1px solid #e5e7eb;border-radius:10px;width:100%;max-height:420px;line-height:0;display:block;position:relative;overflow:hidden}.cp-img-container{width:100%;position:relative}.cp-image-canvas{-webkit-user-select:none;user-select:none;pointer-events:none;border-radius:10px;width:100%;height:auto;display:block}.cp-loupe{pointer-events:none;z-index:100;border-radius:10px;position:absolute;overflow:hidden;box-shadow:0 8px 32px #00000059,0 0 0 2px #fff9}.cp-loupe-grid{flex-wrap:wrap;gap:0;display:flex}.cp-loupe-cell{box-sizing:border-box;border:.5px solid #ffffff14;flex-shrink:0}.cp-loupe-center{z-index:1;position:relative;box-shadow:inset 0 0 0 1px #0006;border:2px solid #fff!important}.cp-loupe-footer{text-align:center;letter-spacing:.05em;padding:5px 0;font-family:Menlo,Monaco,Courier New,monospace;font-size:12px;font-weight:700}.cp-loupe-bar{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:10px;margin-bottom:10px;padding:8px 12px;display:flex}.cp-loupe-swatch{border:1px solid #0000001a;border-radius:6px;flex-shrink:0;width:24px;height:24px}.cp-loupe-hex{color:#111827;font-family:monospace;font-size:13px;font-weight:700}.cp-loupe-hint{color:#9ca3af;margin-left:auto;font-size:12px}.cp-history-card{margin-bottom:18px}.cp-history-strip{flex-wrap:wrap;gap:8px;display:flex}.cp-history-dot{cursor:pointer;border:2px solid #0000;border-radius:8px;flex-shrink:0;width:28px;height:28px;transition:transform .15s,border-color .15s}.cp-history-dot:hover{transform:scale(1.15)}.cp-history-dot.active{border-color:#111827}.cp-history-dot:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-named-card{margin-bottom:18px}.cp-named-card .cp-panel-header .label{font-size:13px;font-weight:700}.cp-named-search{border:1.5px solid #e5e7eb;border-radius:8px;outline:none;width:180px;padding:6px 12px;font-size:13px;transition:border-color .15s}.cp-named-search:focus{border-color:#6c63ff}.cp-named-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;display:grid}.cp-named-item{cursor:pointer;text-align:left;background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;align-items:center;gap:8px;padding:6px 8px;transition:all .15s;display:flex}.cp-named-item:hover{background:#f5f4ff;border-color:#6c63ff}.cp-named-item:focus-visible{outline-offset:2px;outline:3px solid #6c63ff}.cp-named-swatch{border:1px solid #00000014;border-radius:4px;flex-shrink:0;width:18px;height:18px}.cp-named-label{color:#374151;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;overflow:hidden}@media (width<=900px){.cp-main-panel,.cp-formats-grid,.cp-contrast-previews{grid-template-columns:1fr}}@media (width<=600px){.cp-tabs{flex-wrap:wrap}.cp-tab-btn{flex-shrink:0}.cp-palette-swatches{gap:8px}.cp-palette-swatch{width:48px;height:48px}.cp-named-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}}