.km-songs{--sp-tick-off:color-mix(in srgb, var(--km-ink) 16%, transparent);--sp-track:color-mix(in srgb, var(--km-ink) 9%, transparent);--sp-dial-size:84px}@media (min-width:640px){.km-songs{--sp-dial-size:100px}}@media (min-width:1280px){.km-songs{--sp-dial-size:112px}}.sp-dial{width:var(--sp-dial-size);height:var(--sp-dial-size);display:block;position:relative}.sp-dial-cap{border-radius:var(--km-radius-control);background:var(--km-ground);display:block;position:absolute;inset:21%}.sp-dial svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.sp-dial-track{fill:none;stroke:var(--sp-track);stroke-width:5px;stroke-linecap:round}.sp-dial-arc{fill:none;stroke:var(--dial);stroke-width:5px;stroke-linecap:round}.sp-dial-tick{stroke:var(--sp-tick-off);stroke-width:1.6px;stroke-linecap:round}.sp-dial-tick-on{stroke:var(--dial)}.sp-dial-hand{transform-box:view-box;transform-origin:50%;transform:rotate(var(--a,0deg))}.sp-dial-dot{fill:var(--km-ink)}.sp-dial-pointer{stroke:var(--km-ink);stroke-width:3.2px;stroke-linecap:round}.sp-dial-value{font-size:var(--km-step-body);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--km-ink);place-items:center;font-weight:500;display:grid;position:absolute;inset:0}.sp-dial-num,.sp-dial-value:after{grid-area:1/1}@media (min-width:640px){.sp-dial-value{font-size:var(--km-step-lead)}}.sp-readout{border-radius:var(--km-radius);background:color-mix(in srgb, var(--dial) 22%, var(--km-surface-2));max-width:100%;font-size:var(--km-step-small);color:var(--km-ink);overflow-wrap:anywhere;padding:3px 10px;font-weight:500;line-height:1.35;display:inline-block}.sp-toggle{width:64px;height:var(--sp-dial-size);justify-content:center;align-items:center;display:flex;position:relative}.sp-toggle-track{border-radius:var(--km-radius-control);background:var(--km-ground);width:60px;height:30px;transition:background-color .3s;display:block;position:relative}.sp-toggle-on .sp-toggle-track{background:color-mix(in srgb, var(--dial) 55%, var(--km-ground))}.sp-toggle-thumb{border-radius:var(--km-radius-control);background:var(--km-muted);width:22px;height:22px;display:block;position:absolute;top:4px;left:4px}.sp-toggle-on .sp-toggle-thumb{background:var(--km-ink);transform:translate(30px)}.sp-level{width:var(--sp-dial-size);height:var(--sp-dial-size);border-radius:var(--km-radius-control);background:var(--km-ground);color:var(--dial);justify-content:center;align-items:center;display:flex}.sp-level-text{max-width:8rem;font-size:var(--km-step-small);color:var(--km-ink);font-weight:500;line-height:1.3}@property --km-n{syntax:"<integer>";inherits:true;initial-value:0}@property --km-w{syntax:"<integer>";inherits:true;initial-value:0}@property --km-d{syntax:"<integer>";inherits:true;initial-value:0}@keyframes km-turn{0%{transform:rotate(var(--a0,-135deg))}}@keyframes km-arc{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes km-tick{0%{stroke:var(--sp-tick-off)}}@keyframes km-slide{0%{transform:none}}@keyframes km-fade{0%{opacity:0}}@keyframes km-lamp{0%{opacity:.25}}@keyframes km-count{0%{--km-n:0}}