first commit

src/styles.css

@@ -0,0 +1,130 @@
+:root {
+  color: #101828;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  background: #f5f7fa;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.workspace {
+  width: min(1440px, 100%);
+  margin: 0 auto;
+  padding: 28px clamp(16px, 4vw, 56px) 48px;
+}
+
+.workspace__header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+.workspace__eyebrow {
+  margin: 0 0 6px;
+  color: #1677ff;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  margin-bottom: 0;
+  font-size: 28px;
+  font-weight: 650;
+}
+
+.control-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 12px 16px;
+  background: #fff;
+  border: 1px solid #e4e7ec;
+  border-bottom: 0;
+}
+
+.control-bar__leading {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.display-mode-control {
+  display: inline-flex;
+  white-space: nowrap;
+}
+
+.grid-size-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #475467;
+  font-size: 12px;
+}
+
+.grid-size-control .ant-input-number {
+  width: 54px;
+}
+
+.metrics {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px 18px;
+  color: #667085;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.chart-panel {
+  background: transparent;
+}
+
+@media (max-width: 700px) {
+  .workspace {
+    padding-top: 20px;
+  }
+
+  .workspace__header,
+  .control-bar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .control-bar__leading {
+    flex-wrap: wrap;
+  }
+
+  .display-mode-control {
+    max-width: 100%;
+  }
+
+  .metrics {
+    justify-content: flex-start;
+  }
+}