/* Keep the working controls and audio transport within the same viewport. */
:root{--app-header-height:64px}
.app-header{height:var(--app-header-height);padding:0 24px;gap:40px}
.brand{font-size:24px}.brand-mark{width:35px;height:35px;border-radius:10px}.brand-mark svg{width:24px;height:24px}.brand small{font-size:7px;margin-top:6px}
body[data-screen=studio]{overflow:hidden}
#studio-screen.compact-studio{display:block;height:calc(100dvh - var(--app-header-height));min-height:0}
.compact-studio .studio-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:100%;max-width:1020px;margin:auto;padding:12px 20px;overflow:hidden}
.studio-toolbar{display:flex;align-items:center;gap:10px;min-width:0}
.studio-source{display:flex;align-items:center;gap:10px;font-size:12px;white-space:nowrap}
.studio-source select{height:34px;padding:5px 10px;border:1px solid #536446;border-radius:6px;background:#151d12;font-size:12px}
.studio-toolbar .button{min-height:34px;font-size:11px}
.studio-preset-picker{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
.studio-preset-picker .button{flex-shrink:0}
.studio-preset-name{min-width:0;margin:0;font-size:14px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--accent)}
.studio-input-actions{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.studio-input-actions .record-button{width:auto;margin:0;padding:7px 10px}
.studio-input-actions .record-status{margin:0;font-size:10px;max-width:180px}
.studio-input-actions .meter{width:40px;margin:0}
#studio-screen .workspace-top{display:block;min-height:0;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#46513d transparent}
#studio-screen .designer{display:block;min-width:0;padding-top:12px}
.compact-studio .sound-parameter-grid{gap:12px 22px}
.compact-studio .sound-group-heading{margin-bottom:8px}
.compact-studio .sound-designer-controls{margin-bottom:12px}
.fm-signal{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 20px 12px;padding:8px 10px;border:1px solid #3c4931;border-radius:6px;background:#20291b;color:#b5c99e;font-size:11px}
.fm-signal>span:first-child,.fm-signal>span:nth-last-child(2){color:#82966e}.fm-signal-arrow{color:var(--accent)}
.granular-material{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;margin:0 20px 14px;padding:8px 12px;background:#192015;border:1px solid #3c4931;border-radius:6px;font-size:12px}
.granular-material-heading{display:flex;align-items:baseline;gap:12px;min-width:0}.granular-material-heading strong{flex-shrink:0}.granular-material-heading span{color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.granular-material-actions{display:flex;flex-wrap:wrap;gap:8px}.granular-material-actions .button{min-height:32px;font-size:11px}
.granular-material>p{grid-column:1/-1;font-size:11px;color:#9baa8e;line-height:1.7;margin:0}
@media(max-width:600px){.granular-material{grid-template-columns:minmax(0,1fr)}.granular-material-actions .button{flex:1}}
#granular-material-dialog{width:520px;max-width:calc(100vw - 24px);max-height:80dvh;padding:20px}.granular-material-list{display:grid;gap:8px;max-height:55dvh;overflow:auto}.granular-material-item{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;border:1px solid var(--line);border-radius:6px;background:#1e2818;padding:12px;font-size:12px}.granular-material-item strong{overflow-wrap:anywhere;min-width:0}.granular-material-item span{white-space:nowrap;color:#9baa8e}
.studio-editor{min-width:0;max-height:57dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:#46513d transparent}
.studio-editor .editor-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;border:0}
.studio-editor .clip-meta{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px;padding:0;min-width:0;font:10px Consolas,monospace;color:#8e9b80}
.studio-editor .clip-name-label input{width:145px;font-family:inherit;font-size:12px}
.studio-editor .source-badge{margin:0}
.studio-editor #editor-expand{font-size:11px;min-height:30px}
.studio-editor .waveform-wrap{height:64px;margin:0 20px}
.studio-editor.editor-expanded .waveform-wrap{height:118px}
.studio-editor:not(.editor-expanded) .waveform-hint{display:none}
.studio-editor .timeline{padding-top:4px;padding-bottom:5px}
.studio-editor .edit-actions{padding:8px 14px;gap:8px}
.studio-editor .trim-controls{gap:7px}
.studio-editor .trim-controls .field-label{width:auto;margin:0}
.studio-editor .effects{flex-wrap:wrap}
.fade-control{display:inline-flex;align-items:stretch;flex-shrink:0}
.fade-control select{padding:5px 7px;border:1px solid var(--line);border-right:0;border-radius:7px 0 0 7px;background:#1a2018;font-size:11px;cursor:pointer}
.fade-control select:disabled{opacity:.35;cursor:not-allowed}
.fade-control .button{border-radius:0 7px 7px 0}
.studio-editor #editor-tip{padding:5px 14px;color:#859578;font-size:10px;line-height:1.5}
.studio-editor .library-save-status{padding:8px 14px;gap:6px;font-size:10px;min-width:0;max-width:100%}
.studio-editor .library-save-status>span{min-width:0;overflow-wrap:anywhere}
.studio-editor .library-save-status .text-button{padding:0 4px}
.library-save-dialog{width:430px;max-width:calc(100vw - 24px);max-height:85dvh;padding:22px;overflow-wrap:anywhere}
.library-save-dialog .dialog-heading{align-items:center;gap:10px;margin-bottom:17px}
.library-save-dialog .dialog-heading h2{margin:0;font-size:18px;line-height:1.4}
.library-save-dialog .dialog-heading .icon-button{margin:0;flex-shrink:0}
.library-save-dialog .form-field{margin-top:0;gap:8px;font-size:12px}
.library-save-dialog .form-field input{padding:10px 11px;font-size:14px;min-height:41px}
.library-save-dialog .library-save-hint{margin-top:8px;font-size:11px;line-height:1.6}
.library-name-preview{display:grid;gap:7px;margin-top:17px;padding:11px 12px;border:1px solid #414f35;border-radius:6px;background:#182013;min-width:0}
.library-name-preview>span{color:#94a783;font-size:11px}
.library-name-preview output{color:#d4e7bb;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.library-save-dialog .library-save-error{margin-top:12px;color:#efb494;font-size:12px;line-height:1.6}
.library-save-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px}
.library-save-actions .button{min-height:37px;padding:8px 15px;font-size:12px}
.library-save-actions .primary{width:auto;margin:0}
.sound-picker-dialog{width:800px;max-height:85dvh;padding:20px}
.sound-picker-dialog .dialog-heading{align-items:center;margin-bottom:14px}
.sound-picker-dialog .dialog-heading h2{font-size:18px;margin:0}
.help-sources{display:grid;gap:12px;margin:14px 0;padding:12px 14px;border:1px solid var(--line);border-radius:7px;background:#192015}
.help-sources dt{font-size:12px;font-weight:600;color:var(--accent);line-height:1.5}
.help-sources dd{margin:3px 0 0;font-size:11px;line-height:1.8;color:var(--muted)}
.sound-picker-dialog .dialog-heading .icon-button{margin:0}
.sound-picker-dialog .sound-browser{min-height:0}
.picker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.picker-toolbar .search-box{width:min(330px,75%);padding:5px 9px;background:#151c11;border:1px solid #3e4d32;border-radius:5px}
.picker-toolbar .search-box input{font-size:12px}
.sound-picker-dialog .category-list{flex-direction:row;flex-wrap:wrap;gap:5px;margin-bottom:14px;overflow:visible}
.sound-picker-dialog .category-button{width:auto;font-size:11px;padding:6px 9px;gap:6px;border-color:#35422c;white-space:nowrap}
.sound-picker-dialog .category-count{display:none}
.sound-picker-dialog .sound-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:47dvh;padding:0 2px 3px;gap:8px}
.sound-picker-dialog .sound-card,.sound-picker-dialog .card-select{min-height:96px}
.sound-picker-dialog .card-select{padding:10px}
.sound-picker-dialog .card-icon{margin-bottom:6px}
.sound-picker-dialog .card-name{font-size:12px}
.sound-picker-dialog .card-detail{font-size:9px;letter-spacing:0}
.sound-picker-dialog .browser-foot{padding:10px 0 0;margin-top:10px;min-height:0;font-size:10px}
.sound-picker-dialog .fm-patch-area{padding:0}
.sound-picker-dialog .fm-patches{grid-template-columns:repeat(3,minmax(0,1fr))}
.sound-picker-dialog .fm-patch strong{font-size:12px}
.sound-picker-dialog .fm-patch span{font-size:11px}
.sound-picker-dialog .fm-patch-area>p{font-size:11px}
@container(min-width:340px){
  .compact-studio .sound-parameter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compact-studio .sound-parameter-heading{flex-wrap:wrap;gap:3px 6px}
  .compact-studio .sound-parameter output{margin-left:auto}
}
@media(max-width:1050px){.studio-input-actions .record-status{display:none}.studio-editor #audio-format,.studio-editor #audio-peak{display:none}}
@media(max-width:700px){
  .compact-studio .studio-main{padding:10px 12px;gap:10px}
  .studio-toolbar{flex-wrap:wrap;gap:8px}.studio-input-actions{margin-left:0}.studio-input-actions .record-status{display:none}
  .studio-editor .editor-heading{flex-wrap:wrap;padding:7px 10px;gap:4px}
  .studio-editor #editor-expand{margin-left:auto}.studio-editor .clip-name-label input{width:130px}
  .studio-editor .source-badge{display:none}.studio-editor .waveform-wrap{height:52px}
  .studio-editor.editor-expanded .waveform-wrap{height:96px}
  .studio-editor{max-height:61dvh}.studio-editor .effects{padding:0}
  .fm-signal{margin-left:15px;margin-right:15px;gap:5px;font-size:10px}
}
@media(max-width:580px){
  :root{--app-header-height:56px}
  .app-header{height:var(--app-header-height);min-height:0;flex-wrap:nowrap;gap:22px;padding:0 12px}.brand{font-size:21px}.brand small{display:none}.brand-mark{width:30px;height:30px}.brand-mark svg{width:22px;height:22px}.top-nav{order:0;width:auto;height:100%;gap:16px}.nav-tab{font-size:11px}
  .studio-toolbar{gap:7px}.studio-source{gap:7px}.studio-source select{max-width:165px}
  .studio-input-actions{width:100%}.studio-toolbar .button{min-height:30px}
  .studio-editor .trim-controls input{width:50px}.studio-editor .edit-actions{padding:8px 10px}
  .sound-picker-dialog{padding:15px}.sound-picker-dialog .sound-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:43dvh}
  .library-save-dialog{padding:18px}.library-save-dialog .dialog-heading h2{font-size:17px}
  .sound-picker-dialog .fm-patches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sound-picker-dialog .category-button{font-size:10px;padding:5px 7px}.sound-picker-dialog .category-button svg{display:none}
}