/*    Colors by https://dribbble.com/lina_leusenko, from    https://dribbble.com/shots/3888881-Girl-With-Her-Bike    https://dribbble.com/shots/3550627-Soup-Ladies*/body {  display: flex;  min-height: 100vh;  margin: 0;  padding: 0;  justify-content: center;  align-items: center;  box-sizing: border-box;  font-family: Georgia, sans-serif;  background: #00c0dd;}body h2 {  margin: .5em 0;  font-size: 1.5em;  text-align: center;}body h3 {  margin: .3em 0;  font-size: 1.1em;  font-weight: normal;  text-decoration: underline;  white-space: nowrap;}body ul {  margin: 0;}#app {  position: relative;  display: flex;  flex-flow: column nowrap;  align-items: center;  width: 100%;  padding: 1em .5em;  padding-bottom: 9em;  box-sizing: border-box;  background: #e4f9fc;}@media (min-width: 500px) {  #app {    width: auto;    max-width: calc(100vw - 3em);    padding-left: 1em;    padding-right: 1em;    margin: 1em 0;    border: 1em solid #ff8f97;    box-shadow: inset  .5em   .5em    0 0      #a2020a, inset -.5em  -.5em    0 0      #ffc9cd, .25em  .25em   0 .25em  #a2020a, 0      0      0 .5em   #ffc9cd;  }}#grad-container {  position: relative;  margin: 1em 0;  box-shadow: 0 0  0 1px  gainsboro;  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/20px white;}#grad-container #gradient, #grad-container #controls {  display: block;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}#grad-container .line {  height: 1.6em;  pointer-events: none;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='7' %3E %3Cpath d='M0,3.5 H1000 l-6,-3 v6 l6,-3' fill='none' stroke='black' stroke-width='.5' stroke-dasharray='1' /%3E %3C/svg%3E");  background-size: cover;  background-position: 0;  opacity: .5;}#grad-container .line.arrow {  background-position: 100%;  opacity: 1;}#grad-container [data-draggable] {  width: 2em;  height: 2em;  border: 2px dashed black;  border-radius: 100%;  background: transparent;  -webkit-transform: translate(-50%, -50%);          transform: translate(-50%, -50%);  cursor: move;  z-index: 2;}#grad-container [data-draggable].size {  border-radius: 0;  width: 1.5em;  height: 1.5em;  cursor: nwse-resize;  z-index: 1;}#settings {  position: relative;  display: flex;}#settings input {  vertical-align: middle;}#settings .tool-group label {  display: table;  white-space: nowrap;  cursor: pointer;}#settings .tool-group + .tool-group {  margin-left: 2em;}#color-stops #stops-slider {  position: relative;  height: 20px;  margin-top: .5em;  margin-bottom: 2em;  box-shadow: 0 0  0 1px  gainsboro;  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/20px white;  cursor: copy;}#color-stops #stops-preview {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;}#color-stops #curr-stop {  display: flex;  align-items: center;  justify-content: center;}#color-stops #curr-stop #color-mode {  display: flex;  flex-flow: column nowrap;  margin: 0 .3em;}#color-stops #curr-stop #color-mode label {  text-align: center;}#color-stops #curr-stop #color-mode label + label {  margin-top: 1em;}#color-stops #curr-stop #color-mode span {  display: block;  width: 2em;  height: 2em;  color: transparent;  box-shadow: 0 0  0 1px  gainsboro;}#color-stops #curr-stop #color-mode #color-smooth span {  background-image: linear-gradient(90deg, white 10%, #999, black 90%);}#color-stops #curr-stop #color-mode #color-break span {  background-image: linear-gradient(90deg, white 50%, black 0);}#color-stops #color-picker1 .picker_wrapper, #color-stops #color-picker2 .picker_wrapper {  margin: auto;  background: white;}#color-stops #color-picker1 .picker_done, #color-stops #color-picker2 .picker_done {  display: none;}@media (max-width: 700px) {  #color-stops #color-picker1 .picker_wrapper, #color-stops #color-picker2 .picker_wrapper {    font-size: 1.5vw;  }}.stop-marker {  top: 50%;  width: 2em;  height: 2em;  background: white;  cursor: ew-resize;  border-radius: 0 100% 100% 100%;  border: 1px solid #444;  box-sizing: border-box;  -webkit-transform-origin: left top;          transform-origin: left top;  -webkit-transform: rotate(45deg);          transform: rotate(45deg);}.stop-marker.active::before {  content: '';  display: block;  position: absolute;  width: 100%;  height: 100%;  margin: -0.3em;  border: 0.3em solid rgba(30, 144, 255, 0.5);  border-radius: 100%;  box-sizing: content-box;}.stop-marker .marker-color-bg {  position: absolute;  display: block;  width: 1.5em;  height: 1.5em;  top: 0;  left: 0;  bottom: 0;  right: 0;  margin: auto;  -webkit-transform: rotate(-45deg);          transform: rotate(-45deg);  border-radius: 100%;  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top/20px white;  background-size: 1em;}.stop-marker .marker-color-bg .marker-color {  content: '';  display: block;  position: absolute;  width: 100%;  height: 100%;  box-sizing: border-box;  border: 1px solid #444;  border-radius: 100%;}#out-css {  position: absolute;  bottom: 1em;  width: calc(100% - 2em);  height: 6.5em;  margin: 0;  padding: .3em .5em;  font-size: 1.2em;  white-space: pre;  box-shadow: 0 0  0 1px  gainsboro;  background: #fefefe;  box-sizing: border-box;}