#cms-score-player{
  --theme: #faf9f9;
  --pure: #fff;
  --font: #333;
  --secondary: #666;
  --tertiary: #999;
  --dim: #eee;
  --line: #e7e4e4;
  --accent: #cd5c5c;
  --accent-light: rgba(205, 92, 92, .1);
  --shadow: 0 0 5px rgba(17, 17, 17, .12);
  font: 14px/1.5 "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
  color: var(--font);
  background: var(--theme);
}

@font-face { font-family: "yp-iconfont"; src: url("/assets/score/assets/iconfont.5b3b9856.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: block; }
@font-face { font-family: "nier"; src: url("/assets/score/assets/Bravura.woff") format("woff"); font-style: normal; font-weight: 400; font-display: block; }

#cms-score-player *{ box-sizing: border-box; }

#cms-score-player, #cms-score-player{ margin: 0; min-height: 100%; background: var(--theme); overscroll-behavior: none; }

#cms-score-player{ color: var(--font); }

#cms-score-player button, #cms-score-player input, #cms-score-player select, #cms-score-player textarea{ font: inherit; }

#cms-score-player button{ border: 0; cursor: pointer; }

#cms-score-player button:focus-visible, #cms-score-player select:focus-visible, #cms-score-player input:focus-visible, #cms-score-player textarea:focus-visible{ outline: 2px solid rgba(205, 92, 92, .55); outline-offset: 2px; }

#cms-score-player .is-hidden{ display: none !important; }

#cms-score-player .app-shell{ min-height: 100dvh; }

#cms-score-player .topbar{ height: 52px; background: rgba(255,255,255,.98); }

#cms-score-player .topbar-inner{ width: 1200px; height: 52px; margin: 0 auto; display: flex; align-items: center; }

#cms-score-player .brand{ display: flex; width: 232px; height: 48px; flex: 0 0 232px; align-items: center; padding: 0; background: transparent; color: var(--font); }

#cms-score-player .brand-mark{ display: block; width: 32px; height: 48px; flex: 0 0 32px; margin-right: 8px; color: var(--accent); font: 32px/48px "yp-iconfont"; letter-spacing: 0; }

#cms-score-player .brand-name{ display: block; width: 60px; height: 22px; flex: 0 0 60px; font-size: 0; }

#cms-score-player .brand-name svg{ display: block; width: 100%; height: 100%; }

#cms-score-player .brand-divider{ display: none; }

#cms-score-player .brand-slogan{ box-sizing: border-box; width: 111px; height: 20px; flex: 0 0 111px; margin: 0 10.5px; padding: 0 10.5px; border-left: 1px solid #bbb; color: var(--tertiary); font-size: 14px; letter-spacing: 0; line-height: 20px; white-space: nowrap; }

#cms-score-player .search-container{ position: relative; width: 400px; margin-left: 40px; display: flex; align-items: center; height: 32px; padding: 0 5px; border-radius: 32px; background: var(--theme); }

#cms-score-player .search-icon{ display: block; width: 32px; height: 32px; flex: 0 0 32px; color: #aaa; font: 18px/32px "yp-iconfont"; text-align: center; }

#cms-score-player .search-container input{ flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; color: var(--font); background: transparent; letter-spacing: 1px; }

#cms-score-player .search-container input::placeholder{ color: #bdb9b9; }

#cms-score-player .search-panel{ position: absolute; z-index: 20; top: 38px; left: 0; right: 0; padding: 12px 14px 15px; border-radius: 16px; background: var(--pure); box-shadow: 0 0 12px rgba(0,0,0,.12); }

#cms-score-player .search-panel-title{ display: flex; justify-content: space-between; margin: 4px 0 8px; color: var(--secondary); font-size: 13px; letter-spacing: 1px; }

#cms-score-player .search-panel-title button{ color: var(--accent); background: transparent; padding: 0; font-size: 12px; }

#cms-score-player .search-history, #cms-score-player .hot-searches{ display: flex; flex-wrap: wrap; gap: 8px; }

#cms-score-player .search-chip{ border-radius: 8px; padding: 4px 9px; background: var(--theme); color: var(--secondary); cursor: pointer; }

#cms-score-player .search-chip:hover{ color: var(--accent); background: var(--accent-light); }

#cms-score-player .user-identity{ width: 114.536px; height: 42px; flex: 0 0 114.536px; margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 0; color: var(--tertiary); background: transparent; }

#cms-score-player .user-identity img{ width: 42px; height: 42px; border-radius: 50%; object-fit: cover; margin-left: auto; }

#cms-score-player .notification{ color: #e7b54a; font-size: 15px; }

#cms-score-player .workspace{ display: flex; width: 1200px; height: calc(100dvh - 67px); margin: 15px auto 0; gap: 0; }

#cms-score-player .main-card{ position: relative; flex: 1; min-width: 0; height: 100%; margin-right: 15px; overflow: hidden; display: flex; flex-direction: column; border-radius: 15px 15px 0 0; background: var(--pure); }

#cms-score-player .sheet-scroll{ flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scroll-behavior: smooth; }

#cms-score-player .score-settings::-webkit-scrollbar{ width: 0; }

#cms-score-player .sheet-inner{ width: 100%; margin: 0; padding: 30px 60px; transform-origin: top center; transition: width .2s ease; }

#cms-score-player .sheet-header{ position: relative; margin-bottom: 20px; }

#cms-score-player .sheet-header h1{ max-width: 70%; margin: 10px 0; color: var(--font); font-size: 28px; font-weight: 400; letter-spacing: 1px; }

#cms-score-player .song-info{ display: flex; gap: 40px; color: var(--secondary); }

#cms-score-player .song-info b{ color: var(--accent); margin-right: 5px; font-weight: 400; }

#cms-score-player .song-source-notes{ margin-top: 12px; color: var(--secondary); font-size: 13px; line-height: 1.6; }

#cms-score-player .song-source-notes p{ margin: 0; }

#cms-score-player .chord-verse-label{ display: inline-block; margin-right: .5em; color: var(--secondary); font-size: 1em; }

#cms-score-player .song-meta{ position: absolute; top: 0; right: 0; width: 156px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d9d6d6; border-radius: 6px; overflow: hidden; font-size: 12px; }

#cms-score-player .song-meta span{ min-height: 23px; padding: 2px 7px; display: flex; align-items: center; border-bottom: 1px solid #e8e5e5; }

#cms-score-player .song-meta span:nth-child(odd){ border-right: 1px solid #e8e5e5; }

#cms-score-player .song-meta span:nth-last-child(-n+2){ border-bottom: 0; }

#cms-score-player .song-meta em{ color: var(--tertiary); font-style: normal; }

#cms-score-player .song-meta strong{ margin-left: 5px; font-weight: 400; }

#cms-score-player .sheet-list{ display: flex; flex-direction: column; align-items: flex-start; padding-top: 0; }

#cms-score-player .sheet-card{ position: relative; width: 810px; transition: opacity .2s ease; }

#cms-score-player .sheet-selection-overlay{ position: absolute; z-index: 2; top: 0; left: 0; width: 0; height: 100%; display: none; background: var(--accent-light); pointer-events: none; }

#cms-score-player .sheet-card.is-active .sheet-selection-overlay{ display: block; }

#cms-score-player .sheet-beat-cursor{ position: absolute; z-index: 3; top: 0; bottom: 0; left: 12%; display: none; width: 10px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateX(-50%); pointer-events: none; }

#cms-score-player .sheet-beat-cursor::before, #cms-score-player .sheet-beat-cursor::after{ content: ""; position: absolute; left: 4px; width: 2px; height: 18px; background: var(--accent); }

#cms-score-player .sheet-beat-cursor::before{ top: 0; }

#cms-score-player .sheet-beat-cursor::after{ bottom: 0; }

#cms-score-player .sheet-card.is-active .sheet-beat-cursor{ display: block; }

#cms-score-player .sheet-card img, #cms-score-player .sheet-card svg.sheet-image{ display: block; width: 810px; max-width: none; height: auto; user-select: none; transition: filter .25s ease; font-size: 0; line-height: 0; overflow: hidden; }

#cms-score-player .sheet-card svg.sheet-image *{ cursor: default; vertical-align: top; overflow: visible; }

#cms-score-player .sheet-card .at{ font-family: "nier"; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 34px; overflow: visible !important; }

#cms-score-player .sheet-card img.dimmed{ filter: grayscale(.25) opacity(.92); }

#cms-score-player[data-view="chords"][data-parallel="true"] .sheet-card[data-has-lyrics="true"] .sheet-image{ display: block; }

#cms-score-player[data-view="chords"][data-parallel="true"] .sheet-card[data-has-lyrics="true"] .lyrics-mode{ display: block; min-height: 116px; padding: 30px 0 22px; }

#cms-score-player .parallel-lyrics-line{ position: relative; min-height: 66px; padding-top: 4px; }

#cms-score-player .parallel-chords{ display: flex; gap: 0; min-height: 24px; color: var(--accent); font-size: 15px; }

#cms-score-player .parallel-chord{ flex: 1 1 0; min-width: 0; text-align: center; }

#cms-score-player .parallel-lyrics-line p{ margin: 0; padding: 3px 0 8px; color: #333; border-bottom: 1px dashed #999; font-size: 18px; letter-spacing: 1px; line-height: 1.6; white-space: nowrap; }

#cms-score-player .mode-section-heading{ display: none; width: 830px; min-height: 41px; margin: 0 0 14px -10px; padding: 3px 10px; background: var(--theme); color: var(--secondary); font-size: 16px; letter-spacing: 2px; line-height: 35px; }

#cms-score-player .mode-chord-bridge{ display: none; width: 810px; height: 125px; flex-direction: column; justify-content: flex-start; padding-top: 15px; color: var(--accent); font-size: 18px; }

#cms-score-player .mode-chord-bridge .bridge-chord{ width: 36px; height: 56px; }

#cms-score-player .mode-chord-bridge .bridge-name{ display: none; }

#cms-score-player .mode-chord-bridge .chord-diagram-cell{ display: flex; width: 36px; height: 56px; min-height: 56px; flex-direction: column; align-items: center; color: var(--accent); font-size: 13px; }

#cms-score-player .mode-chord-bridge .chord-diagram-cell strong{ font-weight: 400; line-height: 15px; }

#cms-score-player .chord-diagram-cell > svg{ display: block; width: var(--chord-natural-width); height: var(--chord-natural-height); overflow: visible; }

#cms-score-player .mode-chord-bridge i{ display: block; margin-top: 18px; color: var(--font); font-style: normal; line-height: 1; }

#cms-score-player .sheet-card .mode-view{ display: none; min-height: 118px; padding: 0; background: #fff; }

#cms-score-player .sheet-card .mode-view h4{ display: none; }

#cms-score-player .chord-mode{ grid-template-columns: repeat(8, minmax(0,1fr)); gap: 12px; }

#cms-score-player .chord-mode > span, #cms-score-player .chord-mode > .chord-cell{ display: flex; min-height: 74px; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #333; color: var(--accent); font-size: 14px; }

#cms-score-player .chord-mode .chord-cell strong{ font-weight: 400; }

#cms-score-player .chord-mode .chord-cell > i{ display: block; margin-top: 7px; color: #777; font-size: 11px; font-style: normal; }

#cms-score-player .functional-sheet-list{ display: none; }

#cms-score-player[data-view="functional"] #sheetList, #cms-score-player[data-view="numbered"] #sheetList{ display: none; }

#cms-score-player[data-view="functional"] .functional-sheet-list, #cms-score-player[data-view="numbered"] .functional-sheet-list{ display: flex; }

#cms-score-player[data-view="functional"] .sheet-scroll, #cms-score-player[data-view="numbered"] .sheet-scroll{ overflow-x: auto; }

#cms-score-player .functional-sheet-card{ position: relative; width: 810px; }

#cms-score-player .functional-svg{ display: block; width: 810px; max-width: none; height: auto; user-select: none; font-size: 0; line-height: 0; overflow: hidden; }

#cms-score-player .functional-svg *{ vertical-align: top; overflow: visible; }

#cms-score-player .functional-svg .functional-notation-layer{ overflow: hidden; }

#cms-score-player .functional-sheet-card .at{ font-family: "nier"; font-style: normal; font-weight: 400; line-height: 1; font-size: 34px; }

#cms-score-player .functional-sheet-card.is-active .sheet-selection-overlay, #cms-score-player .functional-sheet-card.is-active .sheet-beat-cursor{ display: block; }

#cms-score-player .functional-svg .at-highlight text, #cms-score-player .functional-svg .at-highlight path[fill]:not([fill="none"]){ fill: var(--accent); }

#cms-score-player .chord-score{ position: relative; display: none; width: 810px; padding-top: 7.4px; color: #202020; font: 19.6px/1.5 Arial, sans-serif; }

#cms-score-player[data-view="chords"] #sheetList{ display: none; }

#cms-score-player[data-view="chords"] .chord-score{ display: block; }

#cms-score-player[data-view="chords"] .sheet-scroll{ overflow-x: auto; }

#cms-score-player .chord-section-heading{ margin: 1.4em -.5em .7em; padding: .2em .5em; background: var(--theme); }

#cms-score-player .chord-section-heading:first-child{ margin-top: 0; }

#cms-score-player .chord-section-title{ overflow: hidden; color: rgba(0,0,0,.4980392156862745); font-size: 1em; line-height: 1.7em; letter-spacing: .15em; white-space: nowrap; text-overflow: ellipsis; }

#cms-score-player .chord-lyric-line{ line-height: 1.5; outline-offset: 3px; }

#cms-score-player .chord-lyric-line:focus-visible{ outline: 2px solid var(--accent); }

#cms-score-player .chord-token{ position: relative; display: inline-flex; height: 5em; padding: 0; flex-direction: column; justify-content: flex-end; color: #202020; letter-spacing: .07em; cursor: pointer; transition: background-color .15s; }

#cms-score-player .chord-score:not([data-chord-display="diagrams"]) .chord-token{ height: 3.5em; }

#cms-score-player .chord-token[data-needs-spacing] + .chord-token[data-needs-spacing]{ margin-left: .3em; }

#cms-score-player .chord-token[data-syllable] + .chord-token[data-needs-spacing]{ margin-left: 0; }

#cms-score-player .chord-token.has-chord[data-empty="true"]{ min-width: 1em; margin-right: .15em; }

#cms-score-player .chord-symbol-token{ min-width: 1.6em; margin: 0 .15em; }

#cms-score-player .chord-symbol-token > svg{ width: 1.6em; height: 1.8em; overflow: visible; flex: 0 0 auto; }

#cms-score-player .chord-label{ position: absolute; top: .8em; left: 0; color: var(--accent); letter-spacing: 0; white-space: nowrap; user-select: none; }

#cms-score-player .chord-label.is-diagram{ left: 50%; transform: translateX(-50%); }

#cms-score-player .chord-label.is-diagram svg{ display: block; width: auto; height: var(--chord-lyric-height); overflow: visible; }

#cms-score-player .chord-label .chord-type{ font-size: .8em; }

#cms-score-player .chord-word{ min-width: 1em; text-align: center; box-shadow: inset 0 -.07em 0 0 currentColor; }

#cms-score-player .chord-token[data-singer-range="below"]:not(.is-current), #cms-score-player .chord-token[data-singer-range="below"]:not(.is-current) .chord-word{ color: #0958d9; }

#cms-score-player .chord-token[data-singer-range="above"]:not(.is-current), #cms-score-player .chord-token[data-singer-range="above"]:not(.is-current) .chord-word{ color: #f5222d; }

#cms-score-player .chord-token.is-current{ background: #e6f0ff; color: #0066cc; }

#cms-score-player .chord-token.is-current .chord-label{ color: #0066cc; }

#cms-score-player .chord-solo-row{ position: relative; width: 100%; }

#cms-score-player .chord-solo-row > svg{ display: block; width: 810px; height: auto; font-size: 0; overflow: hidden; }

#cms-score-player .chord-score .at{ font-family: "nier"; font-size: 34px; line-height: 1; }

#cms-score-player .chord-solo-row.is-active .sheet-selection-overlay, #cms-score-player .chord-solo-row.is-active .sheet-beat-cursor{ display: block; }

#cms-score-player .chord-solo-row .is-current text, #cms-score-player .chord-solo-row .is-current path[fill]:not([fill="none"]){ fill: var(--accent); }

#cms-score-player .chord-score[data-parallel="true"] .chord-lyric-line{ display: inline; }

#cms-score-player .chord-score[data-parallel="true"] .chord-lyric-line::after{ content: ""; display: inline-block; position: relative; top: .5em; height: 5em; margin: 0 1.5em; border-left: 3px dotted #ccc; }

#cms-score-player .chord-score[data-parallel="true"]:not([data-chord-display="diagrams"]) .chord-lyric-line::after{ height: 3.5em; margin: 0 1em; }

#cms-score-player .chord-score[data-parallel="true"] .chord-lyric-line:last-child::after, #cms-score-player .chord-score[data-parallel="true"] .chord-lyric-line:has(+ .chord-section-heading)::after{ display: none; }

#cms-score-player .lyrics-mode{ min-height: 49px !important; padding: 0 !important; color: #333; font: 17px/1.5 Arial, "Microsoft Yahei", sans-serif; letter-spacing: 0; }

#cms-score-player .parallel-lyrics-line{ position: relative; height: 49px; min-height: 49px; padding: 0; border-bottom: 0; overflow: visible; }

#cms-score-player .parallel-chords{ position: relative; display: block; height: 22px; min-height: 22px; color: var(--accent); font: 15px/1 Arial, sans-serif; }

#cms-score-player .parallel-chord{ position: absolute; top: 0; left: var(--chord-x); display: block; width: 64px; transform: translateX(-50%); text-align: center; white-space: nowrap; }

#cms-score-player .parallel-lyrics-line p{ margin: 0; padding: 1px 0 5px; color: #333; border: 0; font-size: 17px; letter-spacing: 0; line-height: 1.45; white-space: nowrap; }

#cms-score-player .lyric-empty{ display: flex; align-items: flex-end; gap: 6px; height: 92px; padding: 0 0 2px 2px; }

#cms-score-player .lyric-dot{ display: block; width: 10px; height: 10px; border: 2px solid #aaa; border-radius: 50%; }

#cms-score-player .lyric-dot.is-current{ border-color: #e5a2a2; background: #e5a2a2; }

#cms-score-player[data-view="chords"] .mode-section-heading, #cms-score-player[data-view="lyrics"] .mode-section-heading{ display: block; }

#cms-score-player[data-view="chords"] .sheet-list{ padding-top: 7.4px; }

#cms-score-player[data-view="chords"] .lyrics-mode{ display: none !important; }

#cms-score-player[data-view="chords"][data-current-chord-display="names"] .mode-chord-bridge, #cms-score-player[data-view="chords"][data-current-chord-display="degrees"] .mode-chord-bridge{ height: 96px; padding-top: 20px; }

#cms-score-player[data-view="chords"][data-current-chord-display="names"] .mode-chord-bridge .bridge-chord, #cms-score-player[data-view="chords"][data-current-chord-display="degrees"] .mode-chord-bridge .bridge-chord{ display: none; }

#cms-score-player[data-view="chords"][data-current-chord-display="names"] .mode-chord-bridge .bridge-name, #cms-score-player[data-view="chords"][data-current-chord-display="degrees"] .mode-chord-bridge .bridge-name{ display: block; }

#cms-score-player[data-view="lyrics"] .mode-section-heading:first-child{ margin-top: 7.4px; }

#cms-score-player[data-view="lyrics"] #sheet-1{ margin-bottom: 35.6px; }

#cms-score-player[data-view="lyrics"] #sheet-1 .lyrics-mode, #cms-score-player[data-view="lyrics"] #sheet-1 .lyric-empty{ height: 49px; min-height: 49px !important; }

#cms-score-player[data-view="chords"] .mode-section-heading:not(.is-first-content), #cms-score-player[data-view="lyrics"] .mode-section-heading:not(.is-first-content){ margin-top: 28px; }

#cms-score-player[data-view="chords"] .mode-chord-bridge{ display: flex; }

#cms-score-player[data-view="lyrics"] .sheet-image, #cms-score-player[data-view="functional"] .sheet-image{ display: none; }

#cms-score-player[data-view="chords"] .sheet-image{ display: block; }

#cms-score-player[data-view="chords"] .chord-mode{ display: none; }

#cms-score-player[data-view="lyrics"] .chord-mode{ display: none; }

#cms-score-player[data-view="lyrics"] .lyrics-mode{ display: block; }

#cms-score-player[data-view="functional"] .mode-section-heading, #cms-score-player[data-view="functional"] .mode-chord-bridge{ display: none; }

#cms-score-player[data-view="lyrics"] .sheet-card[data-section="前奏"] + .sheet-card[data-section="前奏"]{ display: none; }

#cms-score-player[data-view="lyrics"] .sheet-card[data-has-lyrics="false"] .lyrics-mode{ min-height: 92px !important; }

#cms-score-player[data-view="lyrics"] .sheet-selection-overlay, #cms-score-player[data-view="lyrics"] .sheet-beat-cursor{ display: none !important; }

#cms-score-player[data-hide-measure="true"] .sheet-card[data-measure]:not(.is-active) .measure-label{ opacity: 0; }

#cms-score-player .measure-label{ display: none; }

#cms-score-player .player-shell{ position: relative; display: flex; flex-direction: column; flex: 0 0 79px; z-index: 5; background: var(--pure); container: qupu-player / inline-size; }

#cms-score-player .player-shell.is-modal-open{ z-index: 41; }


#cms-score-player .audio-load-status { position:absolute; left:12px; right:12px; bottom:calc(100% + 8px); padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--pure); color:var(--secondary); font-size:12px; }
#cms-score-player .audio-load-status[hidden], #cms-score-player .audio-load-status progress[hidden] { display:none; }
#cms-score-player .audio-load-heading { display:flex; align-items:center; gap:12px; justify-content:space-between; min-height:24px; }
#cms-score-player .audio-load-heading > span { min-width:0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#cms-score-player #audioLoadAction { flex:none; padding:3px 8px; border:0; border-radius:4px; background:var(--accent-light); color:#a53e3e; font:inherit; cursor:pointer; }
#cms-score-player #audioLoadAction:hover { background:#f4dede; }
#cms-score-player #audioLoadAction:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#cms-score-player #audioLoadProgress { display:block; width:100%; height:4px; margin-top:6px; border:0; border-radius:2px; overflow:hidden; background:var(--dim); accent-color:var(--accent); }
#cms-score-player #audioLoadProgress::-webkit-progress-bar { background:var(--dim); border-radius:2px; }
#cms-score-player #audioLoadProgress::-webkit-progress-value { background:var(--accent); border-radius:2px; }
#cms-score-player #audioLoadProgress::-moz-progress-bar { background:var(--accent); border-radius:2px; }
#cms-score-player .audio-load-status.has-error { color:#a53e3e; }

#cms-score-player .section-track{ position: relative; display: flex; flex: 0 0 32px; min-width: 0; height: 32px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c9c3c3 transparent; }
#cms-score-player .section-track::-webkit-scrollbar{ height: 4px; }
#cms-score-player .section-track::-webkit-scrollbar-thumb{ border-radius: 4px; background: #c9c3c3; }

#cms-score-player .section-progress{ position: absolute; z-index: 0; top: 0; left: 0; height: 100%; background: var(--dim); pointer-events: none; }

#cms-score-player .section-bracket{ position: absolute; z-index: 1; top: 1px; height: 8px; box-sizing: border-box; border-top: 1.5px dotted var(--tertiary); color: var(--tertiary); pointer-events: none; }

#cms-score-player .section-bracket::before{ content: ""; position: absolute; top: -1.5px; bottom: 0; left: -1.5px; border-left: 1.5px dotted var(--tertiary); }

#cms-score-player .section-bracket span{ position: absolute; left: 3px; top: 2px; font-size: 7px; line-height: 7px; }

#cms-score-player .section-button{ position: relative; z-index: 2; display: flex; align-items: flex-start; flex: 0 0 var(--section-width, 12.5%); height: 100%; box-sizing: border-box; overflow: hidden; padding: 7px 5px 0; color: var(--font); border: 0; border-radius: 0; background: transparent; font-size: 11px; text-align: left; white-space: nowrap; }

#cms-score-player .section-button + .section-button{ border-left: 1px solid var(--dim); }

#cms-score-player .section-button.is-current{ color: var(--font); }

#cms-score-player .player-panel{ height: 55px; min-width: 0; padding: 10px 25px; display: flex; gap: 16px; align-items: center; justify-content: space-between; }

#cms-score-player .player-left, #cms-score-player .player-right{ display: flex; align-items: center; }

#cms-score-player .player-left{ min-width: 0; gap: 22px; padding: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }

#cms-score-player .player-left::-webkit-scrollbar{ display: none; }

#cms-score-player .player-action{ display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0; padding: 0; color: var(--font); background: transparent; font-size: 14px; white-space: nowrap; }

#cms-score-player .player-action > span:not(.action-icon), #cms-score-player .tempo-action > span{ margin: 0 8px; }

#cms-score-player .player-action:hover{ color: var(--accent); }

#cms-score-player .action-icon{ display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--dim); color: var(--secondary); font: 16px/30px "yp-iconfont"; }

#cms-score-player .tempo-action{ gap: 0; }

#cms-score-player .tempo-action strong{ display: inline-flex; min-width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--dim); font-size: 14px; font-weight: 400; }

#cms-score-player .player-right{ flex: 0 0 auto; gap: 10px; margin-left: auto; color: var(--tertiary); font-size: 12px; white-space: nowrap; }

#cms-score-player .played-label{ display: inline-block; box-sizing: border-box; height: 30px; padding: 0 10px; border-radius: 30px; color: var(--tertiary); font-size: 10px; line-height: 30px; background: rgba(205,92,92,.1); }

#cms-score-player .time-label{ flex: 0 0 auto; min-width: 76px; color: var(--secondary); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; text-align: center; }

#cms-score-player .play-button{ display: inline-flex; flex: 0 0 30px; width: 30px; height: 30px; align-items: center; justify-content: center; padding: 0; border-radius: 50%; color: #fff; background: var(--accent); line-height: 1; }

#cms-score-player .play-button svg{ display: block; flex: none; width: 18px; height: 18px; fill: currentColor; pointer-events: none; }

#cms-score-player .play-button .pause-icon, #cms-score-player .play-button.is-playing .play-icon{ display: none; }

#cms-score-player .play-button.is-playing .pause-icon{ display: block; }

#cms-score-player .tempo-popover{ position:absolute; z-index:10; bottom:63px; left:125px; width:280px; min-width:0; max-width:calc(100% - 16px); padding:12px 16px; border-radius:9px; background:var(--pure); box-shadow:0 2px 14px rgba(0,0,0,.16); }
#cms-score-player .tempo-popover .popover-heading{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#cms-score-player .tempo-popover #tempoClose{ display:flex; width:32px; height:32px; align-items:center; justify-content:center; color:var(--secondary); background:transparent; }
#cms-score-player .tempo-popover svg{ width:18px; height:18px; }
#cms-score-player .tempo-controls{ display:flex; align-items:center; gap:10px; }
#cms-score-player .tempo-controls > button{ display:flex; flex:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:8px; color:var(--font); background:var(--theme); }
#cms-score-player .tempo-number{ display:flex; flex:1; min-width:0; height:44px; align-items:center; justify-content:center; gap:5px; margin:0; border:1px solid var(--line); border-radius:8px; background:var(--pure); }
#cms-score-player .tempo-number #tempoInput{ width:4ch; min-width:0; padding:0; border:0; color:var(--font); background:transparent; font:20px Arial,sans-serif; font-variant-numeric:tabular-nums; text-align:center; appearance:textfield; }
#cms-score-player #tempoInput::-webkit-inner-spin-button, #cms-score-player #tempoInput::-webkit-outer-spin-button{ margin:0; appearance:none; }
#cms-score-player .tempo-number > span{ color:var(--secondary); font-size:12px; }
#cms-score-player .tempo-popover #tempoRange{ height:32px; margin:8px 0 0; cursor:pointer; }
#cms-score-player .tempo-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:var(--secondary); font-size:12px; }
#cms-score-player .tempo-footer button{ min-height:36px; padding:0 8px; border-radius:6px; color:#a34341; background:var(--accent-light); }
#cms-score-player .tempo-popover button:disabled{ opacity:.45; cursor:default; }
#cms-score-player .tempo-popover button:focus-visible, #cms-score-player #tempoInput:focus-visible{ outline:2px solid #a34341; outline-offset:2px; }

#cms-score-player .track-popover{ position:fixed; z-index:1050; top:50%; left:50%; bottom:auto; display:flex; flex-direction:column; width:min(560px, calc(100vw - 24px)); min-width:0; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:0; overflow:hidden; border:1px solid rgba(80,58,58,.08); border-radius:18px; color:var(--font); background:var(--pure); box-shadow:0 20px 60px rgba(36,25,25,.22); transform:translate(-50%, -50%); }

#cms-score-player .track-heading{ display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:20px 20px 14px; text-align:left; }
#cms-score-player .track-heading h2{ margin:0; color:var(--font); font-size:20px; font-weight:600; line-height:1.4; }
#cms-score-player .track-heading p{ margin:3px 0 0; color:var(--secondary); font-size:12px; line-height:1.5; }
#cms-score-player .track-close{ display:inline-flex; flex:0 0 44px; width:44px; height:44px; align-items:center; justify-content:center; padding:0; border-radius:10px; color:var(--secondary); background:var(--theme); }
#cms-score-player .track-close:hover{ color:var(--font); background:#eeeaea; }
#cms-score-player .track-dialog-body{ min-height:0; padding:0 20px 20px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#c4bebe transparent; }
#cms-score-player .track-section h3{ margin:0; color:var(--font); font-size:14px; font-weight:600; line-height:1.5; }
#cms-score-player .track-section + .track-section{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
#cms-score-player .track-instrument-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
#cms-score-player .track-instrument-row{ display:flex; min-width:0; flex-direction:column; gap:5px; margin:0; color:var(--secondary); font-size:12px; }
#cms-score-player .track-instrument-label{ display:block; color:inherit; font-size:inherit; }
#cms-score-player .track-instrument-picker{ position:relative; min-width:0; }
#cms-score-player .track-instrument-picker.is-open{ z-index:3; }
#cms-score-player .track-instrument-trigger{ display:flex; width:100%; min-width:0; height:46px; align-items:center; justify-content:space-between; gap:8px; padding:0 13px; border:1px solid #e0dada; border-radius:9px; color:var(--font); background:var(--theme); font-size:14px; text-align:left; transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; }
#cms-score-player .track-instrument-trigger:hover{ border-color:#cbbebe; background:#fff; }
#cms-score-player .track-instrument-trigger[aria-expanded="true"]{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-light); }
#cms-score-player .track-instrument-trigger span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cms-score-player .track-instrument-trigger svg{ width:18px; height:18px; flex:none; color:var(--secondary); transition:transform .15s ease; }
#cms-score-player .track-instrument-trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
#cms-score-player .track-instrument-options{ position:absolute; z-index:4; top:calc(100% + 6px); right:0; left:0; padding:5px; border:1px solid #e9e2e2; border-radius:10px; background:var(--pure); box-shadow:0 8px 24px rgba(45,31,31,.16); }
#cms-score-player .track-instrument-options [role="option"]{ display:flex; width:100%; min-height:44px; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:6px; color:var(--font); background:transparent; font-size:14px; text-align:left; }
#cms-score-player .track-instrument-options [role="option"] span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cms-score-player .track-instrument-options [role="option"] svg{ display:none; width:16px; height:16px; flex:none; color:#a34341; }
#cms-score-player .track-instrument-options [role="option"]:hover, #cms-score-player .track-instrument-options [role="option"]:focus-visible{ background:var(--theme); }
#cms-score-player .track-instrument-options [role="option"][aria-selected="true"]{ color:#a34341; background:var(--accent-light); }
#cms-score-player .track-instrument-options [role="option"][aria-selected="true"] svg{ display:block; }
@media (max-width:360px){
 #cms-score-player .track-instrument-grid{ gap:8px; }
 #cms-score-player .track-instrument-trigger{ gap:4px; padding-inline:9px; }
 #cms-score-player .track-instrument-options [role="option"]{ gap:4px; padding-inline:7px; }
}
#cms-score-player .track-section-heading{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#cms-score-player .track-global-row{ display:flex; align-items:center; justify-content:flex-end; gap:4px; min-height:44px; margin:0; padding:0; color:var(--secondary); font-size:12px; white-space:nowrap; }
#cms-score-player .track-master-switch{ position:relative; flex:0 0 48px; width:48px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; }
#cms-score-player .track-master-switch::before{ position:absolute; top:11px; left:5px; width:38px; height:22px; border-radius:12px; background:#d7d3d3; content:""; transition:background .15s ease; }
#cms-score-player .track-master-switch span{ position:absolute; top:13px; left:7px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .15s ease; }
#cms-score-player .track-master-switch[aria-checked="true"]::before{ background:var(--accent); }
#cms-score-player .track-master-switch[aria-checked="true"] span{ transform:translateX(16px); }
#cms-score-player .track-row{ position:relative; display:block; height:auto; min-height:68px; margin:0; padding:2px 0 7px; color:var(--font); border-bottom:1px solid #f1eeee; }
#cms-score-player .track-row:last-child{ border-bottom:0; }
#cms-score-player .track-hint{ margin:8px 0 0; color:var(--secondary); font-size:12px; line-height:1.5; }
#cms-score-player .track-row-heading{ display:flex; min-height:44px; align-items:center; gap:10px; }
#cms-score-player .track-name{ flex:1; min-width:0; color:var(--font); font-size:14px; line-height:1.4; }
#cms-score-player .track-volume-value{ flex:none; min-width:3.5em; color:var(--secondary); font-size:12px; font-variant-numeric:tabular-nums; text-align:right; }
#cms-score-player .track-row input[type="range"]{ display:block; width:100%; height:24px; margin:-2px 0 0; accent-color:var(--accent); cursor:pointer; }
#cms-score-player .track-mute{ position:static; display:inline-flex; flex:0 0 44px; width:44px; min-width:44px; height:44px; align-items:center; justify-content:center; padding:0; border-radius:8px; color:var(--secondary); background:transparent; }
#cms-score-player .track-mute:hover{ background:var(--theme); }
#cms-score-player .track-mute[aria-pressed="true"]{ color:#a34341; background:var(--accent-light); }
#cms-score-player .track-mute-icon, #cms-score-player .track-mute-icon svg{ display:block; width:20px; height:20px; flex:none; }
#cms-score-player .track-mute-icon .track-sound-off, #cms-score-player .track-mute[aria-pressed="true"] .track-sound-on{ display:none; }
#cms-score-player .track-mute[aria-pressed="true"] .track-sound-off{ display:block; }
#cms-score-player .track-popover button:focus-visible, #cms-score-player .track-popover input:focus-visible, #cms-score-player .track-popover select:focus-visible{ outline:2px solid #a34341; outline-offset:2px; }
@media (pointer:coarse){ #cms-score-player .track-row input[type="range"]{ height:44px; margin:-5px 0 -8px; } }
#cms-score-player .popover-heading{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color:var(--font); }
#cms-score-player .popover-heading strong{ font-size:14px; }
#cms-score-player .popover-heading span{ color:var(--accent); font-size:12px; }

#cms-score-player .popover-note{ margin: 8px 0 0; color: var(--tertiary); font-size: 12px; }

#cms-score-player .tempo-popover input{ width: 100%; accent-color: var(--accent); }

#cms-score-player .range-labels{ display: flex; justify-content: space-between; color: var(--tertiary); font-size: 11px; }

#cms-score-player .score-settings{ flex: 0 0 240px; height: 100%; overflow-y: auto; scrollbar-width: thin; }

#cms-score-player .side-section{ margin-bottom: 12px; padding: 10px 15px; border-radius: 16px; background: var(--pure); }

#cms-score-player .author-card{ min-height: 86px; display: flex; align-items: center; padding: 10px 20px; }

#cms-score-player .author-avatar-wrap{ position: relative; width: 42px; height: 42px; flex: 0 0 42px; }

#cms-score-player .author-avatar{ width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }

#cms-score-player .author-badge{ position: absolute; right: -1px; bottom: -1px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #555; }

#cms-score-player .author-card > div:last-child{ margin: 10px 0 10px 10px; }

#cms-score-player .author-card h2{ margin: 0; font-size: 16px; font-weight: 400; }

#cms-score-player .author-card p{ margin: 4px 0 0; color: var(--tertiary); font-size: 12px; }

#cms-score-player .side-section h3{ margin: 0 0 5px; font-size: 16px; font-weight: 400; letter-spacing: 1px; }

#cms-score-player .tag-list{ display: flex; flex-wrap: wrap; gap: 5px; }

#cms-score-player .tag-list span{ padding: 4px 8px; border-radius: 8px; background: var(--theme); color: var(--secondary); }

#cms-score-player .settings-section{ padding: 8px 0; }

#cms-score-player .setting-row{ height: 40px; line-height: 40px; padding: 0 20px; position: relative; display: flex; align-items: center; color: var(--font); }

#cms-score-player .chord-arrangement-row{ height: auto; min-height: 40px; flex-wrap: wrap; }

#cms-score-player .chord-arrangement-row .setting-hint{ flex-basis: 100%; margin: -4px 0 8px; color: var(--tertiary); font-size: 11px; line-height: 1.4; }

#cms-score-player .setting-row:not(:last-child){ margin-bottom: 10px; }

#cms-score-player .setting-row > span:first-child{ margin-right: 12px; white-space: nowrap; }

#cms-score-player .setting-reset{ margin-left: 6px; padding: 0; color: var(--tertiary); background: transparent; font-size: 11px; cursor: pointer; }

#cms-score-player .setting-reset strong{ font-weight: 400; }

#cms-score-player .setting-row select{ box-sizing: border-box; flex: 0 1 124px; width: 124px; min-width: 0; max-width: 124px; height: 38px; margin-left: auto; padding: 0 28px 0 12px; border: 1px solid transparent; border-radius: 6px; color: var(--font); font-size: 14px; line-height: normal; background: var(--theme); cursor: pointer; appearance: none; }

#cms-score-player .setting-row select:focus-visible{ outline: 2px solid rgba(205,92,92,.55); outline-offset: 2px; }

#cms-score-player .setting-row:has(select) .setting-reset{ position: absolute; top: 28px; left: 20px; margin: 0; font-size: 10px; line-height: 12px; }

#cms-score-player .view-mode-row::after{ display: none; }

#cms-score-player .dropdown-selector{ position: relative; display: inline-block; width: 124px; margin-left: auto; color: var(--font); text-align: left; }

#cms-score-player .dropdown-current{ position: relative; display: flex; width: 124px; height: 38px; align-items: center; justify-content: flex-end; padding: 4px 12px; border-radius: 6px; color: var(--font); background: var(--theme); font-size: 14px; line-height: 38px; text-align: left; }

#cms-score-player .dropdown-current span{ flex: 1; margin-right: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#cms-score-player .dropdown-current i, #cms-score-player .dropdown-options i{ margin-right: 6px; font: 16px/1 "yp-iconfont"; font-style: normal; }

#cms-score-player .dropdown-current .dropdown-arrow{ margin: 0; font-size: 11px; }

#cms-score-player .dropdown-options{ position: absolute; z-index: 20; left: 0; bottom: -5px; display: flex; width: 124px; max-height: 250px; flex-direction: column; padding: 5px 0; overflow-x: hidden; overflow-y: auto; border-radius: 6px; background: var(--pure); box-shadow: 0 0 5px var(--dim); opacity: 0; pointer-events: none; transform: translateY(100%); }

#cms-score-player .dropdown-selector.is-open .dropdown-options{ opacity: 1; pointer-events: auto; }

#cms-score-player .dropdown-options button{ height: 30px; flex: 0 0 30px; padding: 0 8px; color: var(--font); background: transparent; line-height: 30px; text-align: left; white-space: nowrap; }

#cms-score-player .dropdown-options button:hover{ background: var(--accent-light); }

#cms-score-player .dropdown-options button[aria-selected="true"]{ background: var(--theme); }

#cms-score-player .setting-row:has(select)::after{ content: ""; position: absolute; top: 50%; right: 32px; pointer-events: none; width: 0; height: 0; border: 4px solid transparent; border-top-color: #999; border-bottom: 0; transform: translateY(-50%); }

#cms-score-player .zoom-row{ height: 40px; }

#cms-score-player .zoom-row strong{ font-weight: 400; color: var(--font); }

#cms-score-player .zoom-buttons{ display: inline-flex; margin-left: auto; overflow: hidden; border-radius: 18px; background: #eee; }

#cms-score-player .zoom-buttons button{ width: 40px; height: 28px; color: var(--secondary); background: #eee; font: 14px/28px "yp-iconfont"; }

#cms-score-player .zoom-buttons button + button{ margin-left: 2px; }

#cms-score-player .zoom-buttons button:hover{ color: var(--accent); }

#cms-score-player .switch-row{ height: 40px; }

#cms-score-player .switch{ position: relative; width: 38px; height: 22px; padding: 0; border-radius: 16px; background: #bbb; }

#cms-score-player .switch span{ position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(0,0,0,.25); transition: left .2s; }

#cms-score-player .switch.is-on{ background: rgba(205,92,92,.35); }

#cms-score-player .switch.is-on span{ left: 18px; background: var(--accent); }

#cms-score-player .sidebar-button{ width: 100%; height: 42px; margin-bottom: 12px; border-radius: 24px; color: var(--secondary); background: var(--pure); }

#cms-score-player .sidebar-button.primary{ color: #fff; background: var(--accent); }

#cms-score-player .sidebar-button:hover{ opacity: .83; }

#cms-score-player .sidebar-button span{ margin-right: 6px; font: 18px/1 "yp-iconfont"; vertical-align: -1px; }

#cms-score-player .toast{ position: fixed; z-index: 50; left: 50%; bottom: 20px; min-width: 180px; padding: 11px 18px; border-radius: 8px; color: #fff; background: rgba(51,51,51,.9); text-align: center; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .2s, transform .2s; }

#cms-score-player .toast.show{ opacity: 1; transform: translate(-50%, 0); }

#cms-score-player .modal-backdrop{ position:fixed; inset:0; z-index:1040; background:rgba(31,25,25,.38); backdrop-filter:blur(2px); }

@media (max-width: 1220px) {

#cms-score-player .topbar-inner, #cms-score-player .workspace{ width: calc(100% - 30px); }

#cms-score-player .sheet-inner{ width: min(810px, calc(100% - 32px)); }

#cms-score-player .sheet-card, #cms-score-player .sheet-card img{ width: 100%; } }
@media (max-width: 900px) {

#cms-score-player .workspace{ height: auto; min-height: calc(100dvh - 67px); flex-direction: column; }

#cms-score-player .main-card{ height: calc(100dvh - 190px); min-height: 560px; margin-right: 0; }

#cms-score-player .score-settings{ width: 100%; flex: none; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 12px; }

#cms-score-player .score-settings .side-section, #cms-score-player .sidebar-button{ margin-bottom: 0; }

#cms-score-player .sidebar-button{ min-height: 42px; }

#cms-score-player .sidebar-button.primary{ grid-column: span 1; }

#cms-score-player .search-container{ margin-left: 24px; width: min(360px, 40vw); }

#cms-score-player .player-left{ gap: 10px; }

#cms-score-player .player-action span:last-child{ display: none; }

#cms-score-player .player-right{ margin-left: auto; } }
@media (max-width: 640px) {

#cms-score-player .topbar{ height: 52px; }

#cms-score-player .topbar-inner{ width: calc(100% - 20px); }

#cms-score-player .brand-name{ font-size: 18px; }

#cms-score-player .brand-slogan, #cms-score-player .brand-divider{ display: none; }

#cms-score-player .search-container{ flex: 1; width: auto; margin-left: 18px; }

#cms-score-player .user-identity span{ display: none; }

#cms-score-player .user-identity img{ width: 32px; height: 32px; }

#cms-score-player .workspace{ width: calc(100% - 20px); margin-top: 10px; }

#cms-score-player .main-card{ height: 70dvh; min-height: 500px; }

#cms-score-player .sheet-inner{ padding-top: 18px; }

#cms-score-player .sheet-header h1{ font-size: 24px; }

#cms-score-player .song-meta{ position: static; margin-top: 12px; }

#cms-score-player .player-shell{ flex-basis: 74px; }

#cms-score-player .section-track{ overflow-x: auto; }

#cms-score-player .section-button{ min-width: 52px; }

#cms-score-player .player-panel{ padding: 8px 12px; }

#cms-score-player .player-left{ flex: 1; justify-content: space-between; }

#cms-score-player .player-right{ gap: 3px; }

#cms-score-player .played-label{ display: none; }

#cms-score-player .score-settings{ display: flex; flex-direction: column; }

#cms-score-player .tempo-popover{ left: 8px; right: 8px; width: auto; }

#cms-score-player .track-popover{ left: 50%; right: auto; width: min(560px, calc(100vw - 24px)); }

#cms-score-player .search-panel{ position: fixed; top: 56px; left: 10px; right: 10px; }

#cms-score-player .sheet-card .mode-view{ padding: 28px 20px; }

#cms-score-player .chord-mode{ grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {

#cms-score-player *, #cms-score-player *::before, #cms-score-player *::after{ scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Respond to the reader's actual width, not just the browser breakpoint. */
@container qupu-player (max-width: 880px) { #cms-score-player .player-left{ gap: 12px; } }
@container qupu-player (max-width: 830px) {
  #cms-score-player .player-action > span:not(.action-icon), #cms-score-player .tempo-action > span{ display: none; }
}
@container qupu-player (max-width: 560px) {
  #cms-score-player .player-panel{ padding-inline: 12px; gap: 12px; }
  #cms-score-player .player-left{ gap: 8px; }
  #cms-score-player .played-label{ display: none; }
}
@container qupu-player (max-width: 380px) {
  #cms-score-player .player-panel{ padding-inline: 8px; gap: 8px; }
  #cms-score-player .player-left{ gap: 4px; }
}

/* CMS component integration: retain the incumbent article and page chrome. */
#cms-score-player { --accent:#c85b59; display:block; position:relative; max-width:100%; min-width:0; margin:0; background:#fff; color:#333; font:14px/1.5 "Microsoft Yahei",Arial,sans-serif; }
#cms-score-player [hidden] { display:none !important; }
#cms-score-player .workspace { width:100%; max-width:none; height:auto; min-height:0; display:flex; flex-direction:column; margin:0; gap:12px; }
#cms-score-player .main-card { width:100%; height:auto; min-height:0; flex:none; margin:0; border-radius:0; box-shadow:none; overflow:visible; }
#cms-score-player .sheet-scroll { height:68vh; min-height:320px; max-height:780px; overflow:auto; overscroll-behavior:contain; border:1px solid #eee; border-bottom:0; scrollbar-color:#aaa #fafafa; }
#cms-score-player .sheet-inner { width:858px; min-width:0; padding:18px 24px 36px; margin:0; }
#cms-score-player .sheet-card, #cms-score-player .functional-sheet-card { width:100%; }
#cms-score-player .sheet-header { display:grid; grid-template-columns:minmax(0,1fr) 156px; align-items:start; gap:8px 20px; padding:0; margin-bottom:20px; min-height:56px; }
#cms-score-player .sheet-header h1 { display:block; grid-column:1; grid-row:1; max-width:none; margin:0; font-size:24px; line-height:1.4; overflow-wrap:anywhere; }
#cms-score-player .song-info { grid-column:1; grid-row:2; flex-wrap:wrap; gap:6px 24px; margin:0; padding:0; }
#cms-score-player .song-meta { position:static; grid-column:2; grid-row:1 / span 2; margin:0; }
#cms-score-player .score-settings { order:-1; width:100%; min-width:0; height:auto; margin:0; padding:0; flex:none; display:flex; flex-direction:column; align-items:stretch; gap:8px; overflow:visible; }
#cms-score-player .settings-section { width:100%; min-width:0; margin:0; padding:10px 12px; border-radius:4px; border:1px solid #eee; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:8px 18px; }
#cms-score-player .settings-section .setting-row { min-width:0; height:auto; min-height:40px; margin:0; padding:0; gap:8px; }
#cms-score-player .settings-section .setting-row > span:first-child { margin-right:0; }
#cms-score-player .setting-row select { width:auto; min-width:0; max-width:none; flex:1; height:36px; padding:0 26px 0 9px; }
#cms-score-player .setting-row:has(select)::after { display:none; }
#cms-score-player .setting-row:has(select) .setting-reset { left:0; }
#cms-score-player .dropdown-selector { width:auto; min-width:0; flex:1; }
#cms-score-player .dropdown-current, #cms-score-player .dropdown-options { width:100%; }
#cms-score-player .dropdown-options { display:none; padding:4px; }
#cms-score-player .dropdown-selector.is-open .dropdown-options { display:flex; }
#cms-score-player .dropdown-options button { display:flex; align-items:center; flex:0 0 auto; min-height:36px; height:auto; padding:7px 8px; border-radius:4px; line-height:1.4; }
#cms-score-player .zoom-buttons, #cms-score-player .switch { flex-shrink:0; }
#cms-score-player .zoom-row .zoom-buttons, #cms-score-player .switch-row .switch { margin-left:0; }
#cms-score-player .settings-section .print-row { grid-column:-2 / -1; justify-content:flex-end; }
#cms-score-player .settings-section .sidebar-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:36px; width:auto; height:36px; flex:none; margin:0; padding:0 12px; border:1px solid #eee; border-radius:4px; background:var(--theme); line-height:1; white-space:nowrap; }
#cms-score-player .settings-section .sidebar-button span { margin:0; line-height:1; vertical-align:baseline; }
#cms-score-player .player-shell { height:auto; flex:none; min-height:79px; position:relative; }
#cms-score-player .player-panel { min-height:56px; height:auto; padding:10px 12px; gap:10px; }
#cms-score-player .section-button { flex-basis:auto; width:max-content; min-width:68px; align-items:center; padding:0 10px; font-size:12px; line-height:1.2; }
#cms-score-player .section-button:focus-visible { outline:2px solid #a34341; outline-offset:-2px; }
#cms-score-player .section-button.is-active { background:#f7e8e8; color:#8f3533; }
#cms-score-player .player-action { min-width:32px; }
#cms-score-player .player-action.is-active { color:#a34341; }
#cms-score-player .play-button:disabled, #cms-score-player #printButton:disabled { opacity:.5; cursor:wait; }
#cms-score-player .toast { position:absolute; bottom:10px; max-width:calc(100% - 24px); }
#cms-score-player .settings-section { position:relative; }
#cms-score-player .score-settings-feedback { position:absolute; top:-10px; right:12px; padding:0 6px; background:#fff; color:#8f3533; font-size:12px; line-height:20px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 120ms ease, visibility 0s linear 120ms; }
#cms-score-player.is-rendering .score-settings-feedback, #cms-score-player.has-render-error .score-settings-feedback { opacity:1; visibility:visible; transition-delay:0s; }
#cms-score-player .sheet-viewport { position:relative; min-width:0; }
#cms-score-player .sheet-inner { transition:width .2s ease, opacity 180ms cubic-bezier(.16,1,.3,1); }
#cms-score-player .score-render-overlay { position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(255,255,255,.58); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 160ms ease, visibility 0s linear 160ms; }
#cms-score-player.is-rendering .score-render-overlay, #cms-score-player.has-render-error .score-render-overlay { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
#cms-score-player.is-rendering .sheet-inner { opacity:.6; }
#cms-score-player .score-render-feedback { display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%; text-align:center; }
#cms-score-player .score-render-indicator { display:none; align-items:center; justify-content:center; gap:4px; height:24px; color:var(--accent); }
#cms-score-player.is-rendering .score-render-indicator { display:flex; }
#cms-score-player .score-render-indicator span { width:4px; height:20px; border-radius:2px; background:currentColor; }
#cms-score-player.is-rendering .score-render-indicator span { animation:qupu-score-pulse 800ms ease-in-out infinite; }
#cms-score-player .score-render-indicator span:nth-child(2) { animation-delay:120ms; }
#cms-score-player .score-render-indicator span:nth-child(3) { animation-delay:240ms; }
#cms-score-player .score-load-status { margin:0; padding:0; max-width:32em; color:#555; font-size:14px; line-height:1.6; }
#cms-score-player .score-load-status button { display:block; min-height:36px; margin:12px auto 0; padding:6px 16px; border:1px solid #ded8d8; border-radius:4px; color:#8f3533; background:#fff; line-height:1.5; }
@keyframes qupu-score-pulse { 0%,100% { transform:scaleY(.4); opacity:.55; } 50% { transform:scaleY(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) {
 #cms-score-player .sheet-inner, #cms-score-player .score-render-overlay { transition:none; }
 #cms-score-player.is-rendering .score-render-indicator span { animation:none; }
}
#cms-score-player .score-preview-notice { margin:0 0 12px; padding:10px 12px; background:#fff6ed; color:#774722; font-size:14px; }
#cms-score-player .score-preview-notice a { color:#9b492a; text-decoration:underline; text-underline-offset:3px; margin-left:8px; }
#cms-score-player .chord-score { margin:0; }
#cms-score-player[data-view="lyrics"] .chord-score { display:block; }
#cms-score-player .chord-token.has-chord { box-sizing:border-box; }
#cms-score-player .chord-lyric-line { cursor:pointer; }
#cms-score-player button:focus-visible, #cms-score-player [tabindex]:focus-visible { outline:2px solid #a34341; outline-offset:3px; }
#pu_pay { scroll-margin-top:88px; }
.cms-score-tabs { display:flex; gap:4px; margin:18px 0; border-bottom:1px solid #e6e6e6; }
.cms-score-tabs [role="tab"] { min-height:44px; padding:10px 22px; margin-bottom:-1px; border:1px solid transparent; background:transparent; color:#666; font:inherit; border-radius:4px 4px 0 0; }
.cms-score-tabs [role="tab"][aria-selected="true"] { color:#b14b48; border-color:#e6e6e6 #e6e6e6 #fff; background:#fff; font-weight:600; }
.cms-score-tabs [role="tab"]:focus-visible { outline:2px solid #b14b48; outline-offset:2px; }
.cms-score-build-status { margin:-8px 0 14px; color:#695b4c; font-size:13px; line-height:1.6; }
.cms-score-build-status[hidden] { display:none; }
#image-score-panel[hidden], #dynamic-score-panel[hidden], #score-reader-anchor[hidden] { display:none !important; }
@media screen and (min-width:641px) {
 #cms-score-player .sheet-inner { margin-inline:auto; }
 #cms-score-player .sheet-scroll { scrollbar-width:thin; scrollbar-color:#b3acac #f8f7f7; }
 #cms-score-player .sheet-scroll::-webkit-scrollbar { width:8px; height:8px; }
 #cms-score-player .sheet-scroll::-webkit-scrollbar-track { background:#f8f7f7; }
 #cms-score-player .sheet-scroll::-webkit-scrollbar-thumb { background:#b3acac; border:2px solid #f8f7f7; border-radius:8px; }
 #cms-score-player .sheet-scroll::-webkit-scrollbar-thumb:hover { background:#918888; }
}
@media(max-width:640px) {
 #cms-score-player .score-settings { flex-direction:column; gap:8px; }
 #cms-score-player .settings-section { display:flex; flex-wrap:wrap; align-items:center; }
 #cms-score-player .settings-section .setting-row { flex:1 1 220px; }
 #cms-score-player .settings-section .switch-row { flex:1 1 calc(100% - 132px); min-width:max-content; }
 #cms-score-player .settings-section .print-row { flex:0 0 auto; margin-left:auto; }
 #cms-score-player .sidebar-button { align-self:flex-end; display:block; }
 #cms-score-player .player-panel { flex-wrap:wrap; padding:8px; }
 #cms-score-player .player-left { gap:8px; flex:1 1 auto; }
 #cms-score-player .player-right { gap:8px; }
 #cms-score-player .player-action span:last-child { display:none; }
 #cms-score-player .sheet-header { grid-template-columns:minmax(0,1fr); min-height:92px; }
 #cms-score-player .sheet-header h1 { font-size:22px; }
 #cms-score-player .song-meta { position:static; grid-column:1; grid-row:3; margin-top:2px; }
 #cms-score-player .sheet-scroll { height:65vh; min-height:320px; }
 #cms-score-player .track-popover { left:50%; right:auto; width:min(560px, calc(100vw - 24px)); transform:translate(-50%, -50%); }
}
@media print {
 /* Keep only the active dynamic score and remove page-column constraints. */
 body:has(#dynamic-score-panel:not([hidden]) #cms-score-player) { display:block !important; width:100% !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:#fff !important; }
 body:has(#dynamic-score-panel:not([hidden]) #cms-score-player) :not(#cms-score-player):not(#cms-score-player *):not(:has(#cms-score-player)) { display:none !important; }
 body:has(#dynamic-score-panel:not([hidden]) #cms-score-player) :has(#cms-score-player) { display:block !important; position:static !important; float:none !important; width:100% !important; max-width:none !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; box-shadow:none !important; transform:none !important; }
 #cms-score-player .score-render-overlay, #cms-score-player .score-settings, #cms-score-player .player-shell, #cms-score-player .track-popover, #cms-score-player .score-preview-notice, #cms-score-player .score-load-status, #cms-score-player .toast, #cms-score-player .modal-backdrop, #cms-score-player .sheet-selection-overlay, #cms-score-player .sheet-beat-cursor { display:none !important; }
 #cms-score-player, #cms-score-player .workspace, #cms-score-player .main-card { display:block; position:static; width:100%; max-width:none; height:auto; min-height:0; margin:0; padding:0; overflow:visible; }
 #cms-score-player .sheet-scroll { height:auto; min-height:0; max-height:none; overflow:visible; border:0; }
 #cms-score-player .sheet-inner { width:100% !important; padding:0; opacity:1 !important; }
 #cms-score-player .sheet-header { min-height:0; margin:0 0 16px; }
 #cms-score-player .sheet-header h1 { display:block; max-width:none; margin:0 0 8px; font-size:22px; }
 #cms-score-player .song-meta { position:static; margin-top:10px; }
 #cms-score-player #sheetList, #cms-score-player[data-view="functional"] .functional-sheet-list, #cms-score-player[data-view="numbered"] .functional-sheet-list { display:block; }
 #cms-score-player .sheet-card, #cms-score-player .functional-sheet-card, #cms-score-player .chord-score { width:100% !important; }
 #cms-score-player .sheet-card svg.sheet-image, #cms-score-player .sheet-card img, #cms-score-player .functional-svg, #cms-score-player .chord-solo-row > svg { width:100% !important; max-width:100%; height:auto !important; }
 #cms-score-player .chord-score { font-size:19.6px !important; }
 #cms-score-player .sheet-card, #cms-score-player .functional-sheet-card, #cms-score-player .chord-lyric-line, #cms-score-player .chord-solo-row { break-inside:avoid; page-break-inside:avoid; }
}