:root {
  --black: #0b0a08;
  --dark-gray: #403c3a;
  /* #2e2b29; */
  --blue: #00a6e1;
  --orange: #f89b4b;
  --orange-light: #d4d3d2;

  --monospace-font: "Fira Code", "Hack", "Source Code Pro", "SF Mono",
    "Inconsolata", monospace;

  --dark-border: rgba(200, 200, 25, 0.2);
  --max-width: 1152px;

  --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  --horizontal-padding: 3rem;
  --vertical-padding: 4rem;
  --line-height: 1.4;

  --phone: 600px;
  --tablet: 900px;
  --list-padding: 0.9em;
  --list-item-padding: 0.375em;
}

* {
  box-sizing: border-box;
}

head,
body,
:root {
  margin: 0 auto;
  padding: 0;
  font-family: var(--system-font);
  overflow-x: hidden;
}

body {
  background-color: #fbf0df;
}

a {
  color: inherit;
  text-decoration: none;
  transition: transform 0.1s linear;
}

a:visited {
  color: inherit;
}

a:hover {
  text-decoration: underline;
  transform: scale(1.06, 1.06);
  transform-origin: center;
}

#header-wrap,
#pitch {
  background-color: var(--black);
  color: #fbf0df;
  width: 100%;
}

#logo-link {
  width: fit-content;
  display: flex;
  gap: 24px;
  align-items: center;
}

main {
  width: auto;
  margin: 0 auto;
  max-width: var(--max-width);
  display: grid;
  grid-template-columns: auto auto;
  overflow-y: hidden;
}

main,
header,
#explain-section {
  padding: 0 var(--horizontal-padding);
}
header {
  max-width: var(--max-width);
  margin: auto;
}

#cards-wrap,
#usecases,
main,
header {
  padding: var(--vertical-padding) var(--horizontal-padding);
}

#pitch-content {
  max-width: 550px;
}

.tagline {
  margin-top: 0;
  line-height: 1;
  font-size: 36pt;
}

.subtitle {
  font-size: 1.2rem;
}

.Navigation ul {
  white-space: nowrap;
  display: flex;
  gap: 2rem;
  list-style: none;
}

.NavText {
  color: #fbf0df;
  display: block;
  font-weight: 500;
  font-size: 1.2rem;
}

#HeaderInstallButton {
  margin-left: 2.4rem;
}

#pitch main {
  gap: 2rem;
}

#logo {
  max-width: 70px;
  margin: auto 0;
}

#logo-text {
  max-width: 96px;
}

header {
  display: grid;
  grid-template-columns: auto max-content;
  background-color: var(--black);
  padding: 1.5rem 3rem;
  align-items: center;
  color: white;
}

#HeaderInstallButton:hover {
  cursor: pointer;
  transform: scale(1.06);
}

#HeaderInstallButton {
  transition: transform 0.1s linear;
  background: #00a6e1;
  padding: 8px 16px;
  border-radius: 100px;
  color: black;
  font-weight: 500;
}

.InstallBox {
  margin-top: 2rem;
  /* background: #15140e; */
  /* padding: 24px 24px; */
  border-radius: 24px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

.InstallBox-label-heading {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 500;
  font-weight: 500;
}

.InstallBox-label-subtitle {
  font-size: 0.9rem;
  color: var(--orange-light);
}

#usecases-section {
  background: linear-gradient(12deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),
    conic-gradient(
      from 6.27deg at 46.95% 50.05%,
      #ff8181 0deg,
      #e5f067 75deg,
      #6dd9ba 155.62deg,
      #67f0ae 168.75deg,
      #8b67f0 243.75deg,
      #f067e2 300deg,
      #e967e3 334.49deg,
      #f06767 348.9deg,
      #ff8181 360deg
    );
  color: white;
  font-family: var(--monospace-font);
  contain: paint;

  font-size: 24pt;
  font-weight: bold;
}

#usecases-section {
  padding: 0;
  margin: 0;
}

#usecases {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#usecases-section h1 {
  background: linear-gradient(90deg, #ff0000 0%, #faff00 50.52%, #0500ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Helvetica;
  margin: 0;
  padding: 0;
}

.InstallBox-code-box {
  background-color: rgb(37, 36, 32);
  padding: 4px 7px;
  position: relative;
  border-radius: 8px;
  text-align: center;
  align-items: center;
  border: 1px solid var(--orange);
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
  white-space: nowrap;
  margin-bottom: 1rem;
  font-family: var(--monospace-font);
  max-width: calc(100vw - 32px);
  overflow-x: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.InstallBox-code-box::-webkit-scrollbar {
  display: none;
}

.InstallBox-curl {
  user-select: all;
  -webkit-user-select: text;
  pointer-events: auto;
  white-space: nowrap;
  cursor: text;
  display: inline-flex;
  padding: 12px 16px 12px 8px;
  gap: 1.4ch;
}

.InstallBox-curl::before {
  display: block;
  content: "$" / "";
  color: var(--orange);
  pointer-events: none;
  width: 1ch;
  height: 1ch;
}

.InstallBox-view-source-link {
  color: var(--orange-light);
}

.InstallBox-copy {
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--orange-light);
  transition: transform 0.05s linear;
  transition-property: color, transform;
  transform-origin: center;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: inherit;
  font-family: inherit;
}

.InstallBox-copy:hover {
  transform: scale(1.06);
}

.InstallBox-copy:active {
  transform: scale(1.12);
}

.Tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
  width: min-content;
  white-space: nowrap;
  padding: 0;
}

.Tab {
  width: min-content;
  border: none;
  background-color: transparent;
  font-family: var(--monospace-font);
  text-align: center;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  padding: 16px;
  color: inherit;
  font-size: inherit;
}

.Tab:hover,
.Graphs--active-react .Tab[data-tab="react"],
.Graphs--active-sqlite .Tab[data-tab="sqlite"],
.Graphs--active-websocket .Tab[data-tab="websocket"] {
  border-bottom-color: aquamarine;
  background-color: rgba(130, 216, 247, 0.1);
  border-right-color: aquamarine;
  border-left-color: aquamarine;
}

.BarGraph {
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.BarGraph-heading {
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0;
}

.BarGraphList {
  flex: 1;
  position: relative;
  list-style-type: none;
  padding: 0;
}

.BarGraph,
.ActiveTab,
.Graphs {
  height: auto;
}

.BarGraph-subheading {
  font-size: 0.9rem;
  color: rgb(135, 134, 134);
  margin: 0;
}

.BarGraphList {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  font-variant-numeric: tabular-nums;
  font-family: var(--monospace-font);
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  background-color: #080808;
}

.BarGraphKey {
  display: grid;
  text-align: center;
  margin-top: 1rem;
  grid-template-columns: repeat(var(--count), 1fr);
}

.BarGraphBar {
  --primary: 70px;
  --opposite: 100%;
}

.BarGraph,
.BarGraphBar-label,
.BarGraphItem {
  --level: calc(var(--amount) / var(--max));
  --inverse: calc(1 / var(--level));
}

.BarGraphBar {
  margin: 0 auto;
  width: var(--primary);
  height: var(--opposite);
  background-color: rgb(93, 89, 134);
  position: relative;
  height: calc(200px * var(--level));
}

.BarGraphItem {
  border-right: 1px dashed var(--dark-border);
  border-top: 1px dashed var(--dark-border);
  border-bottom: 1px dashed var(--dark-border);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.BarGraphItem--deno {
  border-right-color: transparent;
}

.BarGraph--vertical .BarGraphBar {
  max-width: 90%;
}

.BarGraphBar-label {
  color: white;
  font-variant-numeric: tabular-nums;
  font-family: var(--monospace-font);
  width: 100%;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
}

.CardContent {
  position: relative;
}

.BarGraph--vertical .BarGraphBar-label {
  transform: scaleX(var(--inverse));
  bottom: 0;
  right: 0;
}

.BarGraph--horizontal .BarGraphBar-label {
  top: -22px;
}

.BarGraphItem--bun .BarGraphBar {
  background-color: rgb(249, 241, 225);
  box-shadow: inset 1px 1px 3px rgb(204, 198, 187);
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iQnVuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA3MCI+PHRpdGxlPkJ1biBMb2dvPC90aXRsZT48cGF0aCBpZD0iU2hhZG93IiBkPSJNNzEuMDksMjAuNzRjLS4xNi0uMTctLjMzLS4zNC0uNS0uNXMtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjUtLjMzLS4zNC0uNS0uNS0uMzMtLjM0LS41LS41LS4zMy0uMzQtLjUtLjVBMjYuNDYsMjYuNDYsMCwwLDEsNzUuNSwzNS43YzAsMTYuNTctMTYuODIsMzAuMDUtMzcuNSwzMC4wNS0xMS41OCwwLTIxLjk0LTQuMjMtMjguODMtMTAuODZsLjUuNS41LjUuNS41LjUuNS41LjUuNS41LjUuNUMxOS41NSw2NS4zLDMwLjE0LDY5Ljc1LDQyLDY5Ljc1YzIwLjY4LDAsMzcuNS0xMy40OCwzNy41LTMwQzc5LjUsMzIuNjksNzYuNDYsMjYsNzEuMDksMjAuNzRaIi8+PGcgaWQ9IkJvZHkiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kIiBkPSJNNzMsMzUuN2MwLDE1LjIxLTE1LjY3LDI3LjU0LTM1LDI3LjU0UzMsNTAuOTEsMywzNS43QzMsMjYuMjcsOSwxNy45NCwxOC4yMiwxM1MzMy4xOCwzLDM4LDNzOC45NCw0LjEzLDE5Ljc4LDEwQzY3LDE3Ljk0LDczLDI2LjI3LDczLDM1LjdaIiBzdHlsZT0iZmlsbDojZmJmMGRmIi8+PHBhdGggaWQ9IkJvdHRvbV9TaGFkb3ciIGRhdGEtbmFtZT0iQm90dG9tIFNoYWRvdyIgZD0iTTczLDM1LjdhMjEuNjcsMjEuNjcsMCwwLDAtLjgtNS43OGMtMi43MywzMy4zLTQzLjM1LDM0LjktNTkuMzIsMjQuOTRBNDAsNDAsMCwwLDAsMzgsNjMuMjRDNTcuMyw2My4yNCw3Myw1MC44OSw3MywzNS43WiIgc3R5bGU9ImZpbGw6I2Y2ZGVjZSIvPjxwYXRoIGlkPSJMaWdodF9TaGluZSIgZGF0YS1uYW1lPSJMaWdodCBTaGluZSIgZD0iTTI0LjUzLDExLjE3QzI5LDguNDksMzQuOTQsMy40Niw0MC43OCwzLjQ1QTkuMjksOS4yOSwwLDAsMCwzOCwzYy0yLjQyLDAtNSwxLjI1LTguMjUsMy4xMy0xLjEzLjY2LTIuMywxLjM5LTMuNTQsMi4xNS0yLjMzLDEuNDQtNSwzLjA3LTgsNC43QzguNjksMTguMTMsMywyNi42MiwzLDM1LjdjMCwuNCwwLC44LDAsMS4xOUM5LjA2LDE1LjQ4LDIwLjA3LDEzLjg1LDI0LjUzLDExLjE3WiIgc3R5bGU9ImZpbGw6I2ZmZmVmYyIvPjxwYXRoIGlkPSJUb3AiIGQ9Ik0zNS4xMiw1LjUzQTE2LjQxLDE2LjQxLDAsMCwxLDI5LjQ5LDE4Yy0uMjguMjUtLjA2LjczLjMuNTksMy4zNy0xLjMxLDcuOTItNS4yMyw2LTEzLjE0QzM1LjcxLDUsMzUuMTIsNS4xMiwzNS4xMiw1LjUzWm0yLjI3LDBBMTYuMjQsMTYuMjQsMCwwLDEsMzksMTljLS4xMi4zNS4zMS42NS41NS4zNkM0MS43NCwxNi41Niw0My42NSwxMSwzNy45Myw1LDM3LjY0LDQuNzQsMzcuMTksNS4xNCwzNy4zOSw1LjQ5Wm0yLjc2LS4xN0ExNi40MiwxNi40MiwwLDAsMSw0NywxNy4xMmEuMzMuMzMsMCwwLDAsLjY1LjExYy45Mi0zLjQ5LjQtOS40NC03LjE3LTEyLjUzQzQwLjA4LDQuNTQsMzkuODIsNS4wOCw0MC4xNSw1LjMyWk0yMS42OSwxNS43NmExNi45NCwxNi45NCwwLDAsMCwxMC40Ny05Yy4xOC0uMzYuNzUtLjIyLjY2LjE4LTEuNzMsOC03LjUyLDkuNjctMTEuMTIsOS40NUMyMS4zMiwxNi40LDIxLjMzLDE1Ljg3LDIxLjY5LDE1Ljc2WiIgc3R5bGU9ImZpbGw6I2NjYmVhNztmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJPdXRsaW5lIiBkPSJNMzgsNjUuNzVDMTcuMzIsNjUuNzUuNSw1Mi4yNy41LDM1LjdjMC0xMCw2LjE4LTE5LjMzLDE2LjUzLTI0LjkyLDMtMS42LDUuNTctMy4yMSw3Ljg2LTQuNjIsMS4yNi0uNzgsMi40NS0xLjUxLDMuNi0yLjE5QzMyLDEuODksMzUsLjUsMzgsLjVzNS42MiwxLjIsOC45LDMuMTRjMSwuNTcsMiwxLjE5LDMuMDcsMS44NywyLjQ5LDEuNTQsNS4zLDMuMjgsOSw1LjI3QzY5LjMyLDE2LjM3LDc1LjUsMjUuNjksNzUuNSwzNS43LDc1LjUsNTIuMjcsNTguNjgsNjUuNzUsMzgsNjUuNzVaTTM4LDNjLTIuNDIsMC01LDEuMjUtOC4yNSwzLjEzLTEuMTMuNjYtMi4zLDEuMzktMy41NCwyLjE1LTIuMzMsMS40NC01LDMuMDctOCw0LjdDOC42OSwxOC4xMywzLDI2LjYyLDMsMzUuNywzLDUwLjg5LDE4LjcsNjMuMjUsMzgsNjMuMjVTNzMsNTAuODksNzMsMzUuN0M3MywyNi42Miw2Ny4zMSwxOC4xMyw1Ny43OCwxMyw1NCwxMSw1MS4wNSw5LjEyLDQ4LjY2LDcuNjRjLTEuMDktLjY3LTIuMDktMS4yOS0zLTEuODRDNDIuNjMsNCw0MC40MiwzLDM4LDNaIi8+PC9nPjxnIGlkPSJNb3V0aCI+PGcgaWQ9IkJhY2tncm91bmQtMiIgZGF0YS1uYW1lPSJCYWNrZ3JvdW5kIj48cGF0aCBkPSJNNDUuMDUsNDNhOC45Myw4LjkzLDAsMCwxLTIuOTIsNC43MSw2LjgxLDYuODEsMCwwLDEtNCwxLjg4QTYuODQsNi44NCwwLDAsMSwzNCw0Ny43MSw4LjkzLDguOTMsMCwwLDEsMzEuMTIsNDNhLjcyLjcyLDAsMCwxLC44LS44MUg0NC4yNkEuNzIuNzIsMCwwLDEsNDUuMDUsNDNaIiBzdHlsZT0iZmlsbDojYjcxNDIyIi8+PC9nPjxnIGlkPSJUb25ndWUiPjxwYXRoIGlkPSJCYWNrZ3JvdW5kLTMiIGRhdGEtbmFtZT0iQmFja2dyb3VuZCIgZD0iTTM0LDQ3Ljc5YTYuOTEsNi45MSwwLDAsMCw0LjEyLDEuOSw2LjkxLDYuOTEsMCwwLDAsNC4xMS0xLjksMTAuNjMsMTAuNjMsMCwwLDAsMS0xLjA3LDYuODMsNi44MywwLDAsMC00LjktMi4zMSw2LjE1LDYuMTUsMCwwLDAtNSwyLjc4QzMzLjU2LDQ3LjQsMzMuNzYsNDcuNiwzNCw0Ny43OVoiIHN0eWxlPSJmaWxsOiNmZjYxNjQiLz48cGF0aCBpZD0iT3V0bGluZS0yIiBkYXRhLW5hbWU9Ik91dGxpbmUiIGQ9Ik0zNC4xNiw0N2E1LjM2LDUuMzYsMCwwLDEsNC4xOS0yLjA4LDYsNiwwLDAsMSw0LDEuNjljLjIzLS4yNS40NS0uNTEuNjYtLjc3YTcsNywwLDAsMC00LjcxLTEuOTMsNi4zNiw2LjM2LDAsMCwwLTQuODksMi4zNkE5LjUzLDkuNTMsMCwwLDAsMzQuMTYsNDdaIi8+PC9nPjxwYXRoIGlkPSJPdXRsaW5lLTMiIGRhdGEtbmFtZT0iT3V0bGluZSIgZD0iTTM4LjA5LDUwLjE5YTcuNDIsNy40MiwwLDAsMS00LjQ1LTIsOS41Miw5LjUyLDAsMCwxLTMuMTEtNS4wNSwxLjIsMS4yLDAsMCwxLC4yNi0xLDEuNDEsMS40MSwwLDAsMSwxLjEzLS41MUg0NC4yNmExLjQ0LDEuNDQsMCwwLDEsMS4xMy41MSwxLjE5LDEuMTksMCwwLDEsLjI1LDFoMGE5LjUyLDkuNTIsMCwwLDEtMy4xMSw1LjA1QTcuNDIsNy40MiwwLDAsMSwzOC4wOSw1MC4xOVptLTYuMTctNy40Yy0uMTYsMC0uMi4wNy0uMjEuMDlhOC4yOSw4LjI5LDAsMCwwLDIuNzMsNC4zN0E2LjIzLDYuMjMsMCwwLDAsMzguMDksNDlhNi4yOCw2LjI4LDAsMCwwLDMuNjUtMS43Myw4LjMsOC4zLDAsMCwwLDIuNzItNC4zNy4yMS4yMSwwLDAsMC0uMi0uMDlaIi8+PC9nPjxnIGlkPSJGYWNlIj48ZWxsaXBzZSBpZD0iUmlnaHRfQmx1c2giIGRhdGEtbmFtZT0iUmlnaHQgQmx1c2giIGN4PSI1My4yMiIgY3k9IjQwLjE4IiByeD0iNS44NSIgcnk9IjMuNDQiIHN0eWxlPSJmaWxsOiNmZWJiZDAiLz48ZWxsaXBzZSBpZD0iTGVmdF9CbHVjaCIgZGF0YS1uYW1lPSJMZWZ0IEJsdWNoIiBjeD0iMjIuOTUiIGN5PSI0MC4xOCIgcng9IjUuODUiIHJ5PSIzLjQ0IiBzdHlsZT0iZmlsbDojZmViYmQwIi8+PHBhdGggaWQ9IkV5ZXMiIGQ9Ik0yNS43LDM4LjhhNS41MSw1LjUxLDAsMSwwLTUuNS01LjUxQTUuNTEsNS41MSwwLDAsMCwyNS43LDM4LjhabTI0Ljc3LDBBNS41MSw1LjUxLDAsMSwwLDQ1LDMzLjI5LDUuNSw1LjUsMCwwLDAsNTAuNDcsMzguOFoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZCIvPjxwYXRoIGlkPSJJcmlzIiBkPSJNMjQsMzMuNjRhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsMjQsMzMuNjRabTI0Ljc3LDBhMi4wNywyLjA3LDAsMSwwLTIuMDYtMi4wN0EyLjA3LDIuMDcsMCwwLDAsNDguNzUsMzMuNjRaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpldmVub2RkIi8+PC9nPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-size: 56px 48.8px;
  background-position: 6px 20%;
}

.BarGraph--vertical .BarGraphBar {
  height: var(--primary);
  width: var(--opposite);
  transform: scaleX(var(--level));
  transform-origin: bottom left;
  max-height: 40px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.BarGraph--vertical .BarGraphList,
.BarGraph--vertical .BarGraphKey--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--count), 1fr);
}

.BarGraph--vertical .BarGraphList {
  direction: rtl;
}

.BarGraphKeyItem-label {
  color: white;
}

.BarGraphKeyItem-value {
  color: #7a7a7a;
}

.BarGraphKeyItem-viewSource {
  color: #7a7a7a;
  text-transform: lowercase;
  font-weight: thin;
  font-size: 0.8rem;
}

.BarGraphKeyItem:hover {
  text-decoration: none;
}

.BarGraphKeyItem:hover .BarGraphKeyItem-viewSource {
  color: var(--orange-light);
}

.DemphasizedLabel {
  text-transform: uppercase;
  white-space: nowrap;
}

#frameworks {
  display: flex;
}

.FrameworksGroup {
  display: grid;
  grid-template-rows: auto 40px;
  gap: 0.5rem;
}

.DemphasizedLabel {
  color: #7a7a7a;
  font-weight: 300;
}

.FrameworksList {
  display: grid;
  grid-template-columns: repeat(2, 40px);
  gap: 3.5rem;
  align-items: center;
}

#cards {
  display: grid;
}

.Tag {
  --background: rgba(31, 31, 132, 0.15);
  background-color: var(--background);
  border-radius: 4px;
  padding: 4px 4px;
  border: none;
  line-height: 1;
  color: black;
  text-decoration: none !important;
  display: inline-block;
  font-family: var(--monospace-font) !important;
  box-shadow: 0px 1px 0px rgb(111 111 111);
}

.mono {
  font-family: var(--monospace-font);
}

.Tag--Command {
  --background: #111;
  font-weight: medium;
  color: rgb(163, 255, 133);
}

.Tag--Command:before {
  content: "❯" / "";
  color: rgba(255, 255, 255, 0.35);
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 1ch;
  margin-left: 0.5ch;
  display: inline-block;
  transform: translateY(-1px);
}

.Tag--WebAPI {
  --background: #29b6f6;
  /* box-shadow: inset -1px -1px 3px rgb(231, 187, 73); */
}

.Tag--NodeJS {
  --background: rgb(130, 172, 108);
}

.Tag--TypeScript {
  --background: rgb(69, 119, 192);
  color: white;
}

.Tag--React {
  color: rgb(130, 216, 247);
  --background: #333;
}

.Tag--React:before {
  color: rgba(130, 216, 247, 0.5);
  content: "<" / "";
}

.Tag--React:after {
  color: rgba(130, 216, 247, 0.5);
  content: ">" / "";
}

.Tag--Bun {
  --background: #e600e5;
  color: white;
}

.mono {
  font-family: var(--monospace-font);
  border-radius: 6px;
  color: rgb(0, 103, 19);
}

@media (min-width: 1024px) {
  .InstallBox--mobile {
    display: none;
  }
}

@media (max-width: 1024px) {
  header {
    padding: 24px 16px;
  }
  .InstallBox--desktop {
    display: none;
  }

  #logo {
    width: 48px;
  }

  :root {
    --max-width: 100%;
    --horizontal-padding: 16px;
    --vertical-padding: 2rem;
    --line-height: 1.6;
  }

  main {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
  }

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

  .Tabs {
    margin-left: 0;
  }

  .Graphs,
  .BarGraph,
  .BarGraphList {
    max-width: auto;
  }

  .BarGraph {
    padding: 24px 0;
  }

  #pitch-content {
    max-width: auto;
  }

  #pitch main {
    gap: 1rem;
  }

  .InstallBox {
    margin-top: 0;
  }

  .tagline {
    font-size: 32pt;
  }

  #logo-text,
  #HeaderInstallButton {
    display: none;
  }
}

.InstallBox--mobile {
  border-radius: 0;
}

@media (max-width: 640px) {
  .InstallBox-copy {
    display: none;
  }

  .InstallBox-code-box {
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  .tagline {
    font-size: 22pt;
  }
}

.Zig {
  transform: translateY(15%);
  display: inline;
  vertical-align: baseline;
}

.CodeBlock .shiki {
  padding: 1rem;
  border-radius: 8px;
  font-family: var(--monospace-font);
}
.CodeBlock .shiki code {
  font-size: inherit;
}
@media (max-width: 640px) {
  .CodeBlock .shiki code {
    font-size: 0.8rem;
  }
}

.Identifier {
  font-family: var(--monospace-font);
  font-size: 1rem;
  color: #50fa7b !important;
  background-color: #282a36;
  padding: 0.25rem;
  border-radius: 4px;
  text-decoration: none !important;
}

.PerformanceClaim {
  text-decoration: dashed underline 2px #000 !important;
  text-decoration-skip-ink: auto !important;
}

.BarGraph--react,
.BarGraph--websocket,
.BarGraph--sqlite {
  display: none;
}

.Graphs--active-react .BarGraph--react,
.Graphs--active-websocket .BarGraph--websocket,
.Graphs--active-sqlite .BarGraph--sqlite {
  display: block;
}

@media (min-width: 1024px) {
  .Graphs {
    margin-left: auto;
  }

  .BarGraph-subheading,
  .BarGraph-heading {
    text-align: center;
  }
  .BarGraph-heading {
    margin-bottom: 0.25rem;
  }

  .BarGraphKeyItem-label {
    width: 130px;
  }
}

@media (max-width: 768px) {
  .InstallBox-code-box {
    width: fit-content;
  }

  .CodeBlock .shiki {
    /* padding: 24px 16px; */
    margin: 0 calc(-1 * var(--horizontal-padding));
    width: calc(
      100vw - var(--horizontal-padding) - var(--horizontal-padding) -2px
    );
    border-radius: 0px;
    white-space: pre-wrap;
    box-sizing: border-box;
    font-size: 0.9rem;
  }

  .logo-link {
    gap: 0;
  }

  header {
    grid-template-columns: min-content auto;
    gap: 2rem;
  }

  .tagline,
  .subtitle,
  .BarGraph-heading,
  .BarGraph-subheading {
    padding: 0 var(--horizontal-padding);
  }

  main {
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .InstallBox {
    padding: 24px 16px;
    margin-bottom: -32px;
  }

  .tagline {
    font-size: 30pt;
  }

  .Tag--Command {
    display: block;
    width: fit-content;
    margin-bottom: 1rem;
  }

  .Tabs {
    margin: 0;
    gap: 0rem;
    width: 100%;
    border-top: 1px solid rgba(200, 200, 200, 0.1);
  }

  .Tab {
    width: 100%;
    border-bottom-color: #333;
    padding-left: 8px;
    padding-right: 8px;
  }

  #pitch-content {
    max-width: 100%;
  }

  .Graphs--active-react .Tab[data-tab="react"],
  .Graphs--active-sqlite .Tab[data-tab="sqlite"],
  .Graphs--active-websocket .Tab[data-tab="websocket"] {
    background-color: rgba(100, 100, 100, 0.1);
  }
}

.Group {
  display: block;
}

.Tag--Command {
  display: block;
  width: fit-content;
  margin-bottom: 0.5rem;
  padding: 8px 12px;
}

.Label-replace {
  font-weight: 500;
}

.Label-text {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

#batteries {
  padding-left: 0;
}

.Group {
  margin-bottom: 2rem;
}

.Group strong {
  display: block;
}

.Built {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 2rem;
  color: rgb(201, 201, 201);
}

img {
  object-fit: contain;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

article hr {
  margin-top: 2em;
  margin-bottom: 2em;
}
article code {
  background-color: #00000018;
  padding: 2px 3px;
  border-radius: 0.2em;
  font-weight: unset !important;
}
article pre code {
  background-color: unset;
  padding: unset;
  border-radius: unset;
  font-weight: unset;
}
article img {
  border-radius: 8px;
  margin: auto;
}
@media (max-width: 640px) {
  article img {
    margin-left: calc(-1 * var(--horizontal-padding));
    border-radius: 0px;
    max-width: none;
    width: 100vw;
  }
  article li figure {
    width: 100vw !important;
    margin-left: calc(
      -1 * (var(--horizontal-padding) + var(--list-item-padding) +
            var(--list-padding))
    ) !important;
  }

  article > p > img {
    border-radius: 0px;
  }
}
article li > * {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
article li p {
  padding-bottom: 8px;
  line-height: 1.5;
}
article li > *:last-child {
  margin-bottom: 1em;
}
article figure img {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
article li img,
article li figure {
  margin: unset;
  margin-top: 1em;
}
article a:hover {
  transform: none;
}
article details {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(code):not(:where([class~="not-prose"] *)):before,
.prose :where(code):not(:where([class~="not-prose"] *)):after {
  content: "" !important;
}
.prose :where(ul):not(:where([class~="not-prose"] *)) {
  list-style-type: square !important;
  padding-left: var(--list-padding) !important;
}
.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
  padding-left: var(--list-item-padding) !important;
}
#blog-post .prose a:hover {
  transform: scale(1.06, 1.06);
  color: #a03939;
}
.expand-on-hover > * {
  transition: transform 0.1s linear;
}
.expand-on-hover:hover > * {
  transform: scale(1.06, 1.06);
  transform-origin: center;
}

#blog-post .prose .heading-anchor:hover a {
  transform: none;
  color: inherit;
}
.callout {
  font-size: 97%;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .callout {
    border-radius: 0px !important;
    margin: 0 calc(-1 * var(--horizontal-padding));
    width: calc(
      100vw - var(--horizontal-padding) - var(--horizontal-padding) -2px
    );
  }
}
.callout *:first-child {
  margin-top: 0;
}
.callout *:last-child {
  margin-bottom: 0;
}
.heading-anchor:hover a::after {
  content: "#";
  opacity: 0.3;
  margin-left: 0.25em;
  font-weight: normal;
  cursor: pointer;
  /* position: "absolute"; */
}
.rawhtml > * {
  margin: auto;
}