/* The public player becomes a real wide-screen listening workspace on desktop. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){
  html:not(.desktop-site-viewport) body.online-demo .mobile-shell{width:min(calc(100% - 64px),1240px);padding:26px 0 72px}
  html:not(.desktop-site-viewport) body.online-demo .mobile-header{min-height:58px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
  html:not(.desktop-site-viewport) body.online-demo .mobile-header::after{content:'在线试听 / 同步歌词';margin-left:auto;color:var(--muted);font:11px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
  html:not(.desktop-site-viewport) body.online-demo .header-actions{display:none}
  html:not(.desktop-site-viewport) body.online-demo .mobile-tabs{grid-template-columns:repeat(4,minmax(120px,1fr));max-width:620px;margin-bottom:22px}
  html:not(.desktop-site-viewport) body.online-demo .now-playing.active{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(400px,520px);gap:14px 18px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
  html:not(.desktop-site-viewport) body.online-demo .player-page-head{grid-column:1 / -1;grid-row:1;display:flex;padding-bottom:12px;border-bottom:1px solid var(--line)}
  html:not(.desktop-site-viewport) body.online-demo .cover{grid-column:1;grid-row:2;flex-basis:64px;width:64px;height:64px;font-size:30px}
  html:not(.desktop-site-viewport) body.online-demo .now-copy{grid-column:2;grid-row:2}
  html:not(.desktop-site-viewport) body.online-demo .now-copy h2{font-size:27px}
  html:not(.desktop-site-viewport) body.online-demo .player-page-actions{grid-column:1 / 3;grid-row:3;justify-content:flex-start;margin:0}
  html:not(.desktop-site-viewport) body.online-demo .player-progress{grid-column:1 / 3;grid-row:4;max-height:none!important;padding:5px 2px!important;opacity:1!important;pointer-events:auto!important}
  html:not(.desktop-site-viewport) body.online-demo .practice-stats{grid-column:1 / 3;grid-row:5}
  html:not(.desktop-site-viewport) body.online-demo .playback-controls{grid-column:1 / 3;grid-row:6}
  html:not(.desktop-site-viewport) body.online-demo .practice-loop{grid-column:1 / 3;grid-row:7;padding-top:14px}
  html:not(.desktop-site-viewport) body.online-demo .player-lyrics-section{grid-column:3;grid-row:2 / span 6;align-self:stretch;margin:0;padding:0;border-top:0;background:transparent}
  html:not(.desktop-site-viewport) body.online-demo .player-lyrics-section::before,html:not(.desktop-site-viewport) body.online-demo .player-lyrics-section::after{display:none}
  html:not(.desktop-site-viewport) body.online-demo .player-lyrics{height:100%;min-height:460px;max-height:570px;margin:0;border-radius:8px;scroll-padding-top:70px;scroll-padding-bottom:70px}
  html:not(.desktop-site-viewport) body.online-demo .player-lyrics-line{grid-template-columns:52px minmax(0,1fr);padding:17px 15px;font-size:16px}
  html:not(.desktop-site-viewport) body.online-demo .mini-player{width:min(calc(100% - 64px),1240px)}
  html:not(.desktop-site-viewport) body.online-demo .library-panel,html:not(.desktop-site-viewport) body.online-demo .record-panel{max-width:900px;margin:0 auto 16px}
}
