/* MIDILAB / Studio Edition — restrained editorial treatment, not a generic dashboard. */
:root {
  --bg: #151a17;
  --surface: #202923;
  --surface2: #283229;
  --line: #394238;
  --muted: #9fa99d;
  --purple: #bd765c;
  --violet: #e9ac87;
  --mint: #c8d9b2;
  --white: #f6f2e8;
  --display: 'Avenir Next', 'Trebuchet MS', sans-serif;
  --sans: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
}
body { background:#151a17; color:#f4f0e8; letter-spacing:-.009em; }
.ambient-one {background:#8b5a3a;opacity:.16;filter:blur(150px)}
.ambient-two {background:#587057;opacity:.10}
.topbar {border-bottom-color:#f5ead020}
.logo {font-weight:850;letter-spacing:-1.65px}
.logo-accent {color:#c4d7b1}
.brand-mark {border-radius:50%;background:#e0aa86;box-shadow:none}
.brand-mark svg {color:#1d2922}
.logo-dot {color:#e8ad8a}
.topnav a {font-weight:550;letter-spacing:-.01em}
.topnav a:hover{color:#f2d6b8}
.nav-cta {background:#30382f;border-radius:100px;font-weight:700;padding:11px 19px;border-color:#81897754}
.nav-cta span,.tiny-check,.hero-period,.sparkle,.label-index {color:#ebaf8c}
.hero {min-height:530px;padding-top:98px}
.hero-kicker {color:#e0c2ad;letter-spacing:.14em}
.hero h1 {font-size:clamp(52px,6.1vw,90px);letter-spacing:-.077em;line-height:1.02;max-width:840px}
.hero h1>span:first-child {background:none;color:#d6cfb4}
.hero h1>span:first-child::after {content:'';display:block;position:absolute;width:230px;height:3px;background:#d9a081;left:0;bottom:-18px;opacity:.65;transform:rotate(-1.2deg)}
.hero p {color:#b9c0b8;font-size:16px;max-width:520px;line-height:1.75}
.hero p strong{color:#f2dcc2}
.primary-link {background:#e3ad8d;color:#263029;border-radius:100px;box-shadow:0 12px 32px #0002;font-size:13px;transition:transform .22s ease,background .22s ease}
.primary-link:hover{background:#f0c29f;transform:translateY(-3px)}
.hero-sub,.hero-metrics span{color:#a9b2a8}
.hero-metrics strong{color:#f5ecdd}
.hero-vinyl-wrap {filter:saturate(.74)}
.section-label{color:#c5c6bb}
.studio-running{color:#afbbae}
/* Distinct studio shell: warm paper controls, mineral-gray piano roll. */
.studio-window {background:#f7f5ef;border-radius:22px;border:1px solid #bfc3b7;box-shadow:0 38px 110px #0007,0 4px 16px #0002;overflow:hidden;color:#273229}
.window-topbar {height:59px;padding:0 27px;background:#eae7dd;border-bottom:1px solid #d8d5c9}
.window-title {color:#515d53;font-size:12px;font-weight:800}
.mac-dots{gap:5px}
.mac-dots i{width:8px;height:8px;background:#d7bda5}
.mac-dots i:nth-child(2){background:#bfcbad}
.mac-dots i:nth-child(3){background:#b7c2b7}
.window-version {background:#dcdccf;border:0;border-radius:100px;padding:4px 9px;color:#576355}
.saved-indicator {color:#758071;font-size:11px}
.icon-button {border:1px solid #c4c9bb;color:#56665a;border-radius:50%;width:27px;height:27px;font-weight:800}
.studio-layout {grid-template-columns:274px minmax(0,1fr)}
.control-panel {padding:27px 20px 28px;background:#f0eee5;border-right:1px solid #d9d8cd}
.panel-title-icon {background:#dce6cf;color:#48654d;border:0;border-radius:11px;font-size:23px}
.panel-title h2 {color:#26332a;font-size:20px;font-weight:800;letter-spacing:-.045em}
.panel-title span:not(.panel-title-icon) {color:#747e72;font-size:12px}
.panel-group{border-color:#d9d9ce;padding-bottom:21px;margin-bottom:21px}
.field-title {color:#6c776d;font-weight:800;font-size:10.5px;letter-spacing:.075em;margin-bottom:10px}
.genre-grid {gap:5px}
.genre {background:#e9e8dd;border-color:#d9d9cd;border-radius:9px;padding:10px 5px;color:#667366;font-size:11px;font-weight:750}
.genre:hover {background:#e2e1d3;border-color:#a3aa97;color:#293a2e}
.genre.active {background:#31483a;color:#f6f3e8;border-color:#31483a;box-shadow:0 5px 14px #29382c16}
.form-select,.tiny-select {background-color:#fffdf6;border:1px solid #d4d8c8;border-radius:10px;color:#29392c;min-height:43px;font-weight:650;font-size:12px;padding-left:11px}
.tiny-select{min-height:31px;width:82px;padding:5px 23px 5px 8px}
.range-value {color:#314137}
.range-value small{color:#7c877a}
.custom-range{background:#d4d9c8;accent-color:#ad725e}
.custom-range::-webkit-slider-thumb{border:3px solid #fff9f1;background:#b37a60;box-shadow:0 2px 9px #906c5660;width:19px;height:19px}
.range-limits{color:#798477}
.switch-name{color:#344036;font-size:12px}
.switch-desc{color:#849084}
.switch-ui{background:#c2c7bc}
.switch-row input:checked+.switch-ui{background:#426451}
.switch-row input:checked+.switch-ui:before{background:#fffdf5}
.generate-button{background:#d7a17e;border:0;color:#293427;border-radius:13px;font-weight:850;box-shadow:0 9px 20px #b37b5028;height:55px}
.generate-button:hover{filter:none;background:#e5b28f}
.random-preset{color:#697969;text-align:center;line-height:1.5}
.random-preset:hover{color:#334b3b}
.workspace{background:#faf9f4;padding-bottom:8px}
.project-head{padding:27px 26px 22px}
.project-eyebrow{color:#899187}
.project-eyebrow span:last-child{color:#a06951}
.project-title-block input {color:#2b382f;font-size:25px;font-weight:850;letter-spacing:-.053em}
.project-title-block input:focus {background:#f0ede3;border-color:#b8bdaa}
.project-subline{color:#7b887e;font-size:12px}
.light-button {background:#f4f3eb;border-color:#d7dbcf;color:#59675c;border-radius:9px;font-weight:700;font-size:11px;padding:10px 12px}
.light-button:hover{background:#e9ecdf;color:#304b3c}
.transport{background:#edf0e7;border-color:#dfe3d6;border-radius:13px;padding:9px 15px}
.play-button{background:#3d624b;color:#f7f3e9;border-radius:50%;width:43px;height:43px;box-shadow:0 4px 12px #45634b30}
.play-button:hover{background:#34533f}
.transport-plain{color:#637368}
.transport-plain:hover{color:#253e2f}
.transport-bpm b,.transport-position b{color:#334b3c;font-size:17px}
.transport-bpm small,.transport-position small{color:#909b91}
.transport-sep{background:#d6dfd4}
.checkbox-small,.volume-wrap{color:#596d5d}
.checkbox-small input,.volume-wrap input{accent-color:#466d51}
.tracks{margin-top:28px;border-color:#d8dfd4}
.track-tab{color:#7e897d;font-weight:700;font-size:12px}
.track-tab:hover{color:#253b2d}
.track-tab.active{color:#253b2d;border-bottom-color:#c38467}
.melody-dot{background:#d3a078}
.chords-dot{background:#8bae97}
.bass-dot{background:#7d94b7}
.count-bubble{background:#ebeee4;color:#6f8173}
.track-mode{color:#a0a99d}
.track-mode-line{background:#adb9ab}
.toolbar-label,.step-size-label{color:#879489;font-size:10px}
.tool-toggle{color:#768577;border-radius:8px;padding:7px 10px}
.tool-toggle.active{background:#e9d8c9;border-color:#d7b6a4;color:#8a523c}
.tool-divider{background:#d4dbcd}
.tool-plain{color:#7e8b7e}
.tool-plain:hover{color:#304b37}
.roll-outer{border-radius:13px;border-color:#39443f;box-shadow:0 8px 22px #26372b14;background:#202b28}
.piano-scroll{height:430px;scrollbar-color:#718477 #25302b}
.piano-keyboard{background:#2a3930;box-shadow:5px 0 10px #1017113d}
.piano-key{background:#e5e4d9;color:#586858;border-bottom-color:#ccd2c7}
.piano-key.black{background:#34433b;color:#becbb9;border-bottom-color:#26332c}
.piano-key.c{border-bottom-color:#849886}
.piano-keyboard:before{background:#6d8172}
.piano-footer{color:#728276;font-size:10.5px}
.shortcut-badge{background:#e9e9df;border-color:#d2d7cd;color:#68766b}
#noteInfo{color:#91664e;font-weight:650}
.harmony-card{background:#f3f2eb;border-color:#dddcd0;border-radius:12px;padding:17px 18px;margin-bottom:19px}
.harmony-heading strong{color:#6c776a;font-size:10px}
.harmony-icon{color:#a56e54}
#progressionName{color:#7e8679}
.chord-pill{background:#fbfaf5;border-color:#d9ddce;color:#324738;border-radius:8px;font-size:12px;padding:7px 12px}
/* Drum sequencer: independent desk-like panel with tactile cells. */
.drum-studio{margin:0 26px 22px;border-radius:16px;border:1px solid #d8dccf;background:#f2f1e9;padding:24px;box-shadow:0 7px 16px #334d3b09}
.drum-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:23px}
.mini-overline{font-size:10px;letter-spacing:.13em;font-weight:850;color:#a46c52}
.drum-head h3{font:850 clamp(21px,2.25vw,28px)/1.15 var(--display);letter-spacing:-.055em;color:#273b2f;margin:7px 0 6px}
.drum-head h3 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#bd8669;letter-spacing:-.04em}
.drum-head p{font-size:12px;color:#78867a;margin:0;line-height:1.55}
.drum-head-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:end}
.drum-enable{font-size:11px;font-weight:750;color:#55685b;white-space:nowrap;display:flex;align-items:center;gap:6px;cursor:pointer}
.drum-enable input{accent-color:#426c52;width:15px;height:15px}
.drum-regenerate{background:#334c3b;border:1px solid #334c3b;color:#f4f4e9;padding:10px 13px;border-radius:10px;white-space:nowrap;font-weight:700;font-size:11px;transition:transform .18s,background .18s}
.drum-regenerate:hover{background:#48654e;transform:translateY(-2px)}
.pattern-bar{display:flex;gap:5px;overflow:auto;scrollbar-width:thin;margin-bottom:12px}
.bar-tab{background:transparent;color:#7c8a7c;border:0;border-bottom:2px solid transparent;padding:7px 15px;font-size:11px;font-weight:750;white-space:nowrap}
.bar-tab.active{color:#2e4c39;border-bottom-color:#b97c5d;background:#e8e9dc;border-radius:8px 8px 0 0}
.drum-surface{background:#fffdf7;border:1px solid #dfe3d7;border-radius:12px;overflow:hidden;padding:10px 12px}
.drum-grid-heading{display:flex;justify-content:space-between;color:#929e91;font-size:9px;font-weight:850;letter-spacing:.1em;padding:4px 5px 9px}
.drum-lanes{display:flex;flex-direction:column;gap:0}
.drum-lane{display:grid;grid-template-columns:121px 172px minmax(0,1fr) 25px;align-items:center;gap:10px;padding:13px 5px;border-top:1px solid #eceee6}
.drum-lane:first-child{border-top:0}
.drum-lane-info{display:flex;align-items:center;gap:8px;min-width:0}
.drum-lane-name{display:flex;flex-direction:column;min-width:0}
.drum-lane-name strong{font-size:10.5px;letter-spacing:.035em;font-weight:850;color:#344b3c;line-height:1.3}
.drum-lane-name small{color:#94a095;font-size:9px}
.drum-audition{width:29px;height:29px;min-width:29px;background:#e7e9de;color:#49684e;border:0;border-radius:50%;font-size:10px;transition:transform .18s}
.drum-audition:hover{background:#d8e1cf;transform:scale(1.08)}
.drum-sample-picker{display:flex;align-items:center;gap:5px;min-width:0}
.drum-select{width:100%;min-width:0;max-width:104px;border:1px solid #e0e3d8;background:#f8f8f0;color:#3f5145;border-radius:8px;font-size:10.5px;height:34px;padding:0 6px;cursor:pointer}
.drum-upload{background:#f1e4d8;border:1px solid #e2cbba;color:#98664c;border-radius:8px;font-size:9.5px;font-weight:750;height:34px;white-space:nowrap;padding:0 8px}
.drum-upload:hover{background:#ead3bf}
.drum-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;min-width:0}
.drum-step{position:relative;display:block;width:100%;height:35px;border-radius:5px;border:1px solid #dde4d9;background:#edf0e8;transition:transform .13s,background .13s,border .13s,box-shadow .13s}
.drum-step:nth-child(4n+1){border-left:2px solid #bbcabc}
.drum-step:hover{background:#dde6d8;transform:translateY(-1px)}
.drum-step.hit{background:#8aa992;border-color:#66876b;box-shadow:inset 0 -3px #6b9377}
.drum-step.accent{background:#cf9270;border-color:#bd7856;box-shadow:inset 0 -3px #a96849}
.drum-step.playing:after{content:'';position:absolute;inset:-3px;border:2px solid #e0aa84;border-radius:7px;pointer-events:none}
.drum-mute{border:0;width:26px;height:29px;border-radius:7px;color:#97a396;background:#edf1e9;font-size:11px;font-weight:850}
.drum-mute.muted{background:#e9cfca;color:#a3554c}
.drum-bottom{margin-top:11px;display:flex;justify-content:space-between;gap:14px;color:#8a9689;font-size:10px;line-height:1.6}
.drum-bottom b{color:#576d5b}
.export-panel{background:#293e31;border:1px solid #293e31;border-radius:14px;margin-top:0;margin-bottom:10px;padding:17px 19px;gap:12px}
.export-icon{background:#3b5b42;color:#d7e1c8;border:0;border-radius:50%;width:39px;height:39px;font-size:19px}
.export-panel-copy strong{color:#f0f4e8;font-size:13px}
.export-panel-copy div span{color:#afbfaf;font-size:11px}
.export-actions{display:flex;gap:7px;flex-wrap:wrap}
.export-button{border-radius:9px;background:#e7efe0;border-color:#e7efe0;color:#264131;font-weight:850;padding:11px 13px}
.export-button:hover{background:#d4e4cb}
.export-button.export-midi{background:#e6af8c;border-color:#e6af8c;color:#2f382d}
.export-button.export-midi:hover{background:#f1c3a2}
.export-button>span{color:inherit;opacity:.6}
.export-note{color:#8a9388;font-size:10px;padding:1px 3px 21px;margin-left:26px;margin-right:26px}
.studio-footnote{color:#bac4b4}
/* Elements outside the studio follow the same muted visual system. */
.sample-section,.packs-section{border-radius:24px}
.pack-card,.feature-card{border-radius:17px}
.feature-card{background:#202923;border-color:#3a443a}
.features-head h2 em{color:#ddb08d}
.feature-art{background:radial-gradient(ellipse,#7c947b33,transparent 72%)}
.art-wave i{background:linear-gradient(#c5d7b6,#719178);box-shadow:none}
.art-wave i:nth-child(5n){background:linear-gradient(#e5ab88,#c78164)}
.mini-grid i{background:#d8a083}
.mini-grid i:nth-child(4){background:#a0b5a2}
.file-icon{color:#d7ddc6;border-color:#95ac94;box-shadow:none}
.file-icon span{background:#e0a681}
.faq-layout h2 span{color:#e6a984}
.faq-list summary:after{color:#e9ae88}
.footer-brand span{color:#d5b08e}
@media(max-width:1250px){
  .studio-layout{grid-template-columns:245px minmax(0,1fr)}
  .control-panel{padding:23px 15px}
  .drum-studio{margin-left:18px;margin-right:18px;padding:17px}
  .drum-lane{grid-template-columns:105px 145px minmax(0,1fr) 25px;gap:7px}
  .drum-select{max-width:85px}
  .drum-step{height:30px}
}
@media(max-width:960px){
  .studio-layout{grid-template-columns:1fr}
  .control-panel{border-right:0;border-bottom:1px solid #dadfd0}
  .drum-lane{grid-template-columns:128px 175px minmax(0,1fr) 28px;gap:8px}
  .drum-select{max-width:110px}
}
@media(max-width:720px){
  .hero{padding-top:68px;padding-bottom:75px}
  .hero h1{font-size:clamp(45px,12vw,66px)}
  .studio-window{border-radius:17px}
  .window-topbar{padding:0 14px}
  .saved-indicator{font-size:10px}
  .project-head{padding:20px 15px}
  .transport,.tracks,.roll-outer,.harmony-card,.export-panel,.drum-studio{margin-left:13px;margin-right:13px}
  .edit-toolbar,.piano-footer,.export-note{margin-left:13px;margin-right:13px}
  .drum-studio{padding:16px 13px}
  .drum-head{flex-wrap:wrap;align-items:flex-start}
  .drum-head-tools{justify-content:start}
  .drum-lane{grid-template-columns:minmax(0,1fr) 155px 25px;gap:8px;padding:11px 2px}
  .drum-lane-info{grid-column:1}
  .drum-sample-picker{grid-column:2}
  .drum-mute{grid-column:3;grid-row:1}
  .drum-steps{grid-column:1/-1;grid-row:2}
  .drum-step{height:35px}
  .drum-surface{padding:8px}
  .drum-bottom{flex-direction:column;gap:2px}
  .export-panel{flex-direction:column;align-items:stretch}
  .export-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .export-button{padding:10px 5px}
  .export-button>span{display:none}
}
@media(max-width:420px){
  .studio-layout{display:block}
  .control-panel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drum-select{max-width:85px}
  .drum-lane{grid-template-columns:minmax(0,1fr) 142px 25px}
  .drum-step{height:31px;border-radius:4px}
  .drum-sample-picker{gap:4px}
  .drum-upload{font-size:8px;padding:0 6px}
}
@media(prefers-reduced-motion:reduce){
  .drum-step,.drum-audition,.drum-regenerate,.primary-link,.generate-button{transition:none!important;animation:none!important}
}

.register-hint{color:#879384;font-size:10px;margin:7px 0 0;line-height:1.5}

#pianoCanvas.note-reveal{animation:note-bloom .55s ease-out both}
@keyframes note-bloom{0%{opacity:.66;filter:saturate(.62)}100%{opacity:1;filter:saturate(1)}}
.play-button.is-playing{animation:play-beat 2.5s ease-in-out infinite}
@keyframes play-beat{0%,100%{box-shadow:0 0 0 0 #476f4d30}50%{box-shadow:0 0 0 9px #476f4d00}}
@media(prefers-reduced-motion:reduce){#pianoCanvas.note-reveal,.play-button.is-playing{animation:none!important}}