/* The focused studio sits on top of the existing instrument styles. */
:root{--transport-height:76px}html{scroll-padding-top:calc(var(--transport-height) + 72px)}[hidden]{display:none!important}button,summary{min-height:44px}summary{cursor:pointer;padding:12px 0;color:var(--muted)}summary:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button,input,select,summary,[tabindex]{scroll-margin-top:calc(var(--transport-height) + 72px)}
.topbar{max-width:1600px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{font-size:26px}.brand span{font-size:14px}.studio-motto{color:var(--muted);font-size:14px}
#performanceBar{padding:10px 24px;min-height:0;display:block}.transport{max-width:1552px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;order:initial;justify-content:flex-start}.transport button{padding:10px 12px}.transport label{display:flex;margin:0;font-size:14px}.transport-position{min-width:85px;font-size:14px}.transport #record{margin-left:0}.transport .master-control{margin-left:auto;gap:8px}.master-control input{width:90px;margin:0}.mix-link{font-size:14px;color:var(--lime);padding:12px 4px}.transport #power{font-size:14px}#tempo{width:62px}
main{padding:16px 24px 24px;max-width:1600px}.session-bar{padding:10px 14px;margin-bottom:16px}.session-actions{margin:0;gap:8px}.session-actions label{flex-basis:auto;display:flex}.session-actions input{width:210px}.session-actions select{width:220px}.session-actions label input,.session-actions label select{flex:initial}.session-actions button{padding:9px 12px}.session-bar>details{margin-top:0}.session-bar>details>summary{font-size:14px;padding:8px 0;min-height:34px}.session-bar>details[open]>summary{margin-bottom:6px}#sessionStatus{font-size:14px;flex-basis:auto;margin:0 0 0 auto;max-width:50%}
.studio-workspace{display:grid;grid-template-columns:minmax(390px,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}.groove-pane,.instrument-workspace{min-width:0}#groovePanel>summary,.mobile-only{display:none}.panel{padding:18px;border-radius:12px;margin:0}.panel h2{font-size:25px;margin:12px 0 16px;letter-spacing:-.7px}.instrument-panel .section-head{gap:10px}.instrument-panel .pill{font-size:14px}.instrument-panel[role=tabpanel]{outline:none}
.instrument-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 0 10px;position:sticky;top:var(--transport-height);z-index:5;background:var(--bg)}.instrument-tabs button{padding:10px 6px;border-radius:9px;font-size:15px;border-bottom:3px solid transparent}.instrument-tabs span{display:block;font-size:14px;font-weight:400;line-height:1.3;color:var(--muted);margin-top:4px;min-height:15px}.instrument-tabs [aria-selected=true]{background:#30273a;border-color:var(--violet);color:var(--violet)}#tabVoice[aria-selected=true]{border-color:#efb885;background:#30271f;color:#efb885}#tabSamples[aria-selected=true]{border-color:var(--lime);background:#252d1b;color:var(--lime)}
.keys{margin-top:8px}.key{height:84px;font-size:18px}.instrument .xy{height:200px;margin-top:16px}.instrument .knobs{margin:16px 0 0}.voice .voice-art{height:auto;min-height:32px;align-items:flex-start}.voice-art>div{font-size:14px}.voice .voice-name{margin:10px 0}.voice .voice-setting{margin:12px 0}.voice .two{margin:10px 0}.voice .range-label{margin-top:14px}
.sample-head{border:0;padding:0;margin:0;flex-wrap:wrap;justify-content:flex-start}.sample-head button{min-height:44px;padding:9px 11px}.pads{margin-top:10px}.pad{height:80px}.pad-locks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:6px}.pad-locks button{font-size:14px;padding:8px 2px}.pad-locks [aria-pressed=true]{color:var(--lime);border-color:var(--lime);background:#303b20}#lockStatus{font-size:14px;margin:8px 0}#sampleStatus{margin:10px 0;font-size:14px}.source-options{font-size:14px}.source-options>summary{padding:8px 0;min-height:36px}.sample-editor{margin-top:8px;padding-top:14px}.sample-wave{height:150px}.cut-fields{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.cut-fields label{font-size:14px}.cut-fields input{font-size:14px}.cut-pitch{margin:14px 0;padding:12px 0}.cut-pitch-heading{gap:10px}.sample-editor .hint{font-size:14px}.sample-editor .cut-toolbar{gap:8px}
.sequencer{margin:0}.sequencer-heading{gap:8px}.sequencer-heading h2{font-size:25px;margin:8px 0 16px}.sequencer .pill{font-size:14px}.beat-builder{padding:12px;margin-bottom:14px}.beat-builder>label{font-size:15px}.beat-builder>label span{display:none}.beat-entry{flex-wrap:wrap;margin-top:8px;gap:8px}.beat-entry input{width:100%;flex-basis:100%;padding:11px;font-size:14px}.beat-entry button{min-height:44px;flex:1}.beat-examples button{font-size:14px;min-height:38px;padding:8px}.beat-examples>span{display:none}.beat-status{font-size:14px}.sequence-toolbar{gap:8px;margin-bottom:16px}.sequence-toolbar label{font-size:14px;gap:8px}.sequence-toolbar>label{flex-basis:auto}.sequence-toolbar button{font-size:14px;padding:8px}.swing-control{width:120px}.swing-control input{width:100%;margin:0}.swing-control output{margin-left:auto}.sequence-row{grid-template-columns:1fr;gap:7px;padding:0 0 12px;border-bottom:1px solid var(--line)}.track-controls{flex-wrap:nowrap;gap:8px}.track-controls strong{flex:0 0 60px;font-size:14px}.track-mute{min-height:44px;font-size:14px}.track-level{flex:1;max-width:160px;margin-left:auto}.step-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.step{min-height:44px;font-size:14px;padding:8px 0}.sequence-footer{font-size:14px;line-height:1.5;margin-top:12px}
.discovery-panel{margin-top:20px;border-color:#626c42}.discovery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.discovery-heading h2{margin:10px 0}.discovery-panel .tv{width:100%;max-width:680px;height:auto;min-height:220px;aspect-ratio:16/9}.discovery-panel form,.discovery-panel>.two{max-width:680px}.discovery-panel .tv iframe{position:absolute;inset:0}.discovery-panel .tv:has(iframe){min-height:0}.discovery-panel #marks{margin-top:8px}.recordings{margin-top:20px;padding-top:16px}.recordings .hint{font-size:14px}footer{margin-top:16px}.mix-download{padding:6px 0}
@media(max-width:1100px){.studio-workspace{grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);gap:14px}.transport .master-control{margin-left:0}.cut-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.knobs{flex-wrap:wrap}.knobs label{min-width:100px}}
@media(max-width:900px){.topbar{padding:12px 16px}.studio-motto{display:none}#performanceBar{padding:8px 12px}.transport{gap:6px}.transport button{padding:9px 10px;font-size:14px}.transport #power{margin-left:auto}.transport-position{order:0;min-width:90px}.transport .master-control input{width:72px}.transport label{font-size:14px}.mix-link{padding:10px 4px}main{padding:12px 12px 20px}.session-bar{padding:10px 12px}.session-actions input{width:180px}.studio-workspace{display:flex;flex-direction:column;gap:12px}.groove-pane,.instrument-workspace{width:100%}#groovePanel>summary{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:12px 14px;background:#22271d;border:1px solid #565d3e;border-radius:9px;color:var(--lime);font-size:14px}#groovePanel>summary span{font-size:14px;color:var(--muted)}#groovePanel[open]>summary{margin-bottom:8px}.mobile-only{display:block;width:100%;margin-top:8px}.instrument-tabs button{font-size:14px}.panel{padding:16px}.instrument{grid-column:auto}.instrument .xy{height:200px}.cut-fields{grid-template-columns:repeat(4,minmax(0,1fr))}.discovery-heading{align-items:flex-start}.discovery-heading button{font-size:14px}.session-bar>details>summary{min-height:44px}.discovery-panel .tv{min-height:0}}
@media(max-width:500px){.topbar{padding:10px 12px}.brand{font-size:22px}.brand span{display:none}.transport{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.transport button{font-size:14px;padding:8px 5px;min-height:44px}.transport #record{grid-column:3;grid-row:1}.transport #power{grid-column:3;grid-row:2;margin:0;font-size:14px}.transport #groove{grid-column:1;grid-row:1}.transport #stop{grid-column:2;grid-row:1}.transport label{gap:3px;font-size:14px}.transport-position{min-width:0;font-size:14px;grid-column:2;grid-row:2}.transport>label:not(.master-control){grid-column:1;grid-row:2;flex-wrap:wrap;gap:2px}.transport .master-control{grid-column:1/3;grid-row:3;gap:8px}.master-control input{max-width:110px!important;flex:1}.mix-link{grid-column:3;grid-row:3;text-align:center;min-height:32px;padding:8px 4px;font-size:14px}#tempo{width:48px;padding:5px;font-size:14px}.session-actions{gap:6px}.session-actions label{flex:1;min-width:0;gap:6px;font-size:14px}.session-actions label input{width:100%;min-width:0;padding:10px 7px;font-size:14px}.session-actions label select{width:100%;min-width:0}.session-actions #sessionSave{padding:10px}#sessionStatus{flex-basis:100%;max-width:100%;margin:2px 0 0;font-size:14px}.panel{padding:14px}.instrument-tabs{gap:5px}.instrument-tabs span{font-size:14px}.instrument-panel .section-head .pill{font-size:14px}.panel h2{font-size:23px;margin:10px 0 12px}.key{height:78px;padding:10px 2px;font-size:15px}.keys{gap:4px}.cut-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-head{gap:6px}.sample-head button{font-size:14px;padding:9px 8px}.sample-head #discoveryOpen{flex-basis:100%}.pad{height:74px;font-size:14px}.pad-locks button{font-size:14px}.pad span{font-size:18px}.voice .two button{font-size:14px}.knobs #weird{width:100%}.discovery-heading{flex-wrap:wrap}.discovery-panel form{flex-wrap:wrap}.discovery-panel form button{width:100%}.sequence-toolbar>label{flex-basis:100%}.swing-control input{max-width:180px}.sequence-toolbar .swing-control{flex-wrap:nowrap;width:100%}.step-grid{gap:4px}.step{min-height:44px}.track-controls strong{flex-basis:50px}.track-level{max-width:120px}.mix-download{flex-wrap:wrap}.mix-download a{flex:1}.recordings{gap:8px}}
@media(max-height:500px) and (orientation:landscape){.topbar{display:none}#performanceBar{padding:6px 12px}.transport button,.mix-link{min-height:40px}.instrument-tabs{position:static}.panel{scroll-margin-top:calc(var(--transport-height) + 16px)}}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.transport #record{font-variant-numeric:tabular-nums;white-space:normal;min-width:0}.voice-position{font-size:14px;color:var(--muted);margin:6px 0 12px;font-variant-numeric:tabular-nums}
#voiceState{font-size:14px;overflow-wrap:anywhere}#voiceProgress{transition:none;animation:none}
@media(prefers-reduced-motion:reduce){.step,.pad,.key,#record{animation:none;transition:none}}
.layer-mixer-panel{margin:0 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:0 14px}.layer-mixer-panel>summary{font-size:14px;color:#eee8f5}.layer-mixer-panel>summary span{margin-left:12px;color:var(--muted);font-size:14px;overflow-wrap:anywhere}.layer-mixer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:4px}.mixer-channel{min-width:0;padding:12px;border:1px solid var(--line);border-radius:9px}.mixer-channel strong{font-size:15px;display:block}.mixer-state{display:block;color:var(--muted);font-size:14px;margin:6px 0 12px}.mixer-channel label{display:flex;justify-content:space-between;font-size:14px}.mixer-channel input{margin:4px 0;min-height:44px}.mixer-buttons{display:flex;gap:6px}.mixer-buttons button{flex:1;min-width:0;font-size:14px;padding:9px 5px}.mixer-buttons [aria-pressed=true]{background:#394328;border-color:var(--lime);color:var(--lime)}#mix-electric strong{color:var(--violet)}#mix-voice strong{color:#efb885}#mix-samples strong{color:var(--lime)}.mixer-help{display:flex;align-items:center;justify-content:space-between;gap:16px}.mixer-help p{font-size:14px;color:var(--muted);line-height:1.5}.mixer-help button{flex-shrink:0;font-size:14px}
@media(max-width:900px){.layer-mixer{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.layer-mixer-panel{padding:0 12px}.mixer-help{flex-wrap:wrap;gap:0;padding-bottom:12px}.layer-mixer-panel>summary span{display:block;margin:6px 0 0}}
@media(max-width:370px){.layer-mixer{grid-template-columns:1fr}.mixer-channel{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.mixer-state{margin:0;text-align:right}.mixer-channel label,.mixer-channel input,.mixer-buttons{grid-column:1/-1}}

/* The recorder lives next to the instrument it captures. */
.live-loop { margin: 16px 0; padding: 14px; border: 1px solid var(--line, #363936); border-radius: 12px; background: #ffffff04; }
.loop-heading, .loop-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loop-heading { justify-content: space-between; margin-bottom: 10px; }
.loop-heading label { display: flex; align-items: center; gap: 8px; font-size:14px; }
.loop-heading select { min-height: 36px; }
.loop-actions button { min-height: 40px; font-size:14px; }
.loop-actions button[aria-pressed="true"] { border-color: #eaa569; color: #ffc594; }
.loop-state { margin: 12px 0 6px; font-size:14px; min-height: 1.5em; line-height: 1.5; }
.live-loop progress { display: block; width: 100%; height: 5px; accent-color: #eaa569; }
.live-loop .hint { margin-bottom: 0; line-height: 1.5; }
@media (max-width: 480px) { .loop-actions button { flex: 1 1 44%; } }

.speech-editor { border-top: 1px solid #48413e; margin-top: 18px; padding-top: 14px; }
.speech-editor > summary { cursor: pointer; font-weight: 600; padding: 6px 0 12px; }
.speech-editor > summary span { display: inline-block; font-size:14px; font-weight: 400; color: var(--muted, #bcb6c6); margin-left: 8px; }
.speech-enable { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.speech-enable input { width: 20px; height: 20px; accent-color: #efb07c; flex: 0 0 auto; }
.speech-actions, .speech-fields { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.speech-actions button { min-height: 42px; font-size:14px; }
.speech-fields label { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 140px; font-size:14px; }
.speech-fields input, .speech-fields select { width: 100%; max-width: none; min-width: 0; min-height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: var(--bg); }
.speech-wave { position: relative; height: 154px; margin-top: 12px; border: 1px solid #806247; border-radius: 10px; overflow: hidden; background: #161419; touch-action: none; outline-offset: 3px; }
.speech-wave svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.speech-cursor-control { position: absolute; inset: 0; outline-offset: -3px; }
#speechWavePath { stroke: #c38f69; stroke-width: 2; fill: none; }
#speechMarkers { stroke: #f8d2a7; stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
#speechCursor { stroke: #e6ff8a; stroke-width: 2; }
#speechHandle { position: absolute; top: 0; min-width: 44px; min-height: 44px; padding: 8px; background: #f8d2a7; color: #21180e; touch-action: none; }
.speech-times { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; font-size:14px; color: #bcb6c6; }
.speech-summary { font-size:14px; line-height: 1.5; color: #f8d2a7; }
.speech-editor .range-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.speech-editor .range-label input { flex: 1 1 120px; min-width: 0; }
.speech-timing-details { font-size:14px; line-height: 1.6; overflow-wrap: anywhere; margin-top: 12px; }
@media (max-width: 480px) { .speech-actions button { flex: 1 1 44%; } }

/* Controls keep readable labels and explicit values in every workspace. */
button:disabled,input:disabled,select:disabled{opacity:1;color:#aaa6b5;background:#1e1d25;border-color:#5d5669;border-style:dashed;cursor:not-allowed}
button:disabled:hover{background:#1e1d25;border-color:#5d5669}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.key small{opacity:1;color:#584c64}.key:focus-visible{outline-color:#fff}
.knobs output,.range-label output,.master-control output{font-variant-numeric:tabular-nums;color:#f5f1f8;white-space:nowrap}
.expression-values{font-size:14px;color:#dfc9ef;font-variant-numeric:tabular-nums;margin:6px 0}
#expressionHelp{margin-bottom:6px}.xyhint{letter-spacing:.5px;font-size:14px}.axis{letter-spacing:1px;font-size:14px}
#speechHandle{transition:none}.first-sketch{margin-bottom:16px;border-color:#7d6b99;background:#211c2b;line-height:1.6}
.guide-heading{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.guide-heading button{flex-shrink:0}.guide-actions{display:flex;flex-wrap:wrap;gap:8px}.first-sketch p{max-width:80ch}.first-sketch .hint{margin-bottom:0}.topbar{flex-wrap:wrap}.first-sketch [tabindex]{outline-offset:3px}
@media(max-width:500px){.guide-heading{flex-wrap:wrap}.guide-actions button{flex:1}.transport #power{font-size:14px}.transport button{font-size:14px}.topbar{gap:8px}.topbar #guideOpen{padding:8px;font-size:14px}.brand{font-size:21px}}
@media(prefers-reduced-motion:reduce){button,.first-sketch{transition:none;scroll-behavior:auto}}
.welcome-entry{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:12px 0}.welcome-player{max-width:760px;margin:16px 0}.welcome-player video{display:block;width:100%;aspect-ratio:16/9;background:#131716;border:1px solid #7d6b99;border-radius:12px;margin-bottom:10px}.welcome-player video:focus-visible{outline:3px solid #dcff86;outline-offset:3px}.welcome-transcript{margin:12px 0}.welcome-transcript p{color:#e0e7df}.welcome-transcript summary{cursor:pointer}#welcomeStatus:empty{display:none}.welcome-player video::cue{color:#fff;background:rgba(0,0,0,.9);font-family:Arial,sans-serif}
.welcome-caption{min-height:3.2em;padding:10px 14px;background:#131716;border-left:3px solid #dcff86;border-radius:4px;color:#eff6ed;font-size:16px;line-height:1.6}.welcome-caption:empty{display:none}
.starter-library{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px;line-height:1.6}.starter-library>p{max-width:80ch}.starter-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.starter-card{border:1px solid #626c42;border-radius:10px;padding:14px;min-width:0;display:flex;flex-direction:column}.starter-card h3{margin:0 0 8px;font-size:18px}.starter-card p{font-size:14px;overflow-wrap:anywhere}.starter-card>p{flex:1}.starter-card details{font-size:14px}.starter-card a{display:block;color:var(--lime);margin:10px 0;overflow-wrap:anywhere}.starter-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}#starterStatus{font-size:14px;color:var(--lime)}
@media(max-width:1000px){.starter-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.starter-cards{grid-template-columns:1fr}.starter-actions button{width:100%}}
@media(max-width:500px){#sessionTools .session-actions label{flex:1 1 100%;width:100%}#sessionTools .session-actions label select{flex:1;width:auto;max-width:none}}
input[type=range]{appearance:none;-webkit-appearance:none;height:28px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:#8c7f9a;border-radius:6px}
input[type=range]::-moz-range-track{height:6px;background:#8c7f9a;border-radius:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-7px;background:var(--violet);border:2px solid #211a2a;border-radius:50%}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--violet);border:2px solid #211a2a;border-radius:50%}
input[type=range]:disabled::-webkit-slider-thumb{background:#aaa6b5}
input[type=range]:disabled::-moz-range-thumb{background:#aaa6b5}
@media(min-width:901px){.topbar{padding-top:12px;padding-bottom:12px}.session-bar,.layer-mixer-panel{margin-bottom:12px}}