.image-color-container{max-width:1280px}.image-color-workspace{padding-top:1rem}.tool-panel.image-color-panel{padding:0;overflow:hidden;overflow:clip;border:0;background:#171717;box-shadow:0 16px 48px #0000006b}.image-color-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.image-color-layout{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(390px,1fr);align-items:start}.image-color-stage,.image-color-inspector{min-width:0;padding:clamp(1.25rem,2.5vw,2rem)}.image-color-stage{position:sticky;top:0;background:#202020}.image-color-inspector{border-inline-start:1px solid rgba(255,255,255,.09);background:#151515}.image-color-section-heading,.image-color-artifact-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.image-color-section-heading{margin-bottom:1rem}.image-color-section-heading h2,.image-color-section-heading h3,.image-color-artifact-heading h3,.image-color-sample-summary h3{margin:0;color:#fff;font-family:var(--font-montserrat-semi-bold);letter-spacing:-.02em}.image-color-section-heading h2{font-size:clamp(1.05rem,2vw,1.3rem)}.image-color-section-heading h3,.image-color-artifact-heading h3,.image-color-sample-summary h3{font-size:1rem}.image-color-section-heading p{max-width:58ch;margin:.35rem 0 0;color:#ffffffb8;font-size:.78rem;line-height:1.5}.image-color-panel .tool-btn,.image-color-panel .tool-btn-secondary,.image-color-panel .tool-btn-icon,.image-color-panel .tool-input,.image-color-panel .tool-select{min-height:44px}.image-color-panel .tool-btn,.image-color-panel .tool-btn-secondary,.image-color-panel .tool-btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}.image-color-panel .tool-input:focus,.image-color-panel .tool-select:focus,.image-color-panel button:focus-visible,.image-color-panel a:focus-visible,.image-color-panel canvas:focus-visible,.image-color-panel textarea:focus-visible{outline:2px solid #ffb15a;outline-offset:3px}.image-color-dropzone{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:106px;padding:1rem;border:1px dashed rgba(255,177,90,.52);border-radius:12px;background:#ff8c4211;transition:border-color .16s ease-out,background-color .16s ease-out,transform .16s ease-out}.image-color-dropzone[data-state=drag]{border-color:#ffb15a;background:#ff8c4224;transform:translateY(-1px)}.image-color-dropzone[data-state=loading]{cursor:wait;opacity:.72}.image-color-dropzone-copy{display:flex;align-items:center;min-width:0;gap:.85rem}.image-color-dropzone-copy>i{flex:0 0 auto;color:#ffad69;font-size:1.55rem}.image-color-dropzone-copy>div{min-width:0;overflow-wrap:anywhere}.image-color-dropzone-copy strong,.image-color-dropzone-copy span{display:block}.image-color-dropzone-copy strong{color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:.9rem}.image-color-dropzone-copy span{margin-top:.3rem;color:#ffffffb3;font-size:.75rem;line-height:1.45}.image-color-source-actions{display:flex;flex:0 0 auto;align-items:center;gap:.55rem}.image-color-source-actions button{white-space:normal;text-align:center}.image-color-panel .image-color-touch-only{display:none}@media (hover: none) and (pointer: coarse){.image-color-panel .image-color-pointer-only{display:none}.image-color-panel .image-color-dropzone-copy .image-color-touch-only{display:block}}.image-color-hint{margin:.6rem 0 0;color:#ffffffb0;font-size:.75rem;line-height:1.55}.image-color-error{min-height:0;margin-top:.65rem;color:#ffb4ab}.image-color-error.visible{margin-bottom:0}.image-color-source-meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px;margin-top:1rem;color:#ffffffbd;font-size:.76rem}.image-color-source-meta strong{color:#fff;font-family:var(--font-monospace);font-size:.78rem;font-weight:500}.image-color-canvas-shell,.image-color-magnifier-wrap,.image-color-selected-swatch,.image-color-palette-swatch{background-color:#d7d7d7;background-image:linear-gradient(45deg,#f2f2f2 25%,transparent 25%),linear-gradient(-45deg,#f2f2f2 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f2f2 75%),linear-gradient(-45deg,transparent 75%,#f2f2f2 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.image-color-canvas-shell{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:3 / 2;min-height:320px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 10px 32px #0000004d}#imageColorCanvas{display:block;max-width:100%;max-height:100%;cursor:crosshair;touch-action:pan-y}.image-color-marker{position:absolute;z-index:3;left:50%;top:50%;width:20px;height:20px;border:2px solid #ffffff;border-radius:999px;box-shadow:0 0 0 1px #000000eb,0 3px 10px #0000007a;pointer-events:none;transform:translate(-50%,-50%)}.image-color-marker:before,.image-color-marker:after{position:absolute;inset:50% auto auto 50%;content:"";background:#fff;box-shadow:0 0 0 1px #000000c7;transform:translate(-50%,-50%)}.image-color-marker:before{width:1px;height:30px}.image-color-marker:after{width:30px;height:1px}.image-color-panel.is-sampling .image-color-marker{animation:image-color-lock .3s cubic-bezier(.16,1,.3,1)}@keyframes image-color-lock{0%{box-shadow:0 0 0 1px #000000eb,0 3px 10px #0000007a;transform:translate(-50%,-50%) scale(.78)}55%{box-shadow:0 0 0 1px #000000eb,0 3px 10px #0000007a,0 0 0 8px #ffb15a3d}to{box-shadow:0 0 0 1px #000000eb,0 3px 10px #0000007a;transform:translate(-50%,-50%) scale(1)}}.image-color-loading{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;gap:.65rem;padding:1rem;background:#0e0e0ed6;color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:.86rem}.image-color-canvas-shell[data-state=loading] .image-color-loading{display:flex}.image-color-sampling-dock{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;gap:1rem;padding:1rem;border-radius:12px;background:#202020}.image-color-magnifier-wrap{position:relative;width:132px;height:132px;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:10px}#imageColorMagnifier{display:block;width:132px;height:132px}.image-color-magnifier-reticle{position:absolute;left:50%;top:50%;width:13px;height:13px;border:2px solid #ffffff;box-shadow:0 0 0 1px #000;transform:translate(-50%,-50%);pointer-events:none}.image-color-sample-summary{min-width:0}.image-color-sample-summary>p{margin:.35rem 0 .7rem;color:#ffffffb8;font-family:var(--font-monospace);font-size:.76rem}.image-color-selected-swatch{position:relative;width:100%;height:46px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:8px}#imageColorSelectedSwatch{position:absolute;top:0;right:0;bottom:0;left:0;background:#ff8c42}.image-color-sample-summary>strong{display:block;margin-top:.65rem;color:#fff;font-family:var(--font-monospace);font-size:1.05rem}.image-color-sample-summary>span:last-child{display:block;margin-top:.2rem;color:#ffffffad;font-size:.75rem}.image-color-coordinate-controls,.image-color-formats,.image-color-artifact,.image-color-sampling-dock{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}.image-color-sampling-dock{padding-top:1rem;border-top:0}.image-color-palette+.image-color-sampling-dock{margin-top:1.2rem}.image-color-coordinate-row{display:grid;grid-template-columns:minmax(72px,.55fr) minmax(72px,.55fr) minmax(138px,1.3fr);align-items:end;gap:.55rem}.image-color-coordinate-row label{min-width:0;margin:0}.image-color-coordinate-row label>span{display:block;margin-bottom:.4rem;color:#ffffffc2;font-family:var(--font-montserrat-semi-bold);font-size:.75rem}.image-color-coordinate-row .tool-input{width:100%;min-width:0;background:#0d0d0d;font-family:var(--font-monospace)}.image-color-coordinate-row .tool-btn-secondary{width:100%;padding-inline:.65rem;white-space:normal;text-align:center}.image-color-nudge-controls{display:grid;grid-template-columns:repeat(4,44px);justify-content:end;gap:.4rem;margin-top:.6rem}.image-color-nudge-controls button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffff13;color:#fff;cursor:pointer}.image-color-nudge-controls button:hover{border-color:#ffb15a8c;background:#ff8c421f;color:#ffc382}.image-color-format-list{overflow:hidden;border-block:1px solid rgba(255,255,255,.1)}.image-color-format-row{display:block;margin:0;padding:.85rem 0}.image-color-format-row+.image-color-format-row{border-top:1px solid rgba(255,255,255,.075)}.image-color-format-row>label{display:block;margin-bottom:.4rem;color:#ffffffc2;font-family:var(--font-montserrat-semi-bold);font-size:.75rem}.image-color-format-control{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:.5rem}.image-color-format-control .tool-input{width:100%;min-width:0;background:#0d0d0d;font-family:var(--font-monospace);font-size:.82rem}.image-color-format-control .tool-btn-icon{width:44px;min-width:44px;padding:0}.image-color-palette .image-color-hint{margin-top:-.45rem;margin-bottom:.8rem}.image-color-palette-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;min-height:140px}.image-color-palette-list[data-columns="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}.image-color-palette-button{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;min-width:0;min-height:86px;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:#252525;cursor:pointer}.image-color-palette-button:before{position:absolute;top:0;right:0;bottom:30px;left:0;content:"";background:var(--palette-color, #ff8c42)}.image-color-palette-button>span{position:relative;z-index:1;display:block;min-width:0;min-height:30px;padding:.43rem .38rem;background:#0f0f0f;color:#fff;font-family:var(--font-monospace);font-size:.75rem;line-height:1.2;text-align:center;white-space:nowrap}.image-color-palette-button[aria-pressed=true]{border-color:#ffb15a;box-shadow:0 0 0 2px #ffb15a3d}.image-color-palette-empty{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;min-height:140px;padding:1rem;border-radius:10px;background:#202020;color:#ffffffad;font-size:.76rem;line-height:1.5;text-align:center}.image-color-artifact-heading{align-items:center;margin-bottom:.75rem}.image-color-artifact-heading .tool-select{max-width:160px;min-height:44px;background:#0d0d0d}.image-color-export-output{display:block;width:100%;min-height:178px;padding:.85rem;resize:vertical;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:#0d0d0d;color:#f1f1f1;font-family:var(--font-monospace);font-size:.75rem;line-height:1.55;white-space:pre}.image-color-artifact-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}.image-color-artifact-actions button{flex:1 1 auto;min-width:0;padding-inline:.65rem;white-space:normal;text-align:center}.image-color-status{min-height:42px;margin-top:.85rem;padding:.68rem .75rem;border-radius:8px;background:#202020;color:#ffffffc9;font-size:.76rem;line-height:1.5}.image-color-status[data-state=loading]{color:#ffe0b8}.image-color-status[data-state=success]{background:#3f93602b;color:#b9f3cd}.image-color-status[data-state=error]{background:#d649402b;color:#ffd0cc}.image-color-status[data-state=warning]{background:#bb81232e;color:#ffe0a3}.image-color-context-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;margin-top:1.2rem;padding:1rem;border-radius:12px;background:linear-gradient(120deg,#ff8c4233,#ffc14b14)}.image-color-context-cta[hidden]{display:none}.image-color-context-cta h3{margin:0 0 .35rem;color:#fff;font-family:var(--font-montserrat-semi-bold);font-size:.94rem}.image-color-context-cta p{max-width:50ch;margin:0;color:#ffffffc2;font-size:.75rem;line-height:1.5}.image-color-context-actions{display:flex;flex-direction:column;gap:.5rem;min-width:174px}.image-color-context-actions .tool-btn,.image-color-context-actions .tool-btn-secondary{min-height:44px;white-space:normal;text-align:center;text-decoration:none}.image-color-guide .container{max-width:930px}.image-color-steps{margin:0 0 2rem;padding-inline-start:1.35rem}.image-color-steps li{margin-bottom:.65rem;color:#ffffffc7;line-height:1.65}.image-color-cta-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;margin-top:1.35rem}.image-color-cta-actions .primary-button{text-decoration:none}.image-color-cta-actions .tool-text-link{color:#ffd08f;font-family:var(--font-montserrat-semi-bold);text-decoration:underline;text-underline-offset:.24em}@media (max-width: 1080px){.image-color-layout{display:flex;flex-direction:column;align-items:stretch;padding:clamp(1.25rem,2.5vw,2rem);background:#1c1c1c}.image-color-stage,.image-color-inspector{display:contents}.image-color-stage>*{order:-2}.image-color-sampling-dock{order:-1;margin-top:.75rem;background:#262626}.image-color-inspector>.image-color-section-heading{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.1)}.image-color-canvas-shell{min-height:280px}}@media (max-width: 760px){.image-color-layout{padding:1.15rem}.image-color-dropzone{align-items:stretch;flex-direction:column}.image-color-source-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.image-color-sampling-dock{grid-template-columns:116px minmax(0,1fr)}.image-color-magnifier-wrap,#imageColorMagnifier{width:116px;height:116px}.image-color-coordinate-row{grid-template-columns:repeat(2,minmax(0,1fr))}.image-color-coordinate-row .tool-btn-secondary{grid-column:1 / -1}.image-color-nudge-controls{justify-content:start}.image-color-context-cta{grid-template-columns:minmax(0,1fr)}.image-color-context-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}}@media (max-width: 680px){.image-color-source-actions,.image-color-context-actions{grid-template-columns:minmax(0,1fr)}.image-color-source-actions button,.image-color-artifact-actions button{width:100%}}@media (max-width: 560px){.image-color-section-heading{align-items:stretch;flex-direction:column}.image-color-section-heading>.tool-btn-icon{width:100%}.image-color-source-meta{align-items:flex-start;flex-direction:column;gap:.25rem;padding-block:.45rem}.image-color-canvas-shell{min-height:220px;border-radius:12px}.image-color-sampling-dock{grid-template-columns:104px minmax(0,1fr);gap:.8rem;padding:.8rem}.image-color-magnifier-wrap,#imageColorMagnifier{width:104px;height:104px}.image-color-palette-list{grid-template-columns:repeat(2,minmax(0,1fr))}.image-color-palette-list[data-columns="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}.image-color-artifact-heading{align-items:stretch;flex-direction:column}.image-color-artifact-heading .tool-select{width:100%;max-width:none}}@media (max-width: 380px){.image-color-sampling-dock{grid-template-columns:minmax(0,1fr)}.image-color-magnifier-wrap{width:132px;height:132px;margin-inline:auto}#imageColorMagnifier{width:132px;height:132px}.image-color-coordinate-row{grid-template-columns:minmax(0,1fr)}.image-color-coordinate-row .tool-btn-secondary{grid-column:auto}.image-color-nudge-controls{grid-template-columns:repeat(4,minmax(44px,1fr))}.image-color-nudge-controls button{width:100%}}@media (prefers-reduced-motion: reduce){.image-color-dropzone,.image-color-panel .tool-btn,.image-color-panel .tool-btn-secondary,.image-color-panel .tool-btn-icon{transition:none}.image-color-panel.is-sampling .image-color-marker{animation:none}}@media (forced-colors: active){#imageColorCanvas,#imageColorMagnifier,#imageColorSelectedSwatch,.image-color-palette-button:before{forced-color-adjust:none}.image-color-panel,.image-color-dropzone,.image-color-canvas-shell,.image-color-sampling-dock,.image-color-format-list,.image-color-palette-button,.image-color-export-output,.image-color-status,.image-color-context-cta{border:1px solid CanvasText}.image-color-marker,.image-color-magnifier-reticle{border-color:Highlight;box-shadow:none}.image-color-palette-button[aria-pressed=true]{outline:3px solid Highlight;outline-offset:2px}}.image-color-palette-heading{flex-direction:column;align-items:stretch;gap:.75rem}.image-color-palette-heading p{max-width:none}.image-color-palette-controls{display:flex;flex:0 0 auto;gap:.5rem}.image-color-palette-controls label:last-child{flex:1 1 auto}.image-color-palette-controls label{display:grid;gap:.3rem;margin:0;min-width:0}.image-color-palette-controls label>span{color:#ffffffb8;font-family:var(--font-montserrat-semi-bold);font-size:.75rem}.image-color-palette-controls .tool-select{min-width:0;padding-inline:.6rem 1.8rem;background-color:#0d0d0d;font-size:.82rem}.image-color-palette-controls label:first-child .tool-select{width:5.2rem}@media (max-width: 560px){.image-color-palette-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.image-color-palette-controls label:first-child .tool-select{width:100%}}