.image-color-tool{--tool-stage-height:clamp(32rem, calc(100dvh - 14rem), 42rem);text-align:left}.image-color-drop-surface{display:contents}.image-color-tool *{min-width:0}.color-filebar,.color-toolbar,.color-export-controls,.color-section-heading,.color-saved-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.color-filebar{border-bottom:1px solid var(--border);padding:1.25rem}.color-filebar strong{overflow-wrap:anywhere}.color-experience{border-bottom:1px solid var(--border);background:#f8f5ed;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem;display:flex}.color-experience strong{font-size:.85rem;display:block}.color-experience p{color:var(--muted-foreground);margin:.2rem 0 0;font-size:.75rem}.color-experience-toggle{flex:none;gap:.35rem;display:flex}.image-color-tool .eyebrow{margin-bottom:.5rem;font-size:.65rem}.image-color-tool h2{margin:.65rem 0;font-size:1.5rem;font-weight:700;line-height:1.2}.image-color-tool h3{font-size:1rem;font-weight:700}.color-note{color:var(--muted-foreground);margin:.5rem 0;font-size:.75rem;line-height:1.65}.color-empty{text-align:center;justify-items:center;gap:1.2rem;padding:3.5rem 1rem;display:grid;position:relative}.color-empty>svg{width:32px;height:32px;color:var(--primary)}.color-empty>div{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.color-empty small{color:var(--muted-foreground);font-size:.75rem}.color-workspace{grid-template-columns:minmax(0,1fr) 300px;display:grid}.color-image-panel{flex-direction:column;min-height:0;padding:1rem;display:flex;overflow:auto}.color-toolbar{justify-content:flex-start;gap:.5rem}.image-color-tool button[aria-pressed=true]{border-color:var(--foreground);background:#d1efdc}.image-color-tool label{flex-direction:column;gap:.4rem;font-size:.75rem;display:flex}.image-color-tool input:not([type=checkbox]),.image-color-tool select,.image-color-tool textarea{border:1px solid var(--border);background:var(--background);border-radius:5px;max-width:100%;padding:.6rem;font-size:.8rem}.image-color-tool :is(button,input,select,textarea,canvas,summary):focus-visible{outline:2px solid var(--primary);outline-offset:3px}.color-zoom-controls{flex-wrap:wrap;align-items:center;gap:.35rem;margin-left:auto;display:flex}.color-zoom-controls svg{width:.9rem;height:.9rem}.color-viewport{min-height:clamp(18rem,40vh,26rem);max-height:560px;box-shadow:inset 0 0 0 1px var(--border);overscroll-behavior:contain;background:#e8e5df;flex:1;place-items:start;display:grid;overflow:auto}.color-inspector-details{border-top:1px solid var(--border);flex:none;margin-top:.75rem}.color-inspector-details>summary{justify-content:space-between;align-items:center;gap:1rem;list-style:none;display:flex}.color-inspector-details>summary::-webkit-details-marker{display:none}.color-inspector-details>summary:after{content:"+";color:var(--primary);flex:none;font-size:1rem}.color-inspector-details[open]>summary:after{content:"−"}.color-inspector-details>summary span{font-weight:700}.color-inspector-details>summary small{color:var(--muted-foreground);margin-left:auto;font-size:.7rem;font-weight:400}.color-viewport[data-zoom=fit]{place-items:center}.color-image-wrap{line-height:0;position:relative}.color-image-wrap>canvas{cursor:crosshair;touch-action:none;width:100%;height:auto;display:block}.checker{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.color-crosshair{pointer-events:none;border:2px solid #fff;border-radius:50%;width:15px;height:15px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000}.color-region-outline{pointer-events:none;background:#ffd35d30;border:2px dashed #fff;outline:1px solid #222;position:absolute}.color-inspector{grid-template-columns:110px minmax(0,1fr);align-items:start;gap:1rem;margin-top:.5rem;padding-bottom:.25rem;display:grid}.color-inspector>canvas{border:1px solid var(--border);width:110px;height:110px;image-rendering:pixelated}.color-inspector strong{font-size:.75rem}.color-coordinate-fields{flex-wrap:wrap;align-items:end;gap:.5rem;margin:.5rem 0;display:flex}.color-coordinate-fields label{width:85px}.color-details{padding:1.25rem}.color-sample{border:1px solid var(--border);border-radius:5px;height:85px;overflow:hidden}.color-sample>div{height:100%}.color-values{gap:.5rem;margin:1rem 0;display:grid}.color-values button{border:1px solid var(--border);text-align:left;background:var(--background);border-radius:5px;grid-template-columns:1fr auto;gap:.35rem;padding:.6rem;display:grid}.color-values span{font-size:.65rem;font-weight:700}.color-values code{overflow-wrap:anywhere;grid-area:2/1/auto/-1;font-size:.72rem}.color-values small{color:var(--primary);grid-area:1/2;font-size:.65rem}.color-contrast{border-top:1px solid var(--border);margin-top:1.2rem;padding-top:1rem;font-size:.8rem}.image-color-tool summary{cursor:pointer;padding:.5rem 0;font-size:.8rem;font-weight:600}.color-contrast label{margin:.65rem 0}.color-text-preview{border:1px solid var(--border);margin:.6rem 0;padding:1rem;font-size:1rem}.color-contrast ul{gap:.25rem;margin:.5rem 0;display:grid}.color-palette-settings{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#f1eddf;flex-wrap:wrap;align-items:center;gap:1rem;padding:1.25rem;display:flex}.color-palette-settings .color-check{flex-direction:row;align-items:center}.color-check input{accent-color:var(--primary);width:18px;height:18px}.color-palette-settings>details,.color-palette-settings>[role=status]{flex-basis:100%;margin:0}.color-output{padding:1.25rem}.color-section-heading>span,.color-saved-heading>span{color:var(--muted-foreground);font-size:.75rem}.color-swatches{grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:.5rem;margin:1rem 0;display:grid}.color-swatches button{text-align:left;border:1px solid var(--border);border-radius:5px;overflow:hidden}.color-swatches button:hover{border-color:var(--foreground)}.color-swatches span{height:90px;display:block}.color-swatches strong,.color-swatches small{margin:.5rem;font-size:.75rem;display:block}.color-swatches small{color:var(--muted-foreground);font-size:.7rem}.color-saved-heading{margin:1.25rem 0 .75rem}.color-saved{flex-wrap:wrap;gap:.5rem;display:flex}.color-saved>div{border:1px solid var(--border);border-radius:4px;display:flex;overflow:hidden}.color-saved button{align-items:center;gap:.35rem;padding:.5rem;font-size:.75rem;display:flex}.color-saved span{border:1px solid #0002;border-radius:3px;width:22px;height:22px}.color-export-controls{border-top:1px solid var(--border);justify-content:flex-start;align-items:end;gap:.6rem;margin-top:1.25rem;padding-top:1.25rem}.color-output textarea{width:100%;font-family:monospace}.color-copy-fallback{width:calc(100% - 2rem);margin:0 1rem 1rem}.color-error{color:#a32117;background:#ffe3dc;border-top:1px solid #d8593c;padding:1rem}.color-notice{padding:0 1.25rem;font-size:.8rem}.color-notice:not(:empty){background:#d1efdc;padding:1rem 1.25rem}@media (width<=850px){.color-image-panel{display:block;overflow:visible}.color-details{grid-template-columns:110px minmax(0,1fr);gap:.75rem;display:grid}.color-details>.eyebrow,.color-details>.color-values,.color-details>.color-contrast{grid-column:1/-1}.color-details>h2{overflow-wrap:anywhere;align-self:center;font-size:1.3rem}.color-details>.color-note{grid-column:1/-1}.color-values{grid-template-columns:1fr 1fr}.color-sample{height:80px}.color-viewport{min-height:min(68vw,26rem);max-height:440px}}@media (width<=450px){.color-experience{flex-direction:column;align-items:stretch;padding:.85rem 1rem}.color-experience-toggle>button{flex:1}.color-filebar,.color-image-panel,.color-details,.color-output,.color-palette-settings{padding:1rem}.color-inspector{grid-template-columns:78px minmax(0,1fr);gap:.65rem}.color-inspector>canvas{width:78px;height:78px}.color-coordinate-fields label{width:70px}.color-zoom-controls{margin-left:0}.color-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.color-swatches span{height:70px}.color-values{grid-template-columns:1fr}.color-empty{padding:2.5rem 1rem}.color-export-controls>button{flex-grow:1}.color-crosshair{width:12px;height:12px}}.image-color-workspace .tool-workspace-side{background:var(--card)}.image-color-side-panel .color-palette-settings{border-bottom:0}.color-result-section{border-top:1px solid var(--foreground)}.color-result-section>.tool-workflow-header{border-bottom:1px solid var(--border)}@media (width<=860px){.image-color-workspace .tool-workspace-media{overflow:visible}}