/* Sinfra's accepted rounded components, isolated from the official site shell.
   Source order is preserved; host theme tokens are inherited, never redefined globally. */
#sinfra-showcase {
  --header-height: var(--site-header-height, 88px);
  --chart-primary: var(--ink);
  --chart-secondary: #999;
  --status-ink: var(--muted);
  --sinfra-surface: var(--paper, #fff);
  --sinfra-soft: var(--section-paper, #f6f7f5);
  --sinfra-selected: #eaeaea;
  --sinfra-track: #e4e4e4;
  --sinfra-control-hover: #eeeeec;
  --sinfra-control-strong: #393939;
  color: var(--ink, #181818);
  background: var(--paper, #fff);
  font-family: inherit;
  font-size: 16px;
  line-height: normal;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  width: 100%;
  position: relative;
  isolation: isolate;
}
#sinfra-showcase *, #sinfra-showcase *::before, #sinfra-showcase *::after { box-sizing: border-box; }
#sinfra-showcase :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; color: inherit; }
#sinfra-showcase :is(h1, h2, h3, h4, h5, h6) { line-height: normal; letter-spacing: normal; font-weight: 600; }
#sinfra-showcase :is(button, input, select, textarea) { font-family: inherit; color: inherit; letter-spacing: normal; }
#sinfra-showcase button { line-height: normal; text-transform: none; box-shadow: none; margin: 0; }
#sinfra-showcase button:disabled { cursor: default; }
#sinfra-showcase a { text-decoration: none; color: inherit; }
#sinfra-showcase :is(img, video, canvas) { display: block; max-width: 100%; }
#sinfra-showcase img { height: auto; }
#sinfra-showcase svg { display: block; flex-shrink: 0; }
#sinfra-showcase figcaption { margin-top: 0; line-height: normal; }
#sinfra-showcase .section-heading, #sinfra-showcase .eyebrow { display: block; }
#sinfra-showcase .text-link { padding: 0; border: 0; }
#sinfra-showcase .text-link:hover { border: 0; }
#sinfra-showcase .demo-toolbar { margin: 0; justify-content: flex-start; scroll-margin-top: 0; }
#sinfra-showcase .demo-toolbar > strong { padding: 0; }
#sinfra-showcase .sinfra-section-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
#sinfra-showcase .sinfra-section-meta > :is(.eyebrow, .comparison-eyebrow, .capacity-eyebrow) { margin-bottom: 0; }
#sinfra-showcase .sinfra-status-label { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 8px; font-weight: 650; line-height: 1; letter-spacing: .12em; white-space: nowrap; }
#sinfra-showcase .sinfra-status-label--dark { border-color: #ffffff2d; color: #d3d3d3; }


/* Original component geometry */
#sinfra-showcase .stage[data-page="workflow"] { background: #fbfbfd; }
#sinfra-showcase .workflow-hero { display: grid; grid-template-columns: 580px 1fr; gap: 26px; height: 588px; }
#sinfra-showcase .workflow-copy { padding-top: 34px; position: relative; z-index: 2; }
#sinfra-showcase .workflow-eyebrow { font-size: 17px; font-weight: 600; color: #6e6e73; letter-spacing: .5px; margin-bottom: 23px; }
#sinfra-showcase .workflow-copy h1 { font-size: 91px; line-height: 1.12; font-weight: 650; letter-spacing: -6px; }
#sinfra-showcase .workflow-copy h1 span { color: #006fd6; background: linear-gradient(110deg,#008cd9 3%,#0065d8 45%,#7855cf 94%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#sinfra-showcase .workflow-description { margin-top: 28px; font-size: 23px; line-height: 1.65; color: #78787e; letter-spacing: -.6px; }
#sinfra-showcase .workflow-outcomes { display: flex; gap: 53px; margin-top: 31px; }
#sinfra-showcase .workflow-outcomes strong { display: flex; align-items: baseline; gap: 7px; font-size: 40px; font-weight: 600; letter-spacing: -2px; }
#sinfra-showcase .workflow-outcomes strong span { font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
#sinfra-showcase .workflow-outcomes p { font-size: 13px; color: #86868b; margin-top: 3px; }
#sinfra-showcase .workflow-conversion { display: grid; justify-items: start; gap: 15px; margin-top: 48px; }
#sinfra-showcase .workflow-conversion .workflow-console-link { margin-top: 0; border: 1px solid #d7d7d2; cursor: pointer; }
#sinfra-showcase .workflow-signin-link { display: inline-flex; align-items: center; gap: 8px; padding: 5px 1px; color: var(--muted); font-size: 12px; line-height: 1.45; border-bottom: 1px solid transparent; }
#sinfra-showcase .workflow-signin-link:hover { color: var(--ink); border-color: var(--line); }
#sinfra-showcase .workflow-signin-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
#sinfra-showcase .workflow-current { margin-top: 27px; display: flex; align-items: center; gap: 9px; color: #8a8a90; font-size: 12px; }
#sinfra-showcase .workflow-dot { width: 6px; height: 6px; background: #34a96c; border-radius: 50%; }
#sinfra-showcase .workflow-current-stage { color: #343439; font-weight: 600; margin-left: 4px; }
#sinfra-showcase .workflow-visual { position: relative; height: 100%; }
#sinfra-showcase .workflow-halo { position: absolute; inset: 80px 20px 0; background: radial-gradient(ellipse at 45% 70%,#c9ddf777,transparent 70%); filter: blur(30px); }
#sinfra-showcase .workflow-camera { overflow: hidden; background: #17191c; border-radius: 26px; position: absolute; }
#sinfra-showcase .workflow-camera img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
#sinfra-showcase .workflow-camera-main { top: 0; right: 0; width: 718px; height: 548px; box-shadow: 0 24px 52px -25px #202a384f; }
#sinfra-showcase .workflow-camera figcaption { position: absolute; left: 18px; top: 18px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: white; background: #16191e8c; backdrop-filter: blur(14px); padding: 8px 12px; border-radius: 20px; }
#sinfra-showcase .workflow-camera figcaption > span:last-child { font-size: 8px; letter-spacing: 1px; color: #ffffffb0; margin-left: 6px; }
#sinfra-showcase .workflow-camera-dot { width: 5px; height: 5px; background: #70dca0; border-radius: 50%; }
#sinfra-showcase .workflow-camera-secondary { z-index: 2; width: 268px; height: 218px; left: 4px; bottom: 0; box-shadow: 0 16px 44px -12px #202a3866; outline: 6px solid #fbfbfd; border-radius: 20px; }
#sinfra-showcase .workflow-camera-secondary figcaption { top: auto; left: 12px; bottom: 12px; font-size: 10px; padding: 7px 10px; }
#sinfra-showcase .workflow-camera-secondary figcaption > span:last-child { font-size: 7px; margin-left: 0; }
#sinfra-showcase .workflow-visual-label { position: absolute; left: 308px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; font-size: 12px; color: #7c7c82; }
#sinfra-showcase .workflow-visual-label > span:first-child { color: #3c3c41; font-weight: 600; }
#sinfra-showcase .workflow-path { position: absolute; bottom: 0; width: 100%; height: 94px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 25px; padding: 0; margin: 0; list-style: none; }
#sinfra-showcase .workflow-path li { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 10px 13px 0; border-top: 1px solid #dfe1e6; }
#sinfra-showcase .workflow-step-number { font-size: 13px; font-weight: 500; color: #92969d; }
#sinfra-showcase .workflow-path strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
#sinfra-showcase .workflow-path li div > span { display: block; font-size: 11px; color: #8a8a90; margin-top: 6px; }
#sinfra-showcase .workflow-done { color: #92a5a0; font-size: 13px; margin-left: auto; }
#sinfra-showcase .workflow-path li[aria-current] { border-top: 2px solid #0071e3; }
#sinfra-showcase .workflow-path li[aria-current] strong,
#sinfra-showcase .workflow-path li[aria-current] .workflow-step-number { color: #0071e3; }
#sinfra-showcase .workflow-live { margin-left: auto; background: #0071e3; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 5px #0071e314; }
#sinfra-showcase .training-composition { position: relative;
  width: 100%;
  height: 100%;
  color: #1d1d1f; }
#sinfra-showcase .training-intro { position: absolute;
  top: 18px;
  left: 0; }
#sinfra-showcase .training-title { margin: 0;
  font-size: 80px;
  line-height: 1.13;
  font-weight: 650;
  letter-spacing: -3.4px; }
#sinfra-showcase .training-description { margin: 23px 0 0;
  color: #86868b;
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: -0.4px; }
#sinfra-showcase .training-primary { position: absolute;
  top: 65px;
  right: 6px;
  display: flex;
  gap: 66px; }
#sinfra-showcase .training-metric { display: flex;
  flex-direction: column;
  align-items: flex-start; }
#sinfra-showcase .training-metric-label { font-size: 19px;
  font-weight: 500;
  color: #515156; }
#sinfra-showcase .training-metric-value { margin-top: 7px;
  font-size: 81px;
  line-height: 1.16;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  letter-spacing: -4px; }
#sinfra-showcase .training-metric-value-blue { color: #0071e3; }
#sinfra-showcase .training-percent { margin-left: 3px;
  font-size: 36px;
  letter-spacing: -1px;
  font-weight: 500; }
#sinfra-showcase .training-metric-caption { margin-top: 6px;
  font-size: 15px;
  color: #86868b;
  letter-spacing: 0; }
#sinfra-showcase .training-chart { position: absolute;
  top: 290px;
  left: 0;
  width: 100%;
  margin: 0; }
#sinfra-showcase .training-chart-key { display: flex;
  align-items: center;
  gap: 31px;
  padding-left: 55px;
  margin-bottom: 13px;
  font-size: 16px;
  color: #6e6e73; }
#sinfra-showcase .training-chart-key > span { display: flex;
  align-items: center;
  gap: 10px; }
#sinfra-showcase .training-key-line { width: 24px;
  height: 3px;
  border-radius: 2px; }
#sinfra-showcase .training-key-line-train { background: #0071e3; }
#sinfra-showcase .training-key-line-validation { background: #aaa5de; }
#sinfra-showcase .training-chart-key .training-chart-unit { margin-left: auto;
  margin-right: 48px;
  font-size: 14px;
  color: #86868b; }
#sinfra-showcase .training-chart-svg { display: block;
  width: 100%;
  height: 322px;
  overflow: visible; }
#sinfra-showcase .training-grid line { stroke: #dcdce1;
  stroke-width: 1;
  stroke-opacity: 0.68; }
#sinfra-showcase .training-axis-text { fill: #98989e;
  font-family: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums; }
#sinfra-showcase .training-line { fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round; }
#sinfra-showcase .training-line-train { stroke: #0071e3; }
#sinfra-showcase .training-line-validation { stroke: #aaa5de;
  stroke-width: 3; }
#sinfra-showcase .training-end-halo { fill: #0071e3;
  fill-opacity: 0.09; }
#sinfra-showcase .training-end-dot { fill: #0071e3;
  stroke: #f5f5f7;
  stroke-width: 2; }
#sinfra-showcase .training-resources { position: absolute;
  bottom: 0;
  left: 55px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 90px; }
#sinfra-showcase .training-resource { display: flex;
  flex-direction: column;
  gap: 4px; }
#sinfra-showcase .training-resource-label { color: #86868b;
  font-size: 16px;
  font-weight: 400; }
#sinfra-showcase .training-resource strong { font-size: 34px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums; }
#sinfra-showcase .training-resource strong > span { margin-left: 3px;
  font-size: 20px;
  font-weight: 450;
  letter-spacing: 0; }
#sinfra-showcase .training-resource-throughput strong > span { margin-left: 10px;
  color: #6e6e73;
  font-size: 16px; }
#sinfra-showcase .training-resource-note { margin: 0 0 0 auto;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.4px;
  text-align: right; }
#sinfra-showcase .training-resource-note > span { color: #86868b; }
#sinfra-showcase .comparison-scene { color: #1d1d1f;
  font-variant-numeric: tabular-nums; }
#sinfra-showcase .comparison-intro { position: absolute;
  top: 6px;
  left: 0; }
#sinfra-showcase .comparison-eyebrow { margin: 0 0 20px;
  color: #86868b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.1px; }
#sinfra-showcase .comparison-title { margin: 0;
  font-size: 67px;
  font-weight: 650;
  line-height: 1.17;
  letter-spacing: -2.7px; }
#sinfra-showcase .comparison-title-accent { color: #5972ca;
  background: linear-gradient(100deg, #3479d9 6%, #8272ce 95%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
#sinfra-showcase .comparison-summary { position: absolute;
  top: 74px;
  right: 11px;
  width: 538px; }
#sinfra-showcase .comparison-summary-label { margin: 0 0 21px;
  color: #86868b;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .1px; }
#sinfra-showcase .comparison-gains { display: flex;
  gap: 61px; }
#sinfra-showcase .comparison-gain-value { display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  font-size: 48px;
  font-weight: 590;
  line-height: 1;
  letter-spacing: -1.6px; }
#sinfra-showcase .comparison-gain-unit { font-size: 15px;
  font-weight: 500;
  letter-spacing: 0; }
#sinfra-showcase .comparison-gain-percent { margin-left: -4px;
  font-size: 29px;
  font-weight: 450; }
#sinfra-showcase .comparison-gain-label { margin: 12px 0 0;
  color: #6e6e73;
  font-size: 15px; }
#sinfra-showcase .comparison-cards { position: absolute;
  inset: 245px 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; }
#sinfra-showcase .comparison-card { position: relative;
  box-sizing: border-box;
  height: 404px;
  padding: 31px 34px;
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 32px rgb(40 56 88 / 2%); }
#sinfra-showcase .comparison-card-c { background: radial-gradient(ellipse at 97% 8%, rgb(208 202 255 / 45%), transparent 57%), linear-gradient(145deg, #f2f7ff, #e7effc 64%, #edf0fc); }
#sinfra-showcase .comparison-card-heading { display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px; }
#sinfra-showcase .comparison-run { font-size: 23px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.7px; }
#sinfra-showcase .comparison-tag { display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 27px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap; }
#sinfra-showcase .comparison-tag-baseline { color: #86868b;
  background: #f5f5f7; }
#sinfra-showcase .comparison-tag-best { color: #4966a4;
  background: rgb(255 255 255 / 71%); }
#sinfra-showcase .comparison-check { width: 14px;
  height: 14px; }
#sinfra-showcase .comparison-config { margin: 9px 0 0;
  color: #86868b;
  font-size: 14px;
  letter-spacing: .3px; }
#sinfra-showcase .comparison-metric { margin-top: 34px; }
#sinfra-showcase .comparison-metric-value { margin: 0;
  font-size: 79px;
  font-weight: 580;
  letter-spacing: -4.2px;
  line-height: 1.08; }
#sinfra-showcase .comparison-metric-unit { margin-left: 4px;
  font-size: 39px;
  font-weight: 420;
  letter-spacing: -1px; }
#sinfra-showcase .comparison-metric-value-best { color: #3873ca;
  background: linear-gradient(105deg, #286ecb 12%, #7264c4 88%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
#sinfra-showcase .comparison-metric-label { margin: 11px 0 0;
  color: #6e6e73;
  font-size: 15px; }
#sinfra-showcase .comparison-time { position: absolute;
  left: 34px;
  right: 34px;
  bottom: 29px; }
#sinfra-showcase .comparison-time-caption { display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #86868b;
  font-size: 13px; }
#sinfra-showcase .comparison-time-value { color: #515158;
  font-size: 21px;
  font-weight: 550;
  letter-spacing: -.3px; }
#sinfra-showcase .comparison-time-unit { color: #86868b;
  font-size: 13px;
  font-weight: 400; }
#sinfra-showcase .comparison-bar-track { height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: rgb(73 91 129 / 7%); }
#sinfra-showcase .comparison-bar { height: 100%;
  border-radius: inherit; }
#sinfra-showcase .comparison-bar-a { width: 100%;
  background: #b7bdca; }
#sinfra-showcase .comparison-bar-b { width: 94.7265625%;
  background: #9daed3; }
#sinfra-showcase .comparison-bar-c { width: 91.40625%;
  background: linear-gradient(90deg, #4c91e5, #9285d8); }
#sinfra-showcase .comparison-time-note { margin: 16px 0 0;
  color: #96969c;
  font-size: 12px; }
#sinfra-showcase .comparison-time-note-best { color: #6076a6; }
#sinfra-showcase .comparison-closing { position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  margin: 0;
  color: #86868b;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .2px;
  text-align: center; }
#sinfra-showcase .capacity-scene { color: #f5f5f7; }
#sinfra-showcase .capacity-hero { display: grid;
  grid-template-columns: 575px 1fr;
  height: 421px;
  align-items: center; }
#sinfra-showcase .capacity-intro { position: relative;
  z-index: 2;
  align-self: start;
  padding-top: 20px; }
#sinfra-showcase .capacity-eyebrow { margin: 0 0 26px;
  color: #a0a4ae;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.09em; }
#sinfra-showcase .capacity-intro h2 { margin: 0;
  font-size: 84px;
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.065em; }
#sinfra-showcase .capacity-description { margin: 26px 0 0 3px;
  color: #9296a1;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.015em; }
#sinfra-showcase .capacity-availability { max-width: 48ch; margin: 22px 0 0 3px; color: #c7c7c7; font-size: 10px; font-weight: 550; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; }
#sinfra-showcase .capacity-visual { position: relative;
  height: 420px;
  margin: -13px -23px 0 -35px;
  isolation: isolate; }
#sinfra-showcase .capacity-glow { position: absolute;
  inset: 12px 6% 22px;
  z-index: -1;
  background:
    radial-gradient(ellipse at 34% 49%, rgba(38, 88, 168, 0.2), transparent 52%),
    radial-gradient(ellipse at 68% 58%, rgba(102, 67, 186, 0.14), transparent 53%);
  filter: blur(34px); }
#sinfra-showcase .capacity-circuit { position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 420px; }
#sinfra-showcase .capacity-total { position: absolute;
  top: 86px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  flex-direction: column; }
#sinfra-showcase .capacity-total-number { display: block;
  padding-right: 16px;
  color: #dfe9ff;
  background: linear-gradient(155deg, #ffffff 4%, #e4f0ff 31%, #a7baf0 60%, #c4aef6 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 228px;
  font-weight: 650;
  line-height: 0.95;
  letter-spacing: -0.08em;
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 14px 64px rgba(123, 141, 224, 0.09); }
#sinfra-showcase .capacity-total-caption { display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  color: #b1b8cc;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em; }
#sinfra-showcase .capacity-status-dot { width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b8cfff;
  box-shadow: 0 0 12px rgba(160, 196, 255, 0.7); }
#sinfra-showcase .capacity-visual-note { position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  color: #535a6b;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-align: center; }
#sinfra-showcase .capacity-resources { display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin-top: 38px; }
#sinfra-showcase .capacity-resource { display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0; }
#sinfra-showcase .capacity-resource-use { display: block;
  margin-bottom: 14px;
  color: #7d879b;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em; }
#sinfra-showcase .capacity-resource h3 { margin: 0;
  color: #e7e9ef;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2; }
#sinfra-showcase .capacity-resource-detail p { margin: 12px 0 0;
  color: #7e8491;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.015em; }
#sinfra-showcase .capacity-resource-amount { display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 10px 0 0 12px;
  color: #d5def4;
  font-size: 72px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.065em;
  font-variant-numeric: lining-nums tabular-nums; }
#sinfra-showcase .capacity-resource-amount span { color: #6f7788;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0; }
#sinfra-showcase .capacity-resource-h100 .capacity-resource-amount { color: #c3cdef; }
#sinfra-showcase .capacity-resource-train .capacity-resource-amount { color: #cbbfe6; }
#sinfra-showcase .capacity-queues { position: absolute;
  right: 0;
  bottom: 13px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 42px;
  padding-top: 23px;
  border-top: 1px solid rgba(160, 170, 195, 0.13); }
#sinfra-showcase .capacity-queue-label { margin-right: 9px;
  color: #858d9c;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em; }
#sinfra-showcase .capacity-queue-label > span { color: #576173; }
#sinfra-showcase .capacity-queue { display: flex;
  align-items: baseline;
  gap: 11px;
  color: #5f6879;
  font-size: 11px; }
#sinfra-showcase .capacity-queue b { color: #929bab;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em; }
#sinfra-showcase .capacity-queue-note { margin-left: auto;
  color: #5f6879;
  font-size: 12px;
  letter-spacing: 0.015em; }
#sinfra-showcase { -webkit-font-smoothing:antialiased }
#sinfra-showcase * { box-sizing:border-box }
#sinfra-showcase { margin:0;font-variant-numeric:tabular-nums }
#sinfra-showcase a { color:inherit;text-decoration:none }
#sinfra-showcase button,
#sinfra-showcase input,
#sinfra-showcase select { font:inherit }
#sinfra-showcase button,
#sinfra-showcase a { -webkit-tap-highlight-color:transparent }
#sinfra-showcase button { cursor:pointer }
#sinfra-showcase img { display:block;max-width:100% }
#sinfra-showcase h1,
#sinfra-showcase h2,
#sinfra-showcase h3,
#sinfra-showcase p,
#sinfra-showcase figure { margin:0 }
#sinfra-showcase button,
#sinfra-showcase a,
#sinfra-showcase input,
#sinfra-showcase select { outline-offset:5px }
#sinfra-showcase :focus-visible { outline:3px solid #0071e3 }
#sinfra-showcase ::selection { background:#d5eaff }
#sinfra-showcase button { border:0 }
#sinfra-showcase a,
#sinfra-showcase button { touch-action:manipulation }
#sinfra-showcase .pill { display:inline-flex;gap:15px;align-items:center;justify-content:center;white-space:nowrap;border-radius:30px;padding:14px 24px;font-size:14px;font-weight:500;background:#eeeef1;color:#1d1d1f;transition:background .2s,transform .2s }
#sinfra-showcase .pill:hover { transform:translateY(-1px);background:#e5e5e9 }
#sinfra-showcase .pill.blue { color:#fff;background:#0071e3 }
#sinfra-showcase .pill.blue:hover { background:#0077ed }
#sinfra-showcase .text-link { color:#0071e3;font-size:15px;display:inline-flex;align-items:center;gap:10px }
#sinfra-showcase .text-link span { font-size:24px }
#sinfra-showcase .section { padding:108px 40px;scroll-margin-top:67px }
#sinfra-showcase .section-inner { max-width:1320px;margin:auto;min-width:0 }
#sinfra-showcase .eyebrow { font-size:13px;font-weight:600;letter-spacing:1.7px;color:#86868b;margin-bottom:26px }
#sinfra-showcase .section-heading { font-size:clamp(40px,4.8vw,68px);line-height:1.16;font-weight:650;letter-spacing:-2.5px }
#sinfra-showcase .section-heading span { color:#0071e3 }
#sinfra-showcase .section-lede { font-size:20px;line-height:1.6;color:#86868b;margin-top:22px }
#sinfra-showcase .section-note { font-size:11px;color:#94949a;margin-top:34px;line-height:1.7 }
#sinfra-showcase .hero-actions { display:flex;align-items:center;gap:27px;margin-top:30px }
#sinfra-showcase .scroll-cue { display:flex;justify-content:flex-end;margin-top:40px;color:#96969b;font-size:11px;letter-spacing:.5px }
#sinfra-showcase .scroll-cue a { color:#515156 }
#sinfra-showcase .scroll-cue b { font-size:18px;margin-left:12px;font-weight:400 }
#sinfra-showcase #overview { padding-top:70px;padding-bottom:58px }
#sinfra-showcase .workflow-hero { grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);gap:28px;height:auto;align-items:center }
#sinfra-showcase .workflow-copy { padding-top:0 }
#sinfra-showcase .workflow-copy h1 { font-size:clamp(56px,5.65vw,86px);letter-spacing:-4px }
#sinfra-showcase .workflow-description { font-size:21px;margin-top:23px }
#sinfra-showcase .workflow-eyebrow { font-size:14px }
#sinfra-showcase .workflow-outcomes { margin-top:33px;gap:46px }
#sinfra-showcase .workflow-outcomes strong { font-size:32px }
#sinfra-showcase .workflow-outcomes p { font-size:11px }
#sinfra-showcase .workflow-current { margin-top:21px }
#sinfra-showcase .workflow-visual { height:auto;aspect-ratio:1.23;min-width:0 }
#sinfra-showcase .workflow-camera-main { width:91%;height:88% }
#sinfra-showcase .workflow-camera-secondary { width:36%;height:37%;left:0;bottom:0;outline-width:5px }
#sinfra-showcase .workflow-visual-label { left:41%;bottom:2px;font-size:10px }
#sinfra-showcase .workflow-camera-secondary figcaption>span { display:none }
#sinfra-showcase .workflow-path { position:relative;bottom:auto;height:auto;margin-top:66px;gap:22px }
#sinfra-showcase .workflow-path li { gap:12px;padding:20px 0 }
#sinfra-showcase .workflow-path strong { font-size:14px }
#sinfra-showcase .workflow-path li div>span { font-size:10px }
#sinfra-showcase .workflow-step-number { font-size:11px }
#sinfra-showcase .workflow-done { font-size:10px }
#sinfra-showcase #demo { background:#f5f5f7 }
#sinfra-showcase .demo-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:30px }
#sinfra-showcase .demo-heading .section-lede { font-size:18px }
#sinfra-showcase .demo-window { margin-top:52px;background:#fff;border-radius:24px;box-shadow:0 32px 85px -38px #252e5040;overflow:hidden }
#sinfra-showcase .demo-toolbar { height:58px;padding:0 26px;display:flex;align-items:center;gap:7px;background:#fafafa;border-bottom:1px solid #f0f0f2 }
#sinfra-showcase .window-dot { width:8px;height:8px;background:#d8d8dc;border-radius:50% }
#sinfra-showcase .demo-toolbar>strong { font-size:12px;font-weight:500;margin-left:16px;color:#65656d }
#sinfra-showcase .demo-badge { margin-left:auto;font-size:10px;color:#83838b;background:#eeeff3;padding:6px 10px;border-radius:20px }
#sinfra-showcase .demo-body { display:grid;grid-template-columns:220px 1fr;min-height:410px }
#sinfra-showcase .demo-steps { padding:30px 19px;background:#fafafa;display:flex;flex-direction:column;gap:8px }
#sinfra-showcase .demo-step { display:flex;align-items:center;gap:13px;text-align:left;padding:17px 15px;border-radius:12px;background:none;color:#86868b;font-size:13px }
#sinfra-showcase .demo-step b { font-size:10px;font-weight:500;color:#a1a1a8 }
#sinfra-showcase .demo-step[aria-pressed=true] { background:#eaf2ff;color:#0071e3 }
#sinfra-showcase .demo-step[aria-pressed=true] b { color:inherit }
#sinfra-showcase .demo-stage { padding:40px 44px;min-width:0 }
#sinfra-showcase .demo-stage-top { display:flex;justify-content:space-between;gap:25px;align-items:center }
#sinfra-showcase .demo-stage-top h3 { font-size:22px;letter-spacing:-.6px;font-weight:600 }
#sinfra-showcase .demo-stage-top p { font-size:12px;color:#929299;margin-top:8px;line-height:1.5 }
#sinfra-showcase .demo-stage-top>span { font-size:11px;color:#388560;white-space:nowrap }
#sinfra-showcase .demo-content { margin-top:30px;min-height:226px }
#sinfra-showcase .config-preview { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px }
#sinfra-showcase .config-item { padding:22px;background:#f7f8fa;border-radius:12px;min-width:0 }
#sinfra-showcase .config-item span { font-size:11px;color:#96969b;display:block;margin-bottom:16px }
#sinfra-showcase .config-item strong { font-size:16px;display:block;word-break:break-word;font-weight:550 }
#sinfra-showcase .config-item small { display:block;font-size:11px;color:#86868b;margin-top:8px }
#sinfra-showcase .demo-command { background:#f7f8fa;border-radius:12px;margin-top:16px;padding:19px 22px;font-size:12px;color:#737783;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,monospace }
#sinfra-showcase .demo-command i { font-style:normal;color:#0071e3 }
#sinfra-showcase .demo-bottom { padding:16px 26px;display:flex;gap:15px;align-items:center;border-top:1px solid #f0f0f2 }
#sinfra-showcase .demo-bottom button { background:#1d1d1f;color:white;border-radius:24px;padding:10px 19px;min-width:138px;font-size:12px }
#sinfra-showcase .demo-progress { height:3px;background:#e8e8ed;flex:1;overflow:hidden;border-radius:4px }
#sinfra-showcase .demo-progress span { display:block;height:100%;width:20%;background:#0071e3;transition:width .4s }
#sinfra-showcase .demo-counter { font-size:11px;color:#96969b }
#sinfra-showcase .demo-bottom .demo-mode { font-size:10px;color:#96969b }
#sinfra-showcase .demo-stats { display:flex;gap:55px;align-items:center }
#sinfra-showcase .demo-stats small { font-size:11px;color:#939398;display:block }
#sinfra-showcase .demo-stats strong { font-size:38px;font-weight:550;display:block;margin-top:8px;letter-spacing:-1px }
#sinfra-showcase .demo-line { width:100%;height:120px;margin-top:14px }
#sinfra-showcase .demo-evaluation { display:grid;grid-template-columns:1fr 1fr;gap:14px }
#sinfra-showcase .demo-eval-item { padding:24px;background:#f7f8fa;border-radius:12px }
#sinfra-showcase .demo-eval-item strong { font-size:14px;display:block }
#sinfra-showcase .demo-eval-item p { font-size:12px;color:#83838b;margin-top:14px }
#sinfra-showcase .demo-eval-bar { height:5px;border-radius:4px;background:#e5e7ed;margin-top:20px }
#sinfra-showcase .demo-eval-bar i { height:100%;display:block;background:#0071e3;border-radius:inherit }
#sinfra-showcase .deployment-steps { display:flex;gap:24px;margin-top:25px;color:#777781;font-size:12px }
#sinfra-showcase .deployment-steps span { padding:12px 0 }
#sinfra-showcase .deployment-steps b { color:#2a955f;margin-right:6px }
#sinfra-showcase .demo-camera-pair { display:grid;grid-template-columns:1fr 1fr;gap:16px }
#sinfra-showcase .demo-camera-pair figure { height:224px;border-radius:14px;overflow:hidden;position:relative;background:#222 }
#sinfra-showcase .demo-camera-pair img { width:100%;height:100%;object-fit:cover }
#sinfra-showcase .demo-camera-pair figcaption { position:absolute;bottom:12px;left:12px;padding:6px 10px;color:#fff;background:#0008;border-radius:12px;font-size:10px }
#sinfra-showcase .demo-benefits { display:grid;grid-template-columns:repeat(3,1fr);gap:54px;margin-top:47px }
#sinfra-showcase .demo-benefits strong { font-size:16px;font-weight:600 }
#sinfra-showcase .demo-benefits p { font-size:14px;color:#86868b;line-height:1.8;margin-top:10px }
#sinfra-showcase #training { background:#fff }
#sinfra-showcase .training-composition { display:grid;grid-template-columns:1fr auto;gap:56px 55px;height:auto;align-items:center }
#sinfra-showcase .training-intro,
#sinfra-showcase .training-primary,
#sinfra-showcase .training-chart,
#sinfra-showcase .training-resources { position:static;inset:auto }
#sinfra-showcase .training-title { font-size:clamp(40px,4.7vw,68px);letter-spacing:-2.5px }
#sinfra-showcase .training-description { font-size:18px }
#sinfra-showcase .training-primary { gap:44px;align-self:center }
#sinfra-showcase .training-metric-value { font-size:clamp(46px,5.5vw,77px) }
#sinfra-showcase .training-metric-label { font-size:15px }
#sinfra-showcase .training-metric-caption { font-size:12px }
#sinfra-showcase .training-chart,
#sinfra-showcase .training-resources { grid-column:1/-1 }
#sinfra-showcase .training-chart-key { font-size:13px;padding-left:4%;margin-bottom:24px }
#sinfra-showcase .training-chart-svg { height:auto }
#sinfra-showcase .training-line { vector-effect:non-scaling-stroke;stroke-width:3 }
#sinfra-showcase .training-line-validation { stroke-width:2.5 }
#sinfra-showcase .training-resources { gap:45px;padding:0 4%;justify-content:space-between }
#sinfra-showcase .training-resource-label { font-size:13px }
#sinfra-showcase .training-resource strong { font-size:31px }
#sinfra-showcase .training-resource-note { font-size:16px }
#sinfra-showcase .training-chart-mobile { display:none;width:100%;height:auto }
#sinfra-showcase #comparison { background:#f5f5f7 }
#sinfra-showcase .comparison-scene { display:grid;grid-template-columns:1fr auto;gap:52px;align-items:center }
#sinfra-showcase .comparison-intro,
#sinfra-showcase .comparison-summary,
#sinfra-showcase .comparison-cards,
#sinfra-showcase .comparison-closing { position:static;inset:auto }
#sinfra-showcase .comparison-title { font-size:clamp(40px,4.5vw,66px) }
#sinfra-showcase .comparison-summary { width:auto }
#sinfra-showcase .comparison-gains { gap:42px }
#sinfra-showcase .comparison-cards,
#sinfra-showcase .comparison-closing { grid-column:1/-1 }
#sinfra-showcase .comparison-card { height:auto;min-height:386px;display:flex;flex-direction:column;padding:28px 30px }
#sinfra-showcase .comparison-metric-value { font-size:clamp(52px,5vw,76px) }
#sinfra-showcase .comparison-time { position:static;margin-top:auto;padding-top:30px }
#sinfra-showcase .comparison-closing { font-size:16px }
#sinfra-showcase .comparison-cards { gap:22px }
#sinfra-showcase .comparison-summary-label { font-size:13px }
#sinfra-showcase .comparison-gain-label { font-size:12px }
#sinfra-showcase .comparison-gain-value { font-size:44px }
#sinfra-showcase .comparison-gain-unit { font-size:12px }
#sinfra-showcase #capacity { background:#08090c }
#sinfra-showcase .capacity-hero { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);height:auto;gap:20px }
#sinfra-showcase .capacity-intro { align-self:center;padding-top:0 }
#sinfra-showcase .capacity-intro h2 { font-size:clamp(48px,5.1vw,76px) }
#sinfra-showcase .capacity-description { font-size:19px }
#sinfra-showcase .capacity-visual { height:auto;aspect-ratio:1.6;margin:0;container-type:inline-size }
#sinfra-showcase .capacity-circuit { height:100%;top:0 }
#sinfra-showcase .capacity-total { top:50%;transform:translateY(-50%) }
#sinfra-showcase .capacity-total-number { font-size:clamp(120px,14vw,218px);font-size:31cqw;padding-right:10px }
#sinfra-showcase .capacity-total-caption { font-size:11px;letter-spacing:2px }
#sinfra-showcase .capacity-visual-note { bottom:0;font-size:9px }
#sinfra-showcase .capacity-resources { margin-top:68px;gap:45px }
#sinfra-showcase .capacity-resource { gap:15px }
#sinfra-showcase .capacity-resource h3 { font-size:24px }
#sinfra-showcase .capacity-resource-detail p { font-size:13px }
#sinfra-showcase .capacity-resource-amount { font-size:60px;margin-left:0 }
#sinfra-showcase .capacity-queues { position:static;gap:26px;flex-wrap:wrap;margin-top:64px;padding-top:28px }
#sinfra-showcase .capacity-queue-note { font-size:11px }
#sinfra-showcase .capacity-scene+.section-note { color:#747c8e }
#sinfra-showcase #value { background:#fbfbfd }
#sinfra-showcase .value-top { display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center }
#sinfra-showcase .value-copy .section-lede { font-size:18px;max-width:440px }
#sinfra-showcase .value-proof { display:flex;gap:40px;margin-top:38px }
#sinfra-showcase .value-proof-label { margin-top:32px;color:var(--muted);font-size:8px;font-weight:650;line-height:1.4;letter-spacing:.12em }
#sinfra-showcase .value-proof-label+.value-proof { margin-top:14px }
#sinfra-showcase .value-proof strong { display:block;font-size:48px;font-weight:600;letter-spacing:-2px }
#sinfra-showcase .value-proof strong span { font-size:23px }
#sinfra-showcase .value-proof p { color:#86868b;font-size:12px;margin-top:10px }
#sinfra-showcase .cost-calculator { padding:36px;background:#f2f3f7;border-radius:24px }
#sinfra-showcase .calculator-top { display:flex;align-items:center;justify-content:space-between }
#sinfra-showcase .calculator-top h3 { font-size:18px;letter-spacing:-.5px }
#sinfra-showcase .calculator-top span { font-size:10px;color:#929299 }
#sinfra-showcase .calc-fields { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:27px }
#sinfra-showcase .calc-fields label { font-size:11px;color:#777781;display:block }
#sinfra-showcase .calc-fields input,
#sinfra-showcase .calc-fields select { display:block;width:100%;border:0;background:#fff;color:#343439;border-radius:10px;padding:14px;margin-top:8px;min-width:0;font-size:15px }
#sinfra-showcase .calc-wide { grid-column:1/-1 }
#sinfra-showcase .calc-result { display:flex;align-items:flex-end;justify-content:space-between;margin-top:29px;padding-top:23px;border-top:1px solid #dcdde4 }
#sinfra-showcase .calc-result span { font-size:12px;color:#83838b }
#sinfra-showcase .calc-result output { font-size:32px;letter-spacing:-1px;font-weight:550 }
#sinfra-showcase .calc-explainer { font-size:11px;color:#929299;margin-top:14px;line-height:1.7 }
#sinfra-showcase .experience { margin-top:100px;padding-top:57px;border-top:1px solid #e5e5e9 }
#sinfra-showcase .experience-title { display:flex;justify-content:space-between;align-items:baseline;gap:20px }
#sinfra-showcase .experience-title h3 { font-size:28px;letter-spacing:-1px;font-weight:600 }
#sinfra-showcase .experience-title p { font-size:14px;color:#86868b }
#sinfra-showcase .experience-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:38px }
#sinfra-showcase .experience-item>span { font-size:12px;color:#0071e3 }
#sinfra-showcase .experience-item h4 { font-size:16px;margin:14px 0 10px;font-weight:600 }
#sinfra-showcase .experience-item p { font-size:13px;color:#86868b;line-height:1.8 }
#sinfra-showcase .scroll-reveal { animation:sinfra-reveal .75s both }
@keyframes sinfra-reveal { from{opacity:.3;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }
@media(min-width:1500px) {
#sinfra-showcase #overview { padding-top:100px;padding-bottom:75px }
#sinfra-showcase .section { padding-top:130px;padding-bottom:130px }
}
@media(max-width:1150px) {
#sinfra-showcase .section { padding:88px 32px }
#sinfra-showcase .workflow-description { font-size:18px }
#sinfra-showcase .workflow-copy h1 { font-size:62px }
#sinfra-showcase .workflow-visual { aspect-ratio:1.05 }
#sinfra-showcase .workflow-camera-main { height:83% }
#sinfra-showcase .workflow-camera-secondary { height:32%;width:40% }
#sinfra-showcase .workflow-visual-label { left:46%;bottom:4%;font-size:9px }
#sinfra-showcase .workflow-visual-label>span:last-child { display:none }
#sinfra-showcase .workflow-path { gap:14px }
#sinfra-showcase .workflow-path li { gap:8px }
#sinfra-showcase .workflow-path li div>span { font-size:9px }
#sinfra-showcase .training-composition { grid-template-columns:1fr;gap:38px }
#sinfra-showcase .training-intro { display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:20px }
#sinfra-showcase .training-intro .eyebrow { grid-column:1/-1;margin-bottom:0 }
#sinfra-showcase .training-description { max-width:260px;margin:0 0 5px }
#sinfra-showcase .training-primary { gap:65px }
#sinfra-showcase .training-metric-value { font-size:72px }
#sinfra-showcase .training-resources { gap:30px }
#sinfra-showcase .comparison-scene { gap:45px 25px }
#sinfra-showcase .comparison-title { font-size:53px }
#sinfra-showcase .comparison-gains { gap:25px }
#sinfra-showcase .comparison-gain-value { font-size:38px }
#sinfra-showcase .comparison-gain-unit { font-size:10px }
#sinfra-showcase .comparison-card { padding:26px }
#sinfra-showcase .comparison-metric-value { font-size:60px }
#sinfra-showcase .capacity-resources { gap:28px }
#sinfra-showcase .capacity-resource { flex-direction:column;align-items:flex-start;gap:15px }
#sinfra-showcase .capacity-resource-amount { font-size:65px }
#sinfra-showcase .value-top { gap:48px }
#sinfra-showcase .value-copy .section-heading { font-size:51px }
#sinfra-showcase .demo-stage { padding:32px }
#sinfra-showcase .demo-body { grid-template-columns:190px 1fr }
#sinfra-showcase .config-item { padding:18px }
#sinfra-showcase .demo-benefits { gap:33px }
#sinfra-showcase .experience-grid { gap:28px }
#sinfra-showcase .capacity-total-caption { font-size:10px }
}
@media(max-width:780px) {
#sinfra-showcase .section { padding:73px 24px;scroll-margin-top:97px }
#sinfra-showcase .section-heading { font-size:44px;letter-spacing:-1.8px }
#sinfra-showcase .section-lede { font-size:17px }
#sinfra-showcase .eyebrow { font-size:11px;letter-spacing:1.3px;margin-bottom:21px }
#sinfra-showcase #overview { padding-top:46px;padding-bottom:35px }
#sinfra-showcase .workflow-hero { grid-template-columns:1fr;gap:40px }
#sinfra-showcase .workflow-copy h1 { font-size:clamp(56px,10.5vw,78px);letter-spacing:-3px }
#sinfra-showcase .workflow-eyebrow { font-size:12px;margin-bottom:19px }
#sinfra-showcase .workflow-description { font-size:18px;margin-top:20px }
#sinfra-showcase .hero-actions { margin-top:25px }
#sinfra-showcase .workflow-outcomes { margin-top:30px;gap:52px }
#sinfra-showcase .workflow-current { margin-top:20px }
#sinfra-showcase .workflow-visual { aspect-ratio:1.32;max-width:630px;width:100%;margin:0 auto }
#sinfra-showcase .workflow-camera-main { height:88%;width:91%;border-radius:22px }
#sinfra-showcase .workflow-camera-secondary { height:37%;width:36%;border-radius:15px;outline-width:4px }
#sinfra-showcase .workflow-camera figcaption { top:13px;left:13px;font-size:10px }
#sinfra-showcase .workflow-camera figcaption>span:last-child { font-size:7px }
#sinfra-showcase .workflow-camera-secondary figcaption { top:auto;bottom:8px;left:8px;font-size:8px;padding:5px 8px }
#sinfra-showcase .workflow-visual-label { bottom:2px;left:42%;font-size:10px }
#sinfra-showcase .workflow-path { margin-top:37px;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 16px }
#sinfra-showcase .workflow-path li { padding:17px 0;gap:8px }
#sinfra-showcase .workflow-path strong { font-size:12px }
#sinfra-showcase .workflow-path li div>span { display:none }
#sinfra-showcase .workflow-done { display:none }
#sinfra-showcase .workflow-step-number { font-size:10px }
#sinfra-showcase .workflow-live { width:4px;height:4px;box-shadow:0 0 0 4px #0071e314 }
#sinfra-showcase .scroll-cue { font-size:10px;margin-top:25px }
#sinfra-showcase .demo-heading { display:block }
#sinfra-showcase .demo-heading>.text-link { margin-top:24px }
#sinfra-showcase .demo-heading .section-lede { font-size:16px }
#sinfra-showcase .demo-window { margin-top:32px;border-radius:18px }
#sinfra-showcase .demo-toolbar { padding:0 16px;height:49px }
#sinfra-showcase .demo-toolbar>strong { font-size:10px;margin-left:6px }
#sinfra-showcase .demo-badge { font-size:8px;padding:5px 8px }
#sinfra-showcase .demo-body { display:block;min-height:0 }
#sinfra-showcase .demo-steps { flex-direction:row;padding:12px;gap:5px;overflow:auto }
#sinfra-showcase .demo-step { flex:1;flex-direction:column;gap:6px;white-space:nowrap;padding:10px 8px;font-size:10px;border-radius:9px }
#sinfra-showcase .demo-step b { font-size:9px }
#sinfra-showcase .demo-stage { padding:23px 20px;min-height:348px }
#sinfra-showcase .demo-stage-top { gap:15px;align-items:flex-start }
#sinfra-showcase .demo-stage-top h3 { font-size:19px }
#sinfra-showcase .demo-stage-top p { font-size:10px }
#sinfra-showcase .demo-stage-top>span { font-size:9px;margin-top:6px }
#sinfra-showcase .demo-content { margin-top:22px;min-height:216px }
#sinfra-showcase .config-preview { gap:8px }
#sinfra-showcase .config-item { padding:15px 10px }
#sinfra-showcase .config-item span { font-size:9px;margin-bottom:11px }
#sinfra-showcase .config-item strong { font-size:11px }
#sinfra-showcase .config-item small { font-size:8px }
#sinfra-showcase .demo-command { padding:15px 13px;font-size:10px }
#sinfra-showcase .demo-bottom { padding:13px 16px;gap:10px }
#sinfra-showcase .demo-bottom button { min-width:120px;font-size:11px;padding:10px 14px }
#sinfra-showcase .demo-mode { display:none }
#sinfra-showcase .demo-counter { font-size:10px }
#sinfra-showcase .demo-benefits { grid-template-columns:1fr;gap:24px;margin-top:34px }
#sinfra-showcase .demo-benefits strong { font-size:16px }
#sinfra-showcase .demo-benefits p { font-size:13px;margin-top:6px;max-width:500px }
#sinfra-showcase .demo-stats { gap:30px }
#sinfra-showcase .demo-stats strong { font-size:32px }
#sinfra-showcase .demo-stats small { font-size:9px }
#sinfra-showcase .demo-line { height:132px }
#sinfra-showcase .demo-eval-item { padding:18px 14px }
#sinfra-showcase .demo-eval-item strong { font-size:11px }
#sinfra-showcase .demo-eval-item p { font-size:10px }
#sinfra-showcase .deployment-steps { gap:15px;font-size:9px }
#sinfra-showcase .demo-camera-pair { gap:10px }
#sinfra-showcase .demo-camera-pair figure { height:215px }
#sinfra-showcase .demo-camera-pair figcaption { left:7px;bottom:8px;font-size:8px }
#sinfra-showcase .training-composition { gap:32px }
#sinfra-showcase .training-intro { display:block }
#sinfra-showcase .training-intro .eyebrow { margin-bottom:21px }
#sinfra-showcase .training-title { font-size:44px;letter-spacing:-1.8px }
#sinfra-showcase .training-description { margin-top:20px;max-width:none;font-size:16px }
#sinfra-showcase .training-primary { gap:45px }
#sinfra-showcase .training-metric-value { font-size:58px;letter-spacing:-3px }
#sinfra-showcase .training-percent { font-size:25px }
#sinfra-showcase .training-metric-label { font-size:13px }
#sinfra-showcase .training-metric-caption { font-size:10px }
#sinfra-showcase .training-chart-key { padding-left:0;gap:20px;font-size:11px;margin-bottom:17px }
#sinfra-showcase .training-chart-key .training-chart-unit { margin-right:0;font-size:10px }
#sinfra-showcase .training-key-line { width:16px;height:2px }
#sinfra-showcase .training-chart-svg { display:none }
#sinfra-showcase .training-chart-mobile { display:block }
#sinfra-showcase .training-resources { display:grid;grid-template-columns:1fr 1fr;padding:0;gap:28px }
#sinfra-showcase .training-resource strong { font-size:30px }
#sinfra-showcase .training-resource-label { font-size:11px }
#sinfra-showcase .training-resource strong>span { font-size:16px }
#sinfra-showcase .training-resource-throughput strong>span { display:block;font-size:11px;margin:5px 0 0 }
#sinfra-showcase .training-resource-note { font-size:14px }
#sinfra-showcase .comparison-scene { grid-template-columns:1fr;gap:31px }
#sinfra-showcase .comparison-title { font-size:44px;letter-spacing:-1.8px }
#sinfra-showcase .comparison-eyebrow { font-size:11px;letter-spacing:1.3px }
#sinfra-showcase .comparison-summary { margin-top:5px }
#sinfra-showcase .comparison-summary-label { font-size:12px;margin-bottom:16px }
#sinfra-showcase .comparison-gains { gap:38px }
#sinfra-showcase .comparison-gain-value { font-size:40px }
#sinfra-showcase .comparison-gain-unit { font-size:10px }
#sinfra-showcase .comparison-gain-percent { font-size:25px }
#sinfra-showcase .comparison-cards { grid-template-columns:1fr;gap:17px }
#sinfra-showcase .comparison-card { min-height:300px;padding:27px }
#sinfra-showcase .comparison-metric { margin-top:25px }
#sinfra-showcase .comparison-metric-value { font-size:64px }
#sinfra-showcase .comparison-metric-label { font-size:12px;margin-top:6px }
#sinfra-showcase .comparison-time { padding-top:20px }
#sinfra-showcase .comparison-time-note { font-size:11px;margin-top:13px }
#sinfra-showcase .comparison-closing { font-size:14px }
#sinfra-showcase .capacity-hero { grid-template-columns:1fr;gap:20px }
#sinfra-showcase .capacity-intro h2 { font-size:51px;letter-spacing:-3px }
#sinfra-showcase .capacity-eyebrow { font-size:11px;letter-spacing:1.3px;margin-bottom:23px }
#sinfra-showcase .capacity-description { font-size:17px;margin-top:22px }
#sinfra-showcase .capacity-visual { max-width:560px;width:100%;margin:auto }
#sinfra-showcase .capacity-total-number { font-size:33cqw }
#sinfra-showcase .capacity-total-caption { font-size:9px;margin-top:9px }
#sinfra-showcase .capacity-visual-note { font-size:8px }
#sinfra-showcase .capacity-resources { grid-template-columns:1fr;margin-top:36px;gap:36px }
#sinfra-showcase .capacity-resource { flex-direction:row;align-items:center }
#sinfra-showcase .capacity-resource h3 { font-size:26px }
#sinfra-showcase .capacity-resource-use { font-size:9px;margin-bottom:10px }
#sinfra-showcase .capacity-resource-detail p { font-size:12px;margin-top:9px }
#sinfra-showcase .capacity-resource-amount { font-size:60px }
#sinfra-showcase .capacity-queues { margin-top:41px;gap:20px 25px }
#sinfra-showcase .capacity-queue-label { width:100% }
#sinfra-showcase .capacity-queue { gap:6px;font-size:9px }
#sinfra-showcase .capacity-queue b { font-size:10px }
#sinfra-showcase .capacity-queue-note { width:100%;margin-left:0 }
#sinfra-showcase .value-top { grid-template-columns:1fr;gap:36px }
#sinfra-showcase .value-copy .section-heading { font-size:44px }
#sinfra-showcase .value-copy .section-lede { font-size:16px }
#sinfra-showcase .value-proof { gap:44px;margin-top:30px }
#sinfra-showcase .value-proof strong { font-size:43px }
#sinfra-showcase .cost-calculator { padding:28px 24px;border-radius:20px }
#sinfra-showcase .calc-fields { gap:17px }
#sinfra-showcase .calc-result output { font-size:29px }
#sinfra-showcase .experience { margin-top:61px;padding-top:36px }
#sinfra-showcase .experience-title { display:block }
#sinfra-showcase .experience-title h3 { font-size:27px }
#sinfra-showcase .experience-title p { font-size:13px;margin-top:13px }
#sinfra-showcase .experience-grid { grid-template-columns:1fr 1fr;gap:30px 24px;margin-top:30px }
#sinfra-showcase .experience-item h4 { font-size:15px }
#sinfra-showcase .experience-item p { font-size:12px }
#sinfra-showcase .section-note { margin-top:25px;font-size:10px }
}
@media(max-width:360px) {
#sinfra-showcase .section { padding-left:20px;padding-right:20px }
#sinfra-showcase .workflow-copy h1 { font-size:53px }
#sinfra-showcase .training-metric-value { font-size:48px }
#sinfra-showcase .training-primary { gap:30px }
#sinfra-showcase .comparison-gains { gap:22px }
#sinfra-showcase .comparison-gain-value { font-size:35px }
#sinfra-showcase .demo-stage { padding:22px 14px }
#sinfra-showcase .demo-step { padding:10px 5px;font-size:9px }
#sinfra-showcase .demo-toolbar>strong { font-size:9px }
#sinfra-showcase .demo-badge { font-size:7px }
#sinfra-showcase .cost-calculator { padding:25px 20px }
#sinfra-showcase .capacity-total-caption { font-size:8px }
#sinfra-showcase .workflow-path { gap:2px 12px }
#sinfra-showcase .workflow-path strong { font-size:11px }
#sinfra-showcase .hero-actions { gap:18px }
}
@media(prefers-reduced-motion:reduce) {
#sinfra-showcase *,
#sinfra-showcase *::before,
#sinfra-showcase *::after { animation:none!important;transition:none!important }
}
#sinfra-showcase .section { scroll-margin-top:var(--header-height) }
@media print {
#sinfra-showcase .scroll-cue,
#sinfra-showcase .demo-bottom { display:none }
#sinfra-showcase .section { padding:45px 30px;break-inside:avoid }
#sinfra-showcase { -webkit-print-color-adjust:exact;print-color-adjust:exact }
}

/* language.css */
#sinfra-showcase .calc-result { gap:12px; flex-wrap:wrap; }
#sinfra-showcase .calc-result output { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#sinfra-showcase .section-note { color:#686b74; }
#sinfra-showcase .section-lede,
#sinfra-showcase .demo-benefits p,
#sinfra-showcase .experience-item p { color:#696c75; }
html[lang="en"] #sinfra-showcase .workflow-copy h1 { font-size:clamp(46px,4.7vw,68px); letter-spacing:-2.4px; line-height:1.09; }
html[lang="en"] #sinfra-showcase .workflow-description { font-size:18px; max-width:460px; }
html[lang="en"] #sinfra-showcase .workflow-eyebrow { font-size:12px; letter-spacing:.1px; }
html[lang="en"] #sinfra-showcase .workflow-outcomes { gap:32px; }
html[lang="en"] #sinfra-showcase .workflow-outcomes strong { gap:8px; letter-spacing:-1px; }
html[lang="en"] #sinfra-showcase .workflow-outcomes strong span { letter-spacing:0; font-size:13px; }
html[lang="en"] #sinfra-showcase .workflow-outcomes p { max-width:140px; line-height:1.5; }
html[lang="en"] #sinfra-showcase .workflow-path li { align-items:flex-start; }
html[lang="en"] #sinfra-showcase .workflow-path strong { font-size:13px; }
html[lang="en"] #sinfra-showcase .workflow-path li div>span { line-height:1.5; }
html[lang="en"] #sinfra-showcase .workflow-visual-label { gap:10px; }
html[lang="en"] #sinfra-showcase .section-heading,
html[lang="en"] #sinfra-showcase .training-title,
html[lang="en"] #sinfra-showcase .comparison-title { font-size:clamp(38px,4.2vw,60px); letter-spacing:-1.8px; line-height:1.1; }
html[lang="en"] #sinfra-showcase .section-lede { max-width:650px; }
html[lang="en"] #sinfra-showcase .demo-heading { align-items:center; }
html[lang="en"] #sinfra-showcase .demo-heading>.text-link { flex-shrink:0; }
html[lang="en"] #sinfra-showcase .demo-stage-top { align-items:flex-start; }
html[lang="en"] #sinfra-showcase .demo-stage-top h3 { font-size:24px; letter-spacing:-.5px; }
html[lang="en"] #sinfra-showcase .demo-stage-top p { font-size:13px; }
html[lang="en"] #sinfra-showcase .demo-stage-top>span { margin-top:6px; }
html[lang="en"] #sinfra-showcase .demo-step { gap:10px; }
html[lang="en"] #sinfra-showcase .demo-benefits strong { line-height:1.5; display:block; }
html[lang="en"] #sinfra-showcase .training-primary { gap:30px; }
html[lang="en"] #sinfra-showcase .training-metric-label { font-size:14px; }
html[lang="en"] #sinfra-showcase .training-resource-note { font-size:14px; letter-spacing:0; }
html[lang="en"] #sinfra-showcase .comparison-gain-unit { max-width:65px; line-height:1.2; }
html[lang="en"] #sinfra-showcase .capacity-intro h2 { font-size:clamp(44px,4.6vw,68px); letter-spacing:-2px; }
html[lang="en"] #sinfra-showcase .capacity-resource-detail p { max-width:170px; line-height:1.6; }
html[lang="en"] #sinfra-showcase .capacity-resource-amount span { font-size:11px; }
html[lang="en"] #sinfra-showcase .capacity-total-caption { letter-spacing:1px; }
html[lang="en"] #sinfra-showcase .capacity-queue-label { white-space:normal; }
html[lang="en"] #sinfra-showcase .value-proof p { max-width:155px; line-height:1.6; }
@media(max-width:1200px) {
html[lang="en"] #sinfra-showcase .training-composition { grid-template-columns:1fr; }
html[lang="en"] #sinfra-showcase .training-intro { display:block; }
html[lang="en"] #sinfra-showcase .training-intro .eyebrow { margin-bottom:20px; }
html[lang="en"] #sinfra-showcase .training-description { margin:20px 0 0; max-width:none; }
html[lang="en"] #sinfra-showcase .comparison-scene { grid-template-columns:1fr; gap:36px; }
}
@media(max-width:780px) {
html[lang="en"] #sinfra-showcase .workflow-copy h1 { font-size:clamp(43px,9.5vw,65px); }
html[lang="en"] #sinfra-showcase .workflow-current { gap:6px; flex-wrap:wrap; line-height:1.5; }
html[lang="en"] #sinfra-showcase .workflow-path { grid-template-columns:repeat(3,minmax(0,1fr)); }
html[lang="en"] #sinfra-showcase .workflow-path strong { font-size:11px; line-height:1.45; }
html[lang="en"] #sinfra-showcase .workflow-camera figcaption { font-size:9px; }
html[lang="en"] #sinfra-showcase .workflow-visual-label { font-size:9px; }
html[lang="en"] #sinfra-showcase .workflow-camera-secondary figcaption { font-size:8px; }
html[lang="en"] #sinfra-showcase .scroll-cue { align-items:flex-start; gap:24px; line-height:1.6; }
html[lang="en"] #sinfra-showcase .scroll-cue>a { flex-shrink:0; }
html[lang="en"] #sinfra-showcase .section-heading,
html[lang="en"] #sinfra-showcase .training-title,
html[lang="en"] #sinfra-showcase .comparison-title { font-size:39px; letter-spacing:-1.5px; }
html[lang="en"] #sinfra-showcase .section-lede br { display:none; }
html[lang="en"] #sinfra-showcase .demo-heading>.text-link { margin-top:22px; }
html[lang="en"] #sinfra-showcase .demo-toolbar { height:auto; min-height:55px; flex-wrap:wrap; padding:12px 16px; gap:5px; }
html[lang="en"] #sinfra-showcase .demo-toolbar>strong { margin-left:4px; }
html[lang="en"] #sinfra-showcase .demo-badge { margin-left:auto; font-size:9px; }
html[lang="en"] #sinfra-showcase .demo-steps { justify-content:space-between; }
html[lang="en"] #sinfra-showcase .demo-step { flex:1; min-width:0; white-space:normal; font-size:10px; padding:10px 3px; text-align:center; }
html[lang="en"] #sinfra-showcase .demo-stage-top { flex-wrap:wrap; gap:9px; }
html[lang="en"] #sinfra-showcase .demo-stage-top h3 { font-size:22px; }
html[lang="en"] #sinfra-showcase .demo-stage-top p { font-size:12px; }
html[lang="en"] #sinfra-showcase .config-preview { grid-template-columns:1fr; gap:8px; }
html[lang="en"] #sinfra-showcase .config-item { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; padding:13px; }
html[lang="en"] #sinfra-showcase .config-item span { margin:0; font-size:11px; }
html[lang="en"] #sinfra-showcase .config-item strong { font-size:12px; }
html[lang="en"] #sinfra-showcase .config-item small { grid-column:2; margin:0; font-size:10px; }
html[lang="en"] #sinfra-showcase .demo-bottom { flex-wrap:wrap; }
html[lang="en"] #sinfra-showcase .demo-camera-pair { grid-template-columns:1fr; }
html[lang="en"] #sinfra-showcase .demo-camera-pair figure { height:190px; }
html[lang="en"] #sinfra-showcase .demo-evaluation { grid-template-columns:1fr; }
html[lang="en"] #sinfra-showcase .deployment-steps { flex-wrap:wrap; gap:8px 18px; font-size:11px; }
html[lang="en"] #sinfra-showcase .training-primary { gap:28px; }
html[lang="en"] #sinfra-showcase .training-metric-label { font-size:12px; }
html[lang="en"] #sinfra-showcase .training-metric-value { font-size:54px; }
html[lang="en"] #sinfra-showcase .training-chart-key { gap:15px; font-size:10px; }
html[lang="en"] #sinfra-showcase .training-resource-note { text-align:left; font-size:12px; }
html[lang="en"] #sinfra-showcase .capacity-eyebrow { line-height:1.7; }
html[lang="en"] #sinfra-showcase .capacity-intro h2 { font-size:42px; }
html[lang="en"] #sinfra-showcase .capacity-resource-amount { font-size:54px; }
html[lang="en"] #sinfra-showcase .capacity-resource-detail p { max-width:160px; }
html[lang="en"] #sinfra-showcase .value-proof { gap:20px; }
html[lang="en"] #sinfra-showcase .value-proof p { font-size:11px; }
html[lang="en"] #sinfra-showcase .calculator-top { align-items:flex-start; gap:15px; }
html[lang="en"] #sinfra-showcase .calculator-top span { text-align:right; max-width:70px; }
html[lang="en"] #sinfra-showcase .calc-fields { grid-template-columns:1fr; }
html[lang="en"] #sinfra-showcase .calc-fields label { font-size:12px; }
html[lang="en"] #sinfra-showcase .experience-title h3 { font-size:26px; line-height:1.3; }
html[lang="en"] #sinfra-showcase .experience-grid { gap:25px 20px; }
html[lang="en"] #sinfra-showcase .experience-item h4 { line-height:1.4; }
}
@media(max-width:360px) {
html[lang="en"] #sinfra-showcase .training-metric-value { font-size:46px; }
}

/* official-theme.css */
#sinfra-showcase { background: var(--paper); color: var(--ink); }
#sinfra-showcase ::selection { background: #dedede; color: var(--ink); }
#sinfra-showcase :focus-visible { outline-color: var(--ink); }
#sinfra-showcase #overview,
#sinfra-showcase #training,
#sinfra-showcase #value { background: var(--paper); }
#sinfra-showcase #demo,
#sinfra-showcase #comparison,
#sinfra-showcase #capacity { background: var(--section-paper); }
#sinfra-showcase .section-heading span,
#sinfra-showcase .comparison-title-accent,
#sinfra-showcase .comparison-metric-value-best,
#sinfra-showcase .workflow-copy h1 span,
#sinfra-showcase .capacity-total-number { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
#sinfra-showcase .eyebrow,
#sinfra-showcase .comparison-eyebrow,
#sinfra-showcase .workflow-eyebrow,
#sinfra-showcase .section-lede,
#sinfra-showcase .workflow-description,
#sinfra-showcase .training-description,
#sinfra-showcase .demo-benefits p,
#sinfra-showcase .experience-item p,
#sinfra-showcase .section-note,
#sinfra-showcase .scroll-cue,
#sinfra-showcase .calc-explainer { color: var(--muted); }
#sinfra-showcase .pill { background: #eeeeee; color: var(--ink); }
#sinfra-showcase .pill:hover { background: #e3e3e3; }
#sinfra-showcase .pill.blue { background: var(--ink); color: var(--paper); }
#sinfra-showcase .pill.blue:hover { background: #393939; }
#sinfra-showcase .text-link { color: var(--ink); }
#sinfra-showcase .workflow-halo { background: radial-gradient(ellipse at 45% 70%,#dddddd77,transparent 70%); }
#sinfra-showcase .workflow-camera-main { box-shadow: 0 24px 52px -25px #2424244f; }
#sinfra-showcase .workflow-camera-secondary { outline-color: var(--paper); box-shadow: 0 16px 44px -12px #24242466; }
#sinfra-showcase .workflow-camera figcaption { background: #2020208c; }
#sinfra-showcase .workflow-camera-dot { background: #dddddd; }
#sinfra-showcase .workflow-dot { background: var(--status-ink); }
#sinfra-showcase .workflow-live { background: var(--ink); box-shadow: 0 0 0 5px #18181814; }
#sinfra-showcase .workflow-current,
#sinfra-showcase .workflow-step-number,
#sinfra-showcase .workflow-done,
#sinfra-showcase .workflow-visual-label,
#sinfra-showcase .workflow-path li div>span,
#sinfra-showcase .workflow-outcomes p { color: var(--muted); }
#sinfra-showcase .workflow-current-stage { color: var(--ink); }
#sinfra-showcase .workflow-path li { border-color: var(--line); }
#sinfra-showcase .workflow-path li[aria-current] { border-top-color: var(--ink); }
#sinfra-showcase .workflow-path li[aria-current] strong,
#sinfra-showcase .workflow-path li[aria-current] .workflow-step-number { color: var(--ink); }
#sinfra-showcase .demo-window { background: var(--paper); box-shadow: 0 32px 85px -38px #25252540; }
#sinfra-showcase .demo-toolbar { background: #fafafa; border-color: var(--line); }
#sinfra-showcase .window-dot { background: #d7d7d7; }
#sinfra-showcase .demo-toolbar>strong { color: var(--muted); }
#sinfra-showcase .demo-badge { background: #eeeeee; color: var(--muted); }
#sinfra-showcase .demo-steps { background: #fafafa; }
#sinfra-showcase .demo-step,
#sinfra-showcase .demo-step b { color: var(--muted); }
#sinfra-showcase .demo-step[aria-pressed="true"] { background: #eaeaea; color: var(--ink); }
#sinfra-showcase .demo-step[aria-pressed="true"] b { color: inherit; }
#sinfra-showcase .demo-stage-top p,
html[lang="en"] #sinfra-showcase .demo-stage-top p { color: var(--muted); }
#sinfra-showcase .demo-stage-top>span { color: var(--status-ink); }
#sinfra-showcase .config-item,
#sinfra-showcase .demo-command,
#sinfra-showcase .demo-eval-item { background: var(--section-paper); }
#sinfra-showcase .config-item span,
#sinfra-showcase .config-item small,
#sinfra-showcase .demo-command,
#sinfra-showcase .demo-eval-item p,
#sinfra-showcase .demo-stats small { color: var(--muted); }
#sinfra-showcase .config-item strong,
#sinfra-showcase .demo-command i { color: var(--ink); }
#sinfra-showcase .demo-bottom { border-color: var(--line); }
#sinfra-showcase .demo-bottom button { background: var(--ink); color: var(--paper); }
#sinfra-showcase .demo-progress,
#sinfra-showcase .demo-eval-bar { background: #e4e4e4; }
#sinfra-showcase .demo-progress span,
#sinfra-showcase .demo-eval-bar i { background: var(--ink); }
#sinfra-showcase .demo-counter,
#sinfra-showcase .demo-bottom .demo-mode { color: var(--muted); }
#sinfra-showcase .demo-camera-pair figcaption { background: #20202088; }
#sinfra-showcase .deployment-steps { color: var(--muted); }
#sinfra-showcase .deployment-steps b { color: var(--status-ink); }
#sinfra-showcase .demo-line path:first-child { stroke: var(--chart-primary); }
#sinfra-showcase .demo-line path:last-child { stroke: var(--line); }
#sinfra-showcase .training-metric-value-blue,
#sinfra-showcase .training-metric-value { color: var(--ink); }
#sinfra-showcase .training-metric-label,
#sinfra-showcase .training-metric-caption,
#sinfra-showcase .training-resource-label,
#sinfra-showcase .training-chart-key,
#sinfra-showcase .training-chart-key .training-chart-unit,
#sinfra-showcase .training-resource-note>span { color: var(--muted); }
#sinfra-showcase .training-key-line-train { background: var(--chart-primary); }
#sinfra-showcase .training-key-line-validation { background: var(--chart-secondary); }
#sinfra-showcase .training-line-train { stroke: var(--chart-primary); }
#sinfra-showcase .training-line-validation { stroke: var(--chart-secondary); }
#sinfra-showcase .training-grid line,
#sinfra-showcase .training-grid path { stroke: var(--line); }
#sinfra-showcase .training-axis-text,
#sinfra-showcase .training-chart-mobile g[fill] { fill: var(--muted); }
#sinfra-showcase .training-end-halo { fill: var(--chart-primary); }
#sinfra-showcase .training-end-dot { fill: var(--chart-primary); stroke: var(--paper); }
#sinfra-showcase #training-area stop,
#sinfra-showcase #mobile-area stop { stop-color: var(--chart-primary); }
#sinfra-showcase .comparison-summary-label,
#sinfra-showcase .comparison-gain-label,
#sinfra-showcase .comparison-config,
#sinfra-showcase .comparison-metric-label,
#sinfra-showcase .comparison-time-caption,
#sinfra-showcase .comparison-time-unit,
#sinfra-showcase .comparison-time-note,
#sinfra-showcase .comparison-closing { color: var(--muted); }
#sinfra-showcase .comparison-card { background: var(--paper); box-shadow: 0 12px 32px rgb(40 40 40 / 2%); }
#sinfra-showcase .comparison-card-c { background: #eaeaea; }
#sinfra-showcase .comparison-tag-baseline { background: var(--placeholder); color: var(--muted); }
#sinfra-showcase .comparison-tag-best { color: var(--ink); background: #ffffffb5; }
#sinfra-showcase .comparison-time-note-best,
#sinfra-showcase .comparison-time-value { color: var(--ink); }
#sinfra-showcase .comparison-bar-track { background: #dedede66; }
#sinfra-showcase .comparison-bar-a { background: #b4b4b4; }
#sinfra-showcase .comparison-bar-b { background: #828282; }
#sinfra-showcase .comparison-bar-c { background: var(--ink); }
#sinfra-showcase .capacity-scene,
#sinfra-showcase .capacity-intro h2,
#sinfra-showcase .capacity-resource h3,
#sinfra-showcase .capacity-resource-amount,
#sinfra-showcase .capacity-resource-h100 .capacity-resource-amount,
#sinfra-showcase .capacity-resource-train .capacity-resource-amount { color: var(--ink); }
#sinfra-showcase .capacity-eyebrow,
#sinfra-showcase .capacity-description,
#sinfra-showcase .capacity-total-caption,
#sinfra-showcase .capacity-visual-note,
#sinfra-showcase .capacity-resource-use,
#sinfra-showcase .capacity-resource-detail p,
#sinfra-showcase .capacity-resource-amount span,
#sinfra-showcase .capacity-queue-label,
#sinfra-showcase .capacity-queue-label>span,
#sinfra-showcase .capacity-queue,
#sinfra-showcase .capacity-queue b,
#sinfra-showcase .capacity-queue-note { color: var(--muted); }
#sinfra-showcase .capacity-glow { background: radial-gradient(ellipse at 34% 49%,rgba(153,153,153,.12),transparent 52%),radial-gradient(ellipse at 68% 58%,rgba(153,153,153,.08),transparent 53%); }
#sinfra-showcase .capacity-total-number { text-shadow: 0 14px 64px rgba(124,124,124,.09); }
#sinfra-showcase .capacity-status-dot { background: var(--status-ink); box-shadow: 0 0 12px rgba(153,153,153,.7); }
#sinfra-showcase #capacity-trace stop { stop-color: #8b8b8b; }
#sinfra-showcase #capacity-edge stop { stop-color: #b1b1b1; }
#sinfra-showcase #capacity-die stop { stop-color: #fff; }
#sinfra-showcase .capacity-circuit path[stroke] { stroke: #888888; }
#sinfra-showcase .capacity-circuit g[fill] { fill: #999999; }
#sinfra-showcase .capacity-queues { border-color: var(--line); }
#sinfra-showcase #capacity .section-note { color: var(--muted) !important; }
#sinfra-showcase .value-proof p,
#sinfra-showcase .calculator-top span,
#sinfra-showcase .calc-fields label,
#sinfra-showcase .calc-result span,
#sinfra-showcase .experience-title p { color: var(--muted); }
#sinfra-showcase .cost-calculator { background: var(--section-paper); }
#sinfra-showcase .calc-fields input,
#sinfra-showcase .calc-fields select { background: var(--paper); color: var(--ink); }
#sinfra-showcase .calc-result,
#sinfra-showcase .experience { border-color: var(--line); }
#sinfra-showcase .experience-item>span { color: var(--muted); }
@media(max-width:780px) {
#sinfra-showcase .workflow-live { box-shadow: 0 0 0 4px #18181814; }
}
#sinfra-showcase #capacity { background: #171717; }
#sinfra-showcase .capacity-scene,
#sinfra-showcase .capacity-intro h2,
#sinfra-showcase .capacity-resource h3,
#sinfra-showcase .capacity-resource-amount,
#sinfra-showcase .capacity-resource-h100 .capacity-resource-amount,
#sinfra-showcase .capacity-resource-train .capacity-resource-amount { color: #f5f5f5; }
#sinfra-showcase .capacity-total-number { color: #f5f5f5; }
#sinfra-showcase .capacity-eyebrow,
#sinfra-showcase .capacity-description,
#sinfra-showcase .capacity-total-caption,
#sinfra-showcase .capacity-visual-note,
#sinfra-showcase .capacity-resource-use,
#sinfra-showcase .capacity-resource-detail p,
#sinfra-showcase .capacity-resource-amount span,
#sinfra-showcase .capacity-queue-label,
#sinfra-showcase .capacity-queue-label>span,
#sinfra-showcase .capacity-queue,
#sinfra-showcase .capacity-queue b,
#sinfra-showcase .capacity-queue-note { color: #aaaaaa; }
#sinfra-showcase .capacity-glow { background: radial-gradient(ellipse at 50% 50%,#ffffff0d,transparent 65%); }
#sinfra-showcase .capacity-status-dot { background: #ddd; box-shadow: 0 0 12px #ffffff33; }
#sinfra-showcase .capacity-queues { border-color: #393939; }
#sinfra-showcase #capacity-trace stop { stop-color: #999; }
#sinfra-showcase #capacity-edge stop { stop-color: #666; }
#sinfra-showcase #capacity-die stop { stop-color: #242424; }
#sinfra-showcase .capacity-circuit path[stroke] { stroke: #777; }
#sinfra-showcase .capacity-circuit g[fill] { fill: #999; }
#sinfra-showcase #capacity .section-note { color: #999 !important; }
#sinfra-showcase .workflow-copy h1 span,
#sinfra-showcase .section-heading span,
#sinfra-showcase .comparison-title-accent { color: #707070; }

/* explore-interactions.css */
#sinfra-showcase .chart-series-toggle { position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: opacity .18s ease; }
#sinfra-showcase .chart-series-toggle::before { content: ''; position: absolute; inset: -10px -6px; }
#sinfra-showcase .chart-series-toggle[aria-pressed="false"] { opacity: .4; }
#sinfra-showcase .chart-series-toggle[aria-pressed="false"] > span { text-decoration: line-through; }
#sinfra-showcase .chart-series-toggle:hover { color: var(--ink, #1d1d1f); }
#sinfra-showcase .chart-series-toggle:focus-visible { outline: 2px solid var(--ink, #1d1d1f); outline-offset: 6px; }
#sinfra-showcase .training-chart .training-line,
#sinfra-showcase .training-chart [fill="url(#training-area)"],
#sinfra-showcase .training-chart [fill="url(#mobile-area)"],
#sinfra-showcase .training-chart .training-end-halo,
#sinfra-showcase .training-chart .training-end-dot { transition: opacity .2s ease; }
#sinfra-showcase .training-chart .chart-series-hidden { opacity: 0; }
#sinfra-showcase .comparison-card[data-comparison-run] { background: var(--paper, #fff); transition: background-color .2s ease; }
#sinfra-showcase .comparison-card[data-comparison-run][data-selected="true"] { background: #eaeaea; }
#sinfra-showcase .comparison-select,
#sinfra-showcase .capacity-estimate { position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
#sinfra-showcase .comparison-select { transition: box-shadow .2s ease; }
#sinfra-showcase .comparison-select:hover { box-shadow: inset 0 0 0 1px var(--ink, #1d1d1f); }
#sinfra-showcase .comparison-select[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink, #1d1d1f); }
#sinfra-showcase .comparison-select:focus-visible { outline: 3px solid var(--ink, #1d1d1f); outline-offset: -5px; }
#sinfra-showcase .capacity-resource[data-estimate-gpu] { position: relative; }
#sinfra-showcase .capacity-estimate-label { position: absolute;
  left: 0;
  top: calc(100% + 9px);
  color: #adadad;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  transition: color .18s ease; }
#sinfra-showcase .capacity-estimate:hover .capacity-estimate-label,
#sinfra-showcase .capacity-estimate:focus-visible .capacity-estimate-label { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
#sinfra-showcase .capacity-estimate[aria-pressed="true"] .capacity-estimate-label { color: #fff; }
#sinfra-showcase .capacity-estimate[aria-pressed="true"] .capacity-estimate-label::before { content: '●'; display: inline-block; margin-right: 6px; font-size: 6px; vertical-align: 2px; }
#sinfra-showcase .capacity-estimate:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
#sinfra-showcase .chart-series-toggle,
#sinfra-showcase .training-chart .training-line,
#sinfra-showcase .training-chart [fill="url(#training-area)"],
#sinfra-showcase .training-chart [fill="url(#mobile-area)"],
#sinfra-showcase .training-chart .training-end-halo,
#sinfra-showcase .training-chart .training-end-dot,
#sinfra-showcase .comparison-card[data-comparison-run],
#sinfra-showcase .comparison-select,
#sinfra-showcase .capacity-estimate-label { transition: none; }
}

/* camera-interactions.css */
#sinfra-showcase .workflow-explore { position: absolute; inset: 0; z-index: 1; border-radius: 6px; }
#sinfra-showcase .workflow-path li { transition: background-color .2s, border-color .2s; }
#sinfra-showcase .workflow-path li:hover { border-top-color: var(--ink); background: #00000003; }
#sinfra-showcase .workflow-path li:hover .workflow-done { color: var(--ink); }
#sinfra-showcase .camera-open { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; color: #fff; }
#sinfra-showcase .camera-open:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
#sinfra-showcase .camera-open-label { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; min-height: 32px; padding: 7px 12px; border: 1px solid #ffffff45; border-radius: 999px; background: #151515a8; backdrop-filter: blur(10px); font-size: 11px; font-weight: 500; transition: background .2s; }
#sinfra-showcase .camera-open:hover .camera-open-label { background: #fff; color: #181818; }
#sinfra-showcase .workflow-camera-secondary .camera-open-label { font-size: 9px; padding: 5px 9px; top: 10px; right: 10px; min-height: 25px; }
#sinfra-showcase .camera-viewer-open { overflow: hidden; }
#sinfra-showcase .camera-viewer { position: fixed; inset: 0; width: min(1100px,calc(100% - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 26px; border: 1px solid #383838; border-radius: 24px; background: #181818; color: #f5f5f5; overflow: auto; box-shadow: 0 30px 100px #0005; }
#sinfra-showcase .camera-viewer::backdrop { background: #080808cc; backdrop-filter: blur(12px); }
#sinfra-showcase .camera-viewer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
#sinfra-showcase .camera-viewer-eyebrow { margin-bottom: 7px; color: #aaa; font-size: 10px; letter-spacing: .1em; }
#sinfra-showcase .camera-viewer h2 { font-size: 25px; line-height: 1.4; font-weight: 500; }
#sinfra-showcase .camera-viewer-close { flex: 0 0 40px; width: 40px; height: 40px; background: #292929; border: 1px solid #4a4a4a; border-radius: 50%; color: #fff; font-size: 27px; font-weight: 300; }
#sinfra-showcase .camera-viewer-close:hover { background: #444; }
#sinfra-showcase .camera-viewer-image { display: flex; align-items: center; justify-content: center; height: min(60dvh,620px); background: #101010; border-radius: 14px; overflow: hidden; }
#sinfra-showcase .camera-viewer-image img { width: 100%; height: 100%; object-fit: contain; }
#sinfra-showcase .camera-viewer-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
#sinfra-showcase .camera-viewer-tabs { display: flex; gap: 6px; padding: 4px; border: 1px solid #444; border-radius: 999px; }
#sinfra-showcase .camera-viewer-tabs button { background: transparent; padding: 9px 19px; border-radius: 999px; color: #aaa; font-size: 12px; }
#sinfra-showcase .camera-viewer-tabs button[aria-pressed="true"] { background: #f5f5f5; color: #181818; }
#sinfra-showcase .camera-viewer-counter { font-size: 12px; color: #aaa; font-variant-numeric: tabular-nums; }
#sinfra-showcase #camera-viewer-note { margin-top: 13px; font-size: 11px; color: #999; }
#sinfra-showcase .camera-viewer :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media(max-width:780px) {
#sinfra-showcase .camera-open-label { top: 10px; right: 10px; min-height: 26px; padding: 5px 8px; font-size: 9px; }
#sinfra-showcase .workflow-camera-secondary .camera-open-label { font-size: 8px; padding: 4px 7px; min-height: 22px; top: 7px; right: 7px; }
#sinfra-showcase .camera-viewer { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: 18px; border-radius: 20px; }
#sinfra-showcase .camera-viewer h2 { font-size: 19px; }
#sinfra-showcase .camera-viewer-image { height: min(52dvh,440px); }
#sinfra-showcase .camera-viewer-tabs button { padding: 9px 12px; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
#sinfra-showcase .workflow-path li,
#sinfra-showcase .camera-open-label { transition: none; }
}

/* simulation.css */
#sinfra-showcase #simulation { background: var(--paper, #fff); }
#sinfra-showcase .simulation-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end; }
#sinfra-showcase .simulation-heading .section-lede { margin: 0; max-width: 490px; font-size: 18px; }
#sinfra-showcase .simulation-showcase { margin-top: 46px; border: 1px solid var(--line, #e6e6e6); border-radius: 24px; overflow: hidden; background: #fff; }
#sinfra-showcase .simulation-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--line, #e6e6e6); }
#sinfra-showcase .simulation-toolbar > p { color: var(--muted); font-size: 12px; }
#sinfra-showcase .simulation-scene-label { display: flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 999px; background: #1b1b1b; color: #fff; font-size: 12px; transition: background .2s, color .2s; }
#sinfra-showcase .simulation-scene-label b { font-size: 10px; font-weight: 400; opacity: .65; }
#sinfra-showcase .simulation-body { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(280px,.85fr); }
#sinfra-showcase .simulation-player { min-width: 0; }
#sinfra-showcase .simulation-video-wrap { position: relative; background: #141414; aspect-ratio: 16 / 9; }
#sinfra-showcase .simulation-video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
#sinfra-showcase .simulation-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 10px; padding: 15px 23px; border: 1px solid #ffffff66; border-radius: 999px; background: #181818db; color: #fff; font-size: 13px; box-shadow: 0 8px 30px #0002; backdrop-filter: blur(12px); transition: background .2s; white-space: nowrap; }
#sinfra-showcase .simulation-start:hover { background: #fff; color: #181818; }
#sinfra-showcase .simulation-start[hidden] { display: none; }
#sinfra-showcase .simulation-start-icon { font-size: 11px; }
#sinfra-showcase .simulation-caption { padding: 23px 26px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
#sinfra-showcase .simulation-caption h3 { font-size: 20px; font-weight: 600; margin-bottom: 9px; letter-spacing: -.4px; }
#sinfra-showcase .simulation-caption p { font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 560px; }
#sinfra-showcase .simulation-services { padding: 30px 28px; background: #f6f6f6; border-left: 1px solid var(--line, #e6e6e6); }
#sinfra-showcase .simulation-services-label { color: #888; font-size: 10px; letter-spacing: .11em; margin-bottom: 14px; }
#sinfra-showcase .simulation-services h3 { font-size: 24px; line-height: 1.4; letter-spacing: -.5px; font-weight: 600; margin-bottom: 14px; }
#sinfra-showcase .simulation-services-intro { color: #707070; font-size: 13px; line-height: 1.8; margin-bottom: 25px; }
#sinfra-showcase .simulation-service { border-top: 1px solid #dedede; }
#sinfra-showcase .simulation-service:last-child { border-bottom: 1px solid #dedede; }
#sinfra-showcase .simulation-service summary { display: flex; align-items: center; gap: 12px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 14px; }
#sinfra-showcase .simulation-service summary::-webkit-details-marker { display: none; }
#sinfra-showcase .simulation-service summary > span { color: #999; font-size: 10px; font-variant-numeric: tabular-nums; }
#sinfra-showcase .simulation-service summary > strong { font-weight: 550; }
#sinfra-showcase .simulation-service summary::after { content: '+'; margin-left: auto; font-size: 20px; font-weight: 300; color: #777; }
#sinfra-showcase .simulation-service[open] summary::after { content: '−'; }
#sinfra-showcase .simulation-service p { padding: 0 0 19px 26px; color: #707070; line-height: 1.8; font-size: 12px; }
#sinfra-showcase .simulation-footnote { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; margin-top: 21px; }
#sinfra-showcase .simulation-footnote .section-note { margin: 0; max-width: 810px; }
#sinfra-showcase .simulation-footnote .text-link { flex-shrink: 0; font-size: 13px; }
#sinfra-showcase .simulation-video-error { margin: 0 26px 20px; padding: 12px 16px; border-radius: 12px; background: #f3f3f3; font-size: 12px; line-height: 1.6; }
#sinfra-showcase .simulation-video-error[hidden] { display: none; }
#sinfra-showcase .simulation-video-error a { text-decoration: underline; text-underline-offset: 3px; }
#sinfra-showcase .simulation-demo-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--ink); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
#sinfra-showcase #simulation :focus-visible { outline: 2px solid #181818; outline-offset: 4px; }
#sinfra-showcase #simulation .simulation-start:focus-visible { outline-color: #fff; }
@media(max-width:1100px) {
#sinfra-showcase .simulation-heading { gap: 32px; }
#sinfra-showcase .simulation-body { grid-template-columns: minmax(0,1.6fr) minmax(255px,.9fr); }
#sinfra-showcase .simulation-services { padding: 25px 22px; }
#sinfra-showcase .simulation-services h3 { font-size: 21px; }
#sinfra-showcase .simulation-services-intro { font-size: 12px; margin-bottom: 20px; }
}
@media(max-width:780px) {
#sinfra-showcase .simulation-heading { grid-template-columns: 1fr; gap: 23px; }
#sinfra-showcase .simulation-heading .section-lede { font-size: 16px; }
#sinfra-showcase .simulation-showcase { margin-top: 30px; border-radius: 18px; }
#sinfra-showcase .simulation-toolbar { flex-wrap: wrap; padding: 16px; gap: 12px; }
#sinfra-showcase .simulation-scene-label { justify-content: center; gap: 7px; padding: 11px 9px; font-size: 11px; }
#sinfra-showcase .simulation-body { grid-template-columns: 1fr; }
#sinfra-showcase .simulation-start { padding: 12px 17px; font-size: 11px; }
#sinfra-showcase .simulation-caption { padding: 21px 19px; gap: 12px; }
#sinfra-showcase .simulation-caption h3 { font-size: 18px; }
#sinfra-showcase .simulation-caption p { font-size: 12px; }
#sinfra-showcase .simulation-services { border-left: 0; border-top: 1px solid var(--line, #e6e6e6); padding: 25px 20px; }
#sinfra-showcase .simulation-services-intro { margin-bottom: 20px; }
#sinfra-showcase .simulation-footnote { flex-direction: column; gap: 16px; }
#sinfra-showcase .simulation-video-error { margin: 0 19px 18px; }
html[lang="en"] #sinfra-showcase .simulation-caption { flex-direction: column; }
}
@media(prefers-reduced-motion:reduce) {
#sinfra-showcase .simulation-scene-label,
#sinfra-showcase .simulation-start { transition: none; }
}

/* feature-deck.css */
#sinfra-showcase .product-narrative { padding-top: 30px; padding-bottom: 96px; scroll-margin-top: var(--header-height, 69px); }
#sinfra-showcase .product-narrative-shell { padding: clamp(34px, 4.5vw, 66px); border: 1px solid var(--line, #e3e3df); border-radius: 32px; background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 92%, transparent), color-mix(in srgb, var(--section-paper) 88%, transparent)); box-shadow: 0 28px 80px -58px color-mix(in srgb, var(--ink) 38%, transparent); backdrop-filter: blur(20px) saturate(115%); }
#sinfra-showcase .product-narrative-heading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr); align-items: end; gap: 64px; }
#sinfra-showcase .product-narrative-heading .eyebrow { margin-bottom: 22px; }
#sinfra-showcase .product-narrative-heading .section-heading { font-size: clamp(42px, 4.35vw, 64px); }
#sinfra-showcase .product-narrative-heading .section-lede { margin: 0 0 5px; font-size: 18px; }
#sinfra-showcase .product-zoom { margin-top: 42px; border: 1px solid var(--line, #e3e3df); border-radius: 24px; overflow: hidden; background: color-mix(in srgb, var(--paper) 68%, transparent); }
#sinfra-showcase .product-zoom-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .product-zoom-tab { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; min-width: 0; padding: 22px 24px; border: 0; background: transparent; color: var(--muted); text-align: left; transition: background .2s ease, color .2s ease; }
#sinfra-showcase .product-zoom-tab + .product-zoom-tab { border-left: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .product-zoom-tab::after { content: ''; position: absolute; right: 22px; bottom: -1px; left: 22px; height: 2px; background: transparent; }
#sinfra-showcase .product-zoom-tab > span { grid-row: 1 / 3; align-self: start; padding-top: 5px; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; }
#sinfra-showcase .product-zoom-tab strong { overflow: hidden; color: inherit; font-size: 18px; font-weight: 550; line-height: 1.1; letter-spacing: -.45px; text-overflow: ellipsis; transition: font-size .2s ease, color .2s ease; }
#sinfra-showcase .product-zoom-tab small { margin-top: 7px; color: var(--muted); font-size: 10px; letter-spacing: .25px; }
#sinfra-showcase .product-zoom-tab:hover { background: color-mix(in srgb, var(--section-paper) 70%, transparent); color: var(--ink); }
#sinfra-showcase .product-zoom-tab[aria-selected="true"] { background: color-mix(in srgb, var(--section-paper) 82%, transparent); color: var(--ink); }
#sinfra-showcase .product-zoom-tab[aria-selected="true"]::after { background: var(--ink); }
#sinfra-showcase .product-zoom-tab[aria-selected="true"] strong { font-size: 26px; }
#sinfra-showcase .product-zoom-tab:focus-visible { z-index: 1; outline: 2px solid var(--ink); outline-offset: -4px; }
#sinfra-showcase .product-zoom-detail { min-height: 220px; }
#sinfra-showcase .product-zoom-detail > article { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr); gap: 54px; align-items: end; padding: 36px 40px 40px; animation: product-zoom-in .24s ease-out; }
#sinfra-showcase .product-zoom-detail > article[hidden] { display: none; }
#sinfra-showcase .product-zoom-copy > span { color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 1.3px; }
#sinfra-showcase .product-zoom-copy h3 { max-width: 620px; margin-top: 14px; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.08; letter-spacing: -1.2px; }
#sinfra-showcase .product-zoom-copy p { max-width: 600px; margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.65; }
#sinfra-showcase .product-zoom-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .product-zoom-facts > div { min-width: 0; padding: 16px 14px 0 0; }
#sinfra-showcase .product-zoom-facts > div + div { padding-left: 14px; border-left: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .product-zoom-facts dt { color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: 1px; }
#sinfra-showcase .product-zoom-facts dd { margin: 10px 0 0; font-size: 11px; font-weight: 550; line-height: 1.45; }
@keyframes product-zoom-in { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
#sinfra-showcase .task-planner { margin-top: 22px; border-top: 1px solid var(--line, #e3e3df); border-bottom: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .task-planner-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; min-height: 84px; padding: 18px 0; cursor: pointer; list-style: none; }
#sinfra-showcase .task-planner-summary::-webkit-details-marker { display: none; }
#sinfra-showcase .task-planner-summary-index { color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: 1.3px; }
#sinfra-showcase .task-planner-summary-copy { display: grid; gap: 4px; }
#sinfra-showcase .task-planner-summary-copy b { font-size: 18px; font-weight: 550; letter-spacing: -.35px; }
#sinfra-showcase .task-planner-summary-copy small { color: var(--muted); font-size: 11px; }
#sinfra-showcase .task-planner-summary-action { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 10px; }
#sinfra-showcase .task-planner-summary-action i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line, #e3e3df); border-radius: 50%; color: var(--ink); font-size: 18px; font-style: normal; transition: transform .2s ease; }
#sinfra-showcase .task-planner[open] .task-planner-summary-action i { transform: rotate(45deg); }
#sinfra-showcase .task-planner-summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
#sinfra-showcase .task-planner-body { padding: 34px 0 40px; border-top: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .task-planner-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); align-items: end; gap: 56px; }
#sinfra-showcase .task-planner-heading span,
#sinfra-showcase .task-plan-header span,
#sinfra-showcase .task-plan-decision > span { display: block; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: 1.35px; }
#sinfra-showcase .task-planner-heading h3 { margin-top: 15px; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -1.3px; }
#sinfra-showcase .task-planner-heading > p { color: var(--muted); font-size: 15px; line-height: 1.7; }
#sinfra-showcase .task-planner-grid { display: grid; grid-template-columns: minmax(240px, .62fr) minmax(0, 1.38fr); gap: 18px; margin-top: 28px; }
#sinfra-showcase .task-planner-form,
#sinfra-showcase .task-plan { border: 1px solid var(--line, #e3e3df); border-radius: 22px; background: color-mix(in srgb, var(--paper) 82%, transparent); }
#sinfra-showcase .task-planner-form { display: grid; align-content: start; gap: 15px; padding: 24px; }
#sinfra-showcase .task-planner-form label { display: grid; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
#sinfra-showcase .task-planner-form select { width: 100%; min-height: 46px; padding: 0 42px 0 13px; border: 1px solid var(--line, #e3e3df); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
#sinfra-showcase .task-plan { padding: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--section-paper) 88%, transparent), color-mix(in srgb, var(--paper) 78%, transparent)); }
#sinfra-showcase .task-plan-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#sinfra-showcase .task-plan-header b { padding: 6px 9px; border: 1px solid var(--line, #e3e3df); border-radius: 999px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: 1px; }
#sinfra-showcase .task-plan > h4 { margin-top: 18px; font-size: 25px; line-height: 1.18; letter-spacing: -.7px; }
#sinfra-showcase .task-plan-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line, #e3e3df); border-bottom: 1px solid var(--line, #e3e3df); list-style: none; }
#sinfra-showcase .task-plan-steps li { min-width: 0; padding: 15px 13px 16px 0; }
#sinfra-showcase .task-plan-steps li + li { padding-left: 16px; border-left: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .task-plan-steps span { color: var(--muted); font-size: 9px; letter-spacing: 1px; }
#sinfra-showcase .task-plan-steps p { margin-top: 12px; font-size: 12px; line-height: 1.5; }
#sinfra-showcase .task-plan-compute { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
#sinfra-showcase .task-plan-compute > div { padding: 13px; border-radius: 11px; background: color-mix(in srgb, var(--paper) 74%, transparent); }
#sinfra-showcase .task-plan-compute span { display: block; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: 1.1px; }
#sinfra-showcase .task-plan-compute strong { display: block; margin-top: 10px; font-size: 30px; line-height: 1; letter-spacing: -1px; }
#sinfra-showcase .task-plan-compute small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; }
#sinfra-showcase .task-plan-decision { margin-top: 14px; padding: 13px 15px; border-left: 2px solid var(--ink); background: color-mix(in srgb, var(--paper) 65%, transparent); }
#sinfra-showcase .task-plan-decision strong { display: block; margin-top: 8px; font-size: 12px; line-height: 1.45; }
#sinfra-showcase .task-plan-disclaimer { margin-top: 11px; color: var(--muted); font-size: 9px; line-height: 1.4; }
#sinfra-showcase .task-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
#sinfra-showcase .task-plan-actions button { min-height: 42px; border-radius: 999px; padding: 10px 15px; font-size: 11px; font-weight: 550; cursor: pointer; }
#sinfra-showcase .task-plan-primary { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
#sinfra-showcase .task-plan-primary:hover { opacity: .82; }
#sinfra-showcase .task-plan-secondary { border: 1px solid var(--line); background: transparent; color: var(--ink); }
#sinfra-showcase .task-plan-secondary:hover { background: var(--sinfra-control-hover); }
#sinfra-showcase .task-plan-actions button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
#sinfra-showcase .product-evidence-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 72px; margin-top: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); }
#sinfra-showcase .product-evidence-link > span { color: var(--muted); font-size: 8px; font-weight: 650; letter-spacing: .12em; }
#sinfra-showcase .product-evidence-link > strong { font-size: 15px; font-weight: 550; }
#sinfra-showcase .product-evidence-link > i { font-size: 18px; font-style: normal; transition: transform .18s ease; }
#sinfra-showcase .product-evidence-link:hover > i { transform: translate(2px, -2px); }
#sinfra-showcase .product-evidence-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
#sinfra-showcase .feature-deck { position: relative; scroll-margin-top: var(--header-height, 69px); --feature-slide-offset: 14px; }
#sinfra-showcase .feature-deck[data-direction="previous"] { --feature-slide-offset: -14px; }
#sinfra-showcase .feature-deck > .section { padding-top: 72px; }
#sinfra-showcase .feature-deck-nav { position: sticky; top: var(--header-height, 69px); z-index: 15; background: #fffffff5; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; backdrop-filter: blur(16px); }
#sinfra-showcase .feature-deck-nav-inner { display: flex; align-items: center; gap: 16px; max-width: 1400px; margin: 0 auto; padding: 16px 28px; min-width: 0; }
#sinfra-showcase .feature-deck-tabs { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
#sinfra-showcase .feature-deck-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; border-radius: 999px; padding: 11px 12px; background: transparent; color: #727272; white-space: nowrap; font-size: 12px; line-height: 1.2; transition: color .18s, background .18s; }
#sinfra-showcase .feature-deck-tab-number { font-size: 10px; opacity: .65; }
#sinfra-showcase .feature-deck-tab:hover { background: #f0f0f0; color: #1b1b1b; }
#sinfra-showcase .feature-deck-tab[aria-selected="true"] { background: #1b1b1b; color: #fff; }
#sinfra-showcase .feature-deck-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
#sinfra-showcase .feature-deck-arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #dedede; border-radius: 50%; background: #fff; color: #1b1b1b; font-size: 20px; line-height: 1; transition: background .18s, color .18s, border-color .18s; }
#sinfra-showcase .feature-deck-arrow:hover:not(:disabled) { background: #1b1b1b; border-color: #1b1b1b; color: #fff; }
#sinfra-showcase .feature-deck-arrow:disabled { opacity: .3; cursor: default; }
#sinfra-showcase .feature-deck-counter { font-size: 10px; color: #858585; white-space: nowrap; }
#sinfra-showcase .feature-deck-nav :focus-visible { outline: 2px solid #1b1b1b; outline-offset: 3px; }
#sinfra-showcase .feature-deck-tab:focus-visible { outline-offset: -3px; }
#sinfra-showcase .feature-deck-tab[aria-selected="true"]:focus-visible { outline-color: #fff; }
#sinfra-showcase .feature-deck-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#sinfra-showcase .feature-deck-panel[hidden] { display: none !important; }
#sinfra-showcase .feature-deck-panel:not([hidden]) > .section-inner { animation: sinfra-feature-panel-in .25s ease-out; }
@keyframes sinfra-feature-panel-in { from { opacity: .6; transform: translateX(var(--feature-slide-offset)); } to { opacity: 1; transform: translateX(0); } }
@media(max-width:1150px) {
#sinfra-showcase .feature-deck-nav-inner { padding: 14px 20px; gap: 12px; }
#sinfra-showcase .feature-deck-tab { padding: 10px 11px; }
#sinfra-showcase .feature-deck-controls { gap: 8px; }
#sinfra-showcase .feature-deck-arrow { width: 34px; height: 34px; font-size: 19px; }
}
@media(max-width:780px) {
#sinfra-showcase .product-narrative { padding-top: 20px; padding-bottom: 64px; }
#sinfra-showcase .product-narrative-shell { padding: 28px 22px; border-radius: 24px; }
#sinfra-showcase .product-narrative-heading { grid-template-columns: 1fr; gap: 24px; }
#sinfra-showcase .product-narrative-heading .section-lede { font-size: 16px; }
#sinfra-showcase .product-zoom { margin-top: 30px; border-radius: 18px; }
#sinfra-showcase .product-zoom-tabs { grid-template-columns: 1fr; border-bottom: 0; }
#sinfra-showcase .product-zoom-tab { grid-template-columns: 28px 1fr auto; grid-template-rows: auto; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .product-zoom-tab + .product-zoom-tab { border-left: 0; }
#sinfra-showcase .product-zoom-tab::after { top: 12px; right: auto; bottom: 12px; left: -1px; width: 2px; height: auto; }
#sinfra-showcase .product-zoom-tab > span { grid-row: auto; align-self: center; padding-top: 0; }
#sinfra-showcase .product-zoom-tab strong,
#sinfra-showcase .product-zoom-tab[aria-selected="true"] strong { font-size: 18px; }
#sinfra-showcase .product-zoom-tab small { margin-top: 0; text-align: right; }
#sinfra-showcase .product-zoom-detail { min-height: 0; }
#sinfra-showcase .product-zoom-detail > article { grid-template-columns: 1fr; gap: 28px; padding: 26px 18px 28px; }
#sinfra-showcase .product-zoom-copy h3 { font-size: 27px; }
#sinfra-showcase .product-zoom-facts { grid-template-columns: 1fr; }
#sinfra-showcase .product-zoom-facts > div { display: grid; grid-template-columns: 88px 1fr; align-items: baseline; gap: 12px; padding: 12px 0; }
#sinfra-showcase .product-zoom-facts > div + div { padding-left: 0; border-top: 1px solid var(--line, #e3e3df); border-left: 0; }
#sinfra-showcase .product-zoom-facts dd { margin-top: 0; }
#sinfra-showcase .task-planner { margin-top: 16px; }
#sinfra-showcase .task-planner-summary { grid-template-columns: auto 1fr auto; gap: 12px; min-height: 76px; }
#sinfra-showcase .task-planner-summary-copy small,
#sinfra-showcase .task-planner-summary-action { display: none; }
#sinfra-showcase .task-planner-body { padding: 28px 0 30px; }
#sinfra-showcase .task-planner-heading { grid-template-columns: 1fr; gap: 18px; }
#sinfra-showcase .task-planner-heading > p { font-size: 14px; }
#sinfra-showcase .task-planner-grid { grid-template-columns: 1fr; }
#sinfra-showcase .task-planner-form,
#sinfra-showcase .task-plan { padding: 23px 20px; border-radius: 18px; }
#sinfra-showcase .task-plan-steps { grid-template-columns: 1fr; }
#sinfra-showcase .task-plan-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line, #e3e3df); }
#sinfra-showcase .task-plan-compute strong { font-size: 30px; }
#sinfra-showcase .feature-deck > .section { padding-top: 40px; }
#sinfra-showcase .feature-deck-nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 70px; padding: 12px 16px; gap: 10px; }
#sinfra-showcase .feature-deck-tabs { min-width: 0; flex-basis: auto; flex-wrap: nowrap; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
#sinfra-showcase .feature-deck-tabs::-webkit-scrollbar { display: none; }
#sinfra-showcase .feature-deck-tab { min-height: 44px; padding: 10px 11px; font-size: 11px; gap: 6px; }
#sinfra-showcase .feature-deck-tab-number { font-size: 9px; }
#sinfra-showcase .feature-deck-controls { gap: 6px; }
#sinfra-showcase .feature-deck-arrow { width: 44px; height: 44px; font-size: 18px; }
#sinfra-showcase .feature-deck-counter { display: inline; }
#sinfra-showcase .product-evidence-link { grid-template-columns: 1fr auto; }
#sinfra-showcase .product-evidence-link > span { grid-column: 1 / -1; }
#sinfra-showcase .task-plan-actions { align-items: stretch; flex-direction: column; }
#sinfra-showcase .task-plan-actions button { width: 100%; }
}
@media(max-width:360px) {
#sinfra-showcase .feature-deck-nav-inner { padding-left: 12px; padding-right: 12px; }
}
@media(prefers-reduced-motion:reduce) {
#sinfra-showcase .product-zoom-detail > article,
#sinfra-showcase .feature-deck-panel:not([hidden]) > .section-inner { animation: none; }
#sinfra-showcase .product-zoom-tab,
#sinfra-showcase .product-zoom-tab strong,
#sinfra-showcase .task-planner-summary-action i,
#sinfra-showcase .feature-deck-tab,
#sinfra-showcase .feature-deck-arrow { transition: none; }
#sinfra-showcase .product-evidence-link > i { transition: none; }
}
@media print {
#sinfra-showcase .feature-deck-nav { display: none; }
#sinfra-showcase .feature-deck-panel[hidden] { display: block !important; }
}

/* hero-media.css */
#sinfra-showcase .workflow-camera-main { z-index: 1; }
#sinfra-showcase .workflow-camera-main figcaption b { font-size: inherit; font-weight: 500; }
#sinfra-showcase .workflow-camera-main img { object-position: center; }
#sinfra-showcase .workflow-camera-secondary { background: #e9e8e4; }
#sinfra-showcase .workflow-camera-secondary canvas,
#sinfra-showcase .workflow-camera-secondary .hero-inline-simulation { display: block; width: 100%; height: 100%; }
#sinfra-showcase .workflow-camera-secondary .hero-inline-simulation { object-fit: cover; }
#sinfra-showcase .workflow-camera-secondary > [hidden] { display: none !important; }
#sinfra-showcase .workflow-visual-label.hero-story { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px; bottom: -4px; }
#sinfra-showcase .hero-task-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
#sinfra-showcase .hero-task-tabs button { padding: 5px 11px; border: 1px solid #deded9; border-radius: 99px; background: transparent; color: #757570; font: inherit; font-size: 10px; line-height: 1.35; cursor: pointer; transition: color .18s, background .18s; }
#sinfra-showcase .hero-task-tabs button:hover { color: #181818; border-color: #999; }
#sinfra-showcase .hero-task-tabs button[aria-pressed="true"] { color: #fff; border-color: #252525; background: #252525; }
#sinfra-showcase .hero-task-tabs button:focus-visible,
#sinfra-showcase .hero-mock-toggle:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
#sinfra-showcase .hero-mock-toggle { position: absolute; bottom: 12px; right: 10px; z-index: 4; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #ffffff70; border-radius: 50%; background: #202020a6; color: #fff; font-size: 10px; cursor: pointer; backdrop-filter: blur(10px); }
#sinfra-showcase .hero-media-viewer .hero-viewer-tasks { margin-bottom: 15px; }
#sinfra-showcase .hero-media-viewer .hero-task-tabs button { color: #b7b7b7; border-color: #4b4b4b; padding: 7px 14px; font-size: 12px; }
#sinfra-showcase .hero-media-viewer .hero-task-tabs button[aria-pressed="true"] { color: #181818; border-color: #f5f5f5; background: #f5f5f5; }
#sinfra-showcase .hero-media-stage { position: relative; height: min(50dvh, 530px); }
#sinfra-showcase .hero-media-stage video,
#sinfra-showcase .hero-media-stage canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
#sinfra-showcase .hero-media-stage canvas { background: #e9e8e4; }
#sinfra-showcase .hero-media-stage [hidden] { display: none !important; }
#sinfra-showcase .hero-mock-badge { position: absolute; top: 16px; left: 16px; padding: 8px 12px; border-radius: 99px; background: #222c; color: #fff; font-size: 11px; letter-spacing: .025em; }
#sinfra-showcase .hero-viewer-mock-toggle { position: absolute; right: 16px; bottom: 16px; padding: 9px 14px; background: #222e; color: #fff; border: 1px solid #ffffff50; border-radius: 99px; font-size: 12px; cursor: pointer; }
#sinfra-showcase .hero-viewer-note { margin-top: 13px; color: #aaa; font-size: 11px; line-height: 1.6; }
#sinfra-showcase .hero-media-error { margin-top: 10px; color: #eee; font-size: 12px; }
@media (max-width: 1150px) and (min-width: 781px) {
#sinfra-showcase .workflow-visual-label.hero-story { left: 45%; bottom: 0; }
#sinfra-showcase .workflow-camera-main figcaption > span { display: none; }
#sinfra-showcase .hero-task-tabs button { padding: 5px 9px; }
}
@media (max-width: 780px) {
#sinfra-showcase .workflow-visual { margin-bottom: 45px; }
#sinfra-showcase .workflow-visual-label.hero-story { left: 0; right: 0; top: calc(100% + 17px); bottom: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
#sinfra-showcase .hero-task-tabs { gap: 4px; }
#sinfra-showcase .hero-task-tabs button { padding: 6px 9px; font-size: 10px; }
#sinfra-showcase .workflow-camera-main figcaption > span { display: none; }
#sinfra-showcase .workflow-camera-secondary figcaption { max-width: calc(100% - 16px); white-space: nowrap; padding: 5px 7px; font-size: 8px; }
#sinfra-showcase .hero-mock-toggle { bottom: auto; top: 8px; left: 8px; right: auto; width: 22px; height: 22px; font-size: 9px; }
#sinfra-showcase .hero-media-viewer .camera-viewer-footer { flex-wrap: wrap; gap: 12px; }
#sinfra-showcase .hero-media-viewer .camera-viewer-counter { font-size: 10px; }
#sinfra-showcase .hero-media-stage { height: min(44dvh, 380px); }
#sinfra-showcase .hero-mock-badge { font-size: 9px; top: 10px; left: 10px; }
#sinfra-showcase .hero-viewer-mock-toggle { font-size: 10px; bottom: 10px; right: 10px; }
html[lang="en"] #sinfra-showcase .workflow-visual-label.hero-story { font-size: 9px; }
html[lang="en"] #sinfra-showcase .hero-story .hero-task-tabs button { font-size: 9px; padding: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
#sinfra-showcase .hero-task-tabs button { transition: none; }
}
#sinfra-showcase #demo-content[hidden],
#sinfra-showcase #demo-sim2real[hidden] { display: none !important; }
#sinfra-showcase .demo-window { scroll-margin-top: calc(var(--header-height, 69px) + 85px); }
#sinfra-showcase #demo-sim2real { margin-top: 26px; }
#sinfra-showcase #demo-sim2real .eval-sim2real { width: 100%; max-width: 730px; aspect-ratio: 1.48; height: auto; margin: 0 auto 22px; }
#sinfra-showcase #demo-sim2real .simulation-demo-link { margin: 24px 0 0; }
@media (max-width: 780px) {
#sinfra-showcase #demo-sim2real { margin-top: 22px; }
#sinfra-showcase #demo-sim2real .eval-sim2real { aspect-ratio: 1.32; margin-bottom: 58px; }
#sinfra-showcase #demo-sim2real .hero-story { flex-direction: column; align-items: flex-start; gap: 7px; }
#sinfra-showcase #demo-sim2real .workflow-camera-main figcaption { left: 9px; top: 9px; font-size: 9px; padding: 6px 9px; }
#sinfra-showcase #demo-sim2real .workflow-camera-secondary figcaption { font-size: 7px; left: 5px; bottom: 6px; padding: 5px; max-width: calc(100% - 10px); }
#sinfra-showcase #demo-sim2real .workflow-camera-secondary .camera-open-label { right: 5px; top: 5px; font-size: 7px; padding: 4px 5px; }
#sinfra-showcase #demo-sim2real .hero-mock-toggle { left: 5px; top: 5px; width: 18px; height: 18px; font-size: 8px; }
}
#sinfra-showcase .hero-task-name { color: #777; font-size: 11px; letter-spacing: .02em; }

/* hero-lowcode.css */
#sinfra-showcase .vla-workflow { width: 100%; min-width: 0; overflow: hidden; color: #252525;
  border: 1px solid #e3e3e1; border-radius: 26px; background: #fff;
  box-shadow: 0 20px 55px -30px #1616162e; text-align: left;
  font-family: inherit; isolation: isolate; }
#sinfra-showcase .vla-workflow *,
#sinfra-showcase .vla-workflow *::before,
#sinfra-showcase .vla-workflow *::after { box-sizing: border-box; }
#sinfra-showcase .vla-workflow button,
#sinfra-showcase .vla-workflow textarea,
#sinfra-showcase .vla-workflow input { font: inherit; color: inherit; }
#sinfra-showcase .vla-workflow button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#sinfra-showcase .vla-workflow button:focus-visible,
#sinfra-showcase .vla-workflow a:focus-visible,
#sinfra-showcase .vla-workflow textarea:focus-visible,
#sinfra-showcase .vla-workflow input:focus-visible,
#sinfra-showcase .vla-panel:focus-visible { outline: 2px solid #343434; outline-offset: 4px; }
#sinfra-showcase .vla-workflow [hidden] { display: none !important; }
#sinfra-showcase .vla-header { display: flex; align-items: center; gap: 12px; padding: 24px 27px 22px; }
#sinfra-showcase .vla-eyebrow { margin: 0 0 5px; color: #888; font-size: 8px; line-height: 1; letter-spacing: 1.6px; }
#sinfra-showcase .vla-header h2 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.5px; margin: 0; }
#sinfra-showcase .vla-demo-badge { flex-shrink: 0; margin-left: auto; border: 1px solid #e6e6e4; border-radius: 30px; padding: 6px 9px; font-size: 9px; letter-spacing: .5px; color: #777; white-space: nowrap; }
#sinfra-showcase .vla-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 0 26px; padding: 0 0 18px; border-bottom: 1px solid #e9e9e6; }
#sinfra-showcase .vla-tabs button { display: flex; align-items: center; gap: 6px; position: relative; border: 0; padding: 8px 5px; background: transparent; font-size: 11px; color: #8a8a87; text-align: left; white-space: nowrap; border-radius: 8px; }
#sinfra-showcase .vla-tabs button::after { content: ''; position: absolute; height: 1px; width: 10px; right: -6px; top: 50%; background: #dfdfdc; }
#sinfra-showcase .vla-tabs button:last-child::after { display: none; }
#sinfra-showcase .vla-step-dot { display: grid; place-items: center; flex: 0 0 auto; width: 21px; height: 21px; border: 1px solid #e0e0dc; color: #999; border-radius: 50%; font-size: 9px; font-variant-numeric: tabular-nums; background: white; }
#sinfra-showcase .vla-tabs button:hover { background: #f5f5f3; color: #222; }
#sinfra-showcase .vla-tabs button[aria-selected="true"] { color: #202020; font-weight: 600; }
#sinfra-showcase .vla-tabs button[aria-selected="true"] .vla-step-dot { background: #252525; border-color: #252525; color: #fff; }
#sinfra-showcase .vla-tabs button.is-complete .vla-step-dot { background: #eee; color: #444; border-color: #e4e4e0; }
#sinfra-showcase .vla-content { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; padding: 22px 27px 0; }
#sinfra-showcase .vla-stage-intro { display: grid; grid-area: 1 / 1; min-width: 0; margin-bottom: 20px; }
#sinfra-showcase .vla-stage-intro > div { grid-area: 1 / 1; min-width: 0; }
#sinfra-showcase .vla-stage-intro > .vla-intro-reserve { visibility: hidden; pointer-events: none; user-select: none; }
#sinfra-showcase .vla-stage-kicker { display: flex; justify-content: space-between; gap: 20px; margin: 0 0 9px; font-size: 9px; color: #8d8d87; letter-spacing: .4px; }
#sinfra-showcase .vla-stage-kicker span:last-child { font-variant-numeric: tabular-nums; }
#sinfra-showcase .vla-stage-intro h3 { margin: 0; font-size: clamp(17px,1.65vw,22px); line-height: 1.45; font-weight: 550; letter-spacing: -.6px; }
#sinfra-showcase .vla-stage-intro h3 + p { margin: 7px 0 0; color: #85857f; font-size: 11px; line-height: 1.65; }
#sinfra-showcase .vla-panel { grid-area: 2 / 1; min-width: 0; min-height: 248px; outline: none; }
#sinfra-showcase .vla-workflow .vla-panel[hidden] { display: block !important; visibility: hidden; pointer-events: none; user-select: none; }
#sinfra-showcase .vla-loss-top { display: flex; justify-content: space-between; align-items: flex-start; }
#sinfra-showcase .vla-loss-top > div > span { font-size: 10px; color: #828279; }
#sinfra-showcase .vla-loss-top strong { display: block; font-size: 35px; line-height: 1.25; letter-spacing: -1.5px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 5px; }
#sinfra-showcase .vla-loss-status { display: grid; justify-items: end; gap: 10px; padding-top: 2px; }
#sinfra-showcase .vla-loss-status .vla-sample-tag { border: 1px solid #e4e4de; border-radius: 30px; padding: 4px 7px; font-size: 8px; color: #9b9b91; }
#sinfra-showcase .vla-loss-status > span:last-child { font-size: 10px; color: #6e6e63; }
#sinfra-showcase .vla-loss-chart { display: block; width: 100%; height: 164px; overflow: visible; margin-top: 9px; }
#sinfra-showcase .vla-chart-grid path { fill: none; stroke: #e9e9e5; stroke-dasharray: 3 4; stroke-width: 1; }
#sinfra-showcase .vla-chart-labels { font-family: inherit; font-size: 9px; fill: #aaa99e; }
#sinfra-showcase .vla-progress-text { display: flex; justify-content: space-between; gap: 10px; color: #8e8e83; font-size: 9px; margin: 8px 0; font-variant-numeric: tabular-nums; }
#sinfra-showcase .vla-training-track { height: 3px; background: #e9e9e3; border-radius: 3px; overflow: hidden; }
#sinfra-showcase .vla-training-track > span { display: block; height: 100%; width: 0; background: #54544d; }
#sinfra-showcase .vla-preview { position: relative; height: 237px; border-radius: 14px; overflow: hidden; background: #edede7; }
#sinfra-showcase .vla-preview canvas,
#sinfra-showcase .vla-preview video { display: block; width: 100%; height: 100%; }
#sinfra-showcase .vla-preview video { object-fit: cover; background: #181818; }
#sinfra-showcase .vla-preview-label { position: absolute; left: 13px; top: 12px; padding: 6px 9px; color: #666b60; background: #ffffffe6; border-radius: 30px; font-size: 8px; letter-spacing: .4px; pointer-events: none; }
#sinfra-showcase .vla-sim-play { position: absolute; display: grid; place-items: center; right: 12px; bottom: 12px; width: 31px; height: 31px; border-radius: 50%; border: 0; color: #55594d !important; background: #fff; box-shadow: 0 1px 7px #1111110d; }
#sinfra-showcase .vla-sim-play svg,
#sinfra-showcase .vla-play-all svg { width: 14px; height: 14px; }
#sinfra-showcase .vla-preview-caption { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-top: 10px; color: #8b8b80; font-size: 9px; line-height: 1.5; }
#sinfra-showcase .vla-preview-caption a { color: #525247; text-decoration: none; border-bottom: 1px solid #c5c5bc; padding-bottom: 2px; font-size: 9px; }
#sinfra-showcase .vla-real-note { color: #97978c; font-size: 9px; line-height: 1.6; margin-top: 7px; }
#sinfra-showcase .vla-footer { padding: 22px 27px 16px; }
#sinfra-showcase .vla-controls { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 15px; align-items: center; min-height: 44px; }
#sinfra-showcase .vla-play-all { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #73736b !important; padding: 9px 0; font-size: 11px !important; white-space: nowrap; }
#sinfra-showcase .vla-play-all:hover { color: #222 !important; }
#sinfra-showcase .vla-step-controls { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; width: 220px; min-width: 0; min-height: 44px; }
#sinfra-showcase .vla-back { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; font-size: 14px !important; color: #5e5e54 !important; border: 1px solid #e7e7e0; border-radius: 50%; background: white; }
#sinfra-showcase .vla-back:disabled { opacity: .35; cursor: default; }
#sinfra-showcase .vla-next { width: 100%; min-height: 44px; padding: 10px 15px; background: #242424; border: 1px solid #242424; border-radius: 30px; color: #fff !important; font-size: 11px !important; line-height: 1.35; white-space: normal; }
#sinfra-showcase .vla-next:hover { background: #444; }
#sinfra-showcase .vla-disclaimer { padding-top: 15px; margin: 15px 0 0; border-top: 1px solid #eeeeea; font-size: 8px; color: #aaa99f; line-height: 1.5; }
#sinfra-showcase .vla-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 781px) {
#sinfra-showcase .vla-header { padding-top: 18px; padding-bottom: 16px; }
#sinfra-showcase .vla-tabs { padding-bottom: 13px; }
#sinfra-showcase .vla-content { padding-top: 17px; }
#sinfra-showcase .vla-stage-intro { margin-bottom: 15px; }
#sinfra-showcase .vla-footer { padding-top: 17px; padding-bottom: 12px; }
#sinfra-showcase .vla-disclaimer { padding-top: 10px; margin-top: 10px; }
}
@media (min-width: 781px) and (max-width: 1150px) {
#sinfra-showcase .vla-header { padding: 20px; gap: 9px; }
#sinfra-showcase .vla-header h2 { font-size: 16px; }
#sinfra-showcase .vla-demo-badge { font-size: 7px; padding: 5px 7px; }
#sinfra-showcase .vla-tabs { margin-inline: 20px; gap: 1px; }
#sinfra-showcase .vla-tabs button { gap: 4px; font-size: 9px; padding-inline: 2px; }
#sinfra-showcase .vla-tabs button::after { width: 5px; right: -2px; }
#sinfra-showcase .vla-content { padding-inline: 20px; }
#sinfra-showcase .vla-footer { padding-inline: 20px; }
#sinfra-showcase .vla-next { padding: 10px; font-size: 10px !important; }
#sinfra-showcase .vla-play-all { font-size: 10px !important; }
}
@media (max-width: 780px) {
#sinfra-showcase .vla-workflow { border-radius: 22px; max-width: 630px; margin-inline: auto; }
#sinfra-showcase .vla-header { padding: 21px 18px 20px; gap: 10px; }
#sinfra-showcase .vla-header h2 { font-size: 16px; }
#sinfra-showcase .vla-eyebrow { font-size: 7px; letter-spacing: 1.1px; }
#sinfra-showcase .vla-demo-badge { font-size: 7px; padding: 5px 7px; letter-spacing: 0; }
#sinfra-showcase .vla-tabs { margin-inline: 18px; gap: 2px; padding-bottom: 15px; }
#sinfra-showcase .vla-tabs button { display: flex; flex-direction: column; gap: 7px; font-size: 10px; padding: 4px 1px; }
#sinfra-showcase .vla-tabs button::after { top: 14px; width: calc(100% - 33px); right: calc(-50% + 15px); }
#sinfra-showcase .vla-step-dot { width: 22px; height: 22px; position: relative; z-index: 1; }
#sinfra-showcase .vla-content { padding: 18px 18px 0; }
#sinfra-showcase .vla-stage-intro { margin-bottom: 17px; }
#sinfra-showcase .vla-stage-intro h3 { font-size: 17px; letter-spacing: -.6px; }
#sinfra-showcase .vla-stage-intro h3 + p { font-size: 10px; min-height: 32px; }
#sinfra-showcase .vla-panel { min-height: 290px; }
#sinfra-showcase .vla-loss-chart { height: 168px; margin-top: 20px; }
#sinfra-showcase .vla-progress-text { margin-top: 17px; font-size: 8px; }
#sinfra-showcase .vla-preview { height: 236px; }
#sinfra-showcase .vla-preview-caption { font-size: 8px; }
#sinfra-showcase .vla-preview-caption a { font-size: 8px; }
#sinfra-showcase .vla-real-note { font-size: 8px; }
#sinfra-showcase .vla-footer { padding: 19px 18px 15px; }
#sinfra-showcase .vla-controls { gap: 8px; }
#sinfra-showcase .vla-play-all { font-size: 10px !important; gap: 3px; }
#sinfra-showcase .vla-next { font-size: 10px !important; padding: 10px 12px; }
#sinfra-showcase .vla-back { width: 29px; height: 29px; }
#sinfra-showcase .vla-step-controls { grid-template-columns: 29px minmax(0, 1fr); gap: 6px; }
#sinfra-showcase .vla-disclaimer { font-size: 7px; padding-top: 12px; margin-top: 12px; }
}
@media (max-width: 380px) {
#sinfra-showcase .vla-demo-badge { display: none; }
#sinfra-showcase .vla-header,
#sinfra-showcase .vla-footer { padding-inline: 14px; }
#sinfra-showcase .vla-content { padding-inline: 14px; }
#sinfra-showcase .vla-tabs { margin-inline: 14px; }
#sinfra-showcase .vla-next { padding-inline: 8px; font-size: 9px !important; }
#sinfra-showcase .vla-play-all { font-size: 9px !important; }
#sinfra-showcase .vla-back { width: 26px; height: 26px; }
#sinfra-showcase .vla-step-controls { grid-template-columns: 26px minmax(0, 1fr); }
}
#sinfra-showcase .vla-prompt-form { margin-top: 7px; }
#sinfra-showcase .vla-prompt-form > label:not(.vla-sr-only) { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 500; color: #77776f; }
#sinfra-showcase .vla-prompt-form textarea { display: block; width: 100%; height: 100px; min-height: 100px; max-height: 100px; resize: none; padding: 16px 18px; border: 1px solid #dcdcd6; border-radius: 14px; background: #fafaf8; color: #292927; font-family: inherit; font-size: 20px; line-height: 1.6; outline-offset: 3px; }
#sinfra-showcase .vla-prompt-form textarea::placeholder { color: #a2a298; }
#sinfra-showcase .vla-prompt-form textarea[aria-invalid="true"] { border-color: #9a665d; }
#sinfra-showcase .vla-parameters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 16px; }
#sinfra-showcase .vla-parameter { display: block; min-width: 0; margin: 0; }
#sinfra-showcase .vla-parameter > span { display: block; margin-bottom: 6px; color: #72726c; font-size: 10px; line-height: 1.4; }
#sinfra-showcase .vla-parameter input { display: block; width: 100%; min-width: 0; height: 36px; padding: 8px 11px; border: 1px solid #dcdcd6; border-radius: 9px; background: #f7f7f5; color: #292927; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; opacity: 1; }
#sinfra-showcase .vla-prompt-error { min-height: 1.5em; margin: 8px 0 0; color: #8a4c40; font-size: 11px; line-height: 1.5; }
#sinfra-showcase .vla-workflow .vla-prompt-error[hidden] { display: block !important; visibility: hidden; }
#sinfra-showcase .vla-active-prompt { display: flex; align-items: flex-start; gap: 10px; height: 52px; margin: 0 0 16px; padding: 10px 12px; border-radius: 10px; background: #f7f7f4; color: #77776f; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
#sinfra-showcase .vla-active-prompt > span { flex: 0 0 auto; max-width: 38%; }
#sinfra-showcase .vla-active-prompt strong { display: block; flex: 1; min-width: 0; height: 3.2em; overflow: auto; white-space: pre-wrap; scrollbar-width: thin; font-weight: 500; color: #3f3f3b; }
#sinfra-showcase .vla-workflow .vla-play-all[hidden] { display: inline-flex !important; visibility: hidden; pointer-events: none; }
#sinfra-showcase .vla-workflow .vla-back[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
@media (max-width: 780px) {
#sinfra-showcase .vla-prompt-form textarea { height: 96px; min-height: 96px; max-height: 96px; padding: 14px 16px; font-size: 18px; }
#sinfra-showcase .vla-prompt-form > label:not(.vla-sr-only) { font-size: 10px; }
#sinfra-showcase .vla-parameters { gap: 11px 12px; margin-top: 14px; }
#sinfra-showcase .vla-parameter input { font-size: 13px; }
#sinfra-showcase .vla-active-prompt { font-size: 9px; }
}
@media (max-width: 1150px) {
#sinfra-showcase .vla-controls { grid-template-columns: minmax(0, 1fr); grid-template-rows: 30px 44px; gap: 6px; }
#sinfra-showcase .vla-play-all { grid-area: 1 / 1; justify-self: start; height: 30px; padding-block: 5px; }
#sinfra-showcase .vla-step-controls { grid-area: 2 / 1; justify-self: end; width: min(100%, 220px); }
}
@media (max-width: 780px) {
#sinfra-showcase .workflow-hero { grid-template-columns: minmax(0, 1fr); }
#sinfra-showcase .workflow-copy { min-width: 0; }
}
@media (max-width: 380px) {
#sinfra-showcase .hero-actions { flex-wrap: wrap; }
}

/* capacity-visuals.css */
#sinfra-showcase .capacity-visual { overflow: hidden; background: #171717; }
#sinfra-showcase .capacity-rack-image { position: absolute; top: -8%; left: 4%; width: 114%; height: auto;
  object-fit: contain;
  filter: grayscale(1); mix-blend-mode: screen; opacity: .8; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 85%, transparent); }
#sinfra-showcase .capacity-rack-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #171717 0%, #171717a6 25%, #17171722 56%, transparent 82%), linear-gradient(0deg, #171717 1%, transparent 23%, transparent 94%, #171717); }
#sinfra-showcase .capacity-total { left: 3%; right: auto; top: 54%; z-index: 1; align-items: flex-start; }
#sinfra-showcase .capacity-total-number { font-size: 29cqw; text-shadow: 0 4px 32px #0009; }
#sinfra-showcase .capacity-total-caption { margin-left: 8px; color: #dedede; text-shadow: 0 2px 10px #111; }
#sinfra-showcase .capacity-visual-note { z-index: 1; text-align: left; left: 4%; color: #8d8d8d; }
#sinfra-showcase .capacity-resource-h100 { isolation: isolate; position: relative; }
#sinfra-showcase .capacity-h100-image { position: absolute; z-index: -1; width: 108%; height: 330%;
  top: -112%; right: -7%; object-fit: contain;
  filter: grayscale(1); mix-blend-mode: screen; opacity: .48; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 75%, transparent);
  transition: opacity .25s, transform .35s; }
#sinfra-showcase .capacity-resource-h100 .capacity-resource-detail,
#sinfra-showcase .capacity-resource-h100 .capacity-resource-amount { text-shadow: 0 2px 16px #171717, 0 1px 4px #171717; }
#sinfra-showcase .capacity-resource-h100:hover .capacity-h100-image,
#sinfra-showcase .capacity-resource-h100:focus-within .capacity-h100-image { opacity: .64; transform: translateY(-3px); }
@media (max-width: 1150px) and (min-width: 781px) {
#sinfra-showcase .capacity-h100-image { width: 128%; height: 200%; top: -45%; right: -22%; }
}
@media (max-width: 780px) {
#sinfra-showcase .capacity-visual { aspect-ratio: 1.4; }
#sinfra-showcase .capacity-total-number { font-size: 31cqw; }
#sinfra-showcase .capacity-total-caption { margin-left: 5px; font-size: 9px; letter-spacing: 1px; }
#sinfra-showcase .capacity-rack-image { opacity: .9; }
#sinfra-showcase .capacity-visual-note { font-size: 8px; }
#sinfra-showcase .capacity-resource-h100 { margin-block: 16px; }
#sinfra-showcase .capacity-h100-image { width: 98%; height: 320%; top: -102%; right: -2%; }
}
@media (prefers-reduced-motion: reduce) {
#sinfra-showcase .capacity-h100-image { transition: none; }
#sinfra-showcase .capacity-resource-h100:hover .capacity-h100-image,
#sinfra-showcase .capacity-resource-h100:focus-within .capacity-h100-image { transform: none; }
}

/* Integrate with the official shell's theme without changing accepted card geometry. */
#sinfra-showcase {
  color-scheme: inherit;
  --header-height: var(--site-header-height, 88px);
  --chart-primary: var(--ink);
  --chart-secondary: #999;
  --status-ink: var(--muted);
}
:root[data-theme="dark"] #sinfra-showcase {
  --sinfra-selected: #2c302b;
  --sinfra-track: #383c36;
  --sinfra-control-hover: #30342f;
  --sinfra-control-strong: #d5d8d1;
  --chart-secondary: #8a9087;
}
#sinfra-showcase .training-composition,
#sinfra-showcase .comparison-scene,
#sinfra-showcase .workflow-visual-label > span:first-child { color: var(--ink); }
#sinfra-showcase .workflow-copy h1 span,
#sinfra-showcase .section-heading span,
#sinfra-showcase .comparison-title-accent { color: var(--muted); }
#sinfra-showcase .training-resource-throughput strong > span,
#sinfra-showcase .scroll-cue a { color: var(--muted); }
#sinfra-showcase .workflow-path li:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
#sinfra-showcase .workflow-live { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 8%, transparent); }
#sinfra-showcase .workflow-halo { background: radial-gradient(ellipse at 45% 70%, color-mix(in srgb, var(--ink) 12%, transparent), transparent 70%); }
#sinfra-showcase .pill { background: var(--sinfra-control-hover); }
#sinfra-showcase .pill:hover { background: var(--sinfra-selected); }
#sinfra-showcase .pill.blue:hover { background: var(--sinfra-control-strong); }
#sinfra-showcase .demo-toolbar,
#sinfra-showcase .demo-steps { background: var(--section-paper); }
#sinfra-showcase .window-dot { background: var(--sinfra-track); }
#sinfra-showcase .demo-badge { background: var(--sinfra-control-hover); }
#sinfra-showcase .demo-step[aria-pressed="true"] { background: var(--sinfra-selected); }
#sinfra-showcase .demo-progress,
#sinfra-showcase .demo-eval-bar { background: var(--sinfra-track); }
#sinfra-showcase .comparison-card-c,
#sinfra-showcase .comparison-card[data-comparison-run][data-selected="true"] { background: var(--sinfra-selected); }
#sinfra-showcase .comparison-tag-best { background: color-mix(in srgb, var(--paper) 72%, transparent); }
#sinfra-showcase .comparison-bar-track { background: var(--sinfra-track); }
#sinfra-showcase .feature-deck-nav { background: color-mix(in srgb, var(--paper) 96%, transparent); border-color: var(--line); }
#sinfra-showcase .feature-deck-tab { color: var(--muted); }
#sinfra-showcase .feature-deck-tab:hover { background: var(--sinfra-control-hover); color: var(--ink); }
#sinfra-showcase .feature-deck-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
#sinfra-showcase .feature-deck-arrow { background: var(--paper); color: var(--ink); border-color: var(--line); }
#sinfra-showcase .feature-deck-arrow:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#sinfra-showcase .feature-deck-counter { color: var(--muted); }
#sinfra-showcase .feature-deck-nav :focus-visible { outline-color: var(--ink); }
#sinfra-showcase .feature-deck-tab[aria-selected="true"]:focus-visible { outline-color: var(--paper); }
#sinfra-showcase .hero-story .hero-task-tabs button { color: var(--muted); border-color: var(--line); }
#sinfra-showcase .hero-story .hero-task-tabs button:hover { color: var(--ink); border-color: var(--muted); }
#sinfra-showcase .hero-story .hero-task-tabs button[aria-pressed="true"] { color: var(--paper); border-color: var(--ink); background: var(--ink); }
#sinfra-showcase .hero-task-name { color: var(--muted); }
#sinfra-showcase .simulation-showcase { background: var(--paper); }
#sinfra-showcase .simulation-scene-label { background: var(--ink); color: var(--paper); }
#sinfra-showcase .simulation-services { background: var(--section-paper); }
#sinfra-showcase .simulation-service,
#sinfra-showcase .simulation-service:last-child { border-color: var(--line); }
#sinfra-showcase .simulation-services-label,
#sinfra-showcase .simulation-services-intro,
#sinfra-showcase .simulation-service p,
#sinfra-showcase .simulation-service summary > span,
#sinfra-showcase .simulation-service summary::after { color: var(--muted); }
#sinfra-showcase .simulation-video-error { background: var(--section-paper); color: var(--ink); }
#sinfra-showcase #simulation :focus-visible { outline-color: var(--ink); }
#sinfra-showcase #simulation .simulation-start:focus-visible { outline-color: #fff; }
#sinfra-showcase .vla-workflow { background: var(--paper); color: var(--ink); border-color: var(--line); }
#sinfra-showcase .vla-workflow :is(button, a, textarea, input):focus-visible,
#sinfra-showcase .vla-panel:focus-visible { outline-color: var(--ink); }
#sinfra-showcase .vla-eyebrow,
#sinfra-showcase .vla-demo-badge,
#sinfra-showcase .vla-tabs button,
#sinfra-showcase .vla-stage-kicker,
#sinfra-showcase .vla-stage-intro h3 + p,
#sinfra-showcase .vla-loss-top > div > span,
#sinfra-showcase .vla-loss-status .vla-sample-tag,
#sinfra-showcase .vla-loss-status > span:last-child,
#sinfra-showcase .vla-progress-text,
#sinfra-showcase .vla-preview-caption,
#sinfra-showcase .vla-real-note,
#sinfra-showcase .vla-disclaimer,
#sinfra-showcase .vla-prompt-form > label:not(.vla-sr-only),
#sinfra-showcase .vla-parameter > span,
#sinfra-showcase .vla-active-prompt { color: var(--muted); }
#sinfra-showcase .vla-demo-badge,
#sinfra-showcase .vla-tabs,
#sinfra-showcase .vla-loss-status .vla-sample-tag,
#sinfra-showcase .vla-disclaimer { border-color: var(--line); }
#sinfra-showcase .vla-tabs button::after { background: var(--line); }
#sinfra-showcase .vla-step-dot { background: var(--paper); color: var(--muted); border-color: var(--line); }
#sinfra-showcase .vla-tabs button:hover { background: var(--section-paper); color: var(--ink); }
#sinfra-showcase .vla-tabs button[aria-selected="true"] { color: var(--ink); }
#sinfra-showcase .vla-tabs button[aria-selected="true"] .vla-step-dot { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#sinfra-showcase .vla-tabs button.is-complete .vla-step-dot { background: var(--sinfra-selected); color: var(--ink); border-color: var(--line); }
#sinfra-showcase .vla-chart-grid path { stroke: var(--line); }
#sinfra-showcase .vla-chart-labels { fill: var(--muted); }
#sinfra-showcase #vla-loss-fill stop { stop-color: var(--chart-primary); }
#sinfra-showcase .vla-loss-chart [data-lc-el="chart-line"] { stroke: var(--chart-primary); }
#sinfra-showcase .vla-loss-chart [data-lc-el="chart-point"] { stroke: var(--chart-primary); fill: var(--paper); }
#sinfra-showcase .vla-training-track { background: var(--sinfra-track); }
#sinfra-showcase .vla-training-track > span { background: var(--chart-primary); }
#sinfra-showcase .vla-preview-caption a { color: var(--ink); border-color: var(--line); }
#sinfra-showcase .vla-play-all { color: var(--muted) !important; }
#sinfra-showcase .vla-play-all:hover { color: var(--ink) !important; }
#sinfra-showcase .vla-back { background: var(--paper); color: var(--muted) !important; border-color: var(--line); }
#sinfra-showcase .vla-next { background: var(--ink); color: var(--paper) !important; border-color: var(--ink); }
#sinfra-showcase .vla-next:hover { background: var(--sinfra-control-strong); border-color: var(--sinfra-control-strong); }
#sinfra-showcase .vla-prompt-form textarea,
#sinfra-showcase .vla-parameter input { background: var(--section-paper); color: var(--ink); border-color: var(--line); }
#sinfra-showcase .vla-prompt-form textarea::placeholder { color: var(--muted); }
#sinfra-showcase .vla-active-prompt { background: var(--section-paper); }
#sinfra-showcase .vla-active-prompt strong { color: var(--ink); }
:root[data-theme="dark"] #sinfra-showcase .vla-prompt-error { color: #dfaaa0; }
:root[data-theme="dark"] #sinfra-showcase .vla-prompt-form textarea[aria-invalid="true"] { border-color: #c28d82; }
/* Media dialogs and the capacity chapter retain their intentional dark palette. */
#sinfra-showcase .camera-viewer h2 { color: #f5f5f5; }
#sinfra-showcase #capacity { --ink: #f5f5f5; --muted: #aaa; --line: #393939; background: #171717; color: #f5f5f5; }
@media (max-width: 780px) {
  #sinfra-showcase .workflow-live { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
}

/* Real-world deployment gallery */
#sinfra-showcase .deployment-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: end; }
#sinfra-showcase .deployment-heading .section-lede { margin: 0; max-width: 500px; font-size: 18px; }
#sinfra-showcase .deployment-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr); margin-top: 46px; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--paper); }
#sinfra-showcase .deployment-gallery { min-width: 0; padding: 16px; border-right: 1px solid var(--line); }
#sinfra-showcase .deployment-stage { position: relative; overflow: hidden; border-radius: 16px; background: #d9dbd5; aspect-ratio: 16 / 10; }
#sinfra-showcase .deployment-video-frame { position: relative; width: 100%; height: 100%; overflow: hidden; }
#sinfra-showcase .deployment-video-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 54%, rgb(22 25 22 / 58%)); pointer-events: none; }
#sinfra-showcase .deployment-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #171917; }
#sinfra-showcase .deployment-video-frame figcaption { position: absolute; z-index: 1; left: 24px; right: 170px; bottom: 22px; display: flex; flex-direction: column; gap: 7px; color: #f3f3ed; pointer-events: none; }
#sinfra-showcase .deployment-video-frame figcaption span { font-size: 9px; letter-spacing: .16em; color: #d8ddd3; }
#sinfra-showcase .deployment-video-frame figcaption strong { font-size: clamp(18px, 2vw, 28px); font-weight: 500; letter-spacing: -.035em; }
#sinfra-showcase .deployment-video-toggle { position: absolute; z-index: 2; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: rgb(43 47 43 / 66%); color: #f3f3ed; font: inherit; font-size: 10px; backdrop-filter: blur(12px); }
#sinfra-showcase .deployment-video-toggle:hover { background: rgb(56 61 56 / 78%); }
#sinfra-showcase .deployment-video-toggle-icon { display: grid; place-items: center; width: 12px; font-size: 12px; }
#sinfra-showcase .deployment-notes { padding: 34px 30px; background: color-mix(in srgb, var(--section-paper) 88%, var(--paper)); }
#sinfra-showcase .deployment-notes-label { margin-bottom: 15px; color: #6f7e64; font-size: 9px; font-weight: 600; letter-spacing: .15em; }
#sinfra-showcase .deployment-notes h3 { font-size: 26px; letter-spacing: -.04em; }
#sinfra-showcase .deployment-notes > p:not(.deployment-notes-label) { margin-top: 13px; color: var(--muted); font-size: 13px; line-height: 1.75; }
#sinfra-showcase .deployment-notes ol { margin: 27px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
#sinfra-showcase .deployment-notes li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 18px 0; border-top: 1px solid var(--line); }
#sinfra-showcase .deployment-notes li > span { padding-top: 3px; color: var(--muted); font-size: 9px; }
#sinfra-showcase .deployment-notes li strong { font-size: 13px; font-weight: 600; }
#sinfra-showcase .deployment-notes li p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.65; }
#sinfra-showcase #deployment :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1100px) {
  #sinfra-showcase .deployment-heading { gap: 32px; }
  #sinfra-showcase .deployment-layout { grid-template-columns: minmax(0, 1.5fr) minmax(250px, .8fr); }
  #sinfra-showcase .deployment-notes { padding: 28px 23px; }
}
@media (max-width: 780px) {
  #sinfra-showcase .deployment-heading { grid-template-columns: 1fr; gap: 23px; }
  #sinfra-showcase .deployment-heading .section-lede { font-size: 16px; }
  #sinfra-showcase .deployment-layout { grid-template-columns: 1fr; margin-top: 30px; border-radius: 18px; }
  #sinfra-showcase .deployment-gallery { padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  #sinfra-showcase .deployment-stage { border-radius: 12px; aspect-ratio: 4 / 3; }
  #sinfra-showcase .deployment-video-frame figcaption { left: 16px; right: 16px; bottom: 68px; }
  #sinfra-showcase .deployment-video-toggle { right: 12px; bottom: 12px; }
  #sinfra-showcase .deployment-notes { padding: 27px 21px; }
}
@media (prefers-reduced-motion: reduce) {
  #sinfra-showcase .deployment-video-frame { animation: none; }
}