@charset "UTF-8";
:root {
  --twui-gap: 0.0625rem;
  --twui-size: 1.5rem;
  --twui-label-width: 7rem;
  --twui-label-pad-x: 0.25rem;
  --twui-label-pad-y: 0.0rem;
  --twui-input-height: var(--twui-size);
  --twui-input-pad-x: 0.375rem;
  --twui-input-pad-y: 0.0rem;
  --twui-button-height: var(--twui-size);
  --twui-button-pad-x: 0.5rem;
  --twui-button-pad-y: 0.25rem;
  --twui-color-primary: #344955;
  --twui-color-primary-dark: #0b222c;
  --twui-color-primary-light: #5f7481;
  --twui-color-secondary: #4A6572;
  --twui-color-secondary-dark: #203b47;
  --twui-color-secondary-light: #7793a1;
  --twui-color-on-primary: #E0E5E7;
  --twui-color-on-secondary: #E0E5E7;
  --twui-color-accent: #f9AA33;
}

.twui-dark {
  --twui-color-primary: #263238;
  --twui-color-primary-dark: #000a12;
  --twui-color-primary-light: #4f5b62;
  --twui-color-secondary: #37474f;
  --twui-color-secondary-dark: #102027;
  --twui-color-secondary-light: #62727b;
  --twui-color-on-primary: #fff;
  --twui-color-on-secondary: #fff;
  --twui-color-accent: #f9AA33;
}

.twui-light {
  --twui-color-primary: #fafafa;
  --twui-color-primary-dark: #c7c7c7;
  --twui-color-primary-light: #ffffff;
  --twui-color-secondary: #cfd8dc;
  --twui-color-secondary-dark: #9ea7aa;
  --twui-color-secondary-light: #ffffff;
  --twui-color-on-primary: #000000;
  --twui-color-on-secondary: #000000;
  --twui-color-accent: #2196f3;
}

.twui-root {
  text-shadow: 1px 1px 1px #000000;
  background-color: var(--twui-color-primary);
  color: var(--twui-color-on-primary);
  font-family: var(--twui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
  font-size: var(--twui-font-size, 12px);
  padding: 0;
  margin: 0;
  width: var(--twui-width, 20rem);
  flex: auto 0 0;
  overflow: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.twui-root::-webkit-scrollbar {
  width: 0.5rem;
}
.twui-root::-webkit-scrollbar-track {
  background-color: var(--twui-color-primary);
}
.twui-root::-webkit-scrollbar-thumb {
  border-width: 1px;
  border-style: solid;
  transition: background-color 0.2s ease-in-out;
  background-color: var(--twui-color-primary);
  border-color: var(--twui-color-primary-dark);
}
.twui-root::-webkit-scrollbar-thumb:hover {
  background-color: var(--twui-color-secondary);
}
.twui-root label {
  user-select: none;
  font-weight: 500;
}
.twui-root select, .twui-root button, .twui-root a {
  cursor: pointer;
}
.twui-root input:not([type=checkbox]),
.twui-root button,
.twui-root select {
  background-color: var(--twui-color-secondary);
  color: var(--twui-color-on-secondary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  outline: none;
  border: none;
  box-sizing: border-box;
  height: calc(var(--twui-size) - 2 * var(--twui-gap));
  line-height: calc(var(--twui-size) - 2 * var(--twui-gap));
  padding: var(--twui-input-pad-y) var(--twui-input-pad-x);
  margin: var(--twui-gap);
}
.twui-root button {
  line-height: calc(var(--twui-size) - 2 * var(--twui-gap) - 2 * var(--twui-button-pad-y));
  padding: var(--twui-button-pad-y) var(--twui-button-pad-x);
  margin: var(--twui-gap);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.twui-root button:active {
  transform: translateY(1px);
}
.twui-root button, .twui-root select, .twui-root input:not([type=checkbox]), .twui-root .twui-progress {
  border-bottom: 1px solid;
  border-color: var(--twui-color-primary-dark);
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.twui-root button:hover, .twui-root button.checked, .twui-root select:hover, .twui-root select.checked, .twui-root input:not([type=checkbox]):hover, .twui-root input:not([type=checkbox]).checked, .twui-root .twui-progress:hover, .twui-root .twui-progress.checked {
  background-color: var(--twui-color-secondary-light);
  border-color: var(--twui-color-secondary-dark);
}
.twui-root button:focus, .twui-root button.checked, .twui-root select:focus, .twui-root select.checked, .twui-root input:not([type=checkbox]):focus, .twui-root input:not([type=checkbox]).checked, .twui-root .twui-progress:focus, .twui-root .twui-progress.checked {
  outline: none;
  border-color: var(--twui-color-accent);
}
.twui-root button:disabled,
.twui-root button .disabled, .twui-root select:disabled,
.twui-root select .disabled, .twui-root input:not([type=checkbox]):disabled,
.twui-root input:not([type=checkbox]) .disabled, .twui-root .twui-progress:disabled,
.twui-root .twui-progress .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.twui-root .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.twui-root select:focus, .twui-root input:not([type=checkbox]):focus {
  color: var(--twui-color-accent);
}
.twui-root input[type=number] {
  padding-right: 0;
}
.twui-root input[type=checkbox] {
  margin: 0;
  appearance: none;
  width: calc(var(--twui-size) - 2 * var(--twui-gap));
  height: calc(var(--twui-size) - 2 * var(--twui-gap));
  text-align: center;
  cursor: pointer;
}
.twui-root input[type=checkbox]::before {
  content: "✔";
  opacity: 0.125;
  font-weight: bold;
}
.twui-root input[type=checkbox]:checked::before {
  content: "✔";
  opacity: 1;
}

.twui-angle {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.twui-angle .left-container {
  flex: 1;
}
.twui-angle .right-container {
  flex: none;
  display: grid;
  grid-template-columns: max-content max-content;
}
.twui-angle .right-container .twui-checkbox {
  grid-column: span 2;
}
.twui-angle .right-container .twui-checkbox input {
  margin-left: 0;
}
.twui-angle label {
  text-align: right;
  line-height: var(--twui-input-height);
  padding: 0 var(--twui-label-pad-x);
}
.twui-angle input[type=number] {
  width: 3.5rem;
}
.twui-angle .pane {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.twui-angle .pane::before {
  position: absolute;
  content: "";
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  left: 1rem;
  top: 1rem;
  border: 1px solid;
  border-radius: 50%;
  border-color: var(--twui-color-primary-light);
  box-sizing: border-box;
  background-image: conic-gradient(var(--twui-color-primary-light) var(--angle-percent), transparent 0);
  transform: scaleX(-1) rotate(180deg);
}
.twui-angle .angle-knob {
  border: 0px solid transparent;
  border-radius: 100%;
  background-color: var(--twui-color-primary-light);
}
.twui-angle .angle-knob:hover {
  background-color: var(--twui-color-secondary-light);
}
.twui-angle .angle-pane.is-dragging .angle-knob {
  background-color: var(--twui-color-accent);
}

.twui-checkbox {
  min-height: calc(var(--twui-size) - 2 * var(--twui-gap));
  line-height: calc(var(--twui-size) - 2 * var(--twui-gap));
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.twui-checkbox:hover {
  background-color: var(--twui-color-secondary);
}
.twui-checkbox input {
  margin-right: 1ch;
  margin-left: 1ch;
}

.twui-color-picker {
  flex: auto 1 1;
  display: flex;
  flex-direction: row;
}
.twui-color-picker .color-picker-panel {
  flex: 1;
  position: relative;
  margin: var(--twui-gap);
}
.twui-color-picker .color-picker-inputs {
  flex: none;
  display: flex;
  flex-direction: column;
}
.twui-color-picker .color-picker-inputs .input-r {
  border-color: #f00;
}
.twui-color-picker .color-picker-inputs .input-g {
  border-color: #0f0;
}
.twui-color-picker .color-picker-inputs .input-b {
  border-color: #00f;
}
.twui-color-picker .color-picker-inputs .input-a {
  border-image: linear-gradient(to right, #fff, transparent);
}
.twui-color-picker .color-picker-inputs .input-hex {
  border-color: #000;
}
.twui-color-picker .color-picker-inputs input {
  display: block;
  width: 4rem;
  flex: none;
}
.twui-color-picker .color-picker-sv:focus,
.twui-color-picker .color-picker-h:focus,
.twui-color-picker .color-picker-a:focus {
  outline: none;
  border-color: var(--twui-color-accent);
}
.twui-color-picker .color-picker-sv {
  width: 100%;
  padding-top: 100%;
  position: relative;
  box-sizing: border-box;
  cursor: crosshair;
  z-index: 1;
  border-bottom: 1px solid;
  border-color: var(--twui-color-primary-dark);
}
.twui-color-picker .color-picker-sv-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.twui-color-picker .color-picker-sv-cursor {
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border: 1px solid white;
  border-radius: 5px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.75);
}
.twui-color-picker .color-picker-h,
.twui-color-picker .color-picker-a {
  position: relative;
  height: 1rem;
  box-sizing: border-box;
  cursor: ew-resize;
  margin-top: calc(var(--twui-gap) * 2);
  border-bottom: 1px solid;
  border-color: var(--twui-color-primary-dark);
}
.twui-color-picker .color-picker-h-cursor,
.twui-color-picker .color-picker-a-cursor {
  position: absolute;
  width: 4px;
  height: calc(1rem - 2px);
  margin-left: -3px;
  border: 1px solid white;
  border-radius: 2px;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.75);
}
.twui-color-picker .color-picker-a {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, grey 50%, white 50%), linear-gradient(to bottom, grey 50%, white 50%);
  background-blend-mode: normal, difference, normal;
  background-size: 1rem 1rem;
}
.twui-color-picker .color-picker-a-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.twui-color-picker .color-picker-sv,
.twui-color-picker .color-picker-h,
.twui-color-picker .color-picker-a {
  border-color: var(--twui-color-primary-dark);
}

.twui-color {
  flex: auto 1 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.twui-color button {
  text-shadow: 0 0 10px black;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

.twui-container {
  display: flex;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

.twui-container-horizontal {
  flex-direction: row;
}
.twui-container-horizontal > * {
  flex: 1;
}

.twui-group {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  border-color: var(--twui-color-primary-dark);
}

.twui-group-title {
  margin: 0;
  width: auto;
  height: var(--twui-size);
  line-height: var(--twui-size);
  background-color: var(--twui-color-primary-dark);
  padding-left: calc(2 * var(--twui-gap));
  font-weight: bold;
}

.twui-group-collapsible .twui-group-title {
  padding-left: 0;
  cursor: pointer;
}

.twui-group-collapsible > .twui-group-title::before {
  content: "🗁";
  display: inline-block;
  width: var(--twui-size);
  height: var(--twui-size);
  text-align: center;
  transition: transform 0.1s ease-in-out;
}

.twui-group-inset,
.twui-group-collapsible > .twui-group-collapsible {
  border-left: 0.25rem solid;
  border-left-color: var(--twui-color-primary-light);
}

.twui-group-collapsed > .twui-group-title::before {
  content: "🗀";
}

.twui-group-control {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  min-height: var(--twui-size);
  box-sizing: border-box;
}
.twui-group-control > label:first-child {
  flex: none;
  box-sizing: border-box;
  width: calc(var(--twui-label-width) - 2 * var(--twui-label-pad-x));
  min-width: calc(var(--twui-label-width) - 2 * var(--twui-label-pad-x));
  min-height: calc(var(--twui-size) - 2 * var(--twui-gap));
  line-height: calc(var(--twui-size) - 2 * var(--twui-gap));
  padding: var(--twui-label-pad-y) var(--twui-label-pad-x);
  margin: var(--twui-gap);
  overflow: hidden;
}
.twui-group-control > section {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}

.twui-image {
  max-width: 100%;
  display: block;
}
.twui-image img {
  width: 100%;
}

.twui-image-aspect {
  position: relative;
}
.twui-image-aspect::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
  padding-top: var(--twui-aspect);
}
.twui-image-aspect img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-fit: var(--twui-fit);
}

.twui-number,
.twui-slider {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.twui-number input {
  flex: 1;
}

.twui-slider .twui-progress {
  flex: 1;
  display: flex;
  margin: var(--twui-gap);
  cursor: ew-resize;
  transition: background-color 0.2s ease-in-out;
  background-color: var(--twui-color-secondary);
}
.twui-slider .twui-progress:hover {
  background-color: var(--twui-color-secondary-dark);
}
.twui-slider .twui-progress.disabled {
  cursor: not-allowed;
}
.twui-slider .twui-progress-bar {
  background-color: var(--twui-color-secondary-light);
}
.twui-slider input[type=number] {
  flex: none;
  width: 3.5rem;
}

.twui-point {
  background-color: var(--twui-color-secondary);
  border-color: var(--twui-color-primary-dark);
  background-image: linear-gradient(var(--twui-color-primary-light) 1px, transparent 1px), linear-gradient(90deg, var(--twui-color-primary-light) 1px, transparent 1px);
  background-size: 10% 10%, 10% 10%;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  position: relative;
  width: 100%;
  padding-top: 100%;
  box-sizing: border-box;
  cursor: crosshair;
  z-index: 1;
  overflow: visible;
}
.twui-point .point-x-axis,
.twui-point .point-y-axis {
  background-color: var(--twui-color-primary-dark);
}
.twui-point:focus {
  border-color: var(--twui-color-accent);
  outline: none;
}
.twui-point:focus .point-x-axis,
.twui-point:focus .point-y-axis {
  background-color: var(--twui-color-accent);
}

.twui-spherical {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.twui-spherical .left-container {
  flex: 1;
}
.twui-spherical .right-container {
  flex: none;
  display: grid;
  grid-template-columns: max-content max-content;
}
.twui-spherical .right-container .twui-checkbox {
  grid-column: span 2;
}
.twui-spherical .right-container .twui-checkbox input {
  margin-left: 0;
}
.twui-spherical label {
  text-align: right;
  line-height: var(--twui-input-height);
  padding: 0 var(--twui-label-pad-x);
}
.twui-spherical input[type=number] {
  width: 3.5rem;
}
.twui-spherical .pane {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.twui-spherical .pane::before {
  position: absolute;
  content: "";
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  left: 1rem;
  top: 1rem;
  border: 1px solid;
  border-radius: 50%;
  border-color: var(--twui-color-primary-light);
  box-sizing: border-box;
}
.twui-spherical .pane::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: calc(50% - 1rem);
  height: 1px;
  background-color: var(--twui-color-primary-light);
  transform-origin: left center;
  transform: rotate(var(--spherical-phi));
}
.twui-spherical .phi-knob {
  border: 0px solid transparent;
  border-radius: 100%;
  background-color: var(--twui-color-primary-light);
}
.twui-spherical .phi-knob:hover {
  background-color: var(--twui-color-secondary-light);
}
.twui-spherical .phi-pane.is-dragging .phi-knob {
  background-color: var(--twui-color-accent);
}
.twui-spherical .theta-knob {
  border: 1px solid transparent;
  border-radius: 100%;
  border-color: var(--twui-color-primary-light);
}
.twui-spherical .theta-knob:hover {
  border-color: var(--twui-color-secondary-light);
}
.twui-spherical .theta-pane.is-dragging .theta-knob {
  border-color: var(--twui-color-accent);
}

.twui-tabs {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  border-color: var(--twui-color-primary-dark);
}

.twui-tabs-list {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.twui-tabs-list > button {
  flex: auto 1 11;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  height: var(--twui-size);
  line-height: calc(var(--twui-size) - 2 * var(--twui-button-pad-y));
  background-color: var(--twui-color-primary-dark);
  border-color: var(--twui-color-primary);
  color: var(--twui-color-on-primary);
}
.twui-tabs-list > button:hover {
  background-color: var(--twui-color-primary);
  border-color: var(--twui-color-primary-dark);
}
.twui-tabs-list > button.is-active {
  background-color: var(--twui-color-primary);
  border-color: var(--twui-color-accent);
}

.twui-position {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
.twui-position > * {
  flex: auto 1 1;
}

/*# sourceMappingURL=tweak-ui.css.map */