.mix-app{--mix-plaster:#e9e6e0;--mix-slab:#f6f5f2;--mix-ink:#24231f;--mix-pencil:#6e6c66;--mix-line:#d3cfc7;--mix-rise:14px;--mix-step:40ms;background:var(--mix-plaster);color:var(--mix-ink);font-family:var(--font-sans);-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow:hidden}.mix-label{font:400 13px/18px var(--font-sans)}.mix-body{font:400 15px/20px var(--font-sans)}.mix-serif{font-family:var(--font-newsreader), Georgia, serif}.mix-title{font:400 20px/26px var(--font-newsreader), Georgia, serif}.mix-hero{font:400 64px/62px var(--font-newsreader), Georgia, serif;margin:0}.mix-mark{top:calc(26px + env(safe-area-inset-top));z-index:2;pointer-events:none;width:30px;height:30px;animation:mix-rise .64s var(--ease-out-quint) backwards;position:absolute;left:50%;translate:-50%}.mix-bench{transition:opacity .32s var(--ease-out-quint);position:absolute;inset:0}.mix-bench.is-searching{opacity:.08}.mix-canvas{touch-action:none;width:100%;height:100%;display:block}.mix-bench-names{pointer-events:none;color:var(--mix-pencil);font-style:italic;position:absolute;inset:0}.mix-bench-names span{animation:mix-rise .56s var(--ease-out-quint) backwards;transition:opacity .24s var(--ease-out-quint), transform .24s var(--ease-out-quint);position:absolute;translate:-50%}.mix-bench-names span:nth-child(2){animation-delay:80ms}.mix-bench-names span:nth-child(3){animation-delay:.16s}.mix-bench-names[data-hidden=true] span{opacity:0;transform:translateY(-6px)}.mix-bench-names span:first-child{top:calc(46% + min(15vw,15vh));left:38%}.mix-bench-names span:nth-child(2){top:31%;left:calc(59% + min(15vw,15vh))}.mix-bench-names span:nth-child(3){top:calc(59% + min(10vw,10vh));left:65%}.mix-rail{z-index:3;bottom:calc(40px + env(safe-area-inset-bottom));overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;transition:opacity .22s var(--ease-out-quint), transform .22s var(--ease-out-quint);justify-content:safe center;align-items:end;gap:6px;padding:12px 24px;display:flex;position:absolute;left:0;right:0;overflow-x:auto}.mix-rail[data-hidden=true]{opacity:0;transform:translateY(var(--mix-rise));pointer-events:none}.mix-rail[data-leaving=true]{opacity:0;transform:translateY(calc(var(--mix-rise) / 2));transition-duration:.18s}.mix-rail::-webkit-scrollbar{display:none}.mix-rail-item{scroll-snap-align:start;min-width:44px;min-height:106px;color:var(--mix-ink);animation:mix-rise .48s var(--ease-out-quint) backwards;animation-delay:calc(min(var(--i,0), 10) * var(--mix-step));background:0 0;border:0;flex-direction:column;flex:0 0 116px;justify-content:end;align-items:center;gap:15px;padding:10px 0 0;display:flex}.mix-rail-item>.mix-body{white-space:nowrap;max-width:116px;min-height:20px}.mix-dollop{background:radial-gradient(ellipse 28% 14% at 35% 22%, #ffffffa6 0%, #ffffff60 64%, transparent 100%), radial-gradient(ellipse at 30% 26%, #ffffff20, transparent 65%), radial-gradient(ellipse at 65% 90%, #00000020, transparent 70%), var(--paint);--tilt:-8deg;width:51px;height:43px;transform:translateY(var(--lift,0)) rotate(var(--tilt)) scale(calc(var(--dollop-scale,1) * var(--press,1)));transition:transform .22s var(--ease-out-quint), opacity .22s var(--ease-out-quint);border-radius:46% 55% 48% 43%/48% 47% 57% 53%;flex-shrink:0;display:block;position:relative;box-shadow:0 7px 8px -5px #24231f45,inset 0 0 0 .5px #24231f14}.mix-rail-item:nth-child(3n) .mix-dollop{--tilt:11deg;border-radius:52% 43% 53% 44%/40% 50% 50% 59%}@media (hover:hover) and (pointer:fine){.mix-rail-item:hover .mix-dollop,.mix-result:hover .mix-dollop{--lift:-4px}}.mix-rail-item:active .mix-dollop,.mix-result:active .mix-dollop{--press:.94;transition-duration:.12s}.mix-rail-item[data-lifted=true] .mix-dollop{opacity:.24;--press:.9}.mix-ghost{z-index:7;pointer-events:none;margin:0;transition:none;position:fixed;top:0;left:0;box-shadow:0 14px 18px -8px #24231f40,inset 0 0 0 .5px #24231f14}.mix-empty{border:1px dashed var(--mix-pencil);width:44px;height:44px;color:var(--mix-pencil);border-radius:47% 53% 49% 45%;place-items:center;display:grid}.mix-yield{color:var(--mix-pencil);transition:color .2s}.mix-yield[data-selected=true],.mix-yield:hover{color:var(--mix-ink)}.mix-yield .mix-dollop:after{content:"";border:1px solid var(--mix-slab);opacity:0;transition:opacity .2s var(--ease-out-quint), transform .2s var(--ease-out-quint);border-radius:50%;position:absolute;inset:6px;transform:scale(.7)}.mix-yield[data-selected=true] .mix-dollop{--lift:-4px}.mix-yield[data-selected=true] .mix-dollop:after{opacity:1;transform:scale(1)}.mix-drops{transition:opacity .2s var(--ease-out-quint)}.mix-bench[data-mixing=true] .mix-drops{opacity:0;transition-duration:.12s}.mix-drop{z-index:1;-webkit-tap-highlight-color:transparent;background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;translate:-50% -50%}.mix-drop span{background:var(--paint);border:1.5px solid var(--mix-slab);width:14px;height:14px;animation:mix-land .52s var(--ease-out-quint) backwards;animation-delay:calc(min(var(--i,0), 10) * var(--mix-step) + 60ms);transition:transform .2s var(--ease-out-quint);border-radius:50%;position:relative;box-shadow:0 1px 3px #24231f24}.mix-drop span:after{content:"";opacity:0;transition:opacity .2s var(--ease-out-quint), transform .2s var(--ease-out-quint);border:1px solid #f6f5f2b3;border-radius:50%;position:absolute;inset:-6px;transform:scale(.6)}.mix-drop[data-selected=true] span{transform:scale(1.3)}.mix-drop[data-selected=true] span:after{opacity:1;transform:scale(1)}@media (hover:hover) and (pointer:fine){.mix-drop:hover span{transform:scale(1.3)}.mix-drop:hover span:after{opacity:1;transform:scale(1)}}.mix-drop:active span{transition-duration:.12s;transform:scale(1.1)}.mix-failure{animation:mix-rise .32s var(--ease-out-quint) backwards;text-align:center;position:absolute;bottom:180px;left:24px;right:24px}.mix-hud{pointer-events:none;font-variant-numeric:tabular-nums;position:absolute;top:64px;left:32px}.mix-search{z-index:4;position:absolute;inset:0}.mix-search-dismiss{background:0 0;border:0;width:100%;height:100%;position:absolute;inset:0}.mix-search-dock{bottom:calc(var(--keyboard-inset,0px) + 40px + env(safe-area-inset-bottom));width:min(860px,100% - 40px);animation:mix-rise .36s var(--ease-out-quint) backwards;position:absolute;left:50%;translate:-50%}.mix-search[data-closing=true] .mix-search-dock{animation:mix-sink .2s var(--ease-out-quint) forwards}.mix-results{max-height:calc(100dvh - var(--keyboard-inset,0px) - 170px);grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 8px;padding:20px 0 30px;display:grid;overflow-y:auto}.mix-result{background:0 0;border:0;flex-direction:column;justify-content:end;align-items:center;gap:5px;min-width:0;min-height:112px;padding:8px 0;animation:.2s backwards mix-fade;display:flex}.mix-result .mix-dollop{margin-bottom:12px}.mix-result .mix-label{color:var(--mix-pencil)}.mix-result>span:not(.mix-dollop){text-align:center;max-width:100%}.mix-search-field{background:var(--mix-slab);border-radius:22px;align-items:center;width:min(420px,100%);height:44px;margin:0 auto;padding-left:14px;display:flex;box-shadow:0 4px 8px #24231f0c}.mix-search-field>svg{width:18px;height:18px;color:var(--mix-pencil)}.mix-search-field input{background:0 0;border:0;outline:0;flex:1;min-width:0;height:44px;padding:0 10px}.mix-search-field input::-webkit-search-cancel-button{display:none}.mix-search-field button{width:44px;height:44px;color:var(--mix-pencil);background:0 0;border:0;border-radius:22px;place-items:center;padding:0;display:grid}.mix-search-status{text-align:center;color:var(--mix-pencil);margin:0 0 16px;display:block}.mix-paint-page{z-index:6;isolation:isolate;animation:mix-flood .64s var(--ease-out-quint) both;position:absolute;inset:0}.mix-paint-page[data-closing=true]{animation:mix-ebb .46s var(--ease-in-out-quart) both}.mix-paint-page .mix-mark,.mix-paint-page .mix-share,.mix-paint-details>*{animation:mix-rise .56s var(--ease-out-quint) backwards;animation-delay:calc(.18s + var(--i,0) * 60ms)}.mix-paint-details>:nth-child(2){--i:1}.mix-paint-details>:nth-child(3){--i:2}.mix-paint-details>:nth-child(4){--i:3}.mix-paint-page .mix-hero{animation-name:mix-surface;animation-duration:.72s}.mix-paint-page[data-closing=true] .mix-mark,.mix-paint-page[data-closing=true] .mix-share,.mix-paint-page[data-closing=true] .mix-paint-details>*{animation:.14s forwards mix-fade-out}.mix-share{background:0 0;border:0;border-radius:22px;place-items:center;width:44px;height:44px;display:grid;position:absolute;top:20px;right:24px}.mix-paint-details{max-width:760px;position:absolute;bottom:12%;left:8%;right:8%}.mix-paint-details>.mix-title{margin-top:14px}.mix-facts{opacity:.72;gap:28px;margin-top:28px;display:flex}.mix-paint-actions{align-items:center;gap:20px;margin-top:28px;display:flex}.mix-order{min-height:44px;color:var(--mix-slab);background:var(--mix-ink);border-radius:22px;justify-content:center;align-items:center;padding:0 24px;text-decoration:none;display:flex}.mix-back{background:0 0;border:0;border-radius:22px;justify-content:center;align-items:center;min-height:44px;padding:0 12px;display:inline-flex}@keyframes mix-rise{0%{opacity:0;transform:translateY(var(--mix-rise))}}@keyframes mix-sink{to{opacity:0;transform:translateY(var(--mix-rise))}}@keyframes mix-fade{0%{opacity:0}}@keyframes mix-fade-out{to{opacity:0}}@keyframes mix-land{0%{opacity:0;transform:scale(1.8)}}@keyframes mix-surface{0%{opacity:0;filter:blur(8px);transform:translateY(calc(var(--mix-rise) * 1.5))}}@keyframes mix-flood{0%{clip-path:circle(var(--origin-r,0px) at var(--origin-x) var(--origin-y))}to{clip-path:circle(var(--reach,150vmax) at var(--origin-x) var(--origin-y))}}@keyframes mix-ebb{0%{clip-path:circle(var(--reach,150vmax) at var(--origin-x) var(--origin-y))}to{clip-path:circle(var(--origin-r,0px) at var(--origin-x) var(--origin-y))}}@media (max-width:767px){.mix-mark{top:max(28px, env(safe-area-inset-top));width:28px;height:28px}.mix-rail{bottom:calc(40px + env(safe-area-inset-bottom));justify-content:start;gap:0;padding:12px}.mix-rail-item{flex-basis:112px}.mix-bench-names span:nth-child(2){top:calc(38% - min(16vw,16vh));left:59%}.mix-search-dock{width:calc(100% - 32px);bottom:calc(var(--keyboard-inset,0px) + 12px + env(safe-area-inset-bottom))}.mix-results{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 4px;padding-bottom:25px}.mix-paint-details{left:24px;right:24px;bottom:calc(42px + env(safe-area-inset-bottom))}.mix-paint-actions{flex-direction:column;gap:4px;display:flex}.mix-order,.mix-back{width:100%}.mix-share{top:22px;right:16px}}@media (prefers-reduced-motion:reduce){.mix-app{--mix-rise:0px;--mix-step:0s}.mix-drop span,.mix-paint-page .mix-hero{animation-name:mix-fade}.mix-dollop{--lift:0px!important}.mix-paint-page{animation:.16s both mix-fade}.mix-paint-page[data-closing=true]{animation:.16s both mix-fade-out}}dialog.mix-paint-page,dialog.mix-search{width:100%;max-width:none;height:100%;max-height:none;color:inherit;border:0;margin:0;padding:0}dialog.mix-search,dialog.mix-search::backdrop,dialog.mix-paint-page::backdrop{background:0 0}.mix-rail-item{touch-action:pan-x}@media (max-width:767px){.mix-bench.is-searching{opacity:0}}.mix-retry{color:inherit;font:inherit;text-underline-offset:4px;background:0 0;border:0;align-items:center;min-height:44px;padding:0 12px;text-decoration:underline;display:inline-flex}