.csy-music {
  --music-ink:#29302d;
  --music-muted:#6f7068;
  --music-accent:#785b52;
  --music-line:rgba(41,48,45,.14);
  width:100%;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 82px;
  align-items:center;
  gap:10px;
  color:var(--music-ink);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
}

.csy-music--nested {
  margin-top:4px;
  padding-top:14px;
  border-top:1px solid var(--music-line);
}

.csy-music--floating {
  position:fixed;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  z-index:90;
  width:min(326px,calc(100vw - 24px));
  padding:10px;
  border:1px solid var(--music-line);
  border-radius:18px;
  background:rgba(247,241,229,.94);
  box-shadow:0 10px 30px rgba(31,34,31,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.csy-music__toggle {
  position:relative;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fffaf0;
  background:rgba(120,91,82,.86);
  cursor:pointer;
  transition:transform .18s ease,background .18s ease;
}

.csy-music__toggle:hover { transform:translateY(-1px); }
.csy-music__toggle:active { transform:scale(.97); }

.csy-music__toggle::before,
.csy-music__toggle::after {
  position:absolute;
  top:12px;
  bottom:12px;
  width:2px;
  content:"";
  border-radius:3px;
  background:currentColor;
}

.csy-music__toggle::before { left:17px; }
.csy-music__toggle::after { right:17px; }

.csy-music:not([data-state="playing"]) .csy-music__toggle::before {
  top:11px;
  bottom:auto;
  left:17px;
  width:0;
  height:0;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  border-left:15px solid currentColor;
  border-radius:0;
  background:transparent;
}

.csy-music:not([data-state="playing"]) .csy-music__toggle::after { opacity:0; }

.csy-music__toggle:focus-visible,
.csy-music__volume:focus-visible {
  outline:3px solid rgba(183,138,72,.58);
  outline-offset:3px;
}

.csy-music__copy {
  min-width:0;
  display:grid;
  gap:1px;
}

.csy-music__module,
.csy-music__theme,
.csy-music__source {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.csy-music__module {
  color:var(--music-muted);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.35;
  text-transform:uppercase;
}

.csy-music__theme {
  font-family:"Songti SC","STSong",serif;
  font-size:14px;
  font-weight:600;
  line-height:1.45;
}

.csy-music__source {
  color:var(--music-muted);
  font-size:10px;
  line-height:1.35;
}

.csy-music__level {
  display:grid;
  gap:4px;
}

.csy-music__level span {
  color:var(--music-muted);
  font-size:9px;
}

.csy-music__volume {
  width:100%;
  min-height:32px;
  margin:0;
  accent-color:var(--music-accent);
  cursor:pointer;
}

@media (max-width:420px) {
  .csy-music {
    grid-template-columns:44px minmax(0,1fr);
  }

  .csy-music__level {
    grid-column:1 / -1;
    grid-template-columns:36px 1fr;
    align-items:center;
  }
}

@media (prefers-reduced-motion:reduce) {
  .csy-music *,
  .csy-music *::before,
  .csy-music *::after {
    transition:none !important;
    animation:none !important;
  }
}

@media print {
  .csy-music { display:none !important; }
}