.grapi{
  
  --blue-100: #DCE8FF;
  --blue-200: #BEDEFF;
  --blue-400: #5DADFD;
  --blue-500: #378AFA;
  --blue-600: #216BEF;
  --blue-800: #1B45B2;
  --blue-deep: #1852D3;

  
  --gray-200: #D6DFE7;
  --gray-400: #97AEC3;
  --gray-500: #7E96B3;
  --gray-600: #6C82A4;
  --gray-800: #525F7B;
  --gray-950: #2D323E;

  --periwinkle-100: #E4EAF5;

  
  --hero-bg: #EFF7FF;
  --white: #FFFFFF;
  --bg-second: #E7EFF6;
  --ai-card-bg: #F6FBFF;
  --table-bg: #F6FAFF;

  
  --text-black: #2D323E;
  --text-secondary: #344054;
  --text-desc: #525F7B;
  --text-subdued: #607295;

  
  --badge-bg: #DAECFF;

  
  --dark-bg: #202430;
  --dark-text: #EFF7FF;
  --dark-muted: #B9C9D7;

  
  --term-bg: #1B1B19;
  --term-ink: #E8E6E1;
  --term-dim: #A5A199;
  --term-orange: #D97757;
  --term-ok: #4FD69C;

  --border: #C3CBD3;
  --nav-border: #D6DFE7;

  
  --r-badge: 1.875rem;
  --r-card: 0.75rem;
  --r-section-card: 1.5rem;
  --r-table: 2.25rem;
  --r-button: 1rem;
  --r-link: 0.25rem;

  
  --shell-w: 77.5rem;
  --section-pad: 6rem;

  
  --grad-blue: linear-gradient(135deg, #5DADFD 0%, #3F8CF6 50%, #216BEF 100%);

  
  --grad-text: linear-gradient(135deg, #378AFA 0%, #216BEF 48%, #1B45B2 100%);
  --grad-btn:  linear-gradient(to bottom, #216BEF, #1852D3);
  --grad-glow: linear-gradient(135deg, #9CCBFF 0%, #6FB6FD 50%, #5DADFD 100%);
  --ease: cubic-bezier(.2,.7,.2,1);
}.grapi, .grapi *::before, .grapi *::after{ box-sizing: border-box; }@font-face{
  font-family: "Inter";
  src: url("fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}.grapi{
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  scroll-behavior: smooth;
  font-size: clamp(16px, 0.8333vw, 32px);
}.grapi{
  margin: 0;
  background-color: var(--hero-bg);
  color: var(--text-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}.grapi img{ display: block; max-width: 100%; }.grapi p{ margin: 0; }.grapi ul, .grapi ol{ margin: 0; padding: 0; list-style: none; }.grapi dl, .grapi dd{ margin: 0; }.grapi a{ text-decoration: none; color: inherit; }.grapi h1, .grapi h2, .grapi h3, .grapi h4, .grapi h5{ margin: 0; font-weight: 600; }.grapi button{ font: inherit; }.grapi [hidden]{ display: none !important; }.grapi :focus-visible{ outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: var(--r-link); }.grapi .skip{ position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--blue-600); color: #fff; padding: .875rem 1.25rem; min-height: 2.75rem; border-radius: 0 0 var(--r-card) 0; }.grapi .skip:focus{ left: 0; }.grapi .shell{
  width: var(--shell-w);
  max-width: calc(100% - 2.75rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
}@media (min-width: 1024px){.grapi .shell{ max-width: calc(100% - 2rem); } }.grapi .section{ padding-block: var(--section-pad); position: relative; isolation: isolate; overflow: hidden; }.grapi .section > .shell{ position: relative; z-index: 1; }.grapi .h1{ font-size: 2.625rem; font-weight: 600; letter-spacing: -0.11rem; line-height: 1.08; color: var(--text-black); text-wrap: balance; }@media (min-width: 700px){.grapi .h1{ font-size: 3.5rem;   letter-spacing: -0.16rem; } }@media (min-width: 1024px){.grapi .h1{ font-size: 4.25rem; letter-spacing: -0.21rem; line-height: 1.1; } }.grapi .h1 > span{ display: block; }.grapi .h1__grad{
  display: block;
  background-image: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}.grapi .h2{ font-size: 2rem; font-weight: 600; letter-spacing: -0.09rem; line-height: 1.06; color: var(--text-black); text-wrap: balance; }@media (min-width: 700px){.grapi .h2{ font-size: 2.5rem; letter-spacing: -0.11rem; } }@media (min-width: 1024px){.grapi .h2{ font-size: 3rem; letter-spacing: -0.125rem; line-height: 1.05; } }.grapi .h2__dark{ display: block; color: var(--text-black); line-height: 1.05; }.grapi .h2__grad{ display: block; line-height: .96; background-image: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }.grapi .h2__light{ display: block; color: var(--dark-text); line-height: 1.05; }.grapi .h2__glow{ display: block; line-height: .96; background-image: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }.grapi .h3{ font-size: 1.375rem; font-weight: 600; letter-spacing: -0.045rem; line-height: 1.2; color: var(--text-black); }@media (min-width: 700px){.grapi .h3{ font-size: 1.625rem; letter-spacing: -0.055rem; } }.grapi .p-l{ font-size: 1rem; font-weight: 400; letter-spacing: -0.01875rem; line-height: 1.55; color: var(--text-desc); }.grapi .p-m{ font-size: .875rem; font-weight: 400; letter-spacing: -0.01875rem; line-height: 1.55; color: var(--text-desc); }.grapi .mono{ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }.grapi .tick, .grapi code{
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92em; color: var(--blue-800);
}.grapi .badge{
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .375rem .625rem;
  background-color: var(--badge-bg);
  border-radius: var(--r-badge);
}.grapi .badge img{ width: 1.125rem; height: 1.125rem; flex: none; }.grapi .badge span{
  color: var(--blue-800);
  font-size: .75rem; font-weight: 500; letter-spacing: -0.0125rem; line-height: 1;
  white-space: nowrap;
}.grapi .badge--dark{ background-color: rgba(255,255,255,.10); }.grapi .badge--dark span{ color: var(--blue-200); }.grapi .badge--dark img{ filter: brightness(2.4); }.grapi .btn-main{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.25rem 3rem; min-height: 2.75rem;
  color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.375rem; letter-spacing: -0.01875rem;
  background-image: var(--grad-btn);
  border: .375rem solid var(--blue-200);
  border-radius: var(--r-button);
  transition: background-image 200ms ease, box-shadow 200ms ease, transform 120ms ease;
  cursor: pointer;
}.grapi .btn-main:hover{
  background-image: linear-gradient(to bottom, var(--blue-deep), var(--blue-deep));
  box-shadow: 0 6px 54px 0 rgba(33,107,239,.8);
}.grapi .btn-main:active{ transform: translateY(1px); }@media (max-width: 479px){.grapi .btn-main{ padding-inline: 1.5rem; } }.grapi .btn-soft{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.25rem 2rem; min-height: 2.75rem;
  color: var(--blue-600); font-size: 1rem; font-weight: 600; letter-spacing: -0.01875rem;
  background: var(--white);
  border: 1px solid var(--nav-border);
  border-radius: var(--r-button);
  transition: background-color 200ms ease, border-color 200ms ease, transform 120ms ease;
  cursor: pointer;
}.grapi .btn-soft:hover{ background: var(--periwinkle-100); border-color: var(--blue-200); }.grapi .btn-soft:active{ transform: translateY(1px); }.grapi .head{ display: flex; flex-direction: column; gap: .875rem; align-items: center; text-align: center; max-width: 52rem; margin: 0 auto 3.75rem; }.grapi .head .p-l{ max-width: 46rem; }.grapi .head--dark .p-l{ color: var(--dark-muted); }.grapi .hero{ position: relative; padding-block: 4.5rem 5rem; overflow: hidden; isolation: isolate; }@media (min-width: 1024px){.grapi .hero{ padding-block: 5.5rem 6rem; } }.grapi .hero__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }.grapi .hero > .shell{ position: relative; z-index: 2; }.grapi .hero__grid{ display: flex; flex-direction: column-reverse; gap: 2.5rem; align-items: flex-start; }@media (min-width: 1024px){.grapi .hero__grid{ flex-direction: row; gap: 3rem; justify-content: space-between; align-items: center; }
}.grapi .hero__left{ display: flex; flex-direction: column; gap: 2rem; width: 100%; min-width: 0; }@media (min-width: 1024px){.grapi .hero__left{ width: auto; max-width: 38rem; } }.grapi .hero__head{ display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }.grapi .hero__sub{ max-width: 32rem; }.grapi .hero__ctas{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }.grapi .portrait{ flex: none; width: min(14rem, 60%); }@media (min-width: 1024px){.grapi .portrait{ width: 18rem; } }.grapi .portrait img{
  width: 100%; height: auto; border-radius: var(--r-section-card);
  box-shadow: 0 1.5px 3px rgba(7,4,146,.1), 0 18px 45px rgba(6,47,125,.08), 0 9px 18px rgba(27,59,119,.06);
}.grapi .portrait figcaption{ margin-top: .75rem; font-size: .8125rem; color: var(--text-desc); }.grapi .band{ background: var(--dark-bg); }.grapi .term{
  max-width: 56rem; margin-inline: auto;
  background: var(--term-bg);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-section-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}.grapi .term__hd{
  display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap;
  padding: .875rem 1.25rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.10);
}.grapi .term__id{
  display: inline-flex; align-items: center; gap: .625rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8125rem; color: var(--term-ink);
}.grapi .term__dot{
  width: .5rem; height: .5rem; border-radius: 50%; flex: none;
  background: var(--term-ok);
  animation: term-pulse 2.2s ease-in-out infinite;
}@keyframes term-pulse{
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,214,156,.45); }
  50%      { opacity: .55; box-shadow: 0 0 0 .375rem rgba(79,214,156,0); }
}.grapi .term__sim{
  font-size: .75rem; font-weight: 500; letter-spacing: -0.0125rem;
  color: var(--term-orange);
  padding: .25rem .625rem; border: 1px solid rgba(217,119,87,.45); border-radius: var(--r-badge);
}.grapi .term__log{
  padding: 1.25rem 1.25rem 1.5rem; min-height: 21rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8125rem; line-height: 1.75; color: var(--term-ink);
}.grapi .tl{ white-space: pre-wrap; overflow-wrap: anywhere; }.grapi .tl--sp{ margin-top: .9em; }.grapi .tl--meta{ color: var(--term-dim); }.grapi .tl--out{ color: var(--term-dim); padding-left: 1.15em; }.grapi .tl--ok{ color: var(--term-ok); padding-left: 1.15em; }.grapi .tl__p, .grapi .tl__b{ color: var(--term-orange); font-weight: 700; }.grapi .term.is-typing .tl{ display: none; }.grapi .term.is-typing .tl.is-on{ display: block; }.grapi .tl.is-caret::after{
  content: ""; display: inline-block; width: .55em; height: 1.05em;
  margin-left: .15em; vertical-align: text-bottom;
  background: var(--term-orange);
  animation: term-caret 1s steps(1, end) infinite;
}@keyframes term-caret{ 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }.grapi .term__cap{ max-width: 56rem; margin: 1.25rem auto 0; font-size: .8125rem; line-height: 1.6; color: var(--dark-muted); }.grapi .vidsec{ background: var(--white); }.grapi .vid{
  display: block; max-width: 56rem; margin-inline: auto;
  background: var(--white); border-radius: var(--r-section-card); padding: 1.25rem;
  box-shadow: 0 1.5px 3px rgba(7,4,146,.1), 0 18px 45px rgba(6,47,125,.05), 0 9px 18px rgba(27,59,119,.05);
}.grapi .vid__media{
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-card);
  background: radial-gradient(120% 140% at 20% 0%, #2C3140 0%, var(--dark-bg) 55%, #181B24 100%);
  display: grid; place-items: center;
}.grapi .vid__play{
  width: 5rem; height: 5rem; border-radius: 50%;
  background-image: var(--grad-btn);
  border: .375rem solid var(--blue-200);
  display: grid; place-items: center;
  transition: transform 200ms var(--ease), box-shadow 200ms ease;
}.grapi .vid__play svg{ width: 1.75rem; height: 1.75rem; color: #fff; margin-left: .2rem; }.grapi .vid:hover .vid__play{ transform: scale(1.06); box-shadow: 0 6px 54px 0 rgba(33,107,239,.6); }.grapi .vid__media iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }.grapi .vid.is-live .vid__play{ display: none; }.grapi .vid__cap{ display: flex; flex-direction: column; gap: .25rem; padding: 1rem .25rem .25rem; }.grapi .vid__t{ font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.03rem; color: var(--text-black); }.grapi .vid__d{ font-size: .8125rem; color: var(--text-desc); }.grapi .art{ background: var(--hero-bg); }.grapi .art .head{ margin-bottom: 2.25rem; }.grapi .art__row{ display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; }.grapi .art__meta{ font-size: .8125rem; color: var(--text-desc); overflow-wrap: anywhere; max-width: 40rem; }.grapi .cust{ background: var(--white); }.grapi .cust__grid{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; }@media (min-width: 900px){.grapi .cust__grid{ grid-template-columns: 1.35fr .8fr; gap: 4rem; } }.grapi .cust__main{ display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }.grapi .cust__who{ display: flex; align-items: center; gap: .875rem; }.grapi .cust__av{ width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--blue-100); flex: none; }.grapi .cust__name{ display: block; font-size: 1.0625rem; font-weight: 600; color: var(--text-black); }.grapi .cust__role{ display: block; font-size: .8125rem; color: var(--text-desc); }.grapi .quote{ margin: .5rem 0; padding-left: 1.5rem; border-left: 3px solid var(--blue-600); }.grapi .quote p{ font-size: 1.375rem; font-weight: 400; letter-spacing: -0.03rem; line-height: 1.4; color: var(--text-black); max-width: 34ch; }.grapi .res{ display: flex; flex-direction: column; gap: .75rem; }.grapi .res li{ display: flex; align-items: baseline; gap: .75rem; font-size: 1rem; line-height: 1.55; color: var(--text-desc); }.grapi .res li::before{ content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--blue-200); flex: none; transform: translateY(-.1rem); }.grapi .cust__hon{ max-width: 54ch; }.grapi .rail{
  background: var(--ai-card-bg); border-radius: var(--r-section-card);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start;
  align-self: start;
}.grapi .rail__h{ font-size: .9375rem; font-weight: 600; letter-spacing: -0.02rem; color: var(--text-black); }.grapi .rail__dl{ display: flex; flex-direction: column; gap: 1.125rem; width: 100%; }.grapi .rail__dl dt{ font-size: .8125rem; font-weight: 600; color: var(--text-black); margin-bottom: .25rem; overflow-wrap: anywhere; }.grapi .rail__dl dd{ font-size: .8125rem; line-height: 1.5; color: var(--text-desc); overflow-wrap: anywhere; }.grapi .close{ background: var(--hero-bg); padding-block: 5rem; }.grapi .close .head{ margin-bottom: 0; gap: 1.25rem; }.grapi .close__ctas{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: .75rem; }@media (prefers-reduced-motion: reduce){.grapi{ scroll-behavior: auto; }.grapi, .grapi *::before, .grapi *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }.grapi .term.is-typing .tl{ display: block !important; }.grapi .tl.is-caret::after{ display: none !important; }
}@media print{.grapi .gr-nav{ display: none !important; }.grapi .term.is-typing .tl{ display: block !important; }
}.grapi .art{ background: var(--white); }.grapi .art__head{ padding: clamp(2.5rem,6vw,5rem) 0 clamp(2rem,4vw,3rem); }.grapi .a-h1{ font-size: clamp(2.125rem,4.6vw,3.75rem); font-weight: 600; letter-spacing: -0.045em;
  line-height: 1.06; color: var(--text-black); max-width: 18ch; text-wrap: balance; margin: 0 0 1.5rem; }.grapi .a-h1 em{ font-style: normal; color: var(--blue-600); }.grapi .art__lede{ font-size: clamp(1.0625rem,1.6vw,1.3125rem); line-height: 1.55; color: var(--text-desc);
  max-width: 54ch; margin: 0 0 2rem; text-wrap: pretty; }.grapi .art__by{ display: flex; align-items: center; gap: .875rem; font-size: .875rem; line-height: 1.5;
  color: var(--text-desc); padding-top: 1.5rem; border-top: 1px solid var(--rule, #D6DFE7); max-width: 32rem; }.grapi .art__by img{ width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; flex: none; }.grapi .art__by b{ color: var(--text-black); font-weight: 600; }.grapi .stage{ padding: clamp(2rem,5vw,3.5rem) 0; background: var(--white); }.grapi .stage--alt{ background: var(--hero-bg); }.grapi .stage__in{ width: min(100% - 2.5rem, 80rem); margin-inline: auto; }.grapi .stage__h{ font-size: clamp(1.25rem,2vw,1.625rem); font-weight: 600; letter-spacing: -0.035em;
  color: var(--text-black); margin: 0 0 1.25rem; }.grapi .stage__cap{ margin-top: .875rem; font-size: .8125rem; line-height: 1.55; color: var(--text-desc); }.grapi .stage__cap a{ color: var(--blue-800); text-decoration: underline; text-underline-offset: 2px; }.grapi .screen{ position: relative; border-radius: 1rem; overflow: hidden; border: 1px solid var(--rule, #D6DFE7); }.grapi .screen--vid{ aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--hero-bg), var(--table-bg)); }.grapi .screen--anim{ aspect-ratio: 16 / 9; background: #1b1b19; border-color: #2b2b27; }.grapi .screen--anim iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }@media (max-width: 700px){.grapi .screen--anim{ aspect-ratio: 3 / 4; } }.grapi .vid{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; text-decoration: none; }.grapi .vid__play{ width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--white);
  box-shadow: 0 8px 30px rgba(20,24,31,.18); position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.2,1); }.grapi .vid:hover .vid__play{ transform: scale(1.06); }.grapi .vid__play::after{ content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%,-50%);
  border-left: 1.25rem solid var(--blue-600); border-top: .75rem solid transparent; border-bottom: .75rem solid transparent; }.grapi .vid__lab{ font-size: 1rem; font-weight: 600; color: var(--blue-800); }.grapi .screen--vid iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }.grapi .art__body{ max-width: min(42rem, calc(100% - 2.75rem)); padding-block: clamp(2.5rem,5vw,4rem) clamp(3rem,6vw,4.5rem); }.grapi .a-p{ font-size: 1.0625rem; line-height: 1.75; color: var(--text-desc); margin: 0 0 1.375rem; text-wrap: pretty; }.grapi .a-p b{ color: var(--text-black); font-weight: 600; }.grapi .a-first{ font-size: 1.1875rem; color: var(--text-black); }.grapi .a-emph{ color: var(--text-black); font-weight: 500; }.grapi .a-p code, .grapi .a-ul code{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
  color: var(--blue-800); overflow-wrap: anywhere; }.grapi .a-h2{ font-size: clamp(1.5rem,2.4vw,1.9375rem); font-weight: 600; letter-spacing: -0.04em;
  line-height: 1.15; color: var(--text-black); margin: 3.25rem 0 1.125rem; text-wrap: balance; }.grapi .a-h3{ font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-black); margin: 2rem 0 .625rem; }.grapi .a-ul{ margin: 0 0 1.375rem; padding: 0; list-style: none; display: grid; gap: .5rem; }.grapi .a-ul li{ position: relative; padding-left: 1.125rem; font-size: 1.0625rem; line-height: 1.7; color: var(--text-desc); }.grapi .a-ul li::before{ content: ""; position: absolute; left: 0; top: .78em; width: .3125rem; height: .3125rem;
  border-radius: 50%; background: var(--blue-400); }.grapi .pull{ margin: 2.5rem 0; padding: 0; border: 0; font-size: clamp(1.25rem,2.1vw,1.625rem);
  line-height: 1.4; letter-spacing: -0.02em; color: var(--text-black); text-wrap: pretty; }.grapi .pull cite{ display: block; margin-top: 1rem; font-style: normal; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-desc); }.grapi .brief{ margin: 2rem 0 2.5rem; padding: 1.5rem 0; border-block: 1px solid var(--rule, #D6DFE7); }.grapi .brief__h{ font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-black); margin: 0 0 .375rem; }.grapi .brief__meta{ font-size: .75rem; color: var(--text-desc); margin: 0 0 1rem; }.grapi .brief__foot{ font-size: .875rem; line-height: 1.6; color: var(--text-desc); margin: 0 0 1.25rem; }.grapi .code{ margin: 1.5rem 0; border: 1px solid var(--rule, #D6DFE7); border-radius: .625rem; overflow: hidden; }.grapi .code__lab{ display: block; padding: .5rem .875rem; font-size: .75rem; color: var(--text-desc);
  background: var(--table-bg); border-bottom: 1px solid var(--rule, #D6DFE7); }.grapi .code__body{ margin: 0; padding: 1rem .875rem; font-size: .8125rem; line-height: 1.7;
  color: var(--text-black); overflow-x: auto; background: var(--white); }.grapi .code__body .kw{ color: #7C3AED; }.grapi .code__body .str{ color: #0B7A4F; }.grapi .code__body .cmt{ color: #6B7280; }.grapi .code__body .fn{ color: var(--blue-800); }.grapi .code__body .num{ color: #B45309; }.grapi .qa{ border-bottom: 1px solid var(--rule, #D6DFE7); }.grapi .qa:first-of-type{ border-top: 1px solid var(--rule, #D6DFE7); }.grapi .qa summary{ list-style: none; cursor: pointer; padding: 1.125rem 0; display: flex; gap: 1.5rem;
  align-items: center; justify-content: space-between; font-size: 1.0625rem; font-weight: 600;
  color: var(--text-black); min-height: 2.75rem; }.grapi .qa summary::-webkit-details-marker{ display: none; }.grapi .qa__s{ width: .875rem; height: .875rem; flex: none; position: relative; }.grapi .qa__s::before, .grapi .qa__s::after{ content: ""; position: absolute; background: var(--text-desc);
  transition: transform .2s cubic-bezier(.2,.7,.2,1); }.grapi .qa__s::before{ left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }.grapi .qa__s::after{ top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }.grapi .qa[open] .qa__s::after{ transform: translateX(-50%) scaleY(0); }.grapi .qa__a{ padding: 0 0 1.25rem; max-width: 64ch; }.grapi .qa__a .a-p{ margin: 0; }.grapi .end{ background: var(--hero-bg); padding: clamp(3rem,6vw,4.5rem) 0; border-top: 1px solid var(--rule, #D6DFE7); }.grapi .end__in{ max-width: 46rem; }.grapi .end__h{ font-size: clamp(1.5rem,2.6vw,2.125rem); font-weight: 600; letter-spacing: -0.04em;
  line-height: 1.15; color: var(--text-black); margin: 0 0 .75rem; text-wrap: balance; }.grapi .end__p{ font-size: 1rem; line-height: 1.6; color: var(--text-desc); margin: 0 0 1.75rem; max-width: 46ch; }.grapi .end__ctas{ display: flex; flex-wrap: wrap; gap: .75rem; }@media (prefers-reduced-motion: reduce){.grapi .vid__play, .grapi .qa__s::before, .grapi .qa__s::after{ transition: none; } }