/* SPDX-License-Identifier: MIT — 0.20.1 studio layout: a sidebar with the zombie, tracks and sections; the transport on top. */
body.studio{
 --s-bg:#0b110d;--s-side:#0f1812;--s-card:#141f17;--s-card2:#1a281d;--s-line:#273a2c;--s-fg:#e6efdc;--s-muted:#93a88f;--s-accent:#b5e86b;--s-ink:#13200c;
 margin:0;background:radial-gradient(900px 500px at 70% -10%,#1d3420 0,transparent 60%),var(--s-bg);color:var(--s-fg);
 display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body.studio *{box-sizing:border-box}
/* sidebar */
body.studio .side{position:sticky;top:0;height:100vh;overflow:auto;background:var(--s-side);border-right:1px solid var(--s-line);padding:18px 16px;display:flex;flex-direction:column;gap:12px}
body.studio .side-brand{display:grid;justify-items:center;gap:8px;text-align:center}
body.studio #zombie{width:120px;height:120px;image-rendering:pixelated;border-radius:16px;border:1px solid var(--s-line);box-shadow:0 0 0 4px #0c140f,0 12px 30px -12px #000,0 0 40px -10px #b5e86b55}
body.studio .side-brand strong{display:block;font:900 20px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--s-accent)}
body.studio .side-brand small{font:600 10px/1.4 ui-monospace,monospace;letter-spacing:.14em;color:var(--s-muted)}
body.studio .side-device{display:grid;gap:6px}
body.studio .side-device .pill{justify-self:center;font-size:12px}
body.studio .side-meter{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
body.studio .side-meter .meter{height:6px;border-radius:4px;background:#0a110c;border:1px solid var(--s-line);overflow:hidden}
body.studio .side-meter .meter i{display:block;height:100%;background:linear-gradient(90deg,#7fc94a,var(--s-accent));transition:width .08s}
body.studio .side-meter small{font:11px ui-monospace,monospace;color:var(--s-muted)}
body.studio .side-label{margin:6px 0 -4px;font:700 10px/1 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--s-muted)}
body.studio #tracks{display:grid;gap:6px;margin:0}
body.studio #tracks button{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"n m";align-items:center;gap:2px 10px;text-align:left;padding:9px 12px;border-radius:12px;background:var(--s-card);border:1px solid var(--s-line);border-left:4px solid var(--color);min-height:0;box-shadow:none;transform:none}
body.studio #tracks button strong{font-size:14px}
body.studio #tracks button small{grid-column:1/-1;font:600 10px/1 ui-monospace,monospace;color:var(--s-muted)}
body.studio #tracks button[aria-selected=true]{background:color-mix(in srgb,var(--color) 18%,var(--s-card2));border-color:var(--color);box-shadow:0 0 18px -6px var(--color)}
body.studio .side .tabs{display:grid;gap:4px;margin:0;border:0;padding:0;background:none;position:static}
body.studio .side .tabs button{text-align:left;padding:9px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--s-muted);font-weight:600;box-shadow:none;min-height:0}
body.studio .side .tabs button:hover{background:var(--s-card);color:var(--s-fg)}
body.studio .side .tabs button[aria-selected=true]{background:var(--s-accent);color:var(--s-ink);border-color:var(--s-accent)}
body.studio .side-foot{margin-top:auto;display:grid;gap:8px;font-size:13px}
body.studio .side-foot a{color:var(--s-accent)}
/* the work area */
body.studio .work{min-width:0;display:flex;flex-direction:column}
body.studio .topbar{position:sticky;top:0;z-index:6;background:#0b110dee;backdrop-filter:blur(10px);border-bottom:1px solid var(--s-line);padding:10px 22px}
body.studio .topbar .transport{margin:0;padding:0;background:none;border:0;box-shadow:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
body.studio .topbar #play{min-width:96px}
body.studio .topbar #record[aria-pressed=true]{background:#ff6f91;color:#2a0b12;border-color:#ff6f91}
body.studio .topbar #tempo{width:76px;font:700 18px ui-monospace,monospace}
body.studio .topbar .position-display{font:700 18px ui-monospace,monospace;color:var(--s-accent);padding:4px 12px;border-radius:8px;background:#0a110c;border:1px solid var(--s-line)}
body.studio main{padding:18px 22px 10px;display:grid;gap:16px;max-width:none;margin:0}
body.studio #sync-status{padding:4px 22px;font-size:12px;color:var(--s-muted)}
body.studio #ports{margin:12px 22px 0}
/* cards and controls */
body.studio .card,body.studio .panel.card{background:linear-gradient(180deg,var(--s-card2),var(--s-card));border:1px solid var(--s-line);border-radius:16px;box-shadow:0 10px 30px -22px #000;padding:18px}
body.studio .panel{animation:s-in .25s ease}
@keyframes s-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
body.studio button,body.studio select,body.studio input:not([type=range]):not([type=checkbox]),body.studio .file-button{border-radius:10px;border:1px solid var(--s-line);background:#132017;color:var(--s-fg);box-shadow:none}
body.studio button:hover:not(:disabled){border-color:var(--s-accent)}
body.studio button.accent{background:var(--s-accent);color:var(--s-ink);border-color:var(--s-accent);font-weight:700}
body.studio button.accent:disabled{background:#1b2a20!important;color:#9fb3a1!important}
body.studio input[type=range]{accent-color:var(--s-accent)}
body.studio h2{font-size:20px;letter-spacing:-.01em}
body.studio .eyebrow{color:var(--s-accent);font:700 10px/1 ui-monospace,monospace;letter-spacing:.16em}
body.studio .muted{color:var(--s-muted)}
body.studio canvas#piano-roll,body.studio canvas#waveform,body.studio canvas#filter-graph,body.studio canvas#envelope-graph{border-radius:12px;border:1px solid var(--s-line)}
/* the keyboard stays at the bottom of the work area */
body.studio .keyboard.card{margin:0 22px 16px;position:sticky;bottom:0;z-index:5;background:#101a13f2;backdrop-filter:blur(8px)}
body.studio #status{position:fixed;right:18px;bottom:18px;left:auto;max-width:420px;z-index:9;border-radius:12px;border:1px solid var(--s-line);background:#0f1812f2;box-shadow:0 12px 30px -10px #000;padding:10px 14px;font-size:13px;margin:0;min-height:0}
body.studio #status:empty{display:none}
/* narrow screens: the sidebar becomes a top bar, tracks and sections scroll sideways */
@media (max-width:860px){
 body.studio{grid-template-columns:1fr}
 body.studio .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--s-line);flex-direction:column}
 body.studio .side-brand{grid-template-columns:auto 1fr;justify-items:start;text-align:left}
 body.studio #zombie{width:72px;height:72px}
 body.studio #tracks,body.studio .side .tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto}
 body.studio .side-label{display:none}
 body.studio .side-foot{margin-top:0;grid-auto-flow:column;justify-content:start}
 body.studio .topbar{position:static}
 body.studio .keyboard.card{position:static}
}
@media (prefers-reduced-motion:reduce){body.studio .panel{animation:none}}
/* tracks stack in the sidebar; long help paragraphs stay out of the way (the short mouse hint and the sample notes remain) */
body.studio #tracks{grid-template-columns:1fr!important;grid-auto-flow:row}
body.studio #tracks button{width:100%}
body.studio [data-i=recordHelp],body.studio [data-i=pianoHelp],body.studio [data-i=hardwareControls],body.studio [data-i=seqHelp],body.studio [data-i=alpha],body.studio [data-i=liveHelp]{display:none}
body.studio .keyboard.card{position:static}
body.studio .keyboard .key,body.studio .keyboard button{min-height:0}
@media (max-width:860px){body.studio #tracks{grid-template-columns:none!important;grid-auto-flow:column}body.studio #tracks button{width:auto}}
/* compact sidebar: everything fits a laptop screen without scrolling the sidebar */
body.studio .side{gap:9px;padding:14px 14px}
body.studio #zombie{width:96px;height:96px}
body.studio .side-brand{grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center;gap:12px}
body.studio #tracks{grid-template-columns:1fr 1fr!important;gap:5px}
body.studio #tracks button{padding:6px 9px;border-radius:10px;gap:0 6px}
body.studio #tracks button strong{font-size:12px}
body.studio #tracks button small{font-size:9px}
body.studio .side .tabs{gap:2px}
body.studio .side .tabs button{padding:6px 12px}
body.studio .side-device button{padding:7px 10px}
body.studio .side-foot{gap:5px}
/* track tiles name their sound; long names end in an ellipsis */
body.studio #tracks button strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;grid-column:1/-1}
body.studio #tracks button{grid-template-columns:minmax(0,1fr)}
/* settings: the old FL Studio and HOLD notes are covered by the profiles and the README */
body.studio h3:has(+ [data-i=flHelp]),body.studio [data-i=flHelp],body.studio h3:has(+ [data-i=holdHelp]),body.studio [data-i=holdHelp]{display:none}
/* 0.21: generator and motion */
body.studio .x-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 16px;margin-top:10px}
body.studio .x-control{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;font-size:13px}
body.studio .x-control span{grid-column:1/-1;color:var(--s-muted);font:600 11px/1.2 ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
body.studio .x-control output{font:700 12px ui-monospace,monospace;color:var(--s-accent);min-width:28px;text-align:right}
body.studio .x-control select{grid-column:1/-1}
body.studio .gen-card{border-color:color-mix(in srgb,var(--s-accent) 40%,var(--s-line));background:radial-gradient(500px 160px at 90% 0,#b5e86b14,transparent),linear-gradient(180deg,var(--s-card2),var(--s-card))}
body.studio .gen-actions{margin-top:12px;gap:8px;flex-wrap:wrap}
body.studio .x-card .small{font-size:12px;margin:4px 0 0}