:root{--bg:#0d1018;--panel:#171c29;--panel2:#22283a;--text:#f4f6ff;--muted:#aab0c6;--accent:#7c9cff;--border:#30374d;--active:#84ffa8;--beatA:#101623;--beatB:#1a2233;--white:#eef2ff;--black:#131722;--note:#ffe66d}*{box-sizing:border-box}html{font-size:16px}body{margin:0;min-width:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#151c2d,var(--bg));color:var(--text)}header{padding:12px;border-bottom:1px solid var(--border);background:rgba(13,16,24,.96)}h1,h2,p{margin-top:0}h1{font-size:1.22rem;margin-bottom:3px}h2{font-size:1rem;margin-bottom:10px}p{color:var(--muted)}header p{font-size:.78rem;margin-bottom:10px}.header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}button,.fileLabel{border:1px solid var(--border);background:var(--panel2);color:var(--text);border-radius:12px;padding:10px 11px;cursor:pointer;font-weight:800;min-height:42px;text-align:center;font-size:.86rem}button:active,.fileLabel:active{transform:scale(.98)}button:hover,.fileLabel:hover{border-color:var(--accent)}.fileLabel input{display:none}main{display:grid;grid-template-columns:1fr;gap:10px;padding:10px;width:100%;max-width:980px;margin:0 auto}.panel{min-width:0;background:rgba(23,28,41,.96);border:1px solid var(--border);border-radius:16px;padding:12px;overflow:hidden}label{display:grid;gap:6px;margin-bottom:10px;color:var(--muted);font-size:.82rem}input,select{width:100%;background:#0d111b;color:var(--text);border:1px solid var(--border);border-radius:11px;padding:10px;min-height:42px}.settings-grid{display:grid;grid-template-columns:1fr 96px;gap:8px}.settings-grid label:nth-child(1),.settings-grid label:nth-child(4),.settings-grid label:nth-child(5){grid-column:1/-1}.tracks #trackList{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity}.track{flex:0 0 138px;padding:10px;border:1px solid var(--border);border-radius:13px;cursor:pointer;background:#101622;scroll-snap-align:start}.track.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,156,255,.16)}.track strong{font-size:.85rem}.track small{display:block;color:var(--muted);font-size:.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sequencer{padding:0}.sequencer-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:12px 12px 6px}.sequencer-head p{font-size:.78rem;margin-bottom:0}.sequencer-head strong{background:#0d111b;border:1px solid var(--border);padding:7px 9px;border-radius:999px;white-space:nowrap;font-size:.78rem}.sequencer-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px 10px}.sequencer-tools.hidden,#barIndicator.hidden{display:none}#grid{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 12px 14px;-webkit-overflow-scrolling:touch}.grid-table{display:grid;grid-template-columns:74px repeat(16,minmax(30px,1fr));gap:4px;align-items:center;min-width:0;width:100%}.step-label,.bar-label,.drum-label,.key-label{color:var(--muted);text-align:center;font-size:.67rem;user-select:none}.bar-label{font-weight:900;color:var(--text);opacity:.8}.drum-label{text-align:left;font-weight:800;position:sticky;left:0;z-index:5;background:var(--panel);border-radius:8px;padding:7px 4px;font-size:.66rem;line-height:1.05}.cell{height:32px;border:1px solid var(--border);border-radius:8px;cursor:pointer;touch-action:manipulation}.cell.beat-even{background:var(--beatA)}.cell.beat-odd{background:var(--beatB)}.cell.beat-start{border-left-color:rgba(244,246,255,.48);border-left-width:2px}.cell.on{background:var(--active);box-shadow:0 0 10px rgba(132,255,168,.25)}.cell.playing{outline:2px solid var(--accent);outline-offset:1px}.piano-wrap{max-height:360px;overflow:auto;padding-bottom:10px}.piano-grid{display:grid;grid-template-columns:84px repeat(16,30px);gap:3px;align-items:center;min-width:max-content}.key-label{height:28px;position:sticky;left:0;z-index:6;border:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-weight:800;border-radius:4px;font-size:.68rem}.key-white{background:var(--white);color:#111827}.key-black{background:var(--black);color:#f8fafc}.piano-cell{width:30px;height:28px;border:1px solid var(--border);border-radius:5px;cursor:pointer;touch-action:manipulation}.piano-cell.white{background:#182032}.piano-cell.black{background:#111622}.piano-cell.beat-even.white{background:#172033}.piano-cell.beat-odd.white{background:#202943}.piano-cell.beat-even.black{background:#0f1420}.piano-cell.beat-odd.black{background:#151b2b}.piano-cell.beat-start{border-left-color:rgba(244,246,255,.5);border-left-width:2px}.piano-cell.on,.piano-cell.on.white,.piano-cell.on.black,.piano-cell.on.beat-even,.piano-cell.on.beat-odd{background:var(--note)!important;border:2px solid #fff3a3!important;box-shadow:0 0 0 2px rgba(255,230,109,.25),0 0 14px rgba(255,230,109,.65)!important;position:relative}.piano-cell.on::after{content:"";position:absolute;inset:7px;border-radius:3px;background:#111827;opacity:.72}.piano-cell.playing{outline:2px solid var(--active);outline-offset:1px}.row-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hint{font-size:.78rem;line-height:1.35}footer{padding:12px;color:var(--muted);font-size:.78rem}@media (min-width:760px){header{display:flex;justify-content:space-between;align-items:center;gap:16px}.header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end}.settings-grid{grid-template-columns:1fr 110px 110px 1fr 1fr}.settings-grid label:nth-child(1),.settings-grid label:nth-child(4),.settings-grid label:nth-child(5){grid-column:auto}.track{flex-basis:155px}.grid-table{grid-template-columns:96px repeat(16,40px);width:max-content}.cell{height:38px}.drum-label{font-size:.74rem;padding:8px}.piano-grid{grid-template-columns:96px repeat(16,36px)}.piano-cell{width:36px;height:30px}.key-label{height:30px}.piano-wrap{max-height:460px}}@media (min-width:1120px){main{max-width:1400px;grid-template-columns:260px 1fr 300px}.settings{grid-column:1/2}.tracks{grid-column:1/2}.sequencer{grid-column:2/3;grid-row:1/4}.inspector{grid-column:3/4;grid-row:1/4}.settings-grid{grid-template-columns:1fr}.settings-grid label:nth-child(1),.settings-grid label:nth-child(4),.settings-grid label:nth-child(5){grid-column:1}.tracks #trackList{display:block;overflow:visible}.track{margin-bottom:8px}.grid-table{grid-template-columns:100px repeat(16,42px)}.piano-grid{grid-template-columns:100px repeat(16,38px)}}