.content {
  display: flex;
  flex-direction: column;

  width: 100%;

  background: var(--colour_mantle);
}

.content input[type='number'] {
  width: 4rem;
}

.content.full {
  flex-direction: row-reverse;
}

.title {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  margin: 0;
  padding: 0;

  font-size: 120px;

  writing-mode: vertical-rl;

  color: var(--colour_text);
  text-shadow: 0.25em 2em rgba(var(--colour_red_raw), 0.4);
  opacity: 0.25;

  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.eye_container {
  position: absolute;
  left: 50%;
  bottom: 100%;

  transform: translate(-50%, 100%);

  .full & {
    flex: 1;

    position: relative;
    left: unset;
    bottom: unset;

    transform: unset;
  }
}

.controls {
  position: absolute;
  bottom: 10vh;
  left: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 2rem;

  background: var(--colour_white);

  transform: translateX(-50%);

  .full & {
    position: relative;
    bottom: unset;
    left: unset;

    padding: 1rem;

    transform: unset;

    border-radius: 0;
  }
}

.dual {
  display: flex;

  &:first-of-type {
    margin-bottom: 0.5rem;
  }

  &:last-of-type {
    margin-top: 0.5rem;
  }

  & > * {
    margin-right: 12px;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;

  input {
    margin-left: 1rem;
  }
}

.tone-control {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.5rem;

  margin-bottom: 0.5rem;

  input {
    min-width: unset;

    &[type='range'] {
      width: 7rem;
    }
  }
}