/* Layered Shadow Studio — a split: the preview card on the left, the
   inspector and the box-shadow output on the right (layout from
   styles/components/form.css). Only the title tile, the stage, the tile, the
   light puck and the code block are the page's own. */

.ls-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #8E8E93, #3A3A3C);
  color: #fff;
}

/* ── Stage ──────────────────────────────────────────────────────────────── */
/* Fills the flush row edge to edge (the row inherits the card corners). */
.ls-stage {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #EDEDF2;
  transition: background var(--duration-snap) var(--ease-standard);
  touch-action: none;
  user-select: none;
}
.ls-stage[data-theme="dark"] { background: #15151A; }

.ls-tile {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 22px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #3A3A3C;
  /* box-shadow set by JS */
}
.ls-stage[data-theme="dark"] .ls-tile {
  background: #2C2C30;
  color: #E5E5EA;
}

.ls-light {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: #FF9F0A;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 14px 2px rgba(255, 196, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18);
  cursor: grab;
  padding: 0;
  transition: transform var(--duration-snap) var(--ease-spring);
}
.ls-light:hover { transform: scale(1.1); }
.ls-light:focus-visible {
  outline: none;
  box-shadow: 0 0 14px 2px rgba(255, 196, 0, 0.55), 0 0 0 4px var(--accent-soft-strong);
}
.ls-light.is-dragging { cursor: grabbing; transform: scale(1.16); }

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