.dr{background:#030506;border-radius:1rem;width:100%;height:100%;min-height:0;position:relative;overflow:hidden}.dr-poster{object-fit:cover;object-position:100% 50%;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.dr-host{position:absolute;top:0;bottom:0;left:0;right:0}.dr-canvas{opacity:0;width:100%;height:100%;transition:opacity .3s;display:block}.dr[data-ready=true] .dr-canvas{opacity:1}.dr[data-phase=done] .dr-canvas{transition-duration:.15s}.dr-still{background:linear-gradient(transparent,rgba(3,5,6,.82) 45%);justify-content:center;gap:.375rem;min-height:3.25rem;padding:.5rem;display:flex;position:absolute;top:auto;bottom:0;left:0;right:0}.dr-ball{aspect-ratio:1;background:radial-gradient(circle at 36% 30%,#fff 0 8%,var(--dr-ball)46%);color:#06080b;font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;width:max(2.25rem,min(14cqmin,3.25rem));font-weight:800;animation:.3s both dr-show;display:grid;position:relative}.dr-ball[data-band="0"]{--dr-ball:#a596e8}.dr-ball[data-band="1"]{--dr-ball:#73dcc9}.dr-ball[data-band="2"]{--dr-ball:#99de99}.dr-ball[data-match]:after{content:"";border:2px solid #7fffb6;border-radius:50%;position:absolute;top:-.2rem;bottom:-.2rem;left:-.2rem;right:-.2rem}@keyframes dr-show{0%{opacity:0}}