.mixtures-shell-body{flex-direction:column;gap:1.25rem;display:flex}@media (width>=576px){.mixtures-shell-body{gap:1.5rem}}.mixtures-segment{background-color:var(--neutral-100);border-radius:1.25rem;flex-wrap:wrap;gap:.25rem;padding:.25rem;display:inline-flex}.mixtures-segment button{color:var(--bs-secondary-color);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);background:0 0;border:0;border-radius:50rem;padding:.375rem .875rem;font-size:.8125rem;font-weight:500}.mixtures-segment button[aria-pressed=true]{color:var(--color-on-accent);background-color:var(--bs-primary)}.mixtures-segment button:focus-visible{outline:2px solid var(--color-primary-ink);outline-offset:1px}@media (hover:hover) and (pointer:fine){.mixtures-segment button:hover:not([aria-pressed=true]){color:var(--bs-body-color)}}.mixtures-layout{grid-template-columns:minmax(0,1fr);gap:1.25rem;display:grid}@media (width>=992px){.mixtures-layout.has-visual{grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);align-items:start;gap:1.5rem}}.mixtures-visual{text-align:center;background-color:var(--neutral-100);border-radius:8px;flex-direction:column;align-items:center;gap:1rem;padding:.75rem 1rem;display:flex}@media (width>=992px){.mixtures-visual{padding:1.25rem 1rem}}.mixtures-visual-title,.mixtures-visual-help{margin:0;display:none}@media (width>=992px){.mixtures-visual-title,.mixtures-visual-help{display:block}}.mixtures-visual-title{font-weight:700}.mixtures-visual-help{color:var(--bs-secondary-color);text-wrap:pretty;font-size:.875em}.mixtures-visual-stage{justify-content:center;align-items:center;gap:1rem;display:flex}@media (width>=992px){.mixtures-visual-stage{flex-direction:column}}.mixtures-visual-stage--mix{gap:.5rem;width:100%;max-width:26rem}.mixtures-visual-stage--mix .mixtures-arrow{transform:rotate(-90deg)}@media (width>=992px){.mixtures-visual-stage--mix{gap:.75rem}.mixtures-visual-stage--mix .mixtures-arrow{transform:none}}.mixtures-source-row{display:contents}@media (width>=992px){.mixtures-source-row{align-self:stretch;align-items:center;gap:.5rem;display:flex}}.mixtures-visual-stage--mix>.mixtures-beaker-wrap,.mixtures-source-row>.mixtures-beaker-wrap{flex:1 1 0;min-width:0;container-type:inline-size}@media (width>=992px){.mixtures-visual-stage--mix>.mixtures-beaker-wrap{flex:none;container-type:normal}}.mixtures-operator,.mixtures-arrow{color:var(--neutral-500)}.mixtures-visual-result{background-color:var(--surface-raised);border-radius:8px;flex-direction:column;gap:.125rem;padding:.5rem 1rem;display:flex;box-shadow:0 2px 4px #0000000d}.mixtures-visual-result .eyebrow{color:var(--bs-secondary-color)}.mixtures-visual-result strong{color:var(--color-primary-ink);font-size:1.125rem}.mixtures-beaker-wrap{--beaker-width:2.75rem;--beaker-height:3.5rem;flex-direction:column;align-items:center;gap:.375rem;display:flex}@media (width>=992px){.mixtures-beaker-wrap{--beaker-width:4rem;--beaker-height:5.125rem}}.mixtures-beaker-wrap--large{--beaker-width:3.5rem;--beaker-height:4.5rem}@media (width>=992px){.mixtures-beaker-wrap--large{--beaker-width:6.5rem;--beaker-height:8.25rem}}.mixtures-beaker-title{font-size:.875em;font-weight:700}.mixtures-beaker-title-long{display:none}@media (width>=992px){.mixtures-beaker-title-long{display:inline}.mixtures-beaker-title-short{display:none}}.mixtures-beaker{width:var(--beaker-width);max-width:100%;height:var(--beaker-height);background-color:var(--surface-raised);border:4px solid var(--neutral-600);border-top:0;border-radius:0 0 1rem 1rem;position:relative;overflow:hidden}.mixtures-beaker-liquid{background:hsl(var(--mixture-hue), 66%, 72%);transition:height var(--duration-slow) var(--ease-standard);position:absolute;inset:auto 0 0}.mixtures-beaker-shine{background:#ffffff73;border-radius:4px;width:.375rem;position:absolute;top:.5rem;bottom:.5rem;left:.375rem}.mixtures-beaker-ticks{background:linear-gradient(var(--neutral-400), var(--neutral-400)) right 0 top 25%/.625rem 2px no-repeat, linear-gradient(var(--neutral-400), var(--neutral-400)) right 0 top 50%/.875rem 2px no-repeat, linear-gradient(var(--neutral-400), var(--neutral-400)) right 0 top 75%/.625rem 2px no-repeat;position:absolute;inset:0}.mixtures-beaker-caption{min-height:1rem;color:var(--bs-secondary-color);white-space:pre-line;font-size:.75rem}.mixtures-visual-stage--mix .mixtures-beaker-caption{white-space:pre;min-height:2lh;font-size:clamp(.5625rem,16.6667cqi + .208333rem,.75rem)}.mixtures-main{flex-direction:column;gap:1.25rem;min-width:0;display:flex}.mixtures-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.mixtures-heading h2{margin:0;font-size:1.125rem}.mixtures-sections .example-step:last-child .example-step-marker:after{content:none}.mixtures-section-body{gap:.875rem}.mixtures-path{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.mixtures-path-label{color:var(--bs-secondary-color);font-size:.875em}.mixtures-fields{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem;display:grid}.mixtures-fields--stacked{grid-template-columns:minmax(0,1fr)}.mixtures-stack{flex-direction:column;gap:.75rem;display:flex}.mixtures-panel{background-color:var(--neutral-100);border-radius:8px;flex-direction:column;gap:.875rem;padding:1rem;display:flex}@media (width>=576px){.mixtures-panel{padding:1rem 1.125rem}}.mixtures-panel-header{flex-wrap:wrap;align-items:center;gap:.625rem;display:flex}.mixtures-panel-header h3{flex:1;margin:0;font-size:1rem}.mixtures-swatch{background:hsl(var(--mixture-hue), 66%, 60%);border-radius:4px;width:.875rem;height:.875rem}.mixtures-remove-btn{--icon-btn-wash:oklch(var(--btn-wash-hover-l) .004 248deg);width:2rem;min-width:0;height:2rem;color:var(--neutral-700);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);background-color:#0000;border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.mixtures-remove-btn .icon-font{color:inherit;font-size:1.125rem;line-height:1}.mixtures-remove-btn:hover{text-decoration:none}.mixtures-remove-btn:focus-visible{background-color:var(--icon-btn-wash)}@media (hover:hover) and (pointer:fine){.mixtures-remove-btn:hover{color:var(--bs-body-color);background-color:var(--icon-btn-wash)}}.mixtures-prep-link{text-transform:none;letter-spacing:normal;align-self:flex-start;padding-inline:0}.mixtures-add{color:var(--bs-secondary-color);cursor:pointer;border:1.5px dashed var(--neutral-400);transition:color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard);background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-weight:500;display:flex}@media (hover:hover) and (pointer:fine){.mixtures-add:hover{color:var(--color-primary-ink);background-color:var(--neutral-100);border-color:var(--color-primary-ink)}}.mixtures-direction{align-items:center;gap:.375rem;display:inline-flex}.mixtures-direction-label{color:var(--bs-secondary-color);font-size:.875em}.mixtures-direction-chip{border-radius:4px;padding:.25rem .625rem;font-weight:700}.mixtures-direction-chip.is-from{color:oklch(53% .14 245);background-color:oklch(94% .045 245)}.mixtures-direction-chip.is-to{color:oklch(53% .14 62);background-color:oklch(94% .045 62)}.mixtures-swap-btn{--icon-btn-wash:rgba(var(--bs-emphasis-color-rgb), .12);width:2rem;min-width:0;height:2rem;color:var(--neutral-700);cursor:pointer;background-color:rgba(var(--bs-emphasis-color-rgb), .06);transition:background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);border:0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}.mixtures-swap-btn .icon-font{color:inherit;font-size:1.125rem;line-height:1}.mixtures-swap-btn:hover{text-decoration:none}.mixtures-swap-btn:focus-visible{background-color:var(--icon-btn-wash)}@media (hover:hover) and (pointer:fine){.mixtures-swap-btn:hover{color:var(--bs-body-color);background-color:var(--icon-btn-wash)}}.mixtures-swap-btn .icon-font{transition:transform var(--duration-base) var(--ease-standard)}.mixtures-swap-btn.is-reversed .icon-font{transform:rotate(360deg)}.mixtures-sheet-body{flex-direction:column;gap:1rem;padding:.25rem 1.25rem 1.25rem;display:flex}.mixtures-sheet-footer{border-top:1px solid var(--bs-border-color);justify-content:space-between;align-items:center;gap:.5rem;padding:1rem 1.25rem;display:flex}