<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nova Card Render Frame</title>
  <link rel="preload" href="/fonts/nova-cards/inter-400-700.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/nova-cards/playfair-display-600-700.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/nova-cards/anton-400.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/nova-cards/caveat-400-700.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/nova-cards/libre-franklin-400-700.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/nova-cards/cormorant-garamond-500-700.woff2" as="font" type="font/woff2" crossorigin>
  <script>
    window.__NOVA_CARD__       = {!! json_encode($cardData, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) !!};
    window.__NOVA_CARD_FONTS__ = {!! json_encode($fonts,    JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) !!};
  </script>
  @vite(['resources/css/app.css', 'resources/js/render-frame.jsx'])
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: {{ $width }}px;
      height: {{ $height }}px;
      overflow: hidden;
      background: #000;
    }
    #card-render-mount {
      width: {{ $width }}px;
      height: {{ $height }}px;
    }
  </style>
</head>
<body>
  <div id="card-render-mount"></div>
</body>
</html>
