.editor-welcome-trigger {
  background: var(--color-accent);
  color: var(--color-on-accent);
  gap: var(--space-2);
}
.editor-welcome-trigger:hover { filter: brightness(0.9); }
.editor-welcome-trigger-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex: none;
}
/* The welcome variant places its heading in the copy column. */
.site-dialog.editor-welcome {
  --dialog-max-width: var(--landing-content-max-width);
  padding: 0;
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
}
.editor-welcome .site-dialog-heading {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  margin: 0;
}
.editor-welcome .site-dialog-content {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0;
}
.editor-welcome-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-9);
}
.editor-welcome-copy .headerMedium { margin: 0; font-size: calc(var(--font-size-header-medium) * 0.8); text-wrap: balance; }
.editor-welcome-steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
  counter-reset: welcome-step;
}
.editor-welcome-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  counter-increment: welcome-step;
}
.editor-welcome-steps li::before {
  content: counter(welcome-step);
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-7);
  height: var(--space-7);
  border: var(--stroke-thin) solid var(--color-outline);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}
.editor-welcome-steps code {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--space-1);
  background: color-mix(in srgb, var(--color-code) 8%, var(--color-surface));
  color: var(--color-code);
  font-family: var(--font-mono);
  font-size: var(--font-size-body-small);
  white-space: nowrap;
}
.editor-welcome-action { display: grid; gap: var(--space-3); }
.editor-welcome-action .button {
  justify-self: start;
  gap: var(--space-7);
  min-height: var(--touch-target);
  padding-inline: var(--space-6);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.editor-welcome-action .button:hover { filter: brightness(0.9); }
.editor-welcome-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  min-width: 0;
  padding: var(--space-9) var(--space-7);
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 65%), var(--color-background);
  border-left: var(--stroke-thin) solid var(--color-outline);
}
.editor-welcome-preview {
  height: calc(var(--editor-welcome-preview-height) * 0.625);
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  background: var(--color-surface);
}
.editor-welcome-preview iframe {
  display: block;
  width: 160%;
  height: var(--editor-welcome-preview-height);
  transform: scale(0.625);
  transform-origin: top left;
  border: 0;
}
.editor-welcome-result > p { text-align: center; }
.editor-welcome-preview-heading { margin: 0; text-align: center; }
/* Let the complete snippet wrap beneath the preview instead of clipping it. */
.editor-welcome-result .component-prototype-embed-snippet {
  margin: 0;
  max-width: none;
  flex-shrink: 0;
  background: var(--color-surface);
}
.editor-welcome-result .component-prototype-embed-code code {
  width: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-code);
}
@media (max-width: 1000px) {
  .editor-welcome-copy { padding: var(--space-9) var(--space-7); }
  .editor-welcome-copy .headerMedium { font-size: calc(var(--font-size-header-medium) * 0.75); line-height: var(--line-height-tight); }
}
@media (max-width: 700px) {
  .editor-welcome .site-dialog-content { grid-template-columns: minmax(0, 1fr); }
  .editor-welcome-copy { padding: var(--space-9) var(--space-6) var(--space-7); }
  .editor-welcome-result { padding: var(--space-7) var(--space-4); border-left: 0; border-top: var(--stroke-thin) solid var(--color-outline); }
}