:root {
  --header-height: 0rem; /* stylelint-disable-line length-zero-no-unit */
}

.wrapper {
  /* 7 columns. */
  grid-template-columns: auto 1fr 1fr 4fr 1fr 1fr auto;
  /* 4 rows. */
  grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content);
}

#outer.outer2d {
  position: absolute;
  height: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

#tinyLogoWrapper {
  z-index: 500;
}

#heading {
  grid-column: 1 / span 7;

  z-index: 500;
}

#surfaceWrapper {
  grid-column: 1 / span 7;
  grid-row: 2 / span 1;

  margin: 0;
  padding: 0;

  display: flex;
}

#surface {
  cursor: pointer;

  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 0;

  height: 100%;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#surface.embedded {
  border: 0.05rem solid var(--color-emphasis-fill);
}

#scale {
  pointer-events: none;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;

  height: 100%;

  display: flex;
  flex-direction: column;
}

.octave {
  height: 100%;

  display: flex;
  flex-direction: column;

  box-shadow: inset 0 0.18rem var(--color-emphasis-border);
}

.note {
  height: 100%;
  width: 2rem;

  box-shadow: inset 0 0.1rem var(--color-emphasis-border);
}

.note.on {
  background-color: var(--color-emphasis-fill);
}

#volume {
  pointer-events: none;
  width: 100%;

  display: flex;
  justify-content: center;
}

#softer,
#louder {
  width: 50%;

  display: flex;
  justify-content: center;
}

.flipHleft {
  transform: rotateY(0.5turn);
}