.track{display:flex;align-items:center;gap:10px;color:#fff;height:25px}.track__info{display:flex;align-items:center;height:100%;gap:10px;width:125px}.led{width:8px;height:8px;background-color:var(--accent-green);border-radius:50%;box-shadow:0 0 4px var(--accent-green)}.track__midi_led{width:6px;height:100%;background-color:#3f3f3f;border-radius:2px;border:1px solid #181818}.track__midi_led--active{background-color:var(--accent-green)}.track__name{cursor:default;background-color:var(--button-bg);border-radius:6px;min-width:90px;text-align:center;font-size:.6em;font-weight:700;box-shadow:inset -1px 1px 1px #464646,0 1px 1px #000;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.track__steps{display:flex;gap:6px;height:100%}.step{width:15px;height:100%;border-radius:3px;position:relative;box-shadow:inset 0 1px 1px #ffffff30,0 2px 1px #0c0c0c;background-color:var(--step-inactive-odd)}.step--even{background-color:var(--step-inactive-even)}.step--active{background-color:var(--step-active-odd);box-shadow:inset 0 1px 1px #76bff6,0 2px 1px #0c0c0c}.step--active.step--even{background-color:var(--step-active-even);box-shadow:inset 0 1px 1px #9688e1,0 2px 1px #0c0c0c}.step:after{content:"";position:absolute;top:5px;left:50%;transform:translate(-50%);width:50%;height:2px;border-radius:2px;background-color:#585858;pointer-events:none}.step--active:after{background-color:#b8e0fd}.step--active.step--on{transform:scale(1.05)}.step--active.step--on:after{background-color:#fff}:root{--bg-color: #252525;--button-bg: #2a2a2a;--accent-green: #4ade80;--step-active-even: #7a62f2;--step-active-odd: #3ca9ff;--step-inactive-even: #252525;--step-inactive-odd: #333333}body{background-color:#333;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;font-family:sans-serif;min-width:900px}.controls[data-v-87423dd1]{border-bottom:2px solid #181818;padding-bottom:10px;display:flex;gap:10px}input[data-v-87423dd1]::-webkit-outer-spin-button,input[data-v-87423dd1]::-webkit-inner-spin-button{opacity:1!important;appearance:auto!important;-webkit-appearance:auto!important}input[type=number][data-v-87423dd1]{-moz-appearance:textfield;appearance:textfield}#bpm-input[data-v-87423dd1]{background:var(--step-inactive-odd);color:#fff;font-size:.7rem;text-align:center;font-weight:500;border:none;width:50px;outline:none;height:20px;border-radius:5px}.sequencer[data-v-87423dd1]{background-color:var(--bg-color);display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:8px;width:800px}.info-container[data-v-87423dd1]{display:flex;align-items:center;height:100%;gap:10px;width:125px}.track-sequencer-step[data-v-87423dd1]{width:100%;height:10px;position:relative}.step-head-container[data-v-87423dd1]{background-color:#181818;width:calc(100% - 135px);height:5px;position:absolute;right:0}.step-head[data-v-87423dd1]{width:15px;height:100%;background-color:#393939;border-radius:2px;position:absolute}.controls__play[data-v-87423dd1]{width:20px;height:20px;background:var(--step-active-even);border:none;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}.play-icon[data-v-87423dd1]{width:0;height:0;border-style:solid;border-width:5px 0 5px 10px;border-color:transparent transparent transparent #ffffff;margin-left:2px;transition:transform .3s ease}.stop-icon[data-v-87423dd1]{width:8px;height:8px;background-color:#fff}.controls__play[data-v-87423dd1]:active{transform:scale(.95)}#canvas-waves[data-v-87423dd1]{border:1px solid #333333;border-radius:4px}.controls__bpm[data-v-87423dd1]{width:30px;height:20px;background:transparent;border:none;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}.metronome-icon[data-v-87423dd1]{align-items:center;justify-content:center;width:20px;height:10px;display:flex;gap:2px}.metronome-icon[data-v-87423dd1]:before{content:"";width:8px;height:8px;border-radius:50%;box-sizing:border-box}.metronome-icon[data-v-87423dd1]:after{content:"";width:8px;height:8px;border-radius:50%;box-sizing:border-box}.metronome-icon.controls__bpm--even[data-v-87423dd1]:before{background-color:#ccc;border:none}.metronome-icon.controls__bpm--even[data-v-87423dd1]:after{background-color:transparent;border:1px solid #ccc}.metronome-icon[data-v-87423dd1]:before{background-color:transparent;border:1px solid #ccc}.metronome-icon[data-v-87423dd1]:after{background-color:#ccc;border:none}.metronome-icon.controls__bpm--active.controls__bpm--even[data-v-87423dd1]:before{background-color:var(--step-active-even);border:none}.metronome-icon.controls__bpm--active.controls__bpm--even[data-v-87423dd1]:after{background-color:transparent;border:1px solid var(--step-active-even)}.metronome-icon.controls__bpm--active[data-v-87423dd1]:before{background-color:transparent;border:1px solid var(--step-active-even)}.metronome-icon.controls__bpm--active[data-v-87423dd1]:after{background-color:var(--step-active-even);border:none}.credits[data-v-87423dd1]{margin-top:20px;color:#fff}.credits a[data-v-87423dd1]{color:var(--step-active-even)}.track__context-menu[data-v-87423dd1]{background:#fff;position:fixed;display:flex;flex-direction:column;gap:4px;list-style-type:none;padding:5px 2px;border-radius:4px}.track__context-menu__item[data-v-87423dd1]{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;font-size:13px;color:var(--text-main);border-radius:4px;cursor:default}.track__context-menu__item[data-v-87423dd1]:hover{background-color:var(--step-active-even);color:#fff}.track__context-menu__shortcut[data-v-87423dd1]{color:var(--text-muted);font-size:12px;margin-left:20px;letter-spacing:1px}.track__context-menu__separator[data-v-87423dd1]{height:1px;background-color:#e5e5e5;margin:2spx 2px}.track__context-menu__overlay[data-v-87423dd1]{position:fixed;width:100%;height:100%;top:0;left:0}