.marble-board{--marble-track-border-width:2px;--marble-track-size:10%;--marble-size:9%;aspect-ratio:1/1;border-radius:50%;box-shadow:0 0 0 var(--marble-track-border-width) rgb(var(--color-foreground));margin:20px auto;max-width:600px;position:relative}.marble-lane{--offset:calc(var(--marble-track-size)*var(--marble-track-index));aspect-ratio:1/1;border:calc(var(--marble-track-border-width)/2) solid rgb(var(--color-foreground));border-radius:50%;box-shadow:0 0 0 calc(var(--marble-track-border-width)/2);left:var(--offset,0);position:absolute;top:var(--offset,0);transform-origin:center center;width:calc(100% - var(--marble-track-size)*var(--marble-track-index, 1)*2)}.marble-lane:first-child{--marble-track-index:1}.marble-lane:nth-child(2){--marble-track-index:2}.marble-lane:nth-child(3){--marble-track-index:3}.marbles{align-items:center;display:grid;grid-template-columns:repeat(10,10%);grid-template-rows:repeat(10,10%);height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.marble{animation:marbleOrbit 40s linear infinite;aspect-ratio:1/1;border-radius:50%;margin:auto;max-height:90%;max-width:90%;transition:rotate 2s;width:100%;will-change:rotate}.marble:first-child{grid-row:5/7;transform-origin:550% 50%}.marble:nth-child(2){animation-timing-function:cubic-bezier(.71,.32,.37,.82);grid-column:5/7;grid-row:2;height:90%;transform-origin:50% 440%;width:auto}.marble:nth-child(3){animation-timing-function:cubic-bezier(.68,-.55,.27,1.55);grid-column:4;grid-row:3/5;rotate:180deg;transform-origin:218% 270%}.marble:nth-child(4){grid-column:7/9;grid-row:7;height:90%;transform-origin:-170% -118%;width:auto}.marble:nth-child(5){animation-timing-function:cubic-bezier(.03,.77,.81,.65);grid-column:5/7;grid-row:9;height:90%;transform-origin:50% -340%;width:auto;will-change:transform}.marble:nth-child(6){grid-column:10;grid-row:5/7;transform-origin:-450% 50%}@keyframes marbleOrbit{0%{rotate:0deg}to{rotate:1turn}}