/* Measured from Music / Medium / Default, Figma 3004:111311 and 3004:111296. */
.music-widget{position:relative;width:338px;height:158px;color:#fff;font-family:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-synthesis:none;font-kerning:normal;font-optical-sizing:auto;letter-spacing:0;text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-align:left}
.music-widget *{box-sizing:border-box}
.mw-surface{position:relative;width:338px;height:158px;border-radius:27px;isolation:isolate;background:linear-gradient(180deg,#777e80,#697073)}
.mw-foreground{display:flex;align-items:center;gap:15px;width:338px;height:158px;padding:17px}
.mw-surface::before,.mw-surface::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.mw-surface::before{background:linear-gradient(180deg,#fd6b82,#fa233b);opacity:0;transition:opacity 280ms ease}
.music-widget[data-playing=false] .mw-surface::before{opacity:1}
/* Figma's glass shader has no CSS equivalent. This is its subtle light rim over the opaque fill. */
.mw-surface::after{z-index:1;border-radius:27px;box-shadow:inset .35px .6px .5px #ffffff30,inset -.25px -.3px .4px #0000000a;background:#00000001}
@supports(color:color(display-p3 1 0 0)){
 .mw-surface{background:linear-gradient(180deg,color(display-p3 .46666667 .49411765 .50196081),color(display-p3 .41176471 .43921569 .4509804))}
 .mw-surface::before{background:linear-gradient(180deg,color(display-p3 .99215686 .41960784 .50980392),color(display-p3 .98039216 .1372549 .23137255))}
}
.mw-album{display:block;width:123px;height:123px;flex:none;border-radius:7px;object-fit:cover;-webkit-user-drag:none}
.mw-details{position:relative;display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:24px;min-width:0;height:124px;padding-bottom:5px}
.mw-music-mark{position:absolute;top:0;right:0;width:15px;height:19px;pointer-events:none}
.mw-text{display:flex;flex-direction:column;align-items:flex-start;gap:13px;width:100%;min-width:0}
.music-widget p{margin:0;font-size:16px;line-height:16px}
.mw-line{text-box-trim:trim-both;text-box-edge:cap alphabetic}
.music-widget .mw-status{height:8px;max-width:100%;font-size:11px;font-weight:600;letter-spacing:.1px;text-transform:uppercase;opacity:.5;mix-blend-mode:plus-lighter;white-space:nowrap}
.mw-title-row{display:flex;align-items:flex-start;gap:6px;width:100%;height:11.97168px;min-width:0}
.music-widget .mw-title{font-weight:600;min-width:0;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-explicit{display:block;width:11.97168px;height:11.97168px;flex:none;mix-blend-mode:plus-lighter;pointer-events:none}
.music-widget .mw-artist{width:100%;height:11px;font-weight:400;letter-spacing:-.1px;opacity:.5;mix-blend-mode:plus-lighter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-playback{position:relative;display:flex;align-items:center;flex:none;gap:6px;height:27.5557px;padding:0 12px;width:78.33984px;color:#fff;background:none;border:0;border-radius:100px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;isolation:isolate;transition:width 220ms ease,transform 160ms ease;font:600 14px/16px "SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:-.5px}
.mw-playback::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:.16;mix-blend-mode:luminosity;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);z-index:-1}
/* Preserve the source's 28pt visual capsule while giving touch/keyboard a 44pt target. */
.mw-playback::after{content:"";position:absolute;inset:-8.23px -3px}
.mw-playback:active{transform:scale(.95)}
.mw-playback:focus-visible{outline:2px solid #fff;outline-offset:4px}
.mw-playback img{display:block;flex:none;pointer-events:none}
.mw-pause-icon{width:9px;height:12px;margin-right:-.66016px;margin-bottom:-.8643px}
.mw-play-icon{width:11px;height:12px;margin-right:-.6641px;margin-bottom:-.42677px}
.mw-playback-label{white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.music-widget[data-playing=false] .mw-playback{width:68.3359px;height:27.57323px;padding-right:13px;gap:5px}
.music-widget .mw-label{position:absolute;top:163px;left:0;width:338px;text-align:center;font-size:12px;line-height:16px;font-weight:500;opacity:.9}
.music-widget [hidden]{display:none!important}
@supports not (text-box-trim:trim-both){
 .mw-line,.mw-playback-label{transform:translateY(-3px)}
 .music-widget .mw-title{height:17px}.music-widget .mw-artist{height:17px;margin-bottom:-6px}
 .mw-playback-label{transform:translateY(-.5px)}
}
@media(prefers-reduced-motion:reduce){.mw-surface::before,.mw-playback{transition:none}}
/* Clear / Medium source: 3004:111346. The wallpaper is visible through the actual surface. */
.music-widget[data-appearance=clear] .mw-surface{background:transparent}
.music-widget[data-appearance=clear] .mw-surface::before{background:linear-gradient(180deg,#fff3,#ffffff1a);opacity:1;mix-blend-mode:luminosity;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.music-widget[data-appearance=clear] .mw-status,.music-widget[data-appearance=clear] .mw-artist{opacity:.6;mix-blend-mode:screen}
.music-widget[data-appearance=clear] .mw-title,.music-widget[data-appearance=clear] .mw-music-mark,.music-widget[data-appearance=clear] .mw-explicit,.music-widget[data-appearance=clear] .mw-playback-label{mix-blend-mode:screen}
.music-widget[data-appearance=clear] .mw-playback::before{opacity:.2}