@charset "UTF-8";
:root {
  --bg:#f8fafc;
  --white:#fff;
  --ink:#152138;
  --muted:#657189;
  --blue:#295cf4;
  --blue-hover:#1749dc;
  --line:#dfe5ef;
  --dark:#111a2b;
  --dark-2:#172236;
  --dark-line:#2a354a;
  --demo-muted:#a4b1c6;
  --green:#6ddeba;
  --radius:16px;
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body {
  margin:0;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
  cursor:pointer;
}
button,a {
  touch-action:manipulation;
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible {
  outline:3px solid #7397ff;
  outline-offset:5px;
}
button {
  color:inherit;
}
svg {
  display:block;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  text-wrap:balance;
}
p {
  text-wrap:pretty;
}
button {
  border:0;
}
button:disabled {
  cursor:default;
}
::selection {
  background:#c9d7ff;
  color:#16234b;
}
[hidden] {
  display:none!important;
}
.container {
  width:min(1160px,calc(100% - 80px));
  margin-inline:auto;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--blue);
  color:white;
  padding:15px;
}
.skip-link:focus {
  top:12px;
}
.site-header {
  border-bottom:1px solid var(--line);
  background:rgba(248,250,252,.95);
  position:relative;
  z-index:20;
}
.header-inner {
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.75rem;
  font-weight:780;
  letter-spacing:-1.5px;
  flex-shrink:0;
}
.brand-mark {
  width:34px;
  height:34px;
  color:var(--blue);
}
.brand-apm {
  font-weight:440;
}
.brand-period {
  color:var(--blue);
}
.main-nav {
  display:flex;
  gap:33px;
  align-items:center;
  font-size:0.875rem;
  font-weight:550;
}
.main-nav>a:not(.button) {
  padding:15px 0;
}
.main-nav>a:not(.button):hover {
  color:var(--blue);
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  border-radius:7px;
  background:var(--blue);
  color:white;
  min-height:53px;
  padding:15px 23px;
  font-size:0.9375rem;
  font-weight:600;
  line-height:1.4;
  box-shadow:0 3px 6px #295cf416;
  transition:background .18s,transform .18s;
}
.button:hover {
  background:var(--blue-hover);
  transform:translateY(-2px);
}
.button>span {
  font-size:1.25rem;
  line-height:1;
}
.button-small {
  min-height:42px;
  padding:11px 16px;
  font-size:0.875rem;
  gap:20px;
}
.menu-toggle {
  display:none;
}
.hero {
  text-align:center;
  padding-top:83px;
  padding-bottom:55px;
}
.eyebrow {
  font-size:0.75rem;
  font-weight:650;
  letter-spacing:1.9px;
  line-height:1.6;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--blue);
}
.hero-eyebrow {
  justify-content:center;
  margin-bottom:23px;
}
.eyebrow-line {
  width:23px;
  height:2px;
  background:var(--blue);
}
h1 {
  font-size:clamp(44px,5.35vw,76px);
  line-height:1.12;
  letter-spacing:-3.8px;
  font-weight:680;
}
h1>span {
  color:var(--blue);
}
.hero-description {
  font-size:1.125rem;
  line-height:1.75;
  color:var(--muted);
  margin-top:25px;
}
.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:29px;
  margin-top:29px;
}
.text-button {
  font-size:0.9375rem;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 0;
}
.text-button:hover {
  color:var(--blue);
}
.play-icon {
  width:27px;
  height:27px;
  border:1px solid #c4cedd;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.062rem;
}
.runtime-strip {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:38px;
}
.runtime-strip>span {
  font-size:0.75rem;
  letter-spacing:1.3px;
  font-weight:600;
  color:var(--muted);
  padding-right:24px;
  border-right:1px solid var(--line);
}
.runtime-strip b {
  font-size:1.062rem;
  color:#59657a;
  letter-spacing:-.5px;
}
.preview-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  color:var(--muted);
  font-size:0.75rem;
}
.preview-caption>span:first-child {
  letter-spacing:1.3px;
  font-size:0.75rem;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:8px;
}
.tiny-cross {
  font-size:1.375rem;
  color:var(--blue);
  font-weight:400;
}
.product-window {
  background:var(--dark);
  color:#f0f4fd;
  border:1px solid #2b3b58;
  border-radius:12px;
  display:grid;
  grid-template-columns:192px minmax(0,1fr);
  overflow:hidden;
  box-shadow:0 28px 70px -35px #26396370;
}
.demo-sidebar {
  padding:25px 15px 16px;
  border-right:1px solid var(--dark-line);
  display:flex;
  flex-direction:column;
  background:#0e1728;
  font-size:0.75rem;
}
.workspace {
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:550;
  margin-bottom:39px;
  white-space:nowrap;
}
.workspace-icon {
  background:#2a4271;
  border:1px solid #3f5a8c;
  width:28px;
  height:28px;
  border-radius:6px;
  display:grid;
  place-items:center;
}
.workspace small,.sidebar-bottom small {
  display:block;
  font-size:0.75rem;
  font-weight:400;
  color:var(--demo-muted);
  margin-top:4px;
}
.sidebar-label {
  font-size:0.75rem;
  letter-spacing:1.1px;
  color:#96a3b9;
  margin:0 8px 13px;
}
.sidebar-item {
  padding:11px 10px;
  border-radius:5px;
  color:#acb8cc;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.sidebar-item>span {
  font-size:1rem;
  width:16px;
}
.sidebar-item.selected {
  background:#253755;
  color:#a9c5ff;
}
.sidebar-bottom {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding:30px 7px 0;
}
.avatar {
  border-radius:50%;
  background:#29374d;
  color:#a8b9d5;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  font-size:0.75rem;
}
.demo-main {
  min-width:0;
}
.demo-breadcrumb {
  border-bottom:1px solid var(--dark-line);
  padding:16px 25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:0.75rem;
  color:var(--demo-muted);
}
.demo-breadcrumb>span>span {
  margin:0 10px;
}
.demo-breadcrumb strong {
  font-weight:500;
  color:#d5dfef;
}
.environment {
  font-size:0.75rem;
  border:1px solid #3b4860;
  border-radius:4px;
  padding:3px 7px;
  color:#c0cde1;
}
.demo-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 26px 20px;
  gap:16px;
}
.service-title {
  display:flex;
  align-items:center;
  gap:10px;
}
.service-title h2 {
  font-size:1.312rem;
  letter-spacing:-.5px;
  font-weight:600;
}
.service-icon {
  width:27px;
  height:27px;
  background:#263b66;
  color:#8aafff;
  border-radius:6px;
  display:grid;
  place-items:center;
  font-size:1.375rem;
}
.health {
  font-size:0.75rem;
  background:#153d38;
  color:#81e0c1;
  border-radius:4px;
  padding:4px 7px;
  margin-left:4px;
}
.demo-heading p {
  font-size:0.75rem;
  color:var(--demo-muted);
  margin-top:9px;
}
.time-range {
  border:1px solid #3c4860;
  border-radius:5px;
  padding:8px 10px;
  font-size:0.75rem;
  color:#c7d1e3;
  white-space:nowrap;
}
.demo-tabs {
  display:flex;
  border-bottom:1px solid var(--dark-line);
  padding:0 26px;
  gap:26px;
}
.demo-tabs button {
  padding:0 0 13px;
  background:transparent;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-size:0.75rem;
  color:var(--demo-muted);
  min-height:44px;
}
.demo-tabs button[aria-selected=true] {
  color:#94b5ff;
  border-bottom-color:#6693ff;
}
.demo-tabs button:hover {
  color:white;
}
.demo-panel {
  padding:22px 26px 0;
  min-height:343px;
}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:27px;
}
.metrics>div {
  border-right:1px solid var(--dark-line);
}
.metrics>div:last-child {
  border-right:0;
}
.metrics>div>span {
  font-size:0.75rem;
  color:#a8b6cd;
  display:block;
}
.metrics strong {
  display:block;
  font-size:1.938rem;
  letter-spacing:-1px;
  font-weight:550;
  margin-top:8px;
}
.metrics strong>span {
  font-size:0.8125rem;
  letter-spacing:0;
  font-weight:400;
  color:#a6b2c7;
  margin-left:4px;
}
.metrics small {
  font-size:0.75rem;
  color:var(--demo-muted);
  display:block;
  margin-top:6px;
  line-height:1.5;
}
.metrics small.trend {
  color:var(--green);
}
.metrics small>span {
  color:var(--demo-muted);
}
.chart-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.chart-heading h3 {
  font-size:0.75rem;
  font-weight:500;
}
.chart-legend {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.75rem;
  color:#b0bdd3;
}
.legend-dot {
  display:inline-block;
  flex-shrink:0;
  width:6px;
  height:6px;
  border-radius:2px;
}
.legend-dot.blue {
  background:#7098ff;
}
.legend-dot.violet {
  background:#b397fa;
  margin-left:10px;
}
.response-chart {
  display:flex;
  gap:14px;
  height:126px;
}
.chart-scale {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:0.75rem;
  color:#a1b1ca;
  min-width:38px;
  padding:3px 0 5px;
}
.response-chart svg {
  width:100%;
  height:100%;
  overflow:visible;
}
.grid-line {
  fill:none;
  stroke:#2a3548;
  stroke-width:1;
  stroke-dasharray:3 4;
}
.chart-line {
  fill:none;
  stroke:#759dff;
  stroke-width:2;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.violet-line {
  stroke:#b397fa;
  stroke-width:1.5;
}
.chart-times {
  display:flex;
  justify-content:space-between;
  font-size:0.75rem;
  color:#a1b1ca;
  padding-left:51px;
  margin-top:8px;
}
.demo-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 0 18px;
  margin-top:18px;
  border-top:1px solid var(--dark-line);
  font-size:0.75rem;
  color:var(--demo-muted);
}
.demo-bottom>span {
  display:flex;
  align-items:center;
  gap:7px;
}
.inline-link {
  font-size:0.75rem;
  color:#a7c3ff;
  background:transparent;
  padding:5px 0;
}
.inline-link:hover {
  color:white;
}
.inline-link>span {
  margin-left:7px;
}
.preview-footnote {
  font-size:0.75rem;
  color:var(--muted);
  text-align:center;
  padding:20px;
}
.preview-footnote>span {
  color:var(--blue);
  margin-right:6px;
}
.preview-section {
  padding-bottom:42px;
}
.trace-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:0.875rem;
  margin-bottom:24px;
}
.method {
  font-size:0.75rem;
  font-weight:550;
  color:var(--green);
  background:#173c36;
  padding:4px 6px;
  border-radius:4px;
  margin-right:6px;
}
.trace-title>span:last-child {
  font-size:0.75rem;
  color:var(--demo-muted);
}
.trace-title strong {
  color:white;
  margin-left:7px;
  font-weight:500;
}
.waterfall-scale {
  display:grid;
  grid-template-columns:42% 58%;
  color:var(--demo-muted);
  font-size:0.75rem;
  padding:0 8px 12px;
}
.waterfall-scale>span:last-child {
  display:flex;
  justify-content:space-between;
}
.span-row {
  display:grid;
  grid-template-columns:42% 58%;
  align-items:center;
  width:100%;
  min-height:47px;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  border-radius:5px;
  padding:7px 8px;
  color:#dce6f8;
}
.span-row:hover {
  background:#1d2a42;
}
.span-row[aria-pressed=true] {
  background:#24273f;
  border-color:#70639c;
}
.span-row>span:first-child {
  font-size:0.75rem;
  overflow-wrap:anywhere;
  padding-right:12px;
}
.span-row small {
  font-size:0.75rem;
  display:block;
  color:var(--demo-muted);
  margin-top:3px;
}
.span-track {
  position:relative;
  height:23px;
  border-left:1px solid #3b4963;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),#29354a calc(50% - 1px),#29354a 50%);
}
.span-bar {
  position:absolute;
  left:var(--start);
  width:var(--width);
  height:22px;
  border-radius:3px;
  background:#365cba;
  color:#e7efff;
  font-size:0.75rem;
  padding:3px 7px;
  white-space:nowrap;
  min-width:7px;
  line-height:16px;
}
.database-bar {
  background:#7159a8;
}
.cache-bar {
  background:#398b78;
  padding:0;
}
.external-bar {
  background:#326989;
}
.span-duration {
  position:absolute;
  left:var(--start);
  font-size:0.75rem;
  top:4px;
}
.span-detail {
  border-top:1px solid var(--dark-line);
  margin-top:18px;
  padding:17px 0 20px;
  min-height:118px;
}
.detail-tag {
  font-size:0.75rem;
  font-weight:600;
  color:#cbb8ff;
  letter-spacing:1px;
}
.span-detail p {
  font-size:0.75rem;
  line-height:1.65;
  margin-top:6px;
  color:#cad4e6;
}
.span-detail code {
  display:block;
  overflow-wrap:anywhere;
  font-size:0.75rem;
  line-height:1.6;
  color:#a3b5d1;
  margin-top:7px;
}
.map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.map-heading h3 {
  font-size:0.875rem;
  font-weight:500;
}
.map-heading>span {
  font-size:0.75rem;
  color:var(--demo-muted);
}
.service-map {
  display:grid;
  grid-template-columns:1fr 30px 1.2fr 1.5fr;
  align-items:center;
  gap:8px;
  min-height:280px;
}
.map-node {
  border:1px solid #3b4a62;
  border-radius:7px;
  padding:18px 12px;
  text-align:center;
  background:#19253a;
}
.map-node strong {
  display:block;
  font-size:0.75rem;
  font-weight:500;
}
.map-node small {
  display:block;
  font-size:0.75rem;
  color:var(--demo-muted);
  margin-top:7px;
}
.map-icon {
  display:block;
  font-size:1.5rem;
  color:#9bbdff;
  margin-bottom:10px;
}
.map-primary {
  background:#203659;
  border-color:#4f74be;
}
.map-connector {
  color:#6985ae;
  text-align:center;
  font-size:1.562rem;
}
.map-branches {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.map-branches>div {
  display:flex;
  align-items:center;
  gap:12px;
  color:#6985ae;
}
.map-branches>div>span {
  font-size:1.562rem;
}
.map-branches .map-node {
  flex:1;
  padding:12px 8px;
}
.database-node {
  border-color:#665982;
}
.section {
  padding-block:78px 90px;
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:55px;
  margin-bottom:47px;
}
.section-heading h2,.setup-copy h2 {
  font-size:2.688rem;
  font-weight:600;
  letter-spacing:-1.9px;
  line-height:1.18;
  margin-top:17px;
}
.section-number {
  color:#8b98af;
  letter-spacing:.3px;
  margin-right:1px;
}
.section-heading>p {
  color:var(--muted);
  font-size:1rem;
  line-height:1.8;
  max-width:385px;
  margin-bottom:4px;
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.feature {
  padding-top:26px;
  border-top:1px solid var(--line);
}
.feature-icon {
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  width:43px;
  height:43px;
  border-radius:9px;
  background:#eaf0ff;
  margin-bottom:23px;
}
.feature-icon svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.feature h3 {
  font-size:1.125rem;
  letter-spacing:-.5px;
  line-height:1.5;
  font-weight:600;
  margin-bottom:11px;
}
.feature p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.8;
}
.feature-label {
  font-size:0.75rem;
  letter-spacing:1px;
  color:#7b889d;
  display:block;
  margin-top:22px;
  font-weight:550;
}
.pipeline-section {
  background:#101c31;
  color:#f0f4fd;
  padding-block:76px 31px;
  position:relative;
  overflow:hidden;
}
.pipeline-section .eyebrow {
  color:#94b5ff;
}
.pipeline-section .section-heading>p {
  color:#a7b5cc;
}
.pipeline-section .section-number {
  color:#7c8fae;
}
.pipeline-section .section-heading {
  margin-bottom:46px;
}
.pipeline {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
}
.step-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px;
}
.step-index {
  font-size:0.875rem;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  border:1px solid #3a4b66;
  border-radius:50%;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  color:#abc4ff;
  flex-shrink:0;
}
.step-connector {
  position:relative;
  text-align:right;
  color:#6c8bbd;
  width:100%;
  font-size:1.438rem;
}
.step-connector:before {
  content:"";
  height:1px;
  position:absolute;
  left:0;
  right:15px;
  top:50%;
  background:#344765;
}
.step-end {
  color:#6c8bbd;
  font-size:1.688rem;
}
.pipeline-step h3 {
  font-size:1.312rem;
  font-weight:550;
  letter-spacing:-.5px;
  margin-bottom:13px;
}
.pipeline-step p {
  font-size:1rem;
  line-height:1.8;
  color:#a7b5cc;
}
.pipeline-chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:23px;
}
.pipeline-chips>span {
  font-size:0.75rem;
  color:#bfcce0;
  border:1px solid #34425a;
  padding:6px 9px;
  border-radius:4px;
}
.pipeline-note {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  border-top:1px solid #2d3a50;
  margin-top:49px;
  padding-top:27px;
  color:#bbc9df;
  font-size:0.8125rem;
  line-height:1.6;
}
.pipeline-note svg {
  width:21px;
  height:21px;
  stroke:#8bacdc;
  stroke-width:1.5;
  fill:none;
  flex-shrink:0;
}
.pipeline-note p>span {
  color:#8e9fb9;
}
.technology-section {
  padding-top:91px;
}
.technology-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.technology-card {
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  padding:30px;
  display:flex;
  flex-direction:column;
}
.runtime-wordmark {
  font-size:2.25rem;
  font-weight:650;
  letter-spacing:-2px;
  height:78px;
  display:flex;
  align-items:flex-start;
}
.dotnet-wordmark {
  color:#6644bf;
}
.java-wordmark {
  color:#dd6a36;
  font-weight:500;
  gap:5px;
  letter-spacing:-1.5px;
}
.java-wordmark>span {
  font-size:0.9375rem;
  transform:rotate(-30deg);
  margin-top:6px;
}
.node-wordmark {
  color:#417a48;
  letter-spacing:-2px;
}
.node-wordmark>span {
  font-size:1.562rem;
  font-weight:450;
  letter-spacing:-1px;
  padding-top:9px;
}
.technology-card h3 {
  font-size:1.188rem;
  font-weight:600;
  letter-spacing:-.5px;
  margin-bottom:13px;
}
.technology-card p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.8;
}
.technology-detail {
  font-size:0.75rem;
  color:#738096;
  border-top:1px solid var(--line);
  padding-top:21px;
  margin-top:25px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.technology-detail>span {
  color:#465675;
}
.deployment-note {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:27px 2px 0;
  font-size:0.875rem;
  color:#758298;
}
.deployment-note>div {
  display:flex;
  gap:27px;
  color:#4b5c77;
  font-weight:500;
}
.setup-section {
  display:grid;
  grid-template-columns:1fr 1.23fr;
  gap:72px;
  padding-top:27px;
  padding-bottom:105px;
  align-items:start;
}
.setup-copy h2 {
  margin-bottom:20px;
}
.setup-copy>p {
  font-size:1rem;
  color:var(--muted);
  line-height:1.8;
  max-width:380px;
}
.setup-steps {
  margin:32px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:23px;
}
.setup-steps li {
  display:flex;
  gap:13px;
  align-items:flex-start;
}
.setup-steps li>span {
  display:grid;
  place-items:center;
  font-size:0.75rem;
  color:#4464a6;
  border:1px solid #ced9ec;
  width:25px;
  height:25px;
  border-radius:50%;
  flex-shrink:0;
}
.setup-steps strong {
  font-size:0.9375rem;
  font-weight:600;
  line-height:1.5;
}
.setup-steps p {
  font-size:0.875rem;
  line-height:1.7;
  color:var(--muted);
  margin-top:4px;
  max-width:330px;
}
.code-card {
  border:1px solid #2d3b53;
  background:var(--dark);
  border-radius:11px;
  color:#d9e3f6;
  overflow:hidden;
  min-width:0;
  margin-top:9px;
  box-shadow:0 15px 30px -20px #26396360;
}
.code-card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 21px;
  font-size:0.75rem;
  color:#a6b5cc;
  border-bottom:1px solid var(--dark-line);
}
.code-card-heading>span:first-child {
  display:flex;
  align-items:center;
  gap:9px;
}
.terminal-mark {
  font-weight:600;
  color:#a7bbdf;
  font-size:1.062rem;
}
.code-toolbar {
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--dark-line);
}
.code-tabs {
  display:flex;
  gap:23px;
}
.code-tabs>button {
  background:transparent;
  padding:17px 0 14px;
  color:#a4b3cc;
  border-bottom:2px solid transparent;
  font-size:0.875rem;
}
.code-tabs>button[aria-selected=true] {
  color:#a8c4ff;
  border-bottom-color:#7196ff;
}
.code-tabs>button:hover {
  color:white;
}
.copy-button {
  display:flex;
  align-items:center;
  gap:7px;
  background:transparent;
  padding:10px 0;
  color:#a7b7d1;
  font-size:0.75rem;
  min-height:44px;
}
.copy-button:hover {
  color:white;
}
.copy-button svg {
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:1.5;
  fill:none;
}
.code-card pre {
  margin:0;
  padding:27px 22px;
  min-height:283px;
  max-width:100%;
  overflow-x:auto;
  tab-size:2;
  scrollbar-color:#455d83 transparent;
}
.code-card code {
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  font-size:0.75rem;
  line-height:1.95;
  color:#bccff7;
}
.code-note {
  font-size:0.75rem;
  line-height:1.7;
  color:#96a9c5;
  border-top:1px solid var(--dark-line);
  padding:17px 22px;
}
.copy-status {
  font-size:0.75rem;
  color:#8de6c5;
  line-height:1.6;
  min-height:20px;
  margin:0 22px 12px;
}
.closing-section {
  background:#295cf4;
  color:white;
}
.closing-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-block:59px;
}
.closing-section .eyebrow {
  font-size:0.75rem;
  color:#d1deff;
  letter-spacing:1.8px;
}
.closing-section h2 {
  font-size:3.25rem;
  font-weight:550;
  letter-spacing:-2px;
  margin-top:14px;
}
.button-light {
  background:white;
  color:var(--blue);
  box-shadow:none;
}
.button-light:hover {
  background:#e7eeff;
}
.site-footer {
  display:flex;
  align-items:center;
  gap:25px;
  padding-block:32px 35px;
}
.site-footer .brand {
  font-size:1.438rem;
}
.site-footer .brand-mark {
  width:28px;
  height:28px;
}
.site-footer p {
  font-size:0.8125rem;
  color:var(--muted);
  flex:1;
}
.site-footer>a:not(.brand) {
  font-size:0.8125rem;
  font-weight:500;
}
.site-footer>a:not(.brand):hover {
  color:var(--blue);
}
.site-footer>a>span[aria-hidden] {
  margin-left:8px;
}
.copyright {
  font-size:0.75rem;
  color:var(--muted);
}
@media(min-width:1500px) {
  .hero {
    padding-top:95px;
    padding-bottom:65px;
  }
}
@media(max-width:1050px) {
  .container {
    width:calc(100% - 48px);
  }
  h1 {
    font-size:3.875rem;
    letter-spacing:-3px;
  }
  .main-nav {
    gap:22px;
  }
  .product-window {
    grid-template-columns:165px minmax(0,1fr);
  }
  .demo-sidebar {
    padding-inline:10px;
  }
  .demo-heading,.demo-panel {
    padding-inline:20px;
  }
  .demo-tabs {
    padding-inline:20px;
    gap:22px;
  }
  .metrics {
    gap:10px;
  }
  .metrics small>span {
    display:none;
  }
  .metrics strong {
    font-size:1.75rem;
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:24px;
  }
  .container {
    width:calc(100% - 36px);
  }
  .header-inner {
    min-height:76px;
  }
  .brand {
    font-size:1.625rem;
  }
  .brand-mark {
    width:31px;
    height:31px;
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    background:transparent;
    width:44px;
    height:44px;
    padding:10px;
  }
  .menu-toggle span {
    display:block;
    width:24px;
    height:2px;
    background:var(--ink);
    transition:transform .2s;
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-4px) rotate(-45deg);
  }
  .main-nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    width:100%;
    padding:12px 24px 24px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 20px #17273e0a;
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .main-nav.is-open {
    display:flex;
  }
  .main-nav .button {
    margin-top:10px;
  }
  .hero {
    padding-top:55px;
    padding-bottom:38px;
  }
  .hero-eyebrow {
    font-size:0.75rem;
    letter-spacing:1.3px;
    margin-bottom:24px;
    gap:8px;
  }
  h1 {
    font-size:clamp(36px,7.8vw,59px);
    line-height:1.17;
    letter-spacing:-2px;
  }
  .hero-description {
    font-size:1rem;
    max-width:430px;
    margin:21px auto 0;
    line-height:1.7;
  }
  .desktop-break {
    display:none;
  }
  .hero-actions {
    gap:23px;
    margin-top:25px;
  }
  .button {
    gap:15px;
    min-height:50px;
    padding:13px 18px;
    font-size:0.875rem;
  }
  .text-button {
    font-size:0.875rem;
    gap:8px;
  }
  .runtime-strip {
    gap:24px;
    margin-top:30px;
    flex-wrap:wrap;
  }
  .runtime-strip>span {
    width:100%;
    padding:0;
    border:0;
    font-size:0.75rem;
    margin-bottom:-12px;
  }
  .runtime-strip b {
    font-size:1rem;
  }
  .preview-caption {
    gap:12px;
    font-size:0.75rem;
  }
  .preview-caption>span:first-child {
    font-size:0.75rem;
    letter-spacing:1px;
  }
  .product-window {
    grid-template-columns:1fr;
    border-radius:9px;
  }
  .demo-sidebar {
    display:none;
  }
  .demo-breadcrumb {
    padding:13px 17px;
    font-size:0.75rem;
  }
  .demo-heading {
    padding:21px 17px 19px;
    align-items:flex-start;
  }
  .service-title h2 {
    font-size:1.125rem;
  }
  .health {
    font-size:0.75rem;
    padding:3px 5px;
    margin-left:0;
  }
  .service-title {
    gap:7px;
  }
  .service-icon {
    width:24px;
    height:24px;
    font-size:1.188rem;
  }
  .time-range {
    font-size:0.75rem;
    padding:7px;
  }
  .demo-heading p {
    font-size:0.75rem;
  }
  .demo-tabs {
    padding-inline:17px;
    gap:24px;
  }
  .demo-tabs button {
    font-size:0.875rem;
  }
  .demo-panel {
    padding:20px 17px 0;
    min-height:435px;
  }
  .metrics {
    grid-template-columns:repeat(2,1fr);
    row-gap:18px;
    margin-bottom:25px;
  }
  .metrics>div:nth-child(2) {
    border:0;
  }
  .metrics strong {
    font-size:1.625rem;
    margin-top:6px;
  }
  .metrics>div>span {
    font-size:0.75rem;
  }
  .metrics small {
    font-size:0.75rem;
    margin-top:3px;
  }
  .metrics small>span {
    display:inline;
  }
  .response-chart {
    height:116px;
    gap:8px;
  }
  .chart-legend {
    font-size:0.75rem;
    gap:5px;
  }
  .chart-times {
    padding-left:46px;
    font-size:0.75rem;
  }
  .demo-bottom {
    font-size:0.75rem;
    align-items:flex-start;
    margin-top:14px;
    padding:13px 0 15px;
  }
  .demo-bottom>span {
    max-width:52%;
    line-height:1.6;
  }
  .inline-link {
    font-size:0.75rem;
    line-height:1.6;
    padding:0;
  }
  .preview-footnote {
    font-size:0.75rem;
  }
  .preview-section {
    padding-bottom:22px;
  }
}
@media(max-width:390px) {
  .container {
    width:calc(100% - 28px);
  }
  h1 {
    font-size:2.125rem;
    letter-spacing:-1.6px;
  }
  .hero-eyebrow {
    font-size:0.75rem;
  }
  .preview-caption>span:first-child {
    letter-spacing:.2px;
  }
  .preview-caption>span:last-child {
    max-width:100px;
    text-align:right;
  }
  .time-range {
    display:none;
  }
  .hero-actions {
    gap:18px;
  }
  .demo-tabs {
    gap:17px;
  }
  .demo-tabs button {
    font-size:0.875rem;
  }
  .chart-legend {
    gap:3px;
  }
  .demo-panel {
    padding-inline:14px;
  }
}
@media(max-width:1050px) {
  .section-heading {
    gap:35px;
  }
  .section-heading h2,.setup-copy h2 {
    font-size:2.375rem;
  }
  .section-heading>p {
    max-width:350px;
  }
  .feature-grid {
    grid-template-columns:repeat(2,1fr);
    gap:36px;
  }
  .pipeline {
    gap:28px;
  }
  .pipeline-step h3 {
    font-size:1.188rem;
  }
  .technology-card {
    padding:24px;
  }
  .technology-card h3 {
    font-size:1.125rem;
  }
  .technology-detail {
    flex-direction:column;
    gap:6px;
  }
  .setup-section {
    gap:35px;
    grid-template-columns:1fr 1.18fr;
  }
  .code-tabs {
    gap:20px;
  }
  .service-map {
    grid-template-columns:1fr 20px 1fr 1.3fr;
    gap:5px;
  }
  .map-node {
    padding:15px 8px;
  }
  .map-branches>div {
    gap:6px;
  }
  .site-footer {
    gap:20px;
  }
  .site-footer p {
    font-size:0.75rem;
  }
}
@media(max-width:760px) {
  .section {
    padding-block:50px 58px;
  }
  .section-heading {
    display:block;
    margin-bottom:32px;
  }
  .section-heading h2,.setup-copy h2 {
    font-size:2.188rem;
    letter-spacing:-1.3px;
    line-height:1.22;
    margin-top:14px;
  }
  .eyebrow {
    font-size:0.75rem;
    letter-spacing:1.3px;
  }
  .section-heading>p {
    font-size:1rem;
    max-width:100%;
    margin-top:22px;
  }
  .feature-grid {
    gap:28px 24px;
  }
  .feature {
    padding-top:23px;
  }
  .feature-icon {
    margin-bottom:19px;
  }
  .feature h3 {
    font-size:1.125rem;
  }
  .feature p {
    font-size:0.9375rem;
  }
  .feature-label {
    font-size:0.75rem;
    letter-spacing:.5px;
    line-height:1.6;
    margin-top:17px;
  }
  .pipeline-section {
    padding-block:52px 29px;
  }
  .pipeline-section .section-heading {
    margin-bottom:34px;
  }
  .pipeline {
    grid-template-columns:1fr;
    gap:30px;
  }
  .pipeline-step {
    border-bottom:1px solid #2d3a50;
    padding-bottom:29px;
  }
  .pipeline-step:last-child {
    border-bottom:0;
    padding-bottom:0;
  }
  .step-top {
    margin-bottom:17px;
  }
  .step-connector {
    max-width:160px;
  }
  .pipeline-step h3 {
    font-size:1.312rem;
  }
  .pipeline-step p {
    font-size:1rem;
    max-width:500px;
  }
  .pipeline-chips {
    margin-top:17px;
  }
  .pipeline-note {
    align-items:flex-start;
    justify-content:flex-start;
    margin-top:29px;
    padding-top:23px;
    font-size:0.875rem;
    gap:10px;
  }
  .pipeline-note p>span {
    display:block;
    margin-top:5px;
  }
  .pipeline-note svg {
    margin-top:3px;
  }
  .technology-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .technology-card {
    padding:26px;
  }
  .runtime-wordmark {
    height:68px;
  }
  .technology-card h3 {
    font-size:1.312rem;
  }
  .technology-card p {
    font-size:1rem;
  }
  .technology-detail {
    flex-direction:row;
    margin-top:23px;
    font-size:0.75rem;
  }
  .deployment-note {
    align-items:flex-start;
    flex-direction:column;
    gap:17px;
    font-size:0.875rem;
    line-height:1.5;
  }
  .deployment-note>div {
    gap:20px;
    flex-wrap:wrap;
  }
  .setup-section {
    padding-top:10px;
    padding-bottom:58px;
    grid-template-columns:1fr;
    gap:30px;
  }
  .setup-copy>p {
    max-width:100%;
    font-size:1rem;
  }
  .setup-steps {
    gap:20px;
    margin-top:25px;
  }
  .setup-steps p {
    max-width:100%;
    font-size:0.875rem;
  }
  .setup-steps strong {
    font-size:1rem;
  }
  .code-card {
    margin-top:0;
  }
  .code-card pre {
    padding:24px 18px;
    min-height:295px;
  }
  .code-card code {
    font-size:0.75rem;
  }
  .code-note {
    padding:17px 18px;
    font-size:0.75rem;
  }
  .closing-inner {
    padding-block:42px;
    align-items:flex-start;
    flex-direction:column;
    gap:27px;
  }
  .closing-section .eyebrow {
    font-size:0.75rem;
    letter-spacing:1px;
  }
  .closing-section h2 {
    font-size:2.75rem;
    letter-spacing:-1.5px;
    margin-top:13px;
  }
  .site-footer {
    flex-wrap:wrap;
    padding-block:30px;
    gap:20px 15px;
    justify-content:space-between;
  }
  .site-footer .brand {
    order:0;
  }
  .site-footer p {
    order:2;
    flex-basis:100%;
    font-size:0.875rem;
  }
  .site-footer>a:not(.brand) {
    order:1;
    font-size:0.75rem;
  }
  .copyright {
    order:3;
    font-size:0.75rem;
  }
  .trace-title {
    align-items:flex-start;
    font-size:0.75rem;
    gap:10px;
    margin-bottom:20px;
  }
  .trace-title>span:last-child {
    font-size:0.75rem;
    text-align:right;
    line-height:1.6;
  }
  .trace-title strong {
    display:block;
    margin-left:0;
  }
  .waterfall-scale,.span-row {
    grid-template-columns:46% 54%;
  }
  .waterfall-scale {
    font-size:0.75rem;
    padding-inline:5px;
  }
  .span-row {
    padding:8px 5px;
    min-height:53px;
  }
  .span-row>span:first-child,.span-row small {
    font-size:0.75rem;
  }
  .span-bar {
    font-size:0.75rem;
    padding-inline:4px;
  }
  .span-detail {
    min-height:155px;
  }
  .span-detail p,.span-detail code {
    font-size:0.75rem;
  }
  .map-heading {
    display:block;
  }
  .map-heading h3 {
    font-size:0.875rem;
    line-height:1.5;
  }
  .map-heading>span {
    display:block;
    font-size:0.75rem;
    margin-top:8px;
  }
  .service-map {
    grid-template-columns:1fr 20px 1.15fr;
    gap:6px;
    padding-block:21px;
    min-height:330px;
  }
  .map-branches {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    padding-top:12px;
  }
  .map-branches>div {
    flex-direction:column;
    gap:8px;
  }
  .map-branches>div>span {
    transform:rotate(90deg);
  }
  .map-branches .map-node {
    width:100%;
    padding:13px 5px;
  }
  .map-node strong {
    font-size:0.75rem;
    overflow-wrap:anywhere;
    line-height:1.4;
  }
  .map-node small {
    font-size:0.75rem;
    line-height:1.6;
  }
  .map-node {
    padding:16px 10px;
  }
  .map-primary,.map-client {
    width:100%;
  }
  .map-client {
    max-width:160px;
    justify-self:end;
  }
  .map-primary {
    max-width:180px;
  }
  .map-connector {
    font-size:1.375rem;
  }
  .map-branches .map-node small {
    margin-top:5px;
  }
  .map-icon {
    margin-bottom:8px;
  }
  .map-branches .map-node strong {
    font-size:0.75rem;
  }
}
@media(max-width:480px) {
  .feature-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .feature p {
    font-size:1rem;
  }
  .feature-label {
    font-size:0.75rem;
  }
  .section-heading h2,.setup-copy h2 {
    font-size:2.062rem;
  }
  .code-toolbar {
    padding-inline:16px;
  }
  .code-tabs {
    gap:22px;
  }
  .copy-button {
    font-size:0.75rem;
  }
  .map-branches {
    gap:5px;
  }
  .technology-detail {
    gap:9px;
  }
  .closing-section .eyebrow {
    font-size:0.75rem;
    letter-spacing:.6px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}