WIP: intent-based agency with telemetry bus and Python client

client/browser/css/style.css

@@ -0,0 +1,176 @@
+/* ═══════════════════════════════════════════════════════
+   līlā — Ecosystem Visualizer Styles
+   ═══════════════════════════════════════════════════════ */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  background: #0f100f;
+  color: #b8b4a8;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  overflow: hidden;
+  height: 100vh;
+  width: 100vw;
+}
+
+#canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  image-rendering: pixelated;
+}
+
+/* ─── Status Panel ──────────────────────────────────── */
+
+.panel {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background: rgba(15, 16, 15, 0.88);
+  border: 1px solid rgba(184, 180, 168, 0.12);
+  border-radius: 6px;
+  padding: 14px 16px;
+  min-width: 200px;
+  backdrop-filter: blur(8px);
+}
+
+.panel h1 {
+  font-size: 14px;
+  font-weight: 500;
+  color: #d4d0c4;
+  margin-bottom: 2px;
+  letter-spacing: 0.5px;
+}
+
+.panel .sub {
+  font-size: 9px;
+  color: rgba(184, 180, 168, 0.5);
+  margin-bottom: 12px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.stat {
+  display: flex;
+  justify-content: space-between;
+  padding: 3px 0;
+  border-bottom: 1px solid rgba(184, 180, 168, 0.06);
+}
+
+.stat:last-child { border-bottom: none; }
+.stat .label { color: rgba(184, 180, 168, 0.5); }
+.stat .value { color: #d4d0c4; font-weight: 400; }
+
+/* ─── Event Log ─────────────────────────────────────── */
+
+.events-panel {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  background: rgba(15, 16, 15, 0.88);
+  border: 1px solid rgba(184, 180, 168, 0.12);
+  border-radius: 6px;
+  padding: 10px 14px;
+  max-width: 340px;
+  max-height: 140px;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  font-size: 10px;
+}
+
+.events-panel .event-line {
+  padding: 2px 0;
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.events-panel .event-line.fresh { opacity: 1; }
+
+/* ─── Legend ────────────────────────────────────────── */
+
+.legend {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(15, 16, 15, 0.88);
+  border: 1px solid rgba(184, 180, 168, 0.12);
+  border-radius: 6px;
+  padding: 12px 14px;
+  backdrop-filter: blur(8px);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+  font-size: 10px;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+/* ─── Status Dot ────────────────────────────────────── */
+
+.status-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.status-dot.connected { background: #6b8f5e; }
+.status-dot.disconnected { background: #8f5e5e; }
+.status-dot.connecting { background: #8f865e; }
+
+/* ─── Control Buttons ───────────────────────────────── */
+
+.rain-btn, .record-btn {
+  position: fixed;
+  bottom: 20px;
+  background: rgba(45, 85, 110, 0.5);
+  border: 1px solid rgba(70, 130, 150, 0.3);
+  color: rgba(184, 180, 168, 0.85);
+  padding: 10px 18px;
+  border-radius: 6px;
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 11px;
+  cursor: pointer;
+  letter-spacing: 1px;
+  transition: all 0.2s;
+}
+
+.rain-btn { right: 20px; }
+.record-btn { right: 120px; }
+
+.rain-btn:hover, .record-btn:hover {
+  background: rgba(55, 105, 130, 0.7);
+  border-color: rgba(70, 130, 150, 0.6);
+}
+
+.rain-btn:active, .record-btn:active {
+  background: rgba(70, 130, 150, 0.9);
+}
+
+.rain-btn.raining {
+  background: rgba(45, 85, 110, 0.9);
+  border-color: rgba(100, 170, 200, 0.5);
+  color: rgba(200, 220, 230, 1);
+}
+
+.record-btn.recording {
+  background: rgba(140, 50, 50, 0.8);
+  border-color: rgba(180, 70, 70, 0.6);
+  color: rgba(230, 180, 180, 1);
+}