body {
  font-family: 'Source Code Pro', monospace;
}

.preview-area-bg {
  background: repeating-conic-gradient(var(--fallback-b3, oklch(var(--b3))) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
  background-color: var(--fallback-b1, oklch(var(--b1)));
}

.canvas-container-wrapper {
  position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input.input,
select.select {
  border-color: color-mix(in oklab, oklch(var(--p)) 45%, oklch(var(--b3)) 55%);
}

input.input:focus,
input.input:focus-visible,
select.select:focus,
select.select:focus-visible {
  border-color: oklch(var(--p));
}

#exportSizeJoin {
  border-color: color-mix(in oklab, oklch(var(--p)) 45%, oklch(var(--b3)) 55%);
}

#exportSizeJoin:focus-within {
  border-color: oklch(var(--p));
}