:root { color-scheme: light; background: #f3f9fe; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #f3f9fe; }
main { width: 100%; height: 100%; height: 100dvh; }
#scene { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline: none; }
#scene:active { cursor: grabbing; }

/* The only controls: follow the robot, and its speed. */
#controls {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.01em;
}
#follow, #speed {
  color: #3a76a6; background: rgba(251, 253, 255, 0.86);
  border: 1px solid #b8d3e7; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(58, 118, 166, 0.10);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#controls button { font: inherit; color: inherit; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
#controls button:focus-visible { outline: 2px solid #6fa6cf; outline-offset: 2px; }
#follow {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
#follow:hover { background: #fff; border-color: #8fb7d7; }
#follow:active { transform: scale(0.97); }
#follow .dot { width: 8px; height: 8px; border-radius: 50%; background: #b8d3e7; transition: background 160ms ease, box-shadow 160ms ease; }
#follow[aria-pressed="true"] { color: #1d5b8f; border-color: #8fb7d7; }
#follow[aria-pressed="true"] .dot { background: #6fc3ff; box-shadow: 0 0 0 3px rgba(111, 195, 255, 0.25); }
#speed { display: inline-flex; padding: 3px; gap: 2px; }
#speed button {
  min-width: 34px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent;
  font-variant-numeric: tabular-nums; transition: background 160ms ease, color 160ms ease;
}
#speed button:hover { background: rgba(184, 211, 231, 0.35); }
#speed button[aria-checked="true"] { background: #dcebf7; color: #1d5b8f; }
@media (prefers-reduced-motion: reduce) { #controls *, #controls { transition: none !important; } }