.tool-intro{padding:34px 0 26px}.tool-intro h1{margin-bottom:10px}.tool-intro>p:not(.eyebrow){max-width:750px;color:var(--muted);font-size:1.08rem}.tool-intro .privacy-note{color:var(--success);align-items:center;gap:8px;margin:16px 0 0;font-size:.91rem;font-weight:650;display:flex}.picker-shell{margin-bottom:74px}.picker-card{border:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow);border-radius:16px;grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr);display:grid;overflow:hidden}.drop-zone{background-color:#f8fafc;background-image:linear-gradient(45deg,#edf1f5 25%,#0000 25%),linear-gradient(-45deg,#edf1f5 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#edf1f5 75%),linear-gradient(-45deg,#0000 75%,#edf1f5 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;outline:none;place-items:center;min-width:0;min-height:490px;transition:box-shadow .15s,background-color .15s;display:grid}.drop-zone:focus-visible,.drop-zone.is-dragging{box-shadow:inset 0 0 0 4px var(--accent);background-color:#eaf5ff}.empty-state{border:2px dashed var(--line-strong);text-align:center;background:#fffffff0;border-radius:15px;width:min(480px,100% - 36px);padding:54px 30px}.empty-state h3{margin:18px 0 5px;font-size:1.35rem}.empty-state>p{color:var(--muted)}.upload-icon{width:66px;height:66px;color:var(--accent);background:#e5f3ff;border-radius:18px;place-items:center;margin:auto;display:grid}.button{cursor:pointer;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;min-height:42px;padding:8px 16px;font-weight:700;text-decoration:none;display:inline-flex}.button.primary{background:var(--ink);color:#fff}.button.primary:hover{color:#fff;background:#263451}.button.secondary{border-color:var(--line-strong);background:#fff}.button.quiet{color:var(--danger);background:0 0}.file-help{font-size:.8rem;margin:16px 0 0!important}.image-workspace{align-self:stretch;width:100%;min-width:0}.image-toolbar{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;display:flex}.file-details{min-width:0;display:grid}.file-details strong{white-space:nowrap;text-overflow:ellipsis;max-width:36ch;overflow:hidden}.file-details span{color:var(--muted);font-size:.78rem}.toolbar-actions{gap:4px;display:flex}.toolbar-actions .button{min-height:36px;padding:5px 11px;font-size:.84rem}.canvas-wrap{place-items:center;min-height:390px;padding:18px;display:grid;position:relative;overflow:auto}[data-image-canvas]{cursor:crosshair;touch-action:none;width:auto;max-width:100%;height:auto;max-height:65vh;display:block;box-shadow:0 2px 16px #17223b2e}[data-image-canvas]:focus-visible{outline:4px solid var(--accent);outline-offset:4px}.magnifier{pointer-events:none;background:#fff;border:2px solid #fff;border-radius:50%;width:136px;height:136px;padding:2px;position:absolute;top:28px;right:28px;overflow:hidden;box-shadow:0 3px 18px #00000059}.magnifier canvas{border-radius:50%;width:132px;height:132px}.canvas-help{color:var(--muted);text-align:center;background:#fff;margin:0;padding:9px 16px 12px;font-size:.8rem}.results{border-left:1px solid var(--line);background:#fff;padding:26px}.results-heading{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}.results-heading h3{font-size:1.35rem}.selected-swatch{border:1px solid var(--line-strong);border-radius:12px;flex:none;width:72px;height:72px;box-shadow:inset 0 0 0 4px #fff}.selected-swatch.is-empty{background-image:linear-gradient(45deg,#dfe4eb 25%,#0000 25%),linear-gradient(-45deg,#dfe4eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#dfe4eb 75%),linear-gradient(-45deg,#0000 75%,#dfe4eb 75%)!important;background-position:0 0,0 8px,8px -8px,-8px 0!important;background-size:16px 16px!important}.coordinates{border-bottom:1px solid var(--line);margin:24px 0 16px;padding-bottom:16px}.coordinates div{justify-content:space-between;gap:20px;display:flex}.coordinates dt{color:var(--muted)}.coordinates dd{font-variant-numeric:tabular-nums;margin:0;font-weight:700}.color-values{gap:10px;display:grid}.color-value{border:1px solid var(--line);border-radius:8px;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 8px 8px 12px;display:grid}.color-value>span{color:var(--muted);font-size:.72rem;font-weight:800}.color-value output{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.83rem;overflow:hidden}.color-value button{color:var(--accent);cursor:pointer;background:#edf6ff;border:0;border-radius:5px;padding:5px 8px;font-size:.75rem;font-weight:750}.color-value button:disabled{color:#8791a1;background:var(--surface-soft);cursor:default}.status{min-height:48px;color:var(--muted);background:var(--surface-soft);border-radius:7px;margin:20px 0 0;padding:10px 12px;font-size:.8rem}.status[data-error=true]{color:var(--danger);background:#fff1f2}.palette-card{border:1px solid var(--line);border-radius:12px;justify-content:space-between;align-items:center;gap:30px;margin-top:14px;padding:20px 24px;display:flex}.palette-card h3{margin-bottom:5px}.palette-card p:last-child{color:var(--muted);margin:0;font-size:.84rem}.palette{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.palette-color{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;gap:5px;padding:5px;display:grid}.palette-color>span{background:var(--palette-color);border-radius:5px;width:62px;height:42px}.palette-color strong{font-family:ui-monospace,monospace;font-size:.68rem}.content{gap:64px;display:grid}.content>section:first-child{max-width:840px}.steps{counter-reset:steps;grid-template-columns:repeat(3,1fr);gap:14px;padding:0;list-style:none;display:grid}.steps li{border:1px solid var(--line);min-height:150px;color:var(--muted);border-radius:10px;padding:48px 18px 18px;position:relative}.steps li:before{counter-increment:steps;content:counter(steps);color:#fff;background:var(--ink);border-radius:50%;place-items:center;width:24px;height:24px;font-size:.75rem;font-weight:800;display:grid;position:absolute;top:14px;left:18px}.steps strong{color:var(--ink)}.content-grid code{color:var(--ink);background:var(--surface-soft);border-radius:4px;padding:.12rem .3rem}.related-grid{gap:12px;display:grid}.visually-hidden{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (width<=860px){.picker-card{grid-template-columns:1fr}.results{border-top:1px solid var(--line);border-left:0}.palette-card{flex-direction:column;align-items:flex-start}.palette{justify-content:flex-start}}@media (width<=600px){.tool-intro{padding-top:25px}.picker-card{border-radius:12px}.drop-zone{min-height:410px}.empty-state{padding:38px 18px}.image-toolbar{align-items:flex-start}.file-details strong{max-width:20ch}.toolbar-actions{flex-direction:column}.canvas-wrap{min-height:290px;padding:10px}[data-image-canvas]{max-height:55vh}.magnifier{width:104px;height:104px;top:18px;right:18px}.magnifier canvas{width:100px;height:100px}.results{padding:20px}.palette-card{padding:18px}.palette-color>span{width:54px}.steps{grid-template-columns:1fr}.steps li{min-height:auto}}