body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #493e36;
}
.drum-machine {
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2%;
    color: #dcd2cd;
}
.controls {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-bottom: 2%;
    width: 90%;
    background: #717446;
    padding: 1%;
    border-radius: 0.5vw;
}
.control-row {
    display: flex;
    gap: 2vw;
    flex-wrap: wrap;
}
.scene-button {
    padding: 0.5vw 1vw;
    font-size: 1.2vw;
    background: #dcd2cd;
    border: 0.1vw solid #aca4a4;
    cursor: pointer;
    transition: background 0.2s;
    color: #493e36;
}
.scene-button.active {
    background: #b5d75d;
    color: #493e36;
}
.slider-container {
    position: relative;
    width: 100%;
}
#loopLength {
    width: 100%;
    -webkit-appearance: none;
    height: 1vw;
    background: #dcd2cd;
    border-radius: 0.5vw;
    outline: none;
}
#loopLength::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 2vw;
    height: 2vw;
    background: #8ab052;
    border-radius: 50%;
    cursor: pointer;
}
.markers {
    position: absolute;
    top: 2vw;
    width: 100%;
    height: 1vw;
    pointer-events: none;
}
.marker {
    position: absolute;
    width: 0.2vw;
    height: 1vw;
    background: #aca4a4;
}
#beatDisplay {
    position: absolute;
    top: -2.5vw;
    width: 4vw;
    text-align: center;
    background: #dcd2cd;
    border: 0.1vw solid #aca4a4;
    border-radius: 0.3vw;
    font-size: 1.2vw;
    color: #493e36;
}
.sequencer-container {
    width: 90%;
    display: grid;
    grid-template-columns: 6% 94%;
    gap: 0.1% 1%;
    align-items: center;
}
.instrument-button {
    font-size: 1.4vw;
    text-align: right;
    padding-right: 1%;
    background: #8ab052;
    border: 0.1vw solid #aca4a4;
    cursor: pointer;
    transition: background 0.2s;
    color: #493e36;
}
.instrument-button.muted {
    background: #aca4a4;
    color: #493e36;
}
.sequencer {
    display: grid;
    grid-template-columns: repeat(64, calc(100% / 64 - 0.1%));
    gap: 0.1%;
    height: 2vw;
}
.play-sequencer {
    display: grid;
    grid-template-columns: repeat(64, calc(100% / 64 - 0.1%));
    gap: 0.1%;
    height: 2vw;
}
.step {
    width: 100%;
    height: 2vw;
    background: #dcd2cd;
    border: 0.1vw solid #aca4a4;
    cursor: pointer;
}
.play-step {
    width: 100%;
    height: 2vw;
    background: #aca4a4;
    border: 0.1vw solid #717446;
    cursor: pointer;
}
.play-active {
    background: #ffeb3b;
}
.active {
    background: #b5d75d;
}
.step.current, .play-step.current {
    border: 0.2vw solid #ffeb3b;
}
.kick-controls {
    width: 90%;
    background: #a87357;
    padding: 2%;
    margin-top: 2%;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.snare1-controls {
    width: 90%;
    background: #8ab052;
    padding: 2%;
    margin-top: 2%;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.snare2-controls {
    width: 90%;
    background: #717446;
    padding: 2%;
    margin-top: 2%;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.hat1-controls {
    width: 90%;
    background: #b69084;
    padding: 2%;
    margin-top: 2%;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.hat2-controls {
    width: 90%;
    background: #b67d6d;
    padding: 2%;
    margin-top: 2%;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.slider-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
}
.slider-group label {
    font-size: 1.2vw;
    color: #dcd2cd;
}
input[type="range"][orient="vertical"] {
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
    width: 1vw;
    height: 10vw;
    background: #dcd2cd;
    border-radius: 0.3vw;
}
input[type="range"][orient="vertical"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.5vw;
    height: 1.5vw;
    background: #b5d75d;
    border-radius: 50%;
    cursor: pointer;
}
.master-controls {
    width: 90%;
    background: #5a5a5a;
    padding: 2%;
    margin-top: 2%;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}
.master-controls h3 {
    color: #dcd2cd;
    margin: 0 2vw 0 0;
}