.vd{max-width:1440px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px);color:#fff;border-top:1px solid rgba(255,255,255,.16);font-weight:300}
.vd-head{display:flex;justify-content:space-between;align-items:end;gap:12px 32px;flex-wrap:wrap;margin-bottom:24px}
.vd-h{font-weight:300;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.03em;line-height:1.05;margin:0;color:#fff}
.vd-cap{color:#8c8c8c;font-size:14px;line-height:1.55;max-width:52ch;margin:0}
.vd-win{border:1px solid rgba(255,255,255,.22);background:#000;user-select:none}
.vd-top{display:flex;align-items:center;gap:24px;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.14)}
.vd-logo{height:22px;width:auto}
.vd-tabs{display:flex;gap:clamp(14px,3vw,40px);margin:0 auto;font-size:13px;color:#8c8c8c}
.vd-tabs .is-on{color:#fff;border-bottom:1px solid #fff;padding-bottom:3px}
.vd-found{font-size:12px;color:#8c8c8c}
.vd-body{display:grid;grid-template-columns:minmax(0,1fr) 240px}
.vd-lanewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-right:1px solid rgba(255,255,255,.14)}
.vd-lane{position:relative;height:clamp(200px,20vw,250px);min-width:600px;margin:0 28px 0 48px}
.vd-grid,.vd-words{position:absolute;inset:0}
.vd-grid i{position:absolute;top:22px;bottom:12px;width:1px;background:rgba(255,255,255,.06)}
.vd-grid i.beat{background:rgba(255,255,255,.18)}
.vd-grid i.bar{background:rgba(255,255,255,.38)}
.vd-grid b{position:absolute;top:4px;font-size:11px;font-weight:300;color:#8c8c8c;transform:translateX(-50%)}
.vd-axis{position:absolute;left:0;right:0;top:58%;height:1px;background:rgba(255,255,255,.25)}
.vd-w{position:absolute;top:30%;height:52%;border:1px solid #fff;transition:left .55s cubic-bezier(.22,1,.36,1);display:flex;align-items:center;justify-content:center;background:#000}
.vd-w svg{position:absolute;inset:0;width:100%;height:100%;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1}
.vd-w span{position:relative;font-size:clamp(12px,1.2vw,15px);background:#000;padding:0 3px}
.vd-w i{position:absolute;bottom:14%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translateX(-50%)}
.vd-w em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;font-style:normal;font-size:11px;color:#bdbdbd;white-space:nowrap;font-variant-numeric:tabular-nums}
.vd-w.hit{background:#fff}.vd-w.hit span{background:#fff;color:#000}.vd-w.hit svg{stroke:rgba(0,0,0,.4)}.vd-w.hit i{background:#000}
.vd-ghost{position:absolute;top:34%;height:44%;border:1px dashed rgba(255,255,255,.35);transition:opacity .3s,left .55s cubic-bezier(.22,1,.36,1);pointer-events:none}
.vd-play{position:absolute;top:22px;bottom:12px;left:0;width:1px;background:#fff;opacity:0;will-change:transform}
.vd-lane.playing .vd-play{opacity:1}
.vd-side{padding:22px 20px;display:flex;flex-direction:column;gap:20px}
.vd-q{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:13px;color:#fff}
.vd-q b{font-weight:300;font-variant-numeric:tabular-nums}
.vd-q input{grid-column:1/3;-webkit-appearance:none;appearance:none;width:100%;height:1px;background:rgba(255,255,255,.4);outline:none;margin:6px 0}
.vd-q input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}
.vd-q input::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff}
.vd-seg{display:flex;border:1px solid rgba(255,255,255,.3)}
.vd-seg button{flex:1;appearance:none;background:transparent;border:0;color:#8c8c8c;font:inherit;font-size:13px;padding:9px 10px;cursor:pointer;transition:background .2s,color .2s}
.vd-seg button+button{border-left:1px solid rgba(255,255,255,.3)}
.vd-seg button.is-on{background:#fff;color:#000}
.vd-msg{font-size:12px;line-height:1.5;color:#8c8c8c;margin:0}
.vd-bottom{display:flex;align-items:center;gap:clamp(12px,3vw,32px);padding:12px 20px;border-top:1px solid rgba(255,255,255,.14)}
.vd-name{font-size:15px;flex:1}
.vd-playbtn{appearance:none;width:40px;height:40px;border-radius:50%;border:1px solid #fff;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.vd-playbtn svg{width:16px;height:16px;fill:#fff}.vd-playbtn .s{display:none}.vd-playbtn[aria-pressed=true] .p{display:none}.vd-playbtn[aria-pressed=true] .s{display:block}
.vd-ab{border-radius:999px;overflow:hidden}.vd-ab button{padding:8px 16px}
.vd-bpm{font-size:15px;font-variant-numeric:tabular-nums;border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(12px,2vw,24px)}.vd-bpm small{font-size:10px;color:#8c8c8c;margin-right:4px}
.vd-export{font-size:13px;color:#8c8c8c;border:1px solid rgba(255,255,255,.2);padding:9px 16px}
.vd-note{font-size:12px;color:#5c5c5c;margin:12px 0 0}
@media (max-width:820px){
 .vd-body{grid-template-columns:1fr}.vd-lanewrap{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}
 .vd-side{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.vd-msg{grid-column:1/3}
 .vd-found,.vd-name,.vd-export{display:none}.vd-tabs{font-size:11px;gap:12px;margin:0 0 0 auto}
 .vd-bottom{justify-content:space-between}
}
@media (max-width:520px){.vd-side{grid-template-columns:1fr}.vd-msg{grid-column:auto}.vd-tabs span:not(.is-on){display:none}.vd-ab button{padding:9px 11px;font-size:13px}.vd-bottom{gap:10px;padding:10px 12px}.vd-bpm{font-size:13px}}
@media (prefers-reduced-motion:reduce){.vd-w,.vd-ghost{transition:none}}