@layer patchwork, tool, user;
html,
body {
  overscroll-behavior: none;
  font-family: system-ui, sans-serif;
  background-color: black;
  color: white;
}

html {
  font-size: 16px;
  height: 100%;
  height: 100vh;
  height: 100dvh;

  @media all and (display-mode: standalone) {
    height: 100lvh;
  }
}

patchwork-view {
  display: block;
  height: 100%;
  width: 100%;
  contain: layout;
  opacity: 0;
}

patchwork-view.mounted {
  opacity: 1;
}

body > patchwork-view {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;

  @media all and (display-mode: standalone) {
    height: 100lvh;
    width: 100lvw;
  }
}
@font-face {
  font-family: FifteenTwenty;
  src: url("data:font/woff2;base64,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");
}

* {
  box-sizing: border-box;
  scrollbar-color: #fff #000;
}

body {
  margin: 0;
}

::-webkit-scrollbar {
  background: #000;
}

::-webkit-scrollbar-thumb {
  border: 1.5px solid #fff;
  border-radius: 1px;
  background: transparent;
}

.tenfold {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  font: clamp(12px, 1.2vw, 22px) FifteenTwenty;
  color: #fff;
  background: #000;
  color-scheme: dark;
  overflow: hidden;

  canvas {
    display: block;
  }

  aside {
    flex: 1 1 0;
    min-width: 0; /* needed for text wrap for some reason */
    position: relative;
    display: flex;
    flex-flow: column;
    height: 100%;
  }

  #spark {
    display: none; /* turned off for now, while we do friends-of-the-lab */
    flex: 0 0 50px;
    width: 100%;
    height: 50px;
  }

  #message-field {
    position: absolute;
    display: none; /* turned off for now, while we do friends-of-the-lab */
    inset: 0;
    width: 100%;
    height: 1em;
    color: #f00;
    pointer-events: none;
  }

  #synth-editor {
    display: none; /* turned off for now, while we do friends-of-the-lab */
    flex: 1 1 50%;
    height: 50%;
  }

  .tenfold-docs {
    font-size: 1.2em;
    flex: 1 1 0;
    /* min-width: 0; */
    /* min-height: 0; */
    overflow: hidden auto;

    h1 {
      margin-block: 0 1rem;
      font-size: 2em;
    }

    h2 {
      margin-block: 3rem 1rem;
      font-size: 1.5em;
    }

    h3 {
      margin-block: 2rem 1rem;
      font-size: 1.3em;
    }

    h4 {
      margin-block: 1.5rem 0;
      font-size: 1.2em;
    }

    p {
      margin-block: 0 1rem;
      line-height: 1.3;
    }

    a {
      color: inherit;
    }

    code {
      font-family: inherit;
      background: white;
      color: black;
      border-radius: 1px;
    }

    pre {
      width: max-content;
      max-width: 100%;
      padding: 1rem;
      border: calc(0.01 * var(--cell, 100px)) solid #fff;
      border-radius: 1px;
      font-family: inherit;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }

    & > :first-child {
      padding-top: calc(0.15 * var(--cell, 2vmin));
    }

    & > :last-child {
      padding-bottom: calc(0.15 * var(--cell, 2vmin));
    }
  }

  .tenfold-button-row {
    display: flex;
    gap: 2px;
    margin-bottom: 2px;

    & > :last-child {
      margin-left: auto;
    }
  }

  .tenfold-toast {
    position: fixed;
    inset: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    padding: 3em 3em;
    border-radius: 1px;
    background: #fff;
    color: #000;
    z-index: 9999;
    pointer-events: none;
    animation:
      toast-crt 100ms ease-out reverse,
      toast-crt 200ms ease-out 1.7s forwards;
  }

  .cm-editor {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: auto;

    &.cm-focused {
      outline: none;
    }
  }

  .cm-scroller {
    scrollbar-gutter: stable;
  }

  .cm-editor .cm-content {
    caret-color: #fff !important;
  }

  .cm-lintRange-error {
    background: none !important;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1.5px;
    text-decoration-skip-ink: none;
    text-decoration-color: #f00;
  }

  .cm-matchingBracket {
    background-color: #fff !important;
  }
}

@keyframes toast-crt {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  30% {
    transform: scaleY(0.05);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.05);
    opacity: 0;
  }
  65% {
    transform: scaleY(0.05);
    opacity: 1;
  }
  80% {
    transform: scaleY(0.05);
    opacity: 0;
  }
  90% {
    transform: scaleY(0.05);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}

@keyframes delete-fill {
  0% {
    background-size: 0% 100%;
  }
  85% {
    background-size: 100% 100%;
    opacity: 1;
    color: inherit;
  }
  90% {
    background-size: 100% 100%;
    opacity: 0;
    color: #000;
  }
  95% {
    background-size: 100% 100%;
    opacity: 1;
    color: #000;
  }
  100% {
    background-size: 100% 100%;
    opacity: 0;
    color: #000;
  }
}

.tenfriend-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: max-content;
  height: 100%;
  margin-inline: auto;
  gap: 1em;
  font: 18px FifteenTwenty;
  color: #fff;
  background: #000;

  .tenfriend-row {
    display: flex;
    gap: 2px;
  }

  .tenfriend-input {
    width: 100%;
    padding: 0.7em 0.7em 0.5em;
    border: calc(0.01 * var(--cell, 100px)) solid #fff;
    border-radius: 1px;
    outline: none;
    font: inherit;
    font-size: 24px;
    line-height: 1em;
    color: inherit;
    background: inherit;

    &:focus {
      outline: calc(0.01 * var(--cell, 100px)) solid #fff;
      outline-offset: calc(-0.02 * var(--cell, 100px));
    }
  }
}

.tenfriend-button {
  padding: 0.7em 1.2em 0.5em;
  border: calc(0.01 * var(--cell, 100px)) solid #fff;
  border-radius: 1px;
  font: inherit;
  color: #fff;
  background: #000;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  cursor: pointer;

  &.holding {
    animation: delete-fill 1.3s linear forwards;
  }

  &:focus {
    outline: calc(0.01 * var(--cell, 100px)) solid #fff;
    outline-offset: calc(-0.02 * var(--cell, 100px));
  }
}