aliencharts 0.1.4 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +171 -90
  2. package/THIRD_PARTY_NOTICES.md +7 -0
  3. package/dist/aliencharts.css +1 -1
  4. package/dist/index.js +27 -4726
  5. package/dist/index.js.map +4 -4
  6. package/dist/react.js +3361 -0
  7. package/dist/react.js.map +7 -0
  8. package/dist/vanilla.js +3303 -0
  9. package/dist/vanilla.js.map +7 -0
  10. package/index.d.ts +42 -10
  11. package/package.json +26 -10
  12. package/react.d.ts +22 -0
  13. package/vanilla.d.ts +17 -0
  14. package/dist/index.cjs +0 -5005
  15. package/dist/index.cjs.map +0 -7
package/README.md CHANGED
@@ -7,7 +7,7 @@ GPU-rendered chart grid for multi-metric dashboards — such as monitoring AI tr
7
7
 
8
8
  By rendering every series with WebGL, AlienCharts keeps dense chart grids smooth where SVG/Canvas libraries stall.
9
9
 
10
- > **Note:** AlienCharts currently supports **line charts** only. Other chart types may be added in the future.
10
+ > **Note:** AlienCharts currently supports **line charts** and **bar charts**. Other chart types may be added in the future.
11
11
 
12
12
  ![AlienCharts chart grid example](./assets/chartgrid.png)
13
13
 
@@ -26,9 +26,7 @@ By rendering every series with WebGL, AlienCharts keeps dense chart grids smooth
26
26
  npm install aliencharts
27
27
  ```
28
28
 
29
- `react` and `react-dom` (v18+) are peer dependencies, so make sure they are installed in your app.
30
-
31
- AlienCharts ships its own self-contained stylesheet, import it once in your app:
29
+ Import the self-contained stylesheet once:
32
30
 
33
31
  ```js
34
32
  import "aliencharts/styles.css";
@@ -36,121 +34,204 @@ import "aliencharts/styles.css";
36
34
 
37
35
  Dark mode follows a `.dark` class on any ancestor element (e.g. `<html class="dark">`).
38
36
 
39
- ## Quick start
37
+ ## Vanilla Web
40
38
 
41
- Build an array of `charts`, where each chart has an `id`, a `title`, and one or more `series` created with `createSeries`. Pass them to `<ChartGrid>`:
39
+ ```html
40
+ <div id="charts" style="height: 100vh"></div>
41
+ ```
42
42
 
43
- ```jsx
43
+ ```js
44
44
  import "aliencharts/styles.css";
45
- import { ChartGrid, createSeries } from "aliencharts";
46
-
47
- const charts = [
48
- {
49
- id: "loss",
50
- title: "train/loss",
51
- series: [
52
- createSeries({
53
- id: "run-1",
54
- name: "Run 1",
55
- color: "#38bdf8",
56
- x: [0, 1, 2, 3, 4],
57
- y: [2.5, 1.9, 1.4, 1.1, 0.9],
58
- }),
59
- ],
60
- },
61
- ];
62
-
63
- export default function Dashboard() {
64
- return <ChartGrid charts={charts} columns={2} />;
65
- }
45
+ import { createChartGrid, createLineSeries } from "aliencharts/vanilla";
46
+
47
+ const series = createLineSeries({
48
+ id: "run-1",
49
+ name: "Run 1",
50
+ color: "#38bdf8",
51
+ x: [0, 1, 2, 3, 4],
52
+ y: [2.5, 1.9, 1.4, 1.1, 0.9],
53
+ });
54
+
55
+ const grid = createChartGrid(document.querySelector("#charts"), {
56
+ charts: [{ id: "loss", title: "train/loss", series: [series] }],
57
+ columns: 2,
58
+ });
59
+
60
+ // Stream data into an existing series and schedule a render.
61
+ series.append([5, 6], [0.8, 0.72]);
62
+ grid.invalidate();
63
+
64
+ grid.setOptions({ columns: 3, followLatest: true });
65
+ grid.jumpToLatest();
66
+
67
+ // Release DOM listeners, observers, animation frames, and WebGL resources.
68
+ grid.destroy();
66
69
  ```
67
70
 
68
- For a fuller example, including live appending and theming — see [`examples/DemoPage.jsx`](./examples/DemoPage.jsx).
71
+ `createChartGrid()` returns:
72
+
73
+ | Method | Description |
74
+ | --- | --- |
75
+ | `setOptions(partialOptions)` | Update formatting, controls, callbacks, state, or layout. |
76
+ | `setCharts(charts)` | Replace the chart array and reconcile chart/GPU state. |
77
+ | `invalidate()` | Notify the grid after appending or mutating series data. |
78
+ | `jumpToLatest(chartId?)` | Move one chart, or every chart, to its latest values. |
79
+ | `scrollToTop(options?)` | Scroll the grid container to the top. |
80
+ | `destroy()` | Dispose the controller. |
81
+
82
+ See the [Vanilla Web example source](https://github.com/FarangLab/AlienCharts/blob/main/examples/vanilla.js) for a more complete setup.
69
83
 
70
- ### Drawings
84
+ ## React
71
85
 
72
- Drawings are controlled by your app. Keep the drawing array and active tool in state, then pass that state into `ChartGrid`:
86
+ If you use React in your application, import the React entry point:
73
87
 
74
88
  ```jsx
75
- import { useCallback, useState } from "react";
76
- import { ChartGrid } from "aliencharts";
89
+ import { useRef, useState } from "react";
90
+ import "aliencharts/styles.css";
91
+ import { ChartGrid, createLineSeries } from "aliencharts/react";
77
92
 
78
- export default function Dashboard({ charts }) {
79
- const [drawings, setDrawings] = useState([]);
80
- const [activeDrawingTool, setActiveDrawingTool] = useState(null);
81
- const [selectedDrawingId, setSelectedDrawingId] = useState(null);
93
+ const series = createLineSeries({
94
+ id: "run-1",
95
+ x: [0, 1, 2, 3, 4],
96
+ y: [2.5, 1.9, 1.4, 1.1, 0.9],
97
+ });
82
98
 
83
- const createDrawingId = useCallback(
84
- ({ chartId, type }) => `${chartId}:${type}:${crypto.randomUUID()}`,
85
- [],
86
- );
99
+ export default function Dashboard() {
100
+ const gridRef = useRef(null);
101
+ const [dataRevision, setDataRevision] = useState(0);
102
+
103
+ const append = () => {
104
+ series.append([series.length], [Math.random()]);
105
+ setDataRevision((value) => value + 1);
106
+ };
87
107
 
88
108
  return (
89
- <ChartGrid
90
- charts={charts}
91
- drawings={drawings}
92
- onDrawingsChange={setDrawings}
93
- activeDrawingTool={activeDrawingTool}
94
- onActiveDrawingToolChange={setActiveDrawingTool}
95
- selectedDrawingId={selectedDrawingId}
96
- onSelectedDrawingIdChange={setSelectedDrawingId}
97
- createDrawingId={createDrawingId}
98
- />
109
+ <div style={{ height: "100vh" }}>
110
+ <button onClick={append}>Append</button>
111
+ <ChartGrid
112
+ ref={gridRef}
113
+ charts={[{ id: "loss", title: "train/loss", series: [series] }]}
114
+ dataRevision={dataRevision}
115
+ />
116
+ </div>
99
117
  );
100
118
  }
101
119
  ```
102
120
 
103
- Supported drawing tools are `"trendline"`, `"hline"`, `"vline"`, and `"pin"`. Since drawings live outside the component, you can persist them however you want, such as local storage, a database, or app state.
121
+ See the [React demo source](https://github.com/FarangLab/AlienCharts/blob/main/examples/DemoPage.jsx) for a larger controlled-state example.
122
+
123
+ ## Data API
124
+
125
+ Framework-neutral data helpers are also available from the package root:
126
+
127
+ ### Line series
128
+
129
+ ```js
130
+ import { createLineSeries, createMockCharts, LineSeries } from "aliencharts";
131
+ ```
132
+
133
+ `createLineSeries(options)` accepts an id, optional name/color, X/Y arrays or typed arrays, and an optional maximum LOD level count. Its `append(xValues, yValues)` method efficiently extends the typed backing arrays. The existing `createSeries(options)` API remains available as a backward-compatible alias.
104
134
 
105
- Set `disableDrawings` when you want a read-only chart toolbar without drawing or moving-average tools.
135
+ ### Bar series
106
136
 
107
- ## API
137
+ Use `createBarSeries()` for grouped GPU-rendered bars. The data meaning is the
138
+ same in both orientations: `x` is the numeric category position and `y` is the
139
+ value.
108
140
 
109
- ### `createSeries(options)`
141
+ ```js
142
+ import { createBarSeries } from "aliencharts";
143
+
144
+ const vertical = createBarSeries({
145
+ id: "revenue",
146
+ x: [0, 1, 2, 3],
147
+ y: [12, 18, -4, 25],
148
+ });
149
+
150
+ const horizontal = createBarSeries({
151
+ id: "latency",
152
+ orientation: "horizontal",
153
+ x: [0, 1, 2, 3],
154
+ y: [40, 65, 32, 80],
155
+ });
156
+ ```
110
157
 
111
- Creates a line series.
158
+ Multiple bar series in one chart are grouped in series order. Every series in a
159
+ chart must use the same orientation.
112
160
 
113
- | Option | Type | Description |
114
- | --- | --- | --- |
115
- | `id` | `string` | Unique series id. |
116
- | `name` | `string` | Display name (defaults to `id`). |
117
- | `color` | `string` | CSS color of the line (defaults to `#38bdf8`). |
118
- | `x` | `number[] \| Float64Array` | X values (e.g. step / time). |
119
- | `y` | `number[] \| Float32Array` | Y values. |
161
+ ## Chart configuration
120
162
 
121
- The returned series has an `append(xValues, yValues)` method for streaming in new points.
163
+ Charts have the shape `{ id, title, series }` and may additionally define
164
+ `pinned`, `categories`, `xAxisLabel`, and a fixed `{ min, max }` Y range.
122
165
 
123
- ### `createMockCharts(options?)`
166
+ ### Categories
124
167
 
125
- Generates an array of charts with synthetic data for demos and benchmarking. Options: `chartCount`, `seriesPerChart`, `pointCount`.
168
+ Add `categories` to the chart to display text labels at bar positions. String
169
+ entries use their array index as the numeric X value:
126
170
 
127
- ### `<ChartGrid>`
171
+ ```js
172
+ const models = ["Gemini 3.5", "GPT-5.6", "Claude 4.5"];
173
+
174
+ const chart = {
175
+ id: "model-scores",
176
+ title: "Model scores",
177
+ categories: models,
178
+ xAxisLabel: "MODEL",
179
+ series: [createBarSeries({
180
+ id: "score",
181
+ x: models.map((_, index) => index),
182
+ y: [82, 91, 87],
183
+ })],
184
+ };
185
+ ```
186
+
187
+ For sparse or non-indexed numeric X values, use
188
+ `{ value: number, label: string }` entries instead.
128
189
 
129
- Renders a responsive grid of charts. Commonly used props:
190
+ ### Common options
130
191
 
131
- | Prop | Type | Default | Description |
192
+ | Option | Default | Chart types | Description |
132
193
  | --- | --- | --- | --- |
133
- | `charts` | `Chart[]` | — | Charts to render. Each is `{ id, title, series }`. |
134
- | `columns` | `number` | `2` | Number of columns in the grid. |
135
- | `dataRevision` | `number` | `0` | Bump this after appending points to trigger a re-render. |
136
- | `followLatest` | `boolean` | `false` | Keep the view pinned to the newest data. |
137
- | `xAxisLabel` | `string` | `"STEP"` | Label shown on the x-axis. |
138
- | `backgroundColor` | `string` | — | Chart background color. |
139
- | `antialiasLines` | `boolean` | `false` | Enable line antialiasing. |
140
- | `gridLines` | `boolean \| { xSpacing?: number, ySpacing?: number }` | `false` | Show plot grid lines. Pass an object to configure pixel spacing (defaults to `80` x `48`). |
141
- | `showToolbar` | `boolean` | `true` | Show the toolbar on the focused chart. |
142
- | `showLatestValueLine` | `boolean` | `true` | Show the partial dashed line between the latest point and its Y-axis label. |
143
- | `showTooltips` | `boolean` | `true` | Show the crosshair, nearest-point markers, and tooltip. |
144
- | `drawings` | `Drawing[]` | `[]` | Controlled drawing objects. |
145
- | `onDrawingsChange` | `(drawings) => void` | — | Called when drawings are created, edited, deleted, or styled. |
146
- | `activeDrawingTool` | `"trendline" \| "hline" \| "vline" \| "pin" \| null` | `null` | Controlled active drawing tool. |
147
- | `onActiveDrawingToolChange` | `(tool) => void` | — | Called when the toolbar or hotkeys change the active drawing tool. |
148
- | `selectedDrawingId` | `string \| null` | `null` | Controlled selected drawing id. |
149
- | `onSelectedDrawingIdChange` | `(id) => void` | — | Called when a drawing is selected or deselected. |
150
- | `createDrawingId` | `({ chartId, type }) => string` | — | Optional id factory for new drawings. |
151
- | `disableDrawings` | `boolean` | `false` | Hide and disable drawing and moving-average tools. |
152
- | `onChartContextMenu` | `({ chart, event, point }) => void` | — | Called on chart right-click. Use it to render your own context menu. |
194
+ | `charts` | required | Line, Bar | Chart objects to render. |
195
+ | `columns` | `2` | Line, Bar | Responsive grid column count. |
196
+ | `initialVisiblePoints` | all | Line, Bar | Initial X window size. |
197
+ | `backgroundColor` | `#f5f9ff` | Line, Bar | Chart background. |
198
+ | `antialiasLines` | `false` | Line | GPU-expanded antialiased lines. |
199
+ | `gridLines` | `false` | Line, Bar | Boolean or `{ xSpacing, ySpacing }`. |
200
+ | `showToolbar` | `true` | Line, Bar | Focused-chart toolbar. |
201
+ | `showLatestValueLine` | `true` | Line | Latest value connector and label. |
202
+ | `showTooltips` | `true` | Line, Bar | Crosshair and nearest-value tooltip. |
203
+ | `xAxisLabel` | `STEP` | Line, Bar | Default tooltip label for the category/X value. |
204
+ | `followLatest` | `false` | Line, Bar | Always follow appended values. |
205
+ | `followVisibleLatest` | `true` | Line, Bar | Follow appends when the latest point was visible. |
206
+ | `drawings` | `[]` | Line | Initial or replacement drawing state. |
207
+ | `movingAverageByChart` | `{}` | Line | Moving-average state keyed by chart id. |
208
+ | `topMarkers` | `[]` | Line | Clickable markers positioned by `x` or `step`. |
209
+ | `disableDrawings` | `false` | Line | Disable drawing and moving-average controls. |
210
+
211
+ ### Drawings and callbacks
212
+
213
+ Drawing, selection, active-tool, moving-average, marker, clearing, and context-menu callbacks work in both entry points. The controller updates its own state before emitting change callbacks; passing an explicit replacement through `setOptions()` or React props synchronizes external state back into it.
214
+
215
+ Supported drawing tools are `trendline`, `hline`, `vline`, and `pin`. Context-menu payloads contain `{ chart, event, point }`, where `event` is a native `MouseEvent` and `point` is the data coordinate when the click is inside the plot.
216
+
217
+ ## Examples
218
+
219
+ The example files are development examples in the repository and are not included in the installed npm package. From a cloned repository, run:
220
+
221
+ ```bash
222
+ npm install
223
+ npm run build
224
+ npm run examples
225
+ ```
226
+
227
+ Then open:
228
+
229
+ - Vanilla Web: <http://127.0.0.1:4178/examples/vanilla.html>
230
+ - React: <http://127.0.0.1:4178/examples/react.html>
231
+ - Bar charts: <http://127.0.0.1:4178/examples/bars.html>
153
232
 
154
233
  ## License
155
234
 
156
- [MIT](./LICENSE) © FarangLab
235
+ [MIT](./LICENSE) © FarangLab.
236
+
237
+ Bundled Phosphor SVG paths are covered by the notice in [`THIRD_PARTY_NOTICES.md`](./THIRD_PARTY_NOTICES.md).
package/THIRD_PARTY_NOTICES.md ADDED
@@ -0,0 +1,7 @@
1
+ # Third-party notices
2
+
3
+ AlienCharts includes SVG path data from Phosphor Icons.
4
+
5
+ Copyright © 2020 Phosphor Icons
6
+
7
+ Licensed under the MIT License: https://github.com/phosphor-icons/core/blob/main/LICENSE
package/dist/aliencharts.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base{.aliencharts-root,.aliencharts-root *,.aliencharts-root :before,.aliencharts-root :after{box-sizing:border-box;border:0 solid}.aliencharts-root button,.aliencharts-root input{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;margin:0}.aliencharts-root button{cursor:pointer;padding:0}.aliencharts-root button:disabled{cursor:default}.aliencharts-root svg{display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.top-0{top:0}.top-1\/2{top:50%}.top-12{top:calc(var(--spacing) * 12)}.top-\[-1000px\]{top:-1000px}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-\[-1000px\]{left:-1000px}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:var(--spacing)}.mt-1{margin-top:var(--spacing)}.mb-1{margin-bottom:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-px{width:1px;height:1px}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[220px\]{width:220px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-\[0\.985\]{scale:.985}.-rotate-45{rotate:-45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-ew-resize{cursor:ew-resize}.cursor-ns-resize{cursor:ns-resize}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background{border-color:var(--background)}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-foreground\/40{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/40{border-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.border-primary\/70{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/70{border-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.bg-background,.bg-background\/70{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/70{background-color:color-mix(in oklab, var(--background) 70%, transparent)}}.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--background) 85%, transparent)}}.bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/95{background-color:color-mix(in oklab, var(--background) 95%, transparent)}}.bg-popover\/80{background-color:var(--popover)}@supports (color:color-mix(in lab, red, red)){.bg-popover\/80{background-color:color-mix(in oklab, var(--popover) 80%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.p-0{padding:0}.p-1{padding:var(--spacing)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-1{padding-top:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-border\/40{color:var(--border)}@supports (color:color-mix(in lab, red, red)){.text-border\/40{color:color-mix(in oklab, var(--border) 40%, transparent)}}.text-foreground,.text-foreground\/50{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-orange-500{color:var(--color-orange-500)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.opacity-0{opacity:0}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/40{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ring-primary\/70{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/70{--tw-ring-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.dark\:text-foreground\/80:is(.dark *){color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.dark\:text-foreground\/80:is(.dark *){color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.dark\:text-orange-300:is(.dark *){color:var(--color-orange-300)}@media (hover:hover){.dark\:hover\:text-orange-300:is(.dark *):hover{color:var(--color-orange-300)}}}.aliencharts-root{--radius:.5rem;--background:#fff;--foreground:#161616;--popover:#fff;--popover-foreground:#161616;--primary:#45aeee;--muted-foreground:#626262;--accent:#d1d1d1;--accent-foreground:#494949;--border:#626262}.dark .aliencharts-root,.aliencharts-root.dark{--background:#1c1719;--foreground:#e8e3e5;--popover:#1c1719;--popover-foreground:#e8e3e5;--primary:#077dc4;--muted-foreground:#a69399;--accent:#332a2d;--accent-foreground:#bdafb4;--border:#a69399}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}
2
+ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--color-orange-500:oklch(70.5% .213 47.604);--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--blur-sm:8px}}@layer base{.aliencharts-root,.aliencharts-root *,.aliencharts-root :before,.aliencharts-root :after{box-sizing:border-box;border:0 solid}.aliencharts-root button,.aliencharts-root input{font:inherit;color:inherit;letter-spacing:inherit;background:0 0;margin:0}.aliencharts-root button{cursor:pointer;padding:0}.aliencharts-root button:disabled{cursor:default}.aliencharts-root svg{display:block}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-x-2{inset-inline:calc(var(--spacing) * 2)}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing) * 2)}.top-12{top:calc(var(--spacing) * 12)}.right-16{right:calc(var(--spacing) * 16)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-full{left:100%}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-\[60\]{z-index:60}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.my-1{margin-block:var(--spacing)}.mt-1{margin-top:var(--spacing)}.mb-1{margin-bottom:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:0}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-\[220px\]{width:220px}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-rotate-45{rotate:-45deg}.rotate-90{rotate:90deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-x-2{column-gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:calc(var(--radius) - 4px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-background{border-color:var(--background)}.border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/50{border-color:color-mix(in oklab, var(--border) 50%, transparent)}}.border-border\/70{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.border-border\/70{border-color:color-mix(in oklab, var(--border) 70%, transparent)}}.border-foreground\/40{border-color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.border-foreground\/40{border-color:color-mix(in oklab, var(--foreground) 40%, transparent)}}.border-primary\/70{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/70{border-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.bg-background,.bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}.bg-background\/85{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.bg-background\/85{background-color:color-mix(in oklab, var(--background) 85%, transparent)}}.bg-popover\/80{background-color:var(--popover)}@supports (color:color-mix(in lab, red, red)){.bg-popover\/80{background-color:color-mix(in oklab, var(--popover) 80%, transparent)}}.bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.bg-primary\/15{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/15{background-color:color-mix(in oklab, var(--primary) 15%, transparent)}}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-1{padding-top:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-border\/40{color:var(--border)}@supports (color:color-mix(in lab, red, red)){.text-border\/40{color:color-mix(in oklab, var(--border) 40%, transparent)}}.text-foreground,.text-foreground\/50{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/50{color:color-mix(in oklab, var(--foreground) 50%, transparent)}}.text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.text-foreground\/80{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.text-foreground\/80{color:color-mix(in oklab, var(--foreground) 80%, transparent)}}.text-muted-foreground{color:var(--muted-foreground)}.text-orange-500{color:var(--color-orange-500)}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-70{opacity:.7}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-primary\/40{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/40{--tw-ring-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ring-primary\/70{--tw-ring-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/70{--tw-ring-color:color-mix(in oklab, var(--primary) 70%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}}}.aliencharts-root{--radius:.5rem;--background:#fff;--foreground:#161616;--popover:#fff;--popover-foreground:#161616;--primary:#45aeee;--muted-foreground:#626262;--accent:#d1d1d1;--accent-foreground:#494949;--border:#626262}.dark .aliencharts-root,.aliencharts-root.dark{--background:#1c1719;--foreground:#e8e3e5;--popover:#1c1719;--popover-foreground:#e8e3e5;--primary:#077dc4;--muted-foreground:#a69399;--accent:#332a2d;--accent-foreground:#bdafb4;--border:#a69399}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}