.vsp-link-progress{
    position:fixed;
    z-index:2147483647;
    top:0;
    left:0;
    width:100%;
    height:3px;
    pointer-events:none;
    opacity:0;
    transition:opacity .15s ease;
}
.vsp-link-progress.is-active{opacity:1}
.vsp-link-progress>span{
    display:block;
    width:0;
    height:100%;
    background:var(--vsp-link-preview-accent,#f73873);
    box-shadow:0 0 12px color-mix(in srgb,var(--vsp-link-preview-accent,#f73873) 75%,transparent);
}

.vsp-link-preview{
    position:fixed;
    z-index:2147483000;
    width:min(430px,calc(100vw - 24px));
    max-height:min(320px,calc(100vh - 24px));
    overflow:hidden;
    color:#f7f7f8;
    background:rgba(17,17,21,.98);
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(7px) scale(.985);
    transform-origin:top center;
    pointer-events:none;
    transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.vsp-link-preview[data-placement="top"]{
    transform:translateY(-7px) scale(.985);
    transform-origin:bottom center;
}
.vsp-link-preview.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    transition-delay:0s;
}
.vsp-link-preview__inner{display:grid;grid-template-columns:1fr;min-height:112px}
.vsp-link-preview.has-image .vsp-link-preview__inner{grid-template-columns:145px minmax(0,1fr)}
.vsp-link-preview__media{min-height:100%;background:#09090b;overflow:hidden}
.vsp-link-preview__media img{display:block;width:100%;height:100%;min-height:132px;object-fit:cover}
.vsp-link-preview__body{min-width:0;padding:16px 17px 15px}
.vsp-link-preview__meta{
    min-height:15px;
    margin-bottom:7px;
    color:var(--vsp-link-preview-accent,#f73873);
    font-size:11px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.vsp-link-preview__title{
    display:-webkit-box;
    overflow:hidden;
    color:#fff;
    font-size:16px;
    line-height:1.28;
    font-weight:800;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.vsp-link-preview__excerpt{
    display:-webkit-box;
    overflow:hidden;
    margin:8px 0 0;
    color:#bfc0c7;
    font-size:13px;
    line-height:1.45;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}
.vsp-link-preview__excerpt[hidden]{display:none}
.vsp-link-preview__open{
    display:block;
    margin-top:10px;
    color:#e9e9ed;
    font-size:11px;
    font-weight:700;
}
.vsp-link-preview__open:not(:empty)::after{content:'  →';color:var(--vsp-link-preview-accent,#f73873)}

.vsp-link-preview.is-loading .vsp-link-preview__body{position:relative;overflow:hidden}
.vsp-link-preview.is-loading .vsp-link-preview__body::after{
    content:'';
    position:absolute;
    inset:0;
    transform:translateX(-105%);
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.065) 48%,transparent 76%);
    animation:vsp-link-preview-shimmer 1.15s infinite;
}
.vsp-link-preview.is-loading .vsp-link-preview__meta{color:#a5a5ad}
.vsp-link-preview.is-loading .vsp-link-preview__title,
.vsp-link-preview.is-loading .vsp-link-preview__excerpt,
.vsp-link-preview.is-loading .vsp-link-preview__open{
    border-radius:5px;
    background:rgba(255,255,255,.075);
    color:transparent;
}
.vsp-link-preview.is-loading .vsp-link-preview__title{display:block;width:88%;height:18px;margin-top:9px}
.vsp-link-preview.is-loading .vsp-link-preview__excerpt{display:block;width:72%;height:12px;margin-top:11px}
.vsp-link-preview.is-loading .vsp-link-preview__open{width:35%;height:10px;margin-top:14px}
@keyframes vsp-link-preview-shimmer{to{transform:translateX(105%)}}

@media (max-width:781px),(hover:none),(pointer:coarse){
    .vsp-link-preview{display:none!important}
}
@media (prefers-reduced-motion:reduce){
    .vsp-link-preview,.vsp-link-progress,.vsp-link-progress>span{transition:none!important;animation:none!important}
}
@supports not (background:color-mix(in srgb,#fff,#000)){
    .vsp-link-progress>span{box-shadow:0 0 12px rgba(247,56,115,.7)}
}
