/* VK examples follow the supplied community screenshot: full-width cover,
   overlapping avatar, identity strip, actions on the right, content below. */
.vk-mock{container-type:inline-size;background:#edeef0;color:#20252c;border-color:#d7d9dd}
.vk-mock>header{background:#fff;border-color:#dce0e5;padding:12px 16px;color:#30343b}.vk-mock>header strong{display:flex;align-items:center;gap:7px}.vk-brand-icon{font:700 9px Arial;background:#1685e9;color:white;padding:5px;border-radius:5px}.vk-page-head{background:#fff;border:1px solid #dde0e4;border-radius:6px;overflow:visible;margin:12px 12px 0}.vk-mock .vk-banner,.dialog-example .vk-mock .vk-banner{position:relative;display:block;isolation:isolate;width:100%;aspect-ratio:3;min-height:0;border-radius:5px 5px 0 0;overflow:hidden;background:var(--mock-paper)}
.vk-mock .vk-banner>.social-photo{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:3!important;z-index:-2}
.vk-mock .vk-banner:after{content:'';position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--mock-paper) 65%,transparent)}
.vk-mock .vk-banner>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;max-width:none;width:100%;padding:6% 12%;border:0;color:var(--mock-ink)}
.vk-mock .vk-banner strong,.dialog-example .vk-mock .vk-banner strong{font:400 clamp(19px,4.4cqw,40px)/1.05 Georgia,serif;overflow-wrap:normal}.vk-mock .vk-banner small{font-size:clamp(7px,1.3cqw,11px);letter-spacing:.08em}.vk-mock .vk-banner>div>span{font-size:clamp(7px,1.25cqw,11px)}
.lab-stage .vk-mock .vk-banner:after,.lab-sign .vk-mock .vk-banner:after{background:color-mix(in srgb,var(--mock-ink) 76%,transparent)}.lab-stage .vk-mock .vk-banner>div,.lab-sign .vk-mock .vk-banner>div{color:var(--mock-paper)}.lab-vitrail .vk-mock .vk-banner>div{border:0}.lab-vitrail .vk-mock .vk-banner strong{border-bottom:3px solid var(--mock-accent);padding-bottom:6px}
.vk-mock .vk-identity{position:relative;display:grid;grid-template-columns:12% minmax(0,1fr) auto;align-items:start;gap:12px;padding:15px 14px 17px;background:#fff;border-radius:0 0 5px 5px}.vk-mock .vk-identity>.social-photo{aspect-ratio:1;width:100%;border:4px solid #fff;margin-top:-45%;margin-bottom:-25%;box-shadow:0 0 0 1px #d3d6db;z-index:2}.vk-mock .vk-name{min-width:0}.vk-mock .vk-name>strong{font:600 clamp(10px,1.9cqw,16px)/1.3 Arial;color:#23272e}.vk-mock .vk-name>p{font:clamp(8px,1.2cqw,11px)/1.6 Arial;margin:5px 0 0;color:#657181}.vk-mock .vk-name>small{font-size:clamp(7px,1.1cqw,10px);color:#818893;margin-top:4px}.vk-actions{display:flex;gap:6px;align-items:center;padding-top:3px}.vk-mock .vk-action{font:600 clamp(8px,1.2cqw,11px)/1.3 Arial;padding:10px 13px;color:#fff;background:#447bba;border-radius:4px;white-space:nowrap}.vk-more{font:10px Arial;background:#eef0f3;padding:10px;border-radius:4px;color:#586372;white-space:nowrap}.vk-content-layout{padding:12px;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:10px;align-items:start}.vk-main-column{min-width:0;display:grid;gap:10px}.vk-mock .vk-channel,.vk-mock .vk-products-block,.vk-mock .vk-post,.vk-mock .vk-bio,.vk-info{background:white;border:1px solid #dde0e4;border-radius:5px;min-width:0}.vk-channel{padding:13px}.vk-channel>strong,.vk-products-block>strong,.vk-info>strong{font:600 clamp(9px,1.6cqw,13px)/1.4 Arial}.vk-channel>p{font-size:9px;line-height:1.6;margin:9px 0;color:#657181}.vk-channel>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}.vk-channel>div>span{font:9px/1.6 Arial;background:#f5f6f8;padding:9px;min-height:65px;color:#3f4650}.vk-products-block>strong{display:block;padding:13px 13px 10px}.vk-mock .vk-products{padding:0 12px 13px;gap:6px}.vk-mock .vk-products>div>span:last-child{font-size:8px;color:#59616e}.vk-info{padding:13px;display:grid;gap:12px}.vk-info>p{font:10px/1.7 Arial;margin:0;color:#657181}.vk-info>span{font:10px/1.5 Arial;color:#4377ac}.vk-mock .vk-post{padding:13px}.vk-mock .vk-post>small{font:9px Arial;color:#7b8592;margin-bottom:12px}.vk-mock .vk-post>strong{font:22px/1.15 Georgia;color:var(--mock-ink)}.vk-mock .vk-post>p{font:10px/1.7 Arial;margin:10px 0 13px;color:#404853}.vk-mock .vk-post-photos{gap:5px}.vk-mock .vk-bio{padding:13px;font-size:11px;line-height:1.8}.vk-personal .vk-content-layout{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
@media(max-width:760px){.vk-page-head{margin:8px 8px 0}.vk-mock .vk-identity{grid-template-columns:16% minmax(0,1fr);gap:9px;padding:12px 10px}.vk-mock .vk-identity>.social-photo{border-width:3px;margin-top:-45%;margin-bottom:-25%}.vk-mock .vk-name>strong{font-size:11px}.vk-mock .vk-name>p{font-size:9px}.vk-mock .vk-name>small{font-size:8px}.vk-actions{grid-column:1/-1;display:flex;padding-top:3px}.vk-mock .vk-action{flex:1;text-align:center;padding:10px;font-size:10px;grid-column:auto}.vk-more{font-size:10px}.vk-content-layout,.vk-personal .vk-content-layout{padding:8px;gap:8px;grid-template-columns:minmax(0,1fr)}.vk-info{display:none}.vk-mock .vk-banner>div{gap:5px}.vk-mock .vk-banner strong{font-size:clamp(19px,5.5cqw,30px)}.vk-mock .vk-banner small,.vk-mock .vk-banner>div>span{font-size:8px}.vk-channel{padding:12px}.vk-channel>strong,.vk-products-block>strong{font-size:11px}.vk-channel>p{font-size:10px}.vk-channel>div>span{font-size:10px}.vk-mock .vk-products>div>span:last-child{font-size:9px}.vk-mock .vk-post>strong{font-size:23px}.vk-mock .vk-post>p{font-size:11px}.dialog-example .vk-mock .vk-banner strong{font-size:clamp(22px,5.5cqw,30px)}}