/* Music Creator owns its page shell; other Studio tools remain untouched. */
body:has(.mc) #main-content { width:calc(100% - 40px); max-width:1600px; margin-inline:auto; }
body:has(.mc) #content { background:transparent; border:0; padding:0; box-shadow:none; }
.mc { max-width:none; margin:0 auto; padding:20px 0; color:#f5edff; font:14px/1.5 system-ui,sans-serif; --line:#49315f; --muted:#b8a4c9; }
.mc * { box-sizing:border-box; }
.mc header { display:block; padding:24px 30px; margin-bottom:20px; border:1px solid #67418c; border-radius:20px; background:radial-gradient(ellipse at 90% 10%,#8d40ca30,transparent 55%),linear-gradient(110deg,#322041,#191125); }
.mc header>span { font:700 10px system-ui; letter-spacing:.18em; color:#d5a3ff; }
.mc h1 { font-size:clamp(27px,3vw,40px); letter-spacing:-.04em; margin:8px 0; }
.mc header p { margin:0; color:#cbb8db; max-width:850px; }
.mc h2 { font-size:17px; margin:0 0 14px; }
.mc p { color:var(--muted); }
.mc button,.mc .file { color:#e9d9f7; background:#33203f; border:1px solid #67427e; border-radius:9px; padding:10px 14px; min-height:40px; font:600 12px system-ui; cursor:pointer; transition:background .15s,border-color .15s; }
.mc button:hover:not(:disabled),.mc .file:hover { background:#512a68; border-color:#bb7be4; }
.mc button:disabled { opacity:.4; cursor:default; }
.mc button.primary { background:linear-gradient(120deg,#a15ee4,#7842bc); color:white; border-color:#c88cf0; box-shadow:0 4px 18px #964cdc25; }
.mc button[aria-pressed=true] { background:#56306e; border-color:#c18aeb; }
.mc label { display:grid; gap:7px; color:#cdb9de; font-size:11px; font-weight:600; }
.mc input:not([type=checkbox]),.mc select { width:100%; min-width:0; border:1px solid #573765; border-radius:7px; background:#180f22; color:#f1e4fb; font:500 13px system-ui; padding:9px 10px; }
.mc input[type=range] { accent-color:#bd80f2; padding:0; height:26px; cursor:pointer; }
.mc input[type=checkbox] { width:15px; height:15px; flex:none; accent-color:#b87eee; }
.mc :focus-visible { outline:3px solid #d8a3ff; outline-offset:3px; }
.mc #mcDesk { border:1px solid #68417e; border-radius:16px; background:#170e21; overflow:hidden; box-shadow:0 18px 55px #09051055; }
.mc .mc-transport { display:flex; align-items:center; gap:10px; padding:14px 18px; background:linear-gradient(90deg,#32203f,#23132f); border-bottom:1px solid var(--line); }
.mc .mc-transport label { display:flex; align-items:center; gap:6px; font-size:11px; }
.mc #mcPlay,.mc #mcStop { background:#1a1025; min-width:75px; }
.mc #mcDuration { margin-left:auto; font:500 12px ui-monospace,monospace; color:#d0afd9; padding:10px 14px; background:#180f22; border:1px solid #493052; border-radius:8px; white-space:nowrap; }
.mc #mcStatus { margin:0; padding:9px 20px; font-size:12px; background:#21132b; color:#c4a8d8; border-bottom:1px solid var(--line); }
.mc-grid { display:grid; grid-template-columns:290px minmax(0,1fr); }
.mc aside { padding:18px 14px; background:#23142f; border-right:1px solid var(--line); }
.mc aside h2 { padding:0 6px; font-size:14px; }
.mc #mcLibraryCount { float:right; font-size:11px; font-weight:400; color:#bd96d5; }
.mc aside label { margin:10px 6px; }
.mc .mc-fav-filter { display:flex; align-items:center; gap:8px; }
.mc #mcPresets { display:grid; gap:5px; max-height:440px; overflow:auto; padding:4px; scrollbar-color:#704584 #23142f; scrollbar-width:thin; }
.mc #mcPresets button { position:relative; text-align:left; background:#2a1936; border:1px solid transparent; padding:12px 12px 12px 38px; border-radius:8px; }
.mc #mcPresets button::before { content:'♫'; position:absolute; left:12px; top:13px; color:#b77fda; font-size:17px; }
.mc #mcPresets button[aria-pressed=true] { background:linear-gradient(90deg,#583071,#362040); border-color:#9462b1; }
.mc #mcPresets button strong { display:block; font-size:12px; font-weight:600; }
.mc #mcPresets button small { display:block; font-size:10px; color:#b79ac8; margin-top:5px; font-weight:400; }
.mc .mc-main { width:100%; min-width:0; padding:18px 22px; background:radial-gradient(ellipse at 80% 0,#43204b33,transparent 70%),#1b1025; }
.mc nav { display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; padding-bottom:12px; }
.mc nav button { border-color:transparent; background:transparent; padding:10px 18px; }
.mc nav button[aria-pressed=true] { background:#472756; border-color:#79508e; }
.mc .mc-style-heading { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.mc .mc-style-heading h2 { margin:0 auto 0 0; font-size:24px; letter-spacing:-.03em; }
.mc .mc-style-heading button { min-height:34px; padding:8px 10px; font-size:11px; }
.mc .hint { font-size:11px; margin:8px 0 14px; }
.mc-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0; }
.mc-fields>label { background:#291832; border:1px solid #493052; border-radius:10px; padding:12px; min-width:0; }
.mc-fields output { color:#dab0f6; font:600 12px ui-monospace,monospace; }
.mc .mc-fields label:has(input[type=checkbox]) { display:flex; align-items:center; font-size:11px; }
.mc .mc-advanced { border:1px solid #4d315c; border-radius:10px; background:#25152f; margin:14px 0; }
.mc .mc-advanced summary { cursor:pointer; font-size:12px; padding:12px 14px; color:#d2b3e5; }
.mc .mc-advanced .mc-fields { padding:0 12px 12px; margin:0; grid-template-columns:repeat(3,minmax(0,1fr)); }
.mc .mc-score { border:1px solid #553568; border-radius:12px; margin-top:18px; padding:14px 16px; background:#150d1e; }
.mc .mc-score h2 { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:#dcc3ed; }
.mc .mc-score small { font-size:10px; font-weight:400; letter-spacing:normal; color:#a58bb8; margin-left:12px; text-transform:none; }
.mc canvas { width:100%; height:170px; display:block; }
.mc #mcMixer { grid-template-columns:repeat(4,minmax(0,1fr)); }
.mc #mcMixer label { min-height:170px; display:flex; flex-direction:column; justify-content:space-between; border-top:3px solid #b782e1; }
.mc #mcMixer label:nth-child(2) { border-top-color:#6fcfcb; }.mc #mcMixer label:nth-child(3) { border-top-color:#f3be71; }.mc #mcMixer label:nth-child(4) { border-top-color:#ee8ca7; }
.mc-actions { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0; }.mc .file input { max-width:230px; }
.mc input[type=file]::file-selector-button { color:white; background:#75418d; border:0; border-radius:5px; padding:8px; margin-right:10px; }
.mc #mcExport p { font-size:12px; line-height:1.7; }
.mc-info { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }.mc-info section,.mc .studio-questions { padding:22px; border:1px solid #51325f; border-radius:14px; background:#23162d; }.mc-info p,.mc-info li { font-size:12px; line-height:1.8; }.mc a { color:#d6a4f2; }.mc .studio-questions { margin-top:20px; }.mc .studio-questions summary { cursor:pointer; padding:12px 0; }
.mc #mcDesk.expanded { position:fixed; inset:0; z-index:100000; border-radius:0; overflow:auto; }.mc [hidden] { display:none!important; }
@media(min-width:1200px) { .mc #mcDesk.expanded .mc-grid { min-height:calc(100dvh - 110px); }.mc #mcDesk.expanded #mcPresets { max-height:calc(100dvh - 370px); } }
@media(max-width:1100px) { .mc-grid { grid-template-columns:240px minmax(0,1fr); }.mc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }.mc .mc-transport { flex-wrap:wrap; }.mc .mc-style-heading { flex-wrap:wrap; } }
@media(max-width:700px) { body:has(.mc) #main-content { width:calc(100% - 20px); }.mc { padding:12px 0; }.mc header { padding:20px; }.mc-grid { grid-template-columns:1fr; }.mc aside { border-right:0; border-bottom:1px solid var(--line); padding:12px; }.mc #mcPresets { display:flex; max-height:100px; }.mc #mcPresets button { min-width:175px; }.mc .mc-main { padding:14px; }.mc .mc-advanced .mc-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }.mc #mcDuration { margin:0; }.mc .mc-style-heading h2 { width:100%; }.mc nav button { flex:1; padding:9px 6px; }.mc #mcMixer { grid-template-columns:repeat(2,minmax(0,1fr)); }.mc .mc-score small { display:block; margin:6px 0 0; }.mc-info { grid-template-columns:1fr; }.mc .mc-transport { padding:12px; gap:8px; } }
.mc .mc-library-paging{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:14px 4px 0}.mc .mc-library-paging button{font-size:10px;padding:8px;min-height:34px}.mc #mcLibraryPage{font-size:11px;color:#c0a2d4;white-space:nowrap}
.mc .mc-engine{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;padding:14px;margin:16px 0;border:1px solid #8554a6;border-radius:12px;background:linear-gradient(110deg,#392046,#24142e)}.mc .mc-engine label{min-width:0}.mc .mc-engine button{align-self:end}@media(max-width:700px){.mc .mc-engine{grid-template-columns:1fr}}
.mc .mc-listen{display:flex;align-items:center;gap:14px;padding:12px 0;margin-bottom:12px;border-bottom:1px solid #49315f}.mc .mc-listen label{flex:1;min-width:100px}.mc .mc-listen output{font:12px ui-monospace,monospace;white-space:nowrap;color:#d6b4ec}.mc .mc-compare{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.mc .mc-compare span{font-size:11px;color:#bfa3d2}.mc .mc-sections{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.mc .mc-sections button{font-size:10px;padding:7px 10px;min-height:30px;border-color:#694080;background:#32203e}.mc .mc-engine{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:850px){.mc .mc-engine{grid-template-columns:repeat(2,minmax(0,1fr))}.mc .mc-listen{flex-wrap:wrap}}@media(max-width:450px){.mc .mc-engine{grid-template-columns:1fr}}
/* Grid children must shrink even when the library has a horizontal card strip. */
.mc-grid>aside,.mc-grid>.mc-main{min-width:0}.mc .mc-listen,.mc .mc-compare,.mc .mc-sections{min-width:0}.mc .mc-listen label{min-width:0}.mc .mc-actions>*{max-width:100%}
@media(max-width:700px){.mc-grid{grid-template-columns:minmax(0,1fr)}.mc .mc-listen label{flex:1 1 140px}.mc .mc-actions button{flex:1 1 135px}.mc .mc-compare span{flex-basis:100%}.mc #mcPresets{width:100%}.mc .mc-sections button{max-width:100%}}
.mc .mc-render-state{margin:14px 0 0;padding:10px 14px;border:1px solid #4d3b60;border-radius:9px;color:#bdb0cf;font-size:12px;background:#201529}.mc .mc-render-state[data-dirty=true]{border-color:#ac8550;color:#edd0a4;background:#30231d}.mc .mc-lab-controls{display:flex;gap:14px;align-items:end;margin:22px 0}.mc .mc-lab-controls label{flex:1}.mc .mc-idea-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mc .mc-idea-list article{padding:18px;border:1px solid #704588;border-radius:12px;background:linear-gradient(145deg,#382045,#22142f)}.mc .mc-idea-list h3{font-size:17px;color:#ead4fb;margin:0 0 10px}.mc .mc-idea-list p{font-size:12px}.mc .mc-idea-list .mc-actions{display:grid;gap:8px;margin:18px 0 0}.mc .mc-idea-list button:first-child{background:#7845a3}@media(max-width:1000px){.mc .mc-idea-list{grid-template-columns:1fr}}@media(max-width:700px){.mc nav{flex-wrap:wrap}.mc nav button{flex:1 1 40%}.mc .mc-lab-controls{flex-direction:column;align-items:stretch}}

/* layout pass: readable sizes, steps in the header, a taller library, even field cards, empty-state canvas */
.mc { font-size:15px; }
.mc label { font-size:12.5px; }
.mc button,.mc .file { font-size:13px; }
.mc .hint,.mc #mcStatus { font-size:13px; }
.mc #mcPresets button strong { font-size:13.5px; }.mc #mcPresets button small { font-size:11.5px; }
.mc .mc-transport label { font-size:13px; }
.mc header p { font-size:16px; }
.mc .mc-steps { list-style:none; counter-reset:s; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:18px 0 0; }
.mc .mc-steps li { counter-increment:s; display:grid; grid-template-columns:30px 1fr; column-gap:12px; align-items:center; padding:10px 16px 10px 10px; border:1px solid #67418c; border-radius:12px; background:#1d1229aa; flex:1 1 220px; max-width:320px; }
.mc .mc-steps li::before { content:counter(s); grid-row:span 2; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(120deg,#a15ee4,#7842bc); color:#fff; font-weight:800; }
.mc .mc-steps b { font-size:14.5px; align-self:end; }.mc .mc-steps span { font:400 12.5px system-ui; letter-spacing:0; color:#bfa8d4; align-self:start; }
.mc aside { display:flex; flex-direction:column; }
.mc #mcPresets { max-height:none; flex:1 1 0; min-height:420px; }
.mc-fields>label { align-content:start; }
.mc .mc-fields>label:has(input[type=checkbox]) { grid-column:span 2; }
.mc .mc-score canvas { height:200px; border-radius:8px; }
.mc-info ul { padding-left:18px; margin:0; }.mc-info li { color:var(--muted); font-size:14px; line-height:1.6; }.mc-info li+li { margin-top:6px; }.mc-info p { font-size:14px; line-height:1.6; }
@media(max-width:1100px){ .mc .mc-fields>label:has(input[type=checkbox]) { grid-column:auto; } }
@media(max-width:700px){ .mc #mcPresets { min-height:0; flex:none; } .mc .mc-steps li { max-width:none; } .mc .mc-score canvas { height:150px; } }
.mc #mcPresets{grid-auto-rows:max-content;align-content:start}.mc #mcPresets button{flex:none}