:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #222;
  background: #fafafa;
}
body { margin: 0 auto; max-width: 1340px; padding: 16px; }
header h1 { margin: 0 0 4px; font-size: 1.5rem; }
header p { margin: 0 0 12px; color: #555; max-width: 900px; }
.controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; }
.controls label { font-size: 0.9rem; }
.controls input[type="number"] { width: 4.5em; }
button { padding: 4px 12px; }
main { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
canvas { background: #fff; border: 1px solid #ddd; border-radius: 6px; max-width: 100%; }
aside { min-width: 280px; flex: 1; }
#clock { font-variant-numeric: tabular-nums; font-size: 1.1rem; margin-bottom: 6px; }
#description { color: #555; font-size: 0.9rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 4px 8px; border-bottom: 1px solid #eee; }
th:first-child, td:first-child { text-align: left; }
.hint { color: #888; font-size: 0.8rem; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
[hidden] { display: none !important; }
.toggle button { border: 1px solid #bbb; background: #fff; margin: 0; }
.toggle button:first-child { border-radius: 4px 0 0 4px; }
.toggle button:last-child { border-radius: 0 4px 4px 0; border-left: none; }
.toggle button.active { background: #333; color: #fff; border-color: #333; }
.view { display: flex; flex-direction: column; gap: 4px; }
#map3d { width: 1000px; height: 620px; max-width: 100%; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; }