/* Studio composition: music carries the contrast; chrome stays quiet. */
body { background: radial-gradient(ellipse at 70% 0, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), var(--bg); }
#app > .topbar { height: 64px; padding-inline: 25px; background: var(--chrome); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
#app > .topbar .brand { gap: 9px; }
#app > .topbar .brand-name { font-size: 25px; letter-spacing: -1.3px; font-weight: 720; }
#app > .topbar .brand-mark { background: var(--surface); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); border-radius: 9px; width: 31px; height: 31px; }
#app > .topbar .top-actions { gap: 6px; }
#app > .topbar .top-actions > .secondary { border-color: transparent; background: transparent; }
#app > .topbar .top-actions > .secondary:hover { background: var(--hover); }
#app > .topbar .top-actions > .primary { border-radius: 7px; padding-inline: 15px; }
.topbar .breadcrumb { font-size: 11px; }
.topbar .saved-state { color: var(--muted); }
#app > .layout { min-height: calc(100dvh - 64px); grid-template-columns: 180px minmax(0, 1fr); }
.layout > .sidebar { top: 64px; height: calc(100dvh - 64px); background: var(--chrome); border-right-color: color-mix(in srgb, var(--border) 60%, transparent); }
.sidebar .track-button { position: relative; border-radius: 8px; min-height: 61px; background: transparent; }
.sidebar .track-button.is-active { background: color-mix(in srgb, var(--track-bg) 38%, var(--panel)); border-color: color-mix(in srgb, var(--track) 40%, var(--border)); box-shadow: none; }
.sidebar .track-button.is-active::before { content: ''; position: absolute; inset: 11px auto 11px 0; width: 3px; border-radius: 4px; background: var(--track); }
.sidebar .track-icon { background: var(--track-bg); color: var(--track); border: 1px solid color-mix(in srgb, var(--track) 14%, transparent); border-radius: 7px; }
.sidebar .track-name { font-size: 12px; font-weight: 600; }
.sidebar .track-subtitle { font-size: 10px; color: var(--muted); }
.sidebar .theme-select { border-color: transparent; background: transparent; }
.layout > .main { max-width: 1440px; padding: 25px 30px 36px; }
.main .workspace-header { margin-bottom: 18px; }
.main .project-title { font-size: 31px; letter-spacing: -.9px; line-height: 1.25; font-weight: 620; }
.main .project-subtitle { margin-top: 6px; font-size: 11px; }
.main .project-identity > .eyebrow { color: var(--accent); letter-spacing: .15em; margin-bottom: 4px; }
.main .workspace-header-actions { gap: 3px; }
.main .workspace-header-actions .secondary { border-color: transparent; background: transparent; color: var(--muted); }
.main .workspace-header-actions .secondary:hover { color: var(--ink); background: var(--hover); }
.main .workspace-header-actions .icon { width: 16px; height: 16px; }
.main > .transport { top: 75px; padding: 9px 11px; border-radius: 10px; border-color: color-mix(in srgb, var(--line) 35%, var(--border)); background: var(--chrome); margin-bottom: 17px; box-shadow: 0 -12px 0 var(--bg), 0 3px 8px color-mix(in srgb, var(--bg) 75%, transparent); }
.main .transport .play-button { min-width: 96px; height: 39px; border-radius: 7px; background: var(--accent); font-weight: 650; box-shadow: inset 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.main .transport .play-button .icon { width: 15px; height: 15px; }
.main .transport .play-button .icon path { fill: currentColor; stroke-width: 0; }
.main .transport .number-control input { font: 600 21px var(--mono); width: 45px; letter-spacing: -.8px; }
.main .transport .number-control span { font-size: 9px; }
.main .transport select { color: var(--muted); }
.main .transport select:hover { color: var(--ink); background: var(--surface); }
.main .transport .icon-button { color: var(--muted); }
.main .transport .active-toggle { color: var(--accent); background: var(--guitar-bg); }
.main .transport .position { display: block; color: var(--accent); padding-left: 7px; border-left: 1px solid var(--border); }
.main .arrangement-section { margin-bottom: 16px; }
.main .arrangement-heading { margin-bottom: 5px; }
.main .arrangement-heading .eyebrow { font-size: 10px; letter-spacing: .1em; }
.main .arrange-tools button { color: var(--muted); min-height: 30px; font-size: 11px; }
.main .arrange-tools button:hover { color: var(--ink); }
.main .bars-scroll { padding: 2px 1px 4px; }
.main .bars.compact-rail { gap: 7px; }
.main .bars.compact-rail .bar-card.compact { width: 76px; min-width: 76px; height: 43px; padding: 8px; border-radius: 6px; background: var(--chrome); border-color: color-mix(in srgb, var(--border) 65%, transparent); }
.main .bar-card.compact .bar-number { font-size: 11px; font-weight: 500; color: var(--muted); }
.main .bar-card.compact .bar-mini { width: 35px; height: 21px; opacity: .75; }
.main .bars.compact-rail .bar-card.active { background: var(--track-bg); border-color: color-mix(in srgb, var(--track) 65%, var(--border)); box-shadow: none; }
.main .bars.compact-rail .bar-card.active .bar-number { color: var(--track); }
.main .bars.compact-rail .bar-card:hover { border-color: var(--line); background: var(--panel); }
.main .bars.compact-rail .add-bar-card { width: 39px; height: 43px; border: 1px dashed var(--border); }
.main .practice-strip { margin-bottom: 0; margin-top: 6px; border-top: none; padding-top: 0; }
.main .work-area { gap: 10px; }
.main .editor-panel { border-radius: 12px; background: var(--panel); border-color: color-mix(in srgb, var(--line) 45%, var(--border)); box-shadow: var(--shadow); }
.editor-panel .editor-heading { min-height: 57px; gap: 14px; padding: 10px 18px; background: var(--panel); border-bottom-color: var(--border); }
.editor-panel .part-title { gap: 8px; min-width: 0; }
.editor-panel .part-title strong { font-size: 13px; font-weight: 600; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-panel .part-title .pill { display: none; }
.editor-panel .track-dot { width: 6px; height: 6px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--track) 8%, transparent); }
.editor-panel .sound-preset { margin-left: auto; border-color: transparent; border-radius: 6px; background: var(--surface); font-size: 11px; max-width: 165px; }
.editor-panel #focus-writing { margin-left: 0; min-height: 32px; font-size: 11px; padding-inline: 8px; gap: 5px; }
.editor-panel #focus-writing .icon { width: 15px; height: 15px; }
.editor-panel #focus-writing.is-active { color: var(--track); background: var(--track-bg); }
.editor-panel .bar-nav { margin-left: 0; gap: 4px; }
.editor-panel .bar-nav .bar-title { font: 10px var(--mono); color: var(--muted); min-width: 68px; text-align: center; }
.editor-panel .bar-nav .icon-button { width: 28px; height: 30px; border-color: transparent; background: transparent; }
.editor-panel .editor-tools { min-height: 56px; padding: 8px 17px; gap: 9px; background: color-mix(in srgb, var(--panel) 72%, var(--chrome)); }
.editor-panel .editor-tools > .quiet { font-size: 11px; padding: 6px 8px; gap: 5px; }
.editor-panel .editor-tools > .quiet .icon { width: 15px; height: 15px; }
.editor-panel .entry-controls { gap: 10px; }
.editor-panel .entry-controls #entry-fret { background: var(--canvas); border-color: var(--border); width: 44px; height: 34px; font-size: 16px; }
.editor-panel .length-tools { gap: 8px; }
.editor-panel .duration-group { background: var(--surface); padding: 2px; border-radius: 6px; }
.editor-panel .duration-group button { min-width: 29px; min-height: 29px; font-size: 11px; }
.editor-panel .duration-group button.chosen { background: var(--track-bg); color: var(--track); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--track) 35%, transparent); }
.editor-panel .editor-tools select { background: var(--canvas); border-color: transparent; min-height: 32px; }
.editor-panel .note-context { min-height: 56px; background: color-mix(in srgb, var(--track-bg) 40%, var(--panel)); border-bottom-color: var(--border); padding-inline: 17px; }
.editor-panel .note-context .context-identity { color: var(--track); }
.editor-panel .editor-canvas { background: var(--canvas); padding: 12px 20px 0; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent); }
.editor-canvas .tab-svg.phrase-svg { max-width: 1180px; margin-inline: auto; }
.editor-canvas .phrase-svg .measure-title { font: 650 12px var(--mono); letter-spacing: 1px; fill: var(--muted); }
.editor-canvas .phrase-svg .measure-meta { font: 11px var(--sans); fill: var(--muted); }
.editor-canvas .phrase-svg .active-measure rect.measure-band { fill: color-mix(in srgb, var(--track) 4%, transparent); }
.editor-canvas .phrase-svg .active-measure .measure-title { fill: var(--track); }
.editor-canvas .phrase-svg .measure-divider { stroke: var(--line); stroke-width: 1; opacity: .65; }
/* Strings stay quiet but reach at least 3:1 against the canvas in every palette. */
.editor-canvas .phrase-svg .string-line { stroke: color-mix(in srgb, var(--line) 62%, var(--ink)); stroke-width: 1; opacity: 1; }
:root[data-theme=dark] .editor-canvas .phrase-svg .string-line { stroke: color-mix(in srgb, var(--line) 88%, var(--ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .editor-canvas .phrase-svg .string-line { stroke: color-mix(in srgb, var(--line) 88%, var(--ink)); } }
.editor-canvas .phrase-svg .beat-line { stroke: var(--line); opacity: .14; stroke-dasharray: 1 6; }
.editor-canvas .phrase-svg .beat-line.major { opacity: .18; stroke-dasharray: none; }
.editor-canvas .phrase-svg .beat-label { fill: var(--muted); opacity: .65; font-size: 11px; }
.editor-canvas .phrase-svg .beat-label.major { fill: var(--ink); opacity: .85; font-size: 12px; font-weight: 500; }
.editor-canvas .phrase-svg .string-label { fill: var(--muted); font: 11px var(--mono); }
.editor-canvas .fret-note rect.note-bg { fill: var(--canvas); stroke: transparent; }
.editor-canvas .fret-note text { fill: var(--ink); font: 600 21px var(--mono); }
.editor-canvas .fret-note:hover rect.note-bg { fill: var(--track-bg); stroke: color-mix(in srgb, var(--track) 45%, transparent); }
.editor-canvas .fret-note.selected rect.note-bg { fill: var(--track); stroke: var(--track); }
.editor-canvas .fret-note.selected text { fill: var(--canvas); }
.editor-canvas .fret-note.selected { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--track) 18%, transparent)); }
.editor-canvas .note-tail { stroke: var(--track); stroke-width: 3; opacity: .55; }
.editor-canvas .cursor-circle { fill: color-mix(in srgb, var(--track-bg) 60%, transparent); stroke-width: 1; stroke-dasharray: 2 4; }
.editor-canvas .playhead { stroke-width: 2; }
.editor-panel .canvas-footer { min-height: 44px; padding: 6px 16px; gap: 14px; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); background: var(--canvas); }
.editor-panel .canvas-footer > .hint { flex: 1; color: var(--muted); font-size: 10px; }
.editor-panel .canvas-footer > .hint > .icon { display: none; }
.editor-panel .canvas-footer .right-hint { font-size: 10px; }
.editor-panel .phrase-view-controls { border-color: var(--border); padding: 2px; background: transparent; }
.editor-panel .phrase-view-controls button { font-size: 10px; min-width: 52px; min-height: 26px; padding: 5px 7px; }
.editor-panel .phrase-view-controls button.chosen { background: var(--surface); color: var(--ink); box-shadow: none; }
.editor-panel .edit-actions { padding: 10px 14px; gap: 4px; background: var(--panel); border-top: 1px solid var(--border); }
.editor-panel .edit-actions button { border-color: transparent; color: var(--muted); padding: 5px 7px; }
.editor-panel .edit-actions button:hover { background: var(--hover); color: var(--ink); }
.main .below-editor { display: none; }
.main .bottombar { margin-top: 22px; padding-top: 12px; }
.main .bottombar > span { font-size: 9px; letter-spacing: .08em; }
#app.is-focused > .layout > .main > .workspace-header,
#app.is-focused > .layout > .main > .arrangement-section,
#app.is-focused > .layout > .main > .bottombar { display: none; }
#app.is-focused .sidebar-tip { display: none; }
#app.is-focused > .layout > .main { padding-top: 18px; }
#app.is-focused .editor-panel .editor-canvas { padding-block: 22px 9px; }

@media (max-width: 1050px) {
  #app > .layout { display: block; }
  .layout > .sidebar { position: static; height: auto; padding: 9px 24px; display: flex; flex-direction: row; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar .track-list { display: flex; flex-direction: row; gap: 6px; padding: 0; max-height: none; flex-wrap: wrap; }
  .sidebar .track-button { min-height: 45px; padding: 6px 10px; min-width: 138px; }
  .sidebar .track-button.is-active::before { inset: 9px auto 9px 0; width: 2px; }
  .sidebar .track-icon { width: 26px; height: 30px; }
  .sidebar .track-name { font-size: 11px; }
  .sidebar .track-subtitle { font-size: 9px; }
  .sidebar .sidebar-bottom { display: block; margin: 0 0 0 auto; border: 0; padding: 0; flex-shrink: 0; }
  .sidebar .sidebar-bottom > div, .sidebar .sidebar-bottom > button { display: none; }
  .sidebar .theme-select { width: 123px; font-size: 10px; padding-inline: 4px; }
  .layout > .main { padding: 21px 24px 30px; }
  .main .workspace-header { margin-bottom: 16px; }
  .main .project-title { font-size: 29px; }
  .main > .transport { margin-bottom: 15px; }
  .main .transport .position { display: none; }
  .main .arrangement-section { margin-bottom: 14px; }
  .editor-panel .editor-heading { padding-inline: 16px; gap: 9px; }
  .editor-panel .editor-canvas { padding-inline: 18px; }
}
@media (max-width: 760px) {
  #app > .topbar { height: 60px; padding-inline: 17px; }
  .layout > .sidebar { padding: 8px 16px; gap: 8px; }
  .sidebar .track-button { min-width: 118px; padding-inline: 8px; }
  .sidebar .theme-select { width: 88px; font-size: 9px; }
  .layout > .main { padding: 17px 16px 25px; }
  .main .project-title { font-size: 26px; }
  .main .transport .number-control input { font-size: 19px; }
  .main .transport .play-button { min-width: 82px; }
  .main .arrange-tools button { font-size: 10px; padding-inline: 6px; }
  .editor-panel .editor-heading { padding-inline: 13px; }
  .editor-panel .part-title strong { max-width: 155px; }
  .editor-panel .sound-preset { max-width: 145px; font-size: 10px; }
  .editor-panel .editor-tools { gap: 7px; padding-inline: 12px; }
  .editor-panel .editor-canvas { padding-inline: 11px; }
  .editor-panel .canvas-footer { flex-wrap: wrap; padding-inline: 12px; gap: 8px 12px; }
  .editor-panel .canvas-footer .right-hint { display: none; }
  .editor-panel .canvas-footer > .hint { font-size: 9px; }
}
@media (max-width: 520px) {
  .sidebar .track-list { flex-wrap: nowrap; overflow-x: auto; padding: 2px; max-width: calc(100vw - 130px); }
  .sidebar .track-button { flex: 0 0 auto; min-width: 110px; }
  .sidebar .track-subtitle { display: none; }
  .sidebar .track-button { min-height: 38px; }
  .main .workspace-header-actions { gap: 1px; }
  .main .workspace-header-actions button { font-size: 0; width: 31px; padding: 7px; }
  .main .project-title { font-size: 23px; }
  .main .arrangement-heading { flex-wrap: wrap; gap: 3px; }
  .main .arrangement-heading .arrange-tools { margin-left: auto; }
  .main .transport .position { display: none; }
  .editor-panel .editor-heading { gap: 6px; }
  .editor-panel .part-title { flex: 1; }
  .editor-panel .sound-preset { margin-left: 0; }
  .editor-panel #focus-writing { font-size: 0; width: 29px; gap: 0; }
  .editor-panel #focus-writing .icon { width: 16px; height: 16px; }
  .editor-panel .bar-nav { margin-left: auto; }
  .editor-panel .editor-tools > .quiet { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { #app *, #dialog * { scroll-behavior: auto; transition: none; } }

.topbar .focus-project { min-width: 0; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
#app.is-focused .topbar .breadcrumb { display: none; }
@media(max-width:600px) { .topbar .focus-project { display: none; } }

.editor-canvas .tab-svg:focus-visible { outline: 1px solid color-mix(in srgb, var(--track) 55%, transparent); outline-offset: 3px; border-radius: 6px; }

.editor-panel.is-drums .editor-tools { min-height: 38px; padding-block: 6px; }

/* Library actions share the editor's toolbar, not the sketchbook dialog's tiles. */
.library-view > .topbar { height: 64px; background: var(--chrome); }
.library-view .brand-mark { background: var(--surface); color: var(--accent); border: 1px solid var(--border); border-radius: 9px; }
.library-view .library-main { padding-top: 25px; }
.library-view .library-heading h1 { font-size: 28px; letter-spacing: -.7px; }
.library-view .library-actions { gap: 7px; padding-top: 13px; }
.library-view .library-actions button { flex-direction: row; align-items: center; min-height: 36px; padding: 8px 11px; border-radius: 7px; white-space: nowrap; }
.library-view .library-actions .icon { width: 15px; height: 15px; }
.library-view .library-import-settings { margin-bottom: 17px; }
.library-view .library-save-current { padding: 11px 15px; border-radius: 8px; background: var(--panel); }
.library-view .library-status:empty { display: none; }
.library-view .library-browser { margin-top: 22px; }
.library-view .library-browser-heading { margin-bottom: 15px; }
.library-view .library-project { border-radius: 10px; }
.library-view .library-project-preview { background: var(--canvas); }
.library-view .library-project-preview pre { font-size: 9px; line-height: 1.7; }
.library-view .library-project-title { font-weight: 600; }
@media(max-width:640px) { .library-view .library-actions { flex-wrap: wrap; } .library-view .library-heading h1 { font-size: 25px; } }

.topbar button.focus-project{display:block;text-align:left;padding:6px 8px;font-weight:500;border-radius:7px}.topbar button.focus-project:hover{color:var(--ink);background:var(--surface)}