#copy.svelte-1ha11jr {
  position: absolute;
  top: 12px;
  right: 12px;
  font-weight: 700;
  font-size: 15px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 8px 8px 12px;
  transition: width .5s ease;
  width: 40px
}

#copy.svelte-1ha11jr:after {
  content: "Copy";
  overflow: hidden;
  white-space: nowrap;
  text-indent: 6px
}

#copy.svelte-1ha11jr:hover {
  width: 90px
}

#copy.copied.svelte-1ha11jr {
  width: 110px
}

#copy.copied.svelte-1ha11jr:after {
  content: "Copied!"
}

#copy.svelte-1ha11jr svg:where(.svelte-1ha11jr) {
  fill: currentColor;
  width: 20px;
  flex-shrink: 0
}

#editor.svelte-x4zh2g {
  flex-grow: 1;
  position: relative;
  overflow: hidden
}

.cm-editor {
  color: var(--dark-gray);
  height: 100%
}

.cm-editor .cm-scroller {
  font: var(--mono-normal);
  font-size: 14px;
  line-height: 1.3em;
  padding: 12px 0
}

.cm-editor .cm-gutters {
  background: var(--main-bg);
  border-right: 14px solid var(--main-bg);
  color: var(--light6);
  padding-left: 12px
}

.cm-editor .cm-activeLineGutter {
  background: var(--main-bg);
  color: var(--light1)
}

.cm-editor .cm-gutters .cm-gutter {
  min-width: 32px
}

.cm-editor .cm-selectionBackground {
  background: #283655 !important
}

.cm-editor .cm-cursor {
  border-left: 2px solid #ffffec
}

.cm-editor .cm-lintRange-error {
  background: none;
  border-bottom: 2px solid var(--red)
}

details[open].svelte-ee92zc {
  padding-bottom: 20px
}

details.svelte-ee92zc:not([open]) summary:where(.svelte-ee92zc) {
  padding-bottom: 20px
}

summary.svelte-ee92zc {
  font: var(--sans-h2);
  margin: 0 -20px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  padding: 20px 20px 12px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 8px;
  align-items: center
}

summary.svelte-ee92zc::-webkit-details-marker {
  display: none
}

summary.svelte-ee92zc::marker {
  content: none
}

summary.svelte-ee92zc:after {
  content: "\25ba";
  font-size: 8px;
  color: rgba(255, 255, 255, .6)
}

details[open].svelte-ee92zc summary:where(.svelte-ee92zc):after {
  content: none
}

details[open].svelte-ee92zc summary:where(.svelte-ee92zc):hover:after {
  content: "\25bc"
}

input.svelte-1tu5lm6 {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
  border: 2px solid var(--light6);
  border-radius: 3px;
  width: 17px;
  height: 17px;
  position: relative
}

input.svelte-1tu5lm6:checked {
  border-color: var(--light-blue);
  background: var(--light-blue)
}

input.svelte-1tu5lm6:checked:before,
input.svelte-1tu5lm6:checked:after {
  content: "";
  position: absolute;
  background: var(--main-bg);
  width: 2px
}

input.svelte-1tu5lm6:checked:before {
  height: 11px;
  left: 7px;
  top: 1px;
  transform: rotate(45deg)
}

input.svelte-1tu5lm6:checked:after {
  height: 5px;
  left: 2px;
  top: 5px;
  transform: rotate(-45deg)
}

label.svelte-a2tm3u {
  padding: 8px 12px;
  margin: 12px 0;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer
}

label.svelte-a2tm3u:hover {
  background: var(--hover-bg);
  box-shadow: 0 0 0 1px var(--border-color)
}

label.svelte-a2tm3u:first-of-type {
  margin-top: 4px
}

label.svelte-a2tm3u:last-child {
  margin-bottom: 0
}

.suboptions.svelte-1gkj6ol {
  margin: 0 0 28px 45px
}

.suboptions.svelte-1gkj6ol:last-child {
  margin-bottom: 0
}

.suboptions.svelte-1gkj6ol textarea {
  resize: vertical;
  width: 100%;
  height: 100px
}

.suboptions.svelte-1gkj6ol input[type=number] {
  display: inline-block;
  width: 62px
}

textarea.omit.svelte-1t0249j {
  height: 50px
}

#cli.svelte-1xnx1c1 {
  display: block;
  padding: 8px;
  word-wrap: break-word
}

#cli.svelte-1xnx1c1 .opt-name:where(.svelte-1xnx1c1) {
  color: var(--green)
}

#cli.svelte-1xnx1c1 .opt-val:where(.svelte-1xnx1c1) {
  color: var(--orange)
}

input.svelte-qhlda7 {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
  border: 2px solid var(--light6);
  border-radius: 8.5px;
  width: 17px;
  height: 17px;
  position: relative;
  flex: 0 0 17px
}

input.svelte-qhlda7:checked {
  border-color: var(--light-blue);
  background: transparent
}

input.svelte-qhlda7:checked:after {
  content: "";
  position: absolute;
  background: var(--light-blue);
  width: 7px;
  height: 7px;
  left: 3px;
  top: 3px;
  border-radius: 10px
}

.container.svelte-176xcb {
  display: flex;
  gap: 20px;
  margin-left: 8px;
  align-items: center
}

svg.svelte-176xcb {
  flex: 0 0 24px
}

circle.svelte-176xcb,
line.svelte-176xcb {
  stroke: var(--red)
}

strong.svelte-1ti5wgo {
  font: var(--sans-h2)
}

.container.svelte-1ti5wgo {
  display: flex;
  gap: 20px;
  margin-left: 8px;
  align-items: center
}

.warning-list.svelte-1ti5wgo {
  padding-left: 18px
}

svg.svelte-1ti5wgo {
  flex: 0 0 24px
}

circle.svelte-1ti5wgo,
line.svelte-1ti5wgo {
  stroke: var(--green)
}

div.svelte-1pqmac {
  background: var(--dark2);
  border: 1px solid var(--border-color);
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 8px
}

#sidebar.svelte-kvjsp8 {
  flex: 0 0 400px;
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable
}

#sidebar.svelte-kvjsp8 form:where(.svelte-kvjsp8) {
  flex: 1 1 auto;
  padding: 20px;
  overflow: auto
}

#sidebar.svelte-kvjsp8 h1:where(.svelte-kvjsp8) {
  font: var(--sans-h1);
  color: var(--header-fg);
  margin: 0 0 16px;
  padding: 0
}

.intro.svelte-kvjsp8 {
  margin-bottom: 20px
}

#sidebar.svelte-kvjsp8 .run:where(.svelte-kvjsp8) {
  flex: 0 0 auto;
  padding: 20px;
  border-top: 1px solid var(--border-color)
}

#sidebar.svelte-kvjsp8 #tidy:where(.svelte-kvjsp8) {
  background: var(--light-blue);
  border: 0;
  color: var(--main-bg);
  font: var(--sans-h1);
  font-size: 15px;
  height: 36px;
  width: 100%;
  border-radius: 3px;
  position: relative
}

#sidebar.svelte-kvjsp8 #tidy[disabled]:where(.svelte-kvjsp8) {
  background: var(--dark-gray);
  color: transparent;
  position: relative
}

#sidebar.svelte-kvjsp8 #tidy[disabled]:where(.svelte-kvjsp8):after {
  animation: svelte-kvjsp8-pulse .9s infinite linear;
  animation-delay: -.45s;
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 20px;
  left: 160px;
  position: absolute;
  top: 8px;
  width: 20px
}

#sidebar.svelte-kvjsp8 code {
  font-size: .9em;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .1);
  color: var(--light-gray);
  padding: 1px 4px;
  border-radius: 3px
}

@keyframes svelte-kvjsp8-pulse {
  0% {
    transform: translate(-80px) scale(0)
  }

  35% {
    transform: translate(-40px) scale(.85)
  }

  50% {
    transform: translate(0) scale(1)
  }

  65% {
    transform: translate(40px) scale(.85)
  }

  to {
    transform: translate(80px) scale(0)
  }
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 300;
  src: local("IBM Plex Sans Light"), local("IBMPlexSans-Light"), url("./IBMPlexSans-Light-SATUMA4V.woff2") format("woff2")
}

@font-face {
  font-family: IBM Plex Sans;
  font-style: normal;
  font-weight: 500;
  src: local("IBM Plex Sans Regular"), local("IBMPlexSans-Regular"), url("./IBMPlexSans-Medium-ILA6RNXQ.woff2") format("woff2")
}

@font-face {
  font-family: Inconsolata;
  font-style: normal;
  font-weight: 400;
  src: local("Inconsolata Regular"), local("Inconsolata-Regular"), url("./Inconsolata-Regular-CEGDCP7X.woff2") format("woff2")
}

:root {
  --dark1: #1c222aff;
  --dark2: #222931ff;
  --dark3: #283038ff;
  --dark4: #2d363fff;
  --dark5: #333d46ff;
  --dark6: #39444dff;
  --dark7: #3f4b54ff;
  --dark8: #44515bff;
  --dark9: #4a5862ff;
  --dark10: #505f69ff;
  --light1: #eaeaeaff;
  --light2: #d9d7d7ff;
  --light3: #c8c4c5ff;
  --light4: #b8b2b2ff;
  --light5: #a79fa0ff;
  --light6: #968c8dff;
  --red: #de3040;
  --green: #05c46b;
  --orange: #f9b653;
  --pink: #f36eb7;
  --light-blue: #71cafd;
  --main-bg: var(--dark1);
  --border-color: var(--dark6);
  --hover-bg: var(--dark3);
  --main-fg: var(--light2);
  --header-fg: var(--light1);
  --textfield-bg: var(--dark3);
  --light-gray: var(--light3);
  --dark-gray: var(--light6);
  --mono-normal: 400 14px "Inconsolata", monospace;
  --sans-normal: 300 14px "IBM Plex Sans", sans-serif;
  --sans-h1: 500 16px "IBM Plex Sans", sans-serif;
  --sans-h2: 500 14px "IBM Plex Sans", sans-serif
}

* {
  box-sizing: border-box
}

html {
  height: 100%
}

body {
  background: var(--main-bg);
  color: var(--main-fg);
  font: var(--sans-normal);
  line-height: 1.5em;
  margin: 0;
  display: flex;
  height: 100%
}

button {
  cursor: pointer
}

input[type=number],
textarea {
  background: var(--textfield-bg);
  color: var(--header-fg);
  border: 1px solid var(--border-color);
  padding: 8px;
  font: var(--sans-normal);
  border-radius: 3px;
  font-size: 15px;
  min-height: 24px
}

input[type=number] {
  -moz-appearance: textfield;
  margin-left: 8px
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none
}

textarea {
  margin-top: 4px;
  line-height: 1.4em
}

a {
  color: inherit
}

p:first-child {
  margin-top: 0
}

p:last-child {
  margin-bottom: 0
}

.btn {
  background: var(--main-bg);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--header-fg);
  font: var(--sans-normal);
  display: inline-block;
  margin-right: 6px;
  padding: 5px 12px;
  text-decoration: none
}