.sonic-shell{background:radial-gradient(circle at 70% 16%,#ffffff0d,#0000 28%),#000}.sonic-drop{background:repeating-linear-gradient(90deg,#0000 0 calc(10% - 1px),#ffffff0d 10%);transition:background-color .18s,border-color .18s}.sonic-drop:hover{background-color:#ffffff05;border-color:#ffffffb3}.sonic-waveform span{transform-origin:50%;background:#ffffffb8;width:100%;min-width:1px}.sonic-waveform-progress{z-index:1;pointer-events:none;background:#ffffff14;border-right:1px solid #ffffffb3;max-width:100%;transition:width 80ms linear;position:absolute;inset:0 auto 0 0}.sonic-waveform:after{content:"";background:#ffffff2e;height:1px;position:absolute;inset:50% 0 auto}.sonic-scan{z-index:2;background:#fff;width:1px;transition:left 80ms linear;position:absolute;inset:0 auto 0 0;box-shadow:0 0 18px #fff9}.sonic-stage{position:relative}.sonic-stage:before{content:"";opacity:0;background:#fff;height:2px;position:absolute;inset:0 0 auto}.sonic-stage.is-active:before{opacity:1}.sonic-stage input[type=range],.sonic-shell input[type=range]{appearance:none;background:#ffffff59;height:1px}.sonic-stage input[type=range]::-webkit-slider-thumb{appearance:none;background:#000;border:1px solid #fff;border-radius:50%;width:12px;height:12px}.sonic-shell input[type=range]::-webkit-slider-thumb{appearance:none;background:#000;border:1px solid #fff;border-radius:50%;width:12px;height:12px}.sonic-timeline>div{transition:min-height .25s}.sonic-timeline>.is-current{background:#ffffff12}.sonic-timeline-progress{z-index:2;pointer-events:none;background:#fff;max-width:100%;height:2px;transition:width 80ms linear;position:absolute;inset:-5px auto auto 0;box-shadow:0 0 12px #ffffff80}@media (prefers-reduced-motion:reduce){.sonic-timeline>div{transition:none}}