/* Source for style.css. Compile with npm run build:css. */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400");
canvas {
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  font-size: 18px;
  color: rgba(0,0,0,0.6);
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.button em {
  font-size: 9px;
  color: rgba(0,0,0,0.4);
  font-family: 'Open Sans', sans-serif;
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 2px;
}
h2 {
  font-size: 40.5px;
  font-style: italic;
  font-weight: 600;
  color: #fff;
  margin: 12px 0 3px;
  clear: both;
}
h3 {
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: #fff;
  margin: 12px 0 3px;
  clear: both;
}
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
a.textbutton,
.textbutton {
  font-size: 18px;
  color: rgba(0,0,0,0.6);
  line-height: 1.5;
  color: rgba(0,0,0,0.6);
  display: inline-block;
  text-decoration: none;
  height: 32px;
  min-width: 100px;
  margin: 15px 0;
  padding: 2px 0;
  padding-left: 32px;
  padding-right: 32px;
  float: left;
  font-style: normal;
  background-color: rgba(255,255,255,0.3);
}
a.textbutton:hover,
.textbutton:hover {
  background-color: rgba(255,255,255,0.5) !important;
  color: rgba(0,0,0,0.6);
}
.floatright {
  float: right;
  clear: right;
}
.loading {
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 36px;
}
.tilingwindow .selected,
.tilingwindow .active {
  background: #fff;
  color: #777;
}
.textbutton,
.button {
  cursor: pointer;
}
.button:not(.selected):hover {
  color: #ff0;
}
.clearfix,
.settingsgroup:after,
.tabs:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
.previouscolor,
.currentcolor {
  display: inline-block;
  height: 36px;
  width: 50%;
}
a.button,
span.button {
  background: rgba(255,255,255,0.3);
  color: rgba(0,0,0,0.6);
}
a.button:not(.selected):hover,
span.button:not(.selected):hover,
.tabs>*:not(.selected):hover {
  background-color: rgba(255,255,255,0.5);
  color: rgba(0,0,0,0.6);
}
.colorwindow label {
  position: relative;
  font-size: 16px;
}
.colorwindow .settingslabel {
  font-size: 16px;
  color: #fff;
}
.colorwindow label input {
  position: absolute;
  top: 1px;
  left: -24px;
  height: 16px;
  width: 16px;
}
.settingssubgroup {
  margin-left: 24px;
  margin-bottom: 12px;
}
.colorwindow .settingssubgroup>label.row {
  position: relative;
  display: inline-block;
  top: -20px;
}
.colorwindow .settingssubgroup>label>input[type="number"] {
  display: block;
  position: relative;
  left: 0;
  width: 60px;
  height: 28px;
}
.button.style {
  background: none;
  color: #fff;
  display: block;
  margin: 6px 0 4px;
}
.hex {
  font-size: 18px;
  line-height: 1.5;
  font-family: Courier, Monaco, monospace;
  float: right;
  vertical-align: top;
  font-size: 16px;
  color: #fff;
}
.colors {
  display: block;
  font-size: 0;
  line-height: 0;
}
.colors.mt {
  margin-top: 6px;
}
h3,
label {
  clear: both;
}
.colors span {
  display: inline-block;
  vertical-align: top;
  height: 14px;
  width: 14px;
  overflow: hidden;
}
.colors *,
.previouscolor {
  cursor: pointer;
}
strong+br+.style.button {
  margin-top: 0;
}
.tilingwindow .button {
  font-size: 12px;
  padding: 0;
  display: inline-block;
  position: relative;
  vertical-align: top;
  float: left;
  margin-right: 1px;
  overflow: hidden;
  height: 32px;
  width: 32px;
  background-color: rgba(255,255,255,0.3);
  margin-bottom: 1px;
}
.tilingicon:before,
.styleicon:before,
.svgicon:before,
.fileicon:before {
  display: inline-block;
  position: relative;
  content: ' ';
  width: 32px;
  height: 32px;
  top: 8px;
  left: -8px;
  background-color: #f00;
}
.fileicon:before {
  background: url("9d3af1a58615cf687619a0e1-folder.svg") center center no-repeat;
  background-size: 100% 100%;
}
.svgicon:before {
  background: url("cf7fee4a74dd4664adcd7e1c-file_svg.svg") center center no-repeat;
  background-size: 100% 100%;
}
.tilingicon:before {
  background: url("117676c82d1d7e8e2bfbeb23-tiling.svg") center center no-repeat;
  background-size: 100% 100%;
}
.styleicon:before {
  background: url("e5da6285de3376e9b543c42f-style.svg") center center no-repeat;
  background-size: 100% 100%;
}
.tilingwindow .button.shape1,
.tilingwindow .button.shape2,
.tilingwindow .button.shape3,
.tilingwindow .button.shape4,
.tilingwindow .button.shape5,
.tilingwindow .button.shape6,
.tilingwindow .button.shape7 {
  width: var(--tile-swatch-size);
  height: var(--tile-swatch-size);
}
.tilingwindow .button img,
.tilingwindow .button svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tilingwindow .button.zoomout {
  clear: left;
}
.button.rotateleft {
  background: url("c010fa6046818db094fdfb19-arrow_left_border.svg") center 7px no-repeat;
  background-size: 80% 80%;
  background-color: rgba(255,255,255,0.3);
}
.button.rotateright {
  background: url("09c7c86501db43c542ca2373-arrow_right_border.svg") center 7px no-repeat;
  background-size: 80% 80%;
  background-color: rgba(255,255,255,0.3);
}
.button.erase {
  background: url("3cb75662622aaf2c96af92ff-eraser.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.hand {
  background: url("b0a8a1843126953d4fff601c-hand.svg") center center no-repeat;
  background-size: 80% 80%;
  background-color: rgba(255,255,255,0.3);
}
.button.files {
  background: url("9d3af1a58615cf687619a0e1-folder.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.zoomin {
  background: url("e567b775c93c6c54cb6f5fa1-glass_in.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.zoomout {
  background: url("c52c9c1535f8fff6e62c896c-glass_out.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.showsvg {
  background: url("cf7fee4a74dd4664adcd7e1c-file_svg.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.toggleinfo {
  background: url("73878b24e714267c0e49ed7e-info.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.clearcanvas {
  background: url("4f4baa452caddd0ac9ed2972-trash.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.window.files .item .delete {
  background: url("50b967592351b91487b19677-trash_small.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.button.save:before {
  display: inline-block;
  content: " ";
  height: 30px;
  width: 30x;
  background: url("d00b5abc482e3521db0771d6-disk.svg") center center no-repeat;
  background-size: 80% 80%;
}
.cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  z-index: 1000;
  display: none;
}
.cursor.eraseicon {
  background: url("3cb75662622aaf2c96af92ff-eraser.svg") center center no-repeat;
  background-size: 60% 60%;
  cursor: none;
  pointer-events: none;
}
.cursor.handicon {
  background: url("b0a8a1843126953d4fff601c-hand.svg") center center no-repeat;
  background: #f00;
  background-size: 60% 60%;
  cursor: none;
  pointer-events: none;
}
.svg .img svg {
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.window.files .item {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 4px;
  cursor: pointer;
}
.window.files .item img {
  width: 100%;
  height: 100%;
}
.window.files .item .delete {
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-color: #aaa;
  display: none;
}
.window.files .item .delete:hover {
  background-color: #ccc;
}
.window.files .item:hover .delete {
  display: block;
}
.mode {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  background: rgba(180,180,180,0.85);
  z-index: 2000;
  padding: 0 0 0 2px;
}
.mode .button {
  float: left;
  width: 32px;
  height: 32px;
  margin-right: 1px;
  margin-bottom: 1px;
}
.svg a.textbutton {
  text-align: left;
  text-decoration: none;
}
.mode .button.tilingmode {
  background: url("117676c82d1d7e8e2bfbeb23-tiling.svg") 0 0 no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.mode .button.files {
  background: url("9d3af1a58615cf687619a0e1-folder.svg") 0 0 no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
  padding: 0;
}
.mode .button.showsvg {
  background: url("cf7fee4a74dd4664adcd7e1c-file_svg.svg") 0 0 no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
}
.svg .textbutton.download {
  background: url("8411413cf48e19bccd113414-file_download.svg") 0 0 no-repeat;
  background-size: 32px 32px;
  background-color: rgba(255,255,255,0.3);
}
.mode .button.toggleinfo {
  background: url("73878b24e714267c0e49ed7e-info.svg") 0 0 no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
  padding: 0;
}
.tabs .usertab {
  background: url("fc51ae04f7297b99e0168de9-file.svg") 0 0 no-repeat;
  background-size: 32px 32px;
  background-color: rgba(255,255,255,0.3);
}
.textbutton.save,
.textbutton.savepreset {
  background: url("d00b5abc482e3521db0771d6-disk.svg") 0 0 no-repeat;
  background-size: 32px 32px;
  background-color: rgba(255,255,255,0.3);
}
.mode .button.active,
.mode .button.selected {
  background-color: transparent;
}
.tabs {
  display: block;
  margin-left: 8px;
}
.tabs>* {
  display: inline-block;
  float: left;
  padding: 2px 32px 0;
  margin-right: 2px;
  background-color: rgba(255,255,255,0.3);
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  height: 32px;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.tabs>*.selected {
  background-color: transparent;
  border: 2px solid rgba(255,255,255,0.3);
  border-bottom: none;
  color: #fff;
}
.presets {
  margin: 16px -32px;
}
.presets>.preset {
  background-color: rgba(255,255,255,0.3);
  cursor: pointer;
  margin: 2px 0;
  padding: 0 28px 0 12px;
  color: rgba(0,0,0,0.6);
  display: block;
  position: relative;
  clear: both;
  height: 28px;
}
.preset[key='Custom'] {
  margin-top: 24px;
}
.presets>.preset:hover {
  background-color: rgba(255,255,255,0.5);
}
.presets .preset.selected {
  background: rgba(255,255,255,0.5);
}
.presets .preset .name {
  overflow: hidden;
  height: 28px;
}
.presets .preset .preview {
  display: inline-block;
  float: right;
}
.presets .preset .preview .colorpreview {
  display: inline-block;
  width: 6px;
  height: 24px;
  margin-top: 2px;
}
.presets .preset .delete {
  background: url("50b967592351b91487b19677-trash_small.svg") center center no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255,255,255,0.3);
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-color: #aaa;
  display: none;
}
.presets .preset .delete:hover {
  background-color: #fff;
}
.presets .preset:hover .delete {
  display: block;
}
.centerimage {
  display: block;
  margin: 0 auto;
}
.preset[data-key="Custom"] {
  margin-top: 24px;
}
a.textbutton,
.textbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
}
.textbutton:is(.save,
.savepreset,
.new-file,
.import-backup,
.export-backup,
.export-svg,
.download) {
  padding-left: 32px;
}
html,
body {
  overflow: hidden;
  overscroll-behavior: none;
}
#app > canvas {
  position: fixed;
  inset: 0;
  display: block;
}
a:not(.textbutton) {
  color: #ff0;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
a:not(.textbutton):hover {
  color: #fff;
}
/* WINDOWS */
.window {
  --window-gutter: 2px;
  --window-background: rgba(180,180,180,0.85);
  --panel-left: 35px;
  --panel-max-height: max(0px, calc(100dvh / var(--editor-ui-scale, 1) - var(--tile-swatch-size) - 38px));
  position: fixed;
  z-index: var(--window-layer, 1);
  inset: auto;
  width: var(--window-width, max-content);
  max-width: 100%;
  margin: 0;
  cursor: default;
}
.window-dock {
  left: var(--panel-left);
  bottom: 0;
  max-width: calc(100% - var(--panel-left));
  max-height: var(--panel-max-height);
}
.window-dock > .window-scroll {
  max-height: max(0px, calc(var(--panel-max-height) - 2 * var(--window-gutter)));
}
.window-top {
  top: 0;
  left: 0;
}
.window-stack {
  flex-direction: column;
  pointer-events: none;
}
:where(.window-surface) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 100%;
  padding: var(--window-gutter);
  background: var(--window-background);
  pointer-events: auto;
}
.window-fit {
  width: fit-content;
}
.window-fixed-row {
  flex: none;
}
.window-join-next {
  padding-bottom: 0;
}
.window-join-previous {
  padding-top: 0;
}
/* The scrollport ends at the inner edge of the stationary window gutter. */
.window-scroll {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.window-scroll::-webkit-scrollbar {
  display: none;
}
.window-scroll-x {
  overflow-y: hidden;
}
.window-scroll-content {
  min-width: var(--window-content-width, max-content);
}
.window-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.window-dialog {
  padding: var(--dialog-padding, 20px 50px);
  border: 0;
  color: inherit;
  background: var(--window-background);
}
.window-dialog[open] {
  display: block;
}
.window-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.window-close:hover {
  opacity: 0.6;
}
.window-close img {
  display: block;
  width: 24px;
  height: 24px;
}
.mode,
.window {
  --toolbar-button-gap: calc(1px / var(--editor-ui-scale, 1));
}
@media (min-width: 640px) {
  .mode,
  .window:not(.notice-dialog) {
    --editor-ui-scale: 1.25;
    zoom: var(--editor-ui-scale);
  }
}
/* Window-specific dimensions and placement. */
.window:is(.colorwindow,
.files) {
  --library-swatch-size: clamp(1px, calc((var(--panel-max-height) - 25px) / 2), calc(4 * 32px + 3 * var(--toolbar-button-gap)));
}
.custom-window {
  --window-width: var(--custom-panel-width);
  --window-content-width: calc(var(--custom-panel-width) - 2 * var(--window-gutter));
}
.window.files,
.colorwindow:not(.custom-window) {
  --window-width: calc(100% - var(--panel-left));
}
.window.files {
  --library-swatch-size: clamp(1px, calc((var(--panel-max-height) - 32px - 3 * var(--window-gutter) - 1px) / 2), calc(4 * 32px + 3 * var(--toolbar-button-gap)));
}
.tilingwindow {
  --window-layer: 1100;
  --window-width: calc(8 * var(--tile-swatch-size) + 11px);
}
.info {
  --window-width: 760px;
  --window-background: rgba(240,240,236,0.97);
  --window-layer: 1300;
  max-width: calc(100% - 24px);
  max-height: calc(100dvh / var(--editor-ui-scale, 1) - 24px);
  color: #222;
}
.colorpicker {
  --swatch-size: 15px;
  --picker-width: calc(12 * var(--swatch-size) + 2 * var(--picker-padding));
  --picker-strip-height: 18px;
  --window-width: var(--picker-width);
  --window-layer: 1200;
  left: clamp(0px, calc(var(--panel-left) + var(--custom-panel-width)), calc(100% - var(--picker-width)));
  max-width: 100%;
}
.svg {
  --window-width: fit-content;
  --window-gutter: 8px;
  max-width: min(480px, calc(100% - var(--panel-left)));
  text-align: center;
}
.clearconfirm {
  --window-layer: 3000;
  --window-width: min(360px, 100%);
}
.notice-dialog {
  --window-layer: 3000;
  --window-width: fit-content;
  --window-background: #f4f4f4;
  --dialog-padding: 18px 24px;
  max-width: min(420px, calc(100% - 32px));
  border-radius: 9999px;
  color: #333;
  font-size: 16px;
  text-align: center;
  pointer-events: none;
  overflow-wrap: anywhere;
}
/* Square WebGL palette samples, using the drawing renderer. */
.presets {
  display: grid;
  grid-template-rows: var(--library-swatch-size);
  grid-auto-columns: var(--library-swatch-size);
  grid-auto-flow: column;
  gap: 1px;
  width: max-content;
  margin: 0;
}
.presets>.preset {
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}
.presets>.preset:hover,
.presets>.preset.selected {
  background: transparent;
}
.presets>.preset.selected {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.presets > .preset[draggable="true"] {
  cursor: grab;
}
.presets > .preset.is-dragging {
  opacity: 0.45;
}
.presets > .preset.preset-drop::after {
  position: absolute;
  inset: 0;
  border: 1px solid #fff;
  pointer-events: none;
  content: "";
}
.presets>.preset[data-key="Custom"] {
  margin-top: 0;
}
.tilingwindow .tile-preview {
  display: block;
  pointer-events: none;
}
.preset-preview {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0;
}
.preset-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.presets .preset .delete {
  top: 6px;
  right: 6px;
  border-radius: 3px;
}
:root {
  --tile-swatch-size: 65px;
  --picker-padding: 6px;
  --custom-panel-width: calc(9 * var(--tile-swatch-size) + 12px);
}
.mode :is(.presetsmode,
.custommode) {
  border: 0;
  padding: 0;
  background-color: rgba(255,255,255,0.3);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.mode :is(.presetsmode,
.custommode):not(.selected):hover {
  background-color: rgba(255,255,255,0.5);
}
.mode .presetsmode {
  background-image: url("e5da6285de3376e9b543c42f-style.svg");
}
.mode .custommode {
  background-image: url("8e1a19b53868379d79f089f1-paintbrush.svg");
}
.texture-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.colorwindow .swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  clear: both;
}
.colorwindow .swatch-row > .color {
  flex: none;
}
.colorwindow .style-option-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1px;
}
.colorwindow .style-option {
  flex: none;
  max-width: 100%;
}
.colorwindow .settingsgroup .button.style {
  margin: 0;
}
.colorwindow .detailedtabframe,
.colorwindow .detailedtabframe .button.style,
.colorwindow .detailedtabframe .textbutton,
.colorwindow label.button.style:hover {
  color: #000;
}
.colorwindow .style-option-label {
  display: block;
  color: #000;
  font-size: 7pt;
  font-style: normal;
}
.colorwindow :is(.style-option > label,
label.innerpolys) {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.colorwindow :is(.style-option > label,
label.innerpolys) > input {
  position: static;
  margin: 0;
}
.colorwindow .button.color {
  float: left;
  display: inline-block;
  width: var(--tile-swatch-size);
  height: var(--tile-swatch-size);
  margin: 0;
  background: rgba(255,255,255,0.3);
}
.colorwindow .button.color .preview {
  width: 100%;
  height: 100%;
}
.colorwindow .button.shape-color {
  padding: 0;
  border: 0;
  overflow: hidden;
}
.colorwindow .shape-color svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--style-preview-rotation));
  pointer-events: none;
}
.colorwindow .button.color.selected,
.window.tilingwindow .button:is(.selected,
.active,
:active) {
  background-color: #fff;
}
.colorwindow .button.color.selected > :is(svg,
.preview),
.tilingwindow .button:is(.selected,
.active,
:active) > .tile-preview {
  filter: url("#white-preview-shadow");
}
.colorwindow .button.color.selected:has(> .preview) {
  padding: 2px;
}
.colorwindow .style-option:has(> label > input:is(:not(:checked),
:disabled)) .button.color,
.colorwindow .settingsgroup:has(> label.innerpolys > input:not(:checked)) .button.color {
  background-color: transparent;
}
.colorwindow .detailedtabframe :is(h3,
label) {
  font-size: 7pt;
}
.colorwindow :is(.line-width-control,
.shadow-options) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: var(--tile-swatch-size);
  height: var(--tile-swatch-size);
}
.colorwindow .line-width-control {
  flex: none;
  align-self: flex-end;
}
.colorwindow .number-stepper {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: #000;
  font-size: 7pt;
  line-height: 10px;
}
.colorwindow .number-stepper > span {
  text-align: left;
}
.colorwindow .number-stepper-controls {
  --number-input-height: calc((var(--tile-swatch-size) - 1px) / 2 - 11px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 1px;
}
.colorwindow .number-stepper-controls :is(input,
button) {
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,0.42);
  color: #000;
  font: inherit;
}
.colorwindow .number-stepper-buttons {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  height: var(--number-input-height);
}
.colorwindow .number-stepper-buttons > button {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  min-height: 0;
  width: 100%;
  padding: 0;
  font-size: 10px;
  line-height: 9px;
  cursor: pointer;
}
.colorwindow .detailedtabframe input[type="number"] {
  appearance: textfield;
  position: static;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: var(--number-input-height);
  padding: 0 4px 0 1px;
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.colorwindow .detailedtabframe input[type="number"]::-webkit-inner-spin-button,
.colorwindow .detailedtabframe input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.colorwindow .detailedtabframe input[type="number"]::placeholder {
  color: #000;
  opacity: 1;
}
.colorwindow .number-stepper-controls input:hover {
  background: rgba(255,255,255,0.8);
}
.colorwindow .number-stepper-controls input:is(:active,
:focus),
.colorwindow .number-stepper-buttons button:is(:active,
:focus-visible) {
  background: #fff;
  outline: none;
}
.colorwindow .detailedtabframe input[type="checkbox"],
.colorwindow .detailedtabframe input[type="radio"] {
  top: 3px;
  left: -20px;
  width: 12px;
  height: 12px;
}
.colorwindow .detailedtabframe input[type="checkbox"] {
  appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-radius: 2px;
  background: transparent;
}
.colorwindow .detailedtabframe input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='black' fill-rule='evenodd' d='M0 0h10v10H0z M1 5l1.4-1.4L4 5.2l3.6-3.6L9 3 4 8z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.colorwindow .detailedtabframe input[type="checkbox"]:disabled {
  opacity: 0.5;
}
.colorwindow .shadow-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1px;
}
.preset-save {
  display: flex;
  width: fit-content;
  max-width: 100%;
}
.preset-save .savepreset {
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.picker-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: calc(var(--picker-padding) - var(--window-gutter));
}
.colorpicker .colors span {
  width: var(--swatch-size);
  height: var(--swatch-size);
}
.picker-hex {
  width: calc(9ch + 4px);
  min-width: 0;
  max-width: 100%;
  height: 14px;
  padding: 0 2px;
  border: 0;
  outline: none;
  background: transparent;
  color: inherit;
  font: 11px monospace;
  text-align: right;
  user-select: text;
  cursor: text;
}
.picker-previews {
  display: flex;
}
.picker-previews > div {
  height: var(--picker-strip-height);
}
.picker-previews .currentcolor {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}
.color-wheel {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  outline: none;
  background: linear-gradient(rgb(0 0 0 / var(--wheel-darkness)), rgb(0 0 0 / var(--wheel-darkness))), radial-gradient(closest-side, white, transparent), conic-gradient(in srgb, red, yellow, lime, cyan, blue, magenta, red);
  cursor: crosshair;
  touch-action: none;
}
.color-wheel-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #333;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-picker-track {
  display: block;
  width: 100%;
  height: var(--picker-strip-height);
  outline: none;
  cursor: ew-resize;
  touch-action: none;
}
html:has(.colorpicker.is-picking),
html:has(.colorpicker.is-picking) * {
  cursor: none !important;
}
.file-actions {
  display: flex;
  width: max-content;
  gap: var(--toolbar-button-gap);
}
.file-actions .textbutton {
  width: 96px;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}
.file-actions :is(.new-file,
.import-backup,
.export-backup,
.export-svg) {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 32px 32px;
}
.file-actions .new-file {
  background-image: url("fc51ae04f7297b99e0168de9-file.svg");
}
.file-actions .import-backup {
  background-image: url("7984e1701aee4d9b01d9c58e-file_upload.svg");
}
.file-actions .export-backup {
  background-image: url("82bbab99bb27dde7f1162fb7-file_export.svg");
}
.file-actions .export-svg {
  background-image: url("ab5841b683de0c7ea2532794-file_export_svg.svg");
}
.file-scroll {
  max-height: calc(2 * var(--library-swatch-size) + 1px);
}
.file-grid {
  display: grid;
  grid-template-rows: repeat(var(--file-rows, 1), minmax(0, var(--library-swatch-size)));
  grid-auto-columns: var(--library-swatch-size);
  grid-auto-flow: column;
  gap: 1px;
  width: max-content;
  min-height: var(--library-swatch-size);
}
.window.files .item {
  width: auto;
  height: 100%;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}
.window.files .item img {
  display: block;
  object-fit: contain;
}
.info-content {
  padding: 24px;
  font-size: 13px;
  line-height: 1.5;
}
.info-header {
  padding-right: 24px;
  margin-bottom: 20px;
}
.info h2 {
  margin: 0 0 6px;
  color: inherit;
  font-size: 26px;
  line-height: 1.2;
}
.info h3 {
  margin: 0 0 12px;
  color: inherit;
  font-size: 17px;
  font-style: normal;
}
.info h4 {
  margin: 16px 0 4px;
  font-size: 13px;
}
.info p {
  margin: 0 0 10px;
}
.info-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.info-shortcuts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}
.info-shortcuts dt {
  font-weight: 600;
}
.info-shortcuts dd {
  margin: 0;
}
.info-about {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.15);
}
.info a:not(.textbutton) {
  display: inline;
  color: #155b69;
  text-decoration: underline;
}
.info a:not(.textbutton):hover {
  color: #000;
}
@media (max-width: 700px) {
  .info-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .info-content {
    padding: 20px;
  }
}
.info-content,
.info-content * {
  -webkit-user-select: text;
  user-select: text;
}
.tiling-row {
  display: flex;
  gap: var(--toolbar-button-gap);
  width: max-content;
}
.tilingwindow .tiling-row > .button {
  flex: none;
  float: none;
  margin: 0;
}
.mode {
  top: auto;
  bottom: 0;
  width: 35px;
  padding: 2px 1px 1px 2px;
}
.mode .button {
  position: relative;
  float: none;
  display: block;
  margin-bottom: var(--toolbar-button-gap);
}
.mode {
/* Keep the bottom toolbar below the tile palette on short windows. */
  max-height: calc(100dvh / var(--editor-ui-scale, 1) - var(--tile-swatch-size) - 38px);
  overflow-y: auto;
  scrollbar-width: none;
}
.svg .img svg {
  display: block;
  height: auto;
  max-height: min(360px, 45dvh);
}
.svg a.textbutton {
  position: static;
  float: none;
  width: auto;
  max-width: 100%;
  padding-top: 0;
  margin: 8px 0 0;
}
.tilingwindow .tile-button {
  width: var(--tile-swatch-size);
  height: var(--tile-swatch-size);
}
.tile-button:focus-visible {
  outline: 2px solid #555;
  outline-offset: -2px;
}
.pattern-dots {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}
.pattern-dots i {
  width: 2px;
  height: 2px;
  background: rgba(0,0,0,0.6);
}