*,
.ge_picker_modal,
.ge_picker_modal * {
  -webkit-box-sizing: border-box;
}
#app,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.cm-tab,
a {
  text-decoration: inherit;
}
.CodeMirror-foldgutter-folded,
.CodeMirror-foldgutter-open,
.CodeMirror-foldmarker,
.CodeMirror-hint,
.editor__nav-mode-label,
.editor__nav-mode-wrapper,
.editor__tab,
.menu__link,
.question__title,
button {
  cursor: pointer;
}
.button-inline,
body,
h1,
h2,
h3,
h4 {
  font-weight: 100;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes move-background {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes move-background {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.button-inline:after,
.menu__link:before {
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
::selection {
  background: #00ffad;
  color: #fff;
}
::-moz-selection {
  background: #00ffad;
  color: #fff;
}
html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}
@media screen and (max-width: 812px) {
  html {
    font-size: 16px;
  }
}
@media screen and (min-width: 812px) {
  html {
    font-size: calc(14px + (22 - 14) * ((100vw - 812px) / (2800 - 812)));
  }
}
@media screen and (min-width: 2800px) {
  html {
    font-size: 22px;
  }
}
body {
  margin: 0;
  font-family: t26-carbon, monospace;
  background-color: #051015;
  color: #efefef;
}
* {
  box-sizing: border-box;
}
#app {
  position: relative;
}
#app.is-scrollable {
  overflow-y: auto;
}
h1,
h2,
h3,
h4 {
  font-style: normal;
}
a {
  color: inherit;
}
ul {
  list-style-type: none;
  padding: 0;
}
.elem--is-shown-on-mobile,
html.is-mobile .elem--is-hidden-on-mobile {
  display: none;
}
html.is-mobile .elem--is-shown-on-mobile {
  display: block;
}
.button-default,
.button-inline {
  display: inline-block;
  position: relative;
}
button {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  outline: 0;
}
.button-default {
  border: 1px solid #c3c3c3;
  padding: 0.2em 0.6em;
  font-size: 14px;
}
@media (hover: hover) {
  .button-default:hover {
    background-color: #ddd;
    color: #303030;
  }
}
.button-default:active {
  background-color: #fff;
  color: #051015;
}
@media (max-width: 1440px) {
  .button-default {
    font-size: 0.8rem;
  }
}
@media (max-width: 1000px) {
  .button-default {
    font-size: 0.6rem;
  }
}
.button-icon {
  border: none;
  padding: 0.2em 0.6em;
  font-size: 14px;
}
.button-inline {
  border: none;
  font-size: inherit;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.button-inline:after,
.button-inline:before {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  top: 105%;
  left: 0;
}
.button-inline:before {
  background-color: #51585b;
}
.button-inline:after {
  background-color: #00ffad;
  transform: scaleX(0);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -o-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
@media (hover: hover) {
  .button-inline:hover:after {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
  }
}
.select-default,
input[type="text"] {
  display: block;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #c3c3c3;
  border-radius: none;
  background-color: transparent;
  color: #fff;
  font-family: inherit;
  outline: 0;
}
.select-default option,
input[type="text"] option {
  font-family: inherit;
}
.select-default:focus,
input[type="text"]:focus {
  outline: #fff solid 1px;
}
@media (max-width: 1440px) {
  .select-default,
  input[type="text"] {
    font-size: 0.8rem;
  }
}
input[type="text"] {
  padding: 0.2em 0.6em;
}
.select-default {
  padding: 0.2em 2em 0.2em 0.6em;
}
.select-default option {
  color: #fff;
  background-color: #051015;
}
.select-wrapper {
  position: relative;
  display: inline-block;
}
.select-wrapper:after {
  position: absolute;
  right: 0.5em;
  top: 0.4em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 4.5px 0;
  border-color: #c3c3c3 transparent transparent;
  content: "";
  pointer-events: none;
}
@media (max-width: 1280px) {
  .select-wrapper:after {
    right: 0.3em;
    top: 0.35em;
    border-width: 5px 3px 0;
  }
}
@media (max-width: 1000px) {
  .select-default,
  input[type="text"] {
    font-size: 0.6rem;
  }
  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 130px;
    background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(rgba(5, 16, 21, 0)),
      color-stop(80%, rgba(5, 16, 21, 0.7))
    );
    background: -o-linear-gradient(
      bottom,
      rgba(5, 16, 21, 0) 0,
      rgba(5, 16, 21, 0.7) 80%
    );
    background: linear-gradient(
      0deg,
      rgba(5, 16, 21, 0) 0,
      rgba(5, 16, 21, 0.7) 80%
    );
  }
}
.header__menu {
  position: absolute;
  padding: 40px;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100vw;
}
@media (max-width: 1000px) {
  .header__menu {
    padding: 20px;
  }
}
.header__menu .header__menu_item--lab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-self: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  background-color: #182931;
  padding: 10px 12px;
  border-radius: 3px;
  width: 168px;
  height: 36px;
}
.header__menu .header__menu_item--lab svg {
  width: 100%;
  height: 100%;
}
.header__menu .header__menu_item--lab svg path {
  fill: #fff;
}
.menu__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
}
.view-infos,
html.is-mobile .menu__item--is-editor,
html.is-mobile:not(.is-vr-browser) .menu__item:first-child,
html.is-mobile:not(.is-vr-browser) .menu__item:nth-child(2),
html.is-vr-browser .menu__item--is-gallery {
  display: none;
}
.menu__item + .menu__item {
  margin-left: 2.5em;
}
@media (max-width: 1000px) {
  .header__menu .header__menu_item--lab {
    width: 140px;
    height: 30px;
    padding: 8px 12px;
  }
  .menu__item + .menu__item {
    margin-left: 1.5em;
  }
}
.menu__item--is-editor {
  position: relative;
}
.menu__link {
  position: relative;
  overflow: visible;
}
.menu__link:after,
.menu__link:before {
  content: "";
  position: absolute;
  top: 105%;
  left: 0;
  height: 0.05em;
  width: 100%;
}
.menu__link:before {
  background-color: #c3c3c3;
  transform: scaleX(0);
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -o-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
.menu__link:after {
  opacity: 0;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #fff;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
@media (hover: hover) {
  .menu__link:not(.is-active):hover:before {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
  }
}
.menu__link.is-active:after {
  opacity: 1;
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.menu__audio {
  width: 20px;
  height: 12px;
  position: relative;
  padding: 0;
  border: none;
  background: 0 0;
}
.menu__item--is-separator span {
  font-size: 0.5em;
}
#preloader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #051015;
  z-index: 10;
}
#preloader-context {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}
#preloader-canvas {
  width: 200px;
  height: 100px;
}
#preloader-title {
  font-size: 2em;
  margin: 0;
}
#preloader-desc {
  margin: 0.65em 0 1em;
  font-size: 1em;
  line-height: 1.2em;
}
#preloader-text {
  color: #ccc;
  font-size: 0.8em;
}
#shader-context {
  position: absolute;
  width: 40%;
  max-width: 480px;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
  text-align: left;
  visibility: hidden;
}
#shader-context.is-right {
  left: 55%;
}
#shader-context.is-left {
  right: 55%;
}
#shader-title {
  font-size: 2.8em;
  margin: 0 0 0.2em;
}
@media (max-width: 1000px) {
  #shader-context {
    width: 50%;
  }
  #shader-context.is-right {
    text-align: right;
    left: 45%;
  }
  #shader-context.is-left {
    right: 45%;
  }
  #shader-title {
    font-size: 2.5em;
  }
}
#shader-desc {
  font-size: 1em;
  line-height: 1.3em;
  margin: 0;
}
#shader-desc span,
#shader-title span {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.view-infos {
  position: absolute;
  width: 25%;
  max-width: 405px;
  left: 5em;
  bottom: 5em;
  text-align: left;
  pointer-events: none;
}
#preloader-vr,
#prompt,
.editor__tab,
.xr-landing__desc {
  text-align: center;
}
.view-infos.is-visible {
  display: block;
  pointer-events: all;
  z-index: 10;
}
.is-preview .view-infos__link,
.is-preview .view-infos__subtitle,
html.is-vr-browser .view-infos {
  display: none;
}
@media (max-width: 1000px) {
  #shader-desc {
    font-size: 0.9em;
    line-height: 1.1em;
  }
  .view-infos {
    bottom: 2em;
    left: 1em;
    width: 80%;
  }
}
#prompt,
#prompt--bg {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
}
.view-infos__title {
  margin: 0;
  font-size: 2em;
  font-weight: 400;
}
@media (max-width: 1000px) {
  .view-infos__title {
    font-size: 1.5em;
  }
}
.view-infos__subtitle {
  font-size: 1.25em;
  opacity: 0;
  margin-top: 0.2em;
}
.view-infos__description {
  font-size: 1em;
  line-height: 1.3em;
  margin: 1.8em 0;
}
.is-preview .view-infos__description {
  margin: 0.7em 0 1.4em;
}
@media (max-width: 1000px) {
  .view-infos__subtitle {
    font-size: 1em;
  }
  .view-infos__description {
    font-size: 0.9em;
    line-height: 1.1em;
    margin: 1.4em 0;
  }
}
.view-infos__description .button-inline {
  color: #00ffad;
}
.view-infos__link {
  opacity: 0;
}
.view-infos__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.view-infos__fork {
  margin-left: 1em;
}
.view-infos__fork .select-wrapper {
  opacity: 0;
}
.is-preview .view-infos__fork {
  display: none;
}
@media (max-width: 1000px) {
  .view-infos__fork {
    display: none;
  }
}
.view-infos__fork-button {
  opacity: 0;
}
.view-infos__back {
  opacity: 0;
  display: none;
}
.is-preview .view-infos__back {
  display: block;
}
#prompt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 1000;
  font-size: 0.9em;
}
#prompt.is-visible {
  visibility: visible;
}
#prompt a {
  text-decoration: underline;
}
#prompt--bg {
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity 0.13s linear;
  -o-transition: opacity 0.13s linear;
  transition: opacity 0.13s linear;
}
#prompt.is-visible #prompt--bg {
  opacity: 0.8;
}
#prompt--box {
  position: relative;
  max-width: 720px;
  margin: 0 2em;
  border: 1px solid #51585b;
  background-color: #000;
  padding: 1.8em;
}
#prompt.is-error #prompt--box {
  border: 1px solid red;
}
#prompt--input {
  display: none;
  width: 80ex;
}
#prompt.is-input #prompt--input {
  display: block;
}
#prompt--input,
#prompt--msg {
  margin-bottom: 1em;
}
#prompt--msg {
  line-height: 1.3;
}
.prompt__paragraph {
  text-align: left;
  line-height: 1.5;
}
.prompt__paragraph ul {
  margin: 0 0 0 2em;
  list-style-type: decimal;
}
.prompt__paragraph span {
  background-color: #303030;
  padding: 0.1em 0.3em;
}
.prompt__paragraph td {
  vertical-align: top;
  padding: 0 1em;
  margin: 0;
}
.prompt__paragraph p {
  line-height: 1em;
}
.prompt__title {
  font-weight: 400;
  font-size: 1.2em;
  margin-bottom: 0.5em;
  text-decoration: underline;
}
.about {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #051015;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1) 1s;
  -o-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1) 1s;
  transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1) 1s;
  font-size: 0.9em;
}
.about button {
  color: #00ffad;
}
.about.is-visible {
  opacity: 1;
  -webkit-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  pointer-events: all;
}
@media (max-width: 1000px) {
  .about {
    padding: 5em 1.75em;
    overflow: auto;
  }
  .about::-webkit-scrollbar {
    width: 0.5em;
  }
  .about__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
.about a {
  color: #00ffad;
}
.about__inner {
  position: relative;
}
#preloader-vr,
.about__category,
.is-vr-browser .xr-landing {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
}
@media (min-width: 1000px) {
  .about__wrapper {
    position: relative;
    height: 100%;
    overflow-y: auto;
  }
  .about__wrapper::-webkit-scrollbar {
    width: 0.6em;
  }
  .about__inner {
    padding: 7em 5em 0;
    max-width: 1600px;
    margin: 0 auto;
  }
  .about__intro {
    position: absolute;
    top: 7em;
    left: 60%;
    width: calc(40% - 5em);
    z-index: 1;
  }
}
@media (max-width: 1000px) {
  .about__intro {
    width: 100%;
    padding-left: 0;
  }
}
@media (min-width: 1000px) {
  .about__infos {
    padding-bottom: 5em;
    width: 50%;
  }
}
@media (max-width: 1000px) {
  .about__infos {
    width: 100%;
    margin-top: 6em;
  }
}
.about__title,
.category__title {
  font-size: 2em;
  font-weight: 400;
  margin: 0 0 1.25rem;
}
.question__answer {
  padding-left: 1.15em;
  color: #c3c3c3;
}
.category__text,
.question__answer {
  max-width: 480px;
}
.about__description {
  max-width: 580px;
}
.about__category {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}
.about__category + .about__category {
  margin-top: 2em;
}
.about-credit-custom-bullet {
  display: block;
  position: relative;
  margin-left: 2ex;
  margin-bottom: 0.5ex;
}
.about-credit-custom-bullet:before {
  position: absolute;
  top: 0;
  left: -2ex;
  content: "- ";
}
.button__webxr--middle:after,
.cm-tab-wrap-hack:after,
.gallery__inner.is-searching:after,
.question__answer:after,
.question__title:before,
.shader__name:before,
.shader__preview:before,
.shader__username:before {
  content: "";
}
.about__category-separator {
  opacity: 0;
  margin-bottom: 4em;
  width: 100%;
  height: 1px;
  background-color: #51585b;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  max-width: 480px;
}
.category__questions {
  margin: 0;
}
.category__question {
  -webkit-transition: padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition: padding-top 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.category__question.is-open .question__title:before {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.category__question.is-open .question__answer {
  pointer-events: auto;
  opacity: 1;
  max-height: 400px;
}
.question__answer,
.xr-landing {
  pointer-events: none;
  opacity: 0;
}
.question__title {
  opacity: 0;
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.question__title:before {
  position: absolute;
  left: 0;
  top: 5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 8px;
  border-color: transparent transparent transparent #c3c3c3;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1),
    -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1);
}
@media (hover: hover) {
  .question__title:hover {
    color: #fff;
  }
  .question__title:hover:before {
    border-color: transparent transparent transparent #fff;
  }
}
.question__answer {
  margin: 0.5em 0;
  max-height: 0;
  -webkit-transition: opacity 0.75s cubic-bezier(0.55, 0, 0.1, 1),
    max-height 0.75s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: opacity 0.75s cubic-bezier(0.55, 0, 0.1, 1),
    max-height 0.75s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.75s cubic-bezier(0.55, 0, 0.1, 1),
    max-height 0.75s cubic-bezier(0.55, 0, 0.1, 1);
}
.question__answer:after {
  display: block;
  height: 2ex;
}
.category__text {
  margin: 0;
}
.about-about-separator {
  width: 20px;
  margin: 2em 0 1em;
}
.about-company-title {
  font-weight: 400;
  margin-bottom: 0.5em;
}
.about-social {
  margin-right: 1ex;
}
.category-log b {
  display: inline-block;
  padding-bottom: 0.4em;
}
#preloader-vr,
.xr-landing {
  display: none;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
#preloader-vr {
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 10;
  background: #051015;
}
.xr-landing {
  background-color: #051015;
  z-index: 1;
  -webkit-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  -o-transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  transition: opacity 0.4s cubic-bezier(0.55, 0, 0.1, 1);
  text-shadow: 0 0 5px #000;
}
.is-vr-browser .xr-landing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 1;
  pointer-events: all;
}
.is-page-about .xr-landing {
  opacity: 0;
  pointer-events: none;
}
.xr-landing__title {
  margin: 0;
  font-size: 2em;
}
.xr-landing__desc {
  margin: 0.85em 0 1.2em;
  font-size: 1.2rem;
  line-height: 1.2rem;
}
.xr-landing__craftedby {
  position: absolute;
  bottom: 3em;
  font-size: 0.8em;
  color: #c3c3c3;
  text-decoration: underline;
  opacity: 0;
}
.xr-landing__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c3c3c3;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: scale3d(1.1, 1.1, 1);
  transform: scale3d(1.1, 1.1, 1);
}
.button-wrapper__webxr--corner {
  position: absolute;
  left: 5em;
  bottom: 3em;
}
@media (max-width: 1000px) {
  .button-wrapper__webxr--corner {
    bottom: 2em;
    left: 8em;
  }
  body.is-page-home .button-wrapper__webxr--corner {
    left: 1em;
  }
}
html.is-mobile .button-wrapper__webxr--corner {
  display: none;
}
.button__webxr {
  position: absolute;
}
.button__webxr--corner {
  left: 0;
  bottom: 0;
  display: none;
  pointer-events: none;
  white-space: nowrap;
}
.is-page-home .button__webxr--corner.is-visible,
.is-page-view .button__webxr--corner.is-visible {
  display: block;
  pointer-events: all;
}
.button__webxr--middle {
  position: relative;
  font-size: 1.4rem;
  padding: 0.6rem 1.2rem;
  opacity: 0;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
}
.button__webxr--middle:after {
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border: 1px solid #c3c3c3;
}
.gallery {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #051015;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.gallery.is-visible {
  pointer-events: all;
}
.gallery__wrapper {
  position: relative;
  height: 100%;
  overflow-y: scroll;
  padding: 50px 20px 100px;
}
.gallery__wrapper::-webkit-scrollbar {
  width: 0.6em;
}
@media (max-width: 1000px) {
  .gallery__wrapper {
    padding: 90px 1.75em;
  }
  .gallery__wrapper::-webkit-scrollbar {
    width: 0.5em;
  }
}
.gallery__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
@media (min-width: 1000px) {
  .gallery__header {
    padding: 0 15px;
    margin: 50px 0 20px;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .gallery__subtitle {
    text-align: left;
    max-width: 650px;
  }
}
@media (max-width: 1000px) {
  .gallery__header {
    margin: 0 0 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .gallery__controls {
    margin-top: 40px;
  }
}
.select-wrapper--gallery:after {
  right: 0.5em;
  top: 0.5em;
}
.gallery__select {
  font-size: 0.8rem;
  display: inline-block;
  margin-left: 5px;
}
.gallery__subtitle {
  margin: 0;
}
.gallery__inner {
  font-size: 0.9em;
  position: relative;
  max-width: 100vw;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.gallery__inner.is-searching:after {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-top: 2px solid #fff;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  -webkit-animation: spin 0.4s linear infinite;
  animation: spin 0.4s linear infinite;
}
.shader {
  color: #ddd;
  display: inline-block;
  padding: 0;
  width: 20%;
}
.shader,
.shader:active,
.shader:focus {
  outline: 0;
}
@media (max-width: 1280px) {
  .shader {
    width: 25%;
  }
}
.shader:hover {
  outline: 0;
  background-color: rgba(221, 221, 221, 0.05);
  color: #fff;
  text-decoration: none;
}
.shader__name,
.shader__preview,
.shader__username {
  position: relative;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  overflow: hidden;
  min-height: 20px;
}
.shader__name:before,
.shader__preview:before,
.shader__username:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 255, 255, 0)),
    color-stop(50%, rgba(255, 255, 255, 0.05)),
    to(rgba(255, 255, 255, 0))
  );
  background-image: -o-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}
.shader__name.is-ready,
.shader__preview.is-ready,
.shader__username.is-ready {
  background-color: transparent;
}
.shader__name.is-ready:before,
.shader__preview.is-ready:before,
.shader__username.is-ready:before {
  -webkit-animation: none;
  animation: none;
  display: none;
}
.shader__content {
  display: inline-block;
  padding: 15px;
  width: 100%;
}
@media (max-width: 812px) {
  .shader {
    width: 100%;
  }
  .shader__content {
    padding: 20px 0;
  }
  .shader__preview {
    min-height: 20vh;
  }
}
.shader__preview {
  position: relative;
  margin: 0;
  padding-top: 56.25%;
}
.shader__preview-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border: none;
  opacity: 0;
}
.shader__username {
  margin: 4px 0 0;
  max-width: 70%;
  visibility: visible !important;
}
.shader__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}
.shader__part--left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.shader__part--right {
  text-align: right;
  min-width: 30%;
}
.shader__part--right.is-loaded .shader__part--right {
  min-width: initial;
}
.shader__name {
  margin: 8px 0 0;
  color: #fff;
  visibility: visible !important;
  word-break: break-all;
}
.shader__stat {
  margin: 8px 0;
  opacity: 0.8;
}
.shader__stat-icon {
  width: 15px;
  height: 15px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  vertical-align: middle;
  opacity: 0;
}
.shader__stat-text {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.vr-ui-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
#shader-editor-cm {
  height: calc(100% - 40px);
}
.CodeMirror {
  font-family: monospace;
  height: 100%;
  color: #000;
  direction: ltr;
  font-size: 16px;
}
@media (max-width: 1440px) {
  .CodeMirror {
    font-size: 0.8rem;
  }
}
@media (max-width: 1280px) {
  .CodeMirror {
    font-size: 0.8rem;
  }
}
.CodeMirror-lines {
  padding: 4px 0;
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px;
}
.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
  background-color: #303030;
}
.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumber {
  padding: 0 8px 0 12px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}
.CodeMirror-guttermarker {
  color: #000;
}
.CodeMirror-guttermarker-subtle {
  color: #999;
}
.CodeMirror-cursor {
  border-left: 1px solid #000;
  border-right: none;
  width: 0;
}
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor-mark {
  background-color: rgba(20, 255, 20, 0.5);
  -webkit-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
}
.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}
@-webkit-keyframes blink {
  50% {
    background-color: transparent;
  }
}
@keyframes blink {
  50% {
    background-color: transparent;
  }
}
.cm-tab {
  display: inline-block;
}
.CodeMirror-rulers {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0;
  bottom: 0;
  position: absolute;
}
.cm-s-default .cm-header {
  color: #00f;
}
.cm-s-default .cm-quote {
  color: #090;
}
.cm-negative {
  color: #d44;
}
.cm-positive {
  color: #292;
}
.cm-header,
.cm-strong {
  font-weight: 700;
}
.cm-em {
  font-style: italic;
}
.cm-link {
  text-decoration: underline;
}
.cm-strikethrough {
  text-decoration: line-through;
}
.cm-s-default .cm-keyword {
  color: #708;
}
.cm-s-default .cm-atom {
  color: #219;
}
.cm-s-default .cm-number {
  color: #164;
}
.cm-s-default .cm-def {
  color: #00f;
}
.cm-s-default .cm-variable-2 {
  color: #05a;
}
.cm-s-default .cm-type,
.cm-s-default .cm-variable-3 {
  color: #085;
}
.cm-s-default .cm-comment {
  color: #a50;
}
.cm-s-default .cm-string {
  color: #a11;
}
.cm-s-default .cm-string-2 {
  color: #f50;
}
.cm-s-default .cm-meta,
.cm-s-default .cm-qualifier {
  color: #555;
}
.cm-s-default .cm-builtin {
  color: #30a;
}
.cm-s-default .cm-bracket {
  color: #997;
}
.cm-s-default .cm-tag {
  color: #170;
}
.cm-s-default .cm-attribute {
  color: #00c;
}
.cm-s-default .cm-hr {
  color: #999;
}
.cm-s-default .cm-link {
  color: #00c;
}
.cm-invalidchar,
.cm-s-default .cm-error {
  color: red;
}
.CodeMirror-composing {
  border-bottom: 2px solid;
}
div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22;
}
.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, 0.3);
}
.CodeMirror-activeline-background {
  background: #e8f2ff;
}
.CodeMirror {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.CodeMirror-scroll {
  overflow: scroll !important;
  margin-bottom: -30px;
  margin-right: -30px;
  padding-bottom: 30px;
  height: 100%;
  outline: 0;
  position: relative;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 30px solid transparent;
}
.CodeMirror-gutter-filler,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-vscrollbar {
  position: absolute;
  z-index: 6;
  display: none;
}
.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0;
}
.CodeMirror-gutters {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -30px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: 0 0 !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent;
}
.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent;
}
.CodeMirror-lines {
  cursor: text;
  min-height: 1px;
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  border-radius: 0;
  border-width: 0;
  background: 0 0;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}
.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}
.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px;
}
.CodeMirror-rtl pre {
  direction: rtl;
}
.CodeMirror-code {
  outline: 0;
}
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber,
.CodeMirror-scroll,
.CodeMirror-sizer {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre {
  position: static;
}
div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
.CodeMirror-focused div.CodeMirror-cursors,
div.CodeMirror-dragcursors {
  visibility: visible;
}
.CodeMirror-selected {
  background: #d9d9d9;
}
.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0;
}
.CodeMirror-crosshair {
  cursor: crosshair;
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
  background: #d7d4f0;
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0;
}
.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, 0.4);
}
.cm-force-border {
  padding-right: 0.1px;
}
@media print {
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}
span.CodeMirror-selectedtext {
  background: 0 0;
}
.CodeMirror .cm-err-msg {
  background-color: #b00;
  font-weight: 700;
}
.CodeMirror-dialog {
  position: absolute;
  left: 0;
  right: 0;
  background: inherit;
  z-index: 15;
  padding: 0.1em 0.8em;
  overflow: hidden;
  color: inherit;
}
.CodeMirror-dialog-top {
  border-bottom: 1px solid #eee;
  top: 0;
}
.CodeMirror-dialog-bottom {
  border-top: 1px solid #eee;
  bottom: 0;
}
.CodeMirror-dialog input {
  border: none;
  outline: 0;
  background: 0 0;
  width: 20em;
  color: inherit;
  font-family: monospace;
}
.CodeMirror-dialog button {
  font-size: 70%;
}
.CodeMirror-foldmarker {
  color: #00f;
  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px,
    #b9f -1px 1px 2px;
  font-family: arial;
  line-height: 0.3;
}
.CodeMirror-foldgutter {
  width: 0.7em;
}
.CodeMirror-foldgutter-open:after {
  content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
  content: "\25B8";
}
.CodeMirror-hints {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 2px;
  -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  border: 1px solid silver;
  background: #fff;
  font-size: 90%;
  font-family: monospace;
  max-height: 20em;
  overflow-y: auto;
}
.CodeMirror-hint {
  margin: 0;
  padding: 0 4px;
  border-radius: 2px;
  white-space: pre;
  color: #000;
}
li.CodeMirror-hint-active {
  background: #08f;
  color: #fff;
}
.cm-s-monokai.CodeMirror {
  background: #051015;
  color: #f8f8f2;
}
.cm-s-monokai div.CodeMirror-selected {
  background: #49483e;
}
.cm-s-monokai .CodeMirror-line::selection,
.cm-s-monokai .CodeMirror-line > span::selection,
.cm-s-monokai .CodeMirror-line > span > span::selection {
  background: rgba(73, 72, 62, 0.99);
}
.cm-s-monokai .CodeMirror-line::-moz-selection,
.cm-s-monokai .CodeMirror-line > span::-moz-selection,
.cm-s-monokai .CodeMirror-line > span > span::-moz-selection {
  background: rgba(73, 72, 62, 0.99);
}
.cm-s-monokai .CodeMirror-gutters {
  background: #00070a;
  border-right: 0;
}
.cm-s-monokai .CodeMirror-guttermarker {
  color: #fff;
}
.cm-s-monokai .CodeMirror-guttermarker-subtle,
.cm-s-monokai .CodeMirror-linenumber {
  color: #d0d0d0;
}
.cm-s-monokai .CodeMirror-cursor {
  border-left: 1px solid #f8f8f0;
}
.cm-s-monokai span.cm-comment {
  color: #75715e;
}
.cm-s-monokai span.cm-atom,
.cm-s-monokai span.cm-number {
  color: #ae81ff;
}
.cm-s-monokai span.cm-comment.cm-attribute {
  color: #97b757;
}
.cm-s-monokai span.cm-comment.cm-def {
  color: #bc9262;
}
.cm-s-monokai span.cm-comment.cm-tag {
  color: #bc6283;
}
.cm-s-monokai span.cm-comment.cm-type {
  color: #5998a6;
}
.cm-s-monokai span.cm-attribute,
.cm-s-monokai span.cm-property {
  color: #a6e22e;
}
.cm-s-monokai span.cm-keyword {
  color: #f92672;
}
.cm-s-monokai span.cm-builtin {
  color: #66d9ef;
}
.cm-s-monokai span.cm-string {
  color: #e6db74;
}
.cm-s-monokai span.cm-variable {
  color: #f8f8f2;
}
.cm-s-monokai span.cm-variable-2 {
  color: #9effff;
}
.cm-s-monokai span.cm-type,
.cm-s-monokai span.cm-variable-3 {
  color: #66d9ef;
}
.cm-s-monokai span.cm-def {
  color: #fd971f;
}
.cm-s-monokai span.cm-bracket {
  color: #f8f8f2;
}
.cm-s-monokai span.cm-tag {
  color: #f92672;
}
.cm-s-monokai span.cm-header,
.cm-s-monokai span.cm-link {
  color: #ae81ff;
}
.cm-s-monokai span.cm-error {
  background: #f92672;
  color: #f8f8f0;
}
.cm-s-monokai .CodeMirror-activeline-background {
  background: #373831;
}
.cm-s-monokai .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: #fff !important;
}
.editor {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #051015;
  padding: 5em 2.5em 20px;
  opacity: 0;
  pointer-events: none;
}
.editor.is-visible {
  pointer-events: all;
}
.editor__inner {
  opacity: 0;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}
.editor.is-visible .editor__inner {
  opacity: 1;
}
.editor__nav-modes {
  position: absolute;
  right: 100%;
  padding-right: 2em;
  bottom: 32px;
}
.editor__nav-mode-wrapper {
  position: relative;
  margin-top: 1.5ex;
  white-space: nowrap;
}
.editor__nav-mode {
  position: absolute;
  visibility: hidden;
}
.editor__nav-mode:checked ~ label:after {
  display: block;
}
.editor__nav-mode-label:before {
  position: absolute;
  right: 100%;
  content: "";
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  border: 1px solid #51585b;
  background-color: #051015;
}
.editor__nav-mode-label:after {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;
  margin-right: calc(0.65em + 1px);
  margin-top: calc(0.25em + 1px);
  content: "";
  width: 0.5em;
  height: 0.5em;
  background-color: #c3c3c3;
}
.editor__intro-header,
.editor__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
}
.editor__intro {
  border-top: 1px solid #51585b;
  overflow: hidden;
  max-height: 500px;
}
.is-minimized .editor__intro {
  max-height: 3em;
}
.editor__intro-description {
  margin: 1em 0 0.5em;
  overflow: visible;
  padding-bottom: 0.15em;
  font-size: 0.8em;
}
.editor__intro-description a,
.editor__intro-description button {
  font-weight: 400;
  color: #00ffad;
}
@media (max-width: 1440px) {
  .editor__intro-description {
    font-size: 0.8rem;
  }
}
@media (max-width: 1280px) {
  .editor__intro-description {
    font-size: 0.8rem;
  }
}
.editor__intro-description ul {
  margin: 0.75em 0 0 2em;
  list-style-type: square;
}
.editor__intro-description li {
  margin-bottom: 0.2em;
  line-height: 1.05em;
}
.editor__intro-header {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.editor__intro--minimize {
  margin-top: 0.75em;
  border: 1px solid #51585b;
  height: 22px;
  width: 22px;
  position: relative;
}
.editor__intro--minimize:after,
.editor__intro--minimize:before {
  position: absolute;
  top: 10px;
  left: 7px;
  height: 1px;
  width: 6px;
  background-color: #51585b;
  content: "";
}
.editor__intro--minimize:after {
  opacity: 0;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.is-minimized .editor__intro--minimize:after {
  opacity: 1;
}
@media (hover: hover) {
  .editor__intro--minimize:hover {
    border-color: #c3c3c3;
  }
  .editor__intro--minimize:hover:after,
  .editor__intro--minimize:hover:before {
    background-color: #c3c3c3;
  }
}
.editor__intro-title {
  font-size: 1.5em;
  font-weight: 100;
  margin: 0.75em 0 0;
}
.editor__tabs {
  width: 100%;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
}
.editor__buttons-line,
.editor__controls {
  display: -webkit-box;
  display: -ms-flexbox;
}
.editor__tab {
  width: 33.3333333%;
  border: 1px solid #51585b;
  padding: 0.5em 0;
}
.editor__tab + .editor__tab {
  border-left: none;
}
.editor__tab.is-active {
  background-color: #c3c3c3;
  border-color: #c3c3c3;
  color: #051015;
}
@media (hover: hover) {
  .editor__tab:not(.is-active):hover {
    background-color: #51585b;
    border-color: #51585b;
  }
}
.editor__buttons {
  border-left: 1px solid #51585b;
  border-right: 1px solid #51585b;
  padding: 1em 0;
}
.editor__buttons-line {
  display: flex;
}
.editor__buttons-line + .editor__buttons-line {
  margin-top: 1em;
}
.group {
  width: 33.333333%;
}
.group--description {
  width: 66.6666%;
}
@media (max-width: 1440px) {
  .group--description,
  .group--template,
  .group--title {
    width: 50%;
  }
}
.group:first-child {
  padding-left: 0.8em;
}
.group__name {
  display: block;
  margin-bottom: 0.2em;
}
.group--title .group__input-text {
  width: 70%;
}
.group--description .group__input-text {
  width: calc(100% - 0.8em);
}
.editor__main {
  margin-top: 1em;
}
#shader-editor {
  width: 100%;
  border: 1px solid #51585b;
  -webkit-transition: border-color 0.3s linear;
  -o-transition: border-color 0.3s linear;
  transition: border-color 0.3s linear;
}
#shader-editor.success {
  border-color: #00ffad;
}
#shader-editor.error {
  border-color: red;
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: #303030;
}
::-webkit-scrollbar-thumb {
  background: #c3c3c3;
}
::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}
::-webkit-scrollbar-corner {
  background-color: #c3c3c3;
}
.editor__controls {
  position: relative;
  height: 40px;
  min-height: 40px;
  background-color: #051015;
  border-top: 1px solid #51585b;
  padding: 0 0.8em;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (max-width: 1440px) {
  .editor__controls {
    padding: 0 0.6em;
  }
}
@media (max-width: 1280px) {
  .editor__controls {
    padding: 0 0.4em;
  }
  .select-quality {
    max-width: 70px;
  }
}
@media (max-width: 1000px) {
  .editor__controls {
    padding: 0 0.2em;
  }
}
.editor__controls-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.editor__controls-left .button-icon {
  height: 18px;
  margin-left: 0.75em;
}
.editor__controls-left .button-icon svg {
  min-width: 12px;
  height: 100%;
  fill: #fff;
}
@media (hover: hover) {
  .editor__controls-left .button-icon:hover svg {
    fill: #c3c3c3;
  }
}
.button-separator {
  display: inline-block;
  width: 1px;
  height: 0.5em;
  margin: 0 0.5em;
  background-color: #c3c3c3;
}
.button__pause .play {
  display: none;
}
.button__pause.is-paused .play {
  display: block;
}
.button__pause.is-paused .pause,
.ge_colorpicker_link-button {
  display: none;
}
.fps,
.time {
  min-width: 40px;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.fps {
  margin-left: 1em;
}
@media (max-width: 1440px) {
  .fps {
    margin-left: 0.5em;
  }
}
.button__screenshot {
  vertical-align: -0.275em;
  height: 18px;
}
.button__screenshot svg {
  height: 18px;
  fill: #fff;
}
@media (hover: hover) {
  .button__screenshot:hover svg {
    fill: #c3c3c3;
  }
}
@media (max-width: 1280px) {
  .button__screenshot {
    padding: 0;
    height: 14px;
  }
  .button__screenshot svg {
    height: 14px;
  }
}
.ge_picker_modal {
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 10;
  background-color: #303030;
  border: 1px solid #51585b;
  padding: 8px;
}
.ge_picker_modal * {
  box-sizing: border-box;
}
.ge_picker_canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.ge_colorpicker_patch {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 1;
}
.ge_colorpicker_hsv-map {
  position: relative;
  height: 200px;
  width: 100%;
  top: 0;
}
.ge_colorpicker_disc-cover {
  opacity: 0;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  cursor: crosshair;
}
.ge_colorpicker_disc-cover::after {
  content: "";
  background-color: transparent;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 202px;
  height: 202px;
  border: 3px solid var(--ui-component-color);
  border-radius: 50%;
  opacity: 1;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ge_colorpicker_bar-bg,
.ge_colorpicker_bar-white {
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  height: 200px;
}
.ge_colorpicker_bar-white {
  background-color: #fff;
}
.ge_colorpicker_disc-cursor {
  position: absolute;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  margin: -5px;
  cursor: crosshair;
}
.ge_colorpicker_dark .ge_colorpicker_disc-cursor {
  border-color: #333;
}
.ge_colorpicker_bar-luminance {
  position: absolute;
  right: 0;
  top: 0;
}
.ge_colorpicker_bar-cursors {
  position: absolute;
  right: 0;
  width: 25px;
  top: 0;
  height: 200px;
  overflow: hidden;
}
.ge_colorpicker_bar-cursor-left,
.ge_colorpicker_bar-cursor-right {
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  margin-top: -4px;
}
.ge_colorpicker_bar-cursor-left {
  left: 0;
  border-left: 4px solid #eee;
}
.ge_colorpicker_bar-cursor-right {
  right: 0;
  border-right: 4px solid #eee;
}
.ge_colorpicker_dark .ge_colorpicker_bar-cursor-left {
  border-left-color: #333;
}
.ge_colorpicker_dark .ge_colorpicker_bar-cursor-right {
  border-right-color: #333;
}