* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

textarea {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;
}

#root {
  height: 100%;
}

#iconCanvas, #iconMaskImg, #iconBorderImg {
  display: none;
}
input.toggle[type=checkbox] {
  display: none;
}

input.toggle[type=checkbox] + label {
  display: flex;
  padding: 0;
  cursor: pointer;
}
input.toggle[type=checkbox] + label svg {
  margin: auto;
}

input.toggle[type=checkbox]:checked + label {
  background-color: rgba(255, 255, 255, 0.3333333333);
}

input.toggle[type=checkbox]:disabled + label {
  opacity: 0.5;
  cursor: default;
}.hue-picker,
.alpha-picker {
  position: relative;
  width: 24px;
  cursor: pointer;
}
.hue-picker .thumb,
.alpha-picker .thumb {
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 9999px;
  transform: translateY(-50%);
}

.hue-picker,
.alpha-picker,
.saturation {
  touch-action: none;
}
.hue-picker .thumb,
.hue-picker .saturation-thumb,
.alpha-picker .thumb,
.alpha-picker .saturation-thumb,
.saturation .thumb,
.saturation .saturation-thumb {
  position: absolute;
  z-index: 999;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px white, 0 0 1px 1px rgba(0, 0, 0, 0.3) inset, 0 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
}

.hue-picker {
  background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.alpha-picker .alpha-picker-gradient {
  position: absolute;
  inset: 0;
}

.saturation {
  position: relative;
  width: 200px;
  height: 150px;
  cursor: crosshair;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.saturation .saturation-thumb {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
}.email-login {
  text-align: center;
  margin-top: 10px;
}
.email-login input {
  width: 80%;
  padding: 0.6rem;
  margin: 0.5rem 5%;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--input-bg) !important;
  color: var(--text-color);
}
.email-login button {
  margin-top: 0.5rem;
  height: 2.5rem;
}
.email-login .rc {
  margin: 0 auto;
  width: fit-content;
}
.email-login .message {
  margin-top: 1rem;
  color: var(--text-color);
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.item > div {
  width: 100%;
  height: 100%;
}

.loginToggle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.loginToggle .login {
  color: var(--text-color-white);
  background: transparent;
  outline: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  flex-direction: column;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  font-family: inherit;
}
.loginToggle .login .userIcon {
  display: none;
}
@media only screen and (max-width: 580px) {
  .loginToggle .login .userIcon {
    display: block;
  }
  .loginToggle .login .userName {
    display: none;
  }
}

.loginBoxPopup {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--text-color);
  background-color: var(--panel-bg);
  z-index: 1999;
  width: 340px;
  border-radius: 5px;
  filter: drop-shadow(0 1px 4px var(--shadow-color));
}
.loginBoxPopup form {
  margin: 10px;
}
.loginBoxPopup .formTop {
  display: flex;
}
.loginBoxPopup .formTop label.txt {
  margin-top: 0.5px;
}
.loginBoxPopup .formTop #name {
  margin-top: -1px;
  margin-right: 19px;
  box-sizing: border-box;
  font-size: 16px;
  width: 100%;
}
.loginBoxPopup .formTop input#name {
  margin-left: 5px;
}
.loginBoxPopup .formTop .apply {
  font-size: inherit;
  overflow: hidden;
  position: absolute;
  right: 0;
  z-index: 1001;
}
.loginBoxPopup .formTop.guest {
  padding: 2px 0;
}
.loginBoxPopup .form-field {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.loginBoxPopup .form-field input {
  font-size: 16px;
  height: 22px;
  border: 1px solid rgba(221, 221, 221, 0.3333333333);
  color: var(--text-color);
  font-family: inherit;
  padding-left: 5px;
}
.loginBoxPopup .form-field input:focus {
  outline: 1px solid rgba(221, 221, 221, 0.6);
}
.loginBoxPopup .form-field .messagePreviews {
  display: flex;
  margin-top: 10px;
}
.loginBoxPopup .form-field .messagePreviews .preview {
  width: 100%;
}
.loginBoxPopup .form-field .messagePreviews .preview .chat {
  padding: 5px 0;
}
.loginBoxPopup .form-field .colorInputLine {
  width: 100%;
  display: flex;
}
.loginBoxPopup .form-field .colorInputLine label.txt {
  margin-top: 2.5px;
}
.loginBoxPopup .form-field .colorInputLine label.color {
  display: unset;
  width: 28px;
  height: 24px;
  margin-bottom: 0;
  margin-left: 10px;
}
.loginBoxPopup .form-field .colorInputLine input {
  display: flex;
  flex: 1;
}
.loginBoxPopup .form-field .colorPickerPanel {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
}
.loginBoxPopup .form-field .colorPickerPanel .hue-picker {
  width: 5%;
  height: 100%;
}
.loginBoxPopup .form-field .colorPickerPanel .saturation {
  width: 95%;
}
.loginBoxPopup .form-field .fieldError {
  margin-top: 3px;
  color: red;
  font-size: 12px;
}
.loginBoxPopup .form-field .fieldInfo {
  margin-top: 3px;
  color: green;
  font-size: 12px;
}
.loginBoxPopup .form-field .themes {
  display: flex;
  margin-top: 5px;
}
.loginBoxPopup .form-field .themes label {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  flex: 1;
  cursor: pointer;
  width: 100%;
  font-size: 12px;
  text-align: center;
}
.loginBoxPopup .form-field .themes label img {
  width: 90%;
}
.loginBoxPopup .form-field .themes label input {
  opacity: 0;
  height: 0;
  width: 0;
}
.loginBoxPopup .form-field .themes label .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.loginBoxPopup .form-field .themes label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.loginBoxPopup .form-field .themes label input:checked ~ .checkmark {
  border: 1px solid var(--border-color);
}
.loginBoxPopup .form-field .themes label div.note {
  font-size: 8px;
}
.loginBoxPopup .form-field .themes label:hover .checkmark {
  background-color: rgba(12, 59, 18, 0.05);
}
.loginBoxPopup .wantTo {
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
  color: #555;
}
.loginBoxPopup #googleSignIn {
  display: block;
  outline: 0;
  background: white;
  color: #444;
  width: 190px;
  border-radius: 5px;
  border: thin solid #888;
  box-shadow: 1px 1px 1px grey;
  white-space: nowrap;
  margin: 5px auto;
  padding-right: 12px;
}
.loginBoxPopup #googleSignIn span.label {
  font-family: serif;
  font-weight: normal;
}
.loginBoxPopup #googleSignIn span.icon {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAB2ElEQVR4AWP4T2NAJwtGLRi14NeNq5+6m99lxb8OcH7lbfs2LuhTd9PP08epYMGfF8/fF2W8cjbFit7lp/x59oR8C35dvfQ62B1oEB70vjSbTAv+vH752t8J2ay38cEfmyo/NJS/iQ2E+iAj9u+nj2Ra8L40E270mwjvH8cOIcv+OLTvQ1UBxHRyLPj37vCXXvFXbsYg08M8/zx9QuVU9Oda+u89rN+X8r0J1v++cwv1k+nv44ZAC4Do5w6Jf3/+IEu1bfyBFR26/psUC/YLQyz4fdoeTcqp9QtWNGnHD9pa0LOFJAuOG0As+HxQ7s9flCCKm/4VjiKnfIVbMGf/TxIs+HklBWj61R3Cfqs8ttzbjysC15/+Bbdg1yVS4uD7673rtyhZrQgwWRHssSHl8ecXmGo+fP0XMw3qA+fWL0AuaRkte38T0HQI8t6YdujpaWTZG+/uJcy7B3d+28bvJOfkl1/fOK6NA5oOR0FbciqO9lYf64/ZWQrkmi6Ltu0/CDTdt+fLiw9/ySnsLr2+6bY+CWgWHuS9cPG5+3/IL66ff3mVvq8Ol+khW/Ouv7tLhQrn6tvbTSenxu0qd1oXb7060m9zZtWx/j2Pjv3993c41MmjFoxaAAB8n/tkbTPVXwAAAABJRU5ErkJggg==") transparent 5px 50% no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 42px;
  height: 42px;
}
.loginBoxPopup #googleSignIn span.buttonText {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-weight: bold;
  /* Use the Roboto font that is loaded in the <head> */
  font-family: "Roboto", sans-serif;
}
.loginBoxPopup #googleSignIn:hover {
  transform: scale(1.025);
  cursor: pointer;
  box-shadow: 1px 1px 1px #ddd;
}
.loginBoxPopup #googleSignIn:hover span.buttonText {
  color: #555;
}
.loginBoxPopup #googleSignIn:focus {
  outline: 1px solid var(--border-color);
}
.loginBoxPopup #googleSignIn:active {
  box-shadow: none;
  transform: translate(1px, 1px);
}
.loginBoxPopup .loginButtons .emailSignIn {
  margin-top: 14px;
  font-size: 12px;
}
.loginBoxPopup .loginButtons .emailSignIn button {
  color: var(--text-color-2);
  margin: 0 auto;
  display: block;
}
.loginBoxPopup .userButtons {
  display: flex;
}
.loginBoxPopup .userButtons .b {
  width: 100px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
}
.loginBoxPopup .userButtons .signOut {
  margin-left: auto;
}
.loginBoxPopup .userButtons .b:hover {
  background-color: rgba(0, 0, 0, 0.0666666667);
}
.loginBoxPopup .userButtons .b:active {
  background-color: #eee;
}
.loginBoxPopup .error {
  color: red;
}
.loginBoxPopup .atop {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: var(--panel-bg-semi-transparent);
  z-index: 1000;
}

@media (min-width: 340px) {
  .loginBoxPopup {
    overflow: hidden;
    --animation-speed: .3s;
    transition: width, visibility, background-color;
    transition-duration: var(--animation-speed);
  }
  .loginBoxPopup .apply {
    transition: width var(--animation-speed);
  }
  .loginBoxPopup .nameLabel {
    transition: width var(--animation-speed);
    overflow: hidden;
  }
  .loginBoxPopup #name {
    transition: padding-left, border, background-color, color;
    transition-duration: var(--animation-speed);
  }
  .loginBoxPopup .insuf {
    width: 320px;
  }
}
.loginBoxPopup.display-false {
  visibility: hidden;
  width: calc(100% + 5px);
  height: 100%;
}
.loginBoxPopup.display-false .apply {
  width: 0;
}
.loginBoxPopup.display-false .nameLabel {
  width: 0;
}
.loginBoxPopup.display-false #name {
  padding-left: 0;
  border-color: transparent;
}
.loginBoxPopup.display-false .insuf {
  display: none;
}

.loginBoxPopup.display-true .nameLabel {
  width: 150px;
}
.loginBoxPopup.display-true .apply {
  width: 2em;
}

.light .loginBoxPopup.display-false {
  background-color: rgb(136.55, 158.64, 130.36);
}
.light .loginBoxPopup.display-false #name {
  color: var(--text-color-white);
  background-color: transparent;
}
.dark .b:hover {
  background-color: rgba(255, 255, 255, 0.1333333333);
}
.dark .b:active {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .loginBoxPopup input {
  background-color: rgba(0, 0, 0, 0);
}
.dark .themes label:hover .checkmark {
  background-color: rgba(255, 255, 255, 0.1333333333) !important;
}

@media (max-width: 340px) {
  .loginBoxPopup {
    width: 100vw;
  }
  .loginBoxPopup form {
    margin: 5px 0 0;
  }
  .loginBoxPopup .insuf {
    width: 100vw;
  }
  .loginBoxPopup .messagePreviews {
    display: none !important;
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.roomList {
  display: flex;
  border-radius: 0 !important;
  background: none !important;
}
.roomList .roomListItem {
  position: relative;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.roomList .roomListItem .roomDiv {
  color: var(--text-color-white);
  padding: 0 5px;
}
.roomList .roomListItem .roomDiv .roomId {
  font-weight: bolder;
}
.roomList .roomListItem .roomDiv .playerCount {
  color: #e5e5e5;
}
.roomList .roomListItem .roomDiv svg {
  vertical-align: bottom;
}
.roomList .roomListItem .roomDiv .roomBadge {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-color-white);
  overflow: hidden;
  font-size: 12px;
}
.roomList .roomListItem .roomDiv .roomBadge .bContent {
  transition: margin-top 0.3s;
  background-color: var(--panel-active-element);
  padding: 1px 5px;
  width: max-content;
  border-radius: 3px;
}
.roomList .roomListItem .roomDiv .roomBadge .bContent.show-0 {
  margin-top: -100%;
}
.roomList .roomListItem .roomDiv .roomBadge .bContent.show-1 {
  margin-top: 1px;
}
.roomList .roomListItem .roomDiv .roomBadge .bContent.show-2 {
  margin-top: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .roomList .roomListItem:hover .badge .bContent {
    transition: margin-top 0.3s;
    padding: 1px 5px;
  }
  .roomList .roomListItem.current-true:hover {
    background-color: var(--bar-active-hover-over);
  }
}
.roomList .roomListItem {
  border-right: 1px solid var(--panel-active-element);
}
.roomList .room:first-child {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.roomList .room:first-child .roomBadge {
  left: calc(10px + (100% - 10px) / 2);
}
.roomList .roomListItem.current-true {
  background-color: var(--bar-active-over);
}
.roomList .showAll {
  color: var(--text-color-white);
  font-size: 30px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-content: center;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  border-right: none;
}

.theaterMode-true .roomList {
  margin-right: 0 !important;
}
.theaterMode-true .roomList .room.current-true {
  background-color: transparent !important;
  border-radius: 5px 0 0 5px;
}
.theaterMode-true .roomList .room.current-false, .theaterMode-true .roomList .showAll {
  display: none;
}
.theaterMode-true .roomList .roomListItem {
  padding: 0 !important;
}
.theaterMode-true .roomList .roomListItem .roomDiv .badge {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .theaterMode-true .roomList .room.current-true:hover {
    background-color: var(--bar-hover-over) !important;
  }
}

@media only screen and (max-width: 899.999px) {
  .roomList {
    margin-right: 0 !important;
  }
  .roomList .room.current-true {
    background-color: transparent !important;
    border-radius: 5px 0 0 5px;
  }
  .roomList .room.current-false, .roomList .showAll {
    display: none;
  }
  .roomList .roomListItem {
    padding: 0 !important;
  }
  .roomList .roomListItem .roomDiv .badge {
    display: none;
  }
}
@media only screen and (max-width: 899.999px) and (hover: hover) and (pointer: fine) {
  .roomList .room.current-true:hover {
    background-color: var(--bar-hover-over) !important;
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.logo {
  transition: color 1s;
  color: black;
}

.dark .logo {
  color: white;
}

.logo {
  position: relative;
  transition: all 0.1s;
  width: 350px;
  height: 63px;
  margin-left: 3px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.logo .canvas {
  transition: transform 0.1s;
  transform-origin: 0 0;
  transform: scale(0.5);
  mask-image: url(/assets/logo-Dqg2_Vjj.svg);
}
.logo .screen {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: background 1s, opacity 1s;
}
.logo .borders {
  transition: transform 0.1s;
  transform-origin: 0 0;
  transform: scale(0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 700px;
}

.logo.cursor-true {
  cursor: none;
}

.theaterMode-true .logo {
  width: 210px;
  height: 39px;
  margin-left: var(--bars-margin);
}
.theaterMode-true .logo .canvas {
  transform: scale(0.3);
}
.theaterMode-true .logo .borders {
  transform: scale(0.3);
}
.theaterMode-true .logo .cursor {
  transform: scale(0.3);
}

@media only screen and (max-width: 899.999px) {
  .logo {
    width: 210px;
    height: 39px;
    margin-left: var(--bars-margin);
  }
  .logo .canvas {
    transform: scale(0.3);
  }
  .logo .borders {
    transform: scale(0.3);
  }
  .logo .cursor {
    transform: scale(0.3);
  }
}
.blackout-true .logo .screen {
  background-color: var(--panel-bg);
  opacity: 0.6;
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.topBar {
  transition: 0.1s;
  width: 100%;
  height: 62.5px;
  display: flex;
  flex: none;
  z-index: 1999;
  pointer-events: none;
}
.topBar > * {
  z-index: 1999;
}
.topBar .item {
  transition: 0.1s;
  border-radius: 5px;
  height: 40px;
  margin-left: 5px;
  margin-top: var(--bars-margin);
  margin-right: var(--bars-margin);
}
.topBar .subItem {
  position: relative;
  cursor: pointer;
}
.topBar .subItem:before {
  background-color: var(--bar-bg);
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  z-index: -9;
}
@media (hover: hover) and (pointer: fine) {
  .topBar .subItem:hover {
    background-color: var(--bar-hover-over);
  }
}
.topBar .right {
  margin-left: auto;
}
.topBar * {
  vertical-align: top;
  pointer-events: auto;
}

.theaterMode-true .topBar {
  height: 40px;
  margin-top: var(--bars-margin);
}
.theaterMode-true .topBar .lol {
  display: none;
}
.theaterMode-true .topBar .item {
  margin-top: 0;
}
.theaterMode-true .topBar .openRoomBox {
  display: flex !important;
  margin-left: 0;
}
.theaterMode-true .topBar .openRoomBox .roomListItem {
  display: flex !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

@media only screen and (max-width: 899.999px) {
  .topBar {
    height: 40px;
    margin-top: var(--bars-margin);
  }
  .topBar .lol {
    display: none;
  }
  .topBar .item {
    margin-top: 0;
  }
  .topBar .openRoomBox {
    display: flex !important;
    margin-left: 0;
  }
  .topBar .openRoomBox .roomListItem {
    display: flex !important;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}
.roomBox {
  transition: 0.3s;
  position: absolute;
  top: calc(var(--bars-margin) * 2 + 40px);
  right: var(--bars-margin);
  bottom: 0;
  background-color: var(--panel-bg);
  padding: 15px;
  border-radius: 5px;
  z-index: 999;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
}
.roomBox .button1 {
  width: 100%;
  margin-bottom: 10px;
}
.roomBox h3 {
  text-align: center;
  margin-bottom: 5px;
  color: var(--text-color);
}
.roomBox .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 300px;
  max-width: 100vw;
}
.roomBox .row button {
  width: 0;
  flex: 1 1 auto;
  padding: 0;
}
.roomBox .row .clear {
  flex: 2 1 auto;
}
.roomBox .statusLine {
  width: 300px;
  max-width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: sans-serif;
  margin-bottom: 10px;
  color: var(--text-color);
}
.roomBox .statusLine svg {
  transform: translateY(0.08em);
}
.roomBox .statusLine .desc {
  margin: auto 0;
}
.roomBox .statusLine .secondary {
  color: var(--text-color-2);
  font-size: 0.8em;
}
.roomBox .statusLine .timer {
  display: flex;
  text-align: right;
  white-space: nowrap;
  font-size: 1.4em;
  margin: auto 0;
}
.roomBox .statusLine .timer .time {
  height: 1.2em;
  margin: 0 8px;
}
.roomBox .statusLine .timer input {
  font-size: 1em;
  width: 75px;
  text-align: right;
  box-sizing: border-box;
  background: var(--panel-bg);
  color: inherit;
  outline-color: var(--border-color);
  border: 1px solid var(--border-color);
  padding-right: 2px;
}
.roomBox .statusLine .timer input.valid-false {
  color: red;
}
.roomBox .statusLine .timer.editable {
  cursor: pointer;
}
.roomBox .statusLine .timer.editing-false:hover {
  outline: 1px solid var(--border-color);
}
.roomBox .buildDate {
  color: var(--text-color-2);
  font-size: 12px;
  margin-bottom: 5px;
}
.roomBox .gallery {
  height: 0;
  flex: 1;
}

.roomBox.show-false {
  transform: translateX(200%);
  visibility: hidden;
}

.roomBox {
  box-shadow: -10px 0 10px var(--border-color);
  --current-border-color: #090A00AA;
  --current-info-bg-color: #A0B29C;
}

.dark .roomBox {
  box-shadow: -10px 0 10px #000;
  --current-border-color: #aaa;
  --current-info-bg-color: #5c6a78;
}

.roomBox .galleryList > div {
  width: 300px !important;
}
.roomBox .galleryList .galleryItem {
  width: 300px !important;
}
.roomBox .snapshot {
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  margin-bottom: 10px;
  width: 300px;
  max-width: 100%;
  height: 234px;
}
.roomBox .snapshot .roomPreviewRoot {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.roomBox .snapshot .roomPreviewRoot .roomPreview {
  flex: 1 1 auto;
  position: relative;
  width: 300px;
}
.roomBox .snapshot .roomPreviewRoot .roomPreview canvas, .roomBox .snapshot .roomPreviewRoot .roomPreview img {
  background-color: white;
  width: 300px;
  max-width: 100%;
}
.roomBox .snapshot .roomPreviewRoot .snapshotInfo {
  color: white;
  transition: opacity 0.3s;
  width: 100%;
  height: 24px;
  display: flex;
  background: var(--bar-bg);
  background-size: cover;
  align-items: center;
  padding-left: 5px;
}
.roomBox .snapshot .roomPreviewRoot .snapshotInfo .roomId {
  margin-left: 5px;
  font-size: 24px;
}
.roomBox a.snapshot {
  text-decoration: none;
  background-color: transparent;
}
.roomBox .snapshot.mock {
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.roomBox .snapshot.mock .title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-color);
}
.roomBox .snapshot.mock .subtitle {
  font-size: 16px;
  color: var(--text-color-2);
  margin-top: 10px;
}.confirmButton {
  position: relative;
}
.confirmButton .warning {
  width: fit-content;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  right: 0;
  transform: translateX(-50%);
  background-color: #700;
  color: #fee;
  padding: 5px;
  z-index: 9999;
}
.confirmButton .warning .i {
  font-size: 0.8em;
}
.confirmButton .warning:before {
  content: " ";
  background-color: #700;
  position: absolute;
  transform: rotate(45deg);
  width: 14.14px;
  height: 14.14px;
  z-index: -1;
  top: -5.86px;
  left: calc(50% - 5.86px);
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.topBar {
  transition: 0.1s;
  width: 100%;
  height: 62.5px;
  display: flex;
  flex: none;
  z-index: 1999;
  pointer-events: none;
}
.topBar > * {
  z-index: 1999;
}
.topBar .item {
  transition: 0.1s;
  border-radius: 5px;
  height: 40px;
  margin-left: 5px;
  margin-top: var(--bars-margin);
  margin-right: var(--bars-margin);
}
.topBar .subItem {
  position: relative;
  cursor: pointer;
}
.topBar .subItem:before {
  background-color: var(--bar-bg);
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  z-index: -9;
}
@media (hover: hover) and (pointer: fine) {
  .topBar .subItem:hover {
    background-color: var(--bar-hover-over);
  }
}
.topBar .right {
  margin-left: auto;
}
.topBar * {
  vertical-align: top;
  pointer-events: auto;
}

.theaterMode-true .topBar {
  height: 40px;
  margin-top: var(--bars-margin);
}
.theaterMode-true .topBar .lol {
  display: none;
}
.theaterMode-true .topBar .item {
  margin-top: 0;
}
.theaterMode-true .topBar .openRoomBox {
  display: flex !important;
  margin-left: 0;
}
.theaterMode-true .topBar .openRoomBox .roomListItem {
  display: flex !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

@media only screen and (max-width: 899.999px) {
  .topBar {
    height: 40px;
    margin-top: var(--bars-margin);
  }
  .topBar .lol {
    display: none;
  }
  .topBar .item {
    margin-top: 0;
  }
  .topBar .openRoomBox {
    display: flex !important;
    margin-left: 0;
  }
  .topBar .openRoomBox .roomListItem {
    display: flex !important;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}
.roomBox {
  transition: 0.3s;
  position: absolute;
  top: calc(var(--bars-margin) * 2 + 40px);
  right: var(--bars-margin);
  bottom: 0;
  background-color: var(--panel-bg);
  padding: 15px;
  border-radius: 5px;
  z-index: 999;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
}
.roomBox .button1 {
  width: 100%;
  margin-bottom: 10px;
}
.roomBox h3 {
  text-align: center;
  margin-bottom: 5px;
  color: var(--text-color);
}
.roomBox .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 300px;
  max-width: 100vw;
}
.roomBox .row button {
  width: 0;
  flex: 1 1 auto;
  padding: 0;
}
.roomBox .row .clear {
  flex: 2 1 auto;
}
.roomBox .statusLine {
  width: 300px;
  max-width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: sans-serif;
  margin-bottom: 10px;
  color: var(--text-color);
}
.roomBox .statusLine svg {
  transform: translateY(0.08em);
}
.roomBox .statusLine .desc {
  margin: auto 0;
}
.roomBox .statusLine .secondary {
  color: var(--text-color-2);
  font-size: 0.8em;
}
.roomBox .statusLine .timer {
  display: flex;
  text-align: right;
  white-space: nowrap;
  font-size: 1.4em;
  margin: auto 0;
}
.roomBox .statusLine .timer .time {
  height: 1.2em;
  margin: 0 8px;
}
.roomBox .statusLine .timer input {
  font-size: 1em;
  width: 75px;
  text-align: right;
  box-sizing: border-box;
  background: var(--panel-bg);
  color: inherit;
  outline-color: var(--border-color);
  border: 1px solid var(--border-color);
  padding-right: 2px;
}
.roomBox .statusLine .timer input.valid-false {
  color: red;
}
.roomBox .statusLine .timer.editable {
  cursor: pointer;
}
.roomBox .statusLine .timer.editing-false:hover {
  outline: 1px solid var(--border-color);
}
.roomBox .buildDate {
  color: var(--text-color-2);
  font-size: 12px;
  margin-bottom: 5px;
}
.roomBox .gallery {
  height: 0;
  flex: 1;
}

.roomBox.show-false {
  transform: translateX(200%);
  visibility: hidden;
}

.roomBox {
  box-shadow: -10px 0 10px var(--border-color);
  --current-border-color: #090A00AA;
  --current-info-bg-color: #A0B29C;
}

.dark .roomBox {
  box-shadow: -10px 0 10px #000;
  --current-border-color: #aaa;
  --current-info-bg-color: #5c6a78;
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.topBar {
  transition: 0.1s;
  width: 100%;
  height: 62.5px;
  display: flex;
  flex: none;
  z-index: 1999;
  pointer-events: none;
}
.topBar > * {
  z-index: 1999;
}
.topBar .item {
  transition: 0.1s;
  border-radius: 5px;
  height: 40px;
  margin-left: 5px;
  margin-top: var(--bars-margin);
  margin-right: var(--bars-margin);
}
.topBar .subItem {
  position: relative;
  cursor: pointer;
}
.topBar .subItem:before {
  background-color: var(--bar-bg);
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  z-index: -9;
}
@media (hover: hover) and (pointer: fine) {
  .topBar .subItem:hover {
    background-color: var(--bar-hover-over);
  }
}
.topBar .right {
  margin-left: auto;
}
.topBar * {
  vertical-align: top;
  pointer-events: auto;
}

.theaterMode-true .topBar {
  height: 40px;
  margin-top: var(--bars-margin);
}
.theaterMode-true .topBar .lol {
  display: none;
}
.theaterMode-true .topBar .item {
  margin-top: 0;
}
.theaterMode-true .topBar .openRoomBox {
  display: flex !important;
  margin-left: 0;
}
.theaterMode-true .topBar .openRoomBox .roomListItem {
  display: flex !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

@media only screen and (max-width: 899.999px) {
  .topBar {
    height: 40px;
    margin-top: var(--bars-margin);
  }
  .topBar .lol {
    display: none;
  }
  .topBar .item {
    margin-top: 0;
  }
  .topBar .openRoomBox {
    display: flex !important;
    margin-left: 0;
  }
  .topBar .openRoomBox .roomListItem {
    display: flex !important;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

#scratchpad-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#scratchpad-bg .canvasDiv {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 700px;
}
#scratchpad-bg .rendering {
  width: 0;
  height: 0;
}
#scratchpad-bg .rendering .hr {
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
#scratchpad-bg .border {
  pointer-events: none;
  outline: 1px solid rgba(0, 0, 0, 0.2);
}
#scratchpad-bg canvas.l, #scratchpad-bg canvas.cursor {
  position: absolute;
  pointer-events: none;
}
@keyframes hiddenFade {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 0.4;
  }
}
#scratchpad-bg canvas.l.hiddenLayer {
  animation-duration: 0.5s;
  animation-name: hiddenFade;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#scratchpad-bg.instrument-brush .bgDiv {
  cursor: none;
}

#scratchpad-bg.instrument-fill .bgDiv, #scratchpad-bg.instrument-eyeDropper .bgDiv, #scratchpad-bg.instrument-select .bgDiv, #scratchpad-bg.instrument-animation .bgDiv {
  cursor: crosshair;
}

#scratchpad-bg.instrument-move {
  cursor: move;
}
#scratchpad-bg.instrument-move canvas.cursor {
  display: none;
}
#scratchpad-bg.instrument-move .bgDiv {
  cursor: unset;
}

#scratchpad-bg.hide-false {
  transition: opacity 0.2s 0.2s;
}

#scratchpad-bg.hide-true {
  transition: opacity 0.1s;
  opacity: 0;
  pointer-events: none;
}.dialog {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px 0;
  filter: drop-shadow(0 1px 4px var(--shadow-color));
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-size: 16px;
  border-radius: 5px;
  touch-action: none;
  z-index: 9999;
}
.dialog .nonMovable {
  touch-action: auto;
}
.dialog > .title {
  margin: 5px 0;
  color: var(--text-color);
  font-size: 16px;
  width: 100%;
  display: flex;
  align-content: center;
  user-select: none;
  font-weight: bold;
}
.dialog > .title .titleBarButton {
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
  width: 18px;
  height: 16px;
  font-size: inherit;
  vertical-align: text-bottom;
  color: var(--text-color);
}
.dialog > .title .titleBarButton:hover {
  color: var(--text-color-2);
}
.dialog > .title .titleBarButton:active {
  transform: translateY(1px);
}
.dialog .title > * {
  margin-top: auto;
  margin-bottom: auto;
}
.dialog .dialogToolbar {
  display: flex;
}
.dialog .dialogToolbar .toolbarButton {
  color: var(--text-color);
  width: 32px;
  height: 32px;
  border-radius: 5px;
}
.dialog .dialogToolbar .toolbarButton svg {
  width: 16px;
  height: 16px;
  margin: auto;
}
.dialog .dialogToolbar .toolbarButton:disabled {
  color: var(--text-color-disabled);
}
.dialog .dialogToolbar .confirmButton .warning {
  font-size: 14px;
  width: 70px;
}
.dialog .dialogToolbar label {
  border-radius: 5px;
}
.dialog .dialogToolbar input:checked + label {
  background-color: var(--panel-active-element);
}
.dialog .dialogToolbar .red {
  color: #700;
}
.dialog .dialogToolbar .gap {
  margin-left: 5px;
}
.dialog iframe {
  border: none;
  width: 700px;
  max-width: 95vw;
  height: 600px;
  max-height: 95vh;
}

.dialog.center-true {
  left: 50%;
}.toggleSwitch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}
.toggleSwitch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggleSwitch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--panel-active-element);
  transition: 0.4s;
  border-radius: 34px;
}
.toggleSwitch .slider:before {
  position: absolute;
  content: "";
  height: calc(100% - 4px);
  width: 50%;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.toggleSwitch input:checked + .slider {
  background-color: var(--panel-very-active-element);
}
.toggleSwitch input:checked + .slider:before {
  transform: translateX(16px);
}

@media (hover: hover) and (pointer: fine) {
  .toggleSwitch .slider:hover:before {
    transform: translateX(3px);
  }
  .toggleSwitch input:checked + .slider:hover:before {
    transform: translateX(13px);
  }
}.selectionDialog {
  font-size: 14px;
}
.selectionDialog > * {
  margin-bottom: 5px;
}
.selectionDialog button.button1 {
  width: 100%;
}
.selectionDialog .settings > div {
  margin-top: 5px;
  display: flex;
}
.selectionDialog .settings > div .toggleLabel {
  margin-top: 4px;
  margin-left: 2px;
  cursor: pointer;
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.toolbar .menu {
  position: relative;
}
.toolbar .menu .popup {
  position: absolute;
  width: fit-content;
  height: fit-content;
  filter: drop-shadow(0 1px 4px var(--shadow-color));
  border-radius: 5px;
}
.toolbar .menu .popup:before {
  content: " ";
  background: var(--panel-bg);
  position: absolute;
  transform: rotate(45deg);
  width: 14.14px;
  height: 14.14px;
  z-index: -1;
}
.toolbar .menu.open-true {
  background-color: rgba(255, 255, 255, 0.3960784314);
}
.toolbar .menu.open-true button.toolbarButton {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.toolbar .menu.open-true button.no-shadow {
  filter: none;
}

@media (orientation: landscape) {
  .toolbar .menu .popup {
    right: calc(100% + 10px);
  }
  .toolbar .menu .popup:before {
    right: -5.86px;
  }
  .toolbar .menu .popup.start {
    top: 0;
  }
  .toolbar .menu .popup.start:before {
    top: 15px;
  }
  .toolbar .menu .popup.end {
    bottom: 0;
  }
  .toolbar .menu .popup.end:before {
    bottom: 15px;
  }
}
@media (orientation: portrait) {
  .toolbar .menu .popup {
    bottom: calc(100% + 10px);
  }
  .toolbar .menu .popup:before {
    bottom: -5.86px;
  }
  .toolbar .menu .popup.start {
    left: 0;
  }
  .toolbar .menu .popup.start:before {
    left: 15px;
  }
  .toolbar .menu .popup.end {
    right: 0;
  }
  .toolbar .menu .popup.end:before {
    right: 15px;
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.colorPickerPopup {
  background: var(--panel-bg);
  z-index: 1000;
  padding: 10px;
  user-select: none;
}
.colorPickerPopup .colorPickerTop {
  display: flex;
}
.colorPickerPopup .colorPickerTop .colorPickerTab {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.colorPickerPopup .colorPickerTop .colorPickerTab img {
  width: 30px;
  height: 30px;
  margin: 5px;
}
.colorPickerPopup .colorPickerTop .eyeDropper {
  margin-left: 4px;
  color: var(--text-color);
  font-size: 24px;
  width: 40px;
}
.colorPickerPopup .colorPickerTop input[type=checkbox]:checked + label.eyeDropper {
  background-color: var(--panel-active-element);
}
.colorPickerPopup .colorPickerTop .colorPickerTab.selected-true {
  margin: -1px -1px 0;
  border: 1px solid var(--shadow-color);
  border-bottom: none;
}
@media (hover: hover) and (pointer: fine) {
  .colorPickerPopup .colorPickerTop .colorPickerTab:hover {
    background-color: rgba(255, 255, 255, 0.2509803922);
  }
}
.colorPickerPopup .colorPickerTop input {
  font-size: 18px;
  margin: auto 0;
  height: 28px;
  max-width: 100px;
}
.colorPickerPopup .colorPickerTop .alpha {
  margin: auto 0 auto auto;
  font-size: 18px;
  color: var(--text-color);
}
.colorPickerPopup .colorPickerTop .alpha input {
  width: 40px;
  text-align: right;
}
.colorPickerPopup .colorPickerPanel {
  width: 420px;
  height: 240px;
}
.colorPickerPopup .huePicker .saturation {
  width: 85.714%;
}
.colorPickerPopup .huePicker .hue-picker {
  width: 4.762%;
}
.colorPickerPopup .huePicker .alpha-picker {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.colorPickerPopup .huePicker .alpha-picker .barPointer {
  transform: translate(-3px, -1px);
}
.colorPickerPopup .fixedTable, .colorPickerPopup .huePicker {
  margin-left: auto;
}
.colorPickerPopup .fixedTable {
  display: flex;
  height: 240px;
}
.colorPickerPopup .fixedTable .colors {
  width: 380px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(19, auto);
  grid-template-rows: repeat(12, auto);
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.colorPickerPopup .fixedTable .alphas {
  margin-left: 20px;
  width: 20px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(1, auto);
  grid-template-rows: repeat(12, auto);
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
.colorPickerPopup .fixedTable button {
  border: none;
  border-left: 1px solid black;
  border-top: 1px solid black;
  outline: none;
  cursor: pointer;
  position: relative;
}
.colorPickerPopup .fixedTable button:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.colorPickerPopup .fixedTable button:active {
  transform: translateY(1px);
  z-index: 999;
}
.colorPickerPopup .fixedTable button.selectedColor {
  border: 0;
  margin: 1px 0 0 1px;
  outline: 1px solid white;
  z-index: 999;
}
@media (hover: hover) and (pointer: fine) {
  .colorPickerPopup .fixedTable button:hover:after {
    outline: 1px solid white;
    overflow: visible;
    z-index: 999;
  }
}
@media (max-width: 440px) {
  .colorPickerPopup .colorPickerPanel {
    width: 95vw;
    height: 54vw;
  }
  .colorPickerPopup .huePicker .huePointer {
    width: 5vw;
  }
}

.blackout-true.darkRoom-false .fixedTable button:after {
  background-color: black;
  opacity: 0.6;
}
.blackout-true.darkRoom-false .colorPickerPopup .huePicker > div:after {
  pointer-events: none;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.6;
}
.blackout-true.darkRoom-false .colorPickerPopup .brushColor .fixedTable button:after, .blackout-true.darkRoom-false .colorPickerPopup .brushColor .huePicker button:after {
  background-color: black;
  opacity: 0.6;
}

.colorPickerPopup.disabled .picker {
  opacity: 0.5;
  pointer-events: none;
}

@media (orientation: portrait) {
  .colorPickerPopup {
    padding: 10px;
  }
}
@media (orientation: portrait) and (max-width: 400px) {
  .colorPickerPopup {
    padding: 2.5vw;
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.toolbarButton div.selectedColor {
  width: 20px;
  height: 20px;
  margin: 0 10px;
  border-radius: 3px;
}
.toolbarButton div.selectedColor div {
  position: relative;
  width: 100%;
  height: 100%;
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.extMenu {
  z-index: 1500;
  background: var(--panel-bg);
  color: var(--text-color);
  max-height: 300px;
  overflow-y: auto;
}
.extMenu table {
  border-collapse: collapse;
}
.extMenu .extMenuItem {
  cursor: pointer;
}
.extMenu .extMenuItem td {
  padding: 10px 10px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.extMenu .extMenuItem td button {
  width: 2em;
  height: 2em;
  border-radius: 5px;
  background: var(--bar-bg);
  scale: 1.2;
  color: var(--text-color-white);
}
.extMenu .selected {
  background-color: var(--highlight-color);
}

@media (orientation: landscape) {
  .extMenu {
    border-right: none;
    bottom: -1px !important;
  }
}
@media (orientation: portrait) {
  .extMenu {
    border-bottom: none;
    right: -1px !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .extMenuItem button:hover {
    transform: scale(1.1);
  }
}.spinner button {
  cursor: pointer;
  background-color: transparent;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: middle;
  font-size: 14px;
}
.spinner input {
  background-color: transparent;
  border-radius: 2px;
  width: 35px;
  outline-color: gray;
  padding: 0 2px;
}.brushSlider {
  max-width: 100%;
  padding: 5px 0;
  overflow: hidden;
}
.brushSlider .spinnerDiv {
  display: flex;
  color: var(--text-color);
  margin-left: 10px;
  font-size: 14px;
  margin-bottom: 3px;
}
.brushSlider .spinnerDiv .spinner {
  margin-left: 1ex;
}
.brushSlider .spinnerDiv .spinner button, .brushSlider .spinnerDiv .spinner input {
  border: 1px solid gray;
  color: var(--text-color);
}
.brushSlider .spinnerDiv .spinner input {
  font-size: 14px;
}
.brushSlider .spinnerDiv .spinner button {
  vertical-align: text-bottom;
}
.brushSlider .slider {
  position: relative;
}
.brushSlider .slider .transition {
  transition: all 0.25s;
}
.brushSlider .slider .scale svg {
  touch-action: none;
  user-select: none;
}
.brushSlider .slider .scale svg .sample {
  stroke: var(--text-color);
}
.brushSlider .slider .scale svg .axis {
  fill: lightgrey;
  opacity: 0.7;
}
.brushSlider .slider .scale svg .axisLine {
  stroke: lightgrey;
  fill: none;
}
.brushSlider .slider .scale svg .pos {
  stroke-width: 2;
  stroke: lightgrey;
  fill: var(--text-color);
}
.brushSlider .slider .scale svg .unavailable {
  fill: var(--panel-bg-semi-transparent);
  transform: translateX(1px);
  width: 100%;
  height: 200%;
}
.brushSlider .slider .scale .fixedSizes {
  position: relative;
  height: 24px;
}
.brushSlider .slider .scale .fixedSizes button {
  position: absolute;
  cursor: pointer;
  background-color: transparent;
  color: var(--text-color);
  transform: translateX(-50%);
  width: 32px;
  height: 24px;
}
.brushSlider .slider .fade {
  top: 0;
  position: absolute;
  width: 70px;
  height: 100%;
  pointer-events: none;
}
.brushSlider .slider .fade.left {
  background: linear-gradient(to right, var(--panel-bg), var(--panel-bg-transparent));
}
.brushSlider .slider .fade.right {
  background: linear-gradient(to left, var(--panel-bg), var(--panel-bg-transparent));
}
.brushSlider .slider .unavailable2 {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100px;
}
.brushSlider .slider .unavailable2 div {
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 12px;
  text-align: center;
  color: var(--text-color);
}.brushPopup .brushPanel {
  max-width: calc(100vw - 20px);
  width: 400px;
  background: var(--panel-bg);
  display: flex;
}
.brushPopup .brushPanel .widthSlider {
  max-width: calc(100vw - 20px);
  width: 400px;
}

@media (orientation: portrait) {
  .brushPopup {
    margin-left: -10px;
    margin-right: 10px;
  }
  .brushPopup:before {
    left: 23.5325px !important;
  }
}.toolPickerPanel {
  color: var(--text-color);
  min-width: 80px;
  position: relative;
}
.toolPickerPanel .subDiv {
  background: var(--panel-bg);
  padding: 4px;
}
.toolPickerPanel .moveWithFingerDiv {
  min-width: 160px;
  position: absolute;
  bottom: 100%;
  white-space: nowrap;
  margin-bottom: 4px;
}
.toolPickerPanel .moveWithFingerDiv .toggleLabel {
  cursor: pointer;
  margin-left: 2px;
  font-size: 14px;
  display: inline-block;
  transform: translateY(3px);
}
.toolPickerPanel .tools {
  position: relative;
  display: grid;
  width: fit-content;
}
.toolPickerPanel .toolButton {
  width: 40px;
  height: 40px;
  transition: transform 0.3s;
}
.toolPickerPanel .toolButton .toolIcon {
  margin-left: 5px;
  margin-top: 5px;
  width: 30px;
  height: 30px;
}
.toolPickerPanel .toolButton .keepOpacityIcon {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TS0UqHeygopChOlkQFXHUKhShQqgVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEzc1J0UVKvK8ptIjxwuN9nHfP4b37AKFeZprVNQ5oum2mEnExk10Vg68IYBhh+DAgM8uYk6QkPOvrnvqo7mI8y7vvz+pVcxYDfCLxLDNMm3iDeHrTNjjvE0dYUVaJz4nHTLog8SPXFZffOBeaLPDMiJlOzRNHiMVCBysdzIqmRjxFHFU1nfKFjMsq5y3OWrnKWvfkLwzl9JVlrtMaQgKLWIIEEQqqKKEMGzHadVIspOg87uEfbPolcinkKoGRYwEVaJCbfvA/+D1bKz854SaF4kDgxXE+RoDgLtCoOc73seM0TgD/M3Clt/2VOjDzSXqtrUWPgPA2cHHd1pQ94HIH6H8yZFNuSn5aQj4PvJ/RN2WBvlugZ82dW+scpw9AmmaVvAEODoHRAmWve7y7u3Nu//a05vcDKFlyiYWEgXUAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQflBR0SEiZVlaKTAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAACVJREFUOMtjZGBgEGHAD97gk2RioBCMGjAYDGAkQo3IaCAOewMAV5QBM8kuECUAAAAASUVORK5CYII=");
}
.toolPickerPanel .toolButton .resetOpacityIcon {
  background: var(--text-color);
}
.toolPickerPanel input.toggle[type=checkbox]:checked + label.toolButton {
  background-color: var(--panel-active-element);
}
.toolPickerPanel .toolProps {
  position: absolute;
  top: 0;
}

@media (orientation: landscape) {
  .toolPickerPanel .tools {
    margin-left: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 40px);
  }
  .toolPickerPanel .moveWithFingerDiv {
    right: 0;
  }
  .toolPickerPanel .toolProps {
    right: calc(100% + 4px);
  }
}
@media (orientation: portrait) {
  .toolPickerPanel .tools {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 40px);
  }
  .toolPickerPanel .moveWithFingerDiv {
    left: 0;
  }
  .toolPickerPanel .toolProps {
    left: calc(100% + 4px);
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 40px);
  }
}
@media (hover: hover) and (pointer: fine) {
  .toolPickerPanel .toggle:not([disabled]) + .toolButton:hover {
    transform: scale(1.2);
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.toolbar {
  display: flex;
  flex-direction: column;
  width: 40px;
  height: 100%;
  margin-right: var(--bars-margin);
  z-index: 550;
  justify-content: center;
  transition: transform 0.3s;
  pointer-events: none;
  gap: 10px;
}
.toolbar * {
  pointer-events: auto;
}
.toolbar .toolbarGroup {
  background: var(--bar-bg);
  background-size: cover;
  border-radius: 5px;
  width: 100%;
  display: inherit;
  flex-direction: inherit;
}
.toolbar .toolbarGroup .layerToggle {
  position: relative;
}
.toolbar .theaterMode-true .toolbarGroup .switchTM {
  display: none;
}
@media only screen and (max-width: 899.999px) {
  .toolbar .toolbarGroup .switchTM {
    display: none;
  }
}
.toolbar .toolbarButton:disabled {
  cursor: not-allowed;
}

.toolbar.show-false {
  transform: translateX(150%);
}

@media (hover: hover) and (pointer: fine) {
  .toolbar .toolbarButton:hover:enabled, .toolbar label.toolbarButton:hover {
    background-color: rgba(255, 255, 255, 0.2666666667);
  }
}
.toolbarButton:active:enabled > *, input[type=checkbox]:enabled + label.toolbarButton:active > * {
  transform: translateY(1px);
}

@media (orientation: portrait) {
  .toolbar {
    flex-direction: row;
    left: calc(var(--bars-margin) + 32px);
    width: unset;
    height: 40px;
    margin-bottom: max(var(--inset-bottom), var(--bars-margin));
    margin-right: var(--bars-margin);
    justify-content: end;
  }
  .toolbar .toolbarGroup {
    width: fit-content;
    height: 100%;
  }
}
@media only screen and (orientation: portrait) and (max-width: 400px) {
  .toolbar {
    gap: 5px;
  }
  .toolbar .toolbarGroup {
    margin: 0;
  }
  .toolbar .toolbarGroup.noMob {
    display: none;
  }
}
@media (orientation: portrait) {
  .toolbar.show-false {
    transform: translateY(250%);
  }
  .bottomControls .popup2 {
    left: unset;
    right: 0;
    top: unset;
    bottom: 100%;
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.bigRoomListBg .bigRoomListScrollable .bigRoomList .room {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomPreview {
  flex: 1 1 auto;
  position: relative;
  width: 100%;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomPreview canvas, .bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomPreview img {
  background-color: white;
  position: absolute;
  width: 300px;
  height: 210px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo {
  color: white;
  transition: opacity 0.3s;
  width: 100%;
  height: 32px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  background: var(--bar-bg);
  background-size: cover;
  align-items: center;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo .roomId {
  margin-left: 5px;
  font-size: 24px;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo .playerCount {
  margin-left: auto;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo .count {
  width: 45px;
  display: flex;
  align-items: center;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.3764705882);
  color: white;
  background-color: transparent;
  text-align: center;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 1px;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo .count svg {
  font-size: 18px;
  margin-left: 4px;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo .count div {
  min-width: 20px;
  text-align: right;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo a.count {
  text-decoration: none;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room .roomPreviewRoot .roomInfo a.count:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList a.room {
  border: none;
  text-decoration: none;
  background-color: transparent;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room.dark-true {
  color: white;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room.dark-true .roomPreview canvas {
  background: black;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room.current-true {
  border-color: var(--current-border-color);
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList .room.current-true .roomInfo {
  background: var(--current-info-bg-color);
}

.bigRoomListBg.show-true .room .roomInfo {
  transition: transform 0.3s;
  opacity: 1;
}

.bigRoomListBg.display-true .room {
  transition: transform 0.3s;
}

.bigRoomListBg.show-false .room .roomInfo {
  opacity: 0;
}.bigRoomListBg {
  --current-border-color: #090A00AA;
  --current-info-bg-color: #A0B29C;
}

.dark .bigRoomListBg {
  --current-border-color: #aaa;
  --current-info-bg-color: #5c6a78;
}

.bigRoomListBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 0.1s 0.4s;
  opacity: 0;
  pointer-events: none;
}
.bigRoomListBg .bigRoomListScrollable {
  width: 100%;
  height: 100%;
}
.bigRoomListBg .bigRoomListScrollable .bigRoomList {
  position: relative;
  width: 100%;
}
.bigRoomListBg .newRoom {
  outline: 1px solid var(--border-color);
  color: var(--text-color-2);
  display: flex;
  flex-direction: column;
}
.bigRoomListBg .newRoom > div {
  margin: auto;
  text-align: center;
}
.bigRoomListBg .newRoom > div svg {
  font-size: 64px;
}
.bigRoomListBg .newRoom:hover {
  background-color: rgba(255, 255, 255, 0.0666666667);
}

.bigRoomListBg.show-true {
  opacity: 1;
  transition: none;
  pointer-events: all;
}

.bigRoomListBg.display-false {
  transform: translate(-9999px, -9999px);
}.splash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 200px;
  z-index: 999;
  pointer-events: none;
}
.splash .rel {
  position: relative;
  width: 100%;
  height: 100%;
}
.splash .rel .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  color: var(--text-color);
  text-shadow: 0 0 2px var(--bw-bg), 0 0 2px var(--bw-bg), 0 0 2px var(--bw-bg), 0 0 2px var(--bw-bg), 0 0 2px var(--bw-bg), 0 0 2px var(--bw-bg);
  animation-name: landing;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
@keyframes landing {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(1.2);
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.layerList {
  width: 200px;
  max-height: 400px;
  padding-bottom: 10px;
}
.layerList .timelineView {
  width: 100%;
  height: calc(100% - 32px - 14px - 10px);
  max-height: 344px;
}
.layerList .timelineView .scrollableY {
  width: 100%;
  max-height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: none;
  display: flex;
}
.layerList .timelineView .scrollableY .layerInfos {
  width: 40px;
}
.layerList .timelineView .scrollableY .scrollableX {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline {
  width: 200%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline .layerTracks {
  padding-top: 4px;
}
.layerList .bottomBar {
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.layerList .bottomBar .warning {
  width: 100px;
}

@media only screen and (max-height: 600px) {
  .layerList {
    height: 50vh;
    max-height: 50vh;
  }
  .layerList .timelineView {
    height: calc(50vh - 32px - 14px - 10px);
    max-height: calc(50vh - 32px - 14px - 10px);
  }
}
.layerTrack .previews .preview {
  width: 50px;
  height: 35px;
  background: var(--room-bg);
  border-left: 1px solid #aaa;
  display: inline-block;
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
}
.layerTrack .previews .preview canvas {
  width: 50px;
}
.layerTrack .previews .preview .frameInfo {
  color: var(--room-text-color);
  font-size: 8px;
  position: absolute;
  bottom: 1px;
  right: 3px;
}
.layerTrack .previews .preview.dimmed-false:first-child {
  border-left-color: var(--text-color);
}
.layerTrack .previews .preview.dimmed-true {
  opacity: 0.5;
}
.layerTrack .previews .preview.dimmed-true + .preview.dimmed-false {
  border-left-color: var(--room-text-color);
}
.layerTrack .previews .preview.last-active {
  border-right: 1px solid #aaa;
  border-right-color: var(--text-color);
}
.layerTrack .previews .preview.last-active + .preview, .layerTrack .previews .preview.selected + .preview {
  border-left-color: var(--text-color);
}
.layerTrack .previews .preview.dimmed-false.selected {
  border: 1px solid var(--light-bg);
  outline: 2px solid var(--text-color);
  z-index: 1004;
  transform: scale(1.05);
}
.layerTrack .previews .preview.dimmed-false.selectedDuplicate {
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  z-index: 1000;
}
.layerTrack .previews .preview.dragActive {
  border-left-width: 2px;
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.layerList {
  width: 200px;
  max-height: 400px;
  padding-bottom: 10px;
}
.layerList .timelineView {
  width: 100%;
  height: calc(100% - 32px - 14px - 10px);
  max-height: 344px;
}
.layerList .timelineView .scrollableY {
  width: 100%;
  max-height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: none;
  display: flex;
}
.layerList .timelineView .scrollableY .layerInfos {
  width: 40px;
}
.layerList .timelineView .scrollableY .scrollableX {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline {
  width: 200%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline .layerTracks {
  padding-top: 4px;
}
.layerList .bottomBar {
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.layerList .bottomBar .warning {
  width: 100px;
}

@media only screen and (max-height: 600px) {
  .layerList {
    height: 50vh;
    max-height: 50vh;
  }
  .layerList .timelineView {
    height: calc(50vh - 32px - 14px - 10px);
    max-height: calc(50vh - 32px - 14px - 10px);
  }
}
.layerTrack {
  height: 41px;
  display: flex;
  place-items: end;
  user-select: none;
  transition: margin-top 0.3s;
  padding-left: 2px;
}
.layerTrack .previews {
  padding: 2px;
  position: relative;
  display: flex;
}
.layerTrack .previews .moveTo {
  position: absolute;
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20viewBox='0%200%20512%20512'%20version='1.1'%20id='r'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20style='fill:currentColor;stroke-linecap:square'%20id='path1857'%20d='M%200,34.297%20512,34.297%20256,477.703%20Z'%20/%3e%3c/svg%3e");
  width: 8px;
  height: 8px;
  bottom: 0;
  transform-origin: center;
  transform: translateX(3px) translateX(-50%) rotate(180deg);
}

.dark .layerTrack .previews .moveTo {
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20viewBox='0%200%20512%20512'%20version='1.1'%20id='r'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20style='fill:white;stroke-linecap:square'%20id='path1857'%20d='M%200,34.297%20512,34.297%20256,477.703%20Z'%20/%3e%3c/svg%3e");
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.layerList {
  width: 200px;
  max-height: 400px;
  padding-bottom: 10px;
}
.layerList .timelineView {
  width: 100%;
  height: calc(100% - 32px - 14px - 10px);
  max-height: 344px;
}
.layerList .timelineView .scrollableY {
  width: 100%;
  max-height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: none;
  display: flex;
}
.layerList .timelineView .scrollableY .layerInfos {
  width: 40px;
}
.layerList .timelineView .scrollableY .scrollableX {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline {
  width: 200%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline .layerTracks {
  padding-top: 4px;
}
.layerList .bottomBar {
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.layerList .bottomBar .warning {
  width: 100px;
}

@media only screen and (max-height: 600px) {
  .layerList {
    height: 50vh;
    max-height: 50vh;
  }
  .layerList .timelineView {
    height: calc(50vh - 32px - 14px - 10px);
    max-height: calc(50vh - 32px - 14px - 10px);
  }
}
.layerList .timelineView .layerInfos .layerInfoCntr {
  font-size: 12px;
  height: 41px;
  transition: height 0.3s;
  position: relative;
}
.layerList .timelineView .layerInfos .layerInfoCntr .layerInfo {
  display: flex;
  width: 30px;
  height: 100%;
  align-items: center;
}
.layerList .timelineView .layerInfos .layerInfoCntr .layerInfo .layerId {
  transition: transform 0.3s;
  cursor: pointer;
}
.layerList .timelineView .layerInfos .layerInfoCntr .layerInfo .layerId.hidden {
  color: var(--text-color-disabled);
}
.layerList .timelineView .layerInfos .layerInfoCntr .layerInfo .layerProps {
  margin-left: auto;
}
.layerList .timelineView .layerInfos .layerInfoCntr .layerInfo .layerProps svg {
  margin-right: 3px;
}
.layerList .timelineView .layerInfos .layerInfoCntr.my-true .layerId {
  font-weight: bold;
}.dropdown {
  position: relative;
}
.dropdown .dropdownButton {
  background: var(--panel-bg);
}
.dropdown .dropdownContent {
  position: absolute;
  z-index: 30000;
  background: var(--panel-bg);
  white-space: nowrap;
}
.dropdown .dropdownContent button {
  display: block;
  width: 100%;
  text-align: left;
}
.dropdown .dropdownContent .dropdownElement {
  display: block;
  width: 100%;
  text-align: left;
  font-size: inherit;
}
.dropdown .dropdownContent > .title {
  padding: 0.2em 0.5em 0;
}

.dropdown.active-true > .dropdownButton, .dropdown.active-true > .dropdownContent {
  filter: drop-shadow(0 1px 4px var(--shadow-color));
}

.dropdown.opensToBottom > .dropdownContent {
  top: calc(100% - 5px);
}
.dropdown.opensToBottom > .dropdownButton:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20viewBox='0%200%20512%20512'%20version='1.1'%20id='r'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20style='fill:currentColor;stroke-linecap:square'%20id='path1857'%20d='M%200,34.297%20512,34.297%20256,477.703%20Z'%20/%3e%3c/svg%3e");
  bottom: 16%;
  right: 16%;
}
.dropdown.opensToBottom > .dropdownButton:disabled:after {
  opacity: 0.3;
}

.dark .dropdown.opensToBottom > .dropdownButton:after {
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20standalone='no'?%3e%3csvg%20viewBox='0%200%20512%20512'%20version='1.1'%20id='r'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20style='fill:white;stroke-linecap:square'%20id='path1857'%20d='M%200,34.297%20512,34.297%20256,477.703%20Z'%20/%3e%3c/svg%3e");
}

.dropdown.opensToLeft > .dropdownContent {
  left: calc(100% - 5px);
}

.dropdown.attachedToLeft > .dropdownContent {
  left: 5px;
}

.dropdown.attachedToRight > .dropdownContent {
  right: 5px;
}

.dropdown.attachedToTop > .dropdownContent {
  top: 5px;
}.layerList .dialogToolbar {
  font-size: 12px;
}
.layerList .dialogToolbar .toolbarButton:enabled:hover, .layerList .dialogToolbar label:hover {
  background-color: var(--panel-active-element) !important;
}
.layerList .dialogToolbar .dropdownButton .disabledMessage {
  margin-top: 3px;
  font-size: 8px;
  color: var(--text-color-disabled);
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.layerList {
  width: 200px;
  max-height: 400px;
  padding-bottom: 10px;
}
.layerList .timelineView {
  width: 100%;
  height: calc(100% - 32px - 14px - 10px);
  max-height: 344px;
}
.layerList .timelineView .scrollableY {
  width: 100%;
  max-height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: none;
  display: flex;
}
.layerList .timelineView .scrollableY .layerInfos {
  width: 40px;
}
.layerList .timelineView .scrollableY .scrollableX {
  overflow-x: scroll;
  overflow-y: hidden;
  height: 100%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline {
  width: 200%;
}
.layerList .timelineView .scrollableY .scrollableX .timeline .layerTracks {
  padding-top: 4px;
}
.layerList .bottomBar {
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.layerList .bottomBar .warning {
  width: 100px;
}

@media only screen and (max-height: 600px) {
  .layerList {
    height: 50vh;
    max-height: 50vh;
  }
  .layerList .timelineView {
    height: calc(50vh - 32px - 14px - 10px);
    max-height: calc(50vh - 32px - 14px - 10px);
  }
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

#scratchpadApp {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: visible;
  display: flex;
}

.bottomMsg {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  z-index: 500;
  color: var(--text-color);
  border-radius: 5px;
}
.bottomMsg a {
  color: inherit;
}
.bottomMsg span {
  display: inline-block;
  white-space: pre;
}
.bottomMsg a.button1 {
  display: inline-block;
}
.bottomMsg .button1 {
  height: 2em;
  width: 2em;
  padding: 0;
  margin-left: 10px;
}
.bottomMsg .back {
  float: right;
}

.bottomMsg.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottomMsg.info {
  background-color: #7f9151;
  --text-color: #e4ffe3;
}

.dark .bottomMsg.info {
  background-color: #212614;
  --text-color: #abbfaa;
}

.bottomMsg.warning {
  border: 1px solid var(--border-color);
  background-color: #ffe2cf;
  color: var(--text-color-3);
}

.dark .bottomMsg.warning {
  background-color: #511b00;
  border: none;
}

.bottomMsg.error {
  background-color: #955;
  --text-color: #ffe5e5;
}

.dark .bottomMsg.error {
  background-color: #4d2929;
  --text-color: #cca3a3;
}

.dark .readOnlyMessage img {
  filter: invert(0.8);
}

@media (orientation: landscape) {
  #scratchpadApp {
    flex-direction: row;
  }
  .theaterMode-true .bottomMsg {
    max-width: calc(100vw - 40px - var(--bars-margin) * 3);
    box-sizing: border-box;
    margin: var(--bars-margin);
  }
}
@media only screen and (orientation: landscape) and (max-width: 899.999px) {
  .bottomMsg {
    max-width: calc(100vw - 40px - var(--bars-margin) * 3);
    box-sizing: border-box;
    margin: var(--bars-margin);
  }
}
@media (orientation: portrait) {
  #scratchpadApp {
    flex-direction: column;
  }
  #scratchpadApp .bottomMsg {
    bottom: calc(40px + var(--bars-margin) * 2);
  }
}
.disconnected #scratchpadApp {
  filter: grayscale(1);
}.extDialog {
  position: absolute;
  z-index: 1150;
  color: var(--text-color);
}
.extDialog .close {
  float: right;
  padding: 0 7px;
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("bg/default.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("bg/default-dark.png");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("img/trbg.png") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}

.realChat {
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 100%;
  overflow: hidden;
  margin: 3px;
  transition: transform 0.3s, width 0.3s, background-color 1s;
  transform-origin: 0 100%;
  transform: scale(1);
  z-index: 150;
  border-radius: 16px;
}

.chat {
  border-collapse: collapse;
  background-color: var(--secondary-bg);
  --link-color: var(--control-color);
  --form-color: var(--control-color);
}
.chat .history {
  width: 100%;
  flex: 1 1 auto;
  height: 100px;
  overflow-x: hidden;
  overflow-y: auto;
}
.chat .message {
  position: relative;
  font-size: 14px;
  color: var(--text-color);
  margin: 0 10px;
  white-space: pre-wrap;
  width: fit-content;
  max-width: 100%;
  transition: opacity 0.3s;
  opacity: 1;
}
.chat .message:before {
  content: "";
  display: block;
  height: 5px;
}
.chat .message:after {
  content: "";
  display: block;
  height: 2px;
}
.chat .message .msgHeader {
  display: flex;
  margin-bottom: 5px;
  align-items: baseline;
}
.chat .message .msgHeader .nick {
  color: gray;
  font-style: italic;
  margin-right: 20px;
}
.chat .message .msgHeader .user {
  font-weight: bolder;
  font-style: normal;
}
.chat .message .msgHeader .nickClickable {
  cursor: pointer;
}
.chat .message .msgHeader .msgTime {
  margin-left: auto;
  margin-top: 2px;
  font-size: 12px;
}
.chat .message .msgHeader .rm {
  cursor: pointer;
  text-decoration: underline;
  display: none;
}
.chat .message .msgHeader.me .nick {
  margin-right: 0;
  transition: color 1s;
}
.chat .message .msgPart {
  padding: 5px;
  border-radius: 5px;
  overflow-wrap: anywhere;
  width: fit-content;
  transition: background-color 1s;
}
.chat .message .msgPart .chatAction {
  width: 100%;
  margin-top: 5px;
  border-radius: 3px;
}
.chat .message .info {
  position: absolute;
  top: 0;
  background-color: var(--light-bg);
  border-radius: 5px;
  padding: 10px;
  border: 1px solid var(--panel-bg);
  z-index: 1001;
  width: 200px;
}
.chat .message .info .openExt {
  width: 2em;
  height: 2em;
  border-radius: 5px;
  background: var(--bar-bg);
  color: var(--text-color-white);
  position: absolute;
  right: 5px;
  top: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .chat .message .info .openExt:hover {
    transform: scale(1.1);
  }
}
.chat .message a {
  color: var(--link-color);
}
.chat .message a:visited {
  color: var(--link-color);
}
.chat .message.joined:before {
  height: 0;
}
.chat .message.pending {
  opacity: 0.7;
}
@starting-style {
  .chat .message.pending {
    opacity: 1;
  }
}
.chat .message:hover .msgHeader .rm {
  display: block;
}
.chat .banMessage {
  padding: 5px;
  text-align: center;
}
.chat .form {
  display: flex;
  flex: 0 0 auto;
  margin: 5px 5px calc(6.5px + max(var(--inset-bottom), var(--bars-margin))) 5px;
}
.chat .form textarea {
  background-color: var(--light-bg);
  color: var(--text-color);
  font-size: 14px;
  flex: 1;
  min-height: 18px;
  padding: 4px 0 4px 4px;
  resize: none;
  vertical-align: middle;
  margin: 0 1px 0 3px;
}
.chat .form textarea:invalid {
  border: 1px solid #aa0000;
}
.chat .form .sendingBlock {
  background: transparent;
  border: 0;
  font-size: 30px;
  flex: 0 0 auto;
  color: var(--form-color);
  margin: auto 0;
  overflow: hidden;
  height: 100%;
  width: 32px;
  position: relative;
}
.chat .form .sendingBlock .send:disabled {
  opacity: 0.5;
}
.chat .form .sendingBlock > * {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.2s;
  font-size: inherit;
}
.chat .form .sendingBlock > *.show-true {
  transform: scale(1);
}
.chat .form .sendingBlock > *.show-false {
  transform: scale(0);
}
.chat .form .sendingBlock * {
  display: block;
  color: inherit;
  font-size: inherit;
  height: inherit;
}
@media only screen and (max-width: 400px) {
  .chat {
    width: 100%;
  }
}

.collapseChat {
  display: none;
}

.theaterMode-true .realChat {
  position: absolute;
  flex: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 998;
}
.theaterMode-true .realChat .form textarea {
  margin-left: 42px;
}
.theaterMode-true .dark .realChat {
  background-color: rgba(37, 37, 37, 0.9333333333);
}
.theaterMode-true .realChat.show-false {
  transform: scale(0);
  width: 349px;
}
@media only screen and (max-width: 400px) {
  .theaterMode-true .realChat.show-false {
    width: 99%;
  }
}
.theaterMode-true .collapseChat {
  display: block;
  position: absolute;
  left: var(--bars-margin);
  bottom: max(var(--inset-bottom), var(--bars-margin));
  z-index: 999;
}
.theaterMode-true .collapseChat button {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  position: relative;
  font-size: 30px;
  background: var(--bar-bg);
  background-size: cover;
  border: 0;
  color: white;
  cursor: pointer;
}
.theaterMode-true .collapseChat button svg {
  vertical-align: bottom;
}
.theaterMode-true .collapseChat button .unreadCount {
  transition: background 1s;
}
.theaterMode-true .collapseChat.show-true button {
  color: var(--control-color);
  background: transparent;
}

@media only screen and (max-width: 899.999px) {
  .realChat {
    position: absolute;
    flex: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 998;
  }
  .realChat .form textarea {
    margin-left: 42px;
  }
  .dark .realChat {
    background-color: rgba(37, 37, 37, 0.9333333333);
  }
  .realChat.show-false {
    transform: scale(0);
    width: 349px;
  }
}
@media only screen and (max-width: 899.999px) and (max-width: 400px) {
  .realChat.show-false {
    width: 99%;
  }
}
@media only screen and (max-width: 899.999px) {
  .collapseChat {
    display: block;
    position: absolute;
    left: var(--bars-margin);
    bottom: max(var(--inset-bottom), var(--bars-margin));
    z-index: 999;
  }
  .collapseChat button {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    position: relative;
    font-size: 30px;
    background: var(--bar-bg);
    background-size: cover;
    border: 0;
    color: white;
    cursor: pointer;
  }
  .collapseChat button svg {
    vertical-align: bottom;
  }
  .collapseChat button .unreadCount {
    transition: background 1s;
  }
  .collapseChat.show-true button {
    color: var(--control-color);
    background: transparent;
  }
}
.dark .chat {
  --link-color: #ccc;
  --form-color: var(--text-color);
}

.disconnected .chat {
  filter: grayscale(1);
}body {
  overflow: hidden;
}

.root {
  overflow: hidden;
}

body.drawing, body.no-selection {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: none;
}
body.drawing input, body.no-selection input {
  pointer-events: none;
}

.drawing {
  cursor: none;
}

.react-root {
  overflow: hidden;
  --bars-margin: 5px;
  --inset-bottom: 0;
  --top-height: 62.5px;
  --left-width: 350px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  transition: background 1s, filter 1s;
  background-color: var(--panel-bg);
  background: var(--main-bg);
  background-size: cover;
}
@supports (bottom: env(safe-area-inset-bottom)) {
  .react-root {
    --inset-bottom: env(safe-area-inset-bottom);
  }
}

.disconnectedMsg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;
  z-index: 9999;
  background: var(--panel-bg);
  color: var(--text-color);
  padding: 20px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  max-width: 600px;
  margin: 20px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.disconnectedMsg h2 {
  color: var(--text-color);
  margin-bottom: 10px;
}
.disconnectedMsg p {
  line-height: 1.6;
  margin-bottom: 15px;
}
.disconnectedMsg p strong {
  color: var(--text-color-2);
}
.disconnectedMsg .note {
  font-style: italic;
  color: var(--text-color-2);
  margin-top: 20px;
}
.disconnectedMsg a.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.disconnectedMsg.btxt {
  font-family: "Arial, sans-serif", serif;
}

.disconnectedMsg.ios {
  z-index: 10000;
}

.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--panel-bg-semi-transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.captcha div.msg {
  margin-bottom: 1em;
  text-align: center;
  line-height: 1.6;
}

button {
  background: none;
  border: none;
  color: inherit;
}

button:enabled {
  cursor: pointer;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 1px solid black;
}

input:focus {
  outline-color: var(--border-color);
}

.light {
  --main-bg: url("/assets/default-z-LlzImX.png");
  --panel-bg: #f7f7e6;
  --panel-bg-transparent: rgba(247, 247, 230, 0);
  --panel-bg-semi-transparent: rgba(247, 247, 230, 0.95);
  --input-bg: white;
  --control-color: #474b0f;
  --secondary-bg: rgba(253.1818181818, 253.1818181818, 249.3181818182, 0.95);
  --bw-bg: white;
  --bar-bg: rgba(12, 59, 18, 0.47);
  --bar-hover-over: #fff4;
  --bar-active-over: #fff3;
  --bar-active-hover-over: #fff5;
  --dark-bar-bg: rgba(47, 65, 77, 0.7333333333);
  --border-color: rgba(12, 59, 18, 0.47);
  --panel-active-element: rgba(12, 59, 18, 0.27);
  --hover-transparent: rgba(12, 59, 18, 0.1);
  --panel-very-active-element: rgba(12, 59, 18, 0.47);
  --light-bg: #fff;
  --light-bg-2: #ccc;
  --wb-bg: #fff;
  --text-color: #000;
  --text-color-2: #555;
  --text-color-3: #000;
  --text-color-hl: #555;
  --text-color-white: #fff;
  --text-color-disabled: #999;
  --shadow-color: #0005;
  --highlight-color: #fff9;
}

.dark {
  color-scheme: dark;
  --main-bg: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9bpUWqDhYUcchQdbEgKuKoVShChVArtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APE1cVJ0UVK/F9SaBHjwXE/3t173L0D/PUyU82OcUDVLCOViAuZ7KoQfEUIAfSgH6MSM/U5UUzCc3zdw8fXuxjP8j735+hWciYDfALxLNMNi3iDeHrT0jnvE0dYUVKIz4nHDLog8SPXZZffOBcc9vPMiJFOzRNHiIVCG8ttzIqGSjxFHFVUjfL9GZcVzluc1XKVNe/JXxjOaSvLXKc5hAQWsQQRAmRUUUIZFmK0aqSYSNF+3MM/6PhFcsnkKoGRYwEVqJAcP/gf/O7WzE9OuEnhOND5Ytsfw0BwF2jUbPv72LYbJ0DgGbjSWv5KHZj5JL3W0qJHQO82cHHd0uQ94HIHGHjSJUNypABNfz4PvJ/RN2WBvluga83trbmP0wcgTV0lb4CDQ2CkQNnrHu8Otff275lmfz9K53KXKRUFoAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+cIBAgGLBIWx9EAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAKk0lEQVR42pVbSXLEOAwjVH7CnOb/7wzmYC0ASTmZpFLd7XgRN5AE1fgX/zACAUQEEAAi5vuI920EgvMDz8Eg+L5GnFfwfMb7t46979/ruK5HBNfvPH+/n7/rnPe5fF+A94lzLfs9w4/t1chxOfTsewGBgb3wdSeuqxABIDAX916H/TzOMxk4DwIDOMcAbiXs6xFpgTzKh6wV3Sv2c86iVGCIwEkR8+PzWhznYVC7w6z+WhzykPR+P/e18FJQTC/YC1rCrWshq8IRhNMzf6I5z35QFbSv6c4/t3liujynNc59EO3PVMK23BJyesHrQbCQWN5zPmPfp104VLkIWwroljcFMCmSyRNYPWDFO8XuWxgRMhBJqOn4Fw0fzIALhiy0xrGHz1ICQpQ338MUEckjkZShwOWh8BBykx0H3ICo7o8Y26IegxAVsLra9DAFMfUgU0ZefAk5OQ/Rh4Ndlzwh4cHQRYagriE+9OFYqCn/E8vP/8GE1/ul680DktaW5ddnHNdhPlcyl6Sp83klBOAc51KAPfs8iFjpyNbkgAS4oKEWR+8NhuboASojff4nPEMVMEFWgjionD/ciik+k6WzIrYigYoTWaEQoEQCJ32oKWbhERpL5/8lJTErAeqmKQTiCIRdwEg6gi/OcSOnI/eKolwgrSELj3pPUypK+uOtUGBzfnLHwcbSkYARSfgDYlVQSgioi1Lcjl1Rk3EmKu6w5sykINyrJuYytvGAMMs7WDEEyVG1T1GYlsIW46heamjZFjdI18C9LTqc6JTQ48kIJPdCBIdaaaL0mH/LEoLqy7pcqUddXeJZn0OixwuN9RbkRAmOpk010p3nx0dF16wInCZpuzy9OTKEn8LOYokpfnlxX4obW/gUbxDwKzXYVIKkOVvo6sjkmqGFDpGamdUlhtbn3IujSMesfqYcHuHpq8R/17fAPKxaUFA7W5pxKeUjYQA8VTJ1UqY0NqiMKN7ABIos6fhVAnMh04QqP+KZWQnTI9hmg/x+NkO7WJRSldZQ5EKC+1xGVRxvYTcbKFqzsxTUl7ZUayGXyEsJDHBJrjhB64xdO+fGAoLcSO/WYlthMdUPIddlBVnYaYusAAa45fAFZIhuhW03ls+Hu6ZggN+OAmAFP4p3YVvxtMIpflGLGWYCJbk3Swj8kusT8DFjitx0PXtICySU1DmWe3RKBgglSswDknIEXGub7Lk94wXiEr/RpEA2iDrBmHyfwxUF8yHDr2GJXaKmqVMY1WWyVIThghqBgrjxLrwVN7wUPvw4D9H3Aox4Nuhp8UI66CSuroIrS8XWAWMGJOX8OMPoDT22HX5VxlwTeQAxzue9fl7A4s0CmQdCwQsDv7bxQov8QA9QsHBUwiKuots7LTr4Pz0kvT5UyqkF3szSdD09XQmp+IqmJVcqjRtbIMzixf5sMoQ8mAaxDbuUbPoYDU5MRhffVdTdoxocgCVS5Rq32xcGv3F6of0Pe5uoslv19+ENj84AgNwEdQQmWrapxH3hCvUYLQR66+fCRUOhsSiZ6lwtjphccjo2pwecRoy1x8ff0u9iiMm+AvVZjQDdBSDvKU8GMNaEeFpFG/c8GDIV+xShW+5eMwArnydKWJOgK/DiuLF6gp3LL/xHbZhaN+/o8Vd4nXk8oZMbFbbr1hJRQ1y49+V6KT2yKY/NOC0GwIOIHWHKZvCHFvWtPyBjvAIzs9FCbKSgma8s5GlWksyLkISPm/D4Rlzizh5pi0x49zpfYdwAVgjoPRrXV5bHioNULF3nc15Qcdfo3GFw/8EtNsLmeGUOwNxKXrPBOw8G+4nOR4h99mNoCE+hxWn9571MDTaFTs3mdQmcRC79fizd3SREoG6vjrpTH/1zSwPx0kH3cNh+6hiVjlew4UTPBDEjb1/BreFomrfJ8LOf3TUVYpnZRb2O/K7v8RUCem3OBBRBmcpR5uJkHsMkRFaBYV6QPUCtzWa+wDS+vpgaNnmbr6y4xi4ElsVHyz9m70E3yqpbXGQ0hjVylgygwiMpRYRFUQzbQrmvr1C7INQhqaF7oObRvQRIJHe0FIzdeT5dOxc65ubN6LmAGn2PUePltPK28ZrP+v5UgyhUGN3lS4e2J0OS78eqLyiN37Rc6+Y0b/Fi9HsacKu0PwXuLE7ZzWIZRL0ETfGxd4i4bQDl+D62rwTPBorE1i6QgvAL2izviDKVxTfLw9oZtgQoL+V0qRHe1wFphLCqQvBsT5CYR1EEc4W+PQgfdD+ahFbCg+30dMFbdWc2abSzeiIsRkz3RkbqSBul0k4aCB98ikS2k3FQ+kCytX1fMrBpKxuCgxcS07e4tbs0hg2DTZg85q9bEZAsjqYdWF7UzHRsu1Ff5aOZuTXbX7Ki0KTJknEmK5yFDnV9cA2EDRzRjPS/6AIk6+eQAS8cFNnSXn+lqnbzk3friLs/xzqLFUoPHSvj1drt9CNoGLhDXHhbQkuOtJTZcXyM6xwu+l5BUzrYTUVliwxKQSMABX8dx4mS5ZmAjbINyMivo67cgdOPOxTwj3VBhUzfLlu7s7ErNGi1ljahSb/gwtOusXyPNP+9NJs5xu0ejMIJ/pYmcVMJ+owyUCyuAOhFzjo+irN5Sez0ok8AjpXrcOwOuPympJmt/suwVEFQewAPh5TSlCHC2TWDHRa5L2Ctn6bwkHa667/Q5m7+DwzIGQA+6leIgxU5LAyXll1mIRwLY/9Wb1AOyPhUZuvX8rnd1UH23t32IrhwAokU3a4LGZChm6bIHHGyq5xKIE+exYXFammyVPzYXmbO5zH+QG9lDxl/wAyss3idy0LjeFmc6jG0uYI2TWBTFE3B3MoUZ2P6bkOqlpoZUrNbo+8LJAyWsYd3urSYR+oDQJ4BCvN0vskAyFUgmoWzMj6ZpSYbcoSVKf4tRd48ADLUyJYxVLZUyGaKX4+p92gaPYDd1NDMu/66Wr/ZiRV/4BGUJaJQYmeyk5ocpI5wnUd3yQKcuhfFSAue5uiK7jg8PnHbavaGUjce7wonoiVYh8X93lN/hPe8TPMAi08K4pOlC7wyx90ppHOQ+s8SDqLMdjYvZKlS5vPzMNYUbqERaUKEqN/S4Gpy2Ix7KMJM3MjC8ZYCvghS+bpeYX1T3cDMGoewwgKCdqMtjHvAB7vQD70Ki+aWtFDIFudtTedvd5e6k5ONR7RzOM4dIkZane8KbsX8yLiMXf/NaLeGWGpbkYU9Eitcvu3tCePuaz+AZijT1Qt1RmBplhGPf5XMWV5KevQHuwC8KYTO3FaOLjO3jcC2Tzc31ihNlgvNHhglNB4jKnEWY3T12ZsyCU8eh9hlAVNXNhU472WDUM678BeBKZMdoBIkxYs6hbOZGIWUwgyb/KxvfAbXNzcPYNC0H42rL6HTVidBY5YxVgoHiWuSzYDjUhbblrlc//9MpXcKCAZ/IjDeByIrgfXrsbxWVyw7OMicny9Wt9hcwuODLxcjWdixegE7Ln0q4FVcowQd+6+9t+gZG/v2x/Ik3blNln68NEt56CxZNJrZQ5kIBeIVIg1EdQTX8KvPuTfP9RH2hU2mMpK2XX12iYwkOD0M7Wu72P/n2is0rU7j81OINLNl7j0/Px5CWvYirvsf/gOohOFaP4HwfAAAAABJRU5ErkJggg==");
  --panel-bg: #233440;
  --panel-bg-transparent: rgba(35, 52, 64, 0);
  --panel-bg-semi-transparent: rgba(35, 52, 64, 0.95);
  --input-bg: #314759;
  --control-color: white;
  --secondary-bg: #10161a;
  --bw-bg: black;
  --bar-bg: rgba(47, 65, 77, 0.7333333333);
  --bar-hover-over: #fff2;
  --bar-active-over: #fff1;
  --bar-active-hover-over: #fff3;
  --panel-active-element: rgba(47, 65, 77, 0.7333333333);
  --hover-transparent: rgba(47, 65, 77, 0.7333333333);
  --panel-very-active-element: rgba(255, 255, 255, 0.2);
  --wb-bg: #000;
  --light-bg: #333;
  --light-bg-2: #666;
  --text-color: #ccc;
  --text-color-2: #aaa;
  --text-color-3: #aaa;
  --text-color-hl: #ddd;
  --text-color-white: var(--text-color);
  --text-color-disabled: #777;
  --border-color: #777;
  --shadow-color: #000;
  --highlight-color: #fff1;
}

a {
  color: var(--control-color);
}

.content {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content .right {
  margin-left: auto;
}

.huePicker {
  position: relative;
  height: 100px;
}
.huePicker .saturation {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .hue {
  display: inline-block;
  position: relative;
  height: 100%;
}
.huePicker .alpha {
  display: inline-block;
  position: relative;
  margin-left: 4.762%;
  width: 4.762%;
  height: 100%;
}
.huePicker .alpha .barPointer {
  transform: translate(-3px, -1px);
}
.huePicker .barPointer {
  background-color: white;
  width: 20px;
  height: 2px;
  transform: translateY(-1px);
}

.button1 {
  border-radius: 5px;
  border: var(--border-color);
  color: var(--text-color);
  border: 1px solid var(--panel-very-active-element);
  font-size: inherit;
  height: 32px;
  padding: 0 10px;
  text-decoration: none;
  text-shadow: none;
  user-select: none;
  outline: none;
}
.button1 svg {
  width: 1em;
  height: 1em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: baseline;
}
.button1 span {
  vertical-align: baseline;
}

.button1:enabled {
  cursor: pointer;
}

.button1:enabled:hover, a.button1:hover {
  background-color: var(--hover-transparent);
}

.button1.red {
  color: #700;
}

.dark .button1.red {
  color: #f77;
}

.button1:disabled {
  opacity: 0.5;
}

.button1:disabled:hover {
  opacity: 0.5;
}

.negative {
  background-color: rgba(255, 0, 0, 0.0666666667);
}

.warn {
  background-color: rgba(255, 255, 0, 0.0666666667);
}

.positive {
  background-color: rgba(0, 255, 0, 0.0666666667);
}

.mgLeftAuto {
  margin-left: auto;
}

.button2 {
  padding: 0.5em 0.2em;
}
.button2 svg {
  margin-right: 0.2em;
  width: 1.5em;
  height: 1.5em;
  display: inline;
  position: relative;
  top: 0.15em;
  vertical-align: bottom;
}

.button2:enabled:hover {
  background-color: var(--panel-active-element);
}

.button2:disabled {
  color: var(--text-color-disabled);
  cursor: default;
}

.buttonN, .buttonU {
  font-size: inherit;
  color: var(--text-color);
}

.buttonN:enabled:hover, .buttonU:enabled:hover {
  font-size: inherit;
  color: var(--text-color-hl);
  transform: scale(1.025);
}

.buttonN:disabled, .buttonU:disabled {
  color: var(--text-color-disabled);
}

.button1:enabled:active, .button2:enabled:active, .buttonN:enabled:active, .buttonU:enabled:active {
  position: relative;
  top: 1px;
}

.buttonU {
  text-decoration: underline;
}

input[type=text], textarea {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline-color: var(--border-color);
  border-width: 1px;
}

.clickFeedback:enabled:active {
  transform: translateY(1px);
}

.clickable {
  cursor: pointer;
  text-decoration: underline;
}

.transparentBg {
  background: white;
  position: relative;
}
.transparentBg:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TS0UqHeygopChOlkQFXHUKhShQqgVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfEzc1J0UVKvK8ptIjxwuN9nHfP4b37AKFeZprVNQ5oum2mEnExk10Vg68IYBhh+DAgM8uYk6QkPOvrnvqo7mI8y7vvz+pVcxYDfCLxLDNMm3iDeHrTNjjvE0dYUVaJz4nHTLog8SPXFZffOBeaLPDMiJlOzRNHiMVCBysdzIqmRjxFHFU1nfKFjMsq5y3OWrnKWvfkLwzl9JVlrtMaQgKLWIIEEQqqKKEMGzHadVIspOg87uEfbPolcinkKoGRYwEVaJCbfvA/+D1bKz854SaF4kDgxXE+RoDgLtCoOc73seM0TgD/M3Clt/2VOjDzSXqtrUWPgPA2cHHd1pQ94HIH6H8yZFNuSn5aQj4PvJ/RN2WBvlugZ82dW+scpw9AmmaVvAEODoHRAmWve7y7u3Nu//a05vcDKFlyiYWEgXUAAAAGYktHRAD/AP8A/6C9p5MAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQflBR0SEiZVlaKTAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAACVJREFUOMtjZGBgEGHAD97gk2RioBCMGjAYDGAkQo3IaCAOewMAV5QBM8kuECUAAAAASUVORK5CYII=") left center;
}

.badge {
  background: var(--panel-bg);
  color: var(--text-color);
  font-size: 9px;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 1px 3px;
  outline: none;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 3px;
  z-index: 999;
  min-width: 6px;
}
.badge svg {
  width: unset !important;
  vertical-align: text-bottom;
}

.toolbarButton {
  color: var(--text-color-white);
  background: transparent;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  user-select: none;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.toolbarButton svg, .toolbarButton img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.toolbarButton:disabled {
  color: rgba(255, 255, 255, 0.2);
  cursor: default;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: bottom;
}

.flipHorizontal {
  transform: scaleX(-1);
}

.flipVertical {
  transform: scaleY(-1);
}

.theaterMode-true .react-root {
  --top-height: 40px;
  --left-width: 0;
}
.theaterMode-true .content {
  display: flex;
}
.theaterMode-true .content .scratchpadApp {
  flex: 1;
}

@media only screen and (max-width: 899.999px) {
  .react-root {
    --top-height: 40px;
    --left-width: 0;
  }
  .content {
    display: flex;
  }
  .content .scratchpadApp {
    flex: 1;
  }
}
@media only screen and (max-width: 400px) {
  .react-root {
    --bars-margin: 0px;
  }
}
.disconnected.react-root {
  background: #eee;
}

.dark.disconnected.react-root {
  background: #333;
}

.error-boundary {
  padding: 2rem;
  text-align: center;
  background: var(--main-bg);
  background-size: cover;
  color: #333;
  height: 100vh;
}
.error-boundary h1 {
  color: #d32f2f;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.error-boundary p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: var(--text-color);
}
.error-boundary button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  color: #fff;
  background-color: var(--bar-bg);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}
.error-boundary button:hover:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bar-hover-over);
}

.line-header {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
  gap: 10px;
}

.line-header::before,
.line-header::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--border-color);
  transform: translateY(0.1em);
}

.line-header span {
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.text-1 {
  color: var(--text-color);
}

.text-2 {
  color: var(--text-color-2);
}

.canvasBg {
  background-color: white;
  transition: background-color 1s;
}

.blackout-true.darkRoom-false .canvasBg {
  background-color: #666666;
}

.withCanvasScreen {
  position: relative;
}
.withCanvasScreen:after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: "";
  pointer-events: none;
  background-color: transparent;
  opacity: 1;
  transition: background 1s, opacity 1s;
}

.blackout-true.darkRoom-false .withCanvasScreen:after {
  background-color: black;
  opacity: 0.6;
}

.rel {
  position: relative;
}

.abs-zero {
  position: absolute;
  left: 0;
  top: 0;
}

.sm {
  font-size: 0.8em;
}