:root {
  --white: #ffffff;
  --black: #111111;
  --grey: #9a9a9a;
  --accent: #ff47d4;
  --accent-soft: #ffd3f4;
  --playhead: #e6e6e6;
  /* driven by the output level from script.js */
  --live: #ffffff;
}

html {
  min-height: 100%;
  background-color: var(--live);
}

body {
  background-color: transparent;
  display: flex;
  justify-content: center;
  padding: 40px 16px;
  /* 64 columns of Iosevka (0.5em each) must fit the viewport minus gutters */
  font-family: 'Iosevka', ui-monospace, Menlo, monospace;
  font-size: clamp(9px, calc((100vw - 32px) / 32.4), 20px);
  font-variant-ligatures: none;
  line-height: 1.3;
  color: var(--black);
  /* the rack reaches past the screen into the gutters */
  overflow-x: clip;
}

.Screen {
  width: 64ch;
}

.Line {
  height: 1.3em;
  white-space: pre;
}

.Ink,
.Accent {
  color: var(--accent);
}

.Muted {
  color: var(--grey);
}

.Bold {
  font-weight: 700;
}

.Btn {
  cursor: pointer;
  user-select: none;
}

.Btn:hover {
  background: var(--accent-soft);
}

.Btn.is-on {
  background: var(--accent);
  color: var(--white);
}

/* knobs turn by dragging vertically */
.Knob {
  cursor: ns-resize;
  user-select: none;
  touch-action: none;
}

.Fader {
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}

/* synth rack: one 64ch synth per screen, scrolled sideways.
   the side padding leaves room for the piano roll's note names */
.Rack {
  position: relative;
  display: flex;
  gap: 6ch;
  margin: 0 -6ch;
  padding: 0 6ch;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 6ch;
  scrollbar-width: none;
}

.Rack::-webkit-scrollbar {
  display: none;
}

.Synth {
  flex: 0 0 64ch;
  scroll-snap-align: start;
}

/* piano roll */
.RollWrap {
  position: relative;
  margin: 1.3em 0;
}

.RollLabels {
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: 1.5ch;
  text-align: right;
  font: inherit;
  color: var(--grey);
  user-select: none;
}

.Roll {
  display: block;
  width: 64ch;
  font: inherit;
  white-space: pre;
  cursor: cell;
  user-select: none;
  touch-action: none;
}

/* rows of black keys get lighter dots */
.Roll .k {
  color: var(--grey);
}

.Roll .p {
  background: var(--playhead);
}

.Roll .m {
  background: var(--accent);
}

.Roll .h {
  background: var(--black);
  color: var(--accent);
}

.Roll .c {
  background: var(--black);
  color: var(--white);
}