.g-color-mix{--cm-red:#e0453a;--cm-yellow:#f2c23a;--cm-blue:#2f6fd0;--cm-white:#fafafa;gap:var(--sp-3)}.g-color-mix :focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}.g-color-mix .cm-head{justify-content:center;align-items:center;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;width:100%;display:flex}.g-color-mix .cm-dots{gap:5px;display:flex}.g-color-mix .cm-dot{border-radius:var(--r-full);background:var(--c-surface-3);width:8px;height:8px}.g-color-mix .cm-dot.is-done{background:var(--c-brand)}.g-color-mix .cm-dot.is-now{background:var(--c-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--c-accent) 26%, transparent)}.g-color-mix .cm-chip{align-items:center;gap:var(--sp-1);padding-block:var(--sp-1);padding-inline:var(--sp-3);border-radius:var(--r-full);background:var(--c-brand-soft);color:var(--c-brand);font-size:var(--fs-sm);font-weight:var(--fw-semi);white-space:nowrap;display:inline-flex}.g-color-mix .cm-chip .cm-dropicon{fill:currentColor;width:14px;height:14px}.g-color-mix .cm-stage{justify-content:center;align-items:flex-end;gap:var(--sp-5);width:min(100%,420px);padding:var(--sp-4);border-radius:var(--r-xl);background:var(--c-surface-2);display:flex}.g-color-mix .cm-target,.g-color-mix .cm-jarbox{align-items:center;gap:var(--sp-1);flex-direction:column;flex:1 1 0;min-width:0;display:flex}.g-color-mix .cm-swatch{aspect-ratio:1;border:4px solid var(--c-surface);border-radius:var(--r-full);background:var(--cm-color,var(--c-surface-3));width:min(120px,36vw);box-shadow:var(--shadow-md)}.g-color-mix .cm-jar{aspect-ratio:100/120;width:min(120px,36vw);height:auto;overflow:visible}.g-color-mix .cm-water{fill:color-mix(in srgb, var(--c-text) 6%, transparent)}.g-color-mix .cm-glass{fill:none;stroke:var(--c-border-strong);stroke-width:3px;stroke-linejoin:round}.g-color-mix .cm-lid{fill:var(--c-border-strong)}.g-color-mix .cm-glare{stroke:var(--c-surface);stroke-width:3px;stroke-linecap:round;opacity:.55}.g-color-mix .cm-caption{color:var(--c-text-dim);font-size:var(--fs-xs)}.g-color-mix .cm-word{min-height:1.4em;color:var(--c-text);font-size:var(--fs-md);font-weight:var(--fw-bold);text-align:center}.g-color-mix .cm-stage.is-found{background:var(--c-good-soft)}.g-color-mix .cm-stage.is-found .cm-glass{stroke:var(--c-good);stroke-width:4px}.g-color-mix .cm-jarbox.is-full .cm-glass{stroke:var(--c-warn)}.g-color-mix .cm-tray{justify-content:center;gap:var(--sp-3);flex-wrap:wrap;display:flex}.g-color-mix .cm-bottle{min-width:64px;padding:var(--sp-1) var(--sp-2) var(--sp-2);border-radius:var(--r-md);color:var(--c-text);font:inherit;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:2px;display:flex}.g-color-mix .cm-bottlecap{background:var(--c-border-strong);border-radius:3px 3px 0 0;width:18px;height:10px}.g-color-mix .cm-bottlebody{width:var(--tap);border:2px solid color-mix(in srgb, var(--cm-paint) 60%, #000 40%);background:var(--cm-paint);color:#fff;border-radius:10px 10px 14px 14px;place-items:center;height:56px;display:grid;box-shadow:inset 6px 0 10px -6px #ffffff8c}.g-color-mix .cm-bottle[data-pigment=red]{--cm-paint:var(--cm-red)}.g-color-mix .cm-bottle[data-pigment=yellow]{--cm-paint:var(--cm-yellow)}.g-color-mix .cm-bottle[data-pigment=blue]{--cm-paint:var(--cm-blue)}.g-color-mix .cm-bottle[data-pigment=white]{--cm-paint:var(--cm-white)}.g-color-mix .cm-bottle[data-pigment=white] .cm-bottlebody,.g-color-mix .cm-bottle[data-pigment=yellow] .cm-bottlebody{color:#00000073}.g-color-mix .cm-bottlebody .cm-dropicon{fill:currentColor;width:22px;height:22px}.g-color-mix .cm-bottlename{font-size:var(--fs-sm);font-weight:var(--fw-semi)}.g-color-mix .cm-bottle:disabled{opacity:.45;cursor:default}.g-color-mix .cm-bottle.is-hinted .cm-bottlebody,.g-color-mix .cm-action.is-hinted{outline:3px solid var(--c-accent);outline-offset:3px}.g-color-mix .cm-msg{max-width:36ch;min-height:2.6em;color:var(--c-text-dim);font-size:var(--fs-md);font-weight:var(--fw-med);line-height:var(--lh-snug);text-align:center;text-wrap:balance;margin:0}.g-color-mix .cm-msg.is-good{color:var(--c-good);font-weight:var(--fw-bold)}.g-color-mix .cm-msg.is-almost{color:var(--c-warn);font-weight:var(--fw-semi)}.g-color-mix .cm-actions{justify-content:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.g-color-mix .cm-action{min-height:var(--tap);padding-block:var(--sp-2);padding-inline:var(--sp-4);border:2px solid var(--c-border-strong);border-radius:var(--r-full);background:var(--c-surface);color:var(--c-text);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);cursor:pointer}.g-color-mix .cm-action:disabled{opacity:.5;cursor:default}.g-color-mix.is-done .cm-tray,.g-color-mix.is-done .cm-actions{visibility:hidden}.g-color-mix .cm-liquid,.g-color-mix .cm-swatch,.g-color-mix .cm-bottle,.g-color-mix .cm-stage{transition:none}@media (prefers-reduced-motion:no-preference){.g-color-mix.is-motion .cm-liquid{transition:y var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), fill var(--dur) var(--ease)}.g-color-mix.is-motion .cm-swatch,.g-color-mix.is-motion .cm-stage{transition:background-color var(--dur) var(--ease)}.g-color-mix.is-motion .cm-bottle{transition:transform var(--dur-fast) var(--ease-bounce)}.g-color-mix.is-motion .cm-bottle:not(:disabled):active{transform:translateY(3px)scale(.96)}.g-color-mix.is-motion .cm-stage.is-found .cm-jar{animation:cm-wobble var(--dur-slow) var(--ease-bounce)}@keyframes cm-wobble{0%{transform:rotate(0)}30%{transform:rotate(-5deg)}60%{transform:rotate(4deg)}to{transform:rotate(0)}}}