.v-live-demo{border-radius:var(--v-radius-lg);background:var(--v-dark);width:100%;color:var(--v-dark-text);grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:start;column-gap:4rem;padding:4rem;scroll-margin-top:1.5rem;display:grid;position:relative}.v-demo-caption{letter-spacing:-.025em;grid-column:1/-1;margin-bottom:2.5rem;font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.3}.v-demo-story>span,.v-demo-song-label{color:var(--v-dark-muted);align-items:center;gap:.75rem;font-size:12px;line-height:1.5;display:flex}.v-demo-story i,.v-demo-song-label>span{font-variant-numeric:tabular-nums;font-style:normal}.v-demo-story p{max-width:30ch;color:var(--v-dark-text);letter-spacing:-.025em;text-wrap:pretty;margin:1.5rem 0 2rem;font-size:clamp(22px,2vw,28.5px);font-weight:500;line-height:1.4}.v-demo-story>div{color:var(--v-dark-muted);align-items:center;gap:.5rem;font-size:13px;line-height:1.5;display:flex}.v-demo-melody{justify-self:end;width:96%;max-width:34rem}.v-demo-song-label{margin-bottom:1.5rem}.v-demo-note{color:var(--v-dark-muted);text-align:center;grid-column:1/-1;margin-top:2rem;font-size:12px;line-height:1.6}.v-live-demo .song-player{box-shadow:none;background:#ffffff12;border:0;border-radius:1.5rem;padding:1.25rem}.v-live-demo .sp-topline{color:#8d8d95;letter-spacing:0;margin-bottom:1rem;font-size:11px;line-height:1.5}.v-live-demo :is(.sp-equalizer,.sp-topline>svg,.sp-lyrics-status>svg,.sp-lyrics-end){display:none}.v-live-demo .sp-record{flex-wrap:nowrap;gap:1rem}.v-live-demo .sp-cover{border-radius:var(--v-radius-sm);background:linear-gradient(145deg,#aaa4b8,#b69ea6 48%,#879bb0);width:4rem;padding:0}.v-live-demo .sp-cover>:is(span,svg){display:none}.v-live-demo .sp-song-info{flex:1;min-width:0}.v-live-demo .sp-song-info h3{letter-spacing:-.025em;text-wrap:pretty;margin:0 0 .5rem;font-size:22px;font-weight:600;line-height:1.3}.v-live-demo .sp-song-info p{color:#b8b8bd;font-size:14px;line-height:1.5}.v-live-demo .sp-lyrics-status{color:#8d8d95;margin-top:1.5rem;padding:0 0 .5rem;font-size:11px}.v-live-demo .sp-lyrics{height:16rem;padding:3rem .25rem 5rem;-webkit-mask-image:linear-gradient(#0000,#000 8% 92%,#0000);mask-image:linear-gradient(#0000,#000 8% 92%,#0000)}.v-live-demo .sp-line{color:var(--v-dark-text);opacity:.24;letter-spacing:-.025em;padding-block:.5rem;font-size:clamp(22px,1.95vw,28px);font-weight:500;line-height:1.4;transition:opacity .2s,color .2s;transform:none}.v-live-demo .sp-line:has(+.is-active){opacity:.38}:is(.v-live-demo .sp-line.is-active+.sp-line,.v-live-demo .sp-lyrics:not(:has(.is-active)) .sp-line:nth-child(2)){opacity:.56}.v-live-demo .sp-line.is-active{opacity:1;font-weight:600}.v-live-demo .sp-lyrics:not(:has(.is-active)) .sp-line:first-child{opacity:1;font-weight:600}.v-live-demo .sp-lyrics:focus-within{-webkit-mask-image:none;mask-image:none}.v-live-demo .sp-lyrics:focus-within .sp-line{opacity:.72}.v-live-demo .sp-line:focus-visible,.v-live-demo .sp-lyrics:focus-within .sp-line.is-active,.v-live-demo .sp-line:not([aria-disabled=true]):hover{opacity:1}.v-live-demo .sp-follow{background:#29292c;border:0;min-height:2.75rem;padding:.5rem .75rem}.v-live-demo .sp-controls{margin-top:1rem}.v-live-demo .sp-seek{background:linear-gradient(#f5f5f7, #f5f5f7) left center / var(--sp-progress) 2px no-repeat, linear-gradient(#ffffff26, #ffffff26) left center / 100% 2px no-repeat}.v-live-demo input[type=range]::-webkit-slider-thumb{background:var(--v-dark-text);width:8px;height:8px}.v-live-demo input[type=range]::-moz-range-thumb{background:var(--v-dark-text);width:8px;height:8px}.v-live-demo .sp-times{color:#8d8d95;font-size:11px;line-height:1.5}.v-live-demo .sp-control-row,.v-live-demo .sp-transport{gap:.5rem}.v-live-demo .sp-control-row button{color:var(--v-dark-muted);flex-shrink:0;transition:background-color .2s,color .2s}.v-live-demo .sp-transport>button>svg{width:18px;height:18px}.v-live-demo .sp-control-row .sp-play{background:var(--v-dark-text);width:3.25rem;height:3.25rem;color:var(--v-dark)}.v-live-demo .sp-control-row .sp-play:hover{background:#dedee3}.v-live-demo .sp-control-row .sp-play:active{background:#ccccd3}.v-live-demo .sp-play>svg{width:22px;height:22px}.v-live-demo .sp-volume{gap:0}.v-live-demo .sp-volume input{background:linear-gradient(#ffffff40,#ffffff40) 50%/100% 2px no-repeat;width:2rem}.v-live-demo .sp-notice{margin-top:.75rem;font-size:12px}.v-live-demo .song-player :is(button,a,input):focus-visible,.v-live-demo .sp-lyrics:focus-visible{outline:2px solid var(--v-dark-text);outline-offset:3px}@media (width<=1100px){.v-live-demo{column-gap:2rem;padding:2.5rem}}@media (width<=800px){.v-live-demo{border-radius:0;grid-template-columns:minmax(0,1fr);width:calc(100% + 3rem);margin-inline:-1.5rem;padding:3rem 1.5rem}.v-demo-caption{margin-bottom:2rem}.v-demo-story{margin-bottom:2.5rem}.v-demo-story p{max-width:36ch;font-size:25px}.v-demo-melody{width:100%;max-width:none}}@media (width<=520px){.v-live-demo{width:calc(100% + 2.5rem);margin-inline:-1.25rem;padding-inline:1.25rem}.v-demo-story p{font-size:23px}.v-live-demo .sp-cover{width:3.5rem}.v-live-demo .sp-song-info h3{font-size:20px}.v-live-demo .sp-lyrics{height:15rem}.v-live-demo .sp-transport{gap:.25rem}.v-demo-note{font-size:11px}}@media (width<=360px){.v-live-demo .song-player{padding:1rem}}@media (prefers-reduced-motion:reduce){.v-live-demo :is(.sp-line,.sp-control-row button){transition:none}}@media (forced-colors:active){.v-live-demo .sp-line{opacity:1}.v-live-demo .sp-lyrics{-webkit-mask-image:none;mask-image:none}}
