html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0f1226;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

canvas { display: block; }

#help {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px;
  color: #cdd3f5;
  font-size: 14px;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  pointer-events: none;
  z-index: 5;
}

#help b { color: #ffd166; }
.hint { opacity: 0.85; }

#popup {
  position: fixed;
  z-index: 20;
  background: rgba(20, 24, 50, 0.97);
  border: 1px solid #4a5a9a;
  border-radius: 10px;
  padding: 14px 16px;
  width: 226px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  font-size: 13px;
  color: #e0e6ff;
}

#popup .pt {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
  color: #ffd166;
}

#popup .pr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

#popup .pr input[type=range] { flex: 1; }
#popValue { font-weight: bold; min-width: 44px; text-align: right; }

#popPreview {
  font-size: 11px;
  opacity: 0.82;
  margin: 8px 0 12px;
  line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 8px;
}

#popPreview b { color: #ffd166; }

#popup .pb {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#popup .pb button {
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #2a3050;
  color: #fff;
  cursor: pointer;
}

#popup .pb button:hover { background: #3a4070; }
#popup .pb button.primary { background: #2e8b2e; border-color: #4caf50; }
#popup .pb button.primary:hover { background: #3aa83a; }