/* Стили перенесены из макета karkas/mockup.html */
/* Layout: светлый минимализм по референсу — белый фон, тонкие рамки, крупный светлый гротеск; страница шаблона = широкое превью слева + колонка цены и характеристик справа */
:root{
  --bg:#FFFFFF; --ink:#111111; --text:#2A2A2A; --muted:#6E6E6E; --faint:#A3A3A3;
  --line:#E7E7E7; --fill:#F4F4F4; --fill-2:#F7F7F7; --btn:#111111; --btn-ink:#FFFFFF; --star:#F5B400;
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font:400 15px/1.6 var(--f);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;color:var(--ink);font-weight:400;letter-spacing:-.025em;text-wrap:balance}
.wrap{max-width:1232px;margin:0 auto;padding-inline:16px}
.inner{max-width:none}
.cap{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- шапка ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:40px;padding-block:18px;flex-wrap:wrap}
.logo{font-size:22.56px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.nav{display:flex;gap:24px;font-size:15.5px;color:var(--ink)}
.nav a{display:inline-flex;align-items:center;gap:4px}
.nav a:hover{color:var(--muted)}
.nav svg{width:14px;height:14px}
.search{flex:1;max-width:405px;margin-inline:auto;display:flex;align-items:center;gap:10px;background:var(--fill);border-radius:999px;padding:0 20px;color:var(--faint)}
.search input{border:0;background:transparent;outline:none;padding:12px 0;width:100%;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.right{display:flex;align-items:center;gap:32px;font-size:15.5px;color:var(--ink)}
.right .lnk{display:inline-flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:13px 26px;font-size:15.5px;cursor:pointer;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);transition:background .15s,border-color .15s;white-space:nowrap}
.btn:hover{border-color:#CFCFCF;background:var(--fill-2)}
.btn.dark{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn.dark:hover{background:#2B2B2B}
.btn[disabled]{opacity:.45;cursor:default}
.me{display:flex;align-items:center;gap:10px}
.ava{width:36px;height:36px;border-radius:10px;background:var(--fill);display:grid;place-items:center;font-size:13px;font-weight:500;color:var(--ink)}

.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:15.5px;color:var(--ink);padding-block:34px 42px}
.crumbs span.s{color:var(--faint)}
.crumbs .cur{color:var(--faint)}
.crumbs a:hover{color:var(--muted)}

/* ---------- миниатюра шаблона ---------- */
.mock{container-type:inline-size;background:var(--m-bg);overflow:hidden;display:flex;flex-direction:column;width:100%;height:100%}
.m-bar{flex:none;height:max(14px,3.2cqw);background:color-mix(in srgb,var(--m-fg) 9%,var(--m-bg));display:flex;align-items:center;gap:1.1cqw;padding:0 2.2cqw}
.m-bar i{width:max(5px,1.2cqw);aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--m-fg) 28%,transparent)}
.m-bar span{flex:1;max-width:40%;height:50%;margin-left:3cqw;border-radius:99px;background:color-mix(in srgb,var(--m-fg) 7%,var(--m-bg))}
.m-page{flex:1;padding:4cqw 5cqw;display:grid;gap:4.5cqw;align-content:start;overflow:hidden}
.m-nav{display:flex;align-items:center;gap:3cqw}
.m-nav b{width:10cqw;height:2.6cqw;background:var(--m-fg);border-radius:var(--m-r)}
.m-nav span{width:6cqw;height:1.2cqw;background:color-mix(in srgb,var(--m-fg) 35%,transparent);border-radius:1cqw}
.m-nav span:first-of-type{margin-left:auto}
.m-nav em{width:11cqw;height:3.6cqw;border-radius:var(--m-r);background:var(--m-ac)}
.m-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:5cqw;align-items:center}
.m-copy{display:grid;gap:1.7cqw}
.m-h{height:4.2cqw;background:var(--m-fg);border-radius:.6cqw;width:96%}
.m-h.s{width:68%}
.m-p{height:1.3cqw;background:color-mix(in srgb,var(--m-fg) 30%,transparent);border-radius:1cqw;width:92%;margin-top:.6cqw}
.m-p.s{width:58%;margin-top:0}
.m-btn{width:20cqw;height:5cqw;background:var(--m-ac);border-radius:var(--m-r);margin-top:1.6cqw}
.m-img{aspect-ratio:4/3.3;border-radius:var(--m-r);background:radial-gradient(circle at 72% 30%,var(--m-ac) 0 16%,transparent 16.5%),linear-gradient(160deg,var(--m-soft),color-mix(in srgb,var(--m-soft) 55%,var(--m-fg)))}
.m-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw}
.m-row div{aspect-ratio:1.3;background:var(--m-soft);border-radius:var(--m-r)}
.m-center .m-hero{grid-template-columns:1fr;justify-items:center}
.m-center .m-copy{justify-items:center;width:72%}
.m-center .m-img{aspect-ratio:5/1.3;width:100%}
.m-grid .m-img{aspect-ratio:1.5}
.m-grid .m-row{grid-template-columns:repeat(4,1fr)}
.m-grid .m-row div{aspect-ratio:.78}
.m-mag .m-hero{grid-template-columns:1.6fr 1fr}
.m-mag .m-img{order:-1;aspect-ratio:1.55}
.m-mag .m-row{grid-template-columns:2fr 1fr 1fr}
@container (max-width:320px){
  .m-bar{height:9cqw}
  .m-page{gap:7cqw;padding:6cqw}
  .m-hero,.m-mag .m-hero{grid-template-columns:1fr}
  .m-img{order:-1}
  .m-center .m-img{aspect-ratio:1.4}
  .m-copy,.m-center .m-copy{width:100%}
  .m-copy{gap:3.5cqw}
  .m-row,.m-grid .m-row,.m-mag .m-row{grid-template-columns:1fr 1fr}
  .m-nav span{display:none}
  .m-nav b{width:24cqw;height:5.5cqw}
  .m-nav em{margin-left:auto;width:8cqw;height:8cqw}
  .m-h{height:8cqw}.m-p{height:2.8cqw}.m-btn{width:46cqw;height:11cqw}
}

/* ---------- каталог ---------- */
.c-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding-bottom:34px}
.c-head h1{font-size:clamp(17px,2.2vw,28px);line-height:1.2;font-weight:600}
.c-head p{margin:10px 0 0;color:var(--muted);font-size:16px}
.f{display:grid;gap:14px;padding-bottom:40px}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.frow .cap{width:110px;flex:none}
.chip{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:8px 18px;cursor:pointer;font-size:14.5px;color:var(--ink)}
.chip:hover{border-color:#CFCFCF}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.count{margin-left:auto;font-size:14px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:44px 28px;padding-bottom:90px}
.card{display:grid;gap:16px}
.thumb{position:relative;aspect-ratio:16/11;border-radius:22px;overflow:hidden;background:var(--fill)}
.thumb .mock{transition:transform .35s ease}
.card:hover .thumb .mock{transform:scale(1.025)}
.pill{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);color:#111;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:500}
.card-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.card h3{font-size:18px;line-height:1.3}
.card .by{font-size:13.5px;color:var(--faint);margin-bottom:4px}
.card .meta{font-size:14px;color:var(--muted);margin-top:4px}
.card .r{text-align:right;font-size:14px;color:var(--ink);white-space:nowrap}
.card .r small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.empty{grid-column:1/-1;padding:60px;text-align:center;color:var(--muted);background:var(--fill-2);border-radius:20px}
.stars{display:inline-flex;gap:3px;color:var(--star)}
.stars svg{width:14px;height:14px;fill:currentColor}

/* ---------- страница шаблона ---------- */
.tpl{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;padding-bottom:100px}
.media{position:relative;margin-bottom:28px}
.shot{position:relative;aspect-ratio:750/468;border-radius:30px;overflow:hidden;display:grid;place-items:center}
.frame{width:100%;height:100%;transition:width .35s,height .35s}
.frame .slide{width:100%;height:100%}
.frame .slide[hidden]{display:none}
.frame[data-dev="tablet"]{height:88%;width:auto;aspect-ratio:3/4;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.frame[data-dev="phone"]{height:88%;width:auto;aspect-ratio:9/18;border-radius:20px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.dev{position:absolute;right:16px;top:16px;display:flex;gap:2px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-radius:999px;padding:3px}
.dev button{border:0;background:transparent;border-radius:999px;padding:6px 10px;cursor:pointer;color:#555;display:grid;place-items:center}
.dev button svg{width:18px;height:18px}
.dev button:hover{background:#111;color:#fff}
.slide-cap{position:absolute;left:24px;bottom:22px;background:rgba(255,255,255,.92);color:#111;border-radius:999px;padding:6px 14px;font-size:13.5px;font-variant-numeric:tabular-nums}
.rate{position:absolute;right:30px;bottom:22px;text-align:right;color:#fff;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.rate .stars svg{width:21px;height:21px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.25))}
.rate .stars{display:flex;justify-content:flex-end;gap:9px;margin-top:4px}
.author-pic{position:absolute;left:0;bottom:-58px;width:130px;height:124px;border-radius:16px;background:var(--bg);padding:6px;box-shadow:0 8px 24px -10px rgba(0,0,0,.25)}
.author-pic div{width:100%;height:100%;border-radius:11px;background:linear-gradient(150deg,#2a2a2a,#0d0d0d);display:grid;place-items:center;color:#fff;font-size:30px;font-weight:300;letter-spacing:-.02em}
.body{padding-left:0;max-width:720px}
.by{font-size:15.5px;color:var(--faint);display:flex;gap:6px;flex-wrap:wrap;align-items:baseline}
.by b{font-weight:400;color:var(--ink)}
.by button{border:0;background:none;padding:0;margin-left:8px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:14px}
.body h1{font-size:clamp(17px,2vw,25px);line-height:1.25;margin:10px 0 22px;font-weight:600}
.body p{margin:0 0 24px;color:var(--text);font-size:16px;line-height:1.6}
.sec-cap{margin:42px 0 14px}
.acc{background:var(--fill-2);border-radius:20px;padding:10px 28px}
.acc-item+.acc-item{border-top:1px solid transparent}
.acc-btn{width:100%;border:0;background:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;cursor:pointer;text-align:left;font-size:18px;color:var(--ink)}
.acc-btn svg{width:18px;height:18px;flex:none}
.acc-body{color:var(--muted);font-size:14px;line-height:1.6;padding:0 40px 18px 0}
.acc-btn .n{color:var(--faint);font-size:14px;margin-right:12px;font-variant-numeric:tabular-nums}

.cmts{display:grid;gap:26px}
.cm{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px}
.cm.reply{margin-left:54px}
.cm .ava{width:40px;height:40px}
.cm .h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:14px;color:var(--faint)}
.cm .h b{font-weight:500;color:var(--ink);font-size:15px}
.cm .h .au{font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--ink)}
.cm p{margin:4px 0 0;font-size:15px;color:var(--text)}
.cform{display:grid;gap:12px}
textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--bg);outline:none}
textarea:focus{border-color:#BDBDBD}
.hint{font-size:14px;color:var(--muted);background:var(--fill-2);border-radius:14px;padding:16px 18px}
.hint a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.side{padding-top:0}
.side>.price-note:first-child{margin-top:0;font-size:15px}
.price{font-size:clamp(46px,5vw,60px);font-weight:300;color:var(--ink);letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:10px}
.price small{font-size:21px;font-weight:400;letter-spacing:0}
.price-note{font-size:14px;color:var(--muted);margin-top:10px}
.kpi{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 26px}
.kpi span{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:999px;padding:10px 20px 10px 16px;font-size:16px;color:var(--ink);white-space:nowrap}
.kpi svg.i{width:22px;height:22px}
.props{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15.5px}
.props li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.props li svg{margin-top:2px;color:var(--ink)}
.props b{font-weight:400;color:var(--ink)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.acts .btn{padding:16px 12px}
.quota{font-size:13.5px;color:var(--muted);margin-top:14px}
.qbar{height:4px;border-radius:9px;background:var(--fill);margin-top:8px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--ink)}
.hr{height:1px;background:var(--line);margin:38px 0 40px}
.blk{margin-bottom:36px}
.blk .cap{display:block;margin-bottom:10px}
.blk p{margin:0;font-size:16px;line-height:1.6;color:var(--text)}
.pm{display:grid;gap:10px;margin-top:12px}
.rel{display:grid;gap:14px}
.rel-item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center}
.rel-thumb{aspect-ratio:16/11;border-radius:14px;overflow:hidden;background:var(--fill)}
.rel-thumb .mock{transition:transform .3s}
.rel-item:hover .rel-thumb .mock{transform:scale(1.04)}
.rel-item b{display:block;font-weight:500;color:var(--ink);font-size:15px;line-height:1.35}
.rel-item span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}

/* ---------- подписка ---------- */
.p-head{padding-bottom:34px}
.p-head h1{font-size:clamp(17px,2.2vw,28px);line-height:1.2;font-weight:600}
.p-head p{margin:10px 0 0;color:var(--muted);font-size:16px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.plan{border:1px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:24px}
.plan.best{background:var(--fill-2);border-color:var(--fill-2)}
.plan .price{font-size:52px}
.plan .price small{font-size:20px}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;flex:1;font-size:15px}
.plan li{display:flex;gap:12px;color:var(--text)}
.plan li svg{width:18px;height:18px;margin-top:2px}
.plan .top-row{display:flex;justify-content:space-between;align-items:center}
.tag{font-size:12.5px;border:1.5px solid var(--line);border-radius:999px;padding:3px 11px;color:var(--ink);background:var(--bg)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;margin-top:80px;padding-top:40px;border-top:1px solid var(--line)}
.steps .cap{display:block;margin-bottom:10px}
.steps b{display:block;font-weight:400;color:var(--ink);font-size:19px;margin-bottom:6px}
.steps p{margin:0;color:var(--muted)}
.faq{max-width:760px;margin:80px 0 110px}
.faq h2{font-size:32px;margin-bottom:24px}
.faq-more{display:inline-block;margin-top:18px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- вопросы и ответы ---------- */
.qa{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;padding-bottom:100px;align-items:start}
.qa-head h1{font-size:clamp(17px,2.2vw,28px);font-weight:600;line-height:1.2}
.qa-head p{margin:10px 0 0;color:var(--muted);font-size:16px}
.qa-search{display:flex;align-items:center;gap:10px;background:var(--fill);border-radius:999px;padding:0 20px;color:var(--faint);margin:28px 0 18px}
.qa-search input{border:0;background:transparent;outline:none;padding:13px 0;width:100%;color:var(--ink)}
.qa-sec{margin:40px 0 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.seg.sort button{font-size:13.5px}
.qlist{display:grid}
.q{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.votes{display:grid;justify-items:center;align-content:start;gap:2px;border:1.5px solid var(--line);border-radius:16px;padding:8px 0}
.votes b{font-weight:500;color:var(--ink);font-size:17px;font-variant-numeric:tabular-nums}
.votes span{font-size:11.5px;color:var(--muted)}
.q h3{font-size:17px;font-weight:500;line-height:1.35}
.q h3 a:hover{color:var(--muted)}
.q p{margin:6px 0 0;color:var(--muted);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.q-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:12px;font-size:13.5px;color:var(--muted)}
.q-meta a{color:var(--ink)}
.ok{display:inline-flex;align-items:center;gap:6px;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:3px 11px 3px 8px;font-size:12.5px}
.ok svg{width:15px;height:15px}
.ok.solid{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.wait{color:var(--faint)}
.box{display:grid;gap:14px}
.box h3{font-size:18px;font-weight:600}
.box p{margin:0;color:var(--muted);font-size:14.5px}
.field{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.field input{border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--bg);outline:none;color:var(--ink)}
.field input:focus,textarea:focus{border-color:#BDBDBD}
.chips-sm{display:flex;flex-wrap:wrap;gap:6px}
.chips-sm .chip{padding:6px 13px;font-size:13.5px}
.side-stack{display:grid;gap:40px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.facts div{background:var(--bg)}
.facts b{display:block;font-weight:400;font-size:28px;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.facts span{font-size:13px;color:var(--muted)}
.qd h1{font-size:clamp(17px,2vw,25px);font-weight:600;line-height:1.3;margin:10px 0 14px}
.qd .q-meta{margin:0 0 24px}
.qd-body{font-size:16px;line-height:1.6;margin:0 0 8px}
.an{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:24px 0;border-top:1px solid var(--line)}
.an.best{background:var(--fill-2);border-radius:20px;border-top:0;padding:24px;margin-bottom:8px}
.an .h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--faint)}
.an .h b{font-weight:500;color:var(--ink);font-size:15px}
.an .h .au{font-size:11.5px;border:1px solid var(--line);border-radius:999px;padding:0 8px;color:var(--ink);background:var(--bg)}
.an p{margin:6px 0 0;font-size:15px;line-height:1.6}
.an code{font-size:13.5px;background:var(--fill);border-radius:6px;padding:1px 6px}
.an .act{display:flex;gap:16px;margin-top:10px;font-size:13.5px}
.an .act button{border:0;background:none;padding:0;cursor:pointer;color:var(--muted);display:inline-flex;gap:6px;align-items:center}
.an .act button:hover{color:var(--ink)}
.an .act svg{width:16px;height:16px}
.mini-list{display:grid;gap:12px;font-size:14.5px}
.mini-list a{color:var(--ink);line-height:1.4}
.mini-list a:hover{color:var(--muted)}
.mini-list span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
/* ---------- форум ---------- */
.f-search{margin:24px 0 0}
.sections{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-row{display:grid;grid-template-columns:44px minmax(0,1fr) 220px;gap:18px;align-items:center;padding:18px 0;transition:color .15s}
.sec-row:hover h3{color:var(--muted)}
.sec-row+.sec-row{border-top:1px solid var(--line)}
.sec-ic{width:44px;height:44px;border-radius:999px;background:var(--fill);display:grid;place-items:center;color:var(--ink)}
.sec-row h3{font-size:16px;font-weight:500;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sec-row p{margin:2px 0 0;color:var(--muted);font-size:14px}
.sec-stat{font-size:13px;color:var(--faint);margin-top:6px}
.last{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.last .lt{display:block;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.ava.sm{width:32px;height:32px;font-size:11.5px;border-radius:999px}
.ava.rd{border-radius:999px}
.tlist{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trow{display:grid;grid-template-columns:36px minmax(0,1fr) 74px 84px;gap:16px;align-items:center;padding:16px 0}
.trow+.trow{border-top:1px solid var(--line)}
.trow .ava{width:36px;height:36px;border-radius:999px;font-size:12px}
.trow h3{font-size:15.5px;font-weight:500;line-height:1.35}
.trow h3 a:hover{color:var(--muted)}
.trow .q-meta{margin-top:5px;font-size:13px}
.tnum{text-align:center;font-size:12px;color:var(--muted)}
.tnum b{display:block;font-weight:500;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.pin{display:inline-flex;vertical-align:-3px;margin-right:6px;color:var(--ink)}
.pin svg{width:16px;height:16px}
.sm-only{display:none}
.f-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.f-head h1{font-size:clamp(17px,2.2vw,28px);font-weight:600;line-height:1.2}
.f-head p{margin:10px 0 0;color:var(--muted);font-size:16px}
.online{display:flex;flex-wrap:wrap;gap:6px}
.online .ava{width:32px;height:32px;border-radius:999px;font-size:11.5px}
.rules{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--muted);font-size:14px}
.kv{display:grid;gap:10px;font-size:14.5px}
.kv div{display:flex;justify-content:space-between;gap:12px}
.kv span:first-child{color:var(--muted)}
.avs{display:flex;padding-left:8px}
.avs .ava{width:34px;height:34px;border-radius:999px;font-size:11.5px;margin-left:-8px;border:2px solid var(--bg)}
.th h1{font-size:clamp(17px,2vw,25px);font-weight:600;line-height:1.3;margin:10px 0 12px}
.th-act{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px}
.btn[aria-pressed="true"]{background:var(--fill);border-color:var(--fill)}
.post{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding:28px 0;border-top:1px solid var(--line)}
.post:first-of-type{margin-top:22px}
.post.new{animation:flash 1.6s ease}
@keyframes flash{from{background:var(--fill)}to{background:transparent}}
.post-au{display:grid;justify-items:start;align-content:start;gap:6px;font-size:13px;color:var(--muted)}
.post-au .ava{width:56px;height:56px;border-radius:999px;font-size:16px;margin-bottom:4px}
.post-au b{color:var(--ink);font-weight:500;font-size:15px}
.role{border:1.5px solid var(--line);border-radius:999px;padding:1px 10px;font-size:12px;color:var(--ink)}
.role.dark{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.post-h{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--faint);margin-bottom:10px}
.post-h a:hover{color:var(--ink)}
.post-body{font-size:15.5px;line-height:1.65;color:var(--text);min-width:0}
.post-body p{margin:0 0 12px}
.post-body ul{margin:0 0 12px;padding-left:20px}
.post-body blockquote{margin:0 0 12px;padding:12px 16px;background:var(--fill-2);border-radius:14px;color:var(--muted);font-size:14.5px}
.post-body blockquote b{display:block;color:var(--ink);font-weight:500;font-size:13px;margin-bottom:2px}
.post-body pre{margin:0 0 12px;background:#141414;color:#EDEDED;border-radius:14px;padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.55}
.post-body code{font-size:13.5px;background:var(--fill);border-radius:6px;padding:1px 6px}
.post-body pre code{background:none;padding:0;color:inherit}
.post-shot{max-width:440px;aspect-ratio:16/10;border-radius:18px;overflow:hidden;margin:4px 0 14px}
.post-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.post-act button{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:6px 14px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.post-act button:hover{border-color:#CFCFCF}
.post-act button svg{width:16px;height:16px}
.post-act button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.editor{border:1.5px solid var(--line);border-radius:20px;overflow:hidden;background:var(--bg)}
.tools{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tools button{border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 13px;font-size:13px;cursor:pointer;color:var(--ink)}
.tools button:hover{border-color:#CFCFCF}
.editor textarea{border:0;border-radius:0;min-height:140px;padding:16px}
.editor-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px 10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:640px){
  .sec-row{grid-template-columns:40px minmax(0,1fr);padding:16px 0}
  .sec-row .last{display:none}
  .trow{grid-template-columns:32px minmax(0,1fr);padding:14px 0}
  .trow .tnum{display:none}
  .sm-only{display:inline}
  .post{grid-template-columns:1fr;gap:14px}
  .post-au{grid-auto-flow:column;justify-content:start;align-items:center;gap:10px}
  .post-au .ava{width:40px;height:40px;margin:0}
  .post-au .cnt{display:none}
}
/* ---------- личный кабинет ---------- */
.cab{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;padding-bottom:100px;align-items:start}
.cab-nav{display:grid;gap:4px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px)}
.cab-me{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.cab-me .ava{width:56px;height:56px;border-radius:999px;font-size:17px;background:var(--btn);color:var(--btn-ink)}
.cab-me b{display:block;font-weight:600;color:var(--ink);font-size:16px}
.cab-me span{font-size:13px;color:var(--muted)}
.cab-nav a{display:flex;gap:12px;align-items:center;padding:10px 16px;border-radius:999px;color:var(--ink);font-size:15px;white-space:nowrap}
.cab-nav a:hover{background:var(--fill-2)}
.cab-nav a[aria-current="page"]{background:var(--fill)}
.cab-nav a svg{width:19px;height:19px}
.cab-nav .n{margin-left:auto;background:var(--btn);color:var(--btn-ink);border-radius:999px;font-size:12px;padding:0 8px;line-height:20px}
.cab-nav .out{color:var(--muted);margin-top:14px}
.cab h1{font-size:clamp(17px,2.2vw,28px);font-weight:600;line-height:1.2;margin-bottom:6px}
.cab-lead{color:var(--muted);margin:0 0 28px;font-size:16px}
.card-fill{background:var(--fill-2);border-radius:24px;padding:28px;display:grid;gap:16px}
.card-fill h2{font-size:22px;font-weight:600}
.card-fill p{margin:0;color:var(--muted)}
.prog{height:6px;border-radius:9px;background:var(--line);overflow:hidden}
.prog i{display:block;height:100%;background:var(--btn)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.facts.four{grid-template-columns:repeat(4,1fr);margin:34px 0 6px}
.list{border-top:1px solid var(--line)}
.li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.li .rel-thumb{border-radius:12px}
.li b{display:block;font-weight:500;color:var(--ink);font-size:15.5px}
.li span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px}
.li.nt{grid-template-columns:14px minmax(0,1fr) auto}
.dot{width:9px;height:9px;border-radius:50%;background:var(--btn)}
.dot.off{background:transparent}
.li.nt b{font-weight:400}
.li.nt.unread b{font-weight:500}
.sec-title{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:40px 0 12px}
.sec-title a{font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.tbl{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.tbl th{text-align:left;font-weight:400;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:0 12px 10px 0}
.tbl td{padding:14px 12px 14px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl td a{text-decoration:underline;text-underline-offset:3px}
.sw{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;cursor:pointer}
.sw small{display:block;color:var(--muted);font-size:13px}
.sw input{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .15s;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s}
.sw input:checked{background:var(--btn)}
.sw input:checked::after{transform:translateX(18px)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.chat{display:grid;grid-template-columns:260px minmax(0,1fr);background:var(--fill-2);border-radius:24px;overflow:hidden;min-height:480px}
.convs{border-right:1px solid var(--line);padding:10px}
.conv{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:16px;cursor:pointer;border:0;background:none;width:100%;text-align:left}
.conv:hover{background:var(--fill)}
.conv[aria-current="true"]{background:var(--bg)}
.conv .ava{width:40px;height:40px;border-radius:999px;background:var(--bg)}
.conv b{display:flex;justify-content:space-between;gap:6px;font-weight:500;color:var(--ink);font-size:14.5px}
.conv span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread{display:flex;flex-direction:column;min-width:0}
.thread-h{padding:16px 22px;border-bottom:1px solid var(--line);font-weight:500;color:var(--ink)}
.msgs{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px;overflow-y:auto;max-height:440px}
.msg{max-width:78%;padding:10px 14px;border-radius:18px;background:var(--bg);font-size:14.5px;line-height:1.5}
.msg small{display:block;font-size:11.5px;color:var(--faint);margin-top:4px}
.msg.me{margin-left:auto;background:var(--btn);color:var(--btn-ink)}
.msg.me small{color:#9A9A9A}
.send{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}
.send input{flex:1;border:0;background:var(--bg);border-radius:999px;padding:12px 18px;outline:none;color:var(--ink);min-width:0}
.saved{font-size:14px;color:var(--muted)}
.gate{max-width:560px;padding-block:20px 120px;display:grid;gap:16px}
.gate h1{font-size:28px;font-weight:600}
.gate p{margin:0;color:var(--muted);font-size:16px}
.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px 22px}
.fav-grid .card{gap:12px}
.fav-grid .btn{padding:8px 16px;font-size:14px;justify-self:start}
@media (max-width:999px){
  .cab{grid-template-columns:minmax(0,1fr);gap:28px}
  .cab-nav{position:static;grid-auto-flow:column;overflow-x:auto;justify-content:start;padding-bottom:4px}
  .cab-me,.cab-nav .out{display:none}
  .facts.four{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .li{grid-template-columns:84px minmax(0,1fr)}
  .li>.btn,.li>.ok{grid-column:2;justify-self:start}
  .form2{grid-template-columns:1fr}
  .chat{grid-template-columns:1fr}
  .convs{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto}
  .conv{min-width:200px}
}
/* ---------- блог ---------- */
.cover{position:relative;overflow:hidden;background:linear-gradient(140deg,var(--c1),var(--c2));border-radius:22px;aspect-ratio:16/10}
.cover .c-a{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:var(--c3);right:-8%;top:-14%;opacity:.9}
.cover .c-b{position:absolute;width:38%;height:30%;border-radius:18px;background:color-mix(in srgb,var(--c2) 55%,#fff);left:8%;bottom:12%;opacity:.55}
.cover.k2 .c-a{border-radius:24px;width:30%;right:10%;top:18%;transform:rotate(12deg)}
.cover.k2 .c-b{border-radius:50%;width:24%;height:auto;aspect-ratio:1;left:14%;bottom:14%}
.cover.k3 .c-a{width:120%;height:40%;border-radius:0;right:-10%;top:auto;bottom:-6%;transform:rotate(-8deg);aspect-ratio:auto}
.cover.k3 .c-b{width:20%;height:auto;aspect-ratio:1;border-radius:50%;left:auto;right:14%;bottom:auto;top:16%;opacity:.8}
.cover .c-mock{position:absolute;left:12%;right:12%;top:16%;bottom:-12%;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 24px 50px -20px rgba(0,0,0,.45)}
.cover .c-mock .mock{height:auto;aspect-ratio:16/10}
.bl-feat{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px;align-items:center;padding-bottom:44px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.bl-feat .cover{border-radius:30px}
.bl-feat h2{font-size:clamp(20px,2.4vw,30px);font-weight:600;line-height:1.2;margin:12px 0 14px}
.bl-feat p{margin:0 0 20px;color:var(--muted);font-size:16px}
.bl-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.bl-meta .ava{width:30px;height:30px;border-radius:999px;font-size:11px}
.bl-meta b{font-weight:500;color:var(--ink)}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:44px 28px;margin-top:32px}
.bl-card{display:grid;gap:14px;align-content:start}
.bl-card .cover{transition:transform .3s}
.bl-card:hover .cover{transform:translateY(-3px)}
.bl-card h3{font-size:18px;font-weight:500;line-height:1.35}
.bl-card p{margin:0;color:var(--muted);font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;margin:72px 0 100px}
.bl-sub h2{font-size:22px;font-weight:600}
.bl-sub form{display:flex;gap:10px;flex-wrap:wrap}
.bl-sub input{flex:1;min-width:200px;border:0;background:var(--bg);border-radius:999px;padding:13px 20px;outline:none;color:var(--ink)}
.art{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:72px;padding-bottom:40px;align-items:start;margin-top:32px}
.art-head{max-width:none}
.art-head h1{font-size:clamp(20px,2.6vw,32px);font-weight:600;line-height:1.22;margin:12px 0 18px}
.art-lead{font-size:18px;line-height:1.55;color:var(--muted);margin:0 0 24px}
.art-cover{margin:0 0 40px}
.art-cover .cover{border-radius:30px;aspect-ratio:16/9}
.prose{max-width:700px;font-size:17px;line-height:1.7;color:var(--text)}
.prose h2{font-size:22px;font-weight:600;line-height:1.3;margin:44px 0 14px;scroll-margin-top:110px}
.prose p{margin:0 0 18px}
.prose ul{margin:0 0 18px;padding-left:22px;display:grid;gap:6px}
.prose pre{margin:0 0 22px;background:#141414;color:#EDEDED;border-radius:18px;padding:18px 20px;overflow-x:auto;font-size:13.5px;line-height:1.6}
.prose code{font-size:14.5px;background:var(--fill);border-radius:6px;padding:1px 6px}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit}
.prose blockquote{margin:28px 0;padding:0 0 0 24px;border-left:3px solid var(--ink);font-size:21px;line-height:1.45;color:var(--ink)}
.prose blockquote cite{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:10px}
.prose .tip{background:var(--fill-2);border-radius:20px;padding:20px 24px;margin:0 0 22px;font-size:15.5px}
.prose .tip b{display:block;font-weight:600;color:var(--ink);margin-bottom:4px}
.prose figure{margin:28px 0}
.prose figure .fig{aspect-ratio:16/10;border-radius:22px;overflow:hidden}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.prose .tplrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin:6px 0 26px}
.prose .tplrow a{display:grid;gap:8px;font-size:14.5px;color:var(--ink);line-height:1.35}
.prose .tplrow .rel-thumb{border-radius:14px}
.art-foot{max-width:700px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:28px 0;margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art-foot .tags{display:flex;gap:8px;flex-wrap:wrap;margin-right:auto}
.toc{display:grid;gap:2px}
.toc button{border:0;background:none;text-align:left;padding:7px 0;cursor:pointer;font-size:14.5px;color:var(--muted);line-height:1.35}
.toc button:hover{color:var(--ink)}
.art-cm{max-width:700px}
@media (max-width:999px){.art{grid-template-columns:minmax(0,1fr);gap:40px}.bl-feat{grid-template-columns:minmax(0,1fr);gap:24px}.bl-sub{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.prose{font-size:16px}.prose blockquote{font-size:18px}.art-cover .cover{aspect-ratio:16/10;border-radius:20px}}
/* ---------- главная (дашборд сообщества) ---------- */
.hm-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:end;padding:6px 0 34px}
.hm-hero h1{font-size:clamp(24px,3.2vw,40px);font-weight:600;line-height:1.12;letter-spacing:-.03em}
.hm-hero p{margin:14px 0 0;color:var(--muted);font-size:17px;max-width:56ch}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:16px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--fill);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px var(--fill-2)}}
.hm-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tile{background:var(--fill-2);border-radius:22px;padding:18px 18px 14px;display:grid;gap:4px;align-content:start}
.tile:hover{background:var(--fill)}
.tile b{font-weight:500;font-size:30px;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.tile small{font-size:12.5px;color:var(--muted)}
.tile svg{width:100%;height:34px;margin-top:8px;overflow:visible}
.hm-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;margin-top:48px;padding-bottom:90px;align-items:start}
.chart-wrap{background:var(--fill-2);border-radius:24px;padding:22px 24px 16px}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.chart-head b{font-weight:500;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}
.chart-head span{font-size:13.5px;color:var(--muted)}
.chart{width:100%;height:auto;display:block}
.chart text{font-size:11px;fill:var(--muted);font-family:var(--f)}
.chart .grid line{stroke:var(--line)}
.chart .bar{fill:var(--ink);opacity:.82}
.chart .bar.we{opacity:.35}
.chart .bar:hover{opacity:1}
.mini-tpl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mini-tpl a{display:grid;gap:8px;font-size:14px;color:var(--ink);line-height:1.35}
.mini-tpl a span{color:var(--muted);font-size:12.5px}
.mini-tpl .rel-thumb{border-radius:14px}
.qmini{border-top:1px solid var(--line)}
.qmini a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.qmini b{font-weight:500;color:var(--ink);font-size:15px;line-height:1.35}
.qmini span{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.hm-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hm-blog .bl-card h3{font-size:16px}
.hm-blog .bl-card p{display:none}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.feed li a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.45;color:var(--muted)}
.feed .ava{width:34px;height:34px;border-radius:999px;font-size:11.5px}
.feed b{font-weight:500;color:var(--ink)}
.feed em{font-style:normal;color:var(--ink)}
.feed small{display:block;color:var(--faint);font-size:12.5px}
.lead-b{display:grid;gap:12px}
.lead-b div{display:grid;grid-template-columns:20px 34px minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14.5px}
.lead-b .rk{color:var(--faint);font-variant-numeric:tabular-nums;font-size:13px}
.lead-b .ava{width:34px;height:34px;border-radius:999px;font-size:11.5px}
.lead-b b{font-weight:500;color:var(--ink)}
.lead-b span:last-child{color:var(--muted);font-size:13px;text-align:right}
@media (max-width:1100px){.hm-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:999px){.hm-hero,.hm-grid{grid-template-columns:minmax(0,1fr)}.hm-grid{gap:44px}.mini-tpl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.tile b{font-size:24px}.hm-blog{grid-template-columns:minmax(0,1fr)}}
@media (max-width:999px){.qa{grid-template-columns:minmax(0,1fr);gap:40px}.side-stack{position:static}}
@media (max-width:640px){.q{grid-template-columns:48px minmax(0,1fr);gap:14px}.an.best{padding:18px}}

footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:14px}
footer .inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* переключатель режима макета */
.proto{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 16px;box-shadow:0 10px 30px -12px rgba(0,0,0,.2);font-size:13px;color:var(--muted)}
.seg{display:flex;background:var(--fill);border-radius:999px;padding:3px}
.seg button{border:0;background:none;border-radius:999px;padding:6px 11px;cursor:pointer;font-size:13px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* фиксированная ширина как у VK: макет 1200px, на экране 960px */
@media (min-width:1000px){body{zoom:.8}}
@media (max-width:999px){
  .top .wrap{gap:18px}
  .search{order:5;flex-basis:100%;max-width:none}
  .tpl{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .nav{display:none}
  .right{gap:14px}
  .right .hide-sm{display:none}
  .btn{padding:11px 16px}
  .body{padding-left:0}
  .author-pic{left:0;width:96px;height:92px;bottom:-46px}
  .media{margin-bottom:22px}
  .shot{border-radius:20px}
  .rate{right:16px;bottom:14px}
  .rate .stars svg{width:16px;height:16px}
  .rate .stars{gap:4px}
  .acc{padding:6px 18px}
  .acts{grid-template-columns:1fr}
  .frow .cap{width:100%}
  .cm.reply{margin-left:24px}
  .proto span{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}