@charset "UTF-8";
* {
  --level-incr: inherit;
  --level: inherit;
  --min-contrast: inherit;
  --max-contrast: inherit;
  --prim-hue: inherit;
  --prim-saturation: inherit;
  --low-hue: inherit;
  --high-hue: inherit;
  --low-saturation: inherit;
  --high-saturation: inherit;
  --tint: inherit;
}

.ground-light, .ground-dark {
  --level: 12;
  --luminosity: 0.5;
  --min-contrast: 54%;
  --max-contrast: 90%;
}

.ground-light {
  --level-incr: -1;
  --prim-hue: 53deg;
  --prim-saturation: 36%;
  --low-hue: -50deg;
  --low-saturation: -30%;
  --high-hue: 50deg;
  --high-saturation: 30%;
}
.ground-light .reverse {
  --level-incr: 1;
}

.ground-dark {
  --level-incr: 1;
  --prim-hue: 53deg;
  --prim-saturation: 36%;
  --low-hue: 50deg;
  --low-saturation: 30%;
  --high-hue: -50deg;
  --high-saturation: -30%;
}
.ground-dark .reverse {
  --level-incr: -1;
}

.opaque, body, #capricon-console .capricon-steps.active .header, .capricon span.quote, .menu a, .frame .sheet .expansible.inline, .frame .sheet .expansible input[type=checkbox] ~ *.expand-else, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-else, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-else, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-else, .frame .sheet .expansible input[type=checkbox] ~ *.expand-then, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-then, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-then, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-then, .frame .sheet .expansible, #body-theme-chooser .sheet .expansible, #capricon-console .sheet .expansible, #capricon-console .capricon-steps .expansible, .frame .sheet button, #body-theme-chooser .sheet button, #capricon-console .sheet button, #capricon-console .capricon-steps button, .frame .sheet select, #body-theme-chooser .sheet select, #capricon-console .sheet select, #capricon-console .capricon-steps select, .frame .sheet input, #body-theme-chooser .sheet input, #capricon-console .sheet input, #capricon-console .capricon-steps input, .frame .sheet textarea, #body-theme-chooser .sheet textarea, #capricon-console .sheet textarea, #capricon-console .capricon-steps textarea, .frame .sheet pre, #body-theme-chooser .sheet pre, #capricon-console .sheet pre, #capricon-console .capricon-steps pre, .frame .sheet code, #body-theme-chooser .sheet code, #capricon-console .sheet code, #capricon-console .capricon-steps code, .frame .sheet, #body-theme-chooser .sheet, #capricon-console .sheet, #capricon-console .capricon-steps, .frame, #body-theme-chooser, #capricon-console {
  background-color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--low-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--low-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% - calc(calc((var(--level-incr) + 1) / 2) * var(--luminosity) + calc((var(--level-incr) - 1) / 2) * (1 - var(--luminosity))) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.with-border, #capricon-console .capricon-steps, .user-input .capricon-input-prefix, .menu.right > ul li ul, .menu:not(.right) > ul li ul, .frame .sheet button, #body-theme-chooser .sheet button, #capricon-console .sheet button, #capricon-console .capricon-steps button, .frame .sheet select, #body-theme-chooser .sheet select, #capricon-console .sheet select, #capricon-console .capricon-steps select, .frame .sheet input, #body-theme-chooser .sheet input, #capricon-console .sheet input, #capricon-console .capricon-steps input, .frame .sheet textarea, #body-theme-chooser .sheet textarea, #capricon-console .sheet textarea, #capricon-console .capricon-steps textarea {
  border-color: hsla(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))), 0.3);
}

.primary, body, .frame body, #capricon-console body, #body-theme-chooser body, #body-theme-chooser, .sheet .capricon span.symbol[data-symbol-name="'lambdas"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'lambdas"]::after, .sheet .capricon span.symbol[data-symbol-name="'foralls"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'foralls"]::after, .sheet .capricon span.symbol[data-symbol-name="->"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="->"]::after, .sheet .capricon span.symbol[data-symbol-name="?"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="?"]::after, .sheet .capricon span.symbol[data-symbol-name="!"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="!"]::after, .frame .primary, #body-theme-chooser .primary, #capricon-console .primary {
  --tint: 0deg;
}
.primary, body, .frame body, #capricon-console body, #body-theme-chooser body, #body-theme-chooser, .sheet .capricon span.symbol[data-symbol-name="'lambdas"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'lambdas"]::after, .sheet .capricon span.symbol[data-symbol-name="'foralls"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'foralls"]::after, .sheet .capricon span.symbol[data-symbol-name="->"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="->"]::after, .sheet .capricon span.symbol[data-symbol-name="?"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="?"]::after, .sheet .capricon span.symbol[data-symbol-name="!"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="!"]::after, .frame .primary, #body-theme-chooser .primary, #capricon-console .primary, .primary *, body *, .frame body *, #capricon-console body *, #body-theme-chooser *, .sheet .capricon span.symbol[data-symbol-name="'lambdas"]::after *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'lambdas"]::after *, .sheet .capricon span.symbol[data-symbol-name="'foralls"]::after *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'foralls"]::after *, .sheet .capricon span.symbol[data-symbol-name="->"]::after *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="->"]::after *, .sheet .capricon span.symbol[data-symbol-name="?"]::after *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="?"]::after *, .sheet .capricon span.symbol[data-symbol-name="!"]::after *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="!"]::after *, .frame .primary *, #capricon-console .primary * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.hexad-1, .frame .hexad-1, #body-theme-chooser .hexad-1, #capricon-console .hexad-1 {
  --tint: 60deg;
}
.hexad-1, .frame .hexad-1, #body-theme-chooser .hexad-1, #capricon-console .hexad-1, .hexad-1 *, .frame .hexad-1 *, #body-theme-chooser .hexad-1 *, #capricon-console .hexad-1 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.hexad-2, .frame .hexad-2, #body-theme-chooser .hexad-2, #capricon-console .hexad-2 {
  --tint: 120deg;
}
.hexad-2, .frame .hexad-2, #body-theme-chooser .hexad-2, #capricon-console .hexad-2, .hexad-2 *, .frame .hexad-2 *, #body-theme-chooser .hexad-2 *, #capricon-console .hexad-2 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.hexad-3, #capricon-console .capricon-steps.active .header, .frame .hexad-3, #body-theme-chooser .hexad-3, #capricon-console .hexad-3 {
  --tint: 180deg;
}
.hexad-3, #capricon-console .capricon-steps.active .header, .frame .hexad-3, #body-theme-chooser .hexad-3, #capricon-console .hexad-3, .hexad-3 *, #capricon-console .capricon-steps.active .header *, .frame .hexad-3 *, #body-theme-chooser .hexad-3 *, #capricon-console .hexad-3 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.hexad-4, .frame .hexad-4, #body-theme-chooser .hexad-4, #capricon-console .hexad-4 {
  --tint: 240deg;
}
.hexad-4, .frame .hexad-4, #body-theme-chooser .hexad-4, #capricon-console .hexad-4, .hexad-4 *, .frame .hexad-4 *, #body-theme-chooser .hexad-4 *, #capricon-console .hexad-4 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.hexad-5, .frame .hexad-5, #body-theme-chooser .hexad-5, #capricon-console .hexad-5 {
  --tint: 300deg;
}
.hexad-5, .frame .hexad-5, #body-theme-chooser .hexad-5, #capricon-console .hexad-5, .hexad-5 *, .frame .hexad-5 *, #body-theme-chooser .hexad-5 *, #capricon-console .hexad-5 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.pentad-1, .frame .pentad-1, #body-theme-chooser .pentad-1, #capricon-console .pentad-1 {
  --tint: 72deg;
}
.pentad-1, .frame .pentad-1, #body-theme-chooser .pentad-1, #capricon-console .pentad-1, .pentad-1 *, .frame .pentad-1 *, #body-theme-chooser .pentad-1 *, #capricon-console .pentad-1 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.pentad-2, .sheet .capricon span.symbol[data-symbol-name^="'"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^="'"], .frame .sheet .capricon span.symbol[data-symbol-name^="'"], #body-theme-chooser .sheet .capricon span.symbol[data-symbol-name^="'"], #capricon-console .sheet .capricon span.symbol[data-symbol-name^="'"], .sheet .capricon .frame span.symbol[data-symbol-name^="'"], .sheet .capricon #body-theme-chooser span.symbol[data-symbol-name^="'"], .sheet .capricon #capricon-console span.symbol[data-symbol-name^="'"], .frame .pentad-2, #body-theme-chooser .pentad-2, #capricon-console .pentad-2 {
  --tint: 144deg;
}
.pentad-2, .sheet .capricon span.symbol[data-symbol-name^="'"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^="'"], .frame .sheet .capricon span.symbol[data-symbol-name^="'"], #body-theme-chooser .sheet .capricon span.symbol[data-symbol-name^="'"], #capricon-console .sheet .capricon span.symbol[data-symbol-name^="'"], .sheet .capricon .frame span.symbol[data-symbol-name^="'"], .sheet .capricon #body-theme-chooser span.symbol[data-symbol-name^="'"], .sheet .capricon #capricon-console span.symbol[data-symbol-name^="'"], .frame .pentad-2, #body-theme-chooser .pentad-2, #capricon-console .pentad-2, .pentad-2 *, .sheet .capricon span.symbol[data-symbol-name^="'"] *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^="'"] *, .frame .sheet .capricon span.symbol[data-symbol-name^="'"] *, #body-theme-chooser .sheet .capricon span.symbol[data-symbol-name^="'"] *, #capricon-console .sheet .capricon span.symbol[data-symbol-name^="'"] *, .sheet .capricon .frame span.symbol[data-symbol-name^="'"] *, .sheet .capricon #body-theme-chooser span.symbol[data-symbol-name^="'"] *, .sheet .capricon #capricon-console span.symbol[data-symbol-name^="'"] *, .frame .pentad-2 *, #body-theme-chooser .pentad-2 *, #capricon-console .pentad-2 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.pentad-3, .frame .pentad-3, #body-theme-chooser .pentad-3, #capricon-console .pentad-3 {
  --tint: 216deg;
}
.pentad-3, .frame .pentad-3, #body-theme-chooser .pentad-3, #capricon-console .pentad-3, .pentad-3 *, .frame .pentad-3 *, #body-theme-chooser .pentad-3 *, #capricon-console .pentad-3 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.pentad-4, .sheet .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'], .frame .pentad-4, #body-theme-chooser .pentad-4, #capricon-console .pentad-4 {
  --tint: 288deg;
}
.pentad-4, .sheet .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'], .frame .pentad-4, #body-theme-chooser .pentad-4, #capricon-console .pentad-4, .pentad-4 *, .sheet .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'] *, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'] *, .frame .pentad-4 *, #body-theme-chooser .pentad-4 *, #capricon-console .pentad-4 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.tetrad-1, .frame .tetrad-1, #body-theme-chooser .tetrad-1, #capricon-console .tetrad-1 {
  --tint: 90deg;
}
.tetrad-1, .frame .tetrad-1, #body-theme-chooser .tetrad-1, #capricon-console .tetrad-1, .tetrad-1 *, .frame .tetrad-1 *, #body-theme-chooser .tetrad-1 *, #capricon-console .tetrad-1 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.tetrad-2, .frame .tetrad-2, #body-theme-chooser .tetrad-2, #capricon-console .tetrad-2 {
  --tint: 180deg;
}
.tetrad-2, .frame .tetrad-2, #body-theme-chooser .tetrad-2, #capricon-console .tetrad-2, .tetrad-2 *, .frame .tetrad-2 *, #body-theme-chooser .tetrad-2 *, #capricon-console .tetrad-2 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.tetrad-3, .frame .tetrad-3, #body-theme-chooser .tetrad-3, #capricon-console .tetrad-3 {
  --tint: 270deg;
}
.tetrad-3, .frame .tetrad-3, #body-theme-chooser .tetrad-3, #capricon-console .tetrad-3, .tetrad-3 *, .frame .tetrad-3 *, #body-theme-chooser .tetrad-3 *, #capricon-console .tetrad-3 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.triad-1, .frame .triad-1, #body-theme-chooser .triad-1, #capricon-console .triad-1 {
  --tint: 120deg;
}
.triad-1, .frame .triad-1, #body-theme-chooser .triad-1, #capricon-console .triad-1, .triad-1 *, .frame .triad-1 *, #body-theme-chooser .triad-1 *, #capricon-console .triad-1 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.triad-2, .frame .triad-2, #body-theme-chooser .triad-2, #capricon-console .triad-2 {
  --tint: 240deg;
}
.triad-2, .frame .triad-2, #body-theme-chooser .triad-2, #capricon-console .triad-2, .triad-2 *, .frame .triad-2 *, #body-theme-chooser .triad-2 *, #capricon-console .triad-2 * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

@font-face {
  font-family: "pretty-sans-serif";
  font-style: normal;
  font-weight: 400;
  src: local("Merriweather Regular"), local("Merriweather-Regular"), url("Merriweather-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: "pretty-mono";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Mono"), local("RobotoMono-Regular"), url("RobotoMono-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.shiny, .menu a, .frame .sheet button, #body-theme-chooser .sheet button, #capricon-console .sheet button, #capricon-console .capricon-steps button, .frame .sheet select, #body-theme-chooser .sheet select, #capricon-console .sheet select, #capricon-console .capricon-steps select {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.05) 100%);
}

.huge, .frame h1, #body-theme-chooser h1, #capricon-console h1 {
  font-size: 200%;
}

.large, .frame h2, #body-theme-chooser h2, #capricon-console h2 {
  font-size: 150%;
}

.big, .frame h3, #body-theme-chooser h3, #capricon-console h3 {
  font-size: 125%;
}

.medium, .frame input, #body-theme-chooser input, #capricon-console input, .frame textarea, #body-theme-chooser textarea, #capricon-console textarea, .frame select, #body-theme-chooser select, #capricon-console select, .frame button, #body-theme-chooser button, #capricon-console button, .frame h5, #body-theme-chooser h5, #capricon-console h5, .frame h4, #body-theme-chooser h4, #capricon-console h4, .frame .handlebar, #body-theme-chooser .handlebar, #capricon-console .handlebar {
  font-size: 100%;
}

* {
  --font-size: inherit;
}

.frame, #body-theme-chooser, #capricon-console {
  display: inline-block;
  vertical-align: top;
}
.frame .header, #body-theme-chooser .header, #capricon-console .header {
  font-family: "pretty-sans-serif";
  display: block;
}
.frame .header > *, #body-theme-chooser .header > *, #capricon-console .header > * {
  display: inline-block;
  height: 2.0225em;
  vertical-align: middle;
}
.frame .handlebar, #body-theme-chooser .handlebar, #capricon-console .handlebar {
  display: block;
  font-weight: bold;
  padding: 0;
  margin: 0 !important;
}
.frame .sheet, #body-theme-chooser .sheet, #capricon-console .sheet, #capricon-console .capricon-steps {
  font-family: pretty-sans-serif, sans-serif;
  line-height: 1.618em;
  max-width: 97.08em;
}
.frame h1, #body-theme-chooser h1, #capricon-console h1 {
  text-align: center;
}
.frame h1, #body-theme-chooser h1, #capricon-console h1, .frame h2, #body-theme-chooser h2, #capricon-console h2, .frame h3, #body-theme-chooser h3, #capricon-console h3, .frame h4, #body-theme-chooser h4, #capricon-console h4, .frame h5, #body-theme-chooser h5, #capricon-console h5 {
  line-height: 1.618em;
  margin: 0;
}
.frame h1, #body-theme-chooser h1, #capricon-console h1 {
  padding: 0.809em 0;
}
.frame h2, #body-theme-chooser h2, #capricon-console h2 {
  padding: 1.0786666667em 0;
}
.frame h3, #body-theme-chooser h3, #capricon-console h3 {
  padding: 0.9708em 0;
}
.frame h4, #body-theme-chooser h4, #capricon-console h4 {
  padding: 0.809em 0;
}
.frame h5, #body-theme-chooser h5, #capricon-console h5 {
  padding: 1.618em 0 0;
}
.frame p, #body-theme-chooser p, #capricon-console p {
  padding: 0;
  margin: 0;
}
.frame p + p, #body-theme-chooser p + p, #capricon-console p + p {
  text-indent: 2.427em;
}
.frame p + p *, #body-theme-chooser p + p *, #capricon-console p + p * {
  text-indent: 0;
}
.frame pre, #body-theme-chooser pre, #capricon-console pre, .frame code, #body-theme-chooser code, #capricon-console code {
  font-family: pretty-mono, mono;
  line-height: 1.618em;
}
.frame .box, #body-theme-chooser .box, #capricon-console .box {
  display: block;
}
.frame pre, #body-theme-chooser pre, #capricon-console pre, .frame .box, #body-theme-chooser .box, #capricon-console .box {
  margin: 1.618em auto;
}
.frame pre, #body-theme-chooser pre, #capricon-console pre {
  max-width: 60em;
  overflow: auto;
}
.frame code, #body-theme-chooser code, #capricon-console code {
  display: inline-block;
}
.frame dt, #body-theme-chooser dt, #capricon-console dt {
  margin: 0.809em 0;
}
.frame button, #body-theme-chooser button, #capricon-console button {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.1618em;
  height: 2.0225em;
  line-height: calc(1.618em - 2px);
  vertical-align: top;
}
.frame a, #body-theme-chooser a, #capricon-console a {
  text-decoration: none;
}
.frame a:hover, #body-theme-chooser a:hover, #capricon-console a:hover {
  text-decoration: underline;
}
.frame input, #body-theme-chooser input, #capricon-console input, .frame textarea, #body-theme-chooser textarea, #capricon-console textarea, .frame select, #body-theme-chooser select, #capricon-console select {
  line-height: calc(1.618em - 2px);
  border-width: 1px;
  border-style: solid;
  border-radius: 0.1618em;
  font-family: pretty-sans-serif;
  display: inline-block;
  vertical-align: top;
}
.frame textarea, #body-theme-chooser textarea, #capricon-console textarea {
  height: calc(2.0225em - 2px);
  position: relative;
  top: -1px;
  left: -1px;
}
.frame input, #body-theme-chooser input, #capricon-console input, .frame select, #body-theme-chooser select, #capricon-console select {
  padding: 0;
  height: calc(2.0225em - 2px);
}
.frame a, #body-theme-chooser a, #capricon-console a {
  text-decoration: underline;
}

.frame, #body-theme-chooser, #capricon-console {
  --level: 6;
  --tint: 0deg;
}
.frame, #body-theme-chooser, #capricon-console, .frame *, #body-theme-chooser *, #capricon-console * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .header, #body-theme-chooser .header, #capricon-console .header {
  --level: 3;
}
.frame .sheet, #body-theme-chooser .sheet, #capricon-console .sheet, #capricon-console .capricon-steps {
  --level: 12;
  --tint: 0deg;
}
.frame .sheet, #body-theme-chooser .sheet, #capricon-console .sheet, #capricon-console .capricon-steps, .frame .sheet *, #body-theme-chooser .sheet *, #capricon-console .sheet *, #capricon-console .capricon-steps * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet p, #body-theme-chooser .sheet p, #capricon-console .sheet p, #capricon-console .capricon-steps p {
  --level: 12;
}
.frame .sheet code, #body-theme-chooser .sheet code, #capricon-console .sheet code, #capricon-console .capricon-steps code {
  --level: 9;
}
.frame .sheet pre, #body-theme-chooser .sheet pre, #capricon-console .sheet pre, #capricon-console .capricon-steps pre {
  --level: 9;
}
.frame .sheet pre code, #body-theme-chooser .sheet pre code, #capricon-console .sheet pre code, #capricon-console .capricon-steps pre code {
  background: none;
}
.frame .sheet input, #body-theme-chooser .sheet input, #capricon-console .sheet input, #capricon-console .capricon-steps input, .frame .sheet textarea, #body-theme-chooser .sheet textarea, #capricon-console .sheet textarea, #capricon-console .capricon-steps textarea {
  --level: 9;
  --tint: 0deg;
}
.frame .sheet input, #body-theme-chooser .sheet input, #capricon-console .sheet input, #capricon-console .capricon-steps input, .frame .sheet input *, #body-theme-chooser .sheet input *, #capricon-console .sheet input *, #capricon-console .capricon-steps input *, .frame .sheet textarea, #body-theme-chooser .sheet textarea, #capricon-console .sheet textarea, #capricon-console .capricon-steps textarea, .frame .sheet textarea *, #body-theme-chooser .sheet textarea *, #capricon-console .sheet textarea *, #capricon-console .capricon-steps textarea * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet a, #body-theme-chooser .sheet a, #capricon-console .sheet a, #capricon-console .capricon-steps a {
  --level: 6;
  --tint: 216deg;
}
.frame .sheet a, #body-theme-chooser .sheet a, #capricon-console .sheet a, #capricon-console .capricon-steps a, .frame .sheet a *, #body-theme-chooser .sheet a *, #capricon-console .sheet a *, #capricon-console .capricon-steps a * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet button, #body-theme-chooser .sheet button, #capricon-console .sheet button, #capricon-console .capricon-steps button, .frame .sheet select, #body-theme-chooser .sheet select, #capricon-console .sheet select, #capricon-console .capricon-steps select {
  --level: 6;
}
.frame .sheet button:hover, #body-theme-chooser .sheet button:hover, #capricon-console .sheet button:hover, #capricon-console .capricon-steps button:hover, .frame .sheet select:hover, #body-theme-chooser .sheet select:hover, #capricon-console .sheet select:hover, #capricon-console .capricon-steps select:hover {
  --level: 9;
}
.frame .sheet button:active, #body-theme-chooser .sheet button:active, #capricon-console .sheet button:active, #capricon-console .capricon-steps button:active, .frame .sheet select:active, #body-theme-chooser .sheet select:active, #capricon-console .sheet select:active, #capricon-console .capricon-steps select:active {
  --level: 3;
}
.frame .sheet .expansible, #body-theme-chooser .sheet .expansible, #capricon-console .sheet .expansible, #capricon-console .capricon-steps .expansible {
  --tint: 0deg;
  position: relative;
}
.frame .sheet .expansible, #body-theme-chooser .sheet .expansible, #capricon-console .sheet .expansible, #capricon-console .capricon-steps .expansible, .frame .sheet .expansible *, #body-theme-chooser .sheet .expansible *, #capricon-console .sheet .expansible *, #capricon-console .capricon-steps .expansible * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet .expansible input[type=checkbox], #body-theme-chooser .sheet .expansible input[type=checkbox], #capricon-console .sheet .expansible input[type=checkbox], #capricon-console .capricon-steps .expansible input[type=checkbox] {
  display: none;
}
.frame .sheet .expansible input[type=checkbox] ~ *, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *, #capricon-console .sheet .expansible input[type=checkbox] ~ *, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ * {
  display: block;
  width: 100%;
  transition: height 0.5s;
  overflow: hidden;
}
.frame .sheet .expansible input[type=checkbox] ~ *.expand-then, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-then, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-then, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-then {
  --tint: 0deg;
  --level: 6;
}
.frame .sheet .expansible input[type=checkbox] ~ *.expand-then, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-then, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-then, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-then, .frame .sheet .expansible input[type=checkbox] ~ *.expand-then *, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-then *, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-then *, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-then * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet .expansible input[type=checkbox] ~ *.expand-else, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-else, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-else, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-else {
  --tint: 0deg;
  --level: 9;
}
.frame .sheet .expansible input[type=checkbox] ~ *.expand-else, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-else, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-else, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-else, .frame .sheet .expansible input[type=checkbox] ~ *.expand-else *, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ *.expand-else *, #capricon-console .sheet .expansible input[type=checkbox] ~ *.expand-else *, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ *.expand-else * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet .expansible input[type=checkbox] ~ .expand-then, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ .expand-then, #capricon-console .sheet .expansible input[type=checkbox] ~ .expand-then, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ .expand-then, .frame .sheet .expansible input[type=checkbox]:checked ~ .expand-else, #body-theme-chooser .sheet .expansible input[type=checkbox]:checked ~ .expand-else, #capricon-console .sheet .expansible input[type=checkbox]:checked ~ .expand-else, #capricon-console .capricon-steps .expansible input[type=checkbox]:checked ~ .expand-else {
  height: 0;
}
.frame .sheet .expansible input[type=checkbox]:checked ~ .expand-then, #body-theme-chooser .sheet .expansible input[type=checkbox]:checked ~ .expand-then, #capricon-console .sheet .expansible input[type=checkbox]:checked ~ .expand-then, #capricon-console .capricon-steps .expansible input[type=checkbox]:checked ~ .expand-then, .frame .sheet .expansible input[type=checkbox] ~ .expand-else, #body-theme-chooser .sheet .expansible input[type=checkbox] ~ .expand-else, #capricon-console .sheet .expansible input[type=checkbox] ~ .expand-else, #capricon-console .capricon-steps .expansible input[type=checkbox] ~ .expand-else {
  height: calc(var(--num-lines,1) * 1.618em);
}
.frame .sheet .expansible.inline, #body-theme-chooser .sheet .expansible.inline, #capricon-console .sheet .expansible.inline, #capricon-console .capricon-steps .expansible.inline {
  --tint: 0deg;
  --level: 9;
  display: inline-block;
  max-height: 1.618em;
  vertical-align: bottom;
}
.frame .sheet .expansible.inline, #body-theme-chooser .sheet .expansible.inline, #capricon-console .sheet .expansible.inline, #capricon-console .capricon-steps .expansible.inline, .frame .sheet .expansible.inline *, #body-theme-chooser .sheet .expansible.inline *, #capricon-console .sheet .expansible.inline *, #capricon-console .capricon-steps .expansible.inline * {
  color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}
.frame .sheet .expansible.inline input[type=checkbox], #body-theme-chooser .sheet .expansible.inline input[type=checkbox], #capricon-console .sheet .expansible.inline input[type=checkbox], #capricon-console .capricon-steps .expansible.inline input[type=checkbox] {
  display: inline-block;
  position: relative;
  left: -9999px;
  width: 0;
  height: 0;
  overflow: visible;
  transition: width 0.5s;
}
.frame .sheet .expansible.inline input[type=checkbox] ~ *, #body-theme-chooser .sheet .expansible.inline input[type=checkbox] ~ *, #capricon-console .sheet .expansible.inline input[type=checkbox] ~ *, #capricon-console .capricon-steps .expansible.inline input[type=checkbox] ~ * {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
}
.frame .sheet .expansible.inline input[type=checkbox]:checked, #body-theme-chooser .sheet .expansible.inline input[type=checkbox]:checked, #capricon-console .sheet .expansible.inline input[type=checkbox]:checked, #capricon-console .capricon-steps .expansible.inline input[type=checkbox]:checked {
  width: calc(var(--expand-width,1) * 1em);
}
.frame .sheet .expansible.inline input[type=checkbox]:checked ~ *, #body-theme-chooser .sheet .expansible.inline input[type=checkbox]:checked ~ *, #capricon-console .sheet .expansible.inline input[type=checkbox]:checked ~ *, #capricon-console .capricon-steps .expansible.inline input[type=checkbox]:checked ~ * {
  z-index: 1000;
}
.frame .sheet .expansible.inline::after, #body-theme-chooser .sheet .expansible.inline::after, #capricon-console .sheet .expansible.inline::after, #capricon-console .capricon-steps .expansible.inline::after {
  display: block;
  width: 1em;
  height: 1.618em;
  position: absolute;
  right: 0;
  content: " ";
  opacity: 0.4;
  z-index: 100;
  top: 0;
  background-image: var(--checkbox-filler);
  background-size: 1em 1em;
  background-position: top;
  background-repeat: no-repeat;
}
.frame .sheet .expansible.box, #body-theme-chooser .sheet .expansible.box, #capricon-console .sheet .expansible.box, #capricon-console .capricon-steps .expansible.box {
  display: block;
}

.menu {
  position: relative;
  display: inline-block;
}
.menu ul {
  transition: opacity 0.2s;
}
.menu ul, .menu li {
  margin: 0;
  padding: 0;
}
.menu li {
  list-style-type: none;
}
.menu a {
  --level: 3;
  display: block;
  padding: 0.20225em;
  height: 1.618em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  line-height: 1.618em;
}
.menu a:hover:not(:active) {
  --level: 6;
}
.menu a:active {
  --level: 1;
}
.menu > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.menu > ul li {
  position: relative;
}
.menu > ul li li {
  width: 100%;
}
.menu > ul li ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.menu > ul li:hover > ul {
  opacity: 1;
  visibility: visible;
  z-index: 1000;
}
.menu:not(.right) > ul li ul {
  border-left-style: solid;
  border-left-width: 0.1618em;
  left: 1.618em;
  right: 0;
  top: 100%;
}
.menu.right {
  text-align: right;
}
.menu.right > ul li ul {
  border-right-style: solid;
  border-right-width: 0.1618em;
  right: 1.618em;
  left: 0;
  top: 100%;
}
.menu:hover > ul {
  opacity: 1;
  z-index: 10000;
  visibility: visible;
}

.sheet .capricon span.symbol[data-symbol-name=exec], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=exec] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="["], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="["] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="]"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="]"] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=each], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=each] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=dup], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=dup] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="$"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="$"] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=swap], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=swap] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=dupn], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=dupn] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=shift], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=shift] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=shaft], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=shaft] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=def], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=def] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=printf], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=printf] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=cons], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=cons] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=pop], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=pop] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=range], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=range] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=print], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=print] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=swapn], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=swapn] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=format], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=format] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=stack], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=stack] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=set-stack], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=set-stack] {
  font-weight: bold;
  --tint: 0deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="{"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="{"] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=",{"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=",{"] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="${"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="${"] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="}"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="}"] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="("], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="("] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=")"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=")"] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=type], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=type] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=defconstr], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=defconstr] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=hypotheses], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=hypotheses] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=variable], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=variable] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=universe], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=universe] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=extro-forall], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=extro-forall] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=extro-lambda], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=extro-lambda] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=apply], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=apply] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=mu], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=mu] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=pattern-index], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=pattern-index] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=set-pattern-index], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=set-pattern-index] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=index-insert], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=index-insert] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=pull], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=pull] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name=intro], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name=intro] {
  font-weight: bold;
  --tint: 120deg;
  --level: 6;
}
.sheet .capricon span.symbol[data-symbol-name="!"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="!"] {
  visibility: hidden;
  position: relative;
}
.sheet .capricon span.symbol[data-symbol-name="!"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="!"]::after {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  font-weight: bold;
  --level: 6;
  content: "λ";
}
.sheet .capricon span.symbol[data-symbol-name="?"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="?"] {
  visibility: hidden;
  position: relative;
}
.sheet .capricon span.symbol[data-symbol-name="?"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="?"]::after {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  font-weight: bold;
  --level: 6;
  content: "∀";
}
.sheet .capricon span.symbol[data-symbol-name="->"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="->"] {
  visibility: hidden;
  position: relative;
}
.sheet .capricon span.symbol[data-symbol-name="->"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="->"]::after {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  font-weight: bold;
  --level: 6;
  content: "→";
}
.sheet .capricon span.symbol[data-symbol-name="'foralls"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'foralls"] {
  visibility: hidden;
  position: relative;
}
.sheet .capricon span.symbol[data-symbol-name="'foralls"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'foralls"]::after {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  font-weight: bold;
  --level: 6;
  content: "'∀*";
}
.sheet .capricon span.symbol[data-symbol-name="'lambdas"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'lambdas"] {
  visibility: hidden;
  position: relative;
}
.sheet .capricon span.symbol[data-symbol-name="'lambdas"]::after, #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name="'lambdas"]::after {
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  font-weight: bold;
  --level: 6;
  content: "'λ*";
}
.sheet .capricon span.symbol[data-symbol-name^="'"], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^="'"] {
  font-style: italic;
  --level: 2;
}
.sheet .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'], #capricon-console .capricon-steps .capricon span.symbol[data-symbol-name^='"'][data-symbol-name$='"'] {
  font-style: italic;
  --level: 1;
}
.sheet .capricon span.quote, #capricon-console .capricon-steps .capricon span.quote {
  border-radius: 0.5em;
}

.capricon {
  --quote-depth: 0;
  --unquote-depth: 0;
  --max-contrast: 85%;
}
.capricon span.quote {
  --tint: calc((var(--quote-depth) - var(--unquote-depth)) * 252deg);
  --quote-depth: 1;
  --unquote-depth: 0;
  --unquote-depth: 0;
}
.capricon span.quote * {
  --quote-depth: inherit;
  --unquote-depth: inherit;
}
.capricon span.quote span.quote.quote-brace {
  --quote-depth: 2;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 3;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 4;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 5;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 6;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 7;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 8;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 9;
}
.capricon span.quote span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace span.quote.quote-brace {
  --quote-depth: 10;
}
.capricon span.quote span.quote.quote-splice {
  --unquote-depth: 1;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 2;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 3;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 4;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 5;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 6;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 7;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 8;
}
.capricon span.quote span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice span.quote.quote-splice {
  --unquote-depth: 9;
}
.capricon span.quote span.quote.quote-exec {
  --unquote-depth: 1;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 2;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 3;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 4;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 5;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 6;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 7;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 8;
}
.capricon span.quote span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec span.quote.quote-exec {
  --unquote-depth: 9;
}

.user-input {
  display: block;
  width: 100%;
}
.user-input .capricon-trigger {
  display: inline-block;
  width: 15%;
}
.user-input .capricon-input-prefix {
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  width: calc(84% - 2px);
}
.user-input .capricon-input-prefix, .user-input .capricon-input-prefix * {
  color: white !important;
}
.user-input .capricon-input-prefix {
  background-image: linear-gradient(to right, black 0 5%, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0) 100%);
}
.user-input .capricon-input-prefix .capricon-input {
  transition: background 1s, opacity 1s;
  display: inline-block;
  background-color: black;
  background-image: linear-gradient(to right, black, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.5) 60%, black 100%);
  opacity: 0;
  border: none;
  font-family: mono;
  width: calc(100% - 1em);
}
.user-input .capricon-input-prefix .capricon-input.pending {
  background-color: green;
  opacity: 0.5;
}
.user-input .capricon-input-prefix .capricon-input.ready {
  background-color: #001a00;
  opacity: 1;
}
.user-input .capricon-output {
  display: none;
}

.capricon-examples {
  position: relative;
  display: block;
  text-align: center;
  height: 2.0225em;
  padding: 0.60675em;
  width: 100%;
  overflow-y: auto;
}
.capricon-examples::before {
  content: "Examples: ";
  font-weight: bold;
  display: inline-block;
  height: 1.618em;
  padding: 0.20225em;
  vertical-align: middle;
  position: absolute;
  left: 0;
}
.capricon-examples .capricon-example {
  display: inline-block;
  max-width: 25%;
}
.capricon-examples .capricon-example * {
  padding: 0;
  margin: 0;
}

.capricon-result {
  display: inline;
  font-style: italic;
}

.capricon-paragraphresult {
  display: block;
  margin-bottom: 1em;
}

.capricon-show::before {
  content: "Show Steps";
}

.capricon-hide::before {
  content: "Hide Steps";
}

.expansible.inline .capricon-show {
  display: none !important;
}
.expansible .capricon-steps {
  position: relative;
  width: 100%;
}
.expansible .capricon-paragraph {
  margin: 0;
  padding: 0;
  display: block;
  max-width: none;
  width: 100%;
}

#capricon-console {
  z-index: 1000;
  position: fixed;
  top: 3em;
  left: 10%;
  width: 80%;
}
#capricon-console .capricon-steps {
  display: none;
  border-radius: 0.2em;
  border-width: 2px;
  border-style: solid;
}
#capricon-console .capricon-steps.active {
  display: block;
}
#capricon-console .capricon-steps.active .header {
  width: 100%;
  border-bottom: 1px solid;
}
#capricon-console .capricon-steps.active .header .left {
  width: 90%;
}
#capricon-console .capricon-steps.active .header .right {
  width: 10%;
}
#capricon-console .capricon-steps.active .header h4 {
  padding: 0;
  height: 2.0225em;
  line-height: 1.618em;
}
#capricon-console .capricon-steps.active pre {
  margin: 0;
}
#capricon-console .capricon-steps.active .capricon-trigger, #capricon-console .capricon-steps.active .capricon-examples {
  display: none;
}
#capricon-console .capricon-steps.active .user-input {
  display: block;
  width: 100%;
}
#capricon-console .capricon-steps.active .user-input * {
  opacity: 1;
}
#capricon-console .capricon-steps.active .user-input .capricon-output {
  display: block;
  max-height: 15em;
  overflow: auto;
}
#capricon-console .capricon-steps.active .user-input .capricon-input-prefix {
  width: 100%;
}
#capricon-console .capricon-steps.active .user-input .capricon-input-prefix .capricon-input {
  background: black;
  border: none;
  font-family: mono;
}
#capricon-console .capricon-steps.active .capricon-submit {
  display: inline-block;
  margin: 0;
}
#capricon-console .capricon-steps.active .capricon-output {
  display: block;
}
#capricon-console h3 {
  margin: 0 0 1em 0;
  display: block;
  width: 100%;
  border-radius: 0.2em 0.2em 0 0;
}
@media (min-width: 60em) {
  #capricon-console {
    left: 20%;
    width: 60%;
  }
}

.smooth-colors, .smooth-colors * {
  transition: color 1s, background 1s !important;
}

svg.formula {
  display: inline-block;
  vertical-align: top;
  padding: 0.2em;
  font-style: normal;
}
svg.formula .small {
  font-size: 70%;
}
svg.formula .variable {
  font-style: italic;
  fill: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.expansible.inline {
  --checkbox-filler: url("steps.png");
  --expand-width: 20;
}

.in-progress::before {
  background: red;
  color: black;
  content: "In Progress";
}

#body-theme-chooser {
  display: none;
}
#body-theme-chooser.active {
  display: block;
}

html {
  display: block;
  height: calc(100%);
}

body {
  font-family: sans-serif;
  margin: auto;
  height: 100%;
  font-size: 15px;
  position: relative;
}
@media (min-width: 65em) {
  body {
    width: 65em;
  }
  body::before {
    content: "";
    background-image: url(math-tile.jpg);
    background-color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--low-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--low-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% - calc(calc((var(--level-incr) + 1) / 2) * var(--luminosity) + calc((var(--level-incr) - 1) / 2) * (1 - var(--luminosity))) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
    background-size: 20em;
    opacity: 0.1;
    position: fixed;
    height: 100%;
    left: 0;
    right: 50%;
    top: 0;
    bottom: 100%;
  }
  body::after {
    content: "";
    background-image: url(math-tile.jpg);
    background-color: hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--low-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--low-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% - calc(calc((var(--level-incr) + 1) / 2) * var(--luminosity) + calc((var(--level-incr) - 1) / 2) * (1 - var(--luminosity))) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
    background-size: 20em;
    opacity: 0.1;
    z-index: -1;
    position: fixed;
    height: 100%;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 100%;
  }
}

ul > li {
  list-style-type: " -  ";
  list-style-type: " −  ";
}

#content-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

#content-scroll {
  display: block;
  position: relative;
  height: calc(100% - 2.0225em);
  width: 100%;
  overflow-y: scroll;
}

#content {
  display: block;
  padding: 0 2.427em 5em;
  position: relative;
  min-height: calc(100% - 5em);
  width: calc(100% - 4.854em);
}

.nav {
  display: block;
  width: 100%;
}
.nav .left, .nav .right {
  width: 20%;
}
.nav .middle {
  width: 60%;
  text-align: center;
}

.footnotes {
  text-align: right;
}
.footnotes ol {
  display: inline-block;
}

#content-scroll footer {
  opacity: 0.7;
  text-align: center;
  font-size: small;
  position: absolute;
  bottom: 0;
  width: 80%;
  margin-left: 8%;
}
#content-scroll footer::before {
  content: "";
  display: block;
  width: 90%;
  margin: auto;
  border-bottom: 1px solid hsl(calc(var(--tint) + var(--prim-hue) * calc(1 - 3 / (16 - var(--level))) + var(--high-hue) * calc(3 / (16 - var(--level)))), calc(var(--prim-saturation) * calc(1 - 3 / (16 - var(--level))) + var(--high-saturation) * calc(3 / (16 - var(--level)))), calc(var(--luminosity) * 100% + calc(calc((var(--level-incr) + 1) / 2) * (1 - var(--luminosity)) + calc((var(--level-incr) - 1) / 2) * var(--luminosity)) * calc((var(--min-contrast) + (var(--max-contrast) - var(--min-contrast)) * (var(--level) - 1) / 11))));
}

.math.inline {
  font-size: 80%;
}