@charset "UTF-8";
html {
  --color-1: #2C3333;
  --color-2: #395B64;
  --color-3-hex: 165, 201, 202;
  --color-3: rgba(var(--color-3-hex), 1);
  --color-4: #E7F6F2;
  --color-5: #ffffff;
  --text: var(--color-1);
  --brand: var(--color-4);
  --nav-width: 240px;
  --main-width: 70%;
  --controls-width: 30%;
  --divider: #f3f3f3;
  --primary: var(--brand);
  --secondary: var(--color-2);
  --bg-1: #ffffffcc;
  --bg-2: #2A094405;
  --bg-3: #2A094430;
  --bg-4: #ffffffff;
  --box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.2) inset;
  --border-radius: .5rem;
  --border-radius-2: .5rem;
  --padding: 1.5rem;
  --board: 60vw;
  --source: 20vw;
  --tools: 20vw;
  --font-size: 12;
}
@media (min-width: 1000px) {
  html {
    --board: 50vw;
    --source: 25vw;
    --tools: 25vw;
    --font-size: 14;
  }
}

.smooth {
  --transition: all .3s;
}

html, body {
  padding: 0;
  margin: 0;
}

figure, p, ul, ol, h1, h2, h3, h4 {
  margin: 0 0 1lh 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

hr {
  border: none;
  margin: 1lh 0;
  height: 0;
  border-top: 1px solid;
}

table, td, th {
  text-align: left;
}

table {
  width: 100%;
  line-height: 1.5;
}
table td, table th {
  padding-right: .5rem;
}
table td:last-child, table th:last-child {
  padding: 0;
}

.valign-center {
  min-height: calc(100vh - 10rem);
  display: flex;
  width: 100%;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

html:not(.loggedin) .login-show {
  opacity: .25;
  pointer-events: none;
  cursor: disallowed;
}

.loggedin .login-hide {
  display: none;
}

html, input, option, select, button, textarea {
  font-family: 'Roboto', sans-serif;
}

html {
  font-size: calc(var(--font-size) * 1px);
}

body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
}

h1, h2 {
  line-height: 1.2;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 .5em 0;
}

h2 {
  font-size: 1.5rem;
  margin: 0 0 .5em 0;
}

h3 {
  font-size: 1.125rem;
  margin: 0 0 .5em 0;
}

h4 {
  font-size: 1rem;
  margin: 0 0 .25em 0;
}

blockquote {
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--bg-1);
  opacity: .8;
  max-width: 30rem;
}
blockquote em {
  display: block;
  font-size: .5em;
  margin: .5rem 0;
  font-style: normal;
}

a {
  color: inherit;
}

.text-date {
  font-variant: proportional-nums;
}

[style*="--icon:"]:before,
[data-icon]:before,
i[style*="--icon:"] {
  content: '';
  width: calc(1.5em * var(--size, 1));
  height: calc(1.5em * var(--size, 1));
  display: inline-block;
  vertical-align: middle;
  mask-size: contain;
  mask-position: 50% 50%;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
  background-color: currentColor;
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  transition: background-color .3s;
}

i[style*="--icon:"] {
  font-size: 0;
}
i[style*="--icon:"]:before {
  display: none;
}

:root {
  --logoSource: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="164.103"><path d="M66.667 61.538v61.539h15.384l.016-20.128c.018-23.182.294-26.296 2.792-31.556 7.468-15.726 27.709-19.485 40.292-7.483l3.054 2.913V46.1L125 44.6c-12.493-5.846-30.604-4.342-40.73 3.382-.901.687-1.768 1.249-1.928 1.249-.16 0-.291-11.077-.291-24.616V0H66.667v61.538M30.769 42.083C2.01 49.571-9.598 83.833 8.573 107.597c11.175 14.614 32.876 19.806 49.76 11.905l3.205-1.499V97.28l-3.053 2.913C38.221 119.521 6.05 96.079 18.424 71.001c7.624-15.453 27.59-18.986 40.061-7.091l3.053 2.913V46.1l-3.205-1.5c-7.805-3.652-19.205-4.693-27.564-2.517m133.334 0c-7.904 2.058-17.499 8.016-21.282 13.215-1.883 2.587-1.682 2.597-3.787-.197-.954-1.266-2.627-3.009-3.718-3.873l-1.983-1.571v19.192c0 21.548.235 23.428 3.887 31.151 9.445 19.976 34.362 28.901 54.447 19.502l3.205-1.499V97.28l-3.054 2.913c-20.264 19.328-52.434-4.114-40.061-29.192 7.624-15.453 27.59-18.986 40.061-7.091l3.054 2.913V46.1l-3.205-1.5c-7.805-3.652-19.205-4.693-27.564-2.517m66.666 0c-7.903 2.058-17.499 8.016-21.282 13.215-1.883 2.587-1.681 2.597-3.786-.197-.954-1.266-2.628-3.009-3.718-3.873L200 49.657v114.446h15.385v-24.616c0-13.538.13-24.615.29-24.615.16 0 1.028.562 1.928 1.248 10.127 7.724 28.237 9.228 40.73 3.382l3.205-1.499V97.28l-3.053 2.913c-20.264 19.328-52.435-4.114-40.061-29.192 7.624-15.453 27.59-18.986 40.061-7.091l3.053 2.913V46.1l-3.205-1.5c-7.805-3.652-19.205-4.693-27.564-2.517m66.667 0c-7.903 2.058-17.499 8.016-21.282 13.215-1.883 2.587-1.681 2.597-3.787-.197-.954-1.266-2.627-3.009-3.717-3.873l-1.983-1.571v114.446h15.384v-24.616c0-13.538.131-24.615.291-24.615.16 0 1.027.562 1.928 1.248 10.126 7.724 28.237 9.228 40.73 3.382l3.205-1.499V97.28l-3.054 2.913c-20.264 19.328-52.434-4.114-40.061-29.192 7.624-15.453 27.59-18.986 40.061-7.091l3.054 2.913V46.1L325 44.6c-7.805-3.652-19.205-4.693-27.564-2.517m66.667 0c-7.904 2.058-17.499 8.016-21.282 13.215-1.883 2.587-1.682 2.597-3.787-.197-.954-1.266-2.627-3.009-3.718-3.873l-1.983-1.571v73.42h15.385l.016-20.128c.019-23.852.252-26.315 3.027-31.948 7.609-15.45 27.586-18.987 40.057-7.091l3.054 2.913V46.1l-3.205-1.5c-7.805-3.652-19.205-4.693-27.564-2.517" fill-rule="evenodd"/></svg>');
}

.icon-logo {
  --source: var(--logoSource);
}

.icon-logo-small {
  position: relative;
  --source: var(--logoSource);
  mask-size: auto 100%;
  -webkit-mask-size: auto 100%;
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  width: calc(.565rem * var(--size, 1));
}

html {
  background-color: var(--color-3);
}

body {
  padding: 2rem 2rem 8rem 2rem;
  min-height: calc(100vh - 10rem);
}

html, body {
  overflow: hidden;
}

.canvas {
  background-color: var(--bg-1);
  outline: 100vh solid var(--bg-1);
}

.logo {
  display: flex;
  white-space: nowrap;
  font-size: 0;
  width: 780px;
  margin: 0 auto;
  color: #ff3300;
}
.logo span {
  position: relative;
  width: 1666.66667%;
  height: 0;
  padding-top: 41.02564%;
  display: inline-block;
}
.logo span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 50%;
  padding-left: 100%;
  width: 0;
  border-radius: 50%;
  border: 30px solid;
  box-sizing: border-box;
}

.moving {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.button {
  position: relative;
  z-index: 1;
  background-color: var(--color-1);
  color: var(--bg-1);
  border: 1px solid var(--color-1);
  padding: .25rem 1rem;
  border-radius: var(--border-radius-2);
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 1;
  outline: 2px solid transparent;
  font-size: 1rem;
}
.smooth .button {
  transition: all .3s;
}
.button i, .button:before {
  flex-shrink: 0;
  flex-grow: 0;
  margin-right: .5rem;
  background-color: var(--bg-1);
}
.button.focus {
  outline: 2px solid var(--color-1);
}
.button:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: var(--bg-1);
  border-radius: 50%;
  transition: all 1s;
  transition-delay: .3s;
  opacity: 0;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  outline: 0vh solid var(--bg-1);
}
.button:hover {
  color: #fff;
}
.button:hover i, .button:hover:before {
  background-color: #fff;
}
.button:hover:after {
  outline-width: 100vh;
  opacity: .2;
}
.button.secondary {
  background-color: var(--color-2);
  border-color: var(--color-2);
}
.button.transparent {
  background-color: transparent;
  border-color: transparent;
}
.button.tertiary {
  background-color: var(--color-3);
  border-color: var(--color-3);
  color: var(--color-1);
}
.button.tertiary i, .button.tertiary:before {
  background-color: var(--color-1);
}
.button.link {
  text-decoration: underline;
  background-color: transparent;
  color: var(--color-1) !important;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.button.full {
  width: 100%;
}
.button.compact {
  padding: 0;
  overflow: visible;
  justify-content: center;
  width: 3rem;
}
.button.compact:after {
  display: none;
}
.button.compact span {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -1.25rem;
  font-size: .75rem;
  padding: .25rem .5rem;
  border-radius: .25rem;
  transform: translate3d(-50%, 1.5rem, 0);
  opacity: 0;
  background-color: inherit;
  white-space: nowrap;
  pointer-events: none;
}
.smooth .button.compact span {
  transition: all .3s;
  transition-delay: .5s;
}
.button.compact span:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: calc(50% - 4px);
  bottom: -3px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: inherit;
}
.button.compact.small {
  width: 2rem;
  height: 2rem;
  font-size: .6667rem;
}
.button.compact i, .button.compact:before {
  margin: 0;
}
.button.compact:hover span {
  transform: translate3d(-50%, -0.5rem, 0);
  opacity: 1;
}
.button.compact.ghost {
  background-color: var(--bg-1);
}
.button.compact.ghost i, .button.compact.ghost:before {
  background-color: var(--color-1);
}
.button.compact.ghost.secondary {
  background-color: var(--bg-1);
}
.button.compact.ghost.secondary i, .button.compact.ghost.secondary:before {
  background-color: var(--color-2);
}
.button.compact.ghost.tertiary {
  background-color: var(--bg-1);
}
.button.compact.ghost.tertiary i, .button.compact.ghost.tertiary:before {
  background-color: var(--color-3);
}
.button.compact.ghost.compact span {
  background-color: var(--color-1);
}
.button.compact.ghost.compact.secondary span {
  background-color: var(--color-2);
}
.button.compact.ghost.compact.tertiary span {
  background-color: var(--color-3);
  color: var(--color-1);
}

.group {
  display: flex;
}

.group input,
.group select,
.group .input {
  flex-basis: 100%;
  width: 100px;
}

.group button {
  flex-shrink: 0;
  flex-grow: 0;
}

.input {
  display: block;
  margin-bottom: 1rem;
}
.input label {
  display: block;
}

.input em {
  display: block;
  font-size: .75rem;
  font-style: normal;
  margin: .25rem 1rem 0 1rem;
}

.input [type="text"],
.input [type="file"],
.input [type="email"],
.input [type="password"],
.input [type="search"],
.input [type="url"],
.input [type*="date"],
.input textarea,
.input select {
  font-size: 1rem;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--divider);
  padding: .5rem 1rem;
  border-radius: var(--border-radius-2);
  outline: none;
  box-shadow: var(--box-shadow);
  background-color: var(--bg-1);
}
.input [type="text"]:focus,
.input [type="file"]:focus,
.input [type="email"]:focus,
.input [type="password"]:focus,
.input [type="search"]:focus,
.input [type="url"]:focus,
.input [type*="date"]:focus,
.input textarea:focus,
.input select:focus {
  border-color: var(--color-3);
  background-color: var(--color-5);
}

.input option {
  background-color: #fff;
  box-shadow: none;
}

.input [type="text"],
.input [type="file"],
.input [type="email"],
.input [type="password"],
.input [type="search"],
.input [type="url"],
.input [type*="date"],
.input textarea,
.input select,
.button {
  height: 3rem;
}

strong:has(+ [required]):after {
  content: ' *';
}

.input [required] {
  border-color: var(--color-1);
}

.input textarea {
  height: 6rem;
}

.buttons {
  display: flex;
  flex-flow: row-reverse;
  flex-wrap: wrap;
  margin: 0 0 0 1rem;
}
.buttons:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-3);
}

.buttons .button {
  margin: 1rem 0 0 1rem;
}
.buttons .button.left {
  margin-right: auto;
  margin-left: 0;
}

.radios {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: -.5rem 0 1rem -.5rem;
  font-size: .875rem;
  line-height: 1.25;
}
.radios .full {
  flex-basis: 100%;
}
.radios .full label, .radios .full span {
  display: block;
}
.radios input[type="radio"],
.radios input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.radios label {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: .5rem 0 0 .5rem;
  background-color: var(--bg-1);
  padding: .5rem 1rem .5rem 2rem;
  border-radius: var(--border-radius);
}
.radios label strong, .radios label em {
  display: block;
}
.radios label strong em {
  display: inline;
  opacity: 0.5;
}
.radios label em {
  text-transform: none;
  font-style: normal;
}
.radios label:before {
  content: '';
  position: absolute;
  left: calc(.625rem - 2px);
  top: calc(.625rem - 2px);
  width: .75rem;
  height: .75rem;
  border: 2px solid;
  background-color: var(--bg-2);
}
.smooth .radios label:before {
  transition: all .1s;
}
.radios [type="radio"] + label:before {
  border-radius: 50%;
}
.radios .separator-select {
  position: absolute;
  opacity: 0;
  margin: 1rem;
  width: 1rem;
  height: 1rem;
}
.radios :checked + label {
  background-color: var(--color-1);
  color: var(--bg-1);
}
.radios :checked + label:before {
  height: .35rem;
  transform: rotate(-45deg);
  border-width: 2px;
  border-top-color: var(--color-1);
  border-right-color: var(--color-1);
}
.radios [type="radio"]:checked + label:before {
  height: .75rem;
  background-color: var(--bg-1);
  border-color: var(--bg-1);
  box-shadow: 0 0 0px 3px var(--color-1) inset;
}

.input .input-code {
  display: block;
  font-size: 2rem;
  font-family: monospace;
  height: 2em;
  padding: 0 1ch;
  margin: 0 auto;
  text-align: center;
}

label [type="checkbox"],
label [type="radio"] {
  position: absolute;
  opacity: 0;
}
label [type="checkbox"] ~ span,
label [type="radio"] ~ span {
  position: relative;
  display: inline-block;
  padding-left: 1.5rem;
}
label [type="checkbox"] ~ span:before,
label [type="radio"] ~ span:before {
  content: '';
  position: absolute;
  left: 0;
  top: .125em;
  width: 1em;
  height: 1em;
  border: 2px solid;
}
label [type="checkbox"] ~ span:after,
label [type="radio"] ~ span:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: .125em;
  width: .75em;
  height: .75em;
  margin: .25em;
  background-color: var(--text);
}
label label:hover [type="checkbox"] ~ span,
label label:hover [type="radio"] ~ span {
  color: var(--primary-2);
}
label [type="radio"] + *:before, label [type="radio"] + *:after {
  border-radius: 50%;
}
label [type="checkbox"]:checked ~ span:after,
label [type="radio"]:checked ~ span:after {
  display: block;
}
label [disabled],
label [disabled] ~ span {
  opacity: .35;
}
label [type="checkbox"].toggle ~ span {
  padding-left: 2.25rem;
}
label [type="checkbox"].toggle ~ span:before, label [type="checkbox"].toggle ~ span:after {
  transition: var(--transition);
}
label [type="checkbox"].toggle ~ span:before {
  width: 1.75em;
  height: 1em;
  border: none;
  background-color: var(--primary-1);
  border-radius: 1em;
}
label [type="checkbox"].toggle ~ span:after {
  display: block;
  border-radius: 50%;
  background-color: var(--bg-1);
  border: none;
  margin: .125em;
}
label [type="checkbox"].toggle:checked ~ span:before {
  background-color: var(--primary-1);
}
label [type="checkbox"].toggle:checked ~ span:after {
  left: .75em;
}

fieldset {
  padding: var(--padding) var(--padding) calc(var(--padding) - 1rem) var(--padding);
  background-color: var(--bg-2);
  margin: 0 0 1lh 0;
  border-top: 1px solid var(--color-1);
}

legend {
  text-transform: uppercase;
  font-size: .875rem;
  color: var(--bg-1);
  padding: .125rem .5rem;
  background-color: var(--color-1);
}

.nav {
  padding: 2rem;
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  width: var(--nav-width);
  background-color: var(--color-3);
  transform: translate3d(calc(-100% + .5rem), 0, 0);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}
.smooth .nav {
  transition: all .3s;
}
.nav:hover {
  transform: translate3d(calc(-100% + 2rem), 0, 0);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.nav:target {
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.nav:target .logo-container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.nav-title {
  display: flex;
  align-items: flex-end;
  color: var(--color-1);
  border-bottom: 1px solid var(--color-1);
  padding-bottom: .5rem;
  margin: 0;
}
.nav-title .small, .nav-title choppr-version {
  opacity: .4;
  font-size: .75em;
  margin-left: auto;
  position: relative;
}
.nav-title choppr-version:before {
  content: attr(data-version);
}
.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem 0;
  border-bottom: 1px solid var(--color-1);
}
.nav-menu a {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--color-1);
  font-size: 1rem;
  line-height: 1;
  padding: 1rem 0;
  border-top: 1px solid var(--color-1);
  text-decoration: none;
  font-weight: 700;
}
.smooth .nav-menu a {
  transition: all .3s;
}
.nav-menu a:hover {
  text-decoration: underline;
}
.nav-user {
  margin-bottom: 1px;
  margin-top: auto;
}
.nav-logo-container {
  position: fixed;
  z-index: 3;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 1rem 2rem;
  width: var(--nav-width);
  background-color: var(--color-3);
  transform: translate3d(100%, 0, 0);
}
.nav-logo-container:before, .nav-logo-container:after {
  content: '';
  position: absolute;
  left: -1rem;
  width: 2rem;
  top: 0;
  bottom: 0;
  background: inherit;
}
.nav-logo-container:after {
  left: -1rem;
  top: -1rem;
  bottom: -1rem;
  width: 1rem;
}
.nav-logo {
  display: flex;
  align-items: flex-start;
  font-size: 0;
}
.nav-logo i {
  height: 0;
  flex-basis: 100%;
  display: block;
  width: 16.6667%;
  padding-top: 41.0256%;
  mask-image: var(--logoSource);
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: auto 100%;
  opacity: .1;
  white-space: nowrap;
  background-color: var(--color-2);
}
.nav-logo i:nth-child(1) {
  mask-position: -20% 0;
}
.nav-logo i:nth-child(2) {
  mask-position: 0 0;
}
.nav-logo i:nth-child(3) {
  mask-position: 20% 0;
}
.nav-logo i:nth-child(4) {
  mask-position: 60% 0;
}
.nav-logo i:nth-child(5) {
  mask-position: 100% 0;
}
.nav-logo i:nth-child(6) {
  mask-position: 120% 0;
}
.smooth .nav-logo i {
  transition: mask-position .3s ease-out, opacity .3s ease-out, background-color .6s ease-out;
}
.smooth .nav-logo i:nth-child(1) {
  mask-position: 0 0;
  transition-delay: .2s;
  opacity: 1;
  background-color: var(--color-2);
}
.smooth .nav-logo i:nth-child(2) {
  mask-position: 20% 0;
  transition-delay: .5s;
  opacity: 1;
  background-color: var(--color-2);
}
.smooth .nav-logo i:nth-child(3) {
  mask-position: 40% 0;
  transition-delay: .6s;
  opacity: 1;
  background-color: var(--color-2);
}
.smooth .nav-logo i:nth-child(4) {
  mask-position: 60% 0;
  transition-delay: .7s;
  opacity: 1;
  background-color: var(--color-2);
}
.smooth .nav-logo i:nth-child(5) {
  mask-position: 80% 0;
  transition-delay: .9s;
  opacity: 1;
  background-color: var(--color-2);
}
.smooth .nav-logo i:nth-child(6) {
  mask-position: 100% 0;
  transition-delay: 1.2s;
  opacity: 1;
  background-color: var(--color-2);
}
.smooth .nav-logo:hover i {
  background-color: var(--color-1);
}
.smooth .nav-logo:hover i:nth-child(1) {
  mask-position: -20% 0;
}
.smooth .nav-logo:hover i:nth-child(2) {
  mask-position: 0% 0;
}
.smooth .nav-logo:hover i:nth-child(3) {
  mask-position: 20% 0;
}
.smooth .nav-logo:hover i:nth-child(4) {
  mask-position: 60% 0;
}
.smooth .nav-logo:hover i:nth-child(5) {
  mask-position: 100% 0;
}
.smooth .nav-logo:hover i:nth-child(6) {
  mask-position: 120% 0;
}
.nav-close, .nav-open {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 0;
  background-color: transparent;
}
.nav-close {
  display: none;
  z-index: 11;
}
.nav:target .nav-close {
  display: block;
}
.nav {
  outline: 200vw solid transparent;
}
.nav:hover {
  outline: 200vw solid rgba(0, 0, 0, 0.05);
}
.nav:target {
  outline: 200vw solid rgba(0, 0, 0, 0.2);
}

.pane-inner .nav-logo {
  margin-top: calc(3rem - (var(--padding) / 2));
  margin-bottom: 3rem;
  max-width: 20rem;
}

.panes {
  margin: -2rem -2rem -8rem -2rem;
  display: flex;
  height: 100vh;
  --size: .75;
  --paneWidth: 300;
}

.pane {
  background-color: #ff3300;
  padding-left: 2.5714rem;
  box-sizing: border-box;
  position: relative;
  background-color: rgba(255, 255, 255, 0.2);
  flex-basis: 2.5714rem;
  min-width: 2.5714rem;
}
.pane .button.compact {
  width: 2rem;
  height: 2rem;
}
.pane .button.compact:hover {
  z-index: 10;
}
.pane .button.compact span {
  pointer-events: none;
}
.pane[style*="width"] {
  flex-basis: auto;
}
.pane-bar {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 2.5714rem;
  flex-shrink: 0;
  flex-grow: 0;
  bottom: 0;
  display: flex;
  flex-flow: row;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.2);
  transition: background-color .3s;
  box-shadow: -5px 0 10px 0 rgba(0, 0, 0, 0.2);
}
.pane-bar:hover {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
}
.pane-controls {
  position: relative;
  z-index: 20;
  display: flex;
  flex-flow: column-reverse;
}
.pane-controls .button {
  margin: .25rem;
}
.pane-controls .controls-divider {
  height: 0;
  margin: .25rem;
  width: calc(100% - .5rem);
  border-top: 1px solid #000;
  opacity: .25;
}
.pane-controls .controls-info {
  width: 2rem;
  border: none;
  padding: 2.5rem 0;
  margin: -2rem .25rem;
  opacity: .75;
}
.pane-controls .controls-info:after {
  display: block;
  width: 100%;
  text-align: center;
}
.pane-controls .controls-info[data-selected]:after {
  font-size: .75rem;
  font-weight: 700;
  content: attr(data-selected);
}
.pane-controls .controls-info[data-version]:after {
  font-size: .75rem;
  font-weight: 700;
  content: attr(data-version);
}
.pane-controls .controls-info[data-selected="0"] .pane-controls .controls-info {
  pointer-events: none;
  opacity: 0;
}
.pane-content {
  min-width: 10rem;
}
.pane-title {
  position: absolute;
  z-index: 2;
  line-height: 2.5714rem;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  top: .5rem;
  color: #fff;
  font-weight: 700;
  pointer-events: none;
}
.pane-title:before {
  margin-bottom: .5rem;
}
.pane-menu {
  flex-basis: 40%;
  background-color: #5A5A66;
}
.pane-menu .pane-content {
  min-width: 10rem;
}
.pane-tree {
  flex-basis: 0;
  --paneWidth: 150;
  background-color: #93aaab;
}
.pane-tree .source-tree {
  position: static;
  padding: 0;
  background-color: transparent;
  color: var(--text);
}
.pane-tree .pane-content {
  min-width: 15rem;
}
.pane-log {
  flex-basis: 0;
  background-color: #5A5A66;
}
.pane-source {
  flex-basis: 0;
  --paneWidth: 300;
  background-color: #93aaab;
}
.pane-source .source-content {
  padding: 0 0 100vh calc(var(--padding) / 2);
}
.pane-source .pane-source-controls {
  top: auto !important;
  bottom: auto !important;
}
.pane-source .pane-content {
  min-width: 20rem;
}
.pane-import {
  flex-basis: 60%;
}
.pane-recipe {
  flex-basis: 0;
  --paneWidth: 200;
  background-color: #ACEB98;
}
.pane-recipe .pane-recipe-preprocessors {
  float: right;
  padding: 1.2rem 0;
  margin: calc(-.5 * var(--padding)) 0.5rem;
  font-size: .875rem;
}
.pane-recipe .drop-container {
  padding: 0;
  pointer-events: auto;
}
.pane-recipe .drop {
  margin-top: -1.25rem;
  --size: 1;
}
.pane-recipe .steps-container {
  min-height: calc(100vh - 1rem);
}
.pane-separators {
  flex-basis: 0;
  --paneWidth: 200;
  background-color: #ACEB98;
}
.pane-separators .separators ul {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
}
.pane-separators .separator {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: var(--border-radius);
  margin: 0 0 .25rem 0;
  padding: calc(var(--padding) / 3) calc(var(--padding) / 2);
}
.pane-separators .separator strong {
  display: block;
  padding-left: 1.25rem;
}
.pane-separators .separator em {
  display: block;
  font-style: normal;
}
.pane-separators .separator:before {
  display: none;
}
.pane-separators .separator .item-drag:before {
  margin-left: -.25rem;
  background-color: var(--secondary);
}
.pane-export {
  flex-basis: 0;
  background-color: #87FF65;
}
.pane-inner {
  position: relative;
  padding: calc(var(--padding) / 2);
  height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #fff;
}
.dragging .pane-inner {
  user-select: none;
  pointer-events: none;
}
.smooth .pane-inner {
  scroll-behavior: smooth;
}
.pane-padded {
  padding: calc(var(--padding) / 2);
}
.pane[data-width="36"] .pane-inner, .pane[data-width="31"] .pane-inner {
  opacity: 0;
  pointer-events: none;
}

.panes .controls-selection-buttons ~ * {
  pointer-events: none;
  opacity: .1;
}

html[style*="--selected"] .panes .controls-selection-buttons ~ * {
  pointer-events: auto;
  opacity: 1;
}

html[style*="--selected: 0"] .panes .controls-selection-buttons ~ * {
  pointer-events: none;
  opacity: .1;
}

.well {
  position: relative;
  padding: calc(var(--padding) / 2);
  background-color: var(--bg-2);
  margin-bottom: 1lh;
}
.well > *:last-child {
  margin-bottom: calc(var(--unit) - (var(--padding) / 2));
}

.pane-item-edit {
  float: right;
}

.areas {
  display: flex;
}

.area {
  padding: 1rem;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
.area-title {
  font-size: 1.25rem;
  display: none;
}

.blocks {
  position: relative;
  margin: 0 0 6rem 0;
  justify-items: stretch;
  align-items: stretch;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  display: grid;
}
.blocks-title {
  color: var(--color-2);
  margin-bottom: 2rem;
}

.block {
  position: relative;
  padding: 1rem;
  background-color: var(--bg-1);
  max-width: 30rem;
  font-size: 0;
  width: 100%;
  border-radius: var(--border-radius);
}
.block > * {
  font-size: 1rem;
}
.block > :last-child {
  margin-bottom: 0;
}
.block:after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  box-shadow: var(--box-shadow);
  transition: opacity .3s;
  opacity: 1;
  border-radius: inherit;
}
.block-title {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  margin: -1rem -1rem 1rem -1rem;
  background-color: var(--color-2);
  color: var(--bg-1);
  padding: .375rem 1rem;
  border-radius: var(--border-radius) 0 0 0;
}
.block:hover:before {
  opacity: .8;
}

.block-center {
  display: flex;
  flex-flow: column;
  justify-content: center;
  min-height: calc(100% - 2rem - 1.75rem);
}

.block-square:before {
  content: '';
  float: left;
  margin-top: 100%;
  width: 0;
}

.blocks .block {
  max-width: calc(100% - 2rem);
  grid-column-end: span 12;
}
@media screen and (min-width: 1000px) {
  .blocks .block {
    grid-column-end: span var(--span, 6);
  }
}

.file {
  pointer-events: none;
  opacity: 0;
  position: absolute;
}

.source-overview {
  position: relative;
  width: calc(var(--zoom, 1) * 100%);
  transform: scale(calc(1 / var(--zoom, 1)));
  transform-origin: 0 0;
  display: none;
}
.source-content {
  box-sizing: border-box;
  padding: 2rem 0 calc(120px * var(--zoom, 1)) 0;
}
.source-content:before {
  content: '';
  position: absolute;
  left: calc(var(--cursorx) - 3px);
  top: calc(var(--cursory) - 2px);
  width: 3px;
  height: 1.5em;
  opacity: 0;
  background-color: var(--color-1);
  transition: opacity .3s;
}
.source-content[style*="--cursorx"]:before {
  opacity: 1;
}
.source-content[style*="--cursorx"] choppr-chunk {
  cursor: none;
}
.source-content-file {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  display: none;
}
.source-content:empty + .source-content-file {
  display: flex;
}
.source-tree {
  padding: var(--padding);
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  background-color: var(--color-1);
  color: #fff;
  font-size: .75rem;
  padding-bottom: 10rem;
}
.source-tree ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.source-tree ul ul:empty {
  display: none;
}
.source-tree ul li:last-child {
  margin-bottom: .5rem;
}
.source-tree input:not(:checked) + ul {
  display: none;
}
.source-tree li {
  position: relative;
  padding: 0 0 0 1rem;
  cursor: pointer;
  transition: all .3s;
  white-space: nowrap;
  border-left: 1px solid;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-tree li input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  opacity: 0;
}
.source-tree li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.source-tree li:before {
  content: attr(data-typelabel) " " attr(data-numbering) " " attr(data-title);
  font-weight: 700;
}
.source-tree li i {
  position: absolute;
  left: .125rem;
  top: .25rem;
  width: .35rem;
  height: .35rem;
  border-left: 2px solid;
  border-top: 2px solid;
  transform: rotate(135deg);
  display: none;
}
.source-tree li:has(> :checked) > i {
  top: .125rem;
  left: .25rem;
  transform: rotate(225deg);
}
.source-tree:has(ul) i {
  display: block;
}
.source-tree [data-typelabel="Ignore"] {
  opacity: .3;
}
.source-highlight {
  position: fixed;
  z-index: 2;
  left: calc(var(--padding) - .5rem);
  top: 0;
  height: calc(100vh / var(--zoom));
  width: calc((var(--board) / var(--zoom)) + (2 * (var(--padding)) - ((2 * var(--padding)) * (1/var(--zoom)))) - (2 * var(--padding)) + (2 * .5rem));
  outline: 100000vh solid var(--color-3);
  opacity: .4;
  pointer-events: none;
  border: 1px solid var(--color-3);
  box-shadow: var(--box-shadow);
}

.source-tree[data-level="0"] ul ul,
.source-tree[data-level="1"] ul ul ul,
.source-tree[data-level="2"] ul ul ul ul,
.source-tree[data-level="3"] ul ul ul ul ul,
.source-tree[data-level="4"] ul ul ul ul ul ul,
.source-tree[data-level="5"] ul ul ul ul ul ul ul,
.source-tree[data-level="6"] ul ul ul ul ul ul ul ul,
.source-tree[data-level="7"] ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="8"] ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="9"] ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="10"] ul ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="11"] ul ul ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="12"] ul ul ul ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="13"] ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="14"] ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="15"] ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul,
.source-tree[data-level="16"] ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul {
  display: none;
}

.import-assets:has(.import-assets-list:empty) {
  display: none;
}

.import-assets ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.import-assets li + li {
  margin-top: 1rem;
}
.import-assets [data-file]:before {
  content: attr(data-file);
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.import-assets h3:after {
  content: " (" var(--assets) ")";
}
.import-assets li label {
  display: block;
}
.import-assets li i {
  margin-right: .25rem;
}
.import-assets li > span {
  display: none;
}
.import-assets li > span:last-child {
  display: block;
}

.tools-buttons {
  display: flex;
  flex-wrap: wrap;
  margin: -.5rem 0 0 -.5rem;
}
.tools-title {
  overflow: hidden;
  margin-top: .5rem;
}
.tools-title em {
  font-style: normal;
  opacity: .5;
}
.tools-link {
  float: right;
  opacity: .5;
}
.tools-link:hover {
  opacity: 1;
}
.tools .tabs-options {
  position: sticky;
  z-index: 2;
  background-color: var(--color-4);
  outline: calc(var(--padding) * .5) solid var(--color-4);
  top: 0rem;
}

.sheet {
  line-height: 1.75;
}
.sheet-title {
  display: none;
}
.sheet > * {
  position: fixed;
  top: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 var(--padding) 0 var(--padding);
  box-sizing: border-box;
}
.sheet-source {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  left: 0;
  overflow: hidden;
  width: var(--source);
  background-color: rgba(255, 255, 255, 0.9);
}
.sheet-source .tabs-options {
  position: sticky;
  z-index: 5;
  background-color: var(--color-4);
  outline: calc(var(--padding) * .5) solid var(--color-4);
  top: var(--padding);
}
.sheet-board {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  left: var(--source);
  width: var(--board);
  background-color: rgba(255, 255, 255, 0.9);
  scroll-behavior: smooth;
}
.sheet-tools {
  z-index: 4;
  left: calc(100vw - var(--tools));
  right: 0;
  padding: var(--padding);
  background-color: rgba(255, 255, 255, 0.4);
  transition: all .3s;
}
.sheet-info {
  z-index: 21;
  right: 0;
  width: var(--tools);
  background-color: var(--color-3);
  opacity: 0;
  transition: all .3s;
  pointer-events: none;
  transform: translate3d(100%, 0, 0);
}
.sheet-info.active {
  pointer-events: auto;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.sheet-separators {
  left: 0;
  right: 75%;
  background-color: rgba(255, 255, 255, 0.4);
}
.sheet-details {
  left: 25%;
  right: 50%;
  background-color: #ff3300;
  background-color: rgba(255, 255, 255, 0.2);
}
.sheet-playground {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
  left: 50%;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
}
.sheet-playground .buttons {
  position: sticky;
  z-index: 5;
  top: 0;
}

.drop-container {
  right: calc(var(--tools) + (var(--padding) * .25));
  z-index: 100;
  bottom: auto;
  padding: 0;
  top: 0;
  bottom: 0;
  padding: 0 calc(var(--padding) * .75);
  pointer-events: none;
  padding-bottom: calc(100vh - 10rem);
}
.drop-container .drop {
  pointer-events: auto;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  min-height: calc(100vh - 8rem);
}
.drop-container .drop:empty {
  opacity: .2;
  pointer-events: none;
  transition: all .3s;
}
.drop-container .drop:empty ~ .recipe-buttons {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}
.drop-container.drop-dragging .drop {
  opacity: 1;
  pointer-events: auto;
}

.drop {
  position: relative;
  z-index: 2;
  min-height: 3rem;
  width: 20rem;
  border-radius: var(--border-radius);
}
.drop:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.5rem;
  right: -.5rem;
  top: .75rem;
  bottom: -.5rem;
  opacity: 0;
  border: 2px solid #8abc7a;
  border-radius: var(--border-radius);
  transition: all .3s;
}
.drop.drag-item-over:after {
  opacity: 1;
}
.drop:empty {
  padding-top: 0;
}
.drop:empty:before {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.drop .step {
  position: relative;
  background-color: var(--color-3);
  border-radius: var(--border-radius);
  margin-bottom: calc(var(--padding) / 2);
  font-size: .875rem;
  padding: .5rem .5rem .25rem .5rem;
}
.drop .step > .drop-between {
  height: 1rem;
  top: -1rem;
}
.drop .step > span > strong {
  padding-left: 1.5rem;
}
.drop .separator {
  position: relative;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.5);
  padding: .5rem 0 .5rem 2rem;
  border-radius: var(--border-radius);
  margin: calc(var(--padding) / 2) 0;
  font-size: .875rem;
}
.drop .separator .separator {
  margin-left: -1.5rem;
}
.drop [data-count]:after {
  content: attr(data-count);
  position: absolute;
  padding: .125rem;
  background-color: var(--brand);
  margin: .375rem;
  top: 0;
  right: 0;
  border-radius: 3px;
  transition: var(--transition);
  opacity: 0;
}
.drop .step:hover [data-count]:after {
  opacity: 1;
}
.drop [data-count="0"]:after {
  opacity: 1;
}
.drop .item-drag {
  padding: .4rem 0;
  left: .25rem;
}
.drop strong:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  border: 1px solid #8abc7a;
  border-radius: var(--border-radius);
}
.drop .drag-item-over.drop-between-hover > .drop-between {
  opacity: 1;
}
.drop .drag-item-over > span > strong:before {
  opacity: 1;
}
.drop .drag-item-over.drop-between-hover > span > strong:before {
  opacity: 0;
}
.drop strong, .drop em {
  display: block;
  font-style: normal;
}
.drop strong em {
  display: inline;
  opacity: 0.5;
}
.drop em {
  display: none;
}

.pane-recipe {
  --border-radius: 0;
}
.pane-recipe .drop {
  width: auto;
}
.pane-recipe .drop .step {
  background-color: rgba(0, 0, 0, 0.05);
}

.separator, .step {
  position: relative;
}
.separator label, .step label {
  pointer-events: none;
}
.separator label:before,
.separator label:after, .step label:before,
.step label:after {
  display: none;
}
.separator .item-drag, .step .item-drag {
  position: absolute;
  z-index: 3;
  left: .3125rem;
  top: .125rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: .275rem .5rem;
}
.drop .separator .item-drag, .drop .step .item-drag {
  padding: .25rem .125rem;
}

.drop-between {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(var(--padding) / -1.75);
  height: calc(var(--padding));
  background: linear-gradient(180deg, transparent 6px, #8abc7a 8px, transparent 9px);
  opacity: 0;
}

choppr-chunk {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0;
  white-space: pre-wrap;
  padding: 12px 4px 12px 4px;
  outline: 0 solid var(--color-3);
  cursor: default;
}
choppr-chunk.hover {
  z-index: 3;
  outline: 2px solid var(--color-3);
}
choppr-chunk.selected {
  background-color: rgba(var(--color-3-hex), .4);
}
choppr-chunk.splittable {
  outline: 2px dotted var(--color-3);
  background-color: rgba(var(--color-3-hex), .2);
}
[data-clickmode="split"] choppr-chunk {
  cursor: text;
}
[data-clickmode="split"] choppr-chunk.hover {
  outline: 2px dotted var(--color-3);
}

choppr-chunk[data-fresh] {
  background-color: #ff3300;
}

choppr-chunk[data-pathlabel]:before {
  content: attr(data-pathlabel);
  position: absolute;
  z-index: 3;
  bottom: calc(100% - .5lh);
  right: 2px;
  font-size: .875rem;
  padding: 2px 4px;
  background-color: var(--color-1);
  color: var(--bg-1);
  display: inline-block;
  opacity: 0;
  text-align: right;
}

choppr-chunk.selected[data-pathlabel]:before,
choppr-chunk[data-typelabel].selected > choppr-chunk[data-pathlabel]:first-child:before {
  content: attr(data-path);
}

choppr-chunk[data-pathlabel]:hover:before,
choppr-chunk[data-typelabel]:hover:not(:has(:hover)) > choppr-chunk[data-pathlabel]:first-child:before {
  opacity: 1;
}

choppr-chunk[data-typelabel]:before {
  content: attr(data-typelabel) " " attr(data-numbering) " " attr(data-title);
  position: relative;
  z-index: 1;
  margin-left: -12px;
  top: -8px;
  padding: 4px 16px;
  background-color: var(--text);
  color: var(--bg-1);
  display: inline-block;
}
choppr-chunk[data-typelabel]:after {
  content: '';
  position: absolute;
  left: -8px;
  width: 2px;
  top: 4px;
  bottom: 8px;
  background-color: var(--text);
}

choppr-chunk[data-typelabel='Ignore'] {
  opacity: .3;
}

choppr-chunk[data-typlabele="Root"] {
  padding: 0;
  z-index: 1;
}
choppr-chunk[data-typlabele="Root"]:before, choppr-chunk[data-typlabele="Root"]:after {
  z-index: 1;
  background-color: var(--color-4);
  color: var(--color-1);
}

.chunk-ignore {
  display: none;
}

#separator-details:empty + .buttons {
  display: none;
}

.recipe-playground-buttons {
  position: fixed;
  z-index: 20;
  right: var(--padding);
  bottom: var(--padding);
}

.recipe-button-back {
  display: none;
}

.separator-create {
  display: none;
}

.playground .recipe-button-manage {
  display: none;
}
.playground .separator-create {
  display: block;
}
.playground .recipe-button-back {
  display: inline-flex;
}
.playground .separators-container .separators {
  max-width: calc(var(--tools) - (2 * var(--padding)));
  padding-bottom: 10rem;
}
.playground .preprocessors-container {
  opacity: .5;
  pointer-events: none;
  margin-bottom: var(--padding);
}
.playground .preprocessors-container .preprocessors {
  max-width: calc(var(--tools) - (2 * var(--padding)));
}

.separators-container .separators {
  width: 100%;
  max-width: 40rem;
}

.sheet-separator-details {
  z-index: 11;
  width: 25vw;
  padding: var(--padding);
  left: var(--tools);
  background-color: var(--bg-1);
  transition: all .3s;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(100vw, 0, 0);
}

.sheet-separator-playground {
  z-index: 12;
  left: calc(var(--tools) + 25vw);
  width: calc(100vw - var(--tools) - 25vw);
  background-color: #fff;
  transition: all .3s;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(100vw, 0, 0);
  font-family: 'Open Sans', sans-serif;
  font-size: 1.25rem;
}
.sheet-separator-playground .buttons {
  position: sticky;
  z-index: 5;
  top: 0;
}

.playground .sheet-tools {
  left: 0;
  background-color: var(--color-2);
}
.playground .controls-general {
  pointer-events: none;
  opacity: 0;
}
.playground .controls-separators {
  pointer-events: auto;
  opacity: 1;
  position: sticky;
  z-index: 5;
  top: var(--padding);
  top: 0;
  margin-bottom: var(--padding);
}
.playground .drop-container {
  pointer-events: none;
  opacity: 0;
}
.playground .separator .item-drag {
  pointer-events: none;
  opacity: 0;
}
.playground .separator label {
  pointer-events: auto;
}
.playground .separator label:before, .playground .separator label:after {
  display: block;
}
.playground .sheet-separator-details,
.playground .sheet-separator-playground {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  opacity: 1;
}
.playground .separator-delete {
  display: none;
}
.playground .separator-button-save {
  display: none;
}
.playground .separator-mine .separator-delete {
  display: block;
}
.playground .separator-mine .separator-button-save {
  display: inline-block;
}
.playground .separator-mine .separator-button-own {
  display: none;
}

.separator-edit {
  position: absolute;
  z-index: 10;
  right: .25rem;
  top: .25rem;
  opacity: 0;
  transition-delay: .3s;
}

.separator:hover .separator-edit {
  opacity: .5;
}

.button.separator-edit:hover {
  background-color: var(--color-1);
  opacity: 1;
}

.button.separator-edit:hover:before {
  background-color: var(--color-5);
}

.separator-code[data-type] .input:has([name="separatorRegexp"]) {
  display: none;
}

.input:has([name="separatorCodeRegexp"]) {
  position: relative;
}
.input:has([name="separatorCodeRegexp"]) input {
  padding-left: 1.75rem;
}
.input:has([name="separatorCodeRegexp"]):before {
  content: '^';
  left: 1rem;
  top: 2rem;
  position: absolute;
  opacity: .5;
}

.separator-code[data-type="cquery"] .input:has([name="separatorCodeSplitter"]) {
  display: none;
}

.separator-code[data-type="splitter"] .input:has([name="separatorCodeCquery"]),
.separator-code[data-type="splitter"] .input:has([name="separatorCodeRegexp"]) {
  display: none;
}

.separator-code[data-type="regexp"] .input:has([name="separatorCodeCquery"]),
.separator-code[data-type="regexp"] .input:has([name="separatorCodeSplitter"]) {
  display: none;
}

.drop-leave .pane-recipe .drag-item-drag {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5);
  opacity: .5;
}

.message {
  position: relative;
  padding: .5rem .75rem;
  margin: 0 0 1rem 0;
  border: 1px solid;
  border-radius: var(--border-radius);
  overflow: hidden;
  color: var(--text);
  pointer-events: none;
}
.message:before, .message:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.message:before {
  background-image: repeating-linear-gradient(45deg, var(--color-1), var(--color-1) 0.5rem, #fff 0.5rem, #fff 1rem);
  background-attachment: fixed;
}
.message p {
  margin-bottom: 0;
}
.message:after {
  background-color: #fff;
  opacity: .9;
}
.message-fixed {
  position: fixed;
  z-index: 100;
  left: calc(2.5714rem + (var(--padding) / 2));
  top: 1rem;
  width: 16rem;
  pointer-events: none;
}
.message-fixed .message {
  transition: all .3s;
  transform: translate3d(0, -1rem, 0);
  margin-bottom: 1rem;
  opacity: 0;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2);
}
.message-fixed .message.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.message-success {
  color: var(--color-2);
}
.message-success:before {
  background-image: repeating-linear-gradient(45deg, var(--color-2), var(--color-2) 0.5rem, #fff 0.5rem, #fff 1rem);
}
.message-error {
  color: var(--color-4);
}
.message-error:before {
  background-image: repeating-linear-gradient(45deg, var(--color-4), var(--color-4) 0.5rem, #fff 0.5rem, #fff 1rem);
}

.modal {
  position: fixed;
  z-index: 1001;
  left: 50%;
  top: 50%;
  transform: translate3d(calc(-50% - 1rem), calc(-50% - 2rem), 0);
  width: calc(100vw - 4rem);
  max-height: calc(100vh - 4rem);
  max-width: 60rem;
  margin: 2rem;
  padding: 1rem;
  box-sizing: border-box;
  background-color: #fff;
  overflow: auto;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.modal:before {
  content: '✖';
  position: absolute;
  right: 0;
  top: -1.5em;
  line-height: 1;
  font-size: 3rem;
}

.modal-close {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: transparent;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}

.modal-buttons {
  position: sticky;
  z-index: 4;
  bottom: -1rem;
  background-color: #fff;
  margin: 1rem -1rem -2rem -1rem;
  padding: 0 1rem 1rem 1rem;
}

.modal-active .modal.active,
.modal-active .modal-close {
  pointer-events: auto;
  opacity: 1;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--divider);
}
.list a {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
  padding: .5rem 0;
  border-top: 1px solid var(--divider);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 6rem;
}
.list h4, .list p {
  margin: 0 .5rem 0 0;
  display: inline;
}
.list p {
  opacity: .5;
}
.list time {
  position: absolute;
  right: 0;
  opacity: .5;
}

.tabs-options {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: 2px solid var(--color-1);
  font-size: 0;
}
.tabs-options li {
  display: inline-block;
  margin-right: 1px;
}
.tabs-options a {
  display: block;
  position: relative;
  font-size: 1rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  line-height: 1;
  text-decoration: none;
  color: var(--color-1);
  background-color: rgba(0, 0, 0, 0.1);
}
.tabs-options a.active {
  background-color: var(--color-1);
  color: var(--bg-1);
}
.tabs-tab {
  display: none;
}
.tabs-tab.active {
  display: block;
}

.dash-start {
  text-align: center;
  position: relative;
  max-width: 80rem;
  margin: 4rem auto;
  padding: 2rem;
  border-radius: 200rem;
  background-color: var(--bg-1);
  box-shadow: var(--box-shadow);
}
.dash-start-block-center {
  min-height: 100%;
}
.dash-start label {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}
.dash-start label:hover i {
  background-color: var(--color-1);
}
.dash-start select:hover + label i {
  background-color: var(--color-1);
}
.dash-start i {
  width: 7vw;
  height: 7vw;
  background-color: #ffffffee;
  transition: all .3s;
}
.dash-start .icon-start {
  margin: 0 0 -1vw -1vw;
}
@media screen and (min-width: 1200px) {
  .dash-start i {
    width: 6rem;
    height: 6rem;
  }
  .dash-start .icon-start {
    margin: 0 0 -1rem -1rem !important;
  }
}
.dash-start .input {
  margin: 0;
  position: absolute;
  z-index: 2;
  left: 1rem;
  right: 1rem;
  top: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
}
.dash-start .input input {
  position: relative;
  z-index: 3;
  color: #fff;
  background-color: transparent;
  height: auto;
  font-size: 2rem;
  padding: .5rem 0;
  text-align: center;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  box-shadow: none;
}
.dash-start .input input:focus {
  border-bottom: 1px solid #fff;
}
.dash-start [data-selected-name]:before {
  content: attr(data-selected-name);
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 2rem;
  color: #fff;
  line-height: 1;
}
.dash-start select {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  height: 100% !important;
}
.dash-start .button {
  background-color: var(--color-3);
  border-color: var(--color-3);
  width: 12vw;
  height: 12vw;
  padding: 0;
  margin: auto;
  border-radius: 50%;
  justify-content: center;
}
.dash-start .button:hover i {
  background-color: var(--color-1);
}
@media screen and (min-width: 1200px) {
  .dash-start .button {
    width: 10rem;
    height: 10rem;
  }
}
.dash-start input:valid + label i,
.dash-start input:focus + label i,
.dash-start [data-selected-name] i {
  opacity: 0;
  background-color: #ffffffee;
}
.dash-start .blocks {
  margin: 0;
}
.dash-start .blocks-title {
  position: absolute;
  left: 0;
  right: 0;
  top: -4rem;
}
.dash-start .block-center {
  min-height: 100%;
}
.dash-start .block {
  grid-column-end: span var(--span, 3);
  background-color: var(--color-2);
  border-radius: 50%;
}
.dash-start .block:before {
  content: '';
  float: left;
  margin-top: 100%;
  width: 0;
}
.dash-start .block-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 2rem;
  background-color: transparent;
}

.controls {
  display: inline-flex;
  background-color: var(--color-1);
  border-radius: calc(var(--border-radius-2) + .5rem);
  align-items: center;
  outline: 1000vh solid transparent;
  transition: outline .3s .3s, opacity .3s;
}
.controls:hover {
  outline: 1000vh solid rgba(0, 0, 0, 0.1);
}
.controls.minified {
  width: 3.5rem;
  overflow: hidden;
}
.controls.minified .controls-move {
  margin-right: 1rem;
}
.controls input {
  display: none;
}
.controls > * {
  margin: .25rem;
  flex-shrink: 0;
  flex-grow: 0;
}
.controls-group {
  display: flex;
  margin: 0.25rem;
  border-radius: var(--border-radius-2);
  transition: all .3s;
  outline: 2px solid transparent;
}
.controls-group input + .button {
  border-radius: 0 var(--border-radius-2) var(--border-radius-2) 0;
}
.controls-group.focus {
  outline: 2px solid var(--color-1);
}
.controls-move {
  margin-left: 1rem;
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.moving .controls-move {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.controls-info {
  font-size: .75rem;
  line-height: 1;
  background-color: var(--color-1);
  color: var(--bg-1);
  height: 3rem;
  padding: 0 3.5rem;
  margin: 0 -3rem;
  box-sizing: border-box;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--color-1);
  display: flex;
  align-items: center;
}
.controls-divider {
  width: .25rem;
}
.secondary + .controls-info {
  background-color: var(--color-2);
  border-color: var(--color-2);
}
.tertiary + .controls-info {
  background-color: var(--color-4);
  border-color: var(--color-3);
  color: var(--color-1);
}
.controls-toggle .button {
  cursor: default;
  border-radius: 0;
  border: none;
}
.controls-toggle .button + .button {
  margin-left: 1px;
}
.controls-toggle .button:first-child {
  border-radius: var(--border-radius-2) 0 0 var(--border-radius-2);
}
.controls-toggle .button:last-child {
  border-radius: 0 var(--border-radius-2) var(--border-radius-2) 0;
  margin-right: 0;
}
.controls [data-zoom] {
  counter-reset: v calc(1 / var(--zoom) * 100);
}
.controls [data-zoom]:before {
  content: counter(v) "%";
}
.controls [data-step]:before {
  content: "v." attr(data-step);
}
.controls [data-select]:before {
  content: attr(data-select);
}

.controls-general {
  position: fixed;
  z-index: 5;
  bottom: var(--padding);
  right: calc(var(--tools) + var(--padding));
}

.controls-separators {
  position: sticky;
  background-color: var(--color-3);
  pointer-events: none;
  opacity: 0;
}

.controls-selection {
  position: fixed;
  z-index: 100;
  left: calc(var(--source) + var(--padding));
  color: #fff;
  display: inline-flex;
  clear: both;
  background-color: var(--color-3);
  border-radius: calc(var(--border-radius-2) + .5rem);
  align-items: center;
  outline: 1000vh solid transparent;
}
.controls-selection > .button {
  margin: .25rem;
}
.controls-selection .controls-group .controls-info {
  padding: 0 3rem;
  margin: 0 -3rem;
}
.controls-selection [data-selected]:after {
  font-size: 1rem;
  font-weight: 700;
  content: attr(data-selected);
}
[data-selected="0"] .controls-selection {
  pointer-events: none;
  opacity: 0;
}

.pane-inner .search {
  position: sticky;
  z-index: 4;
  top: 0;
}
.search .input {
  position: relative;
}
.search .input [type="search"] + strong {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  left: 0;
  top: 0;
  pointer-events: none;
  border: 1px solid transparent;
  padding: .75rem 1rem;
  font-weight: normal;
  transition: var(--transition);
  opacity: 0;
}
.search .input [type="search"] {
  padding-right: 5rem;
}
.search .input input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.search .input input[type="search"]::-moz-search-clear-button {
  display: none;
}
.search .button {
  margin-left: -.5rem;
}
.search [type="reset"] {
  margin: .5rem;
  margin-left: -2.5rem;
}

.search-source [type="reset"] {
  margin-right: 1rem;
  margin-left: -3rem;
}

.search .input input:placeholder-shown + strong {
  opacity: .5;
}

.search .group:has(input:placeholder-shown) .button {
  display: none;
}

choppr-chunk {
  scroll-margin-top: 10em;
}

.search-mode choppr-chunk {
  --text: rgba(44, 51, 51, 0.25);
  color: var(--text);
}
.search-mode choppr-chunk.found,
.search-mode choppr-chunk:has(.found) {
  --text: #2c3333;
  color: var(--text);
}
.search-mode .search .input:has([type="search"]):after {
  content: var(--search);
  position: absolute;
  font-size: .875rem;
  right: 3.5rem;
  top: .875rem;
  opacity: .5;
}
.search-mode .search-source .input:after {
  right: 3.5rem;
}
.search-mode .source-tree li {
  display: none;
}
.search-mode .source-tree li:before {
  opacity: .5;
}
.search-mode .source-tree li.found {
  display: block;
}
.search-mode .source-tree li.found:before {
  opacity: 1;
}
.search-mode .source-tree li:has(li.found) {
  display: block;
}
.search-mode .separators li:has(.separator:not(.found)) {
  opacity: .25;
  order: 2;
}

.highlight {
  position: absolute;
  z-index: 3;
  background-color: #6ccc51;
  height: .25rem;
  opacity: .95;
  pointer-events: none;
  display: none;
  margin-top: 1rem;
}

.search-mode .highlight {
  display: block;
}

.search {
  background-color: var(--bg-1);
  transition: var(--transition);
  box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.2);
  padding: .25rem;
  border-radius: var(--border-radius);
  margin: -.25rem -.25rem 1rem -.25rem;
  /*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
  how to remove the virtical space around the range input in IE*/
}
.search:hover {
  background-color: var(--bg-4);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
.search .input {
  margin: 0;
}
.search .input:has(input[type=range]) {
  font-size: .875rem;
  display: none;
  white-space: nowrap;
  align-items: center;
}
.search .input:has(input[type=range]) strong {
  margin-bottom: -.75rem;
  margin-right: .5rem;
}
.search .input:has(input[type=range]) strong:after {
  content: ": " var(--depth);
}
.pane-tree:has(.source-tree > ul > li) .search .input:has(input[type=range]) {
  display: flex;
}
.search input[type=range] {
  margin: 1rem 0 0 0;
  width: 100%;
  background-color: transparent;
  -webkit-appearance: none;
}
.search input[type=range]:focus {
  outline: none;
}
.search input[type=range]::-webkit-slider-runnable-track {
  background: #768889;
  border: 0;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
.search input[type=range]::-webkit-slider-thumb {
  margin-top: -7px;
  width: 16px;
  height: 16px;
  background: #8abc7a;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  -webkit-appearance: none;
}
.search input[type=range]:focus::-webkit-slider-runnable-track {
  background: #768889;
}
.search input[type=range]::-moz-range-track {
  background: #768889;
  border: 0;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
.search input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #8abc7a;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
}
.search input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 7px 0;
  color: transparent;
  width: 100%;
  height: 2px;
  cursor: pointer;
}
.search input[type=range]::-ms-fill-lower {
  background: #768889;
  border: 0;
}
.search input[type=range]::-ms-fill-upper {
  background: #768889;
  border: 0;
}
.search input[type=range]::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #768889;
  border: 0;
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
.search input[type=range]:focus::-ms-fill-lower {
  background: #768889;
}
.search input[type=range]:focus::-ms-fill-upper {
  background: #768889;
}
@supports (-ms-ime-align: auto) {
  .search {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  }
  .search input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

.search-source-type.input {
  position: absolute;
}
.search-source-type {
  position: absolute;
  z-index: 3;
  border: none;
  padding: 0;
  box-shadow: none;
  width: 3rem;
  height: 3rem;
  left: .5rem;
}
.search-source-type select {
  opacity: 0;
}
.search-source-type strong {
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  pointer-events: none;
}
.search-source-type strong:before {
  content: '';
  font-size: 1rem;
}
.search-source-type + .group .input input, .search-source-type + .group .input strong {
  padding-left: 2.75rem;
}

.search-source-result label:has(input:placeholder-shown) {
  display: none;
}

.search-source-result strong {
  font-weight: normal;
}
.search-source-result .button {
  margin: 0 0 0 .5rem;
  position: relative;
  top: .25rem;
}
.search-source-result span {
  position: relative;
  display: inline-block;
  border-radius: .25em;
  margin-right: .125em;
  padding: 0 .25rem;
  margin-top: calc(var(--padding) / 4);
  margin-bottom: calc(var(--padding) / 4);
  box-shadow: 0 -2px 0 0 black inset;
}
.search-source-result .c0 {
  background-color: black;
}
.search-source-result .c1 {
  box-shadow: 0 -2px 0 0 purple inset;
}
.search-source-result .c2 {
  box-shadow: 0 -2px 0 0 green inset;
}
.search-source-result .c3 {
  box-shadow: 0 -2px 0 0 red inset;
}
.search-source-result .c4 {
  box-shadow: 0 -2px 0 0 blue inset;
}
.search-source-result .c5 {
  box-shadow: 0 -2px 0 0 orange inset;
}
.search-source-result:has(.c1:hover) .c1 {
  box-shadow: 0 -20px 0 0 purple inset;
  color: var(--bg-1);
}
.search-source-result:has(.c2:hover) .c2 {
  box-shadow: 0 -20px 0 0 green inset;
  color: var(--bg-1);
}
.search-source-result:has(.c3:hover) .c3 {
  box-shadow: 0 -20px 0 0 red inset;
  color: var(--bg-1);
}
.search-source-result:has(.c4:hover) .c4 {
  box-shadow: 0 -20px 0 0 blue inset;
  color: var(--bg-1);
}
.search-source-result:has(.c5:hover) .c5 {
  box-shadow: 0 -20px 0 0 orange inset;
  color: var(--bg-1);
}