body {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  font-family: "Fira Code", monospace;
  font-size: 0.75em;
  background: #161816;
  color: #fff;
  white-space: nowrap;
  /* and so the pain begins */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.underline, .hover-underline:hover {
  /* Underline styles - details of technique here:
   * https://nickymeuleman.netlify.app/blog/css-animated-wrapping-underline
   */
  background: linear-gradient(to right, #80f080, #80f080);
  background-size: 100% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size .2s;
}

aside {
  max-width: 48em;
  min-width: 24em;
  background-color: #323632;
  padding: 0.5em 1em;
  flex-grow: 2;
  overflow: auto;
  font-size: 1.15em;
} aside > div {
  padding: 1em 1em;
  margin: 1em 0;
  border-radius: 1rem;
  background-color: #282c28;
} aside > div > h4 {
  position: relative;
  top: -0.25em;
  padding: 0 1rem 0rem 1rem;
  margin: 0;
  font-weight: 400;
  font-size: 1.5em;
} aside > div > span {
  display: block;
  margin: 0.1em 0.6em;
  padding: 0 0.4em;
  cursor: pointer;
}

:not([need][sad])[input="option"]               { color: #fff4; }
:not([need][sad])[input="option"]:before        { content: '// '; }
:not([need][sad])[input="option"].active        { color: #80f080; }
:not([need][sad])[input="option"].active:before { content: ''; }
:not([need][sad])[input="option"]:hover         { font-style: italic; }

:not([need][sad])[input="boolean"]              { color: #fff; }
:not([need][sad])[input="boolean"]:after        { content: ' = false'; color: #fff4; }
:not([need][sad])[input="boolean"].active       { color: #80f080; }
:not([need][sad])[input="boolean"].active:after { content: ' = true'; }
:not([need][sad])[input="boolean"]:hover        { font-style: italic; }

:not([need][sad])[input="number"]               { color: #fff; }
:not([need][sad])[input="number"]:hover         { cursor: default; }
:not([need][sad])[input="number"] span          { color: #80f080; cursor: pointer; }
:not([need][sad])[input="number"] .reader       { color: #fff4; cursor: initial; }

[need][sad] { color: #fff4; cursor: initial; }
[need][sad]:before { content: '// '; }

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  flex-grow: 1;
} [render] {
  display: flex;
  flex-direction: column;
} button {
  background-color: #0000;
  color: #fff;
  border: none;
  padding: 0.5em;
} button:hover:not(.rendering) {
  background-size: 100% 4px;
} aside button {
  margin: 0.25em 1em;
} main h1 {
  margin: 0;
  padding: 0.25em 0em 0em 0em;
  text-align: center;
  text-transform: uppercase;
  font-size: min(4em, 6vw);
} main [hint] {
  display: block;
  padding: 0.5em 1em;
  margin: 0.5em 1em 0em 1em;
  background: #282c28;
  color: #fff4;
  text-align: center;
  white-space: normal;
  transition: height 0.2s, padding 0.4s ease;
} main [hint].hidden {
  height: 0px;
  padding-block: 0px;
  overflow: hidden;
}

canvas {
  width: 50vw;
  max-width: calc(75vh - 2em);
  background-color: #d0d0d0;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%),
                    linear-gradient(-45deg, #808080 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #808080 75%),
                    linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

@media (max-width: 110vh) {
  body { flex-direction: column-reverse; }
  aside { max-width: 100%; }
  canvas { width: auto; height: 25vh; }
}