html {
  --padding-xs: 10px;
  --padding-s: 16px;
  --padding-m: 24px;
  --header-bg-color: #212121;
  --section-bg-color: #2B2B2B;
  --highlight-bg-color: #3a3a3a;
  --primary-text-color: #cccccc;
  --secondary-text-color: #606060;
  --highlight-text-color: #ffffff;
  --border-color: #000000;
  --link-color: #adcce4;
}

body {
  background-color: var(--section-bg-color);
  font-family: Menlo, Consolas, DejaVu Sans Mono, monospace;
  color: var(--primary-text-color);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}
body section {
  max-width: 100%;
  overflow-x: hidden;
}
body footer {
  background-color: var(--header-bg-color);
  padding: 0.3rem var(--padding-m);
  border-top: 1px solid var(--border-color);
  grid-column: 1/3;
  grid-row: 2/3;
  display: flex;
  align-items: center;
  z-index: 99;
}
@media (min-width: 700px) {
  body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    height: 100vh;
    overflow: hidden;
  }
  body section {
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body section .json {
    flex-grow: 1;
    overflow-y: scroll;
  }
  body footer {
    justify-content: flex-end;
  }
}

* {
  box-sizing: border-box;
  max-width: 100%;
}
*::-webkit-scrollbar {
  background-color: var(--section-bg-color);
  width: 10px;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--highlight-bg-color);
  border-radius: 5px;
  border: 1px solid #111;
}

*:before, *:after {
  color: var(--secondary-text-color);
}

a {
  color: var(--link-color);
  transition: color 0.3s ease-out;
  text-underline-offset: 0.1em;
}
a:hover, a:focus {
  color: var(--highlight-text-color);
}

details ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
}
details ul li {
  padding-left: 20px;
}

header {
  background-color: var(--header-bg-color);
  padding: var(--padding-m) 0;
  grid-column: 1/2;
}
@media (min-width: 700px) {
  header {
    border-bottom: none;
    border-right: 1px solid var(--border-color);
  }
}
header p, header nav, header nav summary, header nav li {
  display: block;
  font-size: 0.9rem;
  margin: 0 0 var(--padding-xs);
}
header p {
  position: relative;
  margin: 0;
  font-weight: normal;
  padding: 0.2em var(--padding-m) 0.4em 20px;
  color: var(--highlight-text-color);
}
header p span {
  position: relative;
}
header p span:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 0.3em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23606060' d='M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z' /%3E%3C/svg%3E");
  margin-right: 0.3em;
}
header p span:after {
  content: ".json";
  font-weight: normal;
}
header p:before {
  content: "";
  display: block;
  width: calc(100% + (var(--padding-m) * 2));
  height: 100%;
  background-color: var(--highlight-bg-color);
  position: absolute;
  top: 0;
  left: calc(-1 * var(--padding-m));
}
header nav {
  padding: 0 var(--padding-m);
}
header details details {
  padding-left: 20px;
}
header details summary {
  color: var(--secondary-text-color);
}
header details summary > span:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 0.3em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23606060' d='M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z' /%3E%3C/svg%3E");
  margin-right: 0.3em;
}
header details[open] summary > span:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23606060' d='M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z' /%3E%3C/svg%3E");
}
header details ul li {
  padding-left: calc(20px + 1em);
}
header details ul li:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 0.3em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23606060' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E");
  margin-right: 0.3em;
}
header details ul li:after {
  content: ".html";
}
header details li.pdf:before {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  position: relative;
  top: 0.3em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%23606060' d='M14,2L20,8V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2H14M18,20V9H13V4H6V20H18M10.92,12.31C10.68,11.54 10.15,9.08 11.55,9.04C12.95,9 12.03,12.16 12.03,12.16C12.42,13.65 14.05,14.72 14.05,14.72C14.55,14.57 17.4,14.24 17,15.72C16.57,17.2 13.5,15.81 13.5,15.81C11.55,15.95 10.09,16.47 10.09,16.47C8.96,18.58 7.64,19.5 7.1,18.61C6.43,17.5 9.23,16.07 9.23,16.07C10.68,13.72 10.9,12.35 10.92,12.31M11.57,13.15C11.17,14.45 10.37,15.84 10.37,15.84C11.22,15.5 13.08,15.11 13.08,15.11C11.94,14.11 11.59,13.16 11.57,13.15M14.71,15.32C14.71,15.32 16.46,15.97 16.5,15.71C16.57,15.44 15.17,15.2 14.71,15.32M9.05,16.81C8.28,17.11 7.54,18.39 7.72,18.39C7.9,18.4 8.63,17.79 9.05,16.81M11.57,11.26C11.57,11.21 12,9.58 11.57,9.53C11.27,9.5 11.56,11.22 11.57,11.26Z' /%3E%3C/svg%3E");
  margin-right: 0.3em;
}
header details li.pdf:after {
  content: ".pdf";
}

section {
  background-color: var(--section-bg-color);
  grid-column: 2/3;
  flex-grow: 1;
}
section:before {
  display: block;
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--highlight-bg-color);
  position: absolute;
  top: 0;
  left: 110ch;
}

.tabs {
  background-color: var(--header-bg-color);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 99;
}
.tabs div {
  display: inline-block;
  position: relative;
  padding: 0.3em var(--padding-m);
  background-color: var(--section-bg-color);
  color: var(--highlight-text-color);
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
}
.tabs div h1 {
  font-size: 1rem;
  margin: 0;
}
.tabs div h1:after {
  content: ".json";
}
.tabs div:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--section-bg-color);
  position: absolute;
  left: 0;
  bottom: -1;
}

.json {
  padding: var(--padding-m);
}
.json:before {
  content: "{";
  display: block;
  margin-bottom: var(--padding-xs);
}
.json:after {
  content: "}";
}
.json > dl {
  padding-left: 20px;
}

.json dl {
  margin: 0;
}
.json dl > span {
  display: flex;
  flex-direction: column;
}
.json dl dt:before, .json dl dd:before {
  content: '"';
  margin-right: 0.1em;
}
.json dl dt {
  color: var(--secondary-text-color);
  margin: 0 0 var(--padding-xs);
}
.json dl dt:after {
  content: '":';
  margin-left: 0.1em;
}
.json dl dd {
  margin: 0 0 var(--padding-xs) 20px;
  flex-grow: 1;
}
.json dl dd:after {
  content: '",';
  margin-left: 0.1em;
}
.json dl dd.name {
  text-transform: uppercase;
  font-weight: bold;
}

.json > dl:last-child span:last-of-type dd:after {
  content: '"';
}

span.face dd {
  max-width: 16ch;
  display: flex;
}
span.face dd img {
  max-width: 100%;
}

.json details {
  margin-bottom: var(--padding-xs);
}
.json details summary, .json details ul li {
  font-size: 1rem;
  margin: 0 0 var(--padding-xs);
}
.json details > ul > li:not(:last-of-type) {
  margin-bottom: 1.4em;
}
.json details summary {
  color: var(--secondary-text-color);
}
.json details summary > span:before {
  content: '"';
  margin-right: 0.1em;
}
.json details summary > span:after {
  content: '": {';
  margin-left: 0.1em;
}
.json details[open]:after {
  content: "},";
  margin-left: 20px;
}
.json details:last-child[open]:after {
  content: "}";
}
.json details:not([open]) summary > span:after {
  content: ": {...},";
}
.json details:last-child:not([open]) summary > span:after {
  content: ": {...}";
}
.json details ul li {
  padding-left: 40px;
}
.json details > dl {
  padding-left: 40px;
}
.json details.project > dl span {
  display: flex;
  flex-direction: column;
}
.json details.project > dl dd {
  padding-left: 20px;
}

.json ul li > span:before {
  content: '"';
  margin-right: 0.1em;
}
.json ul li > span:after {
  content: '",';
  margin-left: 0.1em;
}
.json ul li:last-child > span:after {
  content: '"';
}
.json ul li > dl {
  margin-bottom: calc(-1 * var(--padding-xs));
}

dd.screenshot {
  display: flex;
  max-width: 500px;
}
dd.screenshot img {
  max-width: calc(100% - 3ch);
  filter: grayscale(90%);
  opacity: 0.8;
  transition: 0.3s ease-out;
}
dd.screenshot img:hover {
  opacity: 1;
  filter: grayscale(0);
}

dd.toolkit {
  display: flex;
}
dd.toolkit:before, dd.toolkit:after {
  content: none !important;
}

dd.toolkit ul {
  display: flex;
  flex-flow: row wrap;
}
dd.toolkit ul li {
  padding: 0;
  margin: 0;
}
dd.toolkit ul li:first-of-type:before {
  content: '"';
  margin-right: 0.1rem;
}
dd.toolkit ul li:last-of-type:after {
  content: '"';
  margin-left: 0.1em;
}
dd.toolkit ul li a {
  font-size: 0.9em;
  line-height: 1.4;
  text-decoration: none;
}
dd.toolkit ul li a:after {
  content: ",";
  margin-right: 0.5em;
}
dd.toolkit ul li:last-of-type a:after {
  content: "";
  margin-right: 0;
}

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