@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap');

:root {
   --background-color: #1A1A1A;
   --text-color: #E0E0E0;
   --accent-color: #505050;
   --header-bg-color: #2A2A2A;
   --block-bg-color: #2F2F2F;
   --ru: 1vw;
   --rs: 1vw;
   --x-shift: 0px;
   --y-shift: 0px;
   --scale: 1;
   --opacity: 1;
   --rotation: 0deg;
   --blur-radius: 0px;
   --morph-progress: "";
}

@media (min-aspect-ratio: 1/1) {
   :root {
      --ru: 1vh;
   }
}

#header-indicator {
   position: absolute;
   right: calc(2 * var(--ru));
   top: 50%;
   transform: translateY(-50%);
   font-size: calc(1.5 * var(--ru));
   color: #FFFFFF;
   opacity: 0.125;
}

#spectrum {
   position: fixed;
   bottom: calc(-16*var(--ru));
   left: calc(-16*var(--ru));
   width: calc(40*var(--ru));
   height: calc(40*var(--ru));
}

.taco {
   width: calc(75 * var(--ru));
   margin: 0 auto;
   justify-content: center;
}

.extended {
   width: calc(100 * var(--ru));
   margin: 0 auto;
   justify-content: center;
}

body {
   font-family: 'Source Sans 3', sans-serif;
   font-size: calc(1.7 * var(--ru));
   margin: 0;
   padding: 0;
   background-color: var(--background-color);
   color: var(--text-color);
   overflow-x: hidden;
}

h1 {
   font-size: calc(8 * var(--ru));
   font-weight: 1000;
   text-align: center;
   padding: calc(18 * var(--ru)) 0 calc(4 * var(--ru)) 0;
   color: #646464;
}

.product-showcase h1 {
   padding: calc(2 * var(--ru)) 0 0 0;
   color: #b6b6b6;
   margin-bottom: 0;
}

h2 {
   font-size: calc(3 * var(--ru));
   color: #CFCFCF;
}

.product-showcase h2 {
   text-align: center;
   margin-top: 0;
}

h3 {
   color: #BEBEBE;
}

p,
ul {
   color: #A9A9A9;
   line-height: 1.5;
   margin-top: 0;
   padding-top: 0;
}

.dsr-text {
   font-family: 'Jost', sans-serif;
   font-weight: 700;
}

.dsr-d {
   color: rgb(0, 255, 255);
}

.dsr-s {
   color: rgb(255, 0, 255);
}

.dsr-r {
   color: rgb(255, 255, 0);
}

.dsr-tm {
   color: #FFFFFF;
}

table {
   border-collapse: collapse;
}

.left {
   width: calc(48 * var(--ru));
   text-align: right;
   color: #999;
}

.center {
   width: calc(4 * var(--ru));
   text-align: center;
   color: #bbbb;
}

.right {
   width: calc(48 * var(--ru));
   text-align: left;
   color: #cccc;
}

tr {
   border-top: 1px solid #555;
}

blockquote {
   color: #BEBEBE;
}

a {
   color: #BDBDBD;
   text-decoration: underline;
   text-decoration-thickness: calc(0.01 * var(--ru));
   text-decoration-color: #696969;
   text-underline-offset: calc(0.25 * var(--ru));
}

header {
   font-size: calc(2 * var(--ru));
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(5 * var(--ru));
   /* Explicitly set header height to 10 --ru */
   background-color: var(--header-bg-color);
   z-index: 3;
   display: flex;
   /* Use flexbox for vertical centering */
   align-items: center;
   /* Vertically center the content */
}

nav {
   width: 100%;
}

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

nav ul li {
   display: inline-block;
   margin: 0 calc(3 * var(--ru));
}

nav ul li span.current-page {
   color: #FFFFFF;
   font-weight: 600;
}

.nabla-logo {
   height: calc(2.5 * var(--ru));
   width: auto;
   position: relative;
   top: calc(0.5 * var(--ru));
}

.grid-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto auto;
   gap: 2%;
   margin-bottom: 2%;
   padding-top: calc(10 * var(--ru));
   padding-bottom: calc(12 * var(--ru));
}

.block {
   background-color: var(--block-bg-color);
   padding: 3% 5%;
   border-radius: var(--ru);
}

.block-image {
   margin-top: var(--ru);
}

img {
   width: 100%;
   height: auto;
   border-radius: var(--ru);
}

.banner img {
   width: calc(100 * var(--ru));
   margin-top: 0;
   margin-bottom: 0;
   border-radius: 0;
   margin-left: auto;
   margin-right: auto;
   display: block;
}

.filmstrip-container img {
   height: calc(20 * var(--ru));
   width: auto;
   object-fit: cover;
   margin-right: var(--ru);
}

.section {
   margin-bottom: calc(6 * var(--ru));
}

.section p {
   text-align: justify;
   width: calc(80 * var(--ru));
   margin-left: auto;
   margin-right: auto;
}

.section ul {
   text-align: left;
   width: calc(75 * var(--ru));
   margin-left: auto;
   margin-right: auto;
}

.panels {
   width: 90%;
   margin: 0 auto;
   padding: calc(6 * var(--ru)) 0 0 calc(20 * var(--ru));
   position: relative;
}

.cta-text,
.support-info {
   text-align: center;
   margin-top: calc(2 * var(--ru));
}

.cta {
   background-color: var(--accent-color);
   color: var(--text-color);
   padding: var(--ru) calc(2 * var(--ru));
   text-decoration: none;
   border-radius: calc(0.5 * var(--ru));
   border-color: #121212;
   border-width: calc(0.125 * var(--ru));
   border-style: solid;
   display: inline-block;
   margin-top: calc(2 * var(--ru));
}

.product-showcase {
   background-color: #333;
   border-radius: calc(2 * var(--ru));
   padding: 0 calc(6 * var(--ru)) calc(3 * var(--ru)) calc(6 * var(--ru));
   margin-bottom: calc(6 * var(--ru));
   width: 100%;
   box-sizing: border-box;
}

.feature-list {
   columns: 2;
   column-gap: calc(4 * var(--ru));
   margin-bottom: calc(2 * var(--ru));
}

.novus-image-container {
   position: relative;
   display: block;
}

.novus-overlay-text {
   position: absolute;
   bottom: var(--ru);
   left: var(--ru);
   color: #555;
}

.color-square-top {
   height: calc(5 * var(--ru));
   border-top-left-radius: var(--ru);
   border-top-right-radius: var(--ru);
}

.color-square-bottom {
   height: calc(5 * var(--ru));
   border-bottom-left-radius: var(--ru);
   border-bottom-right-radius: var(--ru);
}

li {
   margin-bottom: calc(var(--ru) / 2);
}

.icons {
   padding-right: calc(2 * var(--ru));
   margin: 0;
   width: calc(10 * var(--ru));
   height: auto;
}

.team-row {
   display: flex;
   justify-content: center;
   padding-bottom: calc(6 * var(--ru));
   margin-bottom: calc(2 * var(--ru));
}

.team-member {
   width: 45%;
   text-align: center;
   padding: 0 5%;
}

.bio-image {
   width: calc(25 * var(--ru));
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: var(--ru);
}

.idt-type {
   width: 100%;
   margin-bottom: calc(12 * var(--ru));
}

.idt-container {
   position: relative;
}

.idt-container h3 {
   position: absolute;
   bottom: 0;
   right: calc(1.7 * var(--ru));
   color: white;
   font-size: calc(3 * var(--ru));
   text-align: right;
}

.how-it-works {
   max-width: calc(90 * var(--ru));
   margin: 0 auto;
   padding: 0 var(--ru);
}

.step {
   margin-bottom: calc(6 * var(--ru));
}

.step-images-container {
   position: relative;
   overflow: hidden;
}

.overlay-image {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
}

.left-eye-view {
   display: block;
}

.right-eye-view {
   display: none;
}

.alternating-image-container {
   position: relative;
   width: 100%;
}

/* Install command blocks */
.install-commands {
   margin: calc(2 * var(--ru)) 0;
}

.install-command {
   margin-bottom: calc(2 * var(--ru));
}

.install-command h4 {
   color: #CFCFCF;
   margin-bottom: calc(0.5 * var(--ru));
}

.install-command pre {
   position: relative;
   display: block;
   background-color: #1A1A1A;
   border: 1px solid #555;
   border-radius: calc(0.5 * var(--ru));
   padding: calc(1.2 * var(--ru)) calc(4 * var(--ru)) calc(1.2 * var(--ru)) calc(1.5 * var(--ru));
   overflow-x: auto;
   white-space: pre-wrap;
   word-break: break-all;
   font-family: monospace;
   font-size: calc(1.2 * var(--ru));
   color: #E0E0E0;
   margin: 0;
}

.install-command pre code {
   all: unset;
   font-family: monospace;
   font-size: calc(0.72 * var(--ru));
   color: #E0E0E0;
}

.copy-btn {
   position: absolute;
   top: calc(0.6 * var(--ru));
   right: calc(0.6 * var(--ru));
   background: var(--accent-color);
   color: #A9A9A9;
   border: none;
   border-radius: calc(0.2 * var(--ru));
   padding: calc(0.3 * var(--ru)) calc(0.8 * var(--ru));
   font-family: 'Source Sans 3', sans-serif;
   font-size: calc(1.15 * var(--ru));
   cursor: pointer;
   transition: background 0.2s, color 0.2s;
}

.copy-btn:hover {
   background: #BDBDBD;
   color: var(--background-color);
}

footer {
   text-align: center;
   background-color: var(--header-bg-color);
   color: #9E9E9E;
}