.cw{flex-direction:column;gap:16px;min-width:0;display:flex}.cw.compact{gap:8px}.cw-modes{background:var(--surface);align-self:center}.cw-modes .btn{justify-content:center;min-width:118px;position:relative}.cw-live{opacity:.55;background:currentColor;border-radius:50%;width:6px;height:6px;margin-left:2px}.cw-stage{justify-content:center;display:flex}.cw-wheel-box{flex-direction:column;flex-shrink:0;align-items:center;gap:12px;min-width:0;display:flex}.cw-wheel{aspect-ratio:1;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;outline:none;flex-shrink:0;position:relative}.cw-wheel:focus-visible .cw-disc{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}.cw-wheel.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.cw-disc{width:100%;height:100%;box-shadow:0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent), 0 4px 18px #0000001a;background:radial-gradient(circle closest-side,#fff,#fff0),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;position:relative}.cw-thumb,.cw-target,.cw-temp-thumb,.cw-temp-target{width:var(--cw-thumb);height:var(--cw-thumb);margin:calc(var(--cw-thumb) / -2) 0 0 calc(var(--cw-thumb) / -2);pointer-events:none;border-radius:50%;position:absolute}.cw-thumb,.cw-temp-thumb{border:3px solid #fff;transition:transform .12s;box-shadow:0 0 0 1px #00000040,0 2px 8px #0000004d}.cw-wheel:not(.dragging) .cw-thumb{transition:left .3s,top .3s,transform .12s}.cw-wheel.dragging .cw-thumb{transform:scale(1.18)}.cw-wheel.dim .cw-thumb{opacity:.55;transform:scale(.8)}.cw-target{border:2px dashed #fff;animation:1.2s ease-in-out infinite pulse;box-shadow:0 0 0 1px #00000059,inset 0 0 0 1px #00000059}.cw-readout{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;min-height:24px;font-size:.9rem;display:flex}.cw-dot{vertical-align:-2px;border-radius:50%;flex-shrink:0;width:14px;height:14px;display:inline-block;box-shadow:inset 0 0 0 1px #00000029}.cw-pending{color:var(--accent);align-items:center;gap:5px;font-weight:600;animation:1.2s ease-in-out infinite pulse;display:inline-flex}.cw-swatches{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.cw-swatches.wrap{grid-template-columns:repeat(var(--cw-n), minmax(0, 32px));justify-content:center;gap:10px;display:grid}.cw-swatches.wrap .cw-swatch{aspect-ratio:1;width:100%;height:auto}.cw-swatch{cursor:pointer;border:0;border-radius:50%;flex:none;width:32px;height:32px;padding:0;transition:transform .12s;position:relative;box-shadow:inset 0 0 0 1px #00000024}.cw-swatch:hover:not(:disabled){transform:scale(1.1)}.cw-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.cw-swatch.active{box-shadow:inset 0 0 0 1px #00000024, 0 0 0 2px var(--surface), 0 0 0 4px var(--text)}.cw-swatch.pending:after{content:"";border:2px dashed var(--accent);border-radius:50%;animation:1.2s ease-in-out infinite pulse;position:absolute;inset:-5px}.cw-swatch:disabled{opacity:.45;cursor:not-allowed}.cw-swatches.grid{grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;gap:8px 6px;display:grid}.cw-swatches.grid .cw-swatch{aspect-ratio:1;width:100%;max-width:28px;height:auto}.cw-swatches.line{grid-template-columns:repeat(var(--cw-n), minmax(0, 24px));justify-content:space-between;gap:4px;display:grid}.cw-swatches.line .cw-swatch{aspect-ratio:1;width:100%;height:auto}.cw-row{align-items:center;gap:14px;min-width:0;display:flex}.cw-side{flex-direction:column;flex:1;justify-content:center;gap:12px;min-width:0;display:flex}.cw-temp{flex-direction:column;gap:8px;transition:opacity .2s;display:flex}.cw-temp.dim .cw-temp-thumb{opacity:.6;transform:scale(.8)}.cw-temp-track{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;height:36px;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);border-radius:12px;outline:none;position:relative}.cw-temp-track:focus-visible{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}.cw-temp-track.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.cw-temp.compact .cw-temp-track{border-radius:9px;height:24px}.cw-temp-thumb,.cw-temp-target{top:50%}.cw-temp-target{border:2px dashed #0009;animation:1.2s ease-in-out infinite pulse;box-shadow:0 0 0 1px #ffffffb3}.cw-temp-legend{color:var(--muted);justify-content:space-between;align-items:baseline;gap:8px;font-size:.78rem;display:flex}.cw-temp-value{color:var(--text);text-align:center;font-size:.9rem}