* {
  box-sizing: border-box;
}

#wrapper, #outer {
  /* for 2d (normally has fitView) */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

div.outer,
div.wrapper {
  min-width: auto;
}

#wrapper {
  --height-left-handle: 70%;
  --height-right-handle: 40%;
  --height-delta: calc(30% / 12);
  --height-octb: 2rem;
}

#messageWrapper {
  top: 2rem;
}

div.info.top {
  border-bottom-right-radius: 2rem;
  border-bottom-left-radius: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.info.tempo {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  padding-top: 1.5rem;
}

.info.infoBoard {
  margin-top: 0;
  margin-bottom: 2rem;
}

.info.infoControls {
  margin-bottom: 0;
  margin-top: 1.5rem;
}

#tempoSlider, #volumeSlider {
  width: 100%;
  max-width: 40rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem 0 0.5rem;

  display: flex;
  flex-direction: row;
}

#tempoSlider {
  margin-top: 0.5rem;
}

#tempoRange, #volumeRange {
  width: 100%;
}

img.volumeIcon {
  pointer-events: none;
  width: 1.2rem;
  height: 1.2rem;
}

#linkTop {
  margin-bottom: 1.6rem; /* space for message. */
  width: 100%;
  display: flex;
}

#okButtonLink {
  margin-bottom: 0.5rem;
  margin-left: auto;
  height: 2rem;
  width: 6rem;
}

#visualW {
  --string-radius: 0.5rem;
  --width-pianokey-max: 4.6rem;
  --width-pianokey-min: 0.8rem;
  --piano-trim-half: calc(var(--string-radius) * 0.3);
  --height-box-shadow: calc(2 * var(--piano-trim-half));
  --controls-margin-top: calc(var(--height-octb) + 1rem + var(--height-box-shadow));
  --octs: 1;
  --keys: 7;

  position: relative;
  width: 100%;
  max-width: min(100%, calc(var(--width-pianokey-max) * var(--keys)));
  padding: 0;
  margin-top: 1rem;
  height: calc(100% - 3.25rem - 2.75rem); /* bpm, vol */

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#controls {
  position: relative;
  max-width: 40rem;
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
}

#controls.editing {
  margin-top: var(--controls-margin-top);
}

#octaveControls {
  position: absolute;
  bottom: calc(-1 * var(--controls-margin-top));
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  max-width: 50rem;

  display: flex;
}

.octB {
  width: 3rem;
  height: var(--height-octb);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#highOctMinus {
  margin-left: auto;
}

#visual {
  position: relative;
  width: calc(100% - 1rem);
  margin-bottom: var(--height-box-shadow);

  display: flex;

  z-index: 2;
}

#outer.fullScreen > #wrapper > #visualW > #visual {
  max-width: 100%;
}

#spares {
  border: 0.15rem dotted var(--color-emphasis-border);
  height: 9rem;
  min-height: 9rem;
  min-width: 7rem;
  max-width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
  overflow-x: scroll;

  display: flex;
  align-items: center;
}

#spares.dragactive, .string.dragsuggest {
  border-style: dotted;
  border-color: var(--color-secondary-text);
}

#spares.dragactive > * {
  pointer-events: none; /* prevent crossing #spares children from causing dragleave on #spares */
}

#spares.dragzone, .string.dragzone {
  border-color: var(--color-secondary-text);
  border-style: solid;
}

#spares.dragactive:hover, .string.dragactive:hover {
  border: 0.15rem solid var(--color-secondary-text);
}

#sparesTitle {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

#sparesTitle, #keysTitle, #filtersTitle, #scalesTitle {
  font-weight: bold;
  background-color: var(--color-primary-light);
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

#scalesTitle {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#visualSVG {
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

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

/* 1 of oct1 to oct7, maybe with oct 0 and/or oct 8 */

#visualW[data-keys="7"] {
  --string-radius: 0.8rem;
  --keys: 7;
}

#visualW[data-keys="8"] {
  --string-radius: 0.8rem;
  --keys: 8;
}

#visualW[data-keys="9"] {
  --string-radius: 0.8rem;
  --keys: 9;
}

/* 2 of oct1 to oct7, maybe with oct 0 and/or oct 8 */

#visualW[data-keys="14"] {
  --string-radius: 0.7rem;
  --keys: 14;
}

#visualW[data-keys="15"] {
  --string-radius: 0.7rem;
  --keys: 15;
}

#visualW[data-keys="16"] {
  --string-radius: 0.7rem;
  --keys: 16;
}

/* 3 of oct1 to oct7, maybe with oct 0 and/or oct 8 */

#visualW[data-keys="21"] {
  --string-radius: 0.6rem;
  --keys: 21;
}

#visualW[data-keys="22"] {
  --string-radius: 0.6rem;
  --keys: 22;
}

#visualW[data-keys="23"] {
  --string-radius: 0.6rem;
  --keys: 23;
}

/* 4 of oct1 to oct7, maybe with oct 0 and/or oct 8 */

#visualW[data-keys="28"] {
  --string-radius: 0.5rem;
  --keys: 28;
}

#visualW[data-keys="29"] {
  --string-radius: 0.5rem;
  --keys: 29;
}

#visualW[data-keys="30"] {
  --string-radius: 0.5rem;
  --keys: 30;
}

/* 5 of oct1 to oct7, maybe with oct 0 and/or oct 8 */

#visualW[data-keys="35"] {
  --string-radius: 0.4rem;
  --keys: 35;
}

#visualW[data-keys="36"] {
  --string-radius: 0.4rem;
  --keys: 36;
}

#visualW[data-keys="37"] {
  --string-radius: 0.4rem;
  --keys: 37;
}

/* 6 of oct1 to oct7, maybe with oct 0 or oct 8 */

#visualW[data-keys="42"] {
  --string-radius: 0.3rem;
  --keys: 42;
}

#visualW[data-keys="43"] {
  --string-radius: 0.3rem;
  --keys: 43;
}

#visualW[data-keys="44"] {
  --string-radius: 0.3rem;
  --keys: 44;
}

/* Every oct1 to oct7, maybe with oct 0 and/or oct 8 */

#visualW[data-keys="49"] {
  --string-radius: 0.2rem;
  --keys: 49;
}

#visualW[data-keys="50"] {
  --string-radius: 0.2rem;
  --keys: 50;
}

#visualW[data-keys="51"] {
  --string-radius: 0.2rem;
  --keys: 51;
}

#visualW[data-keys="52"] {
  --string-radius: 0.2rem;
  --keys: 52;
}

#ratioSVG {
  width: 100%;
  height: 100%;
}

#board {
  pointer-events: none;
}

#board, #fretNums {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: 1fr;
}

#fretNums {
  top: -1.2rem;
  justify-items: center;
  font-size: 0.8rem;
}

#PlayButton {
  z-index: 1;
  width: 4rem;
  height: 3rem;
}

#linkButton, #namesButton, #stringsButton, #editButton, #fullscreenButton {
  cursor: pointer;
  margin-left: 0.5rem;
}

#linkButton, #infoButton, #namesButton, #stringsButton, #editButton, #fullscreenButton {
  z-index: 2;
  width: 2rem;
  height: 2rem;

  display: flex;
  align-items: center;
}

#namesButton {
  width: auto;
}

#fullscreenButton {
  user-select: none;
  display: flex;
}

#namesButton.on, #editButton.on {
  border: 0.15rem solid var(--color-emphasis-border);
}

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

#editButton.on.down {
  background-color: var(--color-primary-border);
}

.drumToggle {
  width: 100%;
  display: flex;
  align-items: center;
  opacity: 0.5;
  padding: 0;
}

.toggleScale {
  padding: 0.4rem;
}

#stringsIcon {
  padding: 20%;
}

#infoW {
  display: flex;
  justify-content: flex-start;
}

#infoW.on {
  position: static;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#rightW {
  grid-column: 3 / span 1;
  display: flex;
  justify-content: flex-end;
}

#infoButton {
  padding: 0;
}

#infoButton.on {
  margin: 0;
  width: auto;
  padding: 0 0.4rem 0 0;
}

#linkIcon, #infoIcon, #namesIcon, .drumIcon, #playIcon, #stringsIcon, #editIcon, #fullscreenIcon {
  pointer-events: none;
  height: 100%;
}

#infoIcon {
  padding: 0.3rem;
}

#playIcon {
  max-height: 2rem;
}

#hammer {
  margin: 0;
  transform-origin: bottom center;
  transform-box: fill-box;
  stroke: var(--color-emphasis-fill);
  fill: var(--color-emphasis-fill);
}

.loopCircle {
  transform-box: fill-box;
}

g {
  z-index: -1;
}

g.primary {
  z-index: auto;
}

#ttButton {
  margin-top: 0.5rem;
}

#howtoEmbed {
  margin-top: 0.5rem;
  border: 0.12rem solid var(--color-emphasis-border);
}

#links {
  width: 100%;
  max-width: 40rem;
  padding: 0 0.5rem 0 0.5rem;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.linksLine {
  margin: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hugTop {
  margin-top: 0;
}

.url {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0;
  display: flex;
  width: 100%;
}

#linkEmbedding {
  font-size: 1.1rem;
}

.copy {
  width: 1.1rem;
  margin-top: 0;
  padding: 0;
  border: none;
  display: flex;
}

#hereEmbedding {
  margin-top: 2rem;
}

#leftHandle, #rightHandle {
  /*
  flex: 0.5 1 0;
  width: 100%;
  */
  height: 100%;
  margin-left: 0.5rem;
  min-width: 0;

  background-color: var(--color-primary-fill);

  background-image: url("/static/90/images/wood.png");
  background-repeat: repeat;

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

#leftHandle {
  /* border-right: 0.1rem solid var(--color-emphasis-border); */
}

#rightHandle {
  margin-right: calc(100% / 13 / 10);
  /* border-left: 0.1rem solid var(--color-emphasis-border); */
}

#leftHandle.xbass, #leftHandle.xalto, #leftHandle.xsoprano {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

#leftHandle.gbass, #leftHandle.galto, #leftHandle.gsoprano {
  border-radius: 10%;
  width: 60%;
  height: 100%;
}

#rightHandle.xbass, #rightHandle.xalto, #rightHandle.xsoprano {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

#rightHandle.gbass, #rightHandle.galto, #rightHandle.gsoprano {
  border-radius: 10%;
  width: 50%;
}

.pianoBW {
  position: relative;
  width: 100%;
  height: 100%;
  /*
  margin-left: calc(100% / 13 / 10);
  max-width: var(--width-pianokey-max);
  min-width: var(--width-pianokey-min);
  */
  border-bottom-left-radius: var(--string-radius);
  border-bottom-right-radius: var(--string-radius);
  box-shadow: 0 var(--height-box-shadow) 0 0 var(--color-emphasis-fill);

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

.pianoBW.locked {
  box-shadow: 0 var(--height-box-shadow) 0 0 var(--color-primary-text-locked);
}

.pianoBW.pianoMiddle::after {
  content: "P I A N O";
  font-size: 0.8rem;
  width: 5rem;
  text-align: center;
  position: absolute;
  transform: translate(-50%, calc(-100%));
  display: block;
}

.string, .spare {
  cursor: pointer;

  width: 100%;
  height: 100%;

  background-color: var(--color-primary-fill);
  border: 0.12rem solid var(--color-emphasis-border);
  border-bottom-left-radius: var(--string-radius);
  border-bottom-right-radius: var(--string-radius);

  /* prevent browser actions eg scroll, esp for 2d (because preventDefault fails in shadowroot) */
  touch-action: none;

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

.string.blackKey {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-primary-text);
  border-color: var(--color-primary-text);
  border-bottom-left-radius: calc(var(--string-radius) / 2);
  border-bottom-right-radius: calc(var(--string-radius) / 2);
  box-shadow: 0 calc(var(--height-box-shadow) * 0.8) 0 0 var(--color-emphasis-border);
  height: calc(100% * (9 / 15));
  width: calc(100% / 23.5 * 13.7);
  transform: translateX(50%);
  z-index: 2;
}

/* meh
.string.blackKey:focus-visible {
  outline-color: var(--color-primary-light);
}
*/

.string {
  flex: 1 1 0;
  min-width: 0;
}

.string.playing {
  background-color: var(--color-primary-border);
  height: calc(100% + 0.7 * var(--height-box-shadow));
}

.string.blackKey.playing {
  background-color: var(--color-emphasis-border);
  border-color: var(--color-emphasis-border);
  height: calc(100% * (9 / 15) + 0.4 * var(--height-box-shadow));
  box-shadow: 0 calc(var(--height-box-shadow) * 0.4) 0 0 var(--color-emphasis-fill);
}

.stringOct {
  display: none;
  pointer-events: none;
  user-select: none;
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#visualSVG.editing > .pianoBW > .stringOct {
  display: flex;
}

#visual.xylophone > #visualSVG > .string {
  background-image: url("/static/90/images/wood.png");
  background-repeat: repeat;
}

.spare {
  border-width: 0.16rem;
  width: 2rem;
  min-width: 2rem;
  max-width: 2rem;
  height: 100%;
  margin-left: 0.5rem;
  margin-right: 0;
}

.spare:last-child {
  margin-right: 0.5rem;
}

#visualSVG.editing > .string.dragging, .spare.dragging {
  border: 0.24rem dotted var(--color-secondary-text);
}

.spare.dragging {
  visibility: hidden;
}

.dragging {
  z-index: 4;
}

.string.xbass, .string.xalto, .string.xsoprano {
  border-radius: 1rem;
}

.stringName {
  user-select: none;
  font-size: 1.2rem;
  color: var(--color-emphasis-border);
  pointer-events: none;
  visibility: hidden;
}

.string.blackKey > .stringName {
  color: var(--color-primary-fill);
}

.string.locked {
  cursor: auto;
  opacity: 0.18;
  background-color: var(--color-primary-text);
  border-color: var(--color-emphasis-border);
  border-top-color: var(--color-primary-text);
  border-bottom-color: var(--color-primary-text);
}

.string.blackKey.locked {
  opacity: 1;
  background-color: var(--color-primary-text-locked);
  border-color: var(--color-primary-fill);
  box-shadow: 0 calc(var(--height-box-shadow) * 0.8) 0 0 var(--color-primary-text-locked);
  border-top-color: var(--color-primary-text-locked);
}

.string.locked > .stringName {
  opacity: 0;
}

#visualSVG.showNames > .pianoBW > .string > .stringName {
  visibility: visible;
}

.string.inspares {
  cursor: auto;
  pointer-events: none;
  height: 50%;
  opacity: 0.4;
}

.string.inspares[data-num="0"] {
  height: var(--height-left-handle);
}

.string.inspares[data-num="1"] {
  height: calc(var(--height-left-handle) - (1 * var(--height-delta)));
}

.string.inspares[data-num="2"] {
  height: calc(var(--height-left-handle) - (2 * var(--height-delta)));
}

.string.inspares[data-num="3"] {
  height: calc(var(--height-left-handle) - (3 * var(--height-delta)));
}

.string.inspares[data-num="4"] {
  height: calc(var(--height-left-handle) - (4 * var(--height-delta)));
}

.string.inspares[data-num="5"] {
  height: calc(var(--height-left-handle) - (5 * var(--height-delta)));
}

.string.inspares[data-num="6"] {
  height: calc(var(--height-left-handle) - (6 * var(--height-delta)));
}

.string.inspares[data-num="7"] {
  height: calc(var(--height-left-handle) - (7 * var(--height-delta)));
}

.string.inspares[data-num="8"] {
  height: calc(var(--height-left-handle) - (8 * var(--height-delta)));
}

.string.inspares[data-num="9"] {
  height: calc(var(--height-left-handle) - (9 * var(--height-delta)));
}

.string.inspares[data-num="10"] {
  height: calc(var(--height-left-handle) - (10 * var(--height-delta)));
}

.string.inspares[data-num="11"] {
  height: calc(var(--height-left-handle) - (11 * var(--height-delta)));
}

.string.inspares[data-num="12"] {
  height: calc(var(--height-left-handle) - (12 * var(--height-delta)));
}

.string.inspares[data-num="13"] {
  height: calc(var(--height-left-handle) - (13 * var(--height-delta)));
}

#visualSVG.editing > .string.inspares {
  pointer-events: auto;
}

#visualSVG.editing > .string.inspares.dragzone, #visualSVG.editing > .string.inspares.dragsuggest {
  opacity: 1;
}

.fret {
  height: 100%;
  width: 10%;
  background-color: var(--color-primary-text);
  opacity: 0.2;
}

.fret.nut {
  width: 25%;
  opacity: 0.7;
}

.fret.prenut {
  width: 0;
  opacity: 0;
}

.fretMark {
  pointer-events: none;
  user-select: none;
  cursor: pointer;
  background-color: var(--color-emphasis-fill);
  stroke: none;
  z-index: 3;
  height: 100%;
  margin-left: 30%;
  border-radius: 50%;
  border: 0.15rem solid var(--color-emphasis-fill);
}

.fretMark.sequence {
  background-color: var(--color-primary-light);
  border: 0.15rem solid var(--color-emphasis-fill);
}

.fretMark.sequence.playing {
  background-color: var(--color-emphasis-fill);
}

svg.svgWords {
  background-color: var(--color-transparent);
  /* Broke epiphany. */
  /* height: 100%; */
}

.fretSymbol {
  pointer-events: none;
  cursor: pointer;
  stroke: none;
}

.fretSymbol.highlight {
  stroke: var(--color-emphasis-fill);
}

.fretDot {
  pointer-events: none;
  stroke: none;
  background-color: var(--color-primary-text);
  opacity: 0.5;
  border-radius: 50%;
  width: 0;
  padding: 1.5%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fretDot.fdTop {
  top: 25%;
}

.fretDot.fdBottom {
  top: 75%;
}

.sparesMoreW {
  height: 100%;
  margin-left: 0.5rem;

  display: flex;
  align-items: flex-end;
}

#sparesMore, #sparesAll, #keysMore, #filtersMore {
  cursor: pointer;
  font-size: 0.9rem;
}

#presetsW {
  width: 100%;
  max-width: 50rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;

  display: flex;
}

#keysWW, #filtersW {
  max-width: 100%;
  margin-top: 2rem;
  margin-left: auto;

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

#keysWW {
  align-items: flex-end;
}

#keysW {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#scalesW {
  width: 100%;
  margin-top: 0.5rem;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#filtersW {
  margin-left: 0;
}

#keys, #filters {
  margin-top: 0.5rem;
  display: flex;
}

#filters {
  flex-direction: column;
}

#keys {
  flex-direction: column;
  align-items: flex-end;
}

.keyRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.scaleRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.preset {
  margin-left: 0.5rem;
}

.keysMoreW, .filtersMoreW {
  width: 100%;
  margin-top: 0.5rem;

  display: flex;
  justify-content: flex-end;
}

.keysMoreW {
  margin-top: 1rem;
}

#dummy {
  z-index: 4;
  margin: 0;
  border: 0.16rem dotted var(--color-secondary-text);
}

#leftHandle.retracted,
#rightHandle.retracted,
.pianoBW.retracted,
#infoButton.retracted,
#namesButton.retracted,
#presetsW.retracted,
#keysMore.retracted,
.sparesMoreW.retracted,
#filtersMore.retracted,
#sparesMore.retracted,
#sparesAll.retracted,
.string.retracted,
.spare.retracted,
#spares.retracted,
#editButton.retracted,
#fullscreenButton.retracted,
#stringsButton.retracted,
.stringArea.retracted,
#octaveControls.retracted,
#controls.retracted,
#linkButton.retracted,
#links.retracted,
#visualW.retracted,
#tempoSlider.retracted,
#volumeSlider.retracted {
  display: none;
}