:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f4f1e8;
}

body {
  position: fixed;
  inset: 0;
  user-select: none;
  touch-action: none;
}

#paper {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: none;
}

#gui-root {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 4;
}

#gui-root .lil-gui {
  --background-color: rgb(247 244 236 / 90%);
  --text-color: #2e2a23;
  --title-background-color: rgb(48 42 33 / 92%);
  --title-text-color: #f7f4ec;
  --widget-color: rgb(225 219 207 / 94%);
  --hover-color: rgb(211 204 191 / 94%);
  --focus-color: rgb(196 188 173 / 96%);
  --number-color: #4b4439;
  --string-color: #4b4439;
  --font-size: 12px;
  border: 1px solid rgb(58 48 36 / 18%);
  box-shadow: 0 8px 26px rgb(34 27 19 / 14%);
  backdrop-filter: blur(14px);
}

#gui-root .lil-gui.root {
  max-height: calc(100vh - 24px);
}

#brush-preview {
  position: fixed;
  z-index: 3;
  width: 19px;
  height: 19px;
  border: 1px solid rgb(40 36 30 / 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}

#unsupported[hidden] {
  display: none !important;
}

#unsupported {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  color: #24211c;
  background: #f4f1e8;
  font-size: 18px;
}

#unsupported:not([hidden]) {
  display: grid;
}

@media (max-width: 720px) {
  #gui-root {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
  }

  #gui-root .lil-gui.root {
    width: auto;
  }
}