@import url(style_cs.1791566387.css);

@import url(https://forumstatic.ru/files/001a/28/10/55678.css);
@import url("https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Amatic+SC:wght@400;700&family=Bad+Script&family=Climate+Crisis:YEAR@1979&family=Hachi+Maru+Pop&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&family=Poiret+One&family=Train+One&family=Unbounded:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Great+Vibes&family=Jost:ital,wght@0,100..900;1,100..900&family=PT+Sans+Narrow:wght@400;700&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap");

#pun-viewforum tc2::before {
  content: "ответов";
}
#pun-index tr.inew div.icon::before {
  opacity: 1;
}
div.icon {
  position: absolute;
  margin-left: -20px;
  background: none !important;
  border-radius: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: visible;
}
div.icon:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-0) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-0) center/contain no-repeat;
  font-family: var(--fa6);
  font-size: 13px;
  font-weight: 200;
  color: var(--body-bg);
  padding-top: -10px;
  padding-left: 10px;
}
tr.inew div.icon:before {
  color: var(--link);
}
tr.isticky div.icon:before {
  color: var(--razdelcolor);
}
tr.iclosed div.icon:before {
  color: var(--link-hover);
}
.tclcon {
  margin-left: 25px !important;
}
#tooltip {
  position: absolute;
  background-color: var(--link);
  z-index: 999;
  max-width: 200px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-family: var(--font-o);
  font-size: 12px;
  display: none;
  color: var(--white);
  text-align: center;
  padding: 4px;
  text-transform: lowercase;
}
#pun-index .tcl h3 a {
  color: var(--textcolor);
}
.online-list {
  font-size: 11px;
  font-family: var(--font-o);
}
#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4 {
  background: var(--sec-bg);
  padding: 5px 25px;
  border-radius: 23px;
}
li#onlinelist {
  margin-top: 10px;
  text-align: justify;
  flex-grow: 1;
  width: 100%;
}
.multipage {
  margin-top: 10px;
}
.linkst,
.linksb {
  position: relative;
  padding: var(--pad2);
  display: flex;
  justify-content: space-between;
  margin: 0 30px 10px;
  text-transform: lowercase;
  font-family: var(--font-o);
  font-weight: 700;
  font-size: 10px;
  color: var(--textcolor);
}
.linkst .pagelink,
.linksb .pagelink {
  text-transform: lowercase;
  font-family: var(--font-o);
  font-weight: 700;
  font-size: 10px;
  color: var(--textcolor);
}
.linkst .postlink {
  text-align: right;
}
.linksb {
  flex-wrap: wrap;
}
#pun-viewtopic .linksb,
#pun-main.main.multipage .linksb {
  position: relative;
  padding: var(--pad2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 30px 10px;
}
#pun-main.main.multipage .tcr a,
#pun-main.main.multipage .tcr .byuser {
  vertical-align: middle;
}
.linksb .pagelink {
  order: -1;
}
.subscribelink {
  width: 100%;
  text-align: right;
}
.linksb noindex {
  order: 1;
}
.linksb .postlink {
  margin-left: auto;
  text-align: right;
}
.postlink.long {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.postlink.long .new-topic {
  padding-right: 5px !important;
}
.postlink.long .new-topic,
.postlink.long .new-poll {
  background: var(--link);
  padding: 2px 5px;
  border-radius: 10px;
}
.postlink.long .new-topic:hover,
.postlink.long .new-poll:hover {
  background: var(--link-hover);
}
.postlink.long a {
  color: white;
}
.topic-users-in {
  font-family: var(--font-o);
  font-size: 11px;
}
.modmenu .container {
  padding: var(--pad3);
  text-align: right;
}
.modmenu .container strong {
  float: left;
}
.modmenu input {
  margin-left: 10px;
}
.modmenu strong {
  font-family: var(--font-o);
  font-size: 11px;
}
.modmenu strong::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-1) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-1) center/contain no-repeat;
  font-family: var(--fa6);
  padding: 0 6px 0 0;
  font-weight: 300;
}
.toppost,
.topicpost {
  margin-top: 0;
}

.permalink {
  color: var(--link);
}
.permalink::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-2) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-2) center/contain no-repeat;
  font-family: var(--fa6);
  padding: 0 5px 0 0;
  font-weight: 200;
}
.post h3 strong::before {
  content: "# ";
}
.post h3 strong {
  float: right;
  text-align: right;
  font-weight: normal;
}
.pa-author {
  font-family: var(--font-m);
  font-weight: 700;
  font-size: 25px;
  text-transform: lowercase;
  text-align: center;
  color: var(--body-bg);
}
.pa-author a {
  color: var(--body-bg);
}
.pa-fld1,
.pa-avatar,
.addflds {
  background: var(--body-bg);
}
.pa-posts,
.pa-respect,
.pa-positive {
  background: var(--body-bg);
  border-radius: 5px;
  margin-top: 5px;
}
.pa-posts,
.pa-respect,
.pa-fld2,
.pa-positive {
  font-family: var(--font-o);
  font-weight: 700;
  text-transform: lowercase;
  text-align: center;
  color: var(--textcolor);
  padding: 0 5px;
  display: inline-block;
}
.pa-posts,
.pa-respect,
.pa-positive {
  font-size: 10px;
}
.pa-posts .fld-name,
.pa-respect .fld-name,
.pa-positive .fld-name,
.pa-fld3 .fld-name,
.pa-fld4 .fld-name {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  font-size: 0;
}
.pa-posts .fld-name::before,
.pa-respect .fld-name::before,
.pa-positive .fld-name::before,
.pa-fld3 .fld-name::before,
.pa-fld4 .fld-name::before {
  font: 400 10px/8px var(--fa6);
  color: var(--textcolor);
}
.pa-respect .fld-name::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-3) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-3) center/contain no-repeat;
}
.pa-posts .fld-name::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-4) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-4) center/contain no-repeat;
}
.pa-fld3 .fld-name::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-5) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-5) center/contain no-repeat;
}
.pa-fld4 .fld-name::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-6) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-6) center/contain no-repeat;
}
.pa-positive .fld-name::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-7) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-7) center/contain no-repeat;
}
.pa-respect > a {
  position: absolute;
  margin: 0 0 0 0px;
  width: 10px;
  height: 10px;
  background-color: var(--gray);
  display: none !important;
}
.pa-respect .fld-name a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--link-hover);
}
.pa-respect img {
  display: none !important;
}
.post-links a {
  color: var(--textcolor) !important;
}
.post-links li {
  display: inline-flex;
  align-items: center;
}
.post-links li:not(:first-of-type) {
  padding-left: 10px;
}
.pl-email,
.pl-website {
  float: left;
}
.clearer {
  clear: both;
  height: 0;
  font-size: 0;
}
li.pl-email.profile::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-8) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-8) center/contain no-repeat;
  font-family: var(--fa6);
  margin-right: 6px;
  color: var(--textcolor);
}
li.pl-email.pm::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-9) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-9) center/contain no-repeat;
  font-family: var(--fa6);
  margin-right: 6px;
  color: var(--textcolor);
}
li.pl-email.email::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-9) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-9) center/contain no-repeat;
  font-family: var(--fa6);
  margin-right: 6px;
  color: var(--textcolor);
}
li.pl-delete::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-10) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-10) center/contain no-repeat;
  font-family: var(--fa6);
  margin-right: 6px;
  color: var(--textcolor);
}
li.pl-edit::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-11) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-11) center/contain no-repeat;
  font-family: var(--fa6);
  margin-right: 6px;
  color: var(--textcolor);
}
li.pl-quote::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-12) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-12) center/contain no-repeat;
  font-family: var(--fa6);
  margin-right: 6px;
  color: var(--textcolor);
}
.punbb .post-content table,
.punbb .post-content tbody,
.punbb .post-content tr,
.punbb .post-content td,
.punbb .post-content th {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.punbb .post td {
  border: 0 !important;
}
pre {
  font:
    12px/140% monaco,
    "bitstream vera sans mono",
    "courier new",
    courier,
    monospace;
}
.post-content em {
  font-style: italic;
}
.post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}
.post-content img {
  vertical-align: middle;
}
.scrollbox {
  width: 100%;
  overflow: auto;
  max-height: 200px;
}
.quote-box,
.code-box {
  margin: 15px 10px;
  padding: 15px;
  background: var(--body-bg);
  border: 1px solid var(--sec-bg);
  border-top: 1px solid var(--link);
  border-radius: 10px;
  position: relative;
}
.code-box {
  border-top-color: var(--underline);
}
.quote-box::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-12) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-12) center/contain no-repeat;
  font-family: var(--fa6);
  font-weight: 300;
  position: absolute;
  top: -14px;
  right: 5px;
  font-size: 14px;
  color: var(--link);
  line-height: 1;
  pointer-events: none;
}
.quote-box cite {
  display: block;
  padding-bottom: 7px;
  font-family: var(--font-o);
  font-weight: 600;
  font-size: 11px;
  text-transform: lowercase;
  color: var(--textcolor);
  border-bottom: 1px dashed var(--sec-bg);
}
.quote-box blockquote {
  padding: 10px 0 0 0;
  font-family: var(--font-o);
  color: var(--textcolor);
}
.code-box strong.legend {
  display: block;
  padding-bottom: 5px;
  font-family: var(--font-o);
  font-weight: bold;
  font-size: 11px;
  color: var(--link);
}
.punbb .post-content .spoiler-box > div {
  display: flex;
  align-items: center;
  padding-left: 0;
  font-family: var(--font-o);
  font-weight: bold;
  color: var(--textcolor);
  cursor: pointer;
  background: none !important;
}
.punbb .post-content .spoiler-box > div:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  mask: var(--wk-svg-13) center/contain no-repeat;
  -webkit-mask: var(--wk-svg-13) center/contain no-repeat;
  font-family: var(--fa6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  opacity: 0.9;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  flex-shrink: 0;
}
.punbb .post-content .spoiler-box > div.visible:before {
  transform: rotate(180deg);
}
.punbb .post-content .spoiler-box > div.visible {
  background: none !important;
}
.post-sig dt {
  border-bottom: 0.7px solid var(--textcolor);
  width: 300px;
  margin: 10px auto;
}
#tags {
  position: relative;
}
#tags .container {
  padding: var(--pad3) !important;
  top: 0 !important;
}
#profile {
  padding: var(--pad1);
}
#viewprofile tr {
  display: flex;
  gap: 40px;
  font-family: var(--font-o);
}
#profile .container {
  padding-left: 200px;
  min-height: 100px;
}
#profilenav {
  float: left;
  margin-left: -180px;
}
#viewprofile h2,
#profilenav h2 {
  text-align: center;
  font-family: var(--font-o);
  font-weight: 500;
  font-size: 12px;
  margin-bottom: 10px;
  background: var(--body-bg);
  color: var(--black);
  padding: 2px 3px;
  border-radius: 10px;
}
#profilenav li {
  padding: 0 0 5px;
}
#viewprofile li {
  padding: 5px 0;
}
#viewprofile td#profile-left {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  background: var(--sec-bg);
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid var(--body-bg);
}
#profile-name {
  font-size: 15px;
  font-style: italic;
}
#viewprofile td#profile-right {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: 10px;
  flex-direction: row;
}
#profile-right li {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: var(--sec-bg);
  padding: 0 5px;
  border-radius: 10px;
  border: 1px solid var(--body-bg);
}
#profile-right li span {
  flex-shrink: 0;
  text-align: center;
}
#profile-left li strong,
#profile-right li strong {
  font-weight: normal !important;
  padding-left: 0 !important;
}
img.avatardemo {
  float: right;
  margin: 0 0 8px 18px;
}
#pun-userlist .formal,
#pun-userlist .formal .container {
  margin-bottom: 0;
}
#pun-userlist .tc2 {
  text-align: left;
  width: 20%;
}
#pun-userlist .tcl {
  width: 40%;
}
.usertable .container {
}
.info .container {
  padding: var(--pad3);
}
.info .container .backlink {
  padding-top: 8px;
}
.info-box {
  margin: 0 0 10px 0;
}
.info-box * {
  padding: 0 0 5px 0;
}
.info-box .legend {
  font-weight: bold;
}
.jGrowl-notification .jGrowl-close {
  position: relative;
  right: 6px;
}
.noNull:before {
  content: "+";
  font-size: 9px;
  display: inline-block;
  margin-left: -6px;
  margin-top: 0;
  position: absolute;
}
div .post-rating p > a {
  text-align: center;
  outline: 1px solid transparent;
  font-weight: 700;
  background: var(--rating-bg) no-repeat center;
  background-size: 38px auto;
  position: relative;
  padding-left: 1px;
  z-index: 100;
  width: 38px;
  height: 38px;
  font-size: 10px !important;
  display: inline-block;
  vertical-align: middle;
  line-height: 36px;
  letter-spacing: 2px;
  color: var(--link);
}
div.post-vote {
}
div.post-vote p > a {
  font-size: 0 !important;
  position: absolute;
  cursor: pointer;
  z-index: 200;
  width: 23px;
  height: 23px;
  background: var(--vote-bg) no-repeat;
  display: block;
  background-size: 100%;
}
.punbb div.post-vote p {
  padding: var(--pad1) !important;
  margin: 0 !important;
}
.isonline {
  background-color: var(--link-hover) !important;
  width: 4px !important;
  height: 4px !important;
  margin-top: 4px !important;
}
#profile-right li,
#viewprofile td#profile-left {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0%, var(--body-bg) 50%) !important;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}
.profile-gifts,
#profile-gifts,
.pa-gifts,
#pa-gifts,
#pun-status .status-right,
.pa-invites,
.pa-reg,
.pa-time-visit,
.pa-ip {
  display: none !important;
}
#filetable {
  margin-bottom: 15px;
  border-collapse: separate;
  border-spacing: 0 10px;
}
#filetable thead tr {
  background: var(--body-bg);
}
#filetable thead th {
  padding: 12px 14px;
}
#filetable tbody tr {
  background: var(--body-bg);
  transition: 0.2s ease;
}
#filetable tbody tr:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}
#filetable tbody td,
#filetable thead th {
  padding: 12px 14px;
  vertical-align: middle;
}
#filetable thead th:first-child,
#filetable tbody td:first-child {
  border-radius: 14px 0 0 14px;
}
#filetable thead th:last-child,
#filetable tbody td:last-child {
  border-radius: 0 14px 14px 0;
}
#filetable tbody tr,
#filetable thead tr {
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.04);
}
#filetable input[type="text"] {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 6px 10px;
  transition: 0.2s ease;
}
#filetable input[type="text"]:focus {
  border-color: var(--accent);
  outline: none;
}
.post_reputation,
#Reputation,
.reputation,
.pun-modal,
.modal-window {
  position: relative;
  z-index: 99999 !important;
}
/* WELKIN / WHITE — палитра и изображения */
:root {
  --body-bg: #fff;
  --sec-bg: #f4f4f4;
  --textcolor: #303139;
  --link: #515662;
  --link-hover: #873947;
  --razdelcolor: #d8d9dc;
  --accent: #873947;
  --white: #fff;
  --gray: #777982;
  --black: #15161b;
  --underline: #ececef;
  --wk-page: #e8e9eb;
  --wk-line: #dedfe2;
  --wk-shadow: rgba(30, 32, 40, 0.08);
  --font-o: Arial, sans-serif;
  --font-m: Arial, sans-serif;
  --font-p: "Alumni Sans Pinstripe", sans-serif;
  --font-t: Georgia, serif;
  --pwidth: 190px;
  --pad1: 18px 30px;
  --wk-width: 1060px;
  --wk-hero-height: 300px;
  --wk-art-width: 660px;
  --wk-art-height: 440px;
  --wk-hero: url("https://forumstatic.ru/files/001c/8e/36/28935.png");
  --wk-halo: url("https://forumstatic.ru/files/001c/8e/36/41608.png");
  --wk-ghost-cut: polygon(
    0 0,
    59% 0,
    53% 23%,
    49% 38%,
    49% 51%,
    54% 60%,
    58% 65%,
    60% 73%,
    58% 83%,
    52% 100%,
    0 100%
  );
  --wk-solid-cut: polygon(
    59% 0,
    100% 0,
    100% 100%,
    52% 100%,
    58% 83%,
    60% 73%,
    58% 65%,
    54% 60%,
    49% 51%,
    49% 38%,
    53% 23%
  );
}
html {
  background: var(--wk-page);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: var(--textcolor);
  font: 13px/1.55 var(--font-o);
  text-transform: none;
}
body::before {
  content: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#pun {
  position: relative;
  isolation: isolate;
  width: var(--wk-width);
  max-width: calc(100% - 32px);
  margin: 145px auto 24px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
#pun-title {
  position: relative;
  width: 100%;
  height: var(--wk-hero-height);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
#pun-title > h1,
#pun-title .title-logo {
  display: none !important;
}
#html-header > .container {
  padding: 0 !important;
}
.tablica {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.wk-art {
  position: absolute;
  right: -10px;
  bottom: 0;
  width: var(--wk-art-width);
  height: var(--wk-art-height);
  pointer-events: none;
}
.wk-art-layer {
  position: absolute;
  inset: 0;
  background: var(--wk-hero) center/100% 100% no-repeat;
}
.wk-solid {
  clip-path: var(--wk-solid-cut);
}
.wk-ghost {
  clip-path: var(--wk-ghost-cut);
  opacity: 0.5;
  filter: grayscale(1);
  animation: wk-ghost 1.6s steps(2, end) infinite;
}
.wk-echo {
  clip-path: var(--wk-ghost-cut);
  opacity: 0;
  filter: grayscale(1);
  animation: wk-noise 0.48s steps(1, end) infinite;
}
#pun-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 115px;
  height: 132px;
  background: #fff;
  z-index: 0;
}
.headname {
  position: absolute;
  left: 32px;
  top: 8px;
  font: 400 62px/1 var(--font-p);
  text-transform: uppercase;
  letter-spacing: -2px;
  color: var(--textcolor);
}
.headname::after {
  content: none;
}
.headinfo {
  position: absolute;
  left: 35px;
  top: 80px;
  font: italic 11px/1.5 var(--font-o);
}
.bestquote {
  position: absolute;
  left: 32px;
  top: 132px;
  width: 340px;
  font: 11px/1.55 var(--font-o);
  pointer-events: auto;
}
.bestquote p {
  margin: 0;
}
.bestquote u {
  display: block;
  font-size: 9px;
  opacity: 0.6;
  text-decoration: none;
  margin-top: 8px;
}
.blink {
  animation: blink-animation 1.5s steps(2, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
.headspin {
  position: fixed;
  top: calc(min(140vw, 1500px) * -0.667);
  left: 50%;
  width: min(140vw, 1500px);
  height: min(140vw, 1500px);
  transform: translateX(-50%);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.headspin::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--wk-halo) center/contain no-repeat;
  filter: grayscale(1);
  animation: headspin-rotation 60s linear infinite;
}
@keyframes headspin-rotation {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wk-ghost {
  0%,
  100% {
    opacity: 0.44;
    transform: none;
  }
  30% {
    opacity: 0.38;
    transform: translateX(-1px);
  }
  60% {
    opacity: 0.5;
    transform: translateX(1px);
  }
}
@keyframes wk-noise {
  0%,
  100% {
    opacity: 0.22;
    transform: translateX(3px);
    mask-image: repeating-linear-gradient(#000 0 2px, transparent 2px 13px);
  }
  50% {
    opacity: 0.18;
    transform: translateX(-3px);
    mask-image: repeating-linear-gradient(transparent 0 8px, #000 8px 11px);
  }
}
html[data-wk-motion="off"] :is(.wk-ghost, .wk-echo, .blink),
html[data-wk-motion="off"] .headspin::before {
  animation: none !important;
}
html[data-wk-motion="off"] .wk-echo {
  opacity: 0;
}
html[data-wk-motion="off"] .blink {
  visibility: visible;
}
html.wk-page-hidden :is(.wk-ghost, .wk-echo, .blink),
html.wk-page-hidden .headspin::before {
  animation-play-state: paused;
}
.wk-controls {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  gap: 6px;
  pointer-events: auto;
  z-index: 3;
}
.wk-control {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--wk-line);
  background: var(--body-bg);
  color: var(--textcolor);
  cursor: pointer;
  border-radius: 4px;
}
.wk-control svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.wk-control[aria-pressed="false"] {
  color: var(--gray);
}
.headdimmer {
  position: relative;
}
#dim-popover {
  display: none;
  position: absolute;
  right: 0;
  top: 38px;
  width: 150px;
  padding: 12px;
  background: var(--body-bg);
  border: 1px solid var(--wk-line);
  box-shadow: 0 4px 12px var(--wk-shadow);
}
.headdimmer.active #dim-popover {
  display: block;
}
#dim-range {
  width: 100%;
  accent-color: var(--accent);
}
#dim-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
}
.wk-navdetails {
  position: absolute;
  right: 20px;
  top: 20px;
  pointer-events: auto;
  font-size: 10px;
  text-align: right;
  z-index: 4;
}
.wk-navdetails summary {
  cursor: pointer;
  list-style: none;
  letter-spacing: 1px;
}
.wk-navdetails nav {
  display: grid;
  gap: 7px;
  padding: 14px;
  background: var(--body-bg);
  border: 1px solid var(--wk-line);
  margin-top: 8px;
  text-align: left;
}
#pun-navlinks {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 30;
  background: var(--body-bg);
  border-top: 1px solid var(--wk-line);
  border-bottom: 1px solid var(--wk-line);
  backdrop-filter: none;
  font: 12px/1.4 var(--font-o);
}
#pun-navlinks .container,
#pun-navlinks > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  padding: 0 20px;
}
#pun-navlinks li {
  display: block;
  padding: 0;
  border-radius: 0;
  font: inherit;
  text-transform: none;
}
#pun-navlinks a {
  display: block;
  position: relative;
  padding: 16px 13px;
  color: var(--textcolor);
}
#pun-navlinks a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 7px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
#pun-navlinks a:hover::after,
#pun-navlinks .isactive a::after {
  transform: scaleX(1);
}
#pun-navlinks a:hover {
  color: var(--accent);
}
#pun-ulinks {
  margin: 0;
  text-align: center;
  font: 10px/1.5 var(--font-o);
  border: 0;
}
#pun-ulinks .container {
  padding: 10px 20px;
}
#pun-status {
  position: static;
  margin: 0 !important;
  padding: 10px 30px !important;
  font: 10px/1.4 var(--font-o);
  background: var(--body-bg);
}
.crumbs.container {
  text-align: left;
  font: 10px/1.5 var(--font-o);
  padding: 12px 30px !important;
}
#pun-break1,
#pun-break2,
#pun-break3,
#pun-break4 {
  display: none;
}
#pun-main {
  padding: 10px 28px 20px;
}
#pun-index .category {
  margin: 10px 0 26px;
}
#pun-index .category > .container {
  padding: 0;
}
#pun-index .category h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  height: auto;
  overflow: visible;
  margin: 0;
  padding: 14px 0;
  border: 0;
  font:
    400 16px/1.5 Georgia,
    serif;
  text-align: left;
}
#pun-index .category h2::after {
  content: "";
  height: 1px;
  background: var(--wk-line);
  flex: 1;
}
#pun-index .category h2 span:not(.categoryTool) {
  display: inline;
  transform: none;
  font: inherit;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--textcolor);
}
.categoryTool {
  margin: 0;
  font: 10px var(--font-o);
}
#pun-index tbody.hasicon {
  display: table-row-group;
  width: auto;
  padding: 0;
  border-radius: 0;
}
#pun-index .category table {
  border-collapse: collapse;
  width: 100%;
}
#pun-index .category tr {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 90px minmax(210px, 28%);
  align-items: center;
  min-height: 130px;
  border-bottom: 1px solid var(--wk-line);
}
#pun-index .category td.tcl {
  display: block;
  width: auto;
  padding: 20px 16px 20px 36px;
}
#pun-index .category td.tcr {
  position: static;
  transform: none;
  width: auto;
  margin: 0;
  padding: 12px 0 12px 18px;
  text-align: left;
  border-left: 1px solid var(--wk-line);
  font-size: 11px;
}
#pun-index .category .tc2,
#pun-index .category .tc3 {
  display: block;
  visibility: visible;
  width: auto;
  padding: 10px 4px;
  text-align: center;
  font: 11px var(--font-o);
}
#pun-index .category .tc2::after {
  content: " тем";
  color: var(--gray);
}
#pun-index .category .tc3::after {
  content: " сообщений";
  color: var(--gray);
}
#pun-index .tclcon {
  margin: 0 !important;
}
#pun-index .tcl h3 {
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
  font:
    400 21px/1.25 Georgia,
    serif;
  letter-spacing: 0;
  text-transform: none;
}
#pun-index .tcl h3 a:hover {
  letter-spacing: 0;
  color: var(--accent);
}
#pun-index .icon {
  left: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 1px solid var(--razdelcolor);
  border-radius: 50%;
}
#pun-index div.icon::before {
  content: "";
  width: 30px;
  height: 10px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--razdelcolor);
  border-radius: 50%;
  transform: rotate(-35deg);
}
#pun-index tr.inew div.icon,
#pun-index tr.inew div.icon::before {
  border-color: var(--accent);
}
#pun-index td .user-avatar {
  float: left;
  margin: 0 9px 0 0;
}
#pun-index td .avatar-image {
  outline: 0;
  filter: none;
}
.welktext,
.desktext {
  padding: 0;
  font: 12px/1.5 var(--font-o);
  color: var(--gray);
  text-transform: none;
}
.welktext::before,
.welktext::after {
  content: none;
}
.welklink a,
.desklink a {
  display: inline-block;
  padding: 3px 9px;
  margin: 6px 4px 0 0;
  border: 1px solid var(--wk-line);
  border-radius: 2px;
  background: var(--body-bg);
  font: 10px/1.4 var(--font-o);
  color: var(--textcolor) !important;
}
.welklink a:hover,
.desklink a:hover {
  background: var(--sec-bg);
  color: var(--accent) !important;
}
#pun-stats {
  margin: 0 28px 20px;
  border-top: 1px solid var(--wk-line);
  border-bottom: 1px solid var(--wk-line);
}
#pun-stats .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: flex-start;
  padding: 18px 0;
  font: 11px/1.5 var(--font-o);
  text-transform: none;
}
#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4 {
  padding: 0;
  border-radius: 0;
  background: none;
}
#onlinelist {
  margin: 0;
  width: 100%;
}
#pun-about {
  padding: 12px 28px;
  font: 11px var(--font-o);
  border: 0;
  background: var(--body-bg);
}
#html-footer {
  margin: 0 !important;
}
#html-footer .banners {
  height: auto;
  background: none;
  padding: 12px;
  border: 0;
}
.post {
  background: var(--body-bg);
  margin: 18px 0;
  padding: 0;
  border: 1px solid var(--wk-line);
  border-radius: 0;
}
.post > .container {
  display: grid;
  grid-template-columns: var(--pwidth) minmax(0, 1fr);
  gap: 20px 24px;
  align-items: start;
  padding: 20px !important;
}
.post h3 span {
  border-bottom: 1px solid var(--wk-line);
  padding: 10px 20px;
  color: var(--gray);
  font: 10px/1.5 var(--font-o);
}
.post-author {
  position: relative;
  left: auto;
  flex: 0 0 var(--pwidth);
  width: var(--pwidth);
  margin: 0;
  background: none;
  border-radius: 0;
  text-align: left;
}
.post-author ul {
  padding: 0;
}
.pa-author,
.pa-author a {
  font: 500 17px/1.4 var(--font-o);
  text-transform: uppercase;
  text-align: left;
  color: var(--textcolor);
}
.pa-title {
  display: block;
  padding: 0;
  margin: 5px 0 10px;
  max-width: 100%;
  background: none;
  text-align: left;
}
.pa-avatar {
  position: relative;
  background: none;
  padding: 0;
  margin: 0;
}
.pa-avatar img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 0 0 10px;
}
.pa-fld1 {
  margin: 0;
  padding: 8px 0;
  background: none;
}
.addflds {
  margin: 8px 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}
.pa-posts,
.pa-respect,
.pa-positive {
  display: block;
  margin: 3px 0;
  padding: 0;
  background: none;
  text-align: left;
  font-weight: 400;
}
.pa-fld3 {
  position: static;
  width: 100%;
  height: auto;
  background: none;
}
.pa-fld3 img {
  height: auto;
  max-width: 100%;
}
.post-body {
  flex: 1;
  min-width: 0;
  width: auto;
}
.post-box {
  padding: 0;
  margin: 0;
  text-transform: none;
}
.post-content {
  font:
    16px/1.6 Georgia,
    serif;
}
.post-content p {
  margin: 0 0 12px;
}
.post-content .quote-box {
  padding: 10px 16px;
  margin: 16px 0;
  border: 0;
  border-left: 2px solid var(--razdelcolor);
  background: none;
}
.post-content .code-box {
  font: 12px/1.5 monospace;
  background: var(--sec-bg);
  border: 1px solid var(--wk-line);
  border-radius: 4px;
  overflow: auto;
}
.post-content .code-box pre {
  padding: 12px;
}
.post-links {
  margin: 0;
  width: 100%;
  padding: 0 20px 12px;
}
.post-links ul {
  margin: 0;
  text-align: right;
}
.hideprofile .post-body {
  width: 100%;
}
.hideprofile .post-links {
  margin: 0;
}
.indOnline,
.indOffline {
  position: static;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 2px 7px;
  transform: none;
  border-radius: 50%;
  background: var(--accent) !important;
}
.indOffline {
  background: var(--razdelcolor) !important;
}
.indOnline::before,
.indOffline::before {
  content: none;
}
input.button,
input[type="submit"],
input[type="button"],
.formsubmit a {
  opacity: 1;
  background: var(--sec-bg);
  border: 1px solid var(--wk-line);
  border-radius: 3px;
  padding: 6px 10px;
  color: var(--textcolor);
}
input[type="text"],
input[type="password"],
textarea,
select {
  background: var(--body-bg);
  border: 1px solid var(--wk-line);
  border-radius: 3px;
  padding: 6px;
  color: var(--textcolor);
}
#main-reply {
  box-sizing: border-box;
  width: 100%;
  min-height: 180px;
}
#pun-viewforum table {
  background: var(--body-bg);
  border-radius: 0;
}
#pun-viewforum td {
  border-bottom: 1px solid var(--wk-line);
}
html:has(#pun-admain) #pun {
  margin-top: 20px;
}
html:has(#pun-admain) #pun-title,
html:has(#pun-admain) .headspin {
  display: none;
}
#pun-admain {
  min-width: 0;
}
#pun-adnav {
  position: static;
}
#pun-admain input,
#pun-admain select {
  color: var(--textcolor);
  background: var(--body-bg);
}
@media (max-width: 760px) {
  :root {
    --wk-hero-height: 300px;
    --wk-art-width: 620px;
    --wk-art-height: 413px;
    --pwidth: 150px;
  }
  #pun {
    max-width: none;
    width: 960px;
    margin-top: 145px;
  }
  body {
    min-width: 992px;
  }
  #pun-navlinks {
    position: sticky;
  }
  .headname {
    position: absolute;
    left: 32px;
    top: 8px;
    font: 400 62px/1 var(--font-p);
    text-transform: uppercase;
    letter-spacing: -2px;
    color: var(--textcolor);
  }
  .bestquote {
    position: absolute;
    left: 32px;
    top: 132px;
    width: 340px;
    font: 11px/1.55 var(--font-o);
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  html:not([data-wk-motion="on"]) :is(.wk-ghost, .wk-echo, .blink),
  html:not([data-wk-motion="on"]) .headspin::before {
    animation: none !important;
  }
  html:not([data-wk-motion="on"]) .wk-echo {
    opacity: 0;
  }
}

#pun-main,
#pun-stats,
#pun-about,
#pun-crumbs1,
#pun-crumbs2,
#pun-ulinks,
#pun-status {
  background: var(--body-bg);
}

#pun-main.multipage > h1 {
  display: block;
  position: static;
  width: auto;
  height: auto;
  margin: 10px 0 18px;
  padding: 0;
  text-align: left;
  font:
    400 28px/1.3 Georgia,
    serif;
  color: var(--textcolor);
}
/* Геометрия шапки и служебных строк */
#punwrap {
  padding-top: 0 !important;
  overflow: visible;
}
#pun {
  padding: 0 !important;
}
#pun-title {
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
#pun-title > .container {
  padding: 0 !important;
  background: none !important;
}
#wk-header {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--wk-hero-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}
#html-header {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
#html-header > .container:empty {
  display: none;
}
#pun-navlinks {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px !important;
  min-height: 48px;
  overflow: visible !important;
}
#pun-navlinks > .container {
  flex: 1;
  padding: 0 !important;
  margin: 0 !important;
}
#pun-navlinks .wk-controls {
  position: static;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0;
}
#pun-navlinks .wk-control {
  width: 28px;
  height: 28px;
}
#pun-navlinks li a {
  padding: 15px 10px;
}
#pun-ulinks,
#pun-status,
#pun-crumbs1,
#pun-crumbs2,
#pun-about,
#pun-stats {
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
#pun-ulinks > .container {
  margin: 0 !important;
  padding: 7px 28px !important;
}
#pun-status {
  padding: 0 !important;
}
#pun-status > .container {
  margin: 0 !important;
  padding: 7px 28px !important;
}
#pun-crumbs1,
#pun-crumbs2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#pun .crumbs.container {
  margin: 0 !important;
  padding: 8px 28px !important;
}
#pun-main {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}
#pun-index .category {
  margin: 0 0 14px !important;
}
#pun-index .category h2 {
  padding: 12px 0 !important;
}
#pun-announcement:has(.container:empty) {
  display: none;
}
#pun-stats {
  margin: 0 !important;
  padding: 0 28px !important;
  background: #fff;
  border: 0 !important;
}
#pun-stats > .container {
  margin: 0 !important;
  padding: 14px 0 !important;
  border-top: 1px solid var(--wk-line);
  gap: 10px 24px;
}
#pun-stats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  width: 100%;
  margin: 0;
  padding: 0;
}
#pun-stats li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}
#pun-stats #onlinelist {
  width: 100% !important;
}
#pun-about {
  margin: 0 !important;
  padding: 0 28px 14px !important;
}
#pun-about > .container {
  padding: 8px 0 !important;
  margin: 0 !important;
}
#html-footer,
#html-footer > .container {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: #fff;
}
#html-footer .banners:empty {
  display: none;
}
.wk-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: var(--wk-ghost-cut);
  mask: var(--wk-hero) center/100% 100% no-repeat;
  -webkit-mask: var(--wk-hero) center/100% 100% no-repeat;
  opacity: 0.85;
  mix-blend-mode: multiply;
  pointer-events: none;
}
html[data-wk-motion="off"] .wk-static {
  display: none;
}
#wk-scroll {
  position: fixed;
  right: 14px;
  bottom: 24px;
  display: grid;
  gap: 6px;
  z-index: 1000;
}
#wk-scroll button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #c9cbd0;
  border-radius: 5px;
  color: #454955;
  box-shadow: 0 2px 8px #0001;
  cursor: pointer;
}
#wk-scroll svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
/* Автор и действия сообщения */
#pun .post > h3 {
  padding: 0;
  margin: 0;
  border: 0;
  background: #f7f7f8;
  font-size: 11px;
}
#pun .post > h3 > span {
  display: block;
  padding: 9px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--wk-line);
}
#pun .post > .container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--pwidth) minmax(0, 1fr);
}
#pun .post-author {
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #e2e3e6;
  border-radius: 6px;
  background: linear-gradient(135deg, #f1f2f4, #fff 75%);
  overflow: visible;
}
#pun .post-author ul {
  padding: 0 !important;
}
#pun .post-author .pa-author {
  padding: 0;
  margin: 0;
  font-size: 16px;
  letter-spacing: 1px;
}
#pun .post-author .pa-title {
  margin: 5px 0 10px;
  font-size: 11px;
  color: #777b85;
}
#pun .post-author .pa-avatar img {
  width: 100%;
  max-width: 100%;
  height: auto;
  filter: none;
}
#pun .pa-posts,
#pun .pa-respect,
#pun .pa-positive {
  font:
    11px/1.7 Arial,
    sans-serif;
}
#pun .post-author .fld-name::before {
  margin-right: 5px;
}
#pun .pa-respect .fld-name a {
  background: transparent;
}
#pun .wk-presence {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 0 12px;
  font:
    10px/1.4 Arial,
    sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #727781;
}
#pun .wk-presence::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8adb6;
  box-shadow: 0 0 0 3px #a8adb618;
}
#pun .wk-presence[data-online="true"] {
  color: #496657;
}
#pun .wk-presence[data-online="true"]::before {
  background: #607e6c;
  box-shadow: 0 0 0 3px #607e6c20;
}
#pun .indOnline,
#pun .indOffline {
  display: none !important;
}
#pun .post-links {
  box-sizing: border-box;
  padding: 12px 20px !important;
  border-top: 1px solid #eee;
  margin: 0 !important;
}
#pun .post-links ul {
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
}
#pun .post-links li {
  float: none !important;
  padding: 0 !important;
  font:
    11px/1.5 Arial,
    sans-serif;
}
#pun .post-links li::before {
  margin-right: 5px;
  flex-shrink: 0;
}
#pun .post-content .spoiler-box > div::before {
  margin-right: 8px;
  transform: none;
}
#pun .post-content .spoiler-box > div.visible::before {
  transform: rotate(180deg);
}
#pun .quote-box::after {
  top: 8px;
  right: 10px;
}
#pun .quote-box cite {
  padding-right: 25px;
}
#pun .wk-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  margin: 0;
  background: #fff;
  border: 1px solid #cdd0d6;
  border-radius: 4px;
  color: #414652;
  font:
    11px/1.4 Arial,
    sans-serif;
  cursor: pointer;
}
#pun .wk-copy:hover {
  background: #e9ebee;
}
#pun .code-box > .legend {
  padding: 0 !important;
  margin: 0 0 8px !important;
}
#pun .code-box pre {
  margin: 0 !important;
  white-space: pre;
  overflow: auto;
}
#pun .post-body {
  margin-left: 0 !important;
}
#pun .hideprofile .post-author {
  display: none !important;
}

:root {
  --wk-svg-0: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203h7v7H3z%20M14%203h7v7h-7z%20M3%2014h7v7H3z%20M14%2014h7v7h-7z%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l8%204v5c0%205-8%209-8%209s-8-4-8-9V7z%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v16H4z%20M8%202v6%20M16%202v6%20M4%2010h16%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-3: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l3%206%207%201-5%205%201%207-6-3-6%203%201-7-5-5%207-1z%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-4: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%204h18v13H9l-5%204v-4H3z%20M7%208h10%20M7%2012h7%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-5: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205l6-2%206%202%206-2v16l-6%202-6-2-6%202z%20M9%203v16%20M15%205v16%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-6: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012h5l3-8%204%2016%203-8h5%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-7: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2021H3V10h5z%20M8%2010l5-7h2v7h6l-2%2011H8z%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-8: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%207a4%204%200%201%201-8%200%204%204%200%200%201%208%200%20M4%2022v-3a8%208%200%200%201%2016%200v3%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-9: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v14H3z%20M3%206l9%207%209-7%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-10: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%207h14%20M9%203h6l1%204%20M7%207l1%2014h8l1-14%20M10%2010v8%20M14%2010v8%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-11: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016L16%204l4%204L8%2020H4z%20M13%207l4%204%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-12: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h6v7H6v5H3v-7z%20M15%206h6v7h-4v5h-3v-7z%22%2F%3E%3C%2Fsvg%3E");
  --wk-svg-13: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}

#pun-title,
#wk-header {
  background: transparent !important;
}
#pun-title::after {
  content: none !important;
}
#pun .post-author .pa-avatar {
  margin-top: 10px;
}

/* В RusFF действия могут лежать внутри общего контейнера поста. */
#pun .post > .container > .post-author {
  grid-column: 1;
  grid-row: 1;
  float: none;
}
#pun .post > .container > .post-body {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  min-width: 0;
  float: none;
}
#pun .post > .container > .post-links {
  grid-column: 1 / -1;
  grid-row: 2;
  width: auto;
}
#pun .post > .container > .clearer {
  display: none;
}
#pun .post-body > .post-box {
  width: auto;
  min-width: 0;
  margin: 0;
}
#pun .post.hideprofile > .container {
  grid-template-columns: minmax(0, 1fr);
}
#pun .post.hideprofile > .container > .post-body {
  grid-column: 1;
}
/* Одна система координат шапки для главной, тем и служебных страниц. */
#pun #pun-title {
  box-sizing: border-box;
  height: var(--wk-hero-height) !important;
  min-height: var(--wk-hero-height);
  max-height: var(--wk-hero-height);
}
#pun #pun-title > :not(#wk-header):not(#pun-status) {
  display: none !important;
}
#pun #wk-header .wk-art {
  top: auto;
  bottom: 0;
}

/* Восстановление контейнеров административного меню */
html body #pun #pun-adnav > .adcontainer,
html body #pun #pun-adnav #adnav-standard,
html body #pun #pun-adnav #adnav-standard > ul {
  display: block !important;
  position: static !important;
  float: none !important;
  inset: auto !important;

  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
}

/* Основные разделы */
html body #pun #pun-adnav #adnav-standard > ul > li {
  display: block !important;
  position: static !important;
  float: none !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

html body #pun #pun-adnav #adnav-standard > ul > li > a {
  display: block !important;
  position: static !important;
  padding: 7px 10px !important;
  color: #414652 !important;
  background: #f4f5f7 !important;
  font:
    12px/1.4 Arial,
    sans-serif !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Подпункты только открытого раздела */
html body #pun #pun-adnav .adsubnav {
  display: none !important;
}

html body #pun #pun-adnav li.isactive > .adsubnav {
  display: block !important;
}

/* Две колонки админки: меню слева, формы справа */
html body #pun #pun-admain {
  display: flow-root !important;
  box-sizing: border-box !important;
  width: auto !important;
  margin: 18px 0 0 !important;
  padding: 0 0 20px 190px !important;
  overflow: visible !important;
}

html body #pun #pun-admain > #pun-adnav {
  display: block !important;
  position: relative !important;
  float: left !important;
  width: 170px !important;
  margin: 0 0 0 -190px !important;
  padding: 0 !important;
  z-index: 1;
}

/* Рабочие формы занимают только правую колонку */
html body #pun #pun-admain > .adformal {
  display: flow-root !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

/* Убрать плашку «новое» в админке */
#pun-adnav sup.new {
  display: none !important;
}

/* Статистика: четыре плашки в одну строку */
#pun #pun-stats .statscon > ul.container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0 auto !important;
  padding: 16px 0 !important;
  border: 0;
  box-sizing: border-box;
}

#pun #pun-stats .statscon > ul.container > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 13px 10px !important;
  background: #f4f5f7 !important;
  border: 1px solid var(--wk-line, #dce0e5);
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
}

#pun #pun-stats .statscon li > span {
  font: 10px/1.4 var(--font-o, Arial, sans-serif);
  color: var(--gray, #80838d);
}

#pun #pun-stats .statscon li > strong {
  font: 500 18px/1.3 var(--font-o, Arial, sans-serif);
  overflow-wrap: anywhere;
}

/* Сворачивание категорий */
#pun-index .category > h2 {
  position: relative;
  padding-right: 45px !important;
}

#pun-index .wk-category-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--wk-line, #dce0e5);
  border-radius: 4px;
  background: #f4f5f7;
  color: var(--textcolor, #414652);
  opacity: 1;
  cursor: pointer;
}

#pun-index .wk-category-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

#pun-index .wk-category-toggle[aria-expanded="false"]::before {
  transform: rotate(-45deg);
}

#pun-index .category.wk-collapsed > .container {
  display: none !important;
}

/* Крупные номера вместо прежних круглых значков */
#pun-index .category td.tcl .intd {
  position: relative;
}

#pun-index .category td.tcl .tclcon {
  margin-left: 72px !important;
}

#pun-index .category td.tcl .icon {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#pun-index .category .icon::before,
#pun-index .category .icon::after {
  content: none !important;
}

#pun-index .wk-forum-number {
  color: var(--gray, #80838d);
  font: 300 34px/1 var(--font-p, Arial, sans-serif);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

/* Кольцо и четырёхлучевые звёзды только у новых сообщений */
#pun-index .inew .wk-forum-number {
  color: var(--accent, #967b88);
}

#pun-index .inew .wk-forum-number::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.35;
  animation: wk-number-ring 3.8s ease-in-out infinite;
}

#pun-index .inew .wk-forum-number::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  width: 13px;
  height: 13px;
  background: currentColor;
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  animation: wk-number-star 4s ease-in-out infinite;
}

#pun-index .inew .wk-forum-spark {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 9px;
  height: 9px;
  background: var(--accent, #967b88);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  animation: wk-number-star 4s ease-in-out -2s infinite;
}

@keyframes wk-number-ring {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.55;
  }
}

@keyframes wk-number-star {
  0%,
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 0.65;
  }
}

/* Общая кнопка остановки и системное уменьшение движения */
html[data-wk-motion="off"] #pun-index .wk-forum-number::before,
html[data-wk-motion="off"] #pun-index .wk-forum-number::after,
html[data-wk-motion="off"] #pun-index .wk-forum-spark,
html.wk-page-hidden #pun-index .wk-forum-number::before,
html.wk-page-hidden #pun-index .wk-forum-number::after,
html.wk-page-hidden #pun-index .wk-forum-spark {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  #pun-index .wk-forum-number::before,
  #pun-index .wk-forum-number::after,
  #pun-index .wk-forum-spark {
    animation: none !important;
  }
}

/* Единая геометрия: шапка, приветствие и две строки меню. */
html body #pun #pun-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
#pun #pun-title #wk-header {
  inset: 0 !important;
  height: 100% !important;
}
#pun #pun-title::before {
  top: 115px;
  bottom: auto;
  height: 92px;
}
#pun #wk-header .headname {
  top: 39px;
}
#pun #wk-header .headinfo {
  top: 97px;
  left: 32px;
  margin: 0;
}
#pun #wk-header .bestquote {
  top: 125px;
  margin: 0;
}
#pun #wk-header .wk-navdetails {
  top: 100px;
  right: 15px;
}
#wk-header .wk-navdetails nav {
  width: 190px;
  gap: 5px;
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 8px 24px #30364314;
}
#wk-header .wk-navdetails nav a {
  display: block;
  padding: 7px 10px;
  border: 1px solid var(--wk-line);
  border-radius: 4px;
  background: #f5f6f8;
  color: var(--textcolor);
  text-decoration: none;
}
html body #pun #pun-title > #pun-status {
  display: block !important;
  position: absolute !important;
  inset: auto auto 6px 0 !important;
  z-index: 5;
  width: 45%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
}
#pun #pun-title #pun-status > .container {
  padding: 5px 24px !important;
  font: 10px/1.5 var(--font-o, Arial, sans-serif);
}
#pun #pun-title #pun-status span {
  white-space: normal;
}
#pun #wk-menu {
  position: sticky;
  top: 0;
  z-index: 80;
  margin: 0;
  padding: 0;
  background: #fff;
  border-block: 1px solid var(--wk-line);
  box-shadow: 0 3px 10px #30364308;
}
html body #pun #wk-menu #pun-navlinks,
html body #pun #wk-menu #pun-ulinks {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
#pun #wk-menu #pun-navlinks {
  min-height: 35px;
  padding: 0 12px !important;
}
#pun #wk-menu #pun-navlinks li a {
  padding: 8px 10px;
  font-size: 11px;
}
#pun #wk-menu #pun-navlinks .wk-control {
  width: 25px;
  height: 25px;
}
#pun #wk-menu #pun-navlinks a::after {
  bottom: 3px;
}
#pun #wk-menu #pun-ulinks {
  border-top: 1px solid #eceef1 !important;
}
#pun #wk-menu #pun-ulinks > .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 5px 12px !important;
  font: 10px/1.5 var(--font-o, Arial, sans-serif);
}
#pun #wk-menu #pun-ulinks li {
  float: none;
  padding: 0;
  margin: 0;
}
#pun #wk-menu #pun-ulinks a {
  padding: 0;
}
.headspin {
  --wk-halo-size: min(92vw, var(--wk-width, 1060px));
  width: var(--wk-halo-size);
  height: var(--wk-halo-size);
  top: calc(var(--wk-halo-size) * -0.667);
}
#pun #pun-main,
#pun #pun-crumbs1,
#pun #pun-crumbs2 {
  margin-block: 0 !important;
  border-block: 0 !important;
  background: #fff;
}
#pun #pun-main.multipage > h1 {
  box-sizing: border-box;
  margin: 0 0 18px;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--wk-line);
  font: 500 25px/1.35 var(--font-o, Arial, sans-serif);
  letter-spacing: 0.025em;
  text-transform: none;
  overflow-wrap: anywhere;
}
#pun #pun-stats .statscon > ul.container {
  gap: 6px;
  padding: 8px 0 !important;
}
#pun #pun-stats .statscon > ul.container > li {
  gap: 3px;
  padding: 7px 6px !important;
}
#pun #pun-stats .statscon li > span {
  font-size: 9px;
}
#pun #pun-stats .statscon li > strong {
  font-size: 14px;
}
#pun #pun-stats {
  padding-block: 8px !important;
}
#pun #pun-about {
  margin-top: 0 !important;
  padding-block: 10px !important;
}
#pun-index .category.wk-collapsed > .container {
  display: none !important;
}
#pun-index .category .wk-category-toggle {
  font-size: 0;
}
#pun-index .category .wk-category-toggle::after {
  content: none;
}
#pun-index .category td.tcl .icon {
  font-size: 0;
}
#wk-scroll button {
  touch-action: manipulation;
}
@media (max-width: 700px) {
  #pun #wk-menu #pun-navlinks {
    gap: 5px;
    padding-inline: 6px !important;
  }
  #pun #wk-menu #pun-navlinks li a {
    padding-inline: 6px;
  }
  #pun #wk-menu #pun-ulinks > .container {
    gap: 4px 9px;
  }
}
/* У исходного PNG снизу 44 пикселя прозрачного поля. Компенсация
   пропорциональна размеру рисунка и одинакова на всех страницах. */
#pun #wk-header .wk-art {
  bottom: calc(var(--wk-art-height) * -44 / 1024);
}

:root {
  --wk-person: url("https://forumstatic.ru/files/001c/8e/36/58129.png");
  --wk-shadow-art: url("https://forumstatic.ru/files/001c/8e/36/20122.png");
  --wk-glitch-cyan: #32a8b8;
  --wk-glitch-pink: #bc507f;
}

/* Отдельные слои вместо приблизительной обрезки */
#wk-header .wk-art {
  isolation: isolate;
  overflow: visible;
}

#wk-header .wk-art-layer {
  clip-path: none;
  mask: none;
  -webkit-mask: none;
}

#wk-header .wk-solid {
  z-index: 4;
  background-image: var(--wk-person);
  opacity: 1;
  filter: none;
  animation: none;
}

#wk-header .wk-ghost {
  z-index: 1;
  background-image: var(--wk-shadow-art);
  opacity: .78;
filter: grayscale(1) brightness(.35) contrast(1.25);
animation: wk-shadow-shake .8s linear infinite;
}

/* Мелкие помехи ограничены прозрачностью PNG тени */
#wk-header .wk-static {
  z-index: 2;
  clip-path: none;
  -webkit-mask: var(--wk-shadow-art) center / 100% 100% no-repeat;
  mask: var(--wk-shadow-art) center / 100% 100% no-repeat;
  opacity: .9;
  mix-blend-mode: normal;
animation: wk-shadow-shake .8s linear infinite;
}

/* Цветные фрагменты смещаются за контур тени */
#wk-header .wk-echo {
  z-index: 3;
  background: none;
  opacity: 1;
  filter: none;
  animation: none;
}

#wk-header .wk-echo::before,
#wk-header .wk-echo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--wk-shadow-art) center / 100% 100% no-repeat;
  mask: var(--wk-shadow-art) center / 100% 100% no-repeat;
  background: var(--wk-glitch-cyan);
  opacity: .65;
  animation: wk-color-slices 1.7s steps(1, end) infinite;
}

#wk-header .wk-echo::after {
  background: var(--wk-glitch-pink);
  animation-direction: reverse;
  animation-delay: -.65s;
}

@keyframes wk-shadow-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-.4px); }
  30% { transform: translateX(.5px); }
  45% { transform: translateX(-.6px); }
  60% { transform: translateX(.3px); }
  75% { transform: translateX(-.3px); }
  90% { transform: translateX(.4px); }
}

@keyframes wk-color-slices {
  0%, 100% {
    clip-path: inset(25% 0 72% 0);
    transform: translateX(-10px);
  }
  20% {
    clip-path: inset(43% 0 55% 0);
    transform: translateX(12px);
  }
  40% {
    clip-path: inset(61% 0 35% 0);
    transform: translateX(-14px);
  }
  60% {
    clip-path: inset(77% 0 20% 0);
    transform: translateX(9px);
  }
  80% {
    clip-path: inset(33% 0 65% 0);
    transform: translateX(-8px);
  }
}

/* Общая кнопка остановки */
html[data-wk-motion="off"] #wk-header .wk-ghost {
  animation: none !important;
  transform: none;
}

html[data-wk-motion="off"] #wk-header .wk-echo,
html[data-wk-motion="off"] #wk-header .wk-static {
  display: none !important;
}

/* Пауза в неактивной вкладке */
html.wk-page-hidden #wk-header .wk-ghost,
html.wk-page-hidden #wk-header .wk-static,
html.wk-page-hidden #wk-header .wk-echo::before,
html.wk-page-hidden #wk-header .wk-echo::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-wk-motion="on"]) #wk-header .wk-ghost {
    animation: none !important;
  }

  html:not([data-wk-motion="on"]) #wk-header .wk-echo,
  html:not([data-wk-motion="on"]) #wk-header .wk-static {
    display: none !important;
  }
}

/* Ссылки раскрываются вверх */
#pun #wk-header .wk-navdetails nav {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  top: auto;

  display: grid;
  grid-auto-rows: 34px;
  gap: 5px;

  width: 210px;
  max-height: 167px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px;

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: #9297a1 #f4f5f7;
}

/* Четыре плашки помещаются, остальные — прокруткой */
#pun #wk-header .wk-navdetails nav a {
  display: flex;
  align-items: center;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 10px;
  line-height: 1.2;
}

/* Закрытое меню */
#pun #wk-header .wk-navdetails:not([open]) nav {
  display: none;
}

/* Узкие плашки, четыре видны без прокрутки */
#pun #wk-header .wk-navdetails nav {
  grid-auto-rows: 28px;
  gap: 4px;
  max-height: 142px;
  padding: 8px;
}

#pun #wk-header .wk-navdetails nav a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;

  background: #f4f5f7;
  color: #414652;
  border: 1px solid #dce0e5;
  border-radius: 4px;
  text-decoration: none;
  font-size: 10px;

  box-shadow: inset 0 1px 0 #ffffff;
  transform: none;
  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

#pun #wk-header .wk-navdetails nav a:hover,
#pun #wk-header .wk-navdetails nav a:focus-visible {
  background: #383d47;
  color: #f5f6f8;
  border-color: #30343d;
  box-shadow:
    inset 0 2px 5px #00000045,
    inset 0 -1px 0 #ffffff12;
  transform: translateY(1px) scale(.985);
}

#pun #wk-header .wk-navdetails nav a:active {
  transform: translateY(2px) scale(.975);
}

@media (prefers-reduced-motion: reduce) {
  #pun #wk-header .wk-navdetails nav a {
    transition: none;
    transform: none;
  }
}

/* плашки онлайн/оффлайн */
:root {
  --wk-presence-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L15 9L23 12L15 15L12 23L9 15L1 12L9 9Z'/%3E%3C/svg%3E");
  --wk-presence-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
}

html #pun .post-author .wk-presence {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0 0 0 7px;
  padding: 0;
  vertical-align: middle;
  color: #9297a1;
}

html #pun .post-author .wk-presence::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: currentColor;
  -webkit-mask: var(--wk-presence-off) center / contain no-repeat;
  mask: var(--wk-presence-off) center / contain no-repeat;
}

html #pun .post-author .wk-presence[data-online="true"] {
  color: var(--accent, #967b88);
}

html #pun .post-author .wk-presence[data-online="true"]::before {
  -webkit-mask-image: var(--wk-presence-on);
  mask-image: var(--wk-presence-on);
}