.pattern-preview.snap-preview{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;align-content:stretch;grid-gap:10px;gap:10px;padding:14px;height:180px;overflow:hidden;isolation:isolate}.snap-badge{position:absolute;top:8px;right:10px;z-index:4;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--snap-accent,rgba(255,255,255,.9));font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.snap-track{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px;border:1px solid rgba(248,250,252,.08);background:radial-gradient(circle at 50% 50%,rgba(103,232,249,.06),transparent 60%),linear-gradient(180deg,#0a1626,#050a14);isolation:isolate}.snap-zone{position:absolute;top:8px;bottom:8px;left:50%;width:100px;transform:translateX(-50%);z-index:2;border-radius:9px;border:1.5px solid color-mix(in srgb,var(--snap-accent,#67e8f9) var(--snap-zone-strength,70%),transparent);box-shadow:inset 0 0 0 1px rgba(15,23,42,.5),0 0 18px color-mix(in srgb,var(--snap-accent,#67e8f9) 30%,transparent);pointer-events:none}.snap-preview--motion-trap .snap-zone{border-style:dashed;border-color:rgba(226,232,240,.42);box-shadow:none;opacity:var(--snap-zone-opacity,1)}.snap-rail{display:flex;align-items:center;gap:8px;padding:0 calc(50% - 48px);width:max-content;height:100%}.snap-card{flex:0 0 96px;height:90%;display:grid;grid-template-rows:1fr auto auto;grid-gap:4px;gap:4px;padding:8px;background:rgba(15,23,42,.94);border:1px solid rgba(248,250,252,.1);border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.4)}.snap-thumb{border-radius:6px;background:linear-gradient(135deg,var(--snap-accent,#67e8f9) 0,#fbbf24 100%);opacity:.78;min-height:0}.snap-card:nth-child(4n+2) .snap-thumb{background:linear-gradient(135deg,#a78bfa,#f0abfc)}.snap-card:nth-child(4n+3) .snap-thumb{background:linear-gradient(135deg,#34d399,#67e8f9)}.snap-card:nth-child(4n+4) .snap-thumb{background:linear-gradient(135deg,#f472b6,#fb923c)}.snap-line{display:block;height:3px;border-radius:999px;background:rgba(226,232,240,.4)}.snap-line--title{width:80%;background:rgba(226,232,240,.78)}.snap-line--meta{width:50%}.snap-card--tall{flex:0 0 144px;border-color:var(--snap-accent,#fbbf24);background:linear-gradient(90deg,rgba(251,191,36,.14),rgba(15,23,42,.96) 55%);box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 1px var(--snap-accent-soft,rgba(251,191,36,.4)),0 0 14px rgba(251,191,36,.16)}.snap-indicator{display:flex;justify-content:center;gap:6px;height:10px;align-items:center}.snap-dot{width:6px;height:6px;border-radius:50%;background:rgba(248,250,252,.18);animation:snapDotPulse var(--snap-duration,5.6s) linear infinite}.snap-dot:first-child{animation-delay:0s}.snap-dot:nth-child(2){animation-delay:calc(var(--snap-duration, 5.6s) * -.75)}.snap-dot:nth-child(3){animation-delay:calc(var(--snap-duration, 5.6s) * -.5)}.snap-dot:nth-child(4){animation-delay:calc(var(--snap-duration, 5.6s) * -.25)}.snap-preview--motion-mandatory .snap-rail{animation:snapRailHoldQuick var(--snap-duration) cubic-bezier(.22,1,.36,1) infinite}.snap-preview--motion-proximity .snap-rail{animation:snapRailLinear var(--snap-duration) linear infinite}.snap-preview--motion-trap .snap-rail{animation:snapRailTrap var(--snap-duration) cubic-bezier(.22,1,.36,1) infinite}@keyframes snapRailHoldQuick{0%{transform:translateX(0)}18%{transform:translateX(0)}25%{transform:translateX(-104px)}43%{transform:translateX(-104px)}50%{transform:translateX(-208px)}68%{transform:translateX(-208px)}75%{transform:translateX(-312px)}93%{transform:translateX(-312px)}to{transform:translateX(-416px)}}@keyframes snapRailLinear{0%{transform:translateX(0)}to{transform:translateX(-416px)}}@keyframes snapRailTrap{0%,12%{transform:translateX(0)}18%,28%{transform:translateX(-104px)}35%,60%{transform:translateX(-256px)}66%,78%{transform:translateX(-360px)}84%,to{transform:translateX(-464px)}}@keyframes snapDotPulse{0%,18%{background:rgba(248,250,252,.9);transform:scale(1.15)}25%,to{background:rgba(248,250,252,.18);transform:scale(1)}}@media (prefers-reduced-motion:reduce){.snap-preview .snap-dot,.snap-preview .snap-rail{animation:none}}