body { overflow-x: hidden; }

.loading {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 14px;
}

.list {
  padding: 100px 64px 64px;
}

.list-item {
  position: relative;
  border-top: 1px solid var(--border-strong);
  cursor: pointer;
  transition: color var(--duration-fast) ease;
  display: block;
}
.list-item:last-child {
  border-bottom: 1px solid var(--border-strong);
}
.list-item-name {
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  padding: 28px 0;
  display: block;
  transition: color var(--duration-fast) ease;
}
.list-item:hover .list-item-name {
  color: #999;
}

.preview {
  position: fixed;
  width: 380px;
  height: 240px;
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--duration-normal) var(--ease-out),
    transform var(--duration-normal) var(--ease-out);
  box-shadow: var(--shadow-md);
  background: #eee;
}
.preview.active {
  opacity: 1;
  transform: scale(1);
}
.preview-inner {
  width: 100%; height: 100%;
  position: relative;
}
.preview-inner img,
.preview-inner video {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.preview-inner video { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .preview { transition: opacity var(--duration-normal) ease; transform: none; }
}