@font-face {
  font-family: "singlex";
  src: url("Singlex.woff2") format("woff2");
  descent-override: 0%;
  ascent-override: 100%;
}

@font-face {
  font-family: "code";
  src: url("FontWithASyntaxHighlighter-Regular.woff2") format("woff2");
}
body {
  font-family: "Singlex", sans-serif;
  line-height: 1.3;
  letter-spacing: 0.1em;
  overscroll-behavior-y: contain;
}

main {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 600px) {
  main {
    flex-direction: column;
  }
}

#canvasContainer {
  position: relative;
  display: flex;
  flex: 1;
  background-color: #fff;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  touch-action: none;
}

.sidebar {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#scriptInput {
  flex: 1;
}

.presetButtons {
  display:flex;
}

.contextualButtonGroup {
  display:contents;
}

textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 4px;
  background-color: #000000cc;
  color: #f1f1f1;
  font-family: 'code', monospace;
  line-height: 1.2;
  resize: none;
  overflow: auto;
  white-space: pre;
  text-wrap-mode: nowrap;
  text-wrap: wrap;
  direction: ltr;
  font-size:clamp(10px, 2vw, 16px);
  border:none;
}
button {
  background:transparent;
  cursor:pointer;
  border:1px solid black;
  border-radius:5px;
  background:#fcffbd;
  padding:0;
  &:hover:not(.active) {
    background:yellow;
  }
}
button.active {
  background:lime;
}

#presetButtonConfig {
  background:#aaa;
  padding:10px;
  display:flex;
  flex-direction:column;
  overflow:auto;
  border:1px solid black;
  label {
    display:flex;
    gap:10px;
  }
}
.scriptStatus {
  padding:5px;
  color:red;
  overflow:auto;
  font-size:clamp(10px, 2vw, 20px);
}

#layerList {
  padding:5px;
  background:#ffffffaa;
  border: 1px solid black;
  display:flex;
  flex-direction:column;
  justify-content:end;
  div {
    display:flex;
    button {
      height:30px;
      flex:1;
    }
    button:first-child {
      flex:2;
    }
  }
}
.apidocslink {
  padding-left:5px;
}

:where(.defaultpattern1) button {
  background:transparent;
}

:where(.pattern-lDJuF) button {
  background:var(--color12);
}

:where(.pattern-rw1dj) button {
  background:lch(80 60 40);
}

:where(.pattern-CgHa7) button {
  background:lch(80 60 80);
}

:where(.pattern-Q58ZQ) button {
  background:lch(80 60 120);
}

:where(.pattern-x7o5l) button {
  background:lch(80 60 0);
}

:where(.pattern-sd5LM), :where(.pattern-sd5LM) button {
  background:lch(80 60 180);
}

:where(.pattern-NT8-t) button {
  background:lch(80 60 300);
}

:where(.pattern-RkSIw) button {
  background:lch(90 30 130);
}

:where(.pattern-LAYjT) button {
  background:lch(80 60 240);
}

:where(.pattern-0Psy3) button {
  background:lch(90 80 120);
}