:root{color-scheme:dark;--bg:#13161a;--panel:#1c2025;--raised:#272d34;--text:#f4f1e9;--muted:#b2bac5;--line:#39424c;--lime:#d6ef80;--coral:#ff9c84;--blue:#99c9fa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,sans-serif}main{max-width:1500px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;gap:24px;margin-bottom:26px}.brand{color:var(--lime);font-size:21px;font-weight:900;letter-spacing:2px;text-decoration:none}.tag{color:var(--muted)}#saved{margin-left:auto;color:var(--muted);font-size:12px}button,.button,select,input{font:inherit}button,.button,select{border:1px solid var(--line);background:var(--raised);color:var(--text);padding:9px 12px;border-radius:7px;cursor:pointer}button:hover,.button:hover{border-color:var(--lime)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button:disabled{opacity:.65;cursor:wait}input{color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:7px;min-width:0}input[type=range]{padding:0;width:100%;accent-color:var(--lime);cursor:pointer}label{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:12px}.transport{display:flex;align-items:center;gap:12px;padding:18px 0 25px;border-top:1px solid var(--line)}.song-title{margin-right:auto;width:240px}.song-title label{font-size:10px;letter-spacing:2px}.song-title input{font-size:21px;width:100%;border:0;padding:4px 0;font-weight:650}.primary{background:var(--lime);color:#202719;border-color:var(--lime);font-weight:700;min-width:95px}#bpm{width:62px}#position{font-variant-numeric:tabular-nums;color:var(--lime)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}.section-head{display:flex;gap:12px;align-items:center;margin-bottom:18px}.section-head>div:first-child{margin-right:auto}.eyebrow{font-size:10px;color:var(--muted);letter-spacing:2px}h1,h2,h3{margin:6px 0;font-weight:600}h1{font-size:25px}h2{font-size:20px}h3{font-size:14px}.grid-scroll{overflow-x:auto;padding-bottom:8px}.step-row{display:grid;grid-template-columns:138px repeat(16,minmax(27px,1fr));gap:5px;min-width:670px;margin-bottom:7px}.step-row.head{color:var(--muted);font-size:10px;text-align:center}.track-controls{display:flex;align-items:center;gap:5px}.track-select{padding:9px 6px;flex:1;text-align:left;background:transparent;border-color:transparent;font-weight:600}.track-select.selected{color:var(--lime)}.mute{font-size:10px;padding:5px 6px}.mute.active{background:var(--coral);color:#231a17}.step{height:38px;padding:0;background:#303740;border:1px solid #414b57;border-radius:5px;font-size:9px}.step:nth-child(4n+2){border-left:2px solid #76818e}.step.on{background:var(--lime);color:#202719;border-color:var(--lime)}.step-row:nth-child(3) .step.on{background:var(--coral);color:#241b19;border-color:var(--coral)}.step-row:nth-child(4) .step.on{background:var(--blue);color:#14202b;border-color:var(--blue)}.step.current{box-shadow:inset 0 0 0 3px white}.sequence-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);margin-top:14px}.library{grid-row:span 2}.demo{display:block;width:100%;text-align:left;padding:13px;margin-top:10px}.demo strong{display:block;font-size:14px}.demo span{display:block;color:var(--muted);font-size:11px;margin-top:5px}.demo:first-child{border-left:3px solid var(--lime)}.separator{border-top:1px solid var(--line);margin:24px 0}.wide{width:100%;margin-top:12px;background:var(--lime);color:#202719}.file-actions{display:flex;gap:8px;margin-top:10px}.file-actions>*{flex:1;text-align:center;justify-content:center;font-size:12px}.project{display:flex;gap:6px;margin:7px 0}.project button:first-child{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis}.knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:20px 0 24px}.knobs label{display:block}.knobs input{margin-top:14px}.keyboard{display:flex;height:108px;gap:4px;margin:18px 0 10px;touch-action:none}.key{flex:1;background:#ece9df;color:#242824;border:1px solid #c9c8be;border-radius:0 0 6px 6px;padding:65px 0 8px;font-size:11px;touch-action:none}.key.black{background:#343d47;color:#f4f1e9;margin:0 -2px;height:76px;padding-top:38px;flex:.7}.key.pressed{background:var(--coral);color:#202020}.hint{font-size:11px;color:var(--muted)}.arrangement{grid-column:1/-1}#timeline{display:flex;gap:8px;overflow-x:auto;padding:4px 0 15px}.bar{min-width:115px;background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:10px}.bar label{display:block;margin-bottom:7px}.bar select{width:100%;padding:7px;font-size:12px}.bar.playing{border-color:var(--lime)}.bar-remove{float:right;font-size:10px;padding:0 4px}footer{display:flex;justify-content:space-between;gap:16px;font-size:11px;color:var(--muted);padding:20px 0}#status{color:var(--lime)}@media(max-width:1050px){main{padding:18px}.workspace{grid-template-columns:minmax(0,1fr)}.library{grid-row:auto;grid-column:1;order:4}.transport{flex-wrap:wrap}.song-title{width:200px}.tag{display:none}.arrangement{grid-column:1}.library #demos{display:flex;gap:10px}.demo{flex:1}.step-row{grid-template-columns:125px repeat(16,30px)}.knobs{gap:12px}}@media(max-width:540px){main{padding:12px}header{margin-bottom:16px}.brand{font-size:18px}#saved{font-size:10px}.transport{gap:8px;padding-bottom:16px}.song-title{width:calc(100% - 140px)}.song-title input{font-size:19px}.transport label{font-size:11px}.panel{padding:15px;border-radius:10px}.section-head{flex-wrap:wrap}h1{font-size:22px}h2{font-size:19px}.sequence-footer{align-items:flex-start}.sequence-footer span{max-width:200px}.library #demos{display:block}.knobs{grid-template-columns:1fr 1fr}.key{min-width:0}.hint{font-size:10px}footer{display:block}footer span{display:block;margin-bottom:8px}}