@font-face {
  font-family: "Avenir";
  font-style: normal;
  font-weight: 400;
  src: local("Avenir LT Pro 45 Book"), local("AvenirLTPro-Book"), url("/fonts/Avenir_Roman.woff2") format("woff2");
}
@font-face {
  font-family: "Avenir Heavy";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/Avenir_Heavy.woff2") format("woff2");
}
@font-face {
  font-family: "hopscotch-sounds";
  src: url("/fonts/hopscotch-sounds.eot?pqb40d");
  src: url("/fonts/hopscotch-sounds.eot?pqb40d#iefix") format("embedded-opentype"), url("/fonts/hopscotch-sounds.ttf?pqb40d") format("truetype"), url("/fonts/hopscotch-sounds.woff?pqb40d") format("woff"), url("/fonts/hopscotch-sounds.svg?pqb40d#hopscotch-sounds") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.hs-sound {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "hopscotch-sounds" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hs-sound.hs-a::before {
  content: "\e900";
  color: #4d4d4d;
}
.hs-sound.hs-ahhh::before {
  content: "\e901";
  color: #4d4d4d;
}
.hs-sound.hs-aflat::before {
  content: "\e902";
  color: #4d4d4d;
}
.hs-sound.hs-alert::before {
  content: "\e903";
  color: #4d4d4d;
}
.hs-sound.hs-aliens::before {
  content: "\e904";
  color: #4d4d4d;
}
.hs-sound.hs-b::before {
  content: "\e905";
  color: #4d4d4d;
}
.hs-sound.hs-bass::before {
  content: "\e906";
  color: #4d4d4d;
}
.hs-sound.hs-bflat::before {
  content: "\e907";
  color: #4d4d4d;
}
.hs-sound.hs-bubbles::before {
  content: "\e908";
  color: #4d4d4d;
}
.hs-sound.hs-c::before {
  content: "\e909";
  color: #4d4d4d;
}
.hs-sound.hs-car::before {
  content: "\e90a";
  color: #4d4d4d;
}
.hs-sound.hs-chaChing::before {
  content: "\e90b";
  color: #4d4d4d;
}
.hs-sound.hs-check::before {
  content: "\e90c";
  color: #4d4d4d;
}
.hs-sound.hs-cheer::before {
  content: "\e90d";
  color: #4d4d4d;
}
.hs-sound.hs-chord::before {
  content: "\e90e";
  color: #4d4d4d;
}
.hs-sound.hs-clang::before {
  content: "\e90f";
  color: #4d4d4d;
}
.hs-sound.hs-clap::before {
  content: "\e910";
  color: #4d4d4d;
}
.hs-sound.hs-clickPlayable::before {
  content: "\e911";
  color: #4d4d4d;
}
.hs-sound.hs-crash::before {
  content: "\e912";
  color: #4d4d4d;
}
.hs-sound.hs-crickets::before {
  content: "\e913";
  color: #4d4d4d;
}
.hs-sound.hs-csharp::before {
  content: "\e914";
  color: #4d4d4d;
}
.hs-sound.hs-d::before {
  content: "\e915";
  color: #4d4d4d;
}
.hs-sound.hs-dash::before {
  content: "\e916";
  color: #4d4d4d;
}
.hs-sound.hs-doorbell::before {
  content: "\e917";
  color: #4d4d4d;
}
.hs-sound.hs-drip::before {
  content: "\e918";
  color: #4d4d4d;
}
.hs-sound.hs-e::before {
  content: "\e919";
  color: #4d4d4d;
}
.hs-sound.hs-eating::before {
  content: "\e91a";
  color: #4d4d4d;
}
.hs-sound.hs-eflat::before {
  content: "\e91b";
  color: #4d4d4d;
}
.hs-sound.hs-f::before {
  content: "\e91c";
  color: #4d4d4d;
}
.hs-sound.hs-fail::before {
  content: "\e91d";
  color: #4d4d4d;
}
.hs-sound.hs-footsteps::before {
  content: "\e91e";
  color: #4d4d4d;
}
.hs-sound.hs-fsharp::before {
  content: "\e91f";
  color: #4d4d4d;
}
.hs-sound.hs-g::before {
  content: "\e920";
  color: #4d4d4d;
}
.hs-sound.hs-gong::before {
  content: "\e921";
  color: #4d4d4d;
}
.hs-sound.hs-heartbeat::before {
  content: "\e922";
  color: #4d4d4d;
}
.hs-sound.hs-highc::before {
  content: "\e923";
  color: #4d4d4d;
}
.hs-sound.hs-laser::before {
  content: "\e924";
  color: #4d4d4d;
}
.hs-sound.hs-laugh::before {
  content: "\e925";
  color: #4d4d4d;
}
.hs-sound.hs-low-a::before {
  content: "\e926";
  color: #4d4d4d;
}
.hs-sound.hs-low-aflat::before {
  content: "\e927";
  color: #4d4d4d;
}
.hs-sound.hs-low-b::before {
  content: "\e928";
  color: #4d4d4d;
}
.hs-sound.hs-low-bflat::before {
  content: "\e929";
  color: #4d4d4d;
}
.hs-sound.hs-low-c::before {
  content: "\e92a";
  color: #4d4d4d;
}
.hs-sound.hs-low-csharp::before {
  content: "\e92b";
  color: #4d4d4d;
}
.hs-sound.hs-low-d::before {
  content: "\e92c";
  color: #4d4d4d;
}
.hs-sound.hs-low-e::before {
  content: "\e92d";
  color: #4d4d4d;
}
.hs-sound.hs-low-eflat::before {
  content: "\e92e";
  color: #4d4d4d;
}
.hs-sound.hs-low-f::before {
  content: "\e92f";
  color: #4d4d4d;
}
.hs-sound.hs-low-fsharp::before {
  content: "\e930";
  color: #4d4d4d;
}
.hs-sound.hs-low-g::before {
  content: "\e931";
  color: #4d4d4d;
}
.hs-sound.hs-meow::before {
  content: "\e932";
  color: #4d4d4d;
}
.hs-sound.hs-news::before {
  content: "\e933";
  color: #4d4d4d;
}
.hs-sound.hs-pop::before {
  content: "\e934";
  color: #4d4d4d;
}
.hs-sound.hs-rain::before {
  content: "\e935";
  color: #4d4d4d;
}
.hs-sound.hs-roar::before {
  content: "\e936";
  color: #4d4d4d;
}
.hs-sound.hs-schoolBell::before {
  content: "\e937";
  color: #4d4d4d;
}
.hs-sound.hs-snare::before {
  content: "\e938";
  color: #4d4d4d;
}
.hs-sound.hs-spring::before {
  content: "\e939";
  color: #4d4d4d;
}
.hs-sound.hs-talking::before {
  content: "\e93a";
  color: #4d4d4d;
}
.hs-sound.hs-trophy::before {
  content: "\e93b";
  color: #4d4d4d;
}
.hs-sound.hs-tweet::before {
  content: "\e93c";
  color: #4d4d4d;
}
.hs-sound.hs-vibrate::before {
  content: "\e93d";
  color: #4d4d4d;
}
.hs-sound.hs-wind::before {
  content: "\e93e";
  color: #4d4d4d;
}
.hs-sound.hs-woof::before {
  content: "\e93f";
  color: #4d4d4d;
}

@font-face {
  font-family: "hopscotch-notes";
  src: url("/fonts/hopscotch-notes.eot?k3o4tn");
  src: url("/fonts/hopscotch-notes.eot?k3o4tn#iefix") format("embedded-opentype"), url("/fonts/hopscotch-notes.ttf?k3o4tn") format("truetype"), url("/fonts/hopscotch-notes.woff?k3o4tn") format("woff"), url("/fonts/hopscotch-notes.svg?k3o4tn#hopscotch-notes") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.hs-note {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "hopscotch-notes" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hs-note.hs-note0::before {
  content: "\e900";
  color: #494949;
}
.hs-note.hs-note48::before {
  content: "\e901";
  color: #494949;
}
.hs-note.hs-note49::before {
  content: "\e902";
  color: #494949;
}
.hs-note.hs-note50::before {
  content: "\e903";
  color: #494949;
}
.hs-note.hs-note51::before {
  content: "\e904";
  color: #494949;
}
.hs-note.hs-note52::before {
  content: "\e905";
  color: #494949;
}
.hs-note.hs-note53::before {
  content: "\e906";
  color: #494949;
}
.hs-note.hs-note54::before {
  content: "\e907";
  color: #494949;
}
.hs-note.hs-note55::before {
  content: "\e908";
  color: #494949;
}
.hs-note.hs-note56::before {
  content: "\e909";
  color: #494949;
}
.hs-note.hs-note57::before {
  content: "\e90a";
  color: #494949;
}
.hs-note.hs-note58::before {
  content: "\e90b";
  color: #494949;
}
.hs-note.hs-note59::before {
  content: "\e90c";
  color: #494949;
}
.hs-note.hs-note60::before {
  content: "\e90d";
  color: #494949;
}
.hs-note.hs-note61::before {
  content: "\e90e";
  color: #494949;
}
.hs-note.hs-note62::before {
  content: "\e90f";
  color: #494949;
}
.hs-note.hs-note63::before {
  content: "\e910";
  color: #494949;
}
.hs-note.hs-note64::before {
  content: "\e911";
  color: #494949;
}
.hs-note.hs-note65::before {
  content: "\e912";
  color: #494949;
}
.hs-note.hs-note66::before {
  content: "\e913";
  color: #494949;
}
.hs-note.hs-note67::before {
  content: "\e914";
  color: #494949;
}
.hs-note.hs-note68::before {
  content: "\e915";
  color: #494949;
}
.hs-note.hs-note69::before {
  content: "\e916";
  color: #494949;
}
.hs-note.hs-note70::before {
  content: "\e917";
  color: #494949;
}
.hs-note.hs-note71::before {
  content: "\e918";
  color: #494949;
}
.hs-note.hs-note72::before {
  content: "\e919";
  color: #494949;
}
.hs-note.hs-note73::before {
  content: "\e91a";
  color: #494949;
}
.hs-note.hs-note74::before {
  content: "\e91b";
  color: #494949;
}
.hs-note.hs-note75::before {
  content: "\e91c";
  color: #494949;
}
.hs-note.hs-note76::before {
  content: "\e91d";
  color: #494949;
}
.hs-note.hs-note77::before {
  content: "\e91e";
  color: #494949;
}
.hs-note.hs-note78::before {
  content: "\e91f";
  color: #494949;
}
.hs-note.hs-note79::before {
  content: "\e920";
  color: #494949;
}
.hs-note.hs-note80::before {
  content: "\e921";
  color: #494949;
}
.hs-note.hs-note81::before {
  content: "\e922";
  color: #494949;
}
.hs-note.hs-note82::before {
  content: "\e923";
  color: #494949;
}
.hs-note.hs-note83::before {
  content: "\e924";
  color: #494949;
}
.hs-note.hs-note84::before {
  content: "\e925";
  color: #494949;
}

@font-face {
  font-family: "hopscotch-rhythms";
  src: url("/fonts/hopscotch-rhythms.eot?rezdvm");
  src: url("/fonts/hopscotch-rhythms.eot?rezdvm#iefix") format("embedded-opentype"), url("/fonts/hopscotch-rhythms.ttf?rezdvm") format("truetype"), url("/fonts/hopscotch-rhythms.woff?rezdvm") format("woff"), url("/fonts/hopscotch-rhythms.svg?rezdvm#hopscotch-rhythms") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.hs-rhythm {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "hopscotch-rhythms" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hs-rhythm.hs-16th-triplet::before {
  content: "\e90b";
}
.hs-rhythm.hs-32nd::before {
  content: "\e907";
}
.hs-rhythm.hs-32nd-triplet::before {
  content: "\e908";
}
.hs-rhythm.hs-4th-triplet::before {
  content: "\e90d";
}
.hs-rhythm.hs-8th-triplet::before {
  content: "\e90c";
}
.hs-rhythm.hs-dotted-16th::before {
  content: "\e900";
}
.hs-rhythm.hs-dotted-4th::before {
  content: "\e901";
}
.hs-rhythm.hs-dotted-8th::before {
  content: "\e902";
}
.hs-rhythm.hs-dotted-half::before {
  content: "\e903";
}
.hs-rhythm.hs-dotted-whole::before {
  content: "\e904";
}
.hs-rhythm.hs-eighth::before {
  content: "\e905";
}
.hs-rhythm.hs-half::before {
  content: "\e906";
}
.hs-rhythm.hs-quarter::before {
  content: "\e909";
}
.hs-rhythm.hs-sixteenth::before {
  content: "\e90a";
}
.hs-rhythm.hs-whole::before {
  content: "\e90e";
}

@font-face {
  font-family: "hopscotch-instruments";
  src: url("/fonts/hopscotch-instruments.eot?cjdjym");
  src: url("/fonts/hopscotch-instruments.eot?cjdjym#iefix") format("embedded-opentype"), url("/fonts/hopscotch-instruments.ttf?cjdjym") format("truetype"), url("/fonts/hopscotch-instruments.woff?cjdjym") format("woff"), url("/fonts/hopscotch-instruments.svg?cjdjym#hopscotch-instruments") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.hs-instrument {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "hopscotch-instruments" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hs-instrument.hs-8bit::before {
  content: "\e900";
}
.hs-instrument.hs-cello::before {
  content: "\e901";
}
.hs-instrument.hs-choir::before {
  content: "\e902";
}
.hs-instrument.hs-guitar::before {
  content: "\e903";
}
.hs-instrument.hs-ocarina::before {
  content: "\e904";
}
.hs-instrument.hs-piano::before {
  content: "\e905";
}
.hs-instrument.hs-vibraphone::before {
  content: "\e906";
}

@font-face {
  font-family: "hopscotch-trail-caps";
  src: url("/fonts/hopscotch-trail-caps.eot?rezdvm");
  src: url("/fonts/hopscotch-trail-caps.eot?rezdvm#iefix") format("embedded-opentype"), url("/fonts/hopscotch-trail-caps.ttf?rezdvm") format("truetype"), url("/fonts/hopscotch-trail-caps.woff?rezdvm") format("woff"), url("/fonts/hopscotch-trail-caps.svg?rezdvm#hopscotch-trail-caps") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.hs-trail-cap {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "hopscotch-trail-caps" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hs-trail-cap.hs-trail-butt:before {
  content: "\e900";
}
.hs-trail-cap.hs-trail-round:before {
  content: "\e901";
}
.hs-trail-cap.hs-trail-square:before {
  content: "\e902";
}

:root {
  --col-bg-main: white;
  --col-bg-translucent: #dddc;
  --col-text: black;
  --time-trans: 0s;
  --block-keyboard-width: 320px;
  --block-keyboard-height: 0px;
  --col-close-opt-popup: #FAFAFAEE;
  --col-bg-toolbar-translucent: #fffe;
  --editor-bg: url("/images/editor_bg.png");
}

@media (prefers-color-scheme: dark) {
  :root {
    --col-bg-main: black;
    --col-bg-translucent: #444c;
    --col-text: #ccc;
    --time-trans: 0s;
    --col-close-opt-popup: #111e;
    --col-bg-toolbar-translucent: #2a2a2aee;
    --editor-bg: url("/images/editor_dark.jpeg");
  }
}
html {
  --display-rstate: none;
}

html, body {
  margin: 0;
  box-sizing: border-box;
  background-image: var(--editor-bg);
  background-size: cover;
  transition: var(--time-trans);
  user-select: none;
  -webkit-user-select: none;
}

[contenteditable] {
  user-select: initial;
  -webkit-user-select: initial;
}

h1 {
  text-align: center;
  margin: 0;
  padding: 10px 16px 8px;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
  font-family: "Avenir Heavy", Arial, Helvetica, sans-serif;
  font-weight: 400;
}

button {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  outline: none;
  color: inherit;
}

button:active {
  opacity: 0.5;
}

.btn {
  position: absolute;
  right: 8px;
  font-size: 24px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.95);
  color: black;
  margin: 0;
  padding: 4px 8px;
  border: none;
  width: 56px;
  height: 39px;
  z-index: 25;
}

.center {
  text-align: center;
  margin: auto;
  display: block;
}

::selection {
  background-color: lightskyblue;
  color: white;
}

::moz-selection {
  background-color: lightskyblue;
}

.viewonly-message {
  box-sizing: border-box;
  position: fixed;
  top: 6px;
  left: 50%;
  height: 44px;
  transform: translateX(-50%);
  padding: 12px 20px;
  font-size: 18px;
  color: white;
  background-color: rgba(0, 0, 0, 0.54);
  z-index: 10;
  white-space: nowrap;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viewonly-message .small-screen {
  display: none;
}
@media (max-width: 460px) {
  .viewonly-message {
    margin-left: 24px;
  }
  .viewonly-message .small-screen {
    display: inline;
  }
  .viewonly-message .regular-screen {
    display: none;
  }
}

.revision-state-info {
  opacity: 0;
  position: fixed;
  top: -1000px;
}

.blocks-keyboard, .operators-keyboard {
  box-sizing: border-box;
  position: fixed;
  top: 52px;
  margin: 8px 16px;
  width: calc(var(--block-keyboard-width) - 16px);
  height: calc(100% - 80px);
  border-radius: 10px;
  padding-top: 46px;
  background-color: #535353;
  user-select: none;
  -webkit-user-select: none;
  overflow: auto;
  z-index: 100;
}
.blocks-keyboard *, .operators-keyboard * {
  box-sizing: border-box;
}
.blocks-keyboard.kb-hide, .operators-keyboard.kb-hide {
  display: none;
}
.blocks-keyboard .keyboard-blocks-wrapper, .operators-keyboard .keyboard-blocks-wrapper {
  height: 100%;
  overflow: auto;
}
.blocks-keyboard .keyboard-section, .operators-keyboard .keyboard-section {
  transition: max-height 0.25s;
  overflow-y: hidden;
  position: relative;
}
.blocks-keyboard .keyboard-section.hs-characters, .operators-keyboard .keyboard-section.hs-characters {
  background-color: #e82950;
}
.blocks-keyboard .keyboard-section.hs-jungle, .operators-keyboard .keyboard-section.hs-jungle {
  background-color: #79a435;
}
.blocks-keyboard .keyboard-section.hs-shapes, .operators-keyboard .keyboard-section.hs-shapes {
  background-color: #3ccde7;
}
.blocks-keyboard .keyboard-section.hs-gamerules, .operators-keyboard .keyboard-section.hs-gamerules {
  background-color: #97234f;
}
.blocks-keyboard .keyboard-section.hs-devicerules, .operators-keyboard .keyboard-section.hs-devicerules {
  background-color: #bb3163;
}
.blocks-keyboard .keyboard-section.hs-collisionrules, .operators-keyboard .keyboard-section.hs-collisionrules {
  background-color: #a42a57;
}
.blocks-keyboard .keyboard-section.hs-conditionalrules, .operators-keyboard .keyboard-section.hs-conditionalrules {
  background-color: #bd2d61;
}
.blocks-keyboard .keyboard-section.hs-varrules, .operators-keyboard .keyboard-section.hs-varrules {
  background-color: #e7b601;
}
.blocks-keyboard .keyboard-section.hs-movement, .operators-keyboard .keyboard-section.hs-movement {
  background-color: #d73e1e;
}
.blocks-keyboard .keyboard-section.hs-looks, .operators-keyboard .keyboard-section.hs-looks {
  background-color: #63ae1e;
}
.blocks-keyboard .keyboard-section.hs-drawing, .operators-keyboard .keyboard-section.hs-drawing {
  background-color: #a6006e;
}
.blocks-keyboard .keyboard-section.hs-variables, .operators-keyboard .keyboard-section.hs-variables {
  background-color: #e7b601;
}
.blocks-keyboard .keyboard-section.hs-control, .operators-keyboard .keyboard-section.hs-control {
  background-color: #3e83be;
}
.blocks-keyboard .keyboard-header, .operators-keyboard .keyboard-header {
  display: flex;
  padding: 16px 20px;
  color: white;
  font-family: "Avenir-Heavy", Arial, Helvetica, sans-serif;
  font-size: 20px;
  height: 60px;
}
.blocks-keyboard .keyboard-header button, .operators-keyboard .keyboard-header button {
  position: relative;
  background-color: transparent;
  border: none;
  outline: none;
  margin-left: auto;
  width: 40px;
}
.blocks-keyboard .keyboard-header button i.hs-icon, .operators-keyboard .keyboard-header button i.hs-icon {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
.blocks-keyboard .keyboard-header button i.hs-icon::before, .operators-keyboard .keyboard-header button i.hs-icon::before {
  background-color: rgba(0, 0, 0, 0);
  content: " ";
  background-image: url("/images/back-arrow.svg");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s;
}
.blocks-keyboard .keyboard-header button i.hs-icon.open::before, .operators-keyboard .keyboard-header button i.hs-icon.open::before {
  transform: rotate(90deg);
}
.blocks-keyboard .keyboard-category-selector, .operators-keyboard .keyboard-category-selector {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  height: 46px;
  width: 100%;
  background-color: #ccc;
}
.blocks-keyboard .keyboard-category-selector > *, .operators-keyboard .keyboard-category-selector > * {
  width: 50%;
}
.blocks-keyboard .keyboard-category-selector > .category-label.kb-hide, .operators-keyboard .keyboard-category-selector > .category-label.kb-hide {
  display: none;
}
.blocks-keyboard .keyboard-category-selector > .category-label:not(.kb-hide), .operators-keyboard .keyboard-category-selector > .category-label:not(.kb-hide) {
  display: var(--display, none);
}
.blocks-keyboard .category-label, .operators-keyboard .category-label {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0.6;
}
.blocks-keyboard .category-label > img, .operators-keyboard .category-label > img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
}
.blocks-keyboard .category-label > span, .operators-keyboard .category-label > span {
  font-size: 15px;
}
.blocks-keyboard .category-label:not(.kb-hide), .operators-keyboard .category-label:not(.kb-hide) {
  background-color: #535353;
  border-radius: 10px 10px 0 0;
  color: white;
  opacity: 1;
}
.blocks-keyboard #kb-option-selector, .operators-keyboard #kb-option-selector {
  display: none;
}
.blocks-keyboard .keyboard-section.kb-hide, .operators-keyboard .keyboard-section.kb-hide {
  display: none;
}
.blocks-keyboard input[hidden], .operators-keyboard input[hidden] {
  display: none;
}
.blocks-keyboard div.keyboard-blocks-container, .operators-keyboard div.keyboard-blocks-container {
  padding: 0 16px 16px;
}
.blocks-keyboard div.keyboard-blocks-container div.block, .operators-keyboard div.keyboard-blocks-container div.block {
  filter: brightness(var(--brightness, 1));
  -webkit-filter: brightness(var(--brightness, 1));
}
.blocks-keyboard div.keyboard-blocks-container div.block .openbtn, .operators-keyboard div.keyboard-blocks-container div.block .openbtn {
  display: none;
}
.blocks-keyboard div.keyboard-blocks-container div.block .operator, .operators-keyboard div.keyboard-blocks-container div.block .operator {
  height: 32px;
}
.blocks-keyboard div.keyboard-blocks-container div.block .operator > img, .operators-keyboard div.keyboard-blocks-container div.block .operator > img {
  height: 27px;
  --ff-obj-scale: 0.8888;
}
.blocks-keyboard div.keyboard-blocks-container div.block.abl, .operators-keyboard div.keyboard-blocks-container div.block.abl {
  background-color: white;
  background-image: url("/images/ability-bars.png");
  padding-left: 40px;
  background-size: contain;
}
.blocks-keyboard div.keyboard-blocks-container div.block.crule, .operators-keyboard div.keyboard-blocks-container div.block.crule {
  background-color: white;
  background-image: url("/images/crule-bars.png");
  padding-left: 40px;
  background-size: contain;
}
.blocks-keyboard div.keyboard-blocks-container > *, .operators-keyboard div.keyboard-blocks-container > * {
  transform: none !important;
}
.blocks-keyboard .keyboard-section:not([data-darken=false]) div.block, .operators-keyboard .keyboard-section:not([data-darken=false]) div.block {
  background-image: var(--bg-img-override, linear-gradient(rgba(0, 0, 0, 0.1333333333), rgba(0, 0, 0, 0.1333333333)));
}
.blocks-keyboard div.block, .operators-keyboard div.block {
  max-width: calc(100% - 16px);
}
.blocks-keyboard div.block .bl-handle .hs-drag-handle, .operators-keyboard div.block .bl-handle .hs-drag-handle {
  font-size: 16px;
  margin-left: 6px;
  opacity: 0.7;
}

.blocks-keyboard.blocks-clickable .keyboard-blocks-container > div[data-group] > div.block {
  cursor: pointer;
  transition: opacity 0.2s;
}
.blocks-keyboard.blocks-clickable .keyboard-blocks-container > div[data-group] > div.block:hover {
  opacity: 0.8;
}
.blocks-keyboard.blocks-clickable .keyboard-blocks-container > div[data-group] > div.block:active {
  opacity: 0.5;
}

.operators-keyboard {
  padding-top: 0;
  transition: inset 0.2s;
  left: calc(var(--block-keyboard-width) * -1);
}
.operators-keyboard.open {
  left: 0;
}
.operators-keyboard.hs-sounds, .operators-keyboard.hs-custom-obj, .operators-keyboard.hs-characters, .operators-keyboard.hs-jungle, .operators-keyboard.hs-shapes {
  text-align: center;
}
.operators-keyboard .keyboard-category-selector {
  display: none;
}
.operators-keyboard .keyboard-section.hs-math {
  background-color: #733977;
}
.operators-keyboard .keyboard-section.hs-text {
  background-color: #63ae1e;
}
.operators-keyboard .keyboard-section.hs-vars {
  background-color: #d4a80c;
}
.operators-keyboard .keyboard-section.hs-custom-obj .keyboard-blocks-container {
  display: flex;
  flex-wrap: wrap;
}
.operators-keyboard .keyboard-section.hs-custom-obj .object-image:first-child img {
  filter: brightness(2);
  -webkit-filter: brightness(2);
}
.operators-keyboard .keyboard-section.hs-custom-obj .object-image:not(:first-child) {
  padding: 4px;
}
.operators-keyboard .keyboard-section.hs-custom-obj .object-image:not(:first-child) img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.operators-keyboard .keyboard-section.hs-shapes img {
  transform: scale(0.8);
}
.operators-keyboard .keyboard-section.hs-conditionalrules {
  background-color: var(--block-color, #bd2d61);
}
.operators-keyboard .keyboard-section[data-clone=false] > .keyboard-header {
  display: none;
}
.operators-keyboard .keyboard-section[data-clone=false] > .keyboard-header + div {
  padding-top: 16px;
}
.operators-keyboard .combined-grid {
  padding: 0 16px 16px;
}
.operators-keyboard .combined-grid > .keyboard-blocks-container {
  display: contents;
}
.operators-keyboard .keyboard-blocks-container.kb-hide {
  display: none;
}
.operators-keyboard .keyboard-blocks-container > div {
  display: inline-block;
}
.operators-keyboard div.operator {
  height: 42px;
  margin: 8px 2px 8px 8px;
  max-width: none;
  padding: 0 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.operators-keyboard div.operator.event, .operators-keyboard div.operator.conditional {
  background-color: var(--block-color, #be2961);
  --col-bg-inherited: var(--block-color, #be2961);
}
.operators-keyboard div.operator:hover {
  opacity: 0.8;
}
.operators-keyboard div.operator:active {
  opacity: 0.5;
}
.operators-keyboard div.object-image {
  cursor: pointer;
  transition: opacity 0.2s;
}
.operators-keyboard div.object-image:hover {
  opacity: 0.9;
}
.operators-keyboard div.object-image:active {
  opacity: 0.6;
}
.operators-keyboard div.param-bubble {
  height: 44px;
  width: 88px;
  margin: 1px;
  border: none;
  border-radius: 0;
  display: inline-flex;
  cursor: pointer;
  transition: opacity 0.2s;
}
.operators-keyboard div.param-bubble .hs-sound {
  font-size: 32px;
}
.operators-keyboard div.param-bubble:hover {
  opacity: 0.8;
}
.operators-keyboard div.param-bubble:active {
  opacity: 0.5;
}
.operators-keyboard div.param-bubble div.operator {
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
}
.operators-keyboard div.param-bubble div.operator > .param-bubble {
  display: none;
}
.operators-keyboard div.param-bubble.kb-hide {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .operators-keyboard div.param-bubble {
    background-color: #444;
    color: var(--col-text);
  }
  .operators-keyboard div.param-bubble i.hs-sound::before, .operators-keyboard div.param-bubble i.hs-note::before, .operators-keyboard div.param-bubble i.hs-rhythm::before, .operators-keyboard div.param-bubble i.hs-instrument::before {
    color: inherit;
  }
}
.operators-keyboard :is(.hs-rhythms, .hs-notes) .param-bubble {
  width: 134px;
}
.operators-keyboard :is(.hs-rhythms, .hs-notes) .param-bubble i + span {
  font-size: 16px;
}
.operators-keyboard :is(.hs-rhythms, .hs-notes) .param-bubble .hs-rhythm {
  padding-inline: 0 6px;
}
.operators-keyboard .hs-stage-objects div.param-bubble {
  height: 42px;
  width: auto;
  min-width: 50px;
  margin: 8px 2px 8px 8px;
  padding: 0 8px;
  border-radius: 25px;
  white-space: nowrap;
}
.operators-keyboard .hs-stage-objects div.param-bubble img {
  margin-right: 4px;
}
.operators-keyboard .block .bl-handle {
  display: none;
}
.operators-keyboard div.object-image {
  width: 66px;
  height: 66px;
  margin: 1px;
  padding: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #6bdaed;
}
.operators-keyboard div.object-image img {
  width: 44px;
  height: 44px;
}

.removal-dropzone {
  position: fixed;
  top: 52px;
  margin: 8px 16px;
  width: calc(var(--block-keyboard-width) - 16px);
  height: calc(100% - 80px);
  border-radius: 10px;
  background-color: rgba(221, 221, 221, 0.8666666667);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.removal-dropzone > [data-json], .removal-dropzone > .operator {
  display: none;
}
.removal-dropzone:not(:empty) {
  opacity: 1;
  pointer-events: initial;
}
.removal-dropzone:not(:empty)::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  color: #666;
  background-image: url("/images/editor/trash-can.svg");
  background-position: center;
  background-size: 50px;
  background-repeat: no-repeat;
}
.removal-dropzone:hover {
  cursor: url("/images/editor/poof1.svg") 16 14, auto;
}

.keyboard-block-fallback {
  width: fit-content !important;
  height: auto !important;
}
.keyboard-block-fallback .block > span {
  white-space: nowrap;
}
.keyboard-block-fallback .block.crule, .keyboard-block-fallback .block.abl {
  padding-left: 40px;
}
.keyboard-block-fallback > .operator {
  width: 144px !important;
  justify-content: center;
  padding: 0 8px;
  max-width: none;
}
.keyboard-block-fallback > .operator .bl-handle {
  display: none;
}

.operator:not(.rcol).sortable-fallback {
  width: auto !important;
  height: 40px !important;
  white-space: nowrap;
  border: 2px solid white;
}
.operator:not(.rcol).sortable-fallback *:not(.operator) {
  margin: 0 4px;
}

@media (max-width: 780px) {
  :root {
    --block-keyboard-width: 0px;
    --block-keyboard-height: 225px;
  }
  .blocks-keyboard, .operators-keyboard {
    position: fixed;
    top: unset;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: var(--block-keyboard-height);
    --col-keyboard-bg: #f2f2f2;
    --col-keyboard-bg-highlight: #ccc;
    --col-keyboard-border: #666;
    background-color: var(--col-keyboard-bg);
    padding: 0;
    border-radius: 0;
    scrollbar-width: none;
  }
}
@media (max-width: 780px) and (prefers-color-scheme: dark) {
  .blocks-keyboard, .operators-keyboard {
    --col-keyboard-bg: #333;
    --col-keyboard-bg-highlight: #444;
    --col-keyboard-border: #aaa;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard::-webkit-scrollbar, .operators-keyboard::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .keyboard-blocks-wrapper, .operators-keyboard .keyboard-blocks-wrapper {
    display: flex;
    width: fit-content;
    padding: 0 calc(100% - 220px) 0 4px;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard div.keyboard-section[class], .operators-keyboard div.keyboard-section[class] {
    min-height: 140px;
    background-color: rgba(0, 0, 0, 0);
    overflow: visible;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .keyboard-header, .operators-keyboard .keyboard-header {
    color: #888;
    padding: 10px 10px 4px;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    height: auto;
  }
  .blocks-keyboard .keyboard-header b.title, .operators-keyboard .keyboard-header b.title {
    font-weight: 400;
  }
  .blocks-keyboard .keyboard-header button, .operators-keyboard .keyboard-header button {
    display: none;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .keyboard-category-selector, .operators-keyboard .keyboard-category-selector {
    position: fixed;
    top: unset;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    width: calc(100% - 1px);
  }
  .blocks-keyboard .keyboard-category-selector > *, .operators-keyboard .keyboard-category-selector > * {
    width: auto;
  }
  .blocks-keyboard .keyboard-category-selector > .category-label, .operators-keyboard .keyboard-category-selector > .category-label {
    flex-grow: 1;
  }
}
@media (max-width: 780px) and (min-width: 370px) {
  .blocks-keyboard .keyboard-category-selector > .category-label, .operators-keyboard .keyboard-category-selector > .category-label {
    min-width: 52px;
  }
}
@media (max-width: 780px) and (min-width: 400px) {
  .blocks-keyboard .keyboard-category-selector > .category-label, .operators-keyboard .keyboard-category-selector > .category-label {
    width: 55px;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard label > div.category-label[data-blockset], .operators-keyboard label > div.category-label[data-blockset] {
    background-color: var(--col-keyboard-bg-highlight);
    margin: 4px;
    border-radius: 10px;
    height: 38px;
    width: 38px;
  }
  .blocks-keyboard label > div.category-label[data-blockset] > span, .operators-keyboard label > div.category-label[data-blockset] > span {
    display: none;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .category-label[data-blockset], .operators-keyboard .category-label[data-blockset] {
    --display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0);
    color: var(--col-text);
  }
  .blocks-keyboard .category-label[data-blockset] > img, .operators-keyboard .category-label[data-blockset] > img {
    width: 30px;
    height: 30px;
    margin: 0;
  }
  .blocks-keyboard .category-label[data-blockset] > span, .operators-keyboard .category-label[data-blockset] > span {
    font-size: 10px;
  }
  .blocks-keyboard .category-label[data-blockset].kb-selected, .operators-keyboard .category-label[data-blockset].kb-selected {
    border-radius: 0;
    background-color: var(--col-keyboard-bg-highlight);
  }
}
@media (max-width: 780px) {
  .blocks-keyboard #kb-option-selector, .operators-keyboard #kb-option-selector {
    position: fixed;
    display: block;
    opacity: 0;
    bottom: 0;
    left: 0;
    margin: 4px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard div.keyboard-blocks-container, .operators-keyboard div.keyboard-blocks-container {
    height: 140px;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 44px);
    align-items: center;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects], .operators-keyboard div.keyboard-blocks-container[data-sort=objects] {
    grid-template-rows: repeat(2, 66px);
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content {
    font-size: 0;
    transform: scale(1.6);
    margin: 0;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content span, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content span {
    display: none;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content .block-name, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content .block-name {
    text-align: center;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content .operator, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.block-content .operator {
    min-width: 0;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.param-bubble, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.param-bubble {
    display: contents;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.param-bubble > .operator.fw, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.param-bubble > .operator.fw {
    background: none;
    width: 40px;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] img, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] img {
    margin: 0;
    --ff-obj-scale: 0.88885;
  }
  .blocks-keyboard div.keyboard-blocks-container[data-sort=objects] div.block.obj, .operators-keyboard div.keyboard-blocks-container[data-sort=objects] div.block.obj {
    height: 60px;
    width: 60px;
    margin-inline: 4px;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard div.keyboard-blocks-container div.block,
.blocks-keyboard div.combined-grid > div.block, .operators-keyboard div.keyboard-blocks-container div.block,
.operators-keyboard div.combined-grid > div.block {
    font-size: 15px;
    height: 36px;
    padding: 2px 10px;
    margin: 4px 8px;
    width: 185px;
    justify-content: center;
    max-width: none;
  }
  .blocks-keyboard div.keyboard-blocks-container div.block.abl, .blocks-keyboard div.keyboard-blocks-container div.block.crule,
.blocks-keyboard div.combined-grid > div.block.abl,
.blocks-keyboard div.combined-grid > div.block.crule, .operators-keyboard div.keyboard-blocks-container div.block.abl, .operators-keyboard div.keyboard-blocks-container div.block.crule,
.operators-keyboard div.combined-grid > div.block.abl,
.operators-keyboard div.combined-grid > div.block.crule {
    padding-left: 20px;
  }
  .blocks-keyboard div.keyboard-blocks-container div.block .bl-handle,
.blocks-keyboard div.combined-grid > div.block .bl-handle, .operators-keyboard div.keyboard-blocks-container div.block .bl-handle,
.operators-keyboard div.combined-grid > div.block .bl-handle {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .blocks-keyboard div.keyboard-blocks-container div.block.operator,
.blocks-keyboard div.combined-grid > div.block.operator, .operators-keyboard div.keyboard-blocks-container div.block.operator,
.operators-keyboard div.combined-grid > div.block.operator {
    overflow: hidden;
    width: 144px;
    text-align: center;
    font-size: 15px;
    margin: 4px;
  }
  .blocks-keyboard div.keyboard-blocks-container div.block.dotted,
.blocks-keyboard div.combined-grid > div.block.dotted, .operators-keyboard div.keyboard-blocks-container div.block.dotted,
.operators-keyboard div.combined-grid > div.block.dotted {
    color: var(--col-keyboard-border);
  }
  .blocks-keyboard div.keyboard-blocks-container div.block.dotted::before,
.blocks-keyboard div.combined-grid > div.block.dotted::before, .operators-keyboard div.keyboard-blocks-container div.block.dotted::before,
.operators-keyboard div.combined-grid > div.block.dotted::before {
    border-color: var(--col-keyboard-border);
  }
}
@media (max-width: 780px) {
  .blocks-keyboard [data-blockset=objects] .keyboard-header, .operators-keyboard [data-blockset=objects] .keyboard-header {
    padding-inline: 6px;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .hs-custom .keyboard-blocks-container[data-group] > :first-child div.block-content span, .operators-keyboard .hs-custom .keyboard-blocks-container[data-group] > :first-child div.block-content span {
    font-size: 12px;
    margin: 0;
    display: block;
  }
  .blocks-keyboard .hs-custom .keyboard-blocks-container[data-group] > :first-child div.param-bubble, .operators-keyboard .hs-custom .keyboard-blocks-container[data-group] > :first-child div.param-bubble {
    display: none;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .hs-custom .keyboard-blocks-container[data-group] div.operator, .operators-keyboard .hs-custom .keyboard-blocks-container[data-group] div.operator {
    border-radius: 0;
  }
  .blocks-keyboard .hs-custom .keyboard-blocks-container[data-group] div.operator > img, .operators-keyboard .hs-custom .keyboard-blocks-container[data-group] div.operator > img {
    width: 32px;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .hs-shapes .keyboard-blocks-container[data-group] div.block-content, .operators-keyboard .hs-shapes .keyboard-blocks-container[data-group] div.block-content {
    transform: scale(1.2);
  }
}
@media (max-width: 780px) {
  .blocks-keyboard .kb-hide, .operators-keyboard .kb-hide {
    display: none;
  }
}
@media (max-width: 780px) {
  .blocks-keyboard div.block, .operators-keyboard div.block {
    --bg-img-override: none;
  }
}
@media (max-width: 780px) {
  .operators-keyboard {
    bottom: calc(var(--block-keyboard-height) * -1);
  }
  .operators-keyboard.open {
    bottom: 0;
  }
  .operators-keyboard .keyboard-section.hs-custom-obj div.keyboard-blocks-container {
    display: grid;
  }
  .operators-keyboard .keyboard-section.hs-custom-obj .object-image:not(:first-child) img {
    width: 44px;
    height: 44px;
  }
  .operators-keyboard .keyboard-category-selector {
    display: flex;
    transition: bottom 0.2s;
    bottom: calc(var(--block-keyboard-height) * -1);
  }
  .operators-keyboard.open .keyboard-category-selector {
    bottom: 0;
  }
  .operators-keyboard .keyboard-category-selector > .category-label {
    background-color: transparent;
    color: var(--col-text);
    text-align: center;
    --display: flex;
    flex-direction: column;
  }
  .operators-keyboard .keyboard-category-selector > .category-label > img {
    margin-right: 0;
  }
  .operators-keyboard .keyboard-category-selector > .category-label.kb-selected {
    border-radius: 0;
    background-color: var(--col-keyboard-bg-highlight);
  }
}
@media (max-width: 780px) and (min-width: 370px) {
  .operators-keyboard .keyboard-category-selector > .category-label {
    min-width: 60px;
  }
}
@media (max-width: 780px) {
  .operators-keyboard .keyboard-section[data-clone=false] > .keyboard-header {
    display: flex;
  }
  .operators-keyboard .keyboard-section[data-clone=false] > .keyboard-header + div {
    padding-top: 0;
  }
  .operators-keyboard .keyboard-section > div.keyboard-blocks-container {
    padding: 0 4px;
  }
}
@media (max-width: 780px) {
  .operators-keyboard div.param-bubble {
    height: 36px;
    margin: 4px 8px;
    border-radius: 20px;
  }
}
@media (max-width: 780px) and (prefers-color-scheme: dark) {
  .operators-keyboard div.param-bubble {
    background-color: var(--col-keyboard-bg-highlight);
  }
}
@media (max-width: 780px) {
  .operators-keyboard .hs-stage-objects div.param-bubble {
    width: 160px;
    height: 36px;
    margin: 4px 8px;
  }
}
@media (max-width: 780px) {
  .operators-keyboard .hs-text-obj .keyboard-header, .operators-keyboard .hs-characters .keyboard-header, .operators-keyboard .hs-jungle .keyboard-header, .operators-keyboard .hs-shapes .keyboard-header {
    padding-inline: 6px;
  }
}
@media (max-width: 780px) {
  .operators-keyboard div.hs-object-image-container .keyboard-blocks-container {
    grid-template-rows: repeat(2, 66px);
  }
  .operators-keyboard div.hs-object-image-container .keyboard-blocks-container .object-image {
    width: 60px;
    height: 60px;
    margin: 4px;
    border-radius: 10px;
  }
}
@media (max-width: 780px) {
  .operators-keyboard .combined-grid {
    padding: 0 4px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, 44px);
  }
}
@media (max-width: 780px) {
  .removal-dropzone {
    position: fixed;
    top: unset;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: var(--block-keyboard-height);
    border-radius: 0;
  }
}
#poof-animation {
  position: fixed;
  transform: translate(-50%, -50%) scale(0.75);
  width: 64px;
  height: 64px;
  z-index: 102;
  pointer-events: none;
}
#poof-animation img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation-name: fade;
  animation-duration: 0.15s;
}
#poof-animation img:nth-child(1) {
  animation-delay: -0.05s;
}
#poof-animation img:nth-child(2) {
  animation-delay: 0.06s;
}
#poof-animation img:nth-child(3) {
  animation-delay: 0.17s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.editor-controls-container {
  position: fixed;
  top: 4px;
  right: 52px;
  margin: 0;
  display: flex;
  z-index: 110;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.editor-controls-container button.undo-btn, .editor-controls-container button.redo-btn {
  background-image: url("/images/editor/arrow-circle.svg");
  background-size: cover;
}
.editor-controls-container button.undo-btn {
  transform: scaleX(-1);
}

button.ui-button {
  background-color: rgba(0, 0, 0, 0.54);
  color: white;
  border-radius: 4px;
  width: 44px;
  height: 44px;
  margin: 2px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button.ui-button[disabled] {
  filter: brightness(0.75);
  -webkit-filter: brightness(0.75);
  opacity: 1;
}

.keyboard-button-container {
  position: fixed;
  bottom: 4px;
  left: 4px;
  z-index: 10;
  display: none;
}
@media (max-width: 780px) {
  .keyboard-button-container {
    display: block;
  }
}
.keyboard-button-container button {
  background-image: url("/images/editor/keyboard.svg");
  background-size: 75%;
  background-position: center;
  background-repeat: no-repeat;
}

#blocks-container-wrapper {
  --scale-factor: 1;
  --base-width: calc(100% - var(--block-keyboard-width));
  box-sizing: border-box;
  margin-left: var(--block-keyboard-width);
  transform-origin: 0px 0;
  position: relative;
  transform: scale(var(--scale-factor));
  padding-top: calc(52px / var(--scale-factor));
  padding-inline: calc(8px / var(--scale-factor));
  padding-bottom: calc((56px + var(--block-keyboard-height)) / var(--scale-factor));
  transform-box: fill-box;
  margin-bottom: 0%;
  width: calc(var(--base-width) / var(--scale-factor));
  min-height: 100%;
}
#blocks-container-wrapper > .bl-container {
  padding: 0;
}
#blocks-container-wrapper .block.dotted {
  color: var(--col-text);
}
#blocks-container-wrapper .block.dotted::before {
  border-color: var(--col-text);
}
#blocks-container-wrapper .block.dotted .plus {
  font-size: 24px;
}
#blocks-container-wrapper span.block-name[contenteditable] {
  border-color: transparent;
  border-width: 1px 0;
  border-bottom: 1px dotted;
  display: inline-block;
  outline: none;
  transition: border 0.2s;
  position: relative;
}
#blocks-container-wrapper span.block-name[contenteditable]::before {
  --scale: 0;
  content: " ";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%) scaleX(var(--scale));
  transition: transform 0.2s;
  border-bottom: 1px solid;
  pointer-events: none;
}
#blocks-container-wrapper span.block-name[contenteditable]:focus::before {
  --scale: 1;
}
#blocks-container-wrapper span.block-name[contenteditable]:empty::after {
  content: "Name";
  opacity: 0.6;
  cursor: text;
}
#blocks-container-wrapper > .parameter-tooltip {
  display: flex;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  color: white;
  transform: translate(-50%, -110%);
  border-radius: 4px;
  animation-duration: 0.5s;
  white-space: nowrap;
}
#blocks-container-wrapper > .parameter-tooltip::before {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
#blocks-container-wrapper > .parameter-tooltip span, #blocks-container-wrapper > .parameter-tooltip button {
  display: inline-block;
  padding: 6px 10px;
  background-color: rgba(0, 0, 0, 0);
  font: inherit;
  color: inherit;
  transition: opacity 0.2s;
  box-sizing: border-box;
  height: 32px;
}
#blocks-container-wrapper > .parameter-tooltip hr {
  display: inline;
  margin: 0;
  border: 0.5px solid rgba(238, 238, 238, 0.6666666667);
}
#blocks-container-wrapper > .project-cursor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid #11e4c8;
  border-radius: 4px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.bl-container {
  background: none;
  padding: 8px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

.block-wrapper.cursor-before {
  margin-top: 12px;
}
.block-wrapper.cursor-after {
  margin-bottom: 12px;
}
.block-wrapper .block-wrapper.pseudo-frame > .collapsible.cursor-after {
  position: relative;
  top: 0;
  margin: -10px 0;
}

.selected > div.block {
  opacity: 1;
  box-shadow: #11e4c8 0 0 0 2px inset;
}

.invis > div.block {
  opacity: 0.6;
  padding: 0 10px 0 10px;
  border: 2px solid #11e4c8;
  height: 0;
}

.dragged {
  opacity: 0.5 !important;
}

.collapsible {
  /* Hide controls scripts if the block is not a control block */
  display: none;
}

.collapsible-container > .collapsible {
  padding: 0 16px 36px;
  position: relative;
  display: block;
}

.collapsible:nth-child(3) {
  padding-top: 24px;
}

.collapsible-container {
  position: relative;
  --col-frame: #3e83be;
  height: auto !important;
}

.collapsible-container.draw {
  --col-frame: #a6006e;
}

.collapsible-container.abl, .collapsible-container.crule, .collapsible-container.scn {
  --col-frame: #f2f2f2;
}

.collapsible-container.rule {
  --col-frame: #be2961;
}

.collapsible-container.obj {
  --col-frame: #6bdaed;
}

.pseudo-frame {
  --col-frame: #0000;
}

.pseudo-frame > div.block {
  display: none;
}

.pseudo-frame > .collapsible {
  padding: 0;
}
.pseudo-frame > .collapsible:empty {
  position: absolute;
  width: 100%;
  top: -12px;
  padding: 16px 0;
}

.collapsible-container > div.block {
  width: calc(100% - 108px);
  padding-right: 80px;
}

.collapsible-container:not(.invis)::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 8px solid var(--col-frame);
  border-radius: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  display: block;
}

.collapsible-container:not(.invis) .collapsible:nth-child(3)::before {
  padding: 0 4px;
  color: white;
  content: "Else";
  font-size: 18px;
  pointer-events: none;
  position: absolute;
  top: -24px;
  background-color: var(--col-frame);
  width: calc(100% - 36px);
  height: 40px;
  display: flex;
  align-items: center;
}

.invis .collapsible {
  display: none;
}

div.block div.block-content {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  width: 100%;
}
div.block div.block-content::-webkit-scrollbar {
  display: none;
}
div.block div.block-content > .text-wrapper {
  display: contents;
}
div.block div.block-content > span:first-child {
  margin-left: 0;
}
div.block div.block-content > span, div.block div.block-content > .text-wrapper > span {
  margin: 0 2px;
}
div.block div.block-content > span:empty, div.block div.block-content > .text-wrapper > span:empty {
  display: none;
}

div.block {
  display: inline-flex;
  padding: 2px 12px 2px 12px;
  border-radius: 10px;
  font-size: 18px;
  color: white;
  align-items: center;
  height: 42px;
  position: relative;
  margin: 8px;
  overflow-x: hidden;
  max-width: calc(100% - 40px);
  background-color: #888;
  --col-bg-inherited: #888;
  scroll-margin: 32px;
  scroll-padding: 32px;
}
div.block .edit-scene-btn {
  display: flex;
  cursor: pointer;
  margin-right: 6px;
  transition: opacity 0.2s;
}
div.block .edit-scene-btn:hover {
  opacity: 0.8;
}
div.block .edit-scene-btn:active {
  opacity: 0.5;
}
div.block .edit-scene-btn .hs-expand::before {
  font-size: 0.4em;
  transform: scale(2.75);
  display: block;
  padding: 0.67em;
}

div.block .bl-handle {
  display: flex;
  margin-inline: auto 0;
  cursor: grab;
}
div.block .bl-handle:active {
  cursor: grabbing;
}
div.block .bl-handle .hs-drag-handle::before {
  font-size: 0.4em;
  transform: scale(2.5);
  display: block;
  padding: 0.75em;
}

div.block b {
  background-color: inherit;
  height: calc(100% - 8px);
  padding: 0px 6px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  position: relative;
}

div.block b::before {
  font-weight: 400;
  font-size: 22px;
  background-color: inherit;
  position: relative;
  top: -1px;
}

div.block div.openbtn::before {
  display: block;
  background-color: rgba(0, 0, 0, 0);
  content: " ";
  background-image: url("/images/back-arrow.svg");
  width: 100%;
  height: 100%;
  background-size: 10px;
  transform: rotate(180deg);
  background-repeat: no-repeat;
  background-position: center;
  padding: 8px 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rotate, 180deg));
}

div.block.crule div.openbtn::before {
  color: white;
}

.collapsible-container > div.block div.openbtn::before {
  content: " ";
  --rotate: 90deg;
}

div.block b.editbtn:hover, *:not(.disabled) > div.block div.openbtn:hover {
  opacity: 0.7;
  cursor: pointer;
}

div.block b.editbtn:active, *:not(.disabled) > div.block div.openbtn:active {
  opacity: 0.4;
}

div.block b.handle {
  cursor: grab;
}

div.block div.openbtn {
  padding: 0 2px;
  background: none;
  width: 25px;
  height: 25px;
  text-align: center;
  margin: 0;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div.block div.openbtn.large {
  transform: scale(1.33);
}

.disabled div.openbtn {
  opacity: 0.3;
  cursor: not-allowed;
}

div.block b.handle:active {
  cursor: grabbing;
}

.collapsible-container > div.block b.handle {
  position: absolute;
  right: 12px;
}

.collapsible-container > div.block b.editbtn {
  position: absolute;
  right: 44px;
}

div.block * {
  margin: 0 4px;
}

div.block.move {
  background-color: #d73e1e;
  --col-bg-inherited: #d73e1e;
}

div.block.looks {
  background-color: #63ae1e;
  --col-bg-inherited: #63ae1e;
}

div.block.draw {
  background-color: #a6006e;
  --col-bg-inherited: #a6006e;
}

div.block.var {
  background-color: #e7b601;
  --col-bg-inherited: #e7b601;
}

div.block.ctrl {
  background-color: #3e83be;
  --col-bg-inherited: #3e83be;
}

div.block.old {
  background-color: #647f96;
  --col-bg-inherited: #647f96;
}

div.block.abl, div.block.crule, div.block.scn {
  background-color: #f2f2f2;
  --col-bg-inherited: #f2f2f2;
  color: black;
  background-image: url(../images/ability-bars.png);
  background-position: 0, 0;
  background-size: 48px;
  background-repeat: no-repeat;
}

:is(div.block.abl, div.block.scn) div.openbtn::before {
  filter: brightness(0);
  -webkit-filter: brightness(0);
}

div.block.scn {
  background-image: url(../images/scene-bars.png);
}

div.block.crule {
  background-image: url(../images/crule-bars.png);
}

div.block.rule {
  background-color: #be2961;
  --col-bg-inherited: #be2961;
}

div.block.obj {
  background-color: #6bdaed;
  --col-bg-inherited: #6bdaed;
}

div.block.dotted {
  background-image: none;
  background-color: inherit;
  overflow: hidden;
  color: white;
  cursor: pointer;
}
div.block.dotted::before {
  --size-offset: 2px;
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + var(--size-offset));
  height: calc(100% + var(--size-offset));
  box-sizing: border-box;
  border: 2px dashed #ddd;
  border-radius: 11px;
}
div.block.dotted:active {
  opacity: 0.7;
}
div.block.dotted.operator {
  color: white;
}
div.block.dotted.operator::before {
  opacity: 1;
  z-index: 0;
  --size-offset: 2px;
  border-color: white;
  border-radius: 21px;
}
@media (max-width: 780px) {
  div.block.dotted {
    color: #444;
  }
  div.block.dotted::before {
    border-color: #444;
  }
}

div.param-bubble {
  min-height: 32px;
  background-color: white;
  color: black;
  border: 2px solid white;
  border-radius: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
div.param-bubble.selected {
  border-color: #11e4c8;
}
div.param-bubble:empty {
  min-width: 56px;
}
div.param-bubble .hs-sound, div.param-bubble .hs-instrument, div.param-bubble .hs-note {
  font-size: 30px;
  transform: scale(1.25);
  width: 48px;
  display: flex;
  justify-content: center;
}
div.param-bubble .hs-note {
  width: 96px;
}
div.param-bubble .hs-rhythm {
  transform: translate(4px, 0) scale(2);
  padding: 0 4px;
  pointer-events: none;
}
div.param-bubble .operator.invis {
  width: 48px;
  height: 32px;
  overflow: visible;
  background: none;
  color: rgba(0, 0, 0, 0);
  pointer-events: none;
}
div.param-bubble .operator.invis:not(:first-child:last-child) {
  position: absolute;
  width: calc(100% - 8px);
  height: 100%;
}
div.param-bubble .operator.invis::after {
  content: " ";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  top: -2px;
  box-sizing: border-box;
  position: absolute;
  border: 2px solid #1ed8be;
  border-radius: 20px;
}
div.param-bubble .operator.invis * {
  display: none;
}

div.param-bubble.fw {
  min-width: 56px;
}

div.param-bubble > span {
  min-width: 44px;
  padding: 0 4px;
  text-align: center;
  max-width: 192px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
div.param-bubble > span.placeholder {
  opacity: 0.4;
}

div.param-bubble img + span {
  padding-inline: 0 4px;
  margin-inline: 2px 4px;
  min-width: 0;
}

div.param-bubble::before, .operator::before {
  content: "-";
  z-index: -1;
  width: 0;
  opacity: 0;
  pointer-events: none;
  position: relative;
}

div.operator {
  display: inline-flex;
  color: white;
  border: 0px solid white;
  height: 36px;
  border-radius: 32px;
  align-items: center;
  margin: 0px 0px;
  padding: 0 4px;
}
div.operator > .param-bubble + span {
  margin-left: 0;
}
div.operator > .param-bubble + span:not(:last-child) {
  margin-right: 0;
}
div.operator:not(.block) > span:empty {
  display: none;
}
div.operator:not(.block) > span:not(:last-child) {
  margin-right: 0;
}

.operator.val {
  background-color: #f9cc1e;
  --col-bg-inherited: #f9cc1e;
}

.operator.otr {
  background-color: #f9ad1e;
  --col-bg-inherited: #f9ad1e;
}

.operator.rcol {
  width: 48px;
  height: 32px;
  background: linear-gradient(130deg, #ff2764 5%, #1acfff 95%);
}

.operator.fw {
  min-width: 48px;
  overflow-y: hidden;
  justify-content: center;
}

.operator:is(.val, .otr) > div.param-bubble + span {
  margin-left: 0;
}

.operator.cm > span:first-child:not(:last-child) {
  margin-right: 0;
  padding: 0;
}

.operator img, div.param-bubble > img {
  position: relative;
  top: 0;
  height: 30px;
  object-fit: contain;
  pointer-events: none;
  --ff-obj-scale: 1;
}

@supports not (zoom: 1) {
  #drawer-resizer .bl-container div.block .operator img, div.param-bubble > img {
    height: 20px;
    --ff-obj-scale: calc(2 / 3);
  }
}
.operator.cm {
  --ia: 0.2;
  --ba: 0.2;
  background-color: var(--col-bg-inherited);
  background-image: linear-gradient(rgba(0, 0, 0, var(--ia)), rgba(0, 0, 0, var(--ia)));
}

.block .operator.cm .operator.cm:not(.math) {
  --ba: inherit;
}
.block .operator.cm .operator.cm {
  --ia: calc(var(--ba) + 0.2);
}
.block .operator.cm .operator.cm .operator.cm {
  --ia: calc(var(--ba) + 0.4);
}
.block .operator.cm .operator.cm .operator.cm .operator.cm {
  --ia: calc(var(--ba) + 0.6);
}
.block .operator.cm .operator.cm .operator.cm .operator.cm .operator.cm {
  --ia: calc(var(--ba) + 0.8);
}
.block .operator.cm .operator.cm .operator.cm .operator.cm .operator.cm .operator.cm {
  --ia: calc(var(--ba) + 1.0);
}

.operator.math {
  background-color: #733977;
  --col-bg-inherited: #733977;
  --ia: 0;
  --ba: 0;
}

.operator.looks {
  background-color: #63ae1e;
  --col-bg-inherited: #63ae1e;
  --ia: 0;
  --ba: 0;
}

.operator.prod, .operator.scene {
  background-color: #3e83be;
  --col-bg-inherited: #3e83be;
}

.fullscreen.customblock-composer,
.fullscreen.parameter-text-editor,
.fullscreen.variable-name-editor,
.fullscreen.object-canvas-editor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 150;
  background-color: var(--col-bg-translucent);
  touch-action: none;
}
.fullscreen.customblock-composer.hidden,
.fullscreen.parameter-text-editor.hidden,
.fullscreen.variable-name-editor.hidden,
.fullscreen.object-canvas-editor.hidden {
  display: none;
}
.fullscreen.customblock-composer *,
.fullscreen.parameter-text-editor *,
.fullscreen.variable-name-editor *,
.fullscreen.object-canvas-editor * {
  -webkit-tap-highlight-color: transparent;
}
.fullscreen.customblock-composer > h2,
.fullscreen.parameter-text-editor > h2,
.fullscreen.variable-name-editor > h2,
.fullscreen.object-canvas-editor > h2 {
  position: fixed;
  top: 15%;
  text-align: center;
  width: 100%;
  margin: 0;
  font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .fullscreen.customblock-composer > h2,
.fullscreen.parameter-text-editor > h2,
.fullscreen.variable-name-editor > h2,
.fullscreen.object-canvas-editor > h2 {
    color: white;
  }
}
.fullscreen.customblock-composer > div.block-preview,
.fullscreen.parameter-text-editor > div.block-preview,
.fullscreen.variable-name-editor > div.block-preview,
.fullscreen.object-canvas-editor > div.block-preview {
  text-align: center;
  top: calc(15% + 3em);
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  padding: 0 5%;
}
.fullscreen.customblock-composer > div.block-preview .openbtn,
.fullscreen.parameter-text-editor > div.block-preview .openbtn,
.fullscreen.variable-name-editor > div.block-preview .openbtn,
.fullscreen.object-canvas-editor > div.block-preview .openbtn {
  visibility: hidden;
}
.fullscreen.customblock-composer > div.block-preview .bl-handle,
.fullscreen.parameter-text-editor > div.block-preview .bl-handle,
.fullscreen.variable-name-editor > div.block-preview .bl-handle,
.fullscreen.object-canvas-editor > div.block-preview .bl-handle {
  display: none;
}
.fullscreen.customblock-composer .block-content > span:first-child:empty,
.fullscreen.parameter-text-editor .block-content > span:first-child:empty,
.fullscreen.variable-name-editor .block-content > span:first-child:empty,
.fullscreen.object-canvas-editor .block-content > span:first-child:empty {
  display: inline-block;
}
.fullscreen.customblock-composer .block-content > span:first-child:empty::before,
.fullscreen.parameter-text-editor .block-content > span:first-child:empty::before,
.fullscreen.variable-name-editor .block-content > span:first-child:empty::before,
.fullscreen.object-canvas-editor .block-content > span:first-child:empty::before {
  content: "Name";
  color: rgba(0, 0, 0, 0.5333333333);
  cursor: text;
}
.fullscreen.customblock-composer .block-content > .text-wrapper:nth-child(n+2),
.fullscreen.parameter-text-editor .block-content > .text-wrapper:nth-child(n+2),
.fullscreen.variable-name-editor .block-content > .text-wrapper:nth-child(n+2),
.fullscreen.object-canvas-editor .block-content > .text-wrapper:nth-child(n+2) {
  border: 2px solid white;
  border-radius: 20px;
  display: inline-block;
  margin-inline: 4px 20px;
  padding: 6px 8px;
  position: relative;
  background-color: #f9cc1e;
  color: white;
  outline: none;
}
.fullscreen.customblock-composer .block-content > .text-wrapper:nth-child(n+2) span,
.fullscreen.parameter-text-editor .block-content > .text-wrapper:nth-child(n+2) span,
.fullscreen.variable-name-editor .block-content > .text-wrapper:nth-child(n+2) span,
.fullscreen.object-canvas-editor .block-content > .text-wrapper:nth-child(n+2) span {
  margin: 0;
  display: inline-block;
}
.fullscreen.customblock-composer .block-content > .text-wrapper:nth-child(n+2) span:empty::before,
.fullscreen.parameter-text-editor .block-content > .text-wrapper:nth-child(n+2) span:empty::before,
.fullscreen.variable-name-editor .block-content > .text-wrapper:nth-child(n+2) span:empty::before,
.fullscreen.object-canvas-editor .block-content > .text-wrapper:nth-child(n+2) span:empty::before {
  content: "Name";
  color: rgba(255, 255, 255, 0.5333333333);
  cursor: text;
}
.fullscreen.customblock-composer .block-content > .text-wrapper:nth-child(n+2)::after,
.fullscreen.parameter-text-editor .block-content > .text-wrapper:nth-child(n+2)::after,
.fullscreen.variable-name-editor .block-content > .text-wrapper:nth-child(n+2)::after,
.fullscreen.object-canvas-editor .block-content > .text-wrapper:nth-child(n+2)::after {
  content: "=";
  position: absolute;
  right: -20px;
  color: black;
}
.fullscreen.customblock-composer .block-content .param-bubble > span:empty::before,
.fullscreen.parameter-text-editor .block-content .param-bubble > span:empty::before,
.fullscreen.variable-name-editor .block-content .param-bubble > span:empty::before,
.fullscreen.object-canvas-editor .block-content .param-bubble > span:empty::before {
  content: "10";
  color: rgba(0, 0, 0, 0.4);
  cursor: text;
}
.fullscreen.customblock-composer .block-content .text-wrapper,
.fullscreen.parameter-text-editor .block-content .text-wrapper,
.fullscreen.variable-name-editor .block-content .text-wrapper,
.fullscreen.object-canvas-editor .block-content .text-wrapper {
  display: contents;
}
.fullscreen.customblock-composer .add-btn,
.fullscreen.parameter-text-editor .add-btn,
.fullscreen.variable-name-editor .add-btn,
.fullscreen.object-canvas-editor .add-btn {
  display: inline-flex;
  align-items: center;
  margin-right: -4px;
}
.fullscreen.customblock-composer .add-btn button,
.fullscreen.parameter-text-editor .add-btn button,
.fullscreen.variable-name-editor .add-btn button,
.fullscreen.object-canvas-editor .add-btn button {
  background-image: url("/images/editor/plus-circle-dashed.svg");
  background-size: cover;
  background-color: transparent;
  width: 36px;
  height: 36px;
  margin: 0;
}
.fullscreen.customblock-composer .add-btn button:focus,
.fullscreen.parameter-text-editor .add-btn button:focus,
.fullscreen.variable-name-editor .add-btn button:focus,
.fullscreen.object-canvas-editor .add-btn button:focus {
  opacity: 0.5;
}
.fullscreen.customblock-composer span[contenteditable],
.fullscreen.parameter-text-editor span[contenteditable],
.fullscreen.variable-name-editor span[contenteditable],
.fullscreen.object-canvas-editor span[contenteditable] {
  display: inline-block;
  outline: none;
}
.fullscreen.customblock-composer > button,
.fullscreen.parameter-text-editor > button,
.fullscreen.variable-name-editor > button,
.fullscreen.object-canvas-editor > button {
  position: fixed;
  top: 0;
  padding: 8px 14px;
  margin: 16px;
  font-family: inherit;
  font-size: 18px;
  min-width: 80px;
  border-radius: 4px;
}
.fullscreen.customblock-composer > button:not(.ui-button):focus,
.fullscreen.parameter-text-editor > button:not(.ui-button):focus,
.fullscreen.variable-name-editor > button:not(.ui-button):focus,
.fullscreen.object-canvas-editor > button:not(.ui-button):focus {
  opacity: 0.7;
}
.fullscreen.customblock-composer > button[role=cancel],
.fullscreen.parameter-text-editor > button[role=cancel],
.fullscreen.variable-name-editor > button[role=cancel],
.fullscreen.object-canvas-editor > button[role=cancel] {
  right: 96px;
}
.fullscreen.customblock-composer > button[role=save],
.fullscreen.parameter-text-editor > button[role=save],
.fullscreen.variable-name-editor > button[role=save],
.fullscreen.object-canvas-editor > button[role=save] {
  right: 0;
}

.fullscreen.parameter-text-editor > h2,
.fullscreen.variable-name-editor > h2 {
  top: 13%;
}
.fullscreen.parameter-text-editor .text-editor,
.fullscreen.variable-name-editor .text-editor {
  text-align: center;
  top: calc(12% + 4em);
  position: fixed;
  width: 100%;
}
.fullscreen.parameter-text-editor input, .fullscreen.parameter-text-editor textarea,
.fullscreen.variable-name-editor input,
.fullscreen.variable-name-editor textarea {
  width: 40%;
  min-width: 280px;
  border-width: 1px;
  border-style: solid;
  font-family: inherit;
  font-size: 20px;
  line-height: 32px;
  padding: 12px 16px;
  box-sizing: border-box;
  resize: none;
  border-radius: 8px;
  outline: none;
  caret-color: #19d8bf;
  text-align: center;
}
.fullscreen.parameter-text-editor input:focus, .fullscreen.parameter-text-editor textarea:focus,
.fullscreen.variable-name-editor input:focus,
.fullscreen.variable-name-editor textarea:focus {
  border-color: #19d8bf;
}
.fullscreen.parameter-text-editor textarea,
.fullscreen.variable-name-editor textarea {
  width: 80%;
  height: 40vh;
  max-height: calc(75vh - 300px);
  text-align: left;
}

.fullscreen.object-canvas-editor {
  padding-top: 0;
  z-index: 103;
}
.fullscreen.object-canvas-editor #object-canvas-container {
  --scale: 1;
  position: fixed;
  top: calc(50% + 14px);
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
  background: var(--editor-bg);
  background-position: 0% 100%;
}
.fullscreen.object-canvas-editor button#save-scene {
  position: fixed;
  top: 4px;
  right: 4px;
  margin: 2px;
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 4px;
}
.fullscreen.object-canvas-editor i.hs-confirm {
  font-size: 18px;
  font-weight: bold;
  position: relative;
  top: 1px;
  left: -1px;
}
.fullscreen.object-canvas-editor h2 {
  margin: 0;
  top: 4px;
  left: 4px;
  margin: 2px;
  position: fixed;
  height: 44px;
  padding: 8px 16px;
  width: auto;
  box-sizing: border-box;
}

button.accent {
  background-color: #11e4c8;
  color: white;
}
button.accent[disabled] {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.5333333333);
  opacity: 0.9;
}

div#embed-container {
  z-index: 120;
}
div#embed-container div.button-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 120;
}
div#embed-container .exit-project-options {
  position: fixed;
  z-index: 120;
}
div#embed-container.hidden {
  display: contents;
}

.webexp-embedded #embed-container {
  display: none;
}

/* Viewing Mode */
b.editbtn, b.handle {
  display: none;
}

.collapsible-container > div.block {
  padding-right: 12px;
  width: calc(100% - 40px);
}

@media only screen and (max-width: 780px) {
  #blocks-container {
    padding-inline: calc(4px / var(--scale-factor));
  }
  div.block {
    max-width: calc(100% - 36px);
    margin: 6px;
  }
  .collapsible-container > div.block {
    width: calc(100% - 36px);
  }
  .collapsible-container:not(.pseudo-frame) > .collapsible {
    padding-inline: 10px;
    padding-bottom: 32px;
  }
  .collapsible-container:not(.invis) .collapsible:nth-child(3)::before {
    width: calc(100% - 28px);
  }
  .collapsible-container:not(.invis)::before {
    border-width: 6px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }
}

/*# sourceMappingURL=editor.css.map */