/* Inference Engine studies (builder B2): the API call, the same request to each model. */
/* the API call: the same request to each model; only the model changes */
.ie-api{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.ie-console{grid-column:1 / 8;position:relative;margin:0}
.ie-glow{position:absolute;left:-10%;right:-10%;top:-30%;bottom:-30%;pointer-events:none;
  background:radial-gradient(44% 60% at 30% 50%,rgba(39,84,52,.55),transparent 70%),radial-gradient(24% 40% at 82% 56%,rgba(226,70,42,.16),transparent 72%);filter:blur(30px)}
.ie-side{grid-column:9 / 13}
.ie-side h3{color:#fff}
.ie-side p{color:var(--fg2);margin-top:10px;max-width:28em}
.ie-b1{padding-top:22px;border-top:1px solid var(--line2)}
.ie-b2{margin-top:40px;padding-top:22px;border-top:1px solid var(--line2)}
@media (max-width:1100px){ .ie-console{grid-column:1 / 13}.ie-side{grid-column:1 / 13;margin-top:40px} }
@media (max-width:760px){
  .ie-api{display:block}
}
@media (prefers-reduced-motion:reduce){
}
.ie-ben{overflow:clip}

/* Models on Atlas: the statement with the models (client note 207); each card on its own calm shader ground (note 206) */
.ie-mod .statement{margin-bottom:clamp(64px,7vw,104px)}
.ie-meb{margin-bottom:28px}
.ie-card{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#2f9a5a,#0f4a2b)}
.ie-card[data-k="1"]{background:linear-gradient(160deg,#8a5ad8,#3a1f6e)}
.ie-card[data-k="2"]{background:linear-gradient(160deg,#3b9fd6,#174f78)}
.ie-card::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(10,10,10,0) 38%,rgba(10,10,10,.3));pointer-events:none}
.ie-sh{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;border-radius:inherit}

/* note 238: the band painting after the opening did not tell this page's story; the opening leads straight to the models */
.band{display:none}
.ie-mod{padding-top:clamp(56px,6vw,96px)}
.ie-mod .statement .h2{grid-column:2 / 12;max-width:16em;margin:0 auto}

/* note 275 (r16): the repeated request table replaced by one figure: your application, one opening, the three models behind it */
.ie-sk.st-fig{position:relative;height:440px}
.ie-sk>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ie-sk-chip{position:absolute;left:0;top:0;margin:0;padding:8px 13px 9px;border-radius:999px;white-space:nowrap;font:500 var(--s-small)/1 var(--f);color:var(--fg2);
  background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:var(--glass-edge),0 12px 30px rgba(0,0,0,.35);
  opacity:var(--a,0);will-change:transform;transition:opacity var(--t1) var(--ease),color var(--t1) var(--ease),box-shadow var(--t1) var(--ease)}
.ie-sk-api{color:#fff}
.ie-sk-m{font:var(--w-h3) var(--s-body)/1 var(--f);color:var(--fg2);cursor:pointer;pointer-events:auto;min-height:40px;padding:0 16px;display:inline-flex;align-items:center}
.ie-sk-m.on{color:#fff;box-shadow:var(--glass-edge),inset 0 0 0 1.5px var(--verm),0 12px 30px rgba(0,0,0,.35)}
.ie-sk-m:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:760px){
  .ie-sk.st-fig.ph-list{height:auto}
  .ie-sk.ph-list>canvas{height:min(400px,104vw)}
  .ie-sk.ph-list .st-labs{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
  .ie-sk.ph-list .ie-sk-chip{position:static;transform:none!important;opacity:1}
}