.netease-player {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 38;
  display: grid;
  grid-template-rows: 36px minmax(94px, 1fr);
  width: min(372px, calc(100vw - 24px));
  height: 146px;
  min-width: 300px;
  min-height: 142px;
  max-width: min(720px, calc(100vw - 16px));
  max-height: min(520px, calc(100vh - 16px));
  overflow: hidden;
  resize: both;
  border: 1px solid #cc6800;
  border-radius: 10px;
  background: #fffaf5;
  box-shadow: 0 18px 55px rgba(99, 48, 6, 0.26);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.97);
  transform-origin: right bottom;
  transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), height 0.32s cubic-bezier(0.22, 1, 0.36, 1), left 0.32s cubic-bezier(0.22, 1, 0.36, 1), top 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.32s ease, background-color 0.32s ease;
}
.netease-player.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.netease-player.is-dragging { user-select: none; transition: none; }
.netease-player-tab { position: absolute; z-index: 3; inset: 0; display: grid; width: 100%; height: 100%; place-items: center; border: 0; border-radius: inherit; background: #ef7b00; color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(0.72); transition: opacity 0.2s ease 0s, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
.netease-player-tab span { position: relative; font: 28px/1 Georgia, serif; transform: translateY(-1px); }
.netease-player-tab span::before, .netease-player-tab span::after { position: absolute; color: rgba(255, 255, 255, 0.9); font: 11px/1 Georgia, serif; opacity: 0; pointer-events: none; content: "♪"; }
.netease-player-tab span::before { top: -7px; right: -11px; animation: netease-note-spark-a 1.45s ease-out infinite; }
.netease-player-tab span::after { bottom: -4px; left: -11px; font-size: 9px; animation: netease-note-spark-b 1.45s ease-out 0.48s infinite; }
.netease-player.is-docked { min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px; resize: none; border-color: #ef7b00; border-radius: 9px; background: #ef7b00; box-shadow: 0 10px 30px rgba(130, 62, 7, 0.28); transform: none; }
.netease-player.is-docked .netease-player-head, .netease-player.is-docked .netease-player-fallback { opacity: 0; pointer-events: none; transform: scale(0.9); transition: opacity 0.14s ease, transform 0.18s ease; }
.netease-player.is-docked .netease-player-tab { opacity: 1; pointer-events: auto; transform: scale(1); transition-delay: 0.08s; }
.netease-player.is-docked.is-playing .netease-player-tab span { animation: netease-note-pulse 1.15s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.netease-player.is-docked.is-playing .netease-player-tab span::before, .netease-player.is-docked.is-playing .netease-player-tab span::after { opacity: 1; }
.netease-player-tab:hover, .netease-player-tab:focus-visible { background: #ff9225; }
.netease-player-head { display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 7px; background: #ef7b00; color: #fff; cursor: grab; touch-action: none; transition: opacity 0.18s ease 0.08s, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) 0.08s; }
.netease-player.is-dragging .netease-player-head { cursor: grabbing; }
.netease-player-brand { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 4px; cursor: pointer; }
.netease-player-brand img { width: 16px; height: 16px; object-fit: contain; }
.netease-player-head-actions { display: flex; gap: 5px; }
.netease-player-close, .netease-player-source { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #fff; font: 18px/1 sans-serif; text-decoration: none; cursor: pointer; }
.netease-player-source { font-size: 15px; }
.netease-player-brand:hover, .netease-player-brand:focus-visible, .netease-player-close:hover, .netease-player-close:focus-visible, .netease-player-source:hover, .netease-player-source:focus-visible { background: rgba(115, 53, 0, 0.2); }
.netease-player-fallback { display: block; width: 100%; height: 100%; border: 0; background: #fff3e6; transition: opacity 0.18s ease 0.08s, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1) 0.08s; }
.netease-player-mobile-notice { display: none; align-items: center; justify-content: center; margin: 0; padding: 18px; background: #fff3e6; color: #9c550d; font-size: 14px; text-align: center; }
.netease-player.is-mobile-unsupported .netease-player-mobile-notice { display: grid; }
.netease-player.is-mobile-unsupported .netease-player-fallback { display: none; }
.netease-player-cover { width: 76px; height: 76px; border: 1px solid #dedede; border-radius: 5px; background: #e6e6e6; object-fit: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.netease-player-cover[hidden] { opacity: 0; }
.netease-player-content { display: grid; min-width: 0; gap: 3px; }
.netease-player-title, .netease-player-artist { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.netease-player-title { color: #333; font-size: 13px; line-height: 1.3; }
.netease-player-artist { color: #888; font-size: 11px; }
.netease-player-controls { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 5px; }
.netease-player-toggle { display: grid; width: 26px; height: 26px; place-items: center; border: 0; border-radius: 50%; background: #ef7b00; color: #fff; font: 11px/1 sans-serif; cursor: pointer; }
.netease-player-toggle:hover, .netease-player-toggle:focus-visible { background: #ff9225; }
.netease-player-progress { width: 100%; height: 5px; margin: 0; appearance: none; border: 0; border-radius: 999px; background: linear-gradient(to right, #ef7b00 var(--progress, 0%), #f2d3ae var(--progress, 0%)); cursor: pointer; }
.netease-player-progress::-webkit-slider-thumb { width: 11px; height: 11px; appearance: none; border: 2px solid #fff; border-radius: 50%; background: #ef7b00; box-shadow: 0 1px 4px rgba(99, 48, 6, 0.24); }
.netease-player-progress::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #ef7b00; box-shadow: 0 1px 4px rgba(99, 48, 6, 0.24); }
body.theme-dark .netease-player { border-color: #c87016; background: #2a1c10; box-shadow: 0 18px 58px rgba(0, 0, 0, 0.48); }
body.theme-dark .netease-player-title { color: #fff0df; }
body.theme-dark .netease-player-artist { color: #dfc0a2; }
body.theme-dark .netease-player-cover { border-color: #584126; }
body.theme-dark .netease-player-progress { background: linear-gradient(to right, #ff9c36 var(--progress, 0%), #5d4225 var(--progress, 0%)); }
body.theme-dark .netease-player-mobile-notice { background: #2a1c10; color: #f0c18f; }
@keyframes netease-note-pulse { 0%, 100% { transform: translateY(-1px) rotate(-5deg) scale(1); } 24% { transform: translateY(-5px) rotate(7deg) scale(1.12); } 48% { transform: translateY(-2px) rotate(-3deg) scale(1.04); } 72% { transform: translateY(-6px) rotate(5deg) scale(1.1); } }
@keyframes netease-note-spark-a { 0%, 28% { transform: translate(0, 4px) rotate(-8deg) scale(0.7); opacity: 0; } 46% { opacity: 0.88; } 100% { transform: translate(5px, -10px) rotate(14deg) scale(1.05); opacity: 0; } }
@keyframes netease-note-spark-b { 0%, 24% { transform: translate(0, 3px) rotate(8deg) scale(0.65); opacity: 0; } 42% { opacity: 0.68; } 100% { transform: translate(-4px, -8px) rotate(-12deg) scale(0.95); opacity: 0; } }
@media (max-width: 680px), (pointer: coarse) { .netease-player { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; min-width: 0; max-width: none; height: 146px; max-height: 42vh; resize: none; } .netease-player.is-free, .netease-player.is-docked { right: auto; bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .netease-player, .netease-player-tab, .netease-player-head, .netease-player-fallback { transition: none; } .netease-player.is-docked.is-playing .netease-player-tab span { animation: none; } }