@medicaresoft/dicom-viewer 0.1.0 → 0.1.1

package/README.md

@@ -45,6 +45,45 @@ El host decide de dónde salen los bytes: API propia, DICOMweb, disco local
 | `onBack` | `() => void` | Si se define, muestra botón volver |
 | `actions` | `ReactNode` | `<Action/>` inyectadas en slots |
 | `modals` | `ReactNode` | `<ViewerModal/>` inyectados |
+| `theme` | `DicomViewerTheme` | Colores primario/secundario + contrastes y superficies |
+
+## Tema (`theme`)
+
+El visor se personaliza en runtime sin recompilar estilos:
+
+```tsx
+<DicomViewer
+  study={study}
+  getDicomFile={fetcher}
+  theme={{
+    primary: "#0a5f8a",
+    primaryForeground: "#ffffff",
+    secondary: "#e63946",
+    secondaryForeground: "#ffffff",
+    // superficies opcionales (tema oscuro completo):
+    background: "#0e1017",
+    chrome: "#060608",
+    panel: "#1a1d27",
+    panelHover: "#202432",
+    border: "#242735",
+    // ...
+  }}
+/>
+```
+
+El prop se inyecta como variables CSS (`--dv-*`) en el elemento raíz del
+visor — alcance por instancia, sin contaminar el `:root` del host. Todos los
+campos son opcionales; los no definidos usan los defaults del paquete (o el
+tema del host, en el caso de Symphony).
+
+También puedes sobreescribir las variables globalmente en tu CSS:
+
+```css
+:root {
+  --dv-secondary: #e63946;
+  --dv-primary: #0a5f8a;
+}
+```
 
 ## Acciones y modales (slots)
 

package/dist/DicomViewer.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import type { DicomFileFetcher, DicomStudy, PresetsConfig, ThumbnailUrlResolver, ViewerBranding } from "./types";
+import type { DicomFileFetcher, DicomStudy, DicomViewerTheme, PresetsConfig, ThumbnailUrlResolver, ViewerBranding } from "./types";
 export interface DicomViewerProps {
     /** Metadatos del estudio (el host los obtiene de donde quiera). */
     study: DicomStudy;
@@ -19,6 +19,11 @@ export interface DicomViewerProps {
     actions?: ReactNode;
     /** Modales inyectados: <ViewerModal open=...>...</ViewerModal>. */
     modals?: ReactNode;
+    /**
+     * Tema de colores: primario/secundario con contrastes y tokens de
+     * superficie. Se aplica como variables CSS scoped al visor.
+     */
+    theme?: DicomViewerTheme;
     className?: string;
 }
 /**
@@ -26,5 +31,5 @@ export interface DicomViewerProps {
  * lógica de negocio, sin router y sin HTTP propio. Todo lo específico del
  * host llega por props (datos, fetchers, branding, acciones y modales).
  */
-export declare const DicomViewer: ({ study, getDicomFile, getThumbnailUrl, presets, maxConcurrentDownloads, branding, onBack, actions: actionsProp, modals: modalsProp, className, }: DicomViewerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DicomViewer: ({ study, getDicomFile, getThumbnailUrl, presets, maxConcurrentDownloads, branding, onBack, actions: actionsProp, modals: modalsProp, theme, className, }: DicomViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default DicomViewer;

package/dist/index.d.ts

@@ -1,7 +1,6 @@
-import "./style.css";
 export { DicomViewer } from "./DicomViewer";
 export type { DicomViewerProps } from "./DicomViewer";
 export { Action, ViewerModal } from "./Action";
 export { DicomToolbarButton } from "./components/DicomToolbarButton";
 export { useDicomContext, useViewerActions, DicomViewerContext } from "./context";
-export type { ActionContext, ActionPlacement, ActionProps, DicomFile, DicomFileFetcher, DicomSeries, DicomStudy, PresetsConfig, ThumbnailUrlResolver, ViewerBranding, ViewerModalProps, } from "./types";
+export type { ActionContext, ActionPlacement, ActionProps, DicomFile, DicomFileFetcher, DicomSeries, DicomStudy, DicomViewerTheme, PresetsConfig, ThumbnailUrlResolver, ViewerBranding, ViewerModalProps, } from "./types";

package/dist/index.js

@@ -1,4 +1,3 @@
-/* empty css               */
 import e, { Children as t, createContext as n, isValidElement as r, useCallback as i, useContext as a, useEffect as o, useMemo as s, useReducer as c, useRef as l, useState as u } from "react";
 import { Check as d, ChevronLeft as f, ChevronRight as p, Circle as m, Columns as h, Compass as g, Contrast as _, Crosshair as v, Eye as y, EyeOff as b, FlipHorizontal as x, FlipVertical as S, LayoutGrid as C, Library as w, Loader2 as T, Move as E, Pause as D, Play as O, RefreshCw as k, RotateCcw as A, RotateCw as j, Ruler as M, Search as N, Sliders as P, SlidersHorizontal as F, Square as I, Sun as L, Target as R, Trash2 as z, Triangle as B, Wrench as V, ZoomIn as H } from "lucide-react";
 import { Fragment as U, jsx as W, jsxs as G } from "react/jsx-runtime";
@@ -15975,7 +15974,7 @@ function Wt(...e) {
 //#region src/components/DicomToolbarButton.tsx
 var Gt = ({ active: e = !1, variant: t = "tool", icon: n, label: r, boundButtons: i, className: a, ...o }) => {
 	let s = Wt("relative flex items-center justify-center text-xs font-semibold rounded-xl border cursor-pointer select-none transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:pointer-events-none disabled:transform-none shrink-0", r ? "gap-1.5 px-3 py-1.5" : "p-2 w-9 h-9"), c = "";
-	return t === "tool" ? c = e ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/15 font-bold" : "border-transparent text-slate-400 hover:bg-slate-850/50 hover:text-slate-200" : t === "action" ? c = "border-[#242735] bg-[#1a1d27] text-slate-300 hover:bg-[#202432] hover:border-[#30354a] hover:text-white shadow-sm" : t === "destructive" && (c = "border-[#242735] bg-[#1a1d27] text-rose-450 hover:bg-rose-950/25 hover:border-rose-800/55 hover:text-rose-400 shadow-sm"), /* @__PURE__ */ G("button", {
+	return t === "tool" ? c = e ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/15 font-bold" : "border-transparent text-slate-400 hover:bg-slate-850/50 hover:text-slate-200" : t === "action" ? c = "border-dv-border bg-dv-panel text-slate-300 hover:bg-dv-panel-hover hover:border-dv-border-hover hover:text-white shadow-sm" : t === "destructive" && (c = "border-dv-border bg-dv-panel text-rose-450 hover:bg-rose-950/25 hover:border-rose-800/55 hover:text-rose-400 shadow-sm"), /* @__PURE__ */ G("button", {
 		className: Wt(s, c, a),
 		...o,
 		children: [
@@ -16022,7 +16021,7 @@ var Gt = ({ active: e = !1, variant: t = "tool", icon: n, label: r, boundButtons
 		ref: m,
 		children: [/* @__PURE__ */ W("button", {
 			onClick: () => p(!f),
-			className: Wt("relative flex items-center justify-center text-xs font-semibold rounded-xl border cursor-pointer select-none transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:pointer-events-none disabled:transform-none shrink-0 p-2 w-9 h-9 shadow-xs", f ? "bg-secondary/15 border-secondary/40 text-secondary font-extrabold shadow-sm shadow-secondary/20" : "border-[#242735] bg-[#1a1d27] text-slate-400 hover:bg-[#202432] hover:text-slate-200"),
+			className: Wt("relative flex items-center justify-center text-xs font-semibold rounded-xl border cursor-pointer select-none transition-all duration-200 hover:-translate-y-0.5 active:translate-y-0 disabled:opacity-40 disabled:pointer-events-none disabled:transform-none shrink-0 p-2 w-9 h-9 shadow-xs", f ? "bg-secondary/15 border-secondary/40 text-secondary font-extrabold shadow-sm shadow-secondary/20" : "border-dv-border bg-dv-panel text-slate-400 hover:bg-dv-panel-hover hover:text-slate-200"),
 			title: "Presets de Ventana (Contraste)",
 			children: /* @__PURE__ */ W(F, { className: "h-3.5 w-3.5" })
 		}), f && /* @__PURE__ */ W("div", {
@@ -16118,7 +16117,7 @@ var Yt = () => {
 		e.deltaY !== 0 && (e.currentTarget.scrollLeft += e.deltaY);
 	};
 	return /* @__PURE__ */ G("div", {
-		className: "hidden md:flex px-4 py-2.5 bg-[#060608] border-b border-[#242735] items-center justify-between gap-4 z-30 select-none shrink-0 w-full overflow-visible",
+		className: "hidden md:flex px-4 py-2.5 bg-dv-chrome border-b border-dv-border items-center justify-between gap-4 z-30 select-none shrink-0 w-full overflow-visible",
 		children: [
 			/* @__PURE__ */ G("div", {
 				className: "flex items-center gap-3 shrink-0",
@@ -16127,7 +16126,7 @@ var Yt = () => {
 						onClick: () => {
 							w?.();
 						},
-						className: "p-1.5 rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-white hover:bg-slate-800/40 cursor-pointer transition-all active:scale-95",
+						className: "p-1.5 rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-white hover:bg-slate-800/40 cursor-pointer transition-all active:scale-95",
 						title: "Volver a estudios",
 						children: /* @__PURE__ */ W(f, { className: "w-4 h-4" })
 					}),
@@ -16155,7 +16154,7 @@ var Yt = () => {
 			/* @__PURE__ */ W("div", {
 				className: "flex-1 min-w-0 flex items-center",
 				children: /* @__PURE__ */ W("div", {
-					className: "w-full flex flex-nowrap gap-1 bg-[#1a1d27] border border-[#242735] p-2 rounded-2xl overflow-x-auto scrollbar-none cursor-grab active:cursor-grabbing",
+					className: "w-full flex flex-nowrap gap-1 bg-dv-panel border border-dv-border p-2 rounded-2xl overflow-x-auto scrollbar-none cursor-grab active:cursor-grabbing",
 					...N,
 					onWheel: R,
 					children: ge.map((e) => /* @__PURE__ */ W(Gt, {
@@ -16183,7 +16182,7 @@ var Yt = () => {
 				})
 			}),
 			/* @__PURE__ */ G("div", {
-				className: "flex gap-1.5 bg-[#1a1d27] border border-[#242735] p-1.5 rounded-2xl items-center shrink-0",
+				className: "flex gap-1.5 bg-dv-panel border border-dv-border p-1.5 rounded-2xl items-center shrink-0",
 				children: [
 					/* @__PURE__ */ W(Gt, {
 						onClick: () => n({ type: "TOGGLE_REFERENCE_LINES" }),
@@ -16225,7 +16224,7 @@ var Yt = () => {
 				]
 			}),
 			/* @__PURE__ */ G("div", {
-				className: "flex gap-1.5 bg-[#1a1d27] border border-[#242735] p-1.5 rounded-2xl items-center shrink-0",
+				className: "flex gap-1.5 bg-dv-panel border border-dv-border p-1.5 rounded-2xl items-center shrink-0",
 				children: [
 					M.map((t) => t.children ? /* @__PURE__ */ W(e.Fragment, { children: t.children }, t.id) : /* @__PURE__ */ W(Gt, {
 						onClick: () => t.onClick?.({
@@ -16251,7 +16250,7 @@ var Yt = () => {
 						icon: /* @__PURE__ */ W(z, { className: "w-3.5 h-3.5" }),
 						title: "Borrar todas las mediciones"
 					}),
-					/* @__PURE__ */ W("div", { className: "w-px h-5 bg-[#242735] mx-0.5" }),
+					/* @__PURE__ */ W("div", { className: "w-px h-5 bg-dv-border mx-0.5" }),
 					/* @__PURE__ */ W(Gt, {
 						onClick: () => n({
 							type: "SET_SHOW_OVERLAYS",
@@ -16267,7 +16266,7 @@ var Yt = () => {
 						ref: L,
 						children: [/* @__PURE__ */ G("button", {
 							onClick: () => F(!P),
-							className: "relative flex items-center justify-center text-slate-400 hover:text-slate-200 border border-[#242735] bg-[#1a1d27] hover:bg-[#202432] rounded-xl p-2 w-9 h-9 cursor-pointer select-none transition-all duration-200",
+							className: "relative flex items-center justify-center text-slate-400 hover:text-slate-200 border border-dv-border bg-dv-panel hover:bg-dv-panel-hover rounded-xl p-2 w-9 h-9 cursor-pointer select-none transition-all duration-200",
 							title: "Dividir pantalla (Layout)",
 							children: [
 								t.layout === "1x1" && /* @__PURE__ */ W(I, { className: "w-3.5 h-3.5" }),
@@ -16330,7 +16329,7 @@ var Zt = ({ currentImageIndex: e, totalImages: t, ww: n, wc: r }) => {
 	let i = se(), { state: a, onBack: o, branding: s } = i, { study: c, showOverlays: l = !0 } = a, u = e ?? i.currentImageIndex, d = t ?? i.totalImages, p = n === void 0 ? i.ww : n, m = r === void 0 ? i.wc : r, h = Wt("transition-all duration-300", l ? "opacity-80 scale-100" : "opacity-0 scale-95 pointer-events-none");
 	return /* @__PURE__ */ G(U, { children: [
 		/* @__PURE__ */ G("div", {
-			className: Wt("absolute top-4 left-4 flex items-center gap-2.5 pointer-events-auto bg-[#13151c]/85 border border-[#242735] px-3.5 py-2.5 rounded-2xl backdrop-blur-md shadow-lg leading-relaxed text-left z-10", h),
+			className: Wt("absolute top-4 left-4 flex items-center gap-2.5 pointer-events-auto bg-dv-overlay/85 border border-dv-border px-3.5 py-2.5 rounded-2xl backdrop-blur-md shadow-lg leading-relaxed text-left z-10", h),
 			children: [o && /* @__PURE__ */ W("button", {
 				onClick: o,
 				className: "p-1 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800/60 active:scale-95 transition-all cursor-pointer shrink-0 md:hidden",
@@ -16363,7 +16362,7 @@ var Zt = ({ currentImageIndex: e, totalImages: t, ww: n, wc: r }) => {
 			})]
 		}),
 		s.logo && /* @__PURE__ */ W("div", {
-			className: Wt("absolute top-4 right-4 pointer-events-none bg-[#13151c]/80 border border-[#242735] px-3 py-1.5 rounded-xl backdrop-blur-md shadow-lg z-10 flex items-center justify-center md:hidden", h),
+			className: Wt("absolute top-4 right-4 pointer-events-none bg-dv-overlay/80 border border-dv-border px-3 py-1.5 rounded-xl backdrop-blur-md shadow-lg z-10 flex items-center justify-center md:hidden", h),
 			children: /* @__PURE__ */ W("img", {
 				src: s.logo,
 				alt: "Institution Logo",
@@ -16371,7 +16370,7 @@ var Zt = ({ currentImageIndex: e, totalImages: t, ww: n, wc: r }) => {
 			})
 		}),
 		/* @__PURE__ */ G("div", {
-			className: Wt("absolute bottom-4 left-4 pointer-events-none text-[10px] text-slate-300 font-mono space-y-1 bg-[#13151c]/85 border border-[#242735] px-3 py-2 rounded-2xl backdrop-blur-md shadow-lg leading-relaxed text-left z-10", h),
+			className: Wt("absolute bottom-4 left-4 pointer-events-none text-[10px] text-slate-300 font-mono space-y-1 bg-dv-overlay/85 border border-dv-border px-3 py-2 rounded-2xl backdrop-blur-md shadow-lg leading-relaxed text-left z-10", h),
 			children: [
 				/* @__PURE__ */ G("p", { children: [
 					"W:",
@@ -16404,7 +16403,7 @@ var Zt = ({ currentImageIndex: e, totalImages: t, ww: n, wc: r }) => {
 			]
 		}),
 		s.name && /* @__PURE__ */ W("div", {
-			className: Wt("absolute bottom-4 right-4 pointer-events-none text-[9px] text-slate-500 font-mono bg-[#13151c]/65 px-2.5 py-1 rounded-xl border border-[#242735] shadow-inner z-10 uppercase tracking-wider", h),
+			className: Wt("absolute bottom-4 right-4 pointer-events-none text-[9px] text-slate-500 font-mono bg-dv-overlay/65 px-2.5 py-1 rounded-xl border border-dv-border shadow-inner z-10 uppercase tracking-wider", h),
 			children: s.name
 		})
 	] });
@@ -35805,7 +35804,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 		onDragEnter: b,
 		onDragLeave: x,
 		onDrop: S,
-		className: Wt("flex-1 h-full min-h-0 relative bg-[#090b11] flex items-center justify-center border transition-all duration-200 cursor-pointer select-none", h ? "border-secondary bg-secondary/5 ring-2 ring-secondary/35 z-10 shadow-xl" : n ? "border-secondary ring-1 ring-secondary/20 z-10 shadow-lg shadow-secondary/5" : "border-[#242735] hover:border-slate-800/50"),
+		className: Wt("flex-1 h-full min-h-0 relative bg-dv-viewport flex items-center justify-center border transition-all duration-200 cursor-pointer select-none", h ? "border-secondary bg-secondary/5 ring-2 ring-secondary/35 z-10 shadow-xl" : n ? "border-secondary ring-1 ring-secondary/20 z-10 shadow-lg shadow-secondary/5" : "border-dv-border hover:border-slate-800/50"),
 		children: [
 			h && /* @__PURE__ */ W("div", {
 				className: "absolute inset-0 bg-secondary/5 backdrop-blur-xs border-2 border-dashed border-secondary flex items-center justify-center z-30 pointer-events-none transition-all duration-200",
@@ -35815,7 +35814,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 				})
 			}),
 			O < k && /* @__PURE__ */ W("div", {
-				className: "absolute top-0 left-0 right-0 h-0.5 bg-[#13151c]/80 z-20",
+				className: "absolute top-0 left-0 right-0 h-0.5 bg-dv-overlay/80 z-20",
 				children: /* @__PURE__ */ W("div", {
 					className: "bg-linear-to-r from-secondary to-secondary/50 h-full transition-all duration-300 ease-out shadow-sm shadow-secondary/30",
 					style: { width: `${D}%` }
@@ -35827,10 +35826,10 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 				onContextMenu: (e) => e.preventDefault()
 			}),
 			E ? /* @__PURE__ */ G("div", {
-				className: "absolute inset-0 bg-[#090b11]/90 z-10 flex flex-col justify-center items-center pointer-events-none",
+				className: "absolute inset-0 bg-dv-viewport/90 z-10 flex flex-col justify-center items-center pointer-events-none",
 				children: [
 					/* @__PURE__ */ G("div", {
-						className: Wt("absolute top-4 left-4 bg-[#13151c]/85 border border-[#242735] px-3.5 py-2.5 rounded-2xl w-40 space-y-2 transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+						className: Wt("absolute top-4 left-4 bg-dv-overlay/85 border border-dv-border px-3.5 py-2.5 rounded-2xl w-40 space-y-2 transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
 						children: [
 							/* @__PURE__ */ W(Xt, { className: "h-3 w-3/4 bg-slate-800/40" }),
 							/* @__PURE__ */ W(Xt, { className: "h-2 w-1/2 bg-slate-800/30" }),
@@ -35838,7 +35837,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 						]
 					}),
 					/* @__PURE__ */ W("div", {
-						className: Wt("absolute top-4 right-4 bg-[#13151c]/85 border border-[#242735] px-3 py-2 rounded-2xl w-24 h-12 flex items-center justify-center transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+						className: Wt("absolute top-4 right-4 bg-dv-overlay/85 border border-dv-border px-3 py-2 rounded-2xl w-24 h-12 flex items-center justify-center transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
 						children: /* @__PURE__ */ W(Xt, { className: "h-4 w-16 bg-slate-800/40" })
 					}),
 					/* @__PURE__ */ G("div", {
@@ -35856,7 +35855,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 						})]
 					}),
 					/* @__PURE__ */ G("div", {
-						className: Wt("absolute bottom-4 left-4 bg-[#13151c]/85 border border-[#242735] px-3 py-2 rounded-2xl w-24 space-y-2 transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+						className: Wt("absolute bottom-4 left-4 bg-dv-overlay/85 border border-dv-border px-3 py-2 rounded-2xl w-24 space-y-2 transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
 						children: [
 							/* @__PURE__ */ W(Xt, { className: "h-2 w-2/3 bg-slate-800/30" }),
 							/* @__PURE__ */ W(Xt, { className: "h-2 w-2/3 bg-slate-800/30" }),
@@ -35864,7 +35863,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 						]
 					}),
 					/* @__PURE__ */ W("div", {
-						className: Wt("absolute bottom-4 right-4 bg-[#13151c]/65 px-2.5 py-1 rounded-xl border border-[#242735] w-28 h-5 flex items-center justify-center transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+						className: Wt("absolute bottom-4 right-4 bg-dv-overlay/65 px-2.5 py-1 rounded-xl border border-dv-border w-28 h-5 flex items-center justify-center transition-all duration-300", a.showOverlays ?? !0 ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
 						children: /* @__PURE__ */ W(Xt, { className: "h-2 w-20 bg-slate-800/30" })
 					})
 				]
@@ -35895,7 +35894,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 			onActivate: () => {}
 		})
 	}) : /* @__PURE__ */ W("div", {
-		className: Wt("h-full w-full min-h-0 flex-1 bg-[#060608] gap-1.5 p-1.5 grid", n === "1x1" && "grid-cols-1 grid-rows-1", n === "1x2" && "grid-cols-2 grid-rows-1", n === "2x2" && "grid-cols-2 grid-rows-2"),
+		className: Wt("h-full w-full min-h-0 flex-1 bg-dv-chrome gap-1.5 p-1.5 grid", n === "1x1" && "grid-cols-1 grid-rows-1", n === "1x2" && "grid-cols-2 grid-rows-1", n === "2x2" && "grid-cols-2 grid-rows-2"),
 		children: l.map((e) => {
 			let n = i[e]?.seriesIndex ?? 0;
 			return /* @__PURE__ */ W(fn, {
@@ -35912,11 +35911,11 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 }, mn = () => {
 	let { state: e, dispatch: t, isPlaying: n, togglePlay: r, currentImageIndex: i, totalImages: a, downloadedCount: o, loadingProgress: s, handleSliderChange: c } = se(), l = e.playSpeed ?? 1;
 	return /* @__PURE__ */ G("div", {
-		className: "bg-[#13151c]/90 backdrop-blur-md border border-[#242735] rounded-2xl p-3 flex flex-col md:flex-row items-center gap-4 shadow-xl select-none mx-4 mb-4",
+		className: "bg-dv-overlay/90 backdrop-blur-md border border-dv-border rounded-2xl p-3 flex flex-col md:flex-row items-center gap-4 shadow-xl select-none mx-4 mb-4",
 		children: [
 			/* @__PURE__ */ W("button", {
 				onClick: r,
-				className: `p-2.5 rounded-xl border cursor-pointer select-none transition-all duration-300 active:scale-95 shrink-0 ${n ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/15 font-semibold" : "border-[#242735] bg-[#1a1d27] text-slate-300 hover:bg-[#202432] hover:text-white"}`,
+				className: `p-2.5 rounded-xl border cursor-pointer select-none transition-all duration-300 active:scale-95 shrink-0 ${n ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/15 font-semibold" : "border-dv-border bg-dv-panel text-slate-300 hover:bg-dv-panel-hover hover:text-white"}`,
 				title: n ? "Pausar reproducción" : "Reproducir serie",
 				children: W(n ? D : O, { className: "w-4 h-4 fill-current" })
 			}),
@@ -35936,7 +35935,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 						max: o > 0 ? o - 1 : 0,
 						value: i,
 						onChange: (e) => c(Number(e.target.value)),
-						className: "flex-1 h-1.5 bg-[#1a1d27] border border-[#242735] rounded-full appearance-none cursor-pointer accent-secondary focus:outline-none"
+						className: "flex-1 h-1.5 bg-dv-panel border border-dv-border rounded-full appearance-none cursor-pointer accent-secondary focus:outline-none"
 					}),
 					/* @__PURE__ */ W("button", {
 						onClick: () => c(Math.min(o - 1, i + 1)),
@@ -35948,10 +35947,10 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 				]
 			}),
 			/* @__PURE__ */ G("div", {
-				className: "w-full md:w-auto text-[11px] font-mono text-slate-400 bg-[#1a1d27] border border-[#242735] px-3.5 py-1.5 rounded-xl select-none flex items-center justify-between md:justify-start gap-3",
+				className: "w-full md:w-auto text-[11px] font-mono text-slate-400 bg-dv-panel border border-dv-border px-3.5 py-1.5 rounded-xl select-none flex items-center justify-between md:justify-start gap-3",
 				children: [
 					o < a && /* @__PURE__ */ G("span", {
-						className: "flex items-center gap-1.5 text-secondary font-semibold mr-2 border-r border-[#242735] pr-3",
+						className: "flex items-center gap-1.5 text-secondary font-semibold mr-2 border-r border-dv-border pr-3",
 						children: [/* @__PURE__ */ W(T, { className: "w-3 h-3 animate-spin" }), /* @__PURE__ */ G("span", { children: [
 							"Cargando ",
 							o,
@@ -35977,7 +35976,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 						onClick: () => {
 							t({ type: "TOGGLE_PLAY_SPEED" });
 						},
-						className: "ml-3 pl-3 border-l border-[#242735] text-[10.5px] font-black text-secondary hover:text-white transition-colors cursor-pointer select-none",
+						className: "ml-3 pl-3 border-l border-dv-border text-[10.5px] font-black text-secondary hover:text-white transition-colors cursor-pointer select-none",
 						title: "Velocidad de reproducción (Cine FPS)",
 						children: ["x", l]
 					})
@@ -35988,9 +35987,9 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 }, hn = () => {
 	let { state: e, dispatch: t, getThumbnailUrl: n } = se(), { study: r } = e, i = ue("sidebar"), a = e.viewports[e.activeViewportIndex]?.seriesIndex ?? 0;
 	return /* @__PURE__ */ G("aside", {
-		className: "hidden md:flex w-80 border-r border-[#242735] bg-[#060608] h-full flex-col shrink-0 overflow-y-auto scrollbar-discreet select-none",
+		className: "hidden md:flex w-80 border-r border-dv-border bg-dv-chrome h-full flex-col shrink-0 overflow-y-auto scrollbar-discreet select-none",
 		children: [/* @__PURE__ */ G("div", {
-			className: "p-4 border-b border-[#242735] space-y-3 text-left",
+			className: "p-4 border-b border-dv-border space-y-3 text-left",
 			children: [/* @__PURE__ */ W("span", {
 				className: "text-[9px] font-black text-slate-500 uppercase tracking-widest block pl-1",
 				children: "HERRAMIENTAS DE ESTUDIO"
@@ -36043,7 +36042,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 	let { icon: t, text: n, onClick: r, className: i, disabled: a } = e;
 	return /* @__PURE__ */ G("button", {
 		onClick: r,
-		className: Wt("flex-1 flex items-center justify-center gap-1.5 px-2.5 py-2.5 rounded-xl text-[10px] bg-[#1a1d27] hover:bg-[#222634] border border-[#242735] font-semibold text-slate-300 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed select-none active:scale-95", i),
+		className: Wt("flex-1 flex items-center justify-center gap-1.5 px-2.5 py-2.5 rounded-xl text-[10px] bg-dv-panel hover:bg-dv-panel-hover-alt border border-dv-border font-semibold text-slate-300 hover:text-white transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed select-none active:scale-95", i),
 		disabled: a,
 		children: [t, /* @__PURE__ */ W("span", { children: n })]
 	});
@@ -36055,7 +36054,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 		onDragStart: (e) => {
 			e.dataTransfer.setData("text/plain", s.toString()), e.dataTransfer.effectAllowed = "copyMove";
 		},
-		className: Wt("relative rounded-2xl overflow-hidden border cursor-grab active:cursor-grabbing group bg-[#11131c]/90 transition-all duration-300 p-2", t ? "border-secondary/60 shadow-md shadow-secondary/15 ring-1 ring-secondary/30" : "border-[#242735] hover:border-slate-700/50"),
+		className: Wt("relative rounded-2xl overflow-hidden border cursor-grab active:cursor-grabbing group bg-dv-card/90 transition-all duration-300 p-2", t ? "border-secondary/60 shadow-md shadow-secondary/15 ring-1 ring-secondary/30" : "border-dv-border hover:border-slate-700/50"),
 		children: [/* @__PURE__ */ G("div", {
 			className: "relative w-full h-32 rounded-xl bg-black overflow-hidden flex items-center justify-center",
 			children: [l && /* @__PURE__ */ W("img", {
@@ -36072,7 +36071,7 @@ var fn = ({ viewportIndex: e, seriesIndex: t, isActive: n, onActivate: r }) => {
 		}), /* @__PURE__ */ G("div", {
 			className: "mt-2.5 flex items-center gap-2 px-1 text-left",
 			children: [/* @__PURE__ */ W("span", {
-				className: Wt("px-1.5 py-0.5 rounded-lg border text-[8px] font-black uppercase tracking-wider shrink-0", t ? "bg-secondary/30 border-secondary/45 text-slate-250" : "bg-[#1a1d27] border-[#242735] text-slate-450"),
+				className: Wt("px-1.5 py-0.5 rounded-lg border text-[8px] font-black uppercase tracking-wider shrink-0", t ? "bg-secondary/30 border-secondary/45 text-slate-250" : "bg-dv-panel border-dv-border text-slate-450"),
 				children: i
 			}), /* @__PURE__ */ G("div", {
 				className: "min-w-0 flex-1",
@@ -36139,12 +36138,12 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 			defaultValue: "tools",
 			className: "w-full",
 			children: [/* @__PURE__ */ G("div", {
-				className: "flex items-center justify-between border-b border-[#242735] pb-2",
+				className: "flex items-center justify-between border-b border-dv-border pb-2",
 				children: [/* @__PURE__ */ W("span", {
 					className: "text-[9px] font-black text-slate-500 uppercase tracking-widest",
 					children: "Herramientas"
 				}), /* @__PURE__ */ G(bn, {
-					className: "bg-[#11131c] border border-[#242735] h-7 p-[2px] rounded-lg",
+					className: "bg-dv-card border border-dv-border h-7 p-[2px] rounded-lg",
 					children: [
 						/* @__PURE__ */ W(xn, {
 							value: "tools",
@@ -36175,7 +36174,7 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 								let t = n === e.id;
 								return /* @__PURE__ */ G("button", {
 									onClick: () => r(e.id),
-									className: Wt("flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border transition-all duration-150 active:scale-95 cursor-pointer select-none", t ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/10 font-black" : "border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200"),
+									className: Wt("flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border transition-all duration-150 active:scale-95 cursor-pointer select-none", t ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/10 font-black" : "border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200"),
 									children: [/* @__PURE__ */ W(e.Icon, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ W("span", {
 										className: "truncate w-full text-center",
 										children: e.label
@@ -36192,37 +36191,37 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 							children: [
 								/* @__PURE__ */ G("button", {
 									onClick: i,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(A, { className: "w-3.5 h-3.5 text-secondary" }), /* @__PURE__ */ W("span", { children: "Restablecer" })]
 								}),
 								/* @__PURE__ */ G("button", {
 									onClick: a,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-rose-400 hover:text-rose-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-rose-400 hover:text-rose-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(z, { className: "w-3.5 h-3.5 text-rose-450" }), /* @__PURE__ */ W("span", { children: "Medidas" })]
 								}),
 								/* @__PURE__ */ G("button", {
 									onClick: o,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(_, { className: "w-3.5 h-3.5 text-secondary" }), /* @__PURE__ */ W("span", { children: "Invertir" })]
 								}),
 								/* @__PURE__ */ G("button", {
 									onClick: s,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(j, { className: "w-3.5 h-3.5 text-secondary" }), /* @__PURE__ */ W("span", { children: "Girar D." })]
 								}),
 								/* @__PURE__ */ G("button", {
 									onClick: c,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(A, { className: "w-3.5 h-3.5 text-secondary" }), /* @__PURE__ */ W("span", { children: "Girar I." })]
 								}),
 								/* @__PURE__ */ G("button", {
 									onClick: l,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(x, { className: "w-3.5 h-3.5 text-secondary" }), /* @__PURE__ */ W("span", { children: "Volteo H." })]
 								}),
 								/* @__PURE__ */ G("button", {
 									onClick: u,
-									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
+									className: "flex flex-col items-center justify-center gap-1.5 py-2 px-1 text-[9px] font-bold rounded-xl border border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200 transition-all duration-150 active:scale-95 cursor-pointer",
 									children: [/* @__PURE__ */ W(S, { className: "w-3.5 h-3.5 text-secondary" }), /* @__PURE__ */ W("span", { children: "Volteo V." })]
 								})
 							]
@@ -36237,7 +36236,7 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 								let n = d === t.W && f === t.C;
 								return /* @__PURE__ */ W("button", {
 									onClick: () => p(t.W, t.C),
-									className: Wt("flex items-center justify-center gap-1 py-2 px-1.5 text-[9px] font-bold rounded-xl border transition-all duration-150 active:scale-95 cursor-pointer select-none", n ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/10" : "border-[#242735] bg-[#1a1d27] text-slate-400 hover:text-slate-200"),
+									className: Wt("flex items-center justify-center gap-1 py-2 px-1.5 text-[9px] font-bold rounded-xl border transition-all duration-150 active:scale-95 cursor-pointer select-none", n ? "bg-secondary/10 border-secondary/35 text-secondary shadow-sm shadow-secondary/10" : "border-dv-border bg-dv-panel text-slate-400 hover:text-slate-200"),
 									title: `W: ${t.W} C: ${t.C}`,
 									children: /* @__PURE__ */ W("span", { children: Cn(e) })
 								}, e);
@@ -36253,9 +36252,9 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 		i((t) => t === e ? null : e);
 	};
 	return /* @__PURE__ */ G("footer", {
-		className: "md:hidden w-full bg-[#060608] border-t border-[#242735] shrink-0 select-none z-20 relative font-sans",
+		className: "md:hidden w-full bg-dv-chrome border-t border-dv-border shrink-0 select-none z-20 relative font-sans",
 		children: [r !== null && /* @__PURE__ */ G("div", {
-			className: "absolute bottom-16 left-4 right-4 z-30 p-4 bg-[#060608]/95 backdrop-blur-md rounded-2xl border border-[#242735] shadow-2xl overflow-y-auto overflow-x-hidden scrollbar-discreet animate-in slide-in-from-bottom duration-250 max-h-[260px]",
+			className: "absolute bottom-16 left-4 right-4 z-30 p-4 bg-dv-chrome/95 backdrop-blur-md rounded-2xl border border-dv-border shadow-2xl overflow-y-auto overflow-x-hidden scrollbar-discreet animate-in slide-in-from-bottom duration-250 max-h-[260px]",
 			children: [
 				r === "series" && /* @__PURE__ */ W(En, {}),
 				r === "options" && /* @__PURE__ */ G("div", {
@@ -36292,14 +36291,14 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 								activeSeriesIndex: e.viewports[e.activeViewportIndex]?.seriesIndex ?? 0
 							}),
 							disabled: t.disabled,
-							className: Wt("flex flex-col items-center justify-center gap-1.5 py-2.5 rounded-xl text-[10px] bg-[#1a1d27] border border-[#242735] font-semibold text-slate-355 hover:text-white transition-all cursor-pointer select-none active:scale-95 animate-fade-in disabled:opacity-40 disabled:cursor-not-allowed", t.className),
+							className: Wt("flex flex-col items-center justify-center gap-1.5 py-2.5 rounded-xl text-[10px] bg-dv-panel border border-dv-border font-semibold text-slate-355 hover:text-white transition-all cursor-pointer select-none active:scale-95 animate-fade-in disabled:opacity-40 disabled:cursor-not-allowed", t.className),
 							children: [t.icon, /* @__PURE__ */ W("span", { children: t.label })]
 						}, t.id)), /* @__PURE__ */ G("button", {
 							onClick: () => t({
 								type: "SET_SHOW_OVERLAYS",
 								payload: !o
 							}),
-							className: Wt("flex flex-col items-center justify-center gap-1.5 py-2.5 rounded-xl text-[10px] border font-semibold transition-all cursor-pointer select-none active:scale-95 animate-fade-in", o ? "bg-[#1a1d27] border-[#242735] text-slate-355 hover:text-white" : "bg-secondary/15 border-secondary/35 text-secondary font-bold"),
+							className: Wt("flex flex-col items-center justify-center gap-1.5 py-2.5 rounded-xl text-[10px] border font-semibold transition-all cursor-pointer select-none active:scale-95 animate-fade-in", o ? "bg-dv-panel border-dv-border text-slate-355 hover:text-white" : "bg-secondary/15 border-secondary/35 text-secondary font-bold"),
 							children: [o ? /* @__PURE__ */ W(y, { className: "h-4 w-4 text-slate-400" }) : /* @__PURE__ */ W(b, { className: "h-4 w-4 text-secondary" }), /* @__PURE__ */ W("span", { children: o ? "Ocultar Datos" : "Mostrar Datos" })]
 						})]
 					})]
@@ -36356,7 +36355,7 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 						type: "SET_ACTIVE_SERIES_INDEX",
 						payload: r
 					}),
-					className: Wt("relative rounded-2xl overflow-hidden border cursor-pointer group hover:border-secondary/20 transition-all duration-300 w-32 h-20 shrink-0 p-1 bg-[#11131c]/90", i ? "border-secondary/60 shadow-lg shadow-secondary/10 ring-1 ring-secondary/20" : "border-[#242735]"),
+					className: Wt("relative rounded-2xl overflow-hidden border cursor-pointer group hover:border-secondary/20 transition-all duration-300 w-32 h-20 shrink-0 p-1 bg-dv-card/90", i ? "border-secondary/60 shadow-lg shadow-secondary/10 ring-1 ring-secondary/20" : "border-dv-border"),
 					children: /* @__PURE__ */ G("div", {
 						className: "relative w-full h-full rounded-xl bg-black overflow-hidden",
 						children: [n && /* @__PURE__ */ W("img", {
@@ -36367,7 +36366,7 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 							className: "absolute inset-0 bg-linear-to-t from-black via-black/70 to-transparent flex flex-col justify-end p-2 text-left",
 							children: [
 								/* @__PURE__ */ W("span", {
-									className: Wt("inline-block px-1 py-0.2 rounded-sm border text-[6px] font-black uppercase tracking-wider mb-1 w-fit", i ? "bg-secondary/30 border-secondary/45 text-slate-250" : "bg-[#1a1d27] border-[#242735] text-slate-450"),
+									className: Wt("inline-block px-1 py-0.2 rounded-sm border text-[6px] font-black uppercase tracking-wider mb-1 w-fit", i ? "bg-secondary/30 border-secondary/45 text-slate-250" : "bg-dv-panel border-dv-border text-slate-450"),
 									children: e.modality
 								}),
 								/* @__PURE__ */ W("p", {
@@ -36388,14 +36387,14 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 }, Dn = () => {
 	let { currentImageIndex: e, totalImages: t, downloadedCount: n, handleSliderChange: r } = se();
 	return /* @__PURE__ */ G("div", {
-		className: "md:hidden shrink-0 bg-[#060608] border-t border-[#242735] px-4 py-2.5 flex items-center gap-3 select-none",
+		className: "md:hidden shrink-0 bg-dv-chrome border-t border-dv-border px-4 py-2.5 flex items-center gap-3 select-none",
 		children: [/* @__PURE__ */ W("input", {
 			type: "range",
 			min: "0",
 			max: n > 0 ? n - 1 : 0,
 			value: e,
 			onChange: (e) => r(Number(e.target.value)),
-			className: "flex-1 h-1.5 bg-[#1a1d27] border border-[#242735] rounded-full appearance-none cursor-pointer accent-secondary focus:outline-none"
+			className: "flex-1 h-1.5 bg-dv-panel border border-dv-border rounded-full appearance-none cursor-pointer accent-secondary focus:outline-none"
 		}), /* @__PURE__ */ G("span", {
 			className: "text-[10px] font-mono text-primary font-bold shrink-0",
 			children: [
@@ -36405,21 +36404,46 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 			]
 		})]
 	});
-}, On = ({ study: e, getDicomFile: n, getThumbnailUrl: i, presets: a, maxConcurrentDownloads: o, branding: c, onBack: l, actions: u, modals: d, className: f }) => {
-	let p = s(() => t.toArray(u).filter(r), [u]), m = s(() => t.toArray(d).filter(r), [d]), h = fe(e, {
+}, On = ({ study: e, getDicomFile: n, getThumbnailUrl: i, presets: a, maxConcurrentDownloads: o, branding: c, onBack: l, actions: u, modals: d, theme: f, className: p }) => {
+	let m = s(() => t.toArray(u).filter(r), [u]), h = s(() => t.toArray(d).filter(r), [d]), g = s(() => {
+		if (!f) return;
+		let e = {
+			primary: "--dv-primary",
+			primaryForeground: "--dv-primary-foreground",
+			secondary: "--dv-secondary",
+			secondaryForeground: "--dv-secondary-foreground",
+			background: "--dv-bg",
+			chrome: "--dv-chrome",
+			viewport: "--dv-viewport",
+			overlay: "--dv-overlay",
+			panel: "--dv-panel",
+			panelHover: "--dv-panel-hover",
+			panelHoverAlt: "--dv-panel-hover-alt",
+			border: "--dv-border",
+			borderHover: "--dv-border-hover",
+			card: "--dv-card",
+			modal: "--dv-modal"
+		}, t = {};
+		for (let [n, r] of Object.entries(e)) {
+			let e = f[n];
+			typeof e == "string" && e.length > 0 && (t[r] = e);
+		}
+		return t;
+	}, [f]), _ = fe(e, {
 		getDicomFile: n,
 		getThumbnailUrl: i,
 		presets: a,
 		maxConcurrentDownloads: o,
 		branding: c,
 		onBack: l,
-		actions: p,
-		modals: m
+		actions: m,
+		modals: h
 	});
 	return /* @__PURE__ */ W(oe.Provider, {
-		value: h,
+		value: _,
 		children: /* @__PURE__ */ G("div", {
-			className: "h-dvh bg-[#0e1017] text-slate-100 flex flex-col overflow-hidden font-sans select-none w-full relative" + (f ? ` ${f}` : ""),
+			style: g,
+			className: "h-dvh bg-dv-bg text-slate-100 flex flex-col overflow-hidden font-sans select-none w-full relative" + (p ? ` ${p}` : ""),
 			onContextMenu: (e) => {
 				e.preventDefault();
 			},
@@ -36428,7 +36452,7 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 				/* @__PURE__ */ G("div", {
 					className: "flex-1 flex flex-col md:flex-row overflow-hidden min-h-0 relative w-full",
 					children: [/* @__PURE__ */ W(hn, {}), /* @__PURE__ */ G("div", {
-						className: "flex-1 flex flex-col h-full min-w-0 overflow-hidden bg-[#0e1017] relative",
+						className: "flex-1 flex flex-col h-full min-w-0 overflow-hidden bg-dv-bg relative",
 						children: [
 							/* @__PURE__ */ W(pn, {}),
 							/* @__PURE__ */ W(Dn, {}),
@@ -36440,7 +36464,7 @@ var Cn = (e) => e.split("_").map((e) => e.charAt(0).toUpperCase() + e.slice(1).t
 					})]
 				}),
 				/* @__PURE__ */ W(Tn, {}),
-				m
+				h
 			]
 		})
 	});

package/dist/skeleton.d.ts

@@ -1,3 +1,2 @@
-import "./style.css";
 export declare const DicomViewerSkeleton: () => import("react/jsx-runtime").JSX.Element;
 export default DicomViewerSkeleton;

package/dist/skeleton.js

@@ -1,11 +1,10 @@
-/* empty css               */
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/skeleton.tsx
 var n = () => /* @__PURE__ */ t("div", {
-	className: "h-dvh bg-[#07090e] text-slate-100 flex flex-col md:flex-row overflow-hidden font-sans select-none w-full relative animate-pulse",
+	className: "h-dvh bg-dv-bg text-slate-100 flex flex-col md:flex-row overflow-hidden font-sans select-none w-full relative animate-pulse",
 	children: [
 		/* @__PURE__ */ t("aside", {
-			className: "hidden md:flex w-80 border-r border-slate-800 bg-[#0c0e14] h-full flex-col shrink-0",
+			className: "hidden md:flex w-80 border-r border-slate-800 bg-dv-modal h-full flex-col shrink-0",
 			children: [
 				/* @__PURE__ */ t("div", {
 					className: "p-4 border-b border-slate-800 space-y-2 text-left",
@@ -49,7 +48,7 @@ var n = () => /* @__PURE__ */ t("div", {
 			className: "flex-1 flex flex-col h-full min-w-0 overflow-hidden bg-black relative",
 			children: [
 				/* @__PURE__ */ t("div", {
-					className: "px-3 py-2 md:px-4 md:py-3 bg-[#0c0e14] border-b border-slate-800 flex flex-nowrap items-center justify-between gap-3 shrink-0 w-full overflow-hidden",
+					className: "px-3 py-2 md:px-4 md:py-3 bg-dv-modal border-b border-slate-800 flex flex-nowrap items-center justify-between gap-3 shrink-0 w-full overflow-hidden",
 					children: [/* @__PURE__ */ e("div", {
 						className: "flex-1 min-w-0 flex flex-nowrap gap-1.5 overflow-hidden",
 						children: [...[
@@ -99,13 +98,13 @@ var n = () => /* @__PURE__ */ t("div", {
 					]
 				}),
 				/* @__PURE__ */ t("div", {
-					className: "hidden md:flex h-14 border-t border-slate-800 bg-[#0c0e14] items-center px-4 gap-4 shrink-0",
+					className: "hidden md:flex h-14 border-t border-slate-800 bg-dv-modal items-center px-4 gap-4 shrink-0",
 					children: [/* @__PURE__ */ e("div", { className: "h-8 w-8 bg-slate-900/50 border border-slate-800/50 rounded-lg shrink-0" }), /* @__PURE__ */ e("div", { className: "flex-1 h-2 bg-slate-900/60 rounded-full" })]
 				})
 			]
 		}),
 		/* @__PURE__ */ t("footer", {
-			className: "md:hidden w-full border-t border-slate-800 bg-[#0c0e14] shrink-0 flex flex-col h-56",
+			className: "md:hidden w-full border-t border-slate-800 bg-dv-modal shrink-0 flex flex-col h-56",
 			children: [/* @__PURE__ */ t("div", {
 				className: "flex items-center justify-between p-3 border-b border-slate-800",
 				children: [/* @__PURE__ */ e("div", { className: "h-3 bg-slate-800/50 rounded-md w-1/3" }), /* @__PURE__ */ t("div", {

package/dist/style.css

@@ -1,3 +1,2 @@
 /*! tailwindcss v4.3.3 | 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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--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-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-950:oklch(27.9% .077 45.635);--color-cyan-400:oklch(78.9% .154 211.53);--color-cyan-800:oklch(45% .085 224.283);--color-cyan-950:oklch(30.2% .056 229.695);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-950:oklch(29.1% .149 302.717);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-950:oklch(27.1% .105 12.094);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-xs:4px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-1\.5{top:calc(var(--spacing) * -1.5)}.top-0{top:0}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.-right-1\.5{right:calc(var(--spacing) * -1.5)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-16{bottom:calc(var(--spacing) * 16)}.left-0{left:0}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-0\.5{margin-inline:calc(var(--spacing) * .5)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-0{margin-top:0}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:var(--spacing)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.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-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-32{height:calc(var(--spacing) * 32)}.h-56{height:calc(var(--spacing) * 56)}.h-dvh{height:100dvh}.h-full{height:100%}.max-h-\[180px\]{max-height:180px}.max-h-\[260px\]{max-height:260px}.max-h-\[320px\]{max-height:320px}.min-h-0{min-height:0}.min-h-\[90px\]{min-height:90px}.min-h-\[120px\]{min-height:120px}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-1\/4{width:25%}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-60{width:calc(var(--spacing) * 60)}.w-80{width:calc(var(--spacing) * 80)}.w-\[170px\]{width:170px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[200px\]{max-width:200px}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-top-right{transform-origin:100% 0}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-crosshair{cursor:crosshair}.cursor-grab{cursor:grab}.cursor-none\!{cursor:none!important}.cursor-pointer{cursor:pointer}.touch-pan-x{--tw-pan-x:pan-x;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.resize{resize:both}.scrollbar-none{scrollbar-width:none}.scrollbar-thin{scrollbar-width:thin}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * 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-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * 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)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:2147483647px}.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-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-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#242735\]{border-color:#242735}.border-amber-800\/80{border-color:#953d00cc}@supports (color:color-mix(in lab, red, red)){.border-amber-800\/80{border-color:color-mix(in oklab, var(--color-amber-800) 80%, transparent)}}.border-cyan-800\/80{border-color:#005f78cc}@supports (color:color-mix(in lab, red, red)){.border-cyan-800\/80{border-color:color-mix(in oklab, var(--color-cyan-800) 80%, transparent)}}.border-primary\/25{border-color:var(--dv-primary,#004461)}@supports (color:color-mix(in lab, red, red)){.border-primary\/25{border-color:color-mix(in oklab, var(--dv-primary,#004461) 25%, transparent)}}.border-purple-800\/80{border-color:#6e11b0cc}@supports (color:color-mix(in lab, red, red)){.border-purple-800\/80{border-color:color-mix(in oklab, var(--color-purple-800) 80%, transparent)}}.border-secondary,.border-secondary\/25{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/25{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 25%, transparent)}}.border-secondary\/30{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/30{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent)}}.border-secondary\/35{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/35{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 35%, transparent)}}.border-secondary\/40{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/40{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 40%, transparent)}}.border-secondary\/45{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/45{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 45%, transparent)}}.border-secondary\/60{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/60{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 60%, transparent)}}.border-slate-500{border-color:var(--color-slate-500)}.border-slate-800{border-color:var(--color-slate-800)}.border-slate-800\/50{border-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.border-slate-800\/50{border-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.border-slate-800\/80{border-color:#1d293dcc}@supports (color:color-mix(in lab, red, red)){.border-slate-800\/80{border-color:color-mix(in oklab, var(--color-slate-800) 80%, transparent)}}.border-slate-900{border-color:var(--color-slate-900)}.border-slate-900\/50{border-color:#0f172b80}@supports (color:color-mix(in lab, red, red)){.border-slate-900\/50{border-color:color-mix(in oklab, var(--color-slate-900) 50%, transparent)}}.border-transparent{border-color:#0000}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-t-transparent{border-top-color:#0000}.bg-\[\#0c0e14\]{background-color:#0c0e14}.bg-\[\#0e1017\]{background-color:#0e1017}.bg-\[\#1a1d27\]{background-color:#1a1d27}.bg-\[\#090b11\]{background-color:#090b11}.bg-\[\#090b11\]\/90{background-color:oklab(15.0381% .0000409335 -.0134042/.9)}.bg-\[\#07090e\]{background-color:#07090e}.bg-\[\#11131c\]{background-color:#11131c}.bg-\[\#11131c\]\/90{background-color:oklab(18.9059% .00154323 -.0185384/.9)}.bg-\[\#13151c\]\/65{background-color:oklab(19.6884% .00063619 -.0144322/.65)}.bg-\[\#13151c\]\/80{background-color:oklab(19.6884% .00063619 -.0144322/.8)}.bg-\[\#13151c\]\/85{background-color:oklab(19.6884% .00063619 -.0144322/.85)}.bg-\[\#13151c\]\/90{background-color:oklab(19.6884% .00063619 -.0144322/.9)}.bg-\[\#060608\]{background-color:#060608}.bg-\[\#060608\]\/95{background-color:oklab(12.3375% .00148499 -.00533298/.95)}.bg-\[\#242735\]{background-color:#242735}.bg-amber-950\/80{background-color:#461901cc}@supports (color:color-mix(in lab, red, red)){.bg-amber-950\/80{background-color:color-mix(in oklab, var(--color-amber-950) 80%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-cyan-950\/80{background-color:#053345cc}@supports (color:color-mix(in lab, red, red)){.bg-cyan-950\/80{background-color:color-mix(in oklab, var(--color-cyan-950) 80%, transparent)}}.bg-primary\/10{background-color:var(--dv-primary,#004461)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--dv-primary,#004461) 10%, transparent)}}.bg-purple-950\/80{background-color:#3c0366cc}@supports (color:color-mix(in lab, red, red)){.bg-purple-950\/80{background-color:color-mix(in oklab, var(--color-purple-950) 80%, transparent)}}.bg-secondary\/5{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/5{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 5%, transparent)}}.bg-secondary\/10{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/10{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent)}}.bg-secondary\/15{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/15{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 15%, transparent)}}.bg-secondary\/30{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/30{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent)}}.bg-slate-800\/20{background-color:#1d293d33}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/20{background-color:color-mix(in oklab, var(--color-slate-800) 20%, transparent)}}.bg-slate-800\/30{background-color:#1d293d4d}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/30{background-color:color-mix(in oklab, var(--color-slate-800) 30%, transparent)}}.bg-slate-800\/40{background-color:#1d293d66}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/40{background-color:color-mix(in oklab, var(--color-slate-800) 40%, transparent)}}.bg-slate-800\/50{background-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/50{background-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.bg-slate-800\/60{background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/60{background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.bg-slate-900\/20{background-color:#0f172b33}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/20{background-color:color-mix(in oklab, var(--color-slate-900) 20%, transparent)}}.bg-slate-900\/50{background-color:#0f172b80}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/50{background-color:color-mix(in oklab, var(--color-slate-900) 50%, transparent)}}.bg-slate-900\/60{background-color:#0f172b99}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/60{background-color:color-mix(in oklab, var(--color-slate-900) 60%, transparent)}}.bg-slate-950{background-color:var(--color-slate-950)}.bg-slate-950\/60{background-color:#02061899}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/60{background-color:color-mix(in oklab, var(--color-slate-950) 60%, transparent)}}.bg-slate-950\/70{background-color:#020618b3}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/70{background-color:color-mix(in oklab, var(--color-slate-950) 70%, transparent)}}.bg-slate-950\/80{background-color:#020618cc}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/80{background-color:color-mix(in oklab, var(--color-slate-950) 80%, transparent)}}.bg-slate-950\/95{background-color:#020618f2}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/95{background-color:color-mix(in oklab, var(--color-slate-950) 95%, transparent)}}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.from-black{--tw-gradient-from:var(--color-black);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-secondary{--tw-gradient-from:var(--dv-secondary,#bb2d19);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/70{--tw-gradient-via:#000000b3}@supports (color:color-mix(in lab, red, red)){.via-black\/70{--tw-gradient-via:color-mix(in oklab, var(--color-black) 70%, transparent)}}.via-black\/70{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-secondary\/50{--tw-gradient-to:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.to-secondary\/50{--tw-gradient-to:color-mix(in oklab, var(--dv-secondary,#bb2d19) 50%, transparent)}}.to-secondary\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-\[2px\]{padding:2px}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.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)}.pr-1{padding-right:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-1{padding-left:var(--spacing)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[6px\]{font-size:6px}.text-\[7px\]{font-size:7px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.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-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-amber-400{color:var(--color-amber-400)}.text-cyan-400{color:var(--color-cyan-400)}.text-primary{color:var(--dv-primary,#004461)}.text-purple-400{color:var(--color-purple-400)}.text-rose-400{color:var(--color-rose-400)}.text-secondary{color:var(--dv-secondary,#bb2d19)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.uppercase{text-transform:uppercase}.accent-secondary{accent-color:var(--dv-secondary,#bb2d19)}.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.5\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#00000080);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);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-2{--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)}.shadow-secondary\/5{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/5{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/10{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/10{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/15{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/15{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 15%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/20{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/30{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-secondary\/20{--tw-ring-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.ring-secondary\/20{--tw-ring-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.ring-secondary\/30{--tw-ring-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.ring-secondary\/30{--tw-ring-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent)}}.ring-secondary\/35{--tw-ring-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.ring-secondary\/35{--tw-ring-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 35%, transparent)}}.blur-xs{--tw-blur:blur(var(--blur-xs));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,)}.brightness-110{--tw-brightness:brightness(110%);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,)}.invert{--tw-invert:invert(100%);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,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-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(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-250{--tw-duration:.25s;transition-duration:.25s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-\[\#30354a\]:hover{border-color:#30354a}.hover\:border-rose-800\/55:hover{border-color:#a300378c}@supports (color:color-mix(in lab, red, red)){.hover\:border-rose-800\/55:hover{border-color:color-mix(in oklab, var(--color-rose-800) 55%, transparent)}}.hover\:border-secondary\/20:hover{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.hover\:border-secondary\/20:hover{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.hover\:border-slate-700\/50:hover{border-color:#31415880}@supports (color:color-mix(in lab, red, red)){.hover\:border-slate-700\/50:hover{border-color:color-mix(in oklab, var(--color-slate-700) 50%, transparent)}}.hover\:border-slate-800\/50:hover{border-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.hover\:border-slate-800\/50:hover{border-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.hover\:bg-\[\#202432\]:hover{background-color:#202432}.hover\:bg-\[\#222634\]:hover{background-color:#222634}.hover\:bg-rose-950\/25:hover{background-color:#4d021840}@supports (color:color-mix(in lab, red, red)){.hover\:bg-rose-950\/25:hover{background-color:color-mix(in oklab, var(--color-rose-950) 25%, transparent)}}.hover\:bg-slate-800\/10:hover{background-color:#1d293d1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-800\/10:hover{background-color:color-mix(in oklab, var(--color-slate-800) 10%, transparent)}}.hover\:bg-slate-800\/40:hover{background-color:#1d293d66}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-800\/40:hover{background-color:color-mix(in oklab, var(--color-slate-800) 40%, transparent)}}.hover\:bg-slate-800\/60:hover{background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-800\/60:hover{background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.hover\:bg-slate-900\/60:hover{background-color:#0f172b99}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-900\/60:hover{background-color:color-mix(in oklab, var(--color-slate-900) 60%, transparent)}}.hover\:text-rose-200:hover{color:var(--color-rose-200)}.hover\:text-rose-400:hover{color:var(--color-rose-400)}.hover\:text-slate-100:hover{color:var(--color-slate-100)}.hover\:text-slate-200:hover{color:var(--color-slate-200)}.hover\:text-white:hover{color:var(--color-white)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:translate-y-0:active{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.active\:scale-90:active{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:transform-none:disabled{transform:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-20:disabled{opacity:.2}.disabled\:opacity-40:disabled{opacity:.4}.data-active\:border-secondary\/20[data-active]{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-active\:border-secondary\/20[data-active]{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.data-active\:bg-secondary\/10[data-active]{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-active\:bg-secondary\/10[data-active]{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent)}}.data-active\:font-bold[data-active]{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.data-active\:text-secondary[data-active]{color:var(--dv-secondary,#bb2d19)}.data-\[state\=active\]\:border-secondary\/20[data-state=active]{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=active\]\:border-secondary\/20[data-state=active]{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.data-\[state\=active\]\:bg-secondary\/10[data-state=active]{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=active\]\:bg-secondary\/10[data-state=active]{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent)}}.data-\[state\=active\]\:font-bold[data-state=active]{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.data-\[state\=active\]\:text-secondary[data-state=active]{color:var(--dv-secondary,#bb2d19)}@media (width>=48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-auto{width:auto}.md\:flex-row{flex-direction:row}.md\:justify-start{justify-content:flex-start}.md\:border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.md\:px-4{padding-inline:calc(var(--spacing) * 4)}.md\:py-3{padding-block:calc(var(--spacing) * 3)}.md\:pl-0{padding-left:0}}.\[\&_canvas\]\:cursor-none\! canvas{cursor:none!important}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@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-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@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}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}
-/*$vite$:1*/
+@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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-pan-x:initial;--tw-pan-y:initial;--tw-pinch-zoom:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--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-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-amber-400:oklch(82.8% .189 84.429);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-950:oklch(27.9% .077 45.635);--color-cyan-400:oklch(78.9% .154 211.53);--color-cyan-800:oklch(45% .085 224.283);--color-cyan-950:oklch(30.2% .056 229.695);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-950:oklch(29.1% .149 302.717);--color-rose-200:oklch(89.2% .058 10.001);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-800:oklch(45.5% .188 13.697);--color-rose-950:oklch(27.1% .105 12.094);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-xs:4px;--blur-md:12px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-1\.5{top:calc(var(--spacing) * -1.5)}.top-0{top:0}.top-2{top:calc(var(--spacing) * 2)}.top-4{top:calc(var(--spacing) * 4)}.-right-1\.5{right:calc(var(--spacing) * -1.5)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-16{bottom:calc(var(--spacing) * 16)}.left-0{left:0}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-0\.5{margin-inline:calc(var(--spacing) * .5)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mt-0{margin-top:0}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2\.5{margin-top:calc(var(--spacing) * 2.5)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:var(--spacing)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.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-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-20{height:calc(var(--spacing) * 20)}.h-32{height:calc(var(--spacing) * 32)}.h-56{height:calc(var(--spacing) * 56)}.h-dvh{height:100dvh}.h-full{height:100%}.max-h-\[180px\]{max-height:180px}.max-h-\[260px\]{max-height:260px}.max-h-\[320px\]{max-height:320px}.min-h-0{min-height:0}.min-h-\[90px\]{min-height:90px}.min-h-\[120px\]{min-height:120px}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-1\/4{width:25%}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-60{width:calc(var(--spacing) * 60)}.w-80{width:calc(var(--spacing) * 80)}.w-\[170px\]{width:170px}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-\[200px\]{max-width:200px}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-top-right{transform-origin:100% 0}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-crosshair{cursor:crosshair}.cursor-grab{cursor:grab}.cursor-none\!{cursor:none!important}.cursor-pointer{cursor:pointer}.touch-pan-x{--tw-pan-x:pan-x;touch-action:var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,)}.resize{resize:both}.scrollbar-none{scrollbar-width:none}.scrollbar-thin{scrollbar-width:thin}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-3\.5{gap:calc(var(--spacing) * 3.5)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * 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-2\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2.5) * 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)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.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-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-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-800\/80{border-color:#953d00cc}@supports (color:color-mix(in lab, red, red)){.border-amber-800\/80{border-color:color-mix(in oklab, var(--color-amber-800) 80%, transparent)}}.border-cyan-800\/80{border-color:#005f78cc}@supports (color:color-mix(in lab, red, red)){.border-cyan-800\/80{border-color:color-mix(in oklab, var(--color-cyan-800) 80%, transparent)}}.border-dv-border{border-color:var(--dv-border,#242735)}.border-primary\/25{border-color:var(--dv-primary,#004461)}@supports (color:color-mix(in lab, red, red)){.border-primary\/25{border-color:color-mix(in oklab, var(--dv-primary,#004461) 25%, transparent)}}.border-purple-800\/80{border-color:#6e11b0cc}@supports (color:color-mix(in lab, red, red)){.border-purple-800\/80{border-color:color-mix(in oklab, var(--color-purple-800) 80%, transparent)}}.border-secondary,.border-secondary\/25{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/25{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 25%, transparent)}}.border-secondary\/30{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/30{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent)}}.border-secondary\/35{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/35{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 35%, transparent)}}.border-secondary\/40{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/40{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 40%, transparent)}}.border-secondary\/45{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/45{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 45%, transparent)}}.border-secondary\/60{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.border-secondary\/60{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 60%, transparent)}}.border-slate-500{border-color:var(--color-slate-500)}.border-slate-800{border-color:var(--color-slate-800)}.border-slate-800\/50{border-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.border-slate-800\/50{border-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.border-slate-800\/80{border-color:#1d293dcc}@supports (color:color-mix(in lab, red, red)){.border-slate-800\/80{border-color:color-mix(in oklab, var(--color-slate-800) 80%, transparent)}}.border-slate-900{border-color:var(--color-slate-900)}.border-slate-900\/50{border-color:#0f172b80}@supports (color:color-mix(in lab, red, red)){.border-slate-900\/50{border-color:color-mix(in oklab, var(--color-slate-900) 50%, transparent)}}.border-transparent{border-color:#0000}.border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.border-white\/5{border-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.border-t-transparent{border-top-color:#0000}.bg-amber-950\/80{background-color:#461901cc}@supports (color:color-mix(in lab, red, red)){.bg-amber-950\/80{background-color:color-mix(in oklab, var(--color-amber-950) 80%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-cyan-950\/80{background-color:#053345cc}@supports (color:color-mix(in lab, red, red)){.bg-cyan-950\/80{background-color:color-mix(in oklab, var(--color-cyan-950) 80%, transparent)}}.bg-dv-bg{background-color:var(--dv-bg,#0e1017)}.bg-dv-border{background-color:var(--dv-border,#242735)}.bg-dv-card,.bg-dv-card\/90{background-color:var(--dv-card,#11131c)}@supports (color:color-mix(in lab, red, red)){.bg-dv-card\/90{background-color:color-mix(in oklab, var(--dv-card,#11131c) 90%, transparent)}}.bg-dv-chrome,.bg-dv-chrome\/95{background-color:var(--dv-chrome,#060608)}@supports (color:color-mix(in lab, red, red)){.bg-dv-chrome\/95{background-color:color-mix(in oklab, var(--dv-chrome,#060608) 95%, transparent)}}.bg-dv-modal{background-color:var(--dv-modal,#0c0e14)}.bg-dv-overlay\/65{background-color:var(--dv-overlay,#13151c)}@supports (color:color-mix(in lab, red, red)){.bg-dv-overlay\/65{background-color:color-mix(in oklab, var(--dv-overlay,#13151c) 65%, transparent)}}.bg-dv-overlay\/80{background-color:var(--dv-overlay,#13151c)}@supports (color:color-mix(in lab, red, red)){.bg-dv-overlay\/80{background-color:color-mix(in oklab, var(--dv-overlay,#13151c) 80%, transparent)}}.bg-dv-overlay\/85{background-color:var(--dv-overlay,#13151c)}@supports (color:color-mix(in lab, red, red)){.bg-dv-overlay\/85{background-color:color-mix(in oklab, var(--dv-overlay,#13151c) 85%, transparent)}}.bg-dv-overlay\/90{background-color:var(--dv-overlay,#13151c)}@supports (color:color-mix(in lab, red, red)){.bg-dv-overlay\/90{background-color:color-mix(in oklab, var(--dv-overlay,#13151c) 90%, transparent)}}.bg-dv-panel{background-color:var(--dv-panel,#1a1d27)}.bg-dv-viewport,.bg-dv-viewport\/90{background-color:var(--dv-viewport,#090b11)}@supports (color:color-mix(in lab, red, red)){.bg-dv-viewport\/90{background-color:color-mix(in oklab, var(--dv-viewport,#090b11) 90%, transparent)}}.bg-primary\/10{background-color:var(--dv-primary,#004461)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--dv-primary,#004461) 10%, transparent)}}.bg-purple-950\/80{background-color:#3c0366cc}@supports (color:color-mix(in lab, red, red)){.bg-purple-950\/80{background-color:color-mix(in oklab, var(--color-purple-950) 80%, transparent)}}.bg-secondary\/5{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/5{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 5%, transparent)}}.bg-secondary\/10{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/10{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent)}}.bg-secondary\/15{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/15{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 15%, transparent)}}.bg-secondary\/30{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.bg-secondary\/30{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent)}}.bg-slate-800\/20{background-color:#1d293d33}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/20{background-color:color-mix(in oklab, var(--color-slate-800) 20%, transparent)}}.bg-slate-800\/30{background-color:#1d293d4d}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/30{background-color:color-mix(in oklab, var(--color-slate-800) 30%, transparent)}}.bg-slate-800\/40{background-color:#1d293d66}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/40{background-color:color-mix(in oklab, var(--color-slate-800) 40%, transparent)}}.bg-slate-800\/50{background-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/50{background-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.bg-slate-800\/60{background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.bg-slate-800\/60{background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.bg-slate-900\/20{background-color:#0f172b33}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/20{background-color:color-mix(in oklab, var(--color-slate-900) 20%, transparent)}}.bg-slate-900\/50{background-color:#0f172b80}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/50{background-color:color-mix(in oklab, var(--color-slate-900) 50%, transparent)}}.bg-slate-900\/60{background-color:#0f172b99}@supports (color:color-mix(in lab, red, red)){.bg-slate-900\/60{background-color:color-mix(in oklab, var(--color-slate-900) 60%, transparent)}}.bg-slate-950{background-color:var(--color-slate-950)}.bg-slate-950\/60{background-color:#02061899}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/60{background-color:color-mix(in oklab, var(--color-slate-950) 60%, transparent)}}.bg-slate-950\/70{background-color:#020618b3}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/70{background-color:color-mix(in oklab, var(--color-slate-950) 70%, transparent)}}.bg-slate-950\/80{background-color:#020618cc}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/80{background-color:color-mix(in oklab, var(--color-slate-950) 80%, transparent)}}.bg-slate-950\/95{background-color:#020618f2}@supports (color:color-mix(in lab, red, red)){.bg-slate-950\/95{background-color:color-mix(in oklab, var(--color-slate-950) 95%, transparent)}}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.from-black{--tw-gradient-from:var(--color-black);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-secondary{--tw-gradient-from:var(--dv-secondary,#bb2d19);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/70{--tw-gradient-via:#000000b3}@supports (color:color-mix(in lab, red, red)){.via-black\/70{--tw-gradient-via:color-mix(in oklab, var(--color-black) 70%, transparent)}}.via-black\/70{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-secondary\/50{--tw-gradient-to:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.to-secondary\/50{--tw-gradient-to:color-mix(in oklab, var(--dv-secondary,#bb2d19) 50%, transparent)}}.to-secondary\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-contain{object-fit:contain}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-3\.5{padding:calc(var(--spacing) * 3.5)}.p-4{padding:calc(var(--spacing) * 4)}.p-\[2px\]{padding:2px}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.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)}.pr-1{padding-right:var(--spacing)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pl-1{padding-left:var(--spacing)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[6px\]{font-size:6px}.text-\[7px\]{font-size:7px}.text-\[8px\]{font-size:8px}.text-\[9px\]{font-size:9px}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.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-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-amber-400{color:var(--color-amber-400)}.text-cyan-400{color:var(--color-cyan-400)}.text-primary{color:var(--dv-primary,#004461)}.text-purple-400{color:var(--color-purple-400)}.text-rose-400{color:var(--color-rose-400)}.text-secondary{color:var(--dv-secondary,#bb2d19)}.text-slate-100{color:var(--color-slate-100)}.text-slate-200{color:var(--color-slate-200)}.text-slate-300{color:var(--color-slate-300)}.text-slate-400{color:var(--color-slate-400)}.text-slate-500{color:var(--color-slate-500)}.uppercase{text-transform:uppercase}.accent-secondary{accent-color:var(--dv-secondary,#bb2d19)}.opacity-0{opacity:0}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.5\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#00000080);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);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-2{--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)}.shadow-secondary\/5{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/5{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/10{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/10{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/15{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/15{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 15%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/20{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.shadow-secondary\/30{--tw-shadow-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.shadow-secondary\/30{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent) var(--tw-shadow-alpha), transparent)}}.ring-secondary\/20{--tw-ring-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.ring-secondary\/20{--tw-ring-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.ring-secondary\/30{--tw-ring-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.ring-secondary\/30{--tw-ring-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 30%, transparent)}}.ring-secondary\/35{--tw-ring-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.ring-secondary\/35{--tw-ring-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 35%, transparent)}}.blur-xs{--tw-blur:blur(var(--blur-xs));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,)}.brightness-110{--tw-brightness:brightness(110%);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,)}.invert{--tw-invert:invert(100%);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,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xs{--tw-backdrop-blur:blur(var(--blur-xs));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-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(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-250{--tw-duration:.25s;transition-duration:.25s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:border-dv-border-hover:hover{border-color:var(--dv-border-hover,#30354a)}.hover\:border-rose-800\/55:hover{border-color:#a300378c}@supports (color:color-mix(in lab, red, red)){.hover\:border-rose-800\/55:hover{border-color:color-mix(in oklab, var(--color-rose-800) 55%, transparent)}}.hover\:border-secondary\/20:hover{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.hover\:border-secondary\/20:hover{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.hover\:border-slate-700\/50:hover{border-color:#31415880}@supports (color:color-mix(in lab, red, red)){.hover\:border-slate-700\/50:hover{border-color:color-mix(in oklab, var(--color-slate-700) 50%, transparent)}}.hover\:border-slate-800\/50:hover{border-color:#1d293d80}@supports (color:color-mix(in lab, red, red)){.hover\:border-slate-800\/50:hover{border-color:color-mix(in oklab, var(--color-slate-800) 50%, transparent)}}.hover\:bg-dv-panel-hover:hover{background-color:var(--dv-panel-hover,#202432)}.hover\:bg-dv-panel-hover-alt:hover{background-color:var(--dv-panel-hover-alt,#222634)}.hover\:bg-rose-950\/25:hover{background-color:#4d021840}@supports (color:color-mix(in lab, red, red)){.hover\:bg-rose-950\/25:hover{background-color:color-mix(in oklab, var(--color-rose-950) 25%, transparent)}}.hover\:bg-slate-800\/10:hover{background-color:#1d293d1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-800\/10:hover{background-color:color-mix(in oklab, var(--color-slate-800) 10%, transparent)}}.hover\:bg-slate-800\/40:hover{background-color:#1d293d66}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-800\/40:hover{background-color:color-mix(in oklab, var(--color-slate-800) 40%, transparent)}}.hover\:bg-slate-800\/60:hover{background-color:#1d293d99}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-800\/60:hover{background-color:color-mix(in oklab, var(--color-slate-800) 60%, transparent)}}.hover\:bg-slate-900\/60:hover{background-color:#0f172b99}@supports (color:color-mix(in lab, red, red)){.hover\:bg-slate-900\/60:hover{background-color:color-mix(in oklab, var(--color-slate-900) 60%, transparent)}}.hover\:text-rose-200:hover{color:var(--color-rose-200)}.hover\:text-rose-400:hover{color:var(--color-rose-400)}.hover\:text-slate-100:hover{color:var(--color-slate-100)}.hover\:text-slate-200:hover{color:var(--color-slate-200)}.hover\:text-white:hover{color:var(--color-white)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:translate-y-0:active{--tw-translate-y:0px;translate:var(--tw-translate-x) var(--tw-translate-y)}.active\:scale-90:active{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:transform-none:disabled{transform:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-20:disabled{opacity:.2}.disabled\:opacity-40:disabled{opacity:.4}.data-active\:border-secondary\/20[data-active]{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-active\:border-secondary\/20[data-active]{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.data-active\:bg-secondary\/10[data-active]{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-active\:bg-secondary\/10[data-active]{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent)}}.data-active\:font-bold[data-active]{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.data-active\:text-secondary[data-active]{color:var(--dv-secondary,#bb2d19)}.data-\[state\=active\]\:border-secondary\/20[data-state=active]{border-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=active\]\:border-secondary\/20[data-state=active]{border-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 20%, transparent)}}.data-\[state\=active\]\:bg-secondary\/10[data-state=active]{background-color:var(--dv-secondary,#bb2d19)}@supports (color:color-mix(in lab, red, red)){.data-\[state\=active\]\:bg-secondary\/10[data-state=active]{background-color:color-mix(in oklab, var(--dv-secondary,#bb2d19) 10%, transparent)}}.data-\[state\=active\]\:font-bold[data-state=active]{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.data-\[state\=active\]\:text-secondary[data-state=active]{color:var(--dv-secondary,#bb2d19)}@media (min-width:48rem){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-auto{width:auto}.md\:flex-row{flex-direction:row}.md\:justify-start{justify-content:flex-start}.md\:border-l-0{border-left-style:var(--tw-border-style);border-left-width:0}.md\:px-4{padding-inline:calc(var(--spacing) * 4)}.md\:py-3{padding-block:calc(var(--spacing) * 3)}.md\:pl-0{padding-left:0}}.\[\&_canvas\]\:cursor-none\! canvas{cursor:none!important}}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-pan-x{syntax:"*";inherits:false}@property --tw-pan-y{syntax:"*";inherits:false}@property --tw-pinch-zoom{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@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-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@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}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}

package/dist/types.d.ts

@@ -48,6 +48,47 @@ export type PresetsConfig = Record<string, Record<string, {
     W: number;
     C: number;
 }>>;
+/**
+ * Tema del visor: colores primario/secundario con sus contrastes y tokens de
+ * superficie opcionales. Todos los campos son opcionales; los no definidos
+ * usan el default del paquete (o el tema del host en el caso de Symphony).
+ *
+ * Se aplican como variables CSS (`--dv-*`) inline en el elemento raíz del
+ * visor: alcance por instancia, sin recompilar estilos ni contaminar el
+ * `:root` del host.
+ */
+export interface DicomViewerTheme {
+    /** Color de acento primario (usado en spinners, contadores, presets). */
+    primary?: string;
+    /** Contraste del primario (texto sobre fondos `primary`). */
+    primaryForeground?: string;
+    /** Color de acento secundario (herramientas activas, overlays, medidor). */
+    secondary?: string;
+    /** Contraste del secundario. */
+    secondaryForeground?: string;
+    /** Fondo de la página del visor (default #0e1017). */
+    background?: string;
+    /** Barras superior/inferior y sidebar (default #060608). */
+    chrome?: string;
+    /** Fondo del canvas/viewport (default #090b11). */
+    viewport?: string;
+    /** Cajas flotantes sobre la imagen (default #13151c). */
+    overlay?: string;
+    /** Superficie de botones/paneles (default #1a1d27). */
+    panel?: string;
+    /** Hover de paneles (default #202432). */
+    panelHover?: string;
+    /** Hover alternativo (botones del sidebar, default #222634). */
+    panelHoverAlt?: string;
+    /** Bordes de superficies (default #242735). */
+    border?: string;
+    /** Hover de bordes (default #30354a). */
+    borderHover?: string;
+    /** Tarjetas de series (default #11131c). */
+    card?: string;
+    /** Fondo de modales y skeleton (default #0c0e14). */
+    modal?: string;
+}
 export type ActionPlacement = "toolbar" | "sidebar" | "footer";
 export interface ActionContext {
     study: DicomStudy;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medicaresoft/dicom-viewer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Visor DICOM reutilizable basado en Cornerstone v2. Núcleo de visualización sin lógica de negocio ni permisos: el host inyecta datos, acciones y branding.",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "**/*.css"
   ],
   "scripts": {
-    "build": "vite build && tsc -p tsconfig.build.json",
+    "build": "vite build && tsc -p tsconfig.build.json && tailwindcss -i style.css -o dist/style.css --minify",
     "typecheck": "tsc --noEmit",
     "link:shared": "bash scripts/link-shared-deps.sh",
     "prepublishOnly": "npm run build"
@@ -51,6 +51,7 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/vite": "^4.3.0",
     "@types/hammerjs": "^2.0.46",
     "@types/react": "^19.2.14",