.showcase{height:100%;min-height:320px;display:flex;flex-direction:column;background:#000;color:#f7f7f5;overflow:hidden;outline:none;font-family:Arial,Helvetica,sans-serif}
.showcase-fallback{height:100%;display:grid;place-items:center;padding-bottom:100px;background:#000;box-sizing:border-box}.showcase-fallback>div{position:relative;width:clamp(220px,80vw,460px);aspect-ratio:1.5925;overflow:hidden;border-radius:16px;border:1px solid #ffffff45}.showcase-fallback img{width:100%;height:100%;object-fit:cover}.showcase-fallback strong{position:absolute;right:6%;top:12%;color:white;font:700 17px Arial,Helvetica,sans-serif}
.showcase:focus-visible{box-shadow:inset 0 0 0 2px #aaa;border-radius:18px}
.showcase-stage{position:relative;flex:1;min-height:210px;perspective:1200px;overflow:hidden;touch-action:pan-y;cursor:grab;isolation:isolate}
.showcase-stage.is-dragging{cursor:grabbing}
.showcase-card{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform-origin:center;transition:transform .52s cubic-bezier(.22,.8,.25,1),opacity .42s ease;will-change:transform;user-select:none;cursor:pointer}
.showcase-card.is-active{cursor:grab}
.showcase-card>div{box-shadow:0 20px 50px #0008,inset 0 0 0 1px #ffffff24!important}
.showcase-card video{pointer-events:none}
.showcase-controls{display:flex;align-items:center;justify-content:center;gap:18px;width:min(420px,calc(100% - 32px));margin:0 auto;position:relative;z-index:30;flex-shrink:0}
.showcase-arrow{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border:1px solid #ffffff45;border-radius:50%;background:#111;color:#f7f7f5;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease;touch-action:manipulation}
.showcase-arrow:hover{background:#f7f7f5;color:#080808;border-color:#f7f7f5}
.showcase-arrow:active{transform:scale(.94)}
.showcase-arrow:focus-visible,.showcase-dots button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.showcase-position{min-width:0;text-align:center}
.showcase-dots{display:flex;justify-content:center;align-items:center}
.showcase-dots button{width:clamp(28px,8vw,36px);height:36px;display:grid;place-items:center;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;touch-action:manipulation}
.showcase-dots span{width:5px;height:5px;border-radius:10px;background:#666;transition:width .25s ease,background .25s ease}
.showcase-dots button[aria-pressed=true] span{width:24px;background:#f7f7f5}
.showcase-position p{font-size:11px;line-height:1.4;letter-spacing:.15em;margin:0;font-variant-numeric:tabular-nums;color:#eee}
.showcase-position p span{color:#777}
.showcase-hint{flex-shrink:0;margin:17px 0 16px;text-align:center;color:#969696;font-size:12px;line-height:1.4;letter-spacing:.025em}
@media(max-width:400px){.showcase-controls{gap:12px}.showcase-arrow{width:48px;height:48px;flex-basis:48px}.showcase-hint{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.showcase-card,.showcase-arrow,.showcase-dots span{transition:none!important}}