@import url("/42/assets/css/base.css");
@import url("/42/assets/css/controls.css");
/* @import url("/42/assets/css/tabs.css"); */
/* @import url("/42/assets/css/knob.css"); */
/* @import url("/42/assets/css/volume.css"); */
@import url("/42/themes/tribute/windows9x.theme.css");

:root:not(.themed) {
  /* --button-color: #f9c; */
  /* --button-bg: #f9c; */
  /* --button-tsh: #f9c; */
  --ButtonFace: #f9c;
  --button-bg: var(--ButtonFace);

  --addon-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" style="background:rgb(244 193 202)" width="16px" height="17px"><path fill="rgb(247 219 215)" d="M0 0h15v1H1v15H0Z" /><path fill="rgb(64 64 64)" d="M15 0h1v17H0V16h15z" /><path fill="rgb(250 224 228)" d="M1 1h13v1H2v13H1Z" /><path fill="rgb(222 69 96)" d="M14 1h1v15H1V15h13z" /></svg>');
  --inset-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(222 69 96)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(64 64 64)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(247 219 215)" d="M5 1h1v5H1V5h4z"/><path fill="rgb(250 224 228)" d="M6 0h1v7H0V6h6z"/></svg>');
  --button-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(250 224 228)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(247 219 215)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(222 69 96)" d="M5 1h1v5H1V5h4z"/><path fill="rgb(64 64 64)" d="M6 0h1v7H0V6h6z"/></svg>');
  --outset-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(247 219 215)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(250 224 228)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(222 69 96)" d="M5 1h1v5H1V5h4z"/><path fill="rgb(64 64 64)" d="M6 0h1v7H0V6h6z"/></svg>');
  --outset-shallow-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(250 224 228)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(222 69 96)" d="M6 0h1v7H0V6h6z"/></svg>');
  --tabs__tab-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(250 224 228)" d="M2 0h3v1H2z  M1 1h1v1H1z M0 2h1v3H0z"/><path fill="rgb(247 219 215)" d="M2 1h3v1H2z M1 2h1v3H1z"/><path fill="rgb(222 69 96)" d="M5 2h1v3H5z M2 5h3v1H2z"/><path fill="rgb(64 64 64)" d="M6 2h1v3H6z M5 1h1v1H5z M5 5h1v1H5z M2 6h3v1H2z M1 5h1v1H1z"/><path fill="rgb(244 193 202)" d="M2 2h3v3H2z"/></svg>');
  --button-toggled-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(64 64 64)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(222 69 96)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(247 219 215)" d="M5 1h1v5H1V5h4z"/><path fill="rgb(250 224 228)" d="M6 0h1v7H0V6h6z"/></svg>');
  --button-active-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(64 64 64)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(222 69 96)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(222 69 96)" d="M5 1h1v5H1V5h4z"/><path fill="rgb(64 64 64)" d="M6 0h1v7H0V6h6z"/></svg>');
  --button-default-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(64 64 64)" d="M7 0v7H0V0h7Z"/><path fill="rgb(250 224 228)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(247 219 215)" d="M2 2h2v1H3v1H2Z"/><path fill="rgb(222 69 96)" d="M4 2h1v3H2V4h2z"/></svg>');
  --fieldset-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7px" height="7px"><path fill="rgb(222 69 96)" d="M0 0h6v1H1v5H0Z"/><path fill="rgb(250 224 228)" d="M1 1h4v1H2v3H1Z"/><path fill="rgb(222 69 96)" d="M5 1h1v5H1V5h4z"/><path fill="rgb(250 224 228)" d="M6 0h1v7H0V6h6z"/></svg>');
  --radio-bdi-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="rgb(64 64 64)" d="M4 1h4v1h2v1H8V2H4v1H3v1H2v4h1v1H2V8H1V4h1V2h2z"/><path fill="rgb(222 69 96)" d="M4 0h4v1h2v1H8V1H4v1H2v2H1v4h1v2H1V8H0V4h1V2h1V1h2z"/><path fill="rgb(247 219 215)" d="M9 3h1v1h1v4h-1v2H8v1H4v-1H2V9h2v1h4V9h1V8h1V4H9z"/><path fill="rgb(250 224 228)" d="M10 2h1v2h1v4h-1v2h-1v1H8v1H4v-1H2v-1h2v1h4v-1h2V8h1V4h-1z"/></svg>');
  --disabled-filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="disabled-filter"><feComponentTransfer in="SourceGraphic" result="contrast"><feFuncR type="discrete" tableValues="0 0.5 0 1"/><feFuncG type="discrete" tableValues="0 0.5 0 1"/><feFuncB type="discrete" tableValues="0 0.5 0 1"/><feFuncA type="discrete" tableValues="0 0.5 0 1"/></feComponentTransfer><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 -1 -1 -1 1 0" in="contrast" result="black-isolated"/><feFlood flood-color="rgb(222 69 96)" result="shadow-color"/><feFlood flood-color="rgb(250 224 228)" result="hilight-color"/><feOffset dx="1" dy="1" in="black-isolated" result="offset"/><feComposite operator="in" in="hilight-color" in2="offset" result="hilight"/><feComposite operator="in" in="shadow-color" in2="black-isolated" result="shadow"/><feMerge><feMergeNode in="hilight"/><feMergeNode in="shadow"/></feMerge></filter></svg>#disabled-filter');
  --scrollbar-sprites-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="32" fill="rgb(0 0 0)"><g id="g"><path id="a" d="M7 6h1v1h1v1h1v1h1v1h-7v-1h1v-1h1v-1h1z"/><use transform="translate(15) rotate(180 8 8)" href="%23a"/><use transform="translate(30) rotate(-90 8 7)" href="%23a"/><use transform="translate(48) rotate(90 8 8)" href="%23a"/></g><use y="16" style="filter: drop-shadow(1px 1px 0 rgb(250 224 228));fill: rgb(222 69 96);" href="%23g"/></svg>');

  --base-size: 76px;
  --base-padding: 17px;
}

@font-face {
  font-family: gb;
  src:
    url("font/gb.woff2") format("woff2"),
    url("font/gb.woff") format("woff"),
    url("font/gb.ttf");
}

html {
  overflow: hidden;
  user-select: none;
}

body {
  font-family: gb, sans-serif;
  background-color: #f9c;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-size: 8px;
  letter-spacing: 0;
  visibility: hidden;
}

input:not([type="checkbox"], [type="radio"]),
select {
  line-height: 16px;
}

#sequencer {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--base-size) + var(--base-padding)));
  grid-template-rows: repeat(4, calc(var(--base-size) + var(--base-padding)));
  position: absolute;
}

.row {
  display: contents;
}

.cell {
  cursor: var(--cursor-pointer, pointer);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cell-visu {
  cursor: var(--cursor-pointer, pointer);
  width: calc(var(--base-size));
  height: calc(var(--base-size));
  will-change: scale;
  transition: scale 0.1s ease-out;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-position: center;
  background-size: 100%;
  scale: 0.5;
}

.currentStep .cell-visu,
.cell.active .cell-visu,
.cell:hover .cell-visu {
  /* animation: blink 0.6s infinite; */
  scale: 1;
}

.mod .cell-visu {
  opacity: 1;
  background-image: url("img/mod.png") !important;
}

/* @keyframes blink {
  0% {
    filter: brightness(100%) invert(0%) saturate(100%) sepia(96%) saturate(500%) hue-rotate(0deg) brightness(108%) contrast(130%);
  }

  25% {
    filter: brightness(50%) invert(100%) saturate(100%) sepia(96%) saturate(1000%) hue-rotate(90deg) brightness(108%) contrast(130%);
  }

  50% {
    filter: brightness(0%) invert(0%) saturate(100%) sepia(96%) saturate(1500%) hue-rotate(180deg) brightness(108%) contrast(130%);
  }

  75% {
    filter: brightness(50%) invert(100%) saturate(100%) sepia(96%) saturate(2000%) hue-rotate(270deg) brightness(108%) contrast(130%);
  }

  100% {
    filter: brightness(100%) invert(0%) saturate(100%) sepia(96%) saturate(1000%) hue-rotate(360deg) brightness(108%) contrast(130%);
  }
} */

#controls {
  position: absolute;
  top: 10px;
  left: 10px;
}

#playButton,
#stopButton {
  width: 60px;
  height: 42px;
}

#stopButton {
  display: none;
}

button>img {
  pointer-events: none;
  width: 19px;
  image-rendering: pixelated;
}

/* button {
  background-color: var(--button-color);
} */

#trackControls,
#songControls {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  display: none;
  text-align: right;
}

#songControls {
  display: flex;
}

#controls input[type="range"],
#songControls input[type="range"],
#trackControls input[type="range"] {
  height: 21px;
  width: 121px;
}

#songControls span {
  margin-right: 5px;
  position: relative;
  top: -4px;
}

#trackControls>span {
  margin-right: -8px;
  position: relative;
  top: -2px;
}

#trackSpeed {
  font-size: 8px;
  letter-spacing: 0;
}

#dir {
  height: 8px;
  image-rendering: pixelated;
}

.muted {
  opacity: 0.5;
}

.modMute {
  opacity: 0;
}

.small {
  padding: 0;
  margin: 0;
  height: 15px;
  width: 10px;
  margin-top: 0;
  margin-left: 7px;
  align-items: normal;
  position: relative;
  top: -2px;
}

.small>img {
  height: 8px;
  width: 8px;
  position: relative;
  top: -2px;
}

#blocksContainer {
  position: absolute;
  margin: 0;
  bottom: 0;
  bottom: 30px;
  left: 10px;
}

#blocks>div {
  font-size: 8px;
  display: inline-block;
  padding: 0;
  margin: 0;
  text-align: center;
  width: 18px;
  height: 11px;
  margin-top: 0;
  padding-top: 0;
  line-height: 13px;
  margin-right: 2px;
}

.currentBlock {
  background: pink;
}

#song {
  position: absolute;
  bottom: 45px;
  right: 0;
  margin: 0;
  padding: 0;
  display: none;
}

#songEditor,
#songFeedback {
  margin: 5px;
  padding: 0;
  letter-spacing: 0;
  width: 78px;
  line-height: 15px;
  min-width: 100%;
  min-height: 16px;
  right: 3px;
  outline: none;
  position: absolute;
  bottom: 12px;
  text-align: right;
}

#songFeedback {
  cursor: var(--cursor-pointer, pointer);
}

#playSong {
  float: right;
  margin-right: 37px;
  top: 7px;
}

#songEditor {
  display: none;
}

#addBlock1 {
  margin: 0;
  height: 21px;
  width: 21px;
  font-size: 10px;
  align-items: normal;
  position: relative;
  left: 25px;
  margin-right: 26px;
}

#song>span {
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: -6px;
  right: 52px;
  display: block;
  width: max-content;
}

#blocks {
  width: 96px;
  padding-left: 0;
  letter-spacing: 0;
  line-height: 15px;
  padding-bottom: 6px;
  position: absolute;
  bottom: -3px;
  display: none;
}

#blocksContainer>span {
  margin: 0;
  padding: 0;
  position: absolute;
  /* display: block; */
  width: max-content;
}

#ab {
  position: absolute;
  width: max-content;
  display: none;
}

/* #saveSong,
#loadSong,
#loadKit {
  height: 21px;
  width: 50px;
  padding-top: 1px;
} */

#saving {
  position: absolute;
  bottom: 9px;
  right: 9px;
}

#saving button {
  height: 21px;
  padding-top: 2px;
}

/*
#saving {
  position: absolute;
  top: 99px;
  left: 3px;
  margin: 7px;
}
*/

.disable {
  pointer-events: none;
  opacity: 0.25;
}

#advancedLabel {
  left: -2px;
  position: relative;
  top: 0;
}

#advancedContainer {
  position: fixed;
  top: 15px;
  left: 248px;
  width: max-content;
  z-index: 1000;
}

#tonic,
#scale {
  width: fit-content !important;
  top: 4px;
  position: relative;
  display: none;
}

#tonic {
  width: 41px !important;
  min-width: 0;
}

#scale {
  width: 121px !important;
}

#tempoControls {
  display: inline-block;
  position: absolute;
  left: 70px;
  top: 0;
  width: max-content;
}

#tempoControls span {
  top: -4px;
  margin-left: 2px;
  position: relative;
}

#tcfx {
  position: absolute;
  right: 5px;
  top: 59px;
  width: fit-content;
}

.tcfxRev {
  right: 58px;
  position: absolute;
  width: 50px;
}

#tcfx>span>.small {
  top: 2px;
}

#tcmx {
  position: absolute;
  top: 77px;
  right: 10px;
  width: fit-content;
}

#tcptch>.lab {
  left: -4px;
  position: relative;
  top: -1px;
}

#tcptch {
  width: max-content;
  position: absolute;
  top: 8px;
  left: 188px;
  display: none;
}

#tcfx .lab {
  position: relative;
  right: -4px;
  top: 1px;
}

.br {
  right: -6px;
}

#direction {
  position: relative;
  top: 7px;
}

#signature {
  position: relative;
  top: 2px;
}

#recordButton {
  height: 20px;
  width: 50px;
}

#partitions {
  position: relative;
  top: 8px;
}

#harmony {
  position: absolute;
  top: 42px;
  left: 0;
  width: max-content;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

#midiouts {
  width: 166px;
  top: -4px;
  display: none;
}

#midiAccessButton {
  position: relative;
  top: -4px;
  margin-left: 25px;
}

#midi-interface {
  position: absolute;
  top: 75px;
  left: -25px;
  width: max-content;
}

#scaleFree {
  top: -1px;
}

.ticker {
  width: 24px !important;
  height: 11px !important;
}

#harmonyInterface {
  position: relative;
  top: 4px;
}

.v {
  display: initial !important;
}

#songInterface {
  position: absolute;
  bottom: 34px;
  right: 9px;
}

#free {
  top: -1px;
  left: 5px;
}

.nimOnly {
  display: none !important;
}

/* input::-webkit-slider-thumb {
  background-color: var(--button-color);
} */

* {
  --tsh: 1px 1px #ffc9e4;
  /* --tsh: 1px 1px #f9c; */
  text-shadow: var(--tsh);
}

button {
  --tsh: 1px 1px #ffc9e4;
}

select {
  text-shadow: none !important;
}