body[data-app-surface="studio"] {
    overflow: hidden;
    min-height: 100dvh;
    background: linear-gradient(180deg, #111316 0, #0D0F11 180px, #0B0C0E 100%);
}

body[data-app-surface="studio"] .navbar,
body[data-app-surface="studio"] .site-footer,
body[data-app-surface="studio"] .bottom-nav {
    display: none;
}

.studio-app {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100dvh;
    min-height: 100vh;
    background: transparent;
    color: #F5F3ED;
}

.studio-topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: var(--space-6);
    align-items: center;
    min-height: 70px;
    padding: 10px var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(14, 16, 18, 0.92);
    backdrop-filter: blur(14px);
}

.studio-title-group { min-width: 0; }

.studio-mode-label,
.score-toolbar-title > span,
.readiness-label,
.visualizer-summary > div > span,
.drawer-section > h3,
.note-display .label {
    margin: 0;
    color: rgba(245, 243, 237, 0.46);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.studio-title-group h1 {
    overflow: hidden;
    margin: 3px 0 0;
    color: #F5F3ED;
    font-size: clamp(1rem, 1.3vw, 1.22rem);
    font-weight: 700;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-piece-context {
    overflow: hidden;
    margin: 3px 0 0;
    color: rgba(245, 243, 237, 0.56);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-meta-strip,
.studio-top-actions,
.header-input-status,
.score-toolbar,
.score-toolbar-controls,
.readiness-actions,
.visualizer-summary,
.visualizer-summary-actions,
.transport-playback-group,
.transport-recording-group,
.pm-tempo-group,
.pedal-controls,
.drawer-header,
.coach-header,
.saved-take-topline,
.file-loaded,
.connection-item,
.volume-control,
.audio-setting,
.note-display {
    display: flex;
    align-items: center;
}

.studio-meta-strip { gap: 7px; }

.studio-meta-value,
.studio-save-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(245, 243, 237, 0.62);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.studio-meta-value + .studio-meta-value::before {
    width: 3px;
    height: 3px;
    margin-right: 7px;
    border-radius: 50%;
    background: rgba(245, 243, 237, 0.28);
    content: "";
}

.studio-save-state { color: #70A884; }
.studio-save-state svg { width: 14px; height: 14px; }

.studio-top-actions { justify-content: flex-end; gap: 8px; }

.header-input-status {
    min-height: 34px;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #17191D;
    color: rgba(245, 243, 237, 0.7);
    font: inherit;
    font-size: 0.77rem;
    cursor: pointer;
}

.connection-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #D96A60;
}

.connection-dot.connected,
.connection-item.active .connection-dot { background: #70A884; }

.studio-workspace {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-10)) var(--space-8);
}

.studio-score-stage {
    display: grid;
    grid-template-rows: minmax(420px, 1fr) auto auto;
    gap: var(--space-5);
    width: min(100%, 1600px);
    min-height: 0;
    margin: 0 auto;
}

.score-workspace {
    display: grid;
    grid-template-rows: auto minmax(330px, 1fr) auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.score-toolbar {
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 4px var(--space-3);
}

.score-toolbar-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.score-toolbar-title strong {
    color: rgba(245, 243, 237, 0.72);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.score-toolbar-controls { gap: 5px; }

.toolbar-icon-btn,
.toolbar-text-btn {
    display: inline-grid;
    min-width: 32px;
    height: 32px;
    place-items: center;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    background: #1D2024;
    color: rgba(245, 243, 237, 0.74);
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.toolbar-icon-btn svg { width: 15px; height: 15px; }
.toolbar-icon-btn:hover,
.toolbar-text-btn:hover { border-color: rgba(209, 180, 107, 0.48); color: #F5F3ED; transform: translateY(-1px); }

.score-toolbar-controls output {
    min-width: 42px;
    color: rgba(245, 243, 237, 0.58);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.sheet-display {
    position: relative;
    min-height: 280px;
    max-height: max(280px, calc(100vh - 470px));
    overflow: auto;
    padding: clamp(22px, 3vw, 52px);
    border: 0;
    border-radius: var(--radius-sheet);
    background: var(--paper-50);
    color: #17181A;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.22);
}

#sheet-music-svg {
    min-width: 100%;
    transition: transform 200ms cubic-bezier(.2, .8, .2, 1), width 200ms cubic-bezier(.2, .8, .2, 1);
}

.sheet-placeholder,
.pm-sheet-loading {
    display: grid;
    min-height: 360px;
    place-items: center;
    color: #66645E;
    text-align: center;
}

.studio-state-card {
    position: absolute;
    z-index: 3;
    inset: 24px;
    display: grid;
    max-width: 500px;
    place-items: center;
    align-content: center;
    justify-self: center;
    gap: 14px;
    padding: 28px;
    border: 0;
    background: transparent;
    color: #17181A;
    text-align: center;
    box-shadow: none;
}

.studio-state-card[hidden],
.session-readiness-bar[hidden] { display: none; }

.studio-state-card > svg { width: 28px; height: 28px; color: #D1B46B; }
.studio-state-card p { max-width: 430px; margin: 0; color: #66645E; }
.studio-state-card--fallback > svg { color: #D96A60; }

.session-readiness-bar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto auto;
    gap: 18px;
    align-items: center;
    min-height: 64px;
    margin-top: var(--space-4);
    padding: var(--space-3) 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #F5F3ED;
}

.session-readiness-bar strong { display: block; margin-top: 2px; font-size: 0.87rem; }
.session-readiness-bar p { margin: 3px 0 0; color: rgba(245, 243, 237, 0.56); font-size: 0.72rem; }

.readiness-details { display: flex; gap: 12px; }
.readiness-details span { display: grid; gap: 2px; color: rgba(245, 243, 237, 0.46); font-size: 0.65rem; text-align: center; }
.readiness-details strong { margin: 0; color: rgba(245, 243, 237, 0.82); font-size: 0.76rem; }
.readiness-actions { justify-content: flex-end; gap: 8px; }

.performance-visualizer {
    overflow: hidden;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    transition: border-color 220ms ease;
}

.performance-visualizer[data-visualizer-state="expanded"] { border-top-color: rgba(209, 180, 107, 0.22); }

.visualizer-summary {
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: var(--space-3) 4px var(--space-2);
}

.visualizer-summary p { margin: 3px 0 0; color: rgba(245, 243, 237, 0.52); font-size: 0.73rem; }
.visualizer-summary-actions { display: flex; gap: 7px; }

.visualizer-empty-state {
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 4px var(--space-3);
    color: rgba(245, 243, 237, 0.38);
    font-size: 0.72rem;
}

.visualizer-empty-state svg { width: 14px; height: 14px; color: #D1B46B; }
.performance-visualizer[data-visualizer-state="collapsed"] .visualizer-empty-state:not([hidden]) { display: flex; }

.visualizer-expanded-content {
    display: grid;
    grid-template-rows: minmax(164px, 1fr) auto;
    gap: 10px;
    max-height: 380px;
    padding: 0 4px var(--space-4);
    opacity: 1;
    transition: max-height 240ms cubic-bezier(.16, 1, .3, 1), opacity 180ms ease, padding 240ms ease;
}

.performance-visualizer[data-visualizer-state="collapsed"] .visualizer-expanded-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}

.visualizer-grid-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); min-height: 164px; }
.visualizer-pitch-axis { display: grid; grid-template-rows: repeat(4, 1fr); padding: 9px 7px 9px 0; color: rgba(245, 243, 237, 0.42); font-size: 0.66rem; text-align: right; }

.visualizer-grid {
    position: relative;
    overflow: hidden;
    min-height: 164px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 6.25% 100%,
        linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 25%,
        #0B0C0E;
}

.visualizer-measure-lines,
.visualizer-expected-notes,
.visualizer-played-notes,
.visualizer-playhead { position: absolute; inset: 0; }
.visualizer-note { position: absolute; height: 7px; min-width: 4px; border-radius: 3px; transform: translateY(-50%); }
.visualizer-note--expected { border: 1px solid rgba(209, 180, 107, 0.72); background: rgba(209, 180, 107, 0.18); }
.visualizer-note--played { z-index: 2; border: 1px solid #70A884; background: rgba(112, 168, 132, 0.72); box-shadow: 0 0 0 1px rgba(11, 12, 14, 0.55); }
.visualizer-playhead { z-index: 3; width: 1px; right: auto; background: #E1C77F; box-shadow: 0 0 8px rgba(225, 199, 127, .65); transition: left 100ms linear; }

.pedal-controls { flex-wrap: wrap; gap: 7px; }
.pedal-btn {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 7px;
    background: #1D2024;
    color: rgba(245, 243, 237, 0.7);
    font: inherit;
    font-size: 0.72rem;
    cursor: pointer;
}
.pedal-btn.active { border-color: rgba(209,180,107,.55); background: rgba(209,180,107,.17); color: #E1C77F; }
.pedal-btn kbd { margin-left: 4px; color: rgba(245,243,237,.4); font-size: .65rem; }
.pedal-hint { color: rgba(245, 243, 237, 0.4); font-size: 0.68rem; }

.studio-transport {
    position: sticky;
    z-index: 20;
    bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: rgba(23, 25, 29, 0.98);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(14px);
}

.transport-playback-group,
.transport-recording-group { gap: 7px; }
.control-btn, .play-btn {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #1D2024;
    color: rgba(245, 243, 237, 0.82);
    cursor: pointer;
}
.control-btn svg, .play-btn svg { width: 16px; height: 16px; }
.control-btn:disabled { cursor: not-allowed; opacity: .38; }
.play-btn { width: 40px; height: 40px; border-color: rgba(209, 180, 107, .5); background: #D1B46B; color: #111316; }

.pm-progress-group { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; gap: 9px; align-items: center; min-width: 0; }
.pm-progress-time, .transport-measure, .pm-tempo-unit { color: rgba(245, 243, 237, .48); font-size: .7rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-progress-track { position: relative; height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); cursor: pointer; }
.pm-progress-fill { width: 0; height: 100%; border-radius: inherit; background: #D1B46B; }
.pm-progress-handle { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #F6F3EB; opacity: 0; transform: translate(-50%, -50%); }
.pm-tempo-group { gap: 5px; }
.pm-tempo-input { width: 46px; min-height: 34px; padding: 0 3px; border: 0; background: transparent; color: #F5F3ED; font: inherit; font-size: .8rem; font-variant-numeric: tabular-nums; text-align: center; }
.pm-tempo-btn { width: 30px; height: 30px; }

.transport-record-action {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(214, 103, 82, .64);
    border-radius: 8px;
    background: #D66752;
    color: #FFF7F2;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
}
.record-indicator { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.transport-record-action.recording { background: #8F3E35; animation: record-pulse 1400ms ease-in-out infinite; }
@keyframes record-pulse { 50% { box-shadow: 0 0 0 6px rgba(214,103,82,.13); } }

.studio-drawer {
    position: fixed;
    z-index: 50;
    top: 82px;
    right: 18px;
    bottom: 18px;
    width: min(398px, calc(100vw - 36px));
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 15px;
    background: #17191D;
    box-shadow: -20px 20px 60px rgba(0, 0, 0, .34);
    transform: translateX(calc(100% + 38px));
    transition: transform 250ms cubic-bezier(.16, 1, .3, 1);
}
#setup-drawer { right: 18px; }
#coach-drawer { right: 18px; }
body.setup-open #setup-drawer,
body.coach-open #coach-drawer,
body[data-studio-state~="review"] #coach-drawer,
body[data-studio-state~="coach"] #coach-drawer { transform: translateX(0); }

.drawer-header, .coach-header, .saved-take-topline { justify-content: space-between; gap: 12px; }
.drawer-header h2, .coach-header h2 { margin: 2px 0 0; font-size: 1.05rem; }
.drawer-section, .saved-take-card, .coach-empty-state, .coach-panel, .pm-results-panel {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
}
.drawer-section > h3 { margin: 0; }
.coach-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 14px; padding: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; }
.coach-tab { min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: rgba(245,243,237,.48); font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; }
.coach-tab.active { background: #25282D; color: #F5F3ED; }
.coach-panel { display: none; }
.coach-panel.active { display: grid; }

.upload-zone { display: grid; min-height: 112px; place-items: center; padding: 14px; border: 1px dashed rgba(255,255,255,.22); border-radius: 9px; color: rgba(245,243,237,.54); text-align: center; cursor: pointer; }
.file-loaded, .connection-item, .volume-control, .audio-setting, .note-display { justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.connection-item { cursor: pointer; }
.connection-item.active { border-color: rgba(112,168,132,.42); }
.volume-slider, .setting-slider { accent-color: #D1B46B; }
.setting-input, .pm-select { min-height: 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; background: #1D2024; color: #F5F3ED; }

.take-metrics, .coach-take-summary, .mistake-summary-grid, .pm-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.take-metrics span, .coach-take-summary div, .mistake-summary-grid div, .pm-result-stat { display: grid; gap: 2px; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; color: rgba(245,243,237,.46); font-size: .68rem; }
.take-metrics strong, .coach-take-summary strong, .mistake-summary-grid strong, .pm-result-value { color: #F5F3ED; font-size: .84rem; }
.take-actions, .coach-action-list, .mistake-list { display: grid; gap: 7px; }
.mistake-row, .coach-action-list button { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 7px; background: rgba(255,255,255,.025); color: #F5F3ED; font: inherit; text-align: left; cursor: pointer; }
.take-status-pill, .mistake-type { display: inline-flex; width: fit-content; min-height: 22px; align-items: center; padding: 0 7px; border-radius: 99px; background: rgba(112,168,132,.15); color: #A7F3CF; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.take-status-pill.recording, .take-status-pill.empty, .mistake-type.missed, .mistake-type.extra { background: rgba(217,106,96,.15); color: #FFB4AE; }
.aif-card, .coach-next-card { padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.025); }
.aif-auth-state, .aif-error-state { display: grid; gap: 10px; padding: 18px; border-color: rgba(209,180,107,.24); }
.aif-error-state { border-color: rgba(217,106,96,.34); }
.aif-auth-state h3, .aif-error-state h3 { margin: 0; color: #F5F3ED; font-size: 1rem; }
.aif-auth-state p, .aif-error-state p { margin: 0; color: rgba(245,243,237,.62); font-size: .8rem; line-height: 1.55; }
.aif-state-kicker { color: #E1C77F; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.aif-state-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.coach-next-card { display: grid; gap: 7px; border-color: rgba(209,180,107,.2); }
.coach-next-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.coach-mobile-sheet, .coach-mobile-fab { display: none; }

body.score-focus-open { overflow: hidden; }

.score-workspace:fullscreen,
.score-workspace.score-focus-fullscreen {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: clamp(10px, 1.5vw, 20px);
    border: 0;
    border-radius: 0;
    background: #0B0C0E;
}

.score-workspace.score-focus-fullscreen {
    position: fixed;
    z-index: 2000;
    inset: 0;
}

.score-workspace:fullscreen::backdrop { background: #0B0C0E; }

.score-workspace:fullscreen .sheet-display,
.score-workspace.score-focus-fullscreen .sheet-display {
    min-height: 0;
    max-height: none;
    height: 100%;
    padding: clamp(18px, 3vw, 48px);
    border-radius: 10px;
}

:is(button, a, input, select):focus-visible { outline: 2px solid #E1C77F; outline-offset: 2px; }

@media (max-width: 1040px) {
    .studio-topbar { grid-template-columns: minmax(0, 1fr) auto; }
    .studio-meta-strip { display: none; }
}

@media (max-width: 760px) {
    body[data-app-surface="studio"] { overflow: auto; }
    .studio-app { height: auto; min-height: 100dvh; }
    .studio-topbar { min-height: 62px; padding: 8px 12px; }
    .studio-piece-context, .header-input-status { display: none; }
    .studio-top-actions .btn { min-width: 36px; padding-inline: 8px; }
    .studio-top-actions .btn:not(#setup-drawer-toggle) { font-size: 0; }
    .studio-top-actions .btn:not(#setup-drawer-toggle) svg { width: 16px; height: 16px; margin: 0; }
    .studio-workspace { overflow: visible; padding: var(--space-4) var(--space-3) var(--space-6); }
    .studio-score-stage { grid-template-rows: minmax(350px, 1fr) auto auto; gap: var(--space-4); min-height: auto; }
    .score-workspace { padding: 0; }
    .sheet-display { min-height: 50vh; max-height: 64vh; padding: 20px 12px; }
    .score-toolbar { align-items: flex-start; }
    .toolbar-text-btn { display: none; }
    .session-readiness-bar { grid-template-columns: 1fr auto; gap: 10px; }
    .readiness-details { display: none; }
    .readiness-actions { grid-column: 1 / -1; justify-content: stretch; }
    .readiness-actions .btn { flex: 1; justify-content: center; }
    .visualizer-summary { align-items: flex-start; }
    .visualizer-summary-actions .btn-ghost { display: none; }
    .studio-transport { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
    .transport-playback-group, .transport-recording-group { justify-content: space-between; }
    .pm-progress-group { order: 3; grid-template-columns: auto minmax(70px, 1fr); }
    .transport-measure { display: none; }
    .transport-record-action { min-height: 44px; }
    .studio-drawer { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 86vh; border-radius: 16px 16px 0 0; transform: translateY(102%); }
    body.setup-open #setup-drawer, body.coach-open #coach-drawer, body[data-studio-state~="review"] #coach-drawer, body[data-studio-state~="coach"] #coach-drawer { transform: translateY(0); }
    .studio-state-card { inset: 12px; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Give the score the visual priority of the approved paper-workspace concept. */
.studio-title-group h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.6vw, 1.6rem); }
.sheet-display { border-radius: 8px; }
@media (min-width: 1024px) and (min-height: 760px) {
    .sheet-display { max-height: calc(100dvh - 350px); }
}

/* Workbook studio: the score scrolls; the transport remains in the viewport. */
body[data-app-surface="studio"] { background: #eeeee4; overflow: hidden; }
.studio-app { grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; height: 100dvh; color: #262c29; }
.studio-topbar { background: #f5f3eb; border-bottom-color: #d7d8ca; padding: 12px 24px; gap: 18px; }
.studio-title-group h1 { color: #262c29; font-size: 1.45rem; }
.studio-mode-label, .score-toolbar-title > span, .readiness-label, .visualizer-summary > div > span { color: #656d59; }
.studio-piece-context { display: none; }
.studio-meta-value { color: #62685d; }
.studio-save-state { color: #426246; }
.studio-topbar .btn { background: transparent; border-color: #c9cdbd; color: #454e41; min-height: 40px; }
.studio-topbar .btn-ghost { border-color: transparent; }
.header-input-status { background: #e8eadd; color: #444e3c; border-color: #c9cdbd; min-height: 40px; }
.studio-workspace { padding: 16px 28px 8px; }
.studio-score-stage { height: 100%; grid-template-rows: minmax(260px, 1fr) auto auto; gap: 8px; max-width: 1320px; overflow: visible; }
.score-workspace { grid-template-rows: auto minmax(0, 1fr) auto; }
.score-toolbar { min-height: 44px; padding-bottom: 10px; }
.score-toolbar-title strong, .score-toolbar-controls output { color: #62685d; }
.toolbar-icon-btn, .toolbar-text-btn { background: #f5f3eb; color: #444e3c; border-color: #c9cdbd; min-width: 36px; height: 36px; }
.toolbar-icon-btn:hover, .toolbar-text-btn:hover { color: #262c29; background: #e2e5d6; }
.sheet-display { min-height: 180px; max-height: none; padding: 22px 32px; background: #fffdf7; border: 1px solid #d7d8ca; border-radius: 4px; box-shadow: 0 4px 12px #26312408; }
.sheet-placeholder, .pm-sheet-loading { min-height: 180px; }
.studio-state-card { max-width: 520px; padding: 18px; gap: 12px; }
.studio-state-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; margin: 0; }
.studio-state-card .staged-loading-list div { color: #62685d; font-size: .85rem; }
.studio-state-card .btn-secondary { color: #444e3c; border-color: #c9cdbd; }
.session-readiness-bar { min-height: 44px; margin-top: 4px; padding: 8px 2px 0; grid-template-columns: minmax(0, 1fr) auto; color: #262c29; }
.readiness-label, .readiness-actions, .readiness-extra { display: none; }
.session-readiness-bar strong { font-size: .76rem; }
.session-readiness-bar p, .readiness-details span { color: #62685d; font-size: .65rem; }
.readiness-details strong { color: #444e3c; font-size: .7rem; }
.performance-visualizer { border-top-color: #d7d8ca; }
.visualizer-summary { min-height: 44px; padding: 4px 2px; align-items: center; }
.visualizer-summary p { color: #62685d; }
.visualizer-summary .btn { color: #444e3c; border-color: #c9cdbd; }
.performance-visualizer[data-visualizer-state="collapsed"] .visualizer-empty-state { display: none; }
.visualizer-expanded-content { max-height: 230px; }
.visualizer-pitch-axis { color: #62685d; }
.studio-transport { position: relative; bottom: auto; width: 100%; border-radius: 0; box-shadow: none; padding: 14px 28px max(14px, env(safe-area-inset-bottom)); background: #262c29; color: #f5f3eb; border: 0; gap: 20px; }
.studio-transport .control-btn { background: #333b35; border-color: #525b50; }
.studio-transport .play-btn { background: #eceede; border-color: #eceede; color: #262c29; }
.studio-transport .control-btn, .studio-transport .play-btn { width: 40px; height: 40px; }
.studio-transport .pm-tempo-btn { width: 32px; height: 40px; }
.pm-progress-time, .transport-measure, .pm-tempo-unit { color: #c3c9bb; }
.transport-record-action { background: #b34732; border-color: #cb6d58; min-height: 44px; }
.studio-drawer { color: #f5f3eb; z-index: 60; }
.studio-drawer[hidden] { display: none; }
.upload-zone { width: 100%; background: transparent; font: inherit; gap: 8px; }
.connection-item { width: 100%; color: inherit; font: inherit; font-size: .85rem; text-align: left; }
.studio-drawer :focus-visible { outline-color: #e1c77f; }
.studio-workspace :focus-visible, .studio-topbar :focus-visible { outline-color: #596443; }
.studio-top-actions #next-sightreading-piece-btn[hidden] { display: none; }
.score-workspace:fullscreen, .score-workspace.score-focus-fullscreen { background: #eeeee4; }
.toast { position: fixed; z-index: 100; bottom: 94px; left: 50%; width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; background: #262c29; color: #f5f3eb; border: 1px solid #747f6d; border-radius: 8px; box-shadow: 0 4px 18px #0002; font-size: .85rem; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { border-color: #d48a74; }
@media (max-width: 1040px) { .studio-topbar { grid-template-columns: minmax(0, 1fr) auto; } .studio-transport { gap: 12px; padding-inline: 16px; } .transport-measure { display: none; } .pm-progress-group { grid-template-columns: auto 1fr; } }
@media (max-width: 760px) {
 .studio-topbar { grid-template-columns: minmax(0, 1fr); padding: 10px 14px; gap: 8px; }
 .studio-title-group { display: flex; align-items: baseline; gap: 12px; }
 .studio-title-group h1 { font-size: 1.15rem; margin: 0; }
 .studio-mode-label { font-size: .58rem; white-space: nowrap; }
 .studio-top-actions { justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
 .header-input-status { display: flex; font-size: .72rem; min-height: 44px; }
 .studio-top-actions .btn, .studio-top-actions .btn:not(#setup-drawer-toggle) { font-size: .72rem; min-height: 44px; padding-inline: 8px; gap: 4px; white-space: nowrap; }
 .studio-top-actions .btn svg { width: 14px; height: 14px; flex-shrink: 0; }
 .studio-top-actions > a:last-child { margin-left: auto; }
 .studio-workspace { overflow: auto; padding: 6px 12px 4px; }
 .studio-score-stage { min-height: 300px; grid-template-rows: minmax(220px, 1fr) auto auto; gap: 4px; }
 .sheet-display { padding: 12px 8px; min-height: 130px; max-height: none; }
 .score-toolbar { align-items: center; }
 .score-toolbar-controls { gap: 3px; }
 .session-readiness-bar { grid-template-columns: 1fr; min-height: 34px; padding-top: 4px; }
 .session-readiness-bar p { margin: 2px 0 0; }
 .readiness-actions { display: none; }
 .visualizer-summary p { display: none; }
 .visualizer-summary { min-height: 38px; }
 .visualizer-summary > div > span { font-size: .59rem; }
 .visualizer-summary .btn { min-height: 32px; font-size: .7rem; }
 .studio-transport { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
 .transport-playback-group { gap: 5px; justify-content: flex-start; }
 .transport-recording-group { display: contents; }
 .pm-tempo-group { justify-self: end; gap: 3px; }
 .transport-record-action { grid-column: 1 / -1; justify-content: center; }
 .pm-progress-group { grid-column: 1 / -1; order: 3; padding-block: 5px; }
 .studio-transport .control-btn, .studio-transport .play-btn { width: 34px; height: 36px; }
 .studio-transport .pm-tempo-btn { width: 30px; height: 36px; }
 .pm-tempo-input { width: 40px; }
 .studio-drawer { max-height: calc(100dvh - 112px); }
 .toast { bottom: 165px; }
}
.score-scroll-hint { font-size: .6rem !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; }
.score-scroll-hint[hidden] { display: none; }
@media (max-width: 760px) {
 .score-toolbar-title { gap: 7px; }
 .score-toolbar-title > span:first-child { display: none; }
 .studio-transport .control-btn, .studio-transport .play-btn, .studio-transport .pm-tempo-btn { width: 40px; height: 44px; }
 .transport-playback-group { gap: 2px; }
 .pm-tempo-group { gap: 0; }
 .pm-tempo-input { width: 42px; }
 .pm-tempo-unit { font-size: .62rem; }
}
@media (max-height: 580px) {
 .studio-score-stage { min-height: 240px; }
 .studio-drawer { top: 10px; bottom: 10px; max-height: calc(100dvh - 20px); }
 .studio-workspace { padding-top: 4px; }
}
@media (max-width: 359px) { .studio-transport { padding-inline: 8px; gap: 6px; } .studio-transport .control-btn, .studio-transport .play-btn, .studio-transport .pm-tempo-btn { width: 34px; } }
/* Auto tracks must keep the visualizer's controls when vertical space runs out. */
.performance-visualizer { min-height: 54px; }
.performance-visualizer[data-visualizer-state="expanded"] { min-height: 240px; }
@media(max-width: 760px) { .performance-visualizer { min-height: 38px; } }