.wps-showcase{display:flex;flex-direction:row;width:100%;background:#0a0d10;color:#fff;box-sizing:border-box}
.wps-showcase *{box-sizing:border-box}
.wps-list{list-style:none;margin:0;padding:0;width:40%;flex:0 0 auto;border-top:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12)}
.wps-item{display:block;position:relative;margin:0;padding:0;border-bottom:1px solid rgba(255,255,255,.12);transition:background-color .3s ease}
.wps-item__link{display:flex;align-items:center;gap:16px;width:100%;padding:20px 24px 20px 0;color:inherit;text-decoration:none;cursor:pointer;outline:none}
.wps-item__number{flex:0 0 38px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:#5b6670}
.wps-item__title{flex:1;font-size:22px;line-height:1.2;color:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s}
.wps-item__arrow{flex:0 0 auto;font-size:12px;color:#8a949c;display:inline-flex;transition:transform .3s,color .3s}
.wps-item__arrow svg{width:1em;height:1em;fill:currentColor}
.wps-item.is-active .wps-item__arrow{transform:translate(2px,-2px)}
.wps-item.is-active .wps-item__title{transform:translateX(16px)}
.wps-item.is-active{background-color:rgba(255,255,255,.04)}
.wps-panel{position:relative;flex:1 1 0;min-height:520px;overflow:hidden;border-radius:0}
.wps-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.wps-slide.is-active{opacity:1;visibility:visible;z-index:1}
.wps-slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.wps-slide.is-active .wps-slide__bg{transform:scale(1)}
.wps-slide__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,13,16,.92) 0%,rgba(10,13,16,.2) 55%,rgba(10,13,16,0) 100%)}
.wps-slide__content{position:absolute;left:0;right:0;bottom:0;padding:40px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.wps-slide__title{margin:0;font-size:38px;line-height:1.1;font-weight:500;color:#fff;letter-spacing:-.02em}
.wps-tags{display:flex;flex-wrap:wrap;gap:8px}
.wps-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#d5dade;border:1px solid rgba(255,255,255,.3);padding:5px 8px;border-radius:0}
.wps-slide__desc{margin:0;max-width:560px;font-size:13px;line-height:1.6;color:#b9c1c7}
@media(max-width:1024px){.wps-showcase{flex-direction:column}.wps-list{width:100%;border-right:0}.wps-panel{min-height:420px}}
@media(prefers-reduced-motion:reduce){.wps-showcase *{transition:none!important}}
.wps-showcase.is-acc{flex-direction:column}
.wps-showcase.is-acc .wps-list{width:100%;border-right:0}
.wps-showcase.is-acc .wps-panel{display:none}
.wps-showcase.is-acc .wps-item.is-active .wps-item__title{transform:none}
.wps-showcase.is-acc .wps-item .wps-slide{position:relative;inset:auto;display:block;width:auto;height:0;overflow:hidden;opacity:1;visibility:visible;z-index:auto;transition:height .45s ease}
.wps-showcase.is-acc .wps-item.is-active .wps-slide{height:360px}
.wps-showcase.is-acc .wps-item .wps-slide__bg{transform:scale(1)}
.wps-showcase.is-acc .wps-item .wps-slide__content{padding:20px}
.wps-showcase.is-acc .wps-slide__title{font-size:26px}
.wps-showcase.is-acc .wps-item.is-active .wps-item__arrow{transform:rotate(90deg)}

.wps-slide__bg{background-repeat:no-repeat}
.wps-showcase.is-accordion{flex-direction:column}
.wps-showcase.is-accordion .wps-list{width:100%;border-right:0}
.wps-showcase.is-accordion .wps-panel{display:none}
.wps-showcase.is-accordion .wps-item{display:flex;flex-direction:column}
.wps-showcase.is-accordion .wps-item__link{flex:0 0 auto}
.wps-showcase.is-accordion .wps-slide{position:relative;inset:auto;width:100%;height:0;overflow:hidden;opacity:1;visibility:visible;z-index:0;transition:height .45s ease}
.wps-showcase.is-accordion .wps-slide.is-active{height:340px}
.wps-showcase.is-accordion .wps-slide:not(.is-active){pointer-events:none}
.wps-showcase.is-accordion .wps-item.is-active .wps-item__arrow{transform:rotate(90deg)}
