html {
  height: -webkit-fill-available;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;
  overscroll-behavior-x: none;
}

body {
  --c-bg: #000;
  --c-border: #FFF;
  --border-width: 2px;
  --border-gap-factor: 2;
  --border-default: var(--border-width) solid var(--c-border);
  --border-accent: var(--border-width) solid red;
  --space-around-default: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  user-select: none;
  font: bold 10px/16px 'DM Mono', monospace;
  color: #FFF;
  background: var(--c-bg);
  overflow: hidden;
  overscroll-behavior-x: none;
}

a {
  color: inherit;
  /* blue colors for links too */
  text-decoration: inherit;
  /* no underline */
}

.orientationWarning {
  display: none;
}

/*
@media screen and (orientation:portrait) {
    .orientationWarning {
        position: fixed;
        top: 0;
        left: 0;
        padding: 32px;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: black;
        z-index: 1000;
    }

    .pocketsynth {
        display: none;
    }
}
*/

button,
input,
textarea,
select {
  font: bold 10px/16px 'DM Mono', monospace;
}

option {
  color: #000;
  font: normal 16px/16px 'DM Mono', monospace;
}

.pocketsynth {
  margin: 0 auto;
  padding: 0 8px;
}

.speaker {
  position: relative;
  height: 256px;
  box-sizing: border-box;
  border: var(--border-default);
  padding: var(--space-around-default);
  margin: 0 0 var(--space-around-default);
}

.logo {
  position: absolute;
}

.controls {
  position: relative;
  display: grid;
  list-style: none;
  padding: 0;
  margin: 8px 0 16px;
  grid-gap: var(--border-width);
  padding: var(--border-width);
  width: calc(100vw - 2 * var(--border-width) - 16px);

  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

.controls::before,
.controls::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--border-width);
  background: var(--c-border);
  opacity: 0.25;
}

.controls::before {
  transform: translate(0, calc(2 * var(--border-width)));
}

.controls::after {
  transform: translate(0, calc(5 * var(--border-width)));
}

@media (min-width: 480px) {
  .controls {
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .controls {
    width: calc((80px - 2 * var(--border-width)) * 12 + var(--border-width) * 23);
  }
}

#tab {
  padding: 0 var(--space-around-default);
  grid-area: 1 / 1 / 1 / 9;
}

#start {
  grid-area: 2 / 1 / 3 / 3;
}

#rewind {
  grid-area: 2 / 3 / 3 / 5;
}

#forward {
  grid-area: 2 / 5 / 3 / 7;
}

#end {
  grid-area: 2 / 7 / 3 / 9;
}


#start:disabled,
#rewind:disabled,
#forward:disabled,
#end:disabled {
  color: rgba(255, 255, 255, .5);
}

#mode-1 {
  grid-column: 1;
}

#tabs {
  grid-area: 4 / 1 / 7 / 9;
  max-height: 124px;
  padding: 0;
  z-index: 10;
}

@media (min-width: 480px) {
  #tabs {
    grid-area: 1 / 9 / 4 / 25;
  }
}

.tabs__lines {
  overflow: auto;
  height: 100%;
  width: 100%;
  padding: var(--space-around-default);
  margin: 0;
  box-sizing: border-box;
}

.tabs__line {
  list-style: none;
}

.tabs__notes {
  padding: 0;
  display: flex;

}

.tabs__note {
  list-style: none;
  padding: calc(var(--space-around-default) / 2) var(--space-around-default);
}

.hasHover .tabs__note:hover {
  background: #404;
}

.tabs__note.isCurrent {
  background: #F0F;
  z-index: 1;
  box-shadow: 0 0 0 1px black;
}

.button,
.select {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--c-border);
  text-align: left;
  min-height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);
  margin: 0;
  padding: 0;
  font-size: 16px;
  justify-content: center;
}

.toggle {
  position: relative;
  /* box-shadow: 0 0 0 var(--border-width) var(--c-border); */
}

.hasHover .toggle:hover {
  background: #404;
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg), inset 0 0 0 calc(var(--border-width)) var(--c-bg);
}

.toggle[aria-pressed="true"] {
  background: #F0F;
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 8px 8px rgba(255, 0, 255, .125), inset 0 0 0 calc(var(--border-width)) var(--c-bg), 0 0 128px 0 rgba(0, 255, 255, .5);
  z-index: 1;
}

.hasHover .toggle[aria-pressed="true"]:hover {
  background: #404;
}

.toggleNext::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(2px + var(--border-width));
  height: calc(100% - 2 * var(--border-width));
  background: var(--c-bg);
  z-index: 10;
  transform: translate(-1px, -50%);
}

#mode-1 {}

#mode-2 {}

#mode-3 {}

/*
#type-sawtooth {
    box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);
}

#type-sawtooth[aria-pressed="true"] {
    box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 8px 8px rgba(255,0,255,.125), inset 0 0 0 calc(var(--border-width)) var(--c-bg), 0 0 128px 0 rgba(0,255,255,.5);
}
*/

#type-square {}

#type-sine {}

#type-triangle {}

#vibrato {
  /* box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg); */
}

.buttonSmall {
  font-size: 10px;
}

.buttonSVG {
  pointer-events: none;
  height: 1em;
  width: 1em;
}

.title {
  position: relative;
  z-index: 100;
  font-size: 20px;
  line-height: 40px;
  opacity: 0.5;
  margin: 0;
}

#attribution {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--border-default);
  line-height: 36px;
  box-sizing: border-box;
  margin-top: calc(var(--border-gap-factor) * var(--border-width));
  color: white;
  text-decoration: none;
}

#authorLink,
#contributeLink {
  box-sizing: border-box;
  width: 100%;
  padding: 0 calc(var(--space-around-default) * 2);
}

@media (min-width: 480px) {
  #attribution {
    flex-direction: row;
  }

  #authorLink,
  #contributeLink {
    width: 50%;
  }
}

#authorLink {}

#contributeLink {
  display: flex;
  align-items: center;
  padding-left: calc(var(--space-around-default) * 2);
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);
}

#contributeLink::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background: transparent 0 0 no-repeat;
  background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);

}

#contributeLinkLabel {}

.promo {
  position: relative;
  display: block;
  border: var(--border-default);
  padding: 2px calc(var(--space-around-default) * 2) 0;
  line-height: 36px;
  box-sizing: border-box;
  border-top: 0;
  color: white;
  text-decoration: none;
}

.promo:active {
  color: black;
}

.promo::before {
  content: '';
  position: absolute;
  top: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  left: var(--border-width);
  z-index: -1;
}

.hasHover .promo:hover::before {
  background: #022;
}

.promo:active::before {
  background: cyan;
}


.keyboard {
  position: relative;
}

#markNext,
#markNextNext {
  position: absolute;
  top: 0;
  width: 84px;
  pointer-events: none;
  transition: left linear 100ms, height linear 100ms;
  pointer-events: none;
}

#markNext {
  z-index: 21;
}

#markNextNext {
  z-index: 20;
}

#markNext::before,
#markNextNext::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--border-width);
}

#markNext::before {
  background: #F0F;
  transform: translate(0, calc(-3 * var(--border-width)));
}

#markNextNext::before {
  background: #088;
  transform: translate(0, calc(-6 * var(--border-width)));
}

#markNext::after,
#markNextNext::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 81px;
  border-radius: 100%;
  background: #F0F;
}

#markNext::after {
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 var(--border-width) var(--c-bg), 0 0 8px 8px rgba(255, 0, 255, .125);
  transform: translate(-50%, 100%);
}

#markNextNext::after {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 var(--border-width) var(--c-bg);
  transform: translate(-50%, calc(100% + 3px));
  background: #088;
}

.keys {
  display: grid;
  list-style: none;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: var(--border-width);
  padding: var(--border-width);
  width: calc(100vw - 2 * var(--border-width) - 16px);
  height: calc((80px - 2 * var(--border-width)) * 2 + var(--border-width) * 3);
}

@media (min-width: 1000px) {
  .keys {
    width: calc((80px - 2 * var(--border-width)) * 12 + var(--border-width) * 23);
    height: calc((80px - 2 * var(--border-width)) * 2 + var(--border-width) * 3);
  }
}

.key {
  position: relative;
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);
  background: var(--c-bg);
  padding: 8px 0;
  color: var(--c-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}


@media (min-width: 480px) {
  .key {
    padding: 8px;
  }
}

@media (min-width: 800px) {
  .key {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

.hasHover .key:not(.isActive):hover {
  background: #022;
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg), inset 0 0 0 calc(var(--border-width)) var(--c-bg);
}

.key.isActive {
  background: cyan;
  color: black;
  _box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg), inset 0 0 0 calc(var(--border-width)) var(--c-bg);
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 8px 8px rgba(255, 0, 255, .125), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg), inset 0 0 0 calc(var(--border-width)) var(--c-bg), 0 0 128px 0 rgba(0, 255, 255, .5);
  z-index: 1;

}

.key::after {
  content: '';
  position: absolute;
  top: calc(var(--border-width) * -1);
  right: 0;
  bottom: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
}

.black::after {
  right: calc(var(--border-width) * -1);
}

.black {
  z-index: 10;
  background: var(--c-bg);
  box-shadow: 0 0 0 var(--border-width) var(--c-border), 0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);
}

.label,
.note,
.keyCode {
  pointer-events: none;
  width: 100%;
  text-align: center;
}

.label,
.note {
  overflow: hidden;
}


@media (min-width: 800px) {

  .label,
  .note,
  .keyCode {
    width: auto;
  }
}

.keyCode {
  font-size: 20px;
  margin-left: auto;
}

.note {
  display: none;
}

.key.isActive>.label {
  display: none;
}

.key.isActive>.note {
  display: block;
}