/* Reused from the approved visual-prototype workbench-v2.css and related shell styles. */
:root { --paper:#faf9f4; --ink:#111b1a; --green:#07594b; --sage:#eaf1eb; --muted:#61758b; --line:#d9e1dc; --red:#a63c38; --violet:#5759a4; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:var(--green); text-decoration:none; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:var(--green); border:1px solid var(--line); background:transparent; border-radius:6px; min-height:44px; padding:10px 18px; }
button:hover,a:hover { filter:brightness(.89); }
button:disabled { cursor:default; opacity:.42; }
:focus-visible { outline:3px solid #559b83; outline-offset:4px; }
main:focus { outline:none; }
input,select { min-height:48px; border:1px solid #bbcad0; border-radius:6px; background:#fffdf9; padding:10px 14px; color:var(--ink); max-width:100%; }
input { width:100%; }
input::placeholder { color:var(--muted); opacity:.85; }
label { display:block; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-family:"Songti SC","STSong","Noto Serif CJK SC",serif; }
h1 { font-size:clamp(40px,5vw,66px); font-weight:900; line-height:1.18; letter-spacing:-.035em; }
h2 { font-size:30px; }
h3 { font-size:22px; font-weight:600; }
p,small { color:var(--muted); line-height:1.65; }
small { font-size:14px; }
.icon { display:inline-block; flex-shrink:0; width:22px; height:22px; vertical-align:middle; fill:currentColor; }
:root { --v2-brass:#b77a18; --v2-jade:#006052; --v2-paper:#fffefa; --v2-bg:#f2f3ee; }
html:has(.page.home),body:has(.page.home) { overflow:hidden; background:var(--v2-bg); }
.workbench-v2-header { height:72px; display:flex; align-items:center; gap:22px; padding:0 3.2%; border-bottom:1px solid #d9dfda; background:#fffefa; position:relative; z-index:20; }
.v2-brand .brand-lockup { width:166px; height:56px; }
.v2-score-title { display:flex; align-items:center; gap:12px; min-width:260px; padding-left:22px; border-left:1px solid #d9dfda; }
.v2-score-title strong { font:700 24px/1 "Songti SC","STSong",serif; white-space:nowrap; }
.score-kind,.v2-favorite { min-height:36px; padding:6px; border:0; color:#52665f; white-space:nowrap; }
.score-kind .icon { width:14px; height:14px; }
.score-switch { position:relative; }
.score-switch summary { display:flex; align-items:center; gap:4px; list-style:none; cursor:pointer; }
.score-switch summary::-webkit-details-marker { display:none; }
.score-switch nav { position:absolute; z-index:31; top:42px; left:0; display:grid; min-width:190px; padding:7px; border:1px solid #ced8d1; border-radius:10px; background:#fffefa; box-shadow:0 14px 40px #173c3024; }
.score-switch nav a { display:flex; justify-content:space-between; gap:18px; padding:10px; border-radius:7px; color:#294d42; font-size:13px; }
.score-switch nav a:hover { background:#edf4ef; }
.score-switch nav small { color:#7b8882; white-space:nowrap; }
.v2-favorite { width:38px; }
.v2-score-facts { display:flex; align-items:center; gap:16px; margin-left:auto; white-space:nowrap; }
.transpose-control { position:relative; }
.transpose-control summary { display:flex; align-items:center; gap:10px; padding:12px 4px; color:#496159; list-style:none; font-size:13px; }
.transpose-control summary::-webkit-details-marker { display:none; }
.transpose-control summary b { color:var(--v2-jade); }
.transpose-control summary i { color:#809087; font-style:normal; }
.transpose-control>.transpose-popover { position:absolute; z-index:30; top:50px; left:50%; transform:translateX(-50%); width:264px; padding:16px; border:1px solid #c8d3cc; border-radius:14px; background:#fffefa; box-shadow:0 18px 48px #173c302b; }
.transpose-popover>strong { display:block; margin-bottom:12px; color:#294d42; font:700 17px/1.2 "Songti SC","STSong",serif; }
.transpose-fields { display:grid; gap:8px; }
.transpose-fields label { display:grid; grid-template-columns:58px 96px; align-items:center; justify-content:space-between; gap:14px; }
.transpose-fields label>span { white-space:nowrap; }
.transpose-control label { font-size:12px; color:#62746d; }
.transpose-control select { width:96px; min-height:38px; margin:0; padding:5px 9px; border-color:#b7c7be; border-radius:8px; background:#fff; font-weight:650; }
.transpose-control small { display:block; margin-top:11px; font-size:11px; line-height:1.5; }
.v2-header-actions { display:flex; align-items:center; gap:18px; }
.v2-header-actions>a { display:flex; align-items:center; gap:6px; color:#164c40; font-size:13px; white-space:nowrap; }
.v2-header-actions>a .icon { width:18px; height:18px; }
.v2-header-actions .account-menu { position:relative; }
.v2-header-actions .account-menu>nav { position:absolute; right:0; top:50px; display:grid; gap:0; min-width:150px; padding:8px 14px; border:1px solid #d1dad4; border-radius:10px; background:#fffefa; box-shadow:0 12px 32px #173c3020; }
.v2-header-actions .account-menu>nav a,.v2-header-actions .account-menu>nav button { min-height:38px; padding:8px 2px; border:0; border-bottom:1px solid #e8ebe8; text-align:left; }
.workbench-v2 { position:relative; display:flex; flex-direction:column; height:calc(100dvh - 72px); min-height:0; background:var(--v2-bg); }
.v2-score-stage { container-type:size; flex:1 1 auto; min-height:0; overflow:auto; padding:16px 3.2% 72px; scrollbar-color:#bdc8c1 transparent; }
.gtp-stage { padding-top:10px; }
.gtp-rail-note { margin-left:auto; color:#718078; font-size:12px; }
.v2-pages { min-height:100%; }
.v2-spread { display:flex; justify-content:center; gap:0; min-height:100%; }
.v2-spread:not(.current) { display:none; }
.v2-paper { position:relative; flex:0 1 50%; max-width:710px; margin:0; overflow:hidden; background:var(--v2-paper); border:1px solid #dfe2de; box-shadow:0 8px 24px #173c3012; }
.v2-paper:first-child { border-radius:10px 1px 1px 10px; }
.v2-paper:last-child { border-radius:1px 10px 10px 1px; }
.v2-paper img { display:block; width:100%; height:auto; }
.v2-paper figcaption { display:none; }
.page-turner { position:absolute; z-index:7; inset:50% 1.1% auto; transform:translateY(-50%); display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.page-turner button { display:grid; place-items:center; width:38px; height:54px; min-height:54px; padding:0; border:1px solid #c7d2cb; border-radius:19px; background:#fffefae8; color:var(--v2-jade); box-shadow:0 6px 20px #173c301a; font:28px/1 Georgia,serif; pointer-events:auto; }
.page-turner button:disabled { visibility:hidden; }
.page-turner output { position:absolute; top:calc(50% + 30vh); left:50%; transform:translateX(-50%); padding:5px 10px; border-radius:14px; background:#fffefadc; color:#536c63; font-size:11px; letter-spacing:.08em; }
.v2-dock { position:absolute; z-index:8; left:3.2%; right:3.2%; bottom:max(10px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:auto minmax(420px,1fr) auto; align-items:center; gap:18px; height:54px; pointer-events:none; }
.dock-organize,.section-nav,.dock-player { display:flex; align-items:center; height:54px; border:1px solid #cad4ce; background:#fffefaeF; box-shadow:0 8px 26px #173c3014; backdrop-filter:blur(12px); pointer-events:auto; }
.dock-organize { border-radius:27px; }
.dock-organize button,.dock-player button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:7px 13px; border:0; color:#1b5346; font-size:12px; white-space:nowrap; }
.dock-organize button { border-radius:22px; }
.dock-organize button[aria-pressed="true"],.organize-open .dock-organize button { color:#9b6310; background:#fff3dc; }
.tablet-label { display:none; }
.section-nav { justify-content:center; gap:18px; min-width:0; padding:0 18px; border-radius:27px; overflow-x:auto; scrollbar-width:none; }
.section-nav button { flex:0 0 auto; min-height:42px; padding:6px 2px; border:0; border-bottom:2px solid transparent; border-radius:0; color:#52675f; font-size:12px; }
.section-nav button.selected { border-bottom-color:var(--v2-brass); color:#9b6310; }
.dock-player { justify-content:flex-end; gap:2px; padding:0 6px; border-radius:27px; }
.dock-player .dock-utility.selected { color:#9b6310; background:#fff3dc; border-radius:20px; }
.transport-button { width:42px; height:42px; padding:0!important; border-radius:50%!important; background:var(--v2-jade)!important; color:white!important; }
.play-glyph { display:inline-block; width:0; height:0; margin-left:2px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
.stop-button { background:#fffefa!important; color:var(--v2-jade)!important; border:1px solid #b9c8c0!important; }
.stop-button>span { width:11px; height:11px; border-radius:2px; background:currentColor; }
.fullscreen-button .icon { width:18px; height:18px; }
.workbench-v2:fullscreen { height:100dvh; min-height:100dvh; overflow:hidden; background:var(--v2-bg); }
.workbench-v2::backdrop { background:var(--v2-bg); }
@media (max-width:1120px) {
  .workbench-v2-header { height:104px; display:grid; grid-template-columns:auto minmax(160px,1fr) auto; grid-template-rows:58px 45px; gap:0 14px; padding-inline:18px; }
  .v2-brand .brand-lockup { width:125px; height:48px; }
  .v2-score-title { min-width:0; padding-left:14px; }
  .v2-score-title strong { font-size:20px; }
  .v2-score-facts { grid-column:1/-1; grid-row:2; justify-content:center; width:100%; border-top:1px solid #eef0ed; }
  .v2-header-actions { justify-self:end; gap:12px; }
  .v2-header-actions>a { font-size:12px; }
  .v2-header-actions>a .icon { display:none; }
  .workbench-v2 { height:calc(100dvh - 104px); }
  .v2-dock { left:18px; right:18px; grid-template-columns:auto minmax(250px,1fr) auto; gap:8px; }
  .section-nav { gap:12px; padding-inline:12px; }
  .dock-player .dock-utility span { display:none; }
  .dock-player .dock-utility { width:38px; padding:7px; }
  .desktop-label { display:none; }
  .tablet-label { display:inline; }
}
@media (pointer:coarse) {
  .v2-score-stage { padding:0 24px 74px; background:#fffefa; }
  .v2-pages { display:block; width:100%; background:#fffefa; }
  .v2-spread,.v2-spread:not(.current) { display:block; min-height:0; }
  .v2-paper { width:100%; max-width:none; border:0; border-radius:0!important; box-shadow:none!important; overflow:visible; }
  .v2-paper+ .v2-paper { margin-top:0; }
  .v2-paper figcaption { display:none; }
  .v2-paper:first-child img { margin-bottom:-1px; }
  .gtp-stage { padding:0 18px 74px; background:var(--v2-bg); }
  .gtp-rail-note { display:none; }
  .inline-play { width:38px; height:38px; min-height:38px; }
  .page-turner { display:none; }
  .organize-rail,.correction-toolbar { overflow-x:auto; padding-inline:18px; }
  .correction-toolbar>strong { font-size:18px; }
  .correction-tabs { gap:16px; margin-left:10px; }
  .correction-actions { position:sticky; right:0; padding-left:12px; background:#fffefa; }
  .v2-dock { position:fixed; left:12px; right:12px; grid-template-columns:auto minmax(0,1fr) auto; }
  .section-nav { justify-content:flex-start; }
  .dock-player { padding-inline:4px; }
  .fullscreen-button span { display:none; }
  .fullscreen-button { width:38px; padding:7px!important; }
}
@media (max-width:720px) {
  .workbench-v2-header { grid-template-columns:auto 1fr auto; height:96px; grid-template-rows:54px 41px; padding-inline:10px; }
  .v2-brand .brand-lockup { width:92px; }
  .v2-score-title { gap:5px; padding-left:8px; }
  .v2-score-title strong { font-size:17px; }
  .score-kind { font-size:10px; }
  .v2-favorite { display:none; }
  .v2-header-actions { gap:8px; }
  .v2-header-actions>a span { display:none; }
  .v2-header-actions>a .icon { display:inline-block; }
  .v2-header-actions .avatar { width:36px; height:36px; font-size:20px; }
  .transpose-control summary { gap:5px; font-size:11px; }
  .transpose-control summary span { font-size:0; }
  .transpose-control summary span b { font-size:11px; }
  .transpose-control>.transpose-popover { position:fixed; top:98px; right:auto; left:50%; transform:translateX(-50%); width:264px; }
  .workbench-v2 { height:calc(100dvh - 96px); }
  .v2-score-stage { padding-inline:10px; }
  .v2-dock { grid-template-columns:auto 1fr auto; }
  .dock-player .dock-utility { display:none; }
}

.gtp-paper { aspect-ratio:780/var(--paper-height,1103); container-type:inline-size; background:#fffefa; }
.gtp-paper-heading { height:var(--page-heading,10.8794%); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:0; border:0; background:transparent; }
.gtp-paper-heading strong { font:600 5cqw/1.3 "Songti SC",serif; color:#191917; }
.gtp-paper-heading small { font-size:2.2cqw; color:#66736e; }
.gtp-paper-music { margin-inline:3.8462%; }
.gtp-paper-music object,.gtp-paper-music > svg { display:block; width:100%; height:auto; border:0; }
.gtp-paper-music > svg { max-width:none; }
.gtp-paper .measure-layer,.gtp-paper .measure-hit { pointer-events:none; }
.gtp-paper .measure-hit:focus-visible { pointer-events:auto; }
.gtp-paper figcaption { display:block; position:absolute; bottom:2%; left:0; right:0; text-align:center; font-size:2cqw; color:#6e7c75; }
.gtp-loading,.gtp-load-error { margin:auto; color:#66736e; }
@media (pointer:coarse) {
  .gtp-stage { padding:0 24px 74px; background:#fffefa; }
  .gtp-empty-page { display:none; }
  .gtp-paper figcaption { display:none; }
}

@media (pointer:coarse) {
  .gtp-paper { aspect-ratio:auto; padding-bottom:12px; }
  .gtp-paper-heading { height:auto; min-height:96px; padding:16px 0; }
  .gtp-paper:not([data-page="1"]) .gtp-paper-heading { display:none; }
}

/* Desktop pages keep their generated geometry, regardless of viewport height. */
.v2-score-stage[data-layout="desktop"] .v2-pages { display:flex; width:calc(var(--desktop-paper-width) * var(--visible-pages)); min-height:0; margin-inline:auto; }
.v2-score-stage[data-layout="desktop"] .v2-spread { display:contents; }
.v2-score-stage[data-layout="desktop"] .v2-paper { display:none; }
.v2-score-stage[data-layout="desktop"] .v2-paper.visible-page { display:block; flex:none; width:var(--desktop-paper-width); height:calc(var(--desktop-paper-width) * var(--paper-height,1103) / 780); max-width:none; }
.v2-score-stage[data-layout="desktop"] .v2-paper.left-page { border-radius:10px 1px 1px 10px; }
.v2-score-stage[data-layout="desktop"] .v2-paper.right-page { border-radius:1px 10px 10px 1px; }
.v2-score-stage[data-layout="desktop"] .v2-paper.single-page { border-radius:10px; }
.v2-score-stage[data-layout="desktop"] .v2-paper.visible-page.left-page:not(.single-page)::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; }
.v2-score-stage[data-layout="desktop"] .v2-paper.visible-page.left-page:not(.single-page)::after { box-shadow:inset -12px 0 18px -20px #1c3028; }
.v2-score-stage[data-layout="desktop"] .gtp-paper-music object,.v2-score-stage[data-layout="desktop"] .gtp-paper-music > svg { margin-top:var(--row-gap,0cqw); }
@media (pointer:coarse) { .gtp-paper-music object,.gtp-paper-music > svg { margin-top:0; } }
@media (pointer:fine) and (max-width:720px) {
  .v2-dock { display:flex; overflow-x:auto; pointer-events:auto; }
  .v2-dock>div,.v2-dock>nav { flex:none; }
  .section-nav { max-width:180px; }
  .dock-player .dock-utility { display:flex; }
}

.v2-score-stage[data-layout="desktop"] .v2-paper img { width:100%; height:100%; object-fit:contain; object-position:top; }

.dock-player .metronome-tone { flex:none; min-height:32px; padding:4px 8px; margin-left:-8px; border-radius:7px; background:#edf1ed; color:#64736b; font-size:10px; }
.dock-player .metronome-tone:hover { background:#e1e9e2; color:#255d4e; }
.dock-player .beat-pulse { color:#a26819; background:#fff0d7; border-radius:20px; }
@media (pointer:coarse) and (max-width:720px) {
  .v2-dock { display:flex; overflow-x:auto; pointer-events:auto; }
  .v2-dock>div,.v2-dock>nav { flex:none; }
  .section-nav { max-width:100px; }
  .dock-player .dock-utility { display:flex; width:34px; padding:7px; }
}

.v2-score-title { min-width:0; }
.score-switch { min-width:0; }
.score-switch summary { gap:14px; min-height:48px; padding:4px 6px; border-radius:6px; }
.score-switch[open] summary { position:relative; z-index:22; }
.score-menu-scrim { position:fixed; z-index:21; inset:0; width:100vw; height:100dvh; min-height:0; padding:0; border:0; border-radius:0; background:transparent; cursor:default; }
.score-menu-scrim:hover { background:transparent; filter:none; }
.score-switch summary:hover { background:#f0f4ee; }
.score-switch summary>strong { overflow:hidden; text-overflow:ellipsis; max-width:180px; color:#193f34; }
.score-switch summary>.icon { flex:0 0 14px; width:14px; color:#718478; }
.score-credits { display:grid; gap:3px; min-width:0; }
.score-credits small { display:block; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.4; color:#819087; }
.score-credits b { font-weight:400; color:#526b5e; }
.score-switch nav { top:calc(100% + 10px); width:260px; min-width:0; max-width:calc(100vw - 32px); padding:12px; }
.score-switch nav p { margin:0 8px 8px; font-size:11px; color:#7a8a7e; }
.score-switch nav a { display:flex; align-items:center; width:100%; min-height:36px; padding:7px 8px; border:0; border-radius:6px; background:transparent; color:#294d42; text-align:left; }
.score-switch nav a:hover { background:#edf4ef; }
.score-switch nav a strong { display:block; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 14px/1.4 "Songti SC","STSong",serif; }
@media(max-width:1120px) {
  .score-switch summary { gap:8px; }
  .score-switch summary>strong { max-width:160px; }
  .score-credits small { max-width:110px; font-size:10px; }
}
@media(max-width:720px) {
  .score-switch summary { gap:6px; }
  .score-switch summary>strong { max-width:90px; }
  .score-credits small { max-width:85px; font-size:9px; }
  .score-switch nav { position:fixed; top:60px; left:10px; right:10px; width:auto; max-width:none; }
}

@media(pointer:coarse) {
  .score-switch nav a { min-height:44px; }
}

.bpm-control { position:relative; padding-left:16px; border-left:1px solid #dfe4e0; color:#435e55; }
.tempo-trigger { display:flex; align-items:center; gap:5px; min-height:40px; padding:6px 7px; border:1px solid transparent; border-radius:8px; color:#435e55; font-size:12px; background:transparent; touch-action:pan-y; user-select:none; cursor:ew-resize; }
.tempo-trigger strong { flex:0 0 3ch; width:3ch; color:#294d42; font-size:15px; font-variant-numeric:tabular-nums; text-align:right; }
.tempo-drag-hint { margin-left:3px; color:#84928a; font-size:15px; }
.account-entry { display:inline-flex; }
.account-entry .account-menu>nav { z-index:30; width:270px; max-width:calc(100vw - 32px); padding:12px 20px; }
.account-identity { display:flex; align-items:center; gap:14px; padding:8px 0 18px; border-bottom:1px solid #e1e6dc; }
.account-identity strong,.account-identity small { display:block; }
.account-identity strong { font-size:17px; }
.account-identity small { margin-top:5px; font-size:12px; color:#778279; }
.account-entry .account-menu>nav a { display:flex; align-items:center; gap:12px; min-height:50px; width:100%; padding:10px 0; border:0; background:transparent; color:#29473a; font-size:14px; }
.account-menu>nav a .icon:last-child:not(:first-child) { margin-left:auto; width:14px; }
/* Prototype assets and shell controls; unconnected controls remain disabled. */
html,body { height:100%; overflow:hidden; background:var(--v2-bg); }
[hidden] { display:none!important; }
.brand { display:flex; align-items:center; flex-shrink:0; color:#111; }
.v2-brand { padding:0; border:0; border-radius:0; background:transparent; }
.brand .brand-lockup { display:block; position:relative; width:166px; height:56px; overflow:hidden; }
.brand-lockup img { display:block; width:100%; height:100%; object-fit:contain; }
.brand-lockup picture { display:block; width:100%; height:100%; }
.avatar { width:44px; height:44px; display:inline-flex; justify-content:center; align-items:center; border-radius:50%; color:white; background:var(--green); font:26px Georgia,serif; flex-shrink:0; }
.account-menu summary { list-style:none; padding:0; }
.account-menu summary::-webkit-details-marker { display:none; }
.v2-header-actions .library-entry,.v2-header-actions .import-entry { display:flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:transparent; color:#164c40; font-size:13px; white-space:nowrap; }
.v2-header-actions .library-entry .icon,.v2-header-actions .import-entry .icon { width:18px; height:18px; }
.transpose-summary { display:flex; align-items:center; gap:10px; padding:12px 4px; border:0; color:#496159; font-size:13px; }
.transpose-summary b { color:var(--v2-jade); }
.transpose-summary i { color:#809087; font-style:normal; }
.score-switch nav a[aria-current] { background:#edf4ef; }
.v2-status { padding:14px; text-align:center; font-size:13px; }
.v2-batch-note { position:absolute; z-index:8; bottom:70px; left:3.2%; right:3.2%; text-align:center; color:#7b8882; font-size:11px; pointer-events:none; }
.v2-batch-note a { pointer-events:auto; color:#8a6d38; }
.workbench-v2.v2-fullscreen { position:fixed; inset:0; z-index:100; height:100dvh; }
.dock-player .mute-toggle { min-width:44px; }
.dock-player .mute-toggle span { display:inline!important; }
.dock-player .dock-utility .icon,.dock-player .fullscreen-button .icon { display:inline-block; }
.dock-player .mute-toggle[aria-pressed="false"] .mute-on { display:none; }
.dock-player .mute-toggle[aria-pressed="true"] .mute-on { display:inline-block; }
.dock-player .mute-toggle[aria-pressed="true"] .mute-off { display:none; }
.dock-player [data-original][aria-pressed="true"] { color:#9b6310; background:#fff3dc; border-radius:20px; }
@media (max-width:1120px) {
  .v2-brand .brand-lockup { width:125px; height:48px; }
  .v2-header-actions .library-entry,.v2-header-actions .import-entry { font-size:12px; }
  .v2-batch-note { font-size:10px; }
}
@media (max-width:720px) {
  .v2-brand .brand-lockup { width:92px; }
  .transpose-summary { gap:5px; font-size:11px; }
  .transpose-summary span { font-size:0; }
  .transpose-summary span b { font-size:11px; }
  .v2-header-actions .library-entry,.v2-header-actions .import-entry { gap:3px; }
  .v2-header-actions .import-entry span { display:none; }
  .bpm-control { padding-left:8px; }
  .tempo-drag-hint { display:none; }
}