.cp{position:relative;display:inline-flex}.cp-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:70;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:min(296px,calc(100vw - 24px));box-sizing:border-box;padding:12px;background:var(--card,var(--surface,#fff));border:1px solid var(--line,#e5e8ee);border-radius:16px;box-shadow:var(--sh-3,0 18px 48px -12px rgba(13,19,32,.3));text-align:left;animation:cp-in .14s ease-out both}@keyframes cp-in{0%{opacity:0;transform:translateY(-4px)}}.cp-pop{scroll-margin:80px 12px 16px}@media(max-width:700.98px){.cp-pop{scroll-margin-bottom:104px}}.cp-area{position:relative;height:156px;border-radius:10px;background-color:var(--cp-h,red);background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0);touch-action:none;cursor:crosshair;outline:none;box-shadow:inset 0 0 0 1px #00000014}.cp-area:focus-visible{box-shadow:0 0 0 2px var(--card,#fff),0 0 0 4px var(--blue,#1593e0)}.cp-dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px #00000047,0 2px 6px #00000059;pointer-events:none}.cp-hue{position:relative;height:36px;margin:-10px 0;touch-action:none;cursor:pointer;outline:none}.cp-hue:before{content:"";position:absolute;left:0;right:0;top:11px;height:14px;border-radius:999px;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);box-shadow:inset 0 0 0 1px #00000014}.cp-hue:focus-visible:before{box-shadow:0 0 0 2px var(--card,#fff),0 0 0 4px var(--blue,#1593e0)}.cp-knob{position:absolute;top:6px;width:24px;height:24px;margin-left:-12px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4px #00000038,0 2px 6px #0000004d;pointer-events:none}.cp-code{display:flex;align-items:center;gap:10px}.cp-now{flex:none;width:36px;height:36px;border-radius:9px;box-shadow:inset 0 0 0 1px #0000001a}.cp-hex{flex:1;display:flex;align-items:center;gap:2px;min-width:0;height:38px;padding:0 10px;border:1px solid var(--line-2,#d5dae3);border-radius:10px;background:var(--card,var(--surface,#fff));color:var(--muted,#5b6679);font:500 15px/1 var(--body,inherit)}.cp-hex:focus-within{border-color:var(--blue,#1593e0);box-shadow:0 0 0 3px var(--blue-soft,#e7f3fc)}.cp-hex.cp-hex-bad{border-color:var(--tomato,#d8423a)}.cp-hex input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink,#0d1320);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-transform:uppercase;outline:none;padding:0}.cp-bad{margin:-6px 0 0;color:var(--tomato-ink,#b42318);font-size:13px;font-weight:500;line-height:1.35}[data-theme=dark] .cp-bad{color:#ff8a80}.cp-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.cp-row-t{flex-basis:100%;margin-bottom:-2px;color:var(--muted,#5b6679);font:500 12.5px/1.2 var(--body,inherit)}.cp-sw{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;box-shadow:inset 0 0 0 1px #0000001f}.cp-sw svg.i{width:16px;height:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}.cp-sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--card,#fff),0 0 0 4px var(--blue,#1593e0)}.cp-sw:focus-visible{outline:2px solid var(--blue,#1593e0);outline-offset:2px}.cp-sw-sm{width:24px;height:24px}@media(pointer:coarse){.cp-area{height:176px}.cp-sw{width:36px;height:36px}.cp-sw-sm{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){.cp-pop{animation:none}}.cp-field-row{display:flex;align-items:center;gap:10px}.cp-field-row .vp-in{flex:1;min-width:0;font-variant-numeric:tabular-nums;text-transform:uppercase}.cp-field-row .vp-in::placeholder{text-transform:none}.cp-square{display:grid;place-items:end;width:42px;height:42px;flex:none;padding:3px;border:0;border-radius:12px;background:var(--cp-c,#0093dd);box-shadow:inset 0 0 0 1px #00000024;cursor:pointer;color:#fff}.cp-square svg.i{width:14px;height:14px;padding:2px;border-radius:5px;background:#0d132073;box-sizing:content-box}.cp-square[aria-expanded=true]{box-shadow:0 0 0 2px var(--card,#fff),0 0 0 4px var(--blue,#1593e0)}.cp-square:focus-visible{outline:2px solid var(--blue,#1593e0);outline-offset:2px}