@charset "UTF-8";
/* Custom CSS */
:root {
  --fore-color                : #111;
  --secondary-fore-color      : #444;
  --back-color                : #f8f8f8;
  --secondary-back-color      : #f0f0f0;
  --blockquote-color          : #f57c00;
  --pre-color                 : #1565c0;
  --border-color              : #aaa;
  --secondary-border-color    : #ddd;
  --heading-ratio             : 1.19;
  --universal-margin          : 0.5rem;
  --universal-padding         : 0.5rem;
  --universal-border-radius   : 0.125rem;
  --a-link-color              : #0277bd;
  --a-visited-color           : #01579b;
  --form-back-color           : #f0f0f0;
  --form-fore-color           : #111;
  --form-border-color         : #ddd;
  --input-back-color          : #f8f8f8;
  --input-fore-color          : #111;
  --input-border-color        : #ddd;
  --input-focus-color         : #0288d1;
  --input-invalid-color       : #d32f2f;
  --button-hover-back-color   : #277529;
  --button-hover-fore-color   : #f8f8f8;
  --button-back-color         : #D0D0D0;
  --button-fore-color         : #333;
  --button-border-color       : transparent;
  --button-hover-border-color : transparent;
  --button-group-border-color : rgba(124, 124, 124, 0.54);
  --console-height            : 30%;
  --code-color                : #009900
}

html,
body {
  height      : 100%;
  font-size   : 13px;
  user-select : none;
}

body {
  font-family              : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
  line-height              : 1.5;
  -webkit-text-size-adjust : 100%;
  margin                   : 0;
  color                    : var(--fore-color);
  background               : var(--back-color);
}

h1, h2, h3, h4, h5, h6 {
  line-height : 1.2;
  margin      : calc(1.5 * var(--universal-margin)) var(--universal-margin);
  font-weight : 500
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  color      : var(--secondary-fore-color);
  display    : block;
  margin-top : -.25rem
}

h1 {
  font-size : calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))
}

h2 {
  font-size : calc(1rem * var(--heading-ratio) * var(--heading-ratio));
}

h3 {
  font-size : calc(1rem * var(--heading-ratio))
}

h4 {
  font-size : 1rem
}

a {
  text-decoration : none;
}

a:link {
  color : var(--a-link-color);
}

a:visited {
  color : var(--a-visited-color);
}

a:hover, a:focus {
  text-decoration : underline;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style : none;
  padding      : 0;
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance : button;
}

button {
  overflow       : visible;
  text-transform : none;
}

button, [type="button"], [type="submit"], [type="reset"],
a.button, label.button, .button,
a[role="button"], label[role="button"], [role="button"] {
  display         : inline-block;
  background      : var(--button-back-color);
  color           : var(--button-fore-color);
  border          : 0.0625rem solid var(--button-border-color);
  border-radius   : var(--universal-border-radius);
  padding         : var(--universal-padding) calc(1.5 * var(--universal-padding));
  margin          : var(--universal-margin);
  text-decoration : none;
  cursor          : pointer;
  transition      : background 0.3s;
}

button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
a.button:hover,
a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
a[role="button"]:hover,
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
  color        : var(--button-hover-fore-color);
  background   : var(--button-hover-back-color);
  border-color : var(--button-hover-border-color);
}

input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
  cursor  : not-allowed;
  opacity : 0.75;
}

code {
  font-family : "Courier New", monospace;
  color       : var(--code-color);
  font-weight : 600;
}

.header {
  position : absolute;
  top      : 0;
  left     : 0;
  right    : 0;
  height   : 4rem;
}

.header h1 {
  display : inline-block;
}

.content {
  position         : absolute;
  top              : 4rem;
  left             : 0;
  right            : 0;
  bottom           : 0;
  background-color : #F0F0F0;
}

.section-left {
  position : absolute;
  top      : 0;
  left     : 0;
  bottom   : 1px;
  width    : calc(50% - 1px);
}

.section-right {
  position : absolute;
  top      : 0;
  left     : calc(50% + 1px);
  bottom   : 1px;
  right    : 1px;
}

.resizer-ew {
  position         : absolute;
  top              : 0;
  left             : calc(50% - 3px);
  width            : 6px;
  bottom           : 1px;
  background-color : transparent;
  cursor           : ew-resize;
  text-align       : center;
  padding-top      : 45vh;
  line-height      : 12px;
}

.subheader {
  height : 2.5rem;
}

#shareit {
  cursor   : pointer;
  position : absolute;
  top      : 12px;
  right    : 156px;
}

.home .section-left .subheader h2,
.home .section-left .subfooter h3 {
  display : inline-block;
}

.tutorial #tutorial {
  overflow : auto;
}

.tutorial #tutorial h2 {
  display : none;
}

.tutorial #tutorial h3 {
  margin-left   : 0;
  margin-right  : 0;
  padding-left  : 2rem;
  padding-right : 2rem;
}

.home .section-right .subheader h2 {
  display     : inline-block;
  font-weight : normal;
  cursor      : pointer;
}

.home .section-right .subheader h2.selected {
  display     : inline-block;
  font-weight : bold;
  cursor      : inherit;
}

.home .section-left #run {
  position : absolute;
  top      : 4px;
  margin   : 0;
}

.home .section-left #run {
  right : 84px;
}

.tutorial .section-left #resolve {
  margin-left : 2rem;
}

.home .section-left #analyze {
  position : absolute;
  top      : 4px;
  right    : 3px;
  margin   : 0;
}

.home .section-left #code,
.home .section-right #result,
.tutorial .section-left #tutorial,
.tutorial .section-right #code {
  position : absolute;
  top      : 3em;
  bottom   : 0;
  width    : calc(100% - 4px);
  resize   : none;
  border   : 1px solid grey;
}

.home .section-left #code {
  left   : 0;
  bottom : 3em;
}

#console-open:checked + .section-left #code,
.tutorial .section-right #code {
  bottom : var(--console-height);
}

.home .section-left .subfooter,
.tutorial .section-right .subfooter {
  position : absolute;
  bottom   : 1px;
  left     : 1px;
  width    : 100%;
  height   : 3em;
}

#console-open:checked + .section-left .subfooter,
.tutorial .section-right .subfooter {
  bottom : calc(var(--console-height) - 3em);
}

.home .section-left .subfooter h3 {
  cursor : pointer;
}

.home .section-left .subfooter h3:before {
  margin-right : 0.5em;
  content      : url("data:image/svg+xml;chartset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 320 512\"><path d=\"M85.165 475.751C81.727 472.61 80.008 468.314 80.008 464.001C80.008 460.11 81.415 456.22 84.258 453.142L266.227 256.001L84.258 58.86C78.258 52.36 78.633 42.22 85.165 36.251C91.665 30.251 101.758 30.657 107.758 37.142L299.758 245.142C305.446 251.298 305.446 260.704 299.758 266.86L107.758 474.86C101.758 481.345 91.665 481.751 85.165 475.751Z\"/></svg>")
}

#console-open:checked + .section-left .subfooter h3:before {
  content : url("data:image/svg+xml;chartset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 448 512\"><path d=\"M4.249 181.141C7.39 177.703 11.686 175.984 15.999 175.984C19.89 175.984 23.78 177.391 26.858 180.234L223.999 362.203L421.14 180.234C427.64 174.234 437.78 174.609 443.749 181.141C449.749 187.641 449.343 197.734 442.858 203.734L234.858 395.734C228.702 401.422 219.296 401.422 213.14 395.734L5.14 203.734C-1.345 197.734 -1.751 187.641 4.249 181.141Z\"/></svg>")
}

.home .section-left #console,
.tutorial .section-right #console {
  position         : absolute;
  bottom           : 1px;
  left             : 1px;
  width            : calc(100% - 3px);
  height           : calc(var(--console-height) - 3em);
  display          : none;
  background-color : #333333;
  overflow         : auto;
  font-family      : monospace;
  font-size        : 14px;
}

#console-open:checked + .section-left #console,
.tutorial .section-right #console {
  display : block;
}

#console-clear {
  display : none;
}

#console-open:checked + .section-left #console-clear {
  display  : inline-block;
  cursor   : pointer;
  position : absolute;
  top      : 12px;
  right    : 12px;
}

#console .log {
  position : relative;
  color    : #FFFFFF;
}

#console .error {
  position         : relative;
  color            : #FF8080;
  background-color : #290000
}

#console .warn {
  position         : relative;
  color            : #FFFF80;
  background-color : #290000
}

#console .time {
  opacity     : 0.75;
  display     : block;
  float       : left;
  margin-left : 8px;
  white-space : pre;
}

#console .msg {
  display : block;
  margin  : 0 0 0 110px;
}

.home .section-right #result {
  right : 0;
}

.version {
  float        : right;
  text-align   : right;
  margin-right : 55px;
  margin-top   : 18px;
}

.tutorial #tutorial section {
  font-size   : 1.2em;
  user-select : text;
  margin-top  : 3em;
  display     : none;
}

.tutorial #tutorial section.active {
  display : block;
}

.tutorial #tutorial p,
.tutorial #tutorial ul {
  margin-left  : 2rem;
  margin-right : 2rem;
}

.tutorial .prev-parent,
.tutorial .next-parent {
  width   : calc(50% - 4em);
  float   : left;
  padding : 2rem;
}

.tutorial .next-parent {
  text-align : right;
}

.tutorial .prev,
.tutorial .next {
  cursor : pointer;
}

.tutorial .prev:hover #prev,
.tutorial .next:hover #next {
  text-decoration : underline;
}

.tutorial .prev strong,
.tutorial .next strong {
  font-weight : 600;
}

.tutorial .navigation .arrow {
  font-size : 1.5rem;
}

#navigator {
  border      : 0;
  outline     : none;
  background  : transparent;
  cursor      : pointer;
  margin-top  : 0.3rem;
  margin-left : -0.3rem;
  font-size   : 1.2rem;
  font-weight : 600;
}

.tutorial #tutorial pre {
  color : var(--code-color);
}

.tutorial li pre {
  margin : 0.5em 0;
}

.tutorial ul li ul {
  margin          : 1rem 0 !important;
  list-style-type : square;
}

.tutorial #tutorial .sections {
  min-height : calc(100% - 10rem);
}

.content.reference {
  text-align  : center;
  padding-top : 2em;
}

.content.reference table {
  margin-left      : auto;
  margin-right     : auto;
  min-width        : 600px;
  max-width        : 900px;
  background-color : #fafafa;
  padding          : 1em;
  border-radius    : 1em;
}

.content.reference table tr {
  height : 2.5rem;
}

.content.reference table tr .left {
  text-align : left;
}

.content.reference .bord {
  border-top  : 1px solid #000000;
  border-left : 1px solid #000000;
}

.content.reference .bord-b {
  border-bottom : 1px solid #000000;
}

.content.reference .bord-r {
  border-right : 1px solid #000000;
}