.bmm-mixer{display:grid;gap:var(--bmm-space-6)}.bmm-mixer__modes{min-width:0;padding:0;margin:0 0 var(--bmm-space-5);border:0}.bmm-mixer__modes .bmm-field__label{padding:0;margin-bottom:var(--bmm-space-1)}.bmm-mixer__title{margin-bottom:var(--bmm-space-3);font-size:var(--bmm-font-size-lg)}.bmm-mixer__rows{display:grid;gap:var(--bmm-space-2);margin-bottom:var(--bmm-space-4)}.bmm-mixer__row{display:grid;grid-template-areas:"color hex hex hex" "step step percent remove";grid-template-columns:2.75rem minmax(0,1fr) auto 2.75rem;gap:var(--bmm-space-2);align-items:center;padding:var(--bmm-space-2);background:var(--bmm-color-bg);border:1px solid var(--bmm-color-border);border-radius:var(--bmm-radius-sm)}.bmm-mixer__color{grid-area:color}.bmm-mixer__hex{grid-area:hex}.bmm-mixer__stepper{display:flex;grid-area:step;gap:var(--bmm-space-1);align-items:center}.bmm-mixer__parts{width:3.5rem;text-align:center}.bmm-mixer__percent{grid-area:percent;font-family:var(--bmm-font-mono);font-size:var(--bmm-font-size-sm);text-align:right}.bmm-mixer__remove{grid-area:remove}.bmm-mixer__summary{display:flex;gap:var(--bmm-space-3);align-items:center;padding:var(--bmm-space-2) var(--bmm-space-3);margin-bottom:var(--bmm-space-4);background:var(--bmm-color-bg);border:1px solid var(--bmm-color-border);border-radius:var(--bmm-radius-sm)}.bmm-mixer__summary-chip{flex:none;width:3rem;height:3rem;border:1px solid var(--bmm-color-border);border-radius:var(--bmm-radius-sm)}.bmm-mixer__summary code{font-family:var(--bmm-font-mono)}.bmm-mixer__ratios{display:grid;gap:var(--bmm-space-2);margin-top:var(--bmm-space-4)}.bmm-mixer__ratio-list{display:flex;flex-wrap:wrap;gap:var(--bmm-space-2)}.bmm-mixer__ratio{display:inline-flex;gap:var(--bmm-space-2);align-items:center;min-height:2.5rem;padding:var(--bmm-space-1) var(--bmm-space-3) var(--bmm-space-1) var(--bmm-space-1);font-family:var(--bmm-font-mono);font-size:var(--bmm-font-size-sm);background:var(--bmm-color-bg);border:1px solid var(--bmm-color-border);border-radius:99rem}.bmm-mixer__ratio:hover,.bmm-mixer__ratio[aria-pressed=true]{border-color:var(--bmm-color-accent)}.bmm-mixer__ratio[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--bmm-color-accent)}.bmm-mixer__ratio-chip{width:1.75rem;height:1.75rem;border:1px solid var(--bmm-color-border);border-radius:50%}.bmm-mixer__tools{display:flex;flex-wrap:wrap;gap:var(--bmm-space-2);margin-top:var(--bmm-space-4)}.bmm-mixer__status{margin-top:var(--bmm-space-2);font-size:var(--bmm-font-size-sm);font-weight:600}.bmm-mixer__status:empty{display:none}.bmm-mixer__share{font-size:var(--bmm-font-size-sm)}.bmm-mixer__quick{display:flex;flex-wrap:wrap;gap:var(--bmm-space-2);align-items:center}.bmm-mixer__quick-button{display:inline-flex;gap:var(--bmm-space-2);align-items:center;min-height:2.5rem;padding:var(--bmm-space-1) var(--bmm-space-3);font-size:var(--bmm-font-size-sm);background:var(--bmm-color-bg);border:1px solid var(--bmm-color-border);border-radius:99rem}.bmm-mixer__quick-button:hover{border-color:var(--bmm-color-accent)}.bmm-mixer__quick-button:disabled{cursor:not-allowed;opacity:.4}.bmm-mixer__quick-chip{width:1rem;height:1rem;border:1px solid var(--bmm-color-border);border-radius:50%}.bmm-mixer__result{display:grid;gap:var(--bmm-space-2);align-content:start}.bmm-mixer__result .bmm-mixer__title{margin-bottom:var(--bmm-space-1)}.bmm-mixer__chip{width:100%;height:8rem;border:1px solid var(--bmm-color-border);border-radius:var(--bmm-radius-sm)}.bmm-mixer__bar{width:100%;height:.75rem;border:1px solid var(--bmm-color-border);border-radius:99rem}.bmm-mixer__recipe{min-height:1.5rem;font-size:var(--bmm-font-size-sm);color:var(--bmm-color-muted)}.bmm-mixer__links{font-size:var(--bmm-font-size-sm)}.bmm-cmyk{display:grid;gap:var(--bmm-space-5);margin-bottom:var(--bmm-space-3)}.bmm-cmyk__sliders{display:grid;gap:var(--bmm-space-3);align-content:start}.bmm-cmyk__slider{display:grid;grid-template-columns:1fr 3rem;column-gap:var(--bmm-space-3);align-items:center}.bmm-cmyk__slider .bmm-field__label{grid-column:1 / -1}.bmm-cmyk__value{font-family:var(--bmm-font-mono);font-size:var(--bmm-font-size-sm);text-align:right}.bmm-cmyk__result{display:grid;gap:var(--bmm-space-2);align-content:start}.bmm-cmyk__chip{width:100%;height:5rem;border:1px solid var(--bmm-color-border);border-radius:var(--bmm-radius-sm)}.bmm-reverse__form{display:flex;flex-wrap:wrap;gap:var(--bmm-space-3);align-items:flex-end;margin:var(--bmm-space-3) 0}.bmm-reverse__form .bmm-field{flex:1 1 14rem}.bmm-reverse__native{flex:none;width:3.5rem}.bmm-reverse__list{display:grid;gap:var(--bmm-space-2);padding:0;margin-bottom:var(--bmm-space-3);list-style:none}.bmm-reverse__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--bmm-space-2) var(--bmm-space-3);align-items:center;padding:var(--bmm-space-3);background:var(--bmm-color-surface);border:1px solid var(--bmm-color-border);border-radius:var(--bmm-radius-sm)}.bmm-reverse__item .bmm-button{grid-column:1 / -1;justify-self:start}.bmm-reverse__compare{display:flex}.bmm-reverse__chip{width:2.75rem;height:2.75rem;border:1px solid var(--bmm-color-border)}.bmm-reverse__chip:first-child{border-right:0;border-radius:var(--bmm-radius-sm) 0 0 var(--bmm-radius-sm)}.bmm-reverse__chip:last-child{border-radius:0 var(--bmm-radius-sm) var(--bmm-radius-sm) 0}.bmm-reverse__text{font-size:var(--bmm-font-size-sm)}.bmm-reverse__level{display:inline-block;padding:0 var(--bmm-space-2);font-size:.75rem;font-weight:700;white-space:nowrap;border:1px solid currentcolor;border-radius:99rem}.bmm-reverse__level.is-close{color:var(--bmm-color-success)}.bmm-reverse__level.is-far{color:var(--bmm-color-danger)}.bmm-reverse__note{padding:var(--bmm-space-2) var(--bmm-space-3);margin-bottom:var(--bmm-space-3);font-size:var(--bmm-font-size-sm);border-left:3px solid var(--bmm-color-danger)}@media(min-width:30rem){.bmm-mixer__row{grid-template-areas:"color hex step percent remove";grid-template-columns:2.75rem minmax(0,1fr) auto 2.5rem 2.75rem}}@media(min-width:48rem){.bmm-mixer,.bmm-cmyk{grid-template-columns:1fr 1fr}.bmm-mixer__row{grid-template-areas:"color hex hex hex" "step step percent remove";grid-template-columns:2.75rem minmax(0,1fr) auto 2.75rem}.bmm-mixer__summary{display:none}.bmm-reverse__item{grid-template-columns:auto minmax(0,1fr) auto}.bmm-reverse__item .bmm-button{grid-column:auto}}@media(min-width:64rem){.bmm-mixer__row{grid-template-areas:"color hex step percent remove";grid-template-columns:2.75rem minmax(0,1fr) auto 2.5rem 2.75rem}}