/* ====================================================================
   iter-210 · UHD COCKPIT THEME
   --------------------------------------------------------------------
   Light mode = primary cinematic surface. Bright ivory base with
   crimson + gold neon accents and frosted glass tiles. Dark mode
   keeps full parity (deep black surface, same neon palette).
   Heavy framer-motion is wired in the components — this stylesheet
   handles static cinematics: grids, glows, ticker scroll, scan-lines.
   =================================================================== */

:root {
    --uhd-crimson: #E8546B;
    --uhd-crimson-deep: #8B1A2C;
    --uhd-gold: #F5C45A;
    --uhd-mint: #34D399;
    --uhd-violet: #A78BFA;
    --uhd-ink: #0B0B12;
    /* iter-225 · Dark electric-blue cockpit per founder. Replaces the
       washed-out sky-blue (#E0F2FE) light backdrop with a deep, saturated
       electric-blue plate so the AMG/Vellox gauges glow against a true
       cinematic background — the light "site" mode keeps clean black ink
       on white surface cards, only the cockpit dashboard goes electric. */
    --uhd-ivory: #0B1B3A;
    --uhd-electric: #1D4ED8;
    --uhd-electric-deep: #0B1B3A;
    --uhd-surface: rgba(255, 255, 255, 0.88);
    --uhd-surface-strong: rgba(255, 255, 255, 0.96);
    --uhd-border: rgba(56, 189, 248, 0.32);
    --uhd-grid: rgba(56, 189, 248, 0.10);
    --uhd-text: #0B0B12;
    --uhd-text-dim: rgba(11, 11, 18, 0.65);
    --uhd-text-muted: rgba(11, 11, 18, 0.48);
}

html.dark {
    --uhd-surface: rgba(18, 18, 24, 0.62);
    --uhd-surface-strong: rgba(20, 20, 28, 0.86);
    --uhd-border: rgba(232, 84, 107, 0.30);
    --uhd-grid: rgba(232, 84, 107, 0.06);
    --uhd-text: #FAFAFA;
    --uhd-text-dim: rgba(250, 250, 250, 0.62);
    --uhd-text-muted: rgba(250, 250, 250, 0.42);
}

/* ─── ROOT CANVAS ─── */
.uhd-cockpit {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 1.5rem 1rem 4rem;
    color: #0B0B12;
    color: var(--uhd-text);
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(ellipse at 88% 100%, rgba(29, 78, 216, 0.22), transparent 60%),
        linear-gradient(180deg, #06122E 0%, #0B1B3A 60%, #050B1E 100%);
    color: #FFFFFF;
}
html.dark .uhd-cockpit {
    background:
        radial-gradient(ellipse at 12% 0%, rgba(56, 189, 248, 0.20), transparent 55%),
        radial-gradient(ellipse at 88% 100%, rgba(29, 78, 216, 0.28), transparent 60%),
        linear-gradient(180deg, #03081C 0%, #050B1E 60%, #02060F 100%);
    color: #FFFFFF;
}

/* ─── AMBIENT FIELD ─── */
.uhd-grid-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(56, 189, 248, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(56, 189, 248, 0.10) 1px, transparent 1px);
    background-image:
        linear-gradient(to right, var(--uhd-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--uhd-grid) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 80%);
}
.uhd-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.uhd-particle {
    position: absolute;
    border-radius: 9999px;
    background: #E8546B;
    background: var(--uhd-crimson);
    box-shadow: 0 0 6px #E8546B;
    box-shadow: 0 0 6px var(--uhd-crimson);
}
html:not(.dark) .uhd-particle {
    background: #8B1A2C;
    background: var(--uhd-crimson-deep);
    box-shadow: 0 0 4px rgba(139, 26, 44, 0.35);
}
.uhd-scanline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(232, 84, 107, 0.06) 40%,
        rgba(245, 196, 90, 0.18) 50%,
        rgba(232, 84, 107, 0.06) 60%,
        transparent 100%
    );
    filter: blur(0.4px);
}

/* ─── STATUS BAR ─── */
.uhd-statusbar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 1rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.88);
    background: var(--uhd-surface);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(56, 189, 248, 0.32);
    border: 1px solid var(--uhd-border);
    border-radius: 2px;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.uhd-statusbar-left,
.uhd-statusbar-right { display: flex; align-items: center; gap: 0.7rem; }
.uhd-statusbar-eyebrow {
    color: #8B1A2C;
    color: var(--uhd-crimson-deep);
    font-weight: 700;
    letter-spacing: 0.28em;
}
html.dark .uhd-statusbar-eyebrow { color: #E8546B; color: var(--uhd-crimson); }
.uhd-statusbar-eyebrow-dim { color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); font-weight: 600; }
.uhd-statusbar-sep { color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); }
.uhd-statusbar-build { color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); font-weight: 500; }
.uhd-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #34D399;
    background: var(--uhd-mint);
    box-shadow: 0 0 10px #34D399;
    box-shadow: 0 0 10px var(--uhd-mint);
    animation: uhdDotPulse 1.6s ease-in-out infinite;
}
@keyframes uhdDotPulse {
    0%, 100% { opacity: 0.95; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}
.uhd-clock {
    font-size: 13px;
    letter-spacing: 0.16em;
    color: #0B0B12;
    color: var(--uhd-text);
    font-weight: 700;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.uhd-clock-tz { color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); font-weight: 500; margin-left: 4px; }

/* ─── GAUGE ROW ─── */
.uhd-gauge-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .uhd-gauge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.uhd-gauge {
    position: relative;
    background: rgba(255, 255, 255, 0.88);
    background: var(--uhd-surface);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(56, 189, 248, 0.32);
    border: 1px solid var(--uhd-border);
    border-radius: 2px;
    padding: 0.85rem 0.5rem 0.95rem;
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(139, 26, 44, 0.10),
        0 16px 44px -24px rgba(139, 26, 44, 0.35);

    /* iter-213 · AMG palette · LIGHT (default) ─────────────── */
    --uhd-amg-face-1: #FFFFFF;
    --uhd-amg-face-2: #F4F4F5;
    --uhd-amg-face-edge: rgba(11, 11, 18, 0.18);
    --uhd-amg-bezel-1: #E4E4E7;
    --uhd-amg-bezel-2: #FAFAFA;
    --uhd-amg-bezel-3: #A1A1AA;
    --uhd-amg-bezel-edge: rgba(0, 0, 0, 0.18);
    --uhd-amg-bezel-inner: rgba(120, 120, 130, 0.45);
    --uhd-amg-bezel-shadow: rgba(11, 11, 18, 0.18);
    --uhd-amg-knurl: rgba(80, 80, 90, 0.10);
    --uhd-amg-knurl-stroke: rgba(80, 80, 90, 0.55);
    --uhd-amg-line: rgba(11, 11, 18, 0.08);
    --uhd-amg-rail: rgba(11, 11, 18, 0.18);
    --uhd-amg-tick-major: #0B0B12;
    --uhd-amg-tick-mid: rgba(11, 11, 18, 0.55);
    --uhd-amg-tick-minor: rgba(11, 11, 18, 0.32);
    --uhd-amg-hub: #18181B;
    --uhd-amg-hub-outer: #3F3F46;
    --uhd-amg-hub-edge: #71717A;
    --uhd-amg-lcd: rgba(11, 11, 18, 0.92);
    --uhd-amg-lcd-edge: rgba(220, 38, 38, 0.55);
    --uhd-amg-readout: #FF3D5C;
    --uhd-amg-brand: rgba(11, 11, 18, 0.45);
    --uhd-amg-brand-sub: rgba(11, 11, 18, 0.35);
    --uhd-amg-tick-label: rgba(11, 11, 18, 0.72);
}
html.dark .uhd-gauge {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(255, 61, 92, 0.10),
        0 18px 50px -28px rgba(0, 0, 0, 0.85);

    /* AMG palette · DARK ─────────────────────────────────── */
    --uhd-amg-face-1: #1A1A1F;
    --uhd-amg-face-2: #0B0B12;
    --uhd-amg-face-edge: rgba(255, 61, 92, 0.20);
    --uhd-amg-bezel-1: #3F3F46;
    --uhd-amg-bezel-2: #1A1A1F;
    --uhd-amg-bezel-3: #52525B;
    --uhd-amg-bezel-edge: rgba(255, 61, 92, 0.30);
    --uhd-amg-bezel-inner: rgba(200, 200, 210, 0.20);
    --uhd-amg-bezel-shadow: rgba(0, 0, 0, 0.85);
    --uhd-amg-knurl: rgba(255, 255, 255, 0.04);
    --uhd-amg-knurl-stroke: rgba(255, 255, 255, 0.35);
    --uhd-amg-line: rgba(255, 255, 255, 0.05);
    --uhd-amg-rail: rgba(255, 255, 255, 0.15);
    --uhd-amg-tick-major: #FAFAFA;
    --uhd-amg-tick-mid: rgba(255, 255, 255, 0.65);
    --uhd-amg-tick-minor: rgba(255, 255, 255, 0.35);
    --uhd-amg-hub: #0B0B12;
    --uhd-amg-hub-outer: #27272A;
    --uhd-amg-hub-edge: #71717A;
    --uhd-amg-lcd: rgba(0, 0, 0, 0.92);
    --uhd-amg-lcd-edge: rgba(255, 61, 92, 0.55);
    --uhd-amg-readout: #FF3D5C;
    --uhd-amg-brand: rgba(255, 255, 255, 0.40);
    --uhd-amg-brand-sub: rgba(255, 255, 255, 0.30);
    --uhd-amg-tick-label: rgba(255, 255, 255, 0.78);
}
.uhd-gauge::before {
    content: "";
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF1F38, transparent);
    opacity: 0.85;
    box-shadow: 0 0 12px rgba(255, 31, 56, 0.55);
}
.uhd-gauge-svg { display: block; margin: 0 auto; width: 100%; max-width: 260px; }
.uhd-amg-tick-label {
    fill: var(--uhd-amg-tick-label);
    font-family: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* ====================================================================
   iter-225 · AMG v2 · skeuomorphic dark-face gauge — overrides the
   light/dark theme vars so the gauge is ALWAYS a glowing instrument
   cluster (the entire point of an AMG dial is that it lights itself).
   Scope: any `.uhd-gauge.amg-v2`.
   =================================================================== */
.uhd-gauge.amg-v2 {
    background: linear-gradient(180deg, rgba(20,20,26,0.45) 0%, rgba(10,10,14,0.65) 100%);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 1.1rem 0.6rem 1.25rem;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 -1px 0 rgba(229, 0, 0, 0.10) inset,
        0 28px 72px -28px rgba(0, 0, 0, 0.95),
        0 14px 36px -18px rgba(0, 0, 0, 0.85);
}
.uhd-gauge.amg-v2::before {
    /* Top-edge crimson LED bar */
    content: "";
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 60%;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, #FF1F38 35%, #FF6E8A 50%, #FF1F38 65%, transparent);
    opacity: 0.92;
    box-shadow: 0 0 18px rgba(255, 31, 56, 0.75);
    border-radius: 0 0 4px 4px;
}
.amg-v2 .amg-tick-label {
    fill: #FFFFFF;
    font-family: "Eurostile","DIN Alternate",ui-monospace,"JetBrains Mono",monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.08em;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.45));
}
.amg-v2 .amg-brand {
    fill: rgba(255,255,255,0.55);
    font-family: "Eurostile","DIN Alternate",ui-monospace,monospace;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.45em;
}
.amg-v2 .amg-brand-sub {
    fill: rgba(255,255,255,0.30);
    font-family: ui-monospace,monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.62em;
}
.amg-v2 .amg-readout {
    fill: #FF3D5C;
    font-family: "DS-Digital","Orbitron","Eurostile",ui-monospace,"JetBrains Mono",monospace;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.05em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px rgba(255,31,56,0.85), 0 0 20px rgba(255,31,56,0.55);
}
.amg-v2 .amg-unit {
    fill: rgba(255, 220, 226, 0.65);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.36em;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255,31,56,0.35);
}
.amg-v2 .amg-label {
    margin-top: 0.7rem;
    font-size: 10px;
    letter-spacing: 0.36em;
    color: #FFFFFF;
    opacity: 0.85;
    font-weight: 800;
    text-transform: uppercase;
    font-family: "Eurostile","DIN Alternate",ui-monospace,monospace;
    text-align: center;
    text-shadow: 0 0 8px rgba(255,255,255,0.30);
}

/* Light mode parity — the gauge surface stays dark/glowing, but the
   tile chrome borrows softer crimson tints so it still reads against
   the bright ivory cockpit page. */
html:not(.dark) .uhd-gauge.amg-v2 {
    background: linear-gradient(180deg, rgba(15,15,20,0.92) 0%, rgba(8,8,12,0.95) 100%);
    border-color: rgba(220, 38, 38, 0.32);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(229, 0, 0, 0.12) inset,
        0 32px 80px -28px rgba(139, 26, 44, 0.55),
        0 16px 40px -18px rgba(11, 11, 18, 0.55);
}
.uhd-amg-brand {
    fill: var(--uhd-amg-brand);
    font-family: ui-monospace, monospace;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.42em;
}
.uhd-amg-brand-sub {
    fill: var(--uhd-amg-brand-sub);
    font-family: ui-monospace, monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.55em;
}
.uhd-amg-readout {
    fill: var(--uhd-amg-readout);
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(255, 31, 56, 0.60);
}
.uhd-amg-unit {
    fill: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.32em;
    font-weight: 700;
}
.uhd-gauge-label {
    margin-top: 0.55rem;
    font-size: 9px;
    letter-spacing: 0.30em;
    color: #8B1A2C;
    color: var(--uhd-crimson-deep);
    font-weight: 800;
    text-transform: uppercase;
    font-family: ui-monospace, monospace;
}
html.dark .uhd-gauge-label { color: #E8546B; color: var(--uhd-crimson); }

/* ─── 2-COL GRID + TILE PRIMITIVES ─── */
.uhd-grid-2 {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 1024px) {
    .uhd-grid-2 { grid-template-columns: 1fr; }
}
.uhd-stack-side { display: flex; flex-direction: column; gap: 1rem; }

.uhd-tile {
    position: relative;
    background: rgba(255, 255, 255, 0.88);
    background: var(--uhd-surface);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(56, 189, 248, 0.32);
    border: 1px solid var(--uhd-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 12px 36px -20px rgba(139, 26, 44, 0.30);
}
html.dark .uhd-tile {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 50px -28px rgba(0, 0, 0, 0.9);
}
.uhd-tile::before {
    content: "";
    position: absolute; left: 0; top: 0; height: 100%; width: 2px;
    background: linear-gradient(180deg, #F5C45A, #E8546B, transparent);
    background: linear-gradient(180deg, var(--uhd-gold), var(--uhd-crimson), transparent);
    opacity: 0.85;
}
.uhd-tile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(56, 189, 248, 0.32);
    border-bottom: 1px solid var(--uhd-border);
    background: linear-gradient(180deg, rgba(139, 26, 44, 0.05), transparent);
}
.uhd-tile-eyebrow {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8B1A2C;
    color: var(--uhd-crimson-deep);
    font-weight: 700;
}
html.dark .uhd-tile-eyebrow { color: #E8546B; color: var(--uhd-crimson); }
.uhd-tile-link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 10px; letter-spacing: 0.18em; font-weight: 600;
    color: rgba(11, 11, 18, 0.65);
    color: var(--uhd-text-dim);
    text-decoration: none;
}
.uhd-tile-link:hover { color: #E8546B; color: var(--uhd-crimson); }
.uhd-tile-body { padding: 0.5rem 0.9rem 0.85rem; }
.uhd-empty {
    padding: 1.2rem 0.5rem;
    text-align: center;
    color: rgba(11, 11, 18, 0.48);
    color: var(--uhd-text-muted);
    font-size: 11px;
    letter-spacing: 0.16em;
}

/* ─── BANGLADESH MAP TILE ─── */
.uhd-tile-map { min-height: 460px; display: flex; flex-direction: column; }
.uhd-bd-map { flex: 1 1; position: relative; padding: 0.5rem; }
.uhd-bd-map-svg { width: 100%; height: 100%; max-height: 420px; }
.uhd-bd-dot { fill: #E8546B; fill: var(--uhd-crimson); filter: drop-shadow(0 0 6px #E8546B); filter: drop-shadow(0 0 6px var(--uhd-crimson)); }
.uhd-bd-label {
    fill: #0B0B12;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 800;
    paint-order: stroke fill;
}
/* Halo behind every label — punches a high-contrast outline that
   stays legible against both the crimson gradient overlay and any
   theme background. Rendered as a sibling <text> with the same
   geometry but a thick stroke and no fill. */
.uhd-bd-label-halo {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 3.5px;
    stroke-linejoin: round;
    paint-order: stroke;
    opacity: 0.92;
}
html.dark .uhd-bd-label { fill: #FFFFFF; }
html.dark .uhd-bd-label-halo {
    stroke: #050505;
    opacity: 0.95;
}
.uhd-bd-legend {
    position: absolute; left: 1rem; bottom: 0.6rem;
    font-size: 9.5px; letter-spacing: 0.22em;
    color: rgba(11, 11, 18, 0.65);
    color: var(--uhd-text-dim);
}
.uhd-bd-legend-row { display: inline-flex; align-items: center; gap: 0.45rem; }
.uhd-bd-legend-dot {
    width: 7px; height: 7px; border-radius: 9999px;
    background: #E8546B;
    background: var(--uhd-crimson);
    box-shadow: 0 0 8px #E8546B;
    box-shadow: 0 0 8px var(--uhd-crimson);
}

/* ─── KYC TILE ─── */
.uhd-kyc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 0.2rem;
    border-bottom: 1px dashed rgba(56, 189, 248, 0.32);
    border-bottom: 1px dashed var(--uhd-border);
    gap: 0.8rem;
}
.uhd-kyc-row:last-child { border-bottom: none; }
.uhd-kyc-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #0B0B12;
    color: var(--uhd-text);
    font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
    letter-spacing: 0.01em;
}
.uhd-kyc-id { font-size: 10px; color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); letter-spacing: 0.16em; }
.uhd-kyc-cta {
    font-size: 10px; letter-spacing: 0.2em; font-weight: 700;
    color: #8B1A2C;
    color: var(--uhd-crimson-deep); text-decoration: none;
    padding: 0.3rem 0.55rem; border: 1px solid rgba(56, 189, 248, 0.32); border: 1px solid var(--uhd-border);
    border-radius: 2px; background: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}
html.dark .uhd-kyc-cta { color: #E8546B; color: var(--uhd-crimson); background: rgba(0, 0, 0, 0.35); }
.uhd-kyc-cta:hover {
    background: #8B1A2C;
    background: var(--uhd-crimson-deep); color: #fff;
    border-color: #8B1A2C;
    border-color: var(--uhd-crimson-deep);
    box-shadow: 0 0 18px rgba(232, 84, 107, 0.45);
}

/* ─── VENDOR LEADERBOARD ─── */
.uhd-vendor-row {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.2rem;
    border-bottom: 1px dashed rgba(56, 189, 248, 0.32);
    border-bottom: 1px dashed var(--uhd-border);
}
.uhd-vendor-row:last-child { border-bottom: none; }
.uhd-vendor-rank {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 2px;
    font-size: 12px; font-weight: 700;
    background: rgba(139, 26, 44, 0.08);
    color: #8B1A2C;
    color: var(--uhd-crimson-deep);
    border: 1px solid rgba(56, 189, 248, 0.32);
    border: 1px solid var(--uhd-border);
}
.uhd-rank-1 { background: linear-gradient(135deg, #F5C45A, #d4a437); background: linear-gradient(135deg, var(--uhd-gold), #d4a437); color: #1A0B00; border-color: #d4a437; }
.uhd-rank-2 { background: rgba(232, 84, 107, 0.18); color: #8B1A2C; color: var(--uhd-crimson-deep); }
.uhd-vendor-meta { flex: 1 1; min-width: 0; }
.uhd-vendor-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #0B0B12;
    color: var(--uhd-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uhd-vendor-stat { font-size: 10px; color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); letter-spacing: 0.14em; }
.uhd-vendor-trend { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.uhd-vendor-trend.is-up { color: #047857; }
.uhd-vendor-trend.is-down { color: #8B1A2C; color: var(--uhd-crimson-deep); }
html.dark .uhd-vendor-trend.is-up { color: #34D399; color: var(--uhd-mint); }
html.dark .uhd-vendor-trend.is-down { color: #E8546B; color: var(--uhd-crimson); }

/* ─── AI AGENT TELEMETRY ─── */
.uhd-tile-ai { padding-bottom: 0.6rem; }
.uhd-ai-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0.6rem 0.9rem; gap: 0.6rem 0.9rem;
    padding: 0.7rem 0.9rem;
}
.uhd-ai-cell-wide { grid-column: 1 / -1; border-top: 1px dashed rgba(56, 189, 248, 0.32); border-top: 1px dashed var(--uhd-border); padding-top: 0.7rem; }
.uhd-ai-label { font-size: 9.5px; letter-spacing: 0.22em; color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); font-weight: 700; }
.uhd-ai-value {
    font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
    font-size: 28px; font-weight: 700;
    color: #0B0B12;
    color: var(--uhd-text);
    line-height: 1.05;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.uhd-ai-value-cost { color: #F5C45A; color: var(--uhd-gold); text-shadow: 0 0 14px rgba(245, 196, 90, 0.4); }
.uhd-ai-bar {
    height: 4px; background: rgba(139, 26, 44, 0.08); border-radius: 9999px; overflow: hidden;
    margin-top: 0.35rem;
}
html.dark .uhd-ai-bar { background: rgba(255, 255, 255, 0.06); }
.uhd-ai-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8B1A2C, #E8546B);
    background: linear-gradient(90deg, var(--uhd-crimson-deep), var(--uhd-crimson));
    box-shadow: 0 0 10px #E8546B;
    box-shadow: 0 0 10px var(--uhd-crimson);
}
.uhd-ai-bar-gold {
    background: linear-gradient(90deg, #d4a437, #F5C45A);
    background: linear-gradient(90deg, #d4a437, var(--uhd-gold));
    box-shadow: 0 0 10px #F5C45A;
    box-shadow: 0 0 10px var(--uhd-gold);
}
.uhd-ai-trace {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 10px; letter-spacing: 0.16em; color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted);
    margin-top: 0.4rem;
}

/* ─── PROCUREMENT HEATMAP ─── */
.uhd-heatmap {
    display: grid; grid-template-columns: repeat(5, 1fr);
    grid-gap: 0.55rem;
    gap: 0.55rem;
    padding: 1rem 0.9rem 0.9rem;
    height: 220px;
    align-items: end;
}
.uhd-heatmap-col {
    display: flex; flex-direction: column; justify-content: end; align-items: center;
    gap: 0.4rem;
    height: 100%;
}
.uhd-heatmap-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    box-shadow: 0 -6px 18px rgba(232, 84, 107, 0.35);
    min-height: 6px;
}
.uhd-heatmap-val {
    font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
    font-size: 18px; font-weight: 700;
    color: #0B0B12;
    color: var(--uhd-text);
}
.uhd-heatmap-label {
    font-size: 9px; letter-spacing: 0.2em; color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted);
    font-weight: 700;
}

/* ─── TRANSACTION TICKER ─── */
.uhd-ticker {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.96);
    background: var(--uhd-surface-strong);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(56, 189, 248, 0.32);
    border: 1px solid var(--uhd-border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 12px 36px -20px rgba(139, 26, 44, 0.30);
}
.uhd-ticker-head {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    font-size: 10px; letter-spacing: 0.26em; font-weight: 700;
    color: #8B1A2C;
    color: var(--uhd-crimson-deep);
    border-right: 1px solid rgba(56, 189, 248, 0.32);
    border-right: 1px solid var(--uhd-border);
    background: linear-gradient(90deg, rgba(245, 196, 90, 0.14), transparent);
}
html.dark .uhd-ticker-head { color: #E8546B; color: var(--uhd-crimson); }
.uhd-ticker-pulse {
    width: 7px; height: 7px; border-radius: 9999px; background: #E8546B; background: var(--uhd-crimson);
    box-shadow: 0 0 10px #E8546B;
    box-shadow: 0 0 10px var(--uhd-crimson);
    animation: uhdDotPulse 1.4s ease-in-out infinite;
}
.uhd-ticker-track {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    overflow: hidden;
    padding: 0 0.6rem;
}
.uhd-ticker-empty { padding: 0; }
.uhd-ticker-rail {
    display: inline-flex;
    gap: 1.8rem;
    white-space: nowrap;
    animation: uhdTickerScroll 60s linear infinite;
    padding-left: 1rem;
}
@keyframes uhdTickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.uhd-ticker-item {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 11px; letter-spacing: 0.1em;
    color: #0B0B12;
    color: var(--uhd-text);
}
.uhd-ticker-id { font-family: ui-monospace, monospace; color: #8B1A2C; color: var(--uhd-crimson-deep); font-weight: 700; }
html.dark .uhd-ticker-id { color: #E8546B; color: var(--uhd-crimson); }
.uhd-ticker-sep { color: rgba(11, 11, 18, 0.48); color: var(--uhd-text-muted); }
.uhd-ticker-co { color: rgba(11, 11, 18, 0.65); color: var(--uhd-text-dim); }
.uhd-ticker-amt {
    font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
    font-weight: 700;
    color: #F5C45A;
    color: var(--uhd-gold);
    text-shadow: 0 0 8px rgba(245, 196, 90, 0.35);
}
.uhd-ticker-status {
    font-size: 9px; padding: 2px 6px; border-radius: 2px;
    letter-spacing: 0.18em; font-weight: 700;
    border: 1px solid rgba(56, 189, 248, 0.32);
    border: 1px solid var(--uhd-border);
}
.uhd-status-placed, .uhd-status-confirmed { background: rgba(245, 196, 90, 0.18); color: #8a6500; border-color: rgba(245, 196, 90, 0.4); }
.uhd-status-shipped { background: rgba(96, 165, 250, 0.18); color: #1e40af; border-color: rgba(96, 165, 250, 0.4); }
.uhd-status-delivered { background: rgba(52, 211, 153, 0.2); color: #047857; border-color: rgba(52, 211, 153, 0.45); }
.uhd-status-cancelled { background: rgba(232, 84, 107, 0.18); color: #8B1A2C; color: var(--uhd-crimson-deep); border-color: rgba(56, 189, 248, 0.32); border-color: var(--uhd-border); }
html.dark .uhd-status-placed,
html.dark .uhd-status-confirmed { color: #F5C45A; color: var(--uhd-gold); }
html.dark .uhd-status-shipped { color: #93c5fd; }
html.dark .uhd-status-delivered { color: #34D399; color: var(--uhd-mint); }
html.dark .uhd-status-cancelled { color: #E8546B; color: var(--uhd-crimson); }

/* ─── ADMIN SHELL OVERRIDE ─── */
/* When admin shell wraps the cockpit, the inherited cyber background
   already provides depth — we need the cockpit to surface its own
   ivory canvas in light mode without being blanked out. */
html:not(.dark) body[data-admin-shell="true"] .uhd-cockpit { background-color: #0B1B3A; background-color: var(--uhd-ivory); }

/* ====================================================================
   iter-211 · TRADE PORTAL /login · DUAL THEME
   Default markup is the dark obsidian cockpit. Toggle adds class
   html:not(.dark) .joy-login-shell which paints the page white + glossy crimson
   while preserving the same structural layout and motion.
   =================================================================== */
.joy-login-theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 60;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: rgba(20, 20, 24, 0.78);
    border: 1px solid rgba(139, 26, 44, 0.45);
    color: #FFD4DC;
    cursor: pointer;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 6px 18px -6px rgba(139, 26, 44, 0.40);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.joy-login-theme-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px -6px rgba(139, 26, 44, 0.55);
}

/* ════════════════════════════════════════════════════════════════════
   iter-248 · AMG DARK-MODE COCKPIT
   Founder directive (Feb 09 2026): in dark mode the auth page must
   look like a high-performance AMG cockpit — glossy "shiny black"
   (radial gradient, not flat), thin metallic borders, deep-red
   carbon-fibre submit button, copper→white shimmer on the accent
   word. Strictly dark-only; light theme keeps its trio-card cleanliness.
   ══════════════════════════════════════════════════════════════════ */
html.dark .joy-login-shell {
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, #1A1A1F 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 20% 100%, rgba(120, 20, 35, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, #0A0A0C 0%, #050507 100%) !important;
    color: #ECECEC !important;
}
html.dark .joy-login-shell [data-testid="cockpit-right"],
html.dark .joy-login-shell .joy-login-aside,
html.dark .joy-login-shell [data-testid="cockpit-left"] {
    background: transparent !important;
}
/* Hero accent word — metallic copper → champagne → white gradient */
html.dark .joy-login-shell [data-testid="cockpit-headline"] > span[style] {
    background: linear-gradient(135deg, #B87333 0%, #D4A574 22%, #F5DEB3 45%, #FFFFFF 60%, #F5DEB3 78%, #D4A574 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 24px rgba(244, 164, 96, 0.22) !important;
    background-size: 200% 200%;
    animation: amg-metallic-sweep 7s ease-in-out infinite;
}
@keyframes amg-metallic-sweep {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
/* Cockpit terminal — glossy black panel with thin metallic rim */
html.dark .joy-login-shell [data-testid="cockpit-terminal"] {
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
        linear-gradient(180deg, #16161A 0%, #0A0A0C 100%) !important;
    border: 1px solid #2A2A30 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 30px 60px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(212, 165, 116, 0.06) !important;
}
html.dark .joy-login-shell [data-testid="cockpit-terminal"] > div:first-child,
html.dark .joy-login-shell [data-testid="cockpit-terminal"] > div:last-child {
    background: linear-gradient(180deg, #1A1A1F 0%, #0E0E12 100%) !important;
    border-color: #2A2A30 !important;
}
/* Inputs — deep onyx with copper focus ring */
html.dark .joy-login-shell.cockpit-root input,
html.dark .joy-login-shell.cockpit-root textarea {
    background: #0E0E12 !important;
    color: #ECECEC !important;
    border: 1px solid #2A2A30 !important;
    caret-color: #D4A574 !important;
}
html.dark .joy-login-shell.cockpit-root input::placeholder,
html.dark .joy-login-shell.cockpit-root textarea::placeholder {
    color: #6B6B72 !important;
}
html.dark .joy-login-shell.cockpit-root input:focus,
html.dark .joy-login-shell.cockpit-root textarea:focus {
    border-color: #D4A574 !important;
    box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.15) !important;
    outline: none !important;
}
/* Tabs */
html.dark .joy-login-shell button[role="tab"][data-state="inactive"] {
    background: transparent !important;
    color: #8A8A92 !important;
    border: 1px solid #2A2A30 !important;
}
html.dark .joy-login-shell button[role="tab"][data-state="active"] {
    background: linear-gradient(180deg, #4A1220 0%, #2F0A14 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #5C1828 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5),
        0 4px 14px -4px rgba(74, 18, 32, 0.5) !important;
}
/* SIGN IN submit — "carbon-fibre painted deep red" with glossy top highlight */
html.dark .joy-login-shell button[type="submit"]:not([role="tab"]) {
    background:
        linear-gradient(180deg, #7A1726 0%, #5C1018 35%, #3F0A12 70%, #2A050A 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #6B1320 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 220, 0.20),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(120, 20, 30, 0.18),
        0 14px 32px -10px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(212, 165, 116, 0.04) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) !important;
    transition: all 0.25s ease !important;
}
html.dark .joy-login-shell button[type="submit"]:not([role="tab"]):hover {
    background:
        linear-gradient(180deg, #8A1A2C 0%, #6E1320 35%, #4A0C16 70%, #310810 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 220, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        inset 0 0 36px rgba(150, 30, 40, 0.24),
        0 18px 40px -10px rgba(120, 20, 30, 0.45),
        0 0 0 1px rgba(212, 165, 116, 0.08) !important;
}

/* Theme toggle — metallic knob (3D physical button feel) */
.joy-login-theme-toggle {
    background: radial-gradient(circle at 30% 30%, #4A4A52 0%, #2A2A32 50%, #1A1A20 100%) !important;
    border: 1px solid #5C5C66 !important;
    color: #D4A574 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(0, 0, 0, 0.6),
        0 6px 18px -4px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(212, 165, 116, 0.08) !important;
}
.joy-login-theme-toggle:hover {
    transform: scale(1.06);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.24),
        inset 0 -1px 1px rgba(0, 0, 0, 0.6),
        0 8px 22px -4px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(212, 165, 116, 0.15) !important;
}
html:not(.dark) .joy-login-theme-toggle {
    background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #F1F1F4 50%, #D4D4D8 100%) !important;
    border: 1px solid #C5C5CB !important;
    color: #8B1A2C !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(0, 0, 0, 0.06),
        0 4px 12px -3px rgba(0, 0, 0, 0.12) !important;
}

/* ════════════════════════════════════════════════════════════════════
   iter-248 · JOE/JOY AI Floating Pill — metallic restyle
   Light: silver-chrome · Dark: dark titanium with copper halo
   ══════════════════════════════════════════════════════════════════ */
.joe-pill,
[data-testid="joe-fab"],
[data-testid="joe-floating"],
.joy-joe-fab {
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
html:not(.dark) .joe-pill,
html:not(.dark) [data-testid="joe-fab"],
html:not(.dark) [data-testid="joe-floating"],
html:not(.dark) .joy-joe-fab {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F4 50%, #D8D8DD 100%) !important;
    border: 1px solid #FFFFFF !important;
    color: #18181B !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08),
        0 12px 30px -8px rgba(0, 0, 0, 0.20),
        0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}
html.dark .joe-pill,
html.dark [data-testid="joe-fab"],
html.dark [data-testid="joe-floating"],
html.dark .joy-joe-fab {
    background: linear-gradient(180deg, #3A3A42 0%, #1F1F25 50%, #0E0E14 100%) !important;
    border: 1px solid #5C5C66 !important;
    color: #ECECEC !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.6),
        0 12px 30px -6px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(212, 165, 116, 0.10) !important;
}
.joe-pill:hover,
[data-testid="joe-fab"]:hover,
[data-testid="joe-floating"]:hover,
.joy-joe-fab:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.05);
}

/* ════════════════════════════════════════════════════════════════════
   iter-248 · Shimmer auto-pause when off-screen
   .joy-shimmer-paused class is added by the IntersectionObserver hook
   so the gold sweep doesn't burn cycles when not visible.
   ══════════════════════════════════════════════════════════════════ */
[data-joy-shimmer].joy-shimmer-paused {
    animation-play-state: paused !important;
}


/* ─── LIGHT THEME OVERRIDES (iter-250) ───────────────────────────
   Founder reference (Feb 09 2026): AMG cockpit light mode — warm cream
   canvas, softer ink (NO pitch-black), richer wine-red accents, glossy
   bevelled SIGN IN button with subtle sheen sweep. */
html:not(.dark) .joy-login-shell {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(139, 26, 44, 0.025) 0%, transparent 70%),
        linear-gradient(180deg, #FBFAF8 0%, #F6F4F1 100%) !important;
    color: #1F1F23 !important;
}
html:not(.dark) .joy-login-shell .joy-login-aside,
html:not(.dark) .joy-login-shell [data-testid="cockpit-left"],
html:not(.dark) .joy-login-shell [data-testid="cockpit-right"] {
    background: transparent !important;
    color: #1F1F23;
    border-color: #E4E0D8 !important;
}
html:not(.dark) .joy-login-shell [data-testid="cockpit-canvas-headline"],
html:not(.dark) .joy-login-shell [data-testid="cockpit-headline"] {
    color: #1F1F23 !important;  /* softer ink — never pure black */
}
/* "Liquidity." accent — deep wine, NOT pitch-black, with a subtle 3D engraved feel */
html:not(.dark) .joy-login-shell [data-testid="cockpit-headline"] > span[style] {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: border-box !important;
    background-clip: initial !important;
    color: #5E0F25 !important;
    -webkit-text-fill-color: #5E0F25 !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 18px rgba(139, 26, 44, 0.18) !important;
    animation: none !important;
}
html:not(.dark) .joy-login-shell .text-emerald-400,
html:not(.dark) .joy-login-shell .text-emerald-300 { color: #1F1F23 !important; text-shadow: none !important; }
html:not(.dark) .joy-login-shell .bg-emerald-400 { background-color: #8B1A2C !important; }
html:not(.dark) .joy-login-shell .text-zinc-100,
html:not(.dark) .joy-login-shell .text-zinc-200,
html:not(.dark) .joy-login-shell .text-zinc-300,
html:not(.dark) .joy-login-shell .text-zinc-400,
html:not(.dark) .joy-login-shell .text-white\/90,
html:not(.dark) .joy-login-shell .text-white {
    color: #3F3F46 !important;     /* zinc-700 — soft ink, not pitch */
}
html:not(.dark) .joy-login-shell .text-zinc-500,
html:not(.dark) .joy-login-shell .text-zinc-600 {
    color: #52525B !important;
}
/* Cockpit terminal — warm cream panel with thin crimson rim */
html:not(.dark) .joy-login-shell [data-testid="cockpit-terminal"] {
    background:
        linear-gradient(180deg, #FFFFFF 0%, #FBFAF8 100%) !important;
    border: 1px solid #E4E0D8 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(139, 26, 44, 0.04),
        0 18px 40px -16px rgba(94, 15, 37, 0.10),
        0 0 0 1px rgba(94, 15, 37, 0.04) !important;
}
html:not(.dark) .joy-login-shell [data-testid="cockpit-terminal"] > div:first-child,
html:not(.dark) .joy-login-shell [data-testid="cockpit-terminal"] > div:last-child {
    background: linear-gradient(180deg, #FBFAF8 0%, #F6F4F1 100%) !important;
    border-color: #E4E0D8 !important;
}
/* Form inputs — clean white, thin warm-grey border, soft focus */
html:not(.dark) .joy-login-shell.cockpit-root input,
html:not(.dark) .joy-login-shell.cockpit-root input[type="text"],
html:not(.dark) .joy-login-shell.cockpit-root input[type="email"],
html:not(.dark) .joy-login-shell.cockpit-root input[type="password"],
html:not(.dark) .joy-login-shell.cockpit-root input[type="tel"],
html:not(.dark) .joy-login-shell.cockpit-root input:not([type]),
html:not(.dark) .joy-login-shell.cockpit-root textarea {
    background: #FFFFFF !important;
    color: #1F1F23 !important;
    border: 1px solid #E4E0D8 !important;
    caret-color: #5E0F25 !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02) !important;
}
html:not(.dark) .joy-login-shell.cockpit-root input::placeholder,
html:not(.dark) .joy-login-shell.cockpit-root textarea::placeholder {
    color: #71717A !important;
    opacity: 1;
}
html:not(.dark) .joy-login-shell.cockpit-root input:focus,
html:not(.dark) .joy-login-shell.cockpit-root textarea:focus {
    border-color: #5E0F25 !important;
    box-shadow: 0 0 0 3px rgba(94, 15, 37, 0.10), inset 0 1px 1px rgba(0, 0, 0, 0.02) !important;
    outline: none !important;
}
/* SIGN IN / CREATE ACCOUNT tabs — active = wine carbon, inactive = clean */
html:not(.dark) .joy-login-shell button[role="tab"][data-state="inactive"] {
    background: #FFFFFF !important;
    color: #52525B !important;
    border: 1px solid #E4E0D8 !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.02) !important;
}
html:not(.dark) .joy-login-shell button[role="tab"][data-state="active"] {
    background:
        linear-gradient(180deg, #8B1A2C 0%, #6B1320 60%, #5E0F25 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #5E0F25 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 220, 0.30),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 6px 16px -6px rgba(94, 15, 37, 0.45) !important;
}
/* "Forgot password?" link */
html:not(.dark) .joy-login-shell a {
    color: #5E0F25 !important;
}
html:not(.dark) .joy-login-shell a:hover {
    opacity: 0.80;
}
/* SIGN IN submit button — glossy 3D bevel + sheen sweep on a ::before pseudo */
html:not(.dark) .joy-login-shell button[type="submit"]:not([role="tab"]) {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            #A11F36 0%,
            #8B1A2C 35%,
            #6B1320 75%,
            #5E0F25 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #5E0F25 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 220, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        inset 0 0 24px rgba(139, 26, 44, 0.18),
        0 12px 28px -10px rgba(94, 15, 37, 0.45),
        0 0 0 1px rgba(94, 15, 37, 0.06) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
    transition: all 0.25s ease !important;
}
html:not(.dark) .joy-login-shell button[type="submit"]:not([role="tab"])::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 255, 255, 0.30) 50%,
        transparent 70%);
    transform: translateX(-100%);
    animation: amg-sheen-sweep 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
html:not(.dark) .joy-login-shell button[type="submit"]:not([role="tab"]) > * {
    position: relative;
    z-index: 2;
}
html:not(.dark) .joy-login-shell button[type="submit"]:not([role="tab"]):hover {
    background:
        linear-gradient(180deg,
            #B22441 0%,
            #951E33 35%,
            #781626 75%,
            #6B1320 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 220, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        inset 0 0 28px rgba(150, 30, 40, 0.24),
        0 16px 36px -10px rgba(120, 20, 30, 0.55),
        0 0 0 1px rgba(94, 15, 37, 0.12) !important;
}
@keyframes amg-sheen-sweep {
    0%, 18% { transform: translateX(-100%); }
    50%     { transform: translateX(100%);  }
    100%    { transform: translateX(100%);  }
}

/* Dark-mode SIGN IN ALSO gets the sheen sweep — slightly cooler tint */
html.dark .joy-login-shell button[type="submit"]:not([role="tab"]) {
    position: relative;
    overflow: hidden;
}
html.dark .joy-login-shell button[type="submit"]:not([role="tab"])::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent 30%,
        rgba(255, 200, 200, 0.20) 50%,
        transparent 70%);
    transform: translateX(-100%);
    animation: amg-sheen-sweep 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
html.dark .joy-login-shell button[type="submit"]:not([role="tab"]) > * {
    position: relative;
    z-index: 2;
}

/* iter-213 · Sidebar nav contrast hotfix.
   The user reported sidebar nav items appearing washed out on both
   light and dark backgrounds. Force high-contrast rendering with
   explicit colours that win over the cyber-shell admin overrides. */
.joy-sidebar-nav a {
    font-weight: 600 !important;
}
html:not(.dark) .joy-sidebar-nav a:not(.active) span {
    color: #18181B !important;
}
html.dark .joy-sidebar-nav a:not(.active) span {
    color: #FAFAFA !important;
}
html.dark .joy-sidebar-nav a:not(.active) svg {
    color: #FAFAFA !important;
    opacity: 0.92;
}
html:not(.dark) .joy-sidebar-nav a:not(.active) svg {
    color: #18181B !important;
    opacity: 0.92;
}
/* Active state */
.joy-sidebar-nav a.active span,
.joy-sidebar-nav a[aria-current="page"] span {
    color: #8B1A2C !important;
    font-weight: 700 !important;
}
html.dark .joy-sidebar-nav a.active span,
html.dark .joy-sidebar-nav a[aria-current="page"] span {
    color: #FFFFFF !important;
}

/* iter-214 · Mobile responsive (≤640px) for UHD cockpit + dashboard greeting */
@media (max-width: 640px) {
    .uhd-cockpit {
        padding: 0.75rem 0.5rem 2rem;
    }
    .uhd-gauge {
        padding: 0.6rem 0.35rem 0.7rem;
    }
    .uhd-gauge-svg {
        max-width: 180px;
    }
    .uhd-gauge-label {
        font-size: 8.5px;
        letter-spacing: 0.20em;
        margin-top: 0.35rem;
        white-space: nowrap;
    }
    .uhd-gauge-row {
        gap: 0.55rem;
        margin-bottom: 0.85rem;
    }
    .uhd-statusbar {
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.85rem;
        font-size: 9px;
        letter-spacing: 0.16em;
        flex-wrap: wrap;
        gap: 0.45rem;
    }
    .uhd-statusbar-left, .uhd-statusbar-right { gap: 0.4rem; }
    .uhd-statusbar-build { display: none; }
    .uhd-clock { font-size: 11px; letter-spacing: 0.10em; }
    .uhd-ticker-track { height: 32px; }
    .uhd-ticker-item { font-size: 10px; }
    .uhd-grid-2 { gap: 0.6rem; margin-bottom: 0.85rem; }
}

/* iter-214 · Greeting wallet pill responsive — never let the topbar
   credit pill push the JOE avatar out of viewport on small screens. */
@media (max-width: 480px) {
    [data-testid="topbar-wallet-toggle"] {
        padding: 0.3rem 0.55rem !important;
    }
    [data-testid="topbar-wallet-amount"] {
        font-size: 10.5px !important;
    }
}

/* ====================================================================
   iter-215 · DARK-MODE SIDEBAR CONTRAST + COMMAND PALETTE LIGHT FIX +
                MOBILE TOPBAR
   =================================================================== */

/* ─── Sidebar nav rows · stronger selectors (label is direct span) ─── */
html.dark aside .joy-sidebar-nav span,
html.dark aside .joy-sidebar-nav a {
    color: #FAFAFA !important;
}
html.dark aside .joy-sidebar-nav a svg {
    color: #FAFAFA !important;
    opacity: 0.95;
}
html.dark aside .joy-sidebar-nav a:hover span,
html.dark aside .joy-sidebar-nav a:hover {
    color: #FFFFFF !important;
}
html.dark aside .joy-sidebar-nav a:hover {
    background: rgba(232, 84, 107, 0.10) !important;
}
/* Active row in dark mode — crimson background tint + white text */
html.dark aside .joy-sidebar-nav a.active,
html.dark aside .joy-sidebar-nav a[aria-current="page"] {
    background: linear-gradient(90deg, rgba(139, 26, 44, 0.40), rgba(139, 26, 44, 0.18)) !important;
    color: #FFFFFF !important;
}
html.dark aside .joy-sidebar-nav a.active span,
html.dark aside .joy-sidebar-nav a[aria-current="page"] span {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* Sidebar group headings ("CONSOLE", "PROCUREMENT", "INVENTORY") */
html.dark aside .joy-sidebar-nav button[type="button"] span,
html.dark aside [data-testid^="sidebar-group-"] span {
    color: #F4F4F5 !important;
}

/* ─── Command Palette · LIGHT mode contrast hotfix ─── */
html:not(.dark) [data-testid="command-palette"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 245, 247, 0.98)) !important;
    border: 1px solid rgba(139, 26, 44, 0.25) !important;
    box-shadow:
        0 24px 64px -20px rgba(139, 26, 44, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html:not(.dark) [data-testid="command-palette"] .text-white,
html:not(.dark) [data-testid="command-palette"] input {
    color: #0B0B12 !important;
}
html:not(.dark) [data-testid="command-palette"] input::placeholder {
    color: #71717A !important;
    opacity: 1;
}
html:not(.dark) [data-testid="command-palette"] .text-zinc-300,
html:not(.dark) [data-testid="command-palette"] .text-zinc-400,
html:not(.dark) [data-testid="command-palette"] .text-zinc-500 {
    color: #3F3F46 !important;
}
html:not(.dark) [data-testid="command-palette"] .border-white\/10,
html:not(.dark) [data-testid="command-palette"] .border-white\/15,
html:not(.dark) [data-testid="command-palette"] .border-white\/20 {
    border-color: rgba(139, 26, 44, 0.22) !important;
}
html:not(.dark) [data-testid="command-palette"] .bg-white\/\[0\.04\],
html:not(.dark) [data-testid="command-palette"] .bg-white\/\[0\.06\] {
    background: rgba(139, 26, 44, 0.04) !important;
}
html:not(.dark) [data-testid="command-palette"] kbd {
    background: #F4F4F5 !important;
    color: #18181B !important;
    border-color: rgba(139, 26, 44, 0.25) !important;
}
html:not(.dark) [data-testid="command-palette"] [cmdk-item]:hover {
    background: rgba(139, 26, 44, 0.06) !important;
}

/* ─── Topbar wallet · mobile compaction (<480px) ─── */
@media (max-width: 480px) {
    [data-testid="topbar-wallet-toggle"] span.uppercase,
    [data-testid="topbar-wallet-toggle"] .uppercase {
        display: none !important;
    }
    [data-testid="topbar-wallet-toggle"] {
        padding: 0.3rem 0.55rem !important;
        gap: 0.35rem !important;
    }
    [data-testid="topbar-wallet-amount"] {
        font-size: 10.5px !important;
    }
}

/* iter-216 · Login page hot-fix · tab contrast in dark mode.
   The previous tabs rendered crimson-on-crimson (active) and
   black-on-black (inactive). Force readable colours. */
html.dark .joy-login-shell button[role="tab"][data-state="active"],
.joy-login-theme-dark button[role="tab"][data-state="active"] {
    background: linear-gradient(180deg, #DC2626 0%, #8B1A2C 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid #8B1A2C !important;
    box-shadow:
        0 6px 18px -6px rgba(220, 38, 38, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
html.dark .joy-login-shell button[role="tab"][data-state="inactive"],
.joy-login-theme-dark button[role="tab"][data-state="inactive"] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #F4F4F5 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html.dark .joy-login-shell button[type="submit"]:not([role="tab"]),
.joy-login-theme-dark button[type="submit"]:not([role="tab"]) {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
    background: linear-gradient(180deg, #DC2626 0%, #8B1A2C 100%) !important;
}
.joy-login-theme-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 60;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    background: rgba(20, 20, 24, 0.78);
    border: 1px solid rgba(139, 26, 44, 0.45);
    color: #FFD4DC;
    cursor: pointer;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 6px 18px -6px rgba(139, 26, 44, 0.40);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.joy-login-theme-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px -6px rgba(139, 26, 44, 0.55);
}
.joy-login-theme-toggle .only-in-dark { display: none; }
.joy-login-theme-toggle .only-in-light { display: block; }
html.dark .joy-login-theme-toggle .only-in-dark { display: block; }
html.dark .joy-login-theme-toggle .only-in-light { display: none; }
html:not(.dark) .joy-login-theme-toggle {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(220, 38, 38, 0.45);
    color: #8B1A2C;
    box-shadow:
        0 6px 18px -6px rgba(220, 38, 38, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* iter-216 · Vellox + Kits hero body text — guarantee readable
   contrast on dark hero backgrounds. */
.bg-slate-950 .text-slate-300,
.bg-slate-900 .text-slate-300,
[class*="bg-slate-950"] .text-slate-400 {
    color: #F4F4F5 !important;
}

/* iter-216 · Final sidebar nav clarity in dark mode — force full
   opacity and bright white on all descendants of inactive rows. */
html.dark aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]),
html.dark aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]) * {
    color: #FAFAFA !important;
    opacity: 1 !important;
}
html.dark aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]) svg {
    color: #FAFAFA !important;
    stroke: currentColor !important;
}
/* Group toggle buttons — eye-able in dark */
html.dark aside button[data-testid^="sidebar-group-toggle-"],
html.dark aside button[data-testid^="sidebar-group-toggle-"] * {
    color: #E4E4E7 !important;
    opacity: 1 !important;
}

/* ====================================================================
   iter-217 · ZERO-TOLERANCE DARK MODE SIDEBAR FIX
   The sidebar has multiple inline `background: #FFFFFF` declarations
   that ignore dark mode. Override every one of them in dark.
   =================================================================== */
html.dark aside [data-testid="sidebar-user-profile-top"] > div,
html.dark aside button[data-testid="sidebar-theme"],
html.dark aside button[data-testid="logout-button"],
html.dark aside button[title*="Ask Oni"],
html.dark aside [data-testid^="ai-notify"] {
    background: #14141A !important;
    box-shadow:
        inset 3px 3px 9px rgba(139, 26, 44, 0.18),
        inset -3px -3px 9px rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(139, 26, 44, 0.35) !important;
}
html.dark aside button[title*="Ask Oni"] {
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
}
html.dark aside button[title*="Ask Oni"] span {
    color: #FFD4DC !important;
}
html.dark aside button[title*="Ask Oni"] kbd {
    background: rgba(220, 38, 38, 0.20) !important;
    border-color: rgba(220, 38, 38, 0.40) !important;
    color: #FFD4DC !important;
}
html.dark aside [data-testid="sidebar-user-profile-top"] span,
html.dark aside [data-testid="sidebar-user-profile-top"] * {
    color: #FAFAFA !important;
}
html.dark aside [data-testid="sidebar-theme"] svg,
html.dark aside [data-testid="logout-button"] svg {
    color: #FFD4DC !important;
}
/* NavGroup toggle button (the CONSOLE/PROCUREMENT heading row) */
html.dark aside button[data-testid^="sidebar-group-toggle-"] {
    color: #F4F4F5 !important;
}
html.dark aside button[data-testid^="sidebar-group-toggle-"] svg,
html.dark aside button[data-testid^="sidebar-group-toggle-"] span {
    color: #F4F4F5 !important;
    opacity: 1 !important;
}
/* Nav item rows — guarantee dark background, never white pill */
html.dark aside .joy-sidebar-nav a {
    background: transparent !important;
}
html.dark aside .joy-sidebar-nav a:hover {
    background: rgba(232, 84, 107, 0.10) !important;
}
html.dark aside .joy-sidebar-nav a.active,
html.dark aside .joy-sidebar-nav a[aria-current="page"] {
    background: linear-gradient(90deg, rgba(139, 26, 44, 0.42), rgba(139, 26, 44, 0.20)) !important;
}
html.dark aside .joy-sidebar-nav a,
html.dark aside .joy-sidebar-nav a span,
html.dark aside .joy-sidebar-nav a svg {
    color: #FAFAFA !important;
    opacity: 1 !important;
}

/* iter-217 · Credit page · "Built from your order volume..." description
   was rendering at very low contrast on dark background. */
html.dark [data-testid="credit-explain"],
html.dark [data-testid="credit-explain"] * {
    color: #E4E4E7 !important;
}

/* iter-217 · Analytics stat cards ("VOLUME /100" etc) — guarantee
   readable dark-mode contrast. */
html.dark [data-testid^="credit-component-"] {
    background: #14141A !important;
    border: 1px solid rgba(139, 26, 44, 0.30) !important;
}
html.dark [data-testid^="credit-component-"] * {
    color: #F4F4F5 !important;
}

/* ====================================================================
   iter-218 · LIGHT-MODE TEXT CONTRAST · ZERO TOLERANCE
   ==================================================================== */

/* Sidebar nav · light mode — sharp black text, never faint grey */
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]),
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]) span,
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]) svg {
    color: #0B0B12 !important;
    opacity: 1 !important;
}
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]):hover {
    background: rgba(139, 26, 44, 0.06) !important;
}
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]):hover,
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]):hover span,
html:not(.dark) aside .joy-sidebar-nav a:not(.active):not([aria-current="page"]):hover svg {
    color: #8B1A2C !important;
}

/* Group toggle labels in light mode */
html:not(.dark) aside button[data-testid^="sidebar-group-toggle-"],
html:not(.dark) aside button[data-testid^="sidebar-group-toggle-"] span,
html:not(.dark) aside button[data-testid^="sidebar-group-toggle-"] svg {
    color: #5E0F25 !important;
    opacity: 1 !important;
}

/* Command Palette (Ask Oni) · LIGHT mode — coerce items to sharp black.
   The palette can use either `[data-testid="command-palette"]` or the
   raw `[cmdk-root]` shell. Cover both. */
html:not(.dark) [data-testid="command-palette"] *,
html:not(.dark) [cmdk-root] *,
html:not(.dark) [cmdk-list] *,
html:not(.dark) [cmdk-item] *,
html:not(.dark) [cmdk-group] * {
    --cmdk-text: #0B0B12;
}
html:not(.dark) [data-testid="command-palette"] [cmdk-item],
html:not(.dark) [cmdk-item] {
    color: #0B0B12 !important;
}
html:not(.dark) [data-testid="command-palette"] [cmdk-item] span,
html:not(.dark) [data-testid="command-palette"] [cmdk-item] div,
html:not(.dark) [cmdk-item] span,
html:not(.dark) [cmdk-item] div {
    color: #0B0B12 !important;
    opacity: 1 !important;
}
html:not(.dark) [data-testid="command-palette"] [cmdk-item] .text-zinc-400,
html:not(.dark) [data-testid="command-palette"] [cmdk-item] .text-zinc-500,
html:not(.dark) [data-testid="command-palette"] [cmdk-item] .text-zinc-300,
html:not(.dark) [cmdk-item] .text-zinc-400,
html:not(.dark) [cmdk-item] .text-zinc-500,
html:not(.dark) [cmdk-item] .text-zinc-300 {
    color: #3F3F46 !important;
}
html:not(.dark) [data-testid="command-palette"] [cmdk-group-heading],
html:not(.dark) [cmdk-group-heading] {
    color: #5E0F25 !important;
    font-weight: 700 !important;
}

/* Ask Oni sidebar button — sharper light-mode contrast */
html:not(.dark) aside button[title*="Ask Oni"] span {
    color: #5E0F25 !important;
    font-weight: 600 !important;
}

/* iter-218 · Reposition the login theme toggle to sit ABOVE the login box
   on the right edge — no longer floating top-right (founder request). */
.joy-login-theme-toggle {
    position: absolute !important;
    top: auto !important;
    right: auto !important;
}
.joy-login-shell .joy-login-theme-toggle-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

/* iter-219 · ROOT CAUSE FOUND — NavGroup wrapper falls back to
   near-white pink in dark mode. Override the CSS vars in both modes
   so the group container blends with the sidebar drawer. */
:root {
    --navgroup-bg: rgba(138, 28, 46, 0.04);
    --navgroup-border: rgba(138, 28, 46, 0.16);
    --navgroup-body-bg: #FFFFFF;
}
html.dark {
    --navgroup-bg: rgba(20, 20, 26, 0.55);
    --navgroup-border: rgba(232, 84, 107, 0.22);
    --navgroup-body-bg: rgba(10, 10, 14, 0.96);
}

/* iter-219 · Sidebar JOY Automart logo in dark mode — preserve
   original crimson logo (no greyscale/desaturate). User reported the
   logo appeared washed out in dark mode. */
html.dark aside img[alt*="Joy" i],
html.dark aside img[alt*="JOY" i],
html.dark aside [data-testid="sidebar-logo"] img {
    filter: drop-shadow(0 0 4px rgba(232, 84, 107, 0.4)) !important;
    opacity: 1 !important;
}

/* iter-219 · Login page footer — "By continuing..." and "Secure
   terminal" + "© 2026 JOY AUTOMART..." were rendering as faint grey
   on white. Sharp black for light mode. */
html:not(.dark) .joy-login-shell .text-zinc-600,
html:not(.dark) .joy-login-shell .text-zinc-500,
html:not(.dark) .joy-login-shell .text-zinc-400 {
    color: #18181B !important;
}
html:not(.dark) .joy-login-shell [data-testid="login-footer-wrap"] *,
html:not(.dark) .joy-login-shell [data-testid="login-footer-wrap"] {
    color: #27272A !important;
}
html:not(.dark) .joy-login-shell [data-testid="login-footer-wrap"] a {
    color: #8B1A2C !important;
    font-weight: 600 !important;
}

/* iter-219 · JOY watermark on login page · light mode — mirror the
   dark-mode large background JOY mark for visual continuity. */
html:not(.dark) .joy-login-shell::before {
    content: "JOY";
    position: fixed;
    bottom: -8vh;
    left: -2vw;
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: clamp(280px, 50vw, 720px);
    font-weight: 900;
    color: rgba(139, 26, 44, 0.05);
    line-height: 0.85;
    letter-spacing: -0.03em;
    pointer-events: none;
    z-index: 0;
    -webkit-user-select: none;
            user-select: none;
}

/* ====================================================================
   iter-221 · MARKETING PAGE HEADLINE SAFETY NET
   Guarantee every h1/h2/h3 with the `.font-display` class adapts to
   the global theme. The public marketing pages (About, Journal,
   Press, Careers, Insights, Technology, AI Intelligence, Supply
   Radar) all use `.font-display` for headlines and previously
   inherited color from their parent — which broke in mixed-mode
   contexts.
   =================================================================== */
html:not(.dark) main h1.font-display,
html:not(.dark) main h2.font-display,
html:not(.dark) main h3.font-display,
html:not(.dark) article h1.font-display,
html:not(.dark) article h2.font-display,
html:not(.dark) article h3.font-display {
    color: #0B0B12;
}
html.dark main h1.font-display,
html.dark main h2.font-display,
html.dark main h3.font-display,
html.dark article h1.font-display,
html.dark article h2.font-display,
html.dark article h3.font-display {
    color: #FAFAFA;
}
/* Preserve already-explicit colours (Tailwind text-* classes win
   over the safety net because Tailwind ships them as utilities
   later in the cascade). */
html:not(.dark) main h1.font-display[class*="text-"],
html.dark main h1.font-display[class*="text-"] {
    /* tailwind utility classes already apply correct colour */
}

/* ====================================================================
   iter-222 · MARKETING / PUBLIC PAGE HEADLINE TOP-SPACING SAFETY NET
   The sticky PublicPageHeader (h-14, ~56px) was visually colliding
   with the apex H1 on a handful of marketing pages because the hero
   `paddingTop` was set in `vh` units that collapse on small viewports.
   This selector targets the FIRST <section>/<article> hero block that
   immediately follows the sticky public header and guarantees a
   minimum 7rem (112px) clearance above the headline.
   Pages already padded generously (About at 13vh, Investors at py-32)
   are unaffected because `min-padding-top` only raises the floor.
   =================================================================== */
[data-testid="public-page-header"] + section,
[data-testid$="-hero"]:first-of-type,
[data-testid="about-hero"],
[data-testid="sr-hero"] {
    padding-top: max(7rem, 13vh) !important;
    padding-top: max(7rem, var(--public-hero-pt, 13vh)) !important;
}
@media (max-width: 640px) {
    [data-testid="public-page-header"] + section,
    [data-testid$="-hero"]:first-of-type,
    [data-testid="about-hero"],
    [data-testid="sr-hero"] {
        padding-top: 6rem !important;
    }
}
/* Generic fall-through for any <h1.font-display> rendered as the very
   first paint inside a hero — adds a hard top margin if its ancestor
   section is somehow flush with the sticky header. */
main > section:first-of-type > div > h1.font-display,
main > article:first-of-type > div > h1.font-display {
    margin-top: max(0px, calc(2rem - 1vh));
}

/* ====================================================================
   iter-223 · UHD COCKPIT SHELL · GLOBAL POLISH FOR EVERY AUTHENTICATED PAGE
   ────────────────────────────────────────────────────────────────────────
   This stylesheet is the "marketing-grade" polish layer that lifts every
   Trade OS page and every Admin Cockpit page to the same cinema quality
   that the public Landing / About / Vellox surfaces enjoy.

   How it's scoped:
     · `<main data-uhd-shell="true">` wraps every authenticated page (see
        Layout.jsx). Every rule below is scoped under that selector so
        nothing leaks into the public marketing surfaces or the Admin
        cyber-console shell.

   What it does:
     1. Ambient backdrop  — soft radial crimson + grid scanlines on every
                            page, exactly like the cockpit's UHD hero.
     2. Page entrance     — fade + 12px rise on mount for cinematic feel.
     3. Typography lift   — heavier display weights, tighter tracking,
                            larger sizes for h1/h2/h3 inside the content
                            area. Tabular numerics for stat-card numbers.
     4. Glassmorphism     — every shadcn Card / `.rounded-lg.border` /
                            `.bg-white` block becomes a frosted plane with
                            24px backdrop blur + 1.5px ruby-accent border.
     5. Depth shadows     — multi-layer drop shadows on elevated tiles.
     6. Sharper borders   — hairline ruby/zinc strokes that survive 4K.
     7. Button polish     — pill / sharp-edged with hover scale + glow.
     8. Both modes        — light is primary (electric ivory + crimson),
                            dark is the cinematic counterpart.
   =================================================================== */

/* ─── Variables · LIGHT (primary) ─────────────────────────────── */
main[data-uhd-shell="true"] {
    --uhd-shell-bg-1: #FAFAFA;
    --uhd-shell-bg-2: #FFFFFF;
    --uhd-shell-grid: rgba(139, 26, 44, 0.045);
    --uhd-shell-ambient: rgba(139, 26, 44, 0.06);
    --uhd-shell-card-bg: rgba(255, 255, 255, 0.82);
    --uhd-shell-card-edge: rgba(11, 11, 18, 0.10);
    --uhd-shell-card-edge-hover: rgba(139, 26, 44, 0.32);
    --uhd-shell-card-sheen: rgba(255, 255, 255, 0.85);
    --uhd-shell-card-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(139, 26, 44, 0.06) inset,
        0 24px 64px -28px rgba(139, 26, 44, 0.25),
        0 10px 28px -18px rgba(11, 11, 18, 0.10);
    --uhd-shell-h-color: #0B0B12;
    --uhd-shell-h-accent: #8B1A2C;
    --uhd-shell-body: #1F1F26;
    --uhd-shell-muted: #5B0C1E;
}
html.dark main[data-uhd-shell="true"] {
    --uhd-shell-bg-1: #07070B;
    --uhd-shell-bg-2: #0B0B12;
    --uhd-shell-grid: rgba(255, 61, 92, 0.05);
    --uhd-shell-ambient: rgba(255, 61, 92, 0.10);
    --uhd-shell-card-bg: rgba(20, 20, 26, 0.72);
    --uhd-shell-card-edge: rgba(255, 255, 255, 0.06);
    --uhd-shell-card-edge-hover: rgba(255, 61, 92, 0.42);
    --uhd-shell-card-sheen: rgba(255, 255, 255, 0.05);
    --uhd-shell-card-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 -1px 0 rgba(255, 61, 92, 0.10) inset,
        0 28px 72px -28px rgba(0, 0, 0, 0.85),
        0 12px 32px -18px rgba(0, 0, 0, 0.65);
    --uhd-shell-h-color: #FAFAFA;
    --uhd-shell-h-accent: #FF6E8A;
    --uhd-shell-body: #E4E4E7;
    --uhd-shell-muted: #FBA9B5;
}

/* ─── Ambient backdrop — every cockpit page gets it ─────────────── */
main[data-uhd-shell="true"] {
    position: relative;
    background:
        radial-gradient(ellipse 60% 40% at 50% -10%, var(--uhd-shell-ambient) 0%, transparent 65%),
        linear-gradient(180deg, var(--uhd-shell-bg-1) 0%, var(--uhd-shell-bg-2) 100%);
}
main[data-uhd-shell="true"] > .uhd-page-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--uhd-shell-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--uhd-shell-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0, 0, 0, 0.6) 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(0, 0, 0, 0.6) 0%, transparent 75%);
    z-index: 0;
}
main[data-uhd-shell="true"] > .uhd-page-content {
    position: relative;
    z-index: 1;
}

/* ─── Page entrance animation ──────────────────────────────────── */
@keyframes uhdShellEnter {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
main[data-uhd-shell="true"] > .uhd-page-content {
    animation: uhdShellEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    main[data-uhd-shell="true"] > .uhd-page-content { animation: none; }
}

/* ─── Typography lift (h1/h2/h3 inside cockpit content) ────────── */
main[data-uhd-shell="true"] h1,
main[data-uhd-shell="true"] h1.font-display {
    color: var(--uhd-shell-h-color);
    font-family: "Cabinet Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.04;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
main[data-uhd-shell="true"] h2 {
    color: var(--uhd-shell-h-color);
    font-family: "Cabinet Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.12;
}
main[data-uhd-shell="true"] h3 {
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--uhd-shell-h-color);
}

/* Stat-card numbers — tabular nums + heavier display weight */
main[data-uhd-shell="true"] .tabular-nums,
main[data-uhd-shell="true"] [class*="font-display"] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    text-rendering: geometricPrecision;
}

/* ─── Cinematic Card / panel upgrade ───────────────────────────── */
/* Targets shadcn Card primitives and the most common "white box" idioms
   used across the cockpit pages: rounded + bordered + bg-white blocks. */
main[data-uhd-shell="true"] .rounded-lg.border,
main[data-uhd-shell="true"] .rounded-md.border,
main[data-uhd-shell="true"] .rounded-xl.border,
main[data-uhd-shell="true"] .rounded-2xl.border,
main[data-uhd-shell="true"] [data-slot="card"],
main[data-uhd-shell="true"] [data-uhd-card="true"] {
    background: var(--uhd-shell-card-bg);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-color: var(--uhd-shell-card-edge) !important;
    border-width: 1px;
    box-shadow: var(--uhd-shell-card-shadow);
    position: relative;
    transition: border-color 280ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
main[data-uhd-shell="true"] .rounded-lg.border:hover,
main[data-uhd-shell="true"] .rounded-xl.border:hover,
main[data-uhd-shell="true"] [data-slot="card"]:hover,
main[data-uhd-shell="true"] [data-uhd-card="true"]:hover {
    border-color: var(--uhd-shell-card-edge-hover) !important;
}

/* Top-edge sheen on every cinematic card */
main[data-uhd-shell="true"] .rounded-lg.border::before,
main[data-uhd-shell="true"] .rounded-xl.border::before,
main[data-uhd-shell="true"] [data-slot="card"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--uhd-shell-card-sheen), transparent);
    opacity: 0.85;
    pointer-events: none;
}

/* ─── Buttons · cinematic hover ───────────────────────────────── */
main[data-uhd-shell="true"] button[class*="bg-"]:not([class*="ghost"]):not([class*="link"]),
main[data-uhd-shell="true"] a[class*="bg-[#8B1A2C]"] {
    transition:
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
main[data-uhd-shell="true"] button[class*="bg-[#8B1A2C]"]:hover,
main[data-uhd-shell="true"] a[class*="bg-[#8B1A2C]"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -10px rgba(139, 26, 44, 0.55), 0 2px 6px rgba(139, 26, 44, 0.18);
}

/* Primary CTA — sharper edge highlight on focus */
main[data-uhd-shell="true"] button:focus-visible,
main[data-uhd-shell="true"] a:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--uhd-shell-bg-1),
        0 0 0 3.5px var(--uhd-shell-h-accent);
    border-radius: inherit;
}

/* ─── Tables · tabular nums + sharper borders ─────────────────── */
main[data-uhd-shell="true"] table {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0;
}
main[data-uhd-shell="true"] table th {
    font-family: ui-monospace, "JetBrains Mono", monospace;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--uhd-shell-h-accent);
    border-bottom-color: var(--uhd-shell-card-edge) !important;
}
main[data-uhd-shell="true"] table td {
    border-color: var(--uhd-shell-card-edge) !important;
}

/* ─── Scrollbar polish · cockpit only ─────────────────────────── */
main[data-uhd-shell="true"] *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
main[data-uhd-shell="true"] *::-webkit-scrollbar-track {
    background: transparent;
}
main[data-uhd-shell="true"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8B1A2C, #5E0F25);
    border-radius: 999px;
    border: 2px solid var(--uhd-shell-bg-1);
}
main[data-uhd-shell="true"] *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #B11F36, #7C1430);
}

/* ─── Selection · crimson tint cockpit-wide ───────────────────── */
main[data-uhd-shell="true"] ::selection {
    background: rgba(139, 26, 44, 0.20);
    color: var(--uhd-shell-h-color);
}
html.dark main[data-uhd-shell="true"] ::selection {
    background: rgba(255, 61, 92, 0.32);
    color: #FFFFFF;
}

/* ─── Section spacing lift (2× breathing room) ───────────────── */
main[data-uhd-shell="true"] > .uhd-page-content > div > h1:first-child,
main[data-uhd-shell="true"] > .uhd-page-content > div > h2:first-child {
    margin-bottom: 1.25rem;
}
main[data-uhd-shell="true"] > .uhd-page-content > div {
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}

/* ─── KPI / stat tile · explicit cinematic primitive  ────────── */
main[data-uhd-shell="true"] [data-uhd-stat="true"] {
    position: relative;
    background: var(--uhd-shell-card-bg);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--uhd-shell-card-edge);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
    box-shadow: var(--uhd-shell-card-shadow);
    overflow: hidden;
}
main[data-uhd-shell="true"] [data-uhd-stat="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--uhd-shell-h-accent), transparent);
    opacity: 0.7;
}

/* ─── Image / asset crispness · always 2x on Retina ──────────── */
main[data-uhd-shell="true"] img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ─── Mobile · still polished but reduced animation cost ─────── */
@media (max-width: 640px) {
    main[data-uhd-shell="true"] > .uhd-page-content {
        animation-duration: 0.4s;
    }
    main[data-uhd-shell="true"] .rounded-lg.border,
    main[data-uhd-shell="true"] .rounded-xl.border,
    main[data-uhd-shell="true"] [data-slot="card"] {
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
    }
}

/* ====================================================================
   iter-224 · CINEMA MODE · Tesla-style full-screen takeover
   ────────────────────────────────────────────────────────────────────
   When `body[data-cinema-mode="true"]` is set, the entire portal chrome
   slides off-canvas with a 480ms easeOutExpo so the page content gets
   the whole viewport. Sidebar translates -100% (left), topbar collapses
   to 0 height (slides up), and the main column expands to full width.
   Triggered by ⌘\ / Ctrl+\ or the topbar pill. Exit via Esc, the same
   shortcut, or the floating "Exit Cinema" pill (rendered in Layout.jsx).

   The transitions live as CSS so they cooperate with React-Router and
   the existing first-paint fades — Framer Motion is only used for
   per-page mounts. Cinema mode never needs to remount the tree.
   =================================================================== */
body[data-cinema-mode="true"] aside[data-testid="sidebar"] {
    transform: translateX(-100%) !important;
    opacity: 0;
    pointer-events: none;
    transition:
        transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-cinema-mode="true"] main[data-uhd-shell="true"] > header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transition:
        transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
        height 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-cinema-mode="true"] main[data-uhd-shell="true"] > .uhd-page-content {
    padding-top: 4rem;       /* leave headroom for the floating Exit pill */
    transition: padding 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Default-state transitions for the same elements so exiting cinema
   feels equally smooth (slides back in). */
aside[data-testid="sidebar"] {
    transition:
        transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
main[data-uhd-shell="true"] > header {
    transition:
        transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cinema mode · pump the ambient backdrop slightly so the page content
   "owns" the screen — heavier radial glow + faint vignette around the
   edges to focus the eye on the centre stage. */
body[data-cinema-mode="true"] main[data-uhd-shell="true"] {
    background:
        radial-gradient(ellipse 65% 55% at 50% 0%, var(--uhd-shell-ambient) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, var(--uhd-shell-bg-1) 0%, var(--uhd-shell-bg-2) 88%, rgba(11,11,18,0.06) 100%);
}

/* Hide the GuardianBot / portal-mode floating triggers while in cinema
   so the screen stays clean for the demo. */
body[data-cinema-mode="true"] [data-testid="guardian-bot-launcher"],
body[data-cinema-mode="true"] .joy-floating-cmdk,
body[data-cinema-mode="true"] [data-testid="ask-joe-pill"] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease-out;
}

/* Mobile: leave the header alone (it's already minimal) — only slide
   the sidebar, since mobile users hit cinema mode primarily for
   gallery / map screens. */
@media (max-width: 640px) {
    body[data-cinema-mode="true"] main[data-uhd-shell="true"] > .uhd-page-content {
        padding-top: 3rem;
    }
}

/* ====================================================================
   iter-229 · ADMIN MISSION-CONTROL TILES → AMG / VELLOX AESTHETIC
   ────────────────────────────────────────────────────────────────────
   The Mission Control surface (`/admin`) has four hero panels:
     · Vendor Leaderboard · 24h
     · AI Agent Telemetry · 24h
     · Procurement Pipeline · Stage Heat
     · Bangladesh · Live Trade Grid
     · KYC · Inbound Queue
   Founder directive: lift them to the same AMG/Vellox dark-instrument
   look as the gauges. Carbon-fibre face, crimson LED top-edge, chrome
   inner border, electric-blue glow accents.
   Scoped under `.uhd-cockpit [data-amg-tile="true"]` so the rule never
   leaks into other surfaces.
   =================================================================== */

.uhd-cockpit [data-amg-tile="true"],
.uhd-cockpit .uhd-tile[data-amg-tile="true"] {
    position: relative;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 31, 56, 0.06), transparent 65%),
        linear-gradient(180deg, #0E1024 0%, #0A0B1E 60%, #06081A 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.32) !important;
    border-radius: 6px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 -1px 0 rgba(229, 0, 0, 0.12) inset,
        0 28px 72px -28px rgba(0, 0, 0, 0.85),
        0 14px 36px -18px rgba(0, 0, 0, 0.65) !important;
    overflow: hidden;
    color: #FAFAFA;
}

/* Carbon-fibre micro-weave overlay */
.uhd-cockpit [data-amg-tile="true"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px, transparent 3px),
        repeating-linear-gradient(-45deg,
            rgba(0, 0, 0, 0.18) 0,
            rgba(0, 0, 0, 0.18) 1px,
            transparent 1px, transparent 3px);
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}

/* Crimson LED top-edge bar (Vellox signature) */
.uhd-cockpit [data-amg-tile="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        #FF1F38 30%,
        #FF6E8A 50%,
        #FF1F38 70%,
        transparent);
    opacity: 0.9;
    box-shadow: 0 0 14px rgba(255, 31, 56, 0.6);
    pointer-events: none;
    z-index: 1;
}

/* All children sit above the carbon-fibre overlay */
.uhd-cockpit [data-amg-tile="true"] > * {
    position: relative;
    z-index: 2;
}

/* Headers: monospace uppercase crimson */
.uhd-cockpit [data-amg-tile="true"] h2,
.uhd-cockpit [data-amg-tile="true"] h3,
.uhd-cockpit [data-amg-tile="true"] [data-tile-title="true"] {
    color: #FF3D5C !important;
    font-family: ui-monospace, "JetBrains Mono", monospace !important;
    text-shadow: 0 0 8px rgba(255, 61, 92, 0.45);
    letter-spacing: 0.22em;
}

/* Body text: bright off-white (no grey wash) */
.uhd-cockpit [data-amg-tile="true"] p,
.uhd-cockpit [data-amg-tile="true"] span:not([class*="text-"]),
.uhd-cockpit [data-amg-tile="true"] div:not([class*="text-"]) {
    color: #FAFAFA;
}

/* Numeric stat displays */
.uhd-cockpit [data-amg-tile="true"] [data-amg-stat="true"],
.uhd-cockpit [data-amg-tile="true"] .uhd-stat-value {
    color: #FAFAFA !important;
    font-family: "Eurostile","DIN Alternate",ui-monospace,monospace !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Chrome inner divider lines */
.uhd-cockpit [data-amg-tile="true"] hr,
.uhd-cockpit [data-amg-tile="true"] .divide-x > * + *,
.uhd-cockpit [data-amg-tile="true"] .divide-y > * + * {
    border-color: rgba(220, 38, 38, 0.28) !important;
}

/* Buttons inside AMG tiles — crimson glow on hover */
.uhd-cockpit [data-amg-tile="true"] button:hover,
.uhd-cockpit [data-amg-tile="true"] a:hover {
    color: #FF6E8A !important;
    text-shadow: 0 0 8px rgba(255, 61, 92, 0.55);
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 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-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 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-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
    :root {
        --background: 0 0% 100%;
        --foreground: 222 47% 11%;
        --card: 0 0% 100%;
        --card-foreground: 222 47% 11%;
        --popover: 0 0% 100%;
        --popover-foreground: 222 47% 11%;
        --primary: 350 89% 50%;
        --primary-foreground: 0 0% 100%;
        --secondary: 215 20% 30%;
        --secondary-foreground: 0 0% 100%;
        --muted: 210 40% 96%;
        --muted-foreground: 215 16% 46%;
        --accent: 210 40% 96%;
        --accent-foreground: 222 47% 11%;
        --destructive: 0 73% 51%;
        --destructive-foreground: 0 0% 100%;
        --border: 214 32% 91%;
        --input: 214 32% 91%;
        --ring: 350 89% 50%;
        --radius: 0.25rem;
        /* JOY-namespaced tokens for floating popovers / menus.
           Used by LanguagePicker (and any other dropdown) to force a
           solid, opaque background regardless of how aggressively the
           ambient page tries to make its parent transparent. */
        --joy-popover-bg: #ffffff;
        /* JOY brand palette — "Cinema Lacquer" — sophisticated crimson
           system that reads black-cherry in shadow and pops on white.
           Used across all CTAs, accents, and brand surfaces. Designed
           to feel like Hermès/Bottega/Cartier — quiet luxury, not
           consumer pink. Pair with charcoal + cream for the full
           "trillion-dollar" identity. Light-mode values; dark-mode
           overrides below.
              --joy-red       primary brand (buttons, links, KPI hero)
              --joy-red-deep  hover/active (pressed states)
              --joy-red-tint  light pink wash (badges, hover surfaces)
              --joy-red-ink   text on light backgrounds */
        --joy-red: #8B1A2C;
        --joy-red-deep: #5E0F25;
        --joy-red-tint: #FCE7EB;
        --joy-red-ink: #8B1A2C;

        /* ─── iter-144 · Cockpit institutional terminal palette ─────
           These tokens are scoped to `/command-centre` and child cockpit
           components (`.cockpit-theme-scope`). Strict palette: zero
           crimson on decorative chrome — red is reserved for the
           Execute CTA + error states only.

           Atelier (light) values shipped here · Cockpit (dark) overrides
           in the `html.dark` block below. */
        --cockpit-canvas:        #F4F4F6;
        --cockpit-card-bg:       #FFFFFF;
        --cockpit-hud-bg:        rgba(255, 255, 255, 0.72);
        --cockpit-hud-shadow:    0 4px 12px rgba(0, 0, 0, 0.03);
        --cockpit-card-shadow:   0 4px 12px rgba(0, 0, 0, 0.03);
        --cockpit-border:        #E4E4E7;
        --cockpit-track-bg:      #E4E4E7;
        --cockpit-text-primary:  #111111;
        --cockpit-text-muted:    #4B5563;
        /* Terminal green translates to deep emerald in light mode for WCAG-AA contrast */
        --cockpit-status-green:  #059669;
    }
    html.dark {
        --joy-popover-bg: #18181b;
        /* Dark-mode crimson — brightened just enough to pass WCAG AA on
           pure-black backgrounds without losing the lacquered depth.
           The dusty rose ink is the pink-on-black accent (e.g. tagline
           eyebrows, tier badges). */
        --joy-red: #B82748;
        --joy-red-deep: #8B1A2C;
        --joy-red-tint: #2A0A12;
        --joy-red-ink: #E8A4B0;

        /* ─── iter-144 · Cockpit dark-mode tokens ─── */
        --cockpit-canvas:        #000000;
        --cockpit-card-bg:       #09090B;
        --cockpit-hud-bg:        rgba(9, 9, 11, 0.65);
        --cockpit-hud-shadow:    0 4px 12px rgba(0, 0, 0, 0.35);
        --cockpit-card-shadow:   none;
        --cockpit-border:        #1E1E24;
        --cockpit-track-bg:      #1E1E24;
        --cockpit-text-primary:  #FFFFFF;
        --cockpit-text-muted:    #A1A1AA;
        --cockpit-status-green:  #00FF66;
    }
.container {
  width: 100%;
}
@media (min-width: 360px) {

  .container {
    max-width: 360px;
  }
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.industrial-card {
        background-color: #ffffff;
        border: 1px solid hsl(214 32% 91%);
        border: 1px solid hsl(var(--border));
        border-radius: 4px;
        transition: transform 200ms, box-shadow 200ms;
    }
.industrial-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}
.-inset-1 {
  inset: -0.25rem;
}
.inset-0 {
  inset: 0px;
}
.inset-1\.5 {
  inset: 0.375rem;
}
.inset-3 {
  inset: 0.75rem;
}
.inset-\[-4px\] {
  inset: -4px;
}
.inset-\[4px\] {
  inset: 4px;
}
.inset-\[5px\] {
  inset: 5px;
}
.inset-\[6\%\] {
  inset: 6%;
}
.-inset-y-12 {
  top: -3rem;
  bottom: -3rem;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-0\.5 {
  bottom: -0.125rem;
}
.-bottom-12 {
  bottom: -3rem;
}
.-bottom-24 {
  bottom: -6rem;
}
.-bottom-4 {
  bottom: -1rem;
}
.-left-1 {
  left: -0.25rem;
}
.-left-12 {
  left: -3rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-10 {
  right: -2.5rem;
}
.-right-12 {
  right: -3rem;
}
.-right-16 {
  right: -4rem;
}
.-right-2 {
  right: -0.5rem;
}
.-right-20 {
  right: -5rem;
}
.-right-32 {
  right: -8rem;
}
.-right-4 {
  right: -1rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-12 {
  top: -3rem;
}
.-top-16 {
  top: -4rem;
}
.-top-2\.5 {
  top: -0.625rem;
}
.-top-20 {
  top: -5rem;
}
.-top-24 {
  top: -6rem;
}
.-top-32 {
  top: -8rem;
}
.-top-4 {
  top: -1rem;
}
.-top-40 {
  top: -10rem;
}
.-top-7 {
  top: -1.75rem;
}
.-top-px {
  top: -1px;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-0\.5 {
  bottom: 0.125rem;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-1\.5 {
  bottom: 0.375rem;
}
.bottom-1\/3 {
  bottom: 33.333333%;
}
.bottom-10 {
  bottom: 2.5rem;
}
.bottom-2 {
  bottom: 0.5rem;
}
.bottom-2\.5 {
  bottom: 0.625rem;
}
.bottom-3 {
  bottom: 0.75rem;
}
.bottom-32 {
  bottom: 8rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-5 {
  bottom: 1.25rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.bottom-7 {
  bottom: 1.75rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-1\/3 {
  left: 33.333333%;
}
.left-12 {
  left: 3rem;
}
.left-2 {
  left: 0.5rem;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-5 {
  left: 1.25rem;
}
.left-6 {
  left: 1.5rem;
}
.left-7 {
  left: 1.75rem;
}
.left-8 {
  left: 2rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-1\/2 {
  right: 50%;
}
.right-1\/3 {
  right: 33.333333%;
}
.right-1\/4 {
  right: 25%;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.right-5 {
  right: 1.25rem;
}
.right-6 {
  right: 1.5rem;
}
.right-7 {
  right: 1.75rem;
}
.right-8 {
  right: 2rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.top-6 {
  top: 1.5rem;
}
.top-9 {
  top: 2.25rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-\[88px\] {
  top: 88px;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100000\] {
  z-index: 100000;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[200\] {
  z-index: 200;
}
.z-\[2147483645\] {
  z-index: 2147483645;
}
.z-\[2\] {
  z-index: 2;
}
.z-\[3\] {
  z-index: 3;
}
.z-\[4\] {
  z-index: 4;
}
.z-\[55\] {
  z-index: 55;
}
.z-\[58\] {
  z-index: 58;
}
.z-\[5\] {
  z-index: 5;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[6\] {
  z-index: 6;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[71\] {
  z-index: 71;
}
.z-\[80\] {
  z-index: 80;
}
.z-\[81\] {
  z-index: 81;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-11 {
  grid-column: span 11 / span 11;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.col-span-9 {
  grid-column: span 9 / span 9;
}
.col-span-full {
  grid-column: 1 / -1;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.-m-px {
  margin: -1px;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-1\.5 {
  margin-left: -0.375rem;
  margin-right: -0.375rem;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-0\.5 {
  margin-left: 0.125rem;
  margin-right: 0.125rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-px {
  margin-top: 1px;
  margin-bottom: 1px;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-1\.5 {
  margin-left: -0.375rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mr-1 {
  margin-right: -0.25rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-24 {
  margin-top: -6rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.-mt-\[88px\] {
  margin-top: -88px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-3\.5 {
  margin-bottom: 0.875rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.mb-px {
  margin-bottom: 1px;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-11 {
  margin-top: 2.75rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-\[1px\] {
  margin-top: 1px;
}
.mt-\[2px\] {
  margin-top: 2px;
}
.mt-\[60px\] {
  margin-top: 60px;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[1\.6\] {
  aspect-ratio: 1.6;
}
.aspect-\[1200\/630\] {
  aspect-ratio: 1200/630;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[21\/9\] {
  aspect-ratio: 21/9;
}
.aspect-\[3\/2\] {
  aspect-ratio: 3/2;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-\[4\/5\] {
  aspect-ratio: 4/5;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-0 {
  height: 0px;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-1\/3 {
  height: 33.333333%;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-2\/5 {
  height: 40%;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1\.5px\] {
  height: 1.5px;
}
.h-\[10px\] {
  height: 10px;
}
.h-\[112\%\] {
  height: 112%;
}
.h-\[180\%\] {
  height: 180%;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[220px\] {
  height: 220px;
}
.h-\[280px\] {
  height: 280px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[340px\] {
  height: 340px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[40px\] {
  height: 40px;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[460px\] {
  height: 460px;
}
.h-\[480px\] {
  height: 480px;
}
.h-\[56px\] {
  height: 56px;
}
.h-\[640px\] {
  height: 640px;
}
.h-\[64px\] {
  height: 64px;
}
.h-\[720px\] {
  height: 720px;
}
.h-\[760px\] {
  height: 760px;
}
.h-\[800px\] {
  height: 800px;
}
.h-\[80px\] {
  height: 80px;
}
.h-\[88vh\] {
  height: 88vh;
}
.h-\[900px\] {
  height: 900px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -webkit-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[100px\] {
  max-height: 100px;
}
.max-h-\[200px\] {
  max-height: 200px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[420px\] {
  max-height: 420px;
}
.max-h-\[440px\] {
  max-height: 440px;
}
.max-h-\[460px\] {
  max-height: 460px;
}
.max-h-\[55vh\] {
  max-height: 55vh;
}
.max-h-\[560px\] {
  max-height: 560px;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[64vh\] {
  max-height: 64vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[92vh\] {
  max-height: 92vh;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-full {
  max-height: 100%;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[240px\] {
  min-height: 240px;
}
.min-h-\[260px\] {
  min-height: 260px;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[34px\] {
  min-height: 34px;
}
.min-h-\[360px\] {
  min-height: 360px;
}
.min-h-\[420px\] {
  min-height: 420px;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.min-h-\[640px\] {
  min-height: 640px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0\.5 {
  width: 0.125rem;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[100vw\] {
  width: 100vw;
}
.w-\[112\%\] {
  width: 112%;
}
.w-\[140\%\] {
  width: 140%;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[230px\] {
  width: 230px;
}
.w-\[260px\] {
  width: 260px;
}
.w-\[284px\] {
  width: 284px;
}
.w-\[2px\] {
  width: 2px;
}
.w-\[320px\] {
  width: 320px;
}
.w-\[3px\] {
  width: 3px;
}
.w-\[40px\] {
  width: 40px;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[42px\] {
  width: 42px;
}
.w-\[480px\] {
  width: 480px;
}
.w-\[520px\] {
  width: 520px;
}
.w-\[60\%\] {
  width: 60%;
}
.w-\[600px\] {
  width: 600px;
}
.w-\[640px\] {
  width: 640px;
}
.w-\[64px\] {
  width: 64px;
}
.w-\[70\%\] {
  width: 70%;
}
.w-\[700px\] {
  width: 700px;
}
.w-\[720px\] {
  width: 720px;
}
.w-\[80px\] {
  width: 80px;
}
.w-\[88\%\] {
  width: 88%;
}
.w-\[88px\] {
  width: 88px;
}
.w-\[calc\(50\%-2px\)\] {
  width: calc(50% - 2px);
}
.w-\[min\(1180px\2c 96vw\)\] {
  width: min(1180px, 96vw);
}
.w-\[min\(560px\2c calc\(100vw-32px\)\)\] {
  width: min(560px, calc(100vw - 32px));
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -webkit-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -webkit-max-content;
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[100px\] {
  min-width: 100px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[150px\] {
  min-width: 150px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[200px\] {
  min-width: 200px;
}
.min-w-\[300px\] {
  min-width: 300px;
}
.min-w-\[36px\] {
  min-width: 36px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.min-w-max {
  min-width: -webkit-max-content;
  min-width: max-content;
}
.max-w-0 {
  max-width: 0px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[100vw\] {
  max-width: 100vw;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[1480px\] {
  max-width: 1480px;
}
.max-w-\[180px\] {
  max-width: 180px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-\[300px\] {
  max-width: 300px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[34ch\] {
  max-width: 34ch;
}
.max-w-\[36ch\] {
  max-width: 36ch;
}
.max-w-\[440px\] {
  max-width: 440px;
}
.max-w-\[460px\] {
  max-width: 460px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[52ch\] {
  max-width: 52ch;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[58ch\] {
  max-width: 58ch;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.max-w-\[700px\] {
  max-width: 700px;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[760px\] {
  max-width: 760px;
}
.max-w-\[78\%\] {
  max-width: 78%;
}
.max-w-\[780px\] {
  max-width: 780px;
}
.max-w-\[800px\] {
  max-width: 800px;
}
.max-w-\[82\%\] {
  max-width: 82%;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[84vw\] {
  max-width: 84vw;
}
.max-w-\[85\%\] {
  max-width: 85%;
}
.max-w-\[860px\] {
  max-width: 860px;
}
.max-w-\[88\%\] {
  max-width: 88%;
}
.max-w-\[920px\] {
  max-width: 920px;
}
.max-w-\[92vw\] {
  max-width: 92vw;
}
.max-w-\[calc\(100\%-1rem\)\] {
  max-width: calc(100% - 1rem);
}
.max-w-\[calc\(100vw-1\.5rem\)\] {
  max-width: calc(100vw - 1.5rem);
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: -webkit-max-content;
  max-width: max-content;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-screen-2xl {
  max-width: 1536px;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1;
}
.flex-\[2\] {
  flex: 2 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.origin-left {
  transform-origin: left;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-3 {
  --tw-translate-y: 0.75rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-6 {
  --tw-translate-y: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[-45deg\] {
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[18deg\] {
  --tw-rotate: 18deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.01\] {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-x-0 {
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.animate-\[fadein_\.25s_ease-out\] {
  animation: fadein .25s ease-out;
}
.animate-\[joy-route-fadein_120ms_ease-out\] {
  animation: joy-route-fadein 120ms ease-out;
}
.animate-\[oniFade_400ms_ease-out_forwards\] {
  animation: oniFade 400ms ease-out forwards;
}
.animate-\[paywallFade_180ms_ease-out_forwards\] {
  animation: paywallFade 180ms ease-out forwards;
}
.animate-\[ticker_38s_linear_infinite\] {
  animation: ticker 38s linear infinite;
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
@keyframes ping {

  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.scroll-mt-20 {
  scroll-margin-top: 5rem;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.scroll-mt-28 {
  scroll-margin-top: 7rem;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.list-none {
  list-style-type: none;
}
.auto-rows-\[minmax\(220px\2c auto\)\] {
  grid-auto-rows: minmax(220px,auto);
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, 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-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-\[1\.4fr_1\.6fr_0\.8fr_0\.8fr_0\.8fr_1\.8fr\] {
  grid-template-columns: 1.4fr 1.6fr 0.8fr 0.8fr 0.8fr 1.8fr;
}
.grid-cols-\[140px_1fr_auto\] {
  grid-template-columns: 140px 1fr auto;
}
.grid-cols-\[180px_1fr\] {
  grid-template-columns: 180px 1fr;
}
.grid-cols-\[80px_1fr_88px_88px\] {
  grid-template-columns: 80px 1fr 88px 88px;
}
.grid-cols-\[minmax\(80px\2c 1fr\)_auto_minmax\(120px\2c 1\.4fr\)\] {
  grid-template-columns: minmax(80px,1fr) auto minmax(120px,1.4fr);
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-14 {
  gap: 3.5rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[2\.5px\] {
  gap: 2.5px;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-px {
  gap: 1px;
}
.gap-x-12 {
  column-gap: 3rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-2\.5 {
  row-gap: 0.625rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-7 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-px > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1px * var(--tw-space-y-reverse));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.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));
}
.divide-rose-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(255 228 230 / 1);
  border-color: rgb(255 228 230 / var(--tw-divide-opacity, 1));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / 1);
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.divide-zinc-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(244 244 245 / 1);
  border-color: rgb(244 244 245 / var(--tw-divide-opacity, 1));
}
.divide-zinc-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-divide-opacity, 1));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre {
  white-space: pre;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[16px\] {
  border-radius: 16px;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[1px\] {
  border-radius: 1px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.25rem;
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(0.25rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(0.25rem - 4px);
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rounded-r-sm {
  border-top-right-radius: calc(0.25rem - 4px);
  border-top-right-radius: calc(var(--radius) - 4px);
  border-bottom-right-radius: calc(0.25rem - 4px);
  border-bottom-right-radius: calc(var(--radius) - 4px);
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-t-md {
  border-top-left-radius: calc(0.25rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(0.25rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
}
.rounded-bl-md {
  border-bottom-left-radius: calc(0.25rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-bl-sm {
  border-bottom-left-radius: calc(0.25rem - 4px);
  border-bottom-left-radius: calc(var(--radius) - 4px);
}
.rounded-br-md {
  border-bottom-right-radius: calc(0.25rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.rounded-tl-sm {
  border-top-left-radius: calc(0.25rem - 4px);
  border-top-left-radius: calc(var(--radius) - 4px);
}
.rounded-tr-sm {
  border-top-right-radius: calc(0.25rem - 4px);
  border-top-right-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-\[3px\] {
  border-left-width: 3px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-\[\#0891B2\] {
  --tw-border-opacity: 1;
  border-color: rgb(8 145 178 / 1);
  border-color: rgb(8 145 178 / var(--tw-border-opacity, 1));
}
.border-\[\#8A1C2E\]\/15 {
  border-color: rgb(138 28 46 / 0.15);
}
.border-\[\#8A1C2E\]\/30 {
  border-color: rgb(138 28 46 / 0.3);
}
.border-\[\#8A1C2E\]\/35 {
  border-color: rgb(138 28 46 / 0.35);
}
.border-\[\#8A1C2E\]\/40 {
  border-color: rgb(138 28 46 / 0.4);
}
.border-\[\#8B1A2C\] {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.border-\[\#8B1A2C\]\/15 {
  border-color: rgb(139 26 44 / 0.15);
}
.border-\[\#8B1A2C\]\/20 {
  border-color: rgb(139 26 44 / 0.2);
}
.border-\[\#8B1A2C\]\/25 {
  border-color: rgb(139 26 44 / 0.25);
}
.border-\[\#8B1A2C\]\/30 {
  border-color: rgb(139 26 44 / 0.3);
}
.border-\[\#8B1A2C\]\/35 {
  border-color: rgb(139 26 44 / 0.35);
}
.border-\[\#8B1A2C\]\/40 {
  border-color: rgb(139 26 44 / 0.4);
}
.border-\[\#8B1A2C\]\/45 {
  border-color: rgb(139 26 44 / 0.45);
}
.border-\[\#8B1A2C\]\/50 {
  border-color: rgb(139 26 44 / 0.5);
}
.border-\[\#8B1A2C\]\/55 {
  border-color: rgb(139 26 44 / 0.55);
}
.border-\[\#8B1A2C\]\/60 {
  border-color: rgb(139 26 44 / 0.6);
}
.border-\[\#A91D3A\]\/35 {
  border-color: rgb(169 29 58 / 0.35);
}
.border-\[\#E2E2E2\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 226 226 / 1);
  border-color: rgb(226 226 226 / var(--tw-border-opacity, 1));
}
.border-\[\#E4E4E7\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-\[\#E8A4B0\]\/30 {
  border-color: rgb(232 164 176 / 0.3);
}
.border-\[\#E8A4B0\]\/35 {
  border-color: rgb(232 164 176 / 0.35);
}
.border-\[\#E8A4B0\]\/50 {
  border-color: rgb(232 164 176 / 0.5);
}
.border-\[\#E8A4B0\]\/55 {
  border-color: rgb(232 164 176 / 0.55);
}
.border-\[\#E8A4B0\]\/65 {
  border-color: rgb(232 164 176 / 0.65);
}
.border-\[\#FBCFE8\] {
  --tw-border-opacity: 1;
  border-color: rgb(251 207 232 / 1);
  border-color: rgb(251 207 232 / var(--tw-border-opacity, 1));
}
.border-\[\#FBCFE8\]\/40 {
  border-color: rgb(251 207 232 / 0.4);
}
.border-\[\#FFD4DC\]\/45 {
  border-color: rgb(255 212 220 / 0.45);
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / 1);
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / 1);
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / 1);
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-amber-500\/60 {
  border-color: rgb(245 158 11 / 0.6);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / 1);
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / 1);
  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
}
.border-blue-500\/30 {
  border-color: rgb(59 130 246 / 0.3);
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / 1);
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-destructive {
  border-color: hsl(0 73% 51%);
  border-color: hsl(var(--destructive));
}
.border-destructive\/50 {
  border-color: hsl(0 73% 51% / 0.5);
  border-color: hsl(var(--destructive) / 0.5);
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / 1);
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / 1);
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-emerald-400\/40 {
  border-color: rgb(52 211 153 / 0.4);
}
.border-emerald-400\/80 {
  border-color: rgb(52 211 153 / 0.8);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-600 {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / 1);
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.border-emerald-700\/50 {
  border-color: rgb(4 120 87 / 0.5);
}
.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / 1);
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-indigo-300 {
  --tw-border-opacity: 1;
  border-color: rgb(165 180 252 / 1);
  border-color: rgb(165 180 252 / var(--tw-border-opacity, 1));
}
.border-input {
  border-color: hsl(214 32% 91%);
  border-color: hsl(var(--input));
}
.border-primary {
  border-color: hsl(350 89% 50%);
  border-color: hsl(var(--primary));
}
.border-primary\/50 {
  border-color: hsl(350 89% 50% / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / 1);
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / 1);
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / 1);
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-rose-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / 1);
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / 1);
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / 1);
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.border-rose-700\/40 {
  border-color: rgb(190 18 60 / 0.4);
}
.border-sky-300 {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / 1);
  border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / 1);
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / 1);
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / 1);
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-50 {
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / 1);
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
}
.border-slate-700 {
  --tw-border-opacity: 1;
  border-color: rgb(51 65 85 / 1);
  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.border-slate-900 {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / 1);
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-violet-300 {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / 1);
  border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-white\/5 {
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/\[0\.03\] {
  border-color: rgb(255 255 255 / 0.03);
}
.border-white\/\[0\.05\] {
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/\[0\.06\] {
  border-color: rgb(255 255 255 / 0.06);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.border-white\/\[0\.10\] {
  border-color: rgb(255 255 255 / 0.10);
}
.border-zinc-100 {
  --tw-border-opacity: 1;
  border-color: rgb(244 244 245 / 1);
  border-color: rgb(244 244 245 / var(--tw-border-opacity, 1));
}
.border-zinc-200 {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.border-zinc-200\/70 {
  border-color: rgb(228 228 231 / 0.7);
}
.border-zinc-200\/80 {
  border-color: rgb(228 228 231 / 0.8);
}
.border-zinc-300 {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.border-zinc-50 {
  --tw-border-opacity: 1;
  border-color: rgb(250 250 250 / 1);
  border-color: rgb(250 250 250 / var(--tw-border-opacity, 1));
}
.border-zinc-600 {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 91 / 1);
  border-color: rgb(82 82 91 / var(--tw-border-opacity, 1));
}
.border-zinc-800 {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / 1);
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.border-zinc-900 {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.border-zinc-950 {
  --tw-border-opacity: 1;
  border-color: rgb(9 9 11 / 1);
  border-color: rgb(9 9 11 / var(--tw-border-opacity, 1));
}
.\!border-l-\[\#8B1A2C\] {
  --tw-border-opacity: 1 !important;
  border-left-color: rgb(139 26 44 / 1) !important;
  border-left-color: rgb(139 26 44 / var(--tw-border-opacity, 1)) !important;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-\[\#8B1A2C\] {
  --tw-border-opacity: 1;
  border-top-color: rgb(139 26 44 / 1);
  border-top-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / 1);
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-\[\#0A0608\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 6 8 / 1);
  background-color: rgb(10 6 8 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0A0807\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 8 7 / 1);
  background-color: rgb(10 8 7 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0A0A0A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / 1);
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-\[\#16A34A\] {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / 1);
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-\[\#1F1F23\] {
  --tw-bg-opacity: 1;
  background-color: rgb(31 31 35 / 1);
  background-color: rgb(31 31 35 / var(--tw-bg-opacity, 1));
}
.bg-\[\#22D3EE\] {
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / 1);
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}
.bg-\[\#3b0a16\] {
  --tw-bg-opacity: 1;
  background-color: rgb(59 10 22 / 1);
  background-color: rgb(59 10 22 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5E0F25\] {
  --tw-bg-opacity: 1;
  background-color: rgb(94 15 37 / 1);
  background-color: rgb(94 15 37 / var(--tw-bg-opacity, 1));
}
.bg-\[\#7C3AED\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / 1);
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-\[\#8A1C2E\] {
  --tw-bg-opacity: 1;
  background-color: rgb(138 28 46 / 1);
  background-color: rgb(138 28 46 / var(--tw-bg-opacity, 1));
}
.bg-\[\#8A1C2E\]\/10 {
  background-color: rgb(138 28 46 / 0.1);
}
.bg-\[\#8A1C2E\]\/\[0\.06\] {
  background-color: rgb(138 28 46 / 0.06);
}
.bg-\[\#8B1A2C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.bg-\[\#8B1A2C\]\/10 {
  background-color: rgb(139 26 44 / 0.1);
}
.bg-\[\#8B1A2C\]\/15 {
  background-color: rgb(139 26 44 / 0.15);
}
.bg-\[\#8B1A2C\]\/25 {
  background-color: rgb(139 26 44 / 0.25);
}
.bg-\[\#8B1A2C\]\/30 {
  background-color: rgb(139 26 44 / 0.3);
}
.bg-\[\#8B1A2C\]\/40 {
  background-color: rgb(139 26 44 / 0.4);
}
.bg-\[\#8B1A2C\]\/5 {
  background-color: rgb(139 26 44 / 0.05);
}
.bg-\[\#8B1A2C\]\/60 {
  background-color: rgb(139 26 44 / 0.6);
}
.bg-\[\#8B1A2C\]\/70 {
  background-color: rgb(139 26 44 / 0.7);
}
.bg-\[\#8B1A2C\]\/80 {
  background-color: rgb(139 26 44 / 0.8);
}
.bg-\[\#8B1A2C\]\/85 {
  background-color: rgb(139 26 44 / 0.85);
}
.bg-\[\#8B1A2C\]\/\[0\.03\] {
  background-color: rgb(139 26 44 / 0.03);
}
.bg-\[\#8B1A2C\]\/\[0\.04\] {
  background-color: rgb(139 26 44 / 0.04);
}
.bg-\[\#8B1A2C\]\/\[0\.05\] {
  background-color: rgb(139 26 44 / 0.05);
}
.bg-\[\#8B1A2C\]\/\[0\.06\] {
  background-color: rgb(139 26 44 / 0.06);
}
.bg-\[\#8B1A2C\]\/\[0\.08\] {
  background-color: rgb(139 26 44 / 0.08);
}
.bg-\[\#8B1A2C\]\/\[0\.18\] {
  background-color: rgb(139 26 44 / 0.18);
}
.bg-\[\#A91D3A\]\/\[0\.06\] {
  background-color: rgb(169 29 58 / 0.06);
}
.bg-\[\#B23548\] {
  --tw-bg-opacity: 1;
  background-color: rgb(178 53 72 / 1);
  background-color: rgb(178 53 72 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8A4B0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(232 164 176 / 1);
  background-color: rgb(232 164 176 / var(--tw-bg-opacity, 1));
}
.bg-\[\#E8A4B0\]\/30 {
  background-color: rgb(232 164 176 / 0.3);
}
.bg-\[\#FAFAFA\] {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FF4D6B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 77 107 / 1);
  background-color: rgb(255 77 107 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFF7F8\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 248 / 1);
  background-color: rgb(255 247 248 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(10\2c 10\2c 12\2c 0\.88\)\] {
  background-color: rgba(10,10,12,0.88);
}
.bg-\[rgba\(138\2c 28\2c 46\2c 0\.02\)\] {
  background-color: rgba(138,28,46,0.02);
}
.bg-\[rgba\(138\2c 28\2c 46\2c 0\.03\)\] {
  background-color: rgba(138,28,46,0.03);
}
.bg-\[rgba\(138\2c 28\2c 46\2c 0\.04\)\] {
  background-color: rgba(138,28,46,0.04);
}
.bg-\[rgba\(138\2c 28\2c 46\2c 0\.06\)\] {
  background-color: rgba(138,28,46,0.06);
}
.bg-accent {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / 1);
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/70 {
  background-color: rgb(251 191 36 / 0.7);
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/\[0\.08\] {
  background-color: rgb(245 158 11 / 0.08);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-background {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/45 {
  background-color: rgb(0 0 0 / 0.45);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/95 {
  background-color: rgb(0 0 0 / 0.95);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / 1);
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / 1);
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / 1);
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-500\/10 {
  background-color: rgb(59 130 246 / 0.1);
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.bg-border {
  background-color: hsl(214 32% 91%);
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--card));
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  background-color: hsl(0 73% 51%);
  background-color: hsl(var(--destructive));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / 1);
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / 1);
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / 1);
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/50 {
  background-color: rgb(16 185 129 / 0.5);
}
.bg-emerald-500\/80 {
  background-color: rgb(16 185 129 / 0.8);
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / 1);
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-950\/40 {
  background-color: rgb(2 44 34 / 0.4);
}
.bg-foreground {
  background-color: hsl(222 47% 11%);
  background-color: hsl(var(--foreground));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / 1);
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / 1);
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-joy-cream {
  --tw-bg-opacity: 1;
  background-color: rgb(245 239 229 / 1);
  background-color: rgb(245 239 229 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 212 220 / 1);
  background-color: rgb(255 212 220 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(232 164 176 / 1);
  background-color: rgb(232 164 176 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(200 38 76 / 1);
  background-color: rgb(200 38 76 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 34 56 / 1);
  background-color: rgb(168 34 56 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(94 15 37 / 1);
  background-color: rgb(94 15 37 / var(--tw-bg-opacity, 1));
}
.bg-joy-crimson-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(58 10 20 / 1);
  background-color: rgb(58 10 20 / var(--tw-bg-opacity, 1));
}
.bg-joy-gold-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(232 212 154 / 1);
  background-color: rgb(232 212 154 / var(--tw-bg-opacity, 1));
}
.bg-joy-gold-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(216 185 117 / 1);
  background-color: rgb(216 185 117 / var(--tw-bg-opacity, 1));
}
.bg-joy-gold-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(197 163 87 / 1);
  background-color: rgb(197 163 87 / var(--tw-bg-opacity, 1));
}
.bg-joy-obsidian {
  --tw-bg-opacity: 1;
  background-color: rgb(10 10 10 / 1);
  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
}
.bg-joy-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(247 245 240 / 1);
  background-color: rgb(247 245 240 / var(--tw-bg-opacity, 1));
}
.bg-muted {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--muted));
}
.bg-muted\/50 {
  background-color: hsl(210 40% 96% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.bg-popover {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(350 89% 50%);
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(350 89% 50% / 0.1);
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: hsl(350 89% 50% / 0.2);
  background-color: hsl(var(--primary) / 0.2);
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / 1);
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / 1);
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / 1);
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / 1);
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-red-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / 1);
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / 1);
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-50\/30 {
  background-color: rgb(255 241 242 / 0.3);
}
.bg-rose-500\/80 {
  background-color: rgb(244 63 94 / 0.8);
}
.bg-rose-950\/30 {
  background-color: rgb(76 5 25 / 0.3);
}
.bg-secondary {
  background-color: hsl(215 20% 30%);
  background-color: hsl(var(--secondary));
}
.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / 1);
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / 1);
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / 1);
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / 1);
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / 1);
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 1);
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/50 {
  background-color: rgb(248 250 252 / 0.5);
}
.bg-slate-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(100 116 139 / 1);
  background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1));
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 1);
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / 1);
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / 1);
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-slate-950\/30 {
  background-color: rgb(2 6 23 / 0.3);
}
.bg-slate-950\/60 {
  background-color: rgb(2 6 23 / 0.6);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / 1);
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-white\/\[0\.01\] {
  background-color: rgb(255 255 255 / 0.01);
}
.bg-white\/\[0\.025\] {
  background-color: rgb(255 255 255 / 0.025);
}
.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-white\/\[0\.05\] {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}
.bg-white\/\[0\.08\] {
  background-color: rgb(255 255 255 / 0.08);
}
.bg-white\/\[0\.10\] {
  background-color: rgb(255 255 255 / 0.10);
}
.bg-zinc-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.bg-zinc-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / 1);
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.bg-zinc-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / 1);
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.bg-zinc-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / 1);
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.bg-zinc-50\/40 {
  background-color: rgb(250 250 250 / 0.4);
}
.bg-zinc-50\/50 {
  background-color: rgb(250 250 250 / 0.5);
}
.bg-zinc-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(113 113 122 / 1);
  background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
}
.bg-zinc-500\/15 {
  background-color: rgb(113 113 122 / 0.15);
}
.bg-zinc-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 91 / 1);
  background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1));
}
.bg-zinc-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / 1);
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.bg-zinc-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.bg-zinc-900\/40 {
  background-color: rgb(24 24 27 / 0.4);
}
.bg-zinc-900\/60 {
  background-color: rgb(24 24 27 / 0.6);
}
.bg-zinc-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / 1);
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.bg-zinc-950\/40 {
  background-color: rgb(9 9 11 / 0.4);
}
.bg-zinc-950\/60 {
  background-color: rgb(9 9 11 / 0.6);
}
.bg-zinc-950\/85 {
  background-color: rgb(9 9 11 / 0.85);
}
.bg-zinc-950\/90 {
  background-color: rgb(9 9 11 / 0.9);
}
.bg-zinc-950\/95 {
  background-color: rgb(9 9 11 / 0.95);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#050403\]\/55 {
  --tw-gradient-from: rgb(5 4 3 / 0.55) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 4 3 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#050403\]\/95 {
  --tw-gradient-from: rgb(5 4 3 / 0.95) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 4 3 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#070708\] {
  --tw-gradient-from: #070708 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(7 7 8 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#0A0807\]\/35 {
  --tw-gradient-from: rgb(10 8 7 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 8 7 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#3b0a16\] {
  --tw-gradient-from: #3b0a16 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 10 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#3b0a16\]\/40 {
  --tw-gradient-from: rgb(59 10 22 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 10 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#8B1A2C\] {
  --tw-gradient-from: #8B1A2C var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 26 44 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#8B1A2C\]\/15 {
  --tw-gradient-from: rgb(139 26 44 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(139 26 44 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#A11F36\] {
  --tw-gradient-from: #A11F36 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(161 31 54 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-amber-50 {
  --tw-gradient-from: #fffbeb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 251 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black {
  --tw-gradient-from: #000 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/40 {
  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/65 {
  --tw-gradient-from: rgb(0 0 0 / 0.65) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/85 {
  --tw-gradient-from: rgb(0 0 0 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-50 {
  --tw-gradient-from: #faf5ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 245 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-purple-500 {
  --tw-gradient-from: #a855f7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-sky-500 {
  --tw-gradient-from: #0ea5e9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(14 165 233 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-500 {
  --tw-gradient-from: #64748b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-900 {
  --tw-gradient-from: #0f172a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-950\/80 {
  --tw-gradient-from: rgb(2 6 23 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-slate-950\/85 {
  --tw-gradient-from: rgb(2 6 23 / 0.85) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-200 {
  --tw-gradient-from: #e4e4e7 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(228 228 231 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-50 {
  --tw-gradient-from: #fafafa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(250 250 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-900 {
  --tw-gradient-from: #18181b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-zinc-950 {
  --tw-gradient-from: #09090b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#050403\]\/35 {
  --tw-gradient-to: rgb(5 4 3 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(5 4 3 / 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#070708\]\/55 {
  --tw-gradient-to: rgb(7 7 8 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(7 7 8 / 0.55) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#0A0807\] {
  --tw-gradient-to: rgb(10 8 7 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #0A0807 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#3b0a16\] {
  --tw-gradient-to: rgb(59 10 22 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #3b0a16 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#5E0F25\] {
  --tw-gradient-to: rgb(94 15 37 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #5E0F25 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-\[\#DC2626\] {
  --tw-gradient-to: rgb(220 38 38 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #DC2626 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/0 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/55 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.55) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/85 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-slate-950\/30 {
  --tw-gradient-to: rgb(2 6 23 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/20 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-white\/\[0\.02\] {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.02) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-zinc-800 {
  --tw-gradient-to: rgb(39 39 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #27272a var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-zinc-900 {
  --tw-gradient-to: rgb(24 24 27 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #18181b var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#050403\]\/40 {
  --tw-gradient-to: rgb(5 4 3 / 0.4) var(--tw-gradient-to-position);
}
.to-\[\#050403\]\/55 {
  --tw-gradient-to: rgb(5 4 3 / 0.55) var(--tw-gradient-to-position);
}
.to-\[\#0A0807\] {
  --tw-gradient-to: #0A0807 var(--tw-gradient-to-position);
}
.to-\[\#0A0807\]\/55 {
  --tw-gradient-to: rgb(10 8 7 / 0.55) var(--tw-gradient-to-position);
}
.to-\[\#1a0a10\] {
  --tw-gradient-to: #1a0a10 var(--tw-gradient-to-position);
}
.to-\[\#3F0B1B\] {
  --tw-gradient-to: #3F0B1B var(--tw-gradient-to-position);
}
.to-\[\#5E0F25\] {
  --tw-gradient-to: #5E0F25 var(--tw-gradient-to-position);
}
.to-\[\#8B1A2C\] {
  --tw-gradient-to: #8B1A2C var(--tw-gradient-to-position);
}
.to-amber-500 {
  --tw-gradient-to: #f59e0b var(--tw-gradient-to-position);
}
.to-black\/20 {
  --tw-gradient-to: rgb(0 0 0 / 0.2) var(--tw-gradient-to-position);
}
.to-black\/95 {
  --tw-gradient-to: rgb(0 0 0 / 0.95) var(--tw-gradient-to-position);
}
.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-indigo-50 {
  --tw-gradient-to: #eef2ff var(--tw-gradient-to-position);
}
.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}
.to-rose-50 {
  --tw-gradient-to: #fff1f2 var(--tw-gradient-to-position);
}
.to-slate-700 {
  --tw-gradient-to: #334155 var(--tw-gradient-to-position);
}
.to-teal-600 {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
  --tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.to-zinc-100 {
  --tw-gradient-to: #f4f4f5 var(--tw-gradient-to-position);
}
.to-zinc-50 {
  --tw-gradient-to: #fafafa var(--tw-gradient-to-position);
}
.to-zinc-700 {
  --tw-gradient-to: #3f3f46 var(--tw-gradient-to-position);
}
.to-zinc-950 {
  --tw-gradient-to: #09090b var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.bg-center {
  background-position: center;
}
.fill-amber-500 {
  fill: #f59e0b;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: hsl(350 89% 50%);
  fill: hsl(var(--primary));
}
.object-contain {
  object-fit: contain;
}
.object-cover {
  object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1px\] {
  padding: 1px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-9 {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-28 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}
.py-\[1px\] {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}
.py-\[72px\] {
  padding-top: 72px;
  padding-bottom: 72px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-1\.5 {
  padding-left: 0.375rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-12 {
  padding-left: 3rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-7 {
  padding-left: 1.75rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-12 {
  padding-right: 3rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-3\.5 {
  padding-right: 0.875rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-9 {
  padding-top: 2.25rem;
}
.pt-\[10vh\] {
  padding-top: 10vh;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-baseline {
  vertical-align: baseline;
}
.align-middle {
  vertical-align: middle;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14\.5px\] {
  font-size: 14.5px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15\.5px\] {
  font-size: 15.5px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[28px\] {
  font-size: 28px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[34px\] {
  font-size: 34px;
}
.text-\[40px\] {
  font-size: 40px;
}
.text-\[42px\] {
  font-size: 42px;
}
.text-\[44px\] {
  font-size: 44px;
}
.text-\[52px\] {
  font-size: 52px;
}
.text-\[56px\] {
  font-size: 56px;
}
.text-\[6\.5px\] {
  font-size: 6.5px;
}
.text-\[60px\] {
  font-size: 60px;
}
.text-\[64px\] {
  font-size: 64px;
}
.text-\[7\.5px\] {
  font-size: 7.5px;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8\.5px\] {
  font-size: 8.5px;
}
.text-\[80px\] {
  font-size: 80px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9\.5px\] {
  font-size: 9.5px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[clamp\(38px\2c 5\.2vw\2c 72px\)\] {
  font-size: clamp(38px, 5.2vw, 72px);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-feature-settings: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-\[0\.92\] {
  line-height: 0.92;
}
.leading-\[0\.95\] {
  line-height: 0.95;
}
.leading-\[0\.98\] {
  line-height: 0.98;
}
.leading-\[1\.02\] {
  line-height: 1.02;
}
.leading-\[1\.04\] {
  line-height: 1.04;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.06\] {
  line-height: 1.06;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.leading-\[1\.12\] {
  line-height: 1.12;
}
.leading-\[1\.15\] {
  line-height: 1.15;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.25\] {
  line-height: 1.25;
}
.leading-\[1\.2\] {
  line-height: 1.2;
}
.leading-\[1\.3\] {
  line-height: 1.3;
}
.leading-\[1\.55\] {
  line-height: 1.55;
}
.leading-\[1\.5\] {
  line-height: 1.5;
}
.leading-\[1\.62\] {
  line-height: 1.62;
}
.leading-\[1\.65\] {
  line-height: 1.65;
}
.leading-\[1\.6\] {
  line-height: 1.6;
}
.leading-\[1\.75\] {
  line-height: 1.75;
}
.leading-\[1\.7\] {
  line-height: 1.7;
}
.leading-\[1\.9\] {
  line-height: 1.9;
}
.leading-\[1\] {
  line-height: 1;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[-0\.012em\] {
  letter-spacing: -0.012em;
}
.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.tracking-\[-0\.018em\] {
  letter-spacing: -0.018em;
}
.tracking-\[-0\.01em\] {
  letter-spacing: -0.01em;
}
.tracking-\[-0\.022em\] {
  letter-spacing: -0.022em;
}
.tracking-\[-0\.024em\] {
  letter-spacing: -0.024em;
}
.tracking-\[-0\.025em\] {
  letter-spacing: -0.025em;
}
.tracking-\[-0\.028em\] {
  letter-spacing: -0.028em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[-0\.035em\] {
  letter-spacing: -0.035em;
}
.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}
.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
.tracking-\[0\.04em\] {
  letter-spacing: 0.04em;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.10em\] {
  letter-spacing: 0.10em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.20em\] {
  letter-spacing: 0.20em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.26em\] {
  letter-spacing: 0.26em;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.30em\] {
  letter-spacing: 0.30em;
}
.tracking-\[0\.32em\] {
  letter-spacing: 0.32em;
}
.tracking-\[0\.34em\] {
  letter-spacing: 0.34em;
}
.tracking-\[0\.36em\] {
  letter-spacing: 0.36em;
}
.tracking-\[0\.42em\] {
  letter-spacing: 0.42em;
}
.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}
.tracking-\[0\.5em\] {
  letter-spacing: 0.5em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-tighter {
  letter-spacing: -0.05em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#050403\] {
  --tw-text-opacity: 1;
  color: rgb(5 4 3 / 1);
  color: rgb(5 4 3 / var(--tw-text-opacity, 1));
}
.text-\[\#0891B2\] {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / 1);
  color: rgb(8 145 178 / var(--tw-text-opacity, 1));
}
.text-\[\#09090B\] {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / 1);
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.text-\[\#0A0A0C\] {
  --tw-text-opacity: 1;
  color: rgb(10 10 12 / 1);
  color: rgb(10 10 12 / var(--tw-text-opacity, 1));
}
.text-\[\#15803D\] {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / 1);
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-\[\#1F1F23\] {
  --tw-text-opacity: 1;
  color: rgb(31 31 35 / 1);
  color: rgb(31 31 35 / var(--tw-text-opacity, 1));
}
.text-\[\#475569\] {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-\[\#5E0F25\] {
  --tw-text-opacity: 1;
  color: rgb(94 15 37 / 1);
  color: rgb(94 15 37 / var(--tw-text-opacity, 1));
}
.text-\[\#6E1424\] {
  --tw-text-opacity: 1;
  color: rgb(110 20 36 / 1);
  color: rgb(110 20 36 / var(--tw-text-opacity, 1));
}
.text-\[\#8A1C2E\] {
  --tw-text-opacity: 1;
  color: rgb(138 28 46 / 1);
  color: rgb(138 28 46 / var(--tw-text-opacity, 1));
}
.text-\[\#8B1A2C\] {
  --tw-text-opacity: 1;
  color: rgb(139 26 44 / 1);
  color: rgb(139 26 44 / var(--tw-text-opacity, 1));
}
.text-\[\#8B1A2C\]\/80 {
  color: rgb(139 26 44 / 0.8);
}
.text-\[\#8B5E00\] {
  --tw-text-opacity: 1;
  color: rgb(139 94 0 / 1);
  color: rgb(139 94 0 / var(--tw-text-opacity, 1));
}
.text-\[\#991B1B\] {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-\[\#A91D3A\] {
  --tw-text-opacity: 1;
  color: rgb(169 29 58 / 1);
  color: rgb(169 29 58 / var(--tw-text-opacity, 1));
}
.text-\[\#B23548\] {
  --tw-text-opacity: 1;
  color: rgb(178 53 72 / 1);
  color: rgb(178 53 72 / var(--tw-text-opacity, 1));
}
.text-\[\#C5A357\] {
  --tw-text-opacity: 1;
  color: rgb(197 163 87 / 1);
  color: rgb(197 163 87 / var(--tw-text-opacity, 1));
}
.text-\[\#E8546B\] {
  --tw-text-opacity: 1;
  color: rgb(232 84 107 / 1);
  color: rgb(232 84 107 / var(--tw-text-opacity, 1));
}
.text-\[\#E8A4B0\] {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.text-\[\#E8A4B0\]\/80 {
  color: rgb(232 164 176 / 0.8);
}
.text-\[\#E8A4B0\]\/85 {
  color: rgb(232 164 176 / 0.85);
}
.text-\[\#FF8AA1\] {
  --tw-text-opacity: 1;
  color: rgb(255 138 161 / 1);
  color: rgb(255 138 161 / var(--tw-text-opacity, 1));
}
.text-\[\#FFD4DC\] {
  --tw-text-opacity: 1;
  color: rgb(255 212 220 / 1);
  color: rgb(255 212 220 / var(--tw-text-opacity, 1));
}
.text-\[\#FFD4DC\]\/35 {
  color: rgb(255 212 220 / 0.35);
}
.text-\[\#FFD4DC\]\/70 {
  color: rgb(255 212 220 / 0.7);
}
.text-\[\#FFFFFF\] {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-accent-foreground {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / 1);
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / 1);
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-200\/85 {
  color: rgb(253 230 138 / 0.85);
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / 1);
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / 1);
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / 1);
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / 1);
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / 1);
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / 1);
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / 1);
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / 1);
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: hsl(222 47% 11%);
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(0 73% 51%);
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(0 0% 100%);
  color: hsl(var(--destructive-foreground));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / 1);
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / 1);
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / 1);
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-emerald-900 {
  --tw-text-opacity: 1;
  color: rgb(6 78 59 / 1);
  color: rgb(6 78 59 / var(--tw-text-opacity, 1));
}
.text-foreground {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(222 47% 11% / 0.5);
  color: hsl(var(--foreground) / 0.5);
}
.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / 1);
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-joy-cream {
  --tw-text-opacity: 1;
  color: rgb(245 239 229 / 1);
  color: rgb(245 239 229 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-300 {
  --tw-text-opacity: 1;
  color: rgb(255 212 220 / 1);
  color: rgb(255 212 220 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-400 {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-500 {
  --tw-text-opacity: 1;
  color: rgb(200 38 76 / 1);
  color: rgb(200 38 76 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-600 {
  --tw-text-opacity: 1;
  color: rgb(168 34 56 / 1);
  color: rgb(168 34 56 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-700 {
  --tw-text-opacity: 1;
  color: rgb(139 26 44 / 1);
  color: rgb(139 26 44 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-800 {
  --tw-text-opacity: 1;
  color: rgb(94 15 37 / 1);
  color: rgb(94 15 37 / var(--tw-text-opacity, 1));
}
.text-joy-crimson-900 {
  --tw-text-opacity: 1;
  color: rgb(58 10 20 / 1);
  color: rgb(58 10 20 / var(--tw-text-opacity, 1));
}
.text-joy-gold-300 {
  --tw-text-opacity: 1;
  color: rgb(232 212 154 / 1);
  color: rgb(232 212 154 / var(--tw-text-opacity, 1));
}
.text-joy-gold-400 {
  --tw-text-opacity: 1;
  color: rgb(216 185 117 / 1);
  color: rgb(216 185 117 / var(--tw-text-opacity, 1));
}
.text-joy-gold-500 {
  --tw-text-opacity: 1;
  color: rgb(197 163 87 / 1);
  color: rgb(197 163 87 / var(--tw-text-opacity, 1));
}
.text-joy-obsidian {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / 1);
  color: rgb(10 10 10 / var(--tw-text-opacity, 1));
}
.text-joy-paper {
  --tw-text-opacity: 1;
  color: rgb(247 245 240 / 1);
  color: rgb(247 245 240 / var(--tw-text-opacity, 1));
}
.text-muted-foreground {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.text-popover-foreground {
  color: hsl(222 47% 11%);
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(350 89% 50%);
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(0 0% 100%);
  color: hsl(var(--primary-foreground));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / 1);
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / 1);
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / 1);
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / 1);
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / 1);
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / 1);
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / 1);
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / 1);
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / 1);
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / 1);
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: hsl(0 0% 100%);
  color: hsl(var(--secondary-foreground));
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / 1);
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / 1);
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / 1);
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / 1);
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / 1);
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / 1);
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / 1);
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / 1);
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}
.text-white\/\[0\.04\] {
  color: rgb(255 255 255 / 0.04);
}
.text-zinc-100 {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / 1);
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-200 {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.text-zinc-300 {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.text-zinc-300\/80 {
  color: rgb(212 212 216 / 0.8);
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-500 {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.text-zinc-600 {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / 1);
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.text-zinc-700 {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.text-zinc-800 {
  --tw-text-opacity: 1;
  color: rgb(39 39 42 / 1);
  color: rgb(39 39 42 / var(--tw-text-opacity, 1));
}
.text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.text-zinc-950 {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / 1);
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.overline {
  -webkit-text-decoration-line: overline;
          text-decoration-line: overline;
}
.line-through {
  -webkit-text-decoration-line: line-through;
          text-decoration-line: line-through;
}
.decoration-zinc-300 {
  -webkit-text-decoration-color: #d4d4d8;
          text-decoration-color: #d4d4d8;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-\[5px\] {
  text-underline-offset: 5px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-white\/40::placeholder {
  color: rgb(255 255 255 / 0.4);
}
.accent-\[\#8A1C2E\] {
  accent-color: #8A1C2E;
}
.accent-\[\#8B1A2C\] {
  accent-color: #8B1A2C;
}
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-95 {
  opacity: 0.95;
}
.opacity-\[0\.045\] {
  opacity: 0.045;
}
.opacity-\[0\.04\] {
  opacity: 0.04;
}
.opacity-\[0\.05\] {
  opacity: 0.05;
}
.opacity-\[0\.06\] {
  opacity: 0.06;
}
.opacity-\[0\.07\] {
  opacity: 0.07;
}
.opacity-\[0\.08\] {
  opacity: 0.08;
}
.opacity-\[0\.10\] {
  opacity: 0.10;
}
.opacity-\[0\.12\] {
  opacity: 0.12;
}
.opacity-\[0\.14\] {
  opacity: 0.14;
}
.opacity-\[0\.18\] {
  opacity: 0.18;
}
.opacity-\[0\.20\] {
  opacity: 0.20;
}
.opacity-\[0\.25\] {
  opacity: 0.25;
}
.opacity-\[0\.30\] {
  opacity: 0.30;
}
.mix-blend-multiply {
  mix-blend-mode: multiply;
}
.mix-blend-overlay {
  mix-blend-mode: overlay;
}
.mix-blend-soft-light {
  mix-blend-mode: soft-light;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_2px_rgba\(225\2c 29\2c 72\2c 0\.18\)\] {
  --tw-shadow: 0 0 0 2px rgba(225,29,72,0.18);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(225\2c 29\2c 72\2c 0\.08\)\] {
  --tw-shadow: 0 0 0 3px rgba(225,29,72,0.08);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_24px_rgba\(139\2c 26\2c 44\2c 0\.08\)\] {
  --tw-shadow: 0 0 24px rgba(139,26,44,0.08);
  --tw-shadow-colored: 0 0 24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_5px_rgba\(52\2c 211\2c 153\2c 0\.85\)\] {
  --tw-shadow: 0 0 5px rgba(52,211,153,0.85);
  --tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(232\2c 164\2c 176\2c 0\.85\)\] {
  --tw-shadow: 0 0 6px rgba(232,164,176,0.85);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(255\2c 255\2c 255\2c 0\.9\)\] {
  --tw-shadow: 0 0 6px rgba(255,255,255,0.9);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(52\2c 211\2c 153\2c 0\.7\)\] {
  --tw-shadow: 0 0 6px rgba(52,211,153,0.7);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(52\2c 211\2c 153\2c 0\.85\)\] {
  --tw-shadow: 0 0 6px rgba(52,211,153,0.85);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_18px_44px_-14px_rgba\(139\2c 26\2c 44\2c 0\.55\)\] {
  --tw-shadow: 0 18px 44px -14px rgba(139,26,44,0.55);
  --tw-shadow-colored: 0 18px 44px -14px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_60px_-20px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0 24px 60px -20px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 24px 60px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_-12px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0 24px 64px -12px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 24px 64px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_-24px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] {
  --tw-shadow: 0 24px 64px -24px rgba(0,0,0,0.18);
  --tw-shadow-colored: 0 24px 64px -24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_-24px_rgba\(0\2c 0\2c 0\2c 0\.55\)\] {
  --tw-shadow: 0 24px 64px -24px rgba(0,0,0,0.55);
  --tw-shadow-colored: 0 24px 64px -24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_-24px_rgba\(0\2c 0\2c 0\2c 0\.8\)\] {
  --tw-shadow: 0 24px 64px -24px rgba(0,0,0,0.8);
  --tw-shadow-colored: 0 24px 64px -24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_-24px_rgba\(139\2c 26\2c 44\2c 0\.30\)\] {
  --tw-shadow: 0 24px 64px -24px rgba(139,26,44,0.30);
  --tw-shadow-colored: 0 24px 64px -24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_64px_-24px_rgba\(232\2c 164\2c 176\2c 0\.32\)\2c 0_0_0_1px_rgba\(232\2c 164\2c 176\2c 0\.06\)\] {
  --tw-shadow: 0 24px 64px -24px rgba(232,164,176,0.32),0 0 0 1px rgba(232,164,176,0.06);
  --tw-shadow-colored: 0 24px 64px -24px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_28px_72px_-20px_rgba\(0\2c 0\2c 0\2c 0\.32\)\] {
  --tw-shadow: 0 28px 72px -20px rgba(0,0,0,0.32);
  --tw-shadow-colored: 0 28px 72px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_30px_80px_-20px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  --tw-shadow-colored: 0 30px 80px -20px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_6px_18px_-6px_rgba\(139\2c 26\2c 44\2c 0\.55\)\] {
  --tw-shadow: 0 6px 18px -6px rgba(139,26,44,0.55);
  --tw-shadow-colored: 0 6px 18px -6px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_8px_30px_rgba\(200\2c 38\2c 76\2c 0\.2\)\] {
  --tw-shadow: 0 8px 30px rgba(200,38,76,0.2);
  --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[2px_0_8px_rgba\(0\2c 0\2c 0\2c 0\.45\)\] {
  --tw-shadow: 2px 0 8px rgba(0,0,0,0.45);
  --tw-shadow-colored: 2px 0 8px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.06\)\2c 0_24px_64px_-32px_rgba\(200\2c 38\2c 76\2c 0\.40\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.06),0 24px 64px -32px rgba(200,38,76,0.40);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 24px 64px -32px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.15\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[\#8B1A2C\]\/20 {
  --tw-shadow-color: rgb(139 26 44 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-\[\#8B1A2C\] {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 26 44 / var(--tw-ring-opacity, 1));
}
.ring-\[\#8B1A2C\]\/20 {
  --tw-ring-color: rgb(139 26 44 / 0.2);
}
.ring-\[\#8B1A2C\]\/30 {
  --tw-ring-color: rgb(139 26 44 / 0.3);
}
.ring-\[\#8B1A2C\]\/40 {
  --tw-ring-color: rgb(139 26 44 / 0.4);
}
.ring-\[\#8B1A2C\]\/45 {
  --tw-ring-color: rgb(139 26 44 / 0.45);
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-transparent {
  --tw-ring-color: transparent;
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-zinc-950 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(9 9 11 / var(--tw-ring-opacity, 1));
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  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);
}
.blur-2xl {
  --tw-blur: blur(40px);
  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);
}
.blur-3xl {
  --tw-blur: blur(64px);
  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);
}
.blur-\[2px\] {
  --tw-blur: blur(2px);
  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);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  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);
}
.drop-shadow-\[0_1px_6px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 1px 6px rgba(0,0,0,0.6));
  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);
}
.drop-shadow-\[0_2px_12px_rgba\(0\2c 0\2c 0\2c 0\.6\)\] {
  --tw-drop-shadow: drop-shadow(0 2px 12px rgba(0,0,0,0.6));
  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);
}
.grayscale {
  --tw-grayscale: grayscale(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);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -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-2xl {
  --tw-backdrop-blur: blur(40px);
  -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-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  -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-md {
  --tw-backdrop-blur: blur(12px);
  -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-sm {
  --tw-backdrop-blur: blur(4px);
  -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-xl {
  --tw-backdrop-blur: blur(24px);
  -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 {
  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[max-width\] {
  transition-property: max-width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[stroke-dashoffset\] {
  transition-property: stroke-dashoffset;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.will-change-transform {
  will-change: transform;
}
@keyframes enter {

  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.zoom-in {
  --tw-enter-scale: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.slide-in-from-right {
  --tw-enter-translate-x: 100%;
}
.slide-in-from-top-1 {
  --tw-enter-translate-y: -0.25rem;
}
.slide-in-from-top-2 {
  --tw-enter-translate-y: -0.5rem;
}
.slide-in-from-top-4 {
  --tw-enter-translate-y: -1rem;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-700 {
  animation-duration: 700ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.paused {
  animation-play-state: paused;
}
.\[height\:100dvh\] {
  height: 100dvh;
}

/* iter-210 · UHD Cockpit theme (light primary + dark parity) */

/* iter-206 · founder directives consolidated:
   ① Sharper font rendering on every surface
   ② Light-mode body bg never shows white scroll-past artefact
   ③ Sticky StickyHeader stays anchored on every page */
html, body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility;
}
html:not(.dark), html:not(.dark) body {
    background-color: #FFFFFF;
    min-height: 100vh;
}
html.dark, html.dark body {
    background-color: #050203;
    min-height: 100vh;
}
#root { min-height: 100vh; }

/* iter-206 · Soft crimson glow + glassy lift for light-mode cards.
   Targets the standard rounded card pattern used across dashboards
   (bg-white + border + rounded). Skips any card that opts out via
   `data-keep-color` so dark-glass cards (CyberCard, OwnerPulse,
   Kanban) remain pristine. */
html:not(.dark) .bg-white.border.rounded-md:not([data-keep-color]):not([data-keep-color] *),
html:not(.dark) .bg-white.border.rounded-lg:not([data-keep-color]):not([data-keep-color] *),
html:not(.dark) .bg-white.border.rounded-xl:not([data-keep-color]):not([data-keep-color] *) {
    background-color: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 20px rgba(220, 20, 60, 0.12),
        0 1px 0 rgba(255,255,255,0.6) inset;
    border-color: rgba(139, 26, 44, 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   iter-205b · DARK BLACK SHARP — refined.
   Founder zero-tolerance directive (Screenshots 1-4 / 2026-05-28):
   "Fix ALL grey fonts and replace with clear dark black sharp fonts."

   Refinement (after iter-205a black-on-black incident on CyberCards):
   - We DO NOT touch any element inside a dark surface. CyberCards,
     dashboards-with-dark-bg, the procurement kanban, the owner-pulse
     widget — all keep their original light-grey-on-dark text.
   - We ONLY darken greys when they sit on a light/transparent surface.

   Detection strategy: exempt any element whose ancestor chain contains
   a `[data-keep-color]`, `[data-keep-bg]`, `[data-dark-surface]`, or
   the cyber-shell class. Combined with the explicit-light-mode guard
   (`html:not(.dark)`) this leaves only the white-on-white grey labels
   that the founder is complaining about.
   ════════════════════════════════════════════════════════════════════ */
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-zinc-300,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-zinc-400,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-zinc-500,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-zinc-600,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-gray-300,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-gray-400,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-gray-500,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-gray-600,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-neutral-300,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-neutral-400,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-neutral-500,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-neutral-600,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-slate-300,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-slate-400,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-slate-500,
html:not(.dark)
  :not([data-keep-color]):not([data-keep-color] *):not([data-keep-bg] *):not([data-dark-surface] *):not(.cyber-shell *):not(.country-tape-box *):not(.bg-zinc-950 *):not(.bg-black *)
  .text-slate-600 {
    color: #111111 !important; /* sharp ink black */
    font-weight: 600 !important; /* sharpen */
}

/* Restore the original muted appearance inside dark surfaces */
[data-keep-color] .text-zinc-400 { color: rgb(161, 161, 170) !important; }
[data-keep-color] .text-zinc-500 { color: rgb(113, 113, 122) !important; }


/* === UHD / 4K rendering polish ===
   Maximises text crispness, font edge smoothness and image fidelity
   across retina, 4K and Samsung AMOLED displays. */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-tap-highlight-color: transparent;
    /* Iter-113i · Global viewport overflow guard. Prevents any rogue
       child container (full-bleed banners, dashboards loaded with
       dynamic content, fixed-position drawers) from blowing the
       horizontal axis and pushing the page off-canvas. */
    max-width: 100vw;
    overflow-x: hidden;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   iter-161 · WARM PAPER LIGHT-MODE BACKGROUND
   Founder directive: replace the stark blinding #FFFFFF light-mode
   background with a warm off-white/cream "paper" tone (#F7F5F0) so the
   platform feels premium and architectural, not default web-white.
   .
   We scope the change to <body> only — page-level surfaces that paint
   their own bg (Vellox, engine pages, cockpit dark canvases) are
   untouched because they set background-color directly on their own
   container, which sits above <body> in the cascade.
   ════════════════════════════════════════════════════════════════════ */
:root { --joy-paper: #F7F5F0; }
html:not(.dark) body {
    background-color: #F7F5F0;
    background-color: var(--joy-paper);
}

/* ════════════════════════════════════════════════════════════════════
   iter-164 · SITE-WIDE AMBIENT FLASH GLOW (DARK + LIGHT)
   Founder directive (IMG_4523/4524): bring back the moving side-edge
   "flash" halo in dark mode, and add equivalent light-mode life via
   moving glowing lights.
   .
   Two-layer system:
     1. Twin static side-glows (top-left + bottom-right) FOLDED into
        the existing body::before grid backdrop further down in this
        file — see the iter-164 lines inside that block.
     2. A slow 14s diagonal sweep on body::after — a faint sheen that
        travels NW → SE in a continuous loop. Light mode uses warm
        crimson; dark mode uses rose-gold.
   .
   Both layers are pointer-events:none and clip cleanly inside the
   `overflow-x: clip` body so they never trigger horizontal scroll.
   ════════════════════════════════════════════════════════════════════ */
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 38%,
        rgba(139, 26, 44, 0.06) 48%,
        rgba(232, 164, 176, 0.08) 50%,
        rgba(139, 26, 44, 0.06) 52%,
        transparent 62%,
        transparent 100%
    );
    background-size: 240% 240%;
    background-repeat: no-repeat;
    animation: joy-ambient-sweep 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: background-position, opacity;
    opacity: 0.85;
}
html.dark body::after {
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 38%,
        rgba(232, 164, 176, 0.08) 48%,
        rgba(225, 29, 72, 0.10) 50%,
        rgba(232, 164, 176, 0.08) 52%,
        transparent 62%,
        transparent 100%
    );
    background-size: 240% 240%;
    background-repeat: no-repeat;
    opacity: 0.95;
}
@keyframes joy-ambient-sweep {
    0%   { background-position: -50% -50%; }
    50%  { background-position: 150% 150%; }
    100% { background-position: -50% -50%; }
}
/* Honour user motion preference — disable the sweep for visitors who
   request reduced motion. The static side glows stay because they
   are non-animated. */
@media (prefers-reduced-motion: reduce) {
    body::after { animation: none; }
}
/* Ensure all page content paints ABOVE the ambient layers. */
#root, body > * { position: relative; z-index: 1; }


/* Cockpit / portal shell: an extra-strict wrapper guard for the
   authenticated dashboard. Belt-and-braces so any future widget
   that ships a fixed-width inline style cannot break the layout. */
.portal-shell {
    max-width: 100vw;
    overflow-x: hidden;
}
.portal-shell > main {
    /* Ensure the main column never exceeds available space when the
       sticky 272px sidebar is rendered. flex-1 already handles this on
       desktop; the explicit min-w-0 + max-width belt prevents shrink-
       to-content failure modes on iOS Safari + Samsung Internet. */
    min-width: 0;
    max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   iter-165 · ROUTE-TINTED AMBIENT SWEEP
   The site-wide `body::after` diagonal sweep (iter-164) defaults to
   crimson · rose-gold. Certain flagship product surfaces want their
   OWN ambient signature so each landing surface has a distinct
   "atmosphere":
     · /joy-vellox  → champagne gold sheen (atelier identity)
     · /thesis      → ruby intensified (investor relations)
     · /joe + /oni  → cyan-blue technical (neural OS)
   .
   Activated by adding `data-route-tint="<slug>"` on <body> via the
   useDocumentMeta hook (or any route-mount effect). One CSS variable
   per tint keeps the override surface minimal.
   ════════════════════════════════════════════════════════════════════ */
body[data-route-tint="vellox"]::after {
    background: linear-gradient(
        125deg,
        transparent 0%,
        transparent 38%,
        rgba(197, 163, 87, 0.08) 48%,
        rgba(232, 212, 154, 0.10) 50%,
        rgba(197, 163, 87, 0.08) 52%,
        transparent 62%,
        transparent 100%
    ) !important;
    background-size: 240% 240% !important;
    background-repeat: no-repeat !important;
}
body[data-route-tint="vellox"]::before {
    background-image:
        radial-gradient(ellipse 40% 35% at 0% 0%, rgba(197, 163, 87, 0.10), transparent 70%),
        radial-gradient(ellipse 45% 40% at 100% 100%, rgba(232, 212, 154, 0.09), transparent 70%) !important;
}
html.dark body[data-route-tint="vellox"]::before {
    background-image:
        radial-gradient(ellipse 38% 32% at 0% 0%, rgba(232, 212, 154, 0.14), transparent 70%),
        radial-gradient(ellipse 42% 38% at 100% 100%, rgba(197, 163, 87, 0.12), transparent 70%),
        linear-gradient(to right, rgba(197, 163, 87, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(197, 163, 87, 0.16) 1px, transparent 1px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   iter-165 · JOY VELLOX HOVER GOLD SCAN-LINE
   Mirrors `.joy-auth-scan-line` at quarter intensity. The hero Vellox
   row sweeps a faint gold sheen left-to-right on hover, signalling
   bespoke craft without competing with the crimson auth rail.
   ════════════════════════════════════════════════════════════════════ */
[data-testid="hero-vellox-row"] { position: relative; overflow: hidden; }
[data-testid="hero-vellox-row"]::before {
    content: "";
    position: absolute;
    inset: 0 -40% 0 -40%;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(197, 163, 87, 0.18) 30%,
        rgba(232, 212, 154, 0.45) 50%,
        rgba(197, 163, 87, 0.18) 70%,
        transparent 100%
    );
    box-shadow: 0 0 14px rgba(197, 163, 87, 0.25);
    transform: translate3d(-120%, 0, 0);
    transition: opacity 200ms ease;
    opacity: 0;
    z-index: 0;
    will-change: transform, opacity;
}
[data-testid="hero-vellox-row"]:hover::before,
[data-testid="hero-vellox-row"]:focus-visible::before {
    opacity: 1;
    animation: joy-vellox-gold-sweep 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes joy-vellox-gold-sweep {
    0%   { transform: translate3d(-120%, 0, 0); }
    50%  { transform: translate3d(120%, 0, 0); }
    100% { transform: translate3d(-120%, 0, 0); }
}

/* ════════════════════════════════════════════════════════════════════
   iter-166 · JOY Automart wordmark — light/dark + moving shimmer
   .
   Founder feedback (IMG_4524): the brand wordmark looked "boring".
   We now ship a tighter Inter-800 (JOY) + Inter-400 (Automart) pairing
   with a slow gold→crimson shimmer travelling across the wordmark
   every 7s, GPU-accelerated via background-position only.
   ════════════════════════════════════════════════════════════════════ */
.joy-brand-wordmark {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.30em;
}
.joy-wordmark-bold, .joy-wordmark-light {
    background: linear-gradient(120deg,
        #0A0A0A 0%,
        #0A0A0A 28%,
        #5E0F25 48%,
        #C5A357 52%,
        #0A0A0A 72%,
        #0A0A0A 100%
    );
    background-size: 220% 100%;
    background-position: -50% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: joy-wordmark-shimmer 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: background-position;
}
.joy-wordmark-light {
    font-weight: 400;
    letter-spacing: -0.01em;
    animation-delay: 0.4s;
}
html.dark .joy-wordmark-bold, html.dark .joy-wordmark-light {
    background: linear-gradient(120deg,
        #FFFFFF 0%,
        #FFFFFF 28%,
        #E8A4B0 48%,
        #D8B975 52%,
        #FFFFFF 72%,
        #FFFFFF 100%
    );
    background-size: 220% 100%;
    background-position: -50% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
@keyframes joy-wordmark-shimmer {
    0%   { background-position: -50% 0; }
    50%  { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .joy-wordmark-bold, .joy-wordmark-light { animation: none; background-position: 0 0; }
}

/* ════════════════════════════════════════════════════════════════════
   iter-167 · H1 micro-shimmer signature
   .
   Opt-in shimmer on hero h1 headlines (Landing hero, /thesis, /trade-os).
   Reuses the .joy-wordmark-shimmer keyframes at quarter alpha so the
   sweep only catches the eye on direct attention. Pages opt in by
   adding `data-joy-shimmer` to the heading element.
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   iter-174 · H1 shimmer — restored sweep + solid base.
   .
   The user wants the moving shimmer back ("the shimmering glowing
   effect needs to be there"). Previous iter-172 dropped it entirely
   to fix the ghost-outline regression on light mode. We bring it back
   with two changes that eliminate the ghost problem permanently:
   .
   • Mid-stops are now FULL-OPACITY (1.0 alpha) — no more 0.55 alpha
     that faded into the white background.
   • The `currentColor` rest-stops cover 0% → 38% AND 62% → 100% so
     ~76% of the text always renders in its natural colour. Only the
     ~24% sweep band lights up crimson/gold as it travels across.
   .
   Result: text reads "solid + glowing" exactly as the founder asked —
   no transparent fill, no ghost outlines, and the sweep is visibly
   richer because the colours don't fade into the page.
   ════════════════════════════════════════════════════════════════════ */
[data-joy-shimmer] {
    background: linear-gradient(120deg,
        currentColor 0%,
        currentColor 32%,
        #8A1C2E 42%,
        #C5A357 50%,
        #F5C45A 53%,
        #C5A357 56%,
        #8A1C2E 64%,
        currentColor 74%,
        currentColor 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    /* Keep the natural text colour as a SOLID base — if for any reason
       the background-clip gradient fails to paint (older browsers,
       background-attachment quirks) the text still renders in its
       intended ink, never as a ghost outline. */
    -webkit-text-fill-color: transparent;
    animation:
        joy-h1-shimmer-sweep 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        joy-h1-glow-light 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    will-change: background-position, text-shadow;
}
html.dark [data-joy-shimmer] {
    background: linear-gradient(120deg,
        currentColor 0%,
        currentColor 32%,
        #E8A4B0 42%,
        #D8B975 50%,
        #F5C45A 53%,
        #D8B975 56%,
        #E8A4B0 64%,
        currentColor 74%,
        currentColor 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        joy-h1-shimmer-sweep 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite,
        joy-h1-glow-dark 6.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes joy-h1-shimmer-sweep {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@keyframes joy-h1-glow-light {
    0%, 100% { text-shadow: 0 0 0 rgba(197,163,87,0); filter: brightness(1); }
    45%, 55% { text-shadow: 0 0 22px rgba(197,163,87,0.45), 0 0 14px rgba(138,28,46,0.30); filter: brightness(1.06); }
}
@keyframes joy-h1-glow-dark {
    0%, 100% { text-shadow: 0 0 0 rgba(216,185,117,0); filter: brightness(1); }
    45%, 55% { text-shadow: 0 0 28px rgba(216,185,117,0.55), 0 0 18px rgba(232,164,176,0.40); filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    [data-joy-shimmer] {
        animation: none;
        background: none;
        -webkit-text-fill-color: currentColor;
        text-shadow: none;
        filter: none;
    }
}

/* Honour reduced-motion · keep the soft glow but freeze the sweep. */
@media (prefers-reduced-motion: reduce) {
    [data-testid="hero-vellox-row"]:hover::before { animation: none; transform: none; }
}
/* Ensure inner content stays above the gold sheen */
[data-testid="hero-vellox-row"] > * { position: relative; z-index: 1; }

img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
/* Re-enable smooth interpolation for explicitly photographic images (cars, kits, etc.) */
img[src*="harrier"], img[src*="body-kits"], img[src*="kits"], img[src*="experience"], img[src*="byd"], img[src*="oem"], img.photo, .photo img {
    image-rendering: auto;
    image-rendering: high-quality;
}

/* Global responsive safety — prevents horizontal scroll on any device.
   Critical for Samsung Browser, iOS Safari, and narrow Android viewports.
   `clip` is used instead of `hidden` so position:sticky continues to work
   inside descendants (overflow:hidden breaks sticky on most browsers). */
html, body {
    overflow-x: clip;
    max-width: 100vw;
    /* Kill the iOS rubber-band white-flash on dark mode: the
       <html> background is what shows during overscroll, not <body>. */
    background-color: #FFFFFF;
}
html.dark, html.dark body {
    background-color: #0A0608;
}

/* ─── iter-190 · FOUNDER COLOR DIRECTIVE ──────────────────────────
   Strict palette per direct quote: "Dark mode color should be black
   and crimson mix. Light Mode color should be white and crimson mix."

   Implementation:
   • Dark body = #0A0608 (near-black with a 1% crimson hue)
   • Light body = #FFFFFF (existing — already pure white)
   • Dark surfaces: lift to #14080C (deeper crimson-black) for
     elevated panels, #1F0D13 for cards.
   • Dark text: force minimum 88% white on body, 96% on headings —
     prevents Tailwind text-zinc-400/500 from going unreadable on
     near-black. Crimson is reserved for accents only, NOT body text.
*/
html.dark {
    --joy-bg-base: #0A0608;
    --joy-bg-elev: #14080C;
    --joy-bg-card: #1F0D13;
    --joy-text-primary: #F7F4F2;
    --joy-text-secondary: rgba(247,244,242,0.78);
    --joy-text-muted:    rgba(247,244,242,0.58);
    --joy-border-soft:   rgba(247,244,242,0.10);
    --joy-border-strong: rgba(138,28,46,0.45);
}
html:not(.dark) {
    --joy-bg-base: #FFFFFF;
    --joy-bg-elev: #FDF7F5;   /* white with a 0.5% crimson warmth */
    --joy-bg-card: #FFFFFF;
    --joy-text-primary: #0E0608;
    --joy-text-secondary: rgba(14,6,8,0.72);
    --joy-text-muted:    rgba(14,6,8,0.50);
    --joy-border-soft:   rgba(138,28,46,0.10);
    --joy-border-strong: rgba(138,28,46,0.32);
}

/* Dark-mode contrast guard — bump every "muted" text variant to a
   readable opacity. Tailwind classes that produced 35-45% white in
   dark mode now hit 70-78%. Heading text gets a +4% boost above body. */
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-zinc-400,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-zinc-500,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-gray-400,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-gray-500,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-neutral-400,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-slate-400,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-slate-500 {
    color: rgba(247,244,242,0.74) !important;
}
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-zinc-600,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-zinc-700 {
    color: rgba(247,244,242,0.84) !important;
}
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-zinc-800,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-zinc-900,
html.dark :not([data-keep-color]):not([data-keep-color] *) .text-black {
    color: rgba(247,244,242,0.94) !important;
}
img, video, svg {
    max-width: 100%;
    height: auto;
}

/* === Site-wide grid box texture with red shade ===
   Subtle architectural grid + faint red-glow wash that runs behind every
   page in BOTH light and dark mode. Provides the institutional
   Bloomberg-style backdrop. Uses a fixed body::before so it sits behind
   ALL page content regardless of per-page wrapper backgrounds. Pages
   that want to fully cover it use bg-white / bg-zinc-950 explicitly on
   their section component. */
/* === Site-wide red grid background — visible everywhere ===
   The grid lives on body::before and shows through EVERY page section
   because all standard page-section wrappers (the ones with both
   `bg-white` AND `dark:bg-zinc-950`) are made transparent below. Text
   remains readable on top because the grid lines are intentionally
   subtle (≤22% alpha). This matches the reference screenshot exactly. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* PURE WHITE light-mode foundation per directive 2026-05-22.
       Grid is a whisper-faint hairline so the canvas reads as
       a clean institutional sheet, not a graph paper. */
    background-color: #FFFFFF;
    background-image:
        /* iter-167 · alpha bumped 0.09/0.08 → 0.16/0.14 for visibility on bright OLED mobile */
        radial-gradient(ellipse 40% 35% at 0% 0%, rgba(139, 26, 44, 0.16), transparent 70%),
        radial-gradient(ellipse 45% 40% at 100% 100%, rgba(232, 164, 176, 0.14), transparent 70%),
        linear-gradient(to right, rgba(139, 26, 44, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(139, 26, 44, 0.045) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
}
html.dark body::before {
    /* Premium pitch-black foundation — pure obsidian backdrop. The
       crimson grid sits on top, visible as a faint architectural
       texture. iter-164 · twin side-glows now restored. */
    background-color: #09090b;
    background-image:
        radial-gradient(ellipse 38% 32% at 0% 0%, rgba(232, 164, 176, 0.20), transparent 70%),
        radial-gradient(ellipse 42% 38% at 100% 100%, rgba(225, 29, 72, 0.18), transparent 70%),
        linear-gradient(to right, rgba(225, 64, 102, 0.20) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(225, 64, 102, 0.20) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
}

/* === Brand-mark LTR islands ===
   When the page is in RTL mode (Arabic), brand marks — logo + chrome
   emblems + JOY VELLOX inline pill — must stay left-to-right so the
   chrome bezel highlights, the J letterform, and the brand wordmark
   read correctly. Components opt in by setting `dir="ltr"` on their
   wrapping element, e.g. <span dir="ltr">JOY VELLOX</span>. */
html[dir="rtl"] [dir="ltr"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* === Site-wide section transparency ===
   Every standard page section wrapper is made transparent so the body
   grid shows through. We EXCLUDE:
   - <header> tags (brand header keeps its solid bg)
   - Anything with `data-keep-bg` (manual opt-out)
   - Anything with class hints that mark it as a popover/menu/card
     (absolute/fixed positioning, shadow, rounded — these float ABOVE
     the grid and MUST stay opaque). */
section[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]),
div[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]),
footer[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]),
main[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]) {
    background-color: transparent !important;
}
html.dark section[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]),
html.dark div[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]),
html.dark footer[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]),
html.dark main[class*="bg-white"][class*="dark:bg-zinc-950"]:not([data-keep-bg]):not([class*="absolute"]):not([class*="fixed"]):not([class*="shadow"]):not([class*="rounded"]) {
    background-color: transparent !important;
}

/* === Global light-text contrast bump ===
   iter-160 · Legacy block superseded by the scoped WCAG-AAA enforcer
   at the top of this file (lines ~5-45). That block uses higher
   specificity, !important, and the `[data-keep-color]` exemption.
   The legacy declarations below remain ONLY for the `:not([data-keep-light])`
   opt-out keyword which a handful of older surfaces still rely on,
   but the new block wins on every other element.                */
/* === Legacy contrast enforcer kept for `:not([data-keep-light])`
   opt-out only. iter-205 floored everything to near-black above. */
html:not(.dark) .text-zinc-300:not([data-keep-light]) { color: #0A0A0B !important; }
html:not(.dark) .text-zinc-400:not([data-keep-light]) { color: #0A0A0B !important; }
html:not(.dark) .text-zinc-500:not([data-keep-light]) { color: #0A0A0B !important; }
html:not(.dark) .text-slate-400:not([data-keep-light]) { color: #0A0A0B !important; }
html:not(.dark) .text-slate-500:not([data-keep-light]) { color: #0A0A0B !important; }

/* Headers, modals, cards, dropdowns — keep their solid bg so they
   visually float ABOVE the grid. We do this by NOT including them in
   the transparency rule (they don't have data-testid="page-*"). */

/* === Grid pulse on hover ===
   Apply class `.grid-pulse` to any element that already has the red box
   grid background (set via the universal rule above OR via direct
   background-image). On hover, the grid lines softly brighten and
   slowly shift — gives the "automotive intelligence" interfaces a
   subtle living-machine feel without being distracting. */
@keyframes grid-shift {
    0%   { background-position: 0 0, 0 0; }
    50%  { background-position: 28px 28px, 28px 28px; }
    100% { background-position: 0 0, 0 0; }
}
@keyframes grid-glow-light {
    0%, 100% { background-image:
        linear-gradient(to right, rgba(200, 38, 76, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 38, 76, 0.12) 1px, transparent 1px); }
    50%      { background-image:
        linear-gradient(to right, rgba(200, 38, 76, 0.28) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 38, 76, 0.28) 1px, transparent 1px); }
}
@keyframes grid-glow-dark {
    0%, 100% { background-image:
        linear-gradient(to right, rgba(225, 64, 102, 0.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(225, 64, 102, 0.14) 1px, transparent 1px); }
    50%      { background-image:
        linear-gradient(to right, rgba(225, 64, 102, 0.32) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(225, 64, 102, 0.32) 1px, transparent 1px); }
}
.grid-pulse {
    background-image:
        linear-gradient(to right, rgba(200, 38, 76, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(200, 38, 76, 0.10) 1px, transparent 1px);
    background-size: 36px 36px;
    transition: background-image 200ms ease;
}
html.dark .grid-pulse {
    background-image:
        linear-gradient(to right, rgba(225, 64, 102, 0.14) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(225, 64, 102, 0.14) 1px, transparent 1px);
}
.grid-pulse:hover {
    animation: grid-glow-light 1.6s ease-in-out infinite, grid-shift 6s ease-in-out infinite;
}
html.dark .grid-pulse:hover {
    animation: grid-glow-dark 1.6s ease-in-out infinite, grid-shift 6s ease-in-out infinite;
}



/* Utility: hide scrollbar while preserving scroll behaviour (used in
   thumbnail strips and mobile chip nav) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Mobile bottom clearance — the floating Joe chip is bottom-LEFT
   (~60px tall fatter pill) and the footer is full-width centered text,
   so the Joe pill can safely float over the FOOTER without obscuring
   any meaningful content. We only need a tiny safe-area inset; the
   prior 84px padding was creating a "huge gap" between footer text
   and the actual page bottom. */
@media (max-width: 640px) {
    body { padding-bottom: env(safe-area-inset-bottom, 0); }
    footer { padding-bottom: 24px !important; }
}

/* Hide Emergent platform-injected "Made with Emergent" badge */
#emergent-badge,
[id^="emergent-badge"],
[class*="emergent-badge"],
[class*="made-with-emergent"],
a[href*="emergent.sh"],
a[href*="emergent.dev"],
a[href*="app.emergent.sh"],
iframe[src*="emergent"][src*="badge"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media print {
    aside, header, button[data-testid="logout-button"], .print\:hidden {
        display: none !important;
    }
    main {
        margin-left: 0 !important;
    }
    body {
        background: white !important;
    }
    .industrial-card {
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid #ddd !important;
    }
}

/* ─── iter-144 · Cockpit scope rules ─────────────────────────────
   The `.cockpit-theme-scope` wrapper on `/command-centre` opts out of
   the global UHD palette enforcer (which would otherwise force crimson
   on every header). All cockpit children resolve their colours via the
   `--cockpit-*` tokens declared in `:root` + `html.dark`.

   The `data-keep-color` attribute on inner cards also prevents the
   palette enforcer from re-skinning their borders + backgrounds. */
.cockpit-theme-scope {
    color: #111111;
    color: var(--cockpit-text-primary);
}
.cockpit-theme-scope h1,
.cockpit-theme-scope h2,
.cockpit-theme-scope h3 {
    color: #111111;
    color: var(--cockpit-text-primary);
}

* {
    border-color: hsl(214 32% 91%);
    border-color: hsl(var(--border));
}

html, body, #root {
    background: #ffffff;
    color: hsl(222 47% 11%);
    color: hsl(var(--foreground));
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Dark mode root — pitch background for futuristic look */
html.dark,
html.dark body,
html.dark #root {
    background: #09090B;
    color: #E4E4E7;
    color-scheme: dark;
}
html.dark ::selection {
    background: #8B1A2C;
    color: white;
}

html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* iter-160 · scoped so explicit Tailwind weights (font-semibold,
   font-bold, font-extrabold) still win. Previously this rule force-
   set 800 on every h1/h2/h3 and silently overrode page-level
   typography choices. Now we only apply 800 when no `font-*` weight
   class is present on the element. */
h1:not([class*="font-"]),
h2:not([class*="font-"]),
h3:not([class*="font-"]),
h4:not([class*="font-"]),
h5:not([class*="font-"]),
.font-display:not([class*="font-bold"]):not([class*="font-extrabold"]):not([class*="font-semibold"]):not([class*="font-medium"]):not([class*="font-light"]):not([class*="font-thin"]):not([class*="font-normal"]) {
    font-family: "Inter", "Cabinet Grotesk", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 800;
    font-feature-settings: "cv11", "ss01", "ss03";
}
/* Headings that DO declare an explicit font-weight still inherit the
   font-family + letter-spacing — just not the forced 800 weight. */
h1, h2, h3, h4, h5 {
    font-family: "Inter", "Cabinet Grotesk", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.02em;
    font-feature-settings: "cv11", "ss01", "ss03";
}

.overline {
    font-family: "JetBrains Mono", monospace;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 11px;
    font-weight: 500;
    color: hsl(215 16% 46%);
    color: hsl(var(--muted-foreground));
}

.tread-bg {
    background-image: linear-gradient(135deg, #f8fafc 25%, #f1f5f9 25%, #f1f5f9 50%, #f8fafc 50%, #f8fafc 75%, #f1f5f9 75%, #f1f5f9 100%);
    background-size: 14px 14px;
}

.metallic {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%);
}

::selection {
    background: hsl(350 89% 50%);
    background: hsl(var(--primary));
    color: white;
}

[data-debug-wrapper="true"] {
    display: contents !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Futuristic-but-simple helpers (Swiss/high-contrast, hairline borders,
   subtle motion, performant on 4G mobile)
   ───────────────────────────────────────────────────────────────────── */

/* Subtle SVG noise grain — fixed, behind interactive layers, zero JS. */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/></filter><rect width=%27200%27 height=%27200%27 filter=%27url%28%23n%29%27/></svg>");
}
html.dark .grain-overlay { opacity: 0.06; }

/* Engineering grid background — fades at top/bottom via mask-image. */
.grid-bg {
    background-image:
      linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
html.dark .grid-bg {
    background-image:
      linear-gradient(to right, rgba(225, 29, 72, 0.10) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(225, 29, 72, 0.10) 1px, transparent 1px);
}

.grid-bg-dark {
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 35%, transparent 75%);
            mask-image: radial-gradient(ellipse at 50% 30%, #000 35%, transparent 75%);
}

/* Aurora/gradient blob — for the dark Experience Centre section. */
.aurora-blob {
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(40% 35% at 30% 30%, rgba(225, 29, 72, 0.18), transparent 70%),
      radial-gradient(40% 35% at 70% 60%, rgba(38, 38, 80, 0.5), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

/* Scroll-triggered reveal — defensively VISIBLE by default. The hook adds
   `html.js-reveal-armed` only when IntersectionObserver is wired, and a safety
   timeout force-reveals everything after 1500ms if the observer never fires
   (Samsung Browser / older WebViews can silently drop observer callbacks). */
.reveal {
    opacity: 1;
    transform: none;
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
html.js-reveal-armed .reveal:not(.in-view) {
    opacity: 0;
    transform: translateY(20px);
}
.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays — when used together with .reveal on consecutive elements,
   produces a cinematic ladder reveal. Cap at 500ms so groups never feel laggy. */
.reveal.stagger-1.in-view { transition-delay: 80ms; }
.reveal.stagger-2.in-view { transition-delay: 160ms; }
.reveal.stagger-3.in-view { transition-delay: 240ms; }
.reveal.stagger-4.in-view { transition-delay: 320ms; }
.reveal.stagger-5.in-view { transition-delay: 400ms; }
.reveal.stagger-6.in-view { transition-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
    .reveal.stagger-1.in-view,
    .reveal.stagger-2.in-view,
    .reveal.stagger-3.in-view,
    .reveal.stagger-4.in-view,
    .reveal.stagger-5.in-view,
    .reveal.stagger-6.in-view { transition-delay: 0ms; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html.js-reveal-armed .reveal:not(.in-view) { opacity: 1; transform: none; }
}

/* Magnetic press feel — instant, performant. */
.magnetic {
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                background-color 200ms ease, color 200ms ease;
}
.magnetic:active { transform: scale(0.97); }

/* Hairline rule — replaces full-card borders for technical spec-sheet feel. */
.hairline { border-color: rgba(15, 23, 42, 0.08); }
.hairline-dark { border-color: rgba(255, 255, 255, 0.1); }

/* Live activity ribbon ticker — the very top one-line strip. */
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
}
.ticker-track:hover {
    animation-play-state: paused;
}
/* Soft fade on both edges so scrolling text never merges with the
   adjacent red "Live" badge or trailing edge of the rail. */
.ticker-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 24px), transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* Mono number accents — bigger letterspacing for a system-generated feel. */
.mono-accent {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-feature-settings: "tnum" 1, "ss01" 1;
    letter-spacing: -0.02em;
}

/* Custom selection color across the landing for brand consistency. */
.fut::selection { background: #8B1A2C; color: #fff; }

/* ─────────────────────────────────────────────────────────────────────
   Dark-mode landing: red/black duotone. Two-color rule.
   - Light mode: white + red (clean, premium, daylight)
   - Dark mode:  near-black + red (futuristic, premium, night)
   We override surface colors INSIDE .fut so the auth'd app stays light.
   ───────────────────────────────────────────────────────────────────── */
html.dark .fut { background-color: #09090B; color: #E4E4E7; }
html.dark .fut .bg-white { background-color: #09090B !important; }
html.dark .fut .bg-zinc-50,
html.dark .fut .bg-zinc-50\/40,
html.dark .fut .bg-zinc-50\/50 { background-color: #18181B !important; }
html.dark .fut .text-zinc-900 { color: #FAFAFA !important; }
html.dark .fut .text-zinc-700 { color: #D4D4D8 !important; }
html.dark .fut .text-zinc-600 { color: #A1A1AA !important; }
html.dark .fut .text-zinc-500 { color: #71717A !important; }
html.dark .fut .border-zinc-200,
html.dark .fut .border-zinc-300 { border-color: rgba(255,255,255,0.08) !important; }
html.dark .fut .hairline { border-color: rgba(255,255,255,0.08) !important; }
html.dark .fut .from-white { --tw-gradient-from: rgba(9,9,11,0.95) !important; }
html.dark .fut .via-white\/50 { --tw-gradient-via: rgba(9,9,11,0.5) !important; }

/* Dark-mode primary CTAs use red instead of slate */
html.dark .fut button.bg-zinc-900,
html.dark .fut a.bg-zinc-900,
html.dark .fut button.bg-zinc-950,
html.dark .fut a.bg-zinc-950 {
    background-color: #8B1A2C !important;
    color: #fff !important;
}
html.dark .fut button.bg-zinc-900:hover,
html.dark .fut a.bg-zinc-900:hover,
html.dark .fut button.bg-zinc-950:hover,
html.dark .fut a.bg-zinc-950:hover {
    background-color: #5E0F25 !important;
}

/* Already-dark sections (Experience Centre, JOY VELLOX card) stay dark in both modes */
html.dark .fut .bg-zinc-950 { background-color: #050507 !important; }

/* Footer & feature cards — make borders visible on dark bg */
html.dark .fut .industrial-card { background-color: #18181B; border-color: rgba(255,255,255,0.08); }

/* JOE pill bottom-left bubble — hidden inside the authenticated portal
   (Layout mounts → adds .portal-mode to <body>) because the Layout
   header has its own JOE pill. Public pages still show the floating
   trigger for AI discoverability. */
body.portal-mode [data-testid="guardian-bot-trigger"] { display: none !important; }

/* When the mobile sidebar drawer is open, hide the main column's
   sticky header content (logo + JOE pill) so it never bleeds through
   the dark backdrop and creates the visual "cracks" reported by
   users. The aside drawer + backdrop sit on top; the main pane stays
   pointer-disabled until the drawer is dismissed. */
@media (max-width: 1023px) {
  .portal-shell[data-drawer-open="true"] > main { pointer-events: none; }
  .portal-shell[data-drawer-open="true"] > main > header > * { visibility: hidden; }
  .portal-shell[data-drawer-open="true"] > main > div { visibility: hidden; }
}

/* JOE floating pill is visible on EVERY viewport per latest brand
   directive — ghost-when-idle, full crimson when engaged (see
   .joe-trigger rules at the bottom of this file). Previously hidden
   below the lg breakpoint; that rule was removed so the trio (JOE,
   ONI, Trade Portal) stays accessible from every screen. */

/* ─────────────────────────────────────────────────────────────────────
   Ecosystem glyph kinetic identity
   ---------------------------------------------------------------------
   Each row carries [data-eco-row]. When IntersectionObserver flips
   it to .in-view, contained SVG elements draw / fade / pulse in.
   Uses pathLength=1 trick → universal stroke math regardless of path
   length. Honors prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────── */
[data-eco-row] .eco-glyph-bezel {
  transform: scale(0.85);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 500ms ease-out;
}
[data-eco-row].in-view .eco-glyph-bezel {
  transform: scale(1);
  opacity: 1;
}
[data-eco-row] .eco-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-eco-row].in-view .eco-draw {
  animation: ecoDraw 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 200ms;
  animation-delay: var(--d, 200ms);
}
[data-eco-row] .eco-fade {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
}
[data-eco-row].in-view .eco-fade {
  animation: ecoFade 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 700ms;
  animation-delay: var(--d, 700ms);
}
[data-eco-row] .eco-tick {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-eco-row].in-view .eco-tick {
  animation: ecoDraw 450ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: 700ms;
  animation-delay: var(--d, 700ms);
}
/* Eye blink — one slow blink right after the eye outline finishes drawing */
[data-eco-row].in-view .eco-blink {
  transform-origin: center;
  animation: ecoBlink 800ms cubic-bezier(0.65, 0, 0.35, 1) 1200ms 1 normal both;
}
/* Halo pulse for Convergence */
[data-eco-row].in-view .eco-pulse {
  transform-origin: center;
  animation: ecoPulse 1600ms ease-out 900ms infinite;
}
/* ── Per-discipline accent reveal (Feb 2026) ──────────────────────────
   When a row scrolls into view, the LEFT accent rail grows from 0 → 60%
   in the discipline color (var(--row-accent)) and a 1-shot "tint sweep"
   briefly washes the row background in the accent color before fading
   back to neutral. Establishes the discipline identity (red / blue /
   copper / green / gold) as the row enters viewport. */
[data-eco-row] {
  --row-accent-tint: rgba(139,26,44,0); /* runtime-overridden via inline style — subtle entrance flash */
  --row-accent-glow: rgba(139,26,44,0); /* runtime-overridden via inline style — vivid scroll-velocity halo */
  /* Scroll-velocity drives an accent halo on every row in viewport.
     `--joy-scroll-vel` is updated on <html> by EcosystemSection's
     scroll RAF loop (0..1.4). At rest, the box-shadow is invisible;
     fast-scrolling, the halo lights up in the discipline color. */
  box-shadow: 0 0 calc(0 * 28px) calc(0 * -6px) var(--row-accent-glow);
  box-shadow: 0 0 calc(var(--joy-scroll-vel, 0) * 28px) calc(var(--joy-scroll-vel, 0) * -6px) var(--row-accent-glow);
  transition: box-shadow 220ms ease-out;
}
[data-eco-row].in-view {
  animation: ecoRowTint 1400ms ease-out 100ms 1 normal both;
}

/* ─── iter-187 · USER DIRECTIVE: light-mode glow parity.
   Hover/active states must mirror dark-mode premium feedback. A
   pure light-on-dark glow doesn't read on white, so we layer a
   solid 1px colored border (accent at full alpha) over a rich
   saturated box-shadow. Inset shadow adds depth; outset shadow
   delivers the chromatic halo. Both modes get the same recipe;
   dark-mode opacity multipliers are subtly higher because the
   underlying contrast is lower. */
[data-eco-row] {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 4px;
  transition: box-shadow 260ms ease-out,
              border-color 260ms ease-out,
              background-color 260ms ease-out;
}
[data-eco-row]:hover,
[data-eco-row]:focus-visible {
  border-left-color: rgba(139,26,44,0.7);
  border-left-color: var(--row-accent-glow, rgba(139,26,44,0.7));
  border-right-color: rgba(139,26,44,0.7);
  border-right-color: var(--row-accent-glow, rgba(139,26,44,0.7));
  box-shadow:
    inset 0 0 0 1px rgba(139,26,44,0.08),
    0 0 22px -2px rgba(139,26,44,0.7),
    0 0 44px -8px rgba(139,26,44,0.7);
  box-shadow:
    inset 0 0 0 1px var(--row-accent-tint, rgba(139,26,44,0.08)),
    0 0 22px -2px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 44px -8px var(--row-accent-glow, rgba(139,26,44,0.7));
}
/* Light-mode parity — boost specificity so utility classes don't win the cascade. */
html:not(.dark) [data-eco-row]:hover,
html:not(.dark) [data-eco-row]:focus-visible,
html.light [data-eco-row]:hover,
html.light [data-eco-row]:focus-visible {
  border-left-color: rgba(139,26,44,0.7) !important;
  border-left-color: var(--row-accent-glow, rgba(139,26,44,0.7)) !important;
  border-right-color: rgba(139,26,44,0.7) !important;
  border-right-color: var(--row-accent-glow, rgba(139,26,44,0.7)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(139,26,44,0.08),
    0 0 22px -2px rgba(139,26,44,0.7),
    0 0 44px -8px rgba(139,26,44,0.7) !important;
  box-shadow:
    inset 0 0 0 1px var(--row-accent-tint, rgba(139,26,44,0.08)),
    0 0 22px -2px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 44px -8px var(--row-accent-glow, rgba(139,26,44,0.7)) !important;
}
[data-eco-row]:active {
  box-shadow:
    inset 0 0 0 1px rgba(139,26,44,0.7),
    0 0 30px -2px rgba(139,26,44,0.7),
    0 0 60px -10px rgba(139,26,44,0.7);
  box-shadow:
    inset 0 0 0 1px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 30px -2px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 60px -10px var(--row-accent-glow, rgba(139,26,44,0.7));
  transform: translateZ(0) scale(0.997);
}
html:not(.dark) [data-eco-row]:active,
html.light [data-eco-row]:active {
  box-shadow:
    inset 0 0 0 1px rgba(139,26,44,0.7),
    0 0 30px -2px rgba(139,26,44,0.7),
    0 0 60px -10px rgba(139,26,44,0.7) !important;
  box-shadow:
    inset 0 0 0 1px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 30px -2px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 60px -10px var(--row-accent-glow, rgba(139,26,44,0.7)) !important;
}
/* Dark-mode amplification — accent color reads less vividly against
   #0a0a0a, so push the outer halo a bit further. */
.dark [data-eco-row]:hover,
.dark [data-eco-row]:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(139,26,44,0.16),
    0 0 28px -2px rgba(139,26,44,0.7),
    0 0 60px -8px rgba(139,26,44,0.7);
  box-shadow:
    inset 0 0 0 1px var(--row-accent-tint, rgba(139,26,44,0.16)),
    0 0 28px -2px var(--row-accent-glow, rgba(139,26,44,0.7)),
    0 0 60px -8px var(--row-accent-glow, rgba(139,26,44,0.7));
}
@media (prefers-reduced-motion: reduce) {
  [data-eco-row] { transition: none; }
}
[data-eco-row]::before {
  /* Accent rail — draws on enter, then settles to the hover-controlled
     height. The inline style attribute carries `background: <accent>`
     because the rail is rendered as a <span>, not ::before, in JSX. */
  content: "";
}
@keyframes ecoRowTint {
  0%   { background-color: transparent; }
  40%  { background-color: transparent; background-color: var(--row-accent-tint, transparent); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  [data-eco-row].in-view { animation: none; }
}
@keyframes ecoDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes ecoFade {
  to { opacity: 1; transform: scale(1); }
}
@keyframes ecoBlink {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.08); }
  55% { transform: scaleY(0.08); }
}
@keyframes ecoPulse {
  0%   { opacity: 0.4; transform: scale(1); }
  60%  { opacity: 0;   transform: scale(1.6); }
  100% { opacity: 0;   transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  [data-eco-row] .eco-draw,
  [data-eco-row] .eco-tick { stroke-dashoffset: 0 !important; animation: none !important; }
  [data-eco-row] .eco-fade { opacity: 1 !important; transform: none !important; animation: none !important; }
  [data-eco-row] .eco-glyph-bezel { opacity: 1 !important; transform: none !important; }
  [data-eco-row] .eco-blink, [data-eco-row] .eco-pulse { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Kinetic reveal grammar — opt-in classes for any homepage section.
   Pairs with the global useScrollReveal hook: outer `.reveal` element
   becomes `.in-view`; child elements with `k-*` classes animate based
   on that. Use inline `style={{ "--d": "120ms" }}` for per-child stagger.
   ───────────────────────────────────────────────────────────────────── */
[data-kinetic] .k-rise {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0ms;
  transition-delay: var(--d, 0ms);
}
[data-kinetic].in-view .k-rise { opacity: 1; transform: translateY(0); }

[data-kinetic] .k-fade {
  opacity: 0;
  transition: opacity 750ms ease-out;
  transition-delay: 0ms;
  transition-delay: var(--d, 0ms);
}
[data-kinetic].in-view .k-fade { opacity: 1; }

[data-kinetic] .k-rail {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0ms;
  transition-delay: var(--d, 0ms);
}
[data-kinetic].in-view .k-rail { transform: scaleX(1); }

[data-kinetic] .k-pop {
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 550ms ease-out,
              transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: 0ms;
  transition-delay: var(--d, 0ms);
}
[data-kinetic].in-view .k-pop { opacity: 1; transform: scale(1); }

[data-kinetic] .k-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-kinetic].in-view .k-stagger > * { opacity: 1; transform: translateY(0); }
[data-kinetic] .k-stagger > *:nth-child(1) { transition-delay: 80ms; }
[data-kinetic] .k-stagger > *:nth-child(2) { transition-delay: 180ms; }
[data-kinetic] .k-stagger > *:nth-child(3) { transition-delay: 280ms; }
[data-kinetic] .k-stagger > *:nth-child(4) { transition-delay: 380ms; }
[data-kinetic] .k-stagger > *:nth-child(5) { transition-delay: 480ms; }
[data-kinetic] .k-stagger > *:nth-child(6) { transition-delay: 580ms; }

@media (prefers-reduced-motion: reduce) {
  [data-kinetic] .k-rise,
  [data-kinetic] .k-fade,
  [data-kinetic] .k-rail,
  [data-kinetic] .k-pop,
  [data-kinetic] .k-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Hero CT-scanner sweep — a single vertical hairline traversing the
   hero from edge to edge every 6 seconds. Pure CSS, no JS.
   The line is a thin gradient (red core, soft falloff) and rides
   inside .hero-scan-sweep — added in HeroSection.jsx.
   ───────────────────────────────────────────────────────────────────── */
.hero-scan-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Mask vertical edges so the line births/dies softly instead of popping */
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.hero-scan-sweep::before {
  content: "";
  position: absolute;
  top: -4%;
  bottom: -4%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200, 38, 76, 0.55) 18%,
    rgba(200, 38, 76, 0.95) 50%,
    rgba(200, 38, 76, 0.55) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 8px rgba(200, 38, 76, 0.55),
    0 0 16px rgba(200, 38, 76, 0.35);
  transform: translateX(-100vw);
  animation: heroScanSweep 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  will-change: transform, opacity;
}
@keyframes heroScanSweep {
  0%   { transform: translateX(-2vw);   opacity: 0; }
  10%  { opacity: 1; }
  50%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(102vw);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scan-sweep::before { animation: none !important; opacity: 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   Dark-mode for the AUTH'D PORTAL (sidebar + every page wrapped in Layout)
   Scoped to .portal-shell so the landing page is unaffected.
   Re-uses zinc tokens — same two-color discipline (near-black + red).
   ───────────────────────────────────────────────────────────────────── */
html.dark .portal-shell { background-color: #09090B; color: #E4E4E7; }
html.dark .portal-shell .bg-white { background-color: #18181B !important; }
html.dark .portal-shell .bg-slate-50,
html.dark .portal-shell .bg-zinc-50 { background-color: #0F0F11 !important; }
html.dark .portal-shell .bg-slate-100,
html.dark .portal-shell .bg-zinc-100 { background-color: rgba(255,255,255,0.04) !important; }
html.dark .portal-shell .text-slate-900,
html.dark .portal-shell .text-zinc-900 { color: #FAFAFA !important; }
html.dark .portal-shell .text-slate-700,
html.dark .portal-shell .text-zinc-700 { color: #D4D4D8 !important; }
html.dark .portal-shell .text-slate-600,
html.dark .portal-shell .text-zinc-600 { color: #A1A1AA !important; }
html.dark .portal-shell .text-slate-500,
html.dark .portal-shell .text-zinc-500 { color: #71717A !important; }
html.dark .portal-shell .text-slate-400,
html.dark .portal-shell .text-zinc-400 { color: #52525B !important; }
html.dark .portal-shell .border-slate-200,
html.dark .portal-shell .border-slate-300,
html.dark .portal-shell .border-zinc-200,
html.dark .portal-shell .border-zinc-300 { border-color: rgba(255,255,255,0.08) !important; }
html.dark .portal-shell .industrial-card {
    background-color: #18181B !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* Inputs & form fields */
html.dark .portal-shell input,
html.dark .portal-shell textarea,
html.dark .portal-shell select {
    background-color: #18181B;
    color: #E4E4E7;
    border-color: rgba(255,255,255,0.1);
}
html.dark .portal-shell input::placeholder,
html.dark .portal-shell textarea::placeholder { color: #52525B; }
/* Status pills (amber/emerald/rose) — keep readable on dark */
html.dark .portal-shell .bg-amber-100 { background-color: rgba(245, 158, 11, 0.15) !important; }
html.dark .portal-shell .text-amber-800 { color: #FCD34D !important; }
html.dark .portal-shell .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.15) !important; }
html.dark .portal-shell .text-emerald-800 { color: #6EE7B7 !important; }
html.dark .portal-shell .bg-rose-100 { background-color: rgba(244, 63, 94, 0.15) !important; }
html.dark .portal-shell .text-rose-800 { color: #FDA4AF !important; }
/* Subtle hover surfaces */
html.dark .portal-shell .hover\:bg-slate-50:hover,
html.dark .portal-shell .hover\:bg-zinc-50:hover { background-color: rgba(255,255,255,0.04) !important; }
/* Primary brand buttons stay red in dark mode */
html.dark .portal-shell button.bg-slate-900,
html.dark .portal-shell button.bg-zinc-900 {
    background-color: #8B1A2C !important;
    color: white !important;
}

/* Premium polish: table headers, divider rows, code/mono */
html.dark .portal-shell thead { background-color: #0F0F11 !important; }
html.dark .portal-shell tbody tr:hover { background-color: rgba(255,255,255,0.03) !important; }
html.dark .portal-shell .divide-zinc-200 > * + *,
html.dark .portal-shell .divide-slate-200 > * + * { border-color: rgba(255,255,255,0.06) !important; }
html.dark .portal-shell code,
html.dark .portal-shell pre { background-color: rgba(255,255,255,0.04) !important; color: #FAFAFA !important; }

/* Glass effect for sticky headers / sidebar in dark mode */
html.dark .portal-shell header.sticky { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }

/* Subtle inner border highlight for industrial-cards (premium feel) */
html.dark .portal-shell .industrial-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
html.dark .portal-shell .industrial-card:hover {
    border-color: rgba(225,29,72,0.4) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(225,29,72,0.1);
}

/* Light-mode portal polish — subtle premium shadows on cards */
html:not(.dark) .portal-shell .industrial-card { box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
html:not(.dark) .portal-shell .industrial-card:hover {
    border-color: rgba(225,29,72,0.4) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

/* ──────────────────────────────────────────────────────────────────────
   Hero search spotlight — a soft rose halo that breathes underneath
   the PublicSearchBar to make it the most prominent CTA above the fold
   without changing the bar's actual dimensions. Honours reduced-motion.
   ────────────────────────────────────────────────────────────────────── */
.hero-search-glow {
    background: radial-gradient(60% 80% at 50% 50%, rgba(225,29,72,0.32) 0%, rgba(225,29,72,0.10) 45%, transparent 75%);
    animation: heroSearchBreathe 4.2s ease-in-out infinite;
}
html.dark .hero-search-glow {
    background: radial-gradient(60% 80% at 50% 50%, rgba(225,29,72,0.45) 0%, rgba(225,29,72,0.18) 45%, transparent 75%);
}
@keyframes heroSearchBreathe {
    0%, 100% { opacity: 0.55; transform: scale(0.98); }
    50%      { opacity: 0.95; transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-search-glow { animation: none; opacity: 0.6; }
}



/* ══════════════════════════════════════════════════════════════════════
   ATELIER — Editorial luxury visual system (Hermès / Pagani territory)
   ══════════════════════════════════════════════════════════════════════
   Powers the /joy-vellox page. Color tokens are scoped to .atelier so the
   rest of the app is untouched. Refined oxblood + gold sub-accent palette,
   with proper light AND dark modes via [data-mode="light"|"dark"]. Theme
   selector ([data-atelier-theme]) layers on top to tweak the accent. */
.atelier {
    /* Defaults — overridden by [data-mode] below */
    --atelier-bg: #0F0B0A;
    --atelier-bg-elev: #1A1411;
    --atelier-fg: #F5EFE8;
    --atelier-fg-dim: rgba(245,239,232,0.55);
    --atelier-line: rgba(245,239,232,0.10);
    --atelier-accent: #B22845;
    --atelier-accent-soft: rgba(178,40,69,0.14);
    --atelier-accent-glow: rgba(178,40,69,0.42);
    --atelier-gold: #C5A357;
    --atelier-overlay: rgba(15,11,10,0.55);    /* hero text-readability scrim */
    color: var(--atelier-fg);
    background: var(--atelier-bg);
    position: relative;
    overflow-x: clip;
    transition: background 360ms ease, color 360ms ease;
}

/* DARK mode (default) — warm charcoal + sophisticated burgundy + gold */
.atelier[data-mode="dark"] {
    --atelier-bg: #0F0B0A;
    --atelier-bg-elev: #1A1411;
    --atelier-fg: #F5EFE8;
    --atelier-fg-dim: rgba(245,239,232,0.55);
    --atelier-line: rgba(245,239,232,0.10);
    --atelier-gold: #C5A357;
    --atelier-overlay: rgba(15,11,10,0.55);
}
/* LIGHT mode — warm cream paper + deep oxblood + brass gold, magazine-tier */
.atelier[data-mode="light"] {
    --atelier-bg: #F8F5F0;
    --atelier-bg-elev: #FFFFFF;
    --atelier-fg: #1A1410;
    --atelier-fg-dim: rgba(26,20,16,0.58);
    --atelier-line: rgba(26,20,16,0.10);
    --atelier-gold: #9C7A2E;
    --atelier-overlay: rgba(26,20,16,0.30);    /* lighter scrim over hero image */
}

/* Theme accents — per-mode pair to keep contrast right in both modes.
   Crimson default is now a deep oxblood (light) / refined burgundy (dark),
   not the bright clashy red. */
.atelier[data-atelier-theme="crimson"][data-mode="dark"] {
    --atelier-accent: #B22845;
    --atelier-accent-soft: rgba(178,40,69,0.14);
    --atelier-accent-glow: rgba(178,40,69,0.42);
}
.atelier[data-atelier-theme="crimson"][data-mode="light"] {
    --atelier-accent: #7D1A2F;
    --atelier-accent-soft: rgba(125,26,47,0.10);
    --atelier-accent-glow: rgba(125,26,47,0.35);
}
.atelier[data-atelier-theme="radioactive"][data-mode="dark"] {
    /* iter-191c · Venom · acid-green stripped permanently. Now a
       sinister forged-carbon steel — pure aggression, zero radioactive. */
    --atelier-accent: #5B6770; --atelier-accent-soft: rgba(91,103,112,0.18); --atelier-accent-glow: rgba(91,103,112,0.42);
}
.atelier[data-atelier-theme="radioactive"][data-mode="light"] {
    --atelier-accent: #2A2D32; --atelier-accent-soft: rgba(42,45,50,0.10); --atelier-accent-glow: rgba(42,45,50,0.28);
}
.atelier[data-atelier-theme="stealth"][data-mode="dark"] {
    --atelier-accent: #E5E5E5; --atelier-accent-soft: rgba(255,255,255,0.08); --atelier-accent-glow: rgba(255,255,255,0.32);
}
.atelier[data-atelier-theme="stealth"][data-mode="light"] {
    --atelier-accent: #1A1410; --atelier-accent-soft: rgba(26,20,16,0.08); --atelier-accent-glow: rgba(26,20,16,0.22);
}
.atelier[data-atelier-theme="royalty"][data-mode="dark"] {
    /* iter-191c · Regent · neon gold killed permanently. Muted
       champagne-tungsten only — Mansory-spec, never jewellery-shop. */
    --atelier-accent: #B59A6B; --atelier-accent-soft: rgba(181,154,107,0.12); --atelier-accent-glow: rgba(181,154,107,0.32);
}
.atelier[data-atelier-theme="royalty"][data-mode="light"] {
    --atelier-accent: #7A6440; --atelier-accent-soft: rgba(122,100,64,0.08); --atelier-accent-glow: rgba(122,100,64,0.24);
}

/* ──────────────────────────────────────────────────────────────────
   ATELIER · LIGHT-MODE CONTRAST RESCUE — iter-125c
   ──────────────────────────────────────────────────────────────────
   The Vellox surface was originally built natively in dark mode and
   peppered with hardcoded `text-white`, `text-white/40`, `text-white/60`,
   `text-white/70` Tailwind classes. In LIGHT mode those classes become
   white text on a cream paper background — a critical WCAG failure
   (the user audit flagged unreadable spec labels like "Down-force",
   "Body weight", "Wheels", etc.).

   Strategy: when the Atelier surface is in light mode, transparently
   remap every white-text variant to the atelier-fg / atelier-fg-dim
   token. Elements that legitimately sit ON a dark image overlay carry
   `data-on-dark` (see `<div data-on-dark>` wrappers in JoyVellox.jsx)
   and are exempted so they keep their white text against the hero
   silhouette.
   ────────────────────────────────────────────────────────────────── */
.atelier[data-mode="light"] .text-white,
.atelier[data-mode="light"] [class*="text-white/"] {
    color: var(--atelier-fg) !important;
}
/* Lower-opacity white variants → atelier-fg-dim so the muted hierarchy
   ("One uncompromising build.", body copy, hint lines) survives. */
.atelier[data-mode="light"] .text-white\/40,
.atelier[data-mode="light"] .text-white\/45,
.atelier[data-mode="light"] .text-white\/55,
.atelier[data-mode="light"] .text-white\/60 {
    color: var(--atelier-fg-dim) !important;
}
/* Keep crisp contrast for the spec category eyebrows / labels. */
.atelier[data-mode="light"] .text-white\/70,
.atelier[data-mode="light"] .text-white\/80,
.atelier[data-mode="light"] .text-white\/85,
.atelier[data-mode="light"] .text-white\/90 {
    color: var(--atelier-fg) !important;
    opacity: 0.92;
}
/* ── EXEMPTIONS ──────────────────────────────────────────────────
   Any element that legitimately renders on top of a dark image /
   gradient overlay carries `data-on-dark`. Restore white text there
   so the hero overlay copy stays legible. */
.atelier[data-mode="light"] [data-on-dark] .text-white,
.atelier[data-mode="light"] [data-on-dark] [class*="text-white/"],
.atelier[data-mode="light"] [data-on-dark].text-white,
.atelier[data-mode="light"] [data-on-dark][class*="text-white/"] {
    color: #FFFFFF !important;
    opacity: 1;
}
.atelier[data-mode="light"] [data-on-dark] .text-white\/40,
.atelier[data-mode="light"] [data-on-dark] .text-white\/60,
.atelier[data-mode="light"] [data-on-dark] .text-white\/70 {
    color: rgba(255,255,255,0.85) !important;
}

/* Spec readout panel — its background is `var(--atelier-bg-elev)`
   which in light mode = pure white. Force a touch of contrast on the
   surrounding hairline border so the panel doesn't dissolve. */
.atelier[data-mode="light"] [data-testid="atelier-spec-readout"] {
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 32px -16px rgba(0,0,0,0.10);
}
/* Spec module heading + body copy: ensure deep charcoal, font-weight 500. */
.atelier[data-mode="light"] [data-testid="atelier-spec-readout"] .font-display {
    color: var(--atelier-fg) !important;
}
.atelier[data-mode="light"] [data-testid="atelier-spec-readout"] p {
    color: var(--atelier-fg-dim) !important;
}
/* Spec values that previously read as light peach (e.g. "-127 KG",
   "AERO REBUILT") get bumped to deep oxblood at semibold. */
.atelier[data-mode="light"] [data-testid="atelier-spec-readout"] [style*="--atelier-accent"],
.atelier[data-mode="light"] .vellox-spec-value {
    color: #7D1A2F !important;
    font-weight: 600;
}


/* ─── New Mansory-tier themes (Feb 2026 upgrade) ────────────────────────

/* ──────────────────────────────────────────────────────────────────
   ATELIER COMING-SOON SUB-PAGES — iter-125d
   Light + dark adaptive surface for `/joy-vellox/{slug}` so flipping
   the AtelierMenu Sun/Moon on the main Vellox surface propagates here.
   The component (AtelierComingSoon.jsx) now reads `MODE_KEY` from
   localStorage and applies `data-mode={mode}` on its root — these
   class hooks drive the actual visuals.
   ────────────────────────────────────────────────────────────────── */
.atelier-cs-scrim {
    background: linear-gradient(180deg, rgba(10,8,7,0.55) 0%, rgba(10,8,7,0.92) 60%, #0A0807 100%);
}
.atelier[data-mode="light"] .atelier-cs-scrim {
    background: linear-gradient(180deg, rgba(248,245,240,0.55) 0%, rgba(248,245,240,0.92) 60%, #F8F5F0 100%);
}
.atelier-cs-pillar {
    background: linear-gradient(180deg, rgba(20,17,12,0.55) 0%, rgba(10,8,7,0.85) 100%);
    border-color: rgba(197,163,87,0.32);
}
.atelier[data-mode="light"] .atelier-cs-pillar {
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(247,242,234,0.92) 100%);
    border-color: rgba(156,122,46,0.32);
    box-shadow: 0 8px 24px -16px rgba(0,0,0,0.10);
}
.atelier-cs-chip {
    background: rgba(20,17,12,0.55);
}
.atelier[data-mode="light"] .atelier-cs-chip {
    background: rgba(255,255,255,0.85);
}
.atelier-cs-link {
    color: rgba(255,255,255,0.92);
}
.atelier-cs-link:hover {
    color: #FFFFFF;
}
.atelier[data-mode="light"] .atelier-cs-link {
    color: var(--atelier-accent);
}
.atelier[data-mode="light"] .atelier-cs-link:hover {
    color: var(--atelier-fg);
}
.atelier-cs-input::placeholder {
    color: rgba(245,239,229,0.45);
}
.atelier[data-mode="light"] .atelier-cs-input::placeholder {
    color: rgba(26,20,16,0.45);
}
.atelier[data-mode="light"] .atelier-cs-input {
    background-color: rgba(255,255,255,0.6);
}
/* The hero background image is dark-leaning (carbon weave etc.) — in
   light mode dim it further so it doesn't fight the cream paper. */
.atelier[data-mode="light"] [data-testid^="atelier-coming-soon-"] > [aria-hidden="true"]:not(.atelier-cs-scrim) {
    opacity: 0.09 !important;
    filter: grayscale(0.6) contrast(1.0) brightness(1.08) !important;
}


   Three palettes layered on top of the original four, designed for the
   "controversial opulence" that Mansory is famous for. Forged Carbon is
   the new default (charcoal + rose-gold copper). Titanium leans into
   acid-green over gunmetal for wide-body aggression. Desert Raid mirrors
   the Dubai/Middle-East livery — sand-blasted base with a gloss-red pop. */
.atelier[data-atelier-theme="forgedcarbon"][data-mode="dark"] {
    --atelier-bg: #141312;
    --atelier-bg-elev: #1F1D1B;
    --atelier-fg: #F2EDE3;
    --atelier-line: rgba(230,160,121,0.10);
    --atelier-gold: #E6A079;             /* rose-gold / liquid copper */
    --atelier-accent: #E6A079;
    --atelier-accent-soft: rgba(230,160,121,0.14);
    --atelier-accent-glow: rgba(230,160,121,0.45);
}
.atelier[data-atelier-theme="forgedcarbon"][data-mode="light"] {
    --atelier-bg: #EDE8E0;
    --atelier-bg-elev: #F7F2EA;
    --atelier-fg: #1A1612;
    --atelier-line: rgba(166,110,79,0.16);
    --atelier-gold: #A66E4F;
    --atelier-accent: #A66E4F;
    --atelier-accent-soft: rgba(166,110,79,0.10);
    --atelier-accent-glow: rgba(166,110,79,0.32);
}
.atelier[data-atelier-theme="titanium"][data-mode="dark"] {
    /* iter-193 · Voltage · Voltaic Sapphire palette. Electric blue
       pigment + gunmetal chassis tones (still zero acid-green). */
    --atelier-bg: #161A1F;
    --atelier-bg-elev: #1F262E;
    --atelier-fg: #F5F7F9;
    --atelier-line: rgba(23,105,255,0.10);
    --atelier-gold: #1769FF;             /* electric sapphire */
    --atelier-accent: #1769FF;
    --atelier-accent-soft: rgba(23,105,255,0.14);
    --atelier-accent-glow: rgba(23,105,255,0.45);
}
.atelier[data-atelier-theme="titanium"][data-mode="light"] {
    --atelier-bg: #E5EBF2;
    --atelier-bg-elev: #F0F4F9;
    --atelier-fg: #0F1A2E;
    --atelier-line: rgba(15,26,46,0.12);
    --atelier-gold: #0E4DB8;
    --atelier-accent: #0E4DB8;
    --atelier-accent-soft: rgba(14,77,184,0.10);
    --atelier-accent-glow: rgba(14,77,184,0.30);
}
.atelier[data-atelier-theme="desertraid"][data-mode="dark"] {
    --atelier-bg: #1F1B16;
    --atelier-bg-elev: #2A251E;
    --atelier-fg: #F4EAD5;
    --atelier-line: rgba(244,234,213,0.10);
    --atelier-gold: #C8331A;             /* gloss red pop */
    --atelier-accent: #C8331A;
    --atelier-accent-soft: rgba(200,51,26,0.14);
    --atelier-accent-glow: rgba(200,51,26,0.45);
}
.atelier[data-atelier-theme="desertraid"][data-mode="light"] {
    --atelier-bg: #EFE7D6;
    --atelier-bg-elev: #FAF3E2;
    --atelier-fg: #2A2218;
    --atelier-line: rgba(42,34,24,0.14);
    --atelier-gold: #9A2511;
    --atelier-accent: #9A2511;
    --atelier-accent-soft: rgba(154,37,17,0.10);
    --atelier-accent-glow: rgba(154,37,17,0.32);
}

/* Forged-carbon texture overlay — subtle woven SVG pattern that reads
   as carbon weave on dark, embossed leather on light. Always sits BELOW
   content (z=2) and respects pointer-events. */
.atelier-carbon-weave {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background-image:
      linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.018) 75%, rgba(255,255,255,0.018)),
      linear-gradient(-45deg, rgba(255,255,255,0.018) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.018) 75%, rgba(255,255,255,0.018));
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    mix-blend-mode: overlay;
    opacity: 0.7;
}
.atelier[data-mode="light"] .atelier-carbon-weave {
    opacity: 0.42;
    mix-blend-mode: multiply;
}

/* Wide-body display type — heavier, condensed-feeling sans for Mansory
   aspiration. Falls back gracefully to system stacks. */
.atelier-display-aggressive {
    font-family: "Integral CF", "Microgramma", "Bebas Neue", "Inter Tight", "Inter", system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: -0.045em;
    font-stretch: expanded;
}

/* Paper / charcoal texture — sub-1KB SVG paper grain.
   In light mode we tile a warm paper noise, in dark a dust speckle. */
.atelier-grain {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27><filter id=%27n%27><feTurbulence type=%27fractalNoise%27 baseFrequency=%270.85%27 numOctaves=%272%27 stitchTiles=%27stitch%27/></filter><rect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27 opacity=%270.55%27/></svg>");
    background-size: 200px 200px;
    animation: atelierGrainShift 6s steps(6) infinite;
}
.atelier[data-mode="dark"] .atelier-grain { opacity: 0.05; mix-blend-mode: overlay; }
.atelier[data-mode="light"] .atelier-grain { opacity: 0.06; mix-blend-mode: multiply; }
@keyframes atelierGrainShift {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-8px, 4px); }
    40%  { transform: translate(6px, -6px); }
    60%  { transform: translate(-4px, 8px); }
    80%  { transform: translate(7px, 3px); }
    100% { transform: translate(0,0); }
}

/* Editorial divider — thin gold hairline used as horizontal rule */
.atelier-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--atelier-gold) 30%, var(--atelier-gold) 70%, transparent);
    opacity: 0.4;
}

/* Hero — cinematic image stack with a 16s cross-fade Ken Burns pan. */
.atelier-hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; animation: atelierHeroCycle 16s ease-in-out infinite;
}
.atelier-hero-slide:nth-child(1) { animation-delay:  0s; }
.atelier-hero-slide:nth-child(2) { animation-delay:  4s; }
.atelier-hero-slide:nth-child(3) { animation-delay:  8s; }
.atelier-hero-slide:nth-child(4) { animation-delay: 12s; }
@keyframes atelierHeroCycle {
    0%   { opacity: 0; transform: scale(1.04); }
    6%   { opacity: 1; }
    25%  { opacity: 1; transform: scale(1.10); }
    31%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Atelier scan line — sweeps once on hero entry. Uses the gold sub-accent
   in dark mode for a more editorial feel; falls back to accent in light. */
.atelier-scan {
    position: absolute; left: 0; right: 0; height: 1px; top: 0;
    background: linear-gradient(90deg, transparent, var(--atelier-gold), transparent);
    box-shadow: 0 0 14px var(--atelier-accent-glow);
    animation: atelierScan 3.6s cubic-bezier(0.6,0.05,0.4,0.95) 0.4s 1 both;
    opacity: 0;
}
@keyframes atelierScan {
    0%   { opacity: 0; top: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; top: 100%; }
}

/* Primary CTA — solid fill with gold hairline rising on hover, restrained.
   Replaces the loud red ghost border with a more editorial press-button. */
.atelier-cta-primary {
    position: relative;
    box-shadow: 0 1px 0 var(--atelier-gold) inset, 0 0 0 1px rgba(0,0,0,0.04);
}
.atelier-cta-primary::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--atelier-gold);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 380ms cubic-bezier(0.2,0.7,0.2,1);
}
.atelier-cta-primary:hover::after { transform: scaleX(1); }
.atelier-cta-primary:hover { filter: brightness(1.08); }

/* Manifesto phrase reveal — fades in + slight rise on scroll-in. */
.atelier-phrase { opacity: 0; transform: translateY(28px); transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2,0.7,0.2,1); }
.atelier-phrase.in-view { opacity: 1; transform: translateY(0); }

/* Spec map hotspot — pulsing ring around clickable zones on the silhouette. */
.atelier-hotspot {
    position: absolute; width: 22px; height: 22px; border-radius: 999px;
    border: 1.5px solid var(--atelier-accent);
    background: rgba(13,13,13,0.55);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.atelier-hotspot::before {
    content: ""; position: absolute; inset: -8px; border-radius: 999px;
    border: 1px solid var(--atelier-accent-glow);
    animation: atelierHotspotPulse 2.4s ease-out infinite;
}
.atelier-hotspot:hover, .atelier-hotspot[data-active="true"] {
    transform: translate(-50%, -50%) scale(1.18);
    box-shadow: 0 0 0 4px var(--atelier-accent-soft), 0 0 22px var(--atelier-accent-glow);
}
@keyframes atelierHotspotPulse {
    0%   { transform: scale(0.9); opacity: 0.9; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Theme swatch dot. */
.atelier-swatch { width: 14px; height: 14px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 0 12px var(--atelier-accent-glow); }

/* Configurator preview cross-fade — each theme image fades in over 0.7s
   when its [data-active="true"]. Subtle scale to keep the chassis breathing. */
.atelier-preview-slide {
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 1400ms cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}
.atelier-preview-slide[data-active="true"] {
    opacity: 1;
    transform: scale(1);
}

/* JOE bottom-sheet rise — slick iOS-style enter animation on mobile.
   Used by GuardianBot panel on screens < 640px. */
@keyframes joeSheetRise {
    0%   { transform: translateY(100%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
.joe-sheet-rise { animation: joeSheetRise 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) { .joe-sheet-rise { animation: none; } }

/* Atelier page hides the global GuardianBot floating trigger — the
   Atelier surface ships its own paired Atelier-themed JOE pill inside
   the bottom-left AtelierControlRail. Without this, the user would see
   two competing JOE pills (red brand vs. gold Atelier livery). */
body:has(.atelier) [data-testid="guardian-bot-trigger"] {
    display: none !important;
}

/* Honour reduced motion: kill the loop animations. */
@media (prefers-reduced-motion: reduce) {
    .atelier-grain, .atelier-hero-slide, .atelier-scan, .atelier-hotspot::before { animation: none !important; }
    .atelier-hero-slide { opacity: 1; }
    .atelier-hero-slide:not(:first-child) { opacity: 0; }
}


/* ──────────────────────────────────────────────────────────────────────
   LIGHT MODE — utility overrides
   Map Tailwind text-white* and bg-black/* utilities to atelier tokens so
   the sections beneath the cinematic hero stay legible against the warm
   cream paper background.  Hero photography overlays opt out via the
   `data-on-dark` attribute on their nearest scope.
   ────────────────────────────────────────────────────────────────────── */
.atelier[data-mode="light"] .text-white                    { color: var(--atelier-fg); }
.atelier[data-mode="light"] .text-white\/40                { color: rgba(26,20,16,0.45); }
.atelier[data-mode="light"] .text-white\/45                { color: rgba(26,20,16,0.50); }
.atelier[data-mode="light"] .text-white\/55                { color: rgba(26,20,16,0.55); }
.atelier[data-mode="light"] .text-white\/60                { color: rgba(26,20,16,0.62); }
.atelier[data-mode="light"] .text-white\/70                { color: rgba(26,20,16,0.72); }
.atelier[data-mode="light"] .text-white\/80                { color: rgba(26,20,16,0.80); }
.atelier[data-mode="light"] .text-white\/90                { color: rgba(26,20,16,0.88); }
.atelier[data-mode="light"] .hover\:text-white:hover       { color: var(--atelier-fg); }
.atelier[data-mode="light"] .hover\:text-white\/80:hover   { color: rgba(26,20,16,0.80); }
.atelier[data-mode="light"] .bg-black\/80                  { background-color: rgba(15,11,10,0.78); }
.atelier[data-mode="light"] .hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(26,20,16,0.03); }
/* Spec map hotspot dot — use a darker translucent fill in light mode for contrast */
.atelier[data-mode="light"] .atelier-hotspot { background: rgba(15,11,10,0.45); }
.atelier[data-mode="light"] .atelier-swatch  { box-shadow: 0 0 0 1px rgba(26,20,16,0.18) inset, 0 0 12px var(--atelier-accent-glow); }

/* Hero / spec-photo opt-outs — text stays on dark photographic surfaces
   regardless of overall page mode. */
.atelier[data-mode="light"] [data-on-dark] .text-white                  { color: #FFFFFF; }
.atelier[data-mode="light"] [data-on-dark] .text-white\/40              { color: rgba(255,255,255,0.40); }
.atelier[data-mode="light"] [data-on-dark] .text-white\/45              { color: rgba(255,255,255,0.45); }
.atelier[data-mode="light"] [data-on-dark] .text-white\/55              { color: rgba(255,255,255,0.55); }
.atelier[data-mode="light"] [data-on-dark] .text-white\/60              { color: rgba(255,255,255,0.60); }
.atelier[data-mode="light"] [data-on-dark] .text-white\/70              { color: rgba(255,255,255,0.70); }
.atelier[data-mode="light"] [data-on-dark] .text-white\/80              { color: rgba(255,255,255,0.80); }
.atelier[data-mode="light"] [data-on-dark] .text-white\/90              { color: rgba(255,255,255,0.90); }
.atelier[data-mode="light"] [data-on-dark] .hover\:text-white:hover     { color: #FFFFFF; }
.atelier[data-mode="light"] [data-on-dark] .bg-black\/80                { background-color: rgba(0,0,0,0.78); }

/* Mode-toggle ring */
.atelier[data-mode="light"] [data-testid="atelier-mode-toggle"] { box-shadow: 0 4px 14px rgba(26,20,16,0.10); }
.atelier[data-mode="dark"]  [data-testid="atelier-mode-toggle"] { box-shadow: 0 4px 14px rgba(0,0,0,0.50); }

/* ──────────────────────────────────────────────────────────────────────
   Switch-to-Atelier preview flash — temporarily darkens the entire
   homepage with a gold-rimmed Atelier scrim before the deeplink fires.
   Triggered by adding `.joy-vellox-flash` to <html>; auto-removed
   2.2s later by the SwitchToVellox component.
   ────────────────────────────────────────────────────────────────────── */
html.joy-vellox-flash body {
    position: relative;
    pointer-events: none;
}
html.joy-vellox-flash body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        /* Gold-fleck dust — fine grain particles drifting across the
           obsidian scrim. Multi-layer radial-gradients fake a dense
           champagne-shimmer field without an actual <canvas>. The
           overall effect reads as "ash & gold leaf" dissolving in,
           perfectly on-brand for the Atelier hand-off. */
        radial-gradient(1.2px 1.2px at 12% 18%, rgba(232,210,140,0.85) 50%, transparent 100%),
        radial-gradient(1px 1px at 67% 27%, rgba(232,210,140,0.65) 50%, transparent 100%),
        radial-gradient(1.4px 1.4px at 82% 62%, rgba(255,236,170,0.85) 50%, transparent 100%),
        radial-gradient(1px 1px at 22% 74%, rgba(232,210,140,0.7) 50%, transparent 100%),
        radial-gradient(1.6px 1.6px at 45% 41%, rgba(255,236,170,0.9) 50%, transparent 100%),
        radial-gradient(1px 1px at 91% 14%, rgba(232,210,140,0.55) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 38% 88%, rgba(255,236,170,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 8% 52%, rgba(232,210,140,0.6) 50%, transparent 100%),
        radial-gradient(1.3px 1.3px at 73% 81%, rgba(255,236,170,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 55% 9%, rgba(232,210,140,0.7) 50%, transparent 100%),
        radial-gradient(ellipse at center, rgba(197,163,87,0.10), transparent 60%),
        radial-gradient(ellipse at 30% 30%, rgba(197,163,87,0.18), transparent 50%),
        rgba(10, 8, 7, 0.94);
    background-size:
        180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px,
        180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px,
        100% 100%, 100% 100%, 100% 100%;
    animation: joyAtelierFlash 2.2s ease-out forwards,
               joyAtelierFlecks 4s linear infinite;
    pointer-events: none;
}
/* Gold-fleck drift — particles slowly migrate down-right while the
   scrim itself fades in, giving a sense of "ambient dust catching
   light" instead of a static overlay. */
@keyframes joyAtelierFlecks {
    0%   { background-position:
              0 0, 0 0, 0 0, 0 0, 0 0,
              0 0, 0 0, 0 0, 0 0, 0 0,
              center, 30% 30%, 0 0; }
    100% { background-position:
              36px 28px, -28px 32px, 32px -24px, -24px 36px, 28px 28px,
              -32px -28px, 24px 36px, -36px 24px, 32px 32px, -28px -32px,
              center, 30% 30%, 0 0; }
}
html.joy-vellox-flash body::before {
    content: "ENTERING JOY VELLOX";
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    color: #C5A357;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(11px, 2vw, 16px);
    letter-spacing: 0.5em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0;
    animation: joyAtelierLabel 2.2s ease-out forwards;
    pointer-events: none;
}
@keyframes joyAtelierFlash {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes joyAtelierLabel {
    0%   { opacity: 0; letter-spacing: 0.3em; }
    25%  { opacity: 1; letter-spacing: 0.5em; }
    78%  { opacity: 1; letter-spacing: 0.7em; }
    100% { opacity: 1; letter-spacing: 0.9em; }
}
@media (prefers-reduced-motion: reduce) {
    html.joy-vellox-flash body::after, html.joy-vellox-flash body::before { animation-duration: 400ms; }
}


/* ──────────────────────────────────────────────────────────────────────
   Return-to-HQ reverse flash — cream/paper wash + "RETURNING TO
   HEADQUARTERS" label. Mirrors `joy-vellox-flash` in reverse so the
   dual-domain hop reads as one cinematic dissolve. Triggered by adding
   `.joy-hq-flash` to <html> from the ReturnToHQ component on /joy-vellox.
   ────────────────────────────────────────────────────────────────────── */
html.joy-hq-flash body {
    position: relative;
    pointer-events: none;
}
html.joy-hq-flash body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        radial-gradient(ellipse at center, rgba(200,38,76,0.06), transparent 65%),
        rgba(248, 242, 230, 0.97);
    animation: joyHqFlash 2.2s ease-out forwards;
    pointer-events: none;
}
html.joy-hq-flash body::before {
    content: "RETURNING TO HEADQUARTERS";
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    color: #3F0B1B;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: clamp(11px, 2vw, 16px);
    letter-spacing: 0.5em;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0;
    animation: joyHqLabel 2.2s ease-out forwards;
    pointer-events: none;
}
@keyframes joyHqFlash {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes joyHqLabel {
    0%   { opacity: 0; letter-spacing: 0.3em; }
    25%  { opacity: 1; letter-spacing: 0.5em; }
    78%  { opacity: 1; letter-spacing: 0.7em; }
    100% { opacity: 1; letter-spacing: 0.9em; }
}
@media (prefers-reduced-motion: reduce) {
    html.joy-hq-flash body::after, html.joy-hq-flash body::before { animation-duration: 400ms; }
}


/* ── Header logo ignition (first-paint per session) ─────────────────
   Gold scan-line sweeps left → right across the brand lockup; logo
   image + wordmark settle in with a soft fade + scale. Reduced-motion
   users skip via the React guard in StickyHeader. */
@keyframes joyLogoIgnite {
    0%   { left: 0%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@keyframes joyLogoSettle {
    from { opacity: 0; filter: blur(6px); transform: translateY(2px) scale(0.96); }
    to   { opacity: 1; filter: blur(0);    transform: translateY(0) scale(1); }
}

/* ── Floating JOE · ambient breathing glow ───────────────────────────
   Gentle crimson halo that pulses on a 3.6s cycle when the pill is idle.
   Pauses on hover/focus so it never competes with the user's interaction
   beat. Honors reduced-motion. */
@keyframes joeBreathing {
    0%, 100% {
        box-shadow:
            0 18px 44px -14px rgba(139,26,44,0.55),
            0 0 0 0 rgba(232,164,176,0.0),
            0 0 22px 0 rgba(139,26,44,0.25);
    }
    50% {
        box-shadow:
            0 22px 50px -12px rgba(139,26,44,0.70),
            0 0 0 8px rgba(232,164,176,0.06),
            0 0 38px 4px rgba(139,26,44,0.45);
    }
}
.joe-breathing {
    animation: joeBreathing 3.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    /* Promote to its own compositor layer so the animated box-shadow
       doesn't repaint the whole document on every frame. Without this,
       sibling text inputs (e.g. admin product forms) suffer keystroke
       lag on iOS Safari and lower-end Android because the entire view
       must re-rasterize at 60fps to keep the glow in sync. */
    will-change: box-shadow, transform;
    transform: translateZ(0);
    contain: layout style paint;
}
.joe-breathing:hover,
.joe-breathing:focus-visible {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .joe-breathing { animation: none; }
}

/* Suppress the heavy breathing animation entirely inside the admin
   shell (any route under /admin) and on the workshop /dashboard so
   typing in those forms is never bottlenecked by paint cost. The
   ambient glow is purely decorative — the floating pill remains
   visible and clickable, it just doesn't pulse on those pages.       */
body.portal-mode .joe-breathing,
[data-admin-shell="true"] .joe-breathing {
    animation: none !important;
}


/* ── Floating JOE chat trigger · ghost-when-idle ─────────────────────
   Per user direction the bottom-right JOE pill must NOT block content
   it floats over. The pill defaults to a translucent state: panel sits
   at ~30% opacity, blurs the page underneath, and tucks its drop-shadow.
   On hover / focus / touch (and any time the panel is `:active`) it
   snaps to full opacity with the signature crimson backplate + halo so
   users still get a strong "engaged" signal when they reach for it.
   Reduced-motion users see only opacity transitions (no scale). */
.joe-trigger {
    will-change: opacity, transform, box-shadow, background-color;
    transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.joe-trigger--idle {
    background-color: rgba(10, 8, 7, 0.32);
    opacity: 0.55;
    box-shadow: 0 4px 14px -8px rgba(139, 26, 44, 0.25);
}
.joe-trigger--idle:hover,
.joe-trigger--idle:focus-visible,
.joe-trigger--idle:active {
    background-color: rgba(10, 8, 7, 0.92);
    opacity: 1;
    border-color: rgba(197, 163, 87, 0.6);
    box-shadow:
        0 18px 44px -14px rgba(139, 26, 44, 0.55),
        0 0 22px rgba(139, 26, 44, 0.35);
}
/* Touch devices fire :hover briefly on tap, but we also want a clean
   "press" beat so the pill fades up the moment the finger lands. */
@media (hover: none) {
    .joe-trigger--idle {
        opacity: 0.45;
    }
    .joe-trigger--idle:active {
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .joe-trigger { transition: opacity 120ms linear, background-color 120ms linear; }
}


/* ── Hero CTA · Trade Partner red-flash on tap ───────────────────────
   Bold 400ms crimson flash with white text inversion the moment the
   user activates the primary B2B card. Designed for the 30-second
   promo screen recording so the engaged state reads instantly on
   camera. The `:active` selector covers both touch (mobile) and
   mouse-down (desktop). Reduced-motion users get an instant solid
   colour swap without the keyframed pulse.                             */
.hero-cta-trade:active {
    animation: heroCtaTradeFlash 420ms cubic-bezier(0.4, 0, 0.2, 1) 1;
    background-color: #8B1A2C !important;
    border-color: #C8334F !important;
}
@keyframes heroCtaTradeFlash {
    0%   { background-color: #0A0807; box-shadow: 0 0 0 0 rgba(200,38,76,0.55); }
    18%  { background-color: #C8334F; box-shadow: 0 0 0 8px rgba(200,38,76,0.45); }
    55%  { background-color: #8B1A2C; box-shadow: 0 0 0 14px rgba(200,38,76,0.18); }
    100% { background-color: #8B1A2C; box-shadow: 0 0 0 0 rgba(200,38,76,0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-cta-trade:active { animation: none; }
}

/* ── Page slide-in-from-right (Atelier transition) ───────────────────
   When `<html>` carries `.joy-page-sliding`, a fixed full-screen black
   panel covers the page from x:100% → x:0% over ~480ms with a soft
   gold edge to mirror the Atelier brand. Used by the homepage hero's
   Atelier CTA so the route change reads as a cinematic OS app-switch
   on the 30-sec promo recording — not a hard navigation cut.            */
html.joy-page-sliding::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background:
      linear-gradient(90deg,
        rgba(197,163,87,0.85) 0px,
        rgba(197,163,87,0.55) 2px,
        rgba(10,8,7,0.99) 6px,
        #0A0807 100%);
    transform: translate3d(100%, 0, 0);
    animation: joyPageSlideInRight 480ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes joyPageSlideInRight {
    from { transform: translate3d(100%, 0, 0); }
    to   { transform: translate3d(0%,   0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    html.joy-page-sliding::after { animation: none; transform: none; opacity: 0.92; }
}

/* ─── JOY COCKPIT login terminal · trillion-dollar palette ─────────
   Tokens for the `.cockpit-root` page wrapper. Forces every input,
   label and button inside the obsidian auth terminal to render in
   the institutional dark style: pure black backplate, hairline
   white/[0.08] strokes, mono labels in tracked-out zinc, emerald
   accents for the live "system online" beat. The selectors are
   scoped to `.cockpit-root` so the rest of the app's light/dark
   surface rules are untouched.                                    */
.cockpit-root {
    color-scheme: dark;
    --cockpit-bg: #000000;
    --cockpit-surface: #09090B;
    --cockpit-line: rgba(255,255,255,0.08);
    --cockpit-line-strong: rgba(255,255,255,0.18);
    --cockpit-mono: 'JetBrains Mono','SF Mono','Roboto Mono',ui-monospace,monospace;
    --cockpit-green: #22C55E;
    --cockpit-crimson: #5E0F25;
}
/* Inputs */
.cockpit-root input[type="text"],
.cockpit-root input[type="email"],
.cockpit-root input[type="password"],
.cockpit-root input[type="tel"],
.cockpit-root input:not([type]),
.cockpit-root textarea {
    background-color: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid var(--cockpit-line) !important;
    color: #fafafa !important;
    border-radius: 2px !important;
    font-family: var(--cockpit-mono) !important;
    letter-spacing: 0.06em !important;
    font-size: 13.5px !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.cockpit-root input::placeholder,
.cockpit-root textarea::placeholder {
    color: rgba(161,161,170,0.55) !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 11px;
}
.cockpit-root input:focus,
.cockpit-root textarea:focus {
    outline: none !important;
    border-color: var(--cockpit-green) !important;
    box-shadow: 0 0 0 1px var(--cockpit-green), inset 0 0 0 1px rgba(34,197,94,0.10) !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}
/* Labels */
.cockpit-root label {
    color: rgba(228,228,231,0.7) !important;
    font-family: var(--cockpit-mono) !important;
    font-size: 9.5px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}
/* Tabs / segmented controls — the EmailAuthPanel uses role="tab" */
.cockpit-root [role="tab"] {
    border-radius: 2px !important;
    font-family: var(--cockpit-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.20em !important;
    font-size: 10.5px !important;
}
.cockpit-root [role="tab"][data-state="active"] {
    background-color: rgba(34,197,94,0.10) !important;
    color: var(--cockpit-green) !important;
    border-color: rgba(34,197,94,0.35) !important;
}
/* Primary submit buttons inside the terminal flip to crimson with a
   sharp emerald-edged keyline on hover/focus — the institutional
   "engage" signal. */
.cockpit-root button[type="submit"] {
    background-color: var(--cockpit-crimson) !important;
    border-color: var(--cockpit-crimson) !important;
    color: #ffffff !important;
    border-radius: 2px !important;
    font-family: var(--cockpit-mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.22em !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.cockpit-root button[type="submit"]:hover {
    background-color: #6E1424 !important;
    box-shadow: 0 0 0 1px var(--cockpit-green), 0 0 18px rgba(34,197,94,0.20) !important;
}
.cockpit-root button[type="submit"]:disabled {
    background-color: rgba(153,27,27,0.45) !important;
    color: rgba(255,255,255,0.55) !important;
    box-shadow: none !important;
}


/* ─── Mobile menu · sophisticated surfaces + tap-lift items ──────────
   Replaces the previous flat bg-white / bg-zinc-950 surface with
   bespoke "trillion-dollar" tonal backgrounds and adds a tactile
   tap-and-lift animation to every menu row so the user gets clear
   sensory feedback even though the rail itself is always expanded
   (no collapse). Light mode = warm museum-grade off-white with a
   subtle vertical gradient; dark mode = brightened obsidian (a touch
   lighter than pure black so type & borders breathe).               */
/* iter-145b · Phase 4 — Light-mode overlay = pure Atelier canvas
   `#F4F4F6` with a hairline crimson radial accent only. Removes the
   warm museum-grade gradient that read as "off-white" and tightened
   the surface against the rest of the Atelier palette. */
.joy-menu-overlay-bg {
    background:
        radial-gradient(ellipse 110% 70% at 50% -10%, rgba(139,26,44,0.04) 0%, transparent 60%),
        #F4F4F6;
}
:is(.dark, [data-theme="dark"]) .joy-menu-overlay-bg {
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232,164,176,0.09) 0%, transparent 60%),
        linear-gradient(180deg, #15131A 0%, #100E14 50%, #0A080E 100%);
}

/* Per-item tap-and-lift. The whole row gains a soft surface on hover
   and a clear ~6px lift + 1.02× scale on press so the user feels the
   row "engage" before the route fires. */
.joy-menu-item {
    transition:
        transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
        background-color 220ms ease,
        box-shadow 220ms ease,
        color 200ms ease;
    border-radius: 6px;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: -6px;
    margin-right: -6px;
}
.joy-menu-item:hover {
    background-color: rgba(139,26,44,0.05);
}
.joy-menu-item:active {
    transform: translateY(-4px) scale(1.04);
    background-color: rgba(139,26,44,0.10);
    box-shadow:
        0 14px 28px -14px rgba(139,26,44,0.45),
        0 0 0 1px rgba(139,26,44,0.35);
    z-index: 1;
}
.joy-menu-item:active .joy-menu-item-label {
    color: #8B1A2C;
    font-weight: 700;
}
:is(.dark, [data-theme="dark"]) .joy-menu-item:hover {
    background-color: rgba(232,164,176,0.07);
}
:is(.dark, [data-theme="dark"]) .joy-menu-item:active {

/* ─── Admin shell typing perf ──────────────────────────────────────
   The /admin/* and /dashboard portal-mode body class disables the
   heavy decorative animations (animate-pulse, hud-row-flicker,
   joe-breathing) inside form-heavy admin pages so keystrokes never
   queue behind a paint frame. The animations remain on public
   marketing pages where the input load is minimal.                  */
body.portal-mode .animate-pulse,
body.portal-mode .hud-row-flicker,
body.portal-mode .hero-reel-pulse {
    animation: none !important;
}
/* GPU-hint inputs and textareas in admin so the browser doesn't have
   to recompose ancestors on every character. Cheap; only matters when
   a parent has any will-change/transform context already.            */
body.portal-mode input,
body.portal-mode textarea,
body.portal-mode select {
    will-change: contents;
}

    background-color: rgba(232,164,176,0.14);
    box-shadow:
        0 14px 28px -14px rgba(232,164,176,0.40),
        0 0 0 1px rgba(232,164,176,0.45);
}
:is(.dark, [data-theme="dark"]) .joy-menu-item:active .joy-menu-item-label {
    color: #FBCFD8;
}
@media (prefers-reduced-motion: reduce) {
    .joy-menu-item,
    .joy-menu-item:active { transform: none !important; transition: background-color 120ms linear, color 120ms linear; }
}


/* ─── Global dark-mode = premium pitch-black finish ──────────────────
   Per user direction (post-iter-80) the whole dark theme reverts to a
   premium pure-black finish — the entire site reads like an Apple
   keynote stage. Every dark surface utility class drops back to
   near-pitch tones; only the crimson red accents (radial glows, grid
   hairlines, gradient CTAs) remain. */

/* Body / wrapper-level surfaces — pure pitch-black, no warmth bump. */
html.dark .bg-zinc-950:not(.cockpit-root):not([data-keep-dark]):not([data-cockpit]):not(.bg-cockpit),
html.dark .dark\:bg-zinc-950:not(.cockpit-root):not([data-keep-dark]):not([data-cockpit]):not(.bg-cockpit) {
    background-color: #09090b !important;
}
html.dark .dark\:bg-black:not(.cockpit-root):not([data-keep-dark]):not([data-cockpit]):not(.bg-cockpit) {
    background-color: #000000 !important;
}

/* Card-level surfaces — zinc-900 dropped back to deep pitch. */
html.dark .bg-zinc-900:not(.cockpit-root):not([data-keep-dark]):not([data-cockpit]),
html.dark .dark\:bg-zinc-900:not(.cockpit-root):not([data-keep-dark]):not([data-cockpit]) {
    background-color: #0a0a0c !important;
}

/* Borders stay subtle but visible (low-opacity white hairlines). */
html.dark .border-white\/5:not([data-keep-dark]),
html.dark .border-white\/\[0\.05\]:not([data-keep-dark]),
html.dark .border-white\/\[0\.06\]:not([data-keep-dark]):not(.cockpit-root *) {
    border-color: rgba(255,255,255,0.08) !important;
}

/* StickyHeader / footer chrome — keep them solid pitch black. */
html.dark header.bg-zinc-950,
html.dark footer.bg-zinc-950 {
    background-color: #09090b !important;
}



/* ════════════════════════════════════════════════════════════════════
   /login & /signup cockpit — scoped watermark + metallic gradient
   Per user direction (Iter 80), the JOY Automart watermark + the
   metallic #1c1c1e → #22202A vertical gradient appear ONLY behind
   the auth (login/signup) area — not site-wide. The whole
   `.cockpit-root` wrapper of /login & /signup gets a dedicated
   gradient backdrop and a centred logo at 10% opacity.

   The watermark uses `mix-blend-mode: lighten` so the white card
   background of the source logo (which is a JPG, not a transparent
   PNG) blends out into the dark canvas — the red brake-disc
   wordmark stays luminous and reads as a "no-background, direct
   logo" mark. `filter: brightness(...) contrast(...)` lifts the
   red so even at 10% opacity the wordmark is recognisable.
   ════════════════════════════════════════════════════════════════════ */
.cockpit-root {
    position: relative;
    /* Pitch-black premium finish — user direction post-iter-80.
       Replaces the prior #1c1c1e → #22202A metallic gradient. A very
       subtle vertical drift keeps depth without introducing grey. */
    background-image: linear-gradient(180deg, #000000 0%, #050505 55%, #09090b 100%) !important;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.cockpit-root::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Black-backed JOY wordmark — single big mark, centered, fixed. */
    background-image: url(/static/media/joy-automart-wordmark.2a73e65eb2bc2ac19577.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: min(88vmin, 1100px) auto;
    opacity: 0.10;
    /* `mix-blend-mode: screen` makes the PNG's pure-black background
       blend out (screen + black = backdrop unchanged) so the user only
       sees the chrome JOY wordmark + red brake disc — reading as a
       "direct logo, no background". */
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 32px rgba(200, 38, 76, 0.18));
}
.cockpit-root > * {
    /* All real content sits above the watermark layer. */
    position: relative;
    z-index: 1;
}
/* Make the inner aside / main columns transparent so the gradient +
   watermark show through them (they currently paint their own
   bg-black). */
.cockpit-root [data-testid="cockpit-left"],
.cockpit-root [data-testid="cockpit-right"] {
    background-color: transparent !important;
}


/* ════════════════════════════════════════════════════════════════════
   Iteration 83 — Sophisticated-fonts global polish
   The Iter-82 bulk sed lifted every standalone `text-zinc-400/500` to
   `text-zinc-700` (perfect for light mode), but on dark backgrounds
   `text-zinc-700` (#3f3f46) is illegible. Lift dark-mode rendering of
   every `text-zinc-{500,600,700}` to a sophisticated zinc-300 so
   ZERO copy reads as muddy grey anywhere on the platform.

   Cockpit-root excluded (Trading-desk green-on-black terminal needs
   its intentional dim chrome). Anything marked `data-keep-dim` is
   also exempt.
   ════════════════════════════════════════════════════════════════════ */
html.dark .text-zinc-700:not(.cockpit-root *):not([data-keep-dim]):not(.cockpit-root),
html.dark .text-zinc-600:not(.cockpit-root *):not([data-keep-dim]):not(.cockpit-root),
html.dark .text-zinc-500:not(.cockpit-root *):not([data-keep-dim]):not(.cockpit-root) {
    color: #d4d4d8 !important; /* zinc-300 */
}


/* ════════════════════════════════════════════════════════════════════
   Iter-83 · ChunkFallback shimmer
   ════════════════════════════════════════════════════════════════════ */
@keyframes joy-loading-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
    [data-testid="chunk-loading-screen"] [style*="joy-loading-shimmer"] {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Iter-83b · Light-mode legibility on dark hero sections
   text-zinc-700 on bg-black (#3f3f46 on #000) is illegible in light
   mode too. Force lift to zinc-300 wherever a zinc-700/600 sits
   inside an explicitly-dark ancestor.
   ════════════════════════════════════════════════════════════════════ */
.bg-black .text-zinc-700:not(.cockpit-root *):not([data-keep-dim]),
.bg-black .text-zinc-600:not(.cockpit-root *):not([data-keep-dim]),
.bg-zinc-950 .text-zinc-700:not(.cockpit-root *):not([data-keep-dim]),
.bg-zinc-950 .text-zinc-600:not(.cockpit-root *):not([data-keep-dim]) {
    color: #d4d4d8 !important; /* zinc-300 */
}

/* ════════════════════════════════════════════════════════════════════
   Iter-84 · Tesla-style auth-card "wake" scan line
   A 2px crimson light bar sweeps top → bottom across the cockpit auth
   card every 8 seconds. Sits absolutely-positioned inside the card,
   uses GPU-accelerated transform + a soft radial halo so it reads as
   a "scan" rather than a flat line. Brake-disc-red palette matches
   the rest of the JOY OS aesthetic.

   Reduced-motion users get a fully suppressed animation per WCAG.
   ════════════════════════════════════════════════════════════════════ */
.joy-auth-scan-line {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(232, 164, 176, 0.30) 18%,
        rgba(232, 164, 176, 0.85) 50%,
        rgba(232, 164, 176, 0.30) 82%,
        transparent 100%
    );
    box-shadow:
        0 0 12px rgba(232, 164, 176, 0.55),
        0 0 28px rgba(200, 38, 76, 0.35);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
    animation: joy-auth-scan 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    opacity: 0;
}
/* iter-158 · Light-mode UHD glow parity.
   In light mode the soft pearl/ruby gradient was nearly invisible
   against the (post-Shift-2) white auth surface. Per zero-tolerance
   directive: stark high-contrast red rail with a heavy crimson halo
   so the "moving line" feels just as premium as the dark cockpit.   */
html:not(.dark) .joy-auth-scan-line {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 0, 0, 0.55) 18%,
        rgba(255, 0, 0, 1) 50%,
        rgba(255, 0, 0, 0.55) 82%,
        transparent 100%
    );
    box-shadow:
        0 0 15px 2px rgba(255, 0, 0, 0.60),
        0 0 36px 4px rgba(220, 38, 38, 0.40);
}
@keyframes joy-auth-scan {
    /* idle phase — invisible at the top */
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    /* ignition flash */
    6%   { opacity: 0.95; }
    /* sweep down */
    24%  { transform: translate3d(0, 220px, 0); opacity: 0.95; }
    /* fade out near the bottom (clipped by overflow-hidden) */
    32%  { transform: translate3d(0, 320px, 0); opacity: 0; }
    /* long resting tail — 8s loop, scan happens roughly twice per
       minute so it never feels noisy. */
    100% { transform: translate3d(0, 320px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .joy-auth-scan-line { animation: none !important; opacity: 0 !important; }
}



/* ════════════════════════════════════════════════════════════════════
   Iter-85 · Route-transition overlay fade
   Premium nav-change overlay that paints a quick black scrim + JOY logo
   so users never see the "home page flashes then destination loads"
   layout shift. 120ms ease-out feels instant but masks the swap.
   ════════════════════════════════════════════════════════════════════ */
@keyframes joy-route-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    [data-testid="route-transition-overlay"] img { animation: none !important; }
    [data-testid="route-transition-overlay"] span { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Iter-86 · Global dark-mode flashbang nuke
   The user reports stark white blocks "flashbanging" them when
   navigating in dark mode (66 files use `bg-white` and not all of
   them have a `dark:bg-*` counterpart). Rather than patch every page
   one-by-one, a single global rule lifts EVERY light surface utility
   to a sophisticated obsidian in dark mode — except inside the
   intentional `.cockpit-root` (terminal aesthetic), `[data-keep-light]`
   opt-outs, and the TrustBar (which the user wants kept white with
   red gradient).

   Surfaces lifted:
     bg-white / bg-zinc-50 / bg-zinc-100 / bg-white/90 / bg-white/85
     → #0a0a0c (deep obsidian) with backdrop-blur on translucent ones

   Card-level lifts use a soft translucent fill so the JOY watermark +
   metallic gradient still bleed through where applicable.
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   Iter-86 · Global dark-mode flashbang nuke (iter-87 updated: TrustBar
   no longer excluded — user direction "Let it go dark like everything
   else. Override the legacy iter-82 spec.")
   ════════════════════════════════════════════════════════════════════ */
html.dark .bg-white:not(.cockpit-root *):not([data-keep-light]):not(.cockpit-root),
html.dark .bg-white\/90:not(.cockpit-root *):not([data-keep-light]),
html.dark .bg-white\/85:not(.cockpit-root *):not([data-keep-light]),
html.dark .bg-white\/80:not(.cockpit-root *):not([data-keep-light]),
html.dark .bg-white\/70:not(.cockpit-root *):not([data-keep-light]):not([data-testid^="hero-tripillar"]) {
    background-color: #0a0a0c !important;
}
html.dark .bg-zinc-50:not(.cockpit-root *):not([data-keep-light]):not(.cockpit-root),
html.dark .bg-zinc-100:not(.cockpit-root *):not([data-keep-light]) {
    background-color: #09090b !important;
}
html.dark .bg-zinc-200:not(.cockpit-root *):not([data-keep-light]),
html.dark .bg-stone-50:not(.cockpit-root *):not([data-keep-light]),
html.dark .bg-stone-100:not(.cockpit-root *):not([data-keep-light]) {
    background-color: #0a0a0c !important;
}
/* Light-mode borders that turn invisible on the new obsidian → lift
   their dark-mode rendering to white/10 hairlines. */
html.dark .border-zinc-200:not(.cockpit-root *):not([data-keep-light]),
html.dark .border-zinc-100:not(.cockpit-root *):not([data-keep-light]) {
    border-color: rgba(255,255,255,0.10) !important;
}
/* Text-on-now-dark surfaces — any explicit text-zinc-900/950 inside a
   surface that just got nuked needs to flip white in dark mode. */
html.dark .text-zinc-900:not(.cockpit-root *):not([data-keep-light]):not(.cockpit-root),
html.dark .text-zinc-950:not(.cockpit-root *):not([data-keep-light]):not(.cockpit-root) {
    color: #ffffff !important;
}
/* Bypass when an ancestor explicitly opts-out (e.g. a card that
   intentionally renders white-on-dark with its own background) so its
   dark text stays legible against the white surface. */
html.dark [data-keep-light] .text-zinc-900,
html.dark [data-keep-light] .text-zinc-950 {
    color: #09090b !important;
}
html.dark [data-keep-light] .text-zinc-800 { color: #27272A !important; }
html.dark [data-keep-light] .text-zinc-700 { color: #3F3F46 !important; }


/* ════════════════════════════════════════════════════════════════════
   Iter-89 · Auth cockpit input hardening
   Explicit cascade-killing rule for the cockpit inputs so the terminal-
   green placeholders, browser-reset, and focus state survive every
   Tailwind / Chrome / Android override. Scoped to .cockpit-root so
   light-mode pages elsewhere keep their normal placeholder styling.
   ════════════════════════════════════════════════════════════════════ */
.cockpit-root input[type="email"],
.cockpit-root input[type="password"],
.cockpit-root input[type="text"],
.cockpit-root input[type="tel"] {
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
    height: 48px;
    border-radius: 12px;
}
.cockpit-root input::placeholder,
.cockpit-root input::-webkit-input-placeholder,
.cockpit-root input::-moz-placeholder,
.cockpit-root input:-ms-input-placeholder {
    color: #00FF66 !important;
    opacity: 0.95 !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cockpit-root input:focus {
    border-color: rgba(0, 255, 102, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(0, 255, 102, 0.10) !important;
    transition: all 200ms ease-in-out;
}
/* When user opts into light mode (html:not(.dark)), terminal green
   becomes too aggressive. Fall back to luxury slate per spec. */
html:not(.dark) .cockpit-root input::placeholder,
html:not(.dark) .cockpit-root input::-webkit-input-placeholder {
    color: #71717A !important;
    opacity: 1 !important;
}
html:not(.dark) .cockpit-root input:focus {
    border-color: #8B1A2C !important;
    box-shadow: 0 0 0 1px #8B1A2C !important;
}

/* ════════════════════════════════════════════════════════════════════
   Iter-89b · Google Sign-In button height parity (48px)
   The native GIS iframe defaults to ~52-56px. Forcing 48px aligns it
   with the credential inputs for perfect mathematical symmetry.
   ════════════════════════════════════════════════════════════════════ */
[data-testid="login-google-btn"] > div[role="button"],
[data-testid="login-google-btn"] iframe {
    min-height: 48px !important;
    height: 48px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Iter-89c · Pricing tier mobile text wrap safeguard
   On <340px viewports the "FREE DURING PILOT · TBD/MO AFTER" mono
   eyebrow inside the Growth card could clip. Reduce its letter-
   spacing slightly + allow soft wrapping while keeping the design.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    [data-testid^="login-tier-"] .font-mono {
        letter-spacing: 0.12em !important;
        word-break: break-word;
    }
}


/* ════════════════════════════════════════════════════════════════════
   Iter-90 · Animated J emblem (JoeOni Ecosystem column 3)
   Slow breathing scale + subtle 3D tilt + persistent crimson neon
   drop-shadow. Reads as a "living operating system" micro-interaction
   instead of a static placeholder image.
   ════════════════════════════════════════════════════════════════════ */
.joeoni-j-pulse {
    will-change: transform, filter;
    animation: joeoni-j-breathe 4.5s ease-in-out infinite;
    transform-origin: center;
}
@keyframes joeoni-j-breathe {
    0%, 100% {
        transform: scale(1) rotateY(0deg);
        filter: drop-shadow(0 0 18px rgba(230, 0, 38, 0.40));
    }
    50% {
        transform: scale(1.06) rotateY(8deg);
        filter: drop-shadow(0 0 32px rgba(230, 0, 38, 0.75)) drop-shadow(0 0 12px rgba(232, 164, 176, 0.40));
    }
}
@media (prefers-reduced-motion: reduce) {
    .joeoni-j-pulse { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   Iter-90b · Crimson dust particle field (login pricing section)
   8 tiny crimson motes slowly drift up + sideways behind the pricing
   tier cards, adding the same "alive" feel the cursor-spotlight gives
   the AI cards. Pure CSS, no JS, GPU-accelerated transform.
   ════════════════════════════════════════════════════════════════════ */
.joy-dust-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.joy-dust-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 164, 176, 0.85) 0%, rgba(200, 38, 76, 0.40) 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(232, 164, 176, 0.65);
    will-change: transform, opacity;
    opacity: 0;
}
.joy-dust-particle:nth-child(1) { left:  8%; bottom: -8px; animation: joy-dust-rise 14s linear infinite 0s; }
.joy-dust-particle:nth-child(2) { left: 22%; bottom: -8px; animation: joy-dust-rise 18s linear infinite 2.5s; }
.joy-dust-particle:nth-child(3) { left: 36%; bottom: -8px; animation: joy-dust-rise 16s linear infinite 5s; }
.joy-dust-particle:nth-child(4) { left: 48%; bottom: -8px; animation: joy-dust-rise 20s linear infinite 1s; width: 2px; height: 2px; }
.joy-dust-particle:nth-child(5) { left: 62%; bottom: -8px; animation: joy-dust-rise 13s linear infinite 7s; }
.joy-dust-particle:nth-child(6) { left: 74%; bottom: -8px; animation: joy-dust-rise 17s linear infinite 3.5s; width: 4px; height: 4px; }
.joy-dust-particle:nth-child(7) { left: 86%; bottom: -8px; animation: joy-dust-rise 15s linear infinite 9s; }
.joy-dust-particle:nth-child(8) { left: 94%; bottom: -8px; animation: joy-dust-rise 19s linear infinite 6s; width: 2px; height: 2px; }
@keyframes joy-dust-rise {
    0%   { transform: translate3d(0, 0, 0) translateX(0); opacity: 0; }
    8%   { opacity: 0.85; }
    50%  { transform: translate3d(0, -50vh, 0) translateX(12px); opacity: 0.65; }
    92%  { opacity: 0.10; }
    100% { transform: translate3d(0, -100vh, 0) translateX(-8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .joy-dust-particle { animation: none !important; opacity: 0 !important; }
}


/* ════════════════════════════════════════════════════════════════════
   Iter-92 · Trade OS UX hardening
   Single global CSS pass for: sidebar overflow + fade mask + custom
   thin scrollbar, light-mode atelier palette, empty-state HUD upgrade,
   slick CTAs, and timed greeting banner styling.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar overflow mechanics ─────────────────────────────────── */
[data-testid="sidebar"] nav,
[data-testid="dashboard-sidebar"] nav,
.dashboard-sidebar nav {
    overflow-y: auto;
    max-height: calc(100vh - 140px);
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 164, 176, 0.30) transparent;
}
[data-testid="sidebar"] nav::-webkit-scrollbar,
[data-testid="dashboard-sidebar"] nav::-webkit-scrollbar,
.dashboard-sidebar nav::-webkit-scrollbar {
    width: 3px;
    background: transparent;
}
[data-testid="sidebar"] nav::-webkit-scrollbar-thumb,
[data-testid="dashboard-sidebar"] nav::-webkit-scrollbar-thumb,
.dashboard-sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(232, 164, 176, 0.0);
    border-radius: 999px;
    -webkit-transition: background 200ms ease-out;
    transition: background 200ms ease-out;
}
[data-testid="sidebar"]:hover nav::-webkit-scrollbar-thumb,
[data-testid="dashboard-sidebar"]:hover nav::-webkit-scrollbar-thumb,
.dashboard-sidebar:hover nav::-webkit-scrollbar-thumb,
[data-testid="sidebar"] nav:focus-within::-webkit-scrollbar-thumb {
    background: rgba(232, 164, 176, 0.45);
}
/* Bottom fade mask — signals "more below" hidden overflow.
   NOTE (Iter-113i): we MUST NOT set `position: relative` on the
   sidebar root — that overrides Tailwind's responsive `fixed lg:sticky`
   classes and causes the mobile drawer to take up flex-flow space,
   pushing the dashboard content off-canvas (the post-login black-screen
   bug). `position: fixed` and `position: sticky` are both already
   positioned ancestors, so the absolutely-positioned ::after fade mask
   below works correctly without an explicit relative on the parent. */
[data-testid="sidebar"]::after,
[data-testid="dashboard-sidebar"]::after,
.dashboard-sidebar::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.92) 100%);
}
html:not(.dark) [data-testid="sidebar"]::after,
html:not(.dark) [data-testid="dashboard-sidebar"]::after,
html:not(.dark) .dashboard-sidebar::after {
    background: linear-gradient(to bottom, transparent 0%, rgba(244,244,247,0.95) 100%);
}

/* ─── Atelier Light Mode (warm paper #F7F5F0 — iter-161) ─────────────
   Updated from porcelain #F4F4F6 to warm paper #F7F5F0 per founder
   directive to feel premium and architectural, not cold web-white. */
html:not(.dark) body { background-color: #F7F5F0 !important; background-color: var(--joy-paper, #F7F5F0) !important; }
html:not(.dark) body::before {
    /* iter-164 · Per founder reversal of the iter-161 directive: bring
       the ambient moving glow lights back to light mode (IMG_4524).
       We keep the crimson GRID stripped (it muddied direct daylight),
       but restore the twin side-edge halos that bleed in from the
       corners so the canvas feels lit, not flat. */
    background-image:
        radial-gradient(ellipse 40% 35% at 0% 0%, rgba(139, 26, 44, 0.16), transparent 70%),
        radial-gradient(ellipse 45% 40% at 100% 100%, rgba(232, 164, 176, 0.14), transparent 70%) !important;
    background-color: #F7F5F0 !important;
    background-color: var(--joy-paper, #F7F5F0) !important;
    background-size: 100% 100%, 100% 100% !important;
}
/* Pristine pure-white card surfaces with razor-thin slate dividers + soft
   ambient drop-shadow. */
html:not(.dark) .joy-card,
html:not(.dark) [class*="bg-white"],
html:not(.dark) .dashboard-card {
    background-color: #FFFFFF;
    border-color: #E4E4E7;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.025);
}
/* Replace any terminal-green text in light mode with brand crimson,
   any green status pulses fall back to crimson dot. Per user spec
   "completely remove all glowing green elements". */
html:not(.dark) [class*="text-emerald-"]:not(.cockpit-root *):not([data-keep-green]),
html:not(.dark) [style*="#00FF66"]:not(.cockpit-root *):not([data-keep-green]) {
    color: #8B1A2C !important;
}
html:not(.dark) [class*="bg-emerald-"]:not(.cockpit-root *):not([data-keep-green]) {
    background-color: #8B1A2C !important;
}

/* ─── Empty-state HUD plate upgrade ──────────────────────────────── */
[data-empty-state="true"],
.empty-state-card {
    position: relative;
    padding: 32px;
    border-radius: 8px;
    overflow: hidden;
}
.dark [data-empty-state="true"],
.dark .empty-state-card {
    background-color: #0A0A0C;
    border: 1px solid #1A1A1F;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(232,164,176,0.06) 0%, transparent 60%),
        radial-gradient(circle at 100% 100%, rgba(200,38,76,0.04) 0%, transparent 60%);
}
html:not(.dark) [data-empty-state="true"],
html:not(.dark) .empty-state-card {
    background-color: #FFFFFF;
    border: 1px solid #E4E4E7;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.025);
}
/* Tech-mesh crosshair corner accents for empty-state HUD plates */
[data-empty-state="true"]::before,
[data-empty-state="true"]::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(232, 164, 176, 0.45);
}
[data-empty-state="true"]::before {
    top: 8px;
    left: 8px;
    border-right: 0;
    border-bottom: 0;
}
[data-empty-state="true"]::after {
    bottom: 8px;
    right: 8px;
    border-left: 0;
    border-top: 0;
}
html:not(.dark) [data-empty-state="true"]::before,
html:not(.dark) [data-empty-state="true"]::after {
    border-color: rgba(139, 26, 44, 0.35);
}

/* ─── Slick CTAs (de-bulk full-width red buttons) ─────────────────── */
[data-testid$="-execute-btn"],
[data-testid$="-cta-btn"],
.btn-execute {
    border-radius: 6px !important;
    letter-spacing: 0.05em;
    padding: 10px 18px !important;
    height: auto !important;
    font-size: 12.5px !important;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-testid$="-execute-btn"]:hover,
[data-testid$="-cta-btn"]:hover,
.btn-execute:hover {
    transform: translateX(2px);
}


/* ─────────────────────────────────────────────────────────────────
   Iter-112 · Force-dark footer for /joe and /oni
   The pages set data-keep-dark on a wrapper to opt out of cockpit
   light-mode overrides, and pass forceDark to <LandingFooter />
   which sets data-keep-dark on the <footer> element. The rules
   below ensure the footer renders crisply on the pitch-black canvas
   regardless of the global theme switcher state.
   ───────────────────────────────────────────────────────────────── */
footer[data-keep-dark] {
    background-color: #09090b !important;
    color: #d4d4d8 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
footer[data-keep-dark] .text-zinc-700,
footer[data-keep-dark] .text-zinc-600,
footer[data-keep-dark] .text-zinc-500 {
    color: #a1a1aa !important;
}
footer[data-keep-dark] .text-zinc-900 {
    color: #ffffff !important;
}
footer[data-keep-dark] .border-zinc-200,
footer[data-keep-dark] .border-zinc-100 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
footer[data-keep-dark] .bg-white {
    background-color: #ffffff !important; /* keep brand logo pill white */
}
footer[data-keep-dark] .overline {
    color: #a1a1aa !important;
}
footer[data-keep-dark] a:hover,
footer[data-keep-dark] button:hover {
    color: #E8A4B0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   Iter-113j · Cockpit first-paint heartbeat
   One-shot 600ms shimmering crimson scan-line across the cockpit
   header on first login this session (sessionStorage-gated so a
   reload doesn't replay the animation). Paired with a haptic-style
   fade-in on the dashboard body. Pure CSS keyframes — no JS cost.
   ───────────────────────────────────────────────────────────────── */
.cockpit-header {
    position: relative;
    overflow: hidden;
}
.cockpit-firstpaint-scan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28%;
    width: 28%;
    pointer-events: none;
    z-index: 30;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(232, 164, 176, 0.0) 8%,
        rgba(232, 164, 176, 0.85) 50%,
        rgba(139, 26, 44, 0.55) 75%,
        transparent 100%
    );
    box-shadow: 0 0 24px rgba(232, 164, 176, 0.45);
    animation: cockpitFirstPaintScan 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms 1 both;
}
@keyframes cockpitFirstPaintScan {
    0%   { transform: translateX(0);     opacity: 0; }
    18%  { opacity: 0.85; }
    100% { transform: translateX(550%);  opacity: 0; }
}
.cockpit-firstpaint-fade {
    animation: cockpitFirstPaintFade 720ms ease-out 80ms 1 both;
}
@keyframes cockpitFirstPaintFade {
    0%   { opacity: 0; transform: translateY(6px); filter: blur(2px); }
    60%  { opacity: 1; transform: translateY(0);   filter: blur(0); }
    100% { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
    .cockpit-firstpaint-scan,
    .cockpit-firstpaint-fade { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   Iter-113j · JOE & ONI page · dual-theme (light + dark) tokens
   These pages were locked to dark-only via inline styles. We override
   the hardcoded white/black CSS values in light mode so the pages
   render with proper contrast on both themes (matching all other
   subpages in the JOY ecosystem).
   ───────────────────────────────────────────────────────────────── */
.joe-page, .oni-page {
    background-color: #000000;
}
html:not(.dark) .joe-page,
html:not(.dark) .oni-page {
    background-color: #ffffff;
}
/* Headings + display copy: pure white in dark, near-black in light */
html:not(.dark) .joe-page [style*="color: rgb(255, 255, 255)"],
html:not(.dark) .joe-page [style*="color:#FFFFFF"],
html:not(.dark) .joe-page [style*="color: #FFFFFF"],
html:not(.dark) .oni-page [style*="color: rgb(255, 255, 255)"],
html:not(.dark) .oni-page [style*="color:#FFFFFF"],
html:not(.dark) .oni-page [style*="color: #FFFFFF"] {
    color: #0a0a0a !important;
}
/* Body / sub-copy */
html:not(.dark) .joe-page [style*="color: rgb(212, 212, 216)"],
html:not(.dark) .joe-page [style*="color: #D4D4D8"],
html:not(.dark) .oni-page [style*="color: rgb(212, 212, 216)"],
html:not(.dark) .oni-page [style*="color: #D4D4D8"] {
    color: #404040 !important;
}
html:not(.dark) .joe-page [style*="color: rgb(161, 161, 170)"],
html:not(.dark) .joe-page [style*="color: #A1A1AA"],
html:not(.dark) .oni-page [style*="color: rgb(161, 161, 170)"],
html:not(.dark) .oni-page [style*="color: #A1A1AA"] {
    color: #525252 !important;
}
/* Card/surface backgrounds */
html:not(.dark) .joe-page [style*="background-color: rgb(9, 9, 11)"],
html:not(.dark) .joe-page [style*="backgroundColor:#09090B"],
html:not(.dark) .joe-page [style*="background-color: #09090B"],
html:not(.dark) .oni-page [style*="background-color: rgb(9, 9, 11)"],
html:not(.dark) .oni-page [style*="backgroundColor:#09090B"],
html:not(.dark) .oni-page [style*="background-color: #09090B"] {
    background-color: #fafafa !important;
}
/* Card hairline borders */
html:not(.dark) .joe-page [style*="border: 1px solid rgb(28, 28, 31)"],
html:not(.dark) .joe-page [style*="border: 1px solid #1C1C1F"],
html:not(.dark) .oni-page [style*="border: 1px solid rgb(28, 28, 31)"],
html:not(.dark) .oni-page [style*="border: 1px solid #1C1C1F"] {
    border-color: #e5e5e5 !important;
}
/* Section dividers — slightly stronger in light */
html:not(.dark) .joe-page [style*="border-color: rgba(255, 255, 255, 0.06)"],
html:not(.dark) .oni-page [style*="border-color: rgba(255, 255, 255, 0.06)"] {
    border-color: #e5e5e5 !important;
}
/* CTA secondary buttons (text-white border) */
html:not(.dark) .joe-page button.text-white[style*="border-color"],
html:not(.dark) .joe-page a.text-white[style*="border-color"],
html:not(.dark) .oni-page button.text-white[style*="border-color"],
html:not(.dark) .oni-page a.text-white[style*="border-color"] {
    color: #0a0a0a !important;
}
/* The radial crimson backdrop is too saturated in light mode — soften */
html:not(.dark) .joe-page > div[aria-hidden="true"] {
    opacity: 0.55;
}


/* =========================================================================
   ITER-123 · GLOBAL UHD PALETTE ENFORCEMENT (Trillion-Dollar Reskin)
   =========================================================================
   Strict palette across the entire app:
     • Light Mode  → Pure White (#FFFFFF) + Crimson family (#8B1A2C → #E11D48)
     • Dark  Mode  → Pure Obsidian (#0A0A0C) + Rose-Gold family (#E8A4B0 → #FBCFE8)

   Strategy:
     1. Re-map Tailwind green / emerald / teal / lime / cyan / sky / blue /
        indigo / sky utility classes to the JOY crimson scale so legacy
        components automatically inherit the UHD identity without touching
        100+ files.
     2. Override common in-line hex stand-ins via attribute selectors.
     3. EXEMPT the JOY VELLOX (atelier) surface — it keeps its bespoke
        champagne-gold + carbon palette via `[data-vellox-surface]` opt-out.
     4. EXEMPT critical status semantics via `[data-keep-color]` opt-in
        attribute (used by error/success badges that must stay legible).

   Token reference:
     --joy-crimson-50:  #FFF1F2
     --joy-crimson-100: #FFE4E6
     --joy-crimson-200: #FECDD3
     --joy-crimson-300: #FDA4AF
     --joy-crimson-400: #FB7185
     --joy-crimson-500: #E11D48
     --joy-crimson-600: #BE123C
     --joy-crimson-700: #9F1239
     --joy-crimson-800: #881337
     --joy-crimson-900: #5E0F25
     --joy-rosegold:    #E8A4B0
   ========================================================================= */
:root {
    --joy-crimson-50: #FFF1F2;
    --joy-crimson-100: #FFE4E6;
    --joy-crimson-200: #FECDD3;
    --joy-crimson-300: #FDA4AF;
    --joy-crimson-400: #FB7185;
    --joy-crimson-500: #E11D48;
    --joy-crimson-600: #BE123C;
    --joy-crimson-700: #9F1239;
    --joy-crimson-800: #881337;
    --joy-crimson-900: #5E0F25;
    --joy-rosegold: #E8A4B0;
    --joy-obsidian: #0A0A0C;
    --joy-porcelain: #FFFFFF;
}

/* ── Text colour utilities (greens / teals / blues → crimson) ── */
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-lime-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-50 { color: #FFF1F2 !important; color: var(--joy-crimson-50) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-100 { color: #FFE4E6 !important; color: var(--joy-crimson-100) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-200 { color: #FECDD3 !important; color: var(--joy-crimson-200) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-300,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-300,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-300,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-300,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-300,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-300 { color: #FDA4AF !important; color: var(--joy-crimson-300) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-lime-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-indigo-400 { color: #FB7185 !important; color: var(--joy-crimson-400) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-lime-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-indigo-500 { color: #E11D48 !important; color: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-lime-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-indigo-600 { color: #BE123C !important; color: var(--joy-crimson-600) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-lime-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-cyan-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-sky-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-indigo-700 { color: #9F1239 !important; color: var(--joy-crimson-700) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-indigo-800 { color: #881337 !important; color: var(--joy-crimson-800) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-emerald-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-green-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-teal-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-blue-900 { color: #5E0F25 !important; color: var(--joy-crimson-900) !important; }

/* ── Background utilities ── */
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-lime-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-cyan-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-sky-50,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-50 { background-color: #FFF1F2 !important; background-color: var(--joy-crimson-50) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-cyan-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-sky-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-100 { background-color: #FFE4E6 !important; background-color: var(--joy-crimson-100) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-cyan-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-sky-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-200 { background-color: #FECDD3 !important; background-color: var(--joy-crimson-200) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-lime-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-cyan-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-sky-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-400 { background-color: #FB7185 !important; background-color: var(--joy-crimson-400) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-lime-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-cyan-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-sky-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-indigo-500 { background-color: #E11D48 !important; background-color: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-lime-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-cyan-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-sky-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-indigo-600 { background-color: #BE123C !important; background-color: var(--joy-crimson-600) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-700,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-indigo-700 { background-color: #9F1239 !important; background-color: var(--joy-crimson-700) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-800,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-indigo-800 { background-color: #881337 !important; background-color: var(--joy-crimson-800) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-emerald-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-green-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-teal-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-blue-900,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).bg-indigo-900 { background-color: #5E0F25 !important; background-color: var(--joy-crimson-900) !important; }

/* ── Border colour utilities ── */
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-emerald-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-green-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-teal-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-cyan-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-sky-100,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-blue-100 { border-color: #FFE4E6 !important; border-color: var(--joy-crimson-100) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-emerald-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-green-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-teal-200,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-blue-200 { border-color: #FECDD3 !important; border-color: var(--joy-crimson-200) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-emerald-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-green-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-teal-400,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-blue-400 { border-color: #FB7185 !important; border-color: var(--joy-crimson-400) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-emerald-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-green-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-teal-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-blue-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-indigo-500 { border-color: #E11D48 !important; border-color: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-emerald-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-green-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).border-blue-600 { border-color: #BE123C !important; border-color: var(--joy-crimson-600) !important; }

/* ── Inline hex colour purge — most common offenders ───────────────
   We rewrite inline color/background-color/border-color attributes
   that hard-code the legacy emerald/green/teal/blue palette to
   crimson/rose-gold tokens. The :not(*[data-vellox-surface] *) chain
   keeps Vellox untouched. */
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#10B981"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#10b981"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#22C55E"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#22c55e"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#16A34A"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#16a34a"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#15803D"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#0F766E"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#0f766e"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#14B8A6"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#25D366"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#00FF66"],
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color])[style*="#34D399"] {
    color: #BE123C !important;
    color: var(--joy-crimson-600) !important;
}

/* Hover variants — emerald → crimson */
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:text-emerald-500:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:text-green-500:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:text-teal-500:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:text-blue-500:hover { color: #E11D48 !important; color: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-emerald-500:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-green-500:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-teal-500:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-blue-500:hover { background-color: #E11D48 !important; background-color: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-emerald-600:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-green-600:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-teal-600:hover,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).hover\:bg-blue-600:hover { background-color: #BE123C !important; background-color: var(--joy-crimson-600) !important; }

/* Dark-mode tints — rose-gold + soft-crimson for legible dark-mode states */
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-emerald-300,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-green-300,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-teal-300,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-blue-300 { color: #E8A4B0 !important; color: var(--joy-rosegold) !important; }

html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-emerald-400,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-green-400,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-teal-400,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:text-blue-400 { color: #E8A4B0 !important; color: var(--joy-rosegold) !important; }

html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:bg-emerald-900\/30,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:bg-green-900\/30,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:bg-teal-900\/30,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).dark\:bg-blue-900\/30 { background-color: rgba(94, 15, 37, 0.30) !important; }

/* From-/To- gradient stops (Tailwind gradient utilities) */
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-emerald-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-green-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-teal-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-blue-500 { --tw-gradient-from: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-emerald-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-green-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-teal-500,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-blue-500 { --tw-gradient-to: var(--joy-crimson-500) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-emerald-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-green-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-teal-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).from-blue-600 { --tw-gradient-from: var(--joy-crimson-600) !important; }

body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-emerald-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-green-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-teal-600,
body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).to-blue-600 { --tw-gradient-to: var(--joy-crimson-600) !important; }

/* ── Trillion-Dollar polish · global type sharpening ───────────────
   Lift any remaining mid-grey body copy on non-Vellox surfaces to
   institutional obsidian so the entire site reads as a $1T company. */
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-zinc-500,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-gray-500,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-slate-500,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-neutral-500 { color: #3F3F46 !important; }

html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-zinc-400,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-gray-400,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *).text-slate-400 { color: #52525B !important; }



/* =========================================================================
   ITER-124j · TRILLION-DOLLAR TYPOGRAPHY HARDENING
   =========================================================================
   "Grey font" purge — eliminates the mid-grey body copy that introduces
   cognitive strain and violates the brand's high-contrast standard.

   • Dark cockpit mode  → secondary body text reads at silver  #A1A1AA
                          paragraphs / leads lift to              #D4D4D8
   • Light atelier mode → secondary body text reads at slate    #4B5563
                          paragraphs / leads lift to obsidian   #111111

   EXEMPTS Vellox (`[data-vellox-surface]`) and explicit opt-outs
   (`[data-keep-color]`, `[data-keep-light]`, cockpit firstpaint).
   ========================================================================= */

/* ── DARK mode — lift muddy zinc/slate/gray 400 to silver-grade #A1A1AA ── */
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-zinc-400,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-gray-400,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-slate-400,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-neutral-400 {
    color: #A1A1AA !important;
}

html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-zinc-300,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-gray-300,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-slate-300,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-neutral-300 {
    color: #D4D4D8 !important;
}

html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-zinc-500,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-gray-500,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-slate-500,
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]).text-neutral-500 {
    color: #A1A1AA !important;
}

/* Paragraph blocks — default `p` inside dark mode that don't have an
   explicit text colour lift to crisp silver. This catches CMS-injected
   body copy on the journal, about, market-insights, etc. */
html.dark body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]):not([data-keep-light]) p:not([class*="text-"]):not([style*="color"]) {
    color: #D4D4D8;
}

/* ── LIGHT mode — replace washed-out zinc/gray 400/500 with slate 4B5563 ── */
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-zinc-400,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-gray-400,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-slate-400,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-neutral-400 {
    color: #4B5563 !important;
}

html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-zinc-500,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-gray-500,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-slate-500,
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]).text-neutral-500 {
    color: #4B5563 !important;
}

/* Light-mode paragraph body fallback — deep obsidian for any `p` that
   doesn't already declare a colour token, so the default body copy on
   every public surface reads at #111111-class contrast. */
html:not(.dark) body :not([data-vellox-surface]):not([data-vellox-surface] *):not([data-keep-color]) p:not([class*="text-"]):not([style*="color"]) {
    color: #111111;
}

/* Hardware-grade font-smoothing — already declared globally at lines 9
   and 22; this redeclaration on the explicit `.fut` cockpit shell
   ensures it doesn't regress when downstream components reset font
   rendering hints (e.g. font-variant-numeric overrides). */
.fut, .portal-shell, .engine-page, [data-testid="landing-page"] {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ═══════════════════════════════════════════════════════════════════
   iter-150 · LIGHT MODE UHD 4K POLISH PASS
   ───────────────────────────────────────────────────────────────────
   Founder directive: "Make the quality of light mode UHD 4K, highest
   quality ever built in this world."

   What this adds:
   1. Sub-pixel text rendering on every WebKit/Blink browser
   2. Optimized font kerning + ligatures (premium typography)
   3. A whisper-fine ivory grain so true-white surfaces don't read
      cheap-flat. Hand-tuned 0.022 opacity — invisible until you A/B it.
   4. Edge-pixel-perfect borders (translateZ trick to bypass sub-pixel
      blur on 1x displays)
   5. Deeper, soft-edged shadow elevation system — three tiers tuned
      to look like Hermès printed catalogues, not generic Material
   6. Premium scrollbar (thin, branded, hidden until hover)
   ═══════════════════════════════════════════════════════════════════ */

html[data-theme="light"],
html[data-theme="light"] body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1, "ss02" 1, "tnum" 0, common-ligatures contextual;
    font-variant-ligatures: common-ligatures contextual;
    -webkit-text-size-adjust: 100%;
}

/* Whisper-grain on true-white surfaces — gives the page the printed-
   page tactility of a luxury brochure. Disabled on dark mode.
   iter-164 · Moved from `body::before` to `html::before` so it stops
   competing with the ambient side-glow halos defined in body::before
   above (testing agent flagged the silent-override risk). */
html[data-theme="light"]::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.022;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(rgba(0, 0, 0, 1) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, 1) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
}

/* Edge-perfect 1px borders — combats the sub-pixel rounding that
   makes mid-tier OLED phones render "1px" as a smeared 1.3px. */
html[data-theme="light"] *,
html[data-theme="light"] *::before,
html[data-theme="light"] *::after {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Premium 3-tier elevation. Replace stock Tailwind shadow on key
   surfaces by adding `joy-elev-1` / `joy-elev-2` / `joy-elev-3`. */
html[data-theme="light"] .joy-elev-1 {
    box-shadow:
        0 1px 0 rgba(11, 18, 36, 0.025),
        0 1px 3px rgba(11, 18, 36, 0.035),
        0 0 0 1px rgba(11, 18, 36, 0.025);
}
html[data-theme="light"] .joy-elev-2 {
    box-shadow:
        0 1px 0 rgba(11, 18, 36, 0.04),
        0 2px 8px rgba(11, 18, 36, 0.05),
        0 8px 24px -8px rgba(11, 18, 36, 0.06),
        0 0 0 1px rgba(11, 18, 36, 0.04);
}
html[data-theme="light"] .joy-elev-3 {
    box-shadow:
        0 1px 0 rgba(11, 18, 36, 0.05),
        0 4px 14px rgba(11, 18, 36, 0.06),
        0 24px 48px -12px rgba(11, 18, 36, 0.10),
        0 0 0 1px rgba(11, 18, 36, 0.05);
}

/* Premium scrollbar — thin, branded, almost-invisible until hover.
   Applies across the whole light theme; cockpit/dark already has its
   own treatment further up the file. */
html[data-theme="light"] *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html[data-theme="light"] *::-webkit-scrollbar-track {
    background: transparent;
}
html[data-theme="light"] *::-webkit-scrollbar-thumb {
    background: rgba(11, 18, 36, 0.10);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    -webkit-transition: background-color 200ms ease;
    transition: background-color 200ms ease;
}
html[data-theme="light"] *:hover::-webkit-scrollbar-thumb {
    background: rgba(139, 26, 44, 0.30);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* Promote large display numerals & headings to use tabular figures +
   slightly tighter tracking — the "billion-dollar dashboard" feel. */
html[data-theme="light"] .tabular-nums,
html[data-theme="light"] h1,
html[data-theme="light"] h2 {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.022em;
}

/* Honor reduced-motion + reduced-data — disable grain for users who
   opt out via OS preferences. */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
    html[data-theme="light"] body::before {
        background: none;
    }
}



/* ═══════════════════════════════════════════════════════════════════
   iter-157 · LAUNCH-READY LIGHT MODE CONTRAST PASS
   ───────────────────────────────────────────────────────────────────
   Founder directive: "Eradicate all faint/grey text on white or light
   backgrounds. UHD 4K Retina sharpness, zero tolerance for washed-out
   typography in light mode."

   Strategy:
   • Force the lowest-readable-grey rung up to a true dark on light bg
   • Boost placeholder contrast (was rendering as ~#cbd5e1 cloud)
   • Hard-edge crisp borders on inputs so they don't disappear on white
   • Apply UHD font-smoothing tokens across every page (incl. data-keep-color)
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Catch the worst light-mode contrast offenders — text utility classes
   that fall below WCAG AA on white backgrounds. We promote them to a
   readable charcoal. The grey IS still grey, just legible.
   These overrides ONLY fire in light mode. */
html:not(.dark) .text-zinc-400,
html:not(.dark) .text-zinc-500,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500 {
    color: #3f3f46 !important; /* zinc-700 — strong, legible */
}

/* 2. Placeholder text was rendering ~#cbd5e1 (cloud-white on white).
   Light mode placeholders now read as a clearly visible medium charcoal. */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #71717a !important; /* zinc-500 — visible, still placeholder-feeling */
    opacity: 1; /* Firefox de-fades placeholder by default */
}

/* 3. UHD text-rendering tokens applied universally so we never miss a
   surface. Idempotent with the earlier declarations (browsers de-dupe). */
html, body, * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 4. Crisp input borders in light mode so they don't dissolve into the
   canvas. We only touch borderless / weakly-bordered inputs — anything
   explicitly styled (e.g. our Pearl-Neumorphic inputs) wins. */
html:not(.dark) input:where([type="text"], [type="email"], [type="search"], [type="number"], [type="password"]):not([class*="border"]):not([class*="pearl-input"]):not([class*="ring"]) {
    border: 1px solid #d4d4d8; /* zinc-300 */
    background-color: #ffffff;
}

/* 5. The terminal "Trade OS Booked" panel uses white data rows inside a
   dark container. Those rows showed faint grey text — promote to bold
   black so it reads instantly. The dark-mode siblings stay untouched. */
html:not(.dark) [data-terminal-row] {
    color: #18181b; /* zinc-900 */
    font-weight: 600;
}
html.dark [data-terminal-row] {
    color: #ffffff;
}

/* 6. ONI + JOE pages opted out of the iter-150 light-mode polish via
   data-keep-color. We DON'T want to bleach the orb-radial backgrounds,
   but we DO want primary body text to be readable in light mode. Scope
   stays narrow. */
html:not(.dark) [data-keep-color] :where(p, li, dt, dd):not([class*="text-"]):not([style*="color"]) {
    color: #1f2937; /* slate-800 */
}

/* 7. The 4-box "Platform Infrastructure" grid in HeroSection — lock each
   tile to span exactly one grid column so an accidental class collision
   can never push 01 + 02 off-screen. We scope to the LI tiles only, not
   the wrapping container (which lives outside any grid). */
[data-testid^="hero-tripillar-"] {
    grid-column: span 1 !important;
    min-width: 0; /* prevents content from forcing overflow */
}
[data-testid="hero-tripillar-list"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    [data-testid="hero-tripillar-list"] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ===========================================================
   iter-195 · Cyber-industrial admin shell
   ===========================================================
   Activated by `html.dark body[data-admin-shell="true"]` which the Layout
   sets when an admin user navigates to /admin/*. Wraps the entire
   main column in a Bloomberg-Terminal aesthetic — deep-black
   surface, crimson hairlines, glassmorphism cards, neon
   data-density.
   ----------------------------------------------------------- */

html.dark body[data-admin-shell="true"] {
    background: #050507;
}
html.dark body[data-admin-shell="true"] main {
    background:
        radial-gradient(ellipse at 8% 0%, rgba(138, 28, 46, 0.10), transparent 55%),
        radial-gradient(ellipse at 92% 100%, rgba(138, 28, 46, 0.06), transparent 60%),
        #050507;
    color: #FAFAFA;
}
html.dark body[data-admin-shell="true"] main > div {
    color: #E4E4E7;
}
html.dark body[data-admin-shell="true"] main h1,
html.dark body[data-admin-shell="true"] main h2,
html.dark body[data-admin-shell="true"] main h3 {
    color: #FAFAFA;
}
/* Top header inside admin shell — make it match the deep surface */
html.dark body[data-admin-shell="true"] main > header.cockpit-header {
    background: rgba(5, 5, 7, 0.78) !important;
    border-bottom: 1px solid rgba(138, 28, 46, 0.28) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%);
            backdrop-filter: blur(16px) saturate(120%);
}
html.dark body[data-admin-shell="true"] main > header.cockpit-header a {
    color: #FAFAFA !important;
}

/* CyberCard primitive */
.cyber-card {
    position: relative;
    background: linear-gradient(180deg, rgba(20, 20, 24, 0.85) 0%, rgba(12, 12, 16, 0.85) 100%);
    border: 1px solid rgba(138, 28, 46, 0.22);
    border-radius: 4px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 0 rgba(138, 28, 46, 0.06),
        0 24px 60px -36px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    color: #E4E4E7;
}
.cyber-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid rgba(138, 28, 46, 0.18);
    background: linear-gradient(180deg, rgba(138, 28, 46, 0.08), transparent);
}
.cyber-card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #FFD4DC;
}
.cyber-card-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8A1C2E;
    box-shadow: 0 0 8px rgba(138, 28, 46, 0.85);
    animation: cyberCardPulse 1.8s ease-in-out infinite;
}
@keyframes cyberCardPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 1;    transform: scale(1.18); }
}
.cyber-card-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.cyber-card-body { padding: 1rem; }
/* Corner editorial ticks */
.cyber-card-tick {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #8A1C2E;
    border-style: solid;
    pointer-events: none;
}
.cyber-card-tick-tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.cyber-card-tick-br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* DataSkeleton */
.cyber-skeleton {
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        rgba(138, 28, 46, 0.06) 0%,
        rgba(138, 28, 46, 0.18) 50%,
        rgba(138, 28, 46, 0.06) 100%
    );
    background-size: 240% 100%;
    animation: cyberSkeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes cyberSkeletonShimmer {
    0%   { background-position: 240% 0; }
    100% { background-position: -40%  0; }
}

/* CyberStatPill */
.cyber-stat-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.9rem;
    background: linear-gradient(180deg, rgba(20, 20, 24, 0.85), rgba(8, 8, 12, 0.85));
    border: 1px solid rgba(138, 28, 46, 0.22);
    border-radius: 3px;
    min-width: 120px;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.cyber-stat-pill-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #FFD4DC;
    opacity: 0.78;
}
.cyber-stat-pill-value {
    font-family: ui-sans-serif, system-ui;
    font-size: 22px;
    font-weight: 800;
    color: #FAFAFA;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ════════════════════════════════════════════════════════════════════
   iter-207 · LIGHT MODE CYBER-SHELL OVERRIDE
   Founder directive (Screenshot 2026-05-28 053224):
   "In light mode it needs to be white and glossy crimson mix only.
    Hotfix for all light mode."

   The CyberShell + CyberCard primitives were designed dark-first for
   the cockpit. When the founder views any admin page in light mode
   (Mission Control, AI Controls, Workshop Detail, Procurement…) the
   black surfaces clashed with the white-mode chrome. This override
   converts every CyberShell primitive into a **white glassy + crimson
   accent** surface when light mode is active. Dark mode untouched.
   ════════════════════════════════════════════════════════════════════ */
html:not(.dark) .cyber-shell {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(178, 38, 60, 0.10), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(178, 38, 60, 0.06), transparent 60%),
        #FFFFFF !important;
    color: #111111 !important;
}
html:not(.dark) .cyber-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 240, 244, 0.85) 100%) !important;
    border: 1px solid rgba(139, 26, 44, 0.28) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
            backdrop-filter: blur(14px) saturate(140%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 4px 20px rgba(220, 20, 60, 0.14),
        0 24px 60px -36px rgba(139, 26, 44, 0.32) !important;
    color: #111111 !important;
}
html:not(.dark) .cyber-card-header {
    background: linear-gradient(180deg, rgba(139, 26, 44, 0.06), transparent) !important;
    border-bottom: 1px solid rgba(139, 26, 44, 0.18) !important;
}
html:not(.dark) .cyber-card-label {
    color: #5E0F25 !important;
}
html:not(.dark) .cyber-card-tick { border-color: #8A1C2E !important; }
html:not(.dark) .cyber-stat-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 240, 244, 0.85)) !important;
    border: 1px solid rgba(139, 26, 44, 0.28) !important;
    box-shadow: 0 4px 16px rgba(220, 20, 60, 0.10) !important;
    color: #111111 !important;
}
html:not(.dark) .cyber-stat-pill-label { color: #5E0F25 !important; opacity: 1 !important; }
html:not(.dark) .cyber-stat-pill-value { color: #111111 !important; }

/* Inner content of CyberCards in light mode — flip every nested
   dark-on-dark mono label/text to ink-black + crimson rhythm so the
   founder gets the white-glass + crimson surface they asked for. */
html:not(.dark) .cyber-card .text-white,
html:not(.dark) .cyber-shell .text-white {
    color: #111111 !important;
}
html:not(.dark) .cyber-card [style*="color: #FFD4DC"],
html:not(.dark) .cyber-card [style*="color: rgb(255, 212, 220)"],
html:not(.dark) .cyber-shell [style*="color: #FFD4DC"] {
    color: #5E0F25 !important;
}
html:not(.dark) .cyber-card [style*="color: #FBA9B5"],
html:not(.dark) .cyber-shell [style*="color: #FBA9B5"] {
    color: #8A1C2E !important;
}
html:not(.dark) .cyber-skeleton {
    background: linear-gradient(
        90deg,
        rgba(139, 26, 44, 0.08) 0%,
        rgba(139, 26, 44, 0.22) 50%,
        rgba(139, 26, 44, 0.08) 100%
    ) !important;
}
/* OwnerPulse + Procurement Kanban share the same dark surface
   recipe — flip them in light mode too. */
html:not(.dark) [data-testid="owner-pulse"] {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(178, 38, 60, 0.12), transparent 55%),
        linear-gradient(180deg, #FFFFFF 0%, #FFF5F7 100%) !important;
    border-color: rgba(139, 26, 44, 0.32) !important;
    box-shadow: 0 18px 48px -24px rgba(220, 20, 60, 0.30), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
html:not(.dark) [data-testid="owner-pulse"] [style*="background: linear-gradient(180deg, rgba(20,12,16"] {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,240,244,0.78)) !important;
    border-color: rgba(139,26,44,0.28) !important;
    color: #111 !important;
}
html:not(.dark) [data-testid="procurement-board"] [class*="rounded-[6px]"],
html:not(.dark) [data-testid="procurement-board"] [class*="rounded-[8px]"] {
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,240,244,0.85)) !important;
    border-color: rgba(139, 26, 44, 0.28) !important;
    color: #111 !important;
}

/* ──────────────────────────────────────────────────────────────
   iter-207 · NUCLEAR LIGHT-MODE OVERRIDE for any inline-styled
   dark surface used across the cockpit. Targets every element
   whose `style` prop hardcoded a deep-crimson background gradient
   (the cyber-aesthetic recipe). Inline-style wins via specificity
   in normal CSS — but attribute-selector + `!important` re-wins.
   Dark mode untouched.
   ────────────────────────────────────────────────────────────── */
html:not(.dark) [style*="rgba(20,12,16"],
html:not(.dark) [style*="rgba(20, 12, 16"],
html:not(.dark) [style*="rgba(10,6,9"],
html:not(.dark) [style*="rgba(10, 6, 9"],
html:not(.dark) [style*="rgba(15,9,12"],
html:not(.dark) [style*="rgba(15, 9, 12"],
html:not(.dark) [style*="rgba(8,4,7"],
html:not(.dark) [style*="rgba(8, 4, 7"],
html:not(.dark) [style*="#1a0a10"],
html:not(.dark) [style*="#0a0408"],
html:not(.dark) [style*="#160810"],
html:not(.dark) [style*="#050203"],
html:not(.dark) [style*="#140a10"],
html:not(.dark) [style*="#0A0A0C"],
html:not(.dark) [style*="#141416"],
html:not(.dark) [data-testid="ai-audit-terminal"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 240, 244, 0.85) 100%) !important;
    border-color: rgba(139, 26, 44, 0.28) !important;
    color: #111111 !important;
    box-shadow: 0 4px 20px rgba(220, 20, 60, 0.12), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
/* AI audit terminal · flip inner mono terminal text in light mode */
html:not(.dark) [data-testid="ai-audit-terminal"] .text-zinc-200,
html:not(.dark) [data-testid="ai-audit-terminal"] .text-zinc-400,
html:not(.dark) [data-testid="ai-audit-terminal"] .text-zinc-500,
html:not(.dark) [data-testid="ai-audit-terminal"] .text-white {
    color: #111111 !important;
}
html:not(.dark) [data-testid="ai-audit-terminal"] .text-emerald-400 { color: #047857 !important; }
html:not(.dark) [data-testid="ai-audit-terminal"] .text-amber-400 { color: #B45309 !important; }
html:not(.dark) [data-testid="ai-audit-terminal"] [style*="color: #FFD4DC"],
html:not(.dark) [data-testid="ai-audit-terminal"] [class*="text-[#FFD4DC]"] {
    color: #5E0F25 !important;
}
/* Re-color the white inline texts inside those flipped surfaces. */
html:not(.dark) [style*="rgba(20,12,16"] .text-white,
html:not(.dark) [style*="rgba(15,9,12"] .text-white,
html:not(.dark) [style*="rgba(10,6,9"] .text-white {
    color: #111111 !important;
}
/* Flip inline white text (color: #FFFFFF / #FFF / white) when used in
   light mode anywhere inside the cockpit — these were inline because
   the components assumed a dark surface. */
html:not(.dark) [data-testid="owner-pulse"] *,
html:not(.dark) [data-testid="procurement-board"] *,
html:not(.dark) [data-testid="founder-hotkey-palette"]:not([data-keep-dark]) * {
    /* parent already flipped — nothing to do here, kept as anchor */
}
html:not(.dark) [data-testid="owner-pulse"] [style*="color: #FFFFFF"],
html:not(.dark) [data-testid="owner-pulse"] [style*="color:#FFFFFF"],
html:not(.dark) [data-testid="owner-pulse"] [style*="color: rgb(255, 255, 255)"],
html:not(.dark) [data-testid="owner-pulse"] [style*="color: white"] {
    color: #111111 !important;
}
/* Inside any inline-styled flipped surface, white text → ink black. */
html:not(.dark) [style*="rgba(20,12,16"] [style*="color: #FFFFFF"],
html:not(.dark) [style*="rgba(20,12,16"] [style*="color:#FFFFFF"],
html:not(.dark) [style*="rgba(15,9,12"] [style*="color: #FFFFFF"],
html:not(.dark) [style*="rgba(10,6,9"] [style*="color: #FFFFFF"] {
    color: #111111 !important;
}
/* Tailwind text-white inside any inline-styled flipped surface */
html:not(.dark) [style*="rgba(20,12,16"] *,
html:not(.dark) [style*="rgba(15,9,12"] *,
html:not(.dark) [style*="rgba(10,6,9"] * {
    /* This selector intentionally has no rule — kept to ensure children
       in flipped surfaces get higher specificity in cascading rules
       defined below. */
}
html:not(.dark) [data-testid="owner-pulse"] .text-white,
html:not(.dark) [data-testid="procurement-board"] .text-white,
html:not(.dark) [data-testid="founder-hotkey-palette"] .text-white {
    color: #111111 !important;
}
/* Flip every element using the brand-pink mono labels in light mode
   to a crisp crimson so they read as the same accent rhythm. */
html:not(.dark) [style*="color: #FFD4DC"],
html:not(.dark) [style*="color:#FFD4DC"],
html:not(.dark) [style*="color: rgb(255, 212, 220)"] {
    color: #5E0F25 !important;
}
html:not(.dark) [style*="color: #FBA9B5"],
html:not(.dark) [style*="color:#FBA9B5"],
html:not(.dark) [style*="color: rgb(251, 169, 181)"] {
    color: #8A1C2E !important;
}
.cyber-stat-pill-delta {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 700;
}

/* Generic admin-shell overrides — auto-cast white workshop cards to
   the cyber palette without forcing each page to wrap children in
   <CyberCard>. Scoped to `main` so the sidebar (which lives outside
   main and keeps its own aesthetic) is untouched. */
html.dark body[data-admin-shell="true"] main .bg-white,
html.dark body[data-admin-shell="true"] main .bg-slate-50,
html.dark body[data-admin-shell="true"] main .bg-zinc-50,
html.dark body[data-admin-shell="true"] main .bg-neutral-50,
html.dark body[data-admin-shell="true"] main .bg-gray-50 {
    background: linear-gradient(180deg, rgba(20, 20, 24, 0.85), rgba(12, 12, 16, 0.85)) !important;
    color: #E4E4E7 !important;
    border-color: rgba(138, 28, 46, 0.18) !important;
}
html.dark body[data-admin-shell="true"] main .text-slate-900,
html.dark body[data-admin-shell="true"] main .text-zinc-900,
html.dark body[data-admin-shell="true"] main .text-gray-900,
html.dark body[data-admin-shell="true"] main .text-neutral-900,
html.dark body[data-admin-shell="true"] main .text-black {
    color: #FAFAFA !important;
}
html.dark body[data-admin-shell="true"] main .text-slate-700,
html.dark body[data-admin-shell="true"] main .text-zinc-700,
html.dark body[data-admin-shell="true"] main .text-gray-700,
html.dark body[data-admin-shell="true"] main .text-slate-600,
html.dark body[data-admin-shell="true"] main .text-zinc-600,
html.dark body[data-admin-shell="true"] main .text-gray-600 {
    color: #F4F4F5 !important;
}
html.dark body[data-admin-shell="true"] main .text-slate-800,
html.dark body[data-admin-shell="true"] main .text-zinc-800,
html.dark body[data-admin-shell="true"] main .text-gray-800 {
    color: #FAFAFA !important;
}
html.dark body[data-admin-shell="true"] main .text-slate-500,
html.dark body[data-admin-shell="true"] main .text-zinc-500,
html.dark body[data-admin-shell="true"] main .text-gray-500,
html.dark body[data-admin-shell="true"] main .text-slate-400,
html.dark body[data-admin-shell="true"] main .text-zinc-400,
html.dark body[data-admin-shell="true"] main .text-gray-400 {
    color: #A1A1AA !important;
}
html.dark body[data-admin-shell="true"] main .border-slate-200,
html.dark body[data-admin-shell="true"] main .border-zinc-200,
html.dark body[data-admin-shell="true"] main .border-gray-200,
html.dark body[data-admin-shell="true"] main .border-slate-100,
html.dark body[data-admin-shell="true"] main .border-zinc-100,
html.dark body[data-admin-shell="true"] main .border-gray-100 {
    border-color: rgba(138, 28, 46, 0.18) !important;
}
/* Tables inside the cyber shell get a deep-black striped surface */
html.dark body[data-admin-shell="true"] main table {
    color: #E4E4E7 !important;
}
html.dark body[data-admin-shell="true"] main thead {
    background: linear-gradient(180deg, rgba(138, 28, 46, 0.12), transparent) !important;
}
html.dark body[data-admin-shell="true"] main thead th {
    color: #FFD4DC !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-color: rgba(138, 28, 46, 0.24) !important;
}
html.dark body[data-admin-shell="true"] main tbody tr {
    border-color: rgba(138, 28, 46, 0.10) !important;
}
html.dark body[data-admin-shell="true"] main tbody tr:hover {
    background: rgba(138, 28, 46, 0.06) !important;
}
/* Inputs inside the cyber shell */
html.dark body[data-admin-shell="true"] main input[type="text"],
html.dark body[data-admin-shell="true"] main input[type="email"],
html.dark body[data-admin-shell="true"] main input[type="search"],
html.dark body[data-admin-shell="true"] main input[type="number"],
html.dark body[data-admin-shell="true"] main input[type="tel"],
html.dark body[data-admin-shell="true"] main input[type="url"],
html.dark body[data-admin-shell="true"] main input[type="password"],
html.dark body[data-admin-shell="true"] main textarea,
html.dark body[data-admin-shell="true"] main select {
    background: rgba(8, 8, 12, 0.85) !important;
    color: #FAFAFA !important;
    border-color: rgba(138, 28, 46, 0.30) !important;
    -webkit-text-fill-color: #FAFAFA !important;
    caret-color: #FFD4DC !important;
}
html.dark body[data-admin-shell="true"] main input::placeholder,
html.dark body[data-admin-shell="true"] main textarea::placeholder {
    color: rgba(228, 228, 231, 0.42) !important;
}

/* iter-198b · Cyber-shell label contrast bump per testing-agent QA
   (iteration_106). Small-caps labels styled with raw inline #8B1A2C
   were rendering ~3:1 contrast on the dark surface; we lift them to
   the warmer #FFD4DC token (~8:1) when inside the cyber shell. */
html.dark body[data-admin-shell="true"] main [style*="#8B1A2C"]:not(button):not(.toggle):not(svg) {
    color: #FFD4DC !important;
}
html.dark body[data-admin-shell="true"] main label > div:first-child {
    color: #FFD4DC !important;
    opacity: 0.95;
}
/* Toggle hint copy + input hints must also lift off dark */
html.dark body[data-admin-shell="true"] main label .text-zinc-800,
html.dark body[data-admin-shell="true"] main label .text-zinc-700 {
    color: #D4D4D8 !important;
}


/* iter-198 · Neural slider — webkit + firefox styling for the
   Temperature input. Crimson thumb, no default browser chrome. */
.neural-slider {
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.neural-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #8B1A2C;
    box-shadow: 0 2px 6px rgba(138, 28, 46, 0.4);
    -webkit-transition: transform 120ms ease;
    transition: transform 120ms ease;
}
.neural-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.neural-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #8B1A2C;
    box-shadow: 0 2px 6px rgba(138, 28, 46, 0.4);
    cursor: pointer;
}


/* ─────────────────────────────────────────────────────────────
   iter-200 · Mega-menu showcase · COMPACT mode
   --------------------------------------------------------------
   Founder: "Just reduce the size of the screen." We cap the 16:9
   showcase height + scale internals down so the cinema-reel slot
   reads as a feature card, not a full hero. Live ads still pulse.
   ───────────────────────────────────────────────────────────── */
.mega-showcase-compact { width: 100%; }
.mega-showcase-compact [data-testid="mega-showcase-rotator"] > * {
    max-height: 240px;
    transform-origin: top center;
}
.mega-showcase-compact [data-testid="mega-showcase-rotator"] video,
.mega-showcase-compact [data-testid="mega-showcase-rotator"] iframe {
    max-height: 240px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .mega-showcase-compact [data-testid="mega-showcase-rotator"] > *,
    .mega-showcase-compact [data-testid="mega-showcase-rotator"] video,
    .mega-showcase-compact [data-testid="mega-showcase-rotator"] iframe {
        max-height: 180px;
    }
}

/* ─────────────────────────────────────────────────────────────
   iter-200 · Country Tape
   --------------------------------------------------------------
   Two-shade palette (light = white+crimson mix · dark = black+
   crimson mix) — strictly follows the founder colour-rule. Every
   text element is crimson-ink, never grey.
   ───────────────────────────────────────────────────────────── */
:root {
    --country-tape-bg: #FFF1F5;            /* white · crimson mix */
    --country-tape-border: rgba(138, 28, 46, 0.18);
    --country-tape-fg: #5B0C1E;            /* deep crimson ink */
    --country-tape-fg-soft: #8A1C2E;
}
.dark, [data-theme="dark"], html.dark {
    --country-tape-bg: #14080C;            /* black · crimson mix */
    --country-tape-border: rgba(138, 28, 46, 0.35);
    --country-tape-fg: #FFD4DC;
    --country-tape-fg-soft: #FBA9B5;
}
/* iter-201 · CountryTape redesigned to match the "Wholesale / Trade OS /
   Retail Store" dark glassy infrastructure boxes on the home page.
   Always a black + deep-crimson surface, regardless of light/dark mode,
   so the section reads as a continuous infrastructure rail. */
.country-tape-section {
    width: 100%;
    background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.country-tape-box {
    position: relative;
    overflow: hidden;
    /* iter-203 · Restored slim dark strip — NO pink. Founder hated the
       pink wash. Deep glossy black + crimson hairline + soft outer
       glow. The golden+crimson shimmer comes from `data-joy-shimmer`
       on the inner text spans, NOT from a pink background sweep. */
    background:
        radial-gradient(ellipse at 0% 0%, rgba(138, 28, 46, 0.22), transparent 55%),
        linear-gradient(180deg, #160810 0%, #050203 100%);
    border: 1px solid rgba(138, 28, 46, 0.42);
    border-radius: 10px;
    padding: 0.55rem 0.95rem;
    box-shadow:
        0 14px 36px -22px rgba(138, 28, 46, 0.55),
        inset 0 1px 0 rgba(255, 212, 220, 0.06);
    color: #FFD4DC;
}
.country-tape-box::before { content: none; }
.country-tape-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.7rem;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.country-tape-row::-webkit-scrollbar { display: none; }
.country-tape-live-group,
.country-tape-next-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.country-tape-pills { flex-wrap: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
    .country-tape-box { padding: 0.45rem 0.7rem; border-radius: 8px; }
    .country-tape-future { display: none; }
    .country-tape-pill { padding: 0.15rem 0.5rem; font-size: 9px; letter-spacing: 0.10em; }
}
.country-tape-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #FFD4DC;
    font-weight: 800;
}
.country-tape-eyebrow-next { color: #FBA9B5; }
.country-tape-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.95);
    animation: countryTapePulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes countryTapePulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.3); }
}
.country-tape-pills {
    display: inline-flex; flex-wrap: wrap; gap: 0.45rem;
}
.country-tape-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.14em;
    font-size: 9.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}
.country-tape-pill-live {
    background: rgba(178, 38, 60, 0.55) !important;
    border: 1px solid rgba(255, 102, 130, 0.75) !important;
    color: #FFFFFF !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 18px rgba(178, 38, 60, 0.55);
    text-shadow: 0 0 8px rgba(255, 102, 130, 0.65), 0 0 2px rgba(0,0,0,0.55);
}
.country-tape-pill-next {
    background: rgba(178, 38, 60, 0.28) !important;
    border: 1px dashed rgba(255, 102, 130, 0.75) !important;
    color: #FFFFFF !important;
    text-shadow: 0 0 8px rgba(255, 102, 130, 0.65);
}
.country-tape-year {
    font-weight: 700;
    color: #FBA9B5;
    margin-left: 0.25rem;
    opacity: 0.85;
}
.country-tape-arrow {
    color: #FBA9B5; opacity: 0.6; font-weight: 700; font-size: 13px;
}
.country-tape-future {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(138, 28, 46, 0.32);
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
}
.country-tape-future-dash {
    width: 18px; height: 1px; background: #8A1C2E; opacity: 0.55;
}
.country-tape-future-label { color: #FFD4DC; }
.country-tape-future-list  {
    color: #FBA9B5; opacity: 0.85;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
}
.country-tape-future-sep {
    flex: 1 1; min-width: 12px; height: 1px;
    background: linear-gradient(90deg, rgba(138,28,46,0.45), transparent);
    margin: 0 0.25rem;
}
.country-tape-future-tagline {
    color: #FFFFFF;
    font-weight: 800;
    letter-spacing: 0.24em;
}
.country-tape-tick {
    position: absolute; width: 10px; height: 10px;
}
.country-tape-tick-tl { top: -1px; left: -1px;  border-top: 1px solid #8A1C2E; border-left: 1px solid #8A1C2E; }
.country-tape-tick-tr { top: -1px; right: -1px; border-top: 1px solid #8A1C2E; border-right: 1px solid #8A1C2E; }
.country-tape-tick-bl { bottom: -1px; left: -1px;  border-bottom: 1px solid #8A1C2E; border-left: 1px solid #8A1C2E; }
.country-tape-tick-br { bottom: -1px; right: -1px; border-bottom: 1px solid #8A1C2E; border-right: 1px solid #8A1C2E; }

/* ─────────────────────────────────────────────────────────────
   iter-200 · NO-GREY GLOBAL CLARITY OVERLAY
   --------------------------------------------------------------
   Founder rule: "All over website only colour code is white and
   crimson mix shade and black and crimson mix shade. No grey
   and unclear fonts. All fonts should be clear and visible."
   --------------------------------------------------------------
   Strategy:
     1. Promote .text-zinc-400/500 and .text-slate-400/500 (the
        lowest-contrast classes) to a crimson-tinted ink. We do NOT
        touch -700/-800/-900 (already legible) or text inside form
        controls (would conflict with focus states).
     2. Honour theme: light mode → deep crimson ink (#5B0C1E);
        dark mode → warm crimson-rose (#FFD4DC).
     3. SCOPED to NOT touch the cyber-admin-shell or atelier scopes
        (they have their own palettes).
   ───────────────────────────────────────────────────────────── */
body:not([data-admin-shell="true"]) :is(
    .text-zinc-400, .text-zinc-500,
    .text-slate-400, .text-slate-500,
    .text-gray-400, .text-gray-500,
    .text-neutral-400, .text-neutral-500
):not(input):not(textarea):not(option) {
    color: #5B0C1E !important;
    color: var(--ink-soft, #5B0C1E) !important;
    opacity: 0.95;
}
html.dark body:not([data-admin-shell="true"]) :is(
    .text-zinc-400, .text-zinc-500,
    .text-slate-400, .text-slate-500,
    .text-gray-400, .text-gray-500,
    .text-neutral-400, .text-neutral-500
):not(input):not(textarea):not(option) {
    color: #FBA9B5 !important;
    opacity: 0.92;
}
/* Promote 600 a touch — readable but slightly lifted for dark mode */
html.dark body:not([data-admin-shell="true"]) :is(
    .text-zinc-600, .text-slate-600, .text-gray-600, .text-neutral-600
):not(input):not(textarea):not(option) {
    color: #FFD4DC !important;
}
/* Anti-faint: any element styled via inline color=#71717a / #6b7280 / etc.
   would need per-component fix; we set CSS custom property as a fallback */
:root { --ink-soft: #5B0C1E; }
html.dark { --ink-soft: #FBA9B5; }



/* ─────────────────────────────────────────────────────────────
   iter-203 · ROLLED BACK · pink crimson-shimmer killed.
   --------------------------------------------------------------
   The pink shimmer was a misread of the user's brief. They
   wanted the EXISTING `data-joy-shimmer` (crimson + gold sweep)
   from the "Autonomous Infrastructure" headline applied to the
   JOY Automart wordmark + 4 ecosystem cards + Now Serving box.
   We kept those utility selectors as no-ops in case any element
   still references them, but they no longer paint pink.
   ───────────────────────────────────────────────────────────── */
.crimson-shimmer,
.crimson-shimmer-strong,
.crimson-shimmer-white {
    /* no-op */
}
.file\:mr-2::-webkit-file-upload-button {
  margin-right: 0.5rem;
}
.file\:mr-2::file-selector-button {
  margin-right: 0.5rem;
}
.file\:mr-3::-webkit-file-upload-button {
  margin-right: 0.75rem;
}
.file\:mr-3::file-selector-button {
  margin-right: 0.75rem;
}
.file\:rounded-\[6px\]::-webkit-file-upload-button {
  border-radius: 6px;
}
.file\:rounded-\[6px\]::file-selector-button {
  border-radius: 6px;
}
.file\:border-0::-webkit-file-upload-button {
  border-width: 0px;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::-webkit-file-upload-button {
  background-color: transparent;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:bg-zinc-100::-webkit-file-upload-button {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.file\:bg-zinc-100::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.file\:px-2\.5::-webkit-file-upload-button {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.file\:px-2\.5::file-selector-button {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.file\:px-3::-webkit-file-upload-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.file\:py-1\.5::-webkit-file-upload-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.file\:py-1\.5::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.file\:text-sm::-webkit-file-upload-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::-webkit-file-upload-button {
  font-weight: 500;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:font-semibold::-webkit-file-upload-button {
  font-weight: 600;
}
.file\:font-semibold::file-selector-button {
  font-weight: 600;
}
.file\:text-foreground::-webkit-file-upload-button {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.file\:text-foreground::file-selector-button {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.file\:text-zinc-700::-webkit-file-upload-button {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.file\:text-zinc-700::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.placeholder\:font-mono::placeholder {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.placeholder\:text-\[11px\]::placeholder {
  font-size: 11px;
}
.placeholder\:uppercase::placeholder {
  text-transform: uppercase;
}
.placeholder\:tracking-\[0\.04em\]::placeholder {
  letter-spacing: 0.04em;
}
.placeholder\:text-\[\#475569\]::placeholder {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / 1);
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.placeholder\:text-\[\#FBA9B5\]\/55::placeholder {
  color: rgb(251 169 181 / 0.55);
}
.placeholder\:text-\[rgba\(245\2c 239\2c 229\2c 0\.35\)\]::placeholder {
  color: rgba(245,239,229,0.35);
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-zinc-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.placeholder\:text-zinc-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.placeholder\:text-zinc-700::placeholder {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.placeholder\:opacity-90::placeholder {
  opacity: 0.9;
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.first\:mt-0:first-child {
  margin-top: 0px;
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(0.25rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.25rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-0:first-child {
  border-width: 0px;
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(0.25rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.25rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-0:last-child {
  padding-bottom: 0px;
}
.focus-within\:relative:focus-within {
  position: relative;
}
.focus-within\:z-20:focus-within {
  z-index: 20;
}
.focus-within\:border-\[\#8B1A2C\]:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.focus-within\:border-zinc-300:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.focus-within\:border-zinc-900:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.focus-within\:shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.12\)\]:focus-within {
  --tw-shadow: 0 8px 32px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:translate-x-0\.5:hover {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:translate-x-\[1px\]:hover {
  --tw-translate-x: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:translate-y-\[-1px\]:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:rotate-180:hover {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:scale-\[1\.04\]:hover {
  --tw-scale-x: 1.04;
  --tw-scale-y: 1.04;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:gap-2:hover {
  gap: 0.5rem;
}
.hover\:border-\[\#8A1C2E\]\/60:hover {
  border-color: rgb(138 28 46 / 0.6);
}
.hover\:border-\[\#8B1A2C\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#8B1A2C\]\/30:hover {
  border-color: rgb(139 26 44 / 0.3);
}
.hover\:border-\[\#8B1A2C\]\/40:hover {
  border-color: rgb(139 26 44 / 0.4);
}
.hover\:border-\[\#8B1A2C\]\/45:hover {
  border-color: rgb(139 26 44 / 0.45);
}
.hover\:border-\[\#8B1A2C\]\/50:hover {
  border-color: rgb(139 26 44 / 0.5);
}
.hover\:border-\[\#8B1A2C\]\/55:hover {
  border-color: rgb(139 26 44 / 0.55);
}
.hover\:border-\[\#8B1A2C\]\/60:hover {
  border-color: rgb(139 26 44 / 0.6);
}
.hover\:border-\[\#E8A4B0\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(232 164 176 / 1);
  border-color: rgb(232 164 176 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#E8A4B0\]\/40:hover {
  border-color: rgb(232 164 176 / 0.4);
}
.hover\:border-emerald-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(16 185 129 / 1);
  border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
}
.hover\:border-rose-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / 1);
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-900:hover {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / 1);
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.hover\:border-white:hover {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 1);
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.hover\:border-white\/30:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.hover\:border-white\/40:hover {
  border-color: rgb(255 255 255 / 0.4);
}
.hover\:border-white\/60:hover {
  border-color: rgb(255 255 255 / 0.6);
}
.hover\:border-white\/\[0\.20\]:hover {
  border-color: rgb(255 255 255 / 0.20);
}
.hover\:border-zinc-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(212 212 216 / 1);
  border-color: rgb(212 212 216 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(161 161 170 / 1);
  border-color: rgb(161 161 170 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(113 113 122 / 1);
  border-color: rgb(113 113 122 / var(--tw-border-opacity, 1));
}
.hover\:border-zinc-900:hover {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.hover\:bg-\[\#0891B2\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / 1);
  background-color: rgb(8 145 178 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1DA851\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 168 81 / 1);
  background-color: rgb(29 168 81 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1EBE57\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 190 87 / 1);
  background-color: rgb(30 190 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#1ca352\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(28 163 82 / 1);
  background-color: rgb(28 163 82 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#4d0d1c\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(77 13 28 / 1);
  background-color: rgb(77 13 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#5B21B6\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(91 33 182 / 1);
  background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#5E0F25\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(94 15 37 / 1);
  background-color: rgb(94 15 37 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#6E1424\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(110 20 36 / 1);
  background-color: rgb(110 20 36 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#7A1726\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(122 23 38 / 1);
  background-color: rgb(122 23 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#8A1C2E\]\/\[0\.06\]:hover {
  background-color: rgb(138 28 46 / 0.06);
}
.hover\:bg-\[\#8A1C2E\]\/\[0\.10\]:hover {
  background-color: rgb(138 28 46 / 0.10);
}
.hover\:bg-\[\#8B1A2C\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#8B1A2C\]\/10:hover {
  background-color: rgb(139 26 44 / 0.1);
}
.hover\:bg-\[\#8B1A2C\]\/5:hover {
  background-color: rgb(139 26 44 / 0.05);
}
.hover\:bg-\[\#8B1A2C\]\/\[0\.04\]:hover {
  background-color: rgb(139 26 44 / 0.04);
}
.hover\:bg-\[\#8B1A2C\]\/\[0\.05\]:hover {
  background-color: rgb(139 26 44 / 0.05);
}
.hover\:bg-\[\#8B1A2C\]\/\[0\.06\]:hover {
  background-color: rgb(139 26 44 / 0.06);
}
.hover\:bg-\[\#8B1A2C\]\/\[0\.08\]:hover {
  background-color: rgb(139 26 44 / 0.08);
}
.hover\:bg-\[\#8B1A2C\]\/\[0\.10\]:hover {
  background-color: rgb(139 26 44 / 0.10);
}
.hover\:bg-\[\#8B1A2C\]\/\[0\.12\]:hover {
  background-color: rgb(139 26 44 / 0.12);
}
.hover\:bg-\[\#A01B30\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(160 27 48 / 1);
  background-color: rgb(160 27 48 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[\#C5A357\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(197 163 87 / 1);
  background-color: rgb(197 163 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-\[rgba\(138\2c 28\2c 46\2c 0\.04\)\]:hover {
  background-color: rgba(138,28,46,0.04);
}
.hover\:bg-accent:hover {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / 1);
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / 1);
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / 1);
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / 1);
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / 1);
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/60:hover {
  background-color: rgb(0 0 0 / 0.6);
}
.hover\:bg-black\/85:hover {
  background-color: rgb(0 0 0 / 0.85);
}
.hover\:bg-black\/\[0\.04\]:hover {
  background-color: rgb(0 0 0 / 0.04);
}
.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 1);
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / 1);
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(0 73% 51% / 0.8);
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(0 73% 51% / 0.9);
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-emerald-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / 1);
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / 1);
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / 1);
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-muted:hover {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--muted));
}
.hover\:bg-muted\/50:hover {
  background-color: hsl(210 40% 96% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-primary:hover {
  background-color: hsl(350 89% 50%);
  background-color: hsl(var(--primary));
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(350 89% 50% / 0.8);
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(350 89% 50% / 0.9);
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / 1);
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / 1);
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}
.hover\:bg-red-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(153 27 27 / 1);
  background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / 1);
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary:hover {
  background-color: hsl(215 20% 30%);
  background-color: hsl(var(--secondary));
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(215 20% 30% / 0.8);
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 1);
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / 1);
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / 1);
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/\[0\.02\]:hover {
  background-color: rgb(255 255 255 / 0.02);
}
.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}
.hover\:bg-white\/\[0\.04\]:hover {
  background-color: rgb(255 255 255 / 0.04);
}
.hover\:bg-white\/\[0\.05\]:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}
.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgb(255 255 255 / 0.08);
}
.hover\:bg-zinc-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(228 228 231 / 1);
  background-color: rgb(228 228 231 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-200\/70:hover {
  background-color: rgb(228 228 231 / 0.7);
}
.hover\:bg-zinc-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-50\/60:hover {
  background-color: rgb(250 250 250 / 0.6);
}
.hover\:bg-zinc-50\/70:hover {
  background-color: rgb(250 250 250 / 0.7);
}
.hover\:bg-zinc-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / 1);
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.hover\:bg-zinc-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.hover\:from-\[\#3b0a16\]\/70:hover {
  --tw-gradient-from: rgb(59 10 22 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 10 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:pr-5:hover {
  padding-right: 1.25rem;
}
.hover\:text-\[\#050403\]:hover {
  --tw-text-opacity: 1;
  color: rgb(5 4 3 / 1);
  color: rgb(5 4 3 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#0A0807\]:hover {
  --tw-text-opacity: 1;
  color: rgb(10 8 7 / 1);
  color: rgb(10 8 7 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#5E0F25\]:hover {
  --tw-text-opacity: 1;
  color: rgb(94 15 37 / 1);
  color: rgb(94 15 37 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#6E1424\]:hover {
  --tw-text-opacity: 1;
  color: rgb(110 20 36 / 1);
  color: rgb(110 20 36 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#7C3AED\]:hover {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / 1);
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#8A1C2E\]:hover {
  --tw-text-opacity: 1;
  color: rgb(138 28 46 / 1);
  color: rgb(138 28 46 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#8B1A2C\]:hover {
  --tw-text-opacity: 1;
  color: rgb(139 26 44 / 1);
  color: rgb(139 26 44 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#9D174D\]:hover {
  --tw-text-opacity: 1;
  color: rgb(157 23 77 / 1);
  color: rgb(157 23 77 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#B23548\]:hover {
  --tw-text-opacity: 1;
  color: rgb(178 53 72 / 1);
  color: rgb(178 53 72 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#E8A4B0\]:hover {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-foreground:hover {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.hover\:text-amber-600:hover {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / 1);
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-500:hover {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / 1);
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.hover\:text-primary-foreground:hover {
  color: hsl(0 0% 100%);
  color: hsl(var(--primary-foreground));
}
.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / 1);
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-700:hover {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / 1);
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-900:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / 1);
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/80:hover {
  color: rgb(255 255 255 / 0.8);
}
.hover\:text-zinc-200:hover {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-300:hover {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-700:hover {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-900:hover {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.hover\:text-zinc-950:hover {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / 1);
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-2xl:hover {
  --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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_14px_36px_-16px_rgba\(139\2c 26\2c 44\2c 0\.30\)\]:hover {
  --tw-shadow: 0 14px 36px -16px rgba(139,26,44,0.30);
  --tw-shadow-colored: 0 14px 36px -16px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_18px_44px_-18px_rgba\(139\2c 26\2c 44\2c 0\.30\)\]:hover {
  --tw-shadow: 0 18px 44px -18px rgba(139,26,44,0.30);
  --tw-shadow-colored: 0 18px 44px -18px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_24px_64px_-24px_rgba\(139\2c 26\2c 44\2c 0\.45\)\]:hover {
  --tw-shadow: 0 24px 64px -24px rgba(139,26,44,0.45);
  --tw-shadow-colored: 0 24px 64px -24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_14px_-4px_rgba\(139\2c 26\2c 44\2c 0\.55\)\]:hover {
  --tw-shadow: 0 4px 14px -4px rgba(139,26,44,0.55);
  --tw-shadow-colored: 0 4px 14px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_14px_rgba\(139\2c 26\2c 44\2c 0\.30\)\]:hover {
  --tw-shadow: 0 4px 14px rgba(139,26,44,0.30);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_14px_rgba\(200\2c 38\2c 76\2c 0\.35\)\]:hover {
  --tw-shadow: 0 4px 14px rgba(200,38,76,0.35);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_4px_24px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]:hover {
  --tw-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_8px_28px_-12px_rgba\(139\2c 26\2c 44\2c 0\.30\)\]:hover {
  --tw-shadow: 0 8px 28px -12px rgba(139,26,44,0.30);
  --tw-shadow-colored: 0 8px 28px -12px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-md:hover {
  --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: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:brightness-110:hover {
  --tw-brightness: brightness(1.1);
  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);
}
.hover\:brightness-\[1\.08\]:hover {
  --tw-brightness: brightness(1.08);
  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);
}
.focus\:border-\[\#8B1A2C\]:focus {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.focus\:border-\[var\(--atelier-gold\)\]:focus {
  border-color: var(--atelier-gold);
}
.focus\:border-slate-900:focus {
  --tw-border-opacity: 1;
  border-color: rgb(15 23 42 / 1);
  border-color: rgb(15 23 42 / var(--tw-border-opacity, 1));
}
.focus\:border-white\/40:focus {
  border-color: rgb(255 255 255 / 0.4);
}
.focus\:border-zinc-900:focus {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.focus\:bg-accent:focus {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.focus\:bg-primary:focus {
  background-color: hsl(350 89% 50%);
  background-color: hsl(var(--primary));
}
.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.focus\:text-accent-foreground:focus {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.focus\:text-primary-foreground:focus {
  color: hsl(0 0% 100%);
  color: hsl(var(--primary-foreground));
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:shadow-\[0_0_0_3px_rgba\(139\2c 26\2c 44\2c 0\.18\)\]:focus {
  --tw-shadow: 0 0 0 3px rgba(139,26,44,0.18);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-\[\#8B1A2C\]:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(139 26 44 / var(--tw-ring-opacity, 1));
}
.focus\:ring-\[\#8B1A2C\]\/30:focus {
  --tw-ring-color: rgb(139 26 44 / 0.3);
}
.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.active\:translate-y-px:active {
  --tw-translate-y: 1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:bg-\[\#8A1C2E\]\/\[0\.10\]:active {
  background-color: rgb(138 28 46 / 0.10);
}
.active\:bg-zinc-100:active {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:translate-y-0:disabled {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-\[\#5E0F25\]\/40:disabled {
  background-color: rgb(94 15 37 / 0.4);
}
.disabled\:bg-slate-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / 1);
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-slate-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / 1);
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-slate-400:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / 1);
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-slate-50:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / 1);
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-zinc-100:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-zinc-300:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(212 212 216 / 1);
  background-color: rgb(212 212 216 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-zinc-400:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(161 161 170 / 1);
  background-color: rgb(161 161 170 / var(--tw-bg-opacity, 1));
}
.disabled\:bg-zinc-50:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(250 250 250 / 1);
  background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
}
.disabled\:text-slate-400:disabled {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / 1);
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.disabled\:text-slate-500:disabled {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / 1);
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.disabled\:text-zinc-500:disabled {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group:hover .group-hover\:h-\[60\%\] {
  height: 60%;
}
.group:hover .group-hover\:w-14 {
  width: 3.5rem;
}
.group:hover .group-hover\:w-16 {
  width: 4rem;
}
.group:hover .group-hover\:max-w-\[200px\] {
  max-width: 200px;
}
.group\/cell:hover .group-hover\/cell\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/cta:hover .group-hover\/cta\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-translate-y-0\.5 {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-y-0\.5 {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:-rotate-12 {
  --tw-rotate: -12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-12 {
  --tw-rotate: 12deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:rotate-\[1\.5deg\] {
  --tw-rotate: 1.5deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-x-100 {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-\[\#8B1A2C\] {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:border-\[\#8B1A2C\]\/30 {
  border-color: rgb(139 26 44 / 0.3);
}
.group:hover .group-hover\:border-\[\#C5A357\] {
  --tw-border-opacity: 1;
  border-color: rgb(197 163 87 / 1);
  border-color: rgb(197 163 87 / var(--tw-border-opacity, 1));
}
.group\/cell:hover .group-hover\/cell\:bg-\[\#8B1A2C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.group\/cell:hover .group-hover\/cell\:bg-\[\#8B1A2C\]\/\[0\.04\] {
  background-color: rgb(139 26 44 / 0.04);
}
.group:hover .group-hover\:bg-\[\#5E0F25\] {
  --tw-bg-opacity: 1;
  background-color: rgb(94 15 37 / 1);
  background-color: rgb(94 15 37 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-\[\#8B1A2C\] {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-\[\#5E0F25\] {
  --tw-text-opacity: 1;
  color: rgb(94 15 37 / 1);
  color: rgb(94 15 37 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#8B1A2C\] {
  --tw-text-opacity: 1;
  color: rgb(139 26 44 / 1);
  color: rgb(139 26 44 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#8B1A2C\]\/30 {
  color: rgb(139 26 44 / 0.3);
}
.group:hover .group-hover\:text-\[\#E8A4B0\] {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-zinc-900 {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-zinc-950 {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / 1);
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.group\/cell:hover .group-hover\/cell\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-40 {
  opacity: 0.4;
}
.group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}
.group:hover .group-hover\:opacity-90 {
  opacity: 0.9;
}
.group\/cell:hover .group-hover\/cell\:ring-\[\#8B1A2C\]\/60 {
  --tw-ring-color: rgb(139 26 44 / 0.6);
}
.group:focus-visible .group-focus-visible\:h-\[60\%\] {
  height: 60%;
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(210 40% 96% / 0.4);
  border-color: hsl(var(--muted) / 0.4);
}
.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(214 32% 91%);
  border-color: hsl(var(--border));
}
.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--muted));
}
.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(350 89% 50%);
  background-color: hsl(var(--primary));
}
.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
}
.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(0 0% 100%);
  color: hsl(var(--primary-foreground));
}
.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.group.toaster .group-\[\.toaster\]\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(0 73% 51% / 0.3);
  border-color: hsl(var(--destructive) / 0.3);
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(0 73% 51%);
  background-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(0 0% 100%);
  color: hsl(var(--destructive-foreground));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / 1);
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}
.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(210 40% 96% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[selected\=true\]\:border-l-2[data-selected="true"] {
  border-left-width: 2px;
}
.data-\[selected\=true\]\:border-\[\#8B1A2C\][data-selected="true"] {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.data-\[selected\=true\]\:bg-white\/\[0\.06\][data-selected="true"] {
  background-color: rgb(255 255 255 / 0.06);
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(0 0% 100%);
  background-color: hsl(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(350 89% 50%);
  background-color: hsl(var(--primary));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(210 40% 96% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(215 20% 30%);
  background-color: hsl(var(--secondary));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(214 32% 91%);
  background-color: hsl(var(--input));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(0 0% 100%);
  color: hsl(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(222 47% 11%);
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=active\]\:shadow[data-state="active"] {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group[data-selected="true"] .group-data-\[selected\=true\]\:text-\[\#8B1A2C\] {
  --tw-text-opacity: 1;
  color: rgb(139 26 44 / 1);
  color: rgb(139 26 44 / var(--tw-text-opacity, 1));
}
.group[data-selected="true"] .group-data-\[selected\=true\]\:text-\[\#E8A4B0\] {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.group[data-selected="true"] .group-data-\[selected\=true\]\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:divide-white\/10:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}
.dark\:divide-white\/5:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.05);
}
.dark\:border-\[\#1E1E24\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(30 30 36 / 1);
  border-color: rgb(30 30 36 / var(--tw-border-opacity, 1));
}
.dark\:border-\[\#1F1F23\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(31 31 35 / 1);
  border-color: rgb(31 31 35 / var(--tw-border-opacity, 1));
}
.dark\:border-\[\#27272A\]:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / 1);
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.dark\:border-\[\#8A1C2E\]\/30:is(.dark *) {
  border-color: rgb(138 28 46 / 0.3);
}
.dark\:border-\[\#8B1A2C\]\/25:is(.dark *) {
  border-color: rgb(139 26 44 / 0.25);
}
.dark\:border-\[\#8B1A2C\]\/30:is(.dark *) {
  border-color: rgb(139 26 44 / 0.3);
}
.dark\:border-\[\#8B1A2C\]\/40:is(.dark *) {
  border-color: rgb(139 26 44 / 0.4);
}
.dark\:border-amber-500\/20:is(.dark *) {
  border-color: rgb(245 158 11 / 0.2);
}
.dark\:border-amber-500\/30:is(.dark *) {
  border-color: rgb(245 158 11 / 0.3);
}
.dark\:border-amber-500\/40:is(.dark *) {
  border-color: rgb(245 158 11 / 0.4);
}
.dark\:border-blue-500\/30:is(.dark *) {
  border-color: rgb(59 130 246 / 0.3);
}
.dark\:border-destructive:is(.dark *) {
  border-color: hsl(0 73% 51%);
  border-color: hsl(var(--destructive));
}
.dark\:border-emerald-500\/30:is(.dark *) {
  border-color: rgb(16 185 129 / 0.3);
}
.dark\:border-emerald-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / 1);
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.dark\:border-emerald-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(6 95 70 / 1);
  border-color: rgb(6 95 70 / var(--tw-border-opacity, 1));
}
.dark\:border-rose-500\/20:is(.dark *) {
  border-color: rgb(244 63 94 / 0.2);
}
.dark\:border-white\/10:is(.dark *) {
  border-color: rgb(255 255 255 / 0.1);
}
.dark\:border-white\/15:is(.dark *) {
  border-color: rgb(255 255 255 / 0.15);
}
.dark\:border-white\/20:is(.dark *) {
  border-color: rgb(255 255 255 / 0.2);
}
.dark\:border-white\/30:is(.dark *) {
  border-color: rgb(255 255 255 / 0.3);
}
.dark\:border-white\/5:is(.dark *) {
  border-color: rgb(255 255 255 / 0.05);
}
.dark\:border-white\/\[0\.08\]:is(.dark *) {
  border-color: rgb(255 255 255 / 0.08);
}
.dark\:border-white\/\[0\.18\]:is(.dark *) {
  border-color: rgb(255 255 255 / 0.18);
}
.dark\:border-zinc-200:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(228 228 231 / 1);
  border-color: rgb(228 228 231 / var(--tw-border-opacity, 1));
}
.dark\:border-zinc-700:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / 1);
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.dark\:border-zinc-800:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(39 39 42 / 1);
  border-color: rgb(39 39 42 / var(--tw-border-opacity, 1));
}
.dark\:border-zinc-900:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(24 24 27 / 1);
  border-color: rgb(24 24 27 / var(--tw-border-opacity, 1));
}
.dark\:border-zinc-950:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(9 9 11 / 1);
  border-color: rgb(9 9 11 / var(--tw-border-opacity, 1));
}
.dark\:bg-\[\#09090B\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / 1);
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#0F0F12\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 18 / 1);
  background-color: rgb(15 15 18 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#8A1C2E\]\/10:is(.dark *) {
  background-color: rgb(138 28 46 / 0.1);
}
.dark\:bg-\[\#8B1A2C\]:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.dark\:bg-\[\#8B1A2C\]\/15:is(.dark *) {
  background-color: rgb(139 26 44 / 0.15);
}
.dark\:bg-\[\#8B1A2C\]\/20:is(.dark *) {
  background-color: rgb(139 26 44 / 0.2);
}
.dark\:bg-\[\#8B1A2C\]\/\[0\.14\]:is(.dark *) {
  background-color: rgb(139 26 44 / 0.14);
}
.dark\:bg-\[\#8B1A2C\]\/\[0\.15\]:is(.dark *) {
  background-color: rgb(139 26 44 / 0.15);
}
.dark\:bg-\[\#8B1A2C\]\/\[0\.20\]:is(.dark *) {
  background-color: rgb(139 26 44 / 0.20);
}
.dark\:bg-\[rgba\(15\2c 15\2c 15\2c 0\.70\)\]:is(.dark *) {
  background-color: rgba(15,15,15,0.70);
}
.dark\:bg-amber-500\/10:is(.dark *) {
  background-color: rgb(245 158 11 / 0.1);
}
.dark\:bg-amber-500\/15:is(.dark *) {
  background-color: rgb(245 158 11 / 0.15);
}
.dark\:bg-amber-500\/20:is(.dark *) {
  background-color: rgb(245 158 11 / 0.2);
}
.dark\:bg-amber-900\/20:is(.dark *) {
  background-color: rgb(120 53 15 / 0.2);
}
.dark\:bg-black:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / 1);
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.dark\:bg-black\/40:is(.dark *) {
  background-color: rgb(0 0 0 / 0.4);
}
.dark\:bg-blue-500\/10:is(.dark *) {
  background-color: rgb(59 130 246 / 0.1);
}
.dark\:bg-blue-500\/15:is(.dark *) {
  background-color: rgb(59 130 246 / 0.15);
}
.dark\:bg-emerald-500\/10:is(.dark *) {
  background-color: rgb(16 185 129 / 0.1);
}
.dark\:bg-emerald-500\/15:is(.dark *) {
  background-color: rgb(16 185 129 / 0.15);
}
.dark\:bg-emerald-900\/20:is(.dark *) {
  background-color: rgb(6 78 59 / 0.2);
}
.dark\:bg-rose-500\/10:is(.dark *) {
  background-color: rgb(244 63 94 / 0.1);
}
.dark\:bg-rose-500\/15:is(.dark *) {
  background-color: rgb(244 63 94 / 0.15);
}
.dark\:bg-transparent:is(.dark *) {
  background-color: transparent;
}
.dark\:bg-white:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / 1);
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:bg-white\/10:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
}
.dark\:bg-white\/15:is(.dark *) {
  background-color: rgb(255 255 255 / 0.15);
}
.dark\:bg-white\/5:is(.dark *) {
  background-color: rgb(255 255 255 / 0.05);
}
.dark\:bg-white\/\[0\.025\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.025);
}
.dark\:bg-white\/\[0\.02\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.02);
}
.dark\:bg-white\/\[0\.03\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.03);
}
.dark\:bg-white\/\[0\.04\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.04);
}
.dark\:bg-white\/\[0\.06\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.06);
}
.dark\:bg-white\/\[0\.10\]:is(.dark *) {
  background-color: rgb(255 255 255 / 0.10);
}
.dark\:bg-zinc-500:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(113 113 122 / 1);
  background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
}
.dark\:bg-zinc-700:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(63 63 70 / 1);
  background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1));
}
.dark\:bg-zinc-800:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / 1);
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.dark\:bg-zinc-900:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.dark\:bg-zinc-900\/40:is(.dark *) {
  background-color: rgb(24 24 27 / 0.4);
}
.dark\:bg-zinc-900\/50:is(.dark *) {
  background-color: rgb(24 24 27 / 0.5);
}
.dark\:bg-zinc-900\/60:is(.dark *) {
  background-color: rgb(24 24 27 / 0.6);
}
.dark\:bg-zinc-950:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(9 9 11 / 1);
  background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1));
}
.dark\:bg-zinc-950\/40:is(.dark *) {
  background-color: rgb(9 9 11 / 0.4);
}
.dark\:bg-zinc-950\/80:is(.dark *) {
  background-color: rgb(9 9 11 / 0.8);
}
.dark\:bg-zinc-950\/85:is(.dark *) {
  background-color: rgb(9 9 11 / 0.85);
}
.dark\:bg-zinc-950\/90:is(.dark *) {
  background-color: rgb(9 9 11 / 0.9);
}
.dark\:from-white\/\[0\.04\]:is(.dark *) {
  --tw-gradient-from: rgb(255 255 255 / 0.04) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-zinc-800:is(.dark *) {
  --tw-gradient-from: #27272a var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-zinc-950:is(.dark *) {
  --tw-gradient-from: #09090b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:from-zinc-950\/60:is(.dark *) {
  --tw-gradient-from: rgb(9 9 11 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(9 9 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:via-zinc-900\/40:is(.dark *) {
  --tw-gradient-to: rgb(24 24 27 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(24 24 27 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.dark\:to-transparent:is(.dark *) {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.dark\:to-zinc-900:is(.dark *) {
  --tw-gradient-to: #18181b var(--tw-gradient-to-position);
}
.dark\:to-zinc-950\/60:is(.dark *) {
  --tw-gradient-to: rgb(9 9 11 / 0.6) var(--tw-gradient-to-position);
}
.dark\:text-\[\#00FF66\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(0 255 102 / 1);
  color: rgb(0 255 102 / var(--tw-text-opacity, 1));
}
.dark\:text-\[\#8B1A2C\]\/40:is(.dark *) {
  color: rgb(139 26 44 / 0.4);
}
.dark\:text-\[\#E8A4B0\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.dark\:text-\[\#E8A4B0\]\/85:is(.dark *) {
  color: rgb(232 164 176 / 0.85);
}
.dark\:text-\[\#F5C45A\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(245 196 90 / 1);
  color: rgb(245 196 90 / var(--tw-text-opacity, 1));
}
.dark\:text-\[\#FBCFE8\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 207 232 / 1);
  color: rgb(251 207 232 / var(--tw-text-opacity, 1));
}
.dark\:text-\[\#FFD4DC\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 212 220 / 1);
  color: rgb(255 212 220 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / 1);
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / 1);
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / 1);
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.dark\:text-amber-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / 1);
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / 1);
  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
}
.dark\:text-blue-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / 1);
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / 1);
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / 1);
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / 1);
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.dark\:text-emerald-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / 1);
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.dark\:text-red-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / 1);
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.dark\:text-rose-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / 1);
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.dark\:text-slate-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / 1);
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}
.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-100:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / 1);
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-100\/85:is(.dark *) {
  color: rgb(244 244 245 / 0.85);
}
.dark\:text-zinc-200:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-300:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-400:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / 1);
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-50:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / 1);
  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-500:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-600:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(82 82 91 / 1);
  color: rgb(82 82 91 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-700:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-900:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.dark\:text-zinc-950:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(9 9 11 / 1);
  color: rgb(9 9 11 / var(--tw-text-opacity, 1));
}
.dark\:decoration-zinc-700:is(.dark *) {
  -webkit-text-decoration-color: #3f3f46;
          text-decoration-color: #3f3f46;
}
.dark\:opacity-100:is(.dark *) {
  opacity: 1;
}
.dark\:opacity-30:is(.dark *) {
  opacity: 0.3;
}
.dark\:opacity-40:is(.dark *) {
  opacity: 0.4;
}
.dark\:opacity-\[0\.05\]:is(.dark *) {
  opacity: 0.05;
}
.dark\:opacity-\[0\.07\]:is(.dark *) {
  opacity: 0.07;
}
.dark\:opacity-\[0\.08\]:is(.dark *) {
  opacity: 0.08;
}
.dark\:opacity-\[0\.10\]:is(.dark *) {
  opacity: 0.10;
}
.dark\:opacity-\[0\.12\]:is(.dark *) {
  opacity: 0.12;
}
.dark\:opacity-\[0\.16\]:is(.dark *) {
  opacity: 0.16;
}
.dark\:opacity-\[0\.18\]:is(.dark *) {
  opacity: 0.18;
}
.dark\:mix-blend-normal:is(.dark *) {
  mix-blend-mode: normal;
}
.dark\:mix-blend-screen:is(.dark *) {
  mix-blend-mode: screen;
}
.dark\:shadow-\[0_0_0_3px_rgba\(225\2c 29\2c 72\2c 0\.12\)\]:is(.dark *) {
  --tw-shadow: 0 0 0 3px rgba(225,29,72,0.12);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:ring-zinc-950:is(.dark *) {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(9 9 11 / var(--tw-ring-opacity, 1));
}
.dark\:hue-rotate-180:is(.dark *) {
  --tw-hue-rotate: hue-rotate(180deg);
  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);
}
.dark\:invert:is(.dark *) {
  --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);
}
.dark\:saturate-200:is(.dark *) {
  --tw-saturate: saturate(2);
  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);
}
.dark\:placeholder\:text-zinc-300:is(.dark *)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(212 212 216 / 1);
  color: rgb(212 212 216 / var(--tw-text-opacity, 1));
}
.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(113 113 122 / 1);
  color: rgb(113 113 122 / var(--tw-text-opacity, 1));
}
.dark\:placeholder\:text-zinc-700:is(.dark *)::placeholder {
  --tw-text-opacity: 1;
  color: rgb(63 63 70 / 1);
  color: rgb(63 63 70 / var(--tw-text-opacity, 1));
}
.dark\:focus-within\:border-\[\#8B1A2C\]:focus-within:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.dark\:focus-within\:border-\[\#8B1A2C\]\/60:focus-within:is(.dark *) {
  border-color: rgb(139 26 44 / 0.6);
}
.dark\:focus-within\:shadow-\[0_8px_32px_rgba\(225\2c 29\2c 72\2c 0\.18\)\]:focus-within:is(.dark *) {
  --tw-shadow: 0 8px 32px rgba(225,29,72,0.18);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:hover\:border-\[\#8B1A2C\]:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-\[\#8B1A2C\]\/40:hover:is(.dark *) {
  border-color: rgb(139 26 44 / 0.4);
}
.dark\:hover\:border-\[\#8B1A2C\]\/60:hover:is(.dark *) {
  border-color: rgb(139 26 44 / 0.6);
}
.dark\:hover\:border-\[\#E8A4B0\]\/40:hover:is(.dark *) {
  border-color: rgb(232 164 176 / 0.4);
}
.dark\:hover\:border-white:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / 1);
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.dark\:hover\:border-white\/20:hover:is(.dark *) {
  border-color: rgb(255 255 255 / 0.2);
}
.dark\:hover\:border-white\/30:hover:is(.dark *) {
  border-color: rgb(255 255 255 / 0.3);
}
.dark\:hover\:border-white\/40:hover:is(.dark *) {
  border-color: rgb(255 255 255 / 0.4);
}
.dark\:hover\:border-white\/50:hover:is(.dark *) {
  border-color: rgb(255 255 255 / 0.5);
}
.dark\:hover\:border-white\/60:hover:is(.dark *) {
  border-color: rgb(255 255 255 / 0.6);
}
.dark\:hover\:border-zinc-700:hover:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(63 63 70 / 1);
  border-color: rgb(63 63 70 / var(--tw-border-opacity, 1));
}
.dark\:hover\:bg-\[\#0F0F12\]:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 18 / 1);
  background-color: rgb(15 15 18 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-\[\#5E0F25\]:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(94 15 37 / 1);
  background-color: rgb(94 15 37 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-\[\#8A1C2E\]\/10:hover:is(.dark *) {
  background-color: rgb(138 28 46 / 0.1);
}
.dark\:hover\:bg-\[\#8A1C2E\]\/\[0\.10\]:hover:is(.dark *) {
  background-color: rgb(138 28 46 / 0.10);
}
.dark\:hover\:bg-\[\#8B1A2C\]:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(139 26 44 / 1);
  background-color: rgb(139 26 44 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-\[\#8B1A2C\]\/10:hover:is(.dark *) {
  background-color: rgb(139 26 44 / 0.1);
}
.dark\:hover\:bg-\[\#8B1A2C\]\/15:hover:is(.dark *) {
  background-color: rgb(139 26 44 / 0.15);
}
.dark\:hover\:bg-\[\#8B1A2C\]\/20:hover:is(.dark *) {
  background-color: rgb(139 26 44 / 0.2);
}
.dark\:hover\:bg-\[rgba\(138\2c 28\2c 46\2c 0\.12\)\]:hover:is(.dark *) {
  background-color: rgba(138,28,46,0.12);
}
.dark\:hover\:bg-\[rgba\(20\2c 20\2c 20\2c 0\.85\)\]:hover:is(.dark *) {
  background-color: rgba(20,20,20,0.85);
}
.dark\:hover\:bg-white\/10:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.1);
}
.dark\:hover\:bg-white\/5:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.05);
}
.dark\:hover\:bg-white\/\[0\.025\]:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.025);
}
.dark\:hover\:bg-white\/\[0\.03\]:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.03);
}
.dark\:hover\:bg-white\/\[0\.04\]:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.04);
}
.dark\:hover\:bg-white\/\[0\.05\]:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.05);
}
.dark\:hover\:bg-white\/\[0\.06\]:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.06);
}
.dark\:hover\:bg-zinc-100:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 245 / 1);
  background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-zinc-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(39 39 42 / 1);
  background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:bg-zinc-800\/70:hover:is(.dark *) {
  background-color: rgb(39 39 42 / 0.7);
}
.dark\:hover\:bg-zinc-900:hover:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(24 24 27 / 1);
  background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1));
}
.dark\:hover\:text-\[\#B23548\]:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(178 53 72 / 1);
  color: rgb(178 53 72 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-\[\#E8A4B0\]:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-\[\#FCA5A5\]:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-\[\#FFD4DC\]:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 212 220 / 1);
  color: rgb(255 212 220 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-amber-400:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / 1);
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-white:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-zinc-200:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(228 228 231 / 1);
  color: rgb(228 228 231 / var(--tw-text-opacity, 1));
}
.dark\:hover\:text-zinc-900:hover:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(24 24 27 / 1);
  color: rgb(24 24 27 / var(--tw-text-opacity, 1));
}
.dark\:hover\:shadow-\[0_18px_44px_-18px_rgba\(232\2c 164\2c 176\2c 0\.45\)\]:hover:is(.dark *) {
  --tw-shadow: 0 18px 44px -18px rgba(232,164,176,0.45);
  --tw-shadow-colored: 0 18px 44px -18px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:hover\:shadow-\[0_6px_22px_rgba\(139\2c 26\2c 44\2c 0\.18\)\]:hover:is(.dark *) {
  --tw-shadow: 0 6px 22px rgba(139,26,44,0.18);
  --tw-shadow-colored: 0 6px 22px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:focus\:border-\[\#8B1A2C\]:focus:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(139 26 44 / 1);
  border-color: rgb(139 26 44 / var(--tw-border-opacity, 1));
}
.dark\:focus\:border-white\/40:focus:is(.dark *) {
  border-color: rgb(255 255 255 / 0.4);
}
.dark\:focus\:bg-white\/\[0\.14\]:focus:is(.dark *) {
  background-color: rgb(255 255 255 / 0.14);
}
.dark\:focus\:shadow-\[0_0_0_3px_rgba\(255\2c 255\2c 255\2c 0\.18\)\]:focus:is(.dark *) {
  --tw-shadow: 0 0 0 3px rgba(255,255,255,0.18);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dark\:active\:bg-white\/\[0\.07\]:active:is(.dark *) {
  background-color: rgb(255 255 255 / 0.07);
}
.group:hover .dark\:group-hover\:text-\[\#E8A4B0\]:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(232 164 176 / 1);
  color: rgb(232 164 176 / var(--tw-text-opacity, 1));
}
.group:hover .dark\:group-hover\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / 1);
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
@media (min-width: 360px) {

  .xs\:block {
    display: block;
  }

  .xs\:h-9 {
    height: 2.25rem;
  }

  .xs\:h-\[260px\] {
    height: 260px;
  }

  .xs\:w-10 {
    width: 2.5rem;
  }

  .xs\:w-9 {
    width: 2.25rem;
  }

  .xs\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .xs\:text-\[10px\] {
    font-size: 10px;
  }

  .xs\:text-\[12px\] {
    font-size: 12px;
  }

  .xs\:text-\[14px\] {
    font-size: 14px;
  }

  .xs\:text-\[15px\] {
    font-size: 15px;
  }

  .xs\:text-\[32px\] {
    font-size: 32px;
  }

  .xs\:text-\[56px\] {
    font-size: 56px;
  }

  .xs\:text-\[7\.5px\] {
    font-size: 7.5px;
  }

  .xs\:tracking-\[0\.20em\] {
    letter-spacing: 0.20em;
  }

  .xs\:tracking-\[0\.2em\] {
    letter-spacing: 0.2em;
  }
}
@media (min-width: 640px) {

  .sm\:inset-5 {
    inset: 1.25rem;
  }

  .sm\:inset-auto {
    inset: auto;
  }

  .sm\:bottom-0 {
    bottom: 0px;
  }

  .sm\:bottom-14 {
    bottom: 3.5rem;
  }

  .sm\:bottom-24 {
    bottom: 6rem;
  }

  .sm\:bottom-3 {
    bottom: 0.75rem;
  }

  .sm\:bottom-4 {
    bottom: 1rem;
  }

  .sm\:bottom-6 {
    bottom: 1.5rem;
  }

  .sm\:bottom-8 {
    bottom: 2rem;
  }

  .sm\:bottom-9 {
    bottom: 2.25rem;
  }

  .sm\:left-12 {
    left: 3rem;
  }

  .sm\:left-3 {
    left: 0.75rem;
  }

  .sm\:left-4 {
    left: 1rem;
  }

  .sm\:left-5 {
    left: 1.25rem;
  }

  .sm\:left-6 {
    left: 1.5rem;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:right-2 {
    right: 0.5rem;
  }

  .sm\:right-4 {
    right: 1rem;
  }

  .sm\:right-5 {
    right: 1.25rem;
  }

  .sm\:right-6 {
    right: 1.5rem;
  }

  .sm\:right-9 {
    right: 2.25rem;
  }

  .sm\:top-10 {
    top: 2.5rem;
  }

  .sm\:top-2 {
    top: 0.5rem;
  }

  .sm\:top-3 {
    top: 0.75rem;
  }

  .sm\:top-4 {
    top: 1rem;
  }

  .sm\:top-6 {
    top: 1.5rem;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .sm\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .sm\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .sm\:-mx-0 {
    margin-left: -0px;
    margin-right: -0px;
  }

  .sm\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .sm\:-mt-32 {
    margin-top: -8rem;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .sm\:mb-8 {
    margin-bottom: 2rem;
  }

  .sm\:mb-9 {
    margin-bottom: 2.25rem;
  }

  .sm\:ml-1\.5 {
    margin-left: 0.375rem;
  }

  .sm\:ml-2 {
    margin-left: 0.5rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:mt-0\.5 {
    margin-top: 0.125rem;
  }

  .sm\:mt-10 {
    margin-top: 2.5rem;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:mt-16 {
    margin-top: 4rem;
  }

  .sm\:mt-20 {
    margin-top: 5rem;
  }

  .sm\:mt-3 {
    margin-top: 0.75rem;
  }

  .sm\:mt-3\.5 {
    margin-top: 0.875rem;
  }

  .sm\:mt-4 {
    margin-top: 1rem;
  }

  .sm\:mt-5 {
    margin-top: 1.25rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:mt-7 {
    margin-top: 1.75rem;
  }

  .sm\:mt-8 {
    margin-top: 2rem;
  }

  .sm\:mt-9 {
    margin-top: 2.25rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:aspect-\[16\/6\] {
    aspect-ratio: 16/6;
  }

  .sm\:aspect-\[21\/8\] {
    aspect-ratio: 21/8;
  }

  .sm\:aspect-\[21\/9\] {
    aspect-ratio: 21/9;
  }

  .sm\:h-10 {
    height: 2.5rem;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-16 {
    height: 4rem;
  }

  .sm\:h-20 {
    height: 5rem;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:h-4 {
    height: 1rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:h-8 {
    height: 2rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:h-\[112px\] {
    height: 112px;
  }

  .sm\:h-\[18px\] {
    height: 18px;
  }

  .sm\:h-\[320px\] {
    height: 320px;
  }

  .sm\:h-\[360px\] {
    height: 360px;
  }

  .sm\:h-\[420px\] {
    height: 420px;
  }

  .sm\:h-\[46px\] {
    height: 46px;
  }

  .sm\:h-\[560px\] {
    height: 560px;
  }

  .sm\:h-\[62px\] {
    height: 62px;
  }

  .sm\:h-\[88px\] {
    height: 88px;
  }

  .sm\:max-h-\[min\(660px\2c calc\(100vh-160px\)\)\] {
    max-height: min(660px, calc(100vh - 160px));
  }

  .sm\:min-h-\[320px\] {
    min-height: 320px;
  }

  .sm\:min-h-\[420px\] {
    min-height: 420px;
  }

  .sm\:w-10 {
    width: 2.5rem;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-20 {
    width: 5rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-3 {
    width: 0.75rem;
  }

  .sm\:w-4 {
    width: 1rem;
  }

  .sm\:w-40 {
    width: 10rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-56 {
    width: 14rem;
  }

  .sm\:w-6 {
    width: 1.5rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:w-9 {
    width: 2.25rem;
  }

  .sm\:w-\[110px\] {
    width: 110px;
  }

  .sm\:w-\[112px\] {
    width: 112px;
  }

  .sm\:w-\[18px\] {
    width: 18px;
  }

  .sm\:w-\[280px\] {
    width: 280px;
  }

  .sm\:w-\[320px\] {
    width: 320px;
  }

  .sm\:w-\[360px\] {
    width: 360px;
  }

  .sm\:w-\[420px\] {
    width: 420px;
  }

  .sm\:w-\[46px\] {
    width: 46px;
  }

  .sm\:w-\[480px\] {
    width: 480px;
  }

  .sm\:w-\[88px\] {
    width: 88px;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[360px\] {
    min-width: 360px;
  }

  .sm\:min-w-\[380px\] {
    min-width: 380px;
  }

  .sm\:max-w-\[240px\] {
    max-width: 240px;
  }

  .sm\:max-w-\[340px\] {
    max-width: 340px;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:flex-1 {
    flex: 1 1;
  }

  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sm\:grid-cols-\[1fr_1fr_2fr\] {
    grid-template-columns: 1fr 1fr 2fr;
  }

  .sm\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .sm\:grid-cols-\[1fr_auto_auto\] {
    grid-template-columns: 1fr auto auto;
  }

  .sm\:grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .sm\:grid-cols-\[minmax\(120px\2c 1fr\)_auto_minmax\(180px\2c 1\.4fr\)\] {
    grid-template-columns: minmax(120px,1fr) auto minmax(180px,1.4fr);
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:flex-wrap {
    flex-wrap: wrap;
  }

  .sm\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:items-baseline {
    align-items: baseline;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-0 {
    gap: 0px;
  }

  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }

  .sm\:gap-10 {
    gap: 2.5rem;
  }

  .sm\:gap-12 {
    gap: 3rem;
  }

  .sm\:gap-2 {
    gap: 0.5rem;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-7 {
    gap: 1.75rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-x-5 {
    column-gap: 1.25rem;
  }

  .sm\:gap-x-7 {
    column-gap: 1.75rem;
  }

  .sm\:gap-y-2 {
    row-gap: 0.5rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:space-y-10 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-16 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(4rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
  }

  .sm\:space-y-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(2rem * var(--tw-space-y-reverse));
  }

  .sm\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .sm\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:whitespace-nowrap {
    white-space: nowrap;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-lg {
    border-radius: 0.25rem;
    border-radius: var(--radius);
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .sm\:border {
    border-width: 1px;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-3\.5 {
    padding: 0.875rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:p-9 {
    padding: 2.25rem;
  }

  .sm\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .sm\:px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .sm\:px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:px-9 {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .sm\:py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .sm\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .sm\:py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .sm\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sm\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .sm\:py-\[120px\] {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .sm\:pb-12 {
    padding-bottom: 3rem;
  }

  .sm\:pb-14 {
    padding-bottom: 3.5rem;
  }

  .sm\:pb-16 {
    padding-bottom: 4rem;
  }

  .sm\:pb-2 {
    padding-bottom: 0.5rem;
  }

  .sm\:pb-20 {
    padding-bottom: 5rem;
  }

  .sm\:pb-24 {
    padding-bottom: 6rem;
  }

  .sm\:pb-32 {
    padding-bottom: 8rem;
  }

  .sm\:pb-8 {
    padding-bottom: 2rem;
  }

  .sm\:pl-16 {
    padding-left: 4rem;
  }

  .sm\:pl-4 {
    padding-left: 1rem;
  }

  .sm\:pl-6 {
    padding-left: 1.5rem;
  }

  .sm\:pl-7 {
    padding-left: 1.75rem;
  }

  .sm\:pl-8 {
    padding-left: 2rem;
  }

  .sm\:pl-\[92px\] {
    padding-left: 92px;
  }

  .sm\:pr-4 {
    padding-right: 1rem;
  }

  .sm\:pt-10 {
    padding-top: 2.5rem;
  }

  .sm\:pt-14 {
    padding-top: 3.5rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:pt-20 {
    padding-top: 5rem;
  }

  .sm\:pt-28 {
    padding-top: 7rem;
  }

  .sm\:pt-4 {
    padding-top: 1rem;
  }

  .sm\:pt-8 {
    padding-top: 2rem;
  }

  .sm\:pt-\[14vh\] {
    padding-top: 14vh;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-\[10\.5px\] {
    font-size: 10.5px;
  }

  .sm\:text-\[10px\] {
    font-size: 10px;
  }

  .sm\:text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .sm\:text-\[11px\] {
    font-size: 11px;
  }

  .sm\:text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .sm\:text-\[12px\] {
    font-size: 12px;
  }

  .sm\:text-\[13px\] {
    font-size: 13px;
  }

  .sm\:text-\[14\.5px\] {
    font-size: 14.5px;
  }

  .sm\:text-\[14px\] {
    font-size: 14px;
  }

  .sm\:text-\[15\.5px\] {
    font-size: 15.5px;
  }

  .sm\:text-\[15px\] {
    font-size: 15px;
  }

  .sm\:text-\[16\.5px\] {
    font-size: 16.5px;
  }

  .sm\:text-\[16px\] {
    font-size: 16px;
  }

  .sm\:text-\[17px\] {
    font-size: 17px;
  }

  .sm\:text-\[18px\] {
    font-size: 18px;
  }

  .sm\:text-\[19px\] {
    font-size: 19px;
  }

  .sm\:text-\[20px\] {
    font-size: 20px;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[24px\] {
    font-size: 24px;
  }

  .sm\:text-\[26px\] {
    font-size: 26px;
  }

  .sm\:text-\[28px\] {
    font-size: 28px;
  }

  .sm\:text-\[30px\] {
    font-size: 30px;
  }

  .sm\:text-\[32px\] {
    font-size: 32px;
  }

  .sm\:text-\[34px\] {
    font-size: 34px;
  }

  .sm\:text-\[36px\] {
    font-size: 36px;
  }

  .sm\:text-\[38px\] {
    font-size: 38px;
  }

  .sm\:text-\[40px\] {
    font-size: 40px;
  }

  .sm\:text-\[42px\] {
    font-size: 42px;
  }

  .sm\:text-\[44px\] {
    font-size: 44px;
  }

  .sm\:text-\[48px\] {
    font-size: 48px;
  }

  .sm\:text-\[56px\] {
    font-size: 56px;
  }

  .sm\:text-\[58px\] {
    font-size: 58px;
  }

  .sm\:text-\[60px\] {
    font-size: 60px;
  }

  .sm\:text-\[64px\] {
    font-size: 64px;
  }

  .sm\:text-\[68px\] {
    font-size: 68px;
  }

  .sm\:text-\[72px\] {
    font-size: 72px;
  }

  .sm\:text-\[8\.5px\] {
    font-size: 8.5px;
  }

  .sm\:text-\[88px\] {
    font-size: 88px;
  }

  .sm\:text-\[8px\] {
    font-size: 8px;
  }

  .sm\:text-\[9\.5px\] {
    font-size: 9.5px;
  }

  .sm\:text-\[9px\] {
    font-size: 9px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }

  .sm\:tracking-\[0\.24em\] {
    letter-spacing: 0.24em;
  }

  .sm\:tracking-\[0\.28em\] {
    letter-spacing: 0.28em;
  }

  .sm\:tracking-\[0\.42em\] {
    letter-spacing: 0.42em;
  }

  .first\:sm\:pl-0:first-child {
    padding-left: 0px;
  }

  .last\:sm\:pr-0:last-child {
    padding-right: 0px;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:flex {
    display: flex;
  }

  .md\:inline-flex {
    display: inline-flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[400px\] {
    height: 400px;
  }

  .md\:h-\[460px\] {
    height: 460px;
  }

  .md\:h-\[640px\] {
    height: 640px;
  }

  .md\:w-\[400px\] {
    width: 400px;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-\[420px\] {
    max-width: 420px;
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-\[140px_1fr_1fr\] {
    grid-template-columns: 140px 1fr 1fr;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:pl-5 {
    padding-left: 1.25rem;
  }

  .md\:pt-1 {
    padding-top: 0.25rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-\[56px\] {
    font-size: 56px;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: -webkit-sticky;
    position: sticky;
  }

  .lg\:left-auto {
    left: auto;
  }

  .lg\:right-0 {
    right: 0px;
  }

  .lg\:top-0 {
    top: 0px;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-10 {
    margin-top: 2.5rem;
  }

  .lg\:mt-24 {
    margin-top: 6rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:aspect-auto {
    aspect-ratio: auto;
  }

  .lg\:h-80 {
    height: 20rem;
  }

  .lg\:h-\[52px\] {
    height: 52px;
  }

  .lg\:h-\[540px\] {
    height: 540px;
  }

  .lg\:h-\[560px\] {
    height: 560px;
  }

  .lg\:h-\[68px\] {
    height: 68px;
  }

  .lg\:h-\[720px\] {
    height: 720px;
  }

  .lg\:min-h-\[360px\] {
    min-height: 360px;
  }

  .lg\:min-h-\[420px\] {
    min-height: 420px;
  }

  .lg\:w-\[380px\] {
    width: 380px;
  }

  .lg\:w-\[40\%\] {
    width: 40%;
  }

  .lg\:w-\[52px\] {
    width: 52px;
  }

  .lg\:max-w-2xl {
    max-width: 42rem;
  }

  .lg\:translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_320px\] {
    grid-template-columns: 1fr 320px;
  }

  .lg\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .lg\:grid-cols-\[260px_1fr\] {
    grid-template-columns: 260px 1fr;
  }

  .lg\:grid-cols-\[280px_1fr\] {
    grid-template-columns: 280px 1fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:flex-nowrap {
    flex-wrap: nowrap;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:items-stretch {
    align-items: stretch;
  }

  .lg\:justify-start {
    justify-content: flex-start;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-3 {
    gap: 0.75rem;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-6 {
    gap: 1.5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .lg\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .lg\:self-auto {
    align-self: auto;
  }

  .lg\:border-l {
    border-left-width: 1px;
  }

  .lg\:border-\[\#0A0A0A\] {
    --tw-border-opacity: 1;
    border-color: rgb(10 10 10 / 1);
    border-color: rgb(10 10 10 / var(--tw-border-opacity, 1));
  }

  .lg\:border-white\/15 {
    border-color: rgb(255 255 255 / 0.15);
  }

  .lg\:border-white\/30 {
    border-color: rgb(255 255 255 / 0.3);
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-14 {
    padding: 3.5rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .lg\:px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .lg\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .lg\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .lg\:py-9 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .lg\:py-\[160px\] {
    padding-top: 160px;
    padding-bottom: 160px;
  }

  .lg\:pb-8 {
    padding-bottom: 2rem;
  }

  .lg\:pl-12 {
    padding-left: 3rem;
  }

  .lg\:pl-8 {
    padding-left: 2rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:pt-32 {
    padding-top: 8rem;
  }

  .lg\:text-left {
    text-align: left;
  }

  .lg\:text-right {
    text-align: right;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .lg\:text-\[120px\] {
    font-size: 120px;
  }

  .lg\:text-\[124px\] {
    font-size: 124px;
  }

  .lg\:text-\[17px\] {
    font-size: 17px;
  }

  .lg\:text-\[18\.5px\] {
    font-size: 18.5px;
  }

  .lg\:text-\[22px\] {
    font-size: 22px;
  }

  .lg\:text-\[26px\] {
    font-size: 26px;
  }

  .lg\:text-\[28px\] {
    font-size: 28px;
  }

  .lg\:text-\[34px\] {
    font-size: 34px;
  }

  .lg\:text-\[36px\] {
    font-size: 36px;
  }

  .lg\:text-\[40px\] {
    font-size: 40px;
  }

  .lg\:text-\[44px\] {
    font-size: 44px;
  }

  .lg\:text-\[48px\] {
    font-size: 48px;
  }

  .lg\:text-\[52px\] {
    font-size: 52px;
  }

  .lg\:text-\[56px\] {
    font-size: 56px;
  }

  .lg\:text-\[58px\] {
    font-size: 58px;
  }

  .lg\:text-\[60px\] {
    font-size: 60px;
  }

  .lg\:text-\[64px\] {
    font-size: 64px;
  }

  .lg\:text-\[68px\] {
    font-size: 68px;
  }

  .lg\:text-\[78px\] {
    font-size: 78px;
  }

  .lg\:text-\[80px\] {
    font-size: 80px;
  }

  .lg\:text-\[88px\] {
    font-size: 88px;
  }

  .lg\:text-\[9\.5px\] {
    font-size: 9.5px;
  }

  .lg\:text-\[96px\] {
    font-size: 96px;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .lg\:tracking-\[0\.28em\] {
    letter-spacing: 0.28em;
  }

  .first\:lg\:pl-0:first-child {
    padding-left: 0px;
  }

  .last\:lg\:pr-0:last-child {
    padding-right: 0px;
  }
}
@media (min-width: 1280px) {

  .xl\:inline {
    display: inline;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:gap-1\.5 {
    gap: 0.375rem;
  }

  .xl\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xl\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .xl\:text-\[56px\] {
    font-size: 56px;
  }
}
@media print {

  .print\:hidden {
    display: none;
  }
}
.\[\&\+div\]\:text-xs+div {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
  border-top-right-radius: calc(0.25rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.25rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
  border-top-left-radius: calc(0.25rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.25rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
  border-radius: calc(0.25rem - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(210 40% 96%);
  background-color: hsl(var(--accent));
}
.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(0.25rem - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(0.25rem - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(0.25rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.25rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(210 40% 96% / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(0.25rem - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(0.25rem - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (min-width: 1024px) {

  .lg\:\[\&\>div\:first-child\]\:order-2>div:first-child {
    order: 2;
  }
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}
.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(0 73% 51%);
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(222 47% 11%);
  color: hsl(var(--foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(215 16% 46%);
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}


/* ====================================================================
   ZERO-TOLERANCE GLOBAL COLOR ENGINE — iter-171
   --------------------------------------------------------------------
   Founder-spec, dropped in verbatim on 2026-05-24. Cascades AFTER
   index.css so it wins every routine override. Bridges to the existing
   Tailwind `html.dark` class via the small init script in
   /app/frontend/public/index.html that mirrors `html.dark` →
   `data-theme="dark"` (and the inverse for light) so both selector
   systems stay in lock-step.
   ==================================================================== */

:root {
  --universal-crimson: #8A1C2E;       /* Exact luxury deep maroon accent */
  --pure-white:        #FFFFFF;
  --pure-black:        #000000;
  --neutral-dark-gray: #121212;
  --neutral-light-gray:#F5F5F7;
  --grid-line-color:   rgba(138, 28, 46, 0.15);
}

/* Light Mode Configuration ------------------------------------------- */
[data-theme="light"] {
  --bg-main:         var(--pure-white);
  --text-main:       var(--pure-black);
  --accent-element:  var(--universal-crimson);
  --surface-card:    var(--neutral-light-gray);
  --badge-soon-bg:   rgba(138, 28, 46, 0.1);
  --badge-soon-text: var(--universal-crimson);
}

/* Dark Mode Configuration -------------------------------------------- */
[data-theme="dark"] {
  --bg-main:         var(--pure-black);
  --text-main:       var(--pure-white);
  --accent-element:  var(--universal-crimson);
  --surface-card:    var(--neutral-dark-gray);
  --badge-soon-bg:   rgba(138, 28, 46, 0.2);
  --badge-soon-text: var(--pure-white);
}

/* Global Polish — kill unapproved overrides -------------------------- *
 * Important: only applied to BARE elements. Anything carrying a
 * Tailwind utility class (.bg-black/.text-white/etc) or a custom
 * .font-display class continues to win on specificity. */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}
span, p, h1, h2, h3, h4, div, button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Brand Grid --------------------------------------------------------- *
 * Constrains the OEM logo block on Workshops/B2B pages. */
.brand-grid-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px;
  background: transparent;
}
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
@media (max-width: 768px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
.brand-card {
  max-height: 70px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.brand-card img {
  max-width: 45px;
  height: auto;
  object-fit: contain;
}

/* Modal scroll-lock + scrollbar-compensation ------------------------- *
 * iter-173: stronger mobile lock. `overflow:hidden` alone is bypassed
 * by touch scrolling on iOS Safari + Android Chrome — the body still
 * scrolls underneath the modal. We now also fix the body to the
 * viewport with `position:fixed` and `top:-storedY` so the page can't
 * shift no matter what the user does. The React open-handler stores
 * the current scrollY on a CSS var and restores it on close. */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  top: var(--scroll-lock-y, 0) !important;
  padding-right: 0px;
  padding-right: var(--scrollbar-compensated-width, 0px);
}

/* Ecosystem Popup ---------------------------------------------------- *
 * iter-173: dead-center using absolute-transform — flex centering
 * was getting clipped by the dynamic mobile viewport (the URL bar
 * shrinks the actual visible height vs `100vh`). Absolute + transform
 * is mathematically guaranteed to center regardless of viewport
 * quirks. */
.ecosystem-popup-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;        /* dynamic viewport — respects URL bar */
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  overscroll-behavior: contain;
  touch-action: none;     /* kill rubber-band scroll on mobile */
}
.ecosystem-popup-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  /* Default theme: BLACK obsidian + crimson hairline (Wholesale-card
     aesthetic). The JOY Vellox modal opts out via the modifier class
     below. */
  background: #050505;
  color: #F5F5F7;
  border: 1px solid #8A1C2E;
  border: 1px solid var(--universal-crimson);
  border-radius: 0;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(138, 28, 46, 0.18) inset;
  overflow-x: hidden;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* JOY Vellox (entry n=04) keeps its copper / atelier theme. */
.ecosystem-popup-box.is-atelier {
  background: #FFFFFF;
  color: #111111;
  border-color: #E6A079;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(230, 160, 121, 0.32) inset;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Rigid typography on large viewports -------------------------------- */
@media (min-width: 1024px) {
  /* Restricted to plain h1/h2 — Tailwind utility classes still win. */
  h1:not([class*="text-"]) {
    font-size: clamp(2.5rem, 4vw, 3.75rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
  }
  h2:not([class*="text-"]) {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }
  p:not([class*="text-"]),
  td:not([class*="text-"]) {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--text-main);
  }
  .desktop-max-bound {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Quick-Nav Drawer Rows ---------------------------------------------- */
.nav-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(138, 28, 46, 0.08);
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease;
}
.nav-row-item:hover {
  background: rgba(138, 28, 46, 0.03);
}
.nav-left-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-label-group {
  display: flex;
  flex-direction: column;
}
.nav-title-text {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
}
.nav-subtitle-text {
  font-size: 12px;
  color: #777777;
  margin-top: 2px;
}

/* Unified Status Badges ---------------------------------------------- */
.badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 6px;
  border-radius: 2px;
}
.badge.status-live {
  background: rgba(138, 28, 46, 0.1);
  color: #8A1C2E;
  color: var(--universal-crimson);
}
.badge.status-soon {
  background: rgba(0, 0, 0, 0.05);
  color: #777777;
}

/* ════════════════════════════════════════════════════════════════════════
 * iter-253 · PINK PURGE — dark glassy crimson glow replaces all pink tones.
 * Loaded LAST in index.css so it wins specificity vs prior rose-gold layers.
 *
 * SCOPE (user-confirmed iter-253):
 *   ✅ .portal-shell        → Admin panel + Trade OS cockpit (Layout.jsx)
 *   ✅ .joy-login-shell     → Login + Signup pages
 *   ❌ public marketing     → /, /about, /technology, /jdm-lookup etc keep their palette
 *
 * Replaces all variants of:
 *   #E8A4B0  #FFD4DC  #FBA9B5  #FBCFE8  #FCE7F3  pink-*  fuchsia-*  rose-*
 * with a tuned crimson scale:
 *   • dominant: #8B1A2C  (deep glassy crimson)
 *   • highlight: #B91C1C (crimson glow)
 *   • soft glass: rgba(139,26,44,0.18) for surfaces
 *   • white/black contrast text per mode
 *
 * Override token: data-keep-pink to opt-out a single element if needed.
 * ════════════════════════════════════════════════════════════════════════ */

:root {
  --joy-crimson:         #8B1A2C;
  --joy-crimson-glow:    #B91C1C;
  --joy-crimson-deep:    #5E0F25;
  --joy-crimson-glass:   rgba(139, 26, 44, 0.18);
  --joy-crimson-soft:    rgba(139, 26, 44, 0.08);
}

/* ── 1 · Light mode (default): crimson on white ─────────────────────────── */
html:not(.dark) .portal-shell,
html:not(.dark) .joy-login-shell {
  --joy-rosegold:    var(--joy-crimson);
  --joy-red-ink:     var(--joy-crimson);
  --uhd-shell-muted: var(--joy-crimson);
}

/* ── 2 · Dark mode: glassy crimson with subtle backlit glow ────────────── */
html.dark .portal-shell,
html.dark .joy-login-shell {
  --joy-rosegold:    #C84A5E;            /* crimson with extra luminance for dark */
  --joy-red-ink:     #C84A5E;
  --uhd-shell-muted: #C84A5E;
}

/* ── 3 · Direct-value replacements via attribute-substring selectors ───── */
.portal-shell [style*="#FFD4DC"]:not([data-keep-pink]),
.joy-login-shell [style*="#FFD4DC"]:not([data-keep-pink]) { color: #B91C1C !important; color: var(--joy-crimson-glow) !important; }

.portal-shell [style*="#E8A4B0"]:not([data-keep-pink]),
.joy-login-shell [style*="#E8A4B0"]:not([data-keep-pink]) { color: #8B1A2C !important; color: var(--joy-crimson) !important; }

.portal-shell [style*="#FBA9B5"]:not([data-keep-pink]),
.joy-login-shell [style*="#FBA9B5"]:not([data-keep-pink]) { color: #8B1A2C !important; color: var(--joy-crimson) !important; }

.portal-shell [style*="#FBCFE8"]:not([data-keep-pink]),
.joy-login-shell [style*="#FBCFE8"]:not([data-keep-pink]) { color: #8B1A2C !important; color: var(--joy-crimson) !important; }

.portal-shell [style*="#FCE7F3"]:not([data-keep-pink]),
.joy-login-shell [style*="#FCE7F3"]:not([data-keep-pink]) { background-color: rgba(139, 26, 44, 0.08) !important; background-color: var(--joy-crimson-soft) !important; }

/* Backgrounds */
.portal-shell [style*="background:#FFD4DC"]:not([data-keep-pink]),
.portal-shell [style*="background-color:#FFD4DC"]:not([data-keep-pink]),
.portal-shell [style*="background: #FFD4DC"]:not([data-keep-pink]),
.portal-shell [style*="background-color: #FFD4DC"]:not([data-keep-pink]),
.joy-login-shell [style*="background:#FFD4DC"]:not([data-keep-pink]),
.joy-login-shell [style*="background-color:#FFD4DC"]:not([data-keep-pink]) {
  background-color: rgba(139, 26, 44, 0.18) !important;
  background-color: var(--joy-crimson-glass) !important;
}

/* Borders */
.portal-shell [style*="border-color:#FFD4DC"]:not([data-keep-pink]),
.portal-shell [style*="border: 1px solid #FFD4DC"]:not([data-keep-pink]),
.portal-shell [style*="border: 1px solid #E8A4B0"]:not([data-keep-pink]),
.joy-login-shell [style*="border-color:#FFD4DC"]:not([data-keep-pink]),
.joy-login-shell [style*="border: 1px solid #E8A4B0"]:not([data-keep-pink]) {
  border-color: #8B1A2C !important;
  border-color: var(--joy-crimson) !important;
}

/* ── 4 · Tailwind pink/fuchsia/rose utility classes ─────────────────────── */
html:not(.dark) .portal-shell .text-pink-50,
html:not(.dark) .portal-shell .text-pink-100,
html:not(.dark) .portal-shell .text-pink-200,
html:not(.dark) .portal-shell .text-pink-300,
html:not(.dark) .portal-shell .text-pink-400,
html:not(.dark) .portal-shell .text-pink-500,
html:not(.dark) .portal-shell .text-fuchsia-300,
html:not(.dark) .portal-shell .text-fuchsia-400,
html:not(.dark) .portal-shell .text-fuchsia-500,
html:not(.dark) .joy-login-shell .text-pink-300,
html:not(.dark) .joy-login-shell .text-pink-400,
html:not(.dark) .joy-login-shell .text-pink-500,
html:not(.dark) .joy-login-shell .text-fuchsia-400,
html:not(.dark) .joy-login-shell .text-fuchsia-500 {
  color: #8B1A2C !important;
  color: var(--joy-crimson) !important;
}

html.dark .portal-shell .text-pink-50,
html.dark .portal-shell .text-pink-100,
html.dark .portal-shell .text-pink-200,
html.dark .portal-shell .text-pink-300,
html.dark .portal-shell .text-pink-400,
html.dark .portal-shell .text-pink-500,
html.dark .portal-shell .text-fuchsia-300,
html.dark .portal-shell .text-fuchsia-400,
html.dark .portal-shell .text-fuchsia-500,
html.dark .joy-login-shell .text-pink-300,
html.dark .joy-login-shell .text-pink-400,
html.dark .joy-login-shell .text-pink-500 {
  color: #C84A5E !important;
}

.portal-shell .bg-pink-50,
.portal-shell .bg-pink-100,
.portal-shell .bg-pink-200,
.portal-shell .bg-fuchsia-50,
.portal-shell .bg-fuchsia-100,
.portal-shell .bg-fuchsia-200,
.joy-login-shell .bg-pink-50,
.joy-login-shell .bg-pink-100 {
  background-color: rgba(139, 26, 44, 0.18) !important;
  background-color: var(--joy-crimson-glass) !important;
  border-color: #8B1A2C !important;
  border-color: var(--joy-crimson) !important;
}

.portal-shell .bg-pink-500,
.portal-shell .bg-pink-600,
.portal-shell .bg-fuchsia-500,
.portal-shell .bg-fuchsia-600,
.joy-login-shell .bg-pink-500,
.joy-login-shell .bg-pink-600 {
  background-color: #8B1A2C !important;
  background-color: var(--joy-crimson) !important;
  color: #FFF !important;
}

.portal-shell .border-pink-200,
.portal-shell .border-pink-300,
.portal-shell .border-pink-400,
.portal-shell .border-pink-500,
.portal-shell .border-fuchsia-200,
.portal-shell .border-fuchsia-300,
.portal-shell .border-fuchsia-500,
.joy-login-shell .border-pink-300,
.joy-login-shell .border-pink-500 {
  border-color: #8B1A2C !important;
  border-color: var(--joy-crimson) !important;
}

/* ── 5 · Glassy crimson pill primitive ─────────────────────────────────── */
.portal-shell .joy-crimson-pill,
.portal-shell .joy-pink-pill,
.joy-login-shell .joy-crimson-pill,
.joy-login-shell .joy-pink-pill {
  background: rgba(139, 26, 44, 0.18) !important;
  background: var(--joy-crimson-glass) !important;
  color: #8B1A2C !important;
  color: var(--joy-crimson) !important;
  border: 1px solid rgba(139, 26, 44, 0.32) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html.dark .portal-shell .joy-crimson-pill,
html.dark .portal-shell .joy-pink-pill,
html.dark .joy-login-shell .joy-crimson-pill {
  background: rgba(200, 74, 94, 0.14) !important;
  color: #E8A4B0 !important;
  border-color: rgba(200, 74, 94, 0.36) !important;
}

/* ── 6 · Crimson glow effect for primary CTAs / focus rings ─────────────── */
.portal-shell .joy-crimson-glow,
.joy-login-shell .joy-crimson-glow {
  box-shadow:
    0 0 0 1px rgba(139, 26, 44, 0.4),
    0 8px 24px rgba(139, 26, 44, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.dark .portal-shell .joy-crimson-glow,
html.dark .joy-login-shell .joy-crimson-glow {
  box-shadow:
    0 0 0 1px rgba(200, 74, 94, 0.45),
    0 8px 32px rgba(139, 26, 44, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Joy Automart App-level styles */
.App {
    min-height: 100vh;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.timeline-line {
    background: linear-gradient(180deg, #e11d48 0%, #cbd5e1 100%);
    width: 2px;
}