/* ==========================================================================
   SiteLV app preview — the real component, not a redrawing.

   This is the `AppPreview` component from sitelv.com's own landing page
   (src/components/marketing/app-preview.tsx), lifted as rendered markup
   together with exactly the CSS rules that style it. Its own source says
   the marker geometry, category colours and panel markup are copied from
   the application, so this is as close to the product as a static page
   can get without a screenshot.

   Two changes were needed to make it live on a different site:
     - every rule is scoped under .sitelv-real, so SiteLV's Tailwind reset
       for h3/h4/p/img/table cannot leak into this page;
     - SiteLV switches theme with a .dark class, this site uses
       prefers-color-scheme, so `.dark\:x:is(.dark *)` rules became
       @media (prefers-color-scheme: dark) rules.

   To refresh it, re-extract from the live landing page rather than
   editing by hand.
   ========================================================================== */

/* Tailwind's own defaults for these live on a universal selector that was
   deliberately not copied. Without them `box-shadow: var(--tw-shadow)` and
   the filter chain resolve to nothing and the whole declaration is dropped. */
.sitelv-real,
.sitelv-real *,
.sitelv-real *::before,
.sitelv-real *::after {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-space-y-reverse: 0;
  --tw-divide-y-reverse: 0;
  --tw-divide-opacity: 1;
  --tw-border-opacity: 1;
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  box-sizing: border-box;
}

/* The component inherits typography from SiteLV's body rule, which was not
   copied either; pin it so the preview reads the same here. */
.sitelv-real {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  text-align: left;
  font-weight: 400;
  letter-spacing: normal;
}

/* ---- theme tokens, straight from SiteLV's :root and .dark ---- */
.sitelv-real{--background:0 0% 100%;--foreground:240 10% 3.9%;--card:0 0% 100%;--card-foreground:240 10% 3.9%;--primary:240 5.9% 10%;--primary-foreground:0 0% 98%;--secondary:240 4.8% 95.9%;--secondary-foreground:240 5.9% 10%;--muted:240 5% 94.5%;--muted-foreground:240 4% 40%;--accent:240 4.8% 95.9%;--accent-foreground:240 5.9% 10%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:240 6% 82%;--input:240 6% 72%;--ring:240 5.9% 10%;--radius:0.5rem;--brand:192 91% 33%;--brand-foreground:0 0% 100%}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real{--background:222 47% 11%;--foreground:210 40% 98%;--card:217 33% 17%;--card-foreground:210 40% 98%;--primary:0 0% 98%;--primary-foreground:222 47% 11%;--secondary:215 25% 27%;--secondary-foreground:210 40% 98%;--muted:215 25% 27%;--muted-foreground:215 20% 65%;--accent:215 25% 27%;--accent-foreground:210 40% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:0 0% 98%;--border:215 25% 27%;--input:215 25% 27%;--ring:210 40% 80%;--brand:187 85% 53%;--brand-foreground:222 47% 11%}
}
:root[data-theme="dark"] .sitelv-real{--background:222 47% 11%;--foreground:210 40% 98%;--card:217 33% 17%;--card-foreground:210 40% 98%;--primary:0 0% 98%;--primary-foreground:222 47% 11%;--secondary:215 25% 27%;--secondary-foreground:210 40% 98%;--muted:215 25% 27%;--muted-foreground:215 20% 65%;--accent:215 25% 27%;--accent-foreground:210 40% 98%;--destructive:0 62.8% 30.6%;--destructive-foreground:0 0% 98%;--border:215 25% 27%;--input:215 25% 27%;--ring:210 40% 80%;--brand:187 85% 53%;--brand-foreground:222 47% 11%}


/* ---- the component's own rules ---- */
.sitelv-real h3{font-size: inherit; font-weight: inherit;}
.sitelv-real h4{font-size: inherit; font-weight: inherit;}
.sitelv-real h3, .sitelv-real h4, .sitelv-real p{margin: 0px;}
.sitelv-real ul{list-style: none; margin: 0px; padding: 0px;}
.sitelv-real table{text-indent: 0px; border-color: inherit; border-collapse: collapse;}
.sitelv-real img, .sitelv-real svg{display: block; vertical-align: middle;}
.sitelv-real img{max-width: 100%; height: auto;}
.sitelv-real .pointer-events-none{pointer-events: none;}
.sitelv-real .absolute{position: absolute;}
.sitelv-real .relative{position: relative;}
.sitelv-real .bottom-2{bottom: 0.5rem;}
.sitelv-real .left-2{left: 0.5rem;}
.sitelv-real .right-2{right: 0.5rem;}
.sitelv-real .-mb-px{margin-bottom: -1px;}
.sitelv-real .mb-1\.5{margin-bottom: 0.375rem;}
.sitelv-real .mt-0\.5{margin-top: 0.125rem;}
.sitelv-real .mt-2{margin-top: 0.5rem;}
.sitelv-real .mt-3{margin-top: 0.75rem;}
.sitelv-real .mt-4{margin-top: 1rem;}
.sitelv-real .block{display: block;}
.sitelv-real .flex{display: flex;}
.sitelv-real .hidden{display: none;}
.sitelv-real .h-1\.5{height: 0.375rem;}
.sitelv-real .h-3\.5{height: 0.875rem;}
.sitelv-real .h-4{height: 1rem;}
.sitelv-real .h-5{height: 1.25rem;}
.sitelv-real .h-7{height: 1.75rem;}
.sitelv-real .h-\[12px\]{height: 12px;}
.sitelv-real .h-\[240px\]{height: 240px;}
.sitelv-real .h-\[3px\]{height: 3px;}
.sitelv-real .h-full{height: 100%;}
.sitelv-real .w-1\.5{width: 0.375rem;}
.sitelv-real .w-11{width: 2.75rem;}
.sitelv-real .w-3\.5{width: 0.875rem;}
.sitelv-real .w-4{width: 1rem;}
.sitelv-real .w-5{width: 1.25rem;}
.sitelv-real .w-7{width: 1.75rem;}
.sitelv-real .w-\[104px\]{width: 104px;}
.sitelv-real .w-\[6px\]{width: 6px;}
.sitelv-real .w-full{width: 100%;}
.sitelv-real .min-w-0{min-width: 0px;}
.sitelv-real .flex-1{flex: 1 1 0%;}
.sitelv-real .shrink-0{flex-shrink: 0;}
.sitelv-real .flex-col{flex-direction: column;}
.sitelv-real .items-center{align-items: center;}
.sitelv-real .items-baseline{align-items: baseline;}
.sitelv-real .justify-center{justify-content: center;}
.sitelv-real .justify-between{justify-content: space-between;}
.sitelv-real .gap-1{gap: 0.25rem;}
.sitelv-real .gap-1\.5{gap: 0.375rem;}
.sitelv-real .gap-2{gap: 0.5rem;}
.sitelv-real .gap-\[1\.5px\]{gap: 1.5px;}
.sitelv-real .space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));}
.sitelv-real .divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse));}
.sitelv-real .divide-zinc-200 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity: 1; border-color: rgb(228 228 231 / var(--tw-divide-opacity, 1));}
.sitelv-real .overflow-hidden{overflow: hidden;}
.sitelv-real .truncate{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sitelv-real .whitespace-nowrap{white-space: nowrap;}
.sitelv-real .rounded{border-radius: 0.25rem;}
.sitelv-real .rounded-\[2px\]{border-radius: 2px;}
.sitelv-real .rounded-full{border-radius: 9999px;}
.sitelv-real .rounded-lg{border-radius: var(--radius);}
.sitelv-real .rounded-md{border-radius: calc(var(--radius) - 2px);}
.sitelv-real .rounded-sm{border-radius: calc(var(--radius) - 4px);}
.sitelv-real .rounded-xl{border-radius: 0.75rem;}
.sitelv-real .border{border-width: 1px;}
.sitelv-real .border-x{border-left-width: 1px; border-right-width: 1px;}
.sitelv-real .border-b{border-bottom-width: 1px;}
.sitelv-real .border-b-2{border-bottom-width: 2px;}
.sitelv-real .border-r{border-right-width: 1px;}
.sitelv-real .border-border{border-color: hsl(var(--border));}
.sitelv-real .border-transparent{border-color: transparent;}
.sitelv-real .border-zinc-100{--tw-border-opacity: 1; border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));}
.sitelv-real .border-zinc-200{--tw-border-opacity: 1; border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));}
.sitelv-real .border-zinc-900{--tw-border-opacity: 1; border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));}
.sitelv-real .bg-muted{background-color: hsl(var(--muted));}
.sitelv-real .bg-white{--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));}
.sitelv-real .bg-white\/80{background-color: rgba(255, 255, 255, 0.8);}
.sitelv-real .bg-zinc-100{--tw-bg-opacity: 1; background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));}
.sitelv-real .fill-white{fill: rgb(255, 255, 255);}
.sitelv-real .fill-zinc-100{fill: rgb(244, 244, 245);}
.sitelv-real .stroke-zinc-400{stroke: rgb(161, 161, 170);}
.sitelv-real .stroke-zinc-500{stroke: rgb(113, 113, 122);}
.sitelv-real .object-contain{object-fit: contain;}
.sitelv-real .p-1\.5{padding: 0.375rem;}
.sitelv-real .p-3{padding: 0.75rem;}
.sitelv-real .px-1\.5{padding-left: 0.375rem; padding-right: 0.375rem;}
.sitelv-real .px-2{padding-left: 0.5rem; padding-right: 0.5rem;}
.sitelv-real .px-3{padding-left: 0.75rem; padding-right: 0.75rem;}
.sitelv-real .py-0\.5{padding-top: 0.125rem; padding-bottom: 0.125rem;}
.sitelv-real .py-1{padding-top: 0.25rem; padding-bottom: 0.25rem;}
.sitelv-real .py-1\.5{padding-top: 0.375rem; padding-bottom: 0.375rem;}
.sitelv-real .py-2{padding-top: 0.5rem; padding-bottom: 0.5rem;}
.sitelv-real .py-2\.5{padding-top: 0.625rem; padding-bottom: 0.625rem;}
.sitelv-real .pr-2{padding-right: 0.5rem;}
.sitelv-real .text-left{text-align: left;}
.sitelv-real .text-right{text-align: right;}
.sitelv-real .align-top{vertical-align: top;}
.sitelv-real .text-\[10px\]{font-size: 10px;}
.sitelv-real .text-\[11px\]{font-size: 11px;}
.sitelv-real .text-\[8px\]{font-size: 8px;}
.sitelv-real .text-\[9px\]{font-size: 9px;}
.sitelv-real .text-sm{font-size: 0.875rem; line-height: 1.25rem;}
.sitelv-real .text-xs{font-size: 0.75rem; line-height: 1rem;}
.sitelv-real .font-bold{font-weight: 700;}
.sitelv-real .font-medium{font-weight: 500;}
.sitelv-real .font-semibold{font-weight: 600;}
.sitelv-real .uppercase{text-transform: uppercase;}
.sitelv-real .tabular-nums{--tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);}
.sitelv-real .leading-tight{line-height: 1.25;}
.sitelv-real .tracking-wide{letter-spacing: 0.025em;}
.sitelv-real .tracking-wider{letter-spacing: 0.05em;}
.sitelv-real .text-foreground{color: hsl(var(--foreground));}
.sitelv-real .text-muted-foreground{color: hsl(var(--muted-foreground));}
.sitelv-real .text-white{--tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1));}
.sitelv-real .text-zinc-400{--tw-text-opacity: 1; color: rgb(161 161 170 / var(--tw-text-opacity, 1));}
.sitelv-real .text-zinc-500{--tw-text-opacity: 1; color: rgb(113 113 122 / var(--tw-text-opacity, 1));}
.sitelv-real .text-zinc-600{--tw-text-opacity: 1; color: rgb(82 82 91 / var(--tw-text-opacity, 1));}
.sitelv-real .text-zinc-700{--tw-text-opacity: 1; color: rgb(63 63 70 / var(--tw-text-opacity, 1));}
.sitelv-real .text-zinc-900{--tw-text-opacity: 1; color: rgb(24 24 27 / var(--tw-text-opacity, 1));}
.sitelv-real .opacity-80{opacity: 0.8;}
.sitelv-real .opacity-90{opacity: 0.9;}
.sitelv-real .shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
.sitelv-real .shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
.sitelv-real .shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);}
.sitelv-real .shadow-\[\#293448\]\/10{--tw-shadow-color: rgb(41 52 72 / 0.1); --tw-shadow: var(--tw-shadow-colored);}
.sitelv-real .backdrop-blur-sm{--tw-backdrop-blur: blur(4px); 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);}
.sitelv-real .last\:border-b-0:last-child{border-bottom-width: 0px;}
@media (min-width: 640px){.sitelv-real .sm\:block{display: block;}}
@media (min-width: 640px){.sitelv-real .sm\:flex{display: flex;}}
@media (min-width: 640px){.sitelv-real .sm\:h-\[300px\]{height: 300px;}}
@media (min-width: 768px){.sitelv-real .md\:flex{display: flex;}}
@media (min-width: 1024px){.sitelv-real .lg\:h-\[360px\]{height: 360px;}}
@media (min-width: 1024px){.sitelv-real .lg\:absolute{position: absolute;}}
@media (min-width: 1024px){.sitelv-real .lg\:-bottom-12{bottom: -3rem;}}
@media (min-width: 1024px){.sitelv-real .lg\:-right-8{right: -2rem;}}
@media (min-width: 1024px){.sitelv-real .lg\:mt-0{margin-top: 0px;}}
@media (min-width: 1024px){.sitelv-real .lg\:w-\[19rem\]{width: 19rem;}}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:border-slate-700{--tw-border-opacity: 1; border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:border-slate-700{--tw-border-opacity: 1; border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:border-slate-700\/60{border-color: rgba(51, 65, 85, 0.6);}
}
:root[data-theme="dark"] .sitelv-real .dark\:border-slate-700\/60{border-color: rgba(51, 65, 85, 0.6);}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:border-zinc-100{--tw-border-opacity: 1; border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:border-zinc-100{--tw-border-opacity: 1; border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity: 1; border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:divide-slate-700 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity: 1; border-color: rgb(51 65 85 / var(--tw-divide-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:bg-slate-700{--tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:bg-slate-700{--tw-bg-opacity: 1; background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:bg-slate-800{--tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:bg-slate-800{--tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:bg-slate-800\/80{background-color: rgba(30, 41, 59, 0.8);}
}
:root[data-theme="dark"] .sitelv-real .dark\:bg-slate-800\/80{background-color: rgba(30, 41, 59, 0.8);}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:bg-slate-900{--tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:bg-slate-900{--tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:text-slate-100{--tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:text-slate-100{--tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:text-slate-500{--tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:text-slate-500{--tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:text-zinc-100{--tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:text-zinc-100{--tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:text-zinc-300{--tw-text-opacity: 1; color: rgb(212 212 216 / var(--tw-text-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:text-zinc-300{--tw-text-opacity: 1; color: rgb(212 212 216 / var(--tw-text-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:text-zinc-400{--tw-text-opacity: 1; color: rgb(161 161 170 / var(--tw-text-opacity, 1));}
}
:root[data-theme="dark"] .sitelv-real .dark\:text-zinc-400{--tw-text-opacity: 1; color: rgb(161 161 170 / var(--tw-text-opacity, 1));}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:shadow-black\/40{--tw-shadow-color: rgb(0 0 0 / 0.4); --tw-shadow: var(--tw-shadow-colored);}
}
:root[data-theme="dark"] .sitelv-real .dark\:shadow-black\/40{--tw-shadow-color: rgb(0 0 0 / 0.4); --tw-shadow: var(--tw-shadow-colored);}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\:brightness-0{--tw-brightness: brightness(0); 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);}
}
:root[data-theme="dark"] .sitelv-real .dark\:brightness-0{--tw-brightness: brightness(0); 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);}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitelv-real .dark\: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);}
}
:root[data-theme="dark"] .sitelv-real .dark\: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);}


/* ---- host: room for the BOM card, which overhangs the app card ---- */
.sitelv-stage {
  /* The Equipment card is positioned lg:-bottom-12 lg:-right-8, i.e. it
     hangs 32px right and 48px below the frame. On SiteLV that spills into
     the hero; here it has to spill into padding, or it pushes a scrollbar
     onto the page. `isolation` keeps the component's -z-10 backdrop glow
     inside this box instead of disappearing behind the page. */
  padding: 8px 40px 64px 8px;
  isolation: isolate;
}
@media (max-width: 1023px) {
  .sitelv-stage { padding: 0 0 8px; }
}