.water-sort-preview{--preview-state:paused;aspect-ratio:260/190;isolation:isolate;background:#0b172b;border-radius:6px;width:100%;max-width:390px;margin:0 auto;overflow:hidden}.water-sort-preview[data-running=true]{--preview-state:running}.water-sort-preview__scene{width:100%;height:100%;display:block;overflow:hidden}.water-sort-preview__animated{animation-duration:8s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:var(--preview-state);transform-origin:0 0}.water-sort-preview__loop{animation-name:water-sort-preview-loop}.water-sort-preview__source--two{animation-name:preview-source-two}.water-sort-preview__source--one{animation-name:preview-source-one}.water-sort-preview__liquid--two{animation-name:preview-liquid-two}.water-sort-preview__liquid--one{animation-name:preview-liquid-one}.water-sort-preview__base{animation-name:preview-base}.water-sort-preview__destination{animation-name:preview-destination}.water-sort-preview__surface{animation-name:preview-surface}.water-sort-preview__stream-clip{animation-name:preview-stream}.water-sort-preview__cork{opacity:0;animation-name:preview-cork}.water-sort-preview__source-surface{animation-name:water-sort-preview-source-surface}.water-sort-preview__remaining-surface{opacity:0;animation-name:water-sort-preview-remaining-surface}.water-sort-preview__floor{fill:var(--preview-fill);opacity:.08}.water-sort-preview__magic{fill:color-mix(in srgb, var(--preview-fill) 18%, white)}.water-sort-preview__trail,.water-sort-preview__trail-halo{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}.water-sort-preview__trail{stroke:color-mix(in srgb, var(--preview-fill) 18%, white);stroke-width:1.1px}.water-sort-preview__trail-halo{stroke:var(--preview-light);stroke-width:3px;opacity:.22}.water-sort-preview__spark{fill:#fff1ce}.water-sort-preview__seal{fill:none;stroke:#ffedb8;stroke-width:.8px;animation-name:water-sort-preview-seal}.water-sort-preview__selection{opacity:0;filter:brightness(1.8)}.water-sort-preview__selection--source{animation-name:water-sort-preview-source-selection}.water-sort-preview__selection--destination{animation-name:water-sort-preview-destination-selection}.water-sort-preview__tap{fill:none;stroke:#eee7d4;stroke-width:1.3px;opacity:0;transform-box:fill-box;transform-origin:50%}.water-sort-preview__tap--source{animation-name:water-sort-preview-source-tap}.water-sort-preview__tap--destination{animation-name:water-sort-preview-destination-tap}.water-sort-preview__impact{fill:none;stroke:var(--preview-light);stroke-width:.8px;opacity:0;transform-origin:19.5px 0;animation-name:water-sort-preview-impact}.water-sort-preview__instruction{opacity:0;pointer-events:none}.water-sort-preview__instruction rect{fill:#08111f;fill-opacity:.96;stroke:#ded7c5;stroke-opacity:.3;stroke-width:.7px}.water-sort-preview__instruction text{fill:#f6f1e6;font-family:var(--font-geist-sans), system-ui, sans-serif;letter-spacing:.02em;font-size:14px;font-weight:600}.water-sort-preview__instruction--select{animation-name:water-sort-preview-instruction-select}.water-sort-preview__instruction--pour{animation-name:water-sort-preview-instruction-pour}.water-sort-preview__instruction--complete{animation-name:water-sort-preview-instruction-complete}.water-sort-preview__instruction--static{display:none}@keyframes water-sort-preview-instruction-select{0%,22.5%,37.5%,to{opacity:0}25%,36%{opacity:1}}@keyframes water-sort-preview-instruction-pour{0%,38%,62.5%,to{opacity:0}40%,60%{opacity:1}}@keyframes water-sort-preview-instruction-complete{0%,62.5%,97%,to{opacity:0}65%,92%{opacity:1}}@keyframes water-sort-preview-loop{0%,92%{opacity:1}97%,98%{opacity:0}to{opacity:1}}@keyframes water-sort-preview-source-surface{0%,37.5%,to{opacity:.85}41%,97.75%{opacity:0}98%{opacity:.85}}@keyframes water-sort-preview-remaining-surface{0%,59%,98%,to{opacity:0}62.5%,97.7%{opacity:.85}}@keyframes water-sort-preview-source-selection{0%,24%,38%,to{opacity:0}27%,35%{opacity:.28}}@keyframes water-sort-preview-destination-selection{0%,32%,46%,to{opacity:0}35%,42%{opacity:.16}}@keyframes water-sort-preview-source-tap{0%,24%,34%,to{opacity:0;transform:scale(.7)}26%{opacity:.8;transform:scale(.7)}33%{opacity:0;transform:scale(1.5)}}@keyframes water-sort-preview-destination-tap{0%,31%,41%,to{opacity:0;transform:scale(.7)}33%{opacity:.8;transform:scale(.7)}40%{opacity:0;transform:scale(1.5)}}@keyframes water-sort-preview-impact{0%,44%,61%,to{opacity:0;transform:scale(.7)}46%,51%,56%{opacity:.7;transform:scale(.8)}49%,54%,59%{opacity:0;transform:scale(1.7)}}@keyframes water-sort-preview-seal{0%,71.5%,81%,to{opacity:0}73%{opacity:.85}79%{opacity:0}}.water-sort-preview[data-empty] .water-sort-preview__loop{animation:none}.water-sort-preview[data-empty] :is(.water-sort-preview__magic,.water-sort-preview__cork,.water-sort-preview__tap){display:none}@media (prefers-reduced-motion:reduce){.water-sort-preview__animated{animation:none!important}.water-sort-preview__loop{opacity:1}.water-sort-preview__source{transform:none}.water-sort-preview__base,.water-sort-preview__destination,.water-sort-preview__liquid--one{clip-path:inset(57.624% 0 0)}.water-sort-preview__liquid--two{clip-path:inset(20.625% 0 42.376%)}.water-sort-preview__surface{transform:translateY(57.624px)}.water-sort-preview__source-surface{opacity:.85}.water-sort-preview__remaining-surface,.water-sort-preview__selection{opacity:0}.water-sort-preview__instruction{display:none}.water-sort-preview__instruction--static{opacity:1;display:inline}.water-sort-preview :is(.water-sort-preview__magic,.water-sort-preview__cork,.water-sort-preview__tap,.water-sort-preview__stream,.water-sort-preview__impact){display:none}}