:root { color-scheme: dark; }
html,body{
  height:100%; margin:0; font-family: system-ui, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 30%, #0c1022, #0a0814 60%, #05040a 100%);
  overflow:hidden;
}
body{
  display:grid; place-items:center;
  background-size:400% 400%;
  animation: bgShift 16s ease-in-out infinite alternate;
}
@keyframes bgShift {
  0%  { background-position: 0% 0%; }
  50% { background-position: 50% 80%; }
  100%{ background-position: 100% 20%; }
}
canvas{
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.15);
  box-shadow:
    0 0 40px rgba(0, 255, 255, 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.75));
  max-width: 95vw;
  max-height: 85vh;
  object-fit: contain;
}
.hint{
  position:fixed; bottom:14px; left:50%; translate:-50% 0;
  color:#d7eaff; opacity:.85; font-size:14px; letter-spacing:.3px;
  background: rgba(255,255,255,0.06);
  padding:6px 10px; border-radius:10px; backdrop-filter: blur(6px);
}