.sw{
  position:relative; padding:0; border:1px solid var(--hair-strong); border-radius:4px;
  background:none; cursor:pointer; overflow:hidden; display:block;
}
.sw:hover{ border-color:var(--ink-faint); }
.sw[aria-expanded="true"]{ border-color:var(--amber); box-shadow:0 0 0 1px var(--amber); }
.sw > i{
  display:block; width:100%; height:100%; border-radius:2px;
  background:
    linear-gradient(to right, var(--sw-solid) 50%, var(--sw-color) 50%),
    conic-gradient(#8a8a8a 25%, #d8d8d8 0 50%, #8a8a8a 0 75%, #d8d8d8 0) 0 0 / 6px 6px;
}
.sw-wide{ width:30px; height:18px; border-radius:3px; }

.cp-pop{
  position:fixed; z-index:400; width:228px; box-sizing:border-box;
  background:var(--paper); border:1px solid var(--hair-strong); border-radius:8px;
  padding:10px; box-shadow:0 12px 32px rgba(0,0,0,.45); color:var(--ink);
}
.cp-pop[hidden]{ display:none; }

.cp-head{ display:flex; align-items:center; gap:6px; margin-bottom:9px; }
.cp-title{
  flex:1; min-width:0; font-family:'IBM Plex Mono',monospace; font-size:var(--font-sm);
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cp-head button{
  display:grid; place-items:center; width:22px; height:22px; flex:0 0 auto; padding:0;
  background:none; border:1px solid transparent; border-radius:4px; color:var(--ink-soft); cursor:pointer;
}
.cp-head button:hover{ border-color:var(--hair-strong); color:var(--ink); }
.cp-dropper[aria-pressed="true"]{ background:var(--amber); color:var(--paper); border-color:var(--amber); }
body.cp-picking, body.cp-picking *{ cursor:crosshair !important; }

.cp-sv{ position:relative; height:118px; border-radius:5px; touch-action:none; cursor:crosshair; }
.cp-sv-thumb{
  position:absolute; width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5);
  transform:translate(-50%,-50%); pointer-events:none;
}
.cp-track{ position:relative; height:12px; margin-top:10px; border-radius:99px; touch-action:none; cursor:pointer; }
.cp-hue{ background:linear-gradient(to right,#f00,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00); }
.cp-alpha{ background:conic-gradient(#8a8a8a 25%,#d8d8d8 0 50%,#8a8a8a 0 75%,#d8d8d8 0) 0 0 / 8px 8px; }
.cp-alpha-fill{ position:absolute; inset:0; border-radius:inherit; }
.cp-thumb{
  position:absolute; top:50%; width:14px; height:14px; border-radius:50%;
  background:#fff; border:1px solid rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4);
  transform:translate(-50%,-50%); pointer-events:none;
}

.cp-foot{ display:grid; grid-template-columns:minmax(0,1fr) 52px; gap:6px; align-items:start; margin-top:11px; }
.cp-foot label{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cp-foot label > span{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.09em;
  color:var(--ink-faint); text-align:center;
}
.cp-hex{
  width:100%; min-width:0; box-sizing:border-box; font-family:'IBM Plex Mono',monospace;
  font-size:var(--font-sm); color:var(--ink); background:var(--paper);
  border:1px solid var(--hair-strong); border-radius:4px; padding:5px 4px; text-align:center;
}
.cp-hex.cp-bad{ border-color:#e0523f; }
.cp-pct{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:var(--font-sm);
  color:var(--ink-soft); text-align:center; padding:6px 0;
}
.cp-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cp-fmt{
  font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.09em;
  color:var(--ink-faint); background:none; border:1px solid transparent; border-radius:3px;
  padding:1px 0; cursor:pointer; text-align:center;
}
.cp-fmt:hover{ color:var(--ink); border-color:var(--hair-strong); }
.cp-pop [tabindex]:focus-visible,
.cp-pop input:focus-visible,
.cp-pop button:focus-visible,
.sw:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }