/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
}

::selection {
  text-shadow: none;
}

body {
  margin: 0;
  opacity: 1;
  transition: all 0.25s;
}

.wf-loading body {
  opacity: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.25s;
}

a:hover,
a:focus {
  outline: 0;
}

img {
  vertical-align: middle;
}

nav ul {
  padding: 0;
  list-style: none;
}

/* Custom Properties */

:root {
  --display-font: "museo-sans", sans-serif;
  --monospace-font: "source-code-pro", monospace;

  --base-01: #181818;
  --base-02: #202020;
  --base-03: #303030;
  --base-04: #606060;
  --base-05: #b0b0b0;
  --base-06: #e0e0e0;
  --base-07: #f0f0f0;
  --base-08: #f8f8f8;

  --red-01: #ac0000;
  --orange-01: #bd5000;
  --yellow-01: #bf9400;
  --green-01: #008b00;
  --cyan-01: #007773;
  --blue-01: #0051ac;
  --violet-01: #740091;
  --pink-01: #c63989;

  --red-02: #e14b4b;
  --orange-02: #f1924c;
  --yellow-02: #f3cd4c;
  --green-02: #49c249;
  --cyan-02: #48afac;
  --blue-02: #4b92e1;
  --violet-02: #ae49c8;
  --pink-02: #f58ac7;
}

/* Layout */

.content-container {
  font: 16px/1.5 var(--monospace-font);
  text-align: center;
}

.main-section {
  margin-right: auto;
  margin-bottom: 5%;
  margin-left: auto;
  width: 90%;
  max-width: 54em;
}

/* Headings */

.heading {
  margin: 0;
  font: bold 1em var(--display-font);
}

.section-heading {
  margin-bottom: 1.25%;
  letter-spacing: 0.125em;
  text-transform: uppercase;
}

/* Text */

.text {
  margin: 1.846em auto;
  max-width: 49.846em;
  font-size: 0.8125em;
  text-align: left;
}

@media screen and (min-width: 30em) {
  .text {
    margin: 1.6em auto;
    max-width: 43.2em;
    font-size: 0.9375em;
  }
}

/* Toggle Icon */

.toggle-icon {
  transition: cubic-bezier(0.5, 0, 0.5, 1.25) 0.25s;
}

.toggle-icon svg {
  transition: cubic-bezier(0.5, 0, 0.5, 1.25) 0.25s;
}

/* Header */

header {
  margin-top: 7.5%;
  margin-right: auto;
  margin-left: auto;
  width: 90%;
}

.title {
  font-size: 2.25em;
  transition: all 0.25s;
}

.tagline {
  margin-top: 0;
  font-size: 0.75em;
  text-transform: lowercase;
}

.tagline::before {
  content: ">: ";
}

.tagline .caret {
  display: inline-block;
  animation: blink 1.5s steps(2, start) infinite;
  margin-left: 0.667em;
  width: 2px;
  direction: ltr;
  text-indent: -9999px;
}

@media screen and (min-width: 30em) {
  .tagline {
    font-size: 0.8125em;
  }
}

/* About */

.button {
  display: inline-block;
  padding: 0.286em 1.143em;
  border-radius: 4px;
  font: bold 1.3125em/1.5 var(--display-font);
  vertical-align: middle;
  transition: all 0.25s;
}

.button-text {
  display: block;
  margin-top: 0.5em;
  font-size: 0.75em;
  transition: all 0.25s;
}

.button-text a {
  transition: none;
}

.button-text a:hover,
.button-text a:focus {
  transition: all 0.25s;
}

@media screen and (min-width: 30em) {
  .button-text {
    margin-top: 0.462em;
    font-size: 0.8125em;
  }
}

/* Previews */

.preview-section {
  width: 100%;
}

@media screen and (min-width: 40em) {
  .preview-section {
    width: 90%;
  }
}

.preview-nav {
  display: flow-root;
  position: relative;
  margin: 0;
  padding: 0.923em 0.923em 0.615em;
  font-size: 0.8125em;
  line-height: 1.231em;
  transition: all 0.25s;
}

.preview-nav ul {
  margin: 0;
  text-align: center;
}

.preview-nav li {
  display: inline-block;
  vertical-align: middle;
  padding: 0 0.462em;
}

.preview-nav .control {
  float: right;
  padding: 0;
}

@media screen and (min-width: 40em) {
  .preview-nav {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }
}

.preview-container {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  text-align: left;
  word-wrap: break-word;
  transition: all 0.25s;
}

@media screen and (min-width: 40em) {
  .preview-container {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}

.preview {
  display: none;
  visibility: hidden;
  margin: 0;
  padding: 1.231em;
  min-width: 47.385em;
  font: 0.8125em var(--monospace-font);
  transition: all 0.25s;
}

.preview.active {
  display: block;
  visibility: visible;
}

@media screen and (min-width: 30em) {
  .preview {
    padding: 1.143em;
    min-width: 44em;
    font-size: 0.875em;
  }
}

/* Support */

.support-columns {
  display: flex;
  justify-content: center;
  gap: 4em;
  margin: 1.5em auto;
  max-width: 24em;
}

.support-column {
  text-align: left;
}

.support-heading {
  font-size: 0.75em;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}

.support-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125em;
  line-height: 2;
}

@media screen and (min-width: 30em) {
  .support-list {
    font-size: 0.9375em;
  }
}

.support-list a {
  font-weight: bold;
}

.support-text {
  display: block;
  margin-top: 1.5em;
  font-size: 0.75em;
}

/* Colours */

.palette-section {
  overflow: hidden;
  width: 100%;
}

.colour-palette {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 320px;
  font-size: 0;
}

.colour-palette.neutral {
  margin-top: -8px;
}

@media screen and (min-width: 30em) {
  .colour-palette {
    width: 328px;
  }
}

@media screen and (min-width: 45em) {
  .colour-palette {
    width: 656px;
  }
}

.palette-text {
  margin-top: 0;
  width: 90%;
}

/* Colour */

.colour {
  display: inline-block;
  position: relative;
  margin-top: 8px;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 4px;
  width: 5.5em;
  height: 5.5em;
  font: 12px/5.5em var(--display-font);
  text-align: center;
  text-transform: uppercase;
  transition: all 0.25s;
}

.colour:hover,
.colour:focus,
.colour:active {
  cursor: pointer;
}

.colour:hover .info,
.colour:focus .info,
.colour:active .info {
  opacity: 1;
  visibility: visible;
  top: 50%;
  transform: rotate(-2deg) scale(1);
}

.colour .tap {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5.5em;
  height: 5.5em;
}

.colour b {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.colour b em {
  display: block;
  font-size: 2.5em;
}

.colour em {
  font-style: normal;
}

@media screen and (min-width: 30em) {
  .colour {
    width: 5.286em;
    height: 5.286em;
    font-size: 14px;
    line-height: 5.286em;
  }
}

/* Colour Info */

.info {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 75%;
  left: -32px;
  z-index: 1;
  margin-top: -2.7em;
  padding: 0.8em 0.6em;
  width: 12.8em;
  height: 5.4em;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 2px 0 rgb(0 0 0 / 0.125),
    0 0 1px #fff;
  color: var(--base-05);
  font: 10px/1.25 var(--monospace-font);
  text-shadow: none;
  transform: rotate(-8deg) scale(0.875);
  transform-style: preserve-3d;
  transition: cubic-bezier(0.5, 0, 0.75, 1.25) 0.25s;
}

.info li {
  list-style: none;
}

.info li:first-child {
  font-size: 1.2em;
  font-weight: bold;
}

.info em {
  display: inline;
  color: var(--base-03);
}

@media screen and (min-width: 30em) {
  .info {
    left: -36px;
    margin-top: -2.5em;
    padding: 0.667em 0.5em;
    width: 12em;
    height: 5em;
    font-size: 12px;
  }

  .info li:first-child {
    font-size: 1.167em;
  }
}

/* Colour Backgrounds */

.base-01 { background: var(--base-01); }
.base-02 { background: var(--base-02); }
.base-03 { background: var(--base-03); }
.base-04 { background: var(--base-04); }
.base-05 { background: var(--base-05); }
.base-06 { background: var(--base-06); }
.base-07 { background: var(--base-07); }
.base-08 { background: var(--base-08); }

.red-01 { background: var(--red-01); }
.orange-01 { background: var(--orange-01); }
.yellow-01 { background: var(--yellow-01); }
.green-01 { background: var(--green-01); }
.cyan-01 { background: var(--cyan-01); }
.blue-01 { background: var(--blue-01); }
.violet-01 { background: var(--violet-01); }
.pink-01 { background: var(--pink-01); }

.red-02 { background: var(--red-02); }
.orange-02 { background: var(--orange-02); }
.yellow-02 { background: var(--yellow-02); }
.green-02 { background: var(--green-02); }
.cyan-02 { background: var(--cyan-02); }
.blue-02 { background: var(--blue-02); }
.violet-02 { background: var(--violet-02); }
.pink-02 { background: var(--pink-02); }

/* Footer */

footer {
  margin-top: 7.5%;
  padding-bottom: 7.5%;
}

a.logo {
  display: inline-block;
  opacity: 0.4;
}

a.logo:hover,
a.logo:focus {
  opacity: 1;
}

a.logo:active svg {
  transform: rotate(360deg);
}

a.logo span {
  display: inline-block;
  width: 9.6em;
  font-size: 0.625em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

a.logo span:first-child {
  text-align: right;
}

a.logo span:last-child {
  text-align: left;
}

a.logo svg {
  width: 48px;
  height: auto;
  vertical-align: middle;
  transform: rotate(0deg);
  transition: cubic-bezier(0.5, 0, 0.5, 1.25) 0.25s;
}

@media screen and (min-width: 30em) {
  a.logo svg {
    width: 64px;
  }
}

/* Background */

.background-container {
  opacity: 1;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.25s;
}

.background {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  transition: opacity 0.25s;
}

.background-1 {
  background: url(data:image/png;base64,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) top center repeat;
}

.background-2 {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAUAAQMAAAAiKm20AAAABlBMVEX///////9VfPVsAAAAAnRSTlMAQABPjKgAAAQjSURBVHhe7d1BbqswEABQx61QFiy69JIjcASOkqNwNI7WRdVu0qhCqTM2POsdYP7P/4DHM+NUby2prVXuAxDglg6yRgH+6iOdeWUBwpdbss5hThY7rQJ8gctTfwrAPhOQQgFr6jf0RYDYm0cYBIgj1j8DlFi2Bns7AT7y7gHbdoAAWCVZSJ4cSvE9bH8NddwE+K+pD5xQAR6zAGArCABglVOfcQkQDJTwVNd4CBo1AAP8BKhwdTKYA6A+aU9Vf1hvAgR4wLAXdCDi8yn4keCX8toDUDKkRJR4VwF2ZD7+oH4w/wctD6jqkr72Q+tiwMrJktQDrLGfAAFtiXiwA06fAVwhjUI+VR/Ey4pHXhUgpi2BUieZEHDe5LwJsHXBPA5MpARsFGQ+R+OjBCjjDmowAJCqQpu5XAQASEVCzy4C5BlFgCG8mg1oAB2OUpGo9skCBJsD0KghQIBQJu9hwgMAQPWGU6PzsD9CjrQFNyVbPT5U0FGIUjbAJAFA/5Z+E0DCG3SvGDMLAGiWtQbXm/8EiCovUMeFv09UhWGno0sFQGcKBFCCCyD/gE9CF8rEmA+YaJEJ8r8MAACU+grQYQRuPxSRX1laCsygji6X9RwG4vt7BIj6SaxVaZvaO+0VkiGqgHBKFf5xhYExJTW+SrJAQhvk1ToLEHCQZM0C3P09COBdbG3Jwn0BANDKWwgZEvDprtR37DDA+KIkQFUHAOD802YecN0BZpyBwr+sc1qAOxieAwD2O6A0yy7CNge8tfEaBck8vHDBKHKleoDqC5BxkKa2n3XNRCi3aNlbon/cbSC4MMKO0CieRnmGeVGAS0PAygL0tEDWq1FDsvCslkNU/qk+Fafy4NzBqZfcZl9U7mEm6FTjxBDnyxrCUYUrVQ52zSr+bLJQbE9nVGsAIEmPrMmgZNxUH/AuBkN71BHjyBScs0bIAgRAUhiU3pEmAXYvayHk23LCAH1TASodZDu556MHADf0bQFBBgQIgKR3QP8ypg6Y5wAY2mdUSUCAYBq5a461WvrpPVf8NABGOgAuCGjaVT8adMH2EUCLDF6mjqQ1Orm8qXgOCTCA+fPiIkJOFmB2B9TtgQaZJUBCI57sIliLEUyY0IKPtNaYPO9RCD7DwP1C1Df7cNKQaCMMvZPYDOJBBYCPZ1yKjWqiaukLTEMDUDQCGKQZyrgeM7a1MdrLsI/XyCDAAKsAIe5ADN+DSrb8I1HgF09vpaoIOxQwJ8x8AOsqwIDcNc7wXKNps0XF3xpnNiBVQrwiwOO5rAKskH3B8QRoeMG5Q4V3OABSUfi5VQuE0ggMgOc8xkHYTwHoHMeBHFqP1NGh33A/baoYcqjvCbApxpvKDVxoZQKJNwGq2bCyFq/2AsRFoWBsC2Ce/Im4uMeuS4DGGnuw2/rjO+oT3MRu9+pVOFoAAAAASUVORK5CYII=) top center repeat;
}

.background-3 {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAUAAQMAAAAiKm20AAAABlBMVEX///////9VfPVsAAAAAnRSTlMAgJsrThgAAAHMSURBVHhe7d3RDYUwCAVQ/XGGjscoju4KxoTkYs+ZgLw8S4sUj60BrL8GCEAJMAcAlwBfAyUAQNoFAMAGEQAAAAAAAAAAcBkkHwAAcN5jAwS3cAAA8F7GpFunBwDsMAAAABTFFEYBALsC7cNN8FgCWKpAJwUo8Ot6BQAAAAAAAHTZaMHoB1hTka4BAAAwUSAFYCECF0EBkALyAUAJEH9kAQIAAABoBgGPoQABAAAA0yIBAADHAEAjgwVZgLjkmQBMNAQAAEBRFigBgtQ4DQAAAJQAAUA/MGCL3AgAAABQiQAA7CmSAVh4ZRQAAIwA6QcAACVAZw8XV1sA0lQ/JDcAALtpJwgAAMDhalssAWoKyQKAtAMAADhLBNAEDgCAJhK/Azg9zgYAAIATLWChAAAAAAAAA9wAwBwC7IqyAQBaIAEAAADAYEcAAAAAAEBnLABIjwCAHjoAAAAAAAC8MPoOH2UAAAAAAB+jRFEeAAAc3QQInkkAMMgPsHIJEAAAcCjRTTia7mAAeRjArhEAjCAMoGIIAAAAAOpmMQAAAG3WAHrEAAAAAJVUAAAAL4QFCACyLuAR7+dWMdItAACAz9sAAAAAALogAADAiCR4AN+fNI0mtzC2AAAAAElFTkSuQmCC) top center repeat;
}

@media screen and (min-resolution: 2dppx) {
  .background-1,
  .background-2,
  .background-3 {
    background-size: 640px 640px;
  }
}

/* Animations */

@keyframes blink {
  100% {
    visibility: hidden;
  }
}

@keyframes pulse-dark {
  0%, 50%, 73%, 100% { opacity: 0.4; }
  60.5%, 85.5% { opacity: 1; }
}

@keyframes pulse-light {
  0%, 50%, 73%, 100% { opacity: 0.18; }
  60.5%, 85.5% { opacity: 0.49; }
}

/* Dark Theme */

.dark-theme {
  --highlight: #ffd440;

  background: #101010;
  color: var(--base-05);
}

.dark-theme ::selection {
  background: var(--base-03);
}

.dark-theme .background-container {
  background: #101010;
}

.dark-theme .text a,
.dark-theme .support-section a {
  color: var(--base-08);
}

.dark-theme .text a:hover,
.dark-theme .text a:focus,
.dark-theme .support-section a:hover,
.dark-theme .support-section a:focus {
  color: var(--highlight);
}

.dark-theme .vscode-link:hover,
.dark-theme .vscode-link:focus { color: var(--blue-02); }
.dark-theme .zed-link:hover,
.dark-theme .zed-link:focus { color: var(--green-02); }
.dark-theme .sublime-link:hover,
.dark-theme .sublime-link:focus { color: var(--orange-02); }
.dark-theme .textmate-link:hover,
.dark-theme .textmate-link:focus { color: var(--violet-02); }

.dark-theme .ghostty-link:hover,
.dark-theme .ghostty-link:focus { color: var(--cyan-02); }
.dark-theme .hyper-link:hover,
.dark-theme .hyper-link:focus { color: var(--yellow-02); }
.dark-theme .iterm-link:hover,
.dark-theme .iterm-link:focus { color: var(--pink-02); }
.dark-theme .terminal-link:hover,
.dark-theme .terminal-link:focus { color: var(--red-02); }

.dark-theme .toggle-icon {
  opacity: 0.4;
}

.dark-theme .toggle-icon svg {
  transform: rotate(0deg);
}

.dark-theme .toggle-icon:hover,
.dark-theme .toggle-icon:focus {
  opacity: 1;
}

.dark-theme .toggle-icon:active {
  opacity: 0.4;
}

.dark-theme .pulse {
  animation: pulse-dark 6s infinite;
}

.dark-theme .title,
.dark-theme .section {
  color: var(--base-06);
}

.dark-theme .tagline::before {
  color: var(--green-02);
}

.dark-theme .caret {
  background: var(--highlight);
}

.dark-theme .button {
  background: var(--highlight);
  color: var(--base-01);
}

.dark-theme .button:hover,
.dark-theme .button:focus {
  background: #ffe280;
}

.dark-theme .button:active {
  color: var(--base-08);
}

.dark-theme .button + small {
  color: var(--base-04);
}

.dark-theme .button + small a:hover,
.dark-theme .button + small a:focus {
  color: var(--highlight);
}

.dark-theme .preview-nav {
  background-color: var(--base-02);
}

.dark-theme .preview-link {
  color: var(--base-04);
}

.dark-theme .preview-link:hover,
.dark-theme .preview-link:focus {
  color: var(--base-08);
}

.dark-theme .preview-link.active {
  color: var(--base-05);
}

.dark-theme .preview-container {
  background: var(--base-01);
  border-color: var(--base-02);
}

.dark-theme .preview {
  color: var(--base-06);
}

.dark-theme .comment { color: var(--base-04); }
.dark-theme .operator { color: var(--base-05); }
.dark-theme .variable, .dark-theme .support { color: var(--red-02); }
.dark-theme .function, .dark-theme .tag, .dark-theme .markup-link { color: var(--yellow-02); }
.dark-theme .storage, .dark-theme .attribute, .dark-theme .markup-url { color: var(--orange-02); }
.dark-theme .string, .dark-theme .number, .dark-theme .unit { color: var(--green-02); }
.dark-theme .support-constant { color: var(--cyan-02); }
.dark-theme .constant, .dark-theme .variable-parameter, .dark-theme .support-type, .dark-theme .markup-heading { color: var(--blue-02); }
.dark-theme .keyword { color: var(--violet-02); }
.dark-theme .variable-interpolation { color: var(--green-01); }
.dark-theme .source { color: var(--base-06); }

.dark-theme .base-01 { color: #000; }
.dark-theme .base-02 { color: #000; }
.dark-theme .base-03 { color: #101010; }
.dark-theme .base-04 { color: #404040; }
.dark-theme .base-05 { color: #909090; }
.dark-theme .base-06 { color: #c0c0c0; }
.dark-theme .base-07 { color: #d0d0d0; }
.dark-theme .base-08 { color: #d8d8d8; }

.dark-theme .red-01 { color: #6c0000; }
.dark-theme .orange-01 { color: #7d3500; }
.dark-theme .yellow-01 { color: #7f6300; }
.dark-theme .green-01 { color: #004b00; }
.dark-theme .cyan-01 { color: #003735; }
.dark-theme .blue-01 { color: #00336c; }
.dark-theme .violet-01 { color: #410051; }
.dark-theme .pink-01 { color: #952b67; }

.dark-theme .red-02 { color: #af1d1d; }
.dark-theme .orange-02 { color: #cd6010; }
.dark-theme .yellow-02 { color: #d1a50e; }
.dark-theme .green-02 { color: #2b802b; }
.dark-theme .cyan-02 { color: #2c6b69; }
.dark-theme .blue-02 { color: #1d62af; }
.dark-theme .violet-02 { color: #752988; }
.dark-theme .pink-02 { color: #ed329d; }

.dark-theme a.logo {
  color: var(--base-04);
}

/* Light Theme */

.light-theme {
  --highlight: #3191fb;

  background: #fcfcfc;
  color: var(--base-04);
}

.light-theme ::selection {
  background: var(--base-06);
}

.light-theme .background-container {
  background: #fcfcfc;
}

.light-theme .background {
  opacity: 0;
}

.light-theme .text a,
.light-theme .support-section a {
  color: var(--base-01);
}

.light-theme .text a:hover,
.light-theme .text a:focus,
.light-theme .support-section a:hover,
.light-theme .support-section a:focus {
  color: var(--highlight);
}

.light-theme .vscode-link:hover,
.light-theme .vscode-link:focus { color: var(--blue-01); }
.light-theme .zed-link:hover,
.light-theme .zed-link:focus { color: var(--green-01); }
.light-theme .sublime-link:hover,
.light-theme .sublime-link:focus { color: var(--orange-01); }
.light-theme .textmate-link:hover,
.light-theme .textmate-link:focus { color: var(--violet-01); }

.light-theme .ghostty-link:hover,
.light-theme .ghostty-link:focus { color: var(--cyan-01); }
.light-theme .hyper-link:hover,
.light-theme .hyper-link:focus { color: var(--yellow-01); }
.light-theme .iterm-link:hover,
.light-theme .iterm-link:focus { color: var(--pink-01); }
.light-theme .terminal-link:hover,
.light-theme .terminal-link:focus { color: var(--red-01); }

.light-theme .toggle-icon {
  opacity: 0.18;
}

.light-theme .toggle-icon svg {
  transform: rotate(180deg);
}

.light-theme .toggle-icon:hover,
.light-theme .toggle-icon:focus {
  opacity: 0.49;
}

.light-theme .toggle-icon:active {
  opacity: 0.18;
}

.light-theme .pulse {
  animation: pulse-light 6s infinite;
}

.light-theme .title,
.light-theme .section {
  color: var(--base-03);
}

.light-theme .tagline::before {
  color: var(--green-01);
}

.light-theme .caret {
  background: var(--highlight);
}

.light-theme .button {
  background: var(--highlight);
  color: var(--base-08);
}

.light-theme .button:hover,
.light-theme .button:focus {
  background: #0470e8;
}

.light-theme .button:active {
  color: var(--base-01);
}

.light-theme .button + small {
  color: var(--base-05);
}

.light-theme .button + small a:hover,
.light-theme .button + small a:focus {
  color: var(--highlight);
}

.light-theme .preview-nav {
  background-color: var(--base-07);
  color: var(--base-05);
}

.light-theme .preview-link {
  color: var(--base-05);
}

.light-theme .preview-link:hover,
.light-theme .preview-link:focus {
  color: var(--base-01);
}

.light-theme .preview-link.active {
  color: var(--base-04);
}

.light-theme .preview-container {
  background: var(--base-08);
  border-color: var(--base-07);
}

.light-theme .preview {
  color: var(--base-03);
}

.light-theme .comment { color: var(--base-05); }
.light-theme .operator { color: var(--base-04); }
.light-theme .variable, .light-theme .support { color: var(--red-01); }
.light-theme .function, .light-theme .tag, .light-theme .markup-link { color: var(--yellow-01); }
.light-theme .storage, .light-theme .attribute, .light-theme .markup-url { color: var(--orange-01); }
.light-theme .string, .light-theme .number, .light-theme .unit { color: var(--green-01); }
.light-theme .support-constant { color: var(--cyan-01); }
.light-theme .constant, .light-theme .variable-parameter, .light-theme .support-type, .light-theme .markup-heading { color: var(--blue-01); }
.light-theme .keyword { color: var(--violet-01); }
.light-theme .variable-interpolation { color: var(--green-02); }
.light-theme .source { color: var(--base-03); }

.light-theme .base-01 { color: #383838; }
.light-theme .base-02 { color: #404040; }
.light-theme .base-03 { color: #505050; }
.light-theme .base-04 { color: #808080; }
.light-theme .base-05 { color: #d0d0d0; }
.light-theme .base-06 { color: #fff; }
.light-theme .base-07 { color: #fff; }
.light-theme .base-08 { color: #fff; }

.light-theme .red-01 { color: #ec0000; }
.light-theme .orange-01 { color: #fd6b00; }
.light-theme .yellow-01 { color: #ffc500; }
.light-theme .green-01 { color: #00cb00; }
.light-theme .cyan-01 { color: #00b7b1; }
.light-theme .blue-01 { color: #006fec; }
.light-theme .violet-01 { color: #a700d1; }
.light-theme .pink-01 { color: #d46aa6; }

.light-theme .red-02 { color: #ef9d9d; }
.light-theme .orange-02 { color: #f8c8a5; }
.light-theme .yellow-02 { color: #f9e6a6; }
.light-theme .green-02 { color: #91da91; }
.light-theme .cyan-02 { color: #88cecc; }
.light-theme .blue-02 { color: #9dc4ef; }
.light-theme .violet-02 { color: #cf92de; }
.light-theme .pink-02 { color: #fac5e3; }

.light-theme a.logo {
  opacity: 0.18;
}

.light-theme a.logo:hover,
.light-theme a.logo:focus {
  opacity: 0.49;
}