body,
button,
input,
select,
textarea {
  font: 10pt "w95faregular";
  letter-spacing: 0;
}

body {
  min-width: 650px;
  margin: 8px;
  text-align: center;
  background-color: #00817f;
  color: #000;
}

main,
#hints {
  text-align: left;
}

main {
  width: 630px;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style-type: none;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

button {
  padding: 5px;
  cursor: pointer;
}

button,
input[type="color"],
.menu > ul > li,
.text form > label,
.text form > .form-row,
#font_preview,
#stage_toolbar {
  background-color: #babade;
  border: 2px outset #babade;
  box-shadow: 0 0 0 1px #000;
}

button:active,
.menu-tab.is-active {
  border-style: inset;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

aside,
#stage,
#layers_panel,
.menu,
#hints {
  border: 1px solid #000;
}

#workspace {
  display: grid;
  grid-template-columns: 210px 210px 210px;
  height: 201px;
}

aside,
#layers_panel {
  height: 200px;
}

aside > ul {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.menu-heading {
  flex: 0 0 25px;
  background-color: #3d3d77;
  background-image: linear-gradient(
    90deg,
    #3d3d77 0%,
    #ba8ec8 100%
  );
}

aside h4,
#layers_panel h4,
.panel-heading h4 {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  color: #fff;
  background: transparent;
}

aside li:not(.menu-heading) {
  flex: 1;
}

.menu-tab {
  width: 100%;
  height: 100%;
  text-align: left;
  color: #000;
}

.menu-tab.is-active {
  color: #fff;
  background-color: #7272a5;
  box-shadow:
    inset 1px 1px 0 #000,
    inset -1px -1px 0 #d8d8ef;
}

#editor_column {
  height: 200px;
  padding: 10px;
  box-sizing: border-box;
}

#stage_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 25px;
  padding: 2px 5px;
  box-sizing: border-box;
}

#zoom_level {
  width: 55px;
}

#stage {
  position: relative;
  width: 190px;
  height: 150px;
  margin-top: 5px;
  padding: 8px;
  overflow: auto;
  box-sizing: border-box;
  background-color: #fff;
  background-image: url("graphics/checkerboard.png");
}

#preview_bounds {
  position: relative;
  flex: none;
}

#preview_visual {
  position: relative;
  width: 172px;
  height: 132px;
  transform-origin: top left;
}

.button {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.button.is-dragging {
  cursor: grabbing;
}

.editor-layer {
  position: absolute;
  touch-action: none;
  user-select: none;
  cursor: grab;
  -webkit-user-drag: none;
}

.editor-layer.is-dragging {
  cursor: grabbing;
}

.button-border-layer {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.text-layer,
#font_preview .message {
  width: max-content;
  white-space: pre;
  line-height: normal;
}

#layers_panel {
  display: flex;
  flex-direction: column;
  margin-left: -1px;
  overflow: hidden;
  background-color: #babade;
}

#layers_panel .menu-heading {
  flex: 0 0 25px;
}

.panel-heading {
  height: 25px;
  background-color: #3d3d77;
  background-image: linear-gradient(
    90deg,
    #3d3d77 0%,
    #ba8ec8 100%
  );
}

#layers_empty {
  display: flex;
  flex: 1;
  margin: 0;
  align-items: center;
  justify-content: center;
  color: #3d3d3d;
}

#layers_empty[hidden] {
  display: none;
}

#layer_list {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 3px;
  overflow-y: auto;
}

.layer-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 24px 24px 24px;
  gap: 2px;
  min-height: 28px;
  padding: 2px;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: grab;
  list-style: none;
}

.layer-row + .layer-row {
  margin-top: 2px;
}

.layer-row.is-selected {
  border-color: #3d3d77;
  background-color: #8f8fbd;
}

.layer-row.is-reordering {
  opacity: 0.55;
}

.layer-row.drop-before {
  box-shadow: inset 0 2px 0 #3d3d77;
}

.layer-row.drop-after {
  box-shadow: inset 0 -2px 0 #3d3d77;
}

.layer-row input {
  margin: 0;
}

.layer-select {
  min-width: 0;
  height: 22px;
  padding: 1px 4px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-row.is-selected .layer-select {
  color: #fff;
  background-color: #7272a5;
  border-style: inset;
}

.layer-order {
  width: 24px;
  height: 22px;
  padding: 0;
}

.layer-delete {
  line-height: 18px;
}

#sequence_toolbar {
  display: flex;
  flex: 0 0 29px;
  min-width: 0;
  gap: 3px;
  padding: 3px;
  align-items: center;
  box-sizing: border-box;
  background-color: #babade;
  border-top: 1px solid #000;
}

#sequence_toolbar label {
  flex: 0 0 auto;
  margin: 0;
}

#sequence_toolbar select {
  min-width: 0;
  height: 21px;
}

#layer_sequence_step {
  width: 54px;
}

#sequence_preview {
  width: 45px;
}

.sequence-inactive {
  visibility: hidden !important;
}

.menu {
  display: none;
  width: 100%;
  max-height: 400px;
  margin-top: -1px;
  overflow-y: auto;
  box-sizing: border-box;
}

.menu.visible {
  display: block;
}

.menu > ul,
.menu form {
  width: 100%;
  margin: 0;
  padding: 0;
}

.menu > ul > li,
.text form > label,
.text form > .form-row,
#font_preview {
  display: flex;
  min-height: 25px;
  margin: 0;
  padding: 5px;
  align-items: center;
  box-sizing: border-box;
}

.menu label {
  margin-right: 5px;
}

.control-pair {
  gap: 14px;
  flex-wrap: nowrap;
}

.control-pair label {
  display: flex;
  min-width: 0;
  margin: 0;
  gap: 4px;
  align-items: center;
}

.control-pair label + label {
  margin-left: 4px;
}

.inline-control-group,
.gif-loop-controls {
  display: flex;
  min-width: 0;
  gap: 4px;
  align-items: center;
}

.inline-control-group label,
.gif-loop-controls label {
  margin: 0;
}

.menu input[type="text"],
.menu input[type="file"],
.text textarea {
  min-width: 0;
  flex: 1;
}

input[type="number"] {
  width: 45px;
  border: 1px solid #000;
}

input[type="color"] {
  width: 24px;
  height: 22px;
  padding: 0 2px;
}

.transparent-color-button {
  width: 24px;
  height: 22px;
  margin-left: 4px;
  padding: 0;
  background-color: #fff;
  background-image: url("graphics/checkerboard.png");
  background-position: center;
}

.transparent-color-button.is-active {
  border-style: inset;
  box-shadow:
    inset 1px 1px 0 #000,
    inset -1px -1px 0 #d8d8ef;
}

#background_default {
  margin-left: 5px;
  padding: 2px 5px;
}

#background_image {
  min-width: 0;
}

#background_size {
  width: 65px;
  flex: 0 0 65px;
  margin-left: 5px;
}

.text-content-row {
  min-height: 58px !important;
  align-items: flex-start !important;
}

.text-content-row span {
  flex: 0 0 auto;
  padding-top: 3px;
}

.text textarea {
  min-height: 42px;
  resize: vertical;
}

#font_preview {
  display: flex;
  min-height: 25px;
  gap: 4px;
  align-items: center;
  overflow: hidden;
}

.font-preview-label {
  flex: 0 0 auto;
}

.font-preview-window {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

#font_preview .message {
  display: inline-block;
  vertical-align: top;
}

#submit_text {
  margin: 2px 0;
}

.text-effect-row {
  gap: 5px;
  flex-wrap: wrap;
}

.text-effect-row > label,
.effect-options {
  display: inline-flex;
  min-width: 0;
  margin: 0;
  gap: 4px;
  align-items: center;
}

.text-effect-row > label.hidden {
  display: none;
}

#text_effect_direction {
  width: 96px;
}

#text_effect_speed {
  width: 58px;
}

#gif_loop_count {
  width: 38px;
}

.hidden,
.menu > ul > li.hidden {
  display: none;
}

.asset-import-instructions,
.asset-import-row,
.asset-import-status {
  min-height: 25px;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  background-color: #babade;
  border: 2px outset #babade;
  box-shadow: 0 0 0 1px #000;
}

.asset-import-instructions {
  line-height: 15px;
}

.asset-import-row {
  display: flex;
  align-items: center;
}

.asset-import-row label {
  flex: 0 0 auto;
}

.asset-import-row button {
  margin-left: 4px;
  padding: 2px 5px;
}

.asset-import-status {
  line-height: 15px;
}

section.extra .detail-grid {
  display: flex;
  flex-wrap: wrap;
}

section.extra .detail-grid li {
  width: 20%;
  min-height: 50px;
  padding: 5px;
  box-sizing: border-box;
}

.detail-option {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.detail-option img {
  max-width: 100%;
  max-height: 100%;
}

#results {
  margin: 10px 0;
}

#reset_button {
  margin-right: 4px;
}

.asset-sources {
  padding: 5px;
  background-color: #babade;
  border: 2px outset #babade;
  box-shadow: 0 0 0 1px #000;
}

.asset-sources h5 {
  margin: 0 0 5px;
  font-size: 10pt;
}

.asset-sources ul {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.asset-sources li {
  display: flex;
  min-height: 33px;
  gap: 8px;
  align-items: center;
}

.raw-project-row {
  gap: 5px;
}

.asset-sources img {
  display: block;
  width: 88px;
  height: 31px;
}

#hints {
  position: absolute;
  top: 7px;
  right: 10px;
  width: 180px;
  margin: 0;
  padding: 20px;
  background-color: teal;
}

#hints li {
  margin-bottom: 10px;
}

body > ol a,
body > p,
body > p a,
#hints {
  color: #ff0;
}

body > p {
  margin: 6px auto;
}

.glow_box {
  animation: 5s glow-box;
}

.glow_text {
  animation: 5s glow-text;
}

.text-effect-bounce {
  animation: 800ms ease-in-out infinite text-bounce;
}

.text-effect-glow {
  animation: 1000ms ease-in-out infinite alternate text-effect-glow;
}

.text-effect-fly-in {
  animation:
    var(--text-effect-duration, 1200ms)
    linear
    infinite
    text-slide-left-to-right;
}

.text-effect-fly-in[data-text-effect-direction="right-to-left"] {
  animation-name: text-slide-right-to-left;
}

.text-effect-blink {
  animation:
    var(--text-effect-duration, 1200ms)
    steps(1, end)
    infinite
    text-blink-colors;
}

.text-effect-letter {
  display: inline-block;
}

.text-effect-letter-sweep .text-effect-letter {
  animation:
    var(--text-effect-duration, 1200ms)
    linear
    infinite
    text-letter-sweep;
  animation-delay: calc(var(--letter-index) * 70ms);
}

.text-effect-wave .text-effect-letter {
  animation:
    var(--text-effect-duration, 1200ms)
    ease-in-out
    infinite
    text-letter-wave;
  animation-delay: calc(var(--letter-index) * -80ms);
}

.button-effect-overlay {
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: none;
  pointer-events: none;
}

.button-effect-glitch {
  transform-origin: center;
  animation: 320ms steps(2, end) infinite button-glitch;
}

.button-effect-glitch .button-effect-overlay {
  display: block;
  opacity: 0.2;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 0, 48, 0.65) 0,
    rgba(255, 0, 48, 0.65) 1px,
    transparent 1px,
    transparent 3px,
    rgba(0, 255, 255, 0.55) 3px,
    rgba(0, 255, 255, 0.55) 4px,
    transparent 4px,
    transparent 6px
  );
  animation: 240ms steps(2, end) infinite button-glitch-overlay;
}

.button-effect-distortion .button-effect-overlay {
  display: block;
  opacity: 0.72;
  background-image:
    linear-gradient(
      90deg,
      transparent 0 8%,
      rgba(0, 255, 255, 0.7) 8% 28%,
      transparent 28% 62%,
      rgba(255, 0, 72, 0.65) 62% 82%,
      transparent 82%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.32) 2px 3px,
      transparent 3px 6px
    );
  background-size: 130% 100%, 100% 100%;
  mix-blend-mode: screen;
  animation: 480ms steps(3, end) infinite button-distortion;
}

.button-effect-shimmer .button-effect-overlay {
  display: block;
  background-image: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.72) 48%,
    rgba(255, 255, 255, 0.25) 53%,
    transparent 70%
  );
  background-position: -120% 0;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: 1200ms linear infinite button-shimmer;
}

.button-effect-rotate {
  transform-origin: center;
  animation: 1200ms ease-in-out infinite button-rotate;
}

.export-host {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 88px;
  height: 31px;
  overflow: hidden;
  text-align: left;
}

.export-frame {
  position: relative;
  width: 88px;
  height: 31px;
  overflow: hidden;
  background: transparent;
}

.export-animation-source {
  position: fixed;
  top: 0;
  left: -10000px;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

@media (max-width: 1050px) {
  #hints {
    position: static;
    width: 590px;
    margin: 15px auto;
  }
}

@media (max-width: 680px) {
  body {
    min-width: 0;
  }

  main {
    width: calc(100% - 8px);
  }

  #workspace {
    grid-template-columns: 1fr;
    height: auto;
  }

  #editor_column {
    width: 210px;
    justify-self: center;
  }

  #layers_panel {
    margin-left: 0;
  }

  #hints {
    width: calc(100% - 16px);
    box-sizing: border-box;
  }

body > p {
    max-width: calc(100% - 16px);
  }
}

@keyframes glow-box {
  50% {
    box-shadow: 0 0 3px 3px #fff;
  }
}

@keyframes glow-text {
  50% {
    text-shadow:
      0 0 3px #fff,
      0 0 3px #fff,
      0 0 3px #fff;
  }
}

.inspiration-buttons {
  display: flex;
  margin: 8px auto;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.inspiration-buttons img {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.maker-button {
  display: flex;
  margin: 8px auto;
  justify-content: center;
}

.maker-button img {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

@keyframes text-bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes text-effect-glow {
  from {
    text-shadow:
      0 0 2px #fff,
      0 0 3px currentColor;
  }

  to {
    text-shadow:
      0 0 6px #fff,
      0 0 9px currentColor;
  }
}

@keyframes text-slide-left-to-right {
  from {
    transform: translateX(-88px);
  }

  to {
    transform: translateX(88px);
  }
}

@keyframes text-slide-right-to-left {
  from {
    transform: translateX(88px);
  }

  to {
    transform: translateX(-88px);
  }
}

@keyframes text-blink-colors {
  0%,
  49.99% {
    color: var(--text-primary-color, currentColor);
  }

  50%,
  100% {
    color: var(--text-effect-color, #fff);
  }
}

@keyframes text-letter-sweep {
  0%,
  35%,
  100% {
    color: var(--text-primary-color, currentColor);
  }

  50%,
  68% {
    color: var(--text-effect-color, #fff);
  }
}

@keyframes text-letter-wave {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes button-glitch {
  0%,
  100% {
    transform: translate(0);
  }

  25% {
    transform: translate(1px, 0);
  }

  50% {
    transform: translate(-1px, 1px);
  }

  75% {
    transform: translate(0, -1px);
  }
}

@keyframes button-glitch-overlay {
  from {
    background-position: 0 0;
    opacity: 0.16;
  }

  to {
    background-position: 6px 0;
    opacity: 0.3;
  }
}

@keyframes button-distortion {
  0%,
  100% {
    background-position: 0 0, 0 0;
    clip-path: polygon(
      0 0,
      100% 0,
      100% 28%,
      0 28%,
      0 55%,
      100% 55%,
      100% 72%,
      0 72%
    );
  }

  50% {
    background-position: 35px 0, 0 1px;
    clip-path: polygon(
      0 12%,
      100% 12%,
      100% 42%,
      0 42%,
      0 67%,
      100% 67%,
      100% 96%,
      0 96%
    );
  }
}

@keyframes button-shimmer {
  from {
    background-position: -120% 0;
  }

  to {
    background-position: 120% 0;
  }
}

@keyframes button-rotate {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-effect-bounce,
  .text-effect-glow,
  .text-effect-fly-in,
  .text-effect-blink,
  .text-effect-letter-sweep .text-effect-letter,
  .text-effect-wave .text-effect-letter,
  .button-effect-glitch,
  .button-effect-glitch .button-effect-overlay,
  .button-effect-distortion .button-effect-overlay,
  .button-effect-shimmer .button-effect-overlay,
  .button-effect-rotate {
    animation: none;
  }
}