.powerpack {
  font-family: Avenir, Helvetica, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  --imperial-red: #f71735;
  --orange-peel: #ff9f1ccc;
  --rich-black: #011627;
  --baby-powder: #fdfffc;
  --venge: #705d56;
  --beige: #f2f3d9;
  --eerie-black: #191919;
  --zomp: #5e9985;
  --indigo-dye: #004777;
  --corn-flower-blue: #7189ff;
  --gallery: #f0f0f0;

  --code-bg: var(--baby-powder);
  --hl-comment: var(--zomp);
  --hl-preproc-comment : var(--indigo-dye);
  --hl-keyword: var(--indigo-dye);
  --hl-constant: var(--indigo-dye);
  --hl-declaration: var(--indigo-dye);
  --hl-namespace: var(--indigo-dye);
  --hl-pseudo: var(--indigo-dye);
  --hl-reserved: var(--indigo-dye);
  --hl-type: var(--corn-flower-blue);
  --hl-string: var(--imperial-red);
  --hl-class : var(--corn-flower-blue);
  --hl-word : var(--indigo-dye);
  --hl-backtick-string : var(--imperial-red);
  --hl-string-char: var(--imperial-red);
  --hl-string-doc: var(--imperial-red);
  --hl-string-double: var(--imperial-red);
  --hl-string-escape: var(--imperial-red);
  --hl-string-heredoc: var(--imperial-red);
  --hl-string-interpol: var(--imperial-red);
  --hl-string-other: var(--imperial-red);
  --hl-string-regex: var(--imperial-red);
  --hl-string-single: var(--imperial-red);
  --hl-string-symbol: var(--imperial-red);
  --hl-macro: var(--imperial-red);
  --hl-core-fn: var(--indigo-dye);
  --hl-variable: var(--indigo-dye);
  --hl-number: var(--indigo-dye);
  --hl-s-exp: var(--imperial-red);
  --hl-special-form: var(--zomp);
  --hl-reader-char: var(--imperial-red);
  --hl-nil: var(--indigo-dye);
  --hl-repeat: var(--imperial-red);
  --hl-regexp: var(--imperial-red);
  --hl-exception: var(--zomp);
  --hl-boolean: var(--zomp);
  --hl-character: var(--indigo-dye);
  --hl-conditional: var(--zomp);
}

.powerpack a {
  color: var(--indigo-dye);
}

.powerpack .hud {
  padding: 1em 1em 1em 5em;
  position: fixed;
  bottom: 1em;
  left: 1em;
  right: 1em;
  background: var(--gallery);
  color: var(--rich-black);
  border-radius: 3px;
  max-height: 50vh;
  overflow: scroll;
}

.powerpack .hud .logo {
  width: 3em;
  position: absolute;
  left: 1em;
}

.powerpack .warn {
  border-top: 5px solid var(--imperial-red);
  box-shadow: 0 4px 10px 0 rgba(71,114,179,0.3);
}

.powerpack .error {
  color: var(--imperial-red);
}

.powerpack .h2,
.powerpack .h3,
.powerpack .h4 {
  margin: 1em 0 0.5em;
  padding: 0;
  line-height: 1.5;
  font-size: 1.5em;
  font-weight: normal;
}

.powerpack .h2:first-child {
  margin: 0.5em 0 1em;
}

.powerpack .h3 {
  font-size: 1.25em;
  font-weight: bold;
}

.powerpack .h4 {
  font-size: 1.15em;
}

.powerpack ul {
  margin: 0 0 1em;
  padding: 0;
}

.powerpack li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.powerpack .compact p,
.powerpack .compact pre {
  margin: 0 0 0.5em;
}

.powerpack .pp-toggle-collapsed .pp-toggle-content {
  display: none;
}

.powerpack .pp-toggle-button {
  cursor: pointer;
}

/* Syntax highlighting */

.powerpack code.code {
  background: var(--code-bg);
  display: block;
  padding: 1em;
  overflow: scroll;
}

.powerpack code,
.powerpack .code {
  font-family: "Source Code Pro", monospace;
  font-size: 0.9em;
}

.powerpack .token.cdata, .powerpack .token.comment, .powerpack .token.doctype, .powerpack .token.prolog{color:var(--hl-preproc-comment)}
.powerpack .token.punctuation{color:var(--hl-constant)}
.powerpack .token.namespace{opacity:.7}
.powerpack .token.boolean, .powerpack .token.constant, .powerpack .token.deleted, .powerpack .token.number, .powerpack .token.property, .powerpack .token.symbol, .powerpack .token.tag{color:var(--hl-keyword)}
.powerpack .token.number{color:var(--hl-number)}
.powerpack .token.attr-name, .powerpack .token.builtin, .powerpack .token.char, .powerpack .token.inserted, .powerpack .token.selector, .powerpack .token.string{color:var(--hl-string-double)}
.powerpack .language-css .token.string, .powerpack .style .token.string, .powerpack .token.entity, .powerpack .token.operator, .powerpack .token.url{color:#9a6e3a;background:hsla(0, 0%, 100%, .5)}
.powerpack .token.atrule, .powerpack .token.attr-value, .powerpack .token.keyword{color:var(--hl-keyword)}
.powerpack .token.class-name, .powerpack .token.function{color:var(--hl-core-fn)}
.powerpack .token.important, .powerpack .token.regex, .powerpack .token.variable{color:var(--hl-variable)}
.powerpack .token.bold, .powerpack .token.important{font-weight:700}
.powerpack .token.italic{font-style:italic}.token.entity{cursor:help}
