Redesign 3D gallery as single hall per artist with exit navigation.

Restore React client source, add hall-to-hall navigation via painting influences grouped by movement, and update documentation.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/components/Timeline.css

@@ -0,0 +1,129 @@
+.timeline-wrapper {
+  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+  border-bottom: 2px solid #c9a96e;
+  padding: 12px 16px 8px;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.timeline-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.timeline-controls button {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #c9a96e;
+  background: rgba(201, 169, 110, 0.15);
+  color: #e8d5b5;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  transition: background 0.2s;
+}
+
+.timeline-controls button:hover {
+  background: rgba(201, 169, 110, 0.35);
+}
+
+.timeline-range {
+  margin-left: 12px;
+  color: #c9a96e;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+}
+
+.timeline-container {
+  position: relative;
+  height: 72px;
+  cursor: grab;
+  user-select: none;
+  border: 1px solid rgba(201, 169, 110, 0.3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.timeline-container:active {
+  cursor: grabbing;
+}
+
+.timeline-track {
+  position: absolute;
+  inset: 0;
+  display: flex;
+}
+
+.era-block {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.era-label {
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'Georgia', serif;
+  font-size: 13px;
+  font-weight: 600;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.timeline-ticks {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 24px;
+}
+
+.tick {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  border-left: 1px solid rgba(201, 169, 110, 0.4);
+  height: 8px;
+}
+
+.tick span {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: rgba(201, 169, 110, 0.7);
+  white-space: nowrap;
+}
+
+.brush-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  transform: translateX(-50%);
+  cursor: ew-resize;
+  background: rgba(201, 169, 110, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.timeline-container:hover .brush-handle {
+  opacity: 1;
+}
+
+.timeline-hint {
+  margin: 6px 0 0;
+  font-size: 11px;
+  color: rgba(201, 169, 110, 0.5);
+  text-align: center;
+}