.color-ball-sort-demo_demo__CsVbr{margin-block:3rem;border:1px solid var(--line);border-radius:1.25rem;padding:clamp(1rem,3vw,2rem);background:var(--surface)}.color-ball-sort-demo_heading__hVX_B{display:flex;align-items:start;justify-content:space-between;gap:1rem}.color-ball-sort-demo_heading__hVX_B h2{max-width:26ch;font-size:clamp(1.65rem,3vw,2.5rem);margin-bottom:1rem}.color-ball-sort-demo_badge__9HDfq{flex-shrink:0;border:1px solid var(--line);border-radius:999px;padding:.4rem .65rem;color:var(--blue);font-size:.75rem;font-weight:700}.color-ball-sort-demo_footnote__Lt1YD,.color-ball-sort-demo_intro__2XOYO,.color-ball-sort-demo_rules__7ttnG{color:var(--muted)}.color-ball-sort-demo_intro__2XOYO{max-width:65ch}.color-ball-sort-demo_rules__7ttnG{max-width:85ch;font-size:.95rem}.color-ball-sort-demo_footnote__Lt1YD{margin:1rem 0 0;font-size:.8rem}.color-ball-sort-demo_playArea__aBHra{--ball-size:clamp(1.875rem,3.1vw,2.375rem);--ball-gap:.25rem;--tube-top:.875rem;--tube-bottom:.5rem;border:1px solid var(--line);border-radius:1rem;padding:clamp(.75rem,2.5vw,1.5rem);background:var(--surface-soft)}.color-ball-sort-demo_scoreboard__fVIqQ{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}.color-ball-sort-demo_scoreboard__fVIqQ p{min-width:0;margin:0}.color-ball-sort-demo_scoreboard__fVIqQ span{display:block;color:var(--muted);font-size:.75rem}.color-ball-sort-demo_scoreboard__fVIqQ strong{display:block;font-family:var(--font-space-grotesk),sans-serif}.color-ball-sort-demo_moves__7amxq{flex-shrink:0;text-align:right}.color-ball-sort-demo_moves__7amxq strong{font-variant-numeric:tabular-nums}.color-ball-sort-demo_board___oKH6{display:grid;grid-template-columns:repeat(4,minmax(0,5.25rem));justify-content:center;align-items:start;gap:.75rem clamp(.5rem,2vw,1.25rem);margin:1.25rem auto .5rem;max-width:44rem}.color-ball-sort-demo_board___oKH6[data-tube-count="5"]{grid-template-columns:repeat(5,minmax(0,5.25rem))}.color-ball-sort-demo_board___oKH6[data-tube-count="6"]{grid-template-columns:repeat(6,minmax(0,5.25rem))}.color-ball-sort-demo_tubeControl__uZUvY{min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;padding:.65rem .375rem .25rem;border:1px solid transparent;border-radius:.85rem;color:var(--text);background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease,border-color .16s ease}.color-ball-sort-demo_tube__uzfAx{position:relative;flex-shrink:0;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--ball-gap);width:calc(var(--ball-size) + .875rem + 4px);height:calc(var(--ball-size) * 4 + var(--ball-gap) * 3 + var(--tube-top) + var(--tube-bottom) + 4px);border:2px solid var(--muted);border-top:2px solid transparent;border-radius:0 0 999px 999px;padding:var(--tube-top) .4375rem var(--tube-bottom);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 75%,transparent) 40%,transparent);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--surface) 60%,transparent);transition:border-color .18s ease,box-shadow .18s ease}.color-ball-sort-demo_tube__uzfAx:before{content:"";position:absolute;top:-.25rem;left:50%;transform:translateX(-50%);width:calc(100% + .4rem);height:.4rem;border:2px solid var(--muted);border-radius:999px;background:var(--surface)}.color-ball-sort-demo_slot__uTMVR{flex:0 0 var(--ball-size);display:grid;width:100%;height:var(--ball-size);place-items:center}.color-ball-sort-demo_ball__mUSxI{display:grid;place-items:center;width:var(--ball-size);height:var(--ball-size);border:1px solid #15213a66;border-radius:50%;color:#112038;font-weight:800;box-shadow:inset -4px -5px 7px #14203926,inset 3px 3px 5px #ffffff88;animation:color-ball-sort-demo_ball-settle__tyrdK .16s ease-out}.color-ball-sort-demo_ball__mUSxI span{font-size:.75rem}.color-ball-sort-demo_coral__hMUBj{background:#fb9292}.color-ball-sort-demo_sky__zEQng{background:#81c7f1}.color-ball-sort-demo_mint__ppOra{background:#7cddbb}.color-ball-sort-demo_gold__jgAwv{background:#f0cc65}.color-ball-sort-demo_selected__X_nxt{border-color:color-mix(in srgb,var(--blue) 40%,var(--line));background:color-mix(in srgb,var(--blue) 7%,transparent)}.color-ball-sort-demo_selected__X_nxt .color-ball-sort-demo_tube__uzfAx{border-color:var(--blue);border-top-color:transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent),inset 3px 0 0 color-mix(in srgb,var(--surface) 60%,transparent)}.color-ball-sort-demo_selected__X_nxt .color-ball-sort-demo_tube__uzfAx:before{border-color:var(--blue)}.color-ball-sort-demo_tubeLabel__EF1gT{display:block;min-height:2.6em;margin-top:.6rem;font-size:.72rem;line-height:1.3;font-weight:700}.color-ball-sort-demo_tubeControl__uZUvY:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.color-ball-sort-demo_tubeControl__uZUvY[aria-disabled=true]{cursor:default}.color-ball-sort-demo_status__8o6jq{min-height:3.2em;margin:.75rem 0;color:var(--text);font-size:.9rem}.color-ball-sort-demo_complete__Mh9K4{color:var(--blue);font-weight:700}.color-ball-sort-demo_controls__zOL8G{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem}.color-ball-sort-demo_controls__zOL8G button{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:.65rem;padding:.6rem 1rem;background:var(--surface);color:var(--text);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer}.color-ball-sort-demo_controls__zOL8G button:disabled{opacity:.55;cursor:default}.color-ball-sort-demo_controls__zOL8G .color-ball-sort-demo_next__bkwm9{border-color:var(--blue);color:var(--blue)}.color-ball-sort-demo_finished__XTG_a{color:var(--blue);font-size:.85rem;font-weight:700}.color-ball-sort-demo_fallback__UYh9i{border-left:3px solid var(--blue);padding:.75rem;background:var(--surface-soft)}@keyframes color-ball-sort-demo_ball-settle__tyrdK{0%{transform:translateY(-4px);opacity:.75}to{transform:none;opacity:1}}@media (hover:hover){.color-ball-sort-demo_tubeControl__uZUvY:not([aria-disabled=true]):hover .color-ball-sort-demo_tube__uzfAx{border-color:var(--blue);border-top-color:transparent}.color-ball-sort-demo_controls__zOL8G button:enabled:hover{border-color:var(--blue)}}@media (max-width:600px){.color-ball-sort-demo_heading__hVX_B{flex-direction:column;gap:0}.color-ball-sort-demo_badge__9HDfq{margin-bottom:1rem}.color-ball-sort-demo_playArea__aBHra{--ball-size:clamp(1.875rem,7.5vw,2.125rem)}.color-ball-sort-demo_board___oKH6,.color-ball-sort-demo_board___oKH6[data-tube-count="5"],.color-ball-sort-demo_board___oKH6[data-tube-count="6"]{grid-template-columns:repeat(3,minmax(0,5rem));max-width:20rem}.color-ball-sort-demo_board___oKH6[data-tube-count="4"]{grid-template-columns:repeat(2,minmax(0,5rem))}}@media (prefers-reduced-motion:reduce){.color-ball-sort-demo_ball__mUSxI{animation:none}.color-ball-sort-demo_tubeControl__uZUvY,.color-ball-sort-demo_tube__uzfAx{transition:none}}