.bucket-demo:where(.astro-54as35wk){--bucket-demo-hint: #e8930c;max-width:36rem;margin:1.5rem 0;overflow:hidden;border:1px solid var(--sl-color-gray-5);border-radius:.5rem;background:var(--sl-color-bg-nav)}canvas:where(.astro-54as35wk){image-rendering:pixelated}.bucket-demo__stage:where(.astro-54as35wk){position:relative}.bucket-demo__explain:where(.astro-54as35wk){position:absolute;top:.5rem;left:50%;max-width:calc(100% - 1rem);transform:translate(-50%);pointer-events:none}.bucket-demo__explain:where(.astro-54as35wk) span:where(.astro-54as35wk){display:block;padding:.3rem .7rem;border-radius:.5rem;background:#141414d9;color:#fff;font-size:var(--sl-text-sm);line-height:1.35;text-align:center;box-shadow:0 2px 6px #00000040;animation:bucket-demo-caption-in .45s ease-out both}.bucket-demo__explain:where(.astro-54as35wk) span:where(.astro-54as35wk)[hidden]{display:none}@keyframes bucket-demo-caption-in{0%{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}.bucket-demo__target:where(.astro-54as35wk){position:absolute;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s}.bucket-demo:where(.astro-54as35wk):is([data-step=fill],[data-step=fill2]) .bucket-demo__target:where(.astro-54as35wk){opacity:1}.bucket-demo:where(.astro-54as35wk)[data-step=fill2] .bucket-demo__target:where(.astro-54as35wk){transition-delay:.5s}.bucket-demo__target:where(.astro-54as35wk):before{content:"";position:absolute;top:-.75rem;left:-.75rem;width:1.5rem;height:1.5rem;border:3px solid var(--bucket-demo-hint);border-radius:50%;box-sizing:border-box;animation:bucket-demo-ping 1.4s ease-out infinite}.bucket-demo__target:where(.astro-54as35wk) .bucket-demo__bubble:where(.astro-54as35wk){bottom:1.1rem;opacity:1}@keyframes bucket-demo-ping{0%{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:.15}}.bucket-demo__touch:where(.astro-54as35wk){display:none}@media(hover:none){.bucket-demo__click:where(.astro-54as35wk){display:none}.bucket-demo__touch:where(.astro-54as35wk){display:inline}}:where(.astro-54as35wk)[data-hint]{position:relative}.bucket-demo__bubble:where(.astro-54as35wk){position:absolute;z-index:1;bottom:calc(100% + .6rem);left:50%;padding:.2rem .6rem;border-radius:.5rem;background:var(--bucket-demo-hint);color:#1b1b1b;font-size:var(--sl-text-xs);font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:0 2px 6px #00000040;pointer-events:none;opacity:0;transform:translate(-50%);transition:opacity .25s;animation:bucket-demo-bob 1.4s ease-in-out infinite}.bucket-demo__bubble:where(.astro-54as35wk):after{content:"";position:absolute;top:100%;left:50%;border:.4rem solid transparent;border-top-color:var(--bucket-demo-hint);transform:translate(-50%)}.bucket-demo__bubble--side:where(.astro-54as35wk){top:50%;bottom:auto;left:calc(100% + .6rem);transform:translateY(-50%);animation-name:bucket-demo-bob-side}.bucket-demo__bubble--side:where(.astro-54as35wk):after{top:50%;left:auto;right:100%;border-top-color:transparent;border-right-color:var(--bucket-demo-hint);transform:translateY(-50%)}:where(.astro-54as35wk)[data-step=control] :where(.astro-54as35wk)[data-hint=control] .bucket-demo__bubble:where(.astro-54as35wk),:where(.astro-54as35wk)[data-step=layer] :where(.astro-54as35wk)[data-hint=layer] .bucket-demo__bubble:where(.astro-54as35wk){opacity:1;transition-delay:.7s}:where(.astro-54as35wk)[data-explained][data-step=control] :where(.astro-54as35wk)[data-hint=control] .bucket-demo__bubble:where(.astro-54as35wk){transition-delay:1.8s}@keyframes bucket-demo-bob{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-3px)}}@keyframes bucket-demo-bob-side{0%,to{transform:translateY(-50%)}50%{transform:translate(3px,-50%)}}@media(prefers-reduced-motion:reduce){.bucket-demo__bubble:where(.astro-54as35wk),.bucket-demo__target:where(.astro-54as35wk):before{animation:none!important}}.bucket-demo__stage:where(.astro-54as35wk)>canvas:where(.astro-54as35wk){display:block;width:100%;height:auto;aspect-ratio:100 / 60;background:repeating-conic-gradient(#d6d6d6 0 25%,#fff 0 50%) 0 0 / 16px 16px;cursor:url(/images/icons/cursor-fill.png) 1 12,crosshair;touch-action:manipulation}.bucket-demo__bar:where(.astro-54as35wk){display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;align-items:center;justify-content:space-between;padding:.6rem .75rem;font-size:var(--sl-text-sm);color:var(--sl-color-text)}.bucket-demo__layers:where(.astro-54as35wk){display:flex;flex-direction:column;gap:.2rem;min-width:11rem}.bucket-demo__layer:where(.astro-54as35wk){display:flex;gap:.5rem;align-items:center;padding:.2rem .5rem;border:1px solid transparent;border-radius:.3rem;color:var(--sl-color-gray-3)}.bucket-demo__layer--active:where(.astro-54as35wk){border-color:var(--sl-color-accent);background:var(--sl-color-bg);color:var(--sl-color-white)}.bucket-demo__thumb:where(.astro-54as35wk){width:3.2rem;height:auto;aspect-ratio:100 / 60;border:1px solid var(--sl-color-gray-5)}.bucket-demo__controls:where(.astro-54as35wk){display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}label:where(.astro-54as35wk){display:inline-flex;gap:.4rem;align-items:center;min-height:2.25rem}select:where(.astro-54as35wk),button:where(.astro-54as35wk){min-height:2.25rem;padding:0 .6rem;border:1px solid var(--sl-color-gray-4);border-radius:.3rem;background:var(--sl-color-bg);color:var(--sl-color-text);font:inherit}button:where(.astro-54as35wk){cursor:pointer}button:where(.astro-54as35wk):hover{border-color:var(--sl-color-accent)}input:where(.astro-54as35wk)[type=checkbox]{width:1.1rem;height:1.1rem;accent-color:var(--sl-color-accent)}.bucket-demo__tolerance:where(.astro-54as35wk) input:where(.astro-54as35wk){width:9rem;accent-color:var(--sl-color-accent)}output:where(.astro-54as35wk){min-width:2.5rem;font-variant-numeric:tabular-nums}