/* Workspace: the library beside a score canvas. Controls, player, editor and popovers come from ui.css. The website's look:
   grey paper, Inter (the website's own file, /assets/fonts), flat sheets. */
@font-face{font-family:"ScoreStarling Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-variable.woff2) format("woff2")}
:root{
  --app:#efefed;--bg:#f9f9f8;--card:#f9f9f8;--card-solid:#ffffff;--card-shadow:none;
  --sheet-border:rgba(15,14,18,.1);--sheet-shadow:none;
  --stage:#efefed;--glass:rgba(249,249,248,.9);
  --font:"ScoreStarling Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"ScoreStarling Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rail:var(--rail-width,276px);
}
:root[data-theme=dark]{
  --app:#121311;--bg:#1a1b19;--card:#1f201e;--card-solid:#242523;--card-shadow:none;
  --sheet-border:rgba(255,255,255,.07);--sheet-shadow:0 0 0 1px rgba(0,0,0,.25);
  --stage:#141513;--paper:#20211f;--pop-bg:#262725;--glass:rgba(38,39,37,.86);
}
html,body{height:100%;margin:0}
body{background:var(--app);overflow:hidden}
a{color:inherit}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);height:100vh;height:100dvh}
/* Skip to score: the first Tab stop while a score is open, out of sight until the keyboard reaches it. */
.skip-link{position:fixed;z-index:60;top:10px;left:12px;padding:8px 14px;border-radius:999px;background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-pop);font-size:13px;font-weight:600;text-decoration:none;transform:translateY(calc(-100% - 20px))}
.skip-link:focus-visible{transform:none;outline:2px solid var(--accent);outline-offset:2px}
body:not([data-view="score"]) .skip-link{display:none}

/* Library */
.library{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 10px 10px 12px}
/* Drag handles (resize.js): the library's right edge and the open right panel's left edge. */
.side-handle{position:absolute;z-index:20;top:0;bottom:0;width:10px;cursor:col-resize;touch-action:none;outline:none;transform:translateX(50%)}
.side-handle::after{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:2px;margin-left:-1px;border-radius:2px;background:var(--accent);opacity:0;transition:opacity .15s}
.side-handle:hover::after{opacity:.5;transition-delay:.12s}
.side-handle:focus-visible::after,.side-handle.active::after{opacity:1;transition-delay:0s}
.library>.side-handle{right:0}
:root.resizing{cursor:col-resize}
:root.resizing body{-webkit-user-select:none;user-select:none}
:root.resizing iframe{pointer-events:none}
/* Two fingers zoom the score, not the whole page (ui.js), so the pages leave pinching to script. */
:is(.score-pages,.notation-pages){touch-action:pan-x pan-y}
.library-head{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 0 0 6px}
.brand{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--text);font:400 20px/1 var(--display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand .mark{width:28px;height:28px;margin:0}
.new-score{display:flex;align-items:center;gap:9px;height:40px;margin:10px 0 14px;padding:0 14px;border:1px solid var(--border-2);border-radius:12px;background:var(--card-solid);font-size:14px;font-weight:500;box-shadow:0 1px 2px rgba(36,40,34,.06);transition:border-color .15s,background-color .15s,transform .12s}
.new-score:hover{border-color:var(--text-3)}
/* Without an account (guest.py): a sign-up card instead of the score list, a line over the score, a sign-up button on a phone. */
/* Cloudflare Turnstile for a guest (app.js humanCheck): runs unseen, and opens this dialog only when Cloudflare wants a tick. */
.human-dialog{width:min(360px,calc(100vw - 32px));padding:22px 20px 20px;border:1px solid var(--card-border);border-radius:12px;background:var(--pop-bg);color:var(--text);box-shadow:var(--shadow-pop);text-align:center}
.human-dialog[open]{animation:rise .14s ease}
.human-dialog::backdrop{background:rgba(20,20,18,.38)}
.human-dialog h2{margin:0 0 16px;font-size:17px}
.human-check{display:flex;justify-content:center;min-height:65px}
.guest-card{margin:0 0 12px;padding:14px 14px 12px;border:1px solid var(--accent-border);border-radius:12px;background:var(--accent-soft)}
.guest-card strong{display:block;margin-bottom:6px;font-size:15px;font-weight:600}
.guest-card ul{display:grid;gap:4px;margin:0 0 12px;padding:0;list-style:none;font-size:13px;color:var(--text-2)}
.guest-card li::before{content:"✓";margin-right:7px;color:var(--accent)}
.guest-card li:empty{display:none}
.guest-card .button{width:100%;justify-content:center}
.guest-top,.guest-card .button,.guest-banner .button{text-decoration:none}
.guest-signin{display:block;margin-top:8px;font-size:13px;color:var(--text-2);text-align:center}
.guest-signin a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
:root[data-guest] .library :is(.tabs,.job-list,.list-note,.pager){display:none}
:root[data-guest] .library-foot{margin-top:auto}
:root[data-guest] #new-score-top{display:none}
.guest-top{margin-right:4px}
.guest-banner{display:flex;align-items:center;gap:12px;margin:10px 16px 0;padding:9px 10px 9px 14px;border:1px solid var(--accent-border);border-radius:8px;background:var(--accent-soft);font-size:14px;line-height:1.4}
.guest-banner>span{flex:1;min-width:0}
.guest-banner strong{font-weight:600}
.guest-banner .button{flex:none}
:root[data-library=collapsed] .guest-card{display:none}
.guest-lock{position:relative;flex:none;width:calc(100% * var(--zoom,1));max-width:calc(var(--natural,840px) * var(--zoom,1));aspect-ratio:840/300;min-height:260px;margin:-22px auto 0;overflow:hidden;border-radius:0 0 8px 8px;background:var(--paper);box-shadow:-1px 0 var(--page-edge),1px 0 var(--page-edge),0 1px var(--page-edge)}  /* The page's edge on its sides and foot only: no seam where it meets the page */
.score-pages>svg.guest-cut{border-bottom-left-radius:0;border-bottom-right-radius:0;clip-path:inset(-2px -2px 0 -2px)}
.guest-lock-art{display:block;width:100%;height:auto;margin-top:var(--art-top,-12%);filter:blur(2.5px);opacity:.7;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.35) 45%,transparent 85%);mask-image:linear-gradient(#000,rgba(0,0,0,.35) 45%,transparent 85%)}
.guest-lock-card{position:absolute;z-index:1;left:50%;bottom:24px;display:grid;justify-items:center;gap:8px;width:min(360px,calc(100% - 32px));box-sizing:border-box;padding:20px 22px;border:1px solid var(--border);border-radius:16px;background:var(--bg);box-shadow:var(--shadow-pop);text-align:center;transform:translateX(-50%)}
.guest-lock-card strong{font-size:17px;font-weight:600}
.guest-lock-card span{font-size:14px;color:var(--text-2)}
.guest-lock-card small{font-size:13px;color:var(--text-2)}
.guest-lock-card small a{color:var(--text)}
.guest-lock-card .button{justify-self:stretch;margin-top:6px;text-decoration:none}
.new-score:active{transform:scale(.985)}
.new-score svg{width:17px;height:17px;color:var(--accent)}
/* The way to Starling's own page (/agent), under New score once the account has Starling (agent-chat.js shows it):
   the bird's silhouette, its name and beta. */
.starling-link{display:flex;align-items:center;gap:9px;height:40px;margin:-6px 0 12px;padding:0 10px 0 13px;border-radius:12px;color:var(--text);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .15s}
.starling-link:hover{background:var(--fill)}
.starling-link .sl-mascot{--sl-size:19px}
.starling-link .beta-tag{margin-left:auto}
body[data-view=upload] .new-score{border-color:var(--accent-border);background:var(--accent-soft)}
.tabs{display:flex;gap:2px;margin:0 0 6px}
.tabs button{height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;transition:background-color .15s,color .15s}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected=true]{background:var(--fill-strong);color:var(--text)}
.job-list{flex:1;min-height:0;margin:0 -6px;padding:2px 6px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--fill-strong) transparent}
.job{display:flex;align-items:center;gap:10px;width:100%;margin:1px 0;padding:7px 8px;border:0;border-radius:8px;background:transparent;text-align:left;transition:background-color .12s}
.job:hover{background:var(--fill)}
.job[aria-current=true]{background:var(--fill-strong)}
.job-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--card-solid);color:var(--text-2);box-shadow:0 0 0 1px var(--border)}
.job-icon svg{width:16px;height:16px}
.job[aria-current=true] .job-icon{color:var(--accent)}
.job[data-state=failed] .job-icon{color:var(--danger)}
.job[data-state=active] .job-icon svg{display:none}
.job[data-state=active] .job-icon::before{content:"";width:13px;height:13px;border-radius:50%;border:2px solid var(--track);border-top-color:var(--accent);animation:spin .8s linear infinite}
.job-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.job-skeleton{display:flex;align-items:center;gap:10px;margin:1px 0;padding:7px 8px}
.job-skeleton>.skeleton{flex:none;width:32px;height:32px;border-radius:8px}
.job-skeleton>span:last-child{display:grid;flex:1;gap:7px}
.job-skeleton>span:last-child .skeleton{width:72%;height:10px}
.job-skeleton>span:last-child .skeleton+.skeleton{width:44%;height:8px}
.job-skeleton:nth-child(2)>span:last-child .skeleton:first-child{width:58%}
.job-skeleton:nth-child(3)>span:last-child .skeleton:first-child{width:80%}
.job-skeleton:nth-child(4)>span:last-child .skeleton:first-child{width:50%}
.job-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job-meta{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-note{margin:8px 8px;font-size:13px;color:var(--text-2)}
.list-note:empty{display:none}
.pager{display:flex;justify-content:center;gap:4px;padding:6px 0 0}
/* Library foot from account.js: the signed-in account as a row whose menu opens upward, or only the
   theme switch in the local workspace. login.css and the website style the same menu in their tokens. */
.library-foot{min-height:57px;margin:8px -4px 0;padding-top:8px;border-top:1px solid var(--border)}
.account{position:relative}
.account-button{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 10px 0 8px;border:0;border-radius:12px;background:transparent;text-align:left;transition:background-color .12s}
.account-button:hover,.account-button[aria-expanded=true]{background:var(--fill)}
.account-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-border);color:var(--accent);font:600 13px/1 var(--font)}
.account-label{flex:1;min-width:0;overflow:hidden;font-size:14px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.account-button>.account-icon{width:16px;height:16px;color:var(--text-3)}
.account-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:80;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--pop-bg);box-shadow:var(--shadow-pop);animation:rise .14s ease}
.account-avatar{position:relative;overflow:hidden}
.account-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.account-avatar.has-image{color:transparent}
.account-menu:focus{outline:none}
.account-head{display:flex;align-items:center;gap:10px;padding:6px 8px 10px}
.account-head .account-avatar{width:34px;height:34px;font-size:14px}
.account-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.account-caption{font-size:12px;color:var(--text-3)}
.account-caption[aria-busy=true]{min-width:128px;min-height:16px;border-radius:6px;background:var(--fill);color:transparent}
.account-email{overflow:hidden;font-size:14px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.account-section{padding:4px 0 0;margin-top:4px;border-top:1px solid var(--border)}
.account-item{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:8px;background:none;font-size:14px;color:var(--text);text-align:left;text-decoration:none}
.account-item:hover,.account-item:focus-visible{background:var(--fill);outline:none}
.account-balance{height:auto;min-height:56px;padding:8px 12px}
.account-balance .account-plan{font-size:14px;font-weight:600}
.account-balance>.account-icon:last-child{margin-left:auto;flex:none;color:var(--text-3)}
.account-item .account-icon{width:17px;height:17px;color:var(--text-2)}
.account-theme,.account-local{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 2px 10px}
.account-local{height:48px;padding:0 6px 0 10px}
.account-theme-label{font-size:14px}
.account-local .account-theme-label{font-size:13px;color:var(--text-2)}
.theme-switch{display:inline-flex;flex:none;gap:2px;padding:2px;border-radius:999px;background:var(--fill)}
.theme-option{display:grid;place-items:center;width:32px;height:26px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-2);transition:background-color .15s,color .15s}
.theme-option:hover{color:var(--text)}
.theme-option[aria-checked=true]{background:var(--seg-active);box-shadow:var(--seg-shadow);color:var(--text)}
.theme-option .account-icon{width:15px;height:15px}
/* Language, under the theme: a row naming the choice that opens a language submenu, with a check on the chosen one. Without an account (the local workspace) it is a select. */
.account-theme+.account-language{margin-top:0;border-top:0}
.account-value{margin-left:auto;font-size:13px;color:var(--text-3);white-space:nowrap}
.account-item .account-value+.account-icon{width:15px;height:15px;margin-left:-4px;color:var(--text-3)}
.account-languages{position:absolute;z-index:1;width:200px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:8px;border:inherit;border-radius:12px;background:inherit;box-shadow:inherit}
.account-languages [role=menuitemradio] .account-icon{visibility:hidden;color:var(--accent)}
.account-languages [role=menuitemradio][aria-checked=true] .account-icon{visibility:visible}
.language-select{height:30px;padding:0 6px;border:1px solid var(--border);border-radius:8px;background:var(--fill);font:inherit;font-size:13px;color:var(--text)}
.account-skeleton{display:flex;align-items:center;gap:10px;height:48px;padding:0 8px}
.account-skeleton span{border-radius:999px;background:var(--fill)}
.account-skeleton span:first-child{flex:none;width:30px;height:30px}
.account-skeleton span:last-child{width:58%;height:10px}
.scrim{position:fixed;inset:0;z-index:65;background:rgba(10,11,9,.38);animation:fade .2s ease}

/* Canvas */
.canvas{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;margin:8px 8px 8px 0;background:var(--bg);border:1px solid var(--sheet-border);border-radius:12px;box-shadow:var(--sheet-shadow);overflow:hidden}
.topbar{display:none}
.view{display:none}
body[data-view=loading] #loading-view,body[data-view=notice] #notice-view,body[data-view=upload] #upload-view,
body[data-view=task] #task-view,body[data-view=score] #score-view{display:flex}
.center{flex:1;min-height:0;padding:40px 24px;overflow:auto}
.center>*{margin:auto}
#loading-view{flex:1;align-items:center;justify-content:center}
.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--track);border-top-color:var(--text-2);animation:spin .8s linear infinite}
/* While the workspace opens: the New score form's outline, or a blank page when the address names a score (app.js
   sets data-boot), where the real ones will appear. */
.composer-skeleton{display:grid;justify-items:center;width:min(580px,100% - 48px)}
.composer-skeleton .skeleton:nth-child(1){width:190px;height:30px}
.composer-skeleton .skeleton:nth-child(2){width:min(330px,80%);height:12px;margin:14px 0 26px}
.composer-skeleton .skeleton:nth-child(3){width:100%;height:384px;border-radius:12px}
.composer-skeleton .skeleton:nth-child(4){width:220px;height:10px;margin-top:18px}
body[data-boot=score] #loading-view{align-items:flex-start;padding:74px 14px 14px;overflow:hidden}
/* A score's page before it is drawn: paper with a title and faint staves. */
.sheet-skeleton,.stage.loading .score-pages:empty::before{
  --staff:repeating-linear-gradient(var(--track) 0 1px,transparent 1px 7px);
  content:"";display:block;flex:none;width:min(840px,100%);aspect-ratio:210/297;margin:0 auto;border-radius:8px;box-shadow:var(--page-shadow);
  background:linear-gradient(var(--fill-strong),var(--fill-strong)) center 6%/30% 14px no-repeat,
    linear-gradient(var(--fill-strong),var(--fill-strong)) 88% 10%/14% 8px no-repeat,
    var(--staff) center 18%/84% 29px no-repeat,var(--staff) center 29%/84% 29px no-repeat,var(--staff) center 40%/84% 29px no-repeat,
    var(--staff) center 51%/84% 29px no-repeat,var(--staff) center 62%/84% 29px no-repeat,var(--staff) center 73%/84% 29px no-repeat,
    var(--staff) center 84%/84% 29px no-repeat,var(--paper);
  animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6}}
body:not([data-boot=score]) .sheet-skeleton,body[data-boot=score] .composer-skeleton{display:none}
@media (prefers-reduced-motion:reduce){.sheet-skeleton,.stage.loading .score-pages:empty::before{animation:none}}
.notice{max-width:420px}
.notice-icon svg{width:20px;height:20px}
.notice .button{margin-top:16px}
.toast{position:absolute;top:14px}
.toast-action{margin-left:12px;padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* New score */
.composer{width:min(580px,100%)}
.composer-title{margin:0;font:350 36px/1.15 var(--display);letter-spacing:-.03em;text-align:center}
.composer-sub{margin:8px 0 24px;font-size:15px;color:var(--text-2);text-align:center}
.upload-card{border-radius:12px;overflow:visible}
.composer .upload{padding:14px}
.composer .dropzone{min-height:232px}

/* Link inspection keeps the source title readable and waits before offering creation. */
.composer .source-text strong{white-space:normal;line-height:1.45;overflow-wrap:anywhere}
.composer .source[data-state=checking] .source-text span{line-height:1.5}

/* Transcription in progress, stopped or in the trash */
.task{width:min(500px,100%)}
.task .bar{padding:18px 18px 8px}
.task .bar .meta{margin:0;font-size:14px;font-weight:500;line-height:1.5;color:var(--text);white-space:normal;overflow-wrap:anywhere}
.task .bar #task-length{margin-top:4px;font-size:13px;font-weight:400;color:var(--text-2)}
.task:has(#task-cover:not([hidden])) #task-length:not([data-excerpt=true]),.task #task-length:empty{display:none}
.task-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.task-icon svg{width:19px;height:19px}
.task[data-state=failed] .task-icon{background:var(--fill);color:var(--danger)}
.task[data-state=trashed] .task-icon,.task[data-state=stopped] .task-icon{background:var(--fill);color:var(--text-2)}
.task[data-state=review] .hero{display:none}
.task .progress{padding:2px 18px 18px}
/* One left edge for the cover, the score slip, the time left and the heard bar */
.task .hero{justify-items:stretch;text-align:left}
.task .sheet{width:auto;margin:0;padding-top:14px}
.task-status{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.task-status .title,.task-status .hero-eta{margin:0;font-size:13px;line-height:1.5;font-weight:400;letter-spacing:0;text-align:left;white-space:normal;overflow-wrap:anywhere}
.task-status .title{color:var(--text-2)}
.task-status .hero-eta{flex:none;max-width:50%;color:var(--text-3)}
.task .progress-facts{display:none}
.task .hero-message:empty{display:none}
.task .heard{margin-top:16px}
.task .hero[data-state=stopped] .sheet{display:block;padding:0;background:none;box-shadow:none}
.task .hero[data-state=stopped] .tune,.task .hero[data-state=stopped] .steps{display:none}
.task .hero[data-state=stopped] .task-status{margin-bottom:0}
@media(max-width:600px){
  .task .bar .cover{width:88px}
  .task .bar .meta{font-size:14px}
  .task-status{gap:8px}
  .task-status .title,.task-status .hero-eta{font-size:13px}
  .task .heard-bar{flex-wrap:nowrap}
  .task .heard-line{flex-basis:auto}
  .task .heard-change{margin-left:0;padding:0 10px}
  .task .heard-stop{padding:0 8px}
  .task .heard-change,.task .heard-stop{min-height:44px}
  .task .heard-change:not([hidden])+.heard-stop{margin-left:0}
  .task .heard-change:not([hidden])+.heard-stop::before{display:none}
  .task .heard-option{flex-direction:row;align-items:center;min-height:44px;padding:10px 12px}
  .task .heard-check{position:static;margin-left:auto}
}
.task:not([data-state=active]) .steps{display:none}
.progress-actions .button svg{width:16px;height:16px}
/* Copy details (a failed task's ID and reason, for support) stands apart, at the start of the row; on a phone the
   buttons wrap rather than run off the card. */
.task .progress-actions{flex-wrap:wrap}
.progress-actions .text-button{margin-right:auto;align-self:center}

/* Score: header, then the stage with the selection card beside the selected notes and the transport below */
.score{flex:1;flex-direction:column;min-height:0}
.score .bar{gap:16px;min-height:68px;padding:12px 16px 12px 24px;border-bottom:1px solid var(--border);container:bar/inline-size}
.score .title{font-size:16px}
/* Whether the edits are saved sits with the score's facts, as a word after them; a failed save says so there with its way out.
   The facts give way first (an ellipsis), so the word, or the problem, always shows whole. */
.score .meta{display:flex;align-items:center}
.score .meta>*{flex:none}
.score .meta>#score-meta{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.refine-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px;background:var(--fill-soft);border-bottom:1px solid var(--border);font-size:13px}
.score .meta .save-status{font-size:inherit;color:var(--text-2)}
.meta-dot{display:none;margin:0 6px}
#score-meta:not(:empty)+.meta-dot:has(+.save-status:not(:empty)),#score-meta:not(:empty)+.meta-dot:has(+.save-status+.save-problem:not([hidden])){display:inline}
.score .meta .save-status[data-state=saving]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border:1.5px solid var(--accent);border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:spin .9s linear infinite}
.score .meta .save-status[data-state=saved]::before{content:"✓";margin-right:3px}
@media (prefers-reduced-motion:reduce){.score .meta .save-status[data-state=saving]::before{animation-duration:3s}}
/* Edits not saved: the word becomes a small button with a warning sign, and its popover says what happened and offers
   the ways out that apply (local-editor.js status). */
.score .meta:has(.save-problem:not([hidden])){line-height:20px}
.score .meta .save-problem{display:inline-flex;align-items:center;gap:4px;height:20px;margin:0;padding:0 7px 0 6px;border:0;border-radius:999px;vertical-align:top;line-height:1;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:inherit;font-family:inherit;font-weight:500;cursor:pointer}
.score .meta .save-problem[hidden]{display:none}
.score .meta .save-problem:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.score .meta .save-problem svg{width:13px;height:13px;flex:none}
.score .meta .save-problem .chevron{width:10px;height:10px;transition:transform .15s}
.score .meta .save-problem[aria-expanded=true] .chevron{transform:rotate(180deg)}
.save-popover{width:300px;padding:12px 10px 8px}
.save-popover .save-popover-title{margin:0 4px 4px;font-size:14px;font-weight:600}
.save-popover .save-popover-text{margin:0 4px 8px;font-size:13px;line-height:1.45;color:var(--text-2)}
.save-popover .menu-item{display:flex;align-items:center;gap:10px}
.save-popover .menu-item svg{width:17px;height:17px;flex:none;color:var(--text-2)}
.save-popover .menu-item[hidden]{display:none}
.score .meta .text-button{margin-left:8px;font-size:inherit}
.score .actions{gap:4px}
.score .action-group{display:inline-flex;align-items:center;gap:2px}
/* How the score is shown (views.js bindNotationMenu): one soft button with the view's icon and name, a little apart from the
   actions, opening every view below it, each with its icon and the one shown ticked. */
.score .bar .notation-switch{margin-right:8px}
.view-button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:0;border-radius:999px;background:var(--fill);color:var(--text);font-size:13px;font-weight:500;white-space:nowrap;transition:background-color .15s}
.view-button:hover,.view-button[aria-expanded=true]{background:var(--fill-strong)}
.view-button svg{width:16px;height:16px;flex:none}
.view-button .chevron{width:13px;height:13px;color:var(--text-2)}
.view-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:30;display:grid;min-width:220px;padding:6px;border-radius:12px;background:var(--pop-bg);box-shadow:var(--shadow-pop);animation:rise .14s ease}
.view-menu[hidden],.view-option[hidden]{display:none}
.view-option{display:grid;grid-template-columns:18px minmax(0,1fr) 16px;align-items:center;gap:12px;width:100%;min-height:36px;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:14px;text-align:left;white-space:nowrap}
.view-option:hover:not(:disabled),.view-option:focus-visible{background:var(--fill)}
.view-option:disabled{opacity:.4}
.view-option svg{width:17px;height:17px;color:var(--text-2)}
.view-option .tick{width:15px;height:15px;color:var(--accent);visibility:hidden}
.view-option svg.accidental{width:.45em;height:.92em;margin:0 .04em 0 .08em;vertical-align:.16em;color:inherit}
.view-option svg.accidental:has(use[href='#i-sharp']){width:.52em}
.view-option[aria-checked=true]{font-weight:600}
.view-option[aria-checked=true] .tick{visibility:visible}
.view-menu .menu-rule{height:1px;margin:4px 8px;border:0;background:var(--border)}
.score .history{margin-right:4px}
/* The action named in words: Download, the one filled button (Starling waits in the stage's corner, starling.css). */
.score .actions .button{height:36px;padding:0 12px}
.score .actions .button svg{width:17px;height:17px}
.download-action[aria-expanded=true]{background:var(--primary-hover)}
/* A narrow header (a small window, the library open) keeps Download as an icon, its name in its tooltip. */
@container bar (max-width:860px){
  .score .actions .action-name{display:none}
  .score .actions .button{width:36px;padding:0;justify-content:center}
}
.score .suggestion{margin:12px 16px 0}
.score-body{position:relative;display:flex;flex:1;min-height:0}
.score .stage{flex:1;min-width:0;margin:0;border-radius:0;background:var(--stage);container:stage/inline-size}
.score :is(.score-pages,.notation-pages){position:absolute;inset:0;gap:22px;overflow:auto;padding:54px 28px calc(112px + var(--card-space,0px));overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--fill-strong) transparent}
/* The MIDI editor starts where the pages do, below the notes' tools floating at the top. */
.score .roll{top:54px}
.score .stage-pill{top:14px}
/* The one-time selection hint sits just above the player instead of over the score's title, however many rows the
   player takes (app.js measures --player-space). */
.score .hint-pill{top:auto;bottom:calc(var(--player-space,80px) + 2px)}
.score .player{position:absolute;z-index:6;left:50%;bottom:18px;flex-wrap:nowrap;gap:10px;width:min(820px,calc(100% - 28px));padding:6px 8px 6px 6px;border-radius:999px;background:var(--pop-bg);box-shadow:var(--shadow-pop);transform:translateX(-50%)}
.score .play{width:40px;height:40px}
.score .timeline{flex:1 1 140px;min-width:min-content}
.score .seek-wrap .seek{width:60px}
.score .player .divider{margin:0}
.score .zoom{position:static;padding:0;background:transparent;box-shadow:none}
.score .player-message{position:absolute;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:100%;margin:0;padding:7px 14px;border-radius:999px;background:var(--overlay);color:var(--on-overlay);box-shadow:0 10px 30px -12px rgba(0,0,0,.5);font-size:13px;font-weight:500;transform:translateX(-50%);animation:pill-rise .18s ease}
/* A narrow score (a wide side panel) keeps the player on one row: the zoom buttons go first (pinch and Cmd/Ctrl with + or −
   still zoom), then the piano roll. With a recording's Score/Both/Recording choice it takes two rows, as on a phone. */
@media (min-width:641px){
  @container stage (max-width:520px){.score .player:not(:has(#mix-choice:not([hidden]))) :is(.divider,.zoom){display:none}}
  @container stage (max-width:420px){.score .player:not(:has(#mix-choice:not([hidden]))) #falling-toggle{display:none}}
  @container stage (max-width:760px){
    .score .player:has(#mix-choice:not([hidden])){left:10px;right:10px;flex-wrap:wrap;gap:6px 8px;width:auto;padding:8px;border-radius:12px;transform:none}
    .score .player:has(#mix-choice:not([hidden])) .timeline{flex:1 1 calc(100% - 56px)}
    .score .player:has(#mix-choice:not([hidden])) .segmented{flex:1 0 auto;min-width:max-content}
    .score .player:has(#mix-choice:not([hidden])) .divider{display:none}
  }
  @container stage (max-width:480px){.score .player .zoom{display:none}}
  @container stage (max-width:370px){.score .player #falling-toggle{display:none}}
}
.score .drawer{width:min(var(--side-width,360px),100%);background:var(--bg)}

/* Popovers that belong to the workspace */
.downloads-menu{width:min(420px,calc(100vw - 16px));max-width:calc(100vw - 16px);padding:14px}
.downloads-menu .download-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.downloads-menu .download-list>.download:not(.wide){padding-inline:10px 8px;column-gap:8px}
.downloads-menu .more-formats>.download-list{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:480px){
  .downloads-menu #download-list>.download:not(.wide){grid-template-columns:minmax(0,1fr);row-gap:1px;padding:10px}
  .downloads-menu #download-list>.download:not(.wide) :is(svg,strong,span){grid-column:1;grid-row:auto}
  .downloads-menu #download-list>.download:not(.wide) svg{margin-bottom:5px}
}
.downloads-menu .download{background:var(--fill-soft)}
.downloads-menu .download:hover{background:var(--fill)}
/* The unlock dialog: the shared .unlock step (ui.css) in a modal over the workspace. */
.unlock-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--card-border);border-radius:12px;background:var(--pop-bg);color:var(--text);box-shadow:var(--shadow-pop)}
.unlock-dialog[open]{animation:rise .14s ease}
.unlock-dialog::backdrop{background:rgba(20,20,18,.38)}
.frames-dialog{width:min(980px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:16px 18px 18px;border:1px solid var(--card-border);border-radius:12px;background:var(--pop-bg);color:var(--text);box-shadow:var(--shadow-pop)}
.frames-dialog[open]{animation:rise .14s ease}
.frames-dialog::backdrop{background:rgba(20,20,18,.38)}
.frames-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.frames-head h2{margin:0;font-size:16px}
.frames-dialog .hint{margin:6px 0 12px}
.frames-dialog img{display:block;width:100%;height:auto;border-radius:8px}
/* Feedback opens under the header's More button like the other menus: one line, tags after a thumb down. */
.feedback.feedback-pop{min-width:0;max-width:calc(100vw - 16px);margin:0;padding:6px 6px 6px 14px;border:0;border-radius:999px;background:var(--pop-bg)}
.feedback.feedback-pop:has(.feedback-details:not([hidden])){width:min(400px,calc(100vw - 16px));border-radius:12px;padding:16px}
.score-menu{min-width:200px;padding:6px}
.score-menu .menu-item{display:flex;align-items:center;gap:10px;margin:0;width:100%;padding:8px 10px}
.score-menu .menu-item svg{width:17px;height:17px;color:var(--text-2)}
.score-menu .menu-count:not(:empty){margin-left:auto;padding-left:12px;font-size:12px;color:var(--text-3)}
.score-menu .menu-rule{height:1px;margin:4px 0;border:0;background:var(--border)}

/* Drag a file anywhere to start a transcription */
.drop-overlay{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:24px;background:color-mix(in srgb,var(--app) 72%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
body.dropping .drop-overlay{display:grid}
.drop-overlay div{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(520px,100%);padding:52px 24px;border:2px dashed var(--accent);border-radius:12px;background:var(--bg);box-shadow:var(--shadow-pop);text-align:center;animation:rise .15s ease}
.drop-overlay svg{width:30px;height:30px;margin-bottom:6px;color:var(--accent)}
.drop-overlay strong{font-size:16px;font-weight:600}
.drop-overlay span{font-size:13px;color:var(--text-2)}

/* The drawer sits beside the score when there is room. */
@media (min-width:1240px){
  .score .drawer{position:relative;inset:auto;z-index:auto;flex:none;width:var(--side-width,360px);border-left:1px solid var(--border);box-shadow:none;animation:none}
}
@media (min-width:901px){.narrow-only{display:none!important}}
@media (max-width:900px){.wide-only{display:none!important}}
/* A folded library keeps a narrow rail: unfold, new score (or chat), the workspace's way to Starling, the agent page's
   link to the scores and the account. */
@media (min-width:901px){
  :root[data-library=collapsed]{--rail:60px}
  :root[data-library=collapsed] .library{align-items:center;padding:12px 8px 10px}
  :root[data-library=collapsed] .library-head{height:44px;padding:0}
  :root[data-library=collapsed] .library .brand,:root[data-library=collapsed] .library :is(.tabs,.job-list,.chat-list,.list-note,.pager,.account-local){display:none}
  :root[data-library=collapsed] :is(.new-score,.starling-link){justify-content:center;width:40px;padding:0}
  :root[data-library=collapsed] :is(.new-score,.workspace-link,.starling-link) span{display:none}
  :root[data-library=collapsed] .workspace-link{justify-content:center;width:40px;margin-top:auto;padding:8px 0}
  :root[data-library=collapsed] .workspace-link~.library-foot{margin-top:8px}
  :root[data-library=collapsed] .library-foot{align-self:stretch;margin:auto -4px 0}
  :root[data-library=collapsed] .library-foot:not(:has(.account)){display:none}
  :root[data-library=collapsed] .account-button{justify-content:center;padding:0}
  :root[data-library=collapsed] .account-button>:not(.account-avatar){display:none}
  :root[data-library=collapsed] .account-menu{right:auto;width:260px}
}
@media (max-width:900px){
  .app{display:block}
  .library>.side-handle{display:none}
  .library{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(300px,86vw);background:var(--app);box-shadow:var(--shadow-pop);transform:translateX(-104%);transition:transform .22s ease;visibility:hidden}
  body.library-open .library{transform:none;visibility:visible}
  .canvas{height:100%;margin:0;border:0;border-radius:0;box-shadow:none}
  .topbar{display:flex;align-items:center;gap:4px;flex:none;height:52px;padding:0 6px;border-bottom:1px solid var(--border)}
  .topbar .brand{flex:1;justify-content:center;font-size:17px}
  /* Touch targets of 44 px around the same 34 px buttons: the padding takes the taps, the background and the place of
     the icon stay as they were. */
  .topbar .icon-button{width:44px;height:44px;margin:0 -5px;padding:5px;border-radius:calc(8px + 5px);background-clip:content-box;outline-offset:-3px}
  .topbar .mark{width:24px;height:24px}
  .toast{top:62px}
}
@media (max-width:640px){
  .center{padding:24px 14px}
  .composer-title{font-size:24px}
  .composer-sub{margin-bottom:18px}
  .composer .upload{padding:10px}
  .composer .dropzone{min-height:190px}
  .library :is(.tabs button,.account-item){min-height:44px}
  .library :is(.theme-option,.icon-button){height:44px;min-width:44px}
  .library .language-select{height:44px;font-size:16px}
  :is(.upload,.task,.drawer,.unlock) .button{height:auto;min-height:44px;padding:8px 12px;white-space:normal}
  :is(.upload,.task,.drawer,.popover) :is(input:not([type=checkbox],[type=radio],[type=range]),select){height:44px;font-size:16px}
  .upload .link-field input{font-size:14px}
  :is(.upload,.drawer) .icon-button,.popover .menu-item,.view-option{min-height:44px}
  .upload .segmented button{min-height:44px}
  .upload .icon-button{min-width:44px}
  .link-field{height:52px}
  .link-field .button{margin:2px 0}
  .options summary{min-height:44px;flex-wrap:wrap}
  .options summary .hint{font-size:13px}
  .view-button{height:44px}
  /* Two rows, so none falls off a phone's edge: the title with Download and More, then the views with Undo, Redo and
     settings. */
  .score .bar{flex-wrap:wrap;padding:8px 8px 8px 14px;gap:3px 2px}
  .score .titles{flex:1 1 0;padding-right:6px}
  .score .actions{display:contents}
  .score .bar::after{content:"";flex-basis:100%;order:1}
  .score .bar .notation-switch{order:2;margin-right:auto}
  .score :is(.history,#settings-button){order:3}
  .score .actions .icon-button{width:32px}
  /* 44 px touch targets (padding around the same icons and backgrounds, no taller rows): Undo, Redo, settings,
     Download and More. */
  .score .actions :is(.icon-button,.download-action){width:44px;height:44px;margin:-5px 0;padding:5px 6px;border:0;border-radius:calc(8px + 6px)/calc(8px + 5px);background-clip:content-box;outline-offset:-3px}
  .score .actions .download-action{padding:5px;border-radius:calc(8px + 5px)}
  .score :is(.score-pages,.notation-pages){padding:50px 10px calc(max(150px,var(--player-space,0px)) + var(--card-space,0px))}
  .score .player{left:10px;right:10px;bottom:10px;flex-wrap:wrap;gap:6px 8px;width:auto;padding:8px;border-radius:12px;transform:none}
  .score .timeline{flex:1 1 calc(100% - 56px)}
  .score .player .segmented{flex:1 1 calc(100% - 60px);min-width:max-content}
  .score .player :is(.play,.speed-button,.icon-button){width:44px;height:44px}
  .score .player .segmented button{height:44px}
  .score .player .zoom{margin-left:auto}
  .score .drawer,.score .comments-panel{width:100%;max-width:none}
  .score .player .divider{display:none}
  /* While the selection card is docked above it, the player keeps only play and position. */
  .score .stage.card-docked .player>:not(.play,.timeline,.player-message){display:none}
}
@keyframes fade{from{opacity:0}}

/* The workspace is an editor. Comments have their own persistent, navigable margin. */
.score .selection-card{width:max-content;max-width:calc(100% - 16px);border-radius:12px}
.score .card-tools{border:0;flex-wrap:wrap}
.score .card-tools .selection-count{max-width:145px}
.save-status{font-size:11px;color:var(--text-2);white-space:nowrap}
.save-status[data-error="true"]{color:var(--accent);max-width:200px;white-space:normal}
.comments-panel{width:var(--side-width,360px);flex:none;min-width:0;padding:16px;border-left:1px solid var(--border);background:var(--bg);overflow:auto}
.comments-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.comments-panel h2{font-size:16px;margin:0}
.comments-panel .ask-row{border:1px solid var(--border);border-radius:12px;margin:10px 0 18px;padding:6px}
.annotation-location{display:block;padding:0;border:0;background:none;font-size:12px;color:var(--accent);text-align:left;cursor:pointer}
.annotation-item small{display:block;color:var(--text-3);font-size:12px;margin-top:4px}
.annotation-item p{white-space:pre-wrap;overflow-wrap:anywhere}
.annotation-item.active-comment{border-left:2px solid var(--accent);padding-left:10px}
/* The assistant (agent-chat.js) shares the comments margin's place and shape. */
.agent-panel{display:flex;flex-direction:column;padding-bottom:12px}
.agent-panel[hidden]{display:none}
.agent-log{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
/* New chat beside Close; earlier chats of this score fold above the conversation. */
.agent-header-actions{display:flex;gap:4px}
.agent-new svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.agent-earlier{margin:0 0 12px;font-size:13px}
.agent-earlier summary{cursor:pointer;color:var(--text-2)}
.agent-earlier ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.agent-earlier li button{display:flex;width:100%;gap:8px;align-items:baseline;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.agent-earlier li button:hover{background:var(--fill)}
.agent-earlier li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-earlier li small{flex:none;font-size:12px;color:var(--text-3)}
.send svg rect{fill:currentColor}
@media(max-width:1100px){.comments-panel{position:absolute;z-index:9;right:0;top:0;bottom:0;width:min(var(--side-width,360px),85%);box-shadow:var(--shadow-pop)}}

.comment-actions{display:flex;gap:12px;margin-top:9px}
.comment-actions .text-button{font-size:13px;min-height:36px;padding:4px 0}
.comment-compose{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.comment-compose textarea{width:100%;resize:vertical;min-height:65px;background:var(--fill-soft);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px;font:inherit}
.comment-compose p{width:100%;font-size:12px;color:var(--accent)}
.comment-reply{margin-top:14px;padding-left:12px;border-left:2px solid var(--border)}
.comment-history{font-size:12px;color:var(--text-3);margin-top:8px}
.comment-history ol{padding-left:16px;white-space:pre-wrap}
@media(max-width:640px){
  .feedback :is(.feedback-rate,.feedback-close){width:44px;height:44px}
  .feedback-chip,.feedback-link,.feedback .button,.comment-actions .text-button{min-height:44px}
  .feedback-chip{font-size:13px}
  .feedback.feedback-pop{border-radius:12px}
  .feedback-question{min-width:80px}
}

.music-glyph{font-family:Leipzig!important;font-size:26px!important;font-weight:normal;line-height:1}
.music-glyph.small{font-size:22px!important}
.duration-palette{display:flex;gap:2px;align-items:center}
.duration-palette .icon-button{width:32px;height:34px}
/* One scale for every note value (24px for a stem's 1008 font units), each icon centred on its own shape. */
.note-icon{fill:currentColor;stroke:none}
.duration-palette .note-whole{width:9.6px;height:6.3px}
.duration-palette .note-half,.duration-palette .note-quarter{width:7.5px;height:24px}
.duration-palette .note-eighth,.duration-palette .note-sixteenth{width:12.9px;height:24px}
.duration-palette .note-dot{width:5px;height:5px}
.duration-palette [aria-pressed=true]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-border)}
.tool-field-label{display:flex;align-items:center;gap:8px}
.tool-field-label svg,.more-edits .menu-item svg{width:17px;height:17px;flex:none}
.more-edits .menu-item{display:flex;align-items:center;gap:10px}
.more-edits .dynamic-menu .dynamic{padding-left:35px}  /* Under the menu's text, past its icons. */
/* At the end of the tools' own menu: where the tools sit, each with its picture, the current place ticked. */
.more-edits [data-tool-position] .tick{width:15px;height:15px;margin-left:auto;color:var(--accent);visibility:hidden}
.more-edits [data-tool-position][aria-pressed=true]{font-weight:600}
.more-edits [data-tool-position][aria-pressed=true] .tick{visibility:visible}
.more-edits .menu-rule{height:1px;margin:6px 0 8px;border:0;background:var(--border)}
/* The notes' own tools (#selection-card), shown while notes are selected (Esc lets go): the
   accidentals, the pitch stepping by semitone and octave around the note's name (type another and press Enter), the
   note values, Delete, More and Ask. By default they float in a pill at the top of the score, as the player floats at its
   foot; Follow keeps them on a card by the notes. Groups are spaced, never ruled. */
.score .workspace-tools{inset:auto;border:0;box-shadow:none;animation:none;transition:opacity .14s ease,display .14s allow-discrete}
.score .workspace-tools[hidden]{opacity:0}
@starting-style{.score .workspace-tools{opacity:0}}
.workspace-tools .card-tools{gap:8px;padding:0;border:0;overflow:visible;flex-wrap:nowrap}
/* Two rows, pitch, then rhythm and actions: one line in a wide pill, stacked where it is not. */
.workspace-tools .tool-row{display:contents}
/* Each group is one soft capsule, so pitch, accidentals and note values read as three things; what is chosen in one
   (the note value) is lifted white, as in the segmented switches. */
.workspace-tools .tool-group{display:inline-flex;align-items:center;flex:none;gap:0;border-radius:999px;background:var(--fill)}
.workspace-tools .card-tools .icon-button,.workspace-tools .duration-palette .icon-button{width:30px;height:30px;border-radius:999px}
.workspace-tools .card-tools .icon-button.octave{width:36px}
.workspace-tools .duration-palette [aria-pressed=true]{background:var(--seg-active);color:var(--accent);box-shadow:var(--seg-shadow)}
/* The note's name between the steps: shown as text, an input to type another; Set appears once something is typed. */
.pitch-tools .pitch-field{display:inline-flex;align-items:center;gap:4px;margin:0 2px}
.pitch-tools .pitch-field>span:first-child{display:none}
.pitch-tools .pitch-input{width:48px;height:24px;padding:0 4px;border-color:transparent;border-radius:999px;background:var(--seg-active);box-shadow:var(--seg-shadow);font-size:13px;font-weight:600;text-align:center}
.pitch-tools .pitch-input:hover:not(:disabled){border-color:var(--border-2)}
.pitch-tools .pitch-input:focus{border-color:var(--accent);background:transparent}
.pitch-tools .pitch-input:disabled{opacity:.3}
.set-button{display:none;height:24px;padding:0 10px;border:0;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:12px;font-weight:600}
.tool-group.typed .set-button{display:inline-block}
/* A TAB note's string and fret, in the same white chips as the note's name. */
.workspace-tools .tab-tools{gap:8px;padding:0 3px 0 10px}
.workspace-tools .tab-field{display:inline-flex;align-items:center;gap:4px;margin:0}
.workspace-tools .tab-field .tool-label{font-size:12px;color:var(--text-2)}
.workspace-tools .tab-field .range{display:inline-flex;align-items:center;gap:4px}
.workspace-tools :is(#note-string,.fret-input){height:24px;border-color:transparent;border-radius:999px;background-color:var(--seg-active);box-shadow:var(--seg-shadow);font-size:13px;font-weight:600}
.workspace-tools #note-string{max-width:160px;padding:0 4px 0 10px}
.workspace-tools .tab-field .fret-input{width:36px;padding:0 4px;text-align:center}
.workspace-tools :is(#note-string,.fret-input):focus{border-color:var(--accent)}
.workspace-tools :is(#note-string,.fret-input):disabled{opacity:.3}
.workspace-tools .duration-field{margin:0}
/* Note input's pencil starts the note values: filled while notes are being written. */
.workspace-tools .duration-field #note-input[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.workspace-tools .duration-palette{gap:0}
.tool-more,.tool-ask{display:inline-flex;align-items:center;flex:none;gap:4px;height:30px;padding:0 10px 0 12px;border:0;border-radius:999px;background:transparent;color:var(--text);font-size:13px;font-weight:500;white-space:nowrap;transition:background-color .15s}
.tool-more:hover,.tool-more[aria-expanded=true]{background:var(--fill)}
.tool-more .chevron{width:14px;height:14px;color:var(--text-2)}
/* Ask is the assistant's, in its colour (the colour of the notes it changes and of what it sees). */
.tool-ask{padding:0 12px 0 10px;color:var(--ai-mark)}
.tool-ask:hover{background:var(--fill)}
.tool-ask .sl-mascot{width:18px;height:18px;margin:-2px 0}  /* Starling's bird (starling.js), put in when the chat is offered */
.workspace-tools #play-selection{display:none}
.selection-card.busy .card-tools :is(.tool-more,.tool-ask,.pitch-input){opacity:.38;pointer-events:none}
/* Top: a pill over the top of the score, centred on it, while notes are selected; where the score is narrow it wraps
   onto a second row rather than hiding tools past its edge. Short news moves down under it. */
.score .workspace-tools[data-placement=top]{position:absolute;z-index:8;top:10px;left:50%;width:max-content;max-width:calc(100% - 24px);padding:3px;border-radius:16px;background:var(--pop-bg);box-shadow:var(--shadow-pop);transform:translateX(-50%)}
.workspace-tools[data-placement=top] .card-tools{flex-wrap:wrap;justify-content:center;row-gap:4px}
/* The score starts below the tools, as tall as they last showed (app.js measures --tools-space), whether or not notes are
   selected: the title shows, and nothing moves when the tools appear. Below the width one row needs with Ask in it, the
   rows go one above the other, so at least two rows' room is kept. */
.stage:has(>.workspace-tools[data-placement=top]) .score-pages{padding-top:max(54px,var(--tools-space,0px))}
.stage:has(>.workspace-tools[data-placement=top]) .roll{top:max(54px,var(--tools-space,0px))}
@container stage (max-width:920px){
  .workspace-tools[data-placement=top] .card-tools{flex-direction:column}
  .workspace-tools[data-placement=top] .tool-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px}
  .stage:has(>.workspace-tools[data-placement=top]) .score-pages{padding-top:max(92px,var(--tools-space,0px))}
  .stage:has(>.workspace-tools[data-placement=top]) .roll{top:max(92px,var(--tools-space,0px))}
}
/* On a phone the first row itself can wrap (in Chinese it does): three rows' room. */
@container stage (max-width:520px){
  .stage:has(>.workspace-tools[data-placement=top]) .score-pages{padding-top:max(126px,var(--tools-space,0px))}
  .stage:has(>.workspace-tools[data-placement=top]) .roll{top:max(126px,var(--tools-space,0px))}
}
/* A TAB note's string and fret make the first row longer. */
@container stage (max-width:1100px){
  .workspace-tools[data-placement=top]:has(#tab-tools:not([hidden])) .card-tools{flex-direction:column}
  .workspace-tools[data-placement=top]:has(#tab-tools:not([hidden])) .tool-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px}
}
.stage:has(>.workspace-tools[data-placement=top]:not([hidden])) :is(.stage-pill,.queue-tray){top:max(58px,calc(var(--tools-space,0px) + 4px))}
/* Follow: a card by the selected notes, its two rows one above the other. */
.score .workspace-tools[data-placement=selection]{position:absolute;width:max-content;max-width:min(560px,calc(100% - 16px));border:1px solid var(--border);border-radius:16px;background:var(--pop-bg);box-shadow:var(--shadow-pop);padding:6px}
.workspace-tools[data-placement=selection] .card-tools{flex-direction:column;align-items:flex-start;gap:4px}
.workspace-tools[data-placement=selection] .tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.score .workspace-tools[data-placement=selection].docked{width:calc(100% - 16px);max-width:none}
@media(max-width:640px){
  .workspace-tools[data-placement] :is(.card-tools,.tool-row){column-gap:4px}
  .workspace-tools :is(#octave-up,#octave-down){display:none}
  .workspace-tools .duration-palette .icon-button{width:29px}
  .workspace-tools :is(.tool-more,.tool-ask){padding:0 8px}
}
@media(max-width:640px){
  .workspace-tools .card-tools .icon-button,.workspace-tools .duration-palette .icon-button{width:44px;height:44px}
  .workspace-tools .tool-group{flex-wrap:nowrap;border-radius:12px}
  .workspace-tools :is(.tool-more,.tool-ask){min-height:44px}
  .workspace-tools .pitch-tools .pitch-input{height:44px;font-size:16px}
  .workspace-tools :is(.set-button,#note-string,.fret-input){min-height:44px}
  .score .workspace-tools[data-placement=top]{width:calc(100% - 24px)}
  .workspace-tools[data-placement=top] .card-tools{width:100%}
  /* Two scrollable tool rows keep finger-sized controls without covering the score. */
  .workspace-tools[data-placement=top] .tool-row{width:100%;max-width:100%;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin}
  .workspace-tools[data-placement=top] .tool-row::after{position:sticky;right:0;flex:none;align-self:stretch;display:grid;place-items:center;width:18px;min-height:44px;margin-left:-18px;background:var(--pop-bg);box-shadow:-8px 0 8px var(--pop-bg);font-size:22px;color:var(--text-2);pointer-events:none}
  .workspace-tools[data-placement=top] .tool-row[data-more-right]::after{content:'›'}
  .workspace-tools[data-placement=top] .tool-row:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}
  .workspace-tools[data-placement=top] #more-button{position:sticky;right:0;z-index:1;background:var(--pop-bg)}
}

/* Chinese editions of the workspace (apps/web/zh-hans/index.html, zh-hant/): the sign-in pages' Chinese faces (login.css);
   Han characters stand upright and are never tracked tight. The ChatGPT/Claude panel stays English. */
:root:lang(zh-Hans){
  --font:"ScoreStarling Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"ScoreStarling Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;
}
:root:lang(zh-Hant){
  --font:"ScoreStarling Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"ScoreStarling Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC",sans-serif;
}
:root:lang(zh){font-synthesis-style:none}
:root:lang(zh) :is(h1,h2,h3,.composer-title,.title,.drop-title){letter-spacing:0}

.video-window{position:fixed;z-index:9;right:20px;bottom:100px;width:320px;aspect-ratio:16/9;max-width:calc(100vw - 32px);overflow:hidden;border-radius:12px;background:#000;box-shadow:var(--shadow-pop)}
/* The way to the video (video-window.js): a round button in the stage's bottom-right corner, there only when the score has a
   video; starling.css lifts it above Starling's corner bird. */
.sl-video{position:absolute;z-index:7;right:18px;bottom:18px;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--pop-bg);box-shadow:var(--shadow-pop);color:var(--text);cursor:pointer;transition:transform .2s ease}
.sl-video[hidden]{display:none}
.sl-video svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sl-video[aria-pressed=true]{color:var(--accent)}
.sl-video:active{transform:scale(.95)}
@media (hover:hover){.sl-video:hover{transform:translateY(-1px)}}
@media (min-width:641px){@container stage (width < 900px){.sl-video{bottom:var(--player-space,84px)}}}
@media (max-width:640px){.sl-video{right:10px;bottom:var(--player-space,84px);width:46px;height:46px}.sl-video svg{width:22px;height:22px}}
.video-window video{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;cursor:move}
.video-window .icon-button{width:32px;height:32px;color:#fff;background:rgba(0,0,0,.35);border-radius:999px}
.video-window .icon-button:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.2)}
#video-play{position:relative}
#video-play svg{stroke:none}
.video-close{position:absolute;z-index:1;top:8px}
.video-close{right:8px}
.video-controls{position:absolute;z-index:1;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:16px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.video-controls input{flex:1;min-width:0;accent-color:var(--accent)}
.video-edge{position:absolute;z-index:2;display:block;border:0;padding:0;background:transparent;touch-action:none}
.video-edge[data-video-edge=n],.video-edge[data-video-edge=s]{left:16px;right:16px;height:8px;cursor:ns-resize}
.video-edge[data-video-edge=n]{top:0}.video-edge[data-video-edge=s]{bottom:0}
.video-edge[data-video-edge=e],.video-edge[data-video-edge=w]{top:16px;bottom:16px;width:8px;cursor:ew-resize}
.video-edge[data-video-edge=e]{right:0}.video-edge[data-video-edge=w]{left:0}
.video-edge:is([data-video-edge=ne],[data-video-edge=nw],[data-video-edge=se],[data-video-edge=sw]){width:16px;height:16px}
.video-edge[data-video-edge=ne]{top:0;right:0;cursor:nesw-resize}.video-edge[data-video-edge=nw]{top:0;left:0;cursor:nwse-resize}
.video-edge[data-video-edge=se]{bottom:0;right:0;cursor:nwse-resize}.video-edge[data-video-edge=sw]{bottom:0;left:0;cursor:nesw-resize}
.video-window:fullscreen{inset:0!important;width:100vw!important;height:100vh!important;max-width:none;aspect-ratio:auto;border-radius:0}
.video-window:fullscreen :is(.video-edge){display:none}
.video-window:fullscreen video{cursor:default}
.video-window :is(.video-close,.video-controls){opacity:0;transition:opacity .14s ease}
.video-window:hover :is(.video-close,.video-controls),.video-window:focus-within :is(.video-close,.video-controls){opacity:1}
.video-window .hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);margin:0;padding:10px 12px;border-radius:8px;background:rgba(0,0,0,.75);color:#fff;font-size:13px;pointer-events:none}
.video-window[aria-busy=true] .hint::before{content:"";flex:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.video-window[aria-busy=true] .hint::before{animation:none}}
@media (hover:none){.video-window :is(.video-close,.video-controls){opacity:1}.video-window .icon-button{width:44px;height:44px}}