* {
  box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: url(stripe.png) fixed;
}

h2 {
  font-family: "Geo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.howto {
  padding-left: 20px;
  li {
    margin-top: 8px;
  }
}

.active {
  outline: 2px dashed #2dd4bf;
  outline-offset: 2px;
}

.file-upload {
  display: inline-block;
  padding: 8px 12px;
  background: #2dd4bf;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.file-upload:hover {
  background: #5eead4;
}

.file-upload input {
  display: none;
}

button {
  cursor: pointer;
}

input, button, select {
  font: inherit;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: #e5e7eb; /* gray-200 */
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #2dd4bf;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 0 0 1px #ccc;
  transition: transform 0.1s;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #2dd4bf;
  border: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

.pcr-app {
  border-radius: 8px !important;
  border: solid 1px #e5e7eb !important;
  overflow: clip;
  box-shadow: none !important;
  font-family: inherit;
}

.pcr-app .pcr-selection .pcr-color-chooser {
    grid-area: 4 / 2 / 2 / 2 !important;
}

.pcr-app .pcr-swatches {
    place-content: center;
}

.pcr-button {
    border: solid 1px #ddd !important;
}

rect {
  fill: none;
  stroke: black;
}

.top {
  stroke-dasharray: 10, 0, 0;
}

#my-folder {
  touch-action: none;
}