/* Neumorphism Studio — a split: the preview card on the left, the inspector
   and the CSS output on the right (layout from styles/components/form.css).
   The stage background matches the surface color (soft UI only works when
   element and container share a color). Only the title tile, the stage, the
   surface, the preset swatches and the code block are the page's own. */

.ns-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #C9D2E3, #9AA7C7);
  color: #fff;
}

/* ── Stage ──────────────────────────────────────────────────────────────── */
/* Fills the flush row edge to edge (the row inherits the card corners). */
.ns-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e5ec; /* overwritten live to match the surface */
  transition: background var(--duration-snap) var(--ease-standard);
}
.ns-card {
  width: 44%;
  max-width: 220px;
  aspect-ratio: 1;
  /* All visual properties are written live by app.js. */
  border-radius: 50px;
  background: #e0e5ec;
}
.ns-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft-strong);
}

/* ── Inspector ──────────────────────────────────────────────────────────── */
.ns-color-hex {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: -0.01em;
}



/* The light-direction segment uses big arrow glyphs. */
#ns-light .segment__btn { font-size: 16px; line-height: 1; }

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