@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  font-style: oblique 0deg 10deg;
  src: url("../fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
}
@font-face {
  font-family: 'Epilogue';
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/epilogue.woff2") format("woff2");
}
:root {
  /* Fonts */
  --font-display: Epilogue, var(--font-ui);
  --font-ui: Inter, -apple-system, system-ui, Inter, sans-serif;
  --font-code: 'JetBrains Mono';

  /* Text styles */
  --text-display-size: clamp(30px, 10vw, 75px);
  --text-display-height: 0.95;
  --text-display: 700 var(--text-display-size)/var(--text-display-height) var(--font-display);
  --text-display-spacing: -0.045em;
  --text-heading-size: clamp(20px, 8vw, 50px);
  --text-heading: 700 var(--text-heading-size)/1.1 var(--font-display);
  --text-heading-spacing: -0.03em;
  --text-title-size: clamp(20px, 6vw, 30px);
  --text-title: 600 var(--text-title-size)/1.2 var(--font-display);
  --text-title-spacing: -0.03em;
  --text-body-size: clamp(16px, 4vw, 20px);
  --text-body: var(--text-body-size)/1.65 var(--font-ui);
  --text-body-bold: 600 var(--text-body-size)/1.6 var(--font-ui);
  --text-body-spacing: -0.02em;
  --text-caption: 15px/1.6 var(--font-ui);
  --text-caption-bold: 600 15px/1.6 var(--font-ui);
  --text-caption-mini: 13px/1.6 var(--font-ui);
  --text-caption-mini-bold: 600 13px/1.6 var(--font-ui);
  --text-code: 16px/1.6 var(--font-code);

  /* Colors */
  /* Tokens */
  --color-red-400: hsl(0deg, 50%, 40%);
  --color-red-500: hsl(0deg, 50%, 50%);
  --color-red-600: hsl(0deg, 70%, 60%);
  --color-white: hsl(200deg, 20%, 100%);
  --color-white-alpha: hsla(200deg, 20%, 100%, 0.9);
  --color-black-970: hsl(200deg, 20%, 97%);
  --color-black-930: hsl(200deg, 20%, 93%);
  --color-black-860: hsl(200deg, 20%, 86%);
  --color-black-650: hsl(200deg, 20%, 65%);
  --color-black-350: hsl(200deg, 20%, 35%);
  --color-black-240: hsl(200deg, 20%, 24%);
  --color-black-180: hsl(200deg, 20%, 18%);
  --color-black-140: hsl(200deg, 20%, 14%);
  --color-black-100: hsl(200deg, 20%, 10%);
  --color-black-100-alpha: hsla(200deg, 20%, 10%, 0.9);
  --color-yellow-800: hsl(50deg, 80%, 80%);
  --color-yellow-750: hsl(50deg, 80%, 75%);
  --color-yellow-200: hsl(50deg, 80%, 20%);
  --color-brown-600: hsl(50deg, 10%, 60%);
  --color-brown-160: hsl(50deg, 10%, 16%);
  --color-brown-200: hsl(50deg, 10%, 20%);

  /* Theme light in light mode */
  --color-primary: var(--color-red-500);
  --color-primary-1: var(--color-red-400);
  --color-foreground: var(--color-black-100);
  --color-foreground-1: var(--color-black-240);
  --color-background: var(--color-white);
  --color-background-a: var(--color-white-alpha);
  --color-background-1: var(--color-black-970);
  --color-background-2: var(--color-black-930);
  --color-background-3: var(--color-black-860);

  /* Borders */
  --border-radius-small: 5px;
  --border-radius: 10px;

  /* Animation */
  --animation-duration: 0.2s;

  /* Spaces */
  --margin: max(25px, 5vw);
  --max-width: 1200px;
  --column-gap-0: 10px;
  --column-gap-1: 25px;
  --column-gap-2: 50px;
  --column-gap-3: 100px;
  --row-gap-0: 25px;
  --row-gap-1: clamp(20px, 5vh, 50px);
  --row-gap-2: clamp(40px, 10vh, 100px);
  --row-gap-3: clamp(60px, 15vh, 150px);
  --row-gap-4: clamp(80px, 20vh, 200px);
}
:root.no-motion {
  --animation-duration: 0s;
}
/* Theme dark in light mode */
:root.is-reverse {
  --color-primary: var(--color-red-600);
  --color-primary-1: var(--color-red-400);
  --color-foreground: var(--color-white);
  --color-foreground-1: var(--color-black-650);
  --color-background: var(--color-black-100);
  --color-background-a: var(--color-black-100-alpha);
  --color-background-1: var(--color-black-140);
  --color-background-2: var(--color-black-180);
  --color-background-3: var(--color-black-240);
}
@media (prefers-color-scheme: dark) {
  /* Theme dark in dark mode */
  :root {
    --color-primary: var(--color-red-600);
    --color-primary-1: var(--color-red-400);
    --color-foreground: var(--color-white);
    --color-foreground-1: var(--color-black-650);
    --color-background: var(--color-black-100);
    --color-background-a: var(--color-black-100-alpha);
    --color-background-1: var(--color-black-140);
    --color-background-2: var(--color-black-180);
    --color-background-3: var(--color-black-240);
  }
  /* Theme light in dark mode */
  :root.is-reverse {
    --color-primary: var(--color-red-500);
    --color-primary-1: var(--color-red-400);
    --color-foreground: var(--color-black-100);
    --color-foreground-1: var(--color-black-240);
    --color-background: var(--color-white);
    --color-background-a: var(--color-white-alpha);
    --color-background-1: var(--color-black-970);
    --color-background-2: var(--color-black-930);
    --color-background-3: var(--color-black-860);
  }
}
@media (prefers-reduced-motion) {
  :root {
    --animation-duration: 0s;
  }
}
html {
  scroll-padding-top: 120px;
  scroll-behavior: smooth;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI',
    'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Arial, Meiryo, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-kerning: normal;

  color: var(--color-foreground);
  background-color: var(--color-background);
  margin: 0;
  /* -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; */
  display: grid;
  min-height: 100vh;
  min-width: 320px;
  grid-template-rows: auto 1fr auto;
}
a {
  color: var(--color-primary)
}
a:hover {
    text-decoration: none;
  }
pre,
code {
  font: var(--text-code);
  letter-spacing: 0;
  margin: 0;
}
pre {
  overflow-x: auto;
}
:is(h2, h3, h4) code {
  font-size: 0.8em;
}
table {
  width: 100%;
}
th {
  text-align: left;
  padding: 5px 10px;
  background: var(--color-background-2);
  font: var(--text-caption-bold);
}
td {
  padding: 5px 10px;
  border-bottom: solid 1px var(--color-background-2)
}
td code {
    white-space: nowrap;
  }
:not(:defined) {
  visibility: hidden;
}
.button {
  background: var(--background, none);
  color: var(--color, currentColor);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  height: 2em;
  padding: 0 .6em;
  font: var(--text-caption-bold);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--animation-duration);
  box-sizing: border-box;
  vertical-align: middle;
  flex: 0 0 auto;
  text-decoration: none
}
.button::-moz-focus-inner {
    border: 0;
  }
.button.is-small {
    font: var(--text-caption-mini-bold);
    text-transform: uppercase;
  }
.button.is-big {
    height: 3em;
    padding: 0 1em;
  }
.button.is-primary {
    --color: var(--color-background-1);
    --color-hover: var(--color-background-1);
    --background: var(--color-primary);
    --background-hover: var(--color-primary-1);
  }
.button.is-secondary {
    --color: var(--color-foreground-1);
    --color-hover: var(--color-foreground-1);
    --color-active: var(--color-background);
    --background: var(--color-background-1);
    --background-hover: var(--color-background-2);
    --background-active: var(--color-primary)
  }
.button.is-secondary.is-active {
      color: var(--color-active);
      background: var(--background-active);
    }
.button input {
    accent-color: var(--accent);
  }
.button:hover {
    color: var(--color-hover, currentColor);
    background: var(--background-hover, none);
  }
.button:disabled {
    cursor: default;
    background: none;
    opacity: .1;
  }
.button.has-icon {
    padding: 0;
    width: 40px;
    height: 40px
  }
.button.has-icon svg {
      width: 30px;
      height: 30px;
      fill: currentColor;
    }
.button.has-icon path {
      fill: currentColor;
    }
.button-theme {
  background: none;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 1px var(--color-background-3);
  padding: 0 .6em;
  font: var(--text-callout);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  vertical-align: middle
}
.button-theme:hover {
    background: var(--color-background-2);
  }
.button-theme .is-light {
    display: block;
  }
.button-theme .is-dark {
    display: none;
  }
@media (prefers-color-scheme: dark) {
    .button-theme .is-light {
      display: none;
    }
    .button-theme .is-dark {
      display: block;
    }
  }
:root.is-reverse .button-theme .is-light {
    display: none;
  }
:root.is-reverse .button-theme .is-dark {
    display: block;
  }
@media (prefers-color-scheme: dark) {
    :root.is-reverse .button-theme .is-light {
      display: block;
    }
    :root.is-reverse .button-theme .is-dark {
      display: none;
    }
  }
.selector {
  display: block;
  -moz-appearance: none;
       appearance: none;
  box-sizing: border-box;
  height: 2em;
  border: solid 2px var(--color-background-2);
  background: none;
  color: var(--color-foreground-1);
  background-color: var(--color-background);
  /* Chevron gray-light */
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M22,23.5857864 L27.2928932,18.2928932 C27.6834175,17.9023689 28.3165825,17.9023689 28.7071068,18.2928932 C29.0976311,18.6834175 29.0976311,19.3165825 28.7071068,19.7071068 L22.7071068,25.7071068 C22.3165825,26.0976311 21.6834175,26.0976311 21.2928932,25.7071068 L15.2928932,19.7071068 C14.9023689,19.3165825 14.9023689,18.6834175 15.2928932,18.2928932 C15.6834175,17.9023689 16.3165825,17.9023689 16.7071068,18.2928932 L22,23.5857864 Z" fill="%23BBC2CE"></path></svg>');
  background-repeat: no-repeat;
  background-position: right center;
  border-radius: var(--border-radius-small);
  font: var(--text-caption-bold);
  padding: 0 40px 0 1em;
  transition-property: background-color, color, box-shadow, border-color;
  transition-duration: var(--animation-duration);
  outline: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: initial;
  max-width: 100%
}
.selector:hover {
      background-color: var(--color-background-1);
      border-color: var(--color-background-2);
  }
.tag {
  --color: var(--color-foreground-1);
  --background: var(--color-background-1);

  background: var(--background);
  color: var(--color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  height: 2em;
  padding: 0 .6em;
  font: var(--text-caption-mini-bold);
  letter-spacing: 0;
  border-radius: var(--border-radius-small);
  box-sizing: border-box;
  vertical-align: middle;
  flex: 0 0 auto;
}
.navbar-container {
  background-color: var(--color-background-a);
  position: sticky;
  top: 0;
  padding: 0 var(--margin);
  z-index: 10;
  border-bottom: solid 1px var(--color-background-2);
}
.navbar {
  max-width: var(--max-width);
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: 70px;
  overflow-x: auto;
  -moz-column-gap: var(--column-gap-1);
       column-gap: var(--column-gap-1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.navbar-logo {
  display: flex;
  align-self: center;
  align-items: center;
  color: var(--color-foreground);
  -moz-column-gap: 10px;
       column-gap: 10px;
  text-decoration: none;
  letter-spacing: var(--text-title-spacing);
  font-family: 'Nothing You Could Do', cursive;
  text-decoration: none;
  font-weight: normal;
  font-size: 40px
}
.navbar-logo svg {
    margin-bottom: 10px;
  }
@media (max-width: 820px) {
.navbar-logo span {
      display: none
  }
    }
.navbar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  font: var(--text-caption-bold);
  letter-spacing: var(--text-caption-spacing);
  overflow-x: auto;
  flex: 1 1 auto;
  width: 0
}
.navbar-menu li {
    display: flex
  }
.navbar-menu li:first-child {
      margin-left: auto;
    }
.navbar-menu a {
    color: var(--color-foreground);
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 0 1em;
    white-space: nowrap
  }
.navbar-menu a:hover {
      background-image: linear-gradient(
        var(--color-foreground),
        var(--color-foreground)
      );
      background-repeat: no-repeat;
      background-size: calc(100% - 2em) 1px;
      background-position: center bottom;
    }
.navbar-menu a.is-selected {
      color: var(--color-foreground-1);
      background: var(--color-background-1);
    }
.navbar-search {
  --docsearch-searchbox-background: var(--color-background-2);
  --docsearch-text-color: var(--color-foreground-1);
  --docsearch-searchbox-focus-background: var(--color-background-1);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--color-foreground-1);
  align-self: center;
}
.footer-container {
  background: var(--color-background-1);
}
.footer {
  font: var(--text-caption);
  color: var(--color-foreground-1);
  max-width: var(--max-width);
  margin: auto;
  text-align: center;
  padding: 0 var(--margin);
}
.footer-copyright {
  margin: 0;
  padding: var(--row-gap-0) 0
}
.footer-copyright a {
    color: currentColor;
  }
.footer-links {
  margin: 0;
  list-style: none;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  border-bottom: solid 1px var(--color-background-3)
}
.footer-links svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: currentColor;
  }
.footer-links a {
    text-decoration: none;
    font: var(--text-caption-bold);
    display: flex;
    align-items: center;
    -moz-column-gap: 10px;
         column-gap: 10px;
    padding: 10px;
    border-radius: var(--border-radius-small);
    color: currentColor;
    white-space: nowrap
  }
.footer-links a:hover {
      color: var(--color-foreground);
      background: var(--color-background-2);
    }
.hljs {
  display: block;
  color: var(--color-black);
  background: var(--color-background-1);
  border-radius: var(--border-radius);
  border: solid 1px var(--color-background-2);
  overflow-x: auto;
  padding: 1em !important;
}
lume-code {
  display: block
}
lume-code .hljs {
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
    border-top: 0 !important;
  }
lume-code .lume-code-menu {
    display: flex;
    list-style: none;
    padding: 0 1em 0 88px;
    margin: 0;
    background: var(--color-background-2);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow-x: auto;
    -moz-column-gap: 1px;
         column-gap: 1px;

    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="54" height="14" viewBox="0 0 54 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="7" cy="7" r="7" fill="%23FF5533"/><circle cx="27" cy="7" r="7" fill="%23E6CF5C"/><circle cx="47" cy="7" r="7" fill="%237ACC52"/></svg>');
    background-repeat: no-repeat;
    background-position: 16px 14px
  }
lume-code .lume-code-menu li {
      margin: 0;
      white-space: nowrap;
    }
.lume-code-tab {
  --background: var(--color-background-2);
  --background-hover: var(--color-background-3);

  display: block;
  border: none;
  border-radius: 0;
  padding: 10px 1em;
  font: var(--text-caption);
  cursor: pointer;
  transition-property: background-color, color;
  transition-duration: var(--animation-duration);
  background: var(--color-background-2);
  color: var(--color-foreground-1)
}
.lume-code-tab:hover {
    background: var(--color-background-1);
    color: var(--color-foreground);
  }
.lume-code-tab.is-active {
    background: var(--color-background-1);
    color: var(--color-foreground);
    font: var(--text-caption-bold);
  }
.hljs {
  --color-1: #d73a49;
  --color-2: #6f42c1;
  --color-3: #005cc5;
  --color-4: #032f62;
  --color-5: #e36209;
  --color-6: #6a737d;
  --color-7: #22863a;
  --color-8: #24292e;
  --color-9: #005cc5;
  --color-10: #735c0f;
  --color-11: #22863a;
  --color-12: #f0fff4;
  --color-13: #b31d28;
  --color-14: #ffeef0;
}
:root.is-reverse .hljs {
  --color-1: #ff7b72;
  --color-2: #d2a8ff;
  --color-3: #79c0ff;
  --color-4: #a5d6ff;
  --color-5: #ffa657;
  --color-6: #8b949e;
  --color-7: #7ee787;
  --color-8: #c9d1d9;
  --color-9: #1f6feb;
  --color-10: #f2cc60;
  --color-11: #aff5b4;
  --color-12: #033a16;
  --color-13: #ffdcd7;
  --color-14: #67060c;
}
@media (prefers-color-scheme: dark) {
  .hljs {
    --color-1: #ff7b72;
    --color-2: #d2a8ff;
    --color-3: #79c0ff;
    --color-4: #a5d6ff;
    --color-5: #ffa657;
    --color-6: #8b949e;
    --color-7: #7ee787;
    --color-8: #c9d1d9;
    --color-9: #1f6feb;
    --color-10: #f2cc60;
    --color-11: #aff5b4;
    --color-12: #033a16;
    --color-13: #ffdcd7;
    --color-14: #67060c;
  }
  :root.is-reverse .hljs {
    --color-1: #d73a49;
    --color-2: #6f42c1;
    --color-3: #005cc5;
    --color-4: #032f62;
    --color-5: #e36209;
    --color-6: #6a737d;
    --color-7: #22863a;
    --color-8: #24292e;
    --color-9: #005cc5;
    --color-10: #735c0f;
    --color-11: #22863a;
    --color-12: #f0fff4;
    --color-13: #b31d28;
    --color-14: #ffeef0;
  }
}
.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:var(--color-1)}
.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:var(--color-2)}
.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:var(--color-3)}
.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:var(--color-4)}
.hljs-built_in,.hljs-symbol{color:var(--color-5)}
.hljs-code,.hljs-comment,.hljs-formula{color:var(--color-6)}
.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:var(--color-7)}
.hljs-subst{color:var(--color-8)}
.hljs-section{color:var(--color-9);font-weight:700}
.hljs-bullet{color:var(--color-10)}
.hljs-emphasis{color:var(--color-8);font-style:italic}
.hljs-strong{color:var(--color-8);font-weight:700}
.hljs-addition{color:var(--color-11);background-color:var(--color-12)}
.hljs-deletion{color:var(--color-13);background-color:var(--color-14)}
.toc {
  font: var(--text-caption);
  color: var(--color-foreground-1);
  margin: 0
}
.toc ol {
    padding-left: 1.5em;
  }
.toc a {
    color: currentColor;
  }
.site {
  margin: 0;
  padding: 0;
}
.site-image {
  display: block
}
.site-image img {
    --shadow-color: rgba(0, 0, 0, 0.05);
    display: block;
    max-width: 100%;
    height: auto;
    transition: transform var(--animation-duration);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 2px var(--shadow-color),
                0 1px 4px var(--shadow-color),
                0 1px 8px var(--shadow-color),
                0 1px 10px var(--shadow-color),
                0 1px 12px var(--shadow-color),
                0 1px 14px var(--shadow-color);
  }
.site-image:hover {
    z-index: 1
  }
.site-image:hover img {
      transform: scale(1.1);
    }
.site-description {
  font: var(--text-caption);
  color: var(--color-foreground-1)
}
.site-description p {
    margin: .3em 0;
  }
.site-image + .site-description {
  margin-top: 1em;
}
.site-name {
  font: var(--text-caption-bold);
  color: var(--color-foreground);
  text-decoration: none
}
.site-name:hover {
    text-decoration: underline;
  }
/* Theme dark in light mode */
:root.is-reverse .site-image img {
  --shadow-color: rgba(0, 0, 0, 0.3);
}
@media (prefers-color-scheme: dark) {
  /* Theme dark in dark mode */
  :root .site-image img {
    --shadow-color: rgba(0, 0, 0, 0.3);
  }
}
.tip {
  --color-tip: var(--color-yellow-800);
  --color-tip-foreground: var(--color-yellow-200);
  --color-tip-1: var(--color-yellow-750);

  font: var(--text-caption);
  letter-spacing: 0;
  color: var(--color-tip-foreground);
  background-color: var(--color-tip);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M20 27a1 1 0 0 1 .117 1.993L20 29H10a1 1 0 0 1-.117-1.993L10 27h10ZM14.735 1.003a11 11 0 0 1 7.054 19.653c-.45.348-.73.866-.78 1.423l-.009.168V23a2 2 0 0 1-1.85 1.995L19 25h-8a2 2 0 0 1-1.995-1.85L9 23v-.751a2.013 2.013 0 0 0-.778-1.584A10.984 10.984 0 0 1 4 12.062C3.967 6.095 8.773 1.143 14.735 1.003ZM15.059 3l-.277.003C9.91 3.117 5.973 7.174 6 12.052a8.984 8.984 0 0 0 3.215 6.844l.415.338a4.014 4.014 0 0 1 1.363 2.781l.007.231V23h8v-.759a4.035 4.035 0 0 1 1.38-3.016l.404-.33A9 9 0 0 0 15.06 3Zm1.008 2.1.116.012a6.99 6.99 0 0 1 5.719 5.712 1 1 0 1 1-1.972.337 4.99 4.99 0 0 0-4.082-4.077 1 1 0 0 1 .219-1.985Z" fill="gray"/></svg>');
  background-repeat: no-repeat;
  background-position: 10px center;
  background-blend-mode: difference;
  border: solid 1px var(--color-tip-1);
  padding: .5em 1em .5em 50px;
  border-radius: var(--border-radius-small);
  margin: 2em 0 !important
}
.tip + .tip {
    margin-top: -1.5em !important;
  }
@media (prefers-color-scheme: dark) {
.tip {
    --color-tip-foreground: var(--color-brown-600);
    --color-tip: var(--color-brown-160);
    --color-tip-1: var(--color-brown-200);
    background-blend-mode: screen
}
  }
:root.is-reverse .tip {
  --color-tip-foreground: var(--color-brown-600);
  --color-tip: var(--color-brown-160);
  --color-tip-1: var(--color-brown-200);
  background-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  :root.is-reverse .tip {
    --color-tip: var(--color-yellow-800);
    --color-tip-foreground: var(--color-yellow-200);
    --color-tip-1: var(--color-yellow-750);
    background-blend-mode: initial;
  }
}
.showcase {
  display: grid;
  -moz-column-gap: var(--margin);
       column-gap: var(--margin);
  grid-template-columns: 0 minmax(0, var(--max-width)) 0;
  padding-top: var(--row-gap-2);
  padding-bottom: var(--row-gap-2);
  justify-content: space-between
}
.showcase > * {
    grid-column: 2;
  }
.showcase h1 {
    font: var(--text-display);
    text-align: center;
    margin: 0;
  }
.showcase a {
    text-decoration: none;
  }
.showcase-header {
  max-width: 600px;
  margin: 0 auto
}
.showcase-header h1 {
    font: var(--text-display);
    letter-spacing: var(--text-display-spacing);
    text-align: center;
    margin: 0;
  }
.showcase-header p {
    font: var(--text-body);
    letter-spacing: var(--text-body-spacing);
    color: var(--color-foreground-1);
    text-align: center;
  }
.showcase-sites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 280px);
  -moz-column-gap: var(--column-gap-1);
       column-gap: var(--column-gap-1);
  row-gap: var(--row-gap-2);
  justify-content: center
}
.showcase-sites .button.is-small {
    float: right;
  }
.showcase-more {
  margin-top: var(--row-gap-1);
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto
}
.showcase-more .site-name {
    margin-right: 0.5em;
  }
.showcase-more h2 {
    font: var(--text-title);
    letter-spacing: var(--text-title-spacing);
    margin: 0 0 var(--row-gap-1);
    text-align: center;
  }
.showcase-more ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    -moz-column-gap: var(--column-gap-1);
         column-gap: var(--column-gap-1);
    row-gap: var(--row-gap-0);
    justify-content: center;
  }