@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/Lato/Lato-Bold.woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Lato/Lato-Medium.woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Lato/Lato-Semibold.woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Lato/Lato-Regular.woff2");
}
@font-face {
  font-family: "Lato";
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/Lato/Lato-Italic.woff2");
}
@font-face {
  font-family: "YAM";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Lato/Lato-Light.woff2") format("woff2");
  unicode-range: U+0221E; /* ∞ */
  size-adjust: 120%;
}
:root {
  --logo: url("/images/logo.png");
  --background: #ffffff url("../images/textures/ricepaper_v3.png");
  --panel-background: transparent;
  --panel-border: 1px solid red;
  --metronome-button-disabled: #c0c0c0;
  --metronome-button-enabled: #222222;
  --toolbar-button-disabled: #ffffff76;
  --toolbar-button-enabled: #222222;
  --toolbar-button-hover: #c00000;
  --toolbar-record-armed: #ff0000;
  --toolbar-wakelock-active: #b24a2c;
  --track-colour-muted: #a0a0a0;
  --track-colour-deleting: #a0a0a0;
  --playlist-colour-deleting: #a0a0a0;
  --beat-off: black;
  --beat-on: red;
  --info-title-text: #222222;
  --info-detail-text: #222222;
  --info-icon: url("../images/save.svg");
  --info-icon-disabled: url("../images/save-disabled.svg");
  --time-signature-none: #bfbfbf;
  --loop-enabled: #c63800;
  --ding-enabled: #c63800;
  --knob-background-opacity: 40%;
  --knob-ticks: #222222;
  --knob-labels: #222222;
  --wheel-border: #22222220;
  --text: #222222;
  --text-contrast: #222222;
  --text-muted: #666666;
  --text-placeholder: #b0b0b0;
  --text-disabled: #a0a0a0;
  --text-editing: #222222;
  --text-locked: #dc322f;
  --text-selected: #222222;
  --icon: #222222;
  --icon-disabled: #999999;
  --icon-locked: #dc322f;
  --button-text: #666666;
  --button-background: rgba(255, 255, 255, 0.9);
  --button-background-translucent: #666666;
  --button-background-transparent: rgba(192, 192, 192, 0.1);
  --button-border: 1px solid #222222;
  --checkbox-background-unchecked: url("/images/checkbox-unchecked.svg") no-repeat center / contain;
  --checkbox-background-checked: url("/images/checkbox-checked.svg") no-repeat center / contain;
  --input-background: #ffffff;
  --select-background: #ffffff;
  --playlist-title-background: rgba(255, 128, 0, 0.2509803922);
  --playlist-title-text: #222222;
  --playlist-tracks-background: #fefefe40;
  --playlist-tracks-text: #444444;
  --editor-background: #c0c0c040;
  --editor-section-background: #ffffff;
  --editor-subsection-background: #fcfcfc;
  --editor-subsection-img-none: grayscale(100%) opacity(25%);
  --editor-subsection-img-disabled: grayscale(100%) opacity(50%);
  --statistics-history-background: transparent;
  --role-count-in-colour: #d69574;
  --role-anacrusis-colour: #cbb469;
  --role-intro-colour: #df8880;
  --role-verse-colour: #b3bc69;
  --role-verse1-colour: #64aa6f;
  --role-chorus-colour: #84b5d2;
  --role-chorus1-colour: #3e7eb3;
  --role-bridge-colour: #a7a8cb;
  --role-turnaround-colour: #da8aaa;
  --role-outro-colour: #86c0b5;
  --role-other-colour: #cb96b2;
  --role-other1-colour: #71a9a0;
  --role-other2-colour: #b29f69;
  --role-other3-colour: #7197b8;
  --role-count-in-text: #1d4b63;
  --role-anacrusis-text: #21305f;
  --role-intro-text: #1a5f66;
  --role-verse-text: #2c2758;
  --role-verse1-text: #2c2758;
  --role-chorus-text: #5d3822;
  --role-chorus1-text: #5d3822;
  --role-bridge-text: #504f2f;
  --role-turnaround-text: #1e6147;
  --role-outro-text: #542c33;
  --role-other-text: #2a553e;
  --role-other1-text: #4f3035;
  --role-other2-text: #2b3654;
  --role-other3-text: #553e2a;
}

[data-theme=dark] {
  --logo: url("/images/dark/logo.png");
  --background: #0f0f10 url("../images/textures/45degreee_fabric.webp");
  --panel-background: #0f0f10;
  --panel-border: 1px solid #7a7a7f;
  --metronome-button-disabled: rgba(38, 139, 210, 0.6);
  --metronome-button-enabled: #268bd2;
  --toolbar-button-disabled: #7a7a7f;
  --toolbar-button-enabled: #9a9a9e;
  --toolbar-button-hover: #dc322f;
  --toolbar-record-armed: #ff0000;
  --toolbar-wakelock-active: #b24a2c;
  --track-colour-muted: #7a7a7f;
  --track-colour-deleting: #7a7a7f;
  --playlist-colour-deleting: #7a7a7f;
  --beat-off: rgba(122, 122, 127, 0.45);
  --beat-on: rgba(220, 50, 47, 0.9);
  --info-title-text: #d6d6d8;
  --info-detail-text: #d6d6d8;
  --info-icon: url("../images/dark/save.svg");
  --info-icon-disabled: url("../images/dark/save-disabled.svg");
  --knob-background-opacity: 0%;
  --knob-ticks: #b9b9bc;
  --knob-labels: rgba(185, 185, 188, 0.9);
  --wheel-border: #7a7a7f;
  --loop-enabled: #dc322f;
  --ding-enabled: #dc322f;
  --text: #b9b9bc;
  --text-contrast: #1f1f21;
  --text-label: #9a9a9e;
  --text-muted: #7a7a7f;
  --text-disabled: #343438;
  --text-placeholder: #7a7a7f;
  --text-editing: #1f1f21;
  --text-locked: rgba(220, 50, 47, 0.9);
  --text-selected: #f2f2f3;
  --icon: #b9b9bc;
  --icon-disabled: #7a7a7f;
  --icon-locked: rgba(220, 50, 47, 0.9);
  --button-text: #b9b9bc;
  --button-background: #9a9a9e;
  --button-background-translucent: #9a9a9e;
  --button-background-transparent: rgba(154, 154, 158, 0.1);
  --button-border: 1px solid #b9b9bc;
  --checkbox-background-unchecked: url("/images/dark/checkbox-unchecked.svg") no-repeat center / contain;
  --checkbox-background-checked: url("/images/dark/checkbox-checked.svg") no-repeat center / contain;
  --input-background: #b9b9bc;
  --select-background: #b9b9bc;
  --playlist-title-background: #343438;
  --playlist-title-text: #9a9a9e;
  --playlist-tracks-background: #2a2a2d;
  --playlist-tracks-text: #b9b9bc;
  --editor-background: #2a2a2d;
  --editor-section-background: #b9b9bc;
  --editor-subsection-background: #b9b9bc;
  --editor-subsection-img-none: grayscale(100%) opacity(35%);
  --editor-subsection-img-disabled: grayscale(100%) opacity(50%);
  --statistics-history-background: #1f1f21;
}

main {
  box-sizing: border-box;
  background: inherit;
  width: fit-content;
  height: 693px;
  min-width: 0;
  margin: 0;
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
  border: none;
  overflow-y: hidden;
  overflow-x: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 660px;
  grid-template-areas: "metronome playlist editor";
  column-gap: 8px;
  align-items: stretch;
}

div.panel {
  width: 353px;
  background: var(--panel-background);
  border: var(--panel-border);
  border-radius: 16px;
}

div.metronome {
  grid-area: metronome;
}

div.playlists {
  grid-area: playlist;
  display: block;
  overflow-y: auto;
  min-height: 0;
}

div.editor {
  grid-area: editor;
  display: block;
  overflow-y: auto;
  min-height: 0;
}
div.editor yam-editor {
  padding: 0;
}

div.windmill {
  grid-column: 2;
  grid-row: 1;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.windmill.hidden {
  display: none;
}

div.windmill::before {
  content: "";
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border-top: 8px solid rgba(255, 128, 0, 0.6274509804);
  border-right: 2px solid transparent;
  animation: windmill 0.8s linear infinite;
}

@keyframes windmill {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  main {
    width: 100%;
    padding: 0px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    column-gap: 0px;
  }
  div.panel {
    width: 100dvw;
    border: none;
    border-radius: 0px;
  }
  div.metronome {
    grid-column: 1;
    grid-row: 1;
  }
  div.metronome.hidden {
    display: none;
  }
  div.playlists {
    grid-column: 1;
    grid-row: 1;
  }
  div.playlists.hidden {
    display: none;
  }
  div.editor {
    grid-column: 1;
    grid-row: 1;
  }
  div.editor.hidden {
    display: none;
  }
  div.windmill {
    grid-column: 1;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  main {
    width: 100%;
    height: 100%;
    padding: 0px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    column-gap: 0px;
  }
  div.panel {
    box-sizing: border-box;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 8px;
    border: none;
    border-radius: 0px;
  }
  div.metronome {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: start;
    width: fit-content;
    height: 100%;
  }
  div.metronome.hidden {
    display: none;
  }
  div.playlists {
    grid-column: 1;
    grid-row: 1;
  }
  div.playlists.hidden {
    display: none;
  }
  div.editor {
    grid-column: 1;
    grid-row: 1;
  }
  div.editor.hidden {
    display: none;
  }
  div.windmill {
    grid-column: 1;
  }
}
html.settings main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 64px;
  margin-right: 64px;
  color: var(--text);
}
html.settings main div.logo {
  width: 64px;
  height: 64px;
  background-color: transparent;
  background-image: var(--logo);
  background-size: contain;
}
html.settings main h1 {
  display: flex;
  align-items: center;
  column-gap: 12px;
  font-size: 1.5em;
}
html.settings main h1 img {
  width: 64px;
}
html.settings main h2 {
  font-size: 1em;
  margin-top: 16px;
  margin-bottom: 8px;
}
html.settings main img {
  user-select: none;
  -webkit-user-select: none;
}
html.settings main div.settings {
  min-width: 200px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 32px;
}
html.settings main div.settings label {
  width: fit-content;
  align-self: center;
}
html.settings main div.settings label[for=click-track] {
  align-self: start;
}
html.settings main div.settings select {
  width: fit-content;
  min-width: 128px;
  border: 2px solid #ddd;
  background: #eee;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  transition: 0.4s;
}
html.settings main div.settings select, html.settings main div.settings select::picker(select) {
  appearance: base-select;
}
html.settings main div.settings select option {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #ddd;
  background: #eee;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
  transition: 0.4s;
}
html.settings main div.settings input[type=range] {
  width: 200px;
  margin: 0;
}
html.settings main div.volume {
  display: flex;
  align-items: center;
  column-gap: 8px;
}
html.settings main div.volume input[type=text] {
  background: none;
  border: none;
  outline: none;
  width: 3em;
  color: var(--text);
}
html.settings main div.click-track {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 4px;
  column-gap: 4px;
}
html.settings main div.click-track label {
  font-style: italic;
}
html.settings main div.click-track input::-webkit-outer-spin-button, html.settings main div.click-track input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
html.settings main div.click-track input[type=number] {
  -moz-appearance: textfield;
}

@media (max-width: 768px) and (orientation: portrait) {
  html.settings main {
    height: calc(100% - 48px);
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 16px;
    padding-bottom: 0px;
    padding-left: 16px;
    padding-right: 24px;
  }
  html.settings main h1 {
    font-size: 1.2em;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  html.settings main {
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    margin-top: 16px;
    margin-bottom: 32px;
    margin-left: 24px;
    margin-right: 24px;
    overflow-y: scroll;
  }
}
html.statistics main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 64px;
  margin-right: 64px;
  color: var(--text);
}
html.statistics main div.logo {
  width: 64px;
  height: 64px;
  background-color: transparent;
  background-image: var(--logo);
  background-size: contain;
}
html.statistics main h1 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  column-gap: 12px;
  font-size: 1.5em;
}
html.statistics main h1 img {
  width: 64px;
}
html.statistics main h2 {
  font-size: 1em;
  margin-top: 4px;
  margin-bottom: 4px;
}
html.statistics main img {
  user-select: none;
  -webkit-user-select: none;
}
html.statistics main div.statistics {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
}
html.statistics main #playlist {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
}
html.statistics main #playlist div.header {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  column-gap: 12px;
  margin-bottom: 4px;
}
html.statistics main #playlist div.header #title {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  max-width: 256px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  background: none;
  font-size: 1em;
  font-weight: bold;
}
html.statistics main #playlist div.header #interval {
  grid-column: 2;
  grid-row: 1;
  padding-left: 4px;
  padding-right: 4px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto;
  column-gap: 8px;
}
html.statistics main #playlist div.header #interval label {
  font-size: 0.9em;
  color: #a0a0a0;
  cursor: pointer;
}
html.statistics main #playlist div.header #interval input[type=radio] {
  display: none;
}
html.statistics main #playlist div.header #interval input[type=radio]:checked + label {
  font-weight: bold;
  color: var(--text-selected);
}
html.statistics main #playlist div.history {
  grid-column: 1;
  grid-row: 2;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 4px;
  background: var(--statistics-history-background);
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
html.statistics main #playlist div.history::-webkit-scrollbar {
  display: none;
}
html.statistics main #playlist div.history ul {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
html.statistics main #playlist div.history ul li {
  padding-top: 2px;
  padding-bottom: 2px;
}
html.statistics main #playlist div.history ul li div.track {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 8px;
}
html.statistics main #playlist div.history ul li div.track .title {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  max-width: 256px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  background: none;
  font-size: 0.9em;
}
html.statistics main #playlist div.history ul li div.track yam-bar-graph {
  grid-column: 2;
  grid-row: 1;
  width: 256px;
  height: 32px;
}
html.statistics main #playlist.hidden {
  display: none;
}
html.statistics main #track div.header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  row-gap: 4px;
}
html.statistics main #track div.header #title {
  grid-row: 1;
  grid-column: 1/4;
  font-style: italic;
}
html.statistics main #track div.header #time-signature {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  justify-items: center;
  height: 48px;
}
html.statistics main #track div.header #time-signature img {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  visibility: hidden;
}
html.statistics main #track div.header #time-signature span.icon {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: var(--icon);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
html.statistics main #track div.header #time-signature span.icon.hidden {
  display: none;
}
html.statistics main #track div.header #time-signature span.icon-stave {
  grid-column: 1;
  grid-row: 1;
  mask-image: url("/images/time-signatures/stave.svg");
}
html.statistics main #track div.header #time-signature span.icon-tactus {
  grid-column: 1;
  grid-row: 1;
  mask-image: url("/images/time-signatures/tactus/4.svg");
}
html.statistics main #track div.header #time-signature span.icon-figura {
  grid-column: 1;
  grid-row: 1;
  mask-image: url("/images/time-signatures/figura/4.svg");
}
html.statistics main #track div.header #time-signature span.icon-common {
  grid-column: 1;
  grid-row: 1;
  mask-image: url("/images/time-signatures/common.svg");
}
html.statistics main #track div.header #time-signature span.icon-cut {
  grid-column: 1;
  grid-row: 1;
  mask-image: url("/images/time-signatures/cut.svg");
}
html.statistics main #track div.header #tempo {
  grid-row: 2;
  grid-column: 2;
  justify-self: center;
}
html.statistics main #track div.header #bars {
  grid-row: 2;
  grid-column: 3;
  justify-self: end;
}
html.statistics main #track div.summary {
  display: grid;
  grid-template-columns: minmax(120px, max-content);
  row-gap: 4px;
}
html.statistics main #track div.summary label {
  grid-column: 1;
  font-size: 0.9em;
  font-weight: 300;
}
html.statistics main #track div.summary span {
  grid-column: 2;
  font-size: 0.9em;
  font-weight: 600;
}
html.statistics main #track div.history {
  display: grid;
  grid-template-columns: minmax(120px, max-content);
  row-gap: 8px;
}
html.statistics main #track div.history label {
  grid-column: 1;
  font-size: 0.9em;
  font-weight: 300;
}
html.statistics main #track div.history span {
  grid-column: 2;
  font-size: 0.9em;
  font-weight: 600;
}
html.statistics main #track div.history yam-bar-graph {
  grid-column: 2;
  height: 32px;
  max-width: 256px;
  background: transparent;
}
html.statistics main #track div.history.month yam-bar-graph {
  grid-column: 1/3;
  max-width: 384px;
}
html.statistics main #track.hidden {
  display: none;
}

@media (max-width: 768px) and (orientation: portrait) {
  html.statistics main {
    height: calc(100% - 48px);
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 16px;
    padding-bottom: 0px;
    padding-left: 16px;
    padding-right: 24px;
  }
  html.statistics main h1 {
    font-size: 1.2em;
  }
  html.statistics main #playlist div.history ul li .title {
    font-size: 0.8em;
  }
  html.statistics main #playlist div.history ul li div.track yam-bar-graph {
    width: 208px;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  html.statistics main {
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    grid-template-columns: auto;
    margin-top: 16px;
    margin-bottom: 32px;
    margin-left: 24px;
    margin-right: 24px;
    overflow-y: scroll;
  }
  html.statistics main #playlist div.history ul li .title {
    font-size: 0.9em;
  }
  html.statistics main #playlist div.history ul li div.track yam-bar-graph {
    width: 320px;
  }
}
main.about {
  box-sizing: border-box;
  height: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 64px;
  margin-right: 64px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--text);
}
main.about div.logo {
  width: 64px;
  height: 64px;
  background-color: transparent;
  background-image: var(--logo);
  background-size: contain;
}
main.about h1 {
  display: flex;
  align-items: center;
  column-gap: 12px;
  font-size: 1.5em;
}
main.about h1 img {
  width: 64px;
}
main.about h2 {
  font-size: 1em;
  margin-top: 16px;
  margin-bottom: 8px;
}
main.about span.icon {
  box-sizing: border-box;
  width: 44px;
  background-color: var(--icon);
  aspect-ratio: 1;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
main.about span.icon-metronome {
  mask-image: url("/images/metronome.svg");
  mask-size: 32px;
}
main.about span.icon-playlist {
  mask-image: url("/images/playlist.svg");
  mask-size: 32px;
}
main.about span.icon-edit {
  mask-image: url("/images/edit.svg");
  mask-size: 32px;
}
main.about span.icon-record {
  mask-image: url("/images/record.svg");
  mask-size: 32px;
}
main.about span.icon-import {
  mask-image: url("/images/import.svg");
  mask-size: 32px;
}
main.about span.icon-export {
  mask-image: url("/images/export.svg");
  mask-size: 32px;
}
main.about span.icon-reset {
  mask-image: url("/images/reset.svg");
  mask-size: 32px;
}
main.about span.icon-fullscreen {
  mask-image: url("/images/fullscreen.svg");
  mask-size: 32px;
}
main.about span.icon-wakelock {
  mask-image: url("/images/wakelock.svg");
  mask-size: 32px;
}
main.about span.icon-github {
  width: 44px;
  mask-image: url("/images/github-mark.svg");
  mask-size: 36px;
}
main.about img {
  user-select: none;
  -webkit-user-select: none;
}
main.about a {
  font-size: 0.9em;
  text-decoration: none;
  color: steelblue;
}
main.about a.github {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 60px 1fr;
  align-items: center;
}
main.about p {
  max-width: 60%;
  margin-top: 0px;
  margin-bottom: 8px;
  font-size: 0.9em;
}
main.about p.license {
  margin-top: 4px;
  font-size: 0.8em;
}
main.about ol {
  margin-top: 0px;
}
main.about div.guide {
  display: block;
}
main.about ul.menu {
  list-style-type: none;
}
main.about ul.menu img {
  height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
}
main.about ul.menu li {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 60px 1fr;
  align-items: center;
}

@media (max-width: 768px) and (orientation: portrait) {
  main.about {
    height: calc(100% - 48px);
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 16px;
    padding-bottom: 0px;
    padding-left: 16px;
    padding-right: 24px;
  }
  main.about h1 {
    font-size: 1.2em;
  }
  main.about ul {
    padding-left: 12px;
    padding-right: 24px;
  }
  main.about p {
    max-width: 100%;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  main.about {
    width: calc(100% - 48px);
    height: calc(100% - 48px);
    margin-top: 16px;
    margin-bottom: 32px;
    margin-left: 24px;
    margin-right: 24px;
    overflow-y: scroll;
  }
  main.about div.guide {
    display: flex;
    flow-direction: column;
  }
}
main.unsupported {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  color: var(--text);
}
main.unsupported div.logo {
  width: 64px;
  height: 64px;
  background-color: transparent;
  background-image: var(--logo);
  background-size: contain;
}
main.unsupported h1 {
  display: flex;
  align-items: center;
  column-gap: 12px;
  font-size: 1.5em;
}
main.unsupported h1 img {
  width: 64px;
}
main.unsupported a {
  font-size: 0.9em;
  text-decoration: none;
  color: steelblue;
}
main.unsupported div#unsupported {
  margin-top: 128px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid grey;
  border-radius: 4px;
}
main.unsupported div#unsupported div {
  margin-bottom: 32px;
}
main.unsupported div#unsupported ul {
  margin-top: 8px;
  list-style: inside;
}

toolbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  padding-right: 8px;
}
toolbar div.menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 32px;
}
toolbar div.menu div.left-menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 0px;
}
toolbar div.menu div.right-menu {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas: "settings" "fullscreen" "wakelock" "theme" "about";
}
toolbar img {
  width: 36px;
}
toolbar button {
  box-sizing: border-box;
  width: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
  border: none;
  outline: none;
  display: inline-block;
  background-color: var(--toolbar-button-enabled);
  aspect-ratio: 1;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  transition: opacity 0.125s ease-in-out, transform 0.2s ease-in-out;
}
toolbar button:disabled {
  display: none;
  background-color: var(--toolbar-button-disabled);
}
toolbar #reset {
  mask-image: url("/images/reset.svg");
  mask-size: 30px;
}
toolbar #metronome {
  mask-image: url("/images/metronome.svg");
  mask-size: 30px;
}
toolbar #playlist {
  mask-image: url("/images/playlist.svg");
  mask-size: 30px;
}
toolbar #edit {
  mask-image: url("/images/edit.svg");
  mask-size: 30px;
}
toolbar #load {
  mask-image: url("/images/import.svg");
  mask-size: 30px;
}
toolbar #save {
  mask-image: url("/images/export.svg");
  mask-size: 30px;
}
toolbar #record {
  mask-image: url("/images/record.svg");
  mask-size: 30px;
}
toolbar #record.armed {
  background-color: var(--toolbar-record-armed);
}
toolbar #record.recording {
  animation: recording 2s infinite;
}
toolbar #settings {
  grid-area: settings;
  mask-image: url("/images/settings.svg");
  mask-size: 30px;
}
toolbar #fullscreen {
  grid-area: fullscreen;
  mask-image: url("/images/fullscreen.svg");
  mask-size: 30px;
}
toolbar #wakelock {
  grid-area: wakelock;
  mask-image: url("/images/wakelock.svg");
  mask-size: 30px;
}
toolbar #theme {
  grid-area: theme;
  mask-image: url("/images/theme.svg");
  mask-size: 30px;
}
toolbar #about {
  grid-area: about;
  mask-image: url("/images/about.svg");
  mask-size: 30px;
}
toolbar #about.hidden {
  display: none;
}
toolbar #oops {
  grid-area: about;
  mask-image: none;
  background-color: transparent;
  background-image: url("/images/warning.svg");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}
toolbar #oops.hidden {
  display: none;
}
toolbar a {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 6px;
  padding-right: 6px;
}
toolbar #reset:hover {
  background-color: var(--toolbar-button-hover);
}
toolbar #settings {
  display: none;
}
toolbar #bug {
  display: none;
}
toolbar #wakelock.active {
  background-color: var(--toolbar-wakelock-active);
}

toolbar.metronome #metronome {
  display: none;
}
toolbar.metronome #playlist {
  display: none;
}
toolbar.metronome #edit {
  display: none;
}

toolbar.playlist #metronome {
  display: none;
}
toolbar.playlist #playlist {
  display: none;
}
toolbar.playlist #edit {
  display: none;
}

toolbar.statistics #save {
  display: block;
}

@media (max-width: 768px) and (orientation: portrait) {
  toolbar {
    width: calc(100vw - 4px);
    padding-left: 4px;
    padding-right: 4px;
  }
  toolbar div.menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 8px;
  }
  toolbar div.menu div.left-menu {
    width: fit-content;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    column-gap: 4px;
  }
  toolbar div.menu div.right-menu {
    width: fit-content;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    grid-template-areas: "settings fullscreen wakelock theme about";
    column-gap: 4px;
  }
  toolbar.metronome #playlist {
    display: block;
  }
  toolbar.metronome #load {
    display: none;
  }
  toolbar.metronome #save {
    display: none;
  }
  toolbar.metronome.editable #edit {
    display: block;
  }
  toolbar.playlist #reset {
    display: none;
  }
  toolbar.playlist #metronome {
    display: block;
  }
  toolbar.playlist #edit {
    display: none;
  }
  toolbar.playlist #fullscreen {
    display: none;
  }
  toolbar.playlist #wakelock {
    display: none;
  }
  toolbar.editor #reset {
    display: none;
  }
  toolbar.editor #metronome {
    display: block;
  }
  toolbar.editor #playlist {
    display: block;
  }
  toolbar.editor #edit {
    display: none;
  }
  toolbar.editor #load {
    display: none;
  }
  toolbar.editor #save {
    display: none;
  }
  toolbar.editor #fullscreen {
    display: none;
  }
  toolbar.editor #wakelock {
    display: none;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  toolbar {
    grid-column: 2;
    grid-row: 1;
    height: 100vh;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    z-index: 2;
  }
  toolbar div.menu {
    padding-top: 4px;
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 8px;
  }
  toolbar div.menu div.left-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  toolbar div.menu div.right-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  toolbar.metronome #playlist {
    display: block;
  }
  toolbar.metronome #load {
    display: none;
  }
  toolbar.metronome #save {
    display: none;
  }
  toolbar.metronome.editable #edit {
    display: block;
  }
  toolbar.playlist #reset {
    display: none;
  }
  toolbar.playlist #metronome {
    display: block;
  }
  toolbar.playlist #fullscreen {
    display: none;
  }
  toolbar.playlist #wakelock {
    display: none;
  }
  toolbar.editor #reset {
    display: none;
  }
  toolbar.editor #metronome {
    display: block;
  }
  toolbar.editor #playlist {
    display: block;
  }
  toolbar.editor #edit {
    display: none;
  }
  toolbar.editor #load {
    display: none;
  }
  toolbar.editor #save {
    display: none;
  }
  toolbar.editor #fullscreen {
    display: none;
  }
  toolbar.editor #wakelock {
    display: none;
  }
}
@keyframes recording {
  0%, 100% {
    background-color: #ff0000;
  }
  50% {
    background-color: #400000;
  }
}
div.metronome {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "pads pads pads" "info info info" "metrics loop ding" "bpm bpm bpm" "metronome metronome metronome";
  justify-items: center;
  align-items: start;
}
div.metronome yam-pads {
  grid-area: pads;
  width: 300px;
  height: 80px;
  outline: none;
  overflow: hidden;
}
div.metronome yam-info {
  grid-area: info;
  justify-self: stretch;
  margin-left: 12px;
  margin-right: 12px;
}
div.metronome div.metrics {
  box-sizing: border-box;
  grid-area: metrics;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 4px;
  height: 48px;
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}
div.metronome div.metrics yam-time-signature {
  box-sizing: border-box;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
}
div.metronome div.metrics yam-mm {
  box-sizing: border-box;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
}
div.metronome yam-loop {
  box-sizing: border-box;
  grid-area: loop;
  justify-self: center;
  height: 100%;
  outline: none;
}
div.metronome yam-ding {
  box-sizing: border-box;
  grid-area: ding;
  justify-self: center;
  height: 100%;
  outline: none;
}
div.metronome div.bpm {
  display: grid;
  grid-area: bpm;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "knob" "wheel";
}
div.metronome div.bpm yam-knob {
  grid-area: knob;
  margin-top: 24px;
  margin-bottom: 24px;
  outline: none;
}
div.metronome div.bpm yam-wheel {
  display: none;
  grid-area: wheel;
  width: 224px;
  outline: none;
}
div.metronome yam-metronome {
  grid-area: metronome;
  align-self: center;
  outline: none;
}
div.metronome yam-time-signature {
  height: 100%;
  outline: none;
}
div.metronome yam-mm {
  height: 100%;
  outline: none;
}
div.metronome yam-loop {
  height: 100%;
  outline: none;
}

@media (max-width: 768px) and (orientation: portrait) {
  div.metronome yam-pads {
    width: calc(100vw - 32px);
  }
  div.metronome div.metrics {
    height: 64px;
  }
  div.metronome yam-mm::part(BPM) {
    font-size: 24px;
  }
  div.metronome yam-wheel {
    display: none;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  div.metronome {
    box-sizing: border-box;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    display: grid;
    grid-template-columns: 50% auto 1fr auto;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "pads pads pads pads" "info info info info" "metrics other other other" "bpm metronome metronome metronome";
    justify-items: center;
    align-items: start;
    column-gap: 2px;
  }
  div.metronome yam-pads {
    width: 100%;
  }
  div.metronome yam-info {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    align-self: center;
  }
  div.metronome div.metrics {
    height: 64px;
  }
  div.metronome div.metrics yam-time-signature {
    justify-self: end;
    margin-right: 16px;
  }
  div.metronome div.metrics yam-mm {
    justify-self: start;
    margin-left: 16px;
  }
  div.metronome div.metrics yam-mm::part(BPM) {
    font-size: 24px;
  }
  div.metronome yam-loop {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }
  div.metronome yam-ding {
    grid-column: 4;
    grid-row: 3;
  }
  div.metronome div.bpm {
    grid-column: 1;
    grid-row: 4;
    justify-items: center;
    align-self: center;
    width: 100%;
  }
  div.metronome div.bpm yam-knob {
    display: none;
  }
  div.metronome div.bpm yam-wheel {
    display: block;
  }
  div.metronome yam-metronome {
    grid-column: 2/5;
    grid-row: 4;
    justify-self: center;
    align-self: center;
    width: 100%;
    margin-left: 12px;
    margin-right: 12px;
  }
}
div.playlists yam-playlists {
  display: block;
  height: 100%;
}
div.playlists yam-playlist-tracks {
  display: none;
}

@media (max-width: 1024px) and (orientation: landscape) {
  div.playlists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  div.playlists yam-playlists {
    grid-column: 1;
    grid-row: 1;
    overflow-y: scroll;
  }
  div.playlists yam-playlist-tracks {
    grid-column: 2;
    grid-row: 1;
    display: block;
    overflow-y: scroll;
  }
}
:root {
  --weekdays-font: 20px sans-serif;
  --weekdays-small-font: 16px sans-serif;
}
@media (max-width: 768px) and (orientation: portrait) {
  :root {
    --weekdays-font: bold 20px sans-serif;
    --weekdays-small-font: bold 16px sans-serif;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  :root {
    --weekdays-font: bold 20px sans-serif;
    --weekdays-small-font: bold 16px sans-serif;
  }
}

html {
  height: 100%;
  background: var(--background);
  background-blend-mode: multiply;
  font-family: "Lato";
  box-sizing: border-box;
  user-select: none;
}

body {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  padding: 0;
}
body div.content {
  min-width: max-content;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  grid-template-areas: "main toolbar";
}

main {
  grid-area: main;
  justify-self: center;
}

toolbar {
  grid-area: toolbar;
}

dialog.import {
  margin-top: 128px;
  padding: 8px;
  outline: none;
  border: none;
  border-radius: 8px;
}
dialog.import div {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 12px;
  justify-items: center;
  align-items: center;
}
dialog.import div p.message {
  grid-column: 1/3;
  grid-row: 1;
  font-size: 0.9em;
  text-align: center;
}
dialog.import div button {
  width: 80px;
  height: 32px;
}
dialog.import div button[value=cancel] {
  grid-column: 1;
  grid-row: 2;
  color: #a00000;
}
dialog.import div button[value=ok] {
  grid-column: 2;
  grid-row: 2;
}

dialog.save {
  margin-top: 128px;
  padding: 8px;
  outline: none;
  border: none;
  border-radius: 8px;
}
dialog.save div {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 12px;
  justify-items: center;
  align-items: center;
}
dialog.save div p.message {
  grid-column: 1/3;
  grid-row: 1;
  font-size: 0.9em;
  text-align: center;
}
dialog.save div button {
  width: 80px;
  height: 32px;
}
dialog.save div button[value=cancel] {
  grid-column: 1;
  grid-row: 2;
  color: #a00000;
}
dialog.save div button[value=ok] {
  grid-column: 2;
  grid-row: 2;
}

dialog.error p.message {
  color: #ff0000;
}

@media (max-width: 768px) and (orientation: portrait) {
  body div.content {
    height: 100dvh;
    margin-top: env(safe-area-inset-top);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  body.fullscreen div.content {
    height: calc(100dvh - env(safe-area-inset-top));
  }
  body.fullscreen toolbar {
    margin-bottom: 8px;
  }
  main {
    grid-column: 1;
    grid-row: 1;
    width: 100dvw;
    height: calc(100% - env(safe-area-inset-top));
    justify-self: center;
    align-self: stretch;
  }
  toolbar {
    grid-column: 1;
    grid-row: 2;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  body {
    width: 100dvw;
  }
  body div.content {
    height: 100dvh;
    width: calc(100dvw - env(safe-area-inset-left));
    min-width: 0;
    margin-left: env(safe-area-inset-left);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
  }
  main {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
  }
  toolbar {
    grid-column: 2;
    grid-row: 1;
  }
}