:root {
        --bg: #f4f5f7;
        --fg: #14181f;
        --mut: #5b6472;
        --ac: #0f766e;
        --bd: #d9dde3;
        --card: #fff
      }

      @media(prefers-color-scheme:dark) {
        :root {
          --bg: #0e1116;
          --fg: #e9ecf1;
          --mut: #9aa3b2;
          --bd: #2a313c;
          --ac: #2dd4bf;
          --card: #171c25
        }
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box
      }

      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
      }

      /* header {
        max-width: 1100px;
        margin: 0 auto;
        padding: 32px 16px 8px
      } */

      h1 {
        margin: 0 0 6px;
        font-size: clamp(1.6rem, 5vw, 2.4rem)
      }

      header p,
      .demo>p {
        margin: 0 0 12px;
        color: var(--mut)
      }

      .demo {
        max-width: 1100px;
        margin: 0 auto 44px;
        padding: 0 16px
      }

      .demo>h2 {
        margin: 0 0 2px;
        font-size: 1.15rem
      }

      button:focus-visible {
        outline: 3px solid var(--ac);
        outline-offset: 2px
      }

      /* ===== SHARED: slide (any tag with class "sl") ===== */
      .sl {
        display: block;
        position: relative;
        margin: 0;
        overflow: hidden;
        border-radius: 14px;
        aspect-ratio: 16/10;
        background: var(--bd)
      }

      .sl img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
      }

      .cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 28px 14px 10px;
        color: #fff;
        font-weight: 600;
        background: linear-gradient(transparent, rgba(0, 0, 0, .65))
      }

      .box {
        position: relative
      }

      .ar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        z-index: 5
      }

      .ar.p {
        left: 8px
      }

      .ar.n {
        right: 8px
      }

      /* ===== SHARED: native scroll-snap track (1-8, 20) ===== */
      .trk {
        position: relative;
        display: flex;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        overscroll-behavior-x: contain
      }

      .trk.ns {
        scroll-snap-type: none !important
      }

      .trk>* {
        flex: 0 0 100%;
        scroll-snap-align: start
      }

      /* 02, 07, 20 cards per view */
      .cards {
        --n: 1
      }

      .cards>* {
        flex-basis: calc((100% - (var(--n) - 1)*12px)/var(--n))
      }

      @media(min-width:600px) {
        .cards {
          --n: 2
        }
      }

      @media(min-width:900px) {
        .cards {
          --n: 3
        }
      }

      @media(min-width:1100px) {
        .cards {
          --n: 4
        }
      }

      .card {
        aspect-ratio: auto;
        background: var(--card);
        border: 1px solid var(--bd)
      }

      .card img {
        position: static;
        height: auto;
        aspect-ratio: 16/10
      }

      .card h3,
      .card p {
        margin: 10px 12px
      }

      .card p {
        color: var(--mut);
        margin-top: 0
      }

      /* 03 peek */
      .peek {
        padding: 0 10%
      }

      .peek>* {
        flex-basis: 80%;
        scroll-snap-align: center
      }

      /* 04 vertical */
      .v {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        height: 280px;
        scroll-snap-type: y mandatory
      }

      .v>* {
        flex: 0 0 100%;
        aspect-ratio: auto
      }

      /* 05, 06 center effects */
      .fx {
        perspective: 900px;
        gap: 0;
        padding: 24px calc(50% - 130px)
      }

      .fx>* {
        flex: 0 0 260px;
        scroll-snap-align: center;
        will-change: transform
      }

      /* 07 drag */
      .drag {
        cursor: grab;
        user-select: none
      }

      .drag.on {
        cursor: grabbing
      }

      /* 08 parallax image */
      .par .sl img {
        width: 130%;
        left: -15%;
        max-width: none
      }

      /* 20 progress */
      .pg {
        display: block;
        width: 100%;
        height: 5px;
        margin-top: 10px;
        border: 0;
        border-radius: 3px;
        appearance: none;
        background: var(--bd);
        color: var(--ac)
      }

      .pg::-webkit-progress-bar {
        background: var(--bd);
        border-radius: 3px
      }

      .pg::-webkit-progress-value {
        background: var(--ac);
        border-radius: 3px
      }

      .pg::-moz-progress-bar {
        background: var(--ac)
      }

      /* ===== SHARED: jQuery slider (9-14, 17, 18) ===== */
      .sx {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        touch-action: pan-y
      }

      .sx-in {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
        transition: transform .6s cubic-bezier(.2, .7, .2, 1)
      }

      .sx .sl {
        flex: 0 0 100%;
        border-radius: 0
      }

      .sx.fade .sx-in,
      .sx.stack .sx-in,
      .sx.ring .sx-in {
        display: block;
        position: relative;
        aspect-ratio: 16/10
      }

      .sx.fade .sl,
      .sx.stack .sl,
      .sx.ring .sl {
        position: absolute;
        inset: 0;
        aspect-ratio: auto
      }

      .sx.fade .sl {
        opacity: 0;
        transition: opacity .8s
      }

      .sx.fade .sl.on {
        opacity: 1
      }

      .zoom .sl img {
        transition: transform 7s linear
      }

      .zoom .sl.on img {
        transform: scale(1.2)
      }

      .zoom .sl:not(.on) img {
        transition: none;
        transform: scale(1)
      }

      .dots {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 4
      }

      .dots b {
        width: 10px;
        height: 10px;
        border-radius: 99px;
        background: rgba(255, 255, 255, .6);
        cursor: pointer;
        transition: width .3s
      }

      .dots b.on {
        background: #fff;
        width: 26px
      }

      .pb {
        position: absolute;
        left: 0;
        top: 0;
        height: 4px;
        background: #fff;
        width: 0;
        z-index: 4
      }

      .cnt {
        position: absolute;
        top: 10px;
        right: 12px;
        z-index: 4;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        border-radius: 99px;
        padding: 2px 12px;
        font-size: .8rem
      }

      .th {
        display: flex;
        gap: 8px;
        margin-top: 8px;
        overflow-x: auto
      }

      .th img {
        flex: 0 0 76px;
        height: 50px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        opacity: .5
      }

      .th img.on {
        opacity: 1;
        outline: 2px solid var(--ac);
        outline-offset: 2px
      }

      .sx.stack,
      .sx.ring {
        overflow: visible
      }

      .sx.stack {
        padding-bottom: 30px
      }

      .sx.stack .sx-in {
        width: calc(100% - 50px)
      }

      .sx.stack .sl {
        border-radius: 14px;
        cursor: pointer;
        transition: transform .5s, opacity .5s
      }

      .sx.ring {
        perspective: 1000px;
        height: 240px
      }

      .sx.ring .sx-in {
        width: 220px;
        margin: 40px auto;
        transform-style: preserve-3d;
        transition: transform .8s
      }

      .sx.ring .sl {
        border-radius: 12px;
        backface-visibility: hidden
      }

      /* 13 testimonial slide */
      .q {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px;
        background: var(--card);
        border: 1px solid var(--bd);
        aspect-ratio: auto
      }

      .q .av {
        position: static;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-bottom: 10px
      }

      .q p {
        margin: 0 0 6px;
        font-size: 1.1rem
      }

      .q footer {
        color: var(--mut)
      }

      .qt .sx-in {
        aspect-ratio: auto;
        height: 290px
      }

      .qt .dots b {
        background: var(--bd)
      }

      .qt .dots b.on {
        background: var(--ac)
      }

      /* ===== 15 marquee (CSS only) ===== */
      .mq {
        overflow: hidden;
        margin-bottom: 12px
      }

      .mq-tr {
        display: flex;
        gap: 12px;
        width: max-content;
        margin: 0;
        padding: 0;
        list-style: none;
        animation: mq 35s linear infinite
      }

      .mq:hover .mq-tr {
        animation-play-state: paused
      }

      .mq.rev .mq-tr {
        animation-direction: reverse
      }

      .mq .sl {
        flex: 0 0 220px
      }

      @keyframes mq {
        to {
          transform: translateX(calc(-50% - 6px))
        }
      }

      /* ===== 16 page scroll drives sideways movement ===== */
      .hs {
        height: 260vh;
        position: relative
      }

      .hs-st {
        position: sticky;
        top: 12vh;
        height: 76vh;
        overflow: hidden;
        display: flex;
        align-items: center
      }

      .hs-tr {
        display: flex;
        gap: 16px;
        width: max-content;
        margin: 0;
        padding: 0;
        list-style: none;
        will-change: transform
      }

      .hs-tr .sl {
        flex: 0 0 min(70vw, 420px)
      }

      /* ===== 19 expanding panels ===== */
      .acc {
        display: flex;
        gap: 8px;
        /* height: 300px */
      }

      .acc .sl {
        flex: 1;
        min-width: 0;
        aspect-ratio: auto;
        cursor: pointer;
        transition: flex .5s
      }

      .acc .sl.on {
        flex: 4
      }

      .acc .cap {
        opacity: 0;
        transition: opacity .4s;
        white-space: nowrap
      }

      .acc .on .cap {
        opacity: 1
      }

      @media(max-width:600px) {
        .acc {
          flex-direction: column;
          height: 400px
        }
      }

      @media(prefers-reduced-motion:reduce) {
        * {
          animation: none !important;
          transition: none !important
        }
      }