.br-cph{max-width:36rem;margin:0 auto}.br-cph__preview{height:8rem;border-radius:var(--br-radius);border:1px solid var(--br-color-border);margin-bottom:var(--br-space-lg);background-image:linear-gradient(45deg,#e5e5e5 25%,transparent 25%),linear-gradient(-45deg,#e5e5e5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e5e5 75%),linear-gradient(-45deg,transparent 75%,#e5e5e5 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;position:relative;overflow:hidden}.br-cph__preview::before{content:"";position:absolute;inset:0;background-color:var(--cph-current,#2563eb)}.br-cph__sliders{margin-bottom:var(--br-space-lg);padding:var(--br-space-md);background-color:var(--br-color-bg-light);border:1px solid var(--br-color-border);border-radius:var(--br-radius)}.br-cph__slider-row{display:grid;grid-template-columns:4rem 1fr 3rem;align-items:center;gap:var(--br-space-sm);padding:var(--br-space-xs) 0}.br-cph__slider-label{font-size:var(--br-text-xs);font-weight:600;color:var(--br-color-text-sub)}.br-cph__slider{width:100%;height:1.25rem;-webkit-appearance:none;appearance:none;background:0 0;cursor:pointer}.br-cph__slider::-webkit-slider-runnable-track{height:.625rem;background:var(--br-color-bg);border-radius:999px;border:1px solid var(--br-color-border)}.br-cph__slider::-moz-range-track{height:.625rem;background:var(--br-color-bg);border-radius:999px;border:1px solid var(--br-color-border)}.br-cph__slider::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;border:2px solid var(--br-color-text);margin-top:-.375rem;cursor:pointer}.br-cph__slider::-moz-range-thumb{width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;border:2px solid var(--br-color-text);cursor:pointer}.br-cph__slider--hue::-webkit-slider-runnable-track{background:linear-gradient(to right,red,#feff00,#0f0,#00feff,#00f,#ff00fe,red)}.br-cph__slider--hue::-moz-range-track{background:linear-gradient(to right,red,#feff00,#0f0,#00feff,#00f,#ff00fe,red)}.br-cph__slider-value{text-align:right;font-family:"Courier New",Courier,monospace;font-size:var(--br-text-xs);color:var(--br-color-text);font-variant-numeric:tabular-nums}.br-cph__codes{display:flex;flex-direction:column;gap:var(--br-space-xs)}.br-cph__code-row{display:grid;grid-template-columns:4rem 1fr auto;align-items:center;gap:var(--br-space-sm);padding:var(--br-space-xs) var(--br-space-sm);background-color:var(--br-color-surface);border:1px solid var(--br-color-border);border-radius:var(--br-radius)}.br-cph__code-label{font-size:var(--br-text-xs);font-weight:600;color:var(--br-color-text-sub)}.br-cph__code-input{font-family:"Courier New",Courier,monospace;font-size:var(--br-text-sm);color:var(--br-color-text);background:0 0;border:none;padding:0;width:100%;user-select:all}.br-cph__code-input:focus{outline:0}