/* MIDILAB 5 / dark production studio — unified with the After Hours storefront. */
:root{color-scheme:dark;--bg:#0b0e12;--surface:#171d23;--surface2:#20272e;--line:#303b44;--line-soft:#29343b;--muted:#a0aab1;--purple:#b9e57a;--violet:#c0e99e;--mint:#b9e57a;--white:#ecf0ed;--sans:Inter,'Avenir Next','Segoe UI',system-ui,sans-serif;--display:var(--sans)}
body.v4-studio{background:#0b0e12;color:#e9efea;letter-spacing:-.012em}
body.v4-studio:before{content:'';position:absolute;pointer-events:none;top:0;left:0;right:0;height:650px;background:radial-gradient(ellipse at 85% 12%,#31443d50,transparent 65%);z-index:-1}
body.v4-studio .app{max-width:1510px;padding:0 42px}
body.v4-studio *:focus-visible{outline:2px solid #b9e57a;outline-offset:3px}
.v4-studio ::selection{background:#b9e57a;color:#132017}
.v4-studio .site-header{height:92px;border-color:#30373e}
.v4-studio .site-brand{color:#f1f5f0;font-size:25px}
.v4-studio .brand-symbol{border-radius:11px;background:#b9e57a;color:#131b15;box-shadow:0 4px 22px #b9e57a22}
.v4-studio .brand-symbol span,.v4-studio .brand-period{color:#6b8b4c}
.v4-studio .site-links{color:#94a1a6;font-size:12px;gap:35px}
.v4-studio .site-links .current,.v4-studio .site-links a:hover{color:#f2f5f0}
.v4-studio .site-links .current{border-color:#b9e57a}
.v4-studio .site-action{background:#b9e57a;color:#131d16;border:1px solid #b9e57a;border-radius:10px;padding:13px 18px;font-weight:770;gap:19px}
.v4-studio .site-action:hover{background:#d0f4a2}
.v4-studio .studio-intro{padding:56px 5px 51px;gap:42px;min-height:305px}
.v4-studio .pretitle{color:#b9e57a;font-size:10px;letter-spacing:.18em}
.v4-studio .pretitle i{background:#b9e57a}
.v4-studio .studio-intro h1{color:#f0f3ee;font-size:clamp(44px,4.4vw,69px);font-weight:770;line-height:1.04;letter-spacing:-.077em;margin:16px 0 15px}
.v4-studio .studio-intro h1 em{color:#b9e57a}
.v4-studio .studio-intro p{color:#9fadb2;font-size:14px;line-height:1.75;max-width:630px}
.v4-studio .studio-intro-art{background:linear-gradient(135deg,#2c3738,#1a2227);border:1px solid #425149;box-shadow:10px 10px 0 #1b2528;width:295px;height:172px;transform:rotate(-3deg);border-radius:12px}
.v4-studio .studio-intro-art>span,.v4-studio .studio-intro-art small{color:#a5baa9}
.v4-studio .studio-intro-art>b{color:#b9e57a}
.v4-studio .art-notes i{background:#9fd486}
.v4-studio .studio-window{background:#171d22;color:#e9efea;border:1px solid #39444a;border-radius:17px;box-shadow:0 36px 90px #0009,0 2px 6px #0008}
.v4-studio .window-topbar{background:#21282d;border-bottom:1px solid #354148;height:54px}
.v4-studio .window-title{color:#c8d0cc}
.v4-studio .window-version{color:#b9e57a;background:#354338;border:1px solid #50634d}
.v4-studio .mac-dots i{background:#d68b76}.v4-studio .mac-dots i:nth-child(2){background:#dbbb7e}.v4-studio .mac-dots i:nth-child(3){background:#97bf86}
.v4-studio .saved-indicator{color:#a0b1ab}
.v4-studio .icon-button{background:#273037;border-color:#414f55;color:#e3ede5}
.v4-studio .studio-layout{grid-template-columns:276px minmax(0,1fr)}
.v4-studio .control-panel{background:#141a1f;border-right:1px solid #353f46;padding:26px 21px 29px}
.v4-studio .panel-title-icon{background:#2d4235;border:1px solid #476851;color:#b9e57a;border-radius:11px}
.v4-studio .panel-title h2{color:#eff1ed}
.v4-studio .panel-title span:not(.panel-title-icon){color:#8e9ca3}
.v4-studio .panel-group{border-color:#2e3840}
.v4-studio .panel-group.mood-group{background:#202a2c;border:1px solid #364a43;border-radius:11px;padding:15px 11px;margin:0 -11px 20px}
.v4-studio .field-title{color:#a8b6b9}
.v4-studio .genre{background:#252d33;border:1px solid #3b484e;color:#b4c0c0;border-radius:8px}
.v4-studio .genre:hover{background:#34433b;color:#f0f5ed;border-color:#7b9c72}
.v4-studio .genre.active{background:#b9e57a;color:#142019;border-color:#b9e57a;box-shadow:0 8px 20px #b9e57a1a}
.v4-studio .form-select,.v4-studio .tiny-select{color:#e3eae5;background-color:#252e34;border:1px solid #44515a;border-radius:8px;box-shadow:none}
.v4-studio .form-select option,.v4-studio .tiny-select option{background:#20282e;color:#ecf1ea}
.v4-studio .form-select:focus{border-color:#afd77f}
.v4-studio .range-value{color:#eff5e8}.v4-studio .range-value small,.v4-studio .range-limits{color:#85959a}
.v4-studio .custom-range{background:#364147;accent-color:#b9e57a}
.v4-studio .custom-range::-webkit-slider-thumb{background:#b9e57a;border-color:#1a2425;box-shadow:0 0 0 1px #b9e57a66}
.v4-studio .switch-name{color:#e4ebe6}
.v4-studio .switch-desc,.v4-studio .register-hint{color:#87979b}
.v4-studio .switch-ui{background:#3b454b}
.v4-studio .switch-row input:checked+.switch-ui{background:#b9e57a}
.v4-studio .switch-row input:checked+.switch-ui:before{background:#15221a}
.v4-studio .generate-button{background:#b9e57a;border:1px solid #b9e57a;color:#142017;border-radius:9px;height:54px;font-size:13px;font-weight:790;box-shadow:0 6px 25px #b9e57a15}
.v4-studio .generate-button:hover{background:#d0f19f;transform:translateY(-2px)}
.v4-studio .generate-arrow{color:#354833}
.v4-studio .random-preset{color:#96a5a5}.v4-studio .random-preset:hover{color:#d7e8d5}
.v4-studio .workspace{background:#192026;padding-bottom:23px}
.v4-studio .project-head{padding:26px 27px 18px}
.v4-studio .project-eyebrow{color:#81979a}
.v4-studio .project-eyebrow span:last-child{color:#b9e57a}
.v4-studio .project-title-block input{color:#f1f5ee;font-size:25px}
.v4-studio .project-title-block input:focus{background:#2d383a;border-color:#81a76b}
.v4-studio .project-subline{color:#9ba9aa}
.v4-studio .light-button{background:#273138;color:#d2ddd6;border:1px solid #3c4a51;border-radius:7px}
.v4-studio .light-button:hover{background:#36453e;color:#e8f5e0;border-color:#7c9d74}
.v4-studio .transport{background:#252e33;border:1px solid #3d484e;border-radius:11px;padding:10px 16px}
.v4-studio .play-button{background:#b9e57a;color:#111b15;box-shadow:0 7px 17px #b9e57a20}
.v4-studio .play-button:hover{background:#d2f4a3}
.v4-studio .transport-plain,.v4-studio .checkbox-small,.v4-studio .volume-wrap{color:#a9b5b7}
.v4-studio .transport-bpm b,.v4-studio .transport-position b{color:#f1f3ed}
.v4-studio .transport-bpm small,.v4-studio .transport-position small{color:#8c9ba1}
.v4-studio .transport-sep{background:#3e4a50}
.v4-studio .checkbox-small input,.v4-studio .volume-wrap input{accent-color:#b9e57a}
.v4-studio .tracks{border-color:#39474b}
.v4-studio .track-tab{color:#9ba8ab}
.v4-studio .track-tab:hover{color:#e6f1e4}
.v4-studio .track-tab.active{color:#d7f4bd;border-color:#b9e57a}
.v4-studio .melody-dot{background:#b9e57a}.v4-studio .chords-dot{background:#bb9bdf}.v4-studio .bass-dot{background:#e9b88a}
.v4-studio .count-bubble{background:#304038;color:#a6ce91}
.v4-studio .track-mode,.v4-studio .toolbar-label,.v4-studio .step-size-label{color:#8f9fa1}
.v4-studio .track-mode-line{background:#52645a}
.v4-studio .tool-toggle,.v4-studio .tool-plain{color:#afb8b5}
.v4-studio .tool-toggle.active{background:#34483c;border-color:#56735a;color:#d3efbc;border-radius:7px}
.v4-studio .tool-toggle:hover,.v4-studio .tool-plain:hover{color:#ecf5e7}
.v4-studio .tool-divider{background:#3c484b}
.v4-studio .roll-outer{background:#10171b;border:1px solid #47595c;border-radius:10px;box-shadow:0 9px 25px #0004}
.v4-studio .piano-scroll{scrollbar-color:#617b74 #182329}
.v4-studio .piano-keyboard{background:#182329}
.v4-studio .piano-key{background:#e1e6df;color:#41564b;border-bottom-color:#9ca89f}
.v4-studio .piano-key.black{background:#364447;color:#d6e0db;border-bottom-color:#223133}
.v4-studio .piano-footer{color:#8f9b9d}
.v4-studio .shortcut-badge{background:#2a353a;border-color:#43545b;color:#b8c9c4}
.v4-studio #noteInfo{color:#acbcab}
.v4-studio .harmony-card{background:#242c32;border:1px solid #394850;border-radius:11px}
.v4-studio .harmony-heading strong{color:#dae7dc}
.v4-studio .harmony-icon{color:#b9e57a}
.v4-studio #progressionName{color:#a4b1b2}
.v4-studio .chord-pill{background:#344138;border:1px solid #537158;color:#d7f2cf}
.v4-studio .drum-studio{background:#1c252b;border:1px solid #3b494f;border-radius:13px;padding:27px 25px}
.v4-studio .mini-overline{color:#b9e57a}
.v4-studio .drum-head h3{color:#eef3eb}
.v4-studio .drum-head h3 em{color:#b9e57a}
.v4-studio .drum-head p{color:#9aa9ac}
.v4-studio .drum-enable{color:#c0ccc7}
.v4-studio .drum-enable input{accent-color:#b9e57a}
.v4-studio .drum-regenerate{background:#b9e57a;color:#162018;border:1px solid #b9e57a;border-radius:8px}
.v4-studio .drum-regenerate:hover{background:#ccefa1}
.v4-studio .bar-tab{background:#29363a;border:1px solid #46575a;color:#bfcdca}
.v4-studio .bar-tab.active{background:#b9e57a;color:#152018;border-color:#b9e57a}
.v4-studio .drum-surface{background:#141d22;border:1px solid #35464a;border-radius:10px}
.v4-studio .drum-grid-heading{color:#8f9fa2;border-bottom-color:#344349}
.v4-studio .drum-lane{background:transparent;border-color:#2b3b40}
.v4-studio .drum-lane-name strong{color:#ebf0e9}
.v4-studio .drum-lane-name small{color:#889aa1}
.v4-studio .drum-audition{background:#2e413c;color:#ccf6a7;border:1px solid #53725d}
.v4-studio .drum-audition:hover{background:#b9e57a;color:#122117}
.v4-studio .drum-select{background:#263238;color:#e0e9e2;border:1px solid #42535a;border-radius:7px}
.v4-studio .drum-select option{background:#263238;color:#e0e9e2}
.v4-studio .drum-upload{background:#27363a;color:#c3d7ca;border:1px solid #485b55;border-radius:7px}
.v4-studio .drum-upload:hover{background:#3c5145;color:#e3f2d8}
.v4-studio .drum-step{background:#2d393e;border-color:#415158}
.v4-studio .drum-step:nth-child(4n+1){background:#38474b}
.v4-studio .drum-step:hover{border-color:#b9e57a}
.v4-studio .drum-step.hit{background:#b9e57a;border-color:#b9e57a}
.v4-studio .drum-step.accent{background:#e8b68d;border-color:#e8b68d}
.v4-studio .drum-mute{background:#2b373b;color:#a5b5b7;border:1px solid #435057}
.v4-studio .drum-mute.muted{background:#643c3d;color:#f0c6c0}
.v4-studio .drum-bottom{color:#9caaae}
.v4-studio .drum-bottom b{color:#dce6dd}
.v4-studio .export-panel{background:linear-gradient(105deg,#303f37,#293c30);border:1px solid #627e59;border-radius:12px}
.v4-studio .export-icon{background:#b9e57a;color:#162018}
.v4-studio .export-panel-copy strong{color:#f0f4ec}
.v4-studio .export-panel-copy div span{color:#bbcebc}
.v4-studio .export-actions{gap:8px}
.v4-studio .export-button{background:#b9e57a;color:#142018;border:1px solid #b9e57a;border-radius:8px}
.v4-studio .export-button.export-midi{background:#162218;color:#e7f3de;border-color:#607c60}
.v4-studio .export-button:hover{background:#d6f7b0;color:#132017;border-color:#d6f7b0}
.v4-studio .export-button>span{color:inherit;opacity:.62}
.v4-studio .export-note{color:#8e9da0}
.v4-studio .end-cta{background:#182227;border:1px solid #33453d;border-radius:16px;margin:58px 0 75px;padding:42px 45px}
.v4-studio .end-cta h2{color:#edf2eb}
.v4-studio .end-cta h2 em{color:#b9e57a}
.v4-studio .end-cta a{background:#b9e57a;color:#152018;border-radius:8px}
.v4-studio .end-cta a:hover{background:#d1f3a6}
.v4-studio .site-footer{border-color:#2f373c;color:#8b9a9f}
.v4-studio .footer-brand{color:#e5eee7}
.v4-studio .site-footer>span{color:#819197}
.v4-studio .site-footer>a:last-child{color:#b9e57a}
.v4-studio .modal-backdrop{background:#040708c9}
.v4-studio .modal{background:#20282e;color:#e6eee8;border:1px solid #4b595b}
.v4-studio .modal-eyebrow{color:#b9e57a}
.v4-studio .modal-desc,.v4-studio .saved-row small{color:#a1afb0}
.v4-studio .modal-header h2{color:#f2f4ee}
.v4-studio .saved-row{background:#2a343a;border:1px solid #43525a;color:#e8eee9}
.v4-studio .toast{background:#2b3935;color:#edf5ea;border:1px solid #759365}
@media(max-width:970px){body.v4-studio .app{padding:0 25px}.v4-studio .studio-layout{grid-template-columns:1fr}.v4-studio .control-panel{border-right:0;border-bottom:1px solid #34434b}.v4-studio .studio-intro{padding-top:48px}}
@media(max-width:640px){
 body.v4-studio .app{padding:0 17px}.v4-studio .site-header{height:75px}.v4-studio .site-brand{font-size:20px}.v4-studio .site-action{padding:11px 13px;font-size:10px}
 .v4-studio .studio-intro{min-height:auto;padding:43px 5px 30px}.v4-studio .studio-intro h1{font-size:clamp(38px,9.8vw,56px)}.v4-studio .studio-intro p{font-size:13px}
 .v4-studio .window-topbar{padding:0 12px}.v4-studio .control-panel{padding:20px 15px}.v4-studio .workspace{padding-bottom:15px}.v4-studio .project-head{padding:19px 14px 14px}.v4-studio .project-title-block input{font-size:21px}
 .v4-studio .transport,.v4-studio .tracks,.v4-studio .roll-outer,.v4-studio .harmony-card,.v4-studio .export-panel,.v4-studio .drum-studio{margin-left:10px;margin-right:10px}
 .v4-studio .drum-studio{padding:19px 12px}.v4-studio .export-panel{padding:18px 13px}.v4-studio .end-cta{padding:29px 21px;margin:40px 0}
}
@media(prefers-reduced-motion:reduce){.v4-studio *{animation-duration:.01ms!important;transition-duration:.01ms!important}}