.bd-color{gap:6px;display:grid}.bd-color-label{color:var(--ink-2);font-size:.8rem;font-weight:600}.bd-color{position:relative}.bd-color-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.bd-color-val{border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);border-radius:999px;align-items:center;gap:6px;padding:2px 9px 2px 3px;font:600 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-flex}.bd-color-val i{background-image:none;border-radius:50%;width:14px;height:14px;box-shadow:inset 0 0 0 1px #0000002e}.bd-swatches{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.bd-sw{cursor:pointer;background:linear-gradient(var(--c,transparent), var(--c,transparent)), repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 10px 10px;border:0;border-radius:9px;width:28px;height:28px;padding:0;transition:transform .12s,box-shadow .12s;position:relative;box-shadow:inset 0 0 0 1px #00000029,0 1px 2px #0003}.bd-sw:hover{transform:translateY(-1px)scale(1.06)}.bd-sw.on{box-shadow:inset 0 0 0 1px #00000029, 0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}.bd-sw.on:after{content:"";background:#fff;border-radius:50%;width:8px;height:8px;margin:auto;position:absolute;inset:0;box-shadow:0 0 0 1.5px #00000073}.bd-sw.none{background:linear-gradient(135deg, transparent 44%, var(--danger) 44% 56%, transparent 56%), var(--surface)}.bd-sw.none.on:after{display:none}.bd-sw-sep{background:var(--line);width:1px;height:20px}.bd-sw.custom{color:#fff;background:conic-gradient(#ff4d4d,#ffd84d,#4dd97a,#4dc9ff,#6b5cff,#ff4dd2,#ff4d4d);place-items:center;display:grid}.bd-sw.custom svg{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;filter:drop-shadow(0 1px 1px #0000008c)}.bd-sw.custom.on{background:linear-gradient(var(--c), var(--c)) center / 60% 60% no-repeat, conic-gradient(from 0deg, #ff4d4d, #ffd84d, #4dd97a, #4dc9ff, #6b5cff, #ff4dd2, #ff4d4d)}.bd-sw.custom.on svg,.bd-sw.custom.on:after{display:none}.bd-sw:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.bd-cp{z-index:5;border:1px solid var(--line);background:var(--surface);border-radius:16px;gap:12px;margin-top:4px;padding:14px;animation:.14s ease-out bd-cp-in;display:grid;position:relative;box-shadow:0 18px 40px -12px #00000073,0 2px 6px #0000001f}@keyframes bd-cp-in{0%{opacity:0;transform:translateY(-4px)scale(.98)}}@media (prefers-reduced-motion:reduce){.bd-cp{animation:none}}.bd-cp-sv{cursor:crosshair;touch-action:none;border-radius:12px;height:168px;position:relative;box-shadow:inset 0 0 0 1px #0000001f}.bd-cp-sv:before{content:"";border-radius:inherit;background:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}.bd-cp-thumb{cursor:grab;border:3px solid #fff;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;position:absolute;box-shadow:0 0 0 1px #00000059,0 2px 6px #0006}.bd-cp-row{align-items:center;gap:12px;display:flex}.bd-cp-preview{background:repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 10px 10px;border-radius:12px;flex:none;width:40px;height:40px;overflow:hidden;box-shadow:inset 0 0 0 1px #00000026}.bd-cp-preview i{width:100%;height:100%;display:block}.bd-cp-bars{flex:1;gap:12px;display:grid}.bd-cp-hue,.bd-cp-alpha{cursor:pointer;touch-action:none;border-radius:999px;height:12px;position:relative;box-shadow:inset 0 0 0 1px #0000001f}.bd-cp-hue{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.bd-cp-alpha{background:linear-gradient(to right, transparent, var(--cp)), repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 10px 10px}.bd-cp-knob{background:0 0;border:3px solid #fff;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;top:50%;box-shadow:0 0 0 1px #0000004d,0 1px 4px #00000059}.bd-cp-thumb:focus-visible,.bd-cp-knob:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.bd-cp-fields{align-items:center;gap:8px;display:flex}.bd-cp-hex{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;flex:1;align-items:center;min-width:0;height:36px;display:flex;overflow:hidden}.bd-cp-hex span{font:700 .68rem var(--f-ui);color:var(--ink-2);border-right:1px solid var(--line);align-self:stretch;place-items:center;padding:0 8px;display:grid}.bd-cp-hex input{min-width:0;height:100%;color:var(--ink);text-transform:uppercase;background:0 0;border:0;flex:1;padding:0 10px;font:600 .9rem ui-monospace,SFMono-Regular,Menlo,monospace}.bd-cp-hex input:focus{outline:none}.bd-cp-hex:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}.bd-cp-rgb{color:var(--ink-2);white-space:nowrap;font:600 .72rem ui-monospace,SFMono-Regular,Menlo,monospace}.bd-cp-drop{border:1px solid var(--line);background:var(--surface-2);width:36px;height:36px;color:var(--ink);cursor:pointer;border-radius:10px;flex:none;place-items:center;display:grid}.bd-cp-drop svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.bd-cp-set{gap:6px;display:grid}.bd-cp-set>span{color:var(--ink-2);font-size:.7rem;font-weight:600}.bd-cp-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;display:grid}.bd-cp-chip{aspect-ratio:1;cursor:pointer;background:linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#d9d9d9 0 25%, #fff 0 50%) 0 0 / 8px 8px;border:0;border-radius:7px;padding:0;transition:transform .1s;box-shadow:inset 0 0 0 1px #00000026}.bd-cp-chip:hover{transform:scale(1.12)}.bd-cp-chip.on{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent)}.bd-cp-done{justify-self:end}.cb-btn.bd-sw.custom{background:linear-gradient(var(--c), var(--c)) center / 58% 58% no-repeat, conic-gradient(from 0deg, #ff4d4d, #ffd84d, #4dd97a, #4dc9ff, #6b5cff, #ff4dd2, #ff4d4d)}.cb-btn.bd-sw.custom:after{display:none}.cb-pop{z-index:200;overscroll-behavior:contain;overflow:auto}.cb-pop>.bd-cp{margin:0}.cb-pop.sheet{max-height:86dvh;padding:0 0 env(safe-area-inset-bottom,0px);background:var(--surface);border-radius:18px 18px 0 0;animation:.18s ease-out cb-up;box-shadow:0 -12px 40px #00000059}.cb-pop.sheet>.bd-cp{border-radius:inherit;box-shadow:none;border:0;animation:none}@keyframes cb-up{0%{opacity:0;transform:translateY(24px)}}@media (prefers-reduced-motion:reduce){.cb-pop.sheet{animation:none}}.bd-cp-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.bd-cp-head b{font:700 .95rem/1.3 var(--f-head);color:var(--ink)}.bd-cp-x{border:1px solid var(--line);background:var(--surface-2);width:40px;height:40px;color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;display:grid}.bd-cp-x svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round}.cb-pop.sheet .bd-cp-sv{height:190px}.cb-pop.sheet .bd-cp-hue,.cb-pop.sheet .bd-cp-alpha{height:18px}.cb-pop.sheet .bd-cp-knob{width:26px;height:26px;margin:-13px 0 0 -13px}.cb-pop.sheet .bd-cp-chip{min-height:28px}