/* =============================================================================
   Lumben Interactive Demo — homepage section (#lumben-demo)
   Markup: templates/theme_arctit/Components/Demos/index/lumben-demo.html
   Script: static/js/lumben-demo.js

   Bu dosya bu bölümün TEK stil kaynağıdır — sole owner of this section's styles.
   Do not re-add overrides in responsive.css; breakpoints live here (768px, 480px).
   ========================================================================== */

#lumben-demo {
    --ld-navy:    #0B1929;
    --ld-blue:    #1A72E8;
    --ld-cyan:    #00C2D4;
    --ld-green:   #34d399;
    --ld-red:     #f87171;
    --ld-amber:   #fbbf24;

    /* Alignment tokens — both comparison sides share these, which is what makes
       the wipe legible. Change them here, never per-side. */
    --ld-row-h:    54px;
    --ld-head-h:   72px;
    --ld-pad-x:    44px;
    --ld-pad-y:    34px;
    --ld-ico:      20px;
}

/* ─── Shell ─────────────────────────────────────────────────────────────── */
.ld-wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.ld-head { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.ld-headline {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(26px, 3vw, 50px);
    text-align: center; line-height: 1.08;
    color: var(--ld-navy); letter-spacing: -0.025em;
    margin: 0;
}
.ld-headline em { font-style: italic; color: var(--ld-blue); }
.ld-hl[hidden] { display: none; }

/* ─── Audience toggle ───────────────────────────────────────────────────── */
.ld-toggle {
    display: flex; background: #fff;
    border: 1px solid rgba(11,25,41,0.11);
    border-radius: 99px; padding: 4px;
    position: relative; box-shadow: 0 2px 12px rgba(11,25,41,0.08);
}
.ld-t-pill {
    position: absolute; top: 4px; left: 4px;
    height: calc(100% - 8px); border-radius: 99px;
    background: var(--ld-navy);
    transition: transform .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}
.ld-t-btn {
    position: relative; z-index: 1;
    min-height: 44px;                       /* touch target */
    padding: 11px 34px; border: none; background: transparent;
    font-size: 14px; font-weight: 500;
    color: #8299B8; cursor: pointer; border-radius: 99px;
    transition: color .22s; letter-spacing: -0.01em;
}
.ld-t-btn.on { color: #fff; }
.ld-t-btn:focus-visible,
.ld-s-handle:focus-visible,
.ld-hs-btn:focus-visible,
.ld-pop-close:focus-visible {
    outline: 3px solid var(--ld-blue);
    outline-offset: 3px;
    border-radius: 99px;
}

/* ─── Stage ─────────────────────────────────────────────────────────────── */
/* Both panels share one grid cell: height is the taller panel's, so switching
   audience never shifts the page (no CLS) and no min-height guess is needed. */
.ld-stage { width: 100%; max-width: 1380px; display: grid; }
.ld-panel {
    grid-area: 1 / 1;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .38s ease, visibility 0s linear .38s;
}
.ld-panel.on {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .38s ease, visibility 0s;
}

/* ─── Shared icon ───────────────────────────────────────────────────────── */
.ld-ico {
    width: var(--ld-ico); height: var(--ld-ico);
    flex: 0 0 var(--ld-ico);
    fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════════════════ PATIENT PANEL — X-ray ═══════════════════════════ */
.ld-xray-card {
    background: #030c18;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 12px 56px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.18);
    overflow: visible; width: 100%;
}
.ld-topbar {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.28);
}
.ld-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ld-bar-label { font-size: 12px; color: rgba(255,255,255,0.52); margin-left: 8px; letter-spacing: 0.025em; }
.ld-bar-hint  { font-size: 12px; color: rgba(255,255,255,0.4); margin-left: auto; font-style: italic; }

.ld-xray-wrap { position: relative; width: 100%; line-height: 0; overflow: visible; }
.ld-xray-wrap picture,
.ld-xray-wrap img { display: block; width: 100%; height: auto; }
.ld-xray-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }

/* Hotspots */
.ld-hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 10; pointer-events: auto; }
.ld-hotspot.active { z-index: 50; }
.ld-hs-btn {
    position: relative; display: block;
    width: 56px; height: 56px;              /* ≥44px touch target */
    padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
}
.ld-hs-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--hc);
    animation: ld-ringPulse 2.6s ease-out infinite;
    opacity: 0; pointer-events: none;
}
.ld-hs-ring:nth-child(2) { animation-delay: .87s; }
.ld-hs-ring:nth-child(3) { animation-delay: 1.74s; }
@keyframes ld-ringPulse { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(1.5); opacity: 0; } }
.ld-hs-dot {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--hc); border: 2.5px solid #fff;
    pointer-events: none;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.ld-hs-btn:hover .ld-hs-dot          { transform: translate(-50%,-50%) scale(1.5); }
.ld-hotspot.active .ld-hs-dot        { transform: translate(-50%,-50%) scale(1.6); }
.ld-hotspot.active .ld-hs-ring       { animation: none; transform: scale(1.35); opacity: .25; }

/* Popup */
.ld-popup {
    position: absolute; z-index: 30;
    left: 50%; transform: translateX(-50%) translateY(10px) scale(.95);
    width: 280px; max-width: min(280px, calc(100vw - 32px));
    background: rgba(8,14,26,0.97);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 16px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 28px 72px rgba(0,0,0,0.75);
    pointer-events: none; opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
.ld-popup.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
.ld-pop-arrow { position: absolute; width: 10px; height: 10px; background: rgba(8,14,26,0.97); border: 1px solid rgba(255,255,255,0.10); pointer-events: none; }
.ld-pop-arrow.down { bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); border-top: none; border-left: none; }
.ld-pop-arrow.up   { top: -5px;   left: 50%; transform: translateX(-50%) rotate(45deg); border-bottom: none; border-right: none; }
.ld-pop-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 11px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ld-pop-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 6px; flex-shrink: 0; }
.ld-pop-close {
    margin-left: auto; width: 30px; height: 30px;
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; padding: 0;
    transition: background .15s, color .15s;
}
.ld-pop-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ld-pop-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.ld-pop-body { padding: 14px 16px 18px; }
.ld-pop-title { font-size: 17px; font-weight: 600; color: rgba(255,255,255,0.95); line-height: 1.3; margin: 0 0 16px; letter-spacing: -0.01em; }
.ld-pop-row { display: flex; gap: 11px; margin: 0 0 10px; }
.ld-pop-row:last-child { margin-bottom: 0; }
.ld-pop-row-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); white-space: nowrap; padding-top: 2px; min-width: 36px; flex-shrink: 0; }
.ld-pop-row-txt { font-size: 13px; color: rgba(255,255,255,0.68); line-height: 1.55; }

/* Legend */
.ld-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 12px 22px; border-top: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.25); }
.ld-ls-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,0.58); }
.ld-ls-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* ═══════════════════════ DENTIST PANEL ═══════════════════════════════════ */
.ld-dentist-grid { display: grid; grid-template-columns: 1fr 296px; gap: 22px; align-items: stretch; }

.ld-slider-card {
    position: relative; overflow: hidden;
    border-radius: 22px; background: #0b1a2e;
    box-shadow: 0 8px 48px rgba(11,25,41,0.18);
    user-select: none; -webkit-user-select: none;
    touch-action: pan-y;
}

/* Both sides are the same box. The WITH side is in normal flow and therefore
   sets the card height; the WITHOUT side is the clipped overlay on top. */
.ld-side { padding: var(--ld-pad-y) var(--ld-pad-x); display: flex; flex-direction: column; gap: 18px; }
.ld-side--after  { position: relative; background: #0b1a2e; }
.ld-side--before {
    position: absolute; inset: 0;
    background: #140a0a;
    clip-path: inset(0 50% 0 0);            /* JS updates this */
}

.ld-side-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em;
    padding: 6px 15px; border-radius: 99px; width: fit-content;
}
.ld-side-tag .ld-ico { --ld-ico: 14px; }
/* The side LABELS are pinned to opposite edges so both stay readable at every
   seam position — unlike the compared content below, which must stay aligned. */
.ld-side--after  .ld-side-tag { align-self: flex-end;   background: rgba(5,150,105,0.18); color: var(--ld-green); }
.ld-side--before .ld-side-tag { align-self: flex-start; background: rgba(220,38,38,0.18); color: var(--ld-red); }

.ld-lead-card {
    width: 100%;                            /* full-bleed: the seam always has content to cut */
    border-radius: 18px; padding: 26px 30px;
    display: flex; flex-direction: column; gap: 14px;
}
.ld-side--after  .ld-lead-card { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.085); }
.ld-side--before .ld-lead-card { background: rgba(220,38,38,0.06);    border: 1px solid rgba(220,38,38,0.16); }

/* Head — fixed height so row 1 starts at the same Y on both sides */
.ld-lc-head { display: flex; align-items: center; gap: 16px; height: var(--ld-head-h); flex-shrink: 0; }
.ld-lc-av {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; flex-shrink: 0;
}
.ld-side--after  .ld-lc-av { background: linear-gradient(135deg, var(--ld-blue), var(--ld-cyan)); color: #fff; }
.ld-side--before .ld-lc-av { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.3); }

.ld-lc-id   { display: flex; flex-direction: column; min-width: 0; }
.ld-lc-name { font-size: 19px; font-weight: 500; line-height: 1.25; }
.ld-lc-sub  { font-size: 14px; margin-top: 3px; }
.ld-side--after  .ld-lc-name { color: rgba(255,255,255,0.92); }
.ld-side--before .ld-lc-name { color: rgba(255,255,255,0.46); }
.ld-side--after  .ld-lc-sub  { color: rgba(255,255,255,0.45); }
.ld-side--before .ld-lc-sub  { color: rgba(255,255,255,0.3); }

.ld-lc-qual {
    margin-left: auto; flex-shrink: 0;
    font-size: 12px; font-weight: 700; padding: 6px 14px;
    border-radius: 99px; letter-spacing: 0.04em; white-space: nowrap;
}
.ld-side--after  .ld-lc-qual { background: rgba(5,150,105,0.18); color: var(--ld-green); }
.ld-side--before .ld-lc-qual { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.4); }

/* Rows — fixed-height grid slots. This is the alignment guarantee: a row that
   wraps to two lines on one side cannot push that side's later rows out of
   step with the other side's. */
.ld-lc-rows { display: grid; grid-auto-rows: var(--ld-row-h); align-content: start; }
.ld-lc-row {
    display: grid; grid-template-columns: var(--ld-ico) 1fr;
    align-items: center; gap: 12px;
    font-size: 16px; line-height: 1.45;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.ld-lc-row:first-child { border-top: 0; }
.ld-side--after  .ld-lc-row { color: rgba(255,255,255,0.78); }
.ld-side--after  .ld-lc-row .ld-ico { color: var(--ld-green); }
.ld-side--before .ld-lc-row { color: rgba(255,255,255,0.48); }
.ld-side--before .ld-lc-row .ld-ico { color: var(--ld-red); }
.ld-side--before .ld-lc-row--warn .ld-ico { color: var(--ld-amber); }

/* ─── Drag handle ───────────────────────────────────────────────────────── */
/* z-index stays below the theme's fixed .site-header (z-index 10). */
.ld-s-handle {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; background: rgba(255,255,255,0.7);
    z-index: 5; cursor: col-resize;
}
/* Invisible 44px-wide grab area — meets the touch-target minimum without
   changing the 2px seam. */
.ld-s-handle::before {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: 50%; width: 44px; transform: translateX(-50%);
}
.ld-s-knob {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; box-shadow: 0 4px 22px rgba(0,0,0,0.38);
    display: flex; align-items: center; justify-content: center;
    color: var(--ld-navy);
    transition: transform .15s;
}
.ld-s-knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ld-s-handle:hover .ld-s-knob,
.ld-s-handle:focus-visible .ld-s-knob { transform: translate(-50%,-50%) scale(1.08); }

/* ─── Metrics ───────────────────────────────────────────────────────────── */
.ld-metrics-col { display: flex; flex-direction: column; gap: 12px; }
.ld-metric-box {
    flex: 1; background: #001c3e; border-radius: 18px;
    border: 1px solid rgba(11,25,41,0.07);
    box-shadow: 0 2px 20px rgba(11,25,41,0.06);
    padding: 18px 20px 18px 22px;
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.ld-metric-box::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--ld-blue), var(--ld-cyan));
    border-radius: 18px 0 0 18px;
}
.ld-metric-box:hover { box-shadow: 0 4px 24px rgba(26,114,232,0.14); border-color: rgba(26,114,232,0.2); }
.ld-metric-icon {
    width: 18px; height: 18px; margin-bottom: 8px;
    fill: none; stroke: #6f8cb3; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
/* #1A72E8 on #001C3E = 3.73:1 — clears 3:1 for large text at 40px/900. Keep. */
.ld-metric-val   { font-family: 'Barlow', sans-serif; font-size: 40px; color: var(--ld-blue); font-weight: 900; line-height: 1; margin-bottom: 5px; letter-spacing: -0.04em; }
/* #8299B8 on #001C3E = 5.82:1. Keep. */
.ld-metric-label { font-size: 12px; color: #8299B8; font-weight: 500; line-height: 1.45; }

/* Scroll reveal (400–600ms, power2-ish easing, 80ms stagger).
   Cards are visible by default; JS opts in by adding .ld-anim, so a JS failure
   leaves them shown rather than permanently invisible. */
.ld-metrics-col.ld-anim .ld-metric-box { opacity: 0; transform: translateY(24px); }
.ld-metrics-col.ld-anim.ld-revealed .ld-metric-box {
    opacity: 1; transform: none;
    transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1),
                box-shadow .2s, border-color .2s;
}
.ld-metrics-col.ld-anim.ld-revealed .ld-metric-box:nth-child(2) { transition-delay: .08s; }
.ld-metrics-col.ld-anim.ld-revealed .ld-metric-box:nth-child(3) { transition-delay: .16s; }
.ld-metrics-col.ld-anim.ld-revealed .ld-metric-box:nth-child(4) { transition-delay: .24s; }

/* ═══════════════════════ BREAKPOINTS ═════════════════════════════════════ */
@media (max-width: 991px) {
    .ld-dentist-grid { grid-template-columns: 1fr; }
    .ld-metrics-col  { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 768px) {
    #lumben-demo {
        --ld-row-h:  48px;
        --ld-head-h: 60px;
        --ld-pad-x:  18px;
        --ld-pad-y:  18px;
        --ld-ico:    18px;
    }
    .ld-wrap { gap: 28px; }
    .ld-t-btn { padding: 11px 22px; font-size: 13px; }

    .ld-lead-card { padding: 18px 16px; gap: 10px; border-radius: 14px; }
    .ld-lc-av     { width: 44px; height: 44px; font-size: 14px; }
    .ld-lc-head   { gap: 12px; }
    .ld-lc-name   { font-size: 15px; }
    .ld-lc-sub    { font-size: 12px; }
    .ld-lc-qual   { font-size: 10px; padding: 5px 10px; }
    .ld-lc-row    { font-size: 14px; gap: 10px; line-height: 1.4; }
    .ld-side-tag  { font-size: 10px; padding: 5px 12px; }

    .ld-s-knob     { width: 40px; height: 40px; }
    .ld-s-knob svg { width: 18px; height: 18px; }

    .ld-popup     { width: min(240px, calc(100vw - 28px)); max-width: calc(100vw - 28px); }
    .ld-hs-btn    { width: 48px; height: 48px; }
    .ld-bar-hint  { display: none; }
    .ld-legend    { gap: 8px 16px; padding: 10px 16px; }
    .ld-metric-val { font-size: 30px; }
}

@media (max-width: 480px) {
    #lumben-demo {
        --ld-row-h:  46px;
        --ld-head-h: 56px;
        --ld-pad-x:  12px;
        --ld-pad-y:  14px;
    }
    /* Floor is 12px — never go below it, wrapping is preferable to unreadable text. */
    .ld-lc-row  { font-size: 12.5px; }
    .ld-lc-name { font-size: 14px; }
    .ld-lc-qual { display: none; }          /* drop rather than shrink past legibility */
    .ld-metrics-col { gap: 8px; }
    .ld-metric-box  { padding: 14px 12px 14px 16px; }
    .ld-metric-val  { font-size: 26px; }
    .ld-metric-label { font-size: 12px; }
}

/* Side-label buttons exist for phones only (see the 767px block). */
.ld-side-tabs { display: none; }

/* ═══════════════════════ PHONE (<=767px) ═════════════════════════════════
   Telefon: karsilastirma karti ~310-340px'e sikistirilir, ust etiketler
   dokunulabilir dugmelere donusur (kaydirma cizgisini o tarafa tasir) ve
   dort istatistik karti gizlenir. Etkin olmayan panel yer kaplamaz, boylece
   bolum yuksekligi icerigi izler. Masaustu ve tablet degismez.
   Phone: the comparison card is tightened to ~310-340px, the top labels
   become buttons that slide the seam to reveal their side, and the four
   stat cards are dropped. The inactive panel takes no space, so the section
   height follows its content. Desktop and tablet are untouched. Placed after
   the 480px block on purpose so these values win at every phone width. */
@media (max-width: 767px) {
    #lumben-demo {
        --ld-row-h:  38px;
        --ld-head-h: 46px;
        --ld-pad-x:  14px;
        --ld-pad-y:  12px;
        --ld-ico:    16px;
    }
    .ld-wrap { gap: 22px; }
    .ld-head { gap: 16px; }
    .ld-t-btn { min-height: 44px; padding: 11px 20px; font-size: 14px; color: #5f7896; }
    .ld-t-btn.on { color: #fff; }

    /* Hidden popups still have a layout box; clip them at the section edge
       so a closed one near the right never widens the page (iOS ignores
       overflow-x on body for panning). Open ones are kept inside by JS. */
    #lumben-demo { overflow-x: clip; }

    .ld-panel:not(.on) { display: none; }
    /* No fill-mode: a finished animation leaves no stacking context behind,
       and the stage sits above the head so popups cover the toggle. */
    .ld-panel.on { animation: ld-fadeIn .3s ease; }
    .ld-stage { position: relative; z-index: 2; }

    .ld-dentist-grid { display: block; }
    .ld-metrics-col  { display: none; }

    .ld-side { gap: 10px; }
    .ld-side-tag { font-size: 10px; padding: 5px 11px; visibility: hidden; }
    .ld-lead-card { padding: 12px; gap: 6px; border-radius: 12px; }
    .ld-lc-head { gap: 10px; }
    .ld-lc-av   { width: 38px; height: 38px; font-size: 13px; }
    .ld-lc-name { font-size: 14px; }
    .ld-lc-sub  { font-size: 11.5px; margin-top: 1px; }
    .ld-lc-qual { font-size: 9.5px; padding: 4px 8px; }
    .ld-lc-row  { font-size: 13px; line-height: 1.3; gap: 8px; }
    .ld-side--before .ld-lc-row  { color: rgba(255,255,255,0.6); }
    .ld-side--before .ld-lc-name { color: rgba(255,255,255,0.62); }
    .ld-side--before .ld-lc-sub  { color: rgba(255,255,255,0.48); }

    /* The labels sit over the (hidden) in-card tags: same row, but always on
       top of both layers, so either one can be tapped at any seam position. */
    .ld-side-tabs {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: calc(var(--ld-pad-y) - 9px);
        left: calc(var(--ld-pad-x) - 4px);
        right: calc(var(--ld-pad-x) - 4px);
        z-index: 6;
        pointer-events: none;
    }
    /* Button = 44px tap target; the pill is drawn by ::before inside it. */
    .ld-side-tab {
        position: relative;
        isolation: isolate;
        pointer-events: auto;
        display: inline-flex; align-items: center; gap: 6px;
        min-height: 44px;
        padding: 0 11px;
        border: 0; background: none; cursor: pointer;
        font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
        -webkit-tap-highlight-color: transparent;
    }
    .ld-side-tab::before {
        content: "";
        position: absolute; z-index: -1;
        inset: 8px 0;
        border-radius: 99px;
        transition: box-shadow .2s;
    }
    .ld-side-tab .ld-ico { --ld-ico: 13px; }
    .ld-side-tab--before { color: #fca5a5; }
    .ld-side-tab--after  { color: #6ee7b7; }
    .ld-side-tab--before::before { background: rgba(127,29,29,0.72); }
    .ld-side-tab--after::before  { background: rgba(6,78,59,0.72); }
    .ld-side-tab[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px currentColor; }
    .ld-side-tab:focus-visible { outline: 3px solid var(--ld-blue); outline-offset: 0; border-radius: 99px; }

    .ld-s-handle { touch-action: none; }
    .ld-s-knob { width: 44px; height: 44px; }

    /* Popups are kept on screen by lumben-demo.js (margin offset). */
    .ld-popup { width: min(260px, calc(100vw - 32px)); }
}

@keyframes ld-fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════ REDUCED MOTION ══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .ld-hs-ring { animation: none; opacity: .3; transform: scale(1.2); }
    .ld-t-pill,
    .ld-panel,
    .ld-popup,
    .ld-hs-dot,
    .ld-s-knob,
    .ld-metric-box { transition-duration: .01ms !important; transition-delay: 0s !important; }
    .ld-panel.on { animation: none; }
    .ld-metrics-col.ld-anim .ld-metric-box { opacity: 1; transform: none; }
}