.portfolio-preview{aspect-ratio:16/10;isolation:isolate;border:1px solid var(--stroke__main);background:var(--bg__muted50);width:100%;color:var(--text__primary);border-radius:16px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.portfolio-preview[data-variant=thumb]{aspect-ratio:auto;border-radius:12px;flex-shrink:0;width:97px;height:72px}.portfolio-preview__image{object-fit:cover;width:100%;height:100%;display:block}.portfolio-preview__image,.portfolio-preview__logo-stage,.portfolio-preview__letters,.portfolio-preview__doc{transition:transform .2s}.portfolio-preview[data-kind=document]{align-items:flex-start;padding:16px 24px 0}.portfolio-preview[data-kind=document] .portfolio-preview__image{object-position:top;background:var(--bg__white);box-shadow:var(--shadow__md);border-radius:8px 8px 0 0}.portfolio-preview[data-variant=thumb][data-kind=document]{padding:8px 8px 0}.portfolio-preview__badge,.portfolio-preview__logo{border:4px solid var(--bg__white);background:var(--bg__white);width:56px;height:56px;color:var(--primary__600);box-shadow:var(--shadow__sm);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;font-weight:500;display:flex;overflow:hidden}.portfolio-preview__badge{border-width:2px;border-radius:8px;width:32px;height:32px;font-size:12px;position:absolute;bottom:16px;left:16px}.portfolio-preview__badge img,.portfolio-preview__logo img{object-fit:contain;width:100%;height:100%}.portfolio-preview__logo-stage{flex-direction:column;align-items:center;gap:8px;min-width:0;max-width:100%;padding:8px;display:flex}.portfolio-preview__domain{max-width:100%;color:var(--text__metadata);text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:16px;display:block;overflow:hidden}.portfolio-preview__letters{letter-spacing:-.02em;font-size:48px;font-weight:500;line-height:1}.portfolio-preview[data-variant=thumb] .portfolio-preview__letters{font-size:30px}.portfolio-preview[data-variant=thumb] .portfolio-preview__badge{bottom:8px;left:8px}.portfolio-preview[data-variant=thumb] .portfolio-preview__logo{border-width:2px;border-radius:8px;width:32px;height:32px}.portfolio-preview[data-variant=thumb] .portfolio-preview__logo-stage{padding-block:0}.portfolio-preview__loading{border-radius:inherit;position:absolute;inset:0}.portfolio-preview__doc{flex-shrink:0;align-self:center;width:190px;height:160px;position:relative}.portfolio-preview__page{background:var(--bg__card);width:112px;height:148px;box-shadow:var(--shadow__md);border-radius:12px;flex-direction:column;gap:8px;padding:16px;display:flex;position:absolute}.portfolio-preview__page--back{top:8px;left:0;transform:rotate(-5deg)}.portfolio-preview__page--front{top:0;right:0;transform:rotate(4deg)}.portfolio-preview__doc-icon{width:24px;height:24px}.portfolio-preview__line{background:var(--stroke__main);border-radius:8px;flex-shrink:0;width:86%;height:8px;display:block}.portfolio-preview__line--strong{width:92%}.portfolio-preview__line--mid{width:64%}.portfolio-preview__line--short{width:42%}.portfolio-preview__swatches{gap:8px;display:flex}.portfolio-preview__swatches i{background:var(--text__headings);border-radius:50%;width:16px;height:16px}.portfolio-preview__swatches i:nth-child(2){background:var(--primary__600)}.portfolio-preview__swatches i:nth-child(3){background:var(--bg__primarybg)}.portfolio-preview[data-variant=thumb] .portfolio-preview__doc{transform:scale(.36)}@media (prefers-reduced-motion:reduce){.portfolio-preview__image,.portfolio-preview__logo-stage,.portfolio-preview__letters,.portfolio-preview__doc{transition:none}}