:root{--bg:#0d0f14;--bg-2:#141824;--bg-3:#1b2130;--line:#262d3d;--text:#e8ecf5;--muted:#8b94a8;--accent:#5eead4;--accent-2:#f59e0b;--danger:#f87171;--ok:#34d399;--warn:#fbbf24;--busy:#60a5fa;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);margin:0}body{-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,input,select{font:inherit;color:inherit}button{background:var(--bg-3);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:8px;padding:8px 12px}button:hover{border-color:#3a4459}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);color:#062b27;border-color:#0000;font-weight:600}button.ghost{background:0 0}button.danger{color:var(--danger)}button.mini{border-radius:6px;padding:4px 8px;font-size:12px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.between{justify-content:space-between}.spacer{flex:1}.muted{color:var(--muted)}.small{font-size:13px}.tiny{text-transform:uppercase;letter-spacing:.06em;font-size:11px}.warn-text{color:var(--warn)}code{background:var(--bg-3);border-radius:4px;padding:1px 5px}.boot{height:100%;color:var(--muted);letter-spacing:.2em;place-items:center;display:grid}.library{max-width:960px;margin:0 auto;padding:32px 20px 80px}.library-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.library h1{letter-spacing:-.02em;margin:0 0 4px;font-size:28px}.library p{margin:0}.cloud-note{margin:-8px 0 14px}.empty{border:1px dashed var(--line);text-align:center;border-radius:14px;justify-items:center;gap:12px;padding:40px 24px;display:grid}.empty h2{margin:0}.project-list{gap:10px;margin:0;padding:0;list-style:none;display:grid}.project-card{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:6px 10px 6px 0;display:flex}.project-main{text-align:left;background:0 0;border:none;flex:1;gap:4px;min-width:200px;padding:14px 16px;display:grid}.project-name{font-size:16px;font-weight:600}.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;gap:10px;margin:0 0 16px;padding:14px 16px;display:grid}.panel h3{margin:0;font-size:15px}.text{background:var(--bg);border:1px solid var(--line);border-radius:8px;flex:1;min-width:200px;padding:8px 10px}.revision-list{gap:6px;max-height:240px;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.chip{background:var(--bg-2);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:inline-flex}.chip-dot{background:var(--ok);border-radius:50%;width:8px;height:8px}.chip-warn .chip-dot{background:var(--warn)}.chip-busy .chip-dot{background:var(--busy);animation:1s infinite pulse}.chip-bad .chip-dot{background:var(--danger)}@keyframes pulse{50%{opacity:.3}}.studio{flex-direction:column;height:100%;min-height:0;display:flex}.topbar,.transport{border-bottom:1px solid var(--line);background:var(--bg-2);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex}.name-input{background:0 0;border:1px solid #0000;border-radius:8px;min-width:120px;max-width:220px;padding:6px 8px;font-size:16px;font-weight:600}.name-input:hover,.name-input:focus{border-color:var(--line);outline:none}.field{align-items:center;gap:6px;display:inline-flex}.field input[type=number]{background:var(--bg);border:1px solid var(--line);border-radius:8px;width:64px;padding:6px 8px}.select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px}.swing input{width:90px}.play{min-width:96px;font-weight:600}.play.on{background:var(--accent);color:#062b27;border-color:#0000}.toggle.on{border-color:var(--busy);background:#23364a}.toggle.rec.on{border-color:var(--danger);background:#4a1f28}.position{font-variant-numeric:tabular-nums;color:var(--muted);min-width:36px}.mode-switch{border:1px solid var(--line);border-radius:8px;display:inline-flex;overflow:hidden}.mode-switch button{background:0 0;border:none;border-radius:0;padding:7px 12px}.mode-switch button.on{background:var(--bg-3);color:var(--accent);font-weight:600}.arrangement{gap:10px;display:grid}.arr-wrap{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;overflow:auto}.arr{gap:2px;min-width:max-content;padding:6px;display:grid}.arr .arr-label{background:var(--bg-2);text-align:left;height:44px;color:var(--text);border:none;border-left:4px solid;border-radius:4px;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding-left:8px;font-weight:600}.arr .arr-label.selected{background:var(--bg-3)}.arr-label .tiny{text-transform:none;letter-spacing:0;font-weight:400}.arr-cell{cursor:pointer;align-items:center;min-width:34px;height:44px;padding:0 6px;display:flex;position:relative;overflow:hidden}.arr-cell.clip{color:#0b1018;cursor:grab;touch-action:none;border-radius:0}.arr-cell.clip.picked{box-shadow:inset 0 0 0 2px #fff}.arr-handle{cursor:ew-resize;background:#0b101873;border-radius:2px;width:4px;position:absolute;top:6px;bottom:6px;right:3px}.arr.dragging,.arr.dragging .arr-cell{cursor:grabbing}.arr.dragging.resize,.arr.dragging.resize .arr-cell{cursor:ew-resize}.arr-cell.clip.head{border-top-left-radius:6px;border-bottom-left-radius:6px}.arr-cell.clip.tail{border-top-right-radius:6px;border-bottom-right-radius:6px}.arr-clip-name{white-space:nowrap;font-size:11px;font-weight:600}.arr-bar{border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:8px 10px}.body{flex:1;min-height:0;display:flex}.sidebar{border-right:1px solid var(--line);background:var(--bg-2);width:220px;overflow:auto}.editor{flex-direction:column;flex:1;gap:12px;min-width:0;padding:12px;display:flex;overflow:auto}.learn-tip{margin:0}.tracks{flex-direction:column;display:flex}.track{border-left:4px solid;border-bottom:1px solid var(--line);grid-template-columns:1fr auto;align-items:center;gap:6px 8px;padding:10px 10px 10px 12px;display:grid}.track.selected{background:var(--bg-3)}.track-name{text-align:left;background:0 0;border:none;padding:2px 0;font-weight:600}.track-buttons{gap:4px;display:flex}.mini.on-mute{border-color:var(--danger);background:#4a1f28}.mini.on-solo{border-color:var(--accent-2);background:#4a3a12}.slider{grid-column:1/-1;grid-template-columns:28px 1fr;align-items:center;gap:6px;display:grid}.slider input{width:100%;margin:0}.tiny-select{grid-column:1/-1;padding:4px 6px;font-size:12px}.fx{border-top:1px dashed var(--line);grid-column:1/-1;gap:6px;padding-top:4px;display:grid}.fx-head{align-items:center;gap:4px;display:flex}.fx-head .tiny{margin-right:4px}.mini.on-fx{border-color:var(--accent);background:#1f3a3a}.fx-block{background:var(--bg);border-radius:8px;gap:4px;padding:6px;display:grid}.fx-block .slider{grid-template-columns:28px 1fr}.stepgrid-wrap,.roll-wrap{border:1px solid var(--line);background:var(--bg-2);border-radius:12px;overflow:auto}.roll-wrap{max-height:60vh}.stepgrid,.roll{gap:2px;min-width:max-content;padding:6px;display:grid}.grid-corner{z-index:2;background:var(--bg-2);position:sticky;left:0}.grid-head{color:var(--muted);text-align:left;height:18px;padding-left:3px;font-size:11px}.grid-head.now{color:var(--accent)}.grid-label,.roll-key{z-index:1;background:var(--bg-2);color:var(--muted);align-items:center;height:30px;padding-left:4px;font-size:12px;display:flex;position:sticky;left:0}.roll-key{border:none;border-radius:4px;justify-content:flex-start;height:22px;padding:0 6px;font-size:11px}.roll-key.black{color:#6b7387}.roll-key.root{color:var(--accent-2);font-weight:600}.cell{border:1px solid var(--line);background:var(--bg-3);border-radius:4px;min-width:22px;height:30px;padding:0}.cell.beat{border-left-color:#3a4459}.cell.now{box-shadow:inset 0 0 0 1px var(--accent)}.cell.on{background:#2fb9a3;border-color:#2fb9a3}.cell.on.strong{background:var(--accent);border-color:var(--accent)}.roll-cell{height:22px}.roll-cell.scale{background:#202a3c}.roll-cell.dim{opacity:.45}.roll-cell.on{opacity:1;background:#b794f6;border-color:#b794f6;border-radius:0}.roll-cell.on.head{border-top-left-radius:4px;border-bottom-left-radius:4px}.roll-cell.on.tail{border-top-right-radius:4px;border-bottom-right-radius:4px}.pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.pad{aspect-ratio:1.4;border:1px solid var(--line);background:linear-gradient(#1f2637,#171c29);border-radius:14px;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:64px;padding:10px;transition:transform 60ms,background 60ms;display:flex;position:relative}.pad.selected{border-color:#3a4459}.pad.hit{background:var(--accent);color:#062b27;transform:scale(.97)}.pad-role{font-weight:600}.pad-key{color:var(--muted);font-size:11px;position:absolute;top:8px;right:10px}.pad.hit .pad-key{color:#062b27}.pad-hint{color:var(--muted);text-align:left;font-size:11px}.pads-block{gap:10px;display:grid}.pad.sampled{border-color:#3d5a80}.pad-sample{color:var(--busy);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;overflow:hidden}.pad.hit .pad-sample{color:#062b27}.pad-bar{border:1px solid var(--line);background:var(--bg-2);border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;display:flex}.pad-bar input[type=range]{width:90px}@media (width<=760px){.topbar .swing,.topbar .field:not(:first-of-type){display:none}.name-input{max-width:130px}.body{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--line);width:auto;max-height:38vh}.tracks{flex-direction:row;overflow-x:auto}.track{border-bottom:none;border-left-width:3px;border-right:1px solid var(--line);min-width:170px}.editor{padding:10px}.pads{gap:8px}.pad{aspect-ratio:auto;height:76px;min-height:0}.topbar .ghost[title^=Redo],.pattern-pick .tiny{display:none}.arr-cell{min-width:28px}.pad-hint{display:none}.roll-wrap{max-height:45vh}}