/* AEM feature 03 · developer and editor work in parallel on a Qixu homepage.
   User reference: code window behind an editable website, collaborator badges
   and a homepage-template label. Reuse the approved 832 × 520 media stage. */
.adobe-aem__visual.aem-development {
  position:relative;container:adobe-development / inline-size;isolation:isolate;
  color:var(--wy-g700);font-family:var(--wy-font-cn);line-height:1.4;
  text-align:left;letter-spacing:normal;
}
.aem-development::after {
  content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:14%;
  z-index:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(22,22,27,.07),rgba(22,22,27,.025) 45%,transparent);
}
.aem-development__scene { position:absolute;inset:0;z-index:1; }
.aem-development__scene *,.aem-development__scene *::before,.aem-development__scene *::after { box-sizing:border-box; }
.aem-development__collaborator {
  position:absolute;display:flex;align-items:center;gap:1.4423cqw;padding:.9615cqw 1.9231cqw;
  border:1px solid color-mix(in srgb,var(--wy-blue-light) 32%,var(--wy-g100));
  border-radius:1.9231cqw;background:var(--wy-g0);
  box-shadow:0 .9615cqw 2.8846cqw -1.4423cqw color-mix(in srgb,var(--wy-blue-dark) 14%,transparent);
}
.aem-development__collaborator--developer { inset-inline-start:5.7692cqw;inset-block-start:5.7692cqw;inline-size:25cqw;block-size:6.7308cqw; }
.aem-development__collaborator--editor { inset-inline-start:69.2308cqw;inset-block-start:5.7692cqw;inline-size:25cqw;block-size:6.7308cqw; }
.aem-development__avatar { display:block;flex:none;inline-size:4.8077cqw;block-size:4.8077cqw;border-radius:50%;object-fit:cover;object-position:center 35%; }
.aem-development__person { display:grid;gap:.2404cqw;min-inline-size:0; }
.aem-development__role { color:var(--wy-ink);font-size:2.1635cqw;font-weight:500;line-height:1.4;white-space:nowrap; }
.aem-development__activity { color:var(--wy-g500);font-size:1.4423cqw;line-height:1.4;white-space:nowrap; }
.aem-development__code-window {
  position:absolute;inset-inline-start:5.7692cqw;inset-block-start:15.3846cqw;
  inline-size:39.4231cqw;block-size:38.4615cqw;
  display:flex;flex-direction:column;gap:1.4423cqw;padding:1.9231cqw;
  border:1px solid color-mix(in srgb,var(--wy-blue-light) 32%,var(--wy-g100));
  border-radius:1.9231cqw;background:var(--wy-g0);
  box-shadow:0 .9615cqw 2.8846cqw -1.4423cqw color-mix(in srgb,var(--wy-blue-dark) 14%,transparent);
}
.aem-development__language { flex:none;color:var(--wy-ink);font-family:var(--wy-font-en);font-size:2.1635cqw;font-weight:500;line-height:1.4;white-space:nowrap; }
.aem-development__code {
  flex:1;min-block-size:0;margin:0;padding:1.6827cqw;
  overflow:hidden;border-radius:1.2019cqw;background:var(--wy-g800);color:var(--wy-g100);
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:1.4423cqw;font-weight:400;line-height:1.5;letter-spacing:normal;white-space:pre;
}
.aem-development__code code { font:inherit;color:inherit; }
.aem-development__keyword { color:var(--wy-primary-light); }
.aem-development__property { color:var(--wy-blue-light); }
.aem-development__string { color:color-mix(in srgb,var(--wy-success) 50%,var(--wy-g0)); }
.aem-development__website {
  position:absolute;z-index:2;inset-inline-start:36.5385cqw;inset-block-start:17.3077cqw;
  inline-size:57.6923cqw;aspect-ratio:3/2;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--wy-blue-light) 32%,var(--wy-g100));
  border-radius:1.4423cqw;background:var(--wy-g0);
  box-shadow:0 1.4423cqw 3.8462cqw -1.4423cqw color-mix(in srgb,var(--wy-blue-dark) 16%,transparent),0 .2404cqw .7212cqw color-mix(in srgb,var(--wy-ink) 3%,transparent);
}
.aem-development__website > img { display:block;inline-size:100%;block-size:100%;max-inline-size:none;border:0;border-radius:0;object-fit:cover; }
.aem-development__selection {
  position:absolute;inset-inline-start:4.35%;inset-block-start:27.2%;
  inline-size:37.8%;block-size:10.9%;border:.2404cqw solid #E5B23B;border-radius:.4808cqw;
}
.aem-development__selection::before,.aem-development__selection::after,.aem-development__handle {
  content:"";position:absolute;inline-size:.9615cqw;block-size:.9615cqw;
  border:1px solid color-mix(in srgb,var(--wy-g500) 55%,var(--wy-g0));border-radius:50%;background:var(--wy-g0);
}
.aem-development__selection::before { inset-inline-start:0;inset-block-start:50%;transform:translate(-60%,-50%); }
.aem-development__selection::after { inset-inline-end:0;inset-block-start:50%;transform:translate(60%,-50%); }
.aem-development__handle { inset-inline-start:50%;inset-block-end:0;transform:translate(-50%,60%); }
.aem-development__template {
  position:absolute;z-index:3;inset-inline-start:39.4231cqw;inset-block-start:49.0385cqw;
  display:flex;align-items:center;justify-content:center;inline-size:16.3462cqw;block-size:4.8077cqw;
  padding:.9615cqw 1.9231cqw;border:1px solid color-mix(in srgb,var(--wy-primary-light) 26%,var(--wy-g100));
  border-radius:1.4423cqw;background:var(--wy-g0);color:var(--wy-ink);font-size:2.1635cqw;line-height:1.4;white-space:nowrap;
  box-shadow:0 .9615cqw 2.8846cqw -1.4423cqw color-mix(in srgb,var(--wy-blue-dark) 14%,transparent);
}