:root{color-scheme:dark;--bg:#141620;--panel:#1d202c;--surface:#282c3b;--line:#373c50;--text:#eeeff9;--muted:#b0b5ca;--accent:#cfbdff;--ink:#211a38}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,-apple-system,sans-serif}button,input,select{font:inherit;color:var(--text)}button,select{background:var(--surface);border:1px solid var(--line);border-radius:7px;min-height:36px;padding:7px 11px}button{cursor:pointer;touch-action:manipulation}button:hover{background:#3b4057}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.6;cursor:wait}input{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:6px}input[type=range]{accent-color:var(--accent);padding:0;min-width:0}input[type=checkbox]{accent-color:var(--accent)}.studio{max-width:1500px;margin:auto;padding:22px 30px}.brand{color:var(--text);font-size:23px;font-weight:650;letter-spacing:-1px;text-decoration:none;display:flex;align-items:center;gap:9px}.logo{color:var(--accent);font-size:34px}.studio-label{font-size:9px;letter-spacing:2px;color:var(--muted);margin:8px 0 0 4px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:24px}.project-menu{display:flex;gap:7px;flex-wrap:wrap}.project-menu select{max-width:205px}.transport{display:flex;align-items:center;gap:25px;background:var(--panel);padding:13px 16px;border:1px solid var(--line);border-radius:11px}.transport-buttons{display:flex;gap:7px}.primary{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:700;min-width:99px}.primary:hover{background:#dfd1ff}.primary.playing{background:#bce4b4;color:#172713;border-color:#bce4b4}.tempo{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;letter-spacing:1px}.tempo input{width:62px;text-align:center;font-size:18px;font-weight:650}.position{font:20px ui-monospace,monospace;color:var(--accent)}.export-controls{margin-left:auto;display:flex;gap:8px}.project-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:26px 2px 18px}.project-title input{background:transparent;border-color:transparent;font-size:24px;font-weight:600;padding:0;min-width:100px;width:60%}#status{color:var(--muted);font-size:12px;text-align:right}#status.error{color:#ffb4b4}main{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:18px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}h1,h2{font-size:15px;margin:0;letter-spacing:-.2px;font-weight:650}.pattern-tabs{display:flex;gap:5px}.pattern-tabs button{min-width:31px;padding:5px}.pattern-tabs .selected{background:var(--accent);color:var(--ink);border-color:var(--accent)}#copy-pattern{font-size:11px;min-height:30px;padding:5px 8px}.grid-scroll,.timeline-scroll{overflow:auto;padding-bottom:5px}.step-row,.beat-row{display:grid;grid-template-columns:120px repeat(16,minmax(25px,1fr));gap:5px;min-width:660px;margin-bottom:7px}.beat-row{margin-bottom:12px;color:var(--muted);font-size:10px;text-align:center}.track-label{display:flex;align-items:center;gap:6px;padding-right:5px;border:0;background:transparent;text-align:left;font-size:12px;min-height:33px;padding:0 4px}.track-label.active{background:var(--surface);box-shadow:inset 2px 0 var(--track-color)}.track-dot{width:7px;height:7px;border-radius:50%;background:var(--track-color);flex-shrink:0}.mute{margin-left:auto;font-size:10px;background:transparent;border:0;padding:3px;min-height:26px;color:var(--muted)}.step{border:1px solid #3b4056;background:#2b3041;border-radius:4px;min-height:35px;padding:0;font-size:9px;color:#f8f8ff}.step.beat{background:#353b50}.step.on{background:var(--track-color);border-color:var(--track-color);color:#171923;font-weight:700}.step.cursor{outline:2px solid white;outline-offset:1px}.grid-footer,.arrangement-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:15px;color:var(--muted);font-size:11px}.grid-footer label{display:flex;gap:6px;align-items:center}.grid-footer input{width:70px}.eyebrow{font-size:10px;color:var(--muted);letter-spacing:2px}.control{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.control label{color:var(--muted);font-size:12px;min-width:55px}.control select,.control input{width:132px}.control output{font-size:10px}.keyboard{display:flex;height:92px;margin-top:25px;gap:3px}.key{flex:1;min-width:0;background:#e4e6f1;color:#292e42;border:0;border-radius:4px;padding:50px 0 8px;font-size:10px;touch-action:none;user-select:none}.key:hover,.key.pressed{background:var(--accent)}.keyboard-label{color:var(--muted);font-size:10px;margin:9px 0 18px}.note-label{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px}.note-label select{flex:1;min-width:0}.arrangement{grid-column:1/-1}.arrangement .section-heading>div{display:flex;align-items:center;gap:10px}#bar-count{color:var(--muted);font-size:12px}.timeline-row{display:grid;gap:5px;min-width:650px;margin-bottom:7px}.timeline-label{display:flex;align-items:center;font-size:12px;color:var(--muted)}.clip{min-height:31px;background:#2b3041;border-color:#373c50;color:var(--muted);font-size:11px;padding:5px}.clip.filled{color:var(--track-color);background:color-mix(in srgb,var(--track-color) 12%,#1d202c);border-color:color-mix(in srgb,var(--track-color) 40%,#1d202c)}.clip.current{outline:2px solid var(--text)}.bar-label{font-size:10px;color:var(--muted);text-align:center;padding:3px}footer{display:flex;gap:7px;align-items:center;color:var(--muted);font-size:11px;padding:22px 2px}.local-dot{width:5px;height:5px;background:#bce4b4;border-radius:50%}.footer-right{margin-left:auto}button[hidden]{display:none}.track-wrap{display:flex;align-items:center;min-width:0;--track-color:inherit}.track-wrap .track-label{flex:1}input:disabled,select:disabled{opacity:.6}@media(min-width:1200px){main{grid-template-columns:minmax(0,1fr) 290px}.panel{padding:22px}.step{min-height:39px}}@media(max-width:950px){main{grid-template-columns:minmax(0,1fr)}.instrument{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px}.instrument .section-heading{grid-column:1/-1;margin-bottom:0}#sound-controls{grid-row:2/5}.keyboard{margin-top:0}.keyboard-label{margin:0}.note-label{margin-bottom:10px}header{align-items:flex-start}.studio-label{display:none}.brand{white-space:nowrap}.project-menu{justify-content:flex-end}.transport{gap:15px}.position{font-size:16px}}@media(max-width:600px){.studio{padding:15px 12px}header{flex-direction:column;gap:12px;padding-bottom:15px}.brand{font-size:22px}.project-menu{width:100%;justify-content:flex-start;gap:5px}.project-menu select{flex:1;max-width:100%;min-width:100px}.project-menu button{font-size:11px;padding:6px 8px}.transport{flex-wrap:wrap;gap:12px;padding:12px}.transport-buttons{flex:1}.tempo{margin-left:auto}.position{font-size:16px}.export-controls{margin-left:auto}.project-title{padding:22px 2px 16px}.project-title input{font-size:21px}.panel{padding:14px}.section-heading{gap:6px}.section-heading h1{font-size:14px}#copy-pattern{font-size:10px}.pattern-tabs{gap:3px}.pattern-tabs button{min-width:28px}main{gap:12px}.instrument{display:block}.instrument .section-heading{margin-bottom:16px}#sound-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.control{display:block;margin-bottom:15px}.control label{display:block;margin-bottom:6px}.control select,.control input{width:100%}.keyboard{margin-top:4px}.keyboard-label{margin:8px 0 16px}.grid-footer{align-items:flex-start;font-size:10px;gap:5px}.grid-footer>span{max-width:140px}.arrangement-footer{font-size:10px}.note-label select{max-width:170px}footer{font-size:10px}}@media(prefers-reduced-motion:no-preference){button{transition:background .1s}}