.icon-sticker-row { padding-bottom: 34px; }
.image-gallery-row, .asset-collection, .asset-viewport { min-width: 0; }
.asset-collection { padding: 20px 0 26px; overflow: hidden; max-width: 100%; }
.asset-collection + .asset-collection { border-top: 1px solid rgba(255,255,255,.1); }
.asset-collection__label { margin: 0 0 14px; color: #a7dff2; font: 10px var(--mono); letter-spacing: .1em; }
.asset-viewport { overflow: hidden; }
.asset-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; will-change: transform; }
.showcase-media { position: relative; display: block; width: 100%; margin: 0; padding: 0; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 10px; background: #101114; color: var(--white); cursor: zoom-in; opacity: 0; text-align: left; appearance: none; }
.showcase-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.76,.2,1); }
.asset-collection--icons .showcase-media img { object-fit: contain; background: #fff; }
.asset-collection--gallery .showcase-media { aspect-ratio: 4 / 3; background: #141519; }
.asset-collection--gallery .showcase-media img { object-position: center; }
.showcase-media__veil { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); opacity: 0; transition: opacity .3s ease; }
.showcase-media__action { position: absolute; right: 12px; bottom: 10px; z-index: 1; color: #fff; font: 10px var(--mono); letter-spacing: .04em; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.showcase-media__play { position: absolute; left: 12px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; color: #fff; font: 10px var(--mono); letter-spacing: .05em; opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease; }
.showcase-media__play::before { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #fff; }
.showcase-media:hover img, .showcase-media:focus-visible img { transform: scale(1.045); }
.showcase-media:hover .showcase-media__veil, .showcase-media:focus-visible .showcase-media__veil { opacity: 1; }
.showcase-media:hover .showcase-media__action, .showcase-media:focus-visible .showcase-media__action { opacity: 1; transform: translateY(0); }
.showcase-media:hover .showcase-media__play, .showcase-media:focus-visible .showcase-media__play { opacity: 1; transform: translateY(0); }
.showcase-media:focus-visible, .asset-control:focus-visible, .asset-page-dot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.asset-controls { display: flex; align-items: center; justify-content: center; gap: 56px; min-height: 64px; padding-top: 18px; }
.asset-control { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: transparent; color: rgba(255,255,255,.38); cursor: pointer; font: 21px/1 var(--sans); transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
.asset-control:hover, .asset-control:focus-visible, .asset-control:active { border-color: #fff; background: transparent; color: #fff; }
.asset-control:hover { transform: scale(1.05); }
.asset-control:active { transform: scale(.95); }
.asset-pagination { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 90px; }
.asset-page-dot { display: block; width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.2); cursor: pointer; transition: width .28s ease, background .28s ease; }
.asset-page-dot:hover, .asset-page-dot.is-active { width: 30px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.34); }
.asset-collection--stickers.is-visible .showcase-media { animation: asset-slide-from-left .55s cubic-bezier(.2,.75,.2,1) calc(var(--order) * 65ms) both; }
.asset-collection--icons.is-visible .showcase-media { animation: asset-slide-from-right .55s cubic-bezier(.2,.75,.2,1) calc(var(--order) * 70ms) both; }
.asset-collection--gallery.is-visible .showcase-media { animation: asset-fade-up .52s cubic-bezier(.2,.75,.2,1) calc(var(--order) * 60ms) both; }
@keyframes asset-slide-from-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes asset-slide-from-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes asset-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.dialog-asset-preview { display: none; width: 100%; height: 100%; object-fit: contain; background: #070809; }
.dialog-video-preview { display: none; width: 100%; height: 100%; background: #070809; }
.dialog-bilibili-preview { display: none; width: 100%; height: 100%; border: 0; background: #070809; }
.project-dialog.dialog--asset { width: min(1180px, 94vw); }
.project-dialog.dialog--asset .dialog-graphic { height: min(72vh, 760px); background: #070809; }
.project-dialog.dialog--asset .dialog-asset-preview { display: block; }
.project-dialog.dialog--video { width: min(1180px, 94vw); }
.project-dialog.dialog--video .dialog-graphic { height: min(72vh, 760px); background: #070809; }
.project-dialog.dialog--video .dialog-video-preview { display: block; }
.project-dialog.dialog--bilibili { width: min(1180px, 94vw); }
.project-dialog.dialog--bilibili .dialog-graphic { height: min(72vh, 760px); background: #070809; }
.project-dialog.dialog--bilibili .dialog-bilibili-preview { display: block; }
.project-dialog.dialog--asset .dialog-content > p:last-child { display: none; }
.project-dialog.dialog--video .dialog-content > p:last-child { display: none; }
.project-dialog.dialog--bilibili .dialog-content > p:last-child { display: none; }
@media (max-width: 800px) {
  .asset-collection { padding: 18px 0 22px; }
  .asset-track { grid-auto-columns: minmax(78%, 1fr); gap: 12px; }
  .asset-controls { gap: 36px; min-height: 58px; padding-top: 14px; }
  .asset-control { flex-basis: 44px; width: 44px; height: 44px; }
  .showcase-media__veil, .showcase-media__action, .showcase-media__play { opacity: 1; }
  .showcase-media__veil { inset: 58% 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-media { opacity: 1; }
  .asset-collection--stickers.is-visible .showcase-media,
  .asset-collection--icons.is-visible .showcase-media,
  .asset-collection--gallery.is-visible .showcase-media { animation: none; }
  .showcase-media img, .asset-control, .asset-page-dot, .showcase-media__veil, .showcase-media__action, .showcase-media__play { transition: none; }
}