@undevy-org/tablewright 0.1.0

package/dist/tablewright.css

@@ -0,0 +1,1579 @@
+/* @undevy-org/tablewright — scoped reset, component globals and utilities. Generated by scripts/build-css.mjs; do not edit. */
+/* Scoped element reset.
+ *
+ * Tailwind's own preflight is a global reset: it rewrites margins, list styles,
+ * heading sizes and form-control appearance for every element on the page. That
+ * is correct for a standalone app and wrong for a library dropped into a host
+ * that already has its own reset, so the package ships this instead — the same
+ * normalisation, confined to a `.tablewright` subtree.
+ *
+ * Specificity here is exact, and both halves of it are load-bearing.
+ *
+ *   - The scope class is a REAL class, not `:where(.tablewright)`. A host reset
+ *     addresses elements directly — code_admin's has
+ *     `button, input, optgroup, select, textarea { border: none }` at (0,0,1) —
+ *     and a zero-specificity reset loses to it. That is not theoretical: with
+ *     the scope wrapped in `:where()`, every input, button and select in the kit
+ *     rendered with no border at all inside that app, silently, with all build
+ *     checks green.
+ *   - The element half stays inside `:where()`, so each selector lands at
+ *     exactly (0,1,0) — the same specificity as a single utility class. Since
+ *     this file is concatenated ahead of the utilities, a utility always wins on
+ *     source order, and a host rule that only names elements always loses.
+ *
+ * Keep every selector at one class plus a `:where()` element list. Adding a
+ * second class, or naming an element outside `:where()`, would start beating the
+ * utilities; dropping the class would start losing to the host.
+ *
+ * The border block is not cosmetic. Tailwind's `border` / `border-b` utilities
+ * set border-WIDTH only; `border-style: solid` comes from preflight alone, and
+ * the CSS initial value is `none`. Without these four lines every border in the
+ * library renders invisible.
+ *
+ * Radix portals (dropdown, popover, dialog, select) mount outside the React
+ * tree, so pass a container that lives inside the `.tablewright` element via
+ * `PortalContainerContext` — otherwise portalled content lands on document.body
+ * and is not covered by anything below.
+ */
+
+.tablewright,
+.tablewright :where(*),
+.tablewright :where(*)::before,
+.tablewright :where(*)::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--border-subtle, #e5e7eb);
+}
+
+/* Typographic base for the subtree. The library sizes most text explicitly, but
+ * unsized text and line-height must not inherit the host's body rules — a host
+ * `line-height: 1` collapses every control in the kit. */
+.tablewright {
+  font-family: var(--font-stack, ui-sans-serif, system-ui, sans-serif);
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--text-primary, #111827);
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+.tablewright :where(h1, h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+.tablewright :where(p, figure, blockquote, dl, dd, hr, pre) {
+  margin: 0;
+}
+
+.tablewright :where(ul, ol) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.tablewright :where(hr) {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+.tablewright :where(a) {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.tablewright :where(b, strong) {
+  font-weight: bolder;
+}
+
+.tablewright :where(code, kbd, samp, pre) {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 1em;
+}
+
+.tablewright :where(small) {
+  font-size: 80%;
+}
+
+.tablewright :where(button, input, optgroup, select, textarea) {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.tablewright :where(button, [type="button"], [type="reset"], [type="submit"]) {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+.tablewright :where(button, [role="button"]) {
+  cursor: pointer;
+}
+
+.tablewright :where(:disabled) {
+  cursor: default;
+}
+
+.tablewright :where(input::placeholder, textarea::placeholder) {
+  opacity: 1;
+  color: var(--text-tertiary, #9ca3af);
+}
+
+.tablewright :where(::-webkit-search-decoration) {
+  -webkit-appearance: none;
+}
+
+.tablewright :where(fieldset, legend) {
+  margin: 0;
+  padding: 0;
+}
+
+.tablewright :where(table) {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+.tablewright :where(img, svg, video, canvas, audio, iframe, embed, object) {
+  display: block;
+  vertical-align: middle;
+}
+
+.tablewright :where(img, video) {
+  max-width: 100%;
+  height: auto;
+}
+
+.tablewright :where(textarea) {
+  resize: vertical;
+}
+
+.tablewright :where([hidden]) {
+  display: none;
+}
+
+/* Class names the library's own components reference directly, rather than
+ * through a Tailwind utility. Scoped to .tablewright like the reset: without the
+ * scope they would be bare global class names in the shipped stylesheet, free to
+ * collide with a host's own `.scrollbar-auto-hide`, and the build's scoping guard
+ * would pass them only because they happen to start with a dot.
+ * Ships inside @undevy-org/tablewright/tablewright.css. */
+
+.tablewright .scrollbar-auto-hide {
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.tablewright .scrollbar-auto-hide::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.tablewright .scrollbar-auto-hide::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tablewright .scrollbar-auto-hide::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--radius-full);
+}
+
+.tablewright .scrollbar-auto-hide[data-scrolling="true"] {
+  scrollbar-color: var(--border-subtle) transparent;
+}
+
+.tablewright .scrollbar-auto-hide[data-scrolling="true"]::-webkit-scrollbar-thumb {
+  background: var(--border-subtle);
+}
+
+.container {
+    width: 100%
+}
+@media (min-width: 640px) {
+    .container {
+        max-width: 640px
+    }
+}
+@media (min-width: 768px) {
+    .container {
+        max-width: 768px
+    }
+}
+@media (min-width: 1024px) {
+    .container {
+        max-width: 1024px
+    }
+}
+@media (min-width: 1280px) {
+    .container {
+        max-width: 1280px
+    }
+}
+@media (min-width: 1536px) {
+    .container {
+        max-width: 1536px
+    }
+}
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0
+}
+.pointer-events-none {
+    pointer-events: none
+}
+.visible {
+    visibility: visible
+}
+.invisible {
+    visibility: hidden
+}
+.collapse {
+    visibility: collapse
+}
+.fixed {
+    position: fixed
+}
+.absolute {
+    position: absolute
+}
+.relative {
+    position: relative
+}
+.sticky {
+    position: sticky
+}
+.inset-0 {
+    inset: 0px
+}
+.inset-y-0 {
+    top: 0px;
+    bottom: 0px
+}
+.bottom-0 {
+    bottom: 0px
+}
+.left-0 {
+    left: 0px
+}
+.left-1\/2 {
+    left: 50%
+}
+.left-2 {
+    left: 0.5rem
+}
+.right-0 {
+    right: 0px
+}
+.right-0\.5 {
+    right: 0.125rem
+}
+.right-4 {
+    right: 1rem
+}
+.top-0 {
+    top: 0px
+}
+.top-0\.5 {
+    top: 0.125rem
+}
+.top-1\/2 {
+    top: 50%
+}
+.top-4 {
+    top: 1rem
+}
+.top-\[10vh\] {
+    top: 10vh
+}
+.z-10 {
+    z-index: 10
+}
+.z-30 {
+    z-index: 30
+}
+.z-40 {
+    z-index: 40
+}
+.z-50 {
+    z-index: 50
+}
+.mx-3 {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem
+}
+.my-1 {
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem
+}
+.my-1\.5 {
+    margin-top: 0.375rem;
+    margin-bottom: 0.375rem
+}
+.mb-0\.5 {
+    margin-bottom: 0.125rem
+}
+.mb-1 {
+    margin-bottom: 0.25rem
+}
+.mb-2 {
+    margin-bottom: 0.5rem
+}
+.mb-2\.5 {
+    margin-bottom: 0.625rem
+}
+.mb-3 {
+    margin-bottom: 0.75rem
+}
+.mb-4 {
+    margin-bottom: 1rem
+}
+.mb-8 {
+    margin-bottom: 2rem
+}
+.ml-0\.5 {
+    margin-left: 0.125rem
+}
+.ml-1 {
+    margin-left: 0.25rem
+}
+.ml-1\.5 {
+    margin-left: 0.375rem
+}
+.ml-auto {
+    margin-left: auto
+}
+.mr-0\.5 {
+    margin-right: 0.125rem
+}
+.mr-1 {
+    margin-right: 0.25rem
+}
+.mr-2 {
+    margin-right: 0.5rem
+}
+.mt-0\.5 {
+    margin-top: 0.125rem
+}
+.mt-1 {
+    margin-top: 0.25rem
+}
+.mt-3 {
+    margin-top: 0.75rem
+}
+.block {
+    display: block
+}
+.inline {
+    display: inline
+}
+.flex {
+    display: flex
+}
+.inline-flex {
+    display: inline-flex
+}
+.table {
+    display: table
+}
+.grid {
+    display: grid
+}
+.hidden {
+    display: none
+}
+.h-1\.5 {
+    height: 0.375rem
+}
+.h-2\.5 {
+    height: 0.625rem
+}
+.h-3 {
+    height: 0.75rem
+}
+.h-3\.5 {
+    height: 0.875rem
+}
+.h-4 {
+    height: 1rem
+}
+.h-5 {
+    height: 1.25rem
+}
+.h-7 {
+    height: 1.75rem
+}
+.h-8 {
+    height: 2rem
+}
+.h-9 {
+    height: 2.25rem
+}
+.h-\[18px\] {
+    height: 18px
+}
+.h-\[80vh\] {
+    height: 80vh
+}
+.h-\[var\(--size-control-md\)\] {
+    height: var(--size-control-md)
+}
+.h-\[var\(--size-control-sm\)\] {
+    height: var(--size-control-sm)
+}
+.h-\[var\(--size-topbar-height\)\] {
+    height: var(--size-topbar-height)
+}
+.h-auto {
+    height: auto
+}
+.h-full {
+    height: 100%
+}
+.max-h-\[280px\] {
+    max-height: 280px
+}
+.max-h-\[60vh\] {
+    max-height: 60vh
+}
+.max-h-\[min\(var\(--radix-popover-content-available-height\)\2c 520px\)\] {
+    max-height: min(var(--radix-popover-content-available-height), 520px)
+}
+.min-h-0 {
+    min-height: 0px
+}
+.min-h-\[64px\] {
+    min-height: 64px
+}
+.w-1\.5 {
+    width: 0.375rem
+}
+.w-2\.5 {
+    width: 0.625rem
+}
+.w-3 {
+    width: 0.75rem
+}
+.w-3\.5 {
+    width: 0.875rem
+}
+.w-4 {
+    width: 1rem
+}
+.w-40 {
+    width: 10rem
+}
+.w-44 {
+    width: 11rem
+}
+.w-48 {
+    width: 12rem
+}
+.w-5 {
+    width: 1.25rem
+}
+.w-56 {
+    width: 14rem
+}
+.w-60 {
+    width: 15rem
+}
+.w-64 {
+    width: 16rem
+}
+.w-7 {
+    width: 1.75rem
+}
+.w-72 {
+    width: 18rem
+}
+.w-8 {
+    width: 2rem
+}
+.w-\[18px\] {
+    width: 18px
+}
+.w-\[200px\] {
+    width: 200px
+}
+.w-\[320px\] {
+    width: 320px
+}
+.w-\[min\(75vw\2c 1400px\)\] {
+    width: min(75vw, 1400px)
+}
+.w-\[var\(--radix-popover-trigger-width\)\] {
+    width: var(--radix-popover-trigger-width)
+}
+.w-\[var\(--size-control-md\)\] {
+    width: var(--size-control-md)
+}
+.w-\[var\(--size-drawer\)\] {
+    width: var(--size-drawer)
+}
+.w-\[var\(--size-select-compact\)\] {
+    width: var(--size-select-compact)
+}
+.w-auto {
+    width: auto
+}
+.w-full {
+    width: 100%
+}
+.w-px {
+    width: 1px
+}
+.min-w-0 {
+    min-width: 0px
+}
+.min-w-5 {
+    min-width: 1.25rem
+}
+.min-w-\[10rem\] {
+    min-width: 10rem
+}
+.min-w-\[220px\] {
+    min-width: 220px
+}
+.min-w-\[280px\] {
+    min-width: 280px
+}
+.min-w-\[40px\] {
+    min-width: 40px
+}
+.min-w-\[50px\] {
+    min-width: 50px
+}
+.min-w-\[54px\] {
+    min-width: 54px
+}
+.min-w-\[60px\] {
+    min-width: 60px
+}
+.min-w-\[8rem\] {
+    min-width: 8rem
+}
+.max-w-\[120px\] {
+    max-width: 120px
+}
+.max-w-\[140px\] {
+    max-width: 140px
+}
+.max-w-\[var\(--size-dialog-md\)\] {
+    max-width: var(--size-dialog-md)
+}
+.max-w-full {
+    max-width: 100%
+}
+.flex-1 {
+    flex: 1 1 0%
+}
+.flex-\[0_1_360px\] {
+    flex: 0 1 360px
+}
+.flex-shrink-0 {
+    flex-shrink: 0
+}
+.shrink-0 {
+    flex-shrink: 0
+}
+.border-collapse {
+    border-collapse: collapse
+}
+.-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.translate-x-0 {
+    --tw-translate-x: 0px;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.translate-x-full {
+    --tw-translate-x: 100%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.rotate-180 {
+    --tw-rotate: 180deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.cursor-col-resize {
+    cursor: col-resize
+}
+.cursor-default {
+    cursor: default
+}
+.cursor-grab {
+    cursor: grab
+}
+.cursor-pointer {
+    cursor: pointer
+}
+.select-none {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none
+}
+.resize {
+    resize: both
+}
+.grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr))
+}
+.grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr))
+}
+.grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr))
+}
+.grid-cols-\[120px_1fr\] {
+    grid-template-columns: 120px 1fr
+}
+.grid-cols-\[repeat\(auto-fit\2c minmax\(180px\2c 1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(180px,1fr))
+}
+.grid-cols-\[repeat\(auto-fit\2c minmax\(220px\2c 1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(220px,1fr))
+}
+.flex-col {
+    flex-direction: column
+}
+.flex-wrap {
+    flex-wrap: wrap
+}
+.items-start {
+    align-items: flex-start
+}
+.items-end {
+    align-items: flex-end
+}
+.items-center {
+    align-items: center
+}
+.justify-end {
+    justify-content: flex-end
+}
+.justify-center {
+    justify-content: center
+}
+.justify-between {
+    justify-content: space-between
+}
+.gap-0\.5 {
+    gap: 0.125rem
+}
+.gap-1 {
+    gap: 0.25rem
+}
+.gap-1\.5 {
+    gap: 0.375rem
+}
+.gap-2 {
+    gap: 0.5rem
+}
+.gap-2\.5 {
+    gap: 0.625rem
+}
+.gap-3 {
+    gap: 0.75rem
+}
+.gap-4 {
+    gap: 1rem
+}
+.gap-x-4 {
+    -moz-column-gap: 1rem;
+         column-gap: 1rem
+}
+.gap-y-3 {
+    row-gap: 0.75rem
+}
+.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse))
+}
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
+}
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
+}
+.space-y-3 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
+}
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    --tw-space-y-reverse: 0;
+    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
+}
+.self-stretch {
+    align-self: stretch
+}
+.overflow-auto {
+    overflow: auto
+}
+.overflow-hidden {
+    overflow: hidden
+}
+.overflow-y-auto {
+    overflow-y: auto
+}
+.overflow-x-hidden {
+    overflow-x: hidden
+}
+.overscroll-contain {
+    overscroll-behavior: contain
+}
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+.whitespace-nowrap {
+    white-space: nowrap
+}
+.rounded {
+    border-radius: 0.25rem
+}
+.rounded-\[3px\] {
+    border-radius: 3px
+}
+.rounded-\[var\(--radius-md\)\] {
+    border-radius: var(--radius-md)
+}
+.rounded-full {
+    border-radius: 9999px
+}
+.rounded-lg {
+    border-radius: var(--radius-lg)
+}
+.rounded-md {
+    border-radius: var(--radius-md)
+}
+.rounded-sm {
+    border-radius: var(--radius-sm)
+}
+.rounded-xl {
+    border-radius: var(--radius-xl)
+}
+.border {
+    border-width: 1px
+}
+.border-b {
+    border-bottom-width: 1px
+}
+.border-l {
+    border-left-width: 1px
+}
+.border-r {
+    border-right-width: 1px
+}
+.border-t {
+    border-top-width: 1px
+}
+.border-t-2 {
+    border-top-width: 2px
+}
+.border-dashed {
+    border-style: dashed
+}
+.border-\[var\(--bg-elevated\2c \#ffffff\)\] {
+    border-color: var(--bg-elevated,#ffffff)
+}
+.border-\[var\(--border-accent\2c \#6366f1\)\] {
+    border-color: var(--border-accent,#6366f1)
+}
+.border-\[var\(--border-brand\)\] {
+    border-color: var(--border-brand)
+}
+.border-\[var\(--border-danger\)\] {
+    border-color: var(--border-danger)
+}
+.border-\[var\(--border-subtle\)\] {
+    border-color: var(--border-subtle)
+}
+.border-t-\[var\(--border-focus\)\] {
+    border-top-color: var(--border-focus)
+}
+.bg-\[rgba\(128\2c 128\2c 128\2c 0\.03\)\] {
+    background-color: rgba(128,128,128,0.03)
+}
+.bg-\[var\(--accent-primary\)\] {
+    background-color: var(--accent-primary)
+}
+.bg-\[var\(--bg-accent\2c \#6366f1\)\] {
+    background-color: var(--bg-accent,#6366f1)
+}
+.bg-\[var\(--bg-accent-subtle\2c rgba\(99\2c 102\2c 241\2c 0\.12\)\)\] {
+    background-color: var(--bg-accent-subtle,rgba(99,102,241,0.12))
+}
+.bg-\[var\(--bg-body\)\] {
+    background-color: var(--bg-body)
+}
+.bg-\[var\(--bg-brand-subtle\)\] {
+    background-color: var(--bg-brand-subtle)
+}
+.bg-\[var\(--bg-hover\)\] {
+    background-color: var(--bg-hover)
+}
+.bg-\[var\(--bg-nav-item-active\)\] {
+    background-color: var(--bg-nav-item-active)
+}
+.bg-\[var\(--bg-secondary\)\] {
+    background-color: var(--bg-secondary)
+}
+.bg-\[var\(--bg-surface\)\] {
+    background-color: var(--bg-surface)
+}
+.bg-\[var\(--bg-surface-muted\)\] {
+    background-color: var(--bg-surface-muted)
+}
+.bg-\[var\(--bg-surface-sunken\)\] {
+    background-color: var(--bg-surface-sunken)
+}
+.bg-\[var\(--bg-tertiary\)\] {
+    background-color: var(--bg-tertiary)
+}
+.bg-\[var\(--border-subtle\)\] {
+    background-color: var(--border-subtle)
+}
+.bg-\[var\(--overlay-scrim\)\] {
+    background-color: var(--overlay-scrim)
+}
+.bg-\[var\(--overlay-scrim\2c rgba\(15\2c 23\2c 42\2c 0\.28\)\)\] {
+    background-color: var(--overlay-scrim,rgba(15,23,42,0.28))
+}
+.bg-\[var\(--tag-blue-bg\)\] {
+    background-color: var(--tag-blue-bg)
+}
+.bg-\[var\(--tag-gray-bg\)\] {
+    background-color: var(--tag-gray-bg)
+}
+.bg-\[var\(--tag-green-bg\)\] {
+    background-color: var(--tag-green-bg)
+}
+.bg-\[var\(--tag-indigo-bg\)\] {
+    background-color: var(--tag-indigo-bg)
+}
+.bg-\[var\(--tag-orange-bg\)\] {
+    background-color: var(--tag-orange-bg)
+}
+.bg-\[var\(--tag-pink-bg\)\] {
+    background-color: var(--tag-pink-bg)
+}
+.bg-\[var\(--tag-purple-bg\)\] {
+    background-color: var(--tag-purple-bg)
+}
+.bg-\[var\(--tag-sky-bg\)\] {
+    background-color: var(--tag-sky-bg)
+}
+.bg-black\/50 {
+    background-color: rgb(0 0 0 / 0.5)
+}
+.bg-transparent {
+    background-color: transparent
+}
+.object-cover {
+    -o-object-fit: cover;
+       object-fit: cover
+}
+.p-0 {
+    padding: 0px
+}
+.p-1 {
+    padding: 0.25rem
+}
+.p-1\.5 {
+    padding: 0.375rem
+}
+.p-2 {
+    padding: 0.5rem
+}
+.p-2\.5 {
+    padding: 0.625rem
+}
+.p-3 {
+    padding: 0.75rem
+}
+.p-3\.5 {
+    padding: 0.875rem
+}
+.p-4 {
+    padding: 1rem
+}
+.p-6 {
+    padding: 1.5rem
+}
+.px-0 {
+    padding-left: 0px;
+    padding-right: 0px
+}
+.px-1 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem
+}
+.px-1\.5 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem
+}
+.px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem
+}
+.px-2\.5 {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem
+}
+.px-3 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem
+}
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem
+}
+.px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem
+}
+.py-0\.5 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem
+}
+.py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem
+}
+.py-1\.5 {
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem
+}
+.py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem
+}
+.py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem
+}
+.py-2\.5 {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem
+}
+.py-3 {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem
+}
+.py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem
+}
+.py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem
+}
+.py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem
+}
+.py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem
+}
+.pb-1 {
+    padding-bottom: 0.25rem
+}
+.pb-2 {
+    padding-bottom: 0.5rem
+}
+.pb-3 {
+    padding-bottom: 0.75rem
+}
+.pb-4 {
+    padding-bottom: 1rem
+}
+.pl-2\.5 {
+    padding-left: 0.625rem
+}
+.pl-8 {
+    padding-left: 2rem
+}
+.pr-1\.5 {
+    padding-right: 0.375rem
+}
+.pr-2 {
+    padding-right: 0.5rem
+}
+.pt-1\.5 {
+    padding-top: 0.375rem
+}
+.pt-2 {
+    padding-top: 0.5rem
+}
+.pt-3 {
+    padding-top: 0.75rem
+}
+.pt-4 {
+    padding-top: 1rem
+}
+.text-left {
+    text-align: left
+}
+.text-center {
+    text-align: center
+}
+.text-right {
+    text-align: right
+}
+.align-middle {
+    vertical-align: middle
+}
+.font-mono {
+    font-family: JetBrains Mono, monospace
+}
+.text-\[10px\] {
+    font-size: 10px
+}
+.text-\[11px\] {
+    font-size: 11px
+}
+.text-\[12px\] {
+    font-size: 12px
+}
+.text-\[13px\] {
+    font-size: 13px
+}
+.text-\[15px\] {
+    font-size: 15px
+}
+.text-\[9px\] {
+    font-size: 9px
+}
+.text-base {
+    font-size: 1rem;
+    line-height: 1.5rem
+}
+.text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem
+}
+.text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem
+}
+.text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem
+}
+.font-medium {
+    font-weight: 500
+}
+.font-normal {
+    font-weight: 400
+}
+.font-semibold {
+    font-weight: 600
+}
+.uppercase {
+    text-transform: uppercase
+}
+.italic {
+    font-style: italic
+}
+.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)
+}
+.leading-\[1\.4\] {
+    line-height: 1.4
+}
+.leading-none {
+    line-height: 1
+}
+.leading-tight {
+    line-height: 1.25
+}
+.tracking-\[0\.05em\] {
+    letter-spacing: 0.05em
+}
+.tracking-\[0\.06em\] {
+    letter-spacing: 0.06em
+}
+.tracking-\[0\.08em\] {
+    letter-spacing: 0.08em
+}
+.tracking-\[0\.12em\] {
+    letter-spacing: 0.12em
+}
+.tracking-\[0\.1em\] {
+    letter-spacing: 0.1em
+}
+.tracking-wider {
+    letter-spacing: 0.05em
+}
+.text-\[var\(--accent-primary\)\] {
+    color: var(--accent-primary)
+}
+.text-\[var\(--tag-blue-text\)\] {
+    color: var(--tag-blue-text)
+}
+.text-\[var\(--tag-gray-text\)\] {
+    color: var(--tag-gray-text)
+}
+.text-\[var\(--tag-green-text\)\] {
+    color: var(--tag-green-text)
+}
+.text-\[var\(--tag-indigo-text\)\] {
+    color: var(--tag-indigo-text)
+}
+.text-\[var\(--tag-orange-text\)\] {
+    color: var(--tag-orange-text)
+}
+.text-\[var\(--tag-pink-text\)\] {
+    color: var(--tag-pink-text)
+}
+.text-\[var\(--tag-purple-text\)\] {
+    color: var(--tag-purple-text)
+}
+.text-\[var\(--tag-sky-text\)\] {
+    color: var(--tag-sky-text)
+}
+.text-\[var\(--text-accent\2c \#3730a3\)\] {
+    color: var(--text-accent,#3730a3)
+}
+.text-\[var\(--text-brand\)\] {
+    color: var(--text-brand)
+}
+.text-\[var\(--text-on-accent\)\] {
+    color: var(--text-on-accent)
+}
+.text-\[var\(--text-primary\)\] {
+    color: var(--text-primary)
+}
+.text-\[var\(--text-secondary\)\] {
+    color: var(--text-secondary)
+}
+.text-\[var\(--text-tertiary\)\] {
+    color: var(--text-tertiary)
+}
+.text-\[var\(--text-utility\)\] {
+    color: var(--text-utility)
+}
+.text-red-600 {
+    --tw-text-opacity: 1;
+    color: rgb(220 38 38 / var(--tw-text-opacity, 1))
+}
+.text-transparent {
+    color: transparent
+}
+.line-through {
+    text-decoration-line: line-through
+}
+.opacity-0 {
+    opacity: 0
+}
+.opacity-100 {
+    opacity: 1
+}
+.opacity-30 {
+    opacity: 0.3
+}
+.opacity-40 {
+    opacity: 0.4
+}
+.opacity-50 {
+    opacity: 0.5
+}
+.opacity-60 {
+    opacity: 0.6
+}
+.shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.shadow-none {
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
+}
+.outline-none {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+.filter {
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
+}
+.transition-\[opacity\2c width\2c background-color\] {
+    transition-property: opacity,width,background-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-colors {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.transition-transform {
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms
+}
+.duration-150 {
+    transition-duration: 150ms
+}
+.duration-200 {
+    transition-duration: 200ms
+}
+.duration-300 {
+    transition-duration: 300ms
+}
+.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\] {
+    transition-timing-function: cubic-bezier(0.16,1,0.3,1)
+}
+.ease-in-out {
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+}
+.\[box-shadow\:-1px_0_0_0_var\(--border-subtle\)\] {
+    box-shadow: -1px 0 0 0 var(--border-subtle)
+}
+.\[box-shadow\:1px_0_0_0_var\(--border-subtle\)\] {
+    box-shadow: 1px 0 0 0 var(--border-subtle)
+}
+.\[box-shadow\:var\(--shadow-dialog\)\] {
+    box-shadow: var(--shadow-dialog)
+}
+.\[box-shadow\:var\(--shadow-drawer\)\] {
+    box-shadow: var(--shadow-drawer)
+}
+.\[box-shadow\:var\(--shadow-menu\)\] {
+    box-shadow: var(--shadow-menu)
+}
+.\[box-shadow\:var\(--shadow-sidebar-overlay\)\] {
+    box-shadow: var(--shadow-sidebar-overlay)
+}
+.\[grid-column\:span_2\] {
+    grid-column: span 2
+}
+.\[scrollbar-gutter\:stable\] {
+    scrollbar-gutter: stable
+}
+.placeholder\:text-\[var\(--text-tertiary\)\]::-moz-placeholder {
+    color: var(--text-tertiary)
+}
+.placeholder\:text-\[var\(--text-tertiary\)\]::placeholder {
+    color: var(--text-tertiary)
+}
+.before\:absolute::before {
+    content: var(--tw-content);
+    position: absolute
+}
+.before\:bottom-0::before {
+    content: var(--tw-content);
+    bottom: 0px
+}
+.before\:left-0::before {
+    content: var(--tw-content);
+    left: 0px
+}
+.before\:top-0::before {
+    content: var(--tw-content);
+    top: 0px
+}
+.before\:w-\[3px\]::before {
+    content: var(--tw-content);
+    width: 3px
+}
+.before\:bg-\[var\(--accent-primary\)\]::before {
+    content: var(--tw-content);
+    background-color: var(--accent-primary)
+}
+.before\:content-\[\'\'\]::before {
+    --tw-content: '';
+    content: var(--tw-content)
+}
+.first\:pt-1:first-child {
+    padding-top: 0.25rem
+}
+.first\:pt-2:first-child {
+    padding-top: 0.5rem
+}
+.focus-within\:border-\[var\(--border-focus\)\]:focus-within {
+    border-color: var(--border-focus)
+}
+.hover\:border-\[var\(--border-focus\)\]:hover {
+    border-color: var(--border-focus)
+}
+.hover\:bg-\[rgba\(128\2c 128\2c 128\2c 0\.08\)\]:hover {
+    background-color: rgba(128,128,128,0.08)
+}
+.hover\:bg-\[var\(--bg-hover\)\]:hover {
+    background-color: var(--bg-hover)
+}
+.hover\:bg-\[var\(--bg-secondary\)\]:hover {
+    background-color: var(--bg-secondary)
+}
+.hover\:text-\[var\(--tag-blue-text\)\]:hover {
+    color: var(--tag-blue-text)
+}
+.hover\:text-\[var\(--text-accent\2c var\(--text-primary\)\)\]:hover {
+    color: var(--text-accent,var(--text-primary))
+}
+.hover\:text-\[var\(--text-primary\)\]:hover {
+    color: var(--text-primary)
+}
+.hover\:text-\[var\(--text-secondary\)\]:hover {
+    color: var(--text-secondary)
+}
+.hover\:\!opacity-100:hover {
+    opacity: 1 !important
+}
+.hover\:opacity-90:hover {
+    opacity: 0.9
+}
+.focus\:border-\[var\(--border-focus\)\]:focus {
+    border-color: var(--border-focus)
+}
+.focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+.focus\:ring-1:focus {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.focus\:ring-\[var\(--border-focus\)\]:focus {
+    --tw-ring-color: var(--border-focus)
+}
+.focus-visible\:border-\[var\(--border-focus\)\]:focus-visible {
+    border-color: var(--border-focus)
+}
+.focus-visible\:opacity-100:focus-visible {
+    opacity: 1
+}
+.focus-visible\:outline-none:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px
+}
+.focus-visible\:ring-1:focus-visible {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.focus-visible\:ring-2:focus-visible {
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
+}
+.focus-visible\:ring-\[var\(--border-focus\)\]:focus-visible {
+    --tw-ring-color: var(--border-focus)
+}
+.focus-visible\:ring-offset-0:focus-visible {
+    --tw-ring-offset-width: 0px
+}
+.active\:cursor-grabbing:active {
+    cursor: grabbing
+}
+.disabled\:pointer-events-none:disabled {
+    pointer-events: none
+}
+.disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed
+}
+.disabled\:opacity-40:disabled {
+    opacity: 0.4
+}
+.disabled\:opacity-50:disabled {
+    opacity: 0.5
+}
+.group\/copy:focus-within .group-focus-within\/copy\:opacity-100 {
+    opacity: 1
+}
+.group:hover .group-hover\:pointer-events-auto {
+    pointer-events: auto
+}
+.group\/th:hover .group-hover\/th\:w-\[4px\] {
+    width: 4px
+}
+.group\/th:hover .group-hover\/th\:bg-\[var\(--border-focus\)\] {
+    background-color: var(--border-focus)
+}
+.group:hover .group-hover\:bg-\[var\(--bg-hover\)\] {
+    background-color: var(--bg-hover)
+}
+.group\/copy:hover .group-hover\/copy\:opacity-100 {
+    opacity: 1
+}
+.group\/header:hover .group-hover\/header\:opacity-100 {
+    opacity: 1
+}
+.group\/primary:hover .group-hover\/primary\:opacity-100 {
+    opacity: 1
+}
+.group\/secondary:hover .group-hover\/secondary\:opacity-100 {
+    opacity: 1
+}
+.group\/th:hover .group-hover\/th\:opacity-50 {
+    opacity: 0.5
+}
+.group:hover .group-hover\:opacity-0 {
+    opacity: 0
+}
+.group:hover .group-hover\:opacity-100 {
+    opacity: 1
+}
+.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
+    pointer-events: none
+}
+.data-\[state\=checked\]\:border-\[var\(--accent-primary\)\][data-state="checked"] {
+    border-color: var(--accent-primary)
+}
+.data-\[state\=indeterminate\]\:border-\[var\(--accent-primary\)\][data-state="indeterminate"] {
+    border-color: var(--accent-primary)
+}
+.data-\[selected\=true\]\:bg-\[var\(--bg-hover\)\][data-selected="true"] {
+    background-color: var(--bg-hover)
+}
+.data-\[state\=active\]\:bg-\[var\(--bg-surface\)\][data-state="active"] {
+    background-color: var(--bg-surface)
+}
+.data-\[state\=checked\]\:bg-\[var\(--accent-primary\)\][data-state="checked"] {
+    background-color: var(--accent-primary)
+}
+.data-\[state\=indeterminate\]\:bg-\[var\(--accent-primary\)\][data-state="indeterminate"] {
+    background-color: var(--accent-primary)
+}
+.data-\[selected\=true\]\:text-\[var\(--text-primary\)\][data-selected="true"] {
+    color: var(--text-primary)
+}
+.data-\[state\=active\]\:text-\[var\(--text-primary\)\][data-state="active"] {
+    color: var(--text-primary)
+}
+.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
+    opacity: 0.5
+}
+.data-\[state\=open\]\:opacity-100[data-state="open"] {
+    opacity: 1
+}
+.data-\[state\=active\]\:\[box-shadow\:var\(--shadow-tab-active\)\][data-state="active"] {
+    box-shadow: var(--shadow-tab-active)
+}
+.group[data-state="indeterminate"] .group-data-\[state\=indeterminate\]\:block {
+    display: block
+}
+.group[data-state="indeterminate"] .group-data-\[state\=indeterminate\]\:hidden {
+    display: none
+}
+.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
+    --tw-rotate: 180deg;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
+}
+.group[data-state="active"] .group-data-\[state\=active\]\:bg-\[var\(--bg-secondary\)\] {
+    background-color: var(--bg-secondary)
+}
+.group[data-state="active"] .group-data-\[state\=active\]\:text-\[var\(--text-primary\)\] {
+    color: var(--text-primary)
+}
+@media (min-width: 768px) {
+    .md\:max-w-\[460px\] {
+        max-width: 460px
+    }
+}
+@media (min-width: 1024px) {
+    .lg\:grid-cols-\[0\.9fr_1\.1fr\] {
+        grid-template-columns: 0.9fr 1.1fr
+    }
+    .lg\:flex-row {
+        flex-direction: row
+    }
+    .lg\:flex-nowrap {
+        flex-wrap: nowrap
+    }
+    .lg\:items-center {
+        align-items: center
+    }
+    .lg\:justify-end {
+        justify-content: flex-end
+    }
+    .lg\:justify-between {
+        justify-content: space-between
+    }
+    .lg\:gap-2 {
+        gap: 0.5rem
+    }
+}
+@media (min-width: 1280px) {
+    .xl\:ml-auto {
+        margin-left: auto
+    }
+}
+.\[\&\>\*\]\:flex-1>* {
+    flex: 1 1 0%
+}
+.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem
+}
+.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
+    padding-top: 0.375rem;
+    padding-bottom: 0.375rem
+}
+.\[\&_\[cmdk-group-heading\]\]\:text-\[10px\] [cmdk-group-heading] {
+    font-size: 10px
+}
+.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
+    font-weight: 500
+}
+.\[\&_\[cmdk-group-heading\]\]\:uppercase [cmdk-group-heading] {
+    text-transform: uppercase
+}
+.\[\&_\[cmdk-group-heading\]\]\:tracking-wider [cmdk-group-heading] {
+    letter-spacing: 0.05em
+}
+.\[\&_\[cmdk-group-heading\]\]\:text-\[var\(--text-tertiary\)\] [cmdk-group-heading] {
+    color: var(--text-tertiary)
+}