.portfolio .reference-video{aspect-ratio:16/9}
.portfolio .works>.work{min-width:0}
.portfolio .shorts-preview{position:relative;width:100%;max-width:100%;min-width:0;box-sizing:border-box;aspect-ratio:16/9;height:auto;overflow:hidden;transition:aspect-ratio .55s cubic-bezier(.22,1,.36,1);background:#06171d}
.portfolio .shorts-preview.is-expanded{aspect-ratio:var(--shorts-ratio,9/16)}
.portfolio .shorts-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#06171d}
.shorts-open{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#06171d;color:white}
.shorts-open img{display:block;width:100%;height:100%;object-fit:cover}
.shorts-open span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(0,255,232,.92);color:#06171d;font-size:23px;padding-left:4px}
.shorts-open:focus-visible,.shorts-close:focus-visible{outline:3px solid #00ffe8;outline-offset:-4px}
.shorts-close{position:absolute;z-index:2;right:10px;top:10px;border:1px solid #6a888d;border-radius:20px;background:#06171de6;color:#fff;padding:8px 13px;cursor:pointer}
.shorts-preview [hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.portfolio .shorts-preview{transition:none}}