.banner-slider{aspect-ratio:18/5;border-radius:var(--r-xl);background-color:var(--bg-2);isolation:isolate;border:1px solid var(--border);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;width:100%;max-height:400px;margin-bottom:24px;transition:box-shadow .24s,border-color .2s;position:relative;overflow:hidden;box-shadow:0 1px #0f172a05,0 12px 32px -16px #0f172a2e,inset 0 0 0 1px #fff9}.banner-slider:hover{border-color:var(--border-strong);box-shadow:0 1px #0f172a05,0 18px 44px -16px #0f172a42,inset 0 0 0 1px #fff9}.banner-slider:active{cursor:grabbing}@media (max-width:900px){.banner-slider{aspect-ratio:16/6;border-radius:var(--r-lg);max-height:320px}}@media (max-width:600px){.banner-slider{aspect-ratio:16/9;max-height:260px}}.banner-track{will-change:transform;backface-visibility:hidden;width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.32,.72,0,1);display:flex}.banner-track.is-dragging{transition:none}.banner-slide{flex:0 0 100%;width:100%;height:100%;position:relative;transform:translate(0,0)}.banner-slide-link{width:100%;height:100%;color:inherit;text-decoration:none;display:block}.banner-slide-link img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.banner-nav{-webkit-backdrop-filter:blur(14px)saturate(140%);backdrop-filter:blur(14px)saturate(140%);cursor:pointer;width:44px;height:44px;color:var(--ink);z-index:3;opacity:0;background-color:#ffffffeb;border:1px solid #ffffff8c;border-radius:999px;place-items:center;transition:opacity .22s,transform .24s cubic-bezier(.32,.72,0,1),background-color .16s,color .16s,box-shadow .22s;display:grid;position:absolute;top:50%;transform:translateY(-50%)scale(.92);box-shadow:0 1px 2px #0f172a14,0 10px 28px -10px #0f172a52}.banner-slider:hover .banner-nav,.banner-slider:focus-within .banner-nav{opacity:1;transform:translateY(-50%)scale(1)}@media (hover:none){.banner-nav{opacity:.95;transform:translateY(-50%)scale(1)}}.banner-nav:hover{background-color:var(--ink);color:#fff;border-color:#0000;box-shadow:0 2px 4px #0f172a29,0 14px 32px -8px #0f172a73}.banner-nav:active{transform:translateY(-50%)scale(.95)}.banner-nav-prev{left:18px}.banner-nav-next{right:18px}@media (max-width:600px){.banner-nav{width:36px;height:36px}.banner-nav-prev{left:10px}.banner-nav-next{right:10px}}.banner-dots{z-index:3;filter:drop-shadow(0 2px 6px #00000059);gap:8px;display:flex;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.banner-dot{cursor:pointer;background-color:#fff6;border:0;border-radius:999px;width:28px;height:3px;padding:0;transition:background-color .2s,width .28s;position:relative;overflow:hidden}.banner-dot:hover{background-color:#ffffffb3}.banner-dot[data-active=true]{background-color:#fff6;width:44px}.banner-dot-fill{border-radius:inherit;transform-origin:0;background-color:#fff;animation-name:bannerDotProgress;animation-timing-function:linear;animation-fill-mode:forwards;position:absolute;inset:0;transform:scaleX(0)}.banner-dot-fill.is-paused{animation-play-state:paused}@keyframes bannerDotProgress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.banner-dot-fill{animation:none;transform:scaleX(1)}}@media (max-width:600px){.banner-dots{gap:6px;bottom:12px}.banner-dot{width:22px}.banner-dot[data-active=true]{width:34px}}
