/* Adapt the existing HUD simulation to the website palette and small screens. */
:root[data-theme], html.dark[data-theme] {
  --background: var(--paper);
  --foreground: var(--ink);
  --card-foreground: var(--ink);
  --popover: var(--card);
  --popover-foreground: var(--ink);
  --primary-foreground: var(--button-text);
  --secondary: var(--panel);
  --secondary-foreground: var(--ink);
  --muted: var(--panel);
  --muted-foreground: var(--text-muted);
  --accent-foreground: var(--ink);
  --destructive: var(--ember);
  --input: var(--border);
  --ring: var(--accent);
}
.page-hud main.wrap { max-width: 1100px; }
.page-hud #root > div { min-height: 0; padding: 28px 0 10px; gap: 31px; background: transparent; }
.page-hud #root > div > div:first-child { width: min(760px, 100%); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.page-hud #root h2 { margin-right: auto; font: 400 22px/1.4 var(--serif); color: var(--ink); }
.page-hud #root button { min-height: 35px; border-radius: 8px; padding-inline: 12px; font-size: 12px; }
.page-hud #root button.bg-primary { color: var(--button-text); }
.page-hud #root [data-slot='card'] { border: 1px solid var(--border); box-shadow: none; backdrop-filter: none; border-radius: 15px; }
.page-hud #root .w-\[380px\] { width: min(380px, 100%); }
.page-hud #root .w-\[340px\] { width: min(340px, 100%); }
.page-hud #root .w-\[520px\] { width: min(520px, 100%); }
@media (max-width: 480px) {
  .page-hud #root > div > div:first-child { justify-content: flex-start; }
  .page-hud #root h2 { flex-basis: 100%; margin-bottom: 5px; }
  .page-hud #root [data-slot='card'] { border-radius: 12px; }
}