@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root {
  --clr-white: #fff;

  --site-bkg-clr: #121316;

  --s-card-bkg-clr: #181A1B;
  --s-card-bdr-clr: rgba(151, 151, 151, 0.15);

  --gradient-start: #2E1258;
  --gradient-end: #061328;
  --fallback-bg: #0F1114;
}

/**
 * Reference colors from google material. 000 to 999 format.
 *
 * https: //material.io/archive/guidelines/style/color.html#color-color-palette
 */

:root {

  --clr-white: #fff;

  /* google material 'Grey' */
  --clr-mono-050: #FAFAFA;
  --clr-mono-100: #F5F5F5;
  --clr-mono-200: #EEEEEE;
  --clr-mono-300: #E0E0E0;
  --clr-mono-400: #BDBDBD;
  --clr-mono-500: #9E9E9E;
  --clr-mono-600: #757575;
  --clr-mono-700: #616161;
  --clr-mono-750: #565656;
  --clr-mono-800: #424242;
  --clr-mono-850: #303030;
  --clr-mono-900: #212121;
  --clr-mono-950: #171717;
  --clr-mono-990: #0D0D0D;
  --clr-mono-999: #000;

  /* google material 'Blue' */
  --clr-prime-050: #E3F2FD;
  --clr-prime-100: #BBDEFB;
  --clr-prime-200: #90CAF9;
  --clr-prime-300: #64B5F6;
  --clr-prime-400: #42A5F5;
  --clr-prime-500: #2196F3;
  --clr-prime-600: #1E88E5;
  --clr-prime-700: #1976D2;
  --clr-prime-800: #1565C0;
  --clr-prime-900: #0D47A1;

  --clr-prime-A100: hsl(217, 100%, 75%);
  --clr-prime-A200: #448AFF;
  --clr-prime-A400: #2979FF;
  --clr-prime-A700: #2962FF;

  --clr-red: #F83A3A;
  --clr-green: #8BE489;
  --clr-yellow: #F5DF71;
  --clr-blue: #69d8fa;
  --clr-white: #efefef;
}

/**
 * Application colors
 * Based on 10..90 emphasis levels. 
 * 50 is the default, and not suffixed.
 */

:root {

  /* #region    Text Colors */
  --txt-30: var(--clr-mono-500);
  --txt-40: var(--clr-mono-400);
  --txt-50: var(--clr-mono-300);
  --txt-60: var(--clr-mono-200);
  --txt-70: var(--clr-mono-100);
  --txt-80: var(--clr-mono-050);

  --txt: var(--txt-60);

  --txt-white: #fff;

  --txt-red: rgb(255, 92, 92);
  --txt-yellow: rgb(218, 224, 131);

  --txt-title: var(--clr-mono-00);
  --txt-prime: var(--clr-prime-400);

  --txt-link: #75b4e7;
  --txt-term: #61FF7E;
  --txt-brand: var(--clr-prime-050);
  --txt-code: rgb(249, 246, 192);
  /* #endregion Text Colors */

  /* #region    Ico Colors */
  --ico-30: var(--clr-mono-900);
  --ico-40: var(--clr-mono-750);
  --ico-50: var(--clr-mono-700);
  --ico-60: var(--clr-mono-500);
  --ico-70: var(--clr-mono-500);
  --ico: var(--ico-50);

  --ico-prime: var(--clr-prime-400);
  /* #endregion Ico Colors */

  /* #region    Border Colors */
  --bdr-30: var(--clr-mono-950);
  --bdr-40: var(--clr-mono-900);
  --bdr-50: var(--clr-mono-850);
  --bdr-60: var(--clr-mono-800);
  --bdr-70: var(--clr-mono-700);
  --bdr: var(--bdr-50);

  --bdr-note: var(--clr-mono-700);

  --bdr-sel: var(--clr-prime-500);
  /* #endregion Border Colors */

  /* #region    Backbround Colors */
  --bkg-10: var(--clr-mono-999);
  --bkg-20: var(--clr-mono-990);
  --bkg-30: var(--clr-mono-950);
  --bkg-40: var(--clr-mono-900);
  --bkg: var(--clr-mono-850);
  --bkg-50: var(--clr-mono-850);
  --bkg-60: var(--clr-mono-800);
  --bkg-70: var(--clr-mono-700);

  --bkg-prime: #121316;
  --bkg-second: #1A1B1E;

  --bkg-hover: var(--clr-mono-700);

  --bkg-sel: var(--bkg-60);
  --bkg-pressed: var(--clr-mono-600);

  --bkg-app: var(--bkg-20);
  /* #endregion Backbround Colors */
}

:root {
  --grid-page: .5rem 1fr .5rem;


  /* Page Dims */
  --page-width: 80rem;
}

:root {
  font-size: 16px;
}

/* #region    Scroll Bar */

html {
  scrollbar-face-color: #646464;
  scrollbar-base-color: #646464;
  scrollbar-3dlight-color: #646464;
  scrollbar-highlight-color: #646464;
  scrollbar-track-color: #000;
  scrollbar-arrow-color: #000;
  scrollbar-shadow-color: #646464;
  scrollbar-dark-shadow-color: #646464;
}

::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}

::-webkit-scrollbar-button {
  background-color: #666;
}

::-webkit-scrollbar-track {
  background-color: #646464;
}

::-webkit-scrollbar-track-piece {
  background-color: #000;
}

::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #666;
  border-radius: 3px;
}

::-webkit-scrollbar-corner {
  background-color: #646464;
}

::-webkit-resizer {
  background-color: #666;
}

/* #endregion Scroll Bar */

body {
  margin: 0;
  background: #1A1B1C;
  font-family: 'Open Sans';
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--txt);
  color-scheme: dark;
}

body {
  /* fallback color */
  background-color: #000;
  /* diagonal gradient from purple to navy */
  /*   background-image: linear-gradient(135deg,
      var(--gradient-start) 10%,
      var(--gradient-end) 40%); */
  /* keep it fixed when scrolling */
  background-attachment: fixed;
  /* ensure text is legible */
  color: #E6E6E6;
}

a {
  color: rgb(112, 176, 255);
}

* {
  /* best practice for application */
  box-sizing: border-box;
  /* To allow flex/grid box to shrink smaller than content. 
    see: https://stackoverflow.com/a/36247448/686724 */
  min-width: 0;
  min-height: 0;
  /* layout normalization */
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

p {
  font-size: 2rem;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  margin: 1.5rem 0 1.5rem 0;
}

strong {
  font-weight: 600;
  letter-spacing: 0.05rem;
}

a-resources {
  z-index: 100;
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 1.5rem;
}

a-resources img {
    width: 3rem;
    opacity: .5;
  }

a-resources img:hover {
    opacity: .8;
  }

@media only screen and (max-width: 700px) {
    a-resources img {
      width: 2rem;
      flex-direction: column;
      align-items: flex-start;
      /* Optional: to align items to the left */
    }
}

@media only screen and (max-width: 1300px) {
    header a.profile {
      width: 5.5rem;
      bottom: -3.25rem;
    }
}

@media only screen and (max-width: 1200px) {
  :root {
    font-size: 12px;
  }
}

@media only screen and (max-width: 600px) {
  section.inner {
    padding: 1.5rem;
  }

  p {
    font-size: 1.5rem;
  }
}

.logo-mark strong {
    color: var(--clr-yellow);
  }

.logo-mark span {
    color: #fff;
  }

header {
  position: relative;

  height: 4rem;

  display: grid;
  grid-template-columns: 1fr var(--page-width) 1fr;
}

header section {
    grid-column: 2;
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;

  }

header section h1 {
      font-size: 2rem;
    }

header section nav {
      display: grid;
      gap: 1.5rem;
      grid-auto-flow: column;
    }

footer {
  padding: 1rem 0;
  display: table;
  margin: 0 auto;
  text-align: center;
}

section.page-content p {
    font-size: 1rem;
    margin: .5rem 0 .5rem 0;
  }

section.page-content h1,
  section.page-content h2,
  section.page-content h3 {
    margin: 2rem 0 1rem 0rem;
  }

section.page-content code:not(pre code) {
    padding: 0 .25rem;
    background: var(--bkg-20);
    color: var(--txt-code);
    border-radius: .25rem;
  }

section.page-content a code:not(pre code) {
    color: var(--txt-link);
    padding: 0 .25rem;
  }

section.page-content table {
    margin: 2rem 0;
  }

section.page-content ol,
  section.page-content ul {
    margin-left: 2rem;
  }

section.page-content ol li, section.page-content ul li {
      margin: .25rem 0 .25rem 0;
    }

section.page-content ul.level-2 {
    margin-left: 3rem;
  }

section.page-content blockquote {
    margin: 1rem 0;
    border-left: .5rem solid var(--bdr-60);
    padding: .25rem 1rem .25rem 1rem;
  }

pre code {
		border-radius: .5rem;
	}

.hljs {
	background: #17181a;
}

y-section {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 6rem 1fr;
}

y-section h2 {
    align-self: center;
    font-weight: 500;
    font-size: 2rem;
  }

y-section section {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    justify-content: start;
    -moz-column-gap: 5rem;
         column-gap: 5rem;
    row-gap: 3rem;
  }

y-section section y-card {


      padding: 1rem;
      display: grid;
      grid-template-rows: auto 1fr;
      row-gap: 2rem;
      align-items: start;
    }

y-section section y-card a {
        display: contents;
      }

y-section section y-card img {
        display: block;
        width: 100%;
        border-radius: .5rem;
      }

y-section section y-card h3 {
        font-size: 1.5rem;
        color: var(--clr-white);
        font-weight: 500;
      }

y-section section y-card:hover {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        background: rgba(0, 0, 0, 0.564);
        border-radius: 5px;
      }

/* for now inline this page */

y-video {
  display: grid;
  place-items: center;
  /* This centers both horizontally and vertically */
  position: relative;
}

y-video a {
    position: relative;
    display: block;
  }

y-video a::before {
    content: "▶";
    /* Unicode play symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
    z-index: 1;
  }

y-video a:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(0, 0, 0, 0.8);
  }

y-video img {
    border-radius: 16px;
    max-width: 100%;
    /* Makes sure image is responsive */
    height: auto;
    display: block;
    /* Removes any unwanted space below the image */
    margin: 0 auto;
    /* Additional centering */
  }

/* absolutes */

body.page-index .pricing-chart-link {
		position: absolute;
		top: 1rem;
		left: 1rem;
		z-index: 100;
	}

body.page-index .hero {
	position: relative;
	padding-bottom: 3rem;

	/* keep your .hero stacking context */
	background-image: url('/images/bkg-01.jpg');
	background-size: cover;
	/* fill & crop as needed */
	background-repeat: no-repeat;
	background-position: center bottom;

}

/* <-- align image’s bottom edge to container’s bottom */

/* Hacky for now - Allows to have text and kind of the right visual */

body.page-index .hero .logo-h1 {
		display: flex;
		justify-content: center;
		/* Centers the whole grid horizontally */
		align-items: center;
		/* Aligns items vertically */
		font-size: 5.5rem;
		font-family: 'Lato';

	}

body.page-index .hero .logo-h1 span:nth-child(1) {
			/* Styles for the first span (e.g., "devai") */
			text-align: right;
			letter-spacing: .05em;
			/* Optional: align right for balance */
		}

body.page-index .hero .tag-line {
		text-align: center;
		font-size: 1.5rem;
		font-weight: 300;
		margin-top: .5rem;
	}

body.page-index .hero .tag-line .run,
		body.page-index .hero .tag-line .build,
		body.page-index .hero .tag-line .share {
			font-size: 2.5rem;
			font-weight: 600;
			margin: .25rem;
		}

body.page-index .hero .tag-line .share {
			color: var(--clr-white);
		}

body.page-index .hero .tag-line .run {
			color: var(--clr-green);
		}

body.page-index .hero .tag-line .build {
			color: var(--clr-blue);
		}

body.page-index .hero .tag-line div {
			display: block;
			margin: .25rem 0 0 0;
			padding: 0;
			text-align: center;
			color: #f0f0f0;
			font-weight: 300;
			letter-spacing: 0.05em;
			text-shadow: 2px 2px 4px black, 0 0 10px black, 0 0 20px black;
		}

body.page-index .hero > .hero-box {
		margin: 2rem auto 0 auto;
		max-width: min(var(--page-width), calc(100% - 6rem));
		background: rgba(12, 12, 12, 0.66);
		padding: 1rem 2rem;
		border-radius: 1.1rem;
		border: solid 1px rgba(255, 255, 255, 0.15);
	}

body.page-index .hero > .hero-box .top-benefits {
			text-align: center;
			font-size: 1.5rem;
			font-weight: 500;
			margin: .5rem 0;
		}

body.page-index .hero > .hero-box .substack {
			margin-top: 1.5rem;
			font-size: 1.5rem;
			text-align: center;
		}

/* Install Section */

body.page-index .hero > .hero-box .install {
			margin: 1rem auto;
			max-width: 1200px;
			padding: 1rem;
			text-align: center;
			letter-spacing: .05em;

			/* Removed :target related rules */

		}

/* Centers the h2 */

body.page-index .hero > .hero-box .install h2 {
				font-size: 2rem;
				font-weight: 500;
				margin-bottom: 1.5rem;
				color: var(--txt-70);
			}

body.page-index .hero > .hero-box .install nav {
				display: flex;
				justify-content: center;
				gap: 2rem;
				/* Spacing between icons */
				margin-bottom: 1.5rem;

			}

body.page-index .hero > .hero-box .install nav a.os-link {
					cursor: pointer;
					/* Indicate it's clickable */
					display: inline-block;
					transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
					border-radius: 50%;
					/* Make it round */
					padding: 10px;
					/* Add padding around the image */
					border: 2px solid transparent;
					/* Add transparent border for layout consistency */
					background-color: transparent;
					/* Default transparent background */
				}

body.page-index .hero > .hero-box .install nav a.os-link:hover {
					transform: scale(1.1);
					/* Slight zoom on hover */
					background-color: var(--bkg-40);
					/* Subtle background on hover */
				}

/* Style for the selected link */

body.page-index .hero > .hero-box .install nav a.os-link.selected {
					background-color: var(--bkg-50);
					/* Darker background when selected */
					box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
					/* Optional glow effect */
					transform: scale(1.05);
					/* Slightly larger when selected */
					border-color: var(--bdr-60);
					/* Add a border when selected */
				}

body.page-index .hero > .hero-box .install nav a.os-link.selected:hover {
					background-color: var(--bkg-60);
					/* Slightly different hover on selected */
				}

body.page-index .hero > .hero-box .install nav img {
					max-height: 6rem;
					/* Control icon size */
					display: block;
					/* Prevents extra space below image */
					opacity: 0.8;
					transition: opacity 0.2s ease;
				}

body.page-index .hero > .hero-box .install nav a:hover img {
					opacity: 1;
				}

body.page-index .hero > .hero-box .install nav a.os-link.selected img {
					opacity: 1;
				}

body.page-index .hero > .hero-box .install .content {
				position: relative;
				/* Needed for absolute positioning or pseudo-elements if used later */
				text-align: left;
				/* Reset text align for content */
				/* Removed min-height to fix extra space issue */
				/* min-height: 140px; */
			}

/* Default state: hide all sections */

body.page-index .hero > .hero-box .install .content section.install-content {
				display: none;
				padding: 1.5rem 2rem;
				border: 1px solid var(--bdr-50);
				border-radius: 8px;
				background-color: var(--bkg-40);
				color: var(--txt-60);
				line-height: 1.6;
				font-size: 1.1rem;
			}

/* Selectors for code blocks if needed */

body.page-index .hero > .hero-box .install .content section.install-content pre {
					margin-top: 1rem;
					background-color: var(--bkg-30);
					padding: 1rem;
					border-radius: 4px;
					overflow-x: auto;
				}

body.page-index .hero > .hero-box .install .content section.install-content code {
					color: var(--txt-code);
					font-family: 'Source Code Pro', monospace;
				}

/* Style for the visible section */

body.page-index .hero > .hero-box .install .content section.install-content.visible {
				display: block;
			}

body.page-index .hero .documentation {
		margin: 0 auto;
		text-align: center;
		font-size: 1.75rem;
		font-weight: 300;
	}

body.page-index .intro-vid {
	margin: 0;
	padding: 2rem;
}

body.page-index .webinar a {
	display: flex;
	flex-direction: column;
	/* center */
	align-items: center;
	padding-bottom: 3rem;
	margin-bottom: 2rem;
	border-bottom: solid 1px var(--bdr-60);
}

body.page-index .webinar a img {
		display: inline-block;
	}

body.page-index .webinar a h3 {
		display: block;
		margin: 1rem 0;
		text-align: center;
		display: inline-block;
		font-size: 1.5rem;
		font-weight: 300;
		color: var(--txt-50);
		font-style: normal;

	}

body.page-index .webinar a h3 > strong {

			font-size: 2.5rem;
			color: var(--txt-white);
		}

body.page-index .webinar a .button.register {
		display: inline-block;

		border: solid 2px #fff;
		padding: .5rem 1rem;
		border-radius: .5rem;
		font-weight: 600;
		font-size: 1.25rem;
		margin: 1rem 0 0 0;

		background-color: var(--clr-prime-800);
		color: var(--txt-white);
	}

body.page-doc main {
		display: grid;
		grid-template-columns: 15rem 1fr;
		-moz-column-gap: 2rem;
		     column-gap: 2rem;
		max-width: var(--page-width);
		margin: 1rem auto 0 auto;
	}

/* Center the main content */

body.page-doc main nav {
			display: flex;
			flex-direction: column;
			row-gap: .5rem;

		}

body.page-doc main nav h3 {
				height: 3.25rem;
				display: flex;
				align-items: center;
				font-size: 1.2rem;
				color: var(--txt-80);
				margin-bottom: .5rem;
				border-bottom: 1px solid var(--bdr-40);
				padding-bottom: .5rem;
			}

body.page-doc main nav h3:not(:first-of-type) {
				margin-top: 1rem;
				height: 2.25rem;
			}

body.page-doc main nav a {
				font-size: 1rem;
				color: var(--txt-link);
				padding: .25rem .5rem;
				border-radius: .25rem;
			}

body.page-doc main nav a:hover {
					background-color: var(--bkg-30);
					color: var(--clr-white);
				}

/* Style for the selected navigation item */

body.page-doc main nav a.sel {
					background-color: var(--clr-prime-700);
					color: var(--clr-white);
					font-weight: 600;
				}

body.page-doc main section.page-content {
			min-height: 30rem;
		}

body.page-doc main section.page-content h1,
			body.page-doc main section.page-content h2,
			body.page-doc main section.page-content h3,
			body.page-doc main section.page-content h4 {
				letter-spacing: .1em;
			}

/* Styles for the main content area if needed */

body.page-doc main section.page-content h1 {
				margin-top: 0;
				font-size: 2.25rem;
				border-bottom: 1px solid var(--bdr-50);
				padding-bottom: .5rem;
				margin-bottom: 1rem;
				color: var(--txt-80);
			}

body.page-doc main section.page-content h2 {
				font-size: 2rem;
				font-weight: 400;
				border-bottom: 1px solid var(--bdr-50);
			}

body.page-doc main section.page-content h3 {
				font-size: 1.5rem;
				font-weight: 400;
				color: var(--clr-prime-100);
				border-bottom: 1px solid var(--bdr-50);
			}

body.page-doc main section.page-content h4 {
				margin: 1rem 0;
			}

body.page-doc main section.page-content pre code {
				margin: 1rem 0 1rem 0;
			}
/*# sourceMappingURL=all-bundle.css.map */