:root{--music-bar-height:48px;--music-safe-bottom:env(safe-area-inset-bottom,0px);--music-metal:linear-gradient(180deg,var(--color-surface-subtle),var(--color-muted-hover) 46%,var(--color-border-strong));--music-button:linear-gradient(155deg,var(--color-surface) 6%,var(--color-muted) 40%,var(--color-control-fill));--music-rim:var(--color-border-hover);--music-text:var(--color-body);--music-glint:var(--color-surface);--music-panel:linear-gradient(180deg,var(--color-slate-950),var(--color-slate-800) 45%,var(--color-slate-900));--music-panel-text:var(--color-slate-50);--music-panel-muted:var(--color-slate-300);--music-panel-divider:var(--color-slate-600);--music-shadow:color-mix(in srgb,var(--color-overlay) 60%,transparent)}:root[data-theme=dark]{--music-metal:linear-gradient(180deg,var(--color-surface-subtle),var(--color-surface) 46%,var(--color-background));--music-button:linear-gradient(155deg,var(--color-border-strong) 6%,var(--color-surface-subtle) 46%,var(--color-surface));--music-glint:var(--color-control-border);--music-panel:linear-gradient(180deg,var(--color-background),var(--color-surface) 45%,var(--color-background));--music-panel-text:var(--color-foreground);--music-panel-muted:var(--color-secondary);--music-panel-divider:var(--color-border-strong)}.music-player-space{height:calc(var(--music-bar-height) + var(--music-safe-bottom));flex-shrink:0}.music-player{z-index:42;height:calc(var(--music-bar-height) + var(--music-safe-bottom));padding-bottom:var(--music-safe-bottom);color:var(--music-text);background:var(--music-metal);position:fixed;inset:auto 0 0}.music-player-inner{height:var(--music-bar-height);align-items:center;gap:16px;max-width:1440px;margin:auto;padding:5px 24px 7px;display:flex}.music-mark{color:var(--music-text);flex:0 0 36px;justify-content:center;display:flex}.music-transport{align-items:center;gap:7px;padding:0 14px;display:flex;position:relative}.music-transport:before,.music-transport:after{content:"";background:radial-gradient(var(--music-rim) .7px,transparent .9px) 0 0 / 4px 3px;width:20px;height:5px;position:absolute;top:3px}.music-transport:before{left:-10px}.music-transport:after{right:-10px}.music-button{border:1px solid var(--music-rim);width:28px;height:28px;color:var(--music-text);background:var(--music-button);box-shadow:inset 0 1px 1px var(--music-glint),var(--shadow-sm);border-radius:50%}.music-button:hover{filter:brightness(1.08)}.music-button:active{box-shadow:inset 0 1px 3px var(--music-shadow)}.music-button[data-primary]{border-color:var(--color-primary);width:36px;height:36px;color:var(--color-primary-link);box-shadow:inset 0 1px 2px var(--music-glint),0 0 0 2px var(--color-accent-border),var(--shadow-sm)}.music-button[data-active]:not([data-primary]){color:var(--color-primary-link)}.music-display{min-width:0;height:30px;color:var(--music-panel-text);background:var(--music-panel);border:2px solid var(--music-rim);box-shadow:0 0 0 2px var(--music-glint),inset 0 2px 4px var(--color-overlay),var(--shadow-sm);border-radius:999px;flex:1;align-items:center;gap:13px;padding:0 14px;display:flex}.music-provider{color:var(--music-panel-muted);border-right:1px solid var(--music-panel-divider);flex-shrink:0;padding-right:12px;font-size:10px;line-height:1}.music-track-title{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;overflow:hidden}.music-display-progress{flex:1;min-width:40px;max-width:130px;margin-left:auto}.music-progress{width:100%;height:4px;position:relative}.music-progress>[data-slot=slider]{position:absolute;top:-8px}.music-time{font-variant-numeric:tabular-nums;color:var(--music-panel-text);flex-shrink:0;font-size:10px}.music-time>span{color:var(--music-panel-muted)}.music-volume{flex-shrink:0;align-items:center;gap:8px;width:118px;display:flex}.music-volume [data-slot=slider]{width:76px}.music-view-controls{align-items:center;gap:8px;display:flex}.music-mobile-progress{display:none}.music-floating{z-index:44;width:min(356px,100% - 24px);height:200px;right:12px;bottom:calc(var(--music-bar-height) + var(--music-safe-bottom) + 16px);background:var(--color-background);box-shadow:var(--shadow-overlay);border-radius:8px;position:fixed}.music-floating[data-visible=false]{visibility:hidden;opacity:0;pointer-events:none}.music-media{border-radius:inherit;width:100%;height:100%;overflow:hidden}.music-media iframe{pointer-events:none;border:0;width:100%;height:100%;display:block}.music-media-shield{z-index:1;border-radius:inherit;background:0 0;position:absolute;inset:0}.music-float-controls{z-index:2;gap:4px;display:flex;position:absolute;top:-36px;right:0}.music-float-controls button{background:var(--color-surface);color:var(--color-body);box-shadow:var(--shadow-overlay);border-radius:50%}.music-float-controls button:hover{background:var(--color-muted-hover)}.music-drag{z-index:2;cursor:grab;touch-action:none;border-radius:5px;height:28px;position:absolute;top:-32px;left:0;right:76px}.music-drag:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.music-drag:active{cursor:grabbing}.music-media-state{z-index:3;border-radius:inherit;background:color-mix(in srgb,var(--color-surface) 96%,transparent);color:var(--color-body);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;font-size:12px;display:flex;position:absolute;inset:0}@media (width<=1100px){.music-player-inner{gap:12px;padding-inline:16px}.music-provider{display:none}.music-transport{padding:0 5px}}@media (width<=767px){:root{--music-bar-height:62px}.music-player-inner{grid-template-rows:36px 4px;grid-template-columns:auto minmax(0,1fr) auto;align-content:center;gap:5px 9px;padding:6px 12px 8px;display:grid}.music-view-controls{gap:4px}.music-mark,.music-volume,.music-display-progress{display:none}.music-transport{gap:4px;padding:0}.music-transport:before,.music-transport:after{display:none}.music-button{width:28px;height:28px}.music-button[data-primary]{width:36px;height:36px}.music-display{gap:5px;height:30px;padding:0 10px}.music-track-title{font-size:11px}.music-time{display:none}.music-mobile-progress{grid-column:1/-1;display:block}}@media (width>=420px) and (width<=767px){.music-time{margin-left:auto;font-size:9px;display:block}.music-time>span{display:none}}@media (prefers-reduced-motion:reduce){.music-player *{transition:none}}
