:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #090b0e;
  color: #e8edf2;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: radial-gradient(circle at center, #171b21, #080a0c 70%); }
canvas { width: 100%; height: 100%; display: block; touch-action: none; }

#controls {
  position: fixed;
  top: 18px;
  left: 18px;
  width: min(330px, calc(100vw - 36px));
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(10, 13, 17, .82);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

h1 { margin: 0 0 7px; font-size: 17px; }
p { margin: 0 0 14px; color: #aab4bf; font-size: 12px; line-height: 1.45; }
small { display: block; margin-top: 12px; color: #7f8994; }

.control { margin: 10px 0; }
.control header { display: flex; justify-content: space-between; font-size: 12px; color: #c6cdd5; }
.control output { color: #fff; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; }
.buttons { display: flex; gap: 8px; margin-top: 14px; }
button {
  flex: 1;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: 8px 10px;
  color: #e8edf2;
  background: rgba(255,255,255,.07);
  cursor: pointer;
}
button:hover { background: rgba(255,255,255,.12); }
.toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; }
#status {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(0,0,0,.58);
  color: #cbd3da;
  font: 12px ui-monospace, SFMono-Regular, Consolas, monospace;
}