/* MIDILAB Studio 4 — quiet editorial shell and tactile music workspace. */
:root{color-scheme:light;--bg:#f5f3ed;--surface:#fffdfa;--surface2:#edf1ea;--line:#e1e4dc;--muted:#758175;--purple:#719d87;--violet:#9cbaa6;--mint:#819d88;--white:#243a2c;--sans:Inter,'Avenir Next','Segoe UI',system-ui,sans-serif;--display:var(--sans)}
body.v4-studio{background:#f5f3ed;color:#24372d;font-family:var(--sans);font-size:14px;overflow-x:hidden}body.v4-studio .app{max-width:1500px;padding:0 40px}body.v4-studio *:focus-visible{outline:2px solid #a97856;outline-offset:3px}.v4-studio a{text-decoration:none}.v4-studio .site-header{height:85px;display:flex;align-items:center;gap:32px;justify-content:space-between;border-bottom:1px solid #dddfd5;position:relative;z-index:5}.v4-studio .site-brand{display:inline-flex;align-items:center;gap:9px;font-size:23px;font-weight:850;letter-spacing:-1.5px}.v4-studio .brand-symbol{width:36px;height:36px;display:grid;place-items:center;background:#273d31;color:#f4f1e9;border-radius:50%;font:italic 27px Georgia,serif;letter-spacing:-3px;padding-right:5px}.v4-studio .brand-symbol span{color:#dfb8a1}.v4-studio .brand-period{color:#88a98b}.v4-studio .site-links{display:flex;align-items:center;gap:33px;color:#7f877d;font-weight:700;font-size:12px}.v4-studio .site-links .current,.v4-studio .site-links a:hover{color:#263d31}.v4-studio .site-links .current{border-bottom:2px solid #668d71;padding-bottom:8px;margin-bottom:-8px}.v4-studio .site-action{background:#293f33;color:#f6f4ed;padding:13px 20px;border-radius:100px;display:flex;align-items:center;gap:21px;font-size:12px;font-weight:800;transition:transform .2s,background .2s}.v4-studio .site-action:hover{transform:translateY(-2px);background:#47614d}.v4-studio .site-action span{font-size:16px}
.v4-studio .studio-intro{padding:63px 12px 44px;display:flex;align-items:center;justify-content:space-between;gap:35px}.v4-studio .pretitle{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.145em;color:#779180}.v4-studio .pretitle i{display:inline-block;background:#c38f73;width:6px;height:6px;border-radius:50%}.v4-studio .studio-intro h1{font-size:clamp(41px,4.8vw,72px);line-height:1.06;letter-spacing:-.075em;font-weight:750;margin:20px 0}.v4-studio .studio-intro h1 em{font:italic 400 1.02em Georgia,serif;color:#70977c;letter-spacing:-.055em}.v4-studio .studio-intro p{color:#839084;max-width:575px;font-size:14px;line-height:1.8;margin:0}.v4-studio .studio-intro-art{width:290px;min-width:240px;height:180px;background:#d6e0d2;border-radius:14px;position:relative;transform:rotate(-3deg);overflow:hidden;padding:16px 19px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:8px 10px 0 #e8dfd1}.v4-studio .studio-intro-art>span,.v4-studio .studio-intro-art small{font-size:10px;color:#627966;font-weight:800;letter-spacing:.14em}.v4-studio .studio-intro-art>b{position:absolute;right:17px;bottom:6px;font-size:55px;font-family:Georgia,serif;font-weight:400;color:#d2a78f;transform:rotate(12deg)}.v4-studio .art-notes{height:80px;display:flex;align-items:center;gap:12px}.v4-studio .art-notes i{height:9px;width:33px;border-radius:100px;background:#759984;transform:rotate(-21deg)}.v4-studio .art-notes i:nth-child(2){margin-top:-30px}.v4-studio .art-notes i:nth-child(3){margin-top:20px}.v4-studio .art-notes i:nth-child(4){margin-top:-16px}.v4-studio .art-notes i:nth-child(5){margin-top:3px}.v4-studio .art-notes i:nth-child(6){margin-top:-28px}
.v4-studio .studio-section{margin-top:0;padding:0 0 54px}.v4-studio .studio-window{border:1px solid #d8ded4;border-radius:20px;background:#fdfcf8;box-shadow:0 26px 65px #30433212,0 3px 7px #334c3110;overflow:hidden}.v4-studio .window-topbar{background:#f5f5ee;border-bottom:1px solid #e0e4da;height:55px;padding:0 22px}.v4-studio .window-title{color:#5a6c5e;font-size:11px;font-weight:750}.v4-studio .window-version{border:0;background:#e4eadf;color:#56715d;border-radius:50px;padding:4px 9px}.v4-studio .mac-dots i{width:7px;height:7px;background:#d4baaa}.v4-studio .mac-dots i:nth-child(2){background:#d4cba6}.v4-studio .mac-dots i:nth-child(3){background:#9fbea6}.v4-studio .saved-indicator{color:#879589;font-size:10px}.v4-studio .icon-button{color:#718675;border:1px solid #d8e0d5;border-radius:50%;width:26px;height:26px;background:#fff}
.v4-studio .studio-layout{grid-template-columns:280px minmax(0,1fr)}.v4-studio .control-panel{padding:27px 24px 30px;background:#f5f5ef;border-right:1px solid #e4e6dd;display:block}.v4-studio .panel-title{margin-bottom:28px}.v4-studio .panel-title-icon{width:41px;height:41px;background:#dce7da;border:0;border-radius:13px;color:#537d60;font-size:23px}.v4-studio .panel-title h2{font-size:20px;color:#2a4031;letter-spacing:-.06em}.v4-studio .panel-title span:not(.panel-title-icon){color:#8d9b8f;font-size:11px}.v4-studio .panel-group{border-color:#e1e4da;padding:0 0 20px;margin:0 0 18px}.v4-studio .panel-group.mood-group{background:#e8ede5;margin:0 -10px 20px;padding:14px 10px 16px;border:0;border-radius:10px}.v4-studio .field-title{color:#808d80;font-size:10px;letter-spacing:.085em;font-weight:800}.v4-studio .genre-grid{gap:7px}.v4-studio .genre{background:#fdfcf7;color:#748176;border-color:#dfe3d8;border-radius:9px;padding:11px 3px;font-size:11px;font-weight:700;box-shadow:none}.v4-studio .genre.active{background:#2f4c3b;color:#f8f5ed;border-color:#2f4c3b;box-shadow:0 6px 14px #273d3220}.v4-studio .genre:hover{border-color:#5e8b6c}.v4-studio .form-select,.v4-studio .tiny-select{background-color:#fffefa;color:#38503d;border:1px solid #dce2d6;border-radius:9px;min-height:43px;box-shadow:none;font-weight:650}.v4-studio .form-select:focus{border-color:#8dac8f}.v4-studio .range-value{color:#405947;font-weight:800}.v4-studio .range-value small,.v4-studio .range-limits{color:#98a497}.v4-studio .custom-range{background:#d6e0d3}.v4-studio .custom-range::-webkit-slider-thumb{background:#93b49c;border:3px solid #fff;box-shadow:0 0 0 1px #89a98f}.v4-studio .switch-name{color:#3d5142;font-size:12px}.v4-studio .switch-desc,.v4-studio .register-hint{color:#a1aa9d;font-size:10px}.v4-studio .switch-ui{background:#cdd5cc}.v4-studio .switch-row input:checked+.switch-ui{background:#85a98a}.v4-studio .switch-row input:checked+.switch-ui:before{background:white}.v4-studio .switches{border:0}.v4-studio .generate-button{background:#273f31;color:#f8f6ef;height:52px;border:0;border-radius:12px;font-size:12px;box-shadow:none;transition:transform .2s,background .2s}.v4-studio .generate-button:hover{background:#41634b;transform:translateY(-2px)}.v4-studio .generate-arrow{color:#d5ead7}.v4-studio .random-preset{font-size:11px;color:#788978}
.v4-studio .workspace{background:#fffefa;padding-bottom:15px}.v4-studio .project-head{padding:24px 26px 17px}.v4-studio .project-eyebrow{color:#9ca79b;font-size:10px}.v4-studio .project-eyebrow span:last-child{color:#7a9e84}.v4-studio .project-title-block input{color:#2e4233;font-weight:800;letter-spacing:-.045em;font-size:25px}.v4-studio .project-subline{color:#9aa69c;font-size:11px}.v4-studio .light-button{border-radius:8px;background:#f5f7f1;border:1px solid #e2e7df;color:#708173;font-size:11px;font-weight:750}.v4-studio .light-button:hover{background:#e6eee4;color:#2b4934}.v4-studio .transport{background:#f1f5ee;border:1px solid #e0e8df;border-radius:14px;margin-bottom:8px;padding:10px 15px}.v4-studio .play-button{background:#2d4937;color:#f6f4eb;box-shadow:0 7px 17px #2b4f3926;width:45px;height:45px}.v4-studio .play-button:hover{background:#456d4f}.v4-studio .transport-plain,.v4-studio .checkbox-small,.v4-studio .volume-wrap{color:#809283}.v4-studio .transport-bpm b,.v4-studio .transport-position b{color:#405948;font-size:16px}.v4-studio .transport-bpm small,.v4-studio .transport-position small{color:#a4b1a2}.v4-studio .transport-sep{background:#dfe7dd}.v4-studio .checkbox-small input,.v4-studio .volume-wrap input{accent-color:#729b7b}.v4-studio .tracks{border-color:#dfe6db;margin-top:20px}.v4-studio .track-tab{color:#89988b;font-size:12px}.v4-studio .track-tab:hover{color:#3c5d45}.v4-studio .track-tab.active{color:#3b5c42;border-color:#659b7a}.v4-studio .melody-dot{background:#83b5a2}.v4-studio .chords-dot{background:#bb9ac6}.v4-studio .bass-dot{background:#d9ad80}.v4-studio .count-bubble{background:#eaf0e8;color:#819986}.v4-studio .track-mode,.v4-studio .toolbar-label,.v4-studio .step-size-label{color:#a5b0a4}.v4-studio .track-mode-line{background:#c7d6cb}.v4-studio .tool-toggle,.v4-studio .tool-plain{color:#829083}.v4-studio .tool-toggle.active{color:#335d42;background:#e1ebdf;border-color:#c4d7c5;border-radius:9px}.v4-studio .tool-divider{background:#dfe7de}.v4-studio .roll-outer{background:#222f2a;border:1px solid #405449;border-radius:13px;box-shadow:0 8px 24px #2c443c1a}.v4-studio .piano-scroll{scrollbar-color:#718d78 #24352b;height:430px}.v4-studio .piano-keyboard{background:#26382d}.v4-studio .piano-key{background:#eff3e8;color:#667b69}.v4-studio .piano-key.black{background:#415248;color:#c5d6c5}.v4-studio .piano-footer{color:#8d9c8e}.v4-studio .shortcut-badge{color:#718c77;background:#eaf0e8;border-color:#dfe8de}.v4-studio #noteInfo{color:#5c8967;font-weight:700}.v4-studio .harmony-card{background:#f2f6ef;border:1px solid #dfe7dd;border-radius:12px}.v4-studio .harmony-heading strong{color:#829585}.v4-studio .harmony-icon{color:#81a685}.v4-studio #progressionName{color:#8ea38d}.v4-studio .chord-pill{background:#fff;color:#526d57;border:1px solid #dfe9df;border-radius:50px;padding:7px 11px}.v4-studio .drum-studio{background:#f6f8f3;border:1px solid #e2e8df;box-shadow:none;border-radius:14px;padding:24px}.v4-studio .mini-overline{color:#85a48d}.v4-studio .drum-head h3{color:#2f4939;font-size:26px}.v4-studio .drum-head h3 em{color:#a9b6a4}.v4-studio .drum-head p{color:#96a297}.v4-studio .drum-regenerate{background:#2d4939;border-radius:50px;padding:10px 16px}.v4-studio .drum-regenerate:hover{background:#426a4d}.v4-studio .drum-enable{color:#6c8672}.v4-studio .bar-tab.active{color:#356447;background:#e3eee1;border-color:#86aa8a}.v4-studio .drum-surface{border:1px solid #e7ebe2;background:#fff}.v4-studio .drum-lane{border-color:#eff1eb}.v4-studio .drum-lane-name strong{color:#455e4a}.v4-studio .drum-audition{background:#e7efe5;color:#598068}.v4-studio .drum-upload{background:#f0e7dc;color:#997765;border-color:#e6d6c6}.v4-studio .drum-select{color:#617c66;border-color:#e1e9de}.v4-studio .export-panel{background:#2d4638;border:1px solid #2d4638;border-radius:14px;margin-top:10px;margin-bottom:12px;padding:18px 20px}.v4-studio .export-icon{background:#e5ecdd!important;color:#36543b!important}.v4-studio .export-panel-copy strong{color:#f4f6eb}.v4-studio .export-panel-copy div span{color:#b4cbb7}.v4-studio .export-actions{display:flex;gap:7px;flex-wrap:wrap}.v4-studio .export-button{border:1px solid #b8cfb9;background:#eaf3e6;color:#304c38;border-radius:9px;font-weight:750;transition:transform .2s}.v4-studio .export-button:hover{background:white;transform:translateY(-2px)}.v4-studio .export-button>span{color:#8aa58a}.v4-studio .export-note{color:#9aa99b;font-size:10px;margin:-8px 26px 22px}
.v4-studio .end-cta{background:#dfebdc;border-radius:19px;padding:48px 55px;display:flex;align-items:center;justify-content:space-between;gap:25px;margin:10px 0 90px}.v4-studio .end-cta h2{font-size:clamp(28px,3.2vw,45px);letter-spacing:-.06em;line-height:1.16;margin:13px 0 0}.v4-studio .end-cta h2 em{font:italic 400 1.03em Georgia,serif;color:#729779}.v4-studio .end-cta a{display:flex;align-items:center;gap:30px;background:#294334;border-radius:50px;padding:15px 20px;color:white;white-space:nowrap;font-size:12px;font-weight:800}.v4-studio .end-cta a span{font-size:16px}.v4-studio .site-footer{height:106px;border-top:1px solid #dde3d9;display:flex;align-items:center;justify-content:space-between;gap:20px}.v4-studio .footer-brand{font-size:24px;font-weight:850;letter-spacing:-1.5px}.v4-studio .site-footer>span{font-size:11px;color:#9ba79d}.v4-studio .site-footer>a:last-child{font-size:12px;color:#67836b;font-weight:750}
.v4-studio .modal-backdrop{background:#111e16bb}.v4-studio .modal{background:#f9faf5;color:#2e4434;border-color:#d8e2d6}.v4-studio .modal-desc,.v4-studio .modal-eyebrow{color:#7c927f}.v4-studio .modal-header h2{color:#2f4434}.v4-studio .saved-row{background:#fff;border-color:#e2e7df}.v4-studio .saved-row small{color:#869c88}.v4-studio .toast{background:#2d4535;color:#eef5eb;border:1px solid #60886a;box-shadow:0 10px 40px #273d342a}
@media(max-width:1200px){body.v4-studio .app{padding:0 25px}.v4-studio .studio-layout{grid-template-columns:260px minmax(0,1fr)}.v4-studio .control-panel{padding:22px 18px}.v4-studio .drum-studio{padding:16px}}
@media(max-width:980px){.v4-studio .site-links{display:none}.v4-studio .studio-layout{display:block}.v4-studio .control-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 20px;padding:26px;border-right:0;border-bottom:1px solid #e2e6dd}.v4-studio .panel-title{grid-column:1/-1;margin-bottom:3px}.v4-studio .panel-group{margin:0;padding-bottom:14px}.v4-studio .panel-group.mood-group{margin:0;padding:13px}.v4-studio .generator-bottom{align-self:center}.v4-studio .studio-intro-art{display:none}}
@media(max-width:720px){body.v4-studio .app{padding:0 14px}.v4-studio .site-header{height:70px}.v4-studio .site-brand{font-size:21px}.v4-studio .brand-symbol{width:32px;height:32px;font-size:24px}.v4-studio .site-action{font-size:10px;padding:11px 12px;gap:8px}.v4-studio .studio-intro{padding:43px 7px 30px}.v4-studio .studio-intro h1{font-size:clamp(36px,9vw,55px);margin:13px 0}.v4-studio .studio-intro p{font-size:12px}.v4-studio .studio-window{border-radius:14px}.v4-studio .window-topbar{padding:0 13px}.v4-studio .control-panel{grid-template-columns:1fr 1fr;padding:18px;gap:13px}.v4-studio .panel-title{grid-column:1/-1}.v4-studio .panel-group:first-of-type{grid-column:1/-1}.v4-studio .panel-group.mood-group{margin:0}.v4-studio .switches,.v4-studio .generator-bottom{grid-column:1/-1}.v4-studio .project-head{padding:17px 13px}.v4-studio .project-title-block input{font-size:19px}.v4-studio .transport,.v4-studio .tracks,.v4-studio .roll-outer,.v4-studio .harmony-card,.v4-studio .export-panel,.v4-studio .drum-studio{margin-left:11px;margin-right:11px}.v4-studio .drum-studio{padding:12px}.v4-studio .export-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}.v4-studio .export-button{min-width:0;white-space:nowrap;padding:10px 5px;font-size:10px}.v4-studio .export-button span{display:none}.v4-studio .end-cta{padding:30px 24px;display:block;margin-bottom:45px}.v4-studio .end-cta a{margin-top:22px;max-width:max-content}.v4-studio .site-footer{flex-wrap:wrap;gap:10px;padding:18px 7px;min-height:100px}.v4-studio .site-footer>span{order:3;flex-basis:100%}}
@media(max-width:430px){.v4-studio .control-panel{grid-template-columns:1fr}.v4-studio .panel-title,.v4-studio .panel-group:first-of-type,.v4-studio .switches,.v4-studio .generator-bottom{grid-column:1/-1}.v4-studio .panel-group.mood-group{margin:0}.v4-studio .window-version{display:none}.v4-studio .transport-position{display:none}.v4-studio .track-tab{font-size:10px}.v4-studio .studio-intro h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){.v4-studio *{animation:none!important;transition:none!important}}