@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#13161f;--panel:#1d2230;--line:#353d50;--muted:#a8b0c3;--ink:#f3f1eb;--lime:#c3f485;--button:#2b3244;--mono:'Space Grotesk',monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}button,select,.file-button{border:1px solid var(--line);background:var(--button);color:var(--ink);border-radius:7px;min-height:36px;padding:8px 12px;cursor:pointer}button:hover,.file-button:hover{background:#3b455a}button:focus-visible,input:focus-visible,select:focus-visible,.file-button:focus-within{outline:2px solid var(--lime);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}button.active{background:var(--lime);color:#1b2811;border-color:var(--lime)}input{color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:5px}input[type=range]{accent-color:var(--lime);height:22px;cursor:pointer;min-width:0}main{max-width:1536px;margin:auto;padding:0 36px}header{height:83px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font:700 17px var(--mono);letter-spacing:2px;display:flex;align-items:center;gap:10px}.logo{background:var(--lime);color:#233314;border-radius:7px;font-size:27px;width:34px;height:34px;text-align:center;line-height:34px}.tag{font-size:10px;color:var(--muted);letter-spacing:2px}header>button{margin-left:auto}#saveDot{color:var(--lime);font-size:9px;margin-left:10px}.transport{display:flex;align-items:center;gap:26px;padding:24px 0 28px}.song-title{width:260px}.song-title input{border:0;font:600 23px var(--mono);width:100%;padding:0}.song-title span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.transport-buttons{display:flex;gap:9px;align-items:center}.play{background:var(--lime);color:#1b2811;border-color:var(--lime);font-weight:700;padding:12px 20px}.play:hover{background:#d7ffae}.tempo{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;padding:3px 10px;gap:4px;color:var(--muted);font:11px var(--mono);height:43px}.tempo input{width:48px;border:0;font:600 19px var(--mono);appearance:textfield}.tempo input::-webkit-inner-spin-button{appearance:none}.position{font:18px var(--mono);color:var(--muted);padding:0 8px}.exports{margin-left:auto;display:flex;gap:8px}.outline{border-color:#8fac6b;color:var(--lime);background:transparent}.workspace{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px}.library{padding:17px 0}.section-label,.eyebrow{color:var(--muted);font-size:10px;font-weight:600;letter-spacing:1.7px}.new{margin:18px 0 25px;width:100%;background:transparent;text-align:left}.demos-label{margin-bottom:15px}.demo{display:flex;text-align:left;gap:10px;align-items:center;width:100%;padding:13px 8px;margin-bottom:8px;background:transparent;border-color:transparent}.demo .cover{flex-shrink:0;border-radius:5px;width:38px;height:42px;display:grid;place-items:center;font:26px var(--mono);color:#242339}.demo strong{font-size:12px;font-weight:500;display:block}.demo small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.local-note{margin-top:140px;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:11px;line-height:1.7}.small-spark{font-size:24px;color:var(--lime)}.studio{min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.panel-top h1{font:500 28px var(--mono);margin:7px 0 0;letter-spacing:-1px}.lime{color:var(--lime)}.segmented{display:flex;gap:4px;padding:4px;background:#141923;border-radius:8px}.segmented button{border:0;background:transparent;color:var(--muted);min-width:34px;min-height:31px;padding:6px 11px}.segmented button.active{background:var(--lime);color:#1b2811}.sequence-toolbar{display:flex;align-items:center;gap:18px;margin-bottom:22px}.mode{background:transparent;padding:0}.mode button{font-size:12px;border:1px solid var(--line)}.mode button.active{background:#34432c;color:var(--lime);border-color:#63784c}.sequence-toolbar label{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.sequence-toolbar input{width:80px}.sequence-toolbar output{font:11px var(--mono);width:28px}.text-button{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:11px}.grid-scroll{overflow-x:auto;padding:2px}.step-grid{display:grid;grid-template-columns:100px repeat(16,minmax(21px,1fr));gap:7px;min-width:670px;align-items:center}.step-number{text-align:center;color:var(--muted);font:10px var(--mono);margin-bottom:4px}.track-label{display:flex;gap:9px;align-items:center;background:none;border:0;padding:4px;min-height:31px;text-align:left;font-size:12px}.track-label.selected{color:var(--lime)}.track-dot{width:6px;height:6px;border-radius:50%;background:var(--track)}.step{height:33px;min-height:33px;border:1px solid #414b62;background:#2a3143;border-radius:4px;padding:0;position:relative;touch-action:manipulation}.step.beat{background:#343c4f}.step.on{background:var(--track);border-color:var(--track);color:#182021}.step.playhead:after{content:'';position:absolute;inset:-3px;border:2px solid #fff;border-radius:6px;pointer-events:none}.step:active{transform:scale(.9)}.step small{font:8px var(--mono)}.grid-footer{display:flex;justify-content:space-between;margin-top:20px;font-size:10px;color:var(--muted)}.lower{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.compact{margin-bottom:18px}.compact h2{font:500 19px var(--mono);margin:7px 0 0}.compact select{font-size:11px;padding:7px}.knobs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}.knobs label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:7px}.knobs input{width:100%;margin:0}.knobs output{font:10px var(--mono);color:var(--ink)}.keyboard-tools{display:flex;gap:8px;align-items:center;font:10px var(--mono);color:var(--muted);margin-bottom:10px}.keyboard-tools button{min-height:24px;padding:1px 7px;background:transparent}.record-label{margin-left:auto;display:flex;align-items:center;gap:5px;font:10px 'DM Sans',sans-serif}.record-label input{accent-color:var(--lime)}.keyboard{display:flex;position:relative;height:87px;touch-action:none}.key{flex:1;background:#e9e7df;border:1px solid #9eaaa8;color:#3b4144;border-radius:0 0 5px 5px;display:flex;align-items:end;justify-content:center;padding:0 0 7px;font:9px var(--mono);min-width:0}.key.black{position:absolute;top:0;width:8.5%;height:58%;z-index:1;background:#151b28;color:#c7cbd4;border-color:#465166}.key.pressed{background:var(--lime);color:#1c2b14}.keyboard-caption{color:var(--muted);font-size:9px;margin-top:10px;text-align:center}.arrangement-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:198px;overflow:auto}.arrange-block{height:60px;text-align:left;background:#2b3345;border-color:#47526c;color:var(--ink);font:500 19px var(--mono);position:relative;padding:8px 12px}.arrange-block small{display:block;font:9px var(--mono);color:var(--muted);margin-bottom:5px}.arrange-block.current{outline:2px solid var(--lime);outline-offset:-2px}.arrange-block:after{content:'';position:absolute;bottom:10px;right:12px;width:17px;height:12px;border-bottom:2px solid var(--lime);border-top:2px solid var(--lime);transform:skewY(-15deg);opacity:.7}.arrange-actions{display:flex;gap:7px;align-items:center;margin-top:16px;flex-wrap:wrap}.arrange-actions button{font-size:10px;min-height:29px;padding:6px 9px}#arrangeHint{font-size:9px;color:var(--muted)}#songLength{font:10px var(--mono);color:var(--muted);white-space:nowrap}.mixer{margin-top:18px}.mix-label{font-size:9px;color:var(--muted);letter-spacing:1px}.mix-channels{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.channel{border-right:1px solid var(--line);padding-right:12px}.channel:last-child{border:0}.channel-name{display:flex;gap:8px;align-items:center;font-size:11px;margin-bottom:10px}.channel-name:before{content:'';width:6px;height:6px;background:var(--track);border-radius:50%}.channel input{width:100%;accent-color:var(--track)}.channel-bottom{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);color:var(--muted)}.channel button{font:9px var(--mono);padding:3px 7px;min-height:24px;background:#151a25}.channel button.active{background:var(--track);color:#162023}.channel-controls{display:flex;gap:4px}footer{display:flex;justify-content:space-between;padding:24px 0;color:var(--muted);font-size:10px}dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;width:min(480px,95vw);padding:24px}dialog::backdrop{background:#070b14c9}.dialog-title{display:flex;justify-content:space-between;align-items:center}.dialog-title h2{font:500 23px var(--mono)}.project-row{display:flex;align-items:center;gap:10px;margin:9px 0}.project-row button:first-child{flex:1;text-align:left}.dialog-actions{display:flex;gap:10px;margin-top:25px}dialog p{font-size:12px;color:var(--muted);line-height:1.6}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--lime);color:#182616;box-shadow:0 8px 40px #0007;border-radius:9px;padding:13px 20px;z-index:9;max-width:90vw;font-weight:500;display:none}#toast.show{display:block}
@media(min-width:1450px){.step{height:39px}.lower{grid-template-columns:1fr 1fr}.panel{padding:25px}.arrange-block{height:67px}.keyboard{height:98px}}
@media(max-width:1150px){main{padding:0 22px}.workspace{grid-template-columns:140px minmax(0,1fr);gap:17px}.tag{display:none}.song-title{width:210px}.transport{gap:15px}.position{display:none}.step-grid{gap:5px}.panel{padding:18px}.lower{grid-template-columns:1fr}.arrangement-list{grid-template-columns:repeat(8,1fr)}.arrange-block{padding:7px 9px}.arrange-block:after{display:none}.local-note{margin-top:90px}}
@media(max-width:760px){main{padding:0 14px}header{height:65px}.brand{font-size:13px;letter-spacing:1px}.logo{width:27px;height:27px;line-height:27px;font-size:23px}header>button{font-size:11px;padding:6px 10px}.transport{flex-wrap:wrap;gap:15px;padding:20px 0}.song-title{width:calc(100% - 110px)}.song-title input{font-size:21px}.transport-buttons{order:3;width:100%}.exports{gap:4px}.exports #share{font-size:0;padding:7px}.exports #share:after{content:'↗';font-size:18px}.exports button{font-size:11px}.tempo{margin-left:auto}.position{display:block;font-size:16px}.workspace{display:flex;flex-direction:column;gap:14px}.library{padding:0;display:flex;align-items:center;gap:8px;overflow-x:auto}.library .section-label,.library .local-note{display:none}.new{width:auto;flex-shrink:0;font-size:11px;margin:0;height:47px;padding:8px}#demos{display:flex;gap:7px}.demo{width:150px;margin:0;padding:3px;border-color:var(--line);gap:7px}.demo .cover{width:26px;height:36px;font-size:20px}.demo strong{font-size:10px}.demo small{font-size:9px}.panel{padding:16px 13px;border-radius:10px}.panel-top h1{font-size:24px}.eyebrow{font-size:8px;letter-spacing:1.2px}.segmented button{padding:5px 8px;min-width:29px}.sequence-toolbar{gap:9px;flex-wrap:wrap;margin-bottom:15px}.sequence-toolbar label{font-size:10px}.sequence-toolbar input{width:65px}.text-button{font-size:10px;padding:4px;min-height:28px}.step-grid{grid-template-columns:72px repeat(16,29px);min-width:0;width:616px;gap:5px}.step{height:35px}.track-label{font-size:10px;position:sticky;left:0;z-index:2;background:var(--panel)}.grid-footer{font-size:9px}.grid-footer span:last-child{display:none}.lower{gap:14px;margin-top:14px}.arrangement-list{grid-template-columns:repeat(4,1fr)}.arrange-block{height:53px}.mix-channels{grid-template-columns:repeat(3,1fr);gap:18px 12px}.channel:nth-child(3){border:0}.mixer{margin-top:14px}.mix-label{font-size:8px}.compact h2{font-size:18px}.keyboard{height:105px}.key{font-size:10px}.keyboard-caption{font-size:9px}footer{font-size:9px;padding:20px 0}footer span:first-child{display:none}button{touch-action:manipulation}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s,transform .1s}}