@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

:root {
    --m-body: #ffffff;
    --m-dark: #000000;
    --m-accent: #ff0000;
}

body {
    background-color: #f0f0f0;
    margin: 0;
    font-family: 'Inter', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

#machine-case {
    background: var(--m-body);
    width: 90vw;
    max-width: 800px;
    padding: 20px;
    border: 4px solid var(--m-dark);
}

.machine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.master-controls { display: flex; gap: 10px; align-items: center; }

.control-group { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; }
.control-group input { 
    border: 2px solid var(--m-dark); padding: 5px; 
    font-family: inherit; font-weight: 700; width: 45px;
}

.btn-transport {
    background: var(--m-dark);
    color: white;
    border: none;
    padding: 8px 16px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

#sequencer-grid { display: flex; flex-direction: column; gap: 8px; }
.track { display: flex; align-items: center; gap: 10px; }
.track-label { width: 50px; font-size: 0.6rem; font-weight: 700; }

.steps { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; flex: 1; }

.step {
    aspect-ratio: 1/1;
    background: #eee;
    border: 1px solid #ccc;
    cursor: pointer;
}

.step.active { background: var(--m-dark); border-color: var(--m-dark); }
.step.current { outline: 2px solid var(--m-accent); outline-offset: -2px; }

.piano-track .step.active { background: #3b82f6; border-color: #3b82f6; }