@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*{font-family: Inter, sans-serif;border:none;text-decoration:none;outline:none}
*,::after,::before{box-sizing:border-box}
body{font-size:14px;color:#161D26;margin:0}
*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}

h1,h2,h3,h4,h5,h6{font-size:26px;font-weight:600;color:#161D26;margin:0}

a{color:#4b5563}
.menu a:hover,.menuBottom a:hover,.content_full a:hover{opacity:0.8}

body.modal{position:fixed;width:100%}
body.modal,body.modalSlider,#videos-wrapper{overflow:hidden}
img{border-radius:4px;max-height:400px;width:100%;object-fit:cover}
section{margin-top:70px!important}

:root{--main:#ffcc00;--hov:#F7C600}

.container {width:clamp(320px,90%,900px);margin:auto;display:flex;justify-content:space-between}
.main{width:64%}
.sidebar{width:32%}

.modal.alert,.modalSlider.alert{top:0}
.alert{position:fixed;top:60px;z-index:99;padding:4px 0;text-transform:lowercase;text-align:center;color:#fff;font-size:16px;font-weight:500;opacity:0.5;width:100%;background:#FF0033;cursor:pointer}
.infocom{width:100%;font-family:"Noto Sans",sans-serif;font-size:14px;font-weight:600;text-align:center;color:#858fad;cursor:default;padding:40px 0}

/*Анимация щапки*/
.can-animate{transition:transform 0.2s ease,visibility 0s 0.2s linear}
.is-fixed{transform:translate3d(0,-100%,0)}
.scroll-up{transform:translate3d(0,0,0)}

header{position:fixed;top:0;background:rgb(255 255 255/94%);backdrop-filter:blur(30px) saturate(180%);width:100%;box-shadow:0 0rem 0.25rem 0.25px rgba(0,0,0,.075);z-index:9}

header .container{align-items:center;height:60px}
.logo{height:100%;display:flex;align-items:center}
.menu::-webkit-scrollbar{width:0}
.m:hover{background:#F2F3F5}
.m{transition:background 0.2s ease;font-size:22px;display:flex;padding:5px;border-radius:50%;cursor:pointer}

#search{display:none;width:clamp(210px,58%,600px);padding:0 20px;border-radius:16px;background:#F3F4F6;color:#9CA3AF;text-transform:lowercase;font-size:14px;line-height:34px}

.menu{width:100%;user-select:none;display:flex;justify-content:center;overflow-x:auto;margin:auto}
.menu a{transition:opacity 0.2s ease;white-space:nowrap;padding:0 20px;font-weight:500;text-transform:uppercase;height:60px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.menu a.active{border-bottom:1px solid var(--main)}

.menuBottom,.menuCat{line-height:48px;font-weight:500;font-size:15px}
.menuBottom a,.menuCat a{margin-right:20px}
body:has(.content_full) .menuBottom,body:has(.menuCat) .menuBottom,body:has(.infocom) .menuBottom{display:none}
.menuBottom{margin:10px 0 25px}
.menuBottom h1{line-height:32px;font-size:24px}
.menuBottom p{margin:0;font-weight:400;font-size:14px;line-height:35px;color:#6b7280}

.post{border-bottom:1px solid #E5E7EB;margin-bottom:15px}
.post:has(.content_full){margin-bottom:250px}
.post h2{font-size:18px;font-weight:600;line-height:28px}
.post a:has(h2){display:block;width:93%}

.headpost{display:flex;align-items:center;gap:1.25rem}
.headpost .ya-share2{margin:0;opacity:0}
.post:hover .headpost .ya-share2{opacity:1}
.ya-share2 li::before{display:none}

.info h1{margin-bottom:15px}
.info{position:relative}
.info p,.content_full{margin-top:0;font-size:16px;line-height:26px;color:#374151;overflow:hidden}

p.c{max-height:5.2em}

.expand{
  color:#212121;width:30px;height:30px;background:#fff;border-radius:50%;
  box-shadow:0 6px 6px #0003;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:.3s;position:absolute;margin-top:-15px;
  right:50%;transform:translateX(50%);overflow:hidden;

  .arrow::after{
    width:16px;
    height:16px;
    transform:rotate(270deg)
  }

  &:hover{
    width:110px;
    border-radius:20px;

    &::after{display:none}
    &::before{font-size:15px;font-weight:500;padding-bottom:4px}
  }
}

.post:has(.c) .expand::after{transform:rotate(90deg)}
.post:has(.c) .expand:hover::before{content:'развернуть'}
.expand:hover::before{content:'свернуть'}

.post .cmnt .comm{height:58px;display:flex;align-items:center;font-weight:500}
.cmnt{display:flex;align-items:center;justify-content:space-between;min-height:10px;cursor:pointer;color:#595959}
.comm:before{margin-right:10px;content:"\24"}
.comm:empty::after{content:"Прокомментировать";font-size:15px}
.comm:before,.arrow:after{color:#858FAD;font-size:18px}

*:after,*:before,h2{transition:color 0.2s ease}


.cmnt:hover{&.comm:before,&.comm:after,&.arrow:after,a h2{color:var(--main)!important}}

.ya-share2__link.ya-share2__link_more{transform:rotate(90deg)}
.ya-share2__badge_more{transition:.2s;background:0!important}
.ya-share2:hover .ya-share2__badge_more{background:#F3F4F6 !important}
.ya-share2__container_size_m .ya-share2__badge .ya-share2__icon{background-size:20px 20px !important}
.ya-share2__container_mobile .ya-share2__badge{border-radius:5%!important}

.post a,.post a b{color:#007aff}

.content_full{
	iframe,img{width:100%;max-height:100%}
	iframe{height:324px;border:none}
	h2+.br{display:none!important}
	.br+iframe,.br+img{margin-top:8px}
	.br{display:block;margin:8px 0}
}


ol,ul{margin:0;padding:0}
b{color:#161D26;font-weight:600}
h2+.br+ol,h2+.br+ul{margin-top:10px}
li{list-style:none;position:relative;padding-left:1.2em}
li::before{background:var(--main);border-radius:8px;content:"";position:absolute;left:0;width:8px;height:8px;top:10px}

.info+.ya-share2 .ya-share2__badge,.infoot+.ya-share2 .ya-share2__badge{width:78px;transition:background 0.2s ease;text-align:center}
.info+.ya-share2,.infoot+.ya-share2,.menuCat{width:100%;overflow:scroll;scrollbar-width:none;white-space:nowrap}
.ya-share2{margin:20px 0;text-align:center;display:block}

.infoot{text-align:center;position:relative;padding:20px 0}
.infoot::after{content:"";position:absolute;top:84%;right:0;transform:translateY(-50%);width:94px;height:35px;background:url(/assets/img/cat.svg);background-repeat:no-repeat}
.infoot:before{content:"Один клик — и ты вдохновил кого-то ещё. Делись тем,что важно!";text-align:center;font-size:16px;font-weight:500}

#pb{position:fixed;top:0;left:0;height:1px;background:linear-gradient(to right,var(--main) 50%,#ffa565 100%);z-index:10;pointer-events:none;transition:opacity 4s ease}

#comm{margin:20px 0;padding-left:110px;cursor:pointer;border:1px solid rgba(172,182,191,0.2);border-radius:12px;display:flex;height:90px;font-family:Arial,sans-serif;background:url(/assets/img/tg_com.svg) no-repeat -26px center;background-size:120px;flex-direction:column;justify-content:center}
#comm::before{content:"Оставить комментарий в Telegram";font-size:clamp(16px,3vw,18px);font-weight:600;color:#212121}
#comm::after{content:"Открыть комментарии";font-size:clamp(12px,3vw,16px);font-weight:500;color:#878787}
#comm:hover::before{color:#1e90ff}

.yt.play{position:relative;cursor:pointer}
.yt.play::before{content:" ";z-index:1;background:url(/assets/img/play.svg) center center;background-repeat:no-repeat;position:absolute;width:100%;height:100%}
.yt.play:hover::before{opacity:0.8}

.yt img{height:324px;width:100%;object-fit:cover;z-index:0}

.bg img{max-height:90vh}
.bg{padding:22vh 0;position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;overflow:hidden;z-index:12;background:rgb(0 0 0/80%);overflow-y:scroll}
.bg::-webkit-scrollbar{display:none}
.mc{margin-bottom:25%;width:640px;display:flex;flex-direction:row-reverse;height:auto}
.mc iframe{background:#fff;border-radius:10px}

.md{text-align:center;padding:40px 20px;font-weight:500;font-size:15px;color:#212121}
.mt{width:100%;resize:vertical;border:2px solid #f2f2f2;background:transparent;min-height:120px;max-height:250px;color:#212121;border-radius:8px;font-size:15px}
.modal .close{top:-20vh;position:sticky;color:#ffffffa8;font-size:18px;margin:10px 0 0 10px;height:28px;background:#00000038;transition:color 0.3s ease,background 0.3s ease}
.modal .close:hover{color:#fff;background:#00000087}

.bg:has(.gallery__enlarged){overflow:hidden;align-items:center;justify-content:center;padding:0}
.bg:has(.gallery__enlarged) .close{position:absolute;right:20px;top:20px;margin:0;background:0;font-size:20px}

@font-face{font-family:'tc';src: url('fonts/tc.ttf?vyv3b8')format('truetype'),url('fonts/tc.woff?vyv3b8')format('woff'),url('fonts/tc.svg?vyv3b8#tc')format('svg');font-weight:normal;font-style:normal;font-display:block}

[class^="tc_"],[class*="tc_"]{font-family:'tc'!important;speak:never;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.comm:before,.close:before,.search:before,.lg:before,.arrow:after,.itop:before,.tg:before,.yt:before,.in:before{font-family:'tc'}
.close:before{content:"\22"}
.itop:before{content:"\27";font-size:22px;margin-right:10px;color:#F97316}

.arrow:after{content:"\25"}

.scl a:before{margin-right:8px;padding:10px;border-radius:50%}
.tg:before{content:"\30";color:#3390EC;background:#BFDBFE}
.yt:before{content:"\31";color:#FF0033;background:#FECACA}
.in:before{content:"\32";color:#DB2777;background:#FBCFE8}

.sp{display:flex;align-items:center;margin-bottom:10px;border-radius:8px;transition:background 0.2s ease;overflow:hidden}
.sp img{max-width:50px;height:50px;object-fit:cover;border-radius:8px}

.top_name{font-size:13px;margin-left:10px}

.sidebar h3{font-size:20px;line-height:28px}

.scl{margin:0 0 20px;padding:0;list-style:none}
.scl a {transition:background 0.2s ease;width:100%;padding:22px 15px;font-size:16px;font-weight:500;border-radius:8px;display:block}
.tg{background:#EFF6FF}
.scl .yt{background:#FEF2F2;margin:12px 0}
.in{background:#FDF2F8}
.tg:hover{background:#DBEAFE}

.scl .yt:hover{background:#FEE2E2}
.in:hover{background:#FCE7F3}

.scl h3{line-height:50px}

.itop{display:flex;align-items:center;margin-bottom:1rem}
.search:before{content:"\21"}
.lg:before{content:"\31";font-size:15px}
.lg{margin-right:20px}

.up.arrow::after{transform:rotate(-90deg);display:block;font-size:35px;color:#161D26}
.up{cursor:pointer;background:var(--main);border-radius:8px;position:fixed;bottom:-60px;right:5%;padding:8px;transition:bottom 0.3s ease,background-color 0.3s ease}
.up:hover{background:var(--hov)}

@media (max-width:767px){
	.ytvid,.sidebar{display:none!important}
	.main{width:100%}
	.menu{justify-content:space-between}
	.menu a{padding:0 8px}

	.logo{background:no-repeat left center url(/assets/img/ico.svg);width:46px}
	.logo svg{display:none}
	.mc{width:100%!important}
	.mc .close{position:fixed!important;right:10px!important;top:0!important}

	.menuBottom{margin:10px 0}
	.menuBottom p{line-height:25px}

	.post a img{max-height:200px}
}

@media (min-width:768px){.content_full img.vertical{display:block;width:70%;margin:0 auto}}

/* Скелет */
.s{
  img{display:block;object-fit:cover;background:#ddd;min-height:300px;animation:pulse 1.2s infinite}
  #comm{display:none}
  .infoot{width:90%;height:18px;margin:34px auto;background:#ddd}
  .infoot::before,.infoot::after,.comm::after,.comm:before,.arrow:after{content:'';background:none}
  h1,h2:empty{width:60%;margin:10px 0 5px;border-radius:4px;background:#ddd;animation:pulse 1.2s infinite}
  h1{height:20px}h2:empty{height:17px}
  p:empty{--lh:14px;--gap:8px;--color:#ddd;display:block;width:100%;height:calc(5*(var(--lh) + var(--gap)));
    background:linear-gradient(var(--color) 0 var(--lh),#0000 0),linear-gradient(var(--color) 0 var(--lh),#0000 0),linear-gradient(var(--color) 0 var(--lh),#0000 0),linear-gradient(var(--color) 0 var(--lh),#0000 0),linear-gradient(var(--color) 0 var(--lh),#0000 0);
    background-size:80% calc(var(--lh) + var(--gap)),90% calc(var(--lh) + var(--gap)),70% calc(var(--lh) + var(--gap)),85% calc(var(--lh) + var(--gap)),60% calc(var(--lh) + var(--gap));
    background-position:0 0,0 calc(var(--lh) + var(--gap)),0 calc(2*(var(--lh) + var(--gap))),0 calc(3*(var(--lh) + var(--gap))),0 calc(4*(var(--lh) + var(--gap)));
    background-repeat:no-repeat;animation:pulse 1.2s infinite}
  .comm:before{width:20px;height:20px;border-radius:50%;background:#ddd}
}

.prw{background:#ddd;min-height:300px}
.post.s{mask-image:linear-gradient(to bottom,#000,#0003);pointer-events:none;position:relative;isolation:isolate}
.ya-share2:empty[data-size]{--w:78px;--h:48px;--gap:4px;--color:#ddd;height:var(--h);margin:20px 3px;background:linear-gradient(var(--color) 0 100%,#0000 0),linear-gradient(var(--color) 0 100%,#0000 0),linear-gradient(var(--color) 0 100%,#0000 0),linear-gradient(var(--color) 0 100%,#0000 0),linear-gradient(var(--color) 0 100%,#0000 0),linear-gradient(var(--color) 0 100%,#0000 0),linear-gradient(var(--color) 0 100%,#0000 0);background-size:var(--w) var(--h);background-position:0 0,calc(var(--w) + var(--gap)) 0,calc(2*(var(--w) + var(--gap))) 0,calc(3*(var(--w) + var(--gap))) 0,calc(4*(var(--w) + var(--gap))) 0,calc(5*(var(--w) + var(--gap))) 0,calc(6*(var(--w) + var(--gap))) 0;background-repeat:no-repeat;animation:pulse 1.2s infinite
}
@keyframes pulse{50%{opacity:.5}}

.dark{
	background:#141414;color:#fff;
	.s{h1,h2,img,.infoot{background:#414141}p:empty,.ya-share2:empty[data-size]{--color:#414141}}
	header{background:#222222e0;color:#828282}
	.logo text{fill:#e1e3e6;stroke:#212121;stroke-width:4;paint-order:stroke fill}
	.m:hover{background:#3c3c3c}
	a,p,b,.content_full,input::placeholder,.comm:before,.cmnt *::after{color:#a1a1a1}
	.content_full a{color:#FFCC00}
	h1,h2,h3,h6,#comm::before{color:#e1e3e6}
	#search,.ya-share2:hover .ya-share2__badge_more{background:#414141!important}
	.post{border-bottom:1px solid #333;}
}