/* Stageshow overlap/static-card recipe, adapted to the site's static HTML.
   Window/field anatomy stays readable at the shown size. The scene is the
   subject; the contextual agent is the foreground surface, previews secondary. */
:is(.studio-page, .approach-page) .home-faux-studio {
  --hf-ink: var(--gi-text);
  --hf-muted: var(--gi-muted);
  --hf-line: var(--gi-line);
  --hf-radius: var(--gi-radius);
  --hf-shadow: var(--gi-shadow-panel);
  position: relative;
  isolation: isolate;
  scroll-margin-top: 96px;
  overflow: visible;
  background: transparent;
  color: var(--hf-ink);
  font-family: var(--gi-font);
  font-size: 12px;
  line-height: 1.4;
}
:is(.studio-page, .approach-page) #studio-workflow .home-create-layout .home-faux-studio { aspect-ratio: 3 / 2; }
.home-faux-studio * { box-sizing: border-box; }
.home-faux-studio svg { display: block; width: 14px; height: 14px; flex: none; }
.home-faux-studio .hf-studio-window {
  position: absolute;
  inset: 24px 32px 72px;
  overflow: hidden;
  border: 1px solid var(--hf-line);
  border-radius: var(--hf-radius);
  background: #eae9ea;
  box-shadow: var(--hf-shadow);
}
.home-faux-studio .hf-studio-viewport { position: absolute; inset: 0; overflow: hidden; }
.home-faux-studio .hf-studio-viewport > img { display:block; position:absolute; left:8px; top:50%; width:calc(100% - 180px); height:auto; max-width:none; translate:0 -50%; mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent); mask-composite:intersect; }
.home-faux-studio .hf-scene-tools { position: absolute; right: 16px; top: 12px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--gi-line); border-radius: 7px; background: var(--gi-surface); box-shadow: var(--gi-shadow-panel); }
.home-faux-studio .hf-scene-tools > span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; color: var(--gi-muted); font-size: 11px; line-height: 16px; }
.home-faux-studio .hf-scene-tools svg { width: 12px; height: 12px; }
.home-faux-studio .hf-scene-tools > .hf-scene-tool-active { color: var(--gi-text); background: var(--gi-selected); }
.home-faux-studio .hf-agent-composer { position: absolute; left: 24px; bottom: 24px; width: 304px; padding: 12px; border: 1px solid var(--gi-line); border-radius: var(--hf-radius); background: var(--gi-surface); box-shadow: var(--gi-shadow-focus); }
.home-faux-studio .hf-agent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--gi-muted); }
.home-faux-studio .hf-agent-context { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; background: var(--gi-surface-inset); color: var(--gi-muted); font-size: 11px; line-height: 16px; }
.home-faux-studio .hf-agent-context svg { width: 12px; height: 12px; }
.home-faux-studio .hf-agent-draft { display: grid; grid-template-columns: minmax(0, 1fr); }
.home-faux-studio .hf-agent-draft .ss-field__box { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 2px; }
.home-faux-studio .hf-agent-draft .ss-field__value { flex: 1; min-width: 0; color: var(--gi-text); font-size: 14px; line-height: 20px; }
.home-faux-studio .hf-agent-send { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--gi-surface-inset); color: var(--gi-muted); }
.home-faux-studio .hf-studio-results { position: absolute; bottom: 16px; right: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 224px; }
.home-faux-studio .hf-studio-results > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; border: 3px solid #fff; border-radius: 5px; background: #eae9ea; box-shadow: 0 1px 5px rgb(32 28 20 / .08); }
@media (min-width: 901px) and (max-width: 1100px) {
  .home-faux-studio .hf-studio-window { left: 24px; right: 24px; }
  .home-faux-studio .hf-scene-tools { right: 16px; gap: 2px; }
  .home-faux-studio .hf-scene-tools > span { gap: 4px; padding: 5px 6px; }
  .home-faux-studio .hf-agent-composer { left: 16px; width: 268px; }
  .home-faux-studio .hf-studio-results { right: 16px; width: 188px; }
}