:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color-scheme:dark;--bg:#090f22;--panel:#10192f;--panel2:#15213b;--panel3:#1c2944;--border:#293754;--text:#eff4ff;--muted:#92a2bf;--accent:#00dbed;--violet:#9568ff;--danger:#ff8398;--shadow:0 12px 50px #0006;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;color:var(--text);border:1px solid var(--border);border-radius:7px;background:var(--panel2);padding:8px 11px;white-space:nowrap;transition:background .12s,border .12s,transform .12s}button:hover{background:var(--panel3);border-color:var(--muted)}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#071622;font-weight:750}button.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}button.danger{color:var(--danger)}button.flat{border-color:transparent;background:transparent}button.icon{padding:7px 10px;font-size:17px;line-height:1.1}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}input,select{border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);padding:7px 9px;min-width:0}input[type=range]{accent-color:var(--accent);padding:0;border:none;background:none;width:100%}input[type=checkbox]{accent-color:var(--accent)}input[type=number]{width:67px}label{color:var(--muted);font-size:13px;display:flex;gap:7px;align-items:center}.label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650}.muted{color:var(--muted)}.small{font-size:12px}.row{display:flex;align-items:center;gap:8px}.spread{justify-content:space-between}.grow{flex:1;min-width:0}.divider{height:27px;width:1px;background:var(--border);margin:0 6px}.badge{color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:5px;padding:3px 6px;font-size:11px;font-weight:700;letter-spacing:.06em}.topbar{height:68px;display:flex;gap:16px;align-items:center;padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel)}.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:780;letter-spacing:-1px}.brand img{width:39px;height:39px}.brand span span{color:var(--violet)}.project-title{border:none;background:transparent;font-weight:650;font-size:15px;max-width:240px}.save-status{font-size:11px;color:var(--muted);padding-left:9px}.top-actions{margin-left:auto;display:flex;gap:7px}.transport{height:63px;display:flex;gap:11px;align-items:center;padding:0 22px;border-bottom:1px solid var(--border);background:var(--panel)}.play-button{width:43px;height:37px;font-size:19px}.position{font-variant-numeric:tabular-nums;color:var(--accent);font-size:18px;letter-spacing:1px;font-weight:600;width:105px}.transport label{gap:5px}.transport .compact{width:76px}.master-meter{width:70px;height:22px;border:1px solid var(--border);background:var(--bg);position:relative;border-radius:4px;overflow:hidden}.master-meter i{position:absolute;bottom:0;left:0;height:100%;width:0;background:linear-gradient(90deg,#00dbed,#8b5cf6,#ff8398)}.workspace{display:flex;height:calc(100vh - 163px);min-height:350px}.library{width:var(--library-width,260px);min-width:200px;max-width:420px;background:var(--panel);border-right:1px solid var(--border);resize:horizontal;overflow:auto;display:flex;flex-direction:column;flex-shrink:0}.library.collapsed{width:0!important;min-width:0;border:0;overflow:hidden}.library-head{padding:19px 16px 13px}.library-head h2{margin:0;font-size:16px;font-weight:650}.library-tabs{display:flex;gap:4px;padding:0 12px 12px}.library-tabs button{font-size:12px;flex:1;padding:6px 4px}.library-search{margin:0 13px 12px;width:calc(100% - 26px)}.categories{padding:0 12px 12px;display:flex;flex-wrap:wrap;gap:5px}.categories button{font-size:11px;padding:4px 8px;border-radius:12px}.sounds{flex:1;overflow:auto;padding:0 10px 12px;min-height:100px}.sound{display:flex;align-items:center;gap:8px;padding:10px 6px;border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent);border-radius:5px;cursor:grab}.sound:hover{background:var(--panel2)}.sound .preview{font-size:11px;padding:0;width:29px;height:29px;border-radius:50%;color:var(--accent)}.sound-info{min-width:0;flex:1}.sound-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:550}.sound-tags{font-size:10px;color:var(--muted);margin-top:3px}.sound .add{font-size:17px;padding:0;width:24px;height:26px;opacity:0}.sound:hover .add,.sound:focus-within .add{opacity:1}.star{border:none;padding:0;background:none;color:var(--muted);font-size:14px}.star.chosen{color:#fbbf68}.library-foot{padding:12px;border-top:1px solid var(--border);background:var(--panel);display:grid;gap:9px}.main{flex:1;min-width:0;display:flex;flex-direction:column}.arrangement{flex:1;min-height:205px;display:flex;flex-direction:column}.section-head{padding:15px 18px 11px;display:flex;align-items:center;gap:8px}.section-head h2{font-size:15px;margin:0 10px 0 0;font-weight:650}.section-head .row button{font-size:12px;padding:6px 9px}.timeline-wrap{flex:1;overflow:auto;position:relative;margin:0 18px 12px;border:1px solid var(--border);border-radius:9px}.timeline{position:relative;min-height:100%;background:var(--bg);width:max-content;min-width:100%}.ruler{height:48px;position:sticky;top:0;z-index:5;display:flex;background:var(--panel);border-bottom:1px solid var(--border)}.track-spacer{width:146px;flex-shrink:0;position:sticky;left:0;z-index:7;background:var(--panel);padding:15px 13px;color:var(--muted);font-size:11px}.ruler-beats{position:relative;height:100%;cursor:crosshair}.bar-number{position:absolute;top:25px;font-size:10px;color:var(--muted);padding-left:7px;border-left:1px solid var(--border);height:22px}.section-chip{position:absolute;top:3px;height:19px;background:#8b5cf622;color:var(--muted);font-size:10px;padding:2px 8px;border-radius:3px;overflow:hidden;white-space:nowrap}.track-row{height:66px;display:flex;position:relative;border-bottom:1px solid var(--border)}.track-label{width:146px;flex-shrink:0;position:sticky;left:0;background:var(--panel);border-right:1px solid var(--border);z-index:4;padding:11px 10px;cursor:pointer}.track-label.selected{background:var(--panel3);box-shadow:inset 3px 0 var(--track-color)}.track-name{font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:93px}.track-label button{font-size:10px;padding:2px 5px;margin-top:5px}.track-meter{height:3px;width:32px;background:var(--border);display:inline-block;margin-left:5px}.track-meter i{height:100%;display:block;width:0;background:var(--accent)}.lane{position:relative;background-image:linear-gradient(to right,var(--border) 1px,transparent 1px);background-size:calc(var(--beat-width)*4px) 100%;height:65px}.lane:after{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,color-mix(in srgb,var(--border) 35%,transparent) 1px,transparent 1px);background-size:calc(var(--beat-width)*1px) 100%;pointer-events:none}.clip{position:absolute;top:8px;height:48px;overflow:hidden;border:1px solid color-mix(in srgb,var(--clip-color) 70%,white);border-radius:6px;background:color-mix(in srgb,var(--clip-color) 26%,var(--panel));cursor:grab;z-index:2;user-select:none;color:var(--text)}.clip.selected{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 16px #00dbed25}.clip.playing{background:color-mix(in srgb,var(--clip-color) 50%,var(--panel));}.clip .clip-name{font-size:10px;font-weight:600;position:absolute;left:7px;top:4px;right:4px;overflow:hidden;white-space:nowrap;pointer-events:none}.clip canvas{position:absolute;left:0;bottom:2px;width:100%;height:25px;opacity:.75;pointer-events:none}.clip-progress{position:absolute;left:0;top:0;height:100%;width:0;background:#ffffff0e;pointer-events:none}.clip-tools{position:absolute;right:3px;top:2px;display:none;gap:2px}.clip:hover .clip-tools{display:flex}.clip-tools button{font-size:9px;padding:2px 4px;background:var(--panel)}.playhead{position:absolute;top:24px;bottom:0;width:1px;background:var(--accent);box-shadow:0 0 9px #00dbed44;z-index:3;pointer-events:none}.playhead:before{content:'';position:absolute;top:0;left:-4px;border:4px solid transparent;border-top:7px solid var(--accent)}.loop-region{position:absolute;top:48px;bottom:0;pointer-events:none;background:#00dbed05;border-left:1px dashed #00dbed55;border-right:1px dashed #00dbed55;z-index:1}.snap-line{position:absolute;top:0;bottom:0;border-left:2px dashed #fbbf68;pointer-events:none;z-index:8}.editor{height:324px;flex-shrink:0;border-top:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column}.editor-nav{height:47px;flex-shrink:0;padding:8px 18px;border-bottom:1px solid var(--border);gap:6px;display:flex;align-items:center}.editor-nav button{border:none;background:none;font-size:12px;color:var(--muted);padding:6px 11px}.editor-nav button.active{background:var(--panel3);color:var(--accent)}.editor-body{overflow:auto;flex:1;padding:14px 18px}.step-head{margin-bottom:12px}.step-grid{display:grid;gap:7px;min-width:650px}.step-row{display:grid;grid-template-columns:117px repeat(16,minmax(23px,1fr));gap:5px;align-items:center}.step-label{display:flex;align-items:center;gap:7px;font-size:11px}.pad-trigger{width:26px;padding:4px;color:var(--accent);font-size:11px}.step{height:27px;padding:0;border:1px solid var(--border);background:var(--panel2);border-radius:4px}.step:nth-child(4n+2){margin-left:4px}.step.on{background:var(--step-color);border-color:var(--step-color);box-shadow:inset 0 -4px #0002}.step.playing{outline:2px solid white;outline-offset:1px}.step-index{font-size:10px;color:var(--muted);text-align:center}.inspector{width:225px;flex-shrink:0;border-left:1px solid var(--border);background:var(--panel);padding:18px 15px;overflow:auto}.inspector h2{font-size:15px;margin:0 0 18px}.control{margin-bottom:15px}.control label{justify-content:space-between;margin-bottom:7px;font-size:12px}.control output{color:var(--text);font-size:11px;font-variant-numeric:tabular-nums}.inspector .section-label{border-top:1px solid var(--border);padding-top:17px;margin:20px 0 13px}.footer{height:32px;border-top:1px solid var(--border);padding:0 19px;display:flex;align-items:center;gap:20px;font-size:11px;color:var(--muted);background:var(--panel)}.footer .online{color:var(--accent)}.visualizer-mini{height:38px;width:95px}.pill{border:1px solid var(--border);border-radius:5px;padding:4px 7px;font-size:11px}.beat-mode .arrangement{max-height:255px}.beat-mode .editor{flex:1;min-height:320px}.beat-mode .inspector{display:none}.piano-roll{position:relative;overflow:auto;height:190px;border:1px solid var(--border);border-radius:5px}.piano-canvas{display:block;cursor:crosshair}.keyboard{display:flex;height:110px;position:relative;max-width:900px}.key{height:100%;flex:1;border:1px solid #17213a;background:#dce6f6;color:#17213a;display:flex;align-items:end;justify-content:center;padding:10px 0;border-radius:0 0 6px 6px;font-size:11px;min-width:25px}.key.black{background:#182239;color:white;height:68%;width:26px;flex:0;position:absolute;z-index:2;border-color:#0b1026}.key.triggered,.pad.triggered{background:var(--accent)!important;color:#091427;box-shadow:0 0 16px #00dbed55}.synth-controls{display:flex;gap:17px;align-items:center;margin-bottom:15px}.synth-controls .control{width:120px;margin:0}.pads{display:grid;grid-template-columns:repeat(8,1fr);gap:9px;margin-top:10px}.pad{height:71px;text-align:left;border-left:3px solid var(--violet);display:flex;flex-direction:column;justify-content:space-between;font-size:12px}.pad kbd{font-size:10px;color:var(--muted)}.mixer{display:flex;gap:10px}.channel-strip{width:116px;min-width:116px;border:1px solid var(--border);border-top:3px solid var(--track-color);border-radius:7px;padding:11px;background:var(--bg)}.channel-strip h3{font-size:12px;margin:0 0 15px}.channel-strip input[type=range]{margin:12px 0}.channel-strip label{font-size:10px}.overlay{position:fixed;inset:0;background:#020615aa;z-index:50;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);padding:25px}.dialog{background:var(--panel);border:1px solid var(--border);border-radius:14px;width:720px;max-width:95vw;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}.dialog.wide{width:960px}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:19px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:2}.dialog-head h2{font-size:19px;margin:0}.dialog-body{padding:22px}.dialog-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}.dialog h3{font-size:14px;margin:20px 0 12px}.dialog p{font-size:14px;line-height:1.6;color:var(--muted)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid .control{margin:0}.setting-row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--border);align-items:center}.setting-row label{font-size:14px;color:var(--text)}.setting-row .description{font-size:12px;color:var(--muted);margin-top:4px}.setting-row input[type=range]{width:170px}.tabs{display:flex;gap:5px;margin-bottom:20px}.tabs button{font-size:12px}.project-card{display:flex;padding:13px 0;border-bottom:1px solid var(--border);align-items:center;gap:8px}.project-card strong{display:block;font-size:14px}.project-card small{color:var(--muted);display:block;margin-top:5px}.project-card .row{margin-left:auto}.demo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.demo-card{padding:18px;text-align:left;display:flex;flex-direction:column;gap:8px}.demo-card strong{font-size:15px}.demo-card small{color:var(--muted);font-size:12px}.wave-editor{width:100%;height:150px;background:var(--bg);border:1px solid var(--border);border-radius:8px;margin-bottom:20px}.automation-canvas{background:var(--bg);border:1px solid var(--border);border-radius:7px;cursor:crosshair;width:100%;height:135px}.visualizer-full{position:fixed;inset:0;z-index:49;background:var(--bg)}.visualizer-full canvas{width:100%;height:100%}.visualizer-controls{position:absolute;top:24px;right:24px;display:flex;gap:9px}.visualizer-name{position:absolute;bottom:35px;left:40px}.visualizer-name h2{font-size:27px;letter-spacing:-1px}.coach{position:fixed;z-index:80;width:320px;background:var(--panel2);border:1px solid var(--accent);border-radius:12px;box-shadow:0 0 0 9999px #02061580;padding:18px}.coach h3{font-size:17px;margin:12px 0}.coach p{color:var(--muted);line-height:1.6;font-size:13px}.coach .progress{height:3px;background:var(--border);margin:15px 0}.coach .progress i{display:block;height:100%;background:var(--accent)}.coach-highlight{position:relative;z-index:81!important;outline:2px solid var(--accent);outline-offset:4px}.notice{padding:12px 14px;border:1px solid #fbbf6860;background:#fbbf6810;color:#f6c584;border-radius:7px;font-size:13px;line-height:1.55}.empty{text-align:center;padding:35px;color:var(--muted)}#toast{position:fixed;bottom:49px;left:50%;transform:translateX(-50%);max-width:700px;background:var(--panel3);border:1px solid var(--accent);padding:11px 18px;border-radius:8px;z-index:100;box-shadow:var(--shadow);font-size:13px;display:none}.progress-bar{height:8px;border-radius:5px;overflow:hidden;background:var(--bg);margin:20px 0}.progress-bar i{display:block;background:linear-gradient(90deg,var(--accent),var(--violet));width:0;height:100%}.shortcut{padding:3px 7px;border:1px solid var(--border);border-radius:4px;background:var(--bg);font-size:12px}.overload{color:var(--danger)!important}.motion-off *{transition:none!important;animation:none!important}.motion-reduced *{transition-duration:.01ms!important;animation-duration:.01ms!important}.high-contrast{--muted:#c0cde4;--border:#7382a0}.density-compact .track-row{height:56px}.density-compact .lane{height:55px}.density-compact .clip{height:39px}.light{color-scheme:light;--bg:#eef2fa;--panel:#fff;--panel2:#f3f5fb;--panel3:#e5ebf7;--border:#cbd4e6;--text:#1b2943;--muted:#596d8e;--accent:#007f99;--violet:#7743d1;--danger:#bb3456;--shadow:0 12px 50px #23345a25}.light .clip{color:#102441}.light .step.on{border-color:#263b61}.light .key{background:#fff}.light .key.black{background:#1a2941}.light .notice{color:#705011}.light .section-chip{color:#59617b}@media(max-width:1280px){.topbar{gap:10px;padding:0 14px}.brand{font-size:20px}.brand img{width:32px}.transport{padding:0 14px;gap:8px}.transport .secondary-control{display:none}.library{width:220px}.inspector{width:200px}.editor{height:310px}.top-actions button{padding:7px 9px}.project-title{max-width:170px}.step-row{grid-template-columns:96px repeat(16,minmax(21px,1fr))}.step-grid{min-width:620px}}@media(max-width:1050px){.inspector{display:none}.library{width:205px}.top-actions .optional{display:none}.brand{font-size:18px}.position{width:85px;font-size:16px}.editor{height:300px}.topbar{height:60px}.workspace{height:calc(100vh - 155px)}.transport .divider{margin:0 2px}.section-head{flex-wrap:wrap}.section-head h2{margin-right:0}}@media(max-height:720px){.editor{height:275px}.arrangement{min-height:185px}.topbar{height:56px}.transport{height:54px}.workspace{height:calc(100vh - 142px)}}
@media(max-width:1100px){.transport>[data-action=visualizer]{display:none}.topbar>.badge{display:none}.topbar .project-title{max-width:155px}.footer{gap:10px}.footer>span:nth-last-of-type(1){display:none}}
/* A tutorial card must always paint above the target it explains. */
.coach{z-index:10002;width:320px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;isolation:isolate}
.coach-highlight{z-index:10001!important}
.coach .badge{display:block;white-space:normal;line-height:1.45}
.coach .row{flex-wrap:wrap}.coach button{flex-shrink:0}