/* Domma Showcase - demo styles from public/showcase/effects/ambient, by scripts/site-migrate/demo-styles.mjs:
 * only rules for classes the demos use. Do not edit - re-run the script, or move a rule
 * into a demo's own demo.css. */
.showcase-demo[data-demo^="showcase/effects/ambient/"] .modifier-demo {
          height: 200px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1rem;
          font-weight: 500;
          background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }

      .showcase-demo[data-demo^="showcase/effects/ambient/"] .nav-link {
          padding: 0.5rem 1rem;
          margin: 0.25rem;
          border-radius: 4px;
          background: var(--dm-primary-t10, rgba(13, 110, 253, 0.1));
          text-decoration: none;
          color: var(--dm-primary);
          display: inline-block;
          transition: all 0.2s ease;
      }

      .showcase-demo[data-demo^="showcase/effects/ambient/"] .nav-link:hover {
          background: var(--dm-primary-t20, rgba(13, 110, 253, 0.2));
          transform: translateY(-2px);
      }