/* =========================================================
   GEEK FRONT V20.0.0 — Scroll storytelling
   Ventana tipo escritorio (Figma) + tarjetas v19
   Arquitectura nativa: sticky + rAF + transform/opacity
   ========================================================= */

.geek-story--v20 {
    --story-window-radius: 28px;
    --story-face-radius: 22px;
}

.geek-story--v20 .geek-story-eyebrow {
    color: #168b77 !important;
}

.geek-story--v20 .geek-story-eyebrow b {
    font-family: "Space Grotesk", "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

body.dark-mode .geek-story--v20 .geek-story-eyebrow {
    color: #79f0c9 !important;
}

.geek-story--v20 .geek-story-templates {
    display: none !important;
}

.geek-story--v20 .geek-story-progress {
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    height: 3px;
    pointer-events: none;
    background: rgba(46, 94, 85, 0.12);
}

.geek-story--v20 .geek-story-progress span {
    display: block;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--story-accent, #5ec8aa);
    will-change: transform;
}

.geek-story--v20 .geek-story-webgl-canvas,
.geek-story--v20 .geek-story-core-grid,
.geek-story--v20 .geek-story-orbit,
.geek-story--v20 .geek-story-device-layer,
.geek-story--v20 .geek-story-device-glow,
.geek-story--v20 .geek-story-card-view,
.geek-story--v20 .geek-story-wheel-stage > .geek-story-card,
.geek-story--v20 .geek-story-templates {
    display: none !important;
}

.geek-story--v20::after,
.geek-story--v20 .geek-story-core::before,
.geek-story--v20 .geek-story-motion-stack::after {
    display: none !important;
    animation: none !important;
    content: none !important;
}

@media (min-width: 769px) {
    .geek-story--v20 .geek-story-track {
        height: 380vh !important;
    }

    .geek-story--v20 .geek-story-sticky {
        position: sticky !important;
        top: var(--header-height, 80px) !important;
        height: calc(100svh - var(--header-height, 80px)) !important;
        min-height: calc(100svh - var(--header-height, 80px)) !important;
        display: grid !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .geek-story--v20 .geek-story-device-wrap {
        transform: none !important;
        perspective: none !important;
        min-height: 0 !important;
    }

    .geek-story--v20 .geek-story-device,
    body.dark-mode .geek-story--v20 .geek-story-device {
        width: min(100%, 640px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        will-change: auto !important;
        display: grid !important;
        place-items: center !important;
    }

    .geek-story--v20 .geek-story-window,
    body.dark-mode .geek-story--v20 .geek-story-window {
        position: relative !important;
        z-index: 3 !important;
        width: min(100%, 640px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 12px 12px 14px !important;
        border-radius: var(--story-window-radius) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        background:
            linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(13, 67, 57, 0.42)),
            linear-gradient(180deg, #1a4a41 0%, #0d332c 100%) !important;
        box-shadow:
            0 30px 70px rgba(5, 34, 28, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .geek-story--v20 .geek-story-window::after {
        display: none !important;
    }

    .geek-story--v20 .geek-story-window-header {
        position: relative !important;
        z-index: 4 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        padding: 0 4px 10px !important;
    }

    .geek-story--v20 .geek-story-window-header span {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.18) !important;
    }

    .geek-story--v20 .geek-story-window-header span:nth-child(1) {
        background: #ffb7b0 !important;
    }

    .geek-story--v20 .geek-story-window-header span:nth-child(2) {
        background: #ffe49a !important;
    }

    .geek-story--v20 .geek-story-window-header span:nth-child(3) {
        background: #9de5be !important;
    }

    .geek-story--v20 .geek-story-window-header i {
        width: 38% !important;
        flex: 0 0 38% !important;
        height: 4px !important;
        margin-left: 8px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.16) !important;
    }

    .geek-story--v20 .geek-story-core,
    body.dark-mode .geek-story--v20 .geek-story-core {
        position: relative !important;
        z-index: 2 !important;
        display: block !important;
        flex: none !important;
        width: 100% !important;
        height: 340px !important;
        min-height: 340px !important;
        max-height: 340px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: transparent !important;
        box-shadow: none !important;
        isolation: isolate !important;
        overflow: hidden !important;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
    }

    .geek-story--v20 .geek-story-wheel-meta {
        display: none !important;
    }

    .geek-story--v20 .geek-story-wheel-stage {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        perspective: none !important;
        transform: none !important;
        isolation: isolate !important;
    }

    .geek-story--v20 .geek-story-motion-stack {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: visible !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    .geek-story--v20 .geek-story-motion-card,
    body.dark-mode .geek-story--v20 .geek-story-motion-card {
        position: absolute !important;
        top: 50% !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        height: 268px !important;
        min-height: 268px !important;
        max-height: 268px !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        contain: none !important;
        isolation: isolate !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        will-change: auto !important;
        pointer-events: none !important;
        transition: transform 0.18s linear, opacity 0.18s linear !important;
        perspective: 1400px !important;
        perspective-origin: 50% 50% !important;
    }

    .geek-story--v20.is-scrolling .geek-story-motion-card.is-motion-visible {
        will-change: transform, opacity !important;
    }

    .geek-story--v20 .geek-story-motion-card.is-near {
        pointer-events: auto !important;
    }

    .geek-story--v20 .geek-story-motion-card.is-near .geek-story-motion-flip {
        will-change: transform !important;
    }

    .geek-story--v20 .geek-story-motion-card.is-near .geek-story-motion-face {
        box-shadow:
            0 28px 64px rgba(5, 34, 28, 0.28),
            0 8px 22px color-mix(in srgb, var(--card-accent, var(--story-accent)) 22%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    }

    .geek-story--v20 .geek-story-motion-card::before {
        display: none !important;
    }

    .geek-story--v20 .geek-story-motion-flip {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        transform-origin: 50% 50% !important;
        transform-style: preserve-3d !important;
        transition: transform 0.76s cubic-bezier(0.18, 0.8, 0.24, 1) !important;
        will-change: auto !important;
        z-index: 2 !important;
    }

    /* Hinge at the card center. rotateX(+180deg) folds the top toward the
       viewer (arriba → abajo). Negative rotateX lifts from the bottom. */
    .geek-story--v20 .geek-story-motion-card.is-near:focus-within .geek-story-motion-flip,
    .geek-story--v20 .geek-story-motion-card.is-flipped .geek-story-motion-flip {
        transform: rotateX(180deg) !important;
    }

    .geek-story--v20 .geek-story-motion-face,
    body.dark-mode .geek-story--v20 .geek-story-motion-front,
    body.dark-mode .geek-story--v20 .geek-story-motion-back,
    .geek-story--v20 .geek-story-motion-card.is-flipped .geek-story-motion-back {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 7fr) minmax(118px, 32%) !important;
        align-items: center !important;
        gap: 0.9rem !important;
        padding: 1.02rem 1.05rem !important;
        border-radius: 1.35rem !important;
        overflow: hidden !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform-origin: 50% 50% !important;
        transform-style: preserve-3d !important;
        will-change: auto !important;
        transition: none !important;
        box-shadow:
            0 22px 48px rgba(5, 34, 28, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
    }

    .geek-story--v20 .geek-story-motion-front {
        background:
            linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.62)),
            radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent, var(--story-accent)) 21%, transparent), transparent 38%) !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 36%, rgba(46, 94, 85, 0.14)) !important;
        transform: rotateX(0deg) translateZ(1px) !important;
        pointer-events: auto !important;
        color: #10241f !important;
    }

    .geek-story--v20 .geek-story-motion-front::before {
        background:
            linear-gradient(90deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 15%, transparent), transparent 46%),
            radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.72), transparent 34%) !important;
        opacity: 0.82 !important;
    }

    .geek-story--v20 .geek-story-motion-back {
        background:
            linear-gradient(132deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 20%, #f8fffc), rgba(245, 255, 251, 0.96) 58%, rgba(255, 255, 255, 0.90)),
            #f7fffc !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 36%, rgba(46, 94, 85, 0.14)) !important;
        transform: rotateX(180deg) translateZ(1px) !important;
        pointer-events: none !important;
        color: #10241f !important;
    }

    .geek-story--v20 .geek-story-motion-card.is-flipped .geek-story-motion-front,
    .geek-story--v20 .geek-story-motion-card.is-near:hover .geek-story-motion-front,
    .geek-story--v20 .geek-story-motion-card.is-near:focus-within .geek-story-motion-front {
        transform: rotateX(0deg) translateZ(1px) !important;
        pointer-events: none !important;
    }

    .geek-story--v20 .geek-story-motion-card.is-flipped .geek-story-motion-back,
    .geek-story--v20 .geek-story-motion-card.is-near:hover .geek-story-motion-back,
    .geek-story--v20 .geek-story-motion-card.is-near:focus-within .geek-story-motion-back {
        transform: rotateX(180deg) translateZ(1px) !important;
        pointer-events: auto !important;
    }

    .geek-story--v20 .geek-story-motion-index {
        width: 44px !important;
        height: 44px !important;
        align-self: start !important;
        justify-self: start !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border-radius: 999px !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 24%, rgba(46, 94, 85, 0.14)) !important;
        background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 13%, rgba(255, 255, 255, 0.82)) !important;
        color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 76%, #12372f) !important;
        font-size: 0.7rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.04em !important;
        line-height: 1 !important;
    }

    .geek-story--v20 .geek-story-motion-body {
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-top: 0 !important;
    }

    .geek-story--v20 .geek-story-motion-category {
        margin-bottom: 0.36rem !important;
        color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 70%, #2e5e55) !important;
        font-size: 0.68rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.09em !important;
        text-transform: uppercase !important;
    }

    .geek-story--v20 .geek-story-motion-title,
    body.dark-mode .geek-story--v20 .geek-story-motion-title {
        margin: 0 !important;
        max-width: none !important;
        color: #10241f !important;
        font-size: clamp(1.45rem, 1.9vw, 2.05rem) !important;
        font-weight: 700 !important;
        letter-spacing: -0.052em !important;
        line-height: 0.98 !important;
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }

    .geek-story--v20 .geek-story-motion-desc,
    body.dark-mode .geek-story--v20 .geek-story-motion-desc {
        margin: 0.42rem 0 0 !important;
        max-width: 100% !important;
        color: rgba(47, 64, 76, 0.78) !important;
        font-size: clamp(0.76rem, 0.85vw, 0.9rem) !important;
        line-height: 1.36 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden !important;
    }

    .geek-story--v20 .geek-story-motion-hint {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.7rem;
        color: rgba(16, 36, 31, 0.62);
        font-size: 0.64rem;
        letter-spacing: 0.01em;
    }

    .geek-story--v20 .geek-story-motion-hint::before {
        content: "↻";
        color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 80%, #2e5e55);
        font-size: 0.9rem;
    }

    .geek-story--v20 .geek-story-motion-media,
    body.dark-mode .geek-story--v20 .geek-story-motion-media {
        position: relative !important;
        align-self: stretch !important;
        width: 100% !important;
        min-height: 176px !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: 1.08rem !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 24%, rgba(46, 94, 85, 0.13)) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 16%, rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.30)),
            var(--card-img, none) center / cover no-repeat !important;
    }

    .geek-story--v20 .geek-story-motion-media-img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: saturate(0.96) contrast(1.02) brightness(0.98) !important;
        opacity: 1 !important;
    }

    .geek-story--v20 .geek-story-motion-back-body {
        padding-top: 0 !important;
        justify-content: center !important;
    }

    .geek-story--v20 .geek-story-motion-back-label {
        color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 70%, #2e5e55) !important;
    }

    .geek-story--v20 .geek-story-motion-back-title {
        max-width: none !important;
        color: #10241f !important;
        font-size: clamp(1.35rem, 1.72vw, 1.9rem) !important;
    }

    .geek-story--v20 .geek-story-motion-back-detail,
    body.dark-mode .geek-story--v20 .geek-story-motion-back-detail {
        max-width: 100% !important;
        margin: 0.48rem 0 0 !important;
        color: rgba(35, 58, 53, 0.78) !important;
        font-size: clamp(0.74rem, 0.82vw, 0.88rem) !important;
        line-height: 1.38 !important;
        -webkit-line-clamp: 4 !important;
    }

    .geek-story--v20 .geek-story-motion-more,
    body.dark-mode .geek-story--v20 .geek-story-motion-more {
        width: max-content !important;
        margin-top: 0.68rem !important;
        padding: 0.58rem 0.92rem !important;
        border-radius: 999px !important;
        color: #113e35 !important;
        background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 17%, rgba(255, 255, 255, 0.92)) !important;
        border: 1px solid color-mix(in srgb, var(--card-accent, var(--story-accent)) 42%, rgba(46, 94, 85, 0.12)) !important;
        box-shadow: 0 11px 26px rgba(18, 64, 54, 0.10) !important;
        font-size: 0.7rem !important;
        font-weight: 900 !important;
    }

    .geek-story--v20 .geek-story-motion-more::after {
        content: "↗";
        margin-left: 0.4rem;
    }

    .geek-story--v20 .geek-story-motion-back-media {
        background:
            linear-gradient(145deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 22%, transparent), rgba(5, 35, 28, 0.28)),
            var(--card-img, none) center / cover no-repeat !important;
    }

    .geek-story--v20 .geek-story-motion-back-media::after {
        background: linear-gradient(to top, rgba(4, 28, 22, 0.35), transparent 58%) !important;
    }

    .geek-story--v20 .geek-story-motion-back-arrow {
        right: 12px !important;
        bottom: 12px !important;
        width: 34px !important;
        height: 34px !important;
        backdrop-filter: none !important;
        background: rgba(5, 34, 27, 0.62) !important;
    }

    .geek-story--v20 .geek-story-axis {
        position: absolute;
        top: 42px;
        right: 6px;
        z-index: 5;
        width: 2px;
        height: 72%;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        pointer-events: none;
    }

    .geek-story--v20 .geek-story-axis i {
        position: absolute;
        left: -3px;
        top: 18%;
        display: block;
        width: 8px;
        height: 28px;
        border-radius: 999px;
        background: var(--story-accent, #5ec8aa);
        box-shadow: 0 0 14px var(--story-accent, #5ec8aa);
        transition: background 0.35s ease;
        will-change: transform;
    }

    .geek-story--v20 .geek-story-bubble {
        position: absolute;
        z-index: 6;
        border: 1px solid color-mix(in srgb, var(--story-accent, #5ec8aa) 70%, #fff);
        border-radius: 50%;
        background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--story-accent, #5ec8aa) 38%, transparent));
        box-shadow: inset -8px -11px 15px rgba(0, 0, 0, 0.13), 0 14px 22px rgba(0, 0, 0, 0.16);
        pointer-events: none;
    }

    .geek-story--v20 .geek-story-bubble.b1 {
        width: 46px;
        aspect-ratio: 1;
        top: -8px;
        left: -10px;
        animation: geekStoryV20Drift 5.5s ease-in-out infinite;
    }

    .geek-story--v20 .geek-story-bubble.b2 {
        width: 20px;
        aspect-ratio: 1;
        right: -6px;
        bottom: 18px;
        animation: geekStoryV20Drift 5.5s -2.2s ease-in-out infinite;
    }

    .geek-story--v20 .geek-story-flow {
        position: relative !important;
        z-index: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
        width: min(100%, 640px) !important;
        margin-top: 0.85rem !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
        border: 0 !important;
    }

    .geek-story--v20 .geek-story-pill {
        min-height: 42px !important;
        height: auto !important;
        padding: 0.55rem 0.35rem !important;
        border-radius: 12px !important;
        color: rgba(31, 45, 61, 0.62) !important;
        background: rgba(255, 255, 255, 0.72) !important;
        border: 1px solid rgba(46, 94, 85, 0.12) !important;
        box-shadow: none !important;
        font-size: 0.62rem !important;
        transform: none !important;
    }

    .geek-story--v20 .geek-story-pill::after {
        display: none;
    }

    .geek-story--v20 .geek-story-pill.is-active {
        color: #0f2f2a !important;
        background: color-mix(in srgb, var(--story-accent, #5ec8aa) 22%, #fff) !important;
        border-color: color-mix(in srgb, var(--story-accent, #5ec8aa) 55%, transparent) !important;
        box-shadow: 0 8px 18px color-mix(in srgb, var(--story-accent, #5ec8aa) 16%, transparent) !important;
        transform: none !important;
    }

    .geek-story--v20 .geek-story-layout {
        grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr) !important;
        width: min(1180px, calc(100% - 48px)) !important;
        gap: clamp(28px, 6vw, 88px) !important;
        align-items: center !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .geek-story--v20 .geek-story-layout {
        grid-template-columns: minmax(240px, 0.86fr) minmax(380px, 1.14fr) !important;
        width: min(1040px, calc(100% - 36px)) !important;
        gap: 1.6rem !important;
    }

    .geek-story--v20 .geek-story-device,
    body.dark-mode .geek-story--v20 .geek-story-device {
        width: min(100%, 500px) !important;
    }

    .geek-story--v20 .geek-story-window,
    body.dark-mode .geek-story--v20 .geek-story-window {
        width: min(100%, 500px) !important;
    }

    .geek-story--v20 .geek-story-core,
    body.dark-mode .geek-story--v20 .geek-story-core {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }

    .geek-story--v20 .geek-story-motion-card,
    body.dark-mode .geek-story--v20 .geek-story-motion-card {
        height: 292px !important;
        min-height: 292px !important;
        max-height: 292px !important;
    }
}

@media (min-width: 769px) and (max-height: 760px) {
    .geek-story--v20 .geek-story-core,
    body.dark-mode .geek-story--v20 .geek-story-core {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .geek-story--v20 .geek-story-motion-card,
    body.dark-mode .geek-story--v20 .geek-story-motion-card {
        height: 268px !important;
        min-height: 268px !important;
        max-height: 268px !important;
    }

    .geek-story--v20 .geek-story-motion-title {
        font-size: 1.35rem !important;
    }

    .geek-story--v20 .geek-story-motion-desc {
        -webkit-line-clamp: 3 !important;
    }
}

body.dark-mode .geek-story--v20 .geek-story-motion-card.is-near .geek-story-motion-face {
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.42),
        0 8px 22px color-mix(in srgb, var(--card-accent, var(--story-accent)) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
    background:
        linear-gradient(135deg, rgba(18, 37, 34, 0.94), rgba(9, 18, 17, 0.78)),
        radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--card-accent, var(--story-accent)) 20%, transparent), transparent 38%) !important;
    border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 32%, rgba(255, 255, 255, 0.14)) !important;
    color: #f9fafb !important;
}

body.dark-mode .geek-story--v20 .geek-story-motion-back {
    background:
        linear-gradient(132deg, color-mix(in srgb, var(--card-accent, var(--story-accent)) 16%, #10251f), rgba(8, 24, 20, 0.97) 58%, rgba(6, 16, 14, 0.95)),
        #081814 !important;
    border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 33%, rgba(255, 255, 255, 0.14)) !important;
}

body.dark-mode .geek-story--v20 .geek-story-motion-title,
body.dark-mode .geek-story--v20 .geek-story-motion-back-title {
    color: #fff !important;
}

body.dark-mode .geek-story--v20 .geek-story-motion-desc,
body.dark-mode .geek-story--v20 .geek-story-motion-back-detail {
    color: rgba(226, 239, 234, 0.76) !important;
}

body.dark-mode .geek-story--v20 .geek-story-motion-hint {
    color: rgba(226, 239, 234, 0.62);
}

body.dark-mode .geek-story--v20 .geek-story-motion-more {
    color: #eafff7 !important;
    background: color-mix(in srgb, var(--card-accent, var(--story-accent)) 17%, rgba(10, 30, 25, 0.84)) !important;
    border-color: color-mix(in srgb, var(--card-accent, var(--story-accent)) 38%, rgba(255, 255, 255, 0.13)) !important;
}

body.dark-mode .geek-story--v20 .geek-story-window {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(8, 32, 28, 0.55)),
        linear-gradient(180deg, #102922 0%, #071612 100%) !important;
}

body.dark-mode .geek-story--v20 .geek-story-pill {
    color: rgba(231, 242, 238, 0.62) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(218, 241, 232, 0.12) !important;
}

body.dark-mode .geek-story--v20 .geek-story-pill.is-active {
    color: #eafff7 !important;
    background: color-mix(in srgb, var(--story-accent, #5ec8aa) 18%, rgba(8, 28, 22, 0.9)) !important;
    border-color: color-mix(in srgb, var(--story-accent, #5ec8aa) 50%, transparent) !important;
}

@keyframes geekStoryV20Drift {
    50% { transform: translate3d(6px, -11px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .geek-story--v20 .geek-story-track,
    .geek-story--static .geek-story-track {
        height: auto !important;
    }

    .geek-story--v20 .geek-story-sticky,
    .geek-story--static .geek-story-sticky {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .geek-story--v20 .geek-story-progress,
    .geek-story--v20 .geek-story-bubble,
    .geek-story--v20 .geek-story-axis {
        display: none !important;
    }

    .geek-story--v20 .geek-story-motion-flip,
    .geek-story--v20 .geek-story-motion-card {
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    .geek-story-progress,
    .geek-story-axis,
    .geek-story-bubble {
        display: none !important;
    }
}