<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% raw %}{% block title %}{% endraw %}{{ "{{ project_name }}" }}{% raw %}{% endblock %}{% endraw %}</title>
  {{ "{{ vite_hmr() }}" }}
  {{ "{{ vite('resources/main.js') }}" }}
  <style>
    :root {
      font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
      line-height: 1.5;
      font-weight: 400;
      color-scheme: light dark;
      color: rgba(255, 255, 255, 0.87);
      background-color: #242424;
    }
    .app {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2rem;
      text-align: center;
    }
    .card {
      padding: 2em;
    }
    button {
      border-radius: 8px;
      border: 1px solid transparent;
      padding: 0.6em 1.2em;
      font-size: 1em;
      font-weight: 500;
      font-family: inherit;
      background-color: #1a1a1a;
      color: inherit;
      cursor: pointer;
      transition: border-color 0.25s;
    }
    button:hover {
      border-color: #3d72b4;
    }
    @media (prefers-color-scheme: light) {
      :root {
        color: #213547;
        background-color: #ffffff;
      }
      button {
        background-color: #f9f9f9;
      }
    }
  </style>
</head>
<body>
  {% raw %}{% block content %}{% endraw %}{% raw %}{% endblock %}{% endraw %}
</body>
</html>
