.motion-banner-canvas{display:block;width:100%;height:auto;aspect-ratio:2/1;background:#111216;border-radius:14px}
.page-intro:has([data-motion-hero]){min-height:0;padding-top:40px;padding-bottom:28px}
.page-intro:has([data-motion-hero])>div{max-width:100%;min-width:0}
.motion-banner-hero{min-height:230px;margin:20px 0}
.motion-banner-hero[data-state=empty],.motion-banner-hero[data-state=error]{min-height:0}
.motion-banner-rail{--rail-speed:18;max-width:1140px;margin-inline:auto;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto;touch-action:pan-x pan-y pinch-zoom;cursor:grab}
.motion-banner-rail::-webkit-scrollbar{display:none}
.motion-banner-track{display:flex;align-items:start;gap:18px;width:max-content;padding:5px 3px}
.motion-banner-rail[data-static=true] .motion-banner-track{margin-inline:auto}
.motion-banner-card{background:none;border:0;padding:0;color:inherit;text-align:left;cursor:zoom-in;min-width:0}
.motion-banner-hero-card{flex:0 0 320px;width:320px;cursor:inherit;user-select:none;-webkit-user-select:none}
.motion-banner-rail[data-dragging=true],.motion-banner-rail[data-dragging=true] *{cursor:grabbing}
.motion-banner-art{display:block;width:100%;aspect-ratio:2/1;border-radius:12px;overflow:hidden;background:#111216}
.motion-banner-art .motion-banner-canvas{width:100%;height:100%;object-fit:contain;border-radius:0}
.motion-banner-label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;font-size:14px;line-height:1.5}
.motion-banner-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.motion-banner-label small{color:#b8beaf;flex-shrink:0}
.page-intro .motion-banner-status{font-size:12px;color:#a7af9d;margin:16px 0}
.motion-banner-section{padding-top:16px}
.motion-banner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.motion-banner-open{overflow:hidden}
.motion-banner-dialog{position:fixed;inset:0;margin:auto;width:min(1100px,94vw);height:fit-content;max-height:90vh;max-height:90dvh;border:0;padding:48px 18px 20px;background:#171915;color:#fff;border-radius:14px;overscroll-behavior:contain}
.motion-banner-dialog::backdrop{background:#000c;backdrop-filter:none}
.motion-banner-dialog .motion-banner-canvas{border-radius:8px;max-height:calc(84vh - 110px);max-height:calc(84dvh - 110px);object-fit:contain}
.motion-banner-close{position:absolute;right:8px;top:4px;display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;color:#fff;font-size:30px;cursor:pointer}
.motion-banner-dialog p{margin:16px 0 0;text-align:center;font-size:14px}
@media(max-width:600px){
 .page-intro:has([data-motion-hero]){padding:24px 20px 20px}
 .motion-banner-hero{min-height:170px;margin:14px -8px 18px}
 .motion-banner-track{gap:12px}
 .motion-banner-hero-card{flex-basis:240px;width:240px}
 .motion-banner-grid{gap:18px 12px}
 .motion-banner-label{font-size:12px;padding:8px 0;gap:6px}
 .motion-banner-canvas,.motion-banner-art{border-radius:8px}
 .motion-banner-section{padding-top:12px}
 .motion-banner-dialog{padding:48px 10px 14px}
}

.motion-banner-composite{display:grid;position:relative;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:inherit}.motion-banner-composite>.motion-banner-canvas{grid-area:1/1;position:relative;z-index:1;background:transparent}.motion-banner-video-frame{position:absolute;overflow:hidden;pointer-events:none}.motion-banner-video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}