:root{color-scheme:dark;--bg:#101216;--top:#14181d;--panel:#171b21;--panel-alt:#1e242b;--field:#232a32;--line:#2e3944;--text:#f3f6f8;--muted:#9aa7b2;--accent:#1fb7a6;--warm:#f0a35e;--hot:#ff6f91;--blue:#6aa8ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;font-family:"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--bg)}button,input{font:inherit}.music-shell{display:grid;grid-template-rows:76px minmax(0,1fr) 34px;width:100vw;min-width:980px;height:100vh;background:var(--bg)}.topbar{display:grid;grid-template-columns:260px 1fr auto;gap:18px;align-items:center;padding:0 18px;border-bottom:1px solid var(--line);background:var(--top)}h1{margin:0;font-size:24px}.brand-block p{margin:2px 0 0;color:var(--muted);font-size:12px}.transport{display:flex;gap:8px;align-items:center}.transport button,.project-panel button{min-width:92px;height:34px;border:1px solid #3a4652;color:var(--text);background:#24303a;font-weight:700;cursor:pointer}.transport button:hover,.project-panel button:hover,.step-button:hover{border-color:var(--warm)}.transport button:disabled{opacity:.48;cursor:default}.transport .primary,.playing .transport .primary{background:var(--accent);border-color:#68e5d8;color:#08110f}.playing .transport .primary{background:var(--hot);border-color:#ff9aae;color:#16070a}.bpm-control{display:grid;grid-template-columns:auto 190px 46px;gap:10px;align-items:center;color:var(--muted);font-weight:700}.bpm-control input{accent-color:var(--accent)}.bpm-control strong{color:var(--text);text-align:right}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:0}.project-panel{padding:16px;border-right:1px solid var(--line);background:var(--panel)}.project-panel button{display:block;width:100%;margin:0 0 8px}.label{margin:0 0 10px;color:var(--muted);font-weight:800}.muted{margin:0;color:var(--muted);line-height:1.55}.divider{height:1px;margin:18px 0;background:var(--line)}.pattern-card{margin-top:22px;border:1px solid var(--line);background:var(--panel-alt);padding:14px}.pattern-card span,.pattern-card small{display:block;color:var(--muted)}.pattern-card strong{display:block;margin:6px 0;color:var(--text)}.sequencer-panel{min-width:0;padding:20px;background:var(--bg)}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-header h2{margin:0;font-size:18px}.panel-header span{color:var(--muted)}.sequencer-wrap{height:100%;overflow:auto}.sequencer-grid{display:grid;grid-template-columns:176px repeat(16,46px);gap:0;align-items:center;min-width:912px}.step-header{height:30px;display:grid;place-items:center;color:var(--muted);font-size:12px}.lane{display:grid;grid-template-columns:82px 1fr;align-items:center;height:48px;margin-right:14px;color:var(--text);font-weight:750}.lane-meter{position:relative;height:8px;border-radius:999px;background:#27313d;overflow:hidden}.lane-meter span{position:absolute;inset:0 auto 0 0;width:var(--vol);background:linear-gradient(90deg,var(--accent),var(--warm));border-radius:999px}.step-button{width:36px;height:34px;margin:4px;border:1px solid #394550;background:var(--field);cursor:pointer}.step-button.active{border-color:#7af4e8;background:var(--accent);box-shadow:0 0 0 2px rgba(31,183,166,.14)}.step-button.playhead{outline:2px solid var(--warm);outline-offset:2px}.step-button.active.playhead{background:linear-gradient(135deg,var(--accent),var(--warm))}.statusbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:0 18px;border-top:1px solid var(--line);background:var(--top);color:var(--muted);font-size:13px}.statusbar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:980px){body{overflow:auto}.music-shell{min-width:0;height:auto;min-height:100vh;grid-template-rows:auto auto 34px}.topbar{grid-template-columns:1fr;padding:14px}.transport{flex-wrap:wrap}.workspace{grid-template-columns:1fr}.project-panel{border-right:0;border-bottom:1px solid var(--line)}.sequencer-panel{min-height:520px}.bpm-control{grid-template-columns:auto minmax(140px,1fr) 46px}}@media(max-width:520px){.transport button{flex:1 1 120px}.sequencer-panel{padding:14px}.project-panel{padding:14px}}