[data-online-tool=color-picker] .cp-stage{background:var(--tile);touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;border-radius:18px;outline:0;width:100%;position:relative;overflow:hidden}[data-online-tool=color-picker] .cp-stage:focus-visible{box-shadow:0 0 0 3px var(--sun)}[data-online-tool=color-picker] .cp-cam{aspect-ratio:4/3;background:#1c1c1e}[data-online-tool=color-picker] .cp-fit{position:absolute}[data-online-tool=color-picker] .cp-fit img,[data-online-tool=color-picker] .cp-fit video,[data-online-tool=color-picker] .cp-fit canvas{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}[data-online-tool=color-picker] .cp-mark{pointer-events:none;z-index:1;border-radius:50%;width:30px;height:30px;margin:-15px 0 0 -15px;position:absolute;box-shadow:0 0 0 2px #fff,0 0 0 4px #1d1d1fb3,inset 0 0 0 1px #1d1d1f80}[data-online-tool=color-picker] .cp-mark:before,[data-online-tool=color-picker] .cp-mark:after{content:"";background:#fff;position:absolute;box-shadow:0 0 0 1px #1d1d1f99}[data-online-tool=color-picker] .cp-mark:before{width:2px;height:8px;top:-10px;left:14px}[data-online-tool=color-picker] .cp-mark:after{width:8px;height:2px;top:14px;left:-10px}[data-online-tool=color-picker] .cp-loupe{pointer-events:none;z-index:2;background:#1c1c1e;border-radius:18px;width:132px;height:132px;position:absolute;top:12px;left:12px;box-shadow:0 0 0 3px #fff,0 4px 16px #00000073}[data-online-tool=color-picker] .cp-loupe.right{left:auto;right:12px}[data-online-tool=color-picker] .cp-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:12px;display:grid}[data-online-tool=color-picker] .cp-file{position:relative;overflow:hidden}[data-online-tool=color-picker] .cp-file input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}[data-online-tool=color-picker] .cp-file:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}[data-online-tool=color-picker] .cp-main{background:var(--tile);border-radius:20px;flex-direction:column;gap:8px;padding:8px;display:flex}[data-online-tool=color-picker] .cp-main .ot-b2{background:var(--ot-card)}[data-online-tool=color-picker] .cp-mainrow{flex-wrap:wrap;gap:8px;display:flex}[data-online-tool=color-picker] .cp-count{background:var(--ot-card);width:132px}[data-online-tool=color-picker] .cp-strip{gap:6px;height:64px;display:flex}[data-online-tool=color-picker] .cp-strip button,[data-online-tool=color-picker] .cp-strip span{min-width:0;font:700 12px/1 var(--text);font-variant-numeric:tabular-nums;cursor:pointer;border:0;border-radius:14px;flex:1;justify-content:center;align-items:flex-end;padding:0 0 6px;display:flex}[data-online-tool=color-picker] .cp-strip span{box-shadow:inset 0 0 0 2px var(--hair);cursor:default;border-radius:14px}[data-online-tool=color-picker] .cp-camrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}[data-online-tool=color-picker] .cp-start{text-align:center;color:#f5f5f7;z-index:3;background:#1c1c1e;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;display:flex;position:absolute;inset:0}[data-online-tool=color-picker] .cp-start b{font-size:18px}[data-online-tool=color-picker] .cp-start p{color:#a1a1a6;max-width:340px;font-size:14px;line-height:1.45}[data-online-tool=color-picker] .cp-starti{background:#2c2c2e;border-radius:18px;justify-content:center;align-items:center;width:56px;height:56px;display:flex}[data-online-tool=color-picker] .cp-err{min-height:40px;color:#ffc21a!important}[data-online-tool=color-picker] button[disabled]{opacity:.4;cursor:default}[data-online-tool=color-picker] .cp-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid;position:relative}[data-online-tool=color-picker] .cp-cmp{flex-direction:column;gap:8px;min-width:0;display:flex}[data-online-tool=color-picker] .cp-big{border-radius:20px;flex-direction:column;justify-content:space-between;height:150px;padding:12px 14px;display:flex;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-big span{font:800 20px/1 var(--display)}[data-online-tool=color-picker] .cp-big b{font:700 20px/1 var(--display);font-variant-numeric:tabular-nums}[data-online-tool=color-picker] .cp-cname{color:var(--ink2);white-space:nowrap;text-overflow:ellipsis;height:20px;font-size:14px;font-weight:600;overflow:hidden}[data-online-tool=color-picker] .cp-cmp .ot-b2{width:100%;padding:0 12px;font-size:15px}[data-online-tool=color-picker] .cp-swap{background:var(--ot-card);width:48px;height:48px;color:var(--ink);cursor:pointer;z-index:1;border:0;border-radius:24px;justify-content:center;align-items:center;margin-left:-24px;display:flex;position:absolute;top:51px;left:50%;box-shadow:0 2px 8px #0003}[data-online-tool=color-picker] .cp-scale{padding-top:10px;position:relative}[data-online-tool=color-picker] .cp-bands{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;display:grid}[data-online-tool=color-picker] .cp-bands span{background:var(--tile);height:30px;color:var(--ink2);white-space:nowrap;text-overflow:ellipsis;border-radius:8px;justify-content:center;align-items:center;padding:0 4px;font-size:12px;font-weight:600;display:flex;overflow:hidden}[data-online-tool=color-picker] .cp-scale i{background:var(--ink);border-radius:2px;width:3px;height:44px;margin-left:-1.5px;transition:left .25s;position:absolute;top:0}[data-online-tool=color-picker] .cp-band{font:700 18px/1.3 var(--display);min-height:24px}[data-online-tool=color-picker] .cp-prev{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);align-items:stretch;gap:12px;display:grid}[data-online-tool=color-picker] .cp-tile{border-radius:18px;flex-direction:column;justify-content:center;gap:4px;min-height:88px;padding:12px 14px;display:flex;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-tile b{font:800 30px/1 var(--display)}[data-online-tool=color-picker] .cp-tile span{font-size:13px;font-weight:600}[data-online-tool=color-picker] .cp-pass{color:var(--ink2);flex-direction:column;justify-content:center;gap:8px;font-size:14px;display:flex}[data-online-tool=color-picker] .cp-pass li{align-items:flex-start;gap:8px;line-height:1.3;display:flex}[data-online-tool=color-picker] .cp-pass .ic{background:var(--hair);width:18px;height:18px;color:var(--ink2);border-radius:9px;padding:2px}[data-online-tool=color-picker] .cp-pass li.ok .ic{background:var(--sun);color:#1d1d1f}[data-online-tool=color-picker] .cp-diff{flex-direction:column;gap:4px;display:flex}[data-online-tool=color-picker] .cp-diff p{min-height:22px;font-size:16px;font-weight:600}[data-online-tool=color-picker] .cp-harm{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;height:150px;display:grid}[data-online-tool=color-picker] .cp-harm button{font:700 13px/1.2 var(--text);font-variant-numeric:tabular-nums;cursor:pointer;border:0;border-radius:16px;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;padding:10px;display:flex;overflow:hidden}[data-online-tool=color-picker] .cp-harm em{letter-spacing:.06em;text-transform:uppercase;opacity:.8;font-size:11px;font-style:normal}[data-online-tool=color-picker] .cp-paints{flex-direction:column;gap:6px;display:flex}[data-online-tool=color-picker] .cp-paint{background:var(--tile);border-radius:16px;grid-template-columns:40px minmax(0,1fr) 44px 32px 44px 44px;align-items:center;gap:6px;min-height:56px;padding:6px;display:grid}[data-online-tool=color-picker] .cp-paint i{border-radius:12px;width:40px;height:40px;display:block;box-shadow:inset 0 0 0 1px #0000001a}[data-online-tool=color-picker] .cp-paint span{font:600 15px/1 var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[data-online-tool=color-picker] .cp-paint b{text-align:center;font:700 18px/1 var(--display);font-variant-numeric:tabular-nums}[data-online-tool=color-picker] .cp-paint button{background:var(--ot-card);width:44px;height:44px;color:var(--ink);cursor:pointer;border:0;border-radius:22px;justify-content:center;align-items:center;padding:0;display:flex}[data-online-tool=color-picker] .cp-paint button.cp-x{color:var(--ink2);background:0 0}[data-online-tool=color-picker] .cp-mixout{background:var(--tile);border-radius:20px;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px;display:grid}[data-online-tool=color-picker] .cp-mixsw{border-radius:14px;height:76px;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-mixhex{font:700 24px/1.2 var(--display);font-variant-numeric:tabular-nums}[data-online-tool=color-picker] .cp-mixout .ot-b2{background:var(--ot-card)}[data-online-tool=color-picker] .cp-grad{border-radius:20px;height:180px;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-gbar{touch-action:none;height:48px;margin:0 22px;position:relative}[data-online-tool=color-picker] .cp-gbar:before{content:"";background:var(--hair);border-radius:3px;height:6px;position:absolute;top:21px;left:0;right:0}[data-online-tool=color-picker] .cp-gbar button{cursor:ew-resize;touch-action:none;background:0 0;border:0;justify-content:center;align-items:center;width:44px;height:44px;margin-left:-22px;padding:0;display:flex;position:absolute;top:2px}[data-online-tool=color-picker] .cp-gbar button i{width:26px;height:26px;box-shadow:0 0 0 3px var(--ot-card),0 0 0 4px var(--hair),0 2px 6px #00000040;border-radius:50%;display:block}[data-online-tool=color-picker] .cp-gbar button.on i{box-shadow:0 0 0 3px var(--ot-card),0 0 0 5px var(--ink),0 2px 6px #00000040}[data-online-tool=color-picker] .cp-css{background:var(--tile);border-radius:16px;align-items:center;gap:8px;padding:6px 6px 6px 14px;display:flex}[data-online-tool=color-picker] .cp-css code{min-width:0;color:var(--ink);overflow-wrap:anywhere;flex:1;align-items:center;min-height:38px;font:500 13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex}[data-online-tool=color-picker] .cp-css .ot-b2{background:var(--ot-card);flex:none}[data-online-tool=color-picker] .cp-now{grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;display:grid}[data-online-tool=color-picker] .cp-nowsw{border-radius:22px;height:96px;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-name{font:800 24px/1.15 var(--display);letter-spacing:-.01em;align-items:flex-end;min-height:56px;display:flex;overflow:hidden}[data-online-tool=color-picker] .cp-also{color:var(--ink2);white-space:nowrap;text-overflow:ellipsis;min-height:20px;margin-top:4px;font-size:14px;line-height:1.4;overflow:hidden}[data-online-tool=color-picker] .cp-codes{background:var(--tile);border-radius:18px;flex-direction:column;padding:4px 4px 4px 14px;display:flex}[data-online-tool=color-picker] .cp-code{grid-template-columns:52px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:46px;display:grid}[data-online-tool=color-picker] .cp-code+.cp-code{border-top:1px solid var(--hair)}[data-online-tool=color-picker] .cp-ck{color:var(--ink2);font-size:13px;font-weight:700}[data-online-tool=color-picker] .cp-cv{font:600 17px/1 var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[data-online-tool=color-picker] .cp-copy{width:44px;height:44px;color:var(--ink2);cursor:pointer;background:0 0;border:0;border-radius:22px;justify-content:center;align-items:center;padding:0;display:flex}[data-online-tool=color-picker] .cp-copy:hover{background:var(--ot-card)}[data-online-tool=color-picker] .cp-copy .cp-ok,[data-online-tool=color-picker] .cp-copy.done .ic:first-child{display:none}[data-online-tool=color-picker] .cp-copy.done .cp-ok{color:var(--ink);display:block}[data-online-tool=color-picker] .cp-pal{flex-direction:column;gap:8px;display:flex}[data-online-tool=color-picker] .cp-palhead{justify-content:space-between;align-items:center;min-height:44px;display:flex}[data-online-tool=color-picker] .cp-palrm{height:44px;color:var(--ink2);font:600 14px/1 var(--text);cursor:pointer;background:0 0;border:0;border-radius:22px;align-items:center;gap:6px;padding:0 12px;display:inline-flex}[data-online-tool=color-picker] .cp-palrm .ic{width:18px;height:18px}[data-online-tool=color-picker] .cp-palgrid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;display:grid}[data-online-tool=color-picker] .cp-palgrid button{cursor:pointer;border:0;border-radius:12px;height:44px;box-shadow:inset 0 0 0 1px #0000001a}[data-online-tool=color-picker] .cp-palgrid button.on{box-shadow:0 0 0 2px var(--ot-card),0 0 0 4px var(--ink)}[data-online-tool=color-picker] .cp-empty{color:var(--ink2);background:var(--tile);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45}[data-online-tool=color-picker] .cp-dl{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;display:grid}.cp-root{flex-direction:column;gap:24px;display:flex}[data-online-tool=color-picker] .cp-sv{aspect-ratio:16/10;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;background:#ff3c00;border-radius:18px;outline:0;width:100%;position:relative;overflow:hidden}[data-online-tool=color-picker] .cp-sv:focus-visible{box-shadow:0 0 0 3px var(--sun)}[data-online-tool=color-picker] .cp-svw,[data-online-tool=color-picker] .cp-svb{pointer-events:none;position:absolute;inset:0}[data-online-tool=color-picker] .cp-svw{background:linear-gradient(90deg,#fff,#fff0)}[data-online-tool=color-picker] .cp-svb{background:linear-gradient(#0000,#000)}[data-online-tool=color-picker] .cp-svh{pointer-events:none;border-radius:50%;width:28px;height:28px;margin:-14px 0 0 -14px;position:absolute;top:10%;left:74%;box-shadow:0 0 0 3px #fff,0 0 0 4px #0000004d,0 4px 12px #00000059}[data-online-tool=color-picker] .cp-hue{background:linear-gradient(90deg,red 0%,#ff0 16.6%,#0f0 33.3%,#0ff 50%,#00f 66.6%,#f0f 83.3%,red 100%);border-radius:14px;height:28px;margin:0 2px;position:relative}[data-online-tool=color-picker] .cp-hue input{opacity:0;cursor:pointer;width:calc(100% + 28px);height:44px;margin:0;position:absolute;top:-8px;left:-14px;right:-14px}[data-online-tool=color-picker] .cp-hue:focus-within{box-shadow:0 0 0 3px var(--sun)}[data-online-tool=color-picker] .cp-hueh{pointer-events:none;border-radius:50%;width:32px;height:32px;margin:-16px 0 0 -16px;position:absolute;top:50%;left:4%;box-shadow:0 0 0 3px #fff,0 0 0 4px #0000004d,0 2px 8px #0000004d}[data-online-tool=color-picker] .cp-prow{flex-wrap:wrap;align-items:center;gap:8px;display:flex}[data-online-tool=color-picker] .cp-hexf{background:var(--tile);border-radius:14px;align-items:center;gap:10px;width:190px;height:48px;padding:0 14px;display:flex}[data-online-tool=color-picker] .cp-hexf:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}[data-online-tool=color-picker] .cp-hexf span{color:var(--ink2);font-size:13px;font-weight:700}[data-online-tool=color-picker] .cp-hexf input{min-width:0;height:100%;font:700 18px/1 var(--display);letter-spacing:.02em;color:var(--ink);text-transform:uppercase;font-variant-numeric:tabular-nums;background:0 0;border:0;outline:0;flex:1}[data-online-tool=color-picker] .cp-maint{align-self:center;margin-right:auto;padding:0 6px;font-size:16px}[data-online-tool=color-picker] .cp-meshc,[data-online-tool=color-picker] .cp-cardc{background:var(--tile);border-radius:18px;width:100%;height:auto;display:block}[data-online-tool=color-picker] .cp-cardc{max-width:420px;box-shadow:0 0 0 1px var(--hair),0 10px 24px #00000014;align-self:center}[data-online-tool=color-picker] .cp-range{width:100%;height:44px;accent-color:var(--ink);margin:0}[data-online-tool=color-picker] .cp-sec{background:var(--ot-card);border-radius:28px;padding:28px}[data-online-tool=color-picker] .cp-sech{flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:18px;display:flex}[data-online-tool=color-picker] .cp-sech h2{font:800 30px/1.1 var(--display);letter-spacing:-.02em}[data-online-tool=color-picker] .cp-sech p{color:var(--ink2);font-size:16px}[data-online-tool=color-picker] .cp-h3{font:700 13px/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin:16px 0 10px}[data-online-tool=color-picker] .cp-sech+.cp-h3{margin-top:0}[data-online-tool=color-picker] .cp-ramp{grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;display:grid}[data-online-tool=color-picker] .cp-tones{grid-template-columns:repeat(7,minmax(0,1fr));max-width:64%}[data-online-tool=color-picker] .cp-rs{text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:stretch;gap:6px;width:100%;min-width:0;padding:0;display:flex}[data-online-tool=color-picker] .cp-rs i{border-radius:12px;width:100%;height:64px;display:block;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-rs span{font:600 12px/1 var(--text);color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}[data-online-tool=color-picker] .cp-rs.on i{box-shadow:0 0 0 2px var(--ot-card),0 0 0 4px var(--ink)}[data-online-tool=color-picker] .cp-harms{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px;display:grid}[data-online-tool=color-picker] .cp-hc{background:var(--tile);border-radius:20px;padding:12px 14px 14px}[data-online-tool=color-picker] .cp-hch{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;display:flex}[data-online-tool=color-picker] .cp-hch .cp-h3{margin:0}[data-online-tool=color-picker] .cp-hadd{background:var(--ot-card);width:40px;height:40px;color:var(--ink);cursor:pointer;border:0;border-radius:20px;justify-content:center;align-items:center;padding:0;display:flex}[data-online-tool=color-picker] .cp-hadd .ic{width:18px;height:18px}[data-online-tool=color-picker] .cp-hbar{border-radius:14px;height:84px;display:flex;overflow:hidden}[data-online-tool=color-picker] .cp-hbar button{min-width:0;font:700 10px/1 var(--text);letter-spacing:.02em;cursor:pointer;font-variant-numeric:tabular-nums;border:0;flex:1;justify-content:center;align-items:flex-end;padding:0 0 8px;display:flex;position:relative}[data-online-tool=color-picker] .cp-dot{background:currentColor;border-radius:4px;width:8px;height:8px;margin-left:-4px;position:absolute;top:10px;left:50%}[data-online-tool=color-picker] .cp-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px;display:grid}[data-online-tool=color-picker] .cp-txs,[data-online-tool=color-picker] .cp-cvds{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}[data-online-tool=color-picker] .cp-tx{border-radius:16px;grid-template-rows:auto auto 1fr;grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:12px;height:104px;padding:10px 14px;display:grid;box-shadow:inset 0 0 0 1px #00000014}[data-online-tool=color-picker] .cp-tx b{font:800 40px/1 var(--display);grid-row:1/3;align-self:center}[data-online-tool=color-picker] .cp-txr{font:700 15px/1.2 var(--text);font-variant-numeric:tabular-nums;align-self:end}[data-online-tool=color-picker] .cp-txv{font:700 12px/1.3 var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[data-online-tool=color-picker] .cp-txl{font:600 12px/1.3 var(--text);opacity:.85;grid-column:1/-1;margin-top:6px}[data-online-tool=color-picker] .cp-cvd{flex-direction:column;gap:6px;display:flex}[data-online-tool=color-picker] .cp-cvs{border-radius:12px;height:60px;display:flex;overflow:hidden}[data-online-tool=color-picker] .cp-cvs i{flex:1}[data-online-tool=color-picker] .cp-cvd span{color:var(--ink2);font-size:13px;font-weight:600}[data-online-tool=color-picker] .cp-ptg{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}[data-online-tool=color-picker] .cp-ptc{background:var(--tile);text-align:left;color:var(--ink);cursor:pointer;border:0;border-radius:20px;flex-direction:column;padding:0;transition:box-shadow .2s;display:flex;position:relative;overflow:hidden}[data-online-tool=color-picker] .cp-ptc:hover{box-shadow:0 8px 22px #0000001f}[data-online-tool=color-picker] .cp-ptc:focus-visible{box-shadow:0 0 0 3px var(--sun)}[data-online-tool=color-picker] .cp-ptp{aspect-ratio:16/10;background:var(--hair);display:block;position:relative;overflow:hidden}[data-online-tool=color-picker] .cp-ptp canvas{object-fit:cover;width:100%;height:100%;transition:opacity .3s;position:absolute;inset:0}[data-online-tool=color-picker] .cp-ptp.busy canvas{opacity:0}[data-online-tool=color-picker] .cp-ptp.busy{background:linear-gradient(100deg,var(--hair) 30%,var(--tile) 50%,var(--hair) 70%);background-size:300% 100%;animation:1.4s linear infinite cp-shimmer}@keyframes cp-shimmer{0%{background-position:100% 0}to{background-position:-200% 0}}[data-online-tool=color-picker] .cp-ptt{padding:12px 44px 14px 14px;display:block}[data-online-tool=color-picker] .cp-ptt b{font-size:16px;display:block}[data-online-tool=color-picker] .cp-ptt span{color:var(--ink2);margin-top:2px;font-size:13px;line-height:1.4;display:block}[data-online-tool=color-picker] .cp-pta{width:20px;height:20px;color:var(--ink);position:absolute;bottom:16px;right:12px}[data-online-tool=color-picker] .cp-fs{background:var(--page);width:100vw;max-width:none;height:100dvh;max-height:none;color:var(--ink);border:0;margin:0;padding:0}[data-online-tool=color-picker] .cp-fs::backdrop{background:#00000080}[data-online-tool=color-picker] .cp-fs[open]{flex-direction:column;display:flex}[data-online-tool=color-picker] .cp-fsbar{border-bottom:1px solid var(--hair);flex:none;align-items:center;gap:8px;height:64px;padding:0 16px;display:flex}[data-online-tool=color-picker] .cp-fsx{background:var(--tile);width:44px;height:44px;color:var(--ink);cursor:pointer;border:0;border-radius:22px;flex:none;justify-content:center;align-items:center;padding:0;display:flex}[data-online-tool=color-picker] .cp-fst{flex:1;justify-content:center;min-width:0;display:flex;position:relative}[data-online-tool=color-picker] .cp-fstb{height:44px;color:var(--ink);font:800 19px/1 var(--display);cursor:pointer;background:0 0;border:0;border-radius:22px;align-items:center;gap:6px;max-width:100%;padding:0 14px;display:inline-flex}[data-online-tool=color-picker] .cp-fstb span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}[data-online-tool=color-picker] .cp-fstb:hover{background:var(--tile)}[data-online-tool=color-picker] .cp-fsm{z-index:5;background:var(--page);min-width:240px;box-shadow:0 0 0 1px var(--hair),0 16px 40px #0000002e;border-radius:18px;flex-direction:column;padding:6px;display:flex;position:absolute;top:52px;left:50%;transform:translate(-50%)}[data-online-tool=color-picker] .cp-fsm button{height:44px;color:var(--ink);text-align:left;font:600 16px/1 var(--text);cursor:pointer;background:0 0;border:0;border-radius:12px;padding:0 14px}[data-online-tool=color-picker] .cp-fsm button:hover,[data-online-tool=color-picker] .cp-fsm button[aria-current=true]{background:var(--tile)}[data-online-tool=color-picker] .cp-fsdl{flex:none}[data-online-tool=color-picker] .cp-fsbody{flex:1;grid-template-columns:minmax(0,1fr) 340px;min-height:0;display:grid}[data-online-tool=color-picker] .cp-fsview{background:var(--tile);justify-content:center;align-items:center;min-height:0;padding:20px;display:flex;position:relative}[data-online-tool=color-picker] .cp-fsview canvas{border-radius:12px;width:auto;max-width:100%;height:auto;max-height:100%;display:block;box-shadow:0 8px 30px #00000026}[data-online-tool=color-picker] .cp-busy{border:4px solid #fff9;border-top-color:var(--sun);border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;animation:.8s linear infinite cp-spin;position:absolute;top:50%;left:50%}@keyframes cp-spin{to{transform:rotate(360deg)}}[data-online-tool=color-picker] .cp-fsside{border-left:1px solid var(--hair);flex-direction:column;gap:14px;padding:20px 16px;display:flex;overflow-y:auto}[data-online-tool=color-picker] .cp-fsinfo{color:var(--ink2);min-height:44px;font-size:15px;line-height:1.45}[data-online-tool=color-picker] .cp-fsopts{flex-direction:column;gap:12px;display:flex}@media (prefers-reduced-motion:reduce){[data-online-tool=color-picker] .cp-ptp.busy,[data-online-tool=color-picker] .cp-busy{animation:none}}@container (width<=1000px){[data-online-tool=color-picker] .cp-harms{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (width<=700px){[data-online-tool=color-picker] .ot-seg button{padding:0 2px;font-size:13px}[data-online-tool=color-picker] .cp-sv{aspect-ratio:1}[data-online-tool=color-picker] .cp-hexf{width:100%}[data-online-tool=color-picker] .cp-prow .ot-b2{flex:1;padding:0 12px;font-size:15px}[data-online-tool=color-picker] .cp-sec{border-radius:24px;padding:16px}[data-online-tool=color-picker] .cp-sech h2{font-size:24px}[data-online-tool=color-picker] .cp-sech p{font-size:14px}[data-online-tool=color-picker] .cp-ramp{gap:3px}[data-online-tool=color-picker] .cp-tones{max-width:none}[data-online-tool=color-picker] .cp-rs i{border-radius:8px;height:44px}[data-online-tool=color-picker] .cp-rs span{display:none}[data-online-tool=color-picker] .cp-harms,[data-online-tool=color-picker] .cp-two{grid-template-columns:minmax(0,1fr)}[data-online-tool=color-picker] .cp-hbar{height:72px}[data-online-tool=color-picker] .cp-ptg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}[data-online-tool=color-picker] .cp-ptt{padding:10px 30px 12px 10px}[data-online-tool=color-picker] .cp-ptt b{font-size:14px}[data-online-tool=color-picker] .cp-ptt span{display:none}[data-online-tool=color-picker] .cp-pta{width:18px;height:18px;bottom:12px;right:8px}[data-online-tool=color-picker] .cp-fsbar{height:60px;padding:0 8px}[data-online-tool=color-picker] .cp-fsbody{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}[data-online-tool=color-picker] .cp-fsview{padding:12px}[data-online-tool=color-picker] .cp-fsside{border-left:0;border-top:1px solid var(--hair);max-height:42dvh;padding:12px 16px 20px}[data-online-tool=color-picker] .cp-fsdl span{display:none}[data-online-tool=color-picker] .cp-fsdl{width:48px;padding:0}[data-online-tool=color-picker] .cp-cam{aspect-ratio:3/4}[data-online-tool=color-picker] .cp-tools{grid-template-columns:repeat(2,minmax(0,1fr))}[data-online-tool=color-picker] .cp-tools .cp-file{grid-column:1/-1}[data-online-tool=color-picker] .cp-loupe{width:104px;height:104px;top:8px;left:8px}[data-online-tool=color-picker] .cp-loupe.right{right:8px}[data-online-tool=color-picker] .cp-mainrow .ot-b2,[data-online-tool=color-picker] .cp-mainrow .cp-count{flex:1}[data-online-tool=color-picker] .cp-big{height:120px}[data-online-tool=color-picker] .cp-swap{top:36px}[data-online-tool=color-picker] .cp-prev{grid-template-columns:repeat(2,minmax(0,1fr))}[data-online-tool=color-picker] .cp-pass{grid-column:1/-1}[data-online-tool=color-picker] .cp-harm{gap:4px;height:120px}[data-online-tool=color-picker] .cp-harm button{padding:8px 6px;font-size:11px}[data-online-tool=color-picker] .cp-mixout{grid-template-columns:72px minmax(0,1fr)}[data-online-tool=color-picker] .cp-mixout .ot-b2{grid-column:1/-1}[data-online-tool=color-picker] .cp-paint{grid-template-columns:40px minmax(0,1fr) 44px 28px 44px 40px;gap:4px}}