.image-color-picker-page [hidden]{display:none!important}.image-color-picker-page .tool-intro{grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:24px;display:grid}.image-color-picker-page .tool-intro>*,.image-color-picker-page .tool-faq>*{min-width:0}.image-color-picker-page :is(h1,h2,h3,p,strong,span,a,button){overflow-wrap:anywhere}.icp-upload{text-align:center;justify-items:center;gap:16px;padding:36px 12px;display:grid}.icp-upload>i{color:#0785f9;font-size:52px}.icp-hint,.icp-meta,.icp-status{color:#536a91;line-height:1.65}.icp-meta{overflow-wrap:anywhere}.icp-status:empty{display:none}.icp-editor{grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);align-items:start;gap:24px;display:grid}.icp-preview-panel,.icp-controls,.icp-palette-panel{background:#fbfcff;border:1px solid #d7e3fa;border-radius:22px;min-width:0;padding:clamp(16px,3vw,28px)}.icp-preview-panel .panel-heading-row{flex-wrap:wrap;gap:12px}.icp-stage,.icp-swatch-checker{background-color:#fff;background-image:conic-gradient(#e3ebf8 25%, transparent 0 50%, #e3ebf8 0 75%, transparent 0);background-size:20px 20px}.icp-stage{border:1px solid #d7e3fa;border-radius:14px;place-items:center;min-height:120px;padding:8px;display:grid}.icp-preview-frame{width:fit-content;max-width:100%;position:relative}#icp-preview{cursor:crosshair;touch-action:manipulation;width:auto;max-width:100%;height:auto;max-height:none;display:block}#icp-preview:focus-visible{outline-offset:3px;outline:3px solid #0785f9}#icp-marker{pointer-events:none;border:2px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #102650}.icp-controls{gap:20px;display:grid}.icp-controls h2,.icp-palette-panel h2{margin:0}.icp-coordinate{grid-template-columns:minmax(0,1fr) minmax(70px,100px);align-items:center;gap:10px;display:grid}.icp-coordinate label{font-weight:700}.icp-coordinate input[type=range]{accent-color:#0785f9;grid-column:1/-1;width:100%;min-width:0}.icp-coordinate input[type=number],.icp-color-row input{box-sizing:border-box;color:#0b1b46;width:100%;min-width:0;font:inherit;background:#fff;border:1px solid #d7e3fa;border-radius:10px;padding:11px}.icp-selected{grid-template-columns:72px minmax(0,1fr);align-items:center;gap:14px;display:grid}.icp-swatch-checker{border:1px solid #c7d8ef;border-radius:14px;width:72px;height:72px;overflow:hidden}#icp-swatch{width:100%;height:100%;display:block}.icp-selected output{font-variant-numeric:tabular-nums;display:block}.icp-color-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.icp-color-row label{grid-column:1/-1;font-weight:700}.icp-color-row input{font-family:ui-monospace,monospace;font-size:.88rem}.icp-color-row button{padding:10px 12px}.icp-palette-panel{grid-column:1/-1}#icp-palette{grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:12px;margin:20px 0 0;padding:0;list-style:none;display:grid}#icp-palette li{min-width:0}.icp-palette-color{color:#0b1b46;cursor:pointer;width:100%;font:inherit;text-align:center;background:#fff;border:1px solid #d7e3fa;border-radius:12px;gap:7px;padding:10px;display:grid}.icp-palette-color:hover{border-color:#0785f9}.icp-palette-chip{border:1px solid #00000014;border-radius:7px;width:100%;height:48px;display:block}.icp-palette-color strong{font-family:ui-monospace,monospace;font-size:.95rem}.image-color-picker-page .icp-related-tools{flex-wrap:wrap;gap:14px;width:min(1680px,100% - 32px);margin-inline:auto;padding:22px;display:flex}.image-color-picker-page .icp-related-tools a{color:#235eaa;align-items:center;gap:8px;font-weight:700;text-decoration:none;display:inline-flex}.image-color-picker-page .icp-related-tools a:hover{text-decoration:underline}#icp-reset{margin-top:20px}@media (width<=980px){.icp-editor{grid-template-columns:minmax(0,1fr)}}@media (width<=720px){.image-color-picker-page .tool-intro{grid-template-columns:minmax(0,1fr)}.image-color-picker-page .tool-intro>picture{justify-self:center;width:92px;height:92px}.image-color-picker-page .icp-related-tools{width:calc(100% - 20px)}.image-color-picker-page .tool-intro :is(h1,.tool-description){max-width:100%}.icp-editor{gap:16px}.icp-color-row{grid-template-columns:minmax(0,1fr)}.icp-color-row button{justify-self:start}#icp-palette{grid-template-columns:repeat(2,minmax(0,1fr))}}