/* Preserve the supplied PNG. Display only the documented clean viewport. */
.sr-workspace-showcase { min-width: 0; margin: 24px 0; overflow: hidden; border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-panel); }
.sr-workspace-showcase .sr-workspace-viewport { position: relative; overflow: hidden; width: 100%; background: var(--app-bg); }
.sr-workspace-showcase .sr-workspace-viewport--wide { aspect-ratio: 1800 / 925; }
.sr-workspace-showcase .sr-workspace-viewport--lesson { aspect-ratio: 1190 / 740; }
.sr-workspace-showcase .sr-workspace-viewport > img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; object-fit: initial; }
.sr-workspace-showcase .sr-workspace-viewport--lesson > img { width: 151.260505%; left: -26.050420%; top: -25%; }
.sr-workspace-showcase > figcaption { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; color: var(--app-muted); font-size: 14px; line-height: 1.6; }
.sr-workspace-showcase > figcaption > strong { color: var(--app-text); font-size: 16px; }
.landing-relaunch .spotlight-hero-board.sr-workspace-showcase { align-self: center; margin: 0; transform: none; }
.landing-relaunch .spotlight-hero-board.sr-workspace-showcase > figcaption { position: static; width: auto; max-width: none; grid-template-columns: 1fr; background: var(--app-panel); }
.landing-relaunch .landing-layout-board.sr-workspace-showcase { margin-top: 24px; }
@media (max-width: 760px) {
  .sr-workspace-showcase { margin: 18px 0; border-radius: 12px; }
  .sr-workspace-showcase > figcaption { padding: 12px 14px; }
  .landing-relaunch .landing-feature-title-row { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .landing-relaunch .landing-feature-title-row h2 { width: 100%; max-width: none; }
  .landing-relaunch .landing-feature-title-row > a { align-self: flex-start; }
}