.bcol__head{display:flex;gap:8px;width:100%;justify-content:space-between;align-items:center;padding:4px 0;text-align:left;color:var(--b-fg);-webkit-tap-highlight-color:transparent}.bcol__title{font-size:.875rem;font-weight:600}.bcol__chev{display:flex;width:16px;height:16px;color:var(--b-muted);transition:transform .2s cubic-bezier(.4,0,.2,1),color .12s cubic-bezier(.4,0,.2,1)}.bcol__head:hover .bcol__chev{color:var(--b-fg)}.bcol.is-open .bcol__chev{transform:rotate(180deg)}.bcol__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}.bcol.is-open .bcol__body{grid-template-rows:1fr}.bcol__inner{overflow:hidden;min-height:0;opacity:0;transform:translateY(-4px);transition:opacity .24s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.16,1,.3,1)}.bcol.is-open .bcol__inner{opacity:1;transform:translateY(0);padding-top:12px}@media(prefers-reduced-motion:reduce){.bcol__body,.bcol__chev,.bcol__inner{transition:none}}.cp__row{gap:8px}.cp__row,.cp__swatch{display:flex;align-items:center}.cp__swatch{justify-content:center;flex-shrink:0;width:40px;height:40px;padding:2px;border:1px solid var(--b-border-strong);border-radius:12px;background:var(--b-bg);cursor:pointer;transition:border-color .12s cubic-bezier(.4,0,.2,1)}.cp__swatch:hover{border-color:var(--b-fg)}.cp__swatch.is-open,.cp__swatch:focus-visible{border-color:var(--b-fg);outline:none}.cp__swatch-fill{width:100%;height:100%;border-radius:10px;border:1px solid color-mix(in srgb,var(--b-fg) 12%,transparent)}.cp__hex-wrap{display:flex;align-items:center;gap:4px;flex:1;padding:0 12px;height:40px;border:1px solid var(--b-border-strong);border-radius:12px;background:var(--b-bg);transition:border-color .12s cubic-bezier(.4,0,.2,1)}.cp__hex-wrap:hover{border-color:var(--b-fg)}.cp__hex-wrap:focus-within{border-color:var(--b-fg);outline:none}.cp__hex-hash{color:var(--b-muted)}.cp__hex,.cp__hex-hash{font-family:Satoshi,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.875rem}.cp__hex{flex:1;min-width:0;border:none;background:none;color:var(--b-fg);letter-spacing:.04em;text-transform:uppercase}.cp__hex:focus{outline:none}.cp__pop{position:absolute;z-index:1200;display:flex;flex-direction:column;gap:12px;padding:12px;background:var(--b-bg);border:1px solid var(--b-border-strong);border-radius:18px}.cp__sv{position:relative;width:100%;height:148px;border-radius:12px;cursor:crosshair;touch-action:none}.cp__sv:focus-visible{border-color:var(--b-fg);outline:none}.cp__sv-thumb{position:absolute;width:14px;height:14px;border-radius:999px;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none}.cp__controls{gap:8px}.cp__controls,.cp__eye{display:flex;align-items:center}.cp__eye{justify-content:center;flex-shrink:0;width:30px;height:30px;border:1px solid var(--b-border-strong);border-radius:12px;color:var(--b-fg);cursor:pointer;transition:border-color .12s cubic-bezier(.4,0,.2,1),background .12s cubic-bezier(.4,0,.2,1)}.cp__eye svg{width:16px;height:16px}.cp__eye:hover{border-color:var(--b-fg);background:var(--b-surface)}.cp__hue{position:relative;flex:1;height:12px;border-radius:999px;cursor:pointer;touch-action:none}.cp__hue:focus-visible{border-color:var(--b-fg);outline:none}.cp__hue-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:999px;border:2px solid #fff;background:transparent;transform:translate(-50%,-50%);pointer-events:none}.cp__readout{display:flex;align-items:center;gap:8px}.cp__chip{flex-shrink:0;width:20px;height:20px;border-radius:8px;border:1px solid color-mix(in srgb,var(--b-fg) 12%,transparent)}.cp__code{font-size:.875rem;font-weight:500}.cp__code,.cp__rgb{font-family:Satoshi,-apple-system,BlinkMacSystemFont,sans-serif}.cp__rgb{margin-left:auto;font-size:.75rem;color:var(--b-muted)}.cp__presets{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.cp__preset{aspect-ratio:1;border-radius:8px;border:1px solid color-mix(in srgb,var(--b-fg) 14%,transparent);cursor:pointer;transition:transform .12s cubic-bezier(.4,0,.2,1)}.cp__preset:hover{transform:scale(1.12)}.cp__preset.is-active{outline:2px solid var(--b-accent);outline-offset:1px}.cp-pop-enter-active,.cp-pop-leave-active{transition:opacity .12s cubic-bezier(.4,0,.2,1),transform .12s cubic-bezier(.4,0,.2,1)}.cp-pop-enter-from,.cp-pop-leave-to{opacity:0;transform:translateY(-6px) scale(.98)}:root{--b-bg:#fff;--b-fg:#0a0a0c;--b-muted:#767676;--b-border:#e7e7e7;--b-border-strong:#d4d4d4;--b-surface:#f3f3f3;--b-accent:#5b3df5;--b-accent-fg:#fff;--b-danger:#d92d20;--b-success:#15803d}.pf{display:flex;flex-direction:column;gap:8px}.pf__label{font-size:.875rem;font-weight:500;color:var(--b-muted)}.pf__input,.pf__textarea{width:100%;padding:10px 12px;border:1px solid var(--b-border-strong);border-radius:12px;background:var(--b-bg);color:var(--b-fg);font:inherit;transition:border-color .12s cubic-bezier(.4,0,.2,1)}.pf__input::-moz-placeholder,.pf__textarea::-moz-placeholder{color:var(--b-muted)}.pf__input::placeholder,.pf__textarea::placeholder{color:var(--b-muted)}.pf__input:hover,.pf__textarea:hover{border-color:var(--b-fg)}.pf__input:focus,.pf__textarea:focus{border-color:var(--b-fg);outline:none}.pf__textarea{resize:vertical;min-height:88px}