html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

body {
  color: #222;
  background-color: #f9f6f6;
  font-size: 18px;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0 4em;
  margin: 0 auto;
  max-width: 1600px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: italic;
  font-weight: 900;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  text-decoration: none;
}

[class^=ri-],
[class*=" ri-"] {
  position: relative;
  top: 0.15em;
}

body > header {
  display: flex;
  justify-content: space-between;
  vertical-align: top;
  line-height: 3em;
}
body > header h1 {
  display: inline-block;
  font-style: italic;
  font-size: 2.5em;
}
body > header div.milz {
  font-size: 0.8em;
  display: inline-block;
}
body > header div.milz img {
  border: none;
  height: 1em;
}
body > header nav {
  display: inline-block;
  text-align: right;
}
body > header nav ul li {
  font-size: 2em;
  font-weight: 900;
}
body > header nav ul li a {
  text-decoration: none;
}

body > footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8em;
  margin-bottom: 1em;
  height: 1.5em;
  font-size: 0.85em;
}
body > footer img {
  height: 100%;
  width: auto;
}
body > footer div.copyright {
  display: inline-block;
}

a {
  color: #222;
}
a:hover {
  color: #170fff;
}

span.oj {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}

img {
  border: 2px solid #222;
}
img.small {
  width: 50%;
}

table {
  width: 100%;
  border: none;
  border-collapse: collapse;
}
table tr,
table td {
  text-align: left;
  vertical-align: top;
}
table tr {
  border-top: 2px solid #222;
}
table td {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
table thead tr {
  font-weight: 900;
}
table thead th {
  text-align: left;
}

div#customizer {
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 1.5em;
}
div#customizer header {
  grid-column: span 2;
}
div#customizer header h1 {
  display: inline-block;
}
div#customizer header h1 span {
  color: #170fff;
}

iframe#iframe_runner {
  display: none;
}

div.pane {
  position: relative;
  display: block;
  grid-column: span 1;
}

div.alert {
  padding: 1em 0;
}
div.alert span.type {
  font-weight: 900;
}
div.alert span.message {
  margin-left: 1em;
}
div.alert span.location {
  font-style: italic;
}
div.alert.alert-error {
  color: #ff4500;
}

div.viewport {
  height: 40vh;
  overflow: hidden;
  border: 2px solid #222;
  border-radius: 2px;
}
div.viewport canvas {
  width: 100%;
  height: 100%;
}
div.viewport button {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.5em;
}

div.tweaker-pane {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 1.5em;
  row-gap: 0.5em;
  margin-top: 1.5em;
}
div.tweaker-pane button {
  display: block;
}

div.value-tweaker {
  grid-column: span 2;
}
div.value-tweaker.divider {
  grid-column: span 6;
}
div.value-tweaker.divider h4 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
div.value-tweaker input,
div.value-tweaker select {
  width: 100%;
}
div.value-tweaker label {
  display: inline-block;
  font-weight: 900;
  user-select: none;
}
div.value-tweaker span.value {
  float: right;
  text-align: right;
}

div.plan-controls {
  margin-top: 4em;
  margin-bottom: 2em;
}
div.plan-controls button {
  margin-right: 1.5em;
}

div.hint {
  margin-top: 2em;
}

/* source-sans-pro-regular - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/source-sans-pro-v14-latin-regular.woff2") format("woff2"), url("../fonts/source-sans-pro-v14-latin-regular.woff") format("woff");
}
/* source-sans-pro-italic - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 400;
  src: local(""), url("../fonts/source-sans-pro-v14-latin-italic.woff2") format("woff2"), url("../fonts/source-sans-pro-v14-latin-italic.woff") format("woff");
}
/* source-sans-pro-900 - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 900;
  src: local(""), url("../fonts/source-sans-pro-v14-latin-900.woff2") format("woff2"), url("../fonts/source-sans-pro-v14-latin-900.woff") format("woff");
}
/* source-sans-pro-900italic - latin */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 900;
  src: local(""), url("../fonts/source-sans-pro-v14-latin-900italic.woff2") format("woff2"), url("../fonts/source-sans-pro-v14-latin-900italic.woff") format("woff");
}
/* source-code-pro-500 - latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("../fonts/source-code-pro-v14-latin-500.woff2") format("woff2"), url("../fonts/source-code-pro-v14-latin-500.woff") format("woff");
}
/* source-code-pro-500italic - latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 500;
  src: local(""), url("../fonts/source-code-pro-v14-latin-500italic.woff2") format("woff2"), url("../fonts/source-code-pro-v14-latin-500italic.woff") format("woff");
}
article.page.docs {
  /* Categories */
  /* The name of a referenced type, e.g. */
  /* Bar in type Foo = Bar */
  /* For a string, in quotes */
  /* Punctuation signs, "=", "|", ":".  */
  /* For example "type foo = number" */
  /* For "string", "number", "void", "typeof", etc... */
  /* The "?" symbol to indicate optional arguments */
  /* The '...' string to indicate 'rest' arguments */
}
article.page.docs > section {
  margin-top: 10em;
}
article.page.docs > section > section {
  margin-top: 1em;
  margin-bottom: 5em;
}
article.page.docs h3.category-title {
  margin-top: 4em;
}
article.page.docs svg {
  display: none;
}
article.page.docs a.permalink {
  display: none;
}
article.page.docs a.permalink .sr-only {
  display: none;
}
article.page.docs .stack {
  display: flex;
  flex-flow: column;
}
article.page.docs h2 {
  /* For the sub-heading */
  /* For the "main" symbol in the heading */
}
article.page.docs h2 em {
  display: block;
  font-style: normal;
}
article.page.docs h2 strong {
  margin-left: 0.5em;
}
article.page.docs h2 span.subhead,
article.page.docs h3 span.subhead {
  display: block;
  font-size: 0.75em;
  font-style: normal;
}
article.page.docs code,
article.page.docs .code {
  font-size: 0.85em;
  font-family: "Source Code Pro", monospace;
  font-weight: 500;
  display: inline;
  overflow-wrap: break-word;
  color: #575151;
}
article.page.docs section.notice--info h4 {
  display: inline;
  color: #ddd6d5;
  font-style: italic;
  margin-right: 2em;
}
article.page.docs section.notice--info p {
  display: inline;
}
article.page.docs section.card {
  display: block;
  outline: 2px solid #222;
  border-radius: 2px;
  margin: 2em 0;
  padding: 1em;
  overflow: hidden;
  background-color: #ffffff;
  max-width: 85%;
}
article.page.docs section.card h2,
article.page.docs section.card h3,
article.page.docs section.card h4,
article.page.docs section.card h5 {
  text-transform: none;
}
article.page.docs section.card h3 {
  display: flex;
  justify-content: space-between;
  font-family: "Source Code Pro", monospace;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 1em;
  margin-top: 0;
}
article.page.docs section.card hr {
  display: none;
}
article.page.docs section.card > div {
  margin-top: 1em;
}
article.page.docs section.card dl {
  margin-top: 1em;
  border-top: 2px solid #222;
  padding-top: 0.5em;
  display: grid;
  grid-template-columns: 40% 60%;
}
article.page.docs section.card dl dt strong + .punctuation,
article.page.docs section.card dl dt strong + .modifier + .punctuation {
  margin-right: 0.5em;
}
article.page.docs section.card dl dt, article.page.docs section.card dl dd {
  margin: 0.25em 0;
}
article.page.docs .index ul,
article.page.docs ul.index {
  list-style: none;
  column-width: 28ex;
  column-gap: 20px;
  margin-bottom: 2em;
}
article.page.docs .index ul li,
article.page.docs ul.index li {
  display: flex;
  font-family: "Source Code Pro", monospace;
  font-weight: 500;
  margin: 0;
  font-size: 1em;
  box-sizing: content-box;
  break-inside: avoid-column;
}
article.page.docs .index h3 {
  background: transparent;
  border: none;
  font-weight: 700;
  margin: 0;
  padding: 0;
}
article.page.docs .reference,
article.page.docs .typeParameter {
  font-weight: 900;
}
article.page.docs .string-literal {
  color: #575151;
}
article.page.docs .punctuation {
  color: #575151;
  font-weight: 900;
  margin: 0 0.1em;
}
article.page.docs .keyword {
  color: #575151;
  font-style: italic;
}
article.page.docs .modifier {
  color: #ddd6d5;
  font-weight: 900;
}
article.page.docs .modifier-tag,
article.page.docs .tag-name {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.75em;
  font-style: italic;
  padding: 0.1em 0.5em;
  color: #222;
  font-weight: 900;
  border: 2px solid #222;
  border-radius: 2px;
  background: transparent;
  text-align: center;
  vertical-align: middle;
}

button,
input,
select,
a.button {
  color: #222;
  border: 2px solid #222;
  border-radius: 2px;
  padding: 0 0.5em;
  line-height: 2em;
  font-size: 1em;
}
button:focus,
input:focus,
select:focus,
a.button:focus {
  border: 2px solid #222;
}
button:active,
input:active,
select:active,
a.button:active {
  border: 2px solid #222;
}
button:hover,
input:hover,
select:hover,
a.button:hover {
  background-color: #170fff;
}

select {
  padding: 0.25em 0.25em;
}
select option {
  line-height: 2em;
}

button, a.button {
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label::after {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin-bottom: -0.15em;
  border: 2px solid #222;
  border-radius: 2px;
  content: "";
  margin-left: 0.5em;
  cursor: pointer;
}

input[type=checkbox]:checked + label::after {
  background-color: #222;
}

input[type=range] {
  background-color: transparent;
  -webkit-appearance: none;
  border: 2px solid #222;
  outline: none;
  padding: 0;
}
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:hover::-moz-range-thumb {
  background-color: #170fff;
}
input[type=range]::-moz-range-track, input[type=range]::-webkit-slider-runnable-track {
  visibility: hidden;
  background-color: #222;
  width: 20px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  background-color: #222;
  border: 0;
  border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb:hover {
  background-color: #170fff;
}
input[type=range]::-moz-range-thumb {
  height: 1em;
  width: 1em;
  border-radius: 0;
  background-color: #222;
  border: 0;
  border-radius: 2px;
}
input[type=range]::-moz-range-thumb:hover {
  background-color: #170fff;
}

input[type=range]:focus {
  outline: none;
}

div.editor {
  position: relative;
  height: 80vh;
  color: #222;
  background: #f9f6f6;
  min-height: 240px;
}
div.editor .CodeMirror {
  height: 100%;
  font-size: 0.8em;
  font-family: "Source Code Pro", monospace;
  font-weight: 400;
  border: 2px solid #222;
  border-radius: 2px;
}
div.editor .CodeMirror-gutter-wrapper.error .CodeMirror-linenumber {
  color: red;
  border-radius: 2px;
  color: #222 !important;
  background-color: #ff4500;
}
div.editor .CodeMirror-gutter-wrapper.error .CodeMirror-linenumber::before {
  display: block;
  position: absolute;
  color: #f9f6f6;
  left: 0;
  font-weight: 900;
  font-style: italic;
  content: "!";
}
div.editor .CodeMirror-line.error {
  color: red !important;
  background-color: red;
}
div.editor .CodeMirror-line.error.error * {
  color: #222 !important;
}
div.editor .CodeMirror-line.error.error::before {
  display: block;
  position: absolute;
  color: #f9f6f6;
  left: 0;
  font-weight: 900;
  font-style: italic;
  content: "!";
}

article.plan {
  margin-top: 4em;
  border-top: 9px solid #222;
}
article.plan > header {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 2em;
  margin-top: 3em;
}
article.plan > header span.brand,
article.plan > header h1 {
  font-size: 1.5em;
}
article.plan > header span.brand {
  display: inline-block;
  vertical-align: baseline;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
}
article.plan > header h1 {
  display: inline-block;
  vertical-align: baseline;
}
article.plan > header h1 span {
  margin-right: 2em;
}
article.plan > header a {
  display: inline-block;
  vertical-align: baseline;
}
article.plan > header img.qrcode {
  display: none;
}
article.plan div.hint {
  margin-top: 2em;
  margin-bottom: 4em;
}
article.plan > footer {
  display: none;
}

article.sheet {
  border-top: 2px solid #222;
  margin-top: 5em;
  max-width: 100%;
  overflow: hidden;
}
article.sheet > header {
  margin-bottom: 2em;
}
article.sheet > header h1 {
  font-size: 1.5em;
}
article.sheet article {
  margin-bottom: 2em;
}
article.sheet article header {
  margin-bottom: 1em;
}
article.sheet article header h1 {
  font-size: 1.25em;
  margin-bottom: 0;
}
article.sheet article header p span {
  margin-right: 2em;
}

article.sheet.overview {
  display: none;
}

article.sheet.bom table td.item,
article.sheet.bom table td.specification,
article.sheet.bom table td.supplier {
  width: 20%;
}
article.sheet.bom table td.amount,
article.sheet.bom table td.item {
  font-weight: 900;
}

article.sheet.cutlist article ul.pieces > li {
  display: inline-block;
  margin-right: 2em;
  margin-bottom: 2em;
}
article.sheet.cutlist article ul.pieces span.amount {
  font-weight: 900;
  margin-right: 1em;
}
article.sheet.cutlist article ul.pieces span.amount,
article.sheet.cutlist article ul.pieces span.dimensions {
  white-space: nowrap;
}
article.sheet.cutlist article ul.bars,
article.sheet.cutlist article ul.panels {
  display: inline-block;
  margin-left: 4em;
}
article.sheet.cutlist article ul.bars li,
article.sheet.cutlist article ul.panels li {
  display: inline;
  font-size: 0.75em;
  font-style: italic;
  margin-right: 0.75em;
}

article.sheet.drillplan h1 .amount {
  margin-right: 1.5em;
}
article.sheet.drillplan h1 .group {
  font-size: 0.75em;
  margin-right: 2em;
}
article.sheet.drillplan h1 .group .amount {
  margin-right: 0.5em;
}
article.sheet.drillplan h1 .group:last-child {
  margin-right: 0;
}
article.sheet.drillplan div.drillbar {
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}

article.sheet.assembly header h1 span.label,
article.sheet.overview header h1 span.label {
  margin-left: 1em;
}
article.sheet.assembly div.viewport,
article.sheet.overview div.viewport {
  display: inline-block;
  height: unset;
  width: auto;
}
article.sheet.assembly div.viewport canvas,
article.sheet.overview div.viewport canvas {
  width: 100% !important;
  max-width: 1024px;
  height: auto !important;
}
article.sheet.assembly h2,
article.sheet.overview h2 {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 0.25em;
}
article.sheet.assembly ul.parts,
article.sheet.overview ul.parts {
  list-style-type: none;
}
article.sheet.assembly ul.parts li,
article.sheet.overview ul.parts li {
  display: inline-block;
  margin-right: 2em;
}
article.sheet.assembly ul.parts span,
article.sheet.overview ul.parts span {
  margin-right: 0.5em;
}
article.sheet.assembly ul.parts span.amount,
article.sheet.assembly ul.parts span.name,
article.sheet.overview ul.parts span.amount,
article.sheet.overview ul.parts span.name {
  font-weight: 900;
  font-style: italic;
}

svg.bar,
svg.panel,
svg.drillbar {
  display: block;
}
svg.bar rect,
svg.bar line,
svg.bar circle,
svg.bar path,
svg.bar ellipse,
svg.panel rect,
svg.panel line,
svg.panel circle,
svg.panel path,
svg.panel ellipse,
svg.drillbar rect,
svg.drillbar line,
svg.drillbar circle,
svg.drillbar path,
svg.drillbar ellipse {
  stroke-width: 0.4mm;
  stroke: #222;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
svg.bar defs marker path,
svg.panel defs marker path,
svg.drillbar defs marker path {
  fill: #222;
}

svg.drillbar g.dimensions.side0 g.dimension {
  transform: translateX(1.3mm) translateY(-1mm);
}
svg.drillbar g.dimensions.side1 g.dimension {
  transform: translateY(2mm);
}
svg.drillbar g.dimensions line {
  stroke-width: 0.35mm;
}
svg.drillbar g.dimensions text {
  display: block;
  font-size: 0.65em;
}
svg.drillbar g.dimensions.start text {
  transform: translate(-0.5em, 0.25em);
}
svg.drillbar g.dimensions.end text {
  transform: translate(0.5em, 0.25em);
}
svg.drillbar g.sides g.side circle.hole {
  transform-box: fill-box;
  fill: #222;
  stroke: 0.25mm;
}
svg.drillbar g.sides g.side.side0 {
  position: relative;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: skewX(-30deg) scaleY(0.75);
}
svg.drillbar g.sides g.side.side0 rect {
  fill: #ffffff;
}
svg.drillbar g.sides g.side.side0 circle.hole {
  transform-box: fill-box;
  transform: skewX(15deg) scaleX(1.1);
}
svg.drillbar g.sides g.side.side1 rect {
  fill: #ddd6d5;
}
svg.drillbar g.sides g.side.side1 rect.face {
  transform-box: fill-box;
  transform: skewY(-60deg) scaleX(0.433);
}

@media print {
  body {
    padding: 0;
    margin: 0;
    font-size: 11pt;
  }
  body > footer {
    display: none;
  }

  body > header,
body > footer {
    display: none;
  }

  main article.page.app,
main article.page.playground {
    /* Hide everythin except plan */
  }
  main article.page.app > *,
main article.page.playground > * {
    display: none;
  }
  main article.page.app > #app,
main article.page.playground > #app {
    display: block;
  }
  main article.page.app > #app > *,
main article.page.playground > #app > * {
    display: none;
  }
  main article.page.app > #app > article.plan,
main article.page.playground > #app > article.plan {
    display: block;
  }

  article.plan {
    border-top: 0;
  }
  article.plan > header {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
  }
  article.plan > header span.brand, article.plan > header h1 {
    font-size: 1.25em;
  }
  article.plan > header a {
    margin-right: 20mm;
  }
  article.plan > header img.qrcode {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 17mm;
    height: auto;
    outline: none;
    border: none;
  }
  article.plan article.sheet {
    page-break-after: always;
    border: none;
  }
  article.plan article.sheet > header {
    margin-top: 4em;
  }
  article.plan article.sheet article {
    margin-top: 3em;
    page-break-inside: avoid;
  }
  article.plan article.sheet svg {
    max-width: 100%;
    height: auto;
  }
  article.plan article.sheet.overview {
    display: block;
  }
  article.plan article.sheet.assembly article > div, article.plan article.sheet.overview article > div {
    display: flex;
  }
  article.plan article.sheet.assembly article div.hint, article.plan article.sheet.overview article div.hint {
    margin-top: 0;
  }
  article.plan article.sheet.assembly article div.viewport, article.plan article.sheet.overview article div.viewport {
    display: block;
    width: 50%;
    min-width: 50%;
    max-width: 10cm;
    margin-right: 1.5em;
  }
  article.plan > footer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
@page {
  size: landscape;
  margin: 10mm;
}
article.page {
  margin-top: 3em;
}
article.page h1 {
  font-size: 2.5em;
  margin-bottom: 1em;
}
article.page h2 {
  margin-top: 4em;
  margin-bottom: 1em;
  font-size: 2.5em;
}
article.page h3 {
  margin-top: 4em;
  margin-bottom: 1em;
}
article.page p {
  margin-bottom: 1em;
  max-width: 70%;
}

article.page.tutorial > h1 {
  margin-bottom: 2em;
}
article.page.tutorial div.toc > ul {
  font-weight: 900;
  list-style-type: none;
  counter-reset: toc_l1counter;
}
article.page.tutorial div.toc > ul > li {
  counter-increment: toc_l1counter;
  margin-bottom: 1em;
}
article.page.tutorial div.toc > ul > li:before {
  content: counter(toc_l1counter);
  margin-right: 2em;
}
article.page.tutorial div.toc > ul > li > ul {
  list-style-type: none;
  counter-reset: toc_l2counter;
}
article.page.tutorial div.toc > ul > li > ul > li {
  counter-increment: toc_l2counter;
}
article.page.tutorial div.toc > ul > li > ul > li:before {
  content: counter(toc_l1counter) "." counter(toc_l2counter);
  margin-right: 2em;
}
article.page.tutorial h2 {
  counter-reset: h_l2counter;
  counter-increment: h_l1counter;
}
article.page.tutorial h2:before {
  content: counter(h_l1counter);
  padding-right: 1em;
}
article.page.tutorial h3 {
  counter-increment: h_l2counter;
}
article.page.tutorial h3:before {
  content: counter(h_l1counter) "." counter(h_l2counter);
  padding-right: 1em;
}
article.page.tutorial ol {
  list-style-type: counter;
  list-style-position: inside;
}
article.page.tutorial ul {
  list-style-type: disc;
  list-style-position: inside;
}
article.page.tutorial img {
  margin-top: 2em;
  margin-bottom: 1em;
}

article.page.catalogue > h1 {
  text-align: center;
}
article.page.catalogue > p {
  margin-left: 15%;
}
article.page.catalogue article {
  text-align: left;
  border-top: 2px solid #222;
  margin-top: 4em;
  display: flex;
}
article.page.catalogue article h1 {
  margin-bottom: 0.5em;
  margin-top: 0;
}
article.page.catalogue article > div {
  display: block;
  width: 50%;
  margin-top: 1em;
}
article.page.catalogue article p.author {
  font-style: italic;
}
article.page.catalogue article p.difficulty {
  display: none;
}
article.page.catalogue article a.button {
  display: inline-block;
  text-align: center;
  width: 100% !important;
  margin-top: 1em;
}
article.page.catalogue article img {
  float: right;
  text-align: right;
  width: 100%;
}

article.page.app > h1 {
  margin-bottom: 1em;
}
article.page.app #app {
  margin-top: 3em;
}
article.page.app #customizer {
  display: block;
}
article.page.app #customizer div.pane {
  width: 100%;
}

@media only screen and (max-width: 812px) {
  body {
    padding: 0 0.75em;
    font-size: 16px;
  }

  div.tweaker-pane {
    grid-template-columns: repeat(4, 1fr);
  }
  div.tweaker-pane div.value-tweaker.divider {
    grid-column: span 4;
  }

  div#customizer {
    display: block;
    grid-template-columns: 100%;
  }
  div#customizer div.editor {
    display: none;
  }
  div#customizer div.viewport {
    min-height: 40vh;
  }
  div#customizer div.pane {
    margin-bottom: 1.5em;
  }

  article.page p {
    max-width: 100%;
  }

  article.page.catalogue > p {
    margin-left: 10%;
    width: 80%;
  }
  article.page.catalogue article {
    display: block;
  }
  article.page.catalogue article > div {
    width: 100%;
  }
}