:root {
  color-scheme: dark;
  --ink: rgba(239, 248, 235, 0.95);
  --muted: rgba(205, 232, 201, 0.62);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; background: #07100f; }
body {
  font-family: "Manrope", "Hiragino Sans", "Yu Gothic", sans-serif;
  background:
    radial-gradient(circle at 18% 20%, rgba(74, 132, 110, 0.13), transparent 28%),
    radial-gradient(circle at 78% 78%, rgba(121, 176, 103, 0.11), transparent 25%),
    linear-gradient(180deg, #0b1413 0%, #050a09 100%);
}
canvas { width: 100vw; height: 100vh; display: block; }
.hud {
  position: fixed;
  top: 18px;
  left: 18px;
  width: min(350px, calc(100vw - 36px));
  padding: 16px 18px;
  border: 1px solid rgba(196, 235, 207, 0.16);
  border-radius: 22px;
  background: rgba(8, 17, 15, 0.28);
  backdrop-filter: blur(18px) saturate(135%);
}
.index, .meta, .hint, h1 { margin: 0; }
.index { color: var(--muted); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
h1 { margin-top: 8px; color: var(--ink); font-size: clamp(28px, 4vw, 44px); line-height: 0.96; }
.meta, .hint { color: var(--muted); font-size: 13px; line-height: 1.55; }
.meta { margin-top: 10px; }
.hint { margin-top: 10px; }
@media (max-width: 640px) {
  .hud { top: 12px; left: 12px; padding: 14px 16px; border-radius: 18px; }
  .meta, .hint { font-size: 12px; }
}