:root {
    --spinix-demo-bg: #f6efe8;
    --spinix-demo-panel: rgba(255, 251, 246, 0.94);
    --spinix-demo-text: #20262d;
    --spinix-demo-muted: #8a9098;
    --spinix-demo-line: rgba(38, 43, 49, 0.1);
    --spinix-demo-accent: #d96745;
}

.spinix {
    --spinix-item-height: 52px;
    --spinix-visible-items: 5;
    position: relative;
    overflow: hidden;
    height: calc(var(--spinix-item-height) * var(--spinix-visible-items));
    border-radius: 24px;
    user-select: none;
    touch-action: none;
    cursor: grab;
}

.spinix.is-dragging {
    cursor: grabbing;
}

.spinix__track {
    position: absolute;
    inset: 0;
    will-change: transform;
}

.spinix__item {
    height: var(--spinix-item-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1B3378;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    white-space: nowrap;
    transition: all .3s ease;
}

.spinix__item.is-active {
    color: #1B3378;
    font-weight: 600;
    position: relative;
    font-size: 22px;
}

.spinix__selection {
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: var(--spinix-item-height);
    transform: translateY(-50%);
    border-radius: 14px;
    background: rgba(217, 103, 69, 0.07);
    background-color: #F6F7FF;
    pointer-events: none;
    width: 100%;
    max-width: 170px;
    margin: 0 auto;
    transition: height .3s ease;
}

.spinix__fade {
    position: absolute;
    left: 0;
    right: 0;
    height: calc(var(--spinix-item-height) * 1.35);
    pointer-events: none;
    z-index: 3;
}