:root{color-scheme:dark;--bg:#101115;--panel:#1b1d24;--line:#353641;--text:#f3f0ed;--muted:#999ca9;--accent:#fbbb64}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,sans-serif}header{padding:22px 4%;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:27px;font-weight:900;letter-spacing:3px}.brand span{font-size:10px;letter-spacing:2px;color:var(--muted);margin-left:24px}main{max-width:1500px;margin:auto;padding:35px 4%}.intro{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent)}h1{font-size:clamp(32px,4vw,54px);margin:8px 0}p{color:var(--muted);line-height:1.6}.badge{padding:20px;border-left:2px solid var(--accent);letter-spacing:2px}.badge small{display:block;font-size:10px;color:var(--muted);letter-spacing:0;margin-top:8px}button{background:#292b35;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:10px 14px;cursor:pointer}button:hover,button.active{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.4;cursor:wait}.primary{background:var(--accent);color:#19140d;font-weight:700}.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 10px;padding:16px;background:var(--panel);border-radius:12px}#seek{flex:1;min-width:150px}.transport label{display:flex;align-items:center;gap:8px}.transport label input{width:85px}input[type=range]{accent-color:var(--accent);cursor:pointer}.console{display:grid;grid-template-columns:repeat(8,minmax(120px,1fr));gap:10px;overflow-x:auto;padding-bottom:12px}.channel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 12px;border-top:3px solid var(--color)}.channel.selected{outline:1px solid var(--accent)}.channel h3{font-size:14px;margin:0 0 5px}.channel .duration{font-size:10px;color:var(--muted)}.channel .select{width:100%;text-align:left;border:0;padding:0;background:none}.faderArea{display:flex;height:185px;gap:16px;justify-content:center;margin:15px 0}.fader{writing-mode:vertical-lr;direction:rtl;width:24px;height:175px}.meter{height:175px;width:7px;background:#111;border-radius:5px;display:flex;align-items:flex-end;overflow:hidden}.meter i{width:100%;height:0;background:linear-gradient(#e9a565,#82d9b0);transition:height .08s}.readout{font-size:16px;text-align:center;font-variant-numeric:tabular-nums}.pan{width:100%;margin-top:15px}.panLabel{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.buttons{display:flex;gap:5px;margin:15px 0}.buttons button{flex:1;padding:7px}.file{display:block;font-size:10px;color:var(--muted);cursor:pointer;text-align:center}.file input{display:none}.workflow{display:grid;grid-template-columns:1fr 2fr;gap:35px;background:var(--panel);border:1px solid var(--line);padding:28px;border-radius:12px;margin-top:24px}h2{font-size:26px}.editor{min-width:0}.editHead{display:flex;justify-content:space-between;align-items:center}.control{display:grid;grid-template-columns:110px 1fr 85px;gap:14px;align-items:center;margin:15px 0}.control input{width:100%}.control output{text-align:right;font-variant-numeric:tabular-nums;color:var(--accent)}canvas{width:100%;height:190px;background:#121318;border-radius:8px;margin-top:12px}.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}footer{padding:20px 0;font-size:11px}footer button{margin-right:10px}#status{font-size:12px;min-height:20px}@media(max-width:750px){.intro{display:block}.badge{margin-top:20px}.brand span{display:block;margin:4px 0}.workflow{grid-template-columns:1fr;padding:20px;gap:12px}.console{grid-template-columns:repeat(8,135px)}.control{grid-template-columns:85px 1fr 65px;gap:8px}.transport{gap:8px}#steps{display:flex;gap:5px}#steps button{flex:1}}
:root{--accent:#4df692}.timeline{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#131519}.ruler{display:grid;grid-template-columns:290px 1fr;min-width:850px;height:36px;background:#202329;font-size:10px;color:var(--muted);align-items:center}.ruler strong{padding-left:18px;letter-spacing:1px}#ruler{display:flex;justify-content:space-between;padding:0 8px}.channel{display:grid;grid-template-columns:290px 1fr;min-width:850px;padding:0;border:none;border-bottom:1px solid #36383e;border-radius:0;border-left:3px solid var(--color);background:#25282e}.channel.selected{outline:none;background:#34383e}.trackInfo{padding:13px 15px;display:grid;grid-template-columns:1fr auto;gap:8px}.trackInfo .select{font-size:14px;font-weight:650}.trackInfo .controls{display:flex;align-items:center;gap:8px;grid-column:1/-1}.trackInfo .controls button{padding:5px 8px;font-size:11px}.trackInfo .controls input{width:95px}.trackInfo .readout{font-size:11px;min-width:46px}.trackInfo .pan{margin:0;width:95px}.trackInfo .file{font-size:10px}.clipLane{position:relative;padding:8px;background:repeating-linear-gradient(90deg,#121518 0,#121518 calc(12.5% - 1px),#2a2d32 12.5%);min-width:550px}.clip{height:95px;background:color-mix(in srgb,var(--color) 22%,#101517);border:1px solid var(--color);border-radius:8px;position:relative;overflow:hidden;min-width:2px;cursor:pointer}.clip span{position:absolute;top:7px;left:10px;font-size:10px;color:var(--color);z-index:1}.clip canvas{height:70px;margin:21px 0 0;background:none;display:block;width:100%}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none;left:0;z-index:2}.meter{height:5px;width:100%;display:block;grid-column:1/-1}.meter i{display:block;height:100%;width:0;transition:width .1s}.faderArea{display:none}.console{display:block}.badge{border-color:#4df692}.transport{position:sticky;top:0;z-index:5;box-shadow:0 7px 20px #0005}#clock{font-family:monospace;font-size:17px;color:#4df692}#steps button.active{background:#15452a}@media(max-width:750px){.ruler,.channel{grid-template-columns:230px 1fr;min-width:780px}.trackInfo{padding:12px 8px}.trackInfo .controls input{width:75px}.trackInfo .pan{width:75px}}
:root{--accent:#4df692}.timeline{margin-top:20px}.stemExport{font-size:10px;padding:4px 7px}.trackInfo{grid-template-columns:1fr auto}.clipLane{padding:8px}dialog{max-width:530px;width:90%;background:#202329;color:#eee;border:1px solid #4df692;border-radius:15px;padding:25px}dialog::backdrop{background:#000b}dialog label{display:grid;grid-template-columns:180px 1fr;gap:10px;margin:15px 0}dialog input,dialog select{min-width:0;padding:10px;background:#121418;border:1px solid #41464e;border-radius:6px;color:white}dialog button{margin:6px 3px}
.channel{padding:0;border:none;border-bottom:1px solid #36383e;border-left:3px solid var(--color);border-radius:0;display:grid;grid-template-columns:290px 1fr}.clip canvas{height:70px;margin:21px 0 0;background:none}#channels{display:block}.meter{height:5px;display:block}.meter i{height:100%;width:0}.channel.selected{outline:none;background:#34383e}@media(max-width:750px){.channel{grid-template-columns:230px 1fr}}
.visualEQ{margin-top:24px;padding:24px;border:1px solid #324557;border-radius:14px;background:linear-gradient(135deg,#101b28,#0c1721)}.visualEQ h2{margin:4px 0 16px;font-size:22px}.visualEQ .editHead{gap:15px;flex-wrap:wrap}.bandTabs{display:flex;justify-content:space-around;margin:15px 0}.bandTabs button[data-band=bass]{color:#ffad26}.bandTabs button[data-band=mid]{color:#63ff7b}.bandTabs button[data-band=treble]{color:#c48cff}#spectrum{height:350px;background:#142536;touch-action:none;cursor:crosshair;border:1px solid #334759}.graphHint{font-size:11px}#bandControls{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}#bandControls label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#aeb8c5}#bandControls input[type=number]{width:100%;background:#0b1825;border:1px solid #405567;border-radius:5px;padding:8px;color:#fff}#bandControls input[type=range]{width:100%}#bandReadout{font-size:12px;color:#d4e3ef}@media(max-width:750px){.visualEQ{padding:15px}#spectrum{height:270px}#bandControls{grid-template-columns:1fr 1fr;gap:12px}}
.pianoRoll{margin-top:24px;background:#191e24;border:1px solid #3c454e;border-radius:12px;padding:22px}.pianoRoll h2{margin:6px 0 16px}.rollToolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.rollToolbar label{font-size:11px;display:flex;gap:6px;align-items:center}.rollToolbar input{width:60px}.rollToolbar input,.rollToolbar select,.noteEditor input[type=number]{padding:8px;border:1px solid #48535e;background:#10161c;color:#eee;border-radius:5px}.rollScroll{overflow:auto;max-height:445px;border:1px solid #3a464f;border-radius:8px}.rollLayout{display:flex;width:max-content;position:relative}#pianoKeys{position:sticky;left:0;z-index:4;width:75px;flex-shrink:0;background:#191d22;padding-top:30px}.pianoKey{display:block;height:22px;width:75px;background:#d4d9dc;color:#343a3e;border:none;border-bottom:1px solid #697278;border-radius:0;padding:0 8px;text-align:right;font-size:10px}.pianoKey.black{background:#232a31;color:#aeb8c0;width:61px}#rollGrid{position:relative;height:844px}#rollRuler{height:30px;position:sticky;top:0;background:#161d23;z-index:3}#rollRuler span{position:absolute;height:30px;font-size:11px;padding:6px;border-left:1px solid #637081;color:#a5b5c1}#noteLayer{position:absolute;top:30px;left:0;right:0;height:814px;touch-action:none;background:repeating-linear-gradient(0deg,#202a32 0,#202a32 21px,#35414d 22px)}.rollNote{position:absolute;height:19px;background:#35d479;border:1px solid #96ffbd;border-radius:4px;min-width:8px;color:#062713;font-size:9px;padding:2px 4px;white-space:nowrap;overflow:hidden;touch-action:none;cursor:grab}.rollNote.selected{outline:2px solid white;background:#73ffac}.rollNote .resize{position:absolute;right:0;top:0;bottom:0;width:10px;background:#ffffff35;cursor:ew-resize}#rollHead{position:absolute;top:0;bottom:0;width:2px;left:0;background:#fff;z-index:2;pointer-events:none}.noteEditor{display:flex;flex-wrap:wrap;gap:13px;align-items:center;margin-top:18px;font-size:11px}.noteEditor label{display:flex;align-items:center;gap:5px}.noteEditor input[type=number]{width:75px}.noteEditor input[type=range]{width:85px}#rollStatus{font-size:12px}@media(max-width:750px){.pianoRoll{padding:15px}.pianoRoll .editHead{flex-wrap:wrap}.pianoRoll .editHead button{margin:4px 0;font-size:12px}}
#noteLayer.locked{touch-action:pan-x pan-y;cursor:default}#noteLayer.locked .rollNote{cursor:default}#noteLayer.locked .resize{display:none}#rollLock{min-width:205px}#rollLock.active{color:#ffce78;border-color:#a9772c;background:#3b2b16}
.rollToolbar label.parameterSlider{display:flex;flex-direction:column;align-items:flex-start;padding:12px 14px;background:#10171e;border:1px solid #344450;border-radius:8px;gap:8px;min-width:190px}.rollToolbar .parameterSlider input[type=range]{width:185px}.parameterSlider span{display:flex;gap:10px;align-items:center}.parameterSlider output{color:#70f6a5;font-variant-numeric:tabular-nums}.parameterSlider input[type=range]:disabled{opacity:.35;cursor:not-allowed}
.virtualPiano{margin-top:24px;background:linear-gradient(120deg,#212831,#141a20);border:1px solid #43505b;border-radius:13px;padding:22px}.virtualPiano h2{margin:5px 0 15px}.virtualPiano .editHead{gap:15px;flex-wrap:wrap}.pianoToolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:15px 0}.pianoToolbar label{display:flex;gap:7px;align-items:center;font-size:12px}.pianoToolbar select{background:#12181e;border:1px solid #4b5864;border-radius:6px;color:white;padding:10px}.pianoToolbar input{width:100px}.keyboardScroll{overflow-x:auto;padding:0 0 12px}#virtualKeys{position:relative;width:1050px;height:235px;touch-action:none;user-select:none}.vkey{position:absolute;top:0;height:235px;width:70px;border:1px solid #62696e;border-radius:0 0 7px 7px;background:linear-gradient(#f9fbfc,#cbd0d5);color:#707a83;display:flex;align-items:flex-end;justify-content:center;padding:0 0 14px;box-shadow:inset 0 -5px #aeb6be;touch-action:none}.vkey.black{z-index:2;width:42px;height:150px;background:linear-gradient(90deg,#171b20,#38414b,#11151a);border:1px solid black;color:#b8c3cd;box-shadow:0 6px 6px #0008,inset 0 -6px #070b10}.vkey.pressed{background:linear-gradient(#91ffbb,#38c979);box-shadow:inset 0 -3px #1c8950;color:#133b24}.vkey.black.pressed{background:linear-gradient(#478863,#0b6740);color:white}.recording{background:#652127!important;color:#ffbfc4!important;border-color:#ff606b!important}#pianoStatus{font-size:12px}@media(max-width:750px){.virtualPiano{padding:15px}.pianoToolbar{gap:8px}.virtualPiano .editHead button{margin:4px 0;font-size:12px}}
.vocalRecorder{margin-top:24px;padding:25px;background:linear-gradient(115deg,#262029,#171b22);border:1px solid #674b64;border-radius:14px}.vocalRecorder h2{font-size:32px;margin:8px 0}.vocalRecorder .editHead{flex-wrap:wrap;gap:15px}.recordButton{background:#922736;border-color:#e67482;font-weight:700}.micDisplay{display:flex;align-items:center;gap:25px;margin:22px 0;padding:20px;background:#14161c;border-radius:10px}.micIcon{font-size:62px}.micDisplay>div{flex:1}#micMeter{height:14px;border-radius:9px;background:#303039;margin-bottom:14px;overflow:hidden}#micMeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5dde8c,#eecc65,#f57581);transition:width .07s}#micClock{font-size:28px;font-family:monospace}#micState{margin-left:20px;color:#b6a3b8}.vocalToolbar{display:flex;flex-wrap:wrap;gap:20px}.vocalToolbar label{display:flex;align-items:center;gap:7px;font-size:12px}.vocalToolbar input:not([type=checkbox]),.vocalToolbar select{padding:9px;background:#13151c;border:1px solid #514750;border-radius:6px;color:#eee}#vocalControls{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:20px 0}.vocalControl{padding:13px;background:#24232b;border-radius:8px;font-size:12px}.vocalControl label{display:flex;justify-content:space-between}.vocalControl input{width:100%;margin-top:13px}.vocalControl output{color:#fda6ce}.vocalActions{display:flex;gap:8px;flex-wrap:wrap}#micStatus{font-size:12px}@media(max-width:750px){.vocalRecorder{padding:15px}#vocalControls{grid-template-columns:1fr 1fr}}
.stringStudio{margin-top:24px;padding:24px;background:linear-gradient(120deg,#28201c,#15191e);border:1px solid #78523b;border-radius:14px}.stringStudio h2{margin:6px 0;font-size:32px}.stringStudio .editHead{gap:15px;flex-wrap:wrap}.stringToolbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:18px 0}.stringToolbar label{display:flex;align-items:center;gap:6px;font-size:12px}.stringToolbar select{padding:10px;background:#1a1715;color:#eee;border:1px solid #70573f;border-radius:6px}.stringToolbar input{width:95px}.stringChords{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.stringChords button{min-width:70px;background:#37291f;border-color:#876345;color:#f6ce8f}.fretScroll{overflow:auto;border-radius:8px;border:1px solid #856447}#fretboard{min-width:1000px;background:repeating-linear-gradient(0deg,#573820 0,#573820 3px,#4a2f1c 5px,#54341d 9px);padding:12px}.fretLabels,.stringRow{display:grid;grid-template-columns:65px repeat(13,70px)}.fretLabels span{font-size:10px;text-align:center;color:#bca07a;padding:8px}.stringRow{height:53px;position:relative;align-items:center}.stringRow:before{content:'';position:absolute;left:65px;right:10px;top:26px;height:var(--thickness,2px);background:linear-gradient(#ecdec6,#746f61);pointer-events:none;box-shadow:0 2px 2px #0008}.stringLabel{font-size:11px;color:#ebd5b6;padding-left:8px}.fretNote{height:53px;background:none;border:0;border-right:2px solid #a1a7a7;border-radius:0;padding:0;color:#dac4a3;z-index:1;touch-action:none;position:relative;font-size:10px}.fretNote span{background:#352b2280;border-radius:15px;padding:5px}.fretNote:disabled{opacity:.45;cursor:default}.fretNote:hover,.fretNote.pressed{background:#3ec67540;color:#d9ffdf;border-color:#9ef7bf}.fretNote.pressed:after{content:'';position:absolute;top:18px;left:27px;width:15px;height:15px;border-radius:50%;background:#75ffa9;box-shadow:0 0 15px #75ffa9}#stringStatus{font-size:12px}@media(max-width:750px){.stringStudio{padding:15px}}
.drumStudio{margin-top:24px;padding:23px;background:linear-gradient(110deg,#211a2b,#151b22);border:1px solid #644d85;border-radius:14px}.drumStudio h2{font-size:28px;margin:6px 0 15px}.drumStudio .editHead{gap:15px;flex-wrap:wrap}.drumToolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:16px 0}.drumToolbar label{display:flex;gap:7px;align-items:center;font-size:12px}.drumToolbar select{padding:8px;background:#111720;color:#eee;border:1px solid #495867;border-radius:5px}.drumToolbar input[type=range]{width:100px}#drumPads{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin:20px 0}.drumPad{padding:22px 8px;background:color-mix(in srgb,var(--drumColor) 18%,#1a1c25);border:2px solid var(--drumColor);border-radius:12px;color:var(--drumColor);touch-action:manipulation;font-size:13px;font-weight:700}.drumPad small{display:block;font-size:9px;margin-top:8px;opacity:.7}.drumPad.hit{background:var(--drumColor);color:#0b1016;box-shadow:0 0 20px color-mix(in srgb,var(--drumColor) 60%,transparent)}.drumGridScroll{overflow:auto;border:1px solid #3e3a4b;border-radius:8px;padding:12px;background:#10141a}.drumRow{display:flex;gap:4px;margin-bottom:7px;align-items:center;width:max-content}.drumRow strong{position:sticky;left:0;background:#10141a;z-index:1;width:105px;flex-shrink:0;font-size:11px;color:var(--drumColor);padding:12px 5px}.drumStep{width:30px;height:35px;flex-shrink:0;border-radius:4px;padding:0;background:color-mix(in srgb,var(--drumColor) 12%,#121720);border:1px solid #353746;font-size:9px;color:#d8dce4}.drumStep.beat{margin-left:5px;border-left:2px solid #748292}.drumStep.on{background:color-mix(in srgb,var(--drumColor) 70%,#131620);border-color:var(--drumColor);color:#111}.drumStep.playing{outline:2px solid white}.drumNumbers{display:flex;gap:4px;width:max-content;margin-left:105px}.drumNumbers span{width:30px;flex-shrink:0;font-size:9px;text-align:center;padding:7px 0;color:#8899aa}.drumNumbers span.beat{margin-left:5px}#drumStatus{font-size:12px}@media(max-width:750px){.drumStudio{padding:15px}#drumPads{grid-template-columns:repeat(4,1fr)}}
.backingOption{display:flex;align-items:center;gap:9px;margin:12px 0;font-size:12px;color:#b7c7b9}.takePlaying{border-color:#7af0ae!important;color:#7af0ae!important}