/* ==========================================================================
   Shared "What is …?" section — developer tools
   ========================================================================== */

.ux-what {
    --ux-accent: #7c3aed;
    --ux-accent-2: #d97706;
    --ux-pill-icon: #7c3aed;
    --ux-pill-hover-border: #c4b5fd;
    --ux-pill-hover-shadow: rgba(124, 58, 237, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #7c3aed, #6d28d9);
    --ux-arrow-shadow: rgba(124, 58, 237, 0.35);
    --ux-bg: linear-gradient(135deg, #faf5ff 0%, #f8fafc 45%, #fffbeb 100%);
    --ux-glow-a: rgba(124, 58, 237, 0.12);
    --ux-glow-b: rgba(234, 179, 8, 0.14);
    --ux-eyebrow-color: #b45309;
    --ux-eyebrow-bg: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
    --ux-eyebrow-border: #fcd34d;
    --ux-badge-bg: linear-gradient(145deg, #fde047, #eab308);
    --ux-badge-border: #fbbf24;
    --ux-badge-color: #1e293b;
    --ux-float-a-color: #7c3aed;
    --ux-float-a-border: #ddd6fe;
    --ux-float-b-color: #d97706;
    --ux-float-b-border: #fde68a;

    position: relative;
    padding: 72px 0;
    background: var(--ux-bg);
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.ux-what--b64 {
    --ux-accent: #2563eb;
    --ux-pill-icon: #2563eb;
    --ux-pill-hover-border: #93c5fd;
    --ux-pill-hover-shadow: rgba(37, 99, 235, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
    --ux-arrow-shadow: rgba(37, 99, 235, 0.35);
    --ux-bg: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #f0fdf4 100%);
    --ux-glow-a: rgba(37, 99, 235, 0.12);
    --ux-glow-b: rgba(34, 197, 94, 0.1);
    --ux-eyebrow-color: #1d4ed8;
    --ux-eyebrow-bg: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    --ux-eyebrow-border: #93c5fd;
    --ux-badge-bg: linear-gradient(145deg, #60a5fa, #2563eb);
    --ux-badge-border: #3b82f6;
    --ux-badge-color: #fff;
    --ux-float-a-color: #2563eb;
    --ux-float-a-border: #bfdbfe;
    --ux-float-b-color: #16a34a;
    --ux-float-b-border: #bbf7d0;
}

.ux-what--html {
    --ux-accent: #e11d48;
    --ux-pill-icon: #e11d48;
    --ux-pill-hover-border: #fda4af;
    --ux-pill-hover-shadow: rgba(225, 29, 72, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #e11d48, #be123c);
    --ux-arrow-shadow: rgba(225, 29, 72, 0.35);
    --ux-bg: linear-gradient(135deg, #fff1f2 0%, #f8fafc 50%, #fff7ed 100%);
    --ux-glow-a: rgba(225, 29, 72, 0.1);
    --ux-glow-b: rgba(249, 115, 22, 0.1);
    --ux-eyebrow-color: #be123c;
    --ux-eyebrow-bg: linear-gradient(135deg, #ffe4e6 0%, #fff1f2 100%);
    --ux-eyebrow-border: #fda4af;
    --ux-badge-bg: linear-gradient(145deg, #fb7185, #e11d48);
    --ux-badge-border: #f43f5e;
    --ux-badge-color: #fff;
    --ux-float-a-color: #e11d48;
    --ux-float-a-border: #fecdd3;
    --ux-float-b-color: #ea580c;
    --ux-float-b-border: #fed7aa;
}

.ux-what--css {
    --ux-accent: #7c3aed;
    --ux-pill-icon: #7c3aed;
    --ux-pill-hover-border: #c4b5fd;
    --ux-pill-hover-shadow: rgba(124, 58, 237, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #7c3aed, #6d28d9);
    --ux-arrow-shadow: rgba(124, 58, 237, 0.35);
    --ux-bg: linear-gradient(135deg, #faf5ff 0%, #f8fafc 50%, #fdf4ff 100%);
    --ux-glow-a: rgba(124, 58, 237, 0.12);
    --ux-glow-b: rgba(217, 70, 239, 0.1);
    --ux-eyebrow-color: #6d28d9;
    --ux-eyebrow-bg: linear-gradient(135deg, #ede9fe 0%, #faf5ff 100%);
    --ux-eyebrow-border: #c4b5fd;
    --ux-badge-bg: linear-gradient(145deg, #a78bfa, #7c3aed);
    --ux-badge-border: #8b5cf6;
    --ux-badge-color: #fff;
    --ux-float-a-color: #7c3aed;
    --ux-float-a-border: #ddd6fe;
    --ux-float-b-color: #d946ef;
    --ux-float-b-border: #f0abfc;
}

.ux-what--json {
    --ux-accent: #2563eb;
    --ux-pill-icon: #2563eb;
    --ux-pill-hover-border: #93c5fd;
    --ux-pill-hover-shadow: rgba(37, 99, 235, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
    --ux-arrow-shadow: rgba(37, 99, 235, 0.35);
    --ux-bg: linear-gradient(135deg, #eff6ff 0%, #f8fafc 50%, #f0fdfa 100%);
    --ux-glow-a: rgba(37, 99, 235, 0.12);
    --ux-glow-b: rgba(20, 184, 166, 0.1);
    --ux-eyebrow-color: #1d4ed8;
    --ux-eyebrow-bg: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    --ux-eyebrow-border: #93c5fd;
    --ux-badge-bg: linear-gradient(145deg, #38bdf8, #2563eb);
    --ux-badge-border: #3b82f6;
    --ux-badge-color: #fff;
    --ux-float-a-color: #2563eb;
    --ux-float-a-border: #bfdbfe;
    --ux-float-b-color: #0d9488;
    --ux-float-b-border: #99f6e4;
}

.ux-what--js {
    --ux-accent: #7c3aed;
    --ux-accent-2: #d97706;
    --ux-pill-icon: #7c3aed;
    --ux-pill-hover-border: #c4b5fd;
    --ux-pill-hover-shadow: rgba(124, 58, 237, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #7c3aed, #6d28d9);
    --ux-arrow-shadow: rgba(124, 58, 237, 0.35);
    --ux-bg: linear-gradient(135deg, #faf5ff 0%, #f8fafc 45%, #fffbeb 100%);
    --ux-glow-a: rgba(124, 58, 237, 0.12);
    --ux-glow-b: rgba(234, 179, 8, 0.14);
    --ux-eyebrow-color: #b45309;
    --ux-eyebrow-bg: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
    --ux-eyebrow-border: #fcd34d;
    --ux-badge-bg: linear-gradient(145deg, #fde047, #eab308);
    --ux-badge-border: #fbbf24;
    --ux-badge-color: #1e293b;
    --ux-float-a-color: #7c3aed;
    --ux-float-a-border: #ddd6fe;
    --ux-float-b-color: #d97706;
    --ux-float-b-border: #fde68a;
}

.ux-what--sql {
    --ux-accent: #4f46e5;
    --ux-accent-2: #0d9488;
    --ux-pill-icon: #4f46e5;
    --ux-pill-hover-border: #a5b4fc;
    --ux-pill-hover-shadow: rgba(79, 70, 229, 0.12);
    --ux-arrow-bg: linear-gradient(135deg, #4f46e5, #4338ca);
    --ux-arrow-shadow: rgba(79, 70, 229, 0.35);
    --ux-bg: linear-gradient(135deg, #eef2ff 0%, #f8fafc 45%, #f0fdfa 100%);
    --ux-glow-a: rgba(79, 70, 229, 0.12);
    --ux-glow-b: rgba(13, 148, 136, 0.12);
    --ux-eyebrow-color: #4338ca;
    --ux-eyebrow-bg: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%);
    --ux-eyebrow-border: #a5b4fc;
    --ux-badge-bg: linear-gradient(145deg, #818cf8, #4f46e5);
    --ux-badge-border: #6366f1;
    --ux-badge-color: #fff;
    --ux-float-a-color: #4f46e5;
    --ux-float-a-border: #c7d2fe;
    --ux-float-b-color: #0d9488;
    --ux-float-b-border: #99f6e4;
}

.ux-what::before,
.ux-what::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ux-what::before {
    top: -120px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--ux-glow-a) 0%, transparent 70%);
}

.ux-what::after {
    bottom: -100px;
    left: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--ux-glow-b) 0%, transparent 70%);
}

.ux-what .container {
    position: relative;
    z-index: 1;
}

.ux-what__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 48px;
    align-items: center;
}

.ux-what__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 5px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ux-eyebrow-color);
    background: var(--ux-eyebrow-bg);
    border: 1px solid var(--ux-eyebrow-border);
    border-radius: 100px;
}

.ux-what__eyebrow svg,
.ux-what__eyebrow [data-lucide] {
    width: 14px;
    height: 14px;
}

.ux-what__content h2 {
    margin: 0 0 14px;
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading);
}

.ux-what__lead {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text);
}

.ux-what__text {
    margin: 0 0 20px;
    line-height: 1.75;
    color: var(--text-light);
}

.ux-what__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.ux-what__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ux-what__pill:hover {
    transform: translateY(-1px);
    border-color: var(--ux-pill-hover-border);
    box-shadow: 0 4px 14px var(--ux-pill-hover-shadow);
}

.ux-what__pill svg,
.ux-what__pill [data-lucide] {
    width: 15px;
    height: 15px;
    color: var(--ux-pill-icon);
}

.ux-what__modes-label {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.ux-what__modes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ux-what__mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #475569;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ux-what__mode-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.ux-what__mode-chip svg,
.ux-what__mode-chip [data-lucide] {
    width: 12px;
    height: 12px;
}

.ux-what__mode-chip--purple { color: #7c3aed; border-color: #ddd6fe; }
.ux-what__mode-chip--orange { color: #ea580c; border-color: #fed7aa; }
.ux-what__mode-chip--amber  { color: #d97706; border-color: #fde68a; }
.ux-what__mode-chip--teal   { color: #0d9488; border-color: #99f6e4; }
.ux-what__mode-chip--green  { color: #16a34a; border-color: #bbf7d0; }
.ux-what__mode-chip--blue   { color: #2563eb; border-color: #bfdbfe; }
.ux-what__mode-chip--cyan   { color: #0891b2; border-color: #a5f3fc; }
.ux-what__mode-chip--rose   { color: #e11d48; border-color: #fecdd3; }
.ux-what__mode-chip--indigo { color: #4f46e5; border-color: #c7d2fe; }
.ux-what__mode-chip--violet { color: #7c3aed; border-color: #ddd6fe; }
.ux-what__mode-chip--pink   { color: #db2777; border-color: #f9a8d4; }
.ux-what__mode-chip--red    { color: #dc2626; border-color: #fecaca; }
.ux-what__mode-chip--lime   { color: #65a30d; border-color: #d9f99d; }
.ux-what__mode-chip--sky    { color: #0284c7; border-color: #bae6fd; }
.ux-what__mode-chip--fuchsia{ color: #c026d3; border-color: #f5d0fe; }
.ux-what__mode-chip--emerald{ color: #059669; border-color: #a7f3d0; }

.ux-what__visual {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.ux-what__float {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    font-size: 0.875rem;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    animation: ux-what-float 4s ease-in-out infinite;
}

.ux-what__float--a {
    top: 0;
    right: 8px;
    color: var(--ux-float-a-color);
    border: 1px solid var(--ux-float-a-border);
    animation-delay: 0s;
}

.ux-what__float--b {
    bottom: 12px;
    left: 0;
    color: var(--ux-float-b-color);
    border: 1px solid var(--ux-float-b-border);
    animation-delay: 1.5s;
}

.ux-what__badge {
    position: absolute;
    top: 50%;
    left: -18px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ux-badge-color);
    background: var(--ux-badge-bg);
    border: 2px solid var(--ux-badge-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
    transform: translateY(-50%);
}

@keyframes ux-what-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.ux-what__transform {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 340px;
}

.ux-what__transform-card {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.ux-what__transform-card--in {
    border-style: dashed;
    border-color: #cbd5e1;
    background: rgba(255, 255, 255, 0.9);
}

.ux-what__transform-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.ux-what__transform-card code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #64748b;
    word-break: break-all;
}

.ux-what__transform-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    color: #fff;
    background: var(--ux-arrow-bg);
    border-radius: 50%;
    box-shadow: 0 4px 14px var(--ux-arrow-shadow);
}

.ux-what__transform-arrow svg,
.ux-what__transform-arrow [data-lucide] {
    width: 18px;
    height: 18px;
}

.ux-what__window {
    width: 100%;
    background: #0f172a;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.ux-what__window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ux-what__window-bar span:nth-child(1) { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.ux-what__window-bar span:nth-child(2) { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; }
.ux-what__window-bar span:nth-child(3) { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }

.ux-what__window-title {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ux-what__code {
    margin: 0;
    padding: 18px 16px 20px;
    font-size: 0.8125rem;
    line-height: 1.65;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #e2e8f0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.ux-what__code .kw { color: #c084fc; }
.ux-what__code .fn { color: #fbbf24; }
.ux-what__code .id { color: #93c5fd; }
.ux-what__code .tag { color: #f472b6; }
.ux-what__code .attr { color: #60a5fa; }
.ux-what__code .val { color: #4ade80; }
.ux-what__code .sel { color: #c4b5fd; }
.ux-what__code .prop { color: #93c5fd; }
.ux-what__code .key { color: #7dd3fc; }
.ux-what__code .str { color: #86efac; }
.ux-what__code .num { color: #fcd34d; }
.ux-what__code .bool { color: #f472b6; }
.ux-what__code .b64 { color: #60a5fa; }

@media (max-width: 1024px) {
    .ux-what__grid { grid-template-columns: 1fr; }
    .ux-what__visual { padding-top: 8px; }
    .ux-what__badge { left: 8px; }
}

[data-theme="dark"] .ux-what {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1c1917 100%);
}

[data-theme="dark"] .ux-what--b64,
[data-theme="dark"] .ux-what--json {
    background: linear-gradient(135deg, #172554 0%, #0f172a 50%, #134e4a 100%);
}

[data-theme="dark"] .ux-what--html {
    background: linear-gradient(135deg, #4c0519 0%, #0f172a 50%, #431407 100%);
}

[data-theme="dark"] .ux-what--css {
    background: linear-gradient(135deg, #2e1065 0%, #0f172a 50%, #4a044e 100%);
}

[data-theme="dark"] .ux-what--js {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #1c1917 100%);
}

[data-theme="dark"] .ux-what--sql {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 50%, #134e4a 100%);
}

[data-theme="dark"] .ux-what__pill,
[data-theme="dark"] .ux-what__mode-chip,
[data-theme="dark"] .ux-what__transform-card {
    background: var(--bg-section);
    border-color: var(--border);
    color: #cbd5e1;
}

[data-theme="dark"] .ux-what__modes-label {
    color: #94a3b8;
}

[data-theme="dark"] .ux-what__float {
    background: var(--bg-section);
}

[data-theme="dark"] .ux-what__transform-card--in {
    border-color: #475569;
}

[data-theme="dark"] .ux-what__transform-card code {
    color: #94a3b8;
}

[data-theme="dark"] .ux-what__mode-chip--purple { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--orange { color: #fdba74; border-color: rgba(251, 146, 60, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--amber  { color: #fcd34d; border-color: rgba(251, 191, 36, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--teal   { color: #5eead4; border-color: rgba(45, 212, 191, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--green  { color: #86efac; border-color: rgba(74, 222, 128, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--blue   { color: #93c5fd; border-color: rgba(96, 165, 250, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--cyan   { color: #67e8f9; border-color: rgba(34, 211, 238, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--rose   { color: #fda4af; border-color: rgba(244, 114, 182, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--indigo { color: #a5b4fc; border-color: rgba(129, 140, 248, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--violet { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--pink   { color: #f9a8d4; border-color: rgba(244, 114, 182, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--red    { color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--lime   { color: #bef264; border-color: rgba(163, 230, 53, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--sky    { color: #7dd3fc; border-color: rgba(56, 189, 248, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--fuchsia{ color: #e879f9; border-color: rgba(232, 121, 249, 0.35); }
[data-theme="dark"] .ux-what__mode-chip--emerald{ color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); }