.color-tool .tool-inputs{border-top:0}
.cw-picker{position:relative;width:min(360px,100%);aspect-ratio:1;margin:0 auto 8px;touch-action:none;user-select:none}
.cw-wheel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#f00 0deg,#ff0 60deg,#0f0 120deg,#0ff 180deg,#00f 240deg,#f0f 300deg,#f00 360deg);cursor:crosshair;touch-action:none}
.cw-wheel::before{content:"";position:absolute;inset:12%;border-radius:50%;background:var(--paper);pointer-events:none}
.cw-wheel:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.cw-wheel-marker{position:absolute;z-index:1;top:6%;left:50%;width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:#1b1e21;box-shadow:0 0 0 2px #1b1e21,0 2px 8px #0008;transform:translate(-50%,-50%);pointer-events:none}
.cw-field{position:absolute;top:23%;left:23%;width:54%;height:54%;border:2px solid #ffffff9c;border-radius:7px;box-shadow:0 4px 18px #0004;cursor:crosshair;touch-action:none}
.cw-field-marker{position:absolute;top:50%;left:50%;width:18px;height:18px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #202020,0 2px 6px #0007;transform:translate(-50%,-50%);pointer-events:none}
.cw-picker-hint{text-align:center;margin:0 auto 20px;max-width:28em}
.cw-group{min-width:0;margin:0;padding:20px 0 18px;border:0;border-top:1px solid var(--rule);font-family:var(--sans)}
.cw-group legend{padding:0 10px 0 0;font-size:18px;font-weight:800}
.cw-channel{display:grid;grid-template-columns:118px minmax(0,1fr) 78px;gap:12px;align-items:center;margin:12px 0}
.cw-channel label{font-size:15px;font-weight:700}
.cw-channel label span{color:var(--muted);font-weight:500}
.cw-channel input[type=range]{margin:0}
.cw-number{text-align:center;padding:0 4px}
.cw-rgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cw-rgb label{display:block;font-size:14px;font-weight:700}
.cw-rgb .input{margin-top:6px}
.cw-rgb-group .hint{margin-top:10px}
.cw-result{gap:16px}
.cw-swatch{display:grid;place-items:center;min-height:280px;border-radius:14px;background:#f5a623;color:#1b1e21;transition:background-color .08s linear}
.cw-swatch span{font:800 clamp(26px,4vw,44px)/1 var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cw-readout{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:3px 0 12px;border-bottom:1px solid var(--on-body-rule);font:600 14px var(--sans);color:var(--on-body-muted)}
.cw-readout strong{color:var(--on-body);font-size:22px;font-variant-numeric:tabular-nums}
.cw-hex-row{font-family:var(--sans)}
.cw-hex-row>label{display:block;margin-bottom:7px;font-size:14px;font-weight:700;color:var(--on-body)}
.cw-hex-row>div{display:flex;gap:8px}
.cw-hex-row .input{min-width:0;background:var(--body-2);border-color:var(--on-body-rule);color:var(--on-body);text-transform:uppercase}
.cw-hex-row .input:focus{border-color:var(--amber)}
.cw-hex-row .btn-quiet{flex:none}
.cw-hex-row .hint{color:var(--on-body-muted);margin-top:7px}
.cw-status{min-height:1.2em;margin:-8px 0 0;font:600 13px var(--sans);color:var(--on-body-muted)}
@media(max-width:520px){.cw-channel{grid-template-columns:1fr 70px;gap:4px 10px}.cw-channel label{grid-column:1/-1}.cw-picker{width:min(320px,100%)}.cw-swatch{min-height:190px}}
@media(prefers-reduced-motion:reduce){.cw-swatch{transition:none}}