body > .utility-wheel {
  --utilWheel-wheel-size: calc(8rem + 24vw);
  --utilWheel-center-size: 6.75rem;
  --utilWheel-gradient-stop: 20.5em;
  --utilWheel-border-color: hsl(0, 0%, 55%);
  --utilWheel-section-color: hsl(0, 0%, 21%);
}
* {
  box-sizing: border-box;
}
:root {
  --mouseX: -100%;
  --mouseY: -100%;
  --scale: 100%;
  --strokeWidth: 25px;
  --picker-size: 25px;
  --picker-color: var(--canvas-color);
  --canvas-color: hsl(0, 0%, 8%);
  --overlay-margin: 0.8rem;
  --overlay-gap: 0.45rem;
}
@media (max-width: 1080px) {
  :root {
    --overlay-margin: 0.575rem;
    --overlay-gap: 0.425rem;
    font-size: calc(0.51vw + 0.25vh + 9.71px);
  }
}
@media (max-width: 650px) {
  :root {
    --overlay-margin: 0.35rem;
    --overlay-gap: 0.325rem;
  }
}
body {
  display: flex;
  justify-content: center;
  background-color: hsl(0, 0%, 18.5%);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: hsl(0, 0%, 95%);
}
body.initial-load {
  background-color: var(--canvas-color);
}
body > *:not(#canvas-container) {
  z-index: 100000010;
}
canvas,
#canvas-container {
  width: 100%;
  height: 100%;
}
#canvas-container {
  transition: filter 0.05s ease-in-out;
}
body.inactive #canvas-container {
  cursor: not-allowed;
}
body.active-utility-wheel #canvas-container {
  filter: blur(14px);
}
canvas {
  position: absolute;
  background-color: var(--canvas-color);
  outline: 6px solid hsl(0, 0%, 18.5%);
  border-radius: 0;
}
@media not (prefers-reduced-motion) {
  canvas:not(.inactive):not(.remove):not(:only-child) {
    animation: translateIn 0.6s ease;
  }
}
@keyframes translateIn {
  0% {
    scale: 0.9175;
    z-index: 0;
    pointer-events: none;
    border-radius: 1.4rem;
  }
  49.9% {
    z-index: 0;
  }
  50% {
    z-index: 100000007;
    transform: translate(72.5%, 0);
  }
  85% {
    border-radius: 1.4rem;
  }
  100% {
    pointer-events: none;
  }
}
@media (orientation: portrait) {
  @keyframes translateIn {
    0% {
      scale: 0.9175;
      z-index: 0;
      pointer-events: none;
      border-radius: 1.4rem;
    }
    49.9% {
      z-index: 0;
    }
    50% {
      z-index: 100000007;
      transform: translate(0, 72.5%);
    }
    85% {
      border-radius: 1.4rem;
    }
    100% {
      pointer-events: none;
    }
  }
}
#canvas-container.block-inout-animation canvas:not(.inactive):not(.remove):not(:only-child) {
  animation-duration: 0s;
}
canvas.inactive,
canvas.remove {
  visibility: hidden;
  pointer-events: none;
  border-radius: 1.4rem;
}
@media not (prefers-reduced-motion) {
  canvas.inactive {
    animation: translateOut 0.6s ease;
  }
}
@keyframes translateOut {
  0% {
    border-radius: 0;
    visibility: visible;
  }
  2% {
    border-radius: 1.4rem;
  }
  50% {
    transform: translate(-30%, 0);
  }
  100% {
    scale: 0.9175;
    visibility: visible;
  }
}
@media (orientation: portrait) {
  @keyframes translateOut {
    0% {
      border-radius: 0;
      visibility: visible;
    }
    2% {
      border-radius: 1.4rem;
    }
    50% {
      transform: translate(0, -30%);
    }
    100% {
      scale: 0.9175;
      visibility: visible;
    }
  }
}
@media not (prefers-reduced-motion) {
  canvas.remove {
    outline-width: 25vmax;
    animation: canvasRemove 0.26s ease !important;
  }
}
@keyframes canvasRemove {
  0% {
    border-radius: 0;
    visibility: visible;
  }
  2% {
    border-radius: 1.4rem;
  }
  47% {
    transform: scale(0.925);
    filter: none;
    opacity: 1;
  }
  100% {
    transform: scale(1.125);
    opacity: 0;
    filter: blur(12px);
    visibility: visible;
  }
}
body.inactive canvas {
  pointer-events: none;
}
a {
  border-radius: 2px;
  color: inherit;
}
a:hover {
  background-color: hsla(0, 0%, 95%, 0.075);
}
button,
input {
  display: block;
  font-family: inherit;
  background-color: transparent;
  font-size: 1em;
  color: inherit;
  padding: 0;
  margin: 0;
  border: none;
}
button {
  cursor: pointer;
}
button:hover {
  background-color: hsl(0, 0%, 22%) !important;
}
button:active {
  background-color: hsl(0, 0%, 21%) !important;
}
input:invalid {
  border-color: #B83232 !important;
  background-color: hsl(0, 20%, 18%) !important;
}
.button-group,
.horizontal {
  gap: var(--overlay-gap);
}
.button-group {
  display: inline-flex;
  flex-direction: column;
}
.button-group.right {
  align-items: flex-end;
}
.horizontal,
.button-wrapper {
  display: flex;
  align-items: center;
}
.horizontal {
  flex-direction: row;
}
.has-pointer-events {
  pointer-events: auto !important;
}
.no-border {
  border: none !important;
}
.overlay {
  position: absolute;
  pointer-events: none;
}
.overlay.bottom {
  bottom: var(--overlay-margin);
}
.overlay.left {
  left: var(--overlay-margin);
}
.overlay.top {
  top: var(--overlay-margin);
}
.overlay.right {
  right: var(--overlay-margin);
}
.overlay.self-centered {
  align-self: center;
}
.overlay.full-size {
  display: flex;
  flex-direction: column;
  height: 70vh !important;
  width: 75vw !important;
  font-size: 0.92rem;
}
.overlay .label,
.overlay .button,
.overlay .hover-overlay,
.overlay .overlay-input:focus,
.overlay .sl89-track {
  border: 2px solid hsl(0, 0%, 8%);
  z-index: 100000009;
  user-select: none;
  background-color: hsl(0, 0%, 18%);
  box-sizing: content-box;
  padding: 0.2rem;
  transition: transform 0.075s ease;
}
.overlay .label,
.overlay .button,
.overlay .overlay-input,
.overlay .sl89-thumb,
.overlay .sl89-track,
.overlay .slider-hue-indicator {
  border-radius: 100px;
  pointer-events: auto;
}
body.inactive .overlay .sl89-thumb,
body.inactive .overlay .sl89-thumb * {
  pointer-events: none;
}
body.inactive .overlay .overlay-input:not(.persistent),
body.inactive .overlay .floating-overlay-wrapper {
  display: none;
}
body.inactive .overlay .button:not(.persistent),
body.inactive .overlay .sl89-track {
  pointer-events: none;
  transform: scale(0.915);
  background-color: hsl(0, 0%, 12%) !important;
  color: hsl(0, 0%, 85%) !important;
}
.overlay.inactive:not(.active) {
  display: none;
}
.panel {
  border: 4px solid hsl(0, 0%, 8%);
  display: inline-flex;
  flex-direction: column;
  background-color: hsla(0, 0%, 16%, 0.675);
  border-radius: calc(1.4rem + 4px);
  backdrop-filter: blur(22px);
}
.panel .button {
  background-color: hsl(0, 0%, 25.5%);
}
.panel .button:hover {
  background-color: hsl(0, 0%, 29.5%) !important;
}
.panel .button:active {
  background-color: hsl(0, 0%, 28.5%) !important;
}
.panel.grow-panel {
  flex: 1;
  display: block;
  width: 100%;
  padding: 0 min(1.5em, calc(0.5em + 1.55vmin));
  background-color: hsla(0, 0%, 16%, 0.875);
  overflow: auto;
}
.overlay-input,
.utility-wheel .uw-section-content {
  text-shadow: 1px 0 var(--canvas-color), -1px 0 var(--canvas-color), 0 1px var(--canvas-color), 0 -1px var(--canvas-color), 1px 1px var(--canvas-color), -1px 1px var(--canvas-color), 1px -1px var(--canvas-color), -1px -1px var(--canvas-color), 1.25px 0 var(--canvas-color), -1.25px 0 var(--canvas-color), 0 1.25px var(--canvas-color), 0 -1.25px var(--canvas-color), 1.25px 1.25px var(--canvas-color), -1.25px 1.25px var(--canvas-color), 1.25px -1.25px var(--canvas-color), -1.25px -1.25px var(--canvas-color), 1.5px 0 var(--canvas-color), -1.5px 0 var(--canvas-color), 0 1.5px var(--canvas-color), 0 -1.5px var(--canvas-color), 1.5px 1.5px var(--canvas-color), -1.5px 1.5px var(--canvas-color), 1.5px -1.5px var(--canvas-color), -1.5px -1.5px var(--canvas-color), 1.75px 0 var(--canvas-color), -1.75px 0 var(--canvas-color), 0 1.75px var(--canvas-color), 0 -1.75px var(--canvas-color), 1.75px 1.75px var(--canvas-color), -1.75px 1.75px var(--canvas-color), 1.75px -1.75px var(--canvas-color), -1.75px -1.75px var(--canvas-color), 2px 0 var(--canvas-color), -2px 0 var(--canvas-color), 0 2px var(--canvas-color), 0 -2px var(--canvas-color), 2px 2px var(--canvas-color), -2px 2px var(--canvas-color), 2px -2px var(--canvas-color), -2px -2px var(--canvas-color);
}
.overlay-input {
  z-index: 100000000 !important;
  white-space: nowrap;
  font-size: 1.025em;
  background-color: transparent;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  margin: 0 -0.2rem;
}
.overlay-input.invalid {
  outline: 3px solid #B83232;
  transition: outline 0.1s ease-out;
}
.overlay-input br {
  display: none;
}
.button-group .button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  width: 2.72rem;
  height: 2.72rem;
}
.button-group .button > svg {
  width: 1.05em;
  height: 1.05em;
}
.button-wrapper {
  position: relative;
}
@media (hover: hover) {
  .button-wrapper:hover .hover-overlay:not(.no-hover) {
    display: block;
  }
}
.button-wrapper .floating-overlay-wrapper {
  padding: 0 1.56rem;
  margin: 0 -1.56rem;
  z-index: 100000008;
  position: absolute;
  top: 0;
}
.overlay.left .button-wrapper .floating-overlay-wrapper {
  left: 100%;
}
.overlay.right .button-wrapper .floating-overlay-wrapper {
  right: 100%;
}
.button-wrapper .hover-overlay {
  display: none;
  padding: 0.375em 0.8em;
  margin: 0 0.15em;
  border-radius: 1.4rem;
  white-space: nowrap;
}
.button-wrapper .hover-overlay.active {
  display: block;
}
.button-wrapper .hover-overlay > ul {
  margin: 0;
  list-style: none;
  padding: 0.1875em;
}
.button-wrapper .hover-overlay > ul .item {
  display: block;
  padding: 0.1875em;
}
.button-wrapper .hover-overlay > ul .item:hover {
  font-weight: bold;
}
.tab-container > ul {
  padding: 0;
  margin: 0;
  display: flex;
  list-style-type: none;
}
.tab-container > ul > li {
  flex: 1;
}
.tab-container svg {
  margin-right: 1ch;
}
.tab-container h2 {
  margin: 0.7em 0;
}
.tab-container button {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sl89-thumb {
  background-color: hsl(0, 0%, 31%);
  width: 1.75rem;
  height: 1.75rem;
}
.sl89-thumb:hover {
  background-color: hsl(0, 0%, 34%);
}
body > .utility-wheel {
  font-size: 0.935rem;
  z-index: 100000011 !important;
}
body > .utility-wheel .uw-section-target {
  background: radial-gradient(at 0 0, hsla(0, 0%, 8%, 0.65), transparent calc(var(--utilWheel-wheel-size) * 0.81));
}
body > .utility-wheel .uw-section-content {
  width: 19.65em;
  height: 19.65em;
}
body > .utility-wheel .uw-section-content .action-wrapper {
  gap: 1rem;
}
body > .utility-wheel .uw-section-content .action-wrapper > svg {
  width: 2.35em;
  height: 2.35em;
}
.utility-wheel .uw-section-content.uw-bottom .wrapper > svg {
  order: -1;
}
.action-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#indicator-container {
  pointer-events: none;
}
#indicator-container > * {
  position: absolute;
  left: 0;
  top: 0;
}
#indicator-container > *:not(.active) {
  display: none;
}
body.inactive #indicator-container,
body.active-utility-wheel #indicator-container {
  display: none;
}
#indicator-brush,
#indicator-eraser {
  transform: translate(calc(var(--mouseX) - var(--strokeWidth) / 2), calc(var(--mouseY) - var(--strokeWidth) / 2)) scale(calc(var(--scale) * 100%));
  width: var(--strokeWidth);
  height: var(--strokeWidth);
  border-radius: 1000px;
  outline: calc(2px / var(--scale)) solid hsl(0, 0%, 90%);
}
#indicator-eraser.erasing {
  background-color: hsl(0, 0%, 90%);
}
#indicator-picker {
  transform: translate(calc(var(--mouseX) - 25px / 2), calc(var(--mouseY) - 25px / 2));
  width: 25px;
  height: 25px;
}
#indicator-picker .crosshair::before,
#indicator-picker .crosshair::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
  background-color: hsl(0, 0%, 90%);
}
#indicator-picker .crosshair::before {
  height: 100%;
  width: 1px;
  left: calc(50% - (1px / 2));
}
#indicator-picker .crosshair::after {
  width: 100%;
  height: 1px;
  top: calc(50% - (1px / 2));
}
#indicator-picker .value-indicator {
  width: var(--picker-size);
  height: var(--picker-size);
  background-color: var(--picker-color);
  transform: translate(calc(-50% + 25px / 2), calc(50% - 25px / 2)) translate(1.75em, -1.75em);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 1000px;
  border: 2px solid hsl(0, 0%, 90%);
  outline: 2px solid var(--canvas-color);
}
#hit-border {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 0px solid transparent;
  transition: border 0.1s ease-in;
}
#hit-border.hit-left {
  border-left: 2px solid hsl(0, 0%, 90%);
}
#hit-border.hit-top {
  border-top: 2px solid hsl(0, 0%, 90%);
}
#hit-border.hit-right {
  border-right: 2px solid hsl(0, 0%, 90%);
}
#hit-border.hit-bottom {
  border-bottom: 2px solid hsl(0, 0%, 90%);
}
#settings-panel {
  --utilWheel-center-size: 4.5em;
  --utilWheel-wheel-size: 17em;
  --utilWheel-gradient-stop: 14.25em;
  --utilWheel-section-color: hsl(0, 0%, 18%);
}
#settings-panel .settings-utility-wheel {
  font-size: 1rem;
  display: flex;
  margin: auto;
  max-width: 57.5em;
}
#settings-panel .settings-utility-wheel > * {
  padding: 0.75em 0;
}
#settings-panel .utility-wheel-container {
  flex: 1;
  overflow: hidden;
  padding-right: min(1em, 1vw);
  border-right: 2px solid hsl(0, 0%, 31%);
}
#settings-panel .uw-configuration-wheel {
  font-size: 0.925em;
  width: 100%;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
}
#settings-panel .uw-configuration-wheel .uw-section-content {
  height: 16em;
  width: 16em;
}
#settings-panel .actions-container {
  padding-left: min(3em, 2.5vw);
  user-select: none;
  width: max-content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.875em;
  gap: 2em 0;
}
#settings-panel .action-wrapper {
  gap: 0.4rem;
}
#settings-panel .action-wrapper:hover {
  transform: scale(1.06);
}
#settings-panel .action-wrapper > svg {
  order: -1;
  width: 2em;
  height: 2em;
}
#notification-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#notification-overlay .notification {
  text-align: center;
  padding: 0.3em 1.5em;
  overflow: hidden;
  animation: shiftIn 0.2s ease;
  transition: all 0.2s ease, color 0.1s ease, opacity 0.15s ease;
}
#notification-overlay .notification.remove {
  color: transparent;
  opacity: 0;
  height: 0;
  padding: 0;
  border: none;
  margin-bottom: 0;
}
@keyframes shiftIn {
  from {
    opacity: 0;
    transform: translateY(-0.5em);
  }
}
#prompt-wrapper .header {
  font-size: 1.15rem;
  padding: 1em 1.5em;
  width: 100%;
  font-weight: bold;
  text-align: center;
  background-color: hsla(0, 0%, 23%, 0.675);
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
}
#prompt-wrapper .buttons {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.2em 1.65em;
  width: 100%;
}
#prompt-wrapper .button {
  padding: 0.475em 1em;
}
#toolbar {
  width: min-content;
  gap: calc(0.2244rem - 2px);
  border-radius: 100px;
  padding: 0.2244rem;
}
#toolbar .button {
  width: 2.2712rem;
  height: 2.2712rem;
}
#toolbar .button.active {
  background-color: hsl(0, 0%, 25.5%);
}
#toolbar .button:not(.active) {
  background-color: transparent;
  border: none;
  margin: 2px;
}
#toolbar .button > svg {
  width: 0.9185em;
  height: 0.9185em;
}
#tool-config-bar {
  min-height: 2.4rem;
}
#tool-config-bar .sl89-track,
#tool-config-bar .label {
  height: 2.4rem;
  box-sizing: border-box;
}
#tool-config-bar .sl89-track {
  width: 12em;
}
#tool-config-bar .label {
  display: flex;
  align-items: center;
  font-size: 0.975rem;
  padding: 0.2rem 0.7rem;
  gap: calc(var(--overlay-gap) * 0.75);
}
#tool-config-bar .label input {
  margin: 0;
}
@media (max-width: 600px) {
  #tool-config-bar[data-tool="brush"] {
    flex-direction: column;
  }
}
@media (max-width: 380px) {
  #tool-config-bar .sl89-track {
    width: 10em;
  }
}
.hue-slider .slider-hue-indicator {
  border: 4px solid var(--canvas-color);
  height: 100%;
}
.hue-slider .sl89-track {
  background-image: linear-gradient(to right, hsl(0, 75%, 70%), hsl(45, 75%, 70%), hsl(90, 75%, 70%), hsl(135, 75%, 70%), hsl(180, 75%, 70%), hsl(225, 75%, 70%), hsl(270, 75%, 70%), hsl(315, 75%, 70%), hsl(0, 75%, 70%));
}
.width-slider .sl89-thumb {
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#user-list-wrapper .item.current::after,
#room-list .item.current::after {
  margin-left: 0.28em;
}
#user-list-wrapper .item {
  transition: color 0.1s ease-in-out;
}
#user-list-wrapper .item.current::after {
  content: '(You)';
}
#user-list-wrapper .item.inactive {
  opacity: 0.5;
}
#room-list .item.current::after {
  content: '(Current)';
}
#join-room-overlay-input {
  max-width: 8em;
  text-align: center;
}
#copy-room-link-overlay {
  position: relative;
  overflow: hidden;
}
#copy-room-link-overlay .copied-indicator {
  visibility: hidden;
  opacity: 0;
  transform: scale(1.11);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: hsl(0, 0%, 18%);
  border-radius: inherit;
  transition: opacity 0.07s ease-in-out, all 0.14s ease;
}
#copy-room-link-overlay .copied-indicator > svg {
  margin-left: 0.1em;
  width: 1.5em;
  height: 1.5em;
}
#copy-room-link-overlay.copied .copied-indicator {
  visibility: visible;
  opacity: 1;
  transform: none;
}
#scale-slider {
  display: flex;
  align-items: center;
  gap: 0.225rem;
  height: 0.95rem;
}
#scale-slider .scale-button,
#scale-slider .sl89-track,
#scale-slider .sl89-thumb {
  height: 100%;
}
#scale-slider .scale-button {
  padding: 0.18em 0.5em;
  font-size: 0.775rem;
}
#scale-slider .sl89-track {
  width: 7.5rem;
  padding: 0;
}
body.initial-load #scale-slider .sl89-thumb {
  visibility: hidden;
}