.artswipe-mini{
  max-width:520px;
  margin:0 auto;
}
.as-mini-shell{
  position:relative;
  padding:16px;
  border-radius:24px;
  background:
    radial-gradient(420px 220px at 12% 0%, rgba(110,231,255,.18), transparent 60%),
    radial-gradient(340px 240px at 88% -10%, rgba(255,196,128,.2), transparent 60%),
    linear-gradient(160deg, rgba(12,14,20,.96), rgba(8,10,15,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.as-mini-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
}
.as-mini-title{
  font-size:18px;
  font-weight:700;
  color:#f8fafc;
}
.as-mini-sub{
  margin-top:4px;
  font-size:13px;
  color:rgba(226,232,240,.8);
}
.as-mini-stage{
  position:relative;
  margin-top:14px;
  height:clamp(240px, 56vw, 360px);
  border-radius:20px;
  background:linear-gradient(160deg, rgba(14,16,22,.9), rgba(20,24,32,.95));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.as-mini-stack{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.as-mini-card{
  position:absolute;
  left:50%;
  top:50%;
  width:min(72%, 240px);
  aspect-ratio:3/4;
  transform:translate(-50%, -50%);
  border-radius:0;
  background:rgba(10,12,16,.9);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transition:transform 220ms ease, opacity 220ms ease;
  will-change:transform;
  --swipe-like: 0;
  --swipe-skip: 0;
  touch-action:none;
  user-select:none;
}
.as-mini-card.is-next{
  transform:translate(-50%, -50%) scale(0.96);
  opacity:.55;
}
.as-mini-card.is-third{
  transform:translate(-50%, -50%) scale(0.92);
  opacity:.35;
}
.as-mini-card.is-top{
  cursor:grab;
  touch-action:none;
}
.as-mini-card.dragging{
  cursor:grabbing;
}
.as-mini-card-inner{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
}
.as-mini-swipe{
  position:absolute;
  inset:0;
  background:
    radial-gradient(260px 260px at 20% 50%, rgba(45, 212, 111, calc(.55 * var(--swipe-like))), transparent 65%),
    radial-gradient(260px 260px at 80% 50%, rgba(239, 68, 68, calc(.55 * var(--swipe-skip))), transparent 65%);
  opacity:calc(var(--swipe-like) + var(--swipe-skip));
  transition:opacity 80ms ease;
  pointer-events:none;
}
.as-mini-card-inner.float{
  animation:as-mini-float 3.6s ease-in-out infinite;
}
.as-mini-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  display:block;
  pointer-events:none;
  touch-action:none;
  user-select:none;
}
.as-mini-hint{
  position:absolute;
  right:14px;
  bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(226,232,240,.8);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
  animation:as-mini-hint 2.6s ease-in-out infinite;
}
.as-mini-hint.hide{opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease;}
.as-mini-finger{
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.as-mini-finger svg{
  width:18px;
  height:18px;
  color:#e2e8f0;
}
.as-mini-launch{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(8,10,15,.78);
  color:#f8fafc;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.as-mini-launch.show{opacity:1;}

@keyframes as-mini-float{
  0%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
  100%{transform:translateY(0);}
}
@keyframes as-mini-hint{
  0%{transform:translateX(0);}
  50%{transform:translateX(-24px);}
  100%{transform:translateX(0);}
}

@media (min-width:700px){
  .as-mini-shell{padding:18px;}
  .as-mini-title{font-size:20px;}
}