* {
  box-sizing: border-box;
}

#marie-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  min-height: 50vh;
  flex-wrap: nowrap;
}

.marie-code, .marie-memory {
  min-width: 0;
  margin: 0 0.5rem;
  overflow: auto;
}

.marie-code {
  flex-grow: 1;
}

.code-wrapper, .io-wrapper {
  width: 100%;
  padding: 1rem;
}

#code-wrapper-inner {
  position: relative;
}

.code-menu {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 1px;
}

button, .code-menu a, .code-menu div.spacer {
  display: block;
  padding: 0.5rem;
  font-size: inherit;
  font-family: Inter, sans-serif;
  font-weight: bold;
  transition: 0.2s;
}

button {
  cursor: pointer;
}

button[disabled] {
  cursor: not-allowed;
}

.code-menu div.spacer {
  flex-grow: 1;
}

.collapsible {
  padding-right: 0;
}

.collapsible-content {
  z-index: 3;
}

.code-area {
  resize: vertical;
  color: transparent !important;
  background-color: transparent !important;
  z-index: 1;
}

#highlighting {
  z-index: 0;
}

.code-area, #highlighting {
  width: 100%;
  height: 240pt;
  overflow: auto;
  margin: 0;
  padding: 0.2rem;
  border-radius: 0;
  border: 1px solid transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.code-area, #highlighting, #input-field, #output-field {
  font-family: 'Consolas', monospace;
  font-size: 12pt;
  line-height: 14pt;
}

.marie-memory {
  flex-shrink: 1;
  max-height: 100vh;
  padding-right: 1rem;
}

.marie-memory table {
  font-family: monospace;
  width: 1px;
}

.marie-memory td {
  width: 1ch;
  text-align: center;
  width: 0%;
  min-width: fit-content;
  padding: 0.1rem;
}

.marie-memory td.pc {
  text-decoration: underline;
  text-decoration-style: double;
}

#input-field, #output-field {
  width: 100%;
}

#input-field {
  flex-grow: 1;
  border-radius: 0;
}

#output-field {
  min-height: 120pt;
}

#input-field-wrapper {
  display: flex;
  flex-direction: row;
}

#clear-input-field {
  margin-left: 1px;
}

.control-buttons {
  margin: 1rem auto;
  text-align: center;
}

.control-buttons button {
  display: inline-block;
}

.speed-wrapper {
  display: flex;
  flex-direction: row;
  margin: 0 auto 1rem;
  width: fit-content;
}

.speed-wrapper * {
  display: block;
}

.speed-wrapper span {
  margin: auto 0;
  font-size: 10pt;
  text-transform: uppercase;
}

#speed {
  margin: 0 0.5rem;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 10rem;
}

input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track {
  height: 1ex;
  transition: 0.2s;
}

input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  height: 3ex;
  width: 1ch;
  cursor: ew-resize;
  transition: 0.2s;
}

pre {
  overflow-x: auto;
}

@media (prefers-color-scheme: dark) {
  .marie-code, .marie-memory {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  }

  button, .code-menu a, .code-menu div.spacer, .collapsible {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFF;
  }

  .code-menu button, .io-wrapper button, .code-menu a, .code-menu div.spacer, .collapsible {
    border-right: none;
  }

  button:not([disabled]):hover, .code-menu a:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  button:not([disabled]):active, .code-menu a:hover {
    background-color: rgba(255, 255, 255, 0.3);
  }

  button[disabled] {
    color: rgba(255, 255, 255, 0.5);
  }

  input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track {
    background: rgba(255, 255, 255, 0.4);
  }

  input[type="range"]:hover::-webkit-slider-runnable-track, input[type="range"]:hover::-moz-range-track {
    background: rgba(255, 255, 255, 0.5);
  }
  
  input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
    background-color: #FFF;
  }

  input[type="range"][disabled]::-webkit-slider-runnable-track, input[type="range"][disabled]::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
  }
  
  input[type="range"][disabled]::-webkit-slider-thumb, input[type="range"][disabled]::-moz-range-thumb {
    background-color: #555;
  }

  .code-menu :last-child, #input-field-wrapper button:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
  }

  .code-area {
    caret-color: #FFF;
  }

  #highlighting, #output-field {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.04);
    color: #FFF;
  }

  .m-c-comment {
    color: rgba(255, 255, 255, 0.5);
  }
  
  .m-c-number {
    color: #F3CA52;
  }
  
  .m-c-inst {
    color: #5AB2FF;
  }
  
  .m-c-string {
    color: #FF7F3E;
  }
}

@media (prefers-color-scheme: light) {
  .marie-code, .marie-memory {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  }

  button, .code-menu a, .code-menu div.spacer, .collapsible {
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: #000;
  }

  .code-menu button, .io-wrapper button, .code-menu a, .code-menu div.spacer, .collapsible {
    border-right: none;
  }

  button:not([disabled]):hover, .code-menu a:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }

  button:not([disabled]):active, .code-menu a:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }

  button[disabled] {
    color: rgba(0, 0, 0, 0.5);
  }

  input[type="range"]::-webkit-slider-runnable-track, input[type="range"]::-moz-range-track {
    background: rgba(0, 0, 0, 0.2);
  }

  input[type="range"]:hover::-webkit-slider-runnable-track, input[type="range"]:hover::-moz-range-track {
    background: rgba(0, 0, 0, 0.15);
  }
  
  input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
    background-color: #4372AA;
  }

  input[type="range"][disabled]::-webkit-slider-runnable-track, input[type="range"][disabled]::-moz-range-track {
    background: #D9D9D9;
  }
  
  input[type="range"][disabled]::-webkit-slider-thumb, input[type="range"][disabled]::-moz-range-thumb {
    background-color: #D9D9D9;
  }

  .code-menu :last-child, #input-field-wrapper button:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }

  .code-area {
    caret-color: #000;
  }

  #highlighting, #output-field {
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.01);
    color: #000;
  }

  .m-c-comment {
    color: rgba(0, 0, 0, 0.5);
  }
  
  .m-c-number {
    color: #E29D20;
  }
  
  .m-c-inst {
    color: #10439F;
  }
  
  .m-c-string {
    color: #DC5F00;
  }
}

@media only screen and (max-width: 800px) {
  #marie-container {
    flex-direction: column;
  }

  .code-menu div.spacer {
    display: none;
  }

  .marie-code {
    min-height: 50vh;
  }

  .marie-memory table {
    width: auto;
  }
}

.marie-memory tr:nth-child(even) td.byte-null {
  background-color: rgba(0, 0, 0, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-null {
  background-color: rgba(0, 0, 0, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-1 {
  background-color: rgba(244, 67, 54, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-1 {
  background-color: rgba(244, 67, 54, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-2 {
  background-color: rgba(233, 30, 99, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-2 {
  background-color: rgba(233, 30, 99, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-3 {
  background-color: rgba(156, 39, 176, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-3 {
  background-color: rgba(156, 39, 176, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-4 {
  background-color: rgba(103, 58, 183, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-4 {
  background-color: rgba(103, 58, 183, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-5 {
  background-color: rgba(63, 81, 181, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-5 {
  background-color: rgba(63, 81, 181, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-6 {
  background-color: rgba(33, 150, 243, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-6 {
  background-color: rgba(33, 150, 243, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-7 {
  background-color: rgba(0, 150, 136, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-7 {
  background-color: rgba(0, 150, 136, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-8 {
  background-color: rgba(76, 175, 80, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-8 {
  background-color: rgba(76, 175, 80, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-9 {
  background-color: rgba(139, 195, 74, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-9 {
  background-color: rgba(139, 195, 74, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-10 {
  background-color: rgba(255, 235, 59, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-10 {
  background-color: rgba(255, 235, 59, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-11 {
  background-color: rgba(255, 152, 0, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-11 {
  background-color: rgba(255, 152, 0, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-12 {
  background-color: rgba(255, 87, 34, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-12 {
  background-color: rgba(255, 87, 34, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-13 {
  background-color: rgba(121, 85, 72, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-13 {
  background-color: rgba(121, 85, 72, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-14 {
  background-color: rgba(96, 125, 139, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-14 {
  background-color: rgba(96, 125, 139, 0.3);
}

.marie-memory tr:nth-child(even) td.byte-15 {
  background-color: rgba(158, 158, 158, 0.15);
}

.marie-memory tr:nth-child(odd) td.byte-15 {
  background-color: rgba(158, 158, 158, 0.3);
}