:root {
  --blue: #3395ff;
  --orange: #ffaf00;
  --red: #ff0000;
  --pink: #f9a3a3;
  --black: #000;
  --white: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--white);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


.blue   { background: var(--blue); }
.orange { background: var(--orange); }
.red    { background: var(--red); }
.pink   { background: var(--pink); }
.black  { background: var(--black); }
.white  { background: var(--white); }
.round  { border-radius: 50%; }

i { display: block; }


.stage {
  width: 1440px;
  height: 900px;
  flex: none;
  transform-origin: center center;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 19px 24px 17px 20px;
}


.layout {
  display: grid;
  grid-template-columns: 227px 206px 529px 377px;
  grid-template-rows: 227px 16px 147px 10px 229px;
  column-gap: 19px;
  flex: none;
}

.eq      { grid-column: 1 / 3; grid-row: 1 / 4; }
.display { grid-column: 3;     grid-row: 1; }
.console { grid-column: 2 / 4; grid-row: 3 / 6; }
.speaker { grid-column: 1;     grid-row: 5; }
.side    { grid-column: 4;     grid-row: 1 / 6; }


.eq {
  display: grid;
  grid-template-columns: 227px 1fr;
  grid-template-rows: 227px 1fr;
  clip-path: polygon(0 0, 100% 0, 100% 227px, 227px 227px, 227px 100%, 0 100%);
}
.eq__left  { grid-column: 1; grid-row: 1 / 3; padding: 43px 0 0 31px; }
.eq__right { grid-column: 2; grid-row: 1;     padding: 31px 0 0 19px; }

.fader {
  display: flex;
  width: 158px;
  height: 314px;
  padding-left: 14px;
}
.fader__ticks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 29px;
  padding-top: 68px;
}
.fader__tick { height: 4px; }
/* .fader__track {
  width: 16px;
  height: 287px;
  margin: 13px 0 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 3px;
} */

.fader__track {
  width: 16px;
  height: 287px;
  margin: 13px 0 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 3px 0;          
}

.fader__handle { flex: none; width: 34px; height: 19px; }

.dial {
  width: 164px;
  height: 164px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10px;
}
.dial__pointer { width: 14px; height: 34px; }


.display { padding: 45px 34px 0 38px; }
.display__screen {
  height: 141px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 29px 0 33px;
}
.eye {
  flex: none;
  width: 102px;
  height: 102px;
  display: grid;
  place-items: center;
}
.pupil { width: 50px; height: 50px; }
.pupil--small { width: 32px; height: 32px; }
.display__mouth { width: 122px; height: 45px; margin-top: 8px; }


.speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
}
.speaker__eye {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
}
.speaker__body {
  width: 123px;
  height: 123px;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 11px;
}
.speaker__slot { width: 20px; height: 35px; }
.speaker__line { width: 96px; height: 5px; margin-top: 13px; }


.console { padding-top: 45px; }

/* .console__strip {
  width: 670px;
  height: 69px;
  margin-left: 42px;
  padding-left: 37px;
  display: flex;
  align-items: center;
} */

.console__strip {
  width: 670px;
  height: 69px;
  margin-left: 42px;
  padding: 0 26px 0 37px;
  display: flex;
}

.console__track {
  flex: 1;
  display: grid;
  align-items: center;
}
.console__track > * { grid-area: 1 / 1; }
.console__bar    { height: 17px; margin-top: 4px; }
.console__button { justify-self: start; width: 63px; height: 35px; }
/* .console__button { flex: none; width: 63px; height: 35px; }
.console__bar    { flex: none; width: 544px; height: 17px; margin-top: 4px; } */

.tape {
  width: 669px;
  height: 197px;
  margin: 37px 0 0 40px;
  display: grid;            
}
.tape > * { grid-area: 1 / 1; }

.tape__lines {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-top: 6px;
}
.tape__line { height: 4px; }

.tape__row { display: flex; align-self: start; }
.tape__row--a { margin-top: 67px; padding-left: 105px; }
.tape__row--b { margin-top: 106px; padding-left: 21px; }
.tape__block { flex: none; width: 87px; height: 17px; }

.tape__row--a .tape__block:nth-child(2) { width: 88px; margin-left: 88px; }
.tape__row--a .tape__block:nth-child(3) { margin-left: 94px; }
.tape__row--b .tape__block:nth-child(2) { margin-left: 82px; }
.tape__row--b .tape__block:nth-child(3) { margin-left: 95px; }
.tape__row--b .tape__block:nth-child(4) { margin-left: 94px; }


.side {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 23px;
}

.indicator {
  width: 313px;
  height: 91px;
  padding: 20px 18px;
}
.indicator__window {
  height: 51px;
  padding: 10px 12px;
}
.indicator__light { width: 67px; height: 31px; }


.knob-row {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-left: 46px;
  margin-top: 46px;
}
.knob {
  flex: none;
  width: 284px;
  height: 284px;
  display: grid;
  place-items: center;
  padding-left: 6px;
}
.knob__center { width: 76px; height: 76px; }

.knob-pin {
  flex: none;
  width: 32px;
  margin-top: -17px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.knob-pin__tip   { width: 32px; height: 32px; }
.knob-pin__stick { width: 11px; height: 139px; }


.sliders {
  margin-top: auto;
  align-self: stretch;
  height: 160px;
  display: flex;
  padding: 29px 0 0 43px;
}
.slider {
  width: 73px;
  display: flex;
  justify-content: center;
}
/* .slider__rail {
  width: 8px;
  height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 6px;
} */

.slider__rail {
  width: 8px;
  height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 0;          
}
.slider__cap { flex: none; width: 34px; height: 18px; }


.bottom {
  width: 1391px;
  height: 210px;
  margin: 25px 0 0 5px;
  padding-left: 47px;
  display: flex;
  align-items: flex-start;
}

.piano { display: flex; gap: 50px; margin-top: 33px; }
.key {
  width: 62px;
  height: 156px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.key__mark { width: 13px; height: 57px; }

.pads { display: flex; gap: 55px; margin: 45px 0 0 75px; }
.pad {
  width: 135px;
  height: 135px;
  display: grid;
  place-items: center;
}
.pad__core { width: 101px; height: 101px; }





.fader__track,
.slider__rail,
.console__track { touch-action: none; }

.fader__handle,
.slider__cap,
.console__button { cursor: grab; }
.fader__handle:active,
.slider__cap:active,
.console__button:active { cursor: grabbing; }


.speaker__body { cursor: pointer; }
.speaker__slot,
.pupil--small { transition: transform .25s ease, background-color .25s ease; }

.speaker.is-on .pupil--small { background: var(--red); }
.speaker.is-on .speaker__slot { transform: translateY(66px); }


.indicator__light { cursor: pointer; }
.indicator__window,
.indicator__light { transition: transform .25s ease, background-color .25s ease; }

.indicator.is-on .indicator__window { background: var(--black); }
.indicator.is-on .indicator__light  { transform: translateX(186px); }



.pad {
  cursor: pointer;
  transition: filter .15s ease;
}
.pad.is-pressed {
  filter: brightness(.77);
}



.key {
  cursor: pointer;
}
.key__mark {
  transition: background-color .15s ease;
}
.key.is-pressed .key__mark {
  background: #c4c4c4;
}