gap-inspector 0.1.0 → 0.2.1

package/dist/styles.d.ts

@@ -1 +0,0 @@
-export declare const gapInspectorStyles = "\n.gi-root,\n.gi-svg {\n  --gi-chrome: #131313;\n  --gi-surface: #1a1a1a;\n  --gi-well: #0d0d0d;\n  --gi-text: #f7f7f7;\n  --gi-text-secondary: #c2c6cc;\n  --gi-text-muted: #8a9099;\n  --gi-hairline: rgba(255, 255, 255, 0.09);\n  --gi-hairline-soft: rgba(255, 255, 255, 0.05);\n  --gi-accent: #12a0f0;\n  --gi-danger: #f04438;\n  --gi-amber: #f5a623;\n  --gi-margin: #f5a623;\n  --gi-padding: #4ade80;\n  --gi-border-kind: #f87171;\n  --gi-scrollbar: #2dd4bf;\n  --gi-gap-kind: #a78bfa;\n  --gi-layout: #9ba1a8;\n  --gi-content: #12a0f0;\n  --gi-unknown: #ec4899;\n  --gi-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.06),\n    0 1px 2px rgba(0, 0, 0, 0.6),\n    0 32px 70px -16px rgba(0, 0, 0, 0.75);\n  --gi-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Inter\", sans-serif;\n  --gi-mono: ui-monospace, \"SF Mono\", \"JetBrains Mono\", Menlo, Consolas, monospace;\n}\n\n.gi-root {\n  color: var(--gi-text);\n  font-family: var(--gi-font);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-synthesis: none;\n  position: fixed;\n  inset: 0;\n  z-index: 2147483647;\n  pointer-events: none;\n}\n\n.gi-button {\n  align-items: center;\n  background: var(--gi-chrome);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 10px;\n  bottom: 18px;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.06),\n    0 1px 2px rgba(0, 0, 0, 0.6),\n    0 12px 32px -8px rgba(0, 0, 0, 0.6);\n  color: var(--gi-text);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  font-size: 12.5px;\n  font-weight: 500;\n  gap: 8px;\n  height: 34px;\n  padding: 0 14px;\n  pointer-events: auto;\n  position: fixed;\n  right: 18px;\n  touch-action: none;\n  transition: border-color 120ms ease, background-color 120ms ease;\n}\n\n.gi-button:hover {\n  background: #181818;\n  border-color: rgba(255, 255, 255, 0.16);\n}\n\n.gi-button-mark {\n  background: var(--gi-accent);\n  border-radius: 999px;\n  box-shadow: 0 0 8px rgba(18, 160, 240, 0.8);\n  display: inline-block;\n  height: 6px;\n  width: 6px;\n}\n\n.gi-panel {\n  background: var(--gi-chrome);\n  border-radius: 14px;\n  bottom: 18px;\n  box-shadow: var(--gi-shadow);\n  display: flex;\n  flex-direction: column;\n  max-height: min(560px, calc(100vh - 36px));\n  overflow: clip;\n  padding: 4px;\n  pointer-events: auto;\n  position: fixed;\n  right: 18px;\n  width: min(400px, calc(100vw - 36px));\n}\n\n.gi-body {\n  background: var(--gi-surface);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 10px;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: clip;\n}\n\n.gi-header {\n  align-items: center;\n  border-bottom: 1px solid var(--gi-hairline-soft);\n  cursor: grab;\n  display: flex;\n  flex-shrink: 0;\n  justify-content: space-between;\n  padding: 11px 11px 11px 14px;\n  touch-action: none;\n  user-select: none;\n}\n\n.gi-header:active {\n  cursor: grabbing;\n}\n\n.gi-header .gi-close {\n  cursor: pointer;\n}\n\n.gi-title {\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  line-height: 16px;\n}\n\n.gi-close {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 7px;\n  color: var(--gi-text-muted);\n  cursor: pointer;\n  display: inline-flex;\n  height: 24px;\n  justify-content: center;\n  padding: 0;\n  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;\n  width: 24px;\n}\n\n.gi-close:hover {\n  background: rgba(255, 255, 255, 0.06);\n  border-color: var(--gi-hairline);\n  color: var(--gi-text-secondary);\n}\n\n.gi-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 14px;\n}\n\n.gi-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.gi-content::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.12);\n  background-clip: padding-box;\n  border: 2px solid transparent;\n  border-radius: 999px;\n}\n\n.gi-empty {\n  color: var(--gi-text-muted);\n  display: flex;\n  flex-direction: column;\n  font-size: 12.5px;\n  gap: 12px;\n  line-height: 1.55;\n}\n\n.gi-empty p {\n  margin: 0;\n}\n\n.gi-hint {\n  align-items: center;\n  color: var(--gi-text-muted);\n  display: flex;\n  font-size: 12px;\n  gap: 8px;\n}\n\n.gi-kbd {\n  align-items: center;\n  background: var(--gi-well);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 5px;\n  color: var(--gi-text-secondary);\n  display: inline-flex;\n  flex-shrink: 0;\n  font-size: 11px;\n  height: 18px;\n  justify-content: center;\n  line-height: 1;\n  min-width: 18px;\n  padding: 0 4px;\n}\n\n.gi-footer {\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  gap: 8px;\n  justify-content: flex-end;\n  padding: 8px 6px 4px;\n}\n\n.gi-ghost,\n.gi-primary {\n  appearance: none;\n  border: 0;\n  border-radius: 8px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 12.5px;\n  line-height: 16px;\n  padding: 7px 12px;\n  transition: background-color 120ms ease, filter 120ms ease;\n}\n\n.gi-ghost {\n  background: transparent;\n  color: var(--gi-text-secondary);\n  font-weight: 500;\n}\n\n.gi-ghost:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.gi-primary {\n  background: var(--gi-accent);\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.24),\n    0 1px 2px rgba(0, 0, 0, 0.45);\n  color: #ffffff;\n  font-weight: 600;\n}\n\n.gi-primary:hover {\n  filter: brightness(1.08);\n}\n\n.gi-primary[data-state=\"failed\"] {\n  background: var(--gi-danger);\n}\n\n.gi-report-title {\n  align-items: baseline;\n  display: flex;\n  gap: 7px;\n}\n\n.gi-metric {\n  color: var(--gi-kind-color, var(--gi-text));\n  font-family: var(--gi-mono);\n  font-size: 18px;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  line-height: 22px;\n}\n\n.gi-metric-axis {\n  color: var(--gi-text-muted);\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.gi-bar {\n  display: flex;\n  gap: 2px;\n  height: 14px;\n}\n\n.gi-bar-segment {\n  background: var(--gi-kind-color, var(--gi-layout));\n  background-clip: padding-box;\n  border-block: 4px solid transparent;\n  border-radius: 6px;\n  box-sizing: border-box;\n  flex-basis: 0;\n  min-width: 3px;\n}\n\n.gi-bar-segment:hover {\n  filter: brightness(1.25);\n}\n\n.gi-bar-unattributed {\n  background: repeating-linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.28) 0 2px,\n    rgba(255, 255, 255, 0.08) 2px 5px\n  );\n}\n\n.gi-equation {\n  background: var(--gi-well);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 9px;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);\n  color: var(--gi-text);\n  font-family: var(--gi-mono);\n  font-size: 11.5px;\n  font-variant-numeric: tabular-nums;\n  line-height: 1.6;\n  overflow-wrap: anywhere;\n  padding: 9px 11px;\n}\n\n.gi-caps {\n  color: var(--gi-text-muted);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.gi-contribs {\n  display: flex;\n  flex-direction: column;\n}\n\n.gi-contribs .gi-caps {\n  margin-bottom: 2px;\n}\n\n.gi-contrib {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 9px 1px;\n}\n\n.gi-contrib + .gi-contrib {\n  border-top: 1px solid var(--gi-hairline-soft);\n}\n\n.gi-contrib:hover {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n.gi-contrib-row {\n  align-items: center;\n  display: flex;\n  gap: 8px;\n}\n\n.gi-kind-label {\n  background: color-mix(in srgb, var(--gi-kind-color) 15%, transparent);\n  border-radius: 5px;\n  color: var(--gi-kind-color);\n  flex-shrink: 0;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  line-height: 1;\n  padding: 4px 6px;\n  text-transform: uppercase;\n}\n\n.gi-contrib-prop {\n  color: var(--gi-text);\n  flex: 1;\n  font-size: 12px;\n  font-weight: 500;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.gi-contrib-css {\n  color: var(--gi-text-muted);\n  font-family: var(--gi-mono);\n  font-size: 11px;\n  font-weight: 400;\n}\n\n.gi-contrib-value {\n  color: var(--gi-text);\n  flex-shrink: 0;\n  font-family: var(--gi-mono);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n  margin-left: auto;\n}\n\n.gi-contrib-note {\n  color: var(--gi-text-muted);\n  font-size: 11.5px;\n  line-height: 1.5;\n}\n\n.gi-warning {\n  background: color-mix(in srgb, var(--gi-amber) 9%, transparent);\n  border: 1px solid color-mix(in srgb, var(--gi-amber) 28%, transparent);\n  border-radius: 9px;\n  color: #f2c069;\n  font-size: 11.5px;\n  line-height: 1.55;\n  padding: 8px 11px;\n}\n\n.gi-hovercard {\n  background: var(--gi-surface);\n  border: 1px solid var(--gi-hairline);\n  border-radius: 10px;\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, 0.06),\n    0 8px 24px rgba(0, 0, 0, 0.55);\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 10px 11px;\n  pointer-events: none;\n  position: fixed;\n  z-index: 10;\n}\n\n.gi-hovercard-row {\n  align-items: center;\n  display: flex;\n  gap: 8px;\n}\n\n.gi-hovercard-prop {\n  color: var(--gi-text);\n  flex: 1;\n  font-size: 12px;\n  font-weight: 500;\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.gi-hovercard-value {\n  color: var(--gi-text);\n  flex-shrink: 0;\n  font-family: var(--gi-mono);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  font-weight: 600;\n}\n\n.gi-hovercard-selector {\n  color: #dfe2e6;\n  font-family: var(--gi-mono);\n  font-size: 10.5px;\n  line-height: 1.5;\n  overflow-wrap: anywhere;\n}\n\n.gi-hovercard-meta {\n  color: var(--gi-text-muted);\n  font-family: var(--gi-mono);\n  font-size: 10.5px;\n}\n\n.gi-hovercard-note {\n  color: var(--gi-text-muted);\n  font-size: 11px;\n  line-height: 1.5;\n}\n\n.gi-canvas {\n  cursor: crosshair;\n  inset: 0;\n  pointer-events: auto;\n  position: fixed;\n  touch-action: none;\n}\n\n.gi-canvas[data-passthrough=\"true\"] {\n  pointer-events: none;\n}\n\n.gi-svg {\n  left: 0;\n  overflow: visible;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  z-index: 2147483646;\n}\n\n.gi-line {\n  stroke: var(--gi-accent);\n  stroke-dasharray: 5 5;\n  stroke-linecap: round;\n  stroke-width: 1.5;\n}\n\n.gi-gap-band {\n  fill: rgba(18, 160, 240, 0.16);\n  stroke: rgba(18, 160, 240, 0.8);\n  stroke-width: 1;\n}\n\n.gi-preview-gap {\n  fill: rgba(18, 160, 240, 0.1);\n  stroke-dasharray: 4 4;\n}\n\n.gi-element-box {\n  fill: rgba(18, 160, 240, 0.06);\n  stroke: rgba(18, 160, 240, 0.85);\n  stroke-width: 1;\n}\n\n.gi-preview-box {\n  fill: rgba(18, 160, 240, 0.03);\n  stroke-dasharray: 7 4;\n}\n\n.gi-contributor-box {\n  fill: color-mix(in srgb, var(--gi-kind-color) 38%, transparent);\n  stroke: color-mix(in srgb, var(--gi-kind-color) 85%, transparent);\n  stroke-width: 1;\n}\n\n.gi-preview-contributor {\n  opacity: 0.62;\n}\n\n.gi-series-box {\n  fill: color-mix(in srgb, var(--gi-kind-color) 5%, transparent);\n  opacity: 0.34;\n  stroke: var(--gi-kind-color);\n  stroke-dasharray: 2 6;\n  stroke-width: 1;\n}\n\n.gi-preview-series {\n  opacity: 0.2;\n}\n\n.gi-edge-marker {\n  fill: var(--gi-accent);\n  stroke: none;\n}\n\n.gi-preview-edge {\n  fill: rgba(18, 160, 240, 0.85);\n}\n\n.gi-from-edge {\n  opacity: 0.92;\n}\n\n.gi-to-edge {\n  opacity: 0.92;\n}\n\n.gi-kind-margin {\n  --gi-kind-color: var(--gi-margin);\n}\n\n.gi-kind-padding {\n  --gi-kind-color: var(--gi-padding);\n}\n\n.gi-kind-border {\n  --gi-kind-color: var(--gi-border-kind);\n}\n\n.gi-kind-scrollbar {\n  --gi-kind-color: var(--gi-scrollbar);\n}\n\n.gi-kind-gap {\n  --gi-kind-color: var(--gi-gap-kind);\n}\n\n.gi-kind-layout {\n  --gi-kind-color: var(--gi-layout);\n}\n\n.gi-kind-content {\n  --gi-kind-color: var(--gi-content);\n}\n\n.gi-kind-unknown {\n  --gi-kind-color: var(--gi-unknown);\n}\n\n.gi-hover-box {\n  fill: color-mix(in srgb, var(--gi-kind-color) 35%, transparent);\n  stroke: var(--gi-kind-color);\n  stroke-width: 1.5;\n}\n\n.gi-point-region {\n  fill: color-mix(in srgb, var(--gi-kind-color) 20%, transparent);\n  stroke: var(--gi-kind-color);\n  stroke-dasharray: 5 3;\n  stroke-width: 1.5;\n}\n\n.gi-point-dot {\n  fill: var(--gi-kind-color);\n  stroke: #131313;\n  stroke-width: 2;\n}\n";

package/dist/styles.js

@@ -1,620 +0,0 @@
-export const gapInspectorStyles = `
-.gi-root,
-.gi-svg {
-  --gi-chrome: #131313;
-  --gi-surface: #1a1a1a;
-  --gi-well: #0d0d0d;
-  --gi-text: #f7f7f7;
-  --gi-text-secondary: #c2c6cc;
-  --gi-text-muted: #8a9099;
-  --gi-hairline: rgba(255, 255, 255, 0.09);
-  --gi-hairline-soft: rgba(255, 255, 255, 0.05);
-  --gi-accent: #12a0f0;
-  --gi-danger: #f04438;
-  --gi-amber: #f5a623;
-  --gi-margin: #f5a623;
-  --gi-padding: #4ade80;
-  --gi-border-kind: #f87171;
-  --gi-scrollbar: #2dd4bf;
-  --gi-gap-kind: #a78bfa;
-  --gi-layout: #9ba1a8;
-  --gi-content: #12a0f0;
-  --gi-unknown: #ec4899;
-  --gi-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 1px 2px rgba(0, 0, 0, 0.6),
-    0 32px 70px -16px rgba(0, 0, 0, 0.75);
-  --gi-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;
-  --gi-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
-}
-
-.gi-root {
-  color: var(--gi-text);
-  font-family: var(--gi-font);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-synthesis: none;
-  position: fixed;
-  inset: 0;
-  z-index: 2147483647;
-  pointer-events: none;
-}
-
-.gi-button {
-  align-items: center;
-  background: var(--gi-chrome);
-  border: 1px solid var(--gi-hairline);
-  border-radius: 10px;
-  bottom: 18px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 1px 2px rgba(0, 0, 0, 0.6),
-    0 12px 32px -8px rgba(0, 0, 0, 0.6);
-  color: var(--gi-text);
-  cursor: pointer;
-  display: inline-flex;
-  font: inherit;
-  font-size: 12.5px;
-  font-weight: 500;
-  gap: 8px;
-  height: 34px;
-  padding: 0 14px;
-  pointer-events: auto;
-  position: fixed;
-  right: 18px;
-  touch-action: none;
-  transition: border-color 120ms ease, background-color 120ms ease;
-}
-
-.gi-button:hover {
-  background: #181818;
-  border-color: rgba(255, 255, 255, 0.16);
-}
-
-.gi-button-mark {
-  background: var(--gi-accent);
-  border-radius: 999px;
-  box-shadow: 0 0 8px rgba(18, 160, 240, 0.8);
-  display: inline-block;
-  height: 6px;
-  width: 6px;
-}
-
-.gi-panel {
-  background: var(--gi-chrome);
-  border-radius: 14px;
-  bottom: 18px;
-  box-shadow: var(--gi-shadow);
-  display: flex;
-  flex-direction: column;
-  max-height: min(560px, calc(100vh - 36px));
-  overflow: clip;
-  padding: 4px;
-  pointer-events: auto;
-  position: fixed;
-  right: 18px;
-  width: min(400px, calc(100vw - 36px));
-}
-
-.gi-body {
-  background: var(--gi-surface);
-  border: 1px solid var(--gi-hairline);
-  border-radius: 10px;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: clip;
-}
-
-.gi-header {
-  align-items: center;
-  border-bottom: 1px solid var(--gi-hairline-soft);
-  cursor: grab;
-  display: flex;
-  flex-shrink: 0;
-  justify-content: space-between;
-  padding: 11px 11px 11px 14px;
-  touch-action: none;
-  user-select: none;
-}
-
-.gi-header:active {
-  cursor: grabbing;
-}
-
-.gi-header .gi-close {
-  cursor: pointer;
-}
-
-.gi-title {
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  line-height: 16px;
-}
-
-.gi-close {
-  align-items: center;
-  appearance: none;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  color: var(--gi-text-muted);
-  cursor: pointer;
-  display: inline-flex;
-  height: 24px;
-  justify-content: center;
-  padding: 0;
-  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
-  width: 24px;
-}
-
-.gi-close:hover {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: var(--gi-hairline);
-  color: var(--gi-text-secondary);
-}
-
-.gi-content {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 14px;
-}
-
-.gi-content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.gi-content::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.12);
-  background-clip: padding-box;
-  border: 2px solid transparent;
-  border-radius: 999px;
-}
-
-.gi-empty {
-  color: var(--gi-text-muted);
-  display: flex;
-  flex-direction: column;
-  font-size: 12.5px;
-  gap: 12px;
-  line-height: 1.55;
-}
-
-.gi-empty p {
-  margin: 0;
-}
-
-.gi-hint {
-  align-items: center;
-  color: var(--gi-text-muted);
-  display: flex;
-  font-size: 12px;
-  gap: 8px;
-}
-
-.gi-kbd {
-  align-items: center;
-  background: var(--gi-well);
-  border: 1px solid var(--gi-hairline);
-  border-radius: 5px;
-  color: var(--gi-text-secondary);
-  display: inline-flex;
-  flex-shrink: 0;
-  font-size: 11px;
-  height: 18px;
-  justify-content: center;
-  line-height: 1;
-  min-width: 18px;
-  padding: 0 4px;
-}
-
-.gi-footer {
-  align-items: center;
-  display: flex;
-  flex-shrink: 0;
-  gap: 8px;
-  justify-content: flex-end;
-  padding: 8px 6px 4px;
-}
-
-.gi-ghost,
-.gi-primary {
-  appearance: none;
-  border: 0;
-  border-radius: 8px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12.5px;
-  line-height: 16px;
-  padding: 7px 12px;
-  transition: background-color 120ms ease, filter 120ms ease;
-}
-
-.gi-ghost {
-  background: transparent;
-  color: var(--gi-text-secondary);
-  font-weight: 500;
-}
-
-.gi-ghost:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.gi-primary {
-  background: var(--gi-accent);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.24),
-    0 1px 2px rgba(0, 0, 0, 0.45);
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.gi-primary:hover {
-  filter: brightness(1.08);
-}
-
-.gi-primary[data-state="failed"] {
-  background: var(--gi-danger);
-}
-
-.gi-report-title {
-  align-items: baseline;
-  display: flex;
-  gap: 7px;
-}
-
-.gi-metric {
-  color: var(--gi-kind-color, var(--gi-text));
-  font-family: var(--gi-mono);
-  font-size: 18px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-  line-height: 22px;
-}
-
-.gi-metric-axis {
-  color: var(--gi-text-muted);
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.gi-bar {
-  display: flex;
-  gap: 2px;
-  height: 14px;
-}
-
-.gi-bar-segment {
-  background: var(--gi-kind-color, var(--gi-layout));
-  background-clip: padding-box;
-  border-block: 4px solid transparent;
-  border-radius: 6px;
-  box-sizing: border-box;
-  flex-basis: 0;
-  min-width: 3px;
-}
-
-.gi-bar-segment:hover {
-  filter: brightness(1.25);
-}
-
-.gi-bar-unattributed {
-  background: repeating-linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.28) 0 2px,
-    rgba(255, 255, 255, 0.08) 2px 5px
-  );
-}
-
-.gi-equation {
-  background: var(--gi-well);
-  border: 1px solid var(--gi-hairline);
-  border-radius: 9px;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-  color: var(--gi-text);
-  font-family: var(--gi-mono);
-  font-size: 11.5px;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.6;
-  overflow-wrap: anywhere;
-  padding: 9px 11px;
-}
-
-.gi-caps {
-  color: var(--gi-text-muted);
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.gi-contribs {
-  display: flex;
-  flex-direction: column;
-}
-
-.gi-contribs .gi-caps {
-  margin-bottom: 2px;
-}
-
-.gi-contrib {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 9px 1px;
-}
-
-.gi-contrib + .gi-contrib {
-  border-top: 1px solid var(--gi-hairline-soft);
-}
-
-.gi-contrib:hover {
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.gi-contrib-row {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-}
-
-.gi-kind-label {
-  background: color-mix(in srgb, var(--gi-kind-color) 15%, transparent);
-  border-radius: 5px;
-  color: var(--gi-kind-color);
-  flex-shrink: 0;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  padding: 4px 6px;
-  text-transform: uppercase;
-}
-
-.gi-contrib-prop {
-  color: var(--gi-text);
-  flex: 1;
-  font-size: 12px;
-  font-weight: 500;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.gi-contrib-css {
-  color: var(--gi-text-muted);
-  font-family: var(--gi-mono);
-  font-size: 11px;
-  font-weight: 400;
-}
-
-.gi-contrib-value {
-  color: var(--gi-text);
-  flex-shrink: 0;
-  font-family: var(--gi-mono);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-  margin-left: auto;
-}
-
-.gi-contrib-note {
-  color: var(--gi-text-muted);
-  font-size: 11.5px;
-  line-height: 1.5;
-}
-
-.gi-warning {
-  background: color-mix(in srgb, var(--gi-amber) 9%, transparent);
-  border: 1px solid color-mix(in srgb, var(--gi-amber) 28%, transparent);
-  border-radius: 9px;
-  color: #f2c069;
-  font-size: 11.5px;
-  line-height: 1.55;
-  padding: 8px 11px;
-}
-
-.gi-hovercard {
-  background: var(--gi-surface);
-  border: 1px solid var(--gi-hairline);
-  border-radius: 10px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 8px 24px rgba(0, 0, 0, 0.55);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px 11px;
-  pointer-events: none;
-  position: fixed;
-  z-index: 10;
-}
-
-.gi-hovercard-row {
-  align-items: center;
-  display: flex;
-  gap: 8px;
-}
-
-.gi-hovercard-prop {
-  color: var(--gi-text);
-  flex: 1;
-  font-size: 12px;
-  font-weight: 500;
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.gi-hovercard-value {
-  color: var(--gi-text);
-  flex-shrink: 0;
-  font-family: var(--gi-mono);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  font-weight: 600;
-}
-
-.gi-hovercard-selector {
-  color: #dfe2e6;
-  font-family: var(--gi-mono);
-  font-size: 10.5px;
-  line-height: 1.5;
-  overflow-wrap: anywhere;
-}
-
-.gi-hovercard-meta {
-  color: var(--gi-text-muted);
-  font-family: var(--gi-mono);
-  font-size: 10.5px;
-}
-
-.gi-hovercard-note {
-  color: var(--gi-text-muted);
-  font-size: 11px;
-  line-height: 1.5;
-}
-
-.gi-canvas {
-  cursor: crosshair;
-  inset: 0;
-  pointer-events: auto;
-  position: fixed;
-  touch-action: none;
-}
-
-.gi-canvas[data-passthrough="true"] {
-  pointer-events: none;
-}
-
-.gi-svg {
-  left: 0;
-  overflow: visible;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  z-index: 2147483646;
-}
-
-.gi-line {
-  stroke: var(--gi-accent);
-  stroke-dasharray: 5 5;
-  stroke-linecap: round;
-  stroke-width: 1.5;
-}
-
-.gi-gap-band {
-  fill: rgba(18, 160, 240, 0.16);
-  stroke: rgba(18, 160, 240, 0.8);
-  stroke-width: 1;
-}
-
-.gi-preview-gap {
-  fill: rgba(18, 160, 240, 0.1);
-  stroke-dasharray: 4 4;
-}
-
-.gi-element-box {
-  fill: rgba(18, 160, 240, 0.06);
-  stroke: rgba(18, 160, 240, 0.85);
-  stroke-width: 1;
-}
-
-.gi-preview-box {
-  fill: rgba(18, 160, 240, 0.03);
-  stroke-dasharray: 7 4;
-}
-
-.gi-contributor-box {
-  fill: color-mix(in srgb, var(--gi-kind-color) 38%, transparent);
-  stroke: color-mix(in srgb, var(--gi-kind-color) 85%, transparent);
-  stroke-width: 1;
-}
-
-.gi-preview-contributor {
-  opacity: 0.62;
-}
-
-.gi-series-box {
-  fill: color-mix(in srgb, var(--gi-kind-color) 5%, transparent);
-  opacity: 0.34;
-  stroke: var(--gi-kind-color);
-  stroke-dasharray: 2 6;
-  stroke-width: 1;
-}
-
-.gi-preview-series {
-  opacity: 0.2;
-}
-
-.gi-edge-marker {
-  fill: var(--gi-accent);
-  stroke: none;
-}
-
-.gi-preview-edge {
-  fill: rgba(18, 160, 240, 0.85);
-}
-
-.gi-from-edge {
-  opacity: 0.92;
-}
-
-.gi-to-edge {
-  opacity: 0.92;
-}
-
-.gi-kind-margin {
-  --gi-kind-color: var(--gi-margin);
-}
-
-.gi-kind-padding {
-  --gi-kind-color: var(--gi-padding);
-}
-
-.gi-kind-border {
-  --gi-kind-color: var(--gi-border-kind);
-}
-
-.gi-kind-scrollbar {
-  --gi-kind-color: var(--gi-scrollbar);
-}
-
-.gi-kind-gap {
-  --gi-kind-color: var(--gi-gap-kind);
-}
-
-.gi-kind-layout {
-  --gi-kind-color: var(--gi-layout);
-}
-
-.gi-kind-content {
-  --gi-kind-color: var(--gi-content);
-}
-
-.gi-kind-unknown {
-  --gi-kind-color: var(--gi-unknown);
-}
-
-.gi-hover-box {
-  fill: color-mix(in srgb, var(--gi-kind-color) 35%, transparent);
-  stroke: var(--gi-kind-color);
-  stroke-width: 1.5;
-}
-
-.gi-point-region {
-  fill: color-mix(in srgb, var(--gi-kind-color) 20%, transparent);
-  stroke: var(--gi-kind-color);
-  stroke-dasharray: 5 3;
-  stroke-width: 1.5;
-}
-
-.gi-point-dot {
-  fill: var(--gi-kind-color);
-  stroke: #131313;
-  stroke-width: 2;
-}
-`;