body.p-marble main{place-items:center;display:grid;position:fixed;inset:0}body.p-marble .game{z-index:1;opacity:0;background:#000;border:0;width:100%;height:100%;transition:opacity .4s;display:block;position:fixed;inset:0}body.p-marble main[data-state=running] .game{opacity:1}body.p-marble .ring{z-index:2;aspect-ratio:1;place-items:center;width:min(48vmin,220px);display:grid;position:relative}body.p-marble .ring svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible;transform:rotate(-90deg)}body.p-marble .ring .track{fill:none;stroke:var(--line);stroke-width:4px}body.p-marble .ring .arc{fill:none;stroke:var(--yolk);stroke-width:4px;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:calc(289.03 * (1 - var(--done,0)));transition:stroke-dashoffset .25s linear}body.p-marble main[data-state=asking] .ring .arc,body.p-marble main[data-state=starting] .ring .arc{stroke-dasharray:58 231.03;stroke-dashoffset:0;animation:1.1s linear infinite marble-seek}@keyframes marble-seek{to{stroke-dashoffset:-289.03px}}body.p-marble .ring img{width:46%;height:auto;display:block}body.p-marble main[data-state=running] .ring,body.p-marble main[data-state=cannot] .ring,body.p-marble main[data-state=offline] .ring{display:none}body.p-marble .cant{z-index:2;aspect-ratio:1;width:min(48vmin,220px);color:var(--ink);background:0 0;border:0;place-items:center;padding:0;animation:.3s cubic-bezier(.3,1,.4,1) both rise;display:none}body.p-marble .cant svg{width:70%;height:70%;display:block}body.p-marble main[data-state=cannot] .nogpu{display:grid}body.p-marble main[data-state=offline] .retry{cursor:pointer;touch-action:manipulation;display:grid}@media (prefers-reduced-motion:reduce){body.p-marble .ring .arc{transition:none;animation:none}body.p-marble .cant{animation:none}body.p-marble .game{transition:none}}