:root {
  color-scheme: dark;
  --bg-top: #13111e;
  --bg-mid: #21182f;
  --bg-bottom: #090910;
  --ink: #f9f3ed;
  --muted: rgba(247, 231, 219, 0.7);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 153, 255, 0.12), transparent 25%),
    radial-gradient(circle at 78% 74%, rgba(255, 173, 122, 0.12), transparent 25%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-bottom) 100%);
  font-family: "Manrope", "Hiragino Sans", "Yu Gothic", sans-serif;
}
#app { display:block; width:100vw; height:100vh; cursor: crosshair; }
.hud {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: min(460px, calc(100vw - 48px));
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(18, 13, 25, 0.36);
  backdrop-filter: blur(18px) saturate(132%);
  box-shadow: 0 22px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.eyebrow,.body,h1,p{margin:0;}
.eyebrow{margin-bottom:10px;color:var(--muted);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;}
h1{color:var(--ink);font-size:clamp(28px,5vw,52px);line-height:0.96;}
.body{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5;}
.controls{margin-top:14px;}
.controls input{width:100%;border:1px solid rgba(255,255,255,0.14);border-radius:12px;padding:11px 12px;background:rgba(255,255,255,0.06);color:var(--ink);font:inherit;}
@media (max-width: 720px){.hud{left:12px;right:12px;bottom:12px;width:auto;}}