.focusrail {
    --fr-cat-color:#fff;
    --fr-cat-size:12px;
    --fr-title-color:#fff;
    --fr-title-size:28px;
    --fr-btn-bg:#fff;
    --fr-btn-text:#000;
    --fr-btn-bg-hover:#000;
    --fr-btn-text-hover:#fff;
    --fr-btn-radius:0px;

    width:100vw;
    height:100vh;
    position:relative;
    overflow:hidden;
}

/* Track */
.focusrail-track {
    display:flex;
    height:100%;
    transition:transform .85s cubic-bezier(.22,.61,.36,1);
}

/* Panels */
.focusrail-panel {
    flex:0 0 25%;
    background-size:cover;
    background-position:center;
    filter:brightness(.55);
    transition:.45s ease;
    position:relative;
    z-index:1;
}

.focusrail-panel:hover {
    transform:scale(1.08);
    filter:brightness(1);
    z-index:2;
}

/* Grayscale option */
.focusrail.fr-grayscale .focusrail-panel {
    filter:grayscale(100%) brightness(.55);
}

.focusrail.fr-grayscale .focusrail-panel:hover {
    filter:grayscale(0%) brightness(1);
}

/* Overlay */
.focusrail-overlay {
    position:absolute;
    inset:0;
    padding:48px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:linear-gradient(to top,rgba(0,0,0,.75),transparent 60%);
    opacity:0;
    transform:translateY(30px);
    transition:.35s ease;
}

.focusrail-panel:hover .focusrail-overlay {
    opacity:1;
    transform:translateY(0);
}

.fr-category {
    color:var(--fr-cat-color);
    font-size:var(--fr-cat-size);
    text-transform:uppercase;
    letter-spacing:2px;
}

.fr-title {
    color:var(--fr-title-color);
    font-size:var(--fr-title-size);
    margin:8px 0 12px;
}

/* Button */
.fr-cta {
    color:var(--fr-btn-text);
    background:var(--fr-btn-bg);
    border-radius:var(--fr-btn-radius);
    padding:10px 18px;
    text-decoration:none;
    transition:.25s ease;
}

.fr-btn-minimal .fr-cta {
    background:none;
    padding:0;
    border-bottom:1px solid currentColor;
}

.fr-btn-outline .fr-cta {
    background:none;
    border:1px solid var(--fr-btn-bg);
}

.fr-cta:hover {
    background:var(--fr-btn-bg-hover);
    color:var(--fr-btn-text-hover);
}

/* Arrows – FIXED */
.focusrail-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    color:#fff;
    z-index:9999;
    cursor:pointer;
}

.focusrail-arrow.left { left:24px; }
.focusrail-arrow.right { right:24px; }

/* Responsive */
@media(max-width:1024px){.focusrail-panel{flex:0 0 33.333%;}}
@media(max-width:768px){
    .focusrail{height:80vh;}
    .focusrail-panel{flex:0 0 100%;}
}