@import url(font/lucide/lucide.css);
html, body {
  padding: 0;
  margin: 0;
}
html {
  font-family: ui-sans-serif, system-ui, sans-serif;
  background-color: var(--background);
}
:root {
  --primaryMidLow: #004377;
  --primaryFaded: #0066b41e;
  --textDim: #777;
  --textDark: #555;
  --textBlack: #222;
  --shadowColor1: #0001;
  --shadowColor2: #0004;
  --shadowColor3: #0002;
  --background: #FFF;
  --backgroundFaded: #FFF9;
  --borderColor: #EEE;
  --borderColor2: #CCC;
  --surface: #F5F5F5;
  --surfaceLow: #F8F8F8;
  --surfaceLowest: #FCFCFC;
  --hoverOverlayColor: #0001;
  --contentPadding: 4rem;
  --sectionPadding: 16rem;
}
:root.dark {
  --primaryMidLow: #007ad7;
  --primaryFaded: #6ad0ff1c;
  --textDim: #CCC;
  --textDark: #EEE;
  --textBlack: #F5F5F5;
  --shadowColor1: #0001;
  --shadowColor2: #0004;
  --shadowColor3: #0002;
  --background: #0d1117;
  --backgroundFaded: #0d111799;
  --borderColor: #1d1f25;
  --borderColor2: #292c35;
  --surface: #070c14;
  --surfaceLow: #161b1f;
  --surfaceLowest: #11141a;
  --hoverOverlayColor: #FFF1;
}
@media all and (max-width: 40rem) {
  :root {
    --contentPadding: 2rem;
    --sectionPadding: 8rem;
  }
}
@media all and (max-width: 25rem) {
  :root {
    --contentPadding: 1rem;
    --sectionPadding: 4rem;
  }
}
.caption {
  color: #0066B4;
  font-size: 1.2rem;
  font-weight: 800;
}
.caption2 {
  color: #0066B4;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
p {
  color: var(--textDark);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6em;
}
h1 {
  color: var(--textBlack);
  font-size: 4rem;
  font-weight: 800;
  margin-top: 0;
  margin-bottom: 0.1rem;
}
h2 {
  color: var(--textBlack);
  font-size: 3rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.1em;
}
h3 {
  color: var(--textBlack);
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.1em;
}
h4 {
  color: var(--textBlack);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.1em;
}
h5 {
  color: var(--textBlack);
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0.1em;
}
@media all and (max-width: 40rem) {
  h1 {
    font-size: 2.6rem;
  }
  h2 {
    font-size: 1.8rem;
  }
  h3 {
    font-size: 1.8rem;
  }
  h4 {
    font-size: 1.2rem;
  }
}
.actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8em;
}
.text-gradient {
  background: linear-gradient(90deg, #09387e, #0066B4, #40C4FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
a {
  color: var(--textDark);
  text-decoration: none;
}
b {
  font-weight: 500;
}
code, pre, .mono {
  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.875rem;
  line-height: 1.4em;
  -webkit-text-size-adjust: 100%;
}
.animated-underline {
  transition: background-size 300ms ease-in-out;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1.5px;
  background-image: linear-gradient(to right, currentColor, currentColor);
}
.animated-underline:hover {
  background-size: 100% 1.5px;
}
#site-banner {
  display: flex;
  z-index: 10;
  width: 100%;
  padding: 0.75rem;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  column-gap: 0.5rem;
  color: white;
  text-align: center;
  background: linear-gradient(139deg, #09387e, #0066B4);
}
#site-banner p {
  margin: 0;
  flex-grow: 1;
  color: white;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: balance;
}
#site-banner a {
  color: hsl(from #40C4FF h s calc(l + 20));
  white-space: nowrap;
}
#site-banner a:hover {
  color: hsl(from #40C4FF h s calc(l + 0));
}
#site-banner a:active {
  color: #40C4FF;
}
.github-button {
  display: flex;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  align-items: center;
  column-gap: 0.5rem;
  color: var(--textBlack);
  font-size: 0.7rem;
  text-decoration: none;
}
.github-button:hover {
  background-color: var(--hoverOverlayColor);
}
.github-button * {
  transition: opacity 200ms ease-in-out;
}
.github-button:hover * {
  opacity: 1 !important;
}
.github-button > i {
  opacity: 0.9;
}
.github-button div {
  display: flex;
  flex-direction: column;
}
.github-button div > span:first-child {
  margin-bottom: 2px;
  opacity: 0.8;
  font-family: monospace;
}
.github-button div > span:last-child {
  display: flex;
  opacity: 0.6;
  align-items: center;
  column-gap: 0.3em;
  font-size: 0.9em;
}
.gradient-border-container {
  position: relative;
  height: 100%;
}
.gradient-border-container .gradient-border {
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right: -1px;
}
.gradient-border-container .gradient-border svg {
  overflow: visible;
}
.gradient-border-container rect {
  transition: stroke-dasharray 300ms ease-out;
  stroke-dasharray: 0 101;
}
.gradient-border-container:hover rect, .gradient-border-container.fixed rect {
  stroke-dasharray: 50 0 52;
}
.active .gradient-border rect {
  stroke-dasharray: 50 0 52;
}
[class^=icon-custom-] {
  width: 1em;
  height: 1em;
  color: inherit;
  -webkit-mask: var(--icon) no-repeat;
  mask: var(--icon) no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: currentColor;
}
.icon-custom-discord {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z'/%3E%3C/svg%3E");
}
.icon-custom-github {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
}
.icon-custom-jaspr {
  --icon: url("data:image/svg+xml,%3Csvg width='41' height='49' viewBox='0 0 41 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 39C15 39 19.2321 43.5674 23.2888 47L32.9625 36.5L35.5 38C36.5 33 32.9625 29.5248 32.9625 29.5248C37.3313 28.9007 36.3952 22.3475 36.3952 22.3475C34.2108 19.8511 33.8987 17.3546 34.2108 15.7943C34.5 14.5 34.0412 13.1572 33.5867 12.3617L36.3952 9.24113L38.5 9.5C38.5 4.5 30.4361 2 29.5 2C28.5638 2 26.0973 3.93617 25.4732 6.12057L17.9838 6.74468C17 -4 2.18791 7.87943 2.49998 11L4.99997 10L8.31006 14.5461C3.31715 18.2908 2.49997 26.5 2.49997 26.5L6.74978 25.7801C4.56538 30.1489 5.18949 35.1418 5.18949 35.1418L9 33.5C9.31206 37.5567 12.5 42 12.5 42L15 39Z' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M17.9838 6.74467C16.4235 6.74467 15.5 8 13 11C10.5 14 11.7427 13.6099 7.37387 15.1702' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M25.4732 6.12057C27.9696 6.74469 31.4023 8.61703 33.5866 12.3617' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M6.74979 25.7802C6.74979 25.7802 8.62213 22.3475 12.6789 20.4752C8.31007 22.3475 6.74979 25.7802 6.74979 25.7802Z' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M31.1907 22.0591C31.1907 22.0591 27.446 21.435 28.0701 24.2435C28.8329 27.6761 33.9992 26.1158 33.6872 23.9314C33.6872 22.0591 31.1907 22.0591 31.1907 22.0591Z' fill='black'/%3E%3Cpath d='M33.2746 29.5248C30.4661 29.5248 25 30 22 28C27.5 31.5 33 28.5 35.5 34.5C34.5 31 33.5 30.5 33.2746 29.5248Z' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.link-button {
  display: block;
  border-radius: 8px;
  cursor: pointer;
  transition: background 300ms;
  font-size: 0.9rem;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.link-button .link-button-content {
  display: flex;
  padding: 0.7rem 0.9rem;
  justify-content: center;
  align-items: center;
  column-gap: 0.4rem;
}
.link-button.link-button-filled {
  position: relative;
  box-shadow: 1px 1px 3px var(--shadowColor1);
  color: white;
  background-color: #0066B4;
}
.link-button.link-button-filled:hover {
  box-shadow: 1px 1px 5px var(--shadowColor2);
  background-color: var(--primaryMidLow);
}
.link-button.link-button-filled:after {
  display: block;
  position: absolute;
  left: 1rem;
  bottom: -2px;
  right: -2px;
  z-index: -1;
  height: 40px;
  border-radius: 100px;
  opacity: 0.0;
  transition: opacity 300ms;
  background-color: #40C4FF;
  content: "";
  filter: blur(5px);
  -webkit-filter: blur(5px);
  background: linear-gradient(90deg, #09387e, #0066B4, #40C4FF);
}
.link-button.link-button-filled:hover:after {
  opacity: 0.2;
}
.link-button.link-button-outlined {
  border: solid var(--borderColor) 2px;
  opacity: 0.9;
  color: var(--textBlack);
}
.link-button.link-button-outlined:hover, .link-button.link-button-outlined.active {
  opacity: 1.0;
  background-color: var(--surface);
}
.link-button.link-button-icon {
  opacity: 0.9;
  color: var(--textBlack);
  background-color: transparent;
}
.link-button.link-button-icon .link-button-content {
  padding: 0.7rem;
}
.link-button.link-button-icon:hover {
  opacity: 1.0;
  background-color: var(--hoverOverlayColor);
}
.logo {
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  align-items: center;
  column-gap: 0.5rem;
  color: var(--textBlack);
  font-size: 1.8rem;
  font-weight: 600;
}
.menu-toggle {
  display: none;
  padding: 0.7rem;
  border: unset;
  border-radius: 8px;
  outline: unset;
  align-items: center;
  color: var(--textBlack);
  font-size: 1.5rem;
  background-color: transparent;
}
.menu-toggle:hover {
  background-color: var(--hoverOverlayColor);
}
.menu-overlay {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  padding-top: 7rem;
  flex-direction: column-reverse;
  justify-content: start;
  align-items: center;
  row-gap: 4rem;
  background-color: var(--backgroundFaded);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.menu-overlay nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
  flex-grow: 0;
}
.menu-overlay nav a {
  font-size: 2rem;
}
.menu-overlay .header-actions {
  display: flex;
  flex-direction: row;
}
@media screen and (max-width: 750px) {
  header .menu-toggle {
    display: flex;
    position: relative;
    z-index: 101;
  }
}
svg.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
svg.particles circle {
  animation: particle 1s linear forwards;
}
@keyframes particle {
  0% {
    transform: translateY(0px);
  }
  90% {
    opacity: 1.0;
  }
  100% {
    opacity: 0.0;
    transform: translateX(var(--particle-offset));
  }
}
.theme-toggle {
  display: flex;
  padding: 0.7rem;
  border: unset;
  border-radius: 8px;
  outline: unset;
  align-items: center;
  color: var(--textBlack);
  background-color: transparent;
}
.theme-toggle:hover {
  background-color: var(--hoverOverlayColor);
}
.code-block {
  display: flex;
}
.code-block pre {
  position: relative;
  width: 0;
  padding-left: 3em;
  margin: 0;
  flex-grow: 1;
}
.code-block pre::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 3em;
  height: 100%;
  background-color: var(--surfaceLow);
}
.code-block pre code {
  display: inline-block;
  width: 100%;
  padding-top: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.5em;
  box-sizing: border-box;
  overflow-x: hidden;
  text-align: start;
  background-color: var(--surfaceLowest);
  color: var(--textDark);
}
.code-block pre code.scroll {
  overflow-x: scroll;
  scrollbar-width: none;
}
.code-block pre .lines {
  display: inline-block;
  min-width: 100%;
}
.code-block pre .lines .line {
  display: inline-block;
  width: 100%;
  padding-left: 0.5em;
}
.code-block pre .lines .line .line-number {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 3em;
  padding-right: 0.6em;
  box-sizing: border-box;
  opacity: 0.5;
  color: var(--textBlack);
  text-align: right;
}
.code-block pre .lines.selectable .line:hover {
  background-color: var(--hoverOverlayColor);
}
.code-block pre .lines.selectable .line:hover .line-number {
  opacity: 1.0;
  background-color: var(--hoverOverlayColor);
}
.code-block pre code span.hljs-root {
  color: var(--textDark);
}
.code-block pre code span.hljs-keyword {
  color: #5d48d5;
}
.code-block pre code span.hljs-string {
  color: #60a15f;
}
.code-block pre code span.hljs-attr {
  color: #c36077;
}
.code-window {
  border-radius: 13px;
}
.code-window.framed {
  border: solid var(--borderColor) 6px;
  overflow: hidden;
  box-shadow: 2px 2px 18px var(--shadowColor1);
  background-color: var(--borderColor);
}
.code-window:not(.framed) .code-window-body {
  box-shadow: 2px 2px 10px var(--shadowColor3);
}
.code-window .code-window-header {
  display: flex;
  padding-top: 2px;
  padding-left: 2.6em;
  column-gap: 0.2rem;
}
.code-window .code-window-header .code-window-tab {
  display: flex;
  padding: 0.5em 1.2em 0.5em 0.8em;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  box-shadow: 0px -2px 3px var(--shadowColor1);
  align-items: center;
  column-gap: 0.4rem;
  color: var(--textBlack);
  background-color: var(--surfaceLowest);
}
.code-window .code-window-header .code-window-tab.inactive {
  width: 0px;
  opacity: 0.5;
  flex-grow: 1;
  max-width: fit-content;
}
.code-window .code-window-header .code-window-title {
  font-size: 0.9rem;
  font-weight: 400;
}
.code-window .code-window-body {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px var(--shadowColor1);
  background-color: var(--background);
}
footer {
  border-top-style: solid;
  border-top-color: var(--borderColor);
  border-top-width: 2px;
}
footer .created-by {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--textDim);
  font-size: 0.7rem;
}
footer .created-by a {
  color: var(--textDark);
  font-weight: 500;
  text-decoration: none;
}
footer .footer-navigation {
  display: flex;
  max-width: 70rem;
  padding: 4rem 4rem 2.5rem 2rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
}
footer .footer-navigation .footer-logo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  align-self: stretch;
}
footer .footer-navigation h5 {
  margin-bottom: 1rem;
}
footer .footer-navigation ul {
  padding: 0;
  list-style-type: none;
  font-size: 0.9rem;
  line-height: 2rem;
}
footer .footer-navigation ul a {
  color: var(--textDim);
}
footer .footer-banner {
  padding: 1rem 2rem;
  border-top-style: solid;
  border-top-color: var(--borderColor);
  border-top-width: 2px;
  color: var(--textDim);
  font-size: 0.8rem;
}
@media all and (max-width: 600px) {
  footer .footer-navigation {
    display: flex;
    flex-direction: column;
  }
}
header {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 2rem 2rem;
  column-gap: 2rem;
}
header > * {
  display: flex;
  align-items: center;
}
header nav {
  display: flex;
  justify-content: end;
  column-gap: 2rem;
  flex-grow: 1;
  color: var(--textBlack);
}
header nav a {
  color: var(--textBlack);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}
header nav a:hover {
  color: #0066B4;
}
@media screen and (max-width: 750px) {
  header {
    display: flex;
    justify-content: space-between;
  }
  header > nav {
    display: none;
  }
  header > .header-actions {
    display: none;
  }
}
main {
  overflow: hidden;
}
section {
  position: relative;
}
#hero:before {
  content: "";
  position: absolute;
  top: 40vh;
  left: -20vw;
  z-index: -1;
  width: 80vw;
  height: 160vh;
  border-radius: 100%;
  opacity: 0.05;
  filter: blur(64px);
  -webkit-filter: blur(64px);
  background: linear-gradient(90deg, #09387e, #0066B4, #40C4FF);
}
#devex:before {
  content: "";
  position: absolute;
  top: 10vh;
  left: 20vw;
  z-index: -1;
  width: 80vw;
  height: 60vh;
  border-radius: 100%;
  opacity: 0.05;
  filter: blur(64px);
  -webkit-filter: blur(64px);
  background: linear-gradient(90deg, #09387e, #0066B4, #40C4FF);
}
#testimonials:before {
  content: "";
  position: absolute;
  top: -10vh;
  left: -10vw;
  z-index: -1;
  width: 60vw;
  height: 60vh;
  border-radius: 100%;
  opacity: 0.05;
  filter: blur(64px);
  -webkit-filter: blur(64px);
  background: linear-gradient(90deg, #09387e, #0066B4, #40C4FF);
}
#community:before {
  content: "";
  position: absolute;
  top: 60vh;
  left: 10vw;
  bottom: -20vh;
  z-index: -1;
  width: 80vw;
  border-radius: 100%;
  opacity: 0.05;
  filter: blur(64px);
  -webkit-filter: blur(64px);
  background: linear-gradient(90deg, #09387e, #0066B4, #40C4FF);
}
.markdown-content {
  min-height: 50vh;
  padding: 8rem var(--contentPadding) 4rem var(--contentPadding);
}
.markdown-content h3 {
  margin-top: 3rem;
}
#hero {
  display: flex;
  min-height: 100vh;
  padding: 8rem var(--contentPadding) 4rem var(--contentPadding);
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#hero > div {
  display: flex;
  max-width: 45rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#hero p {
  text-wrap: balance;
  color: var(--textDark);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6em;
}
#hero .cta {
  display: flex;
  margin-top: 2rem;
  flex-direction: column;
  align-items: center;
}
@media all and (max-width: 40rem) {
  #hero {
    min-height: 95vh;
  }
}
.hero-pill {
  margin-bottom: 1rem;
  border-radius: 20px;
  background: linear-gradient(175deg, #0066B405 0%, #0066B410 80%);
}
.hero-pill .pill-content {
  display: flex;
  padding: 0.5rem 0.8rem;
  align-items: center;
  column-gap: 0.5rem;
  color: var(--textBlack);
  font-size: 0.8rem;
  font-weight: 700;
  text-wrap: balance;
}
.install-jaspr {
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.8rem;
  border: solid var(--borderColor2);
  border-radius: 3em;
  cursor: copy;
  color: var(--textDark);
  font-size: 0.8rem;
  background-color: var(--surfaceLow);
}
.install-jaspr span {
  display: flex;
  align-items: center;
  column-gap: 0.6rem;
}
.install-jaspr button {
  display: inline-flex;
  padding: 0;
  border: unset;
  cursor: pointer;
  align-items: center;
  color: unset;
  background-color: transparent;
}
.install-jaspr button:hover {
  color: var(--textBlack);
}
#meet-jaspr-button {
  position: relative;
}
.blur-backdrop {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--backgroundFaded);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.blur-backdrop img {
  max-width: 80%;
  max-height: 80%;
  border-radius: 20px;
  pointer-events: none;
  object-fit: cover;
}
.blur-backdrop span {
  display: inline-block;
  margin-top: 1rem;
  color: var(--textDim);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
}
#meet {
  display: flex;
  min-height: 100vh;
  padding-top: 2rem;
  padding-left: var(--contentPadding);
  padding-right: var(--contentPadding);
  flex-direction: column;
  align-items: center;
  row-gap: var(--sectionPadding);
}
#meet .meet-section {
  display: flex;
  max-width: 70rem;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4rem;
}
#meet .meet-section > * {
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 24rem;
}
#meet .meet-section p {
  color: var(--textDark);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.7em;
}
#meet .meet-section .actions {
  margin-top: 2rem;
}
#meet .meet-components .select-target-1 {
  position: relative;
}
#meet .meet-components:has(.select-trigger-1:hover) .select-target-1::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  z-index: -1;
  border: solid #40C4FF 1px;
  border-radius: 8px;
  background-color: var(--primaryFaded);
}
#meet .meet-components .select-target-2 {
  position: relative;
}
#meet .meet-components:has(.select-trigger-2:hover) .select-target-2::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  z-index: -1;
  border: solid #40C4FF 1px;
  border-radius: 8px;
  background-color: var(--primaryFaded);
}
#meet .meet-components .select-target-3 {
  position: relative;
}
#meet .meet-components:has(.select-trigger-3:hover) .select-target-3::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  z-index: -1;
  border: solid #40C4FF 1px;
  border-radius: 8px;
  background-color: var(--primaryFaded);
}
#meet .meet-components .select-target-4 {
  position: relative;
}
#meet .meet-components:has(.select-trigger-4:hover) .select-target-4::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  z-index: -1;
  border: solid #40C4FF 1px;
  border-radius: 8px;
  background-color: var(--primaryFaded);
}
#meet .meet-components .select-target-5 {
  position: relative;
}
#meet .meet-components:has(.select-trigger-5:hover) .select-target-5::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  bottom: -10px;
  right: -10px;
  z-index: -1;
  border: solid #40C4FF 1px;
  border-radius: 8px;
  background-color: var(--primaryFaded);
}
#meet .meet-modes {
  flex-wrap: wrap-reverse;
}
#meet .meet-modes > div:first-child {
  position: relative;
}
#meet .meet-modes .put-top span:last-child {
  position: absolute;
  z-index: 1;
}
#meet .meet-modes .mode-highlight {
  position: absolute;
  left: -16px;
  bottom: 0.6em;
  right: -16px;
  height: 3.2em;
  border: solid #40C4FF 2px;
  border-radius: 8px;
  pointer-events: none;
  background-color: var(--primaryFaded);
}
#devex {
  display: flex;
  padding-top: var(--sectionPadding);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#devex .devex-grid {
  display: flex;
  max-width: 70rem;
  padding-left: var(--contentPadding);
  padding-right: var(--contentPadding);
  margin-top: 3rem;
  flex-direction: column;
  row-gap: 3rem;
}
#devex .devex-grid > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
}
#devex .devex-grid > div > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 16rem;
}
#devex .devex-grid > div:first-child > *:first-child {
  flex-basis: 30rem;
}
#devex .devex-grid > div:last-child > *:last-child {
  flex-basis: 30rem;
}
.counter-container {
  position: relative;
}
.feature-box {
  display: flex;
  border: solid var(--borderColor) 2px;
  border-radius: 12px;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(180deg, var(--background) 0%, var(--surface) 100%);
}
.feature-box .feature-preview {
  min-height: 15rem;
}
.feature-box .feature-info {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  text-align: start;
}
.feature-box .feature-info a {
  color: var(--textBlack);
  font-weight: bold;
  text-decoration: underline;
}
.develop-preview {
  position: relative;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
.develop-preview > div {
  position: absolute;
  top: 50%;
  left: 47%;
  width: 33rem;
  max-width: 100%;
  transform: translate(-50%, -50%);
}
.develop-preview > div > div {
  position: relative;
}
.develop-preview .counter-button {
  position: absolute;
  bottom: -0.5rem;
  right: -1.5rem;
}
.run-preview {
  padding: 0.5rem;
}
.run-preview .console {
  display: block;
  opacity: 0.8;
  color: var(--textBlack);
  text-align: start;
  font-size: 0.7rem;
}
.analyze-preview {
  position: relative;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
.analyze-preview > div {
  position: absolute;
  top: 50%;
  left: 47%;
  width: 28rem;
  max-width: 100%;
  transform: translate(-50%, -50%);
}
.analyze-preview .quick-select  span.hljs-title:last-child {
  background-color: var(--primaryFaded);
}
.analyze-preview > div > div {
  position: relative;
}
.analyze-preview .quick-actions {
  display: flex;
  position: absolute;
  top: 4rem;
  right: -1.5rem;
  padding: 0.5rem 0.2rem;
  border: solid var(--borderColor2) 1px;
  border-radius: 8px;
  flex-direction: column;
  align-items: stretch;
  row-gap: 0.2rem;
  color: var(--textBlack);
  font-size: 0.8rem;
  background-color: var(--surfaceLow);
  width: max-content;
}
.analyze-preview .quick-actions > span:first-child {
  color: var(--textDim);
  font-weight: 600;
}
.analyze-preview .quick-actions > span {
  display: flex;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  flex-direction: row;
  align-items: center;
  column-gap: 0.2rem;
  text-align: left;
}
.analyze-preview .quick-actions > span:nth-child(2) {
  background-color: var(--hoverOverlayColor);
}
#features {
  display: flex;
  padding-top: var(--sectionPadding);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#features .feature-grid {
  display: flex;
  max-width: 70rem;
  padding-left: var(--contentPadding);
  padding-right: var(--contentPadding);
  margin-top: 3rem;
  margin-bottom: 4rem;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.5rem;
}
#features .feature-grid > * {
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 13rem;
}
.link-card {
  display: block;
  border: solid var(--borderColor) 2px;
  border-radius: 13px;
  box-shadow: 1px 1px 3px -1px var(--shadowColor1);
  transition: background 300ms;
  text-align: start;
  text-decoration: none;
}
.link-card:hover {
  background-color: var(--surface);
}
.link-card .link-card-content {
  display: flex;
  padding: 1rem;
  border-radius: 10px;
  flex-direction: column;
  align-items: stretch;
}
.link-card .card-icon {
  margin-bottom: 1rem;
  color: #0066B4;
  font-size: 1.5em;
}
.link-card p {
  margin-top: 0.4em;
  margin-bottom: 0;
  color: var(--textDim);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
}
#testimonials {
  display: flex;
  padding-top: var(--sectionPadding);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#testimonials .testimonials-grid {
  max-width: 70rem;
  padding-left: var(--contentPadding);
  padding-right: var(--contentPadding);
  margin-top: 3rem;
  margin-bottom: 4rem;
  gap: 1.5rem;
  column-count: 3;
}
#testimonials .testimonials-grid > * {
  break-inside: avoid;
}
@media screen and (max-width: 1200px) {
  #testimonials .testimonials-grid {
    column-count: 2;
  }
}
@media screen and (max-width: 750px) {
  #testimonials .testimonials-grid {
    column-count: 1;
  }
}
.testimonial-card {
  display: flex;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: solid var(--borderColor) 2px;
  border-radius: 12px;
  box-shadow: 1px 1px 3px -1px var(--shadowColor1);
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  text-decoration: none;
}
.testimonial-card p {
  margin-top: 0.4em;
  margin-bottom: 0;
  color: var(--textDark);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6em;
}
.testimonial-card a {
  display: flex;
  margin-top: 1.2rem;
  flex-direction: row;
  align-items: center;
}
.testimonial-card a img {
  margin-right: 0.8rem;
  border-radius: 100%;
  object-fit: cover;
}
.testimonial-card a p {
  margin: 0;
  color: var(--textDim);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
}
.testimonial-card a p span:first-child {
  color: var(--textBlack);
  font-weight: 600;
}
#community {
  display: flex;
  padding: var(--sectionPadding) var(--contentPadding) var(--sectionPadding) var(--contentPadding);
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#community .community-card {
  display: flex;
  max-width: 70rem;
  margin-top: 3rem;
  border: solid var(--borderColor) 2px;
  border-radius: 12px;
  box-shadow: 4px 4px 20px var(--shadowColor1);
  flex-direction: row;
  flex-wrap: wrap;
  text-align: start;
  background: linear-gradient(180deg, var(--background) 0%, var(--surface) 100%);
}
#community .community-card > div {
  padding: 2rem;
  flex-grow: 1;
  flex-basis: 20rem;
}
#community .community-card > div > h4:not(:first-child) {
  margin-top: 3rem;
}
#community .community-card .sponsor {
  border-right-style: solid;
  border-right-color: var(--borderColor);
  border-right-width: 2px;
}
#community .community-card .sponsor h5 {
  margin-bottom: 0.5rem;
}
#community .community-card .sponsor .actions {
  margin-top: 2rem;
}
#community .community-card .sponsor p:last-child {
  margin-top: 2rem;
  color: var(--textDim);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3em;
}
.sponsors-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sponsors-list > * {
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  overflow: hidden;
  background-color: gray;
}
.sponsors-list > * img {
  width: 100%;
}