@howells/hairline 0.0.0-stage → 0.1.0

package/lib/hairline.css

@@ -0,0 +1,1385 @@
+/*
+ * Palettes. Charts never use hex values: only the semantic variables below.
+ *
+ *   --hl-paper            page and card surface
+ *   --hl-ink              strongest mark and headline colour
+ *   --hl-text / --hl-muted / --hl-faint   text hierarchy
+ *   --hl-grid / --hl-rule    hairlines: the faint grid and quiet rules
+ *   --hl-l0 … --hl-l6        importance ladder, most important first ("lightness is data")
+ *   --hl-hero             the one highlighted element per chart
+ *   --hl-alert            thresholds, regressions, over-budget
+ *   --hl-cat-1 … --hl-cat-4  categorical series
+ *   --hl-heat-1 … --hl-heat-5  sequential ramp, low → high
+ *
+ * Every name is --hl- prefixed and scoped under a Hairline root (.hl-root);
+ * the library sets nothing on :root, so it never collides with a host's own
+ * variables. A host themes a root with deriveTheme (@howells/hairline/theme)
+ * or by overriding these on its own rule. Three house modes are set by
+ * data-palette on the root: paper, pink and dark. `.surface-dark` (the dark
+ * cell) remaps the same names, so a chart inverts without knowing it is on a
+ * dark card.
+ */
+
+.hl-root,
+.hl-root[data-palette="paper"] {
+  /* Paper: patternmode's paper and ink; the ramp steps evenly between them in OKLCH. */
+  --hl-paper: #fbfbf9;
+  --hl-ink: #1d1d1b;
+  --hl-text: #1d1d1b;
+  --hl-muted: #727068;
+  --hl-faint: #9f9e9a;
+  --hl-grid: #eeece7;
+  --hl-rule: #e3e1dc;
+
+  --hl-l0: #1d1d1b;
+  --hl-l1: #41403c;
+  --hl-l2: #5f5e5a;
+  --hl-l3: #7e7d79;
+  --hl-l4: #9f9e9a;
+  --hl-l5: #bfbeb9;
+  --hl-l6: #dad9d5;
+
+  --hl-hero: #1d1d1b;
+  --hl-alert: #c05951;
+
+  --hl-cat-1: var(--hl-l0);
+  --hl-cat-2: var(--hl-l2);
+  --hl-cat-3: var(--hl-l4);
+  --hl-cat-4: var(--hl-l6);
+
+  --hl-heat-1: #dad9d5;
+  --hl-heat-2: #9f9e9a;
+  --hl-heat-3: #7e7d79;
+  --hl-heat-4: #41403c;
+  --hl-heat-5: #1d1d1b;
+
+  /* The paper's grain: noise in the ink's colour at a whisper of opacity. */
+  --hl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0 0.000 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23g%29'/%3E%3C/svg%3E");
+
+  --hl-dk-paper: #1d1d1b;
+  --hl-dk-ink: #fbfbf9;
+  --hl-dk-muted: #9f9e9a;
+  --hl-dk-faint: #5f5e5a;
+  --hl-dk-grid: #34332f;
+  --hl-dk-rule: #2b2a27;
+  --hl-dk-l0: #fbfbf9;
+  --hl-dk-l1: #dad9d5;
+  --hl-dk-l2: #bfbeb9;
+  --hl-dk-l3: #9f9e9a;
+  --hl-dk-l4: #7e7d79;
+  --hl-dk-l5: #5f5e5a;
+  --hl-dk-l6: #41403c;
+  --hl-dk-hero: #fbfbf9;
+  --hl-dk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.000 0 0 0 0 0.980 0 0 0 0 0.941 0 0 0 0.036 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23g%29'/%3E%3C/svg%3E");
+}
+
+.hl-root[data-palette="pink"] {
+  /* Pink: a dusty, dusky broadsheet pink (a greyed rose, deeper than any trademark salmon), with a warm ink ramp drawn toward its hue. */
+  --hl-paper: #f1dfdc;
+  --hl-ink: #27201e;
+  --hl-text: #27201e;
+  --hl-muted: #6c605e;
+  --hl-faint: #a59895;
+  --hl-grid: #e4d3cf;
+  --hl-rule: #dccbc7;
+
+  --hl-l0: #27201e;
+  --hl-l1: #443b39;
+  --hl-l2: #635856;
+  --hl-l3: #837775;
+  --hl-l4: #a59895;
+  --hl-l5: #c4b5b2;
+  --hl-l6: #dccbc8;
+
+  --hl-hero: #27201e;
+  --hl-alert: #9c433e;
+
+  --hl-cat-1: var(--hl-l0);
+  --hl-cat-2: var(--hl-l2);
+  --hl-cat-3: var(--hl-l4);
+  --hl-cat-4: var(--hl-l6);
+
+  --hl-heat-1: #dccbc8;
+  --hl-heat-2: #a59895;
+  --hl-heat-3: #837775;
+  --hl-heat-4: #443b39;
+  --hl-heat-5: #27201e;
+
+  /* The paper's grain: noise in the ink's colour at a whisper of opacity. */
+  --hl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.275 0 0 0 0 0.137 0 0 0 0 0.098 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23g%29'/%3E%3C/svg%3E");
+
+  --hl-dk-paper: #1d1d1b;
+  --hl-dk-ink: #fbfbf9;
+  --hl-dk-muted: #9f9e9a;
+  --hl-dk-faint: #5f5e5a;
+  --hl-dk-grid: #34332f;
+  --hl-dk-rule: #2b2a27;
+  --hl-dk-l0: #fbfbf9;
+  --hl-dk-l1: #dad9d5;
+  --hl-dk-l2: #bfbeb9;
+  --hl-dk-l3: #9f9e9a;
+  --hl-dk-l4: #7e7d79;
+  --hl-dk-l5: #5f5e5a;
+  --hl-dk-l6: #41403c;
+  --hl-dk-hero: #fbfbf9;
+  --hl-dk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.000 0 0 0 0 0.980 0 0 0 0 0.941 0 0 0 0.036 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23g%29'/%3E%3C/svg%3E");
+}
+
+.hl-root[data-palette="dark"] {
+  /* Dark: a warm near-black page; contrast rebuilt, not inverted. Light ink leads, the ramp descends toward the page. */
+  --hl-paper: #181715;
+  --hl-ink: #f0eeeb;
+  --hl-text: #f0eeeb;
+  --hl-muted: #888683;
+  --hl-faint: #686663;
+  --hl-grid: #242321;
+  --hl-rule: #2c2b29;
+
+  --hl-l0: #f0eeeb;
+  --hl-l1: #cccac7;
+  --hl-l2: #a9a7a4;
+  --hl-l3: #888683;
+  --hl-l4: #686663;
+  --hl-l5: #4c4a47;
+  --hl-l6: #373533;
+
+  /* A shade below the text ink, so large solid heroes glow rather than glare. */
+  --hl-hero: #d8d6d2;
+  --hl-alert: #d87a6e;
+
+  --hl-cat-1: var(--hl-l0);
+  --hl-cat-2: var(--hl-l2);
+  --hl-cat-3: var(--hl-l4);
+  --hl-cat-4: var(--hl-l6);
+
+  --hl-heat-1: #373533;
+  --hl-heat-2: #686663;
+  --hl-heat-3: #888683;
+  --hl-heat-4: #cccac7;
+  --hl-heat-5: #f0eeeb;
+
+  /* The paper's grain: noise in the ink's colour at a whisper of opacity. */
+  --hl-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.000 0 0 0 0 0.980 0 0 0 0 0.941 0 0 0 0.036 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23g%29'/%3E%3C/svg%3E");
+  --hl-dk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1.000 0 0 0 0 0.980 0 0 0 0 0.941 0 0 0 0.036 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url%28%23g%29'/%3E%3C/svg%3E");
+
+  /* The one dark cell sits a step deeper than the dark page. */
+  --hl-dk-paper: #0e0d0b;
+  --hl-dk-ink: #f0eeeb;
+  --hl-dk-muted: #888683;
+  --hl-dk-faint: #4c4a47;
+  --hl-dk-grid: #1f1e1c;
+  --hl-dk-rule: #262523;
+  --hl-dk-l0: #f0eeeb;
+  --hl-dk-l1: #cccac7;
+  --hl-dk-l2: #a9a7a4;
+  --hl-dk-l3: #888683;
+  --hl-dk-l4: #686663;
+  --hl-dk-l5: #4c4a47;
+  --hl-dk-l6: #373533;
+  --hl-dk-hero: #d8d6d2;
+}
+
+/* Dark cards: same names, inverted values. */
+.hl-root .surface-dark,
+.hl-root.surface-dark {
+  --hl-paper: var(--hl-dk-paper);
+  --hl-ink: var(--hl-dk-ink);
+  --hl-text: var(--hl-dk-ink);
+  --hl-muted: var(--hl-dk-muted);
+  --hl-faint: var(--hl-dk-faint);
+  --hl-grid: var(--hl-dk-grid);
+  --hl-rule: var(--hl-dk-rule);
+  --hl-l0: var(--hl-dk-l0);
+  --hl-l1: var(--hl-dk-l1);
+  --hl-l2: var(--hl-dk-l2);
+  --hl-l3: var(--hl-dk-l3);
+  --hl-l4: var(--hl-dk-l4);
+  --hl-l5: var(--hl-dk-l5);
+  --hl-l6: var(--hl-dk-l6);
+  --hl-hero: var(--hl-dk-hero);
+  --hl-cat-1: var(--hl-dk-l0);
+  --hl-cat-2: var(--hl-dk-l2);
+  --hl-cat-3: var(--hl-dk-l4);
+  --hl-cat-4: var(--hl-dk-l6);
+  --hl-grain: var(--hl-dk-grain);
+  background: var(--hl-grain), var(--hl-paper);
+  color: var(--hl-text);
+}
+
+/* Derived tones, valid in every palette (and on dark cards). */
+.hl-root,
+.hl-root .surface-dark,
+.hl-root.surface-dark {
+  --hl-alert-soft: color-mix(in oklab, var(--hl-alert) 22%, transparent);
+  --hl-alert-faded: color-mix(in oklab, var(--hl-alert) 45%, var(--hl-paper));
+  --hl-alert-rule: color-mix(in oklab, var(--hl-alert) 55%, var(--hl-paper));
+  --hl-hero-soft: color-mix(in oklab, var(--hl-hero) 25%, var(--hl-paper));
+  --hl-panel: color-mix(in oklab, var(--hl-paper) 96%, var(--hl-ink));
+}
+
+/*
+ * Dashboard boards (the dense, scrubbable style). They sit on the same paper
+ * as every other chart and read the palette's own text, muted, faint, grid
+ * and rule. Series tones are steps on the ramp: past, the cursor's month
+ * (active) and future.
+ */
+.hl-root .surface-board,
+.hl-root.surface-board {
+  --hl-bg: var(--hl-paper);
+  --hl-board-panel: var(--hl-paper);
+
+  /*
+   * Series tones: the fill taxonomy's tones only (src/charts/fills.ts): hero,
+   * l2, l3, l4, l5 and alert. No mixes, no alpha, no l0, l1 or l6.
+   */
+  --hl-s1: var(--hl-l2);
+  --hl-s1-active: var(--hl-hero);
+  --hl-s1-future: var(--hl-l4);
+  --hl-s2: var(--hl-l4);
+  --hl-s2-active: var(--hl-l3);
+  --hl-s2-future: var(--hl-l5);
+  --hl-s3: var(--hl-l5);
+  --hl-s3-active: var(--hl-l4);
+  --hl-s3-future: var(--hl-l5);
+
+  --hl-line1: var(--hl-hero);
+  --hl-line1-future: var(--hl-l4);
+  --hl-line2: var(--hl-l3);
+  --hl-line2-future: var(--hl-l5);
+
+  --hl-area1: var(--hl-l5);
+  --hl-area2: var(--hl-l5);
+  --hl-area3: var(--hl-l5);
+  --hl-band-past: var(--hl-l5);
+  --hl-band-future: var(--hl-l5);
+
+  /* Red marks one exceptional thing per chart: one solid alert tone. */
+  --hl-red: var(--hl-alert);
+  --hl-red-past: var(--hl-alert);
+  --hl-red-future: var(--hl-alert);
+  --hl-red-soft: var(--hl-alert);
+  --hl-red-rule: var(--hl-alert);
+
+  --hl-board-bar: var(--hl-l3);
+  --hl-board-label-2: var(--hl-l3);
+  --hl-board-swatch-3: var(--hl-l4);
+  --hl-board-link: var(--hl-l5);
+  --hl-board-link-hot: var(--hl-l4);
+  --hl-board-hot: var(--hl-alert);
+  --hl-board-heat-1: var(--hl-l5);
+  --hl-board-heat-2: var(--hl-l4);
+  --hl-board-heat-3: var(--hl-l3);
+  --hl-board-heat-4: var(--hl-l2);
+  --hl-board-heat-5: var(--hl-hero);
+
+  --hl-panel: var(--hl-board-panel);
+  background: var(--hl-grain), var(--hl-bg);
+  color: var(--hl-text);
+}
+
+/*
+ * Motion. Every chart moves with these and nothing else; charts/motion.ts
+ * mirrors them for the few charts animated from script.
+ */
+.hl-root {
+  /* Arrivals: bars, dots and labels appearing in place (ease-out-quint). */
+  --hl-ease-enter: cubic-bezier(0.23, 1, 0.32, 1);
+  /* Crossing the chart: lines drawing on, wipes, marks moving (ease-in-out-quart). */
+  --hl-ease-travel: cubic-bezier(0.77, 0, 0.175, 1);
+  /* Tone changes: hover dims, highlights, palettes. */
+  --hl-ease-tone: ease;
+
+  --hl-duration-hover: 150ms; /* dims and highlights under the pointer */
+  --hl-duration-change: 400ms; /* data or palette changing in place */
+  --hl-duration-enter: 600ms; /* dots and text arriving */
+  --hl-duration-grow: 800ms; /* bars and areas rising from their baseline */
+  --hl-duration-long: 1200ms; /* lines drawing on, marks crossing a chart */
+
+  /* Labels and furniture trail the marks they describe. */
+  --hl-fade-lag: 150ms;
+
+  /* Steps between neighbours in a group, by how many there are. */
+  --hl-stagger-dense: 8ms; /* hundreds: cells, ticks, dots */
+  --hl-stagger-fine: 16ms; /* dozens */
+  --hl-stagger-mark: 40ms; /* a handful of bars or points */
+  --hl-stagger-series: 80ms; /* a few series, rows or phases */
+}
+
+.hl-root .pointer-events-none {
+  pointer-events: none;
+}
+
+.hl-root .visible {
+  visibility: visible;
+}
+
+.hl-root .sr-only {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.hl-root .absolute {
+  position: absolute;
+}
+
+.hl-root .relative {
+  position: relative;
+}
+
+.hl-root .note-pop {
+  width: min(20rem, 100vw - 2rem);
+}
+
+@supports (position-area: bottom) {
+  .hl-root .note-pop {
+    position-area: bottom span-left;
+    position-try-fallbacks: flip-block, --hl-note-scroll;
+    margin: .625rem 0 0;
+    inset: auto;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .hl-root .note-pop {
+    transition: opacity var(--hl-duration-hover) var(--hl-ease-enter), translate var(--hl-duration-hover) var(--hl-ease-enter), display var(--hl-duration-hover) allow-discrete, overlay var(--hl-duration-hover) allow-discrete;
+  }
+
+  .hl-root .note-pop:not(:popover-open) {
+    opacity: 0;
+    translate: 0 -4px;
+  }
+
+  @starting-style {
+    .hl-root .note-pop:popover-open {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+  }
+}
+
+.hl-root .z-10 {
+  z-index: 10;
+}
+
+.hl-root .m-0 {
+  margin: 0;
+}
+
+.hl-root .-my-3 {
+  margin-block: -.75rem;
+}
+
+.hl-root .-mt-2\.5 {
+  margin-top: -.625rem;
+}
+
+.hl-root .mt-3 {
+  margin-top: .75rem;
+}
+
+.hl-root .-mr-3\.5 {
+  margin-right: -.875rem;
+}
+
+.hl-root .flex {
+  display: flex;
+}
+
+.hl-root .grid {
+  display: grid;
+}
+
+.hl-root .hidden {
+  display: none;
+}
+
+.hl-root .inline-flex {
+  display: inline-flex;
+}
+
+.hl-root .table {
+  display: table;
+}
+
+.hl-root .size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
+.hl-root .size-11 {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+.hl-root .h-7 {
+  height: 1.75rem;
+}
+
+.hl-root .h-11 {
+  height: 2.75rem;
+}
+
+.hl-root .min-h-11 {
+  min-height: 2.75rem;
+}
+
+.hl-root .w-full {
+  width: 100%;
+}
+
+.hl-root .min-w-0 {
+  min-width: 0;
+}
+
+.hl-root .min-w-11 {
+  min-width: 2.75rem;
+}
+
+.hl-root .flex-1 {
+  flex: 1;
+}
+
+.hl-root .shrink-0 {
+  flex-shrink: 0;
+}
+
+.hl-root .grow {
+  flex-grow: 1;
+}
+
+.hl-root .border-collapse {
+  border-collapse: collapse;
+}
+
+.hl-root .grow-x {
+  transform-box: fill-box;
+  transform-origin: 0%;
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  :where(.is-hidden) :is(.hl-root .grow-x) {
+    transform: scaleX(0);
+  }
+
+  :where(.is-shown) :is(.hl-root .grow-x) {
+    animation: hl-grow-x var(--hl-duration-grow) var(--hl-ease-enter) both;
+    animation-delay: calc(var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-mark)));
+  }
+}
+
+.hl-root .grow-y {
+  transform-box: fill-box;
+  transform-origin: 50% 100%;
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  :where(.is-hidden) :is(.hl-root .grow-y) {
+    transform: scaleY(0);
+  }
+
+  :where(.is-shown) :is(.hl-root .grow-y) {
+    animation: hl-grow-y var(--hl-duration-grow) var(--hl-ease-enter) both;
+    animation-delay: calc(var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-mark)));
+  }
+}
+
+.hl-root .sweep {
+  transform-box: fill-box;
+  transform-origin: 0%;
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  :where(.is-hidden) :is(.hl-root .sweep) {
+    transform: scaleX(0);
+  }
+
+  :where(.is-shown) :is(.hl-root .sweep) {
+    animation: hl-grow-x var(--hl-duration-long) var(--hl-ease-travel) both;
+  }
+}
+
+.hl-root .pop {
+  transform-box: fill-box;
+  transform-origin: 50%;
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  :where(.is-hidden) :is(.hl-root .pop) {
+    opacity: 0;
+  }
+
+  :where(.is-shown) :is(.hl-root .pop) {
+    animation: hl-pop var(--hl-duration-enter) var(--hl-ease-enter) both;
+    animation-delay: calc(var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-fine)));
+  }
+}
+
+.hl-root .from-right.grow-x {
+  transform-origin: 100%;
+}
+
+.hl-root .from-top.grow-y {
+  transform-origin: 50% 0;
+}
+
+.hl-root .-translate-x-1\/2 {
+  --hl-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--hl-tw-translate-x) var(--hl-tw-translate-y);
+}
+
+.hl-root .-translate-y-full {
+  --hl-tw-translate-y: -100%;
+  translate: var(--hl-tw-translate-x) var(--hl-tw-translate-y);
+}
+
+.hl-root .translate-y-3 {
+  --hl-tw-translate-y: calc(.25rem * 3);
+  translate: var(--hl-tw-translate-x) var(--hl-tw-translate-y);
+}
+
+.hl-root .transform {
+  transform: var(--hl-tw-rotate-x, ) var(--hl-tw-rotate-y, ) var(--hl-tw-rotate-z, ) var(--hl-tw-skew-x, ) var(--hl-tw-skew-y, );
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  .hl-root :where(.is-hidden) .fade {
+    opacity: 0;
+  }
+
+  .hl-root :where(.is-shown) .fade {
+    animation: hl-fade-in var(--hl-duration-enter) var(--hl-ease-enter) both;
+    animation-delay: calc(var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-mark)) + var(--hl-fade-lag));
+  }
+
+  .hl-root :where(.is-hidden) .draw {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1px;
+  }
+
+  .hl-root :where(.is-shown) .draw {
+    animation: hl-draw var(--hl-duration-long) var(--hl-ease-travel) backwards;
+    animation-delay: calc(var(--hl-i, 0) * var(--hl-stagger, var(--hl-stagger-series)));
+  }
+}
+
+.hl-root .cursor-ew-resize {
+  cursor: ew-resize;
+}
+
+.hl-root .cursor-grab {
+  cursor: grab;
+}
+
+.hl-root .cursor-grabbing {
+  cursor: grabbing;
+}
+
+.hl-root .cursor-pointer {
+  cursor: pointer;
+}
+
+.hl-root .touch-pan-y {
+  --hl-tw-pan-y: pan-y;
+  touch-action: var(--hl-tw-pan-x, ) var(--hl-tw-pan-y, ) var(--hl-tw-pinch-zoom, );
+}
+
+.hl-root .touch-none {
+  touch-action: none;
+}
+
+.hl-root .flex-col {
+  flex-direction: column;
+}
+
+.hl-root .items-center {
+  align-items: center;
+}
+
+.hl-root .justify-between {
+  justify-content: space-between;
+}
+
+.hl-root .justify-center {
+  justify-content: center;
+}
+
+.hl-root .gap-1 {
+  gap: .25rem;
+}
+
+.hl-root .gap-1\.5 {
+  gap: .375rem;
+}
+
+.hl-root .gap-4 {
+  gap: 1rem;
+}
+
+.hl-root .gap-8 {
+  gap: 2rem;
+}
+
+.hl-root .rounded-full {
+  border-radius: 3.40282e38px;
+}
+
+.hl-root .rounded-tip {
+  border-radius: 10px;
+}
+
+.hl-root .rounded-xs {
+  border-radius: .125rem;
+}
+
+.hl-root .border {
+  border-style: var(--hl-tw-border-style);
+  border-width: 1px;
+}
+
+.hl-root .border-0 {
+  border-style: var(--hl-tw-border-style);
+  border-width: 0;
+}
+
+.hl-root .border-ink {
+  border-color: var(--hl-ink);
+}
+
+.hl-root .border-rule {
+  border-color: var(--hl-rule);
+}
+
+.hl-root .bg-ink {
+  background-color: var(--hl-ink);
+}
+
+.hl-root .bg-panel {
+  background-color: var(--hl-panel);
+}
+
+.hl-root .bg-paper {
+  background-color: var(--hl-paper);
+}
+
+.hl-root .bg-transparent {
+  background-color: #0000;
+}
+
+.hl-root .t-figure {
+  fill: var(--hl-ink);
+  font-family: var(--hl-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  letter-spacing: -.02em;
+  font-variant-numeric: tabular-nums;
+  font-size: 30px;
+  font-weight: 600;
+}
+
+.hl-root .t-axis {
+  fill: var(--hl-muted);
+  font-family: var(--hl-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.hl-root .t-value {
+  fill: var(--hl-ink);
+  font-family: var(--hl-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.hl-root .t-label {
+  fill: var(--hl-text);
+  font-family: var(--hl-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.hl-root .fill-alert {
+  fill: var(--hl-alert);
+}
+
+.hl-root .fill-current {
+  fill: currentColor;
+}
+
+.hl-root .fill-faint {
+  fill: var(--hl-faint);
+}
+
+.hl-root .fill-hero {
+  fill: var(--hl-hero);
+}
+
+.hl-root .fill-ink {
+  fill: var(--hl-ink);
+}
+
+.hl-root .fill-l2 {
+  fill: var(--hl-l2);
+}
+
+.hl-root .fill-l3 {
+  fill: var(--hl-l3);
+}
+
+.hl-root .fill-l4 {
+  fill: var(--hl-l4);
+}
+
+.hl-root .fill-l5 {
+  fill: var(--hl-l5);
+}
+
+.hl-root .fill-muted {
+  fill: var(--hl-muted);
+}
+
+.hl-root .fill-none {
+  fill: none;
+}
+
+.hl-root .fill-paper {
+  fill: var(--hl-paper);
+}
+
+.hl-root .fill-text {
+  fill: var(--hl-text);
+}
+
+.hl-root .fill-transparent {
+  fill: #0000;
+}
+
+.hl-root .t-halo {
+  paint-order: stroke;
+  stroke: var(--hl-paper);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+.hl-root .grid-line {
+  stroke: var(--hl-grid);
+  stroke-width: 1px;
+  shape-rendering: crispedges;
+}
+
+.hl-root .hairline {
+  stroke: var(--hl-ink);
+  stroke-width: 1px;
+  shape-rendering: crispedges;
+}
+
+.hl-root .rule {
+  stroke: var(--hl-rule);
+  stroke-width: 1px;
+  shape-rendering: crispedges;
+}
+
+.hl-root .stroke-alert {
+  stroke: var(--hl-alert);
+}
+
+.hl-root .stroke-current {
+  stroke: currentColor;
+}
+
+.hl-root .stroke-faint {
+  stroke: var(--hl-faint);
+}
+
+.hl-root .stroke-grid {
+  stroke: var(--hl-grid);
+}
+
+.hl-root .stroke-hero {
+  stroke: var(--hl-hero);
+}
+
+.hl-root .stroke-ink {
+  stroke: var(--hl-ink);
+}
+
+.hl-root .stroke-l0 {
+  stroke: var(--hl-l0);
+}
+
+.hl-root .stroke-l1 {
+  stroke: var(--hl-l1);
+}
+
+.hl-root .stroke-l2 {
+  stroke: var(--hl-l2);
+}
+
+.hl-root .stroke-l3 {
+  stroke: var(--hl-l3);
+}
+
+.hl-root .stroke-l4 {
+  stroke: var(--hl-l4);
+}
+
+.hl-root .stroke-l5 {
+  stroke: var(--hl-l5);
+}
+
+.hl-root .stroke-l6 {
+  stroke: var(--hl-l6);
+}
+
+.hl-root .stroke-muted {
+  stroke: var(--hl-muted);
+}
+
+.hl-root .stroke-none {
+  stroke: none;
+}
+
+.hl-root .stroke-paper {
+  stroke: var(--hl-paper);
+}
+
+.hl-root .stroke-rule {
+  stroke: var(--hl-rule);
+}
+
+.hl-root .stroke-transparent {
+  stroke: #0000;
+}
+
+.hl-root .stroke-medium {
+  stroke-width: 1.5px;
+}
+
+.hl-root .p-0 {
+  padding: 0;
+}
+
+.hl-root .p-4 {
+  padding: 1rem;
+}
+
+.hl-root .px-2 {
+  padding-inline: .5rem;
+}
+
+.hl-root .px-2\.5 {
+  padding-inline: .625rem;
+}
+
+.hl-root .px-3 {
+  padding-inline: .75rem;
+}
+
+.hl-root .py-1\.75 {
+  padding-block: .4375rem;
+}
+
+.hl-root .py-3 {
+  padding-block: .75rem;
+}
+
+.hl-root .text-left {
+  text-align: left;
+}
+
+.hl-root .text-tick\/normal {
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.hl-root .text-small {
+  font-size: 13.5px;
+}
+
+.hl-root .text-tick {
+  font-size: 11px;
+}
+
+.hl-root .font-medium {
+  --hl-tw-font-weight: 500;
+  font-weight: 500;
+}
+
+.hl-root .whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.hl-root .text-muted {
+  color: var(--hl-muted);
+}
+
+.hl-root .text-paper {
+  color: var(--hl-paper);
+}
+
+.hl-root .text-text {
+  color: var(--hl-text);
+}
+
+.hl-root .tabular-nums {
+  --hl-tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--hl-tw-ordinal, ) var(--hl-tw-slashed-zero, ) var(--hl-tw-numeric-figure, ) var(--hl-tw-numeric-spacing, ) var(--hl-tw-numeric-fraction, );
+}
+
+.hl-root .opacity-30 {
+  opacity: .3;
+}
+
+.hl-root .opacity-55 {
+  opacity: .55;
+}
+
+.hl-root .shadow {
+  --hl-tw-shadow: 0 1px 3px 0 var(--hl-tw-shadow-color, #0000001a), 0 1px 2px -1px var(--hl-tw-shadow-color, #0000001a);
+  box-shadow: var(--hl-tw-inset-shadow), var(--hl-tw-inset-ring-shadow), var(--hl-tw-ring-offset-shadow), var(--hl-tw-ring-shadow), var(--hl-tw-shadow);
+}
+
+.hl-root .ring {
+  --hl-tw-ring-shadow: var(--hl-tw-ring-inset, ) 0 0 0 calc(1px + var(--hl-tw-ring-offset-width)) var(--hl-tw-ring-color, currentcolor);
+  box-shadow: var(--hl-tw-inset-shadow), var(--hl-tw-inset-ring-shadow), var(--hl-tw-ring-offset-shadow), var(--hl-tw-ring-shadow), var(--hl-tw-shadow);
+}
+
+.hl-root .outline {
+  outline-style: var(--hl-tw-outline-style);
+  outline-width: 1px;
+}
+
+.hl-root .transition-colors {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --hl-tw-gradient-from, --hl-tw-gradient-via, --hl-tw-gradient-to;
+  transition-timing-function: var(--hl-tw-ease, cubic-bezier(.4, 0, .2, 1));
+  transition-duration: var(--hl-tw-duration, .15s);
+}
+
+.hl-root .transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: var(--hl-tw-ease, cubic-bezier(.4, 0, .2, 1));
+  transition-duration: var(--hl-tw-duration, .15s);
+}
+
+.hl-root .transition-radius {
+  transition-property: r;
+  transition-timing-function: var(--hl-tw-ease, var(--hl-ease-tone));
+  transition-duration: var(--hl-tw-duration, var(--hl-duration-hover));
+}
+
+.hl-root .transition-tone {
+  transition-property: color, fill, stroke, opacity;
+  transition-timing-function: var(--hl-tw-ease, var(--hl-ease-tone));
+  transition-duration: var(--hl-tw-duration, var(--hl-duration-hover));
+}
+
+.hl-root .transition-transform {
+  transition-property: transform, translate, scale, rotate;
+  transition-timing-function: var(--hl-tw-ease, cubic-bezier(.4, 0, .2, 1));
+  transition-duration: var(--hl-tw-duration, .15s);
+}
+
+.hl-root .duration-change {
+  --hl-tw-duration: var(--hl-duration-change);
+  transition-duration: var(--hl-duration-change);
+}
+
+.hl-root .ease-enter {
+  --hl-tw-ease: var(--hl-ease-enter);
+  transition-timing-function: var(--hl-ease-enter);
+}
+
+.hl-root .ease-travel {
+  --hl-tw-ease: var(--hl-ease-travel);
+  transition-timing-function: var(--hl-ease-travel);
+}
+
+.hl-root .cap-round {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.hl-root .dash-rule {
+  stroke-dasharray: 4 3;
+}
+
+.hl-root .shape-crisp {
+  shape-rendering: crispedges;
+}
+
+.hl-root .shape-smooth {
+  shape-rendering: auto;
+}
+
+@media (hover: hover) {
+  .hl-root .group-hover\:border-faint:is(:where(.group):hover *) {
+    border-color: var(--hl-faint);
+  }
+}
+
+.hl-root .group-focus-visible\:outline-1:is(:where(.group):focus-visible *) {
+  outline-style: var(--hl-tw-outline-style);
+  outline-width: 1px;
+}
+
+.hl-root .group-focus-visible\:outline-offset-2:is(:where(.group):focus-visible *) {
+  outline-offset: 2px;
+}
+
+.hl-root .group-focus-visible\:outline-muted:is(:where(.group):focus-visible *) {
+  outline-color: var(--hl-muted);
+}
+
+.hl-root .group-data-\[focus\=true\]\/galaxy\:not-data-\[on\=true\]\:opacity-5:is(:where(.group\/galaxy)[data-focus="true"] *):not([data-on="true"]) {
+  opacity: .05;
+}
+
+.hl-root .group-data-\[focus\=true\]\/galaxy\:not-data-\[on\=true\]\:opacity-30:is(:where(.group\/galaxy)[data-focus="true"] *):not([data-on="true"]) {
+  opacity: .3;
+}
+
+.hl-root .group-data-\[focus\=true\]\/map\:opacity-30:is(:where(.group\/map)[data-focus="true"] *) {
+  opacity: .3;
+}
+
+.hl-root .group-data-\[focus\=true\]\/ring\:opacity-30:is(:where(.group\/ring)[data-focus="true"] *) {
+  opacity: .3;
+}
+
+.hl-root .group-data-\[focus\=true\]\/threads\:opacity-30:is(:where(.group\/threads)[data-focus="true"] *) {
+  opacity: .3;
+}
+
+.hl-root .group-data-\[plate\=true\]\/hub\:hidden:is(:where(.group\/hub)[data-plate="true"] *) {
+  display: none;
+}
+
+.hl-root .group-data-\[plate\=true\]\/hub\:inline:is(:where(.group\/hub)[data-plate="true"] *) {
+  display: inline;
+}
+
+@media (hover: hover) {
+  .hl-root .hover\:text-text:hover {
+    color: var(--hl-text);
+  }
+}
+
+.hl-root .focus-visible\:outline-1:focus-visible {
+  outline-style: var(--hl-tw-outline-style);
+  outline-width: 1px;
+}
+
+.hl-root .focus-visible\:-outline-offset-8:focus-visible {
+  outline-offset: calc(8px * -1);
+}
+
+.hl-root .focus-visible\:outline-muted:focus-visible {
+  outline-color: var(--hl-muted);
+}
+
+.hl-root .focus-visible\:outline-none:focus-visible {
+  --hl-tw-outline-style: none;
+  outline-style: none;
+}
+
+.hl-root .focus-visible\:outline-solid:focus-visible {
+  --hl-tw-outline-style: solid;
+  outline-style: solid;
+}
+
+.hl-root .active\:cursor-grabbing:active {
+  cursor: grabbing;
+}
+
+.hl-root .data-\[dragging\=true\]\:cursor-grabbing[data-dragging="true"] {
+  cursor: grabbing;
+}
+
+.hl-root .data-\[on\=true\]\:stroke-ink[data-on="true"] {
+  stroke: var(--hl-ink);
+}
+
+.hl-root .\[\&_b\]\:font-semibold b {
+  --hl-tw-font-weight: 600;
+  font-weight: 600;
+}
+
+.hl-root .\[\&_svg\]\:block svg {
+  display: block;
+}
+
+.hl-root .\[\&_svg\]\:overflow-visible svg {
+  overflow: visible;
+}
+
+.hl-root .\[\&_svg\]\:select-none svg {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.hl-root .\[\&_svg\:focus\]\:outline-none svg:focus {
+  --hl-tw-outline-style: none;
+  outline-style: none;
+}
+
+.hl-root .\[\&_svg\:focus-visible\]\:outline-1 svg:focus-visible {
+  outline-style: var(--hl-tw-outline-style);
+  outline-width: 1px;
+}
+
+.hl-root .\[\&_svg\:focus-visible\]\:outline-offset-4 svg:focus-visible {
+  outline-offset: 4px;
+}
+
+.hl-root .\[\&_svg\:focus-visible\]\:outline-muted svg:focus-visible {
+  outline-color: var(--hl-muted);
+}
+
+.hl-root .\[\&_svg\:focus-visible\]\:outline-solid svg:focus-visible {
+  --hl-tw-outline-style: solid;
+  outline-style: solid;
+}
+
+.hl-root .\[\&\:has\(\+\:popover-open\)\]\:text-text:has( + :popover-open) {
+  color: var(--hl-text);
+}
+
+@keyframes hl-grow-y {
+  from {
+    transform: scaleY(0);
+  }
+}
+
+@keyframes hl-grow-x {
+  from {
+    transform: scaleX(0);
+  }
+}
+
+@keyframes hl-pop {
+  from {
+    opacity: 0;
+    transform: scale(.95);
+  }
+}
+
+@keyframes hl-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes hl-draw {
+  from {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1px;
+  }
+
+  to {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+.hl-root .is-still {
+  animation: none;
+}
+
+@position-try --hl-note-scroll {
+  position-area: bottom span-left;
+  max-height: calc(100% - 1.5rem);
+}
+
+.hl-root svg[data-hl-strokes="device"] * {
+  vector-effect: non-scaling-stroke;
+}
+
+@property --hl-tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --hl-tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --hl-tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --hl-tw-rotate-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-rotate-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-rotate-z {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-skew-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-skew-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-pan-x {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-pan-y {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-pinch-zoom {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --hl-tw-font-weight {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-ordinal {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-slashed-zero {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-numeric-figure {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-numeric-spacing {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-numeric-fraction {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --hl-tw-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --hl-tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --hl-tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --hl-tw-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --hl-tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --hl-tw-ring-inset {
+  syntax: "*";
+  inherits: false
+}
+
+@property --hl-tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --hl-tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+
+@property --hl-tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+
+@property --hl-tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+
+@property --hl-tw-ease {
+  syntax: "*";
+  inherits: false
+}