/* Pattern Studio — a split: the tileable preview card on the left, the
   inspector and the CSS output on the right (layout from
   styles/components/form.css). Only the title tile, the preview surface and
   the code block are the page's own. */

.ps-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #34D399, #0EA5E9);
  color: #fff;
}

/* ── Stage ──────────────────────────────────────────────────────────────── */
/* Fills the flush row edge to edge (the row inherits the card corners). */
.ps-preview {
  aspect-ratio: 16 / 10;
  background-color: #fff;
  background-repeat: repeat;
}

/* ── Output ─────────────────────────────────────────────────────────────── */
.ps-css { --code-output-max-h: 200px; user-select: all; }