/* Score UI shared by the chat panel and the workspace. Host style variables win; the fallbacks carry the ScoreStarling palette
   (the website's: grey paper, near-black ink, one orange, flat surfaces). */
@font-face{font-family:Leipzig;src:url(/static/fonts/Leipzig.woff2) format("woff2");font-display:swap}
.pro-review{display:grid;gap:16px;margin-top:20px;text-align:left;min-width:0;overflow-wrap:anywhere}
.pro-review h3{margin:0;font-size:16px;font-weight:600;line-height:1.4}
.pro-review>p{margin:0;font-size:13px;line-height:1.55;color:var(--text-2)}
.quote-facts{margin:0;display:grid;gap:8px}
.quote-facts>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.quote-facts dt{font-size:13px;color:var(--text-2)}
.quote-facts dd{margin:0;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.pro-review>p.pro-review-credit{font-size:13px;color:var(--text-2)}
.pro-review-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;max-height:264px;overflow:auto;padding:8px 2px;scrollbar-width:thin}
.pro-review-choices label{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;cursor:pointer}
.pro-review-choices input{flex:none}
.pro-review-rhythm{border:0;margin:12px 0 0;padding:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.pro-review-rhythm legend{padding:0;font-size:13px;font-weight:600;color:var(--text)}
.pro-review-rhythm .field{justify-content:flex-start;margin:6px 0}
.pro-review-rhythm .field>span:first-child{width:7.5em}
.pro-review-rhythm select{flex:1 1 auto;min-width:0}
.pro-review-rhythm input[type=number]{flex:none;width:76px}
.pro-review-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pro-review-actions .button{white-space:normal;max-width:100%;height:auto;min-height:40px;padding:8px 16px;line-height:1.4}
.pro-review-actions .primary{margin-left:auto}
.pro-review :is(.review-intro,.review-status,.quote-options){margin:0;font-size:13px;line-height:1.6;color:var(--text-2)}
.pro-review .review-status:empty{display:none}
.pro-review .quote-options{padding-top:12px;border-top:1px solid var(--border)}
@media (max-width:520px){
  .pro-review-actions .button,.pro-review-choices label{min-height:44px}
  .pro-review-actions .primary{flex:1 1 160px}
}
.pro-review h4{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--text-2)}
.pro-review h4+.hint{margin-top:2px}
.pro-review-choices label span{display:flex;flex-direction:column;min-width:0}
.pro-review-choices small{font-size:12px;color:var(--text-2)}
.pro-review-credit{margin-top:8px;font-size:12px}

:root{
  color-scheme:light;
  --font:var(--font-sans,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif);
  --mono:var(--font-mono,ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace);
  --bg:var(--color-background-primary,#ffffff);
  --text:var(--color-text-primary,#0f0e12);
  --text-2:var(--color-text-secondary,#5d5c61);
  --text-3:var(--color-text-tertiary,#707076);
  --border:var(--color-border-primary,rgba(15,14,18,.1));
  --border-2:var(--color-border-secondary,rgba(15,14,18,.18));
  --danger:var(--color-text-danger,#c42b12);
  --card:#f9f9f8;--card-solid:#ffffff;--card-border:rgba(15,14,18,.1);
  --card-shadow:none;
  --fill:rgba(15,14,18,.05);--fill-soft:rgba(15,14,18,.035);--fill-strong:rgba(15,14,18,.09);
  --track:rgba(15,14,18,.12);
  --pop-bg:#ffffff;--shadow-pop:0 12px 32px -14px rgba(15,14,18,.3),0 0 0 1px rgba(15,14,18,.08);
  --primary:#0f0e12;--primary-hover:#2a292e;--on-primary:#ffffff;--icon:var(--color-text-primary,#2a292e);
  --accent:#e8501a;--accent-soft:rgba(232,80,26,.08);--accent-border:rgba(232,80,26,.3);
  --focus:rgba(232,80,26,.5);
  --select:#e8501a;--select-hover:#f07a4c;--play:#c27c0e;--ai-mark:#2f6fdb;
  --stage:#efefed;--paper:#fdfdfc;--ink:#0f0e12;--page-shadow:0 0 0 1px rgba(15,14,18,.08);--page-edge:rgba(15,14,18,.08);
  --roll-lane:#f1f1ee;--roll-grid:rgba(15,14,18,.07);--roll-bar:rgba(15,14,18,.22);--roll-keys:#2a292e;--roll-white:#ffffff;
  --roll-1:#e8501a;--roll-2:#4a4950;--roll-3:#2f7d8c;--roll-4:#7a5cc2;--roll-5:#3f8a4f;
  --seg-active:#ffffff;--seg-shadow:0 0 0 1px rgba(15,14,18,.14);
  --thumb:#ffffff;--thumb-ring:rgba(15,14,18,.2);--seek-mark:rgba(15,14,18,.3);
  --logo:url(/favicon.png);
  --overlay:rgba(15,14,18,.84);--on-overlay:#ffffff;
  --radius:var(--border-radius-lg,12px);
  --safe-bottom:0px;--composer-space:0px;
}
:root[data-theme=dark]{
  color-scheme:dark;
  --bg:var(--color-background-primary,#212121);
  --text:var(--color-text-primary,#ededeb);
  --text-2:var(--color-text-secondary,#a7a6a1);
  --text-3:var(--color-text-tertiary,#9b9a95);
  --border:var(--color-border-primary,rgba(255,255,255,.08));
  --border-2:var(--color-border-secondary,rgba(255,255,255,.15));
  --danger:var(--color-text-danger,#ff8a80);
  --card:rgba(255,255,255,.045);--card-solid:#2b2b2a;--card-border:rgba(255,255,255,.09);
  --card-shadow:none;
  --fill:rgba(255,255,255,.07);--fill-soft:rgba(255,255,255,.04);--fill-strong:rgba(255,255,255,.13);
  --track:rgba(255,255,255,.16);
  --pop-bg:#2d2d2c;--shadow-pop:0 20px 48px -12px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.08);
  --primary:#f2f1ee;--primary-hover:#ffffff;--on-primary:#0f0e12;--icon:var(--color-text-primary,#d6d5d1);
  --accent:#ff7a45;--accent-soft:rgba(255,122,69,.12);--accent-border:rgba(255,122,69,.32);
  --focus:rgba(255,122,69,.6);
  --select:#ff7a45;--select-hover:#ff9a70;--play:#f3b74d;--ai-mark:#7aa7ff;
  --stage:rgba(0,0,0,.2);--paper:#262625;--ink:#ebe9e4;--page-shadow:0 0 0 1px rgba(255,255,255,.07);--page-edge:rgba(255,255,255,.07);
  --roll-lane:#2c2c2b;--roll-grid:rgba(255,255,255,.06);--roll-bar:rgba(255,255,255,.2);--roll-keys:#141413;--roll-white:#d9d8d4;
  --roll-1:#ff7a45;--roll-2:#bdbbb6;--roll-3:#5cb8c7;--roll-4:#a88ef0;--roll-5:#74c487;
  --seg-active:rgba(255,255,255,.15);--seg-shadow:none;
  --thumb:#f2f1ee;--thumb-ring:rgba(0,0,0,.3);--seek-mark:rgba(255,255,255,.34);
  --overlay:rgba(242,241,238,.92);--on-overlay:#0f0e12;
}

*,*::before,*::after{box-sizing:border-box}
body{font:14px/1.45 var(--font);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.3}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Zero specificity, so each component can size and fill its own icons. */
:where(svg:not(.score-pages svg)){width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hint{margin:0;font-size:13px;color:var(--text-2)}
.hint:empty,.message:empty{display:none}
.message{margin:0;font-size:13px;color:var(--danger);overflow-wrap:anywhere}
.message[data-tone=notice]{color:var(--text-2)}

.card{position:relative;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);box-shadow:var(--card-shadow);overflow:hidden}

/* Header */
.bar{display:flex;align-items:center;gap:12px;min-height:62px;padding:13px 12px 13px 14px}
.mark{flex:none;width:36px;height:36px;margin:0 -2px;background:var(--text);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.titles{flex:1;min-width:0}
.title{margin:0;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{margin:2px 0 0;font-size:13px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actions{display:flex;align-items:center;gap:2px;flex:none}

/* Controls */
.icon-button{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--icon);transition:background-color .15s,color .15s,transform .12s}
.icon-button:hover:not(:disabled){background:var(--fill);color:var(--text)}
.icon-button:active:not(:disabled){transform:scale(.93)}
.icon-button[aria-expanded=true],.icon-button[aria-pressed=true]{background:var(--fill-strong);color:var(--text)}
/* Accidentals and octave marks: Leipzig outlines at one scale (0.026px a font unit; octave marks 0.034). */
.music-icon{fill:currentColor;stroke:none}
.music-icon.accidental{width:5.2px;height:18px}
.music-icon.ottava{width:22px;height:11.6px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border-2);border-radius:8px;background:transparent;font-size:14px;font-weight:500;white-space:nowrap;transition:background-color .15s,border-color .15s,transform .12s}
.button:hover:not(:disabled){background:var(--fill)}
.button:active:not(:disabled){transform:scale(.97)}
.button svg{width:16px;height:16px}
.button.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.button.primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}
.button.quiet{border-color:transparent;color:var(--text-2)}
.button.quiet:hover:not(:disabled){color:var(--text)}
.button.small{height:30px;padding:0 12px;font-size:13px}
input,select,textarea{border:1px solid var(--border-2);border-radius:8px;background:var(--fill-soft);outline:none;transition:border-color .15s,background-color .15s}
input,select{height:36px;padding:0 12px;font-size:14px;min-width:0}
textarea{width:100%;padding:10px 12px;font-size:14px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);background:transparent}
input[type=number]{width:72px}
input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--accent)}
select option,select optgroup{background:var(--pop-bg);color:var(--text)}
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;font-size:13px;color:var(--text-2)}
.field>span:first-child{flex:none}
.field select,.field input:not([type=checkbox]){color:var(--text)}
.field.stack{flex-direction:column;align-items:stretch;gap:6px}
.check{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:13px}
.range{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:13px}
.range input[type=number]{width:64px;appearance:textfield;-moz-appearance:textfield}
.range input[type=number]::-webkit-inner-spin-button,.range input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.popover:focus-visible{outline:none}

/* Player */
.player{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:2px 14px 14px}
.play{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;padding:0;border:0;border-radius:999px;background:var(--primary);color:var(--on-primary);transition:transform .12s,background-color .15s}
.play:hover:not(:disabled){background:var(--primary-hover)}
.play:active:not(:disabled){transform:scale(.93)}
.play svg{width:18px;height:18px;stroke:none}
.play .when-paused{transform:translateX(1px)}
.play[data-state=playing] .when-paused,.play:not([data-state=playing]) .when-playing{display:none}
/* An edit's sound on its way (transport.js updating): a faint turning arc; pressed meanwhile, it plays once the sound arrives. */
.play[data-updating=true]::after{content:"";position:absolute;inset:-4px;border:2px solid transparent;border-top-color:var(--accent);border-radius:50%;opacity:.45;animation:spin 1.1s linear infinite;pointer-events:none}
.play[data-state=waiting]::after{opacity:1;border-right-color:var(--accent)}
.play[data-state=waiting] svg{opacity:.55}
@media (prefers-reduced-motion:reduce){.play[data-updating=true]::after{animation-duration:3s}}
.timeline{display:flex;align-items:center;gap:10px;flex:1 1 180px;min-width:0}
.time{flex:none;font:500 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.seek{--progress:0%;flex:1;min-width:60px;height:22px;margin:0;padding:0;border:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.seek:disabled{cursor:default}
.seek::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(to right,var(--accent) var(--progress),var(--track) var(--progress))}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--thumb);box-shadow:0 0 0 1px var(--thumb-ring),0 1px 3px rgba(0,0,0,.25);transition:transform .12s}
.seek:hover:not(:disabled)::-webkit-slider-thumb{transform:scale(1.15)}
.seek:disabled::-webkit-slider-thumb{opacity:0}
/* From the keyboard the ring goes round the thumb, not the whole bar. */
.seek:focus-visible{outline:none}
.seek:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--focus),0 1px 3px rgba(0,0,0,.25)}
.seek:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--focus),0 1px 3px rgba(0,0,0,.25)}
.seek::-moz-range-track{height:4px;border-radius:999px;background:var(--track)}
.seek::-moz-range-progress{height:4px;border-radius:999px;background:var(--accent)}
.seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--thumb);box-shadow:0 0 0 1px var(--thumb-ring),0 1px 3px rgba(0,0,0,.25)}
/* The seek bar draws its track under the thumb: what has played, the looped passage and a mark at each bar
   (transport.js), and a bubble with the bar and time under the pointer. The thumb's centre runs 7 px in from each end. */
.seek-wrap{--progress:0%;position:relative;display:flex;flex:1;align-items:center;min-width:60px}
.seek-wrap .seek{position:relative;z-index:1}
.seek-wrap .seek::-webkit-slider-runnable-track{background:transparent}
.seek-wrap .seek::-moz-range-track,.seek-wrap .seek::-moz-range-progress{background:transparent}
.seek-marks{position:absolute;left:7px;right:7px;top:50%;height:4px;margin-top:-2px;border-radius:999px;background:linear-gradient(to right,var(--accent) var(--progress),var(--track) var(--progress));pointer-events:none}
.seek-marks i{position:absolute;top:-2px;bottom:-2px;width:1px;margin-left:-.5px;border-radius:1px;background:var(--seek-mark)}
.seek-loop{position:absolute;top:-4px;bottom:-4px;border-radius:999px;background:var(--accent);opacity:.2}
.seek-tip{position:absolute;bottom:calc(100% + 4px);z-index:2;padding:4px 9px;border-radius:6px;background:var(--overlay);color:var(--on-overlay);font-size:12px;font-weight:500;line-height:1.3;white-space:nowrap;transform:translateX(-50%);pointer-events:none}
/* Speed: a button showing it (marked while it is not the written speed) and its popover. */
.speed-button{flex:none;height:32px;min-width:42px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s}
.speed-button:hover:not(:disabled),.speed-button[aria-expanded=true]{background:var(--fill);color:var(--text)}
.speed-button[data-changed=true]{background:var(--accent-soft);color:var(--accent)}
.speed-popover{width:252px;padding:12px 14px}
.speed-head{display:flex;align-items:baseline;justify-content:space-between;font-weight:600}
.speed-head output{font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--accent)}
.speed-range{--progress:0%;width:100%;margin:12px 0 10px;accent-color:var(--accent)}
.speed-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.speed-choices button{height:28px;border:0;border-radius:8px;background:var(--fill);color:var(--text-2);font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums}
.speed-choices button:hover{color:var(--text)}
.speed-choices button[aria-pressed=true]{background:var(--primary);color:var(--on-primary)}
.speed-note{margin:10px 0 0;font-size:12px;color:var(--text-3)}
/* After the reader scrolls away from the playing music, a button above the player brings the page back to it. */
.follow-pill{position:absolute;right:4px;bottom:calc(100% + 8px);display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px 0 10px;border:0;border-radius:999px;background:var(--overlay);color:var(--on-overlay);font-size:13px;font-weight:500;white-space:nowrap;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);animation:rise .18s ease}
.follow-pill svg{width:15px;height:15px;stroke-width:2.2}
.follow-pill[data-direction=up] svg{rotate:180deg}
.follow-pill[hidden]{display:none}
.segmented{display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:999px;background:var(--fill)}
.segmented button{height:28px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--text-2);font-size:13px;font-weight:500;white-space:nowrap;transition:background-color .15s,color .15s}
.segmented button:hover{color:var(--text)}
.segmented button[aria-checked=true]{background:var(--seg-active);color:var(--text);box-shadow:var(--seg-shadow)}
/* Staff or a jianpu key for a new score: the choices keep one line each and move under the label when narrow. */
.view-field{flex-wrap:wrap;row-gap:6px}
.view-field .segmented button{white-space:nowrap}
.player-message{flex-basis:100%;margin:-4px 0 0;font-size:13px;color:var(--text-2)}
.player-message:empty{display:none}

/* Score */
.stage{position:relative;margin:0 14px 14px;border-radius:12px;background:var(--stage);overflow:hidden}
.score-pages{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:14px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.score-pages>svg{display:block;margin-inline:auto;width:calc(100% * var(--zoom,1));max-width:calc(var(--natural,840px) * var(--zoom,1));height:auto;flex:none;overflow:hidden;background:var(--paper);color:var(--ink);fill:currentColor;border-radius:8px;box-shadow:var(--page-shadow)}
.score-pages>svg,.notation-page{translate:var(--page-x,0px) var(--page-y,0px)}
.stage.panning :is(.score-pages,.notation-pages,.score-pages *,.notation-pages *){cursor:grabbing!important}
.score-pages svg g.page-margin{font-family:Times,serif}
.score-pages svg g.ending,.score-pages svg g.fing,.score-pages svg g.reh,.score-pages svg g.tempo{font-weight:bold}
.score-pages svg g.dir,.score-pages svg g.dynam,.score-pages svg g.mNum{font-style:italic}
.score-pages svg ellipse,.score-pages svg path,.score-pages svg polygon,.score-pages svg polyline,.score-pages svg rect{stroke:currentColor}
.score-pages g.note,.score-pages g.rest,.score-pages g.mRest{cursor:pointer;transition:color .12s}
@media (hover:hover){.score-pages g.note:hover,.score-pages g.rest:hover,.score-pages g.mRest:hover{color:var(--select-hover)}}
/* Notes the assistant just changed (agent-chat.js), until the next turn or its Undo. */
.score-pages g.ai-changed{color:var(--ai-mark)}
.score-pages g.selected-note{color:var(--select)}
.score-pages :is(g.chord,g.beam):has(g.selected-note):not(:has(g.note:not(.selected-note))){color:var(--select)}
.score-pages g.playing-note{color:var(--play)}
.score-pages :is(g.chord,g.beam):has(g.playing-note):not(:has(g.note:not(.playing-note))){color:var(--play)}
.score-pages g.note:focus,.score-pages g.rest:focus,.score-pages g.mRest:focus{outline:none}
.score-pages g.note:focus-visible,.score-pages g.rest:focus-visible,.score-pages g.mRest:focus-visible{filter:drop-shadow(0 0 2px var(--select))}
.score-pages svg .note-hit{fill:transparent;stroke:none;pointer-events:all}
/* Drawn into the pages (score-marks.js), so they scroll and zoom with the music: the playback line, which stays where
   playing stopped, and the box around a range of notes or bars. */
.score-pages svg line.play-cursor{stroke:var(--play);stroke-width:2.5;stroke-linecap:round;stroke-opacity:.9;pointer-events:none}
.score-pages svg rect.range-box{fill:var(--accent-soft);stroke:var(--select);stroke-width:1.4;stroke-opacity:.7;pointer-events:none}
/* Note input: its cursor, a band over the staff where the next note goes, and the faint note a click would write. */
.score-pages svg rect.entry-caret{fill:var(--select);fill-opacity:.13;stroke:var(--select);stroke-width:1.5;stroke-opacity:.75;pointer-events:none}
.score-pages svg g.ghost-note{fill:var(--select);stroke:var(--select);opacity:.5;pointer-events:none}
.score-pages svg g.ghost-note :is(ellipse,circle){stroke:none}
.score-pages svg g.ghost-note ellipse.open{fill:none;stroke:var(--select);stroke-width:2.2}
.score-pages svg g.ghost-note :is(line,path){stroke:var(--select);stroke-width:1.6;fill:none}
/* After an edit, the new pitch over the note for a moment (editor.js mark). */
.note-flag{position:absolute;z-index:7;margin:0;padding:3px 8px;border-radius:6px;background:var(--select);color:#fff;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;transform:translate(-50%,-100%);box-shadow:0 6px 16px -8px rgba(0,0,0,.45);pointer-events:none}
/* While an edit renders, a thin line runs along the top and the score dims after a short delay. */
.stage::before{content:"";position:absolute;z-index:2;top:0;left:0;width:30%;height:2px;border-radius:2px;background:var(--accent);opacity:0;pointer-events:none}
body.busy .stage::before{opacity:1;animation:slide 1.1s ease-in-out infinite}
.score-pages{transition:opacity .2s}
body.busy .score-pages{opacity:.55;transition-delay:.4s}
/* Notation views (views.js): another notation's pages in place of the staff pages, which stay loaded but hidden. */
.stage[data-notation]:not([data-notation=staff])>:is(.score-pages,.editor-layer,.marquee){display:none}
/* The MIDI editor and the piano roll player (rolls.js): drawn over the stage, which keeps the pages loaded underneath
   and the editor's messages and selection card on top. */
.stage[data-roll]>:is(.score-pages,.notation-pages,.notation-note,.marquee){visibility:hidden}
.stage[data-roll] .hint-pill{display:none}
.stage[data-roll][data-roll]>.editor-layer:not([hidden]){display:block}
.roll{position:absolute;inset:44px 12px calc(var(--player-space,84px) + var(--card-space,0px));z-index:6;border-radius:8px;overflow:hidden;box-shadow:var(--page-shadow);background:var(--paper)}
.roll[hidden]{display:none}
.roll-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.roll-canvas[hidden]{display:none}
.notation-pages{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:14px}
.notation-pages[hidden]{display:none}
.notation-page{display:block;margin-inline:auto;width:calc(100% * var(--zoom,1));max-width:calc(840px * var(--zoom,1));height:auto;flex:none;background:#fdfdfc;border-radius:8px;box-shadow:var(--page-shadow)}
:root[data-theme=dark] .notation-page{filter:invert(.9) hue-rotate(180deg)}
.notation-note.error{color:var(--danger)}
/* As wide as the view chosen (where supported), never wider than its row. */
.notation-switch{position:relative;flex:none}
.notation-kinds button{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.notation-kinds svg:not(.chevron){width:15px;height:15px;margin-left:-2px}
.notation-kinds button[aria-pressed=true]{background:var(--seg-active);color:var(--text);box-shadow:var(--seg-shadow)}
.notation-kinds .chevron{width:13px;height:13px;margin-left:-3px;margin-right:-4px;opacity:.55;transform:rotate(180deg)}
.notation-menu{position:absolute;right:0;bottom:calc(100% + 12px);z-index:30;display:grid;gap:2px;width:240px;padding:6px;border-radius:12px;background:var(--pop-bg);box-shadow:var(--shadow-pop)}
.notation-menu[hidden]{display:none}
.notation-option{position:relative;display:grid;gap:1px;padding:8px 10px 8px 30px;border:0;border-radius:8px;background:transparent;text-align:left}
.notation-option:hover,.notation-option:focus-visible{background:var(--fill)}
.notation-option strong{font-size:13px;font-weight:600}
.notation-option :is(strong,span){white-space:normal}
.notation-option span{font-size:12px;color:var(--text-2)}
.notation-option[aria-checked=true]::before{content:"";position:absolute;left:12px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.zoom{position:absolute;right:14px;bottom:calc(14px + var(--safe-bottom) + var(--composer-space) + var(--card-space,0px));display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--pop-bg);box-shadow:var(--shadow-pop)}
.zoom .icon-button{width:30px;height:30px}
.zoom .icon-button,.player .icon-button{border-radius:999px}
.zoom output{min-width:44px;text-align:center;font:500 12px/1 var(--mono);color:var(--text-2)}
.zoom output{padding:6px 0;border-radius:8px;cursor:pointer}
.zoom output:hover{background:var(--fill);color:var(--text)}

/* Downloads and suggested changes */
.downloads{margin:0 14px 12px;padding:12px;border-radius:12px;background:var(--fill-soft);border:1px solid var(--border)}
.downloads-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 10px}
.label{font-size:13px;font-weight:600;color:var(--text-2)}
.inline-select select{height:30px;font-size:13px}
.download-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
/* A tile: its icon, then the format and what it holds. The PDF (the notation shown) and Mirelo's bundle span the row. */
.download{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:10px;row-gap:1px;min-height:52px;padding:9px 12px 9px 11px;border:1px solid var(--border);border-radius:12px;background:var(--card-solid);text-align:left;transition:border-color .15s,background-color .15s,transform .12s}
.download.wide{grid-column:1/-1}
a.download{color:inherit;text-decoration:none}
.download:hover:not(:disabled){border-color:var(--border-2)}
.download:active:not(:disabled){transform:scale(.98)}
.download svg{grid-row:1/3;align-self:center;color:var(--text-2)}
.download.primary svg{color:var(--accent)}
.download strong{grid-column:2;font-size:13px;font-weight:600;min-width:0}
.download span{grid-column:2;font-size:12px;color:var(--text-2);min-width:0}
.download.busy svg{visibility:hidden}
.download.busy::after{content:"";position:absolute;left:13px;top:calc(50% - 8px);width:12px;height:12px;border-radius:50%;border:2px solid var(--track);border-top-color:var(--text);animation:spin .7s linear infinite}
.download-list+.message{margin-top:8px}
/* A free score's editable files stay locked until the person agrees to unlock the score; its PDF says it has a footer line. */
.download.locked{border-style:dashed}
.download.locked svg{color:var(--text-3)}
.download-note{grid-column:1/-1;margin:-2px 3px 2px;font-size:12px;color:var(--text-2)}
/* The unlock step (the workspace's dialog, the panel's card): what unlocking gives, its price and the balance, then the choice. */
.unlock{display:grid;gap:10px;text-align:left;min-width:0;overflow-wrap:anywhere}
.unlock[hidden]{display:none}
.unlock h2,.unlock h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.unlock .hint{margin:0}
.unlock-gives{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14px}
.unlock-gives li{display:flex;align-items:flex-start;gap:8px}
.unlock-gives li::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--accent)}
.unlock-facts{margin:0;border:1px solid var(--border);border-radius:12px;font-size:13px}
.unlock-facts>div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px}
.unlock-facts>div+div{border-top:1px solid var(--border)}
.unlock-facts dt{color:var(--text-2)}
.unlock-facts dd{margin:0;font-weight:600;text-align:right}
.unlock-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;font-size:13px}
.unlock-links a{color:var(--accent);font-weight:500}
.unlock-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:2px}
.more-formats{grid-column:1/-1}
.more-formats>summary{display:flex;align-items:center;gap:4px;width:max-content;margin-top:2px;padding:6px 2px;color:var(--text-2);font-size:13px;font-weight:500;list-style:none;cursor:pointer}
.more-formats>summary::-webkit-details-marker{display:none}
.more-formats>summary:hover{color:var(--text)}
.more-formats>summary:focus-visible{outline-offset:2px;border-radius:6px}
.more-formats .chevron{width:14px;height:14px;transition:transform .2s}
.more-formats[open] .chevron{transform:rotate(180deg)}
.more-formats>.download-list{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));margin-top:2px}
.suggestion{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 12px;margin:0 14px 12px;padding:11px 11px 11px 13px;border:1px solid var(--accent-border);border-radius:12px;background:var(--accent-soft)}
.suggestion-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--card-solid)}
.suggestion-icon svg{width:17px;height:17px;fill:currentColor;stroke:none}
.suggestion-text{min-width:0}
.suggestion-text strong{display:block;font-size:14px;font-weight:600}
.suggestion-text span{display:block;font-size:13px;color:var(--text-2)}
.suggestion-actions{display:flex;gap:6px}
.suggestion-details{grid-column:1/-1;font-size:13px;color:var(--text-2)}
.suggestion-details summary{width:max-content;cursor:pointer;font-weight:500;color:var(--text)}

/* Feedback on the transcription: one quiet line; tags after 👎, a note only on request. */
.feedback{margin:0 14px 12px;padding:6px 6px 6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--fill-soft)}
.feedback:has(.feedback-details:not([hidden])){border-radius:12px;padding:16px}
.feedback[hidden],.feedback [hidden]{display:none}
.feedback-ask{display:flex;align-items:center;gap:4px}
.feedback-question{flex:1;min-width:0;font-size:13px;color:var(--text-2)}
.feedback-rates{display:flex;gap:2px}
.feedback-rate{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-2);transition:background-color .15s,color .15s,transform .12s}
.feedback-rate:hover:not(:disabled){background:var(--fill);color:var(--text)}
.feedback-rate:active:not(:disabled){transform:scale(.92)}
.feedback-rate[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.feedback-rate svg{width:17px;height:17px}
svg.down{transform:rotate(180deg)}
.feedback-close{width:32px;height:32px}
.feedback-close svg{width:14px;height:14px}
.feedback-details{display:grid;gap:16px;margin-top:12px;padding:12px 0 0;border-top:1px solid var(--border)}
.feedback-issues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.feedback-chip{min-height:36px;padding:8px 12px;border:1px solid var(--border-2);border-radius:999px;background:transparent;color:var(--text-2);font-size:13px;line-height:1.4;text-align:left;transition:background-color .15s,border-color .15s,color .15s}
.feedback-chip:hover{color:var(--text)}
.feedback-chip[aria-pressed=true]{border-color:var(--text);background:var(--text);color:var(--card-solid)}
.feedback-note{display:grid;gap:12px}
.feedback-note textarea{min-height:80px;font-size:14px}
.feedback-note textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.feedback-share{align-items:flex-start;margin:0;font-size:13px;line-height:1.5;color:var(--text-2)}
.feedback-share input{flex:none;margin-top:2px}
.feedback-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.feedback-link{padding:0;border:0;background:none;color:var(--text-2);font-size:13px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-2)}
.feedback-link:hover{color:var(--text)}
.feedback-foot .button{margin-left:auto;min-height:36px}
.feedback .message{padding:4px 0 0}
.suggestion-details ul{margin:6px 0 2px;padding-left:18px}
.suggestion-details li{margin:3px 0}
.suggestion .message{grid-column:1/-1}

/* New score: a source first (a file, a recording, a link or notation text), then only what fits it. */
.upload{display:flex;flex-direction:column;gap:14px;padding:0 14px 14px}
.pick{display:flex;flex-direction:column;gap:10px}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:200px;padding:26px 18px 22px;border:1.5px dashed var(--border-2);border-radius:12px;background:var(--fill-soft);text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s}
.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}
.drop-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border-radius:12px;background:var(--card-solid);color:var(--accent);box-shadow:0 0 0 1px var(--border),0 2px 6px -2px rgba(0,0,0,.12)}
.drop-icon svg{width:22px;height:22px}
.drop-icon .for-recording,body[data-recording=true] .drop-icon .for-files{display:none}
body[data-recording=true] .drop-icon .for-recording{display:block}  /* While recording it shows the sound coming in. */
.drop-title{max-width:100%;font-size:15px;font-weight:600;letter-spacing:-.005em}
.drop-hint{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;max-width:400px;margin-top:6px;line-height:1.5}
.drop-hint .limit{display:inline-flex;align-items:center;gap:5px}
.drop-hint svg{width:14px;height:14px;color:var(--text-3)}
/* What can be added, as a row of small icons: a guide, not buttons (the zone itself opens the picker). */
.drop-kinds{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;margin:12px 0 2px;padding:0;list-style:none}
.drop-kinds li{display:flex;flex-direction:column;align-items:center;gap:5px;width:60px;font-size:12px;font-weight:500;line-height:1.2;color:var(--text-2)}
.drop-kinds svg{box-sizing:content-box;width:18px;height:18px;padding:7px;border-radius:8px;background:var(--card-solid);box-shadow:0 0 0 1px var(--border)}
.drop-actions,.recording-now{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;cursor:default}
.drop-actions .button,.recording-now .button{height:38px;padding:0 18px;font-size:14px}
.recording-now{display:none}
.for-touch{display:none}
@media (hover:none) and (pointer:coarse){.for-pointer{display:none}.for-touch{display:inline}}
#record-stop:disabled,#record-cancel:disabled{display:none}
body[data-recording=true] #record-start,body[data-recording=true] .dropzone :is(.drop-title,.drop-kinds,.drop-hint,.drop-actions){display:none}
body[data-recording=true] .dropzone .recording-now{display:flex}
body[data-recording=true] .dropzone{border-style:solid;border-color:var(--danger);background:var(--fill-soft);cursor:default}
body[data-recording=true] .drop-icon{color:var(--danger);animation:pulse 1.2s ease-in-out infinite}
.button.recording{border-color:transparent;background:var(--danger);color:var(--card-solid)}
.button.recording:hover:not(:disabled){background:var(--danger);opacity:.9}
.record-status{margin-top:10px;font-variant-numeric:tabular-nums}
body[data-recording=true] .record-status{order:-1;margin:0 0 2px;font-size:15px;font-weight:600;color:var(--text)}
body[data-recording=true] .record-status::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--danger);animation:pulse 1.2s ease-in-out infinite}
.link-row,.link-field{display:flex;align-items:center;gap:8px;height:46px;padding:0 4px 0 12px;border:1px solid var(--border-2);border-radius:12px;background:var(--card-solid);transition:border-color .15s,box-shadow .15s}
.link-row:focus-within,.link-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.link-row>svg,.link-sites svg{width:17px;height:17px;color:var(--text-3)}
.link-row input,.link-field input{flex:1;height:44px;padding:0;border:0;border-radius:0;background:transparent;font-size:14px}
.link-row input:focus,.link-field input:focus{background:transparent}
.link-row input::placeholder,.link-field input::placeholder{color:var(--text-3)}
/* Fields in the form show focus with their border and a soft ring, not a second outline. */
.upload :is(input:not([type=radio]),textarea):focus-visible{outline:none}
.notation textarea:focus,.notation input:focus{box-shadow:0 0 0 3px var(--accent-soft)}
.link-row .button,.link-field .button{height:34px}
/* A link sits under the drop area as the second way in: the sites it takes as icons, and one line of words. */
.link-block{display:flex;flex-direction:column;gap:8px}
.link-field{cursor:text}
.link-sites{display:flex;gap:9px;flex:none;color:var(--text-2)}
.link-sites svg{width:18px;height:18px}
.link-hint{margin:0;text-align:center}
.text-button{padding:0;border:0;background:none;color:var(--text-2);font-size:13px;text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px}
.text-button:hover{color:var(--text)}
/* The chosen source, one line with a way back. */
.source{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 12px;border-radius:12px;background:var(--fill-soft)}
.source-icon{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--card-solid);color:var(--accent)}
.source-icon svg{width:20px;height:20px}
.source[data-state=checking] .source-icon svg{opacity:.35}
.source[data-state=checking] .source-icon::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid var(--track);border-top-color:var(--accent);animation:spin .8s linear infinite}
.source-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.source-text strong{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.source-text span{font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
#file-hint svg{width:15px;height:15px;vertical-align:-3px;margin-right:5px}
.source[data-state=checking] #file-hint svg{animation:source-glow 1.6s ease-in-out infinite}
@keyframes source-glow{0%,100%{opacity:.4}50%{opacity:1;color:var(--accent)}}
@media (prefers-reduced-motion:reduce){.source[data-state=checking] #file-hint svg{animation:none}}
.record-preview{width:100%;height:36px}
.notation{display:flex;flex-direction:column;gap:8px}
.notation textarea{min-height:180px;font:13px/1.55 var(--mono);resize:vertical}
.notation .field{margin:0}
.notation .field input{flex:1;max-width:320px}
/* What is playing: compact cards instead of an engine menu, with the quick listen's finding beside the
question and a Suggested tag on the card it points to. Then AI refine as one switch row. */
.choice{min-width:0;margin:0;padding:0;border:0}
/* A floated legend sits in the flow, so the finding can float beside it on the same line. */
.choice legend{float:left;margin:0 0 8px;padding:0;font-size:14px;font-weight:600;line-height:20px}
.listen-note{float:right;display:flex;align-items:center;gap:6px;max-width:72%;margin:0;font-size:13px;line-height:20px;color:var(--text-2);white-space:nowrap}
.listen-note span{overflow:hidden;text-overflow:ellipsis}
.listen-note .text-button{flex:none;font-size:13px;color:var(--accent);text-decoration-color:var(--accent-border)}
.listen-note[data-state=busy]::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--track);border-top-color:var(--accent);animation:spin .8s linear infinite}
.listen-note[data-state=done]::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.choices{clear:both;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,168px),1fr));gap:8px}
.choice-card{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-2);border-radius:12px;background:var(--card-solid);cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}
.choice-card:hover{border-color:var(--text-3)}
.choice-card:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.choice-card:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.choice-card input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.choice-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--fill);color:var(--text-2);transition:background-color .15s,color .15s}
.choice-icon svg{width:18px;height:18px}
.choice-card:has(input:checked) .choice-icon{background:var(--accent);color:var(--card-solid)}
.choice-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.choice-title{display:flex;align-items:center;gap:6px}
.choice-text strong{font-size:14px;font-weight:600;line-height:1.3}
.choice-text small{font-size:12px;line-height:1.4;color:var(--text-2)}
.suggest{flex:none;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--card-solid);font-size:11px;font-weight:600;line-height:18px;white-space:nowrap}
.listen-warning{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--text-2)}
.refine-choice{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer}
.refine-choice strong{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.refine-choice strong svg{width:14px;height:14px;color:var(--accent)}
/* A switch, drawn on its own span so no browser's checkbox styling can bend it; on means the score is
proofread after transcription. */
.refine-choice input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.switch{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--border-2);transition:background-color .2s}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.2);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.refine-choice input:checked+.switch{background:var(--accent)}
.refine-choice input:checked+.switch::after{transform:translateX(16px)}
.refine-choice input:focus-visible+.switch{outline:2px solid var(--focus);outline-offset:2px}
.refine-choice:has(input:disabled){cursor:default}
.refine-choice input:disabled+.switch{opacity:.5}
/* AI features are in beta: a small tag beside their name (the Refine switch, Starling's chat header). */
.beta-tag{position:relative;display:inline-flex;align-items:center;height:18px;padding:0 7px;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-soft);font-size:11px;font-weight:600;line-height:1;letter-spacing:.04em;color:var(--accent);white-space:nowrap;overflow:hidden;vertical-align:middle}
/* Ink runs through the tag left to right a few times when it appears, then it rests; pointing at it runs it again. */
.beta-tag::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--accent) 26%,transparent) 50%,transparent 65%) 100% 0/260% 100% no-repeat;animation:beta-ink 2.2s cubic-bezier(.45,0,.3,1) .5s 3 both;pointer-events:none}
.beta-tag:hover::after{animation:beta-ink-again 1.4s cubic-bezier(.45,0,.3,1) both}
@keyframes beta-ink{from{background-position:100% 0}to{background-position:0 0}}
@keyframes beta-ink-again{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.beta-tag::after{animation:none}}
.beta-tag[hidden]{display:none}
@media (max-width:560px){.choices{grid-template-columns:1fr}.choice-card{padding:12px}.choice-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.sheet-note{margin:0;padding:10px 12px;border-radius:12px;background:var(--fill-soft);font-size:13px;line-height:1.5;color:var(--text-2)}
.options{margin:0}
/* Settings for the score: AI refine and More options as rows of one soft panel, apart from the choice
above; the panel goes when neither row applies. */
.settings{display:flex;flex-direction:column;border-radius:12px;background:var(--fill-soft)}
.settings>*{padding:12px 14px}
.settings>:not([hidden])~:not([hidden]){border-top:1px solid var(--border)}
.settings:not(:has(>:not([hidden]))){display:none}
.settings .options summary{padding:0}
.options summary{display:flex;align-items:center;gap:8px;padding:10px 2px 0;list-style:none;font-size:13px;font-weight:600;cursor:pointer}
.options summary::-webkit-details-marker{display:none}
.options summary .hint{flex:1;font-weight:400;text-align:right}
.options summary:focus-visible{outline-offset:4px;border-radius:6px}
.options .chevron{width:16px;height:16px;color:var(--text-2);transition:transform .2s}
.options[open] .chevron{transform:rotate(180deg)}
.options-body{padding:6px 2px 0}
.options-body .field{margin:4px 0 6px}
.upload-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:4px}
.upload-facts{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
#allowance{min-height:20px}
#allowance.skeleton{width:160px}
.upload-footer .button{min-width:136px;height:40px;padding:0 20px;font-size:14px}
.button.working::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;animation:spin .8s linear infinite}

/* Progress: the starling writing a short tune (always moving), the time left and a sentence only when it matters */
.progress{padding:2px 16px 18px}
.hero{display:grid;justify-items:center;padding:14px 0 4px;text-align:center;container-type:inline-size}
.hero[data-state=stopped]{padding-top:2px;justify-items:start;text-align:left}
/* A slip of score paper with four bars, one per step, each step named under its bar. The starling writes the website's
   Ode to Joy into it: ink flows along the staff from the left as the work goes on (and keeps flowing, since the place is
   an estimate), each note is written as the ink reaches it, and the bird waits on the top line where the next note goes,
   hopping on once it is written. Staff units: a space is 9, the bars start at 58 and are 78 wide (see the markup) */
@property --x{syntax:"<number>";inherits:true;initial-value:0}
@property --flow{syntax:"<color>";inherits:true;initial-value:transparent}
.sheet{width:min(100%,400px);margin:0 auto 14px;padding:12px 14px 11px;border-radius:12px;background:var(--paper);box-shadow:var(--page-shadow)}
.hero[data-state=stopped] .sheet{display:none}
.tune{position:relative;--x:0;--perch:0;--flow:var(--accent);--lines:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 366 37.17' preserveAspectRatio='none'%3E%3Cpath d='M0 0.585H366M0 9.585H366M0 18.585H366M0 27.585H366M0 36.585H366' stroke='%23000' stroke-width='1.17'/%3E%3Cpath d='M132 0V37.17M210 0V37.17M288 0V37.17' stroke='%23000' stroke-width='1.44'/%3E%3C/svg%3E");transition:--x 1s linear,--flow 1.2s}
.tune.reset,.tune.reset *{transition:none!important}
.tune>svg{position:relative;display:block;width:100%;height:auto;overflow:visible;stroke:none;stroke-linecap:butt}
.tune text{font-family:Leipzig;font-size:36px;fill:var(--ink)}
/* The closing double bar is drawn when the score is ready */
.tune .end{fill:none;stroke:var(--ink);stroke-width:1.44;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .2s}
.tune .end.thick{stroke-width:4.5}
/* The staff and bar lines, pale where the tune is still to be written, and inked up to the ink's front, which fades
   into them. While the work goes on, fresh ink flows in from the left on a steady beat and runs into the front */
.tune::before,.tune-ink{position:absolute;left:1.0638%;top:38.4946%;width:97.3404%;height:40.4022%;-webkit-mask:var(--lines) 0 0/100% 100% no-repeat;mask:var(--lines) 0 0/100% 100% no-repeat}
.tune::before{content:"";background:var(--ink);opacity:.22}
.tune-ink{--front:calc(14.7541% + 85.2459%*var(--x));--reveal:linear-gradient(90deg,#000 max(calc(var(--front) - 26px),13.66%),transparent calc(var(--front) + 2px));
  background:var(--ink);-webkit-mask:var(--lines) 0 0/100% 100% no-repeat,var(--reveal);mask:var(--lines) 0 0/100% 100% no-repeat,var(--reveal);-webkit-mask-composite:source-in;mask-composite:intersect}
.tune-ink::after{content:"";position:absolute;top:0;bottom:0;left:max(0px,calc(var(--front) - 260px));width:min(var(--front),260px);background:linear-gradient(90deg,transparent,var(--flow) 78%,transparent) -96px 0/96px 100% no-repeat;opacity:0;animation:tune-flow 2.6s cubic-bezier(.45,0,.55,1) infinite}
/* A note is written as the ink reaches it (--at): the head settles into place and the stem is drawn up. The newest is
   in the accent colour and cools to ink as the next one is written (--cool) */
.tune .note{opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s;--note:var(--accent)}
.tune .note.on{opacity:1;transform:none;transition:opacity .45s var(--at,0s),transform .9s var(--at,0s) cubic-bezier(.16,1,.3,1)}
.tune .note.on:not(.now){--note:var(--ink)}
.tune .note text{fill:var(--note);transition:fill .9s var(--cool,0s)}
.tune .note .stem,.tune .note .ledger{fill:none;stroke:var(--note);transition:stroke .9s var(--cool,0s)}
.tune .note .stem{stroke-width:1.08;stroke-dasharray:31;stroke-dashoffset:31}
.tune .note.on .stem{stroke-dashoffset:0;transition:stroke .9s var(--cool,0s),stroke-dashoffset .5s calc(var(--at,0s) + .12s) cubic-bezier(.3,.6,.4,1)}
.tune .note .ledger{stroke-width:1.44}
/* The starling stands on the top line, breathing; it hops in an arc, crouching first and settling as it lands. Its
   place is set by the page, one hop at a time (--perch: where its note is, in the share of the four bars) */
.tune .bird{fill:var(--ink);--hop:.72s;--lift:6px;transform:translate(calc(61px + 312px*var(--perch)),35.4px);transition:transform calc(var(--hop)*.54) linear calc(var(--hop)*.26),fill .4s}
.tune .bird.still{transition:fill .4s}
.tune .bird-hop,.tune .bird-life{transform-origin:0 0}
.tune .bird.hop .bird-hop{animation:tune-hop var(--hop) both}
.tune .bird-life{animation:tune-breathe 2.4s ease-in-out infinite alternate}
/* Done: the ink reaches the end, the double bar is drawn and the starling hops onto it */
.hero[data-state=done] .tune{--flow:var(--ink)}
.hero[data-state=done] .tune .end{transform:none;transition:transform .5s .95s cubic-bezier(.3,.7,.3,1)}
.hero[data-state=done] .tune .end.thick{transition-delay:1.1s}
.tune .bird.home{fill:var(--accent);transition:transform calc(var(--hop)*.54) linear calc(var(--hop)*.26),fill .6s calc(var(--hop)*.6)}
.tune .bird.home .bird-life{animation:tune-cheer .9s var(--hop) both}
/* Lost contact: everything turns grey, and keeps moving */
.hero[data-state=reconnecting] .sheet{--ink:var(--text-3);--accent:var(--text-3)}
.hero[data-state=reconnecting] .tune{--flow:var(--text-2)}
.hero-eta{margin:0;font-size:17px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--text)}
.hero-eta:empty{display:none}
.hero-message{margin:6px 0 0;max-width:42ch;font-size:13px;line-height:1.55;color:var(--text-2)}
.hero[data-state=stopped] .hero-message{max-width:none;margin-top:0}
/* Each step is named under its bar (the clef's room on the left, the double bar's on the right); "Ready" is the
   double bar itself, so its name is for screen readers */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin:2px 0 0;padding:0 1.6% 0 15.43%;list-style:none}
.steps li{display:flex;justify-content:center;min-width:0}
.step-name{font-size:12px;line-height:1.3;color:var(--text-3);white-space:nowrap;transition:color .3s}
.steps li[data-step=ready]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.steps li.done .step-name{color:var(--text-2)}
.steps li.active .step-name{color:var(--accent);font-weight:600}
/* On a phone-sized card the slip keeps its staff as wide as it can and the names stay apart */
@container (max-width:340px){.sheet{padding:10px 9px 9px}.step-name{font-size:11px}}
.progress-facts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:12px;border-top:1px solid var(--border);font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-2)}
.progress-facts[hidden]{display:none}
.heard{margin-top:14px;padding:8px 8px 8px 10px;border:1px solid var(--border);border-radius:12px;background:var(--card-solid)}
.heard[hidden],.heard-choices[hidden],.heard .button[hidden],.heard-option[hidden],.heard-tag[hidden],.heard-note[hidden]{display:none}
.heard-bar{display:flex;align-items:center;gap:10px;min-height:44px}
.heard[data-state=stopped] .heard-bar{display:none}
.heard-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:8px;background:var(--accent-soft);color:var(--accent)}
.heard-icon svg{width:22px;height:22px}
.heard-line{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;margin:0;font-size:13px;color:var(--text-2)}
.heard-line strong{font-size:15px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.heard-change,.heard-stop{flex:none;min-height:40px}
.heard-change:not([hidden])+.heard-stop{position:relative;margin-left:9px}
.heard-change:not([hidden])+.heard-stop::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:1px;background:var(--border)}
.heard-stop svg{width:14px;height:14px}
.heard-choices{display:grid;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
.heard[data-state=stopped] .heard-choices{margin-top:0;padding-top:2px;border-top:0}
.heard-ask{margin:0;font-size:14px;font-weight:600}
.heard[data-state=stopped] .heard-ask{display:none}
.heard-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:8px}
.heard-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:44px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card-solid);color:var(--text);font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.heard-option>svg:first-child{width:24px;height:24px;color:var(--text-2)}
.heard-option:hover:not(:disabled){border-color:var(--accent-border)}
.heard-option:disabled{cursor:default;opacity:1;color:var(--text)}
.heard-option[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.heard-option[aria-pressed=true]>svg:first-child{color:var(--accent)}
.heard-check{position:absolute;top:10px;right:10px;width:16px;height:16px;color:var(--accent);stroke-width:2.4;visibility:hidden}
.heard-option[aria-pressed=true] .heard-check{visibility:visible}
.heard-tag{padding:2px 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-style:normal;font-weight:600}
.heard-note{margin:0;font-size:13px;color:var(--text-2)}
@media (max-width:520px){.heard-options{grid-auto-flow:row;grid-template-columns:1fr}.heard-bar{flex-wrap:wrap}.heard-line{flex-basis:calc(100% - 52px)}.heard-change{margin-left:50px}}
.cover{position:relative;display:block;flex:none;width:112px;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:var(--fill-soft)}
.cover[hidden]{display:none}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover-time{position:absolute;right:5px;bottom:5px;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.cover-time[hidden]{display:none}
.source-icon[hidden],.task-icon[hidden]{display:none}
.upload-timing{line-height:1.6}
.progress-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.progress-actions:not(:has(button:not([hidden]))){display:none}
@media (prefers-reduced-motion:reduce){
  /* The ink moves on without flowing, notes appear in place and the starling steps without hopping */
  .tune{--flow:var(--ink)}
  .tune,.tune .note,.tune .note.on,.tune .note .stem,.tune .note.on .stem,.tune .bird,.tune .end{transition:none}
  .tune-ink::after,.tune .bird-life,.tune .bird.hop .bird-hop,.tune .bird.home .bird-life{animation:none}
  .tune .note{transform:none}
  .tune .note .stem{stroke-dasharray:none}
}

/* Loading and notices */
.skeleton{display:block;border-radius:8px;background:linear-gradient(90deg,var(--fill) 30%,var(--fill-strong) 50%,var(--fill) 70%);background-size:300% 100%;animation:shimmer 1.4s ease-in-out infinite}
.skeleton.line{width:52%;height:11px;margin:4px 0}
.skeleton.line.short{width:30%;margin-top:9px}
.skeleton.block{height:150px;margin:0 14px 14px;border-radius:12px}
.notice{padding:28px 20px;text-align:center}
.notice-icon{display:inline-grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:var(--fill);color:var(--text-2)}
.notice .title{white-space:normal}
.title.renameable{cursor:text;border-radius:4px}
.title.renameable:hover{background:var(--accent-soft)}
.title.renameable[contenteditable="plaintext-only"]{text-overflow:clip;outline:2px solid var(--accent);outline-offset:2px;cursor:text}
.notice .hint{max-width:420px;margin:6px auto 0}
.toast{position:fixed;top:12px;left:0;right:0;z-index:60;width:max-content;max-width:calc(100% - 32px);margin:0 auto;padding:8px 15px;border-radius:8px;background:var(--overlay);color:var(--on-overlay);font-size:13px;font-weight:500;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);animation:rise .2s ease}

/* Editor: notes are chosen on the score itself (a click, or a box dragged over them) and a card
   beside the selection takes a request for the chat and the quick edits. On touch screens and in
   narrow frames the card docks at the bottom. A pill at the top carries short news and the first hint. */
.divider{flex:none;width:1px;height:20px;margin:0 3px;background:var(--border-2)}
.editor-layer{position:absolute;inset:0;z-index:7;pointer-events:none}
.marquee{position:absolute;z-index:6;border:1.5px solid var(--select);border-radius:3px;background:var(--accent-soft);pointer-events:none}
.stage-pill{position:absolute;top:10px;left:50%;max-width:calc(100% - 24px);margin:0;padding:6px 14px;border-radius:999px;background:var(--pop-bg);box-shadow:var(--shadow-pop);font-size:13px;line-height:1.35;color:var(--text-2);text-align:center;transform:translateX(-50%);animation:pill-rise .18s ease}
.stage-pill:empty{display:none}
.hint-pill{pointer-events:none}
.stage:has(#playback-message:not(:empty)) .hint-pill{display:none}
/* News from the editor reads as a dark pill; a refusal in the danger colour with a mark, so neither slips by. */
.editor-message{display:flex;align-items:center;gap:8px;width:max-content;padding:8px 16px;background:var(--overlay);color:var(--on-overlay);font-size:13px;font-weight:500;box-shadow:0 10px 30px -12px rgba(0,0,0,.5);pointer-events:auto}
.editor-message.error{padding-left:10px;background:#c42b12;color:#fff}
.editor-message.error::before{content:"!";display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);font-weight:600;font-size:12px}
.selection-card{position:absolute;z-index:8;width:min(440px,calc(100% - 16px));padding:6px;border-radius:12px;background:var(--pop-bg);box-shadow:var(--shadow-pop);pointer-events:auto;animation:rise .14s ease}
.selection-card.docked{right:8px;width:auto}
.ask-row{display:flex;align-items:flex-end;gap:6px;margin:0;padding:0 0 4px 10px}
.ask-row textarea{flex:1;min-width:0;height:38px;min-height:38px;max-height:120px;padding:9px 0;border:0;border-radius:0;background:transparent;font-size:14px;line-height:20px;resize:none;overflow-y:hidden}
.ask-row textarea:focus,.ask-row textarea:focus-visible{background:transparent;outline:none}
.selection-card:focus-within{box-shadow:var(--shadow-pop),0 0 0 1.5px var(--accent-border)}
.send{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;margin:3px 0;padding:0;border:0;border-radius:999px;background:var(--primary);color:var(--on-primary);transition:opacity .15s,transform .12s}
.send:active:not(:disabled){transform:scale(.92)}
.send:disabled{opacity:.22}
.send svg{width:17px;height:17px;stroke-width:2.2}
.send[data-count]:not([data-count=""])::after{content:attr(data-count);position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pop-bg);border-radius:999px;background:var(--accent);color:var(--card-solid);font-size:11px;font-weight:600;line-height:14px;text-align:center}
.card-tools{display:flex;align-items:center;gap:1px;padding-top:4px;border-top:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.card-tools::-webkit-scrollbar{display:none}
.card-tools .icon-button{flex:none;width:32px;height:32px}
.card-tools .icon-button svg.filled{width:14px;height:14px;stroke:none}
.icon-button.octave{width:38px}
.selection-count{flex:1;min-width:max-content;padding:0 8px;font-size:12px;font-weight:500;color:var(--text-2);white-space:nowrap}
/* A dot once the chat can see the selection. */
.selection-count.shared::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:var(--accent);vertical-align:middle}
.selection-card.docked .selection-count{display:none}
.selection-card.docked .card-tools{justify-content:space-between}
.selection-card.docked .card-tools .icon-button{width:40px;height:40px}
.selection-card.docked .send,.selection-card.docked .queue-add{width:36px;height:36px;margin:1px 0}
.selection-card.busy .card-tools .icon-button,.selection-card.busy .send{opacity:.38;pointer-events:none}
/* Requests can wait in a list: the card's second button adds one, the tray at the top right lists and
   sends them, and a numbered pin marks each one's notes. */
.queue-add{display:grid;place-items:center;flex:none;width:32px;height:32px;margin:3px 0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text-2);transition:background-color .15s,color .15s}
.queue-add:hover:not(:disabled){background:var(--fill);color:var(--text)}
.queue-add:disabled{opacity:.28}
.queue-add svg{width:19px;height:19px}
.queue-tray{position:absolute;top:10px;right:12px;z-index:9;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--pop-bg);box-shadow:var(--shadow-pop);pointer-events:auto;animation:rise .16s ease}
.queue-toggle{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 9px;border:0;border-radius:999px;background:transparent;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap}
.queue-toggle:hover{background:var(--fill)}
.queue-toggle svg{width:16px;height:16px}
.queue-toggle .chevron{width:14px;height:14px;color:var(--text-2);transition:transform .2s}
.queue-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}
.queue-list{position:absolute;top:calc(100% + 6px);right:0;width:min(320px,calc(100vw - 24px));max-height:300px;overflow:auto;margin:0;padding:6px;list-style:none;border-radius:12px;background:var(--pop-bg);box-shadow:var(--shadow-pop)}
.queue-list li{display:flex;align-items:flex-start;gap:2px}
.queue-item{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;padding:7px 9px;border:0;border-radius:8px;background:transparent;text-align:left}
.queue-item:hover{background:var(--fill)}
.queue-item strong{font-size:12px;font-weight:600;color:var(--text-2)}
.queue-item span{font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.queue-remove{width:28px;height:28px;margin-top:4px}
.queue-remove svg{width:15px;height:15px}
.queue-pins{position:absolute;inset:0;pointer-events:none}
.editor-layer.queued .stage-pill{max-width:calc(100% - 420px)}
.editor-layer.queued.compact .stage-pill{top:52px;max-width:calc(100% - 24px)}
.queue-pin{position:absolute;display:grid;place-items:center;width:22px;height:22px;padding:0;border:2px solid var(--pop-bg);border-radius:999px 999px 999px 4px;background:var(--accent);color:var(--card-solid);font-size:11px;font-weight:600;line-height:1;pointer-events:auto;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.drawer{position:absolute;top:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;width:min(360px,100%);background:var(--pop-bg);border-left:1px solid var(--border);box-shadow:var(--shadow-pop);animation:slide-in .22s ease}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px 8px 18px}
.drawer-head h2{margin:0;font-size:16px;font-weight:600}
.drawer-body{flex:1;overflow:auto;padding:0 18px calc(24px + var(--safe-bottom) + var(--composer-space))}
#settings-part-field{padding-bottom:6px}
.group{padding:14px 0 12px;border-top:1px solid var(--border)}
.group h3{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--text)}
.group>.button{margin:6px 0 2px}
.drawer :is(.group,details.more)>.button{display:flex;max-width:100%;margin-left:auto}
.drawer .row:has(select)>.button{margin-left:auto}
.group .hint{margin-top:8px}
.layout-choices{display:grid;gap:6px;min-width:0;margin:0 0 2px;padding:0;border:0}
.layout-choices .choice-card{padding:9px 12px;border-radius:12px}
#again-current{margin-top:0}
.again-choices{display:grid;gap:8px;margin-top:10px}
.again-choices .button{justify-content:flex-start;width:100%}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
.row select{flex:1 1 110px}
.slash{color:var(--text-3)}
details.more{margin-top:10px;font-size:13px}
details.more>summary{cursor:pointer;color:var(--text-2);padding:4px 0}
.validation-issue{display:block;width:100%;margin:6px 0;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--fill-soft);font-size:13px;text-align:left}
.validation-issue:hover{border-color:var(--border-2)}
.validation-error{border-color:var(--accent-border);background:var(--accent-soft)}
#validation-issues .text-button{padding:2px 0 6px;border:0;background:none;color:var(--accent);font-size:13px;font-weight:500}
.annotations-empty{margin:0;font-size:13px;color:var(--text-3)}
.annotation-item{margin:8px 0;padding:8px 10px;border-left:2px solid var(--accent-border);font-size:13px;overflow-wrap:anywhere}
.annotation-item strong{font-size:12px;font-weight:500;color:var(--text-2)}
.annotation-item p{margin:4px 0 0;white-space:pre-wrap}
.version{margin-top:14px;color:var(--text-3)}

/* Popovers */
.popover{position:fixed;z-index:50;width:max-content;min-width:230px;max-width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;padding:8px 12px;border-radius:12px;background:var(--pop-bg);box-shadow:var(--shadow-pop);animation:rise .14s ease}
.popover .field{margin:6px 0}
.popover .field .button{margin-left:4px}
.menu-item{display:block;min-height:36px;margin:0 -4px;padding:8px;border:0;border-radius:8px;background:transparent;font-size:14px;text-align:left;width:calc(100% + 8px)}
.menu-item:hover:not(:disabled){background:var(--fill)}
/* A setting in a menu shows a tick while it is on; a shortcut's key sits at the end of its item. */
.menu-item .menu-check{margin-left:auto;color:var(--accent)}
.menu-item:not([aria-pressed=true],[aria-checked=true]) .menu-check{visibility:hidden}
.menu-key{margin-left:auto;padding:0 6px;border:1px solid var(--border-2);border-radius:6px;font-size:12px;font-weight:600;color:var(--text-3)}
/* The keyboard shortcuts sheet (shortcuts.js). */
.shortcuts-dialog{width:min(960px,calc(100vw - 24px));max-height:min(88vh,820px);padding:0;border:0;border-radius:16px;background:var(--pop-bg);color:var(--text);box-shadow:var(--shadow-pop)}
.shortcuts-dialog[open]{display:flex;flex-direction:column}
.shortcuts-dialog::backdrop{background:rgba(15,14,18,.35)}
.shortcuts-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 4px 22px}
.shortcuts-head h2{margin:0;font-size:16px}
/* The rows flow down two balanced columns; a section may go on in the next column, a heading stays with its first row. */
.shortcuts-body{columns:2 300px;column-gap:40px;padding:8px 22px 18px;overflow:auto;outline:none}
.shortcuts-body section{padding-bottom:6px}
.shortcuts-body h3{margin:14px 0 4px;break-after:avoid;font-size:12px;font-weight:600;color:var(--text-3)}
.shortcuts-body section:first-child h3{margin-top:0}
.shortcuts-body dl{margin:0;font-size:13px}
/* What a shortcut does on the left, its keys on the right. */
.shortcut{break-inside:avoid;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid var(--border)}
.shortcut dd{margin:0;color:var(--text)}
.shortcut dt{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:55%}
.shortcuts-body .keys{display:inline-flex;gap:3px;white-space:nowrap}
.shortcuts-body kbd{min-width:22px;padding:1px 6px;border:1px solid var(--border-2);border-bottom-width:2px;border-radius:6px;background:var(--fill-soft);font:600 12px/1.5 ui-sans-serif,system-ui,sans-serif;text-align:center}
.more-edits{min-width:270px;max-width:min(392px,calc(100vw - 16px));padding:8px 12px 6px}  /* Wide enough for the Dynamic row. */
.more-edits .menu-item:first-of-type{margin-top:4px}
/* Dynamics as the score prints them, one shared size: the wider marks just take more room. */
.more-edits .menu-label{margin:4px 0 6px;font-size:12px;font-weight:600;color:var(--text-2)}
.dynamic-toggle .chevron{width:14px;height:14px;margin-left:auto;opacity:.55;transition:transform .15s}
.dynamic-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}
/* The dynamics as a list: each mark as the score prints it, then what it means. */
.dynamic-menu{display:grid;gap:1px;margin:0 0 6px}
.dynamic-menu[hidden]{display:none}
.dynamic-menu .dynamic{display:flex;align-items:center;gap:10px;width:100%;padding:5px 8px;border:0;border-radius:8px;background:transparent;font-size:13px;text-align:left;color:var(--text-2)}
.dynamic-menu .dynamic:hover:not(:disabled),.dynamic-menu .dynamic:focus-visible{background:var(--fill)}
.dynamic-menu svg{width:32px;height:18px;flex:none;fill:currentColor;stroke:none;color:var(--text)}
.dynamic-menu .dynamic:disabled svg{color:var(--text-3)}
.pitch-input{width:64px;font:500 13px/1 var(--mono)}
/* Guitar TAB: the selected note's string and fret. */
.tab-tools[hidden]{display:none}
.fret-input{width:52px;font:500 13px/1 var(--mono)}
#note-string{max-width:150px}

@media (max-width:560px){
  .bar{padding:12px 8px 12px 12px;gap:10px}
  .mark{width:32px;height:32px}
  .player{padding:2px 12px 12px}
  .segmented{flex:1}
  .view-field .segmented{flex:1 1 100%}
  .segmented button{flex:1;padding:0 8px}
  .stage,.downloads,.suggestion,.feedback,.upload{margin-left:12px;margin-right:12px}
  .upload{margin:0;padding:0 12px 12px}
  .suggestion{grid-template-columns:auto 1fr}
  .suggestion-actions{grid-column:1/-1;justify-content:flex-end}
  .dropzone{min-height:180px;padding:22px 14px 18px}
  .drop-kinds{max-width:236px;margin-left:auto;margin-right:auto}
  .drop-kinds li{width:58px}
  .drop-hint{display:grid;justify-content:center;justify-items:start}  /* Wrapped, the icons line up. */
  .upload-footer .button{min-width:0;flex:none}
  .download-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A phone leaves the site icons out, so the whole "Paste a video link or notation text" fits; the hint beneath names
   video sites. The narrowest phones end it with an ellipsis rather than mid-word. */
@media (max-width:640px){.link-sites{display:none}.link-field input{text-overflow:ellipsis}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes pulse{50%{opacity:.45}}
@keyframes tune-flow{0%{background-position:-96px 0;opacity:0}12%,68%{opacity:.85}88%,100%{background-position:calc(100% + 30px) 0;opacity:0}}
@keyframes tune-hop{0%{transform:translateY(0) rotate(0deg) scale(1,1);animation-timing-function:cubic-bezier(.3,0,.5,1)}16%{transform:translateY(0) rotate(0deg) scale(1.05,0.92);animation-timing-function:cubic-bezier(.4,0,.6,1)}26%{transform:translateY(0) rotate(4deg) scale(0.97,1.05);animation-timing-function:cubic-bezier(.2,.6,.45,1)}52%{transform:translateY(calc(-1*var(--lift))) rotate(0deg) scale(1,1);animation-timing-function:cubic-bezier(.55,0,.8,.45)}70%{transform:translateY(calc(-.35*var(--lift))) rotate(-4deg) scale(1,1);animation-timing-function:cubic-bezier(.5,0,.9,.6)}80%{transform:translateY(0) rotate(0deg) scale(1.04,0.93);animation-timing-function:cubic-bezier(.3,.6,.4,1)}100%{transform:translateY(0) rotate(0deg) scale(1,1)}}
@keyframes tune-breathe{to{transform:scale(.99,1.02)}}
@keyframes tune-cheer{25%{transform:translateY(-5px) rotate(-8deg)}50%{transform:none}70%{transform:translateY(-2.5px) rotate(-4deg)}}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}}
@keyframes pill-rise{from{opacity:0;transform:translate(-50%,6px)}}
@keyframes slide-in{from{transform:translateX(24px);opacity:0}}

/* Only the staging tester receives these controls; no credentials enter the page. */
.ai-source-switch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin:4px 0}
.ai-source-switch[hidden]{display:none}
.ai-source-switch select{max-width:130px}
.ai-source-switch small{font-size:11px}
.sl-source{font-size:11px;color:var(--muted)}
/* Admin checks keep their own rows in both chat composers; details never crowd the actions. */
.ai-source-switch{min-width:0;gap:8px}
.provider-connection,.provider-diagnostic{flex-basis:100%;width:100%;max-width:100%}
.provider-diagnostic-details{flex-basis:100%;min-width:0;max-width:100%}
.provider-diagnostic-details[hidden]{display:none}
.provider-diagnostic-details summary{cursor:pointer}
.provider-diagnostic>.sl-text-button{flex:none;max-width:100%;white-space:normal;text-align:left}
.provider-diagnostic-details pre{max-height:320px;margin:8px 0 0;padding:8px;border-radius:8px;background:var(--fill);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}

/* The pilot reuses Starling's safe Markdown outside the chat's typography scope. */
.refine-pilot .sl-answer{--sl-text:13px;--sl-line:1.55;--sl-small:12px;min-width:0}