@stigmer/react 0.0.36

package/src/session/components/AgentSessionHistory.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { History, Loader2, AlertCircle, RotateCw } from "lucide-react";
+import { cn } from "@stigmer/theme";
+import { SessionCard } from "./SessionCard";
+import { useAgentSessionList } from "../hooks/useAgentSessionList";
+
+export interface AgentSessionHistoryProps {
+  agentId: string;
+  onSessionSelect?: (sessionId: string) => void;
+  pageSize?: number;
+  className?: string;
+}
+
+export function AgentSessionHistory({
+  agentId,
+  onSessionSelect,
+  pageSize = 5,
+  className,
+}: AgentSessionHistoryProps) {
+  const {
+    sessions,
+    isLoading,
+    error,
+    hasMore,
+    isLoadingMore,
+    loadMore,
+    retry,
+  } = useAgentSessionList(agentId, { pageSize });
+
+  return (
+    <section className={cn("stgm-agent-session-history", className)}>
+      <h3 className="text-muted-foreground mb-3 text-sm font-semibold tracking-wider uppercase">
+        Recent Sessions
+      </h3>
+
+      {error && (
+        <div className="bg-destructive/10 text-destructive flex items-center gap-2 rounded-lg px-3 py-2 text-sm">
+          <AlertCircle className="size-4 shrink-0" />
+          <span className="min-w-0 flex-1 truncate">
+            {error.message || "Something went wrong"}
+          </span>
+          <button
+            type="button"
+            onClick={retry}
+            className="text-destructive hover:text-destructive/80 inline-flex shrink-0 items-center gap-1 text-xs font-medium transition-colors"
+          >
+            <RotateCw className="size-3" />
+            Retry
+          </button>
+        </div>
+      )}
+
+      {isLoading && sessions.length === 0 && !error && (
+        <div className="space-y-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div
+              key={i}
+              className="bg-muted/50 h-[52px] animate-pulse rounded-xl"
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLoading && sessions.length === 0 && !error && (
+        <div className="border-border flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center">
+          <History className="text-muted-foreground/40 mb-3 size-10" />
+          <p className="text-sm font-medium">No sessions yet</p>
+          <p className="text-muted-foreground mt-1 text-xs">
+            Run this agent to create your first session.
+          </p>
+        </div>
+      )}
+
+      {sessions.length > 0 && (
+        <div className="space-y-2">
+          {sessions.map((session) => (
+            <SessionCard
+              key={session.metadata?.id}
+              session={session}
+              onNavigate={onSessionSelect}
+            />
+          ))}
+        </div>
+      )}
+
+      {hasMore && (
+        <div className="flex justify-center pt-3">
+          <button
+            type="button"
+            onClick={loadMore}
+            disabled={isLoadingMore}
+            className={cn(
+              "border-border inline-flex h-8 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium",
+              "bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+              "disabled:pointer-events-none disabled:opacity-50",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+            )}
+          >
+            {isLoadingMore && (
+              <Loader2 className="size-3.5 animate-spin" />
+            )}
+            Load more
+          </button>
+        </div>
+      )}
+    </section>
+  );
+}

package/src/session/components/SessionCard.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
+import type { Timestamp } from "@bufbuild/protobuf/wkt";
+import { MessageSquare, ChevronRight } from "lucide-react";
+import { cn } from "@stigmer/theme";
+
+export interface SessionCardProps {
+  session: Session;
+  onNavigate?: (sessionId: string) => void;
+  className?: string;
+}
+
+export function SessionCard({ session, onNavigate, className }: SessionCardProps) {
+  const id = session.metadata?.id ?? "";
+  const displayName =
+    session.spec?.subject || session.metadata?.name || "Untitled session";
+
+  const createdAt = session.status?.audit?.specAudit?.createdAt;
+  const updatedAt = session.status?.audit?.specAudit?.updatedAt;
+
+  const interactive = !!onNavigate;
+
+  return (
+    <div
+      role={interactive ? "button" : undefined}
+      tabIndex={interactive ? 0 : undefined}
+      onClick={interactive ? () => onNavigate(id) : undefined}
+      onKeyDown={
+        interactive
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onNavigate(id);
+              }
+            }
+          : undefined
+      }
+      className={cn(
+        "stgm-session-card",
+        "bg-card text-card-foreground ring-foreground/10 flex flex-col gap-3 overflow-hidden rounded-xl py-3 text-sm ring-1",
+        interactive && "cursor-pointer hover:bg-accent/50 transition-colors",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        className,
+      )}
+    >
+      <div className="grid auto-rows-min grid-cols-[1fr_auto] items-start gap-1 px-3">
+        <div className="flex items-center gap-2 text-sm font-medium leading-snug">
+          <MessageSquare className="text-muted-foreground size-4 shrink-0" />
+          <span className="truncate">{displayName}</span>
+        </div>
+
+        {interactive && (
+          <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
+            <ChevronRight className="text-muted-foreground size-4" />
+          </div>
+        )}
+
+        <div className="text-muted-foreground col-start-1 text-sm">
+          <span className="flex items-center gap-3">
+            {createdAt && (
+              <time dateTime={toISOString(createdAt)}>
+                {formatRelativeTime(createdAt)}
+              </time>
+            )}
+            {updatedAt && createdAt && (
+              <span className="text-muted-foreground/60">
+                updated {formatRelativeTime(updatedAt)}
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function toDate(ts: Timestamp | undefined): Date | null {
+  if (!ts) return null;
+  const seconds = Number(ts.seconds);
+  if (!seconds && seconds !== 0) return null;
+  return new Date(seconds * 1000 + Math.floor(ts.nanos / 1_000_000));
+}
+
+function toISOString(ts: Timestamp | undefined): string {
+  return toDate(ts)?.toISOString() ?? "";
+}
+
+function formatRelativeTime(ts: Timestamp | undefined): string {
+  const date = toDate(ts);
+  if (!date) return "";
+
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+
+  if (diffMs < 0) return "just now";
+  if (diffMs < 60_000) return "just now";
+
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 60) return `${minutes}m ago`;
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+
+  const days = Math.floor(hours / 24);
+  if (days === 1) return "yesterday";
+  if (days < 7) return `${days}d ago`;
+
+  return date.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
+}

package/src/session/hooks/useAgentSessionList.ts

@@ -0,0 +1,117 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
+import { create } from "@bufbuild/protobuf";
+import { ListSessionsByAgentRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/session/v1/io_pb";
+import { useStigmer } from "../../hooks";
+
+const DEFAULT_PAGE_SIZE = 5;
+
+export interface UseAgentSessionListOptions {
+  pageSize?: number;
+}
+
+export interface UseAgentSessionListReturn {
+  sessions: Session[];
+  isLoading: boolean;
+  error: Error | null;
+  hasMore: boolean;
+  isLoadingMore: boolean;
+  loadMore: () => void;
+  retry: () => void;
+}
+
+/**
+ * Fetches sessions scoped to a specific agent with "load more" pagination.
+ *
+ * Returns sessions sorted by creation time descending (most recent first).
+ * Automatically resets when `agentId` changes.
+ */
+export function useAgentSessionList(
+  agentId: string,
+  options?: UseAgentSessionListOptions,
+): UseAgentSessionListReturn {
+  const pageSize = options?.pageSize ?? DEFAULT_PAGE_SIZE;
+  const stigmer = useStigmer();
+
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+
+  const hasMore = currentPage + 1 < totalPages;
+  const latestAgentId = useRef(agentId);
+
+  const fetchPage = useCallback(
+    async (page: number, append: boolean) => {
+      if (!agentId) return;
+
+      const isInitial = !append;
+      if (isInitial) setIsLoading(true);
+      else setIsLoadingMore(true);
+      setError(null);
+
+      try {
+        const result = await stigmer.session.listByAgent(
+          create(ListSessionsByAgentRequestSchema, {
+            agentId,
+            pageSize,
+            pageToken: page > 0 ? String(page) : "",
+          }),
+        );
+
+        if (latestAgentId.current !== agentId) return;
+
+        setTotalPages(result.totalPages);
+        setCurrentPage(page);
+
+        if (append) {
+          setSessions((prev) => [...prev, ...result.entries]);
+        } else {
+          setSessions(result.entries);
+        }
+      } catch (err) {
+        if (latestAgentId.current !== agentId) return;
+        setError(err instanceof Error ? err : new Error("Failed to load sessions"));
+      } finally {
+        if (latestAgentId.current !== agentId) return;
+        setIsLoading(false);
+        setIsLoadingMore(false);
+      }
+    },
+    [agentId, pageSize, stigmer],
+  );
+
+  useEffect(() => {
+    latestAgentId.current = agentId;
+    setSessions([]);
+    setCurrentPage(0);
+    setTotalPages(0);
+    fetchPage(0, false);
+  }, [agentId, fetchPage]);
+
+  const loadMore = useCallback(() => {
+    if (!hasMore || isLoadingMore) return;
+    fetchPage(currentPage + 1, true);
+  }, [hasMore, isLoadingMore, currentPage, fetchPage]);
+
+  const retry = useCallback(() => {
+    setSessions([]);
+    setCurrentPage(0);
+    setTotalPages(0);
+    fetchPage(0, false);
+  }, [fetchPage]);
+
+  return {
+    sessions,
+    isLoading,
+    error,
+    hasMore,
+    isLoadingMore,
+    loadMore,
+    retry,
+  };
+}

package/src/session/index.ts

@@ -0,0 +1,13 @@
+// Hooks
+export { useAgentSessionList } from "./hooks/useAgentSessionList";
+export type {
+  UseAgentSessionListOptions,
+  UseAgentSessionListReturn,
+} from "./hooks/useAgentSessionList";
+
+// Components
+export { SessionCard } from "./components/SessionCard";
+export type { SessionCardProps } from "./components/SessionCard";
+
+export { AgentSessionHistory } from "./components/AgentSessionHistory";
+export type { AgentSessionHistoryProps } from "./components/AgentSessionHistory";

package/src/skill/hooks/useSkillSearch.ts

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useStigmer } from "../../hooks";
+import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
+
+const DEBOUNCE_MS = 300;
+const DEFAULT_PAGE_SIZE = 20;
+
+export interface UseSkillSearchOptions {
+  org: string;
+  debounceMs?: number;
+  pageSize?: number;
+}
+
+export interface UseSkillSearchReturn {
+  query: string;
+  setQuery: (query: string) => void;
+  results: SearchResult[];
+  isLoading: boolean;
+  error: string | null;
+}
+
+/**
+ * Debounced skill search scoped to a specific organization.
+ *
+ * On mount fetches all accessible skills (empty query). Typing fires at most
+ * one request per debounce interval. Stale responses from out-of-order
+ * requests are discarded.
+ *
+ * Returns full {@link SearchResult} objects suitable for use with
+ * `ResourceSearchCard`.
+ */
+export function useSkillSearch(options: UseSkillSearchOptions): UseSkillSearchReturn {
+  const { org, debounceMs = DEBOUNCE_MS, pageSize = DEFAULT_PAGE_SIZE } = options;
+  const stigmer = useStigmer();
+
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const latestRequestId = useRef(0);
+  const debouncedQuery = useDebouncedValue(query, debounceMs);
+
+  useEffect(() => {
+    const requestId = ++latestRequestId.current;
+    setIsLoading(true);
+    setError(null);
+
+    stigmer.skill
+      .list({ query: debouncedQuery, org, page: { num: 1, size: pageSize } })
+      .then((response) => {
+        if (requestId !== latestRequestId.current) return;
+        setResults(response.entries);
+      })
+      .catch((err: unknown) => {
+        if (requestId !== latestRequestId.current) return;
+        setError(err instanceof Error ? err.message : "Search failed");
+      })
+      .finally(() => {
+        if (requestId !== latestRequestId.current) return;
+        setIsLoading(false);
+      });
+  }, [debouncedQuery, org, pageSize, stigmer]);
+
+  return { query, setQuery, results, isLoading, error };
+}
+
+function useDebouncedValue<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs);
+    return () => clearTimeout(timer);
+  }, [value, delayMs]);
+
+  return debounced;
+}

package/src/skill/index.ts

@@ -0,0 +1,6 @@
+// Hooks
+export { useSkillSearch } from "./hooks/useSkillSearch";
+export type {
+  UseSkillSearchOptions,
+  UseSkillSearchReturn,
+} from "./hooks/useSkillSearch";

package/src/styles.css

@@ -0,0 +1,72 @@
+@layer stgm;
+
+@import "tailwindcss/theme.css" layer(stgm);
+@import "tailwindcss/utilities.css" layer(stgm);
+@import "@stigmer/theme/tokens.css" layer(stgm);
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--stgm-radius) - 4px);
+  --radius-md: calc(var(--stgm-radius) - 2px);
+  --radius-lg: var(--stgm-radius);
+  --radius-xl: calc(var(--stgm-radius) + 4px);
+  --color-background: var(--stgm-background);
+  --color-foreground: var(--stgm-foreground);
+  --color-card: var(--stgm-card);
+  --color-card-foreground: var(--stgm-card-foreground);
+  --color-popover: var(--stgm-popover);
+  --color-popover-foreground: var(--stgm-popover-foreground);
+  --color-primary: var(--stgm-primary);
+  --color-primary-foreground: var(--stgm-primary-foreground);
+  --color-secondary: var(--stgm-secondary);
+  --color-secondary-foreground: var(--stgm-secondary-foreground);
+  --color-muted: var(--stgm-muted);
+  --color-muted-foreground: var(--stgm-muted-foreground);
+  --color-accent: var(--stgm-accent);
+  --color-accent-foreground: var(--stgm-accent-foreground);
+  --color-destructive: var(--stgm-destructive);
+  --color-destructive-foreground: var(--stgm-destructive-foreground);
+  --color-success: var(--stgm-success);
+  --color-success-foreground: var(--stgm-success-foreground);
+  --color-warning: var(--stgm-warning);
+  --color-warning-foreground: var(--stgm-warning-foreground);
+  --color-info: var(--stgm-info);
+  --color-info-foreground: var(--stgm-info-foreground);
+  --color-border: var(--stgm-border);
+  --color-input: var(--stgm-input);
+  --color-ring: var(--stgm-ring);
+  --color-chart-1: var(--stgm-chart-1);
+  --color-chart-2: var(--stgm-chart-2);
+  --color-chart-3: var(--stgm-chart-3);
+  --color-chart-4: var(--stgm-chart-4);
+  --color-chart-5: var(--stgm-chart-5);
+  --font-sans: var(--stgm-font-sans);
+  --font-mono: var(--stgm-font-mono);
+  --shadow-sm: var(--stgm-shadow-sm);
+  --shadow-md: var(--stgm-shadow-md);
+  --shadow-lg: var(--stgm-shadow-lg);
+  --default-transition-duration: var(--stgm-transition-duration);
+  --default-transition-timing-function: var(--stgm-transition-timing);
+}
+
+@utility z-popover {
+  z-index: var(--stgm-z-popover);
+}
+
+@layer stgm {
+  .stgm {
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .stgm *,
+  .stgm *::before,
+  .stgm *::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--stgm-border, currentColor);
+  }
+}

package/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-content:""}}}@layer stgm{:root,:host{--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--tracking-wider:.05em;--leading-snug:1.375;--leading-relaxed:1.625;--radius-md:calc(var(--stgm-radius) - 2px);--radius-4xl:2rem;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.top-1\/2{top:50%}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-3{left:calc(var(--spacing) * 3)}.z-10{z-index:10}.z-popover{z-index:var(--stgm-z-popover)}.col-start-1{grid-column-start:1}.col-start-2{grid-column-start:2}.row-span-2{grid-row:span 2/span 2}.row-start-1{grid-row-start:1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mr-0\.5{margin-right:calc(var(--spacing) * .5)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-0\.5{margin-left:calc(var(--spacing) * .5)}.ml-auto{margin-left:auto}.line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.grid{display:grid}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.field-sizing-content{field-sizing:content}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-\[52px\]{height:52px}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-10{min-height:calc(var(--spacing) * 10)}.min-h-16{min-height:calc(var(--spacing) * 16)}.w-0\.5{width:calc(var(--spacing) * .5)}.w-fit{width:fit-content}.w-full{width:100%}.max-w-none{max-width:none}.max-w-prose{max-width:65ch}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.auto-rows-min{grid-auto-rows:min-content}.grid-cols-\[1fr_auto\]{grid-template-columns:1fr auto}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.self-center{align-self:center}.self-start{align-self:flex-start}.justify-self-end{justify-self:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-4xl{border-radius:var(--radius-4xl)}.rounded-\[min\(var\(--radius-md\)\,10px\)\]{border-radius:min(var(--radius-md), 10px)}.rounded-\[min\(var\(--radius-md\)\,12px\)\]{border-radius:min(var(--radius-md), 12px)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--stgm-radius)}.rounded-md{border-radius:calc(var(--stgm-radius) - 2px)}.rounded-xl{border-radius:calc(var(--stgm-radius) + 4px)}.rounded-t-lg{border-top-left-radius:var(--stgm-radius);border-top-right-radius:var(--stgm-radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-border{border-color:var(--stgm-border)}.border-destructive\/30{border-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/30{border-color:color-mix(in oklab, var(--stgm-destructive) 30%, transparent)}}.border-input{border-color:var(--stgm-input)}.border-primary\/30{border-color:var(--stgm-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/30{border-color:color-mix(in oklab, var(--stgm-primary) 30%, transparent)}}.border-primary\/40{border-color:var(--stgm-primary)}@supports (color:color-mix(in lab, red, red)){.border-primary\/40{border-color:color-mix(in oklab, var(--stgm-primary) 40%, transparent)}}.border-transparent{border-color:#0000}.bg-accent{background-color:var(--stgm-accent)}.bg-background{background-color:var(--stgm-background)}.bg-card{background-color:var(--stgm-card)}.bg-destructive\/5{background-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/5{background-color:color-mix(in oklab, var(--stgm-destructive) 5%, transparent)}}.bg-destructive\/10{background-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/10{background-color:color-mix(in oklab, var(--stgm-destructive) 10%, transparent)}}.bg-foreground{background-color:var(--stgm-foreground)}.bg-muted,.bg-muted\/50{background-color:var(--stgm-muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--stgm-muted) 50%, transparent)}}.bg-popover{background-color:var(--stgm-popover)}.bg-primary,.bg-primary\/5{background-color:var(--stgm-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--stgm-primary) 5%, transparent)}}.bg-primary\/10{background-color:var(--stgm-primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--stgm-primary) 10%, transparent)}}.bg-secondary{background-color:var(--stgm-secondary)}.bg-transparent{background-color:#0000}.bg-clip-padding{background-clip:padding-box}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pl-9{padding-left:calc(var(--spacing) * 9)}.text-center{text-align:center}.text-left{text-align:left}.align-text-bottom{vertical-align:text-bottom}.font-mono{font-family:var(--stgm-font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent-foreground{color:var(--stgm-accent-foreground)}.text-card-foreground{color:var(--stgm-card-foreground)}.text-destructive{color:var(--stgm-destructive)}.text-foreground{color:var(--stgm-foreground)}.text-muted-foreground,.text-muted-foreground\/40{color:var(--stgm-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--stgm-muted-foreground) 40%, transparent)}}.text-muted-foreground\/60{color:var(--stgm-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--stgm-muted-foreground) 60%, transparent)}}.text-muted-foreground\/70{color:var(--stgm-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--stgm-muted-foreground) 70%, transparent)}}.text-primary{color:var(--stgm-primary)}.text-primary-foreground{color:var(--stgm-primary-foreground)}.text-secondary-foreground{color:var(--stgm-secondary-foreground)}.uppercase{text-transform:uppercase}.underline-offset-4{text-underline-offset:4px}.shadow-md{--tw-shadow:var(--stgm-shadow-md);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-foreground\/10{--tw-ring-color:var(--stgm-foreground)}@supports (color:color-mix(in lab, red, red)){.ring-foreground\/10{--tw-ring-color:color-mix(in oklab, var(--stgm-foreground) 10%, transparent)}}.ring-primary\/20{--tw-ring-color:var(--stgm-primary)}@supports (color:color-mix(in lab, red, red)){.ring-primary\/20{--tw-ring-color:color-mix(in oklab, var(--stgm-primary) 20%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--stgm-transition-timing));transition-duration:var(--tw-duration,var(--stgm-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--stgm-transition-timing));transition-duration:var(--tw-duration,var(--stgm-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--stgm-transition-timing));transition-duration:var(--tw-duration,var(--stgm-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-muted-foreground::placeholder{color:var(--stgm-muted-foreground)}@media (hover:hover){.hover\:bg-accent:hover,.hover\:bg-accent\/50:hover{background-color:var(--stgm-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab, var(--stgm-accent) 50%, transparent)}}.hover\:bg-destructive\/20:hover{background-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/20:hover{background-color:color-mix(in oklab, var(--stgm-destructive) 20%, transparent)}}.hover\:bg-muted:hover,.hover\:bg-muted\/50:hover{background-color:var(--stgm-muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--stgm-muted) 50%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--stgm-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--stgm-secondary) 80%, transparent)}}.hover\:text-accent-foreground:hover{color:var(--stgm-accent-foreground)}.hover\:text-destructive\/80:hover{color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:text-destructive\/80:hover{color:color-mix(in oklab, var(--stgm-destructive) 80%, transparent)}}.hover\:text-foreground:hover{color:var(--stgm-foreground)}.hover\:text-muted-foreground:hover{color:var(--stgm-muted-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-destructive\/40:focus-visible{border-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:border-destructive\/40:focus-visible{border-color:color-mix(in oklab, var(--stgm-destructive) 40%, transparent)}}.focus-visible\:border-ring:focus-visible{border-color:var(--stgm-ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-3:focus-visible,.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab, var(--stgm-destructive) 20%, transparent)}}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--stgm-ring)}@supports (color:color-mix(in lab, red, red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--stgm-ring) 50%, transparent)}}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-input\/50:disabled{background-color:var(--stgm-input)}@supports (color:color-mix(in lab, red, red)){.disabled\:bg-input\/50:disabled{background-color:color-mix(in oklab, var(--stgm-input) 50%, transparent)}}.disabled\:opacity-50:disabled{opacity:.5}:where([data-slot=button-group]) .in-data-\[slot\=button-group\]\:rounded-lg{border-radius:var(--stgm-radius)}.has-data-\[icon\=inline-end\]\:pr-1\.5:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 1.5)}.has-data-\[icon\=inline-end\]\:pr-2:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 2)}.has-data-\[icon\=inline-end\]\:pr-3:has([data-icon=inline-end]){padding-right:calc(var(--spacing) * 3)}.has-data-\[icon\=inline-start\]\:pl-1\.5:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 1.5)}.has-data-\[icon\=inline-start\]\:pl-2:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 2)}.has-data-\[icon\=inline-start\]\:pl-3:has([data-icon=inline-start]){padding-left:calc(var(--spacing) * 3)}.aria-expanded\:bg-muted[aria-expanded=true]{background-color:var(--stgm-muted)}.aria-expanded\:bg-secondary[aria-expanded=true]{background-color:var(--stgm-secondary)}.aria-expanded\:text-foreground[aria-expanded=true]{color:var(--stgm-foreground)}.aria-expanded\:text-secondary-foreground[aria-expanded=true]{color:var(--stgm-secondary-foreground)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--stgm-destructive)}.aria-invalid\:ring-3[aria-invalid=true]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--stgm-destructive) 20%, transparent)}}@media (min-width:48rem){.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.dark\:border-input:is(.dark *){border-color:var(--stgm-input)}.dark\:bg-destructive\/20:is(.dark *){background-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-destructive\/20:is(.dark *){background-color:color-mix(in oklab, var(--stgm-destructive) 20%, transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--stgm-input)}@supports (color:color-mix(in lab, red, red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab, var(--stgm-input) 30%, transparent)}}@media (hover:hover){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-destructive\/30:is(.dark *):hover{background-color:color-mix(in oklab, var(--stgm-destructive) 30%, transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--stgm-input)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab, var(--stgm-input) 50%, transparent)}}.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:var(--stgm-muted)}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-muted\/50:is(.dark *):hover{background-color:color-mix(in oklab, var(--stgm-muted) 50%, transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab, var(--stgm-destructive) 40%, transparent)}}.dark\:disabled\:bg-input\/80:is(.dark *):disabled{background-color:var(--stgm-input)}@supports (color:color-mix(in lab, red, red)){.dark\:disabled\:bg-input\/80:is(.dark *):disabled{background-color:color-mix(in oklab, var(--stgm-input) 80%, transparent)}}.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid=true]{border-color:color-mix(in oklab, var(--stgm-destructive) 50%, transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab, var(--stgm-destructive) 40%, transparent)}}.\[\&_code\]\:rounded code{border-radius:.25rem}.\[\&_code\]\:bg-muted code{background-color:var(--stgm-muted)}.\[\&_code\]\:px-1\.5 code{padding-inline:calc(var(--spacing) * 1.5)}.\[\&_code\]\:py-0\.5 code{padding-block:calc(var(--spacing) * .5)}.\[\&_code\]\:text-xs code{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_code\]\:before\:content-none code:before,.\[\&_code\]\:after\:content-none code:after{content:var(--tw-content);--tw-content:none;content:none}.\[\&_pre\]\:overflow-x-auto pre{overflow-x:auto}.\[\&_pre\]\:rounded-lg pre{border-radius:var(--stgm-radius)}.\[\&_pre\]\:bg-muted pre{background-color:var(--stgm-muted)}.\[\&_pre\]\:p-3 pre{padding:calc(var(--spacing) * 3)}.\[\&_pre\]\:text-xs pre{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_table\]\:text-xs table{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&_td\]\:px-2 td{padding-inline:calc(var(--spacing) * 2)}.\[\&_td\]\:py-1 td{padding-block:calc(var(--spacing) * 1)}.\[\&_th\]\:px-2 th{padding-inline:calc(var(--spacing) * 2)}.\[\&_th\]\:py-1 th{padding-block:calc(var(--spacing) * 1)}@media (hover:hover){.\[a\]\:hover\:bg-destructive\/20:is(a):hover{background-color:var(--stgm-destructive)}@supports (color:color-mix(in lab, red, red)){.\[a\]\:hover\:bg-destructive\/20:is(a):hover{background-color:color-mix(in oklab, var(--stgm-destructive) 20%, transparent)}}.\[a\]\:hover\:bg-muted:is(a):hover{background-color:var(--stgm-muted)}.\[a\]\:hover\:bg-primary\/80:is(a):hover{background-color:var(--stgm-primary)}@supports (color:color-mix(in lab, red, red)){.\[a\]\:hover\:bg-primary\/80:is(a):hover{background-color:color-mix(in oklab, var(--stgm-primary) 80%, transparent)}}.\[a\]\:hover\:bg-secondary\/80:is(a):hover{background-color:var(--stgm-secondary)}@supports (color:color-mix(in lab, red, red)){.\[a\]\:hover\:bg-secondary\/80:is(a):hover{background-color:color-mix(in oklab, var(--stgm-secondary) 80%, transparent)}}.\[a\]\:hover\:text-muted-foreground:is(a):hover{color:var(--stgm-muted-foreground)}}.\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.\[\&\>svg\]\:size-3\!>svg{width:calc(var(--spacing) * 3)!important;height:calc(var(--spacing) * 3)!important}:root{--stgm-font-sans:var(--font-geist-sans,system-ui, sans-serif);--stgm-font-mono:var(--font-geist-mono,ui-monospace, monospace);--stgm-radius:.625rem;--stgm-background:oklch(100% 0 0);--stgm-foreground:oklch(14.5% 0 0);--stgm-card:oklch(100% 0 0);--stgm-card-foreground:oklch(14.5% 0 0);--stgm-popover:oklch(100% 0 0);--stgm-popover-foreground:oklch(14.5% 0 0);--stgm-primary:oklch(55% .12 190);--stgm-primary-foreground:oklch(98.5% 0 0);--stgm-secondary:oklch(97% 0 0);--stgm-secondary-foreground:oklch(20.5% 0 0);--stgm-muted:oklch(97% 0 0);--stgm-muted-foreground:oklch(55.6% 0 0);--stgm-accent:oklch(97% 0 0);--stgm-accent-foreground:oklch(20.5% 0 0);--stgm-destructive:oklch(57.7% .245 27.325);--stgm-destructive-foreground:oklch(98.5% 0 0);--stgm-success:oklch(55% .15 150);--stgm-success-foreground:oklch(98.5% 0 0);--stgm-warning:oklch(75% .18 80);--stgm-warning-foreground:oklch(14.5% 0 0);--stgm-info:oklch(55% .15 250);--stgm-info-foreground:oklch(98.5% 0 0);--stgm-border:oklch(92.2% 0 0);--stgm-input:oklch(92.2% 0 0);--stgm-ring:oklch(55% .1 190);--stgm-chart-1:oklch(64.6% .222 41.116);--stgm-chart-2:oklch(60% .118 184.704);--stgm-chart-3:oklch(39.8% .07 227.392);--stgm-chart-4:oklch(82.8% .189 84.429);--stgm-chart-5:oklch(76.9% .188 70.08);--stgm-shadow-sm:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--stgm-shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--stgm-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--stgm-transition-duration:.15s;--stgm-transition-timing:cubic-bezier(.4, 0, .2, 1);--stgm-z-popover:50;--stgm-sidebar:oklch(98.5% 0 0);--stgm-sidebar-foreground:oklch(14.5% 0 0);--stgm-sidebar-primary:oklch(55% .12 190);--stgm-sidebar-primary-foreground:oklch(98.5% 0 0);--stgm-sidebar-accent:oklch(97% 0 0);--stgm-sidebar-accent-foreground:oklch(20.5% 0 0);--stgm-sidebar-border:oklch(92.2% 0 0);--stgm-sidebar-ring:oklch(55% .1 190)}.dark{--stgm-background:oklch(14.5% 0 0);--stgm-foreground:oklch(98.5% 0 0);--stgm-card:oklch(20.5% 0 0);--stgm-card-foreground:oklch(98.5% 0 0);--stgm-popover:oklch(26.9% 0 0);--stgm-popover-foreground:oklch(98.5% 0 0);--stgm-primary:oklch(72% .12 190);--stgm-primary-foreground:oklch(14.5% 0 0);--stgm-secondary:oklch(26.9% 0 0);--stgm-secondary-foreground:oklch(98.5% 0 0);--stgm-muted:oklch(26.9% 0 0);--stgm-muted-foreground:oklch(70.8% 0 0);--stgm-accent:oklch(37.1% 0 0);--stgm-accent-foreground:oklch(98.5% 0 0);--stgm-destructive:oklch(70.4% .191 22.216);--stgm-destructive-foreground:oklch(98.5% 0 0);--stgm-success:oklch(70% .15 150);--stgm-success-foreground:oklch(98.5% 0 0);--stgm-warning:oklch(78% .16 80);--stgm-warning-foreground:oklch(14.5% 0 0);--stgm-info:oklch(70% .15 250);--stgm-info-foreground:oklch(98.5% 0 0);--stgm-border:oklch(100% 0 0/.1);--stgm-input:oklch(100% 0 0/.15);--stgm-ring:oklch(55% .1 190);--stgm-chart-1:oklch(48.8% .243 264.376);--stgm-chart-2:oklch(69.6% .17 162.48);--stgm-chart-3:oklch(76.9% .188 70.08);--stgm-chart-4:oklch(62.7% .265 303.9);--stgm-chart-5:oklch(64.5% .246 16.439);--stgm-shadow-sm:0 1px 3px 0 #00000040, 0 1px 2px -1px #00000040;--stgm-shadow-md:0 4px 6px -1px #0000004d, 0 2px 4px -2px #00000040;--stgm-shadow-lg:0 10px 15px -3px #00000059, 0 4px 6px -4px #0000004d;--stgm-sidebar:oklch(20.5% 0 0);--stgm-sidebar-foreground:oklch(98.5% 0 0);--stgm-sidebar-primary:oklch(72% .12 190);--stgm-sidebar-primary-foreground:oklch(14.5% 0 0);--stgm-sidebar-accent:oklch(26.9% 0 0);--stgm-sidebar-accent-foreground:oklch(98.5% 0 0);--stgm-sidebar-border:oklch(100% 0 0/.1);--stgm-sidebar-ring:oklch(50% .08 190)}.stgm{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}.stgm *,.stgm :before,.stgm :after{box-sizing:border-box;border-style:solid;border-width:0;border-color:var(--stgm-border,currentColor)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}