.timeline-panel{margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.42)}
.timeline-heading{margin-bottom:12px}.measure-presets{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:#e6e1d5}.measure-presets span{padding:0 6px;color:var(--muted);font-size:.68rem;font-weight:800}.measure-presets button{width:34px;height:30px;border:0;border-radius:999px;background:transparent;color:#6d7068;font-size:.72rem;font-weight:900;cursor:pointer}.measure-presets button.active{color:#fff;background:var(--night)}
.timeline-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.timeline-tools button{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#faf8f2;font-size:.72rem;font-weight:800;cursor:pointer}.timeline-tools .timeline-primary{color:#fff;border-color:var(--night);background:var(--night)}.timeline-tools label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.7rem;font-weight:700}.timeline-tools input{width:60px;height:34px;border:1px solid var(--line);border-radius:7px;background:#faf8f2;padding:0 7px}.timeline-tools select{height:34px;border:1px solid var(--line);border-radius:7px;background:#faf8f2;padding:0 7px}.timeline-help{margin-left:auto;color:var(--muted);font-size:.68rem}
.timeline-viewport{overflow:auto;max-height:510px;border:1px solid #2d302a;border-radius:11px;background:#171914;scrollbar-color:#565b51 #22251f}.timeline-canvas{position:relative;min-height:466px;color:#f7f3e9;user-select:none}.timeline-corner{position:sticky;left:0;z-index:8;display:grid;place-items:center;width:52px;height:46px;color:#92988d;background:#20231d;border-right:1px solid #363a32;border-bottom:1px solid #363a32;font-size:.62rem;font-weight:900}.measure-number{position:absolute;top:0;height:46px;padding:8px;border-right:1px solid #4a4f44;border-bottom:1px solid #363a32;color:#aeb4a6;font-size:.65rem;font-weight:800;background:#20231d}.measure-number strong{display:block;color:#f4f0e7;font-size:.82rem}.roll-key{position:absolute;left:0;z-index:7;display:flex;align-items:center;justify-content:flex-end;width:52px;padding-right:6px;border-right:1px solid #363a32;border-bottom:1px solid #252820;color:#868c81;background:#20231d;font-size:.58rem}.roll-row{position:absolute;left:52px;border-bottom:1px solid #252820;background:#1a1d18}.roll-row.black{background:#151712}.measure-line,.beat-line{position:absolute;top:46px;bottom:0;width:1px;pointer-events:none}.measure-line{z-index:2;background:#555b50}.beat-line{background:#292d27}.chord-lane-block{position:absolute;top:5px;z-index:5;height:36px;padding:5px 10px;border:1px solid #a77320;border-radius:7px;color:#271d0c;background:linear-gradient(135deg,#f2c661,#e5a72f);box-shadow:0 3px 9px #0004;overflow:hidden;cursor:grab}.chord-lane-block.selected{outline:2px solid #fff;outline-offset:1px}.chord-lane-block.dragging{opacity:.4}.chord-lane-block strong{display:block;font-size:.72rem;white-space:nowrap}.chord-lane-block span{display:block;font-size:.52rem;opacity:.65}.roll-note{position:absolute;z-index:4;height:13px;border:1px solid #45947f;border-radius:3px;background:linear-gradient(180deg,#8fd8c4,#62b49e);box-shadow:0 1px 4px #0004;pointer-events:none}.timeline-playhead{position:absolute;top:0;bottom:0;z-index:9;width:2px;background:#ef6f56;box-shadow:0 0 8px #ef6f56;pointer-events:none}.empty-roll-message{position:absolute;top:190px;left:52px;right:0;text-align:center;color:#70766c;font-size:.8rem}
.timeline-header{position:sticky;top:0;z-index:10;height:46px;background:#20231d;box-shadow:0 5px 12px #0007}.timeline-header .timeline-corner{z-index:12}.roll-key{transform:translateX(var(--roll-scroll-x,0));box-shadow:4px 0 8px #0004}
@media(max-width:850px){.timeline-panel{padding:14px}.timeline-heading{align-items:flex-start;flex-direction:column}.timeline-help{width:100%;margin-left:0}.measure-presets{width:100%;justify-content:center}.timeline-viewport{max-height:430px}}