@manufosela/capture-image

<div class="container">
    

    <div class="warning">
      ℹ️ This component uses <code>navigator.mediaDevices.getUserMedia</code>. Your browser will
      prompt for camera access. Served over HTTPS or localhost only.
    </div>

    <div class="demo-card">
      <capture-image size-x="480" size-y="360" mask maskpercent="20"></capture-image>
    </div>
  </div>

:root {
  --bg: #0c0f14;
  --bg-elevated: #141923;
  --bg-panel: #171d28;
  --border: #262f3f;
  --text: #f4f6fb;
  --text-muted: #a7b0c2;
  --text-dim: #7d879b;
  --accent: #ff8a3d;
  --accent-strong: #ff6a00;
  --accent-soft: rgba(255, 138, 61, 0.16);
  --shadow: 0 20px 50px rgba(5, 8, 14, 0.45);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1160px;
}

.container { max-width: 960px; margin: 0 auto; }
    header { margin-bottom: 3rem; }
    h1 {
      font-family: "Manrope", system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .subtitle { color: #b9cbc2; margin: 0.5rem 0 0.75rem; }
    .back-link { font-size: 0.85rem; color: #b9cbc2; text-decoration: none; }
    .back-link:hover { color: #00e0b3; }
    .demo-card {
      background: #1c1b1b;
      border-radius: 1rem;
      padding: 2rem;
      margin-bottom: 2rem;
      display: flex;
      justify-content: center;
    }
    .warning {
      background: rgba(0, 224, 179, 0.08);
      color: #b9cbc2;
      padding: 1rem 1.25rem;
      border-radius: 0.5rem;
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }