.cp{min-width:0}.cp-trig{border:1px solid var(--line,#e1e4ea);background:var(--surface,#fff);width:100%;font:600 13px var(--font-sans,inherit);color:var(--muted,#566579);cursor:pointer;text-align:left;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:6px 7px 6px 12px;display:flex}.cp-trig:hover{border-color:var(--v-line,#cfc8ff)}.cp-trig:focus-visible{outline:2px solid var(--v,#4f3dd8);outline-offset:2px}.cp-lbl{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.cp-val{flex:none;align-items:center;gap:8px;display:inline-flex}.cp-hex{font:500 12px var(--font-mono,ui-monospace, monospace);color:var(--ink,#0b1b30);text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;max-width:78px;overflow:hidden}.cp-sample{border-radius:8px;flex:none;width:30px;height:30px;box-shadow:inset 0 0 0 1px #0000001f}.cp.compact .cp-trig{min-height:38px;padding:4px 4px 4px 10px}.cp-layer{z-index:130;pointer-events:none;position:fixed;inset:0}.cp-scrim{pointer-events:auto;background:#15122e59;position:absolute;inset:0}.cp-pop{pointer-events:auto;color:#15122e;box-sizing:border-box;width:300px;max-height:calc(100vh - 16px);font:500 13px/1.4 var(--font-sans,-apple-system, "Segoe UI", sans-serif);background:#fff;border:1px solid #e4e0fa;border-radius:16px;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px;animation:.16s cpIn;display:grid;position:fixed;overflow:auto;box-shadow:0 24px 60px -20px #2e219073,0 2px 6px #15122e14}.cp-pop.sheet{width:auto;max-height:86vh;padding:14px 16px calc(16px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;animation:.22s cubic-bezier(.2,.8,.2,1) cpUp;inset:auto 0 0}@keyframes cpIn{0%{opacity:0;transform:translateY(4px)}}@keyframes cpUp{0%{opacity:.4;transform:translateY(40%)}}.cp-head{justify-content:space-between;align-items:center;display:flex}.cp-head b{font-size:14px}.cp-x{color:#4a4480;cursor:pointer;background:#f3f1fd;border:0;border-radius:50%;width:28px;height:28px;font-size:12px}.cp-tabs{background:#f3f1fd;border-radius:999px;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;display:grid}.cp-tabs button{color:#6b6590;cursor:pointer;background:0 0;border:0;border-radius:999px;height:32px;font-family:inherit;font-size:13px;font-weight:600}.cp-tabs button[aria-selected=true]{color:#2e2190;background:#fff;box-shadow:0 1px 3px #15122e24}.cp-ed{grid-template-columns:minmax(0,1fr);gap:10px;display:grid}.cp-sv{cursor:crosshair;touch-action:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#fff0);border-radius:12px;height:150px;position:relative}.cp-sv i,.cp-hue i{pointer-events:none;border:3px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000040,0 2px 6px #0000004d}.cp-hue{cursor:ew-resize;touch-action:none;background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);border-radius:999px;height:14px;position:relative}.cp-hue i{top:50%}.cp-sv:focus-visible,.cp-hue:focus-visible{outline-offset:2px;outline:2px solid #4f3dd8}.cp-hexrow{align-items:center;gap:8px;display:flex}.cp-chip{border-radius:9px;flex:none;width:34px;height:34px;box-shadow:inset 0 0 0 1px #0000001f}.cp-hexrow input{text-transform:uppercase;color:#15122e;background:#fff;border:1px solid #e1e4ea;border-radius:9px;flex:1;min-width:0;height:34px;padding:0 10px;font:500 14px ui-monospace,Menlo,monospace}.cp-hexrow input:focus{border-color:#4f3dd8;outline:none;box-shadow:0 0 0 3px #4f3dd826}.cp-icon{color:#2e2190;cursor:pointer;background:#fff;border:1px solid #e1e4ea;border-radius:9px;flex:none;place-items:center;width:34px;height:34px;display:grid}.cp-sw{gap:5px;display:grid}.cp-sw>span{letter-spacing:.06em;text-transform:uppercase;color:#8a84ae;font-size:11px;font-weight:700}.cp-sw>div{grid-template-columns:repeat(auto-fill,minmax(26px,1fr));gap:6px;display:grid}.cp-sw button{aspect-ratio:1;cursor:pointer;border:0;border-radius:7px;padding:0;box-shadow:inset 0 0 0 1px #0000001f}.cp-sw button.wide{aspect-ratio:1.6}.cp-sw>div:has(.wide){grid-template-columns:repeat(4,1fr)}.cp-sw button[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f3dd8}.cp-sw button:hover{transform:scale(1.08)}.cp-none{color:#4a4480;cursor:pointer;background:0 0;border:1px dashed #cfc8ff;border-radius:10px;height:36px;font-family:inherit;font-size:13px;font-weight:600}.cp-gbar{border-radius:12px;height:44px;position:relative;box-shadow:inset 0 0 0 1px #0000001a}.cp-stop{cursor:pointer;border:3px solid #fff;border-radius:8px;width:20px;height:26px;padding:0;position:absolute;top:9px;box-shadow:0 1px 4px #00000059}.cp-stop.on{box-shadow:0 0 0 2px #15122e,0 1px 4px #00000059}.cp-swap{color:#2e2190;cursor:pointer;background:#ffffffd9;border:0;border-radius:50%;width:28px;height:28px;font-size:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cp-angles{align-items:center;gap:4px;display:flex}.cp-angles button{cursor:pointer;color:#2e2190;background:#fff;border:1px solid #e1e4ea;border-radius:8px;flex:none;width:30px;height:30px;font-size:14px}.cp-angles button[aria-pressed=true]{background:#eeeaff;border-color:#4f3dd8}.cp-angles input{accent-color:#4f3dd8;flex:1;width:0;min-width:0}.cp-note{color:#6b6590;margin:0;font-size:12px}.cp-pats{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.cp-pats button{aspect-ratio:1;cursor:pointer;border:0;border-radius:10px;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000001f}.cp-pats button span{color:#15122e;background:#ffffffe0;padding:1px 0;font-size:9.5px;font-weight:700;position:absolute;bottom:0;left:0;right:0}.cp-pats button[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px #4f3dd8}.cp-row2{flex-wrap:wrap;justify-content:space-between;gap:6px;display:flex}.cp-pop .tf-seg{background:#f3f1fd}.cp-pop .tf-seg button{color:#6b6590;align-items:center;gap:6px;display:inline-flex}.cp-pop .tf-seg button[aria-pressed=true]{color:#2e2190;background:#fff}.cp-dot{border-radius:50%;width:12px;height:12px;box-shadow:inset 0 0 0 1px #0003}@media (prefers-reduced-motion:reduce){.cp-pop,.cp-pop.sheet{animation:none}}