* {
  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);
}

#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;
}

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

  display: grid;
  grid-template-columns: 1fr 4rem 1fr;
  grid-template-rows: 1fr;
}

#visualW {
  position: relative;
  width: 100%;
  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;
}

#visual {
  position: relative;
  width: 100%;
  max-width: 60rem;

  display: flex;

  z-index: 2;
}

#visual.glockenspiel {
  max-width: 48rem;
}

#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, #scalesTitle {
  font-weight: bold;
  background-color: var(--color-primary-light);
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

#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: center;
  justify-content: center;
}

#visualSVG.flipMaybe {
  flex-direction: column;
}

#visual.flip {
  transform: translateX(-50%) rotateZ(-90deg) translateY(-50%);
  transform-origin: top right;
}

#visualSVG.flipOld {
  transform: rotateY(180deg);
}

#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, #handnessButton, #stringsButton, #editButton, #fullscreenButton {
  cursor: pointer;
  margin-left: 0.5rem;
}

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

  display: flex;
  align-items: center;
}

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

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

#editButton.on {
  background-color: var(--color-emphasis-fill);
  width: 4rem;
  height: 4rem;
  margin-right: 3rem;
  justify-content: center;
  align-items: center;
}

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

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

#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;
}

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

#infoButton {
  padding: 0;
}

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

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

#editButton.on > #editIcon {
  height: 60%;
}

#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: calc(100% / 13 / 10);
  min-width: 0;

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

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

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

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

#rightHandle {
  height: var(--height-right-handle);
  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%;
  height: 52.39%; /* same as string12 */
}

.string, .spare {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin-left: calc(100% / 13 / 10);

  background-color: var(--color-primary-fill);
  border: 0.24rem solid var(--color-emphasis-fill);

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

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

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

.string.playing {
  background-color: var(--color-primary-border);
}

#visual.xylophone > #visualSVG > .string {
  background-image: url("/static/131/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;
}

.stringOrSpare[data-name="C"] {
  height: 96.08%;
  background-position: 12%; /* these are random, for the wood texture */
}

.stringOrSpare[data-name="C#"] {
  height: 93.35%;
  background-position: 15%;
}

.stringOrSpare[data-name="D"] {
  height: 90.69%;
  background-position: 91%;
}

.stringOrSpare[data-name="D#"],
.stringOrSpare[data-name="Eb"] {
  height: 88.1%;
  background-position: 88%;
}

.stringOrSpare[data-name="E"] {
  height: 85.6%;
  background-position: 17%;
}

.stringOrSpare[data-name="F"] {
  height: 83.16%;
  background-position: 45%;
}

.stringOrSpare[data-name="F#"] {
  height: 80.8%;
  background-position: 58%;
}

.stringOrSpare[data-name="G"] {
  height: 78.5%;
  background-position: 37%;
}

.stringOrSpare[data-name="A"] {
  height: 74.09%;
  background-position: 85%;
}

.stringOrSpare[data-name="Bb"], .stringOrSpare[data-name="A#"] {
  height: 71.98%;
  background-position: 20%;
}

.stringOrSpare[data-name="B"] {
  height: 69.93%;
  background-position: 66%;
}

.stringOrSpare[data-name="C"][data-rightoct="1"] {
  height: 67.93%;
  background-position: 11%;
}

.stringOrSpare[data-name="C#"][data-rightoct="1"] {
  height: 66%;
  background-position: 5%;
}

.stringOrSpare[data-name="D"][data-rightoct="1"] {
  height: 64.12%;
  background-position: 72%;
}

.stringOrSpare[data-name="D#"][data-rightoct="1"],
.stringOrSpare[data-name="Eb"][data-rightoct="1"] {
  height: 62.29%;
  background-position: 90%;
}

.stringOrSpare[data-name="E"][data-rightoct="1"] {
  height: 60.53%;
  background-position: 31%;
}

.stringOrSpare[data-name="F"][data-rightoct="1"] {
  height: 58.8%;
  background-position: 10%;
}

.stringOrSpare[data-name="F#"][data-rightoct="1"] {
  height: 57.12%;
  background-position: 80%;
}

.stringOrSpare[data-name="G"][data-rightoct="1"] {
  height: 55.5%;
  background-position: 40%;
}

.stringOrSpare[data-name="A"][data-rightoct="1"] {
  height: 52.39%;
  background-position: 25%;
}

.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;
}

#visualSVG.flip > #fretNums > .fretNum,
#visualSVG.flip > .stringArea > .fretMark > .fretSymbol {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

.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, #scalesMore {
  cursor: pointer;
  font-size: 0.9rem;
}

#presetsW {
  width: 100%;
  max-width: 50rem;

  display: flex;
}

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

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

#scalesW {
  margin-left: 0;
}

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

#keys {
  justify-content: flex-end;
}

.preset {
  margin-left: 0.5rem;
}

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

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

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

#infoButton.retracted,
#handnessButton.retracted,
#presetsW.retracted,
#keysMore.retracted,
.sparesMoreW.retracted,
#scalesMore.retracted,
#sparesMore.retracted,
#sparesAll.retracted,
.string.retracted,
.spare.retracted,
#spares.retracted,
#editButton.retracted,
#fullscreenButton.retracted,
#stringsButton.retracted,
.stringArea.retracted,
#controls.retracted,
#linkButton.retracted,
#links.retracted,
#visualW.retracted,
#tempoSlider.retracted,
#volumeSlider.retracted {
  display: none;
}