@import url('style_cs.1780704937.css');

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 100.01%;
  position: static;
  background:
    var(--base-bg) fixed top center/cover,
    #1a1a1a;
}

#pun-title table {
  width: 1100px;
  height: 412px;
  background: var(--head);
  margin-left: -30px;
}

#pun-about p.container {
  display: flex;
  background: var(--ftr-im);
  margin: -50px 0 -40px -30px;
  height: 140px;
  overflow: hidden;
  width: 1100px;
  justify-content: center;
  align-items: center;
}

#pun-navlinks .container,
#pun-stats h2,
#pun-title,
#pun-title .container,
#setmods dd,
#setmods dl,
.punbb #pun-main .info-box .legend,
.punbb .formal fieldset .post-box,
.punbb .info-box,
.punbb .main .container,
.punbb .main h2,
.punbb .modmenu .container,
.punbb .post .container,
.punbb .post h3,
.punbb .post h3 span,
.punbb .post-body,
.punbb .post-links,
.punbb .section .container,
.punbb legend span,
.punbb td.tc2,
.punbb td.tc3,
.punbb th,
.punbb-admin #pun-admain .adcontainer,
.punbb-admin #pun-admain legend span {
  background-color: transparent;
  color: var(--text);
  font-weight: 400;
  font-style: normal;
}

.punbb .code-box,
.punbb .quote-box {
  color: var(--text);
  background: transparent;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-sm);
  overflow: hidden;
  box-shadow: 4px 4px 20px #0000000d;
}

.punbb input,
.punbb textarea {
  color: var(--text);
  background: var(--podform);
  border: var(--ks-border-default);
  padding: 8px;
  border-radius: var(--ks-radius-xs);
}

#pun-popup_awards div,
#pun-reputation div {
  color: var(--text);
  background: var(--podform);
  border: var(--ks-border-default);
}

#pun-navlinks a,
#pun-ulinks a,
.punbb a,
.punbb a:link,
.punbb a:visited,
.punbb li.isactive a,
.punbb li.isactive a:link,
.punbb li.isactive a:visited,
.punbb-admin #pun-admain a,
.punbb-admin #pun-admain a:link,
.punbb-admin #pun-admain a:visited {
  color: var(--accent);
  text-decoration: none;
  transition:
    color 0.7s ease-in-out,
    background-color 0.7s ease-in-out,
    border-color 0.7s ease-in-out;
}

#pun-ulinks a:active,
#pun-ulinks a:focus,
.punbb a:active,
.punbb a:focus,
.punbb a:hover,
.punbb-admin #pun-admain .nodefault,
.punbb-admin #pun-admain a:active,
.punbb-admin #pun-admain a:focus,
.punbb-admin #pun-admain a:hover {
  color: var(--accent2);
  text-decoration: none;
}

#pun-ulinks a {
  font-size: 11px;
  color: var(--text);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  font-family: var(--main-font);
}

#pun-ulinks a:hover {
  color: var(--accent2);
}

#pun-navlinks a {
  color: var(--navi-link) !important;
  font: 400 20px var(--sec-font);
  letter-spacing: 0.5px;
  margin: 0 8px;
  text-transform: none;
}

#pun-navlinks a:active,
#pun-navlinks a:focus,
#pun-navlinks a:hover {
  color: var(--navi-link-hov);
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) table div.icon,
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.iclosed div.icon,
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.inew div.icon,
:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.isticky div.icon {
  margin-right: 11px;
  margin-left: 4px;
  box-sizing: border-box;
  margin-top: 0;
  width: 16px;
  height: 16px;
  background: #92938e;
  -webkit-mask: url(https://forumstatic.ru/files/001c/8d/fd/34855.svg) no-repeat
    center left/contain;
  mask: url(https://forumstatic.ru/files/001c/8d/fd/34855.svg) no-repeat center
    left/contain;
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.iclosed div.icon {
  background: var(--text);
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.isticky div.icon {
  background: var(--accent);
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) tr.inew div.icon {
  background: var(--accent2);
}

#pun-main div.catleft,
#pun-main div.catright {
  display: none;
}

#pun th,
#pun-main h2,
#pun-navlinks .container,
#pun-ulinks .container,
.post-img-Sp,
ul.post-ul-Sp {
  text-align: center;
}

.modlist {
  font-size: 95.05%;
}

#pun td .modlist,
#pun-navlinks #navawards,
#pun-stats h2 span,
.lastedit {
  display: none;
}

::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--accent);
}

::-moz-selection {
  background: var(--accent);
  color: #f3ebdf;
  text-shadow: none;
}

::selection {
  background: var(--accent);
  color: #f3ebdf;
  text-shadow: none;
}

#html-header ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

td.tcr a {
  font-size: 13px;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}

.punbb .user-avatar .avatar-image {
  opacity: 0.77;
  width: 31px;
  height: 31px;
  mix-blend-mode: luminosity;
  border-radius: var(--ks-radius-xxs);
}

.punbb .user-avatar {
  margin: 1px 10px 2px 0;
  height: 30px;
  float: left;
  position: relative;
  width: 36px;
  grid-area: avatar;
  place-self: start end;
}

.punbb .user-avatar .isonline {
  background: #6a6a6a;
  animation: none;
  width: 7px;
  height: 7px;
  z-index: 2;
}

#pun-index .tclcon a {
  display: inline-block;
  position: relative;
}

.category .container thead {
  display: none;
}

#counters a img {
  opacity: 0.4;
  transition: opacity 2s;
}

#counters a:hover img {
  opacity: 1;
}

.toast-root {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  width: min(320px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast-root .toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-width: min(220px, 100%);
  max-width: 320px;
  padding: 0.75rem 2.75rem 0.75rem 1rem;
  overflow: hidden;
  color: var(--prof-text);
  font: 400 13px/1.45 var(--main-font);
  --toast-accent: var(--accent2);
  background: var(--profile);
  border: 1px solid color-mix(in srgb, var(--prof-bord) 82%, transparent);
  border-left: 4px solid var(--toast-accent);
  border-radius: var(--ks-radius-sm);
  box-shadow: var(--shadow);
  pointer-events: auto;
  animation: toast-slide-in 0.28s ease-out;
}

.toast-root .toast__content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toast-root .toast__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  color: color-mix(in srgb, var(--prof-text) 72%, transparent);
  font: 400 1.25rem/1 var(--main-font);
  background: transparent;
  border: 0;
  border-radius: var(--ks-radius-pill);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.toast-root .toast__close:focus-visible,
.toast-root .toast__close:hover {
  color: var(--tab-text);
  background: var(--accent2);
}

.toast-root .toast__btn:focus-visible,
.toast-root .toast__close:focus-visible {
  outline: 2px solid var(--toast-accent);
  outline-offset: 2px;
}

.toast-root .toast--success {
  --toast-accent: var(--familiar);
}

.toast-root .toast--error {
  --toast-accent: var(--prof-link);
}

.toast-root .toast--warning {
  --toast-accent: var(--text-tab-accent);
}

.toast-root .toast--action {
  flex-direction: column;
  align-items: stretch;
}

.toast-root .toast--action .toast__content {
  padding-right: 1.5rem;
}

.toast-root .toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.toast-root .toast__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.35rem 0.75rem;
  color: var(--text);
  font: 600 11px/1.2 var(--main-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: var(--ks-radius-xs);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.toast-root .toast__btn:focus-visible,
.toast-root .toast__btn:hover {
  background: var(--podform);
  border-color: var(--toast-accent);
}

.toast-root .toast__btn--primary {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.toast-root .toast__btn--primary:focus-visible,
.toast-root .toast__btn--primary:hover {
  color: var(--tab-text);
  background: var(--accent);
  border-color: var(--accent);
}

@keyframes toast-slide-in {
  0% {
    transform: translateX(120%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  .toast-root {
    right: calc(0.75rem + env(safe-area-inset-right));
    bottom: calc(4.75rem + env(safe-area-inset-bottom));
    left: calc(0.75rem + env(safe-area-inset-left));
    align-items: stretch;
    width: auto;
  }

  .toast-root .toast {
    min-width: 0;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-root .toast {
    animation: none;
  }
}

#addition-area,
#color-area,
#font-area,
#image-area,
#imageattach-area,
#imageup-area,
#keyboard-area,
#size-area,
#smilies-area,
#table-area,
#video-area {
  position: absolute;
  right: 6px;
  top: 43px;
  overflow-y: auto;
  padding-top: 10px;
  background: var(--quote);
  border: var(--ks-border-default);
}

.pun-modal .modal-inner {
  width: 700px;
  max-width: 94%;
  height: auto;
  max-height: 44em;
  margin: 12% auto 0;
  position: relative;
  z-index: 120000;
  overflow: hidden;
  background: var(--base-bg2);
  border: var(--ks-border-default);
}

.dice-modal,
.dice-modal * {
  box-sizing: border-box;
}

.dice-modal {
  position: relative;
  width: 320px;
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 1.5em;
  color: var(--text);
  background: var(--podform);
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-sm);
  box-shadow: 0 2px 10px rgb(0 0 0/12%);
  font-family: var(--main-font);
}

.dice-modal h3 {
  margin-top: 0;
  padding: 0 34px;
  color: var(--accent2);
  font: 400 24px/1.15 var(--main-font);
  text-align: center;
}

.dice-modal label {
  display: block;
  gap: 7px;
  margin: 0.8em 0 0.5em;
  color: var(--sec-text);
  font: 700 11px/1.4 var(--main-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dice-modal input[type='number'] {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--podform);
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xs);
  outline: none;
  font: 600 14px/1.3 var(--main-font);
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.dice-modal input[type='number']::-webkit-inner-spin-button,
.dice-modal input[type='number']::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.dice-modal input[type='number']:focus {
  border-color: var(--accent);
}

.dice-modal input[type='number']:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

.dice-modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 1em;
  text-align: right;
}

.dice-modal button {
  min-height: 34px;
  padding: 0.5em 1em;
  cursor: pointer;
  margin-left: 0.5em;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xs);
  font: 700 11px/1.2 var(--main-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

.dice-modal button:hover {
  transform: translateY(-1px);
}

.dice-modal button:active {
  transform: translateY(0);
}

.dice-modal .modal-close:focus-visible,
.dice-modal button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}

#dice-cancel {
  color: var(--text);
  background: var(--podform);
}

#dice-cancel:hover {
  color: var(--accent2);
  border-color: var(--accent2);
}

#dice-ok {
  color: var(--tab-text);
  background: var(--accent);
  border-color: var(--accent);
}

#dice-ok:hover,
.dice-modal .modal-close:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.dice-modal .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: var(--text);
  background: var(--podform);
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-pill);
  box-shadow: 0 6px 16px rgb(0 0 0/18%);
  font: 700 18px/1 var(--main-font);
  letter-spacing: 0;
  text-transform: none;
}

.force-mobile .dice-modal {
  width: 100%;
  max-width: 340px;
  padding: 18px;
  border-radius: var(--ks-radius-lg);
}

.force-mobile .dice-modal h3 {
  margin-bottom: 16px;
  font-size: 22px;
}

.force-mobile .dice-modal .actions {
  flex-direction: column-reverse;
}

.force-mobile .dice-modal button {
  width: 100%;
}

.force-mobile .dice-modal .modal-close {
  width: 30px;
  height: 30px;
  min-height: 30px;
}

.button {
  font-family: var(--main-font);
  background-color: #4c4c4c;
  font-size: 10px;
  margin-top: 5px;
  transition:
    color 0.5s ease-in-out 0s,
    background-color 0.5s ease-in-out 0s,
    border-color 0.5s ease-in-out 0s;
  text-transform: uppercase;
  color: #ddd;
  padding: 4px 20px 5px;
  cursor: pointer;
  letter-spacing: 0;
  border: 1px solid #464646;
}

.button:hover {
  background-color: #282828;
  color: #cfccbb;
}

#MyBookmarks {
  width: 240px;
  background: var(--quote);
  border: var(--ks-border-default);
}

#BookmCntToggle.default-style {
  color: #345f6b;
}

#mask_dialog .inner {
  background: var(--quote);
  border: var(--ks-border-default);
  padding: 8px;
}

#MyBookmarks h2 {
  margin: 10px 0;
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) .tclcon a {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) .tclcon a:hover {
  color: var(--text);
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) td.tcr a {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--main-font);
  text-transform: lowercase;
  grid-area: date;
  display: inline-block;
  text-align: right;
}

:is(#pun-viewforum, #pun-messages, #pun-searchtopics) span.byuser {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--main-font);
  grid-area: byuser;
  text-align: right;
}

#tags .container {
  position: absolute;
  right: 6px;
  top: 57px;
  background: var(--quote);
  border: var(--ks-border-default);
  max-height: 255px;
  border-radius: var(--ks-radius-lg);
  overflow-y: auto;
  padding: 10px;
}

#imageupload-left input[type='button'] {
  width: auto;
  text-align: center;
}

#MyBookmarks h1,
#MyBookmarks h2 {
  position: relative;
  width: auto;
  z-index: 9999999;
  margin-left: 0;
}

#pun-stats .container a {
  color: var(--accent);
  font-weight: 600;
}

#pun-stats .container a:hover {
  color: var(--text);
  font-weight: 600;
}

#form-buttons {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  flex-direction: row;
}

#form-buttons table {
  width: 100%;
}

#form-buttons table tr {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  padding: 0;
  justify-content: space-between;
}

#form-buttons td {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 22px;
  margin: 4px 0 5px;
  padding: 10px;
  border: var(--ks-border-default);
  background: none;
  background-color: var(--podform);
}

#form-buttons td,
#form-buttons td:before {
  align-items: center;
  justify-content: center;
  border-radius: var(--ks-radius-xxs);
}

#form-buttons td:before {
  font-family:
    'Font Awesome 6 Pro',
    FontAwesome;
  font-size: 12px;
  font-weight: 600;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: none;
  transition:
    color 1s ease,
    background-color 1s ease;
  background: var(--podform);
}

#form-buttons td:hover:before {
  color: #2f3040;
}

#button-keyboard {
  display: none;
}

#button-font:before {
  content: '\f031';
}

#button-size:before {
  content: '\f894';
}

#button-bold:before {
  content: '\f032';
}

#button-italic:before {
  content: '\f033';
}

#button-underline:before {
  content: '\f0cd';
}

#button-strike:before {
  content: '\f0cc';
}

#button-left:before {
  content: '\f036';
}

#button-right:before {
  content: '\f038';
}

#button-center:before {
  content: '\f037';
}

#button-link:before {
  content: '\f0c1';
}

#button-spoiler:before {
  content: '\f518';
}

#button-image-insert:before {
  content: '\f03e';
}

#button-video:before {
  content: '\f144';
}

#button-hide:before {
  content: '\f30d';
}

#button-quote:before {
  content: '\f27a';
}

#button-indent-btn:before {
  content: '\f878';
}

#button-code:before {
  content: '\f121';
}

#button-color:before {
  content: '\f53f';
}

#button-table:before {
  content: '\f009';
}

#button-smile:before,
#button-sticker:before {
  content: '\f118';
}

#button-keyboard:before {
  content: '\f11c';
}

#button-addition:before {
  content: '\f0d7';
}

#button-image:before {
  content: '\f302';
}

#button-music:before {
  content: '\f001';
}

#button-mask:before {
  content: '\f630';
}

#button-voice:before {
  content: '\f130';
}

#button-ChangeÑase:before {
  content: '\f422';
}

#button-transL:before {
  content: '\f0ec';
}

#button-vkladka:before {
  content: '\e475';
}

#button-float:before {
  content: '\f03c';
}

#sticker-pack-button:before {
  content: '\f59a';
}

#dice-roll-btn:before {
  content: '\f522';
}

.pa-online:before {
  content: 'êîëäóåò';
}

#pun-index .tcl h3 a {
  font-weight: 400;
  z-index: 1;
}

#pun-index .tcl h3 a:hover:before {
  transform: scaleX(1);
  transform-origin: left;
  z-index: -1;
}

#pun-index .tcl h3 a:before {
  content: '';
  background: var(--bord);
  height: 13px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform 0.8s cubic-bezier(0.64, 0.51, 0.55, 1) 0s;
  transform: scaleX(0);
  transform-origin: left;
  z-index: -1;
  border-radius: var(--ks-radius-xxs);
}

.custom_tag_secondquote {
  background: #292828;
  color: var(--tab-text);
  border: 1px solid var(--sec-text);
  border-radius: var(--ks-radius-sm);
  overflow: hidden;
  display: block;
  padding: 10px 20px;
}

.gpc-open-btn {
  gap: 0;
}

#form-buttons .gpc-open-btn {
  font-size: 0;
}

.gpc-open-btn:before {
  content: '\f70e';
  font-family:
    'Font Awesome 6 Pro',
    FontAwesome;
  font-size: 11px;
  color: var(--text);
}

td#button-smile {
  display: none;
}

.indOnline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 16px;
  border-radius: var(--ks-radius-xxs);
  background: var(--accent2);
  z-index: 0;
}

.indOnline:before {
  display: block;
  position: relative;
  width: 9px;
  height: 9px;
  margin-top: 3px;
  color: var(--tab-text);
  font-family: var(--sec-font);
  font-size: 20px;
  font-style: normal;
  content: '*';
}

.indOffline,
.pa-last-visit,
.pa-online {
  display: none;
}

.banners_bottom {
  position: absolute;
  margin-top: 55px !important;
  left: 0;
  width: 100%;
  height: 33px;
  overflow: hidden;
}

.banners_bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  will-change: transform;
  opacity: 0.7;
}

html {
  padding: 0;
  width: 100%;
}

.punbb *,
html {
  margin: 0;
}

.punbb dd,
.punbb dl,
.punbb dt,
.punbb li,
.punbb ul {
  list-style: none;
}

.punbb img {
  border: none;
}

.punbb .main table {
  table-layout: fixed;
  width: 100%;
}

.checkfield input[type='checkbox'],
.radiofield input[type='radio'] {
  margin: 0 0.3em;
}

div[class='checkfield'] *,
fieldset[class='radiofield'] *,
p[class='checkfield'] * {
  height: 1.8em;
  vertical-align: middle;
}

.punbb {
  float: none;
  width: auto;
  height: auto;
  margin: 0 30px;
  font: normal 70% Verdana;
}

.punbb input,
.punbb optgroup,
.punbb select,
.punbb textarea {
  font:
    12px verdana,
    arial,
    helvetica,
    sans-serif;
  background: var(--podform);
  border: var(--ks-border-default);
  outline: none;
  accent-color: var(--text);
  color: var(--text);
}

.punbb h1,
.punbb h2,
.punbb h3,
.punbb h4,
.punbb table,
.punbb th {
  font-size: 1em;
  font-weight: 400;
}

.punbb h1 span,
.punbb legend span {
  font-size: 11px;
}

.punbb pre {
  font:
    1.1em/140% monaco,
    bitstream vera sans mono,
    courier new,
    courier,
    monospace;
}

.punbb address,
.punbb em {
  font-style: normal;
}

.punbb a {
  text-decoration: underline;
}

.punbb optgroup {
  font-weight: 700;
}

#pun:after,
.punbb .container:after,
.punbb .linksb:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .post-links ul:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
#pun-userlist .main h2,
.acchide,
.punbb .divider hr,
.punbb .formsubmit label,
.punbb .forum h2,
.punbb .modmenu label,
.punbb .multipage .topic h2,
.punbb .required label em,
.punbb .submitfield label,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

#pun {
  margin: 100px auto;
  width: 1100px;
  background: var(--base-bg2) repeat-y;
  position: relative;
}

#pun-maint,
#pun-redirect {
  margin: 50px 20% 12px;
  width: auto;
  float: none;
  min-height: 100px;
}

#pun-redirect {
  border: 0;
  margin: 0;
  padding: 0;
  inset: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  background: var(--base-bg) fixed top center/cover;
}

#pun-redirect * {
  border: 0;
}

#pun-redirect .main-title {
  display: none;
}

#pun-redirect.punbb .info .container {
  text-align: center;
  display: block;
  font-size: 13px;
  font-family: var(--main-font);
  padding: 30px 0;
  height: auto;
  border: 0;
  text-transform: lowercase;
  width: 900px;
  font-weight: 500;
  margin: 120px auto 5%;
  color: var(--text);
}

.punbb .main,
.punbb .section {
  margin-bottom: 1em;
}

.punbb .category,
.punbb .post {
  margin-top: 0.4em;
}

.punbb #pun-category1,
.punbb .topicpost,
.punbb .toppost {
  margin-top: 0;
}

#pun-post .topic {
  margin-top: 1em;
}

.punbb .category,
.punbb .container,
.punbb .formal,
.punbb .forum,
.punbb .info,
.punbb .modmenu,
.punbb .post,
.punbb .section {
  border-style: none;
  border-width: 0;
}

#pun-debug h2,
#pun-main h1,
#pun-main h2,
.punbb .section h2 {
  font-family: var(--main-font);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
  text-align: center;
  width: auto;
  letter-spacing: 0.6px;
  text-transform: lowercase;
  margin: -20px 0 20px;
}

#pun-main h1 {
  display: none;
}

.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: justify;
}

.punbb .post-content em {
  font-style: italic;
}

.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}

.post-content hr {
  opacity: 0.5;
  margin: 0.8em 0;
}

.punbb .post-content a {
  font-weight: 700;
  color: var(--accent);
}

.punbb .post-content a:hover {
  font-weight: 700;
  color: var(--text);
}

.punbb .post-sig dt {
  display: block;
  text-align: center;
  border-top: 1px dotted #707070;
  width: auto;
  margin: 20px 50px;
}

.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em !important;
  line-height: 150% !important;
  overflow-wrap: break-word;
}

.punbb .post-content img {
  vertical-align: text-bottom;
}

.punbb .post-content img.postimg {
  vertical-align: middle;
}

.punbb .post-content .blockcode,
.punbb .post-content blockquote {
  width: 100%;
}

.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
}

.punbb .post-content .code-box,
.punbb .post-content .quote-box {
  margin: 1em 0;
  padding: 0;
}

#pun.punbb .post-content .html-post-box,
.punbb .post-content .html-post-box {
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

#pun.punbb .post-content .html-content,
#pun.punbb .post-content .html-inner,
#pun.punbb .post-content iframe.html_frame,
.punbb .post-content .html-content,
.punbb .post-content .html-inner,
.punbb .post-content iframe.html_frame {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0;
  box-shadow: none !important;
}

#pun.punbb .post-content iframe.html_frame,
.punbb .post-content iframe.html_frame {
  display: block;
  border: 0;
  color-scheme: normal;
}

body.post-content,
html.punbb,
html.punbb:root,
html.punbb > body.post-content {
  min-height: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.punbb > body.post-content {
  display: block !important;
}

body.post-content:after,
body.post-content:before,
html.punbb > body.post-content:after,
html.punbb > body.post-content:before {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

body.post-content > iframe[name='iframe_test_height'],
html.punbb iframe[name='iframe_test_height'] {
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  pointer-events: none !important;
}

.post-content td {
  border-width: 1px;
  border-style: solid;
  padding: 0.4em 0.5em;
  overflow: hidden;
  text-align: left;
  font-size: 0.8em;
}

.punbb .code-box strong.legend,
.punbb .quote-box cite {
  text-align: left;
  font-size: 13px;
  font-weight: 400;
  font-family: var(--main-font);
  margin-bottom: 8px;
  width: auto;
  text-transform: none;
  font-style: normal;
  letter-spacing: 0;
  display: flex;
  gap: 4px;
  margin-left: 0;
  color: var(--text);
  background: var(--quote);
  padding: 7px 20px;
  border-bottom: 1px solid var(--bord);
}

.punbb .info-box {
  padding: 1.1em 1.7em 1em;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 1.1em;
}

.punbb .info-box * {
  padding: 0 0 0.7em;
}

.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: 700;
}

.punbb .linkst {
  font-size: 10px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 5px;
  position: relative;
  padding: 0;
}

.multipage {
  margin-top: 1em;
}

.linkst .postlink {
  text-align: right;
}

.punbb .linksb {
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: none;
  margin-top: 10px;
}

.linksb .pagelink {
  float: left;
  width: auto;
  text-align: left;
}

.pagelink a {
  padding: 0 3px;
}

.linksb .postlink {
  float: right;
  width: auto;
}

.subscribelink {
  clear: both;
  display: flex;
  float: right;
  background: var(--quote);
  padding: 5px 15px 6px;
  border-radius: var(--ks-radius-xxs);
}

.punbb .formal .container {
  padding: 0 2.3em 1.1em;
}

.punbb .formsubmit {
  margin: 1em 0 0;
  padding: 0 0 0 1.7em;
}

.punbb .formsubmit a,
.punbb .formsubmit input,
.punbb .formsubmit span {
  margin: 0 0.6em 0 0;
}

.punbb fieldset {
  border-style: solid;
  border-width: 1px;
  padding: 0 18px;
  margin: 0 0 1em;
}

.punbb fieldset legend,
.punbb fieldset legend span {
  padding: 0;
  margin: 0;
  font-size: 0;
}

.punbb fieldset legend span {
  font-family: var(--main-font);
  text-transform: uppercase;
}

.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px;
}

.punbb .fs-box {
  padding: 1em 0 0.8em;
}

.punbb .fs-box fieldset,
.punbb .fs-box p {
  padding: 0 0 0.8em;
}

.punbb .inline .inputfield,
.punbb .inline .passfield,
.punbb .inline .selectfield {
  float: left;
  margin-right: 1em;
}

.punbb .inline .infofield {
  clear: both;
}

.punbb .datafield br {
  display: none;
}

.punbb .datafield span.input,
.punbb .required label {
  font-weight: 700;
  font-family: var(--main-font);
  margin-bottom: 0;
  display: inline-flex;
  text-transform: uppercase;
}

.punbb .datafield span.input a {
  font-weight: 400;
}

.punbb .areafield span.input,
.punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%;
}

.punbb .longinput input,
.punbb textarea {
  width: 64%;
  margin: 0;
}

.punbb .hashelp {
  position: relative;
}

.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: 400;
  width: 36%;
}

.punbb #profile .helplinks {
  top: 1.5em;
}

.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
}

#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
}

.punbb .main .tcl {
  text-align: left;
  width: 45%;
  border-left-style: none;
  border-left-width: 0;
}

#pun-viewforum .tc2,
#pun-viewforum .tc3,
#pun-viewforum .tcmod {
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: lowercase;
  width: 8%;
}

.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  display: grid;
  grid-template: 'byuser avatar' auto 'date avatar' auto/1fr auto;
  gap: 2px 10px;
  align-items: start;
}

#pun-index .tcr {
  width: 35%;
  position: relative;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--main-font);
  display: flex;
  letter-spacing: 0;
  align-items: center;
}

div#pun-profile .tcr {
  width: 90%;
}

#pun-modviewforum .main .tcl,
#pun-searchtopics .main .tcl,
#pun-userlist .main .tcl {
  background-color: transparent;
  width: 40%;
  text-transform: lowercase;
}

#pun-searchtopics .main .tc2,
#pun-userlist .main .tc2 {
  background-color: transparent;
  text-align: center;
  width: 30%;
}

#pun-debug table .tcl {
  width: 15%;
}

#pun-debug .tcr,
#pun-debug table .tcl {
  background-color: transparent;
  white-space: normal;
}

#pun-debug .tcr {
  width: 90%;
}

#pun-index .tcl h3 {
  font-family: var(--sec-font);
  font-size: 20px;
  text-align: left;
  height: auto;
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
  line-height: 21px;
}

#pun-index .tcl {
  width: 70%;
  position: relative;
  overflow: visible;
}

.punbb td span.youposted {
  font-weight: 700;
  margin-left: -1em;
  position: absolute;
}

.punbb td .modlist {
  display: block;
  padding-top: 0.3em;
}

.punbb .main td {
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 10px 0;
}

.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1.5em;
}

* html .tclcon {
  height: 1px;
}

#pun-index td div.tclcon {
  text-align: justify;
  position: relative;
  font-family: var(--main-font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.punbb div.icon {
  float: left;
  display: block;
}

#pun-messages .main .tc2 {
  text-align: center;
}

#pun-navlinks,
#pun-title {
  border-color: #202021;
}

#pun-debug h2,
.post-links,
.post-links ul,
.punbb .container,
.punbb .main h1,
.punbb .main h2,
.punbb .post .post-body,
.punbb .post-body,
.punbb fieldset,
.punbb td,
.punbb th,
.punbb-admin #pun-admain h2,
.usertable table {
  border-color: transparent;
}

.punbb th {
  font-size: 0;
}

#pun-announcement h2,
#pun-announcement h2 span,
#pun-help .formal .info-box h3.legend,
#pun-help .formal .info-box h3.legend span,
#pun-ulinks li,
#pun-ulinks li a,
.punbb .divider,
li#onlinelist,
li#onlinelist div {
  border-color: transparent;
}

.punbb .formal fieldset .post-box,
.punbb .info-box {
  border: var(--ks-border-transparent);
}

#pun-viewtopic .post h3 {
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}

.post h3 span strong:before {
  content: '#';
}

.punbb .post h3 span {
  display: flex;
  font: 400 12px var(--main-font);
  height: auto;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
  gap: 5px;
  text-transform: uppercase;
}

.punbb .post h3 strong {
  width: auto;
  order: 2;
  font-size: 14px;
  font-family: var(--sec-font);
  color: var(--text);
  font-weight: 400;
}

.punbb .post-body {
  margin-left: 250px;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px;
}

.punbb .post-box {
  padding: 10px 10px 15px;
}

.punbb fieldset .post-box {
  margin-bottom: 0.8em;
}

.punbb .post-links ul {
  padding: 0;
  text-align: right;
  font-size: 11px;
  font-family: var(--main-font);
  font-weight: 400;
  text-transform: lowercase;
  margin: 0 20px 0 5px;
}

.punbb .post-links li {
  display: inline;
  padding-left: 1em;
}

.pl-email,
.pl-website {
  float: left;
}

a.reportlink {
  font-size: 0;
}

.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
}

#pun-viewtopic .post:is(.hide-profile, .hideprofile) > .container {
  display: block;
}

#pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-author,
#pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links
  .pl-email,
#pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links
  .pl-website {
  display: none;
}

#pun-viewtopic .post:is(.hide-profile, .hideprofile) > .container > .post-body {
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

#pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-body
  .post-box {
  min-height: 0;
}

#pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links {
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
}

#pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links
  ul {
  margin-left: 0;
  justify-content: flex-end;
}

#pun-viewtopic .post:is(.hide-profile, .hideprofile) h3 > span {
  margin-left: 0;
}

#pun-viewtopic .post:is(.hide-profile, .hideprofile) .custom_tag.kindredaca {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin-inline: 0;
}

.punbb .post .post-author {
  float: left;
  width: 240px;
  margin: 10px 0 0;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 11px;
  padding-top: 0;
  position: relative;
  color: var(--prof-text);
  box-sizing: border-box;
  border-radius: var(--radius);
  box-shadow: 4px 5px 10px #00000024;
  border: var(--ks-border-profile);
  z-index: 0;
}

#pun-main .post-author ul {
  text-align: center;
}

.punbb .post .post-author p,
.punbb .post .post-author ul {
  padding: 0 0 10px;
  line-height: 160%;
}

.punbb .post .post-author a {
  color: var(--prof-link);
  font-weight: 600;
}

.punbb .post .post-author a:hover {
  color: var(--prof-text);
}

.pa-author {
  font-family: var(--sec-font);
  text-transform: none;
  text-align: center;
  position: relative;
  padding: 0;
  margin-top: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pa-author a {
  font-weight: 400;
  letter-spacing: 0;
  background: var(--accent2);
  color: var(--tab-text) !important;
  padding: 4px 10px;
  font-size: 15px;
  border-radius: 5px 5px 0 0;
}

.pa-author a:hover {
  background: var(--dark-bord);
}

li.pa-title {
  font-size: 10px;
  font-weight: 400;
  font-family: var(--main-font);
  letter-spacing: 0;
  text-align: center;
  margin: 0;
  text-transform: none;
}

.author-wrap {
  margin: 0 10px;
  border-radius: var(--radius);
  padding: 5px;
  border: var(--ks-border-dark);
}

.punbb .pa-avatar img {
  max-width: 200px;
  margin-bottom: 0;
  margin-top: 5px;
  box-sizing: initial;
  border-radius: var(--ks-radius-xxs);
}

.pa-fld1 {
  border-top: 1px solid var(--dark-bord);
  margin: 10px -5px 0;
  padding: 10px;
  background: linear-gradient(180deg, #0000004d, transparent);
}

.pa-fld1 .lz-name {
  font-family: var(--sec-font);
  font-size: 13px;
  text-transform: uppercase;
}

.pa-fld1 .lz-name a {
  font-weight: 400;
}

.pa-fld1 .lz-text {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  margin: 5px 5px 0;
}

.pa-fld2 race {
  background: var(--accent2);
  padding: 2px 10px 5px;
  border-radius: 0 0 5px 5px;
}

.pa-fld2 img {
  width: 20px !important;
}

.pa-fld6 {
  width: 238px;
  height: 190px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--profile);
}

.pa-fld6 img {
  vertical-align: top;
  width: 100%;
  -webkit-mask: linear-gradient(
    0deg,
    hsla(0, 0%, 85%, 0) 0,
    var(--profile) 100%
  );
  mask: linear-gradient(0deg, hsla(0, 0%, 85%, 0) 0, var(--profile) 100%);
  overflow: hidden;
  filter: grayscale(0.4);
  border-radius: var(--ks-radius-xxs);
}

.pers-plah {
  width: 220px;
  height: 32px;
  position: relative;
  overflow: hidden;
  color: var(--tab-text);
  cursor: pointer;
  display: flex;
  background: var(--pers-pl) center/cover;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 9px;
  transform: translateX(-50%);
  left: 50%;
  padding: 0;
}

.pers-plah,
pers-plah img {
  border-radius: var(--ks-radius-sm);
}

.pers-plah-text {
  font-weight: 500;
  font-size: 11px;
  z-index: 9;
  text-shadow: 1px 1px 10px rgb(0 0 0/54%);
  text-transform: lowercase;
}

.punbb .modmenu .container {
  padding: 5px 0 0;
  text-align: right;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: lowercase;
}

.punbb .modmenu a,
.punbb .modmenu strong {
  height: 1.8em;
  line-height: 1.8em;
}

div#topic-users-in a {
  padding: 0 1px;
}

div#topic-users-in a:after {
  content: ',';
}

div#topic-users-in a:last-child:after {
  content: '';
}

.punbb .modmenu .container strong {
  float: left;
}

.punbb .modmenu input {
  margin-left: 1em;
}

div#topic-modmenu span {
  display: none;
}

.punbb .info .container {
  padding: 0.8em 1em;
}

.punbb .info .container .backlink {
  padding-top: 0.8em;
}

#profile .container {
  padding-left: 18.6em;
}

#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
}

#profilenav ul {
  margin: 0;
  padding: 0;
}

#profilenav li {
  padding-bottom: 0.8em;
  font-weight: 700;
}

#profilenav h2,
#viewprofile h2 {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 14px;
}

#profilenav h2 span,
#viewprofile h2 span {
  padding: 0 5px;
  position: relative;
}

#viewprofile-next {
  box-sizing: border-box;
}

#pun-profile #viewprofile > .container > ul,
#viewprofile > .container > ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--bord) 72%, transparent);
  border-radius: var(--ks-radius-xl);
  background:
    radial-gradient(
      circle at 92% 8%,
      color-mix(in srgb, var(--accent) 8%, transparent) 0 18%,
      transparent 42%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--quote) 82%, var(--podform)),
      color-mix(in srgb, var(--podform) 74%, var(--quote))
    );
  box-shadow: var(--shadow2);
}

#viewprofile table:has(#profile-left),
#viewprofile table:has(#profile-left) > tbody {
  display: block;
  width: 100%;
}

#viewprofile table:has(#profile-left) > tbody > tr {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}

#viewprofile #profile-left,
#viewprofile #profile-right {
  box-sizing: border-box;
  width: auto;
  min-width: 0;
}

#viewprofile #profile-left {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 22px 20px;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-family: var(--main-font);
  text-align: center;
  text-transform: lowercase;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--quote) 82%, transparent),
      color-mix(in srgb, var(--podform) 76%, var(--quote))
    ),
    var(--quote) top right/cover;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--bord) 52%, transparent);
}

#viewprofile #profile-left:after {
  content: '';
  position: absolute;
  right: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent) 28%, transparent),
    transparent
  );
  pointer-events: none;
}

#viewprofile #profile-left li,
#viewprofile #profile-right li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#viewprofile #profile-left li strong,
#viewprofile #profile-left li strong a {
  color: var(--text);
}

#viewprofile #profile-name strong {
  display: block;
  text-transform: uppercase;
  margin: 1em 0 0;
}

#viewprofile #profile-title strong {
  display: block;
  margin: 0.5em;
  text-transform: lowercase;
}

#viewprofile #pa-avatar {
  margin: 18px auto 16px;
}

#viewprofile #pa-avatar div,
#viewprofile #pa-avatar strong {
  padding: 0;
}

#viewprofile #pa-avatar img {
  display: block;
  width: min(200px, 100%);
  height: auto;
  margin: 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
}

#viewprofile #pa-edit,
#viewprofile #pa-online {
  margin-top: 12px !important;
  font: 700 12px/1.3 var(--main-font);
}

#viewprofile #pa-edit a {
  color: var(--text);
}

#viewprofile #profile-right {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(58px, auto);
  align-items: stretch;
  gap: 14px;
  width: 100%;
  padding: 20px;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--accent) 8%, transparent) 0 20%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--podform) 48%, transparent),
      color-mix(in srgb, var(--quote) 34%, transparent)
    );
}

#viewprofile #profile-right > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  box-sizing: border-box;
  padding: 12px 16px;
  overflow: hidden;
  color: var(--text);
  font-family: var(--main-font);
  font-size: 11px;
  text-align: center;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: var(--ks-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--quote) 78%, transparent),
    color-mix(in srgb, var(--podform) 72%, transparent)
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bord) 38%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--tab-text) 12%, transparent),
    0 8px 18px color-mix(in srgb, #000 4%, transparent);
  gap: 6px;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

#viewprofile #profile-right > li:before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    180deg,
    transparent 10%,
    color-mix(in srgb, var(--accent) 38%, transparent) 50%,
    transparent 90%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

#viewprofile #profile-right > li:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--quote) 88%, transparent),
    color-mix(in srgb, var(--podform) 82%, transparent)
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--tab-text) 16%, transparent),
    0 10px 24px color-mix(in srgb, #000 6%, transparent);
}

#viewprofile #profile-right > li:hover:before {
  opacity: 1;
}

#viewprofile #profile-right #pa-awards,
#viewprofile #profile-right #pa-invites {
  display: none;
}

#viewprofile #profile-right #pa-register-date {
  order: 10;
  grid-column: 1/7;
}

#viewprofile #profile-right #pa-time-visit {
  order: 11;
  grid-column: 7/13;
}

#viewprofile #profile-right #pa-respect {
  order: 20;
  grid-column: 1/7;
}

#viewprofile #profile-right #pa-positive {
  order: 21;
  grid-column: 7/13;
}

#viewprofile #profile-right #pa-fld2 {
  order: 40;
  grid-column: 1/5;
}

#viewprofile #profile-right #pa-fld4 {
  order: 41;
  grid-column: 5/9;
}

#viewprofile #profile-right #pa-fld5 {
  order: 42;
  grid-column: 9/13;
}

#viewprofile #profile-right #pa-fld1 {
  order: 30;
  grid-column: 1/13;
  min-height: 102px;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--accent) 9%, transparent) 0 18%,
      transparent 48%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--quote) 80%, transparent),
      color-mix(in srgb, var(--podform) 72%, transparent)
    );
}

#viewprofile #profile-right #pa-fld2 img {
  width: 20px !important;
}

#viewprofile #profile-right #pa-fld3 {
  order: 50;
  grid-column: 1/13;
  min-height: 78px;
}

#viewprofile #profile-right #pa-email {
  order: 60;
  grid-column: 1/7;
}

#viewprofile #profile-right #pa-posts {
  order: 61;
  grid-column: 7/13;
}

#viewprofile #profile-right #pa-last-post {
  order: 70;
  grid-column: 1/7;
}

#viewprofile #profile-right #pa-last-visit {
  order: 71;
  grid-column: 7/13;
}

#viewprofile #profile-right li span {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--sec-text) 58%, var(--accent));
  font: 700 10px/1.25 var(--main-font);
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: uppercase;
}

#viewprofile #profile-right li span a {
  color: inherit;
  font-weight: inherit;
}

#viewprofile #profile-right li span a:hover {
  color: var(--accent);
}

#viewprofile #profile-right li strong {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 500 11px/1.45 var(--main-font);
  text-align: center;
  text-transform: none;
}

#viewprofile #profile-right li div {
  margin: 0 auto;
  padding: 0;
}

#viewprofile #profile-right #pa-fld1 strong {
  width: min(100%, 460px);
  margin: 0 auto;
}

#viewprofile #profile-right #pa-fld1 .lz-name {
  margin: 0 0 7px;
  color: color-mix(in srgb, var(--accent) 78%, var(--sec-text));
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

#viewprofile #profile-right #pa-fld1 .lz-text,
#viewprofile #profile-right #pa-fld1 .lz-text p {
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--sec-text) 88%, var(--text));
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

#viewprofile #profile-right #pa-fld3 strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#viewprofile #profile-right #pa-fld3 pers-plah {
  display: inline-flex;
  max-width: 100%;
}

#viewprofile #profile-right #pa-fld3 pers-plah img {
  display: block;
  width: min(220px, 100%);
  max-width: 100%;
  max-height: 42px;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--ks-radius-xs);
  box-shadow: 0 4px 12px color-mix(in srgb, #000 9%, transparent);
}

#viewprofile #profile-signature {
  grid-column: 1/-1;
  margin: 0 20px 20px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--bord) 58%, transparent);
  border-radius: var(--ks-radius-lg);
  background: color-mix(in srgb, var(--quote) 45%, transparent);
}

#viewprofile #profile-signature p,
#viewprofile #profile-signature ul {
  margin: 0;
  padding: 0;
  border: 0;
}

#pun-userlist .formal,
#pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
}

#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em;
  border-top: none;
}

#pun-userlist .usertable table {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100%;
  table-layout: auto;
}

#pun-title {
  margin: 0;
  border-style: none;
  border-width: 0;
}

#pun-title h1 {
  display: block;
}

#pun-title .container {
  border-style: none;
}

#pun-title h1 span {
  display: none;
  font-size: 1.5em;
}

#pun-pagelinks {
  position: absolute;
  top: 55px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
}

#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0;
}

#pun-pagelinks .container li {
  display: inline;
}

#pun-pagelinks a:hover,
#pun-pagelinks a:link,
#pun-pagelinks li a {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float: left;
  width: 100%;
}

#pun-pagelinks a:active,
#pun-pagelinks a:focus {
  position: relative;
  margin: 0;
}

#pun-pagelinks li a span {
  display: block;
  margin: 0 1em;
}

#pun-navlinks {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-transform: uppercase;
  justify-content: center;
  margin: 0;
  width: 100%;
  position: absolute;
  top: -66px;
  background: #19191996;
  border: var(--ks-border-dark);
  height: 50px;
  border-radius: var(--ks-radius-lg);
  left: 0;
}

#pun-navlinks .container {
  padding: 0;
}

#pun-navlinks li {
  display: inline;
  margin: 0;
}

#pun-ulinks {
  margin: 0;
}

#pun-ulinks .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  margin: -72px 0 0;
  border-radius: 20px;
  border: var(--ks-border-default);
  padding: 5px;
  box-shadow: var(--ks-shadow-soft);
}

#pun-ulinks li,
#pun-ulinks li a {
  display: inline-block;
}

#pun-ulinks li a {
  padding: 0 6px;
}

#pun-ulinks li.item1,
#pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0;
}

#pun-status,
#pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
}

#pun-status .container {
  font-size: 11px;
  font-family: var(--main-font);
  font-weight: 400;
  letter-spacing: 0;
  height: auto;
  text-transform: none;
  margin-top: 22px;
}

#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
}

#pun-crumbs1 {
  font-weight: 400;
  margin: 20px 0 0;
}

#pun-crumbs1 p.container {
  height: auto;
  font-family: var(--main-font);
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  margin: 7px !important;
}

#pun-crumbs1 p.container a,
#pun-crumbs2 p.container a {
  font-weight: 400;
  transition:
    color 1s ease,
    background-color 1s ease,
    border-color 1s ease;
}

#pun-break1 {
  border-style: solid none;
  border-width: 1px 0;
  height: 0;
  margin: 0;
  position: relative;
}

#pun-announcement h2 {
  display: none;
  padding: 0;
  margin: 0 1em -3.5em;
  border-style: none none solid;
  border-width: 0 0 1px;
  position: relative;
  font-weight: 700;
}

#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

#pun-announcement .container {
  padding: 0;
  margin-top: 20px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 101%;
  font-family: Arial;
}

#pun-stats .container {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 15px 20px;
  font-family: var(--main-font);
  border-radius: var(--ks-radius-md);
  background: var(--podform);
  margin: 20px 0 10px;
  position: relative;
  border: var(--ks-border-default);
  box-shadow: var(--ks-shadow-soft);
}

#pun-stats li.item1,
#pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
}

#pun-stats li.item3,
#pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
}

li#onlinelist {
  margin-top: 1em;
  float: left;
  width: 100%;
  line-height: 130%;
  text-align: justify;
}

li#onlinelist,
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
}

li#onlinelist div {
  padding: 0.7em 0 0;
}

#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
}

#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
}

#pun-about {
  margin-top: 0;
  margin-bottom: 0;
}

#pun-about .container {
  border-top-style: none;
  text-align: center;
  line-height: 150%;
}

#pun-about p span {
  display: block;
  padding-left: 50%;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 400;
  font-family: var(--main-font);
  text-transform: uppercase;
}

#pun-crumbs2 {
  font-weight: 400;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
}

#pun-crumbs2 .container {
  font-family: var(--main-font);
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  height: auto;
}

#pun-break4 {
  margin: -2px 1em;
  border-style: none;
  border-width: 0;
  position: relative;
  height: 0;
}

#pun-help .formal .info-box h3.legend {
  border-bottom-style: none;
  border-bottom-width: 0;
  padding-bottom: 0;
  margin-bottom: 0.8em;
}

#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: none;
  border-bottom-width: 0;
  font-size: 1.1em;
}

#pun-help .formal dd,
#pun-help .formal p {
  margin-bottom: 1em;
}

#pun-help .formal dl,
#pun-help .formal ul {
  padding: 0 0 0 1em;
}

#pun-help .formal li {
  padding: 0;
  line-height: 130%;
}

#pun-help .formal li * {
  vertical-align: text-top;
}

#pun-help .formal dt span {
  font:
    1.4em/120% monaco,
    bitstream vera sans mono,
    courier new,
    courier,
    monospace;
}

#pun-help .formal .parsedmsg,
#pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
}

#pun-status .status-right {
  display: none;
}

#main-reply {
  text-align: justify;
  padding: 15px 20px;
}

#f-subforums .tc2,
#f-subforums .tc3,
#pun-index .category .tc2,
#pun-index .category .tc3 {
  display: none;
}

#pun-index .isub {
  display: none !important;
}

html * {
  box-sizing: border-box;
}

.pa-ip {
  font-size: 9px;
  margin-top: 5px;
}

#pun-index .category h2,
#pun-stats h2 {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 -10px;
  position: relative;
  background: var(--cat-branch) center no-repeat;
  height: 34px;
  width: 100%;
  opacity: 0.5;
}

#pun-stats h2 {
  background: transparent;
  height: 0;
}

#pun-index .category h2 span,
#pun-stats h2 span {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 38px;
  position: relative;
  font-weight: 400;
  text-transform: lowercase;
  color: #858585;
  font-family: var(--sec-font);
  height: 44px;
  overflow: hidden;
  line-height: 48px;
}

#pun-index .category table tr {
  margin: 10px 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: flex;
  gap: 0 30px;
  position: relative;
  background: var(--podform);
  align-items: center;
  padding: 20px;
  border-radius: var(--ks-radius-lg);
  border: var(--ks-border-default);
  box-shadow: var(--ks-shadow-soft);
}

#pun-viewforum .tcr {
  position: relative;
  display: flex;
  gap: 0 10px;
  align-items: center;
}

.postlink.long {
  width: auto;
}

.new-poll a,
.new-topic a,
.pagelink,
.postlink span a {
  padding: 3px 10px;
  text-transform: lowercase;
  border-radius: var(--ks-radius-xxs);
  font-size: 10px;
  font-family: var(--main-font);
  border: var(--ks-border-default);
  box-shadow: var(--ks-shadow-soft);
}

.forum tr {
  margin: 10px 0;
  display: flex;
  gap: 20px;
  font: 400 11px var(--main-font);
  align-items: center;
  text-transform: lowercase;
  border-radius: var(--ks-radius-sm);
  padding: 0 10px;
  border: var(--ks-border-default);
  box-shadow: var(--ks-shadow-soft);
}

.forum thead {
  display: none;
}

.topic a.sharelink {
  float: right;
  margin-left: 1em;
  display: none;
}

.reactions-root {
  display: none;
}

#profile .container fieldset legend span {
  padding: 0;
  margin: 0;
  font-size: 10px;
  font-family: var(--main-font);
  text-transform: uppercase;
}

#pun-main h2 span {
  font-size: 0;
}

#html-header {
  color: var(--tab-text);
}

.punbb .main .tc2,
.punbb .main .tc3,
.punbb .main .tcmod {
  width: 8%;
}

.html-box a {
  width: 180px;
  text-align: center;
  height: 40px;
  background: var(--profile-bg);
  overflow: hidden;
  border: 1px solid var(--text);
  color: var(--quote);
  border-radius: var(--ks-radius-xxs);
  transform: scale(1);
  display: inline-block;
  margin: 2px 10px;
}

.html-box a img {
  width: 40px;
  float: left;
  margin-left: 5px;
}

.html-box a p.one {
  font-size: 12px;
  margin-top: 5px;
  font-family: var(--main-font);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0;
}

.html-box a p.two {
  font-size: 10px;
  font-family: var(--main-font);
}

.html-box a:hover {
  transform: scale(0.9);
}

#tooltip {
  position: absolute;
  background: var(--accent2);
  max-width: 200px;
  border: none;
  border-radius: var(--ks-radius-lg);
  box-shadow: inset 0 0 0 1px rgb(0 0 0/5%);
  font-family: var(--main-font);
  font-size: 11px;
  display: none;
  color: #efeee4;
  text-align: center;
  padding: 6px 22px;
  font-weight: 400;
  z-index: 999;
}

.tcr-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.punbb .post-content .quote-box,
.spoiler-box {
  padding: 0;
}

#pun-admain .adlabel {
  width: 18em;
}

#plng {
  font-size: 10px;
  font-weight: 400;
  margin-top: 0;
  display: flex;
  align-items: center;
  transition:
    color 0.3s ease-in-out 0s,
    background-color 0.3s ease-in-out 0s,
    border-color 0.3s ease-in-out 0s,
    opacity 0.3s ease-in-out 0s;
  text-transform: uppercase;
  white-space: nowrap;
  gap: 5px;
  font-family: var(--main-font);
  border-radius: var(--ks-radius-xs);
  background: var(--quote);
  border: var(--ks-border-default);
  padding: 4px 20px;
}

.post-content .spoiler-box > div {
  background-image: none !important;
  position: relative;
  padding: 10px;
  font-family: var(--main-font);
}

#pun-index .category table tr td,
.spoiler-box {
  padding: 0;
}

#pun-index .byuser,
#pun-index .datetime {
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
}

#html-header a,
.winter #html-header a:hover {
  color: var(--navi-link-hov);
  font-weight: 600;
}

#html-header a:hover,
.winter #html-header a {
  color: var(--navi-link);
}

.post-content .spoiler-box > div.visible {
  border-bottom: 1px solid var(--bord);
  border-radius: 4px 4px 0 0;
  background-image: none !important;
}

.post-content .spoiler-box > blockquote.visible {
  padding: 20px 30px;
  background: var(--podform);
  border-radius: 0 0 4px 4px;
}

.post-content .spoiler-box > div:before {
  content: '\f070';
  font-family: FontAwesome;
  font-size: 11px;
  transition:
    color 0.5s ease-in-out 0s,
    opacity 0.5s ease-in-out 0s,
    transform 0.5s ease-in-out 0s;
  align-items: center;
  margin-right: 10px;
  color: var(--sec-text);
  opacity: 0.5;
}

.post-content .spoiler-box > div.visible:before {
  content: '\f06e';
  opacity: 1;
}

#pun-index td div.tclcon podf {
  font-size: 11px;
}

a.permalink {
  background: var(--quote);
  padding: 3px 10px;
  border-radius: var(--ks-radius-xs);
  border: var(--ks-border-default);
  font-size: 10px;
  flex-shrink: 0;
}

select#mod-options {
  font-family: var(--main-font);
  font-size: 10px;
  text-transform: uppercase;
  padding: 0 5px;
  margin: 0;
  border-radius: var(--ks-radius-sm);
}

.pf-wrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  flex-shrink: 0;
  width: 176px;
}

.pf-span {
  padding: 3px 10px;
  text-transform: none;
  font-size: 12px;
}

.pf-span,
.pforums {
  background: var(--bord);
  border-radius: var(--ks-radius-sm);
}

.pforums {
  padding: 10px 15px;
  font-size: 11px;
}

#pun-index .category table tr + tr {
  margin: 15px 0;
  padding: 20px;
}

.forum-nav {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.forum-nav a {
  padding: 3px 10px;
  border-radius: var(--ks-radius-sm);
  color: var(--tab-text);
  text-transform: uppercase;
  font-size: 10px;
}

.forum-nav a,
.forum-nav a:hover {
  background: var(--accent2);
}

#pun-index .category tr.inew {
  background: var(--pf-bg) center/cover;
  box-shadow: 5px 6px 10px #00000014;
}

#pun-stats .statsinfo {
  display: flex;
  gap: 33px;
  margin-bottom: -4px;
  margin-top: 0;
  background: var(--sts-bg) center/cover;
  justify-content: center;
  padding: 5px 10px;
  border-radius: var(--ks-radius-xs);
  border: var(--ks-border-default);
}

#pun-stats .statsinfo li {
  text-align: center;
  font-size: 11px;
  text-transform: none;
}

#pun-main .post-author ul > .pa-fld4,
#pun-main .post-author ul > .pa-fld5,
#pun-main .post-author ul > .pa-posts,
#pun-main .post-author ul > .pa-respect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 9px 5px 10px;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
}

.wrap-resp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 9px 0 10px;
  font-size: 11px;
}

.wrap-resp > .pa-fld4,
.wrap-resp > .pa-fld5,
.wrap-resp > .pa-posts,
.wrap-resp > .pa-respect {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 0;
  line-height: 1;
}

.pa-fld4 .fld-name,
.pa-fld5 .fld-name,
.pa-posts .fld-name,
.pa-respect .fld-name {
  font-size: 0;
}

.pa-fld4 .fld-name:before,
.pa-fld5 .fld-name:before,
.pa-posts .fld-name:before,
.pa-respect .fld-name:before {
  content: '\f0e0';
  font-family: FontAwesome;
  font-size: 11px;
  color: var(--accent2);
  margin-right: 5px;
  font-weight: 600;
}

.pa-respect .fld-name:before {
  content: '\f004';
}

.pa-fld4 .fld-name:before {
  content: '\f219';
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
}

.pa-fld5 .fld-name:before {
  content: '\f52d';
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
}

.pa-respect span a {
  margin-left: -16px;
}

.pa-posts span a,
.pa-respect span a {
  padding: 1px;
  width: 12px;
  height: 12px;
  position: absolute;
  margin-top: 0;
}

.pa-posts span a {
  margin-left: -12px;
}

.code-box .blockcode,
.quote-box blockquote {
  padding: 10px 20px;
  position: relative;
}

.blockcode {
  max-height: 150px;
  overflow: auto;
}

.activees,
.activees2 {
  --promo-size: 44px;
  --promo-gap-x: 14px;
  --promo-overlay: color-mix(in srgb, var(--accent) 56%, transparent);
  --promo-overlay-hover: color-mix(
    in srgb,
    var(--navi-link-hov) 54%,
    transparent
  );
  --promo-border: color-mix(in srgb, var(--tab-text) 24%, transparent);
  position: absolute;
  top: 14px;
  left: 71px;
  z-index: 14;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px var(--promo-gap-x);
  width: -moz-fit-content;
  width: fit-content;
  max-width: 218px;
  min-height: var(--promo-size);
}

.activees2 {
  top: 259px;
  right: 71px;
  left: auto;
  max-width: 224px;
  flex-direction: row-reverse;
}

.activees2:before,
.activees:before {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  z-index: 1;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100% + 24px);
  color: var(--tab-text, #c9c8c8);
  font: 400 14px/1 var(--sec-font);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.82;
  text-shadow: 0 1px 8px rgb(0 0 0/28%);
  transform: translateX(-50%);
}

.activees:before {
  content: 'Àêöèè';
}

.activees2:before {
  content: '';
}

.activees a,
.activees2 a {
  position: relative;
  display: block;
  flex: 0 0 var(--promo-size);
  width: var(--promo-size);
  height: var(--promo-size);
  border-radius: var(--ks-radius-pill);
}

.activees div,
.activees2 div {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--plash);
  border: 1px solid var(--promo-border);
  border-radius: var(--ks-radius-pill);
  box-shadow: 5px 5px 12px rgb(0 0 0/18%);
  opacity: 0.92;
  transform: translateY(0);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.activees div:after,
.activees div:before,
.activees2 div:after,
.activees2 div:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.activees div:before,
.activees2 div:before {
  z-index: 2;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tab-text) 16%, transparent),
    inset 0 -14px 18px rgb(0 0 0/18%);
}

.activees div:after,
.activees2 div:after {
  z-index: 1;
  background: var(--promo-overlay);
  mix-blend-mode: color;
  opacity: 0.86;
  transition:
    opacity 0.35s ease,
    background-color 0.35s ease;
}

.activees img,
.activees2 img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: inherit;
  filter: grayscale(100%) contrast(1.08) brightness(0.86);
  transform: scale(1.04);
  transition:
    filter 0.35s ease,
    transform 0.35s ease;
}

.activees a:focus-visible div,
.activees a:hover div,
.activees2 a:focus-visible div,
.activees2 a:hover div {
  opacity: 1;
  border-color: color-mix(in srgb, var(--navi-link-hov) 70%, var(--tab-text));
  box-shadow: 6px 7px 16px rgb(0 0 0/26%);
  transform: translateY(-2px);
}

.activees a:focus-visible img,
.activees a:hover img,
.activees2 a:focus-visible img,
.activees2 a:hover img {
  filter: grayscale(72%) contrast(1.12) brightness(0.92);
  transform: scale(1.09);
}

.activees a:focus-visible div:after,
.activees a:hover div:after,
.activees2 a:focus-visible div:after,
.activees2 a:hover div:after {
  opacity: 0.68;
  background: var(--promo-overlay-hover);
}

.activees a:focus-visible,
.activees2 a:focus-visible {
  outline: none;
}

.activees a[hidden],
.activees-2 a[hidden],
.activees-2:not(.is-activees-ready),
.activees-2[hidden],
.activees2 a[hidden],
.activees2:not(.is-activees-ready),
.activees2[hidden],
.activees:not(.is-activees-ready),
.activees[hidden] {
  display: none !important;
}

.punbb .post-rating a:hover:before,
.punbb .post-vote a:hover:before {
  color: currentcolor;
}

.punbb .post-rating a {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 26px;
  gap: 5px;
  color: var(--text);
}

.punbb .post-rating a,
.punbb .post-rating a:before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.punbb .post-rating a:before {
  content: '\f004';
  width: auto;
  height: auto;
  color: var(--accent);
  font: 13px FontAwesome;
  transition: color 0.25s ease;
}

.punbb .post-rating p,
.punbb .post-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  min-height: 26px;
  margin: 0;
  color: var(--text);
  font-family: var(--main-font);
  font-size: 10px;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--bord) 60%, transparent);
  border-radius: var(--ks-radius-xs);
  background: color-mix(in srgb, var(--bord) 62%, var(--podform));
  box-sizing: border-box;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.punbb .post-rating p {
  min-width: 42px;
  padding: 0 9px;
}

.punbb .post-vote {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}

.punbb .post-vote .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.punbb .post-rating p:has(a:focus-visible),
.punbb .post-rating p:has(a:hover),
.punbb .post-vote:focus-within,
.punbb .post-vote:hover {
  border-color: var(--accent2);
  background: var(--accent);
  color: var(--tab-text);
  box-shadow: var(--shadow2);
}

.punbb .post-vote a.positive {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  transition: color 0.25s ease;
}

.punbb .post-rating p:has(a:focus-visible) a,
.punbb .post-rating p:has(a:focus-visible) a:before,
.punbb .post-rating p:has(a:hover) a,
.punbb .post-rating p:has(a:hover) a:before,
.punbb .post-vote a.positive:focus-visible,
.punbb .post-vote a.positive:hover {
  color: var(--tab-text);
}

.punbb .post-rating {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: auto;
}

.rsp_wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  margin: 10px 0 0;
  gap: 10px;
}

.rsp_wrap .post-vote p {
  margin-right: 0;
  padding: 0;
}

.rsp_wrap .post-vote {
  display: inline-flex;
  flex: 0 0 30px;
  align-self: center;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  cursor: pointer;
}

.rsp_wrap .post-vote .container {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.rsp_wrap .post-vote a.positive {
  width: 100%;
  height: 100%;
  padding: 0;
}

.kindred-info {
  left: 50%;
  transform: translateX(-50%);
  top: 123px;
  padding: 5px 16px;
  font-family: var(--sec-font);
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 5px 5px 10px #00000030;
  background: var(--plash);
}

.kindred-info,
.knews {
  position: absolute;
  border-radius: var(--ks-radius-lg);
}

.knews {
  left: 352px;
  width: 446px;
  top: 180px;
  text-align: justify;
  height: 110px;
}

.knews text {
  display: flex;
  flex-direction: column;
  margin: 10px;
  overflow-y: auto;
  height: 84px;
  font-family: var(--main-font);
  padding-right: 10px;
  gap: 7px;
  align-content: flex-start;
  align-items: flex-start;
}

.knews text p date {
  background: var(--accent2);
  padding: 0 5px;
  border-radius: var(--ks-radius-xs);
}

.kindred-quote {
  position: absolute;
  width: 192px;
  font-family: var(--sec-font);
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.5px;
  left: 811px;
  top: 263px;
  color: var(--tab-text);
}

.kindred-quote ac {
  color: var(--text-tab-accent);
}

.pf-text {
  background: transparent;
  padding: 5px 10px;
  margin: 6px 0;
  border-radius: var(--ks-radius-sm);
  border: var(--ks-border-default);
  box-shadow: 4px 5px 20px #00000014;
}

.pf-lnks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.pf-lnks a {
  background: var(--accent);
  color: var(--tab-text);
  padding: 2px 8px;
  border-radius: var(--ks-radius-xs);
  text-transform: uppercase;
  font-family: var(--main-font);
  font-weight: 500;
  letter-spacing: 0.4px;
  font-size: 10px;
}

.pf-lnks a:hover {
  background: var(--dark-bord);
}

#stylelist {
  position: absolute;
  top: 17px;
  margin: 0;
  left: 540px;
  padding: 0;
  overflow: hidden;
  width: 50px;
  list-style-type: none;
  display: flex;
  height: 22px;
  flex-direction: row;
  opacity: 1;
  border-radius: 20px;
  justify-content: space-between;
}

#stylelist li[data='dark'] a,
#stylelist li[data='light'] a {
  border-radius: 100%;
  font-weight: 400;
  font-size: 0;
  color: var(--tab-text);
  display: flex;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
}

#stylelist li[data='dark'] a:before {
  content: '';
  background: var(--tab-text);
  -webkit-mask: url(https://forumstatic.ru/files/001c/70/50/57676.svg) no-repeat
    center left;
  mask: url(https://forumstatic.ru/files/001c/70/50/57676.svg) no-repeat center
    left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 15px;
  height: 15px;
}

#stylelist li[data='light'] a:before {
  content: '';
  background: var(--bt-bg);
  -webkit-mask: url(https://forumstatic.ru/files/001c/70/50/21300.svg) no-repeat
    center left;
  mask: url(https://forumstatic.ru/files/001c/70/50/21300.svg) no-repeat center
    left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 17px;
  height: 17px;
}

#stylelist li.active {
  background: var(--accent2);
  border-radius: 100%;
}

#stylelist li.active a:before {
  background: var(--tab-text);
}

.dark .new-poll a,
.dark .new-topic a,
.dark .pagelink,
.dark .postlink span a {
  color: var(--text);
}

.kindred-header,
div#pun-live-rusff {
  display: none;
}

#pun-navlinks.scroll_navi {
  top: 0;
  background: var(--profile-bg) center/cover;
  height: 79px;
  border-radius: 0;
}

#pun-navlinks.scroll_navi,
#pun-ulinks.scroll_navi {
  z-index: 10;
  position: fixed;
  width: 1100px;
  left: auto;
  margin-left: -30px;
}

#pun-ulinks.scroll_navi {
  top: 42px;
}

#pun-ulinks.scroll_navi .container {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  border-radius: 20px;
  border: none;
  padding: 5px;
  box-shadow: none;
}

#pun-navlinks.scroll_navi .container {
  top: 0;
  height: 24px;
  margin-top: -22px;
}

#pun-ulinks.scroll_navi a {
  color: var(--navi-link);
}

#pun-ulinks.scroll_navi a:hover {
  color: var(--navi-link-hov);
}

#pun-navlinks.nav-scrolled {
  flex-direction: row;
  text-transform: uppercase;
  width: calc(100% + 60px);
  z-index: 50;
  background: var(--profile-bg);
  height: 50px;
  border-radius: 0;
  left: 0;
  position: sticky;
  top: 0;
  margin: -478px 0 426px -30px;
  border: var(--ks-border-dark);
  border-width: 0 1px 1px;
}

#pun-navlinks.nav-scrolled,
#pun-ulinks.user-scrolled .container {
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: none;
}

#pun-ulinks.user-scrolled .container {
  width: 100%;
  background: var(--quote);
  margin: -72px 0 0;
  border-radius: 0;
  border: var(--ks-border-default);
  padding: 5px;
  box-shadow: none;
  border-width: 0 1px 1px;
}

#pun-ulinks.user-scrolled {
  z-index: 8;
  position: sticky;
  top: 50px;
  margin: 353px 0 0;
}

.forum-name,
label.fm-toggle {
  display: none;
}

#pun-searchposts .pa-author strong {
  font-weight: 400;
  font-size: 16px;
}

.minimal-toggle,
.pa-reg {
  display: none;
}

.spirit-clock {
  display: none;
  position: absolute;
  width: 211px;
  height: 211px;
  left: 833px;
  top: 37px;
}

.spring .spirit-clock {
  display: block;
}

.sclock {
  --cx: 104.5px;
  --cy: 104.5px;
  background: url(https://forumstatic.ru/files/001c/8d/fd/89606.webp);
  width: 209px;
  height: 209px;
  position: relative;
}

.sclock-aw {
  --w: 16px;
  --h: 49px;
  --pivot-x: 8px;
  --pivot-y: 49px;
  z-index: 2;
}

.sclock-ar,
.sclock-aw {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: calc(var(--cx) - var(--pivot-x));
  top: calc(var(--cy) - var(--pivot-y));
  transform-origin: var(--pivot-x) var(--pivot-y);
  will-change: transform;
}

.sclock-ar {
  --w: 20px;
  --h: 71px;
  --pivot-x: 10px;
  --pivot-y: 71px;
  z-index: 3;
}

.spirit-clock,
.spirit-clock img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.sclock-ar img,
.sclock-aw img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

a.clock-link-disabled {
  cursor: default;
}

a.clock-link-active {
  cursor: pointer;
}

.force-mobile #pun-viewtopic .author-wrap,
.force-mobile #pun-viewtopic .main,
.force-mobile #pun-viewtopic .post,
.force-mobile #pun-viewtopic .post-author,
.force-mobile #pun-viewtopic .post-author li,
.force-mobile #pun-viewtopic .post-author ul,
.force-mobile #pun-viewtopic .post-body,
.force-mobile #pun-viewtopic .post-box,
.force-mobile #pun-viewtopic .post-links,
.force-mobile #pun-viewtopic .post-links ul,
.force-mobile #pun-viewtopic .post > .container,
.force-mobile #pun-viewtopic .topic,
.force-mobile #pun-viewtopic .wrap-resp {
  box-sizing: border-box;
  max-width: 100%;
}

.force-mobile #pun-viewtopic .main .post {
  width: calc(100vw - 18px);
  max-width: calc(100vw - 18px);
  margin: 14px auto 22px;
  padding: 0;
  overflow: visible;
  border-radius: var(--ks-radius-xl);
}

.force-mobile #pun-viewtopic .post > .container {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px;
  overflow: visible;
}

.force-mobile #pun-viewtopic .post .post-author {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin: 16px 0 12px;
  padding: 22px 10px 10px;
  overflow: visible;
  position: relative;
  color: var(--prof-text);
  background: color-mix(in srgb, var(--quote) 76%, transparent);
  border: var(--ks-border-profile);
  border-radius: var(--ks-radius-xl);
  box-shadow: var(--shadow, 4px 5px 10px #00000024);
}

.force-mobile #pun-viewtopic .post-author p,
.force-mobile #pun-viewtopic .post-author ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.force-mobile #pun-viewtopic .post-author li {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: initial;
}

.force-mobile #pun-viewtopic .post-author .pa-fld2 {
  position: absolute;
  top: -18px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%);
  background: var(--quote);
  border: var(--ks-border-profile);
  border-radius: 50%;
  box-shadow: var(--shadow2, 0 3px 10px rgb(0 0 0/10%));
}

.force-mobile #pun-viewtopic .post-author .pa-fld2 > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

.force-mobile #pun-viewtopic .pa-author {
  position: absolute;
  top: 42px;
  left: 114px;
  right: 24px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: none;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  gap: 6px;
  text-align: left;
  pointer-events: auto;
}

.force-mobile #pun-viewtopic .pa-author a {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 5px 11px 6px;
  overflow: hidden;
  color: var(--tab-text) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--accent2);
  border-radius: var(--ks-radius-md);
  font-size: 17px;
  line-height: 1.12;
  text-align: left;
}

.force-mobile #pun-viewtopic .pa-author .indOnline {
  flex: 0 0 auto;
  margin: 0;
}

.force-mobile #pun-viewtopic .author-wrap {
  display: grid;
  position: relative;
  width: 100%;
  min-height: 126px;
  margin: 0;
  padding: 18px 14px 16px;
  overflow: hidden;
  background: var(--kndr-img) center/cover;
  border: var(--ks-border-profile);
  border-radius: var(--ks-radius-xl);
  box-shadow: none;
  grid-template: 'avatar empty' 30px 'avatar title' auto 'avatar info' auto/82px minmax(
      0,
      1fr
    );
  align-items: start;
  gap: 4px 12px;
}

.force-mobile #pun-viewtopic .author-wrap > :not(.pa-fld6) {
  position: relative;
  z-index: 2;
}

.force-mobile #pun-viewtopic .pa-fld6 {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  background: var(--profile-bg) center top/cover no-repeat;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(180deg, #000, #000 42%, transparent);
  mask-image: linear-gradient(180deg, #000, #000 42%, transparent);
}

.force-mobile #pun-viewtopic .pa-fld6 img,
.force-mobile #pun-viewtopic .pa-fld6 > div {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(0.12) sepia(0.12);
  opacity: 0.66;
}

.force-mobile #pun-viewtopic .pa-avatar {
  display: block;
  grid-area: avatar;
  position: relative;
  z-index: 2;
  width: 78px;
  height: 78px;
  margin: 0;
  padding: 0;
  place-self: start center;
}

.force-mobile #pun-viewtopic .pa-avatar img,
.force-mobile #pun-viewtopic .punbb .post .post-author .pa-avatar img {
  display: block;
  width: 78px;
  height: 78px;
  max-width: 78px;
  max-height: 78px;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--ks-radius-md);
}

.force-mobile #pun-viewtopic .pa-title {
  grid-area: title;
  place-self: start start;
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--prof-text);
  background: transparent;
  border-radius: var(--ks-radius-md);
  box-shadow: none;
  font: 500 13px/1.25 var(--main-font);
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.force-mobile #pun-viewtopic .pa-fld1 {
  display: block;
  grid-area: info;
  place-self: start start;
  position: relative;
  z-index: 2;
  max-width: 100%;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  color: var(--prof-text);
  background: transparent;
  border: 0;
  opacity: 0.9;
  text-align: left;
}

.force-mobile #pun-viewtopic .pa-fld1 .lz-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--prof-text);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.force-mobile #pun-viewtopic .pa-fld1 .lz-text,
.force-mobile #pun-viewtopic .post-author .pa-fld3 .lz-name,
.force-mobile #pun-viewtopic .post-author .pa-fld3 .lz-text {
  display: none;
}

.force-mobile #pun-viewtopic .wrap-resp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 12px;
  width: 100%;
  margin: 10px 0;
  padding: 0;
}

.force-mobile #pun-viewtopic .wrap-resp li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  width: auto;
  color: var(--prof-text);
  font: 600 12px/1 var(--main-font);
  white-space: nowrap;
}

.force-mobile #pun-viewtopic .wrap-resp .fld-name:before {
  margin-right: 3px;
  color: var(--accent);
  font-size: 13px;
}

.force-mobile #pun-viewtopic .pa-fld3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(238px, 100%);
  height: 40px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
}

.force-mobile #pun-viewtopic .pa-fld3 .pers-plah,
.force-mobile #pun-viewtopic .pa-fld3 > pers-plah {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(220px, 100%);
  max-width: 220px;
  height: 40px;
  min-height: 40px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: var(--pers-pl) center/cover;
  border: 0;
  border-radius: var(--ks-radius-sm);
  box-shadow: none;
  transform: none;
  left: auto;
}

.force-mobile #pun-viewtopic .pa-fld3 .pers-plah:has(img),
.force-mobile #pun-viewtopic .pa-fld3 > pers-plah:has(img) {
  background: transparent;
}

.force-mobile #pun-viewtopic .pa-fld3 img {
  display: block;
  width: 100%;
  max-width: none;
  height: 40px;
  max-height: 40px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: var(--ks-radius-sm);
}

.force-mobile #pun-viewtopic .pa-awards,
.force-mobile #pun-viewtopic .pa-last-visit,
.force-mobile #pun-viewtopic .pa-online {
  display: none;
}

.force-mobile #pun-viewtopic .post-body {
  display: block;
  clear: both;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-left: 0;
}

.force-mobile #pun-viewtopic .post-box {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 14px 15px 16px;
  overflow: hidden;
  position: relative;
  border-radius: var(--ks-radius-xl);
}

.force-mobile #pun-viewtopic .post-content {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.force-mobile #pun-viewtopic .post-content iframe,
.force-mobile #pun-viewtopic .post-content img,
.force-mobile #pun-viewtopic .post-content video {
  max-width: 100%;
  height: auto;
}

.force-mobile #pun-viewtopic .post-links {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 0 0;
}

.force-mobile #pun-viewtopic .post-links ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.force-mobile #pun-viewtopic .post-links li {
  display: inline-flex;
  width: auto;
  margin: 0;
  padding: 0;
}

.force-mobile #viewprofile-next {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
}

.force-mobile #profile-gifts,
.force-mobile #profilenav {
  display: none;
}

.force-mobile #viewprofile .container {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 18px 18px;
}

.force-mobile #pun-profile #viewprofile > .container > ul,
.force-mobile #viewprofile > .container > ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 16px;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.force-mobile #viewprofile #profile-left,
.force-mobile #viewprofile table:has(#profile-left),
.force-mobile #viewprofile table:has(#profile-left) > tbody,
.force-mobile #viewprofile table:has(#profile-left) > tbody > tr {
  display: block;
  box-sizing: border-box;
  width: 100%;
}

.force-mobile #viewprofile #profile-left {
  height: auto;
  min-height: 0;
  padding: 18px 12px 16px;
  overflow: visible;
  color: var(--text);
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.force-mobile #viewprofile #profile-left:after {
  content: none;
}

.force-mobile #viewprofile #profile-left li,
.force-mobile #viewprofile #profile-right li {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.force-mobile #viewprofile #profile-left li div,
.force-mobile #viewprofile #profile-left li span,
.force-mobile #viewprofile #profile-left li strong,
.force-mobile #viewprofile #profile-right li div,
.force-mobile #viewprofile #profile-right li span,
.force-mobile #viewprofile #profile-right li strong {
  display: block;
  float: none;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.force-mobile #viewprofile #profile-name strong {
  margin: 8px 0 0 !important;
  color: var(--text);
  font: 800 16px/1.2 var(--main-font);
  text-transform: lowercase;
}

.force-mobile #viewprofile #profile-title strong {
  margin: 8px 0 0 !important;
  color: color-mix(in srgb, var(--text) 86%, var(--sec-text));
  font: 700 12px/1.2 var(--main-font);
  text-transform: lowercase;
}

.force-mobile #viewprofile #pa-avatar {
  margin: 14px auto 12px;
}

.force-mobile #viewprofile #pa-avatar img {
  display: block;
  width: min(200px, 64vw);
  height: auto;
  max-height: 250px;
  margin: 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--ks-radius-xs);
}

.force-mobile #viewprofile #pa-edit,
.force-mobile #viewprofile #pa-online {
  margin-top: 10px;
  color: var(--text);
  font: 700 13px/1.3 var(--main-font);
  text-transform: lowercase;
}

.force-mobile #viewprofile #pa-edit a {
  color: var(--text);
}

.force-mobile #viewprofile #profile-right {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 2px 14px;
  background: transparent;
}

.force-mobile #viewprofile #profile-right > li {
  display: flex;
  flex-direction: column;
  grid-column: auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 58px;
  padding: 10px 9px;
  gap: 5px;
  color: var(--text);
  font-family: var(--main-font);
  text-align: center;
  overflow-wrap: anywhere;
  border: 0;
  border-radius: var(--ks-radius-lg);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--quote) 54%, transparent),
    color-mix(in srgb, var(--podform) 40%, transparent)
  );
  box-shadow: 0 6px 14px color-mix(in srgb, #000 4%, transparent);
}

.force-mobile #viewprofile #profile-right > li:before {
  content: none;
}

.force-mobile #viewprofile #profile-right #pa-awards,
.force-mobile #viewprofile #profile-right #pa-invites {
  display: none;
}

.force-mobile #viewprofile #profile-right #pa-email,
.force-mobile #viewprofile #profile-right #pa-fld2,
.force-mobile #viewprofile #profile-right #pa-fld4,
.force-mobile #viewprofile #profile-right #pa-fld5,
.force-mobile #viewprofile #profile-right #pa-last-post,
.force-mobile #viewprofile #profile-right #pa-last-visit,
.force-mobile #viewprofile #profile-right #pa-positive,
.force-mobile #viewprofile #profile-right #pa-posts,
.force-mobile #viewprofile #profile-right #pa-register-date,
.force-mobile #viewprofile #profile-right #pa-respect,
.force-mobile #viewprofile #profile-right #pa-time-visit {
  grid-column: span 1;
}

.force-mobile #viewprofile #profile-right #pa-fld1,
.force-mobile #viewprofile #profile-right #pa-fld3 {
  grid-column: 1/-1;
  min-height: 0;
  padding: 12px 10px;
}

.force-mobile #viewprofile #profile-right li span {
  width: auto;
  color: color-mix(in srgb, var(--accent) 70%, var(--sec-text));
  font: 800 10px/1.25 var(--main-font);
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.force-mobile #viewprofile #profile-right li span a {
  color: inherit;
}

.force-mobile #viewprofile #profile-right li strong {
  width: 100%;
  color: var(--text);
  font: 600 13px/1.35 var(--main-font);
  text-transform: none;
}

.force-mobile #viewprofile #profile-right #pa-fld1 .lz-name {
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--accent) 76%, var(--sec-text));
  font: 600 12px/1.3 var(--main-font);
}

.force-mobile #viewprofile #profile-right #pa-fld1 .lz-text,
.force-mobile #viewprofile #profile-right #pa-fld1 .lz-text p {
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--text) 84%, var(--sec-text));
  font: 400 12px/1.45 var(--main-font);
  text-align: center;
}

.force-mobile #viewprofile #profile-right #pa-fld3 strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.force-mobile #viewprofile #profile-right #pa-fld3 pers-plah {
  display: inline-flex;
  max-width: 100%;
}

.force-mobile #viewprofile #profile-right #pa-fld3 pers-plah img {
  display: block;
  width: min(220px, 100%);
  max-width: 100%;
  max-height: 42px;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--ks-radius-xs);
  box-shadow: 0 4px 12px color-mix(in srgb, #000 9%, transparent);
}

.force-mobile #viewprofile #profile-signature,
.force-mobile #viewprofile #profile-signature p,
.force-mobile #viewprofile #profile-signature ul {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.force-mobile #viewprofile #profile-signature {
  margin-top: 12px;
  padding: 0 4px 12px;
}

.force-mobile #viewprofile #profile-signature p {
  text-align: right;
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  .force-mobile #pun,
  .force-mobile .punbb,
  body.force-mobile,
  html.force-mobile {
    width: 100%;
    height: 100%;
    padding: 0;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    overflow-wrap: break-word;
    float: none;
    margin: auto;
  }

  .force-mobile #pun-searchtopics .tc2 {
    width: 100%;
    display: flex;
    font-size: 11px;
    margin-left: 5px;
  }

  body.force-mobile,
  html.force-mobile body {
    position: relative;
    background-position: center 0;
    overflow: hidden scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
  }

  .force-mobile #pun {
    max-width: 540px;
    padding: 0;
    border-radius: 0;
    background: var(--base-bg2);
    position: relative;
    border: none;
  }

  .force-mobile .punbb .pa-avatar:after {
    display: none;
  }

  .force-mobile #pun-navlinks .container li a,
  .force-mobile #pun-navlinks .container li a:hover,
  .force-mobile #pun-ulinks {
    margin: 0 5px;
  }

  .force-mobile #pun-ulinks:before {
    content: '\f0c9';
    font-family: Font Awesome\6 Pro;
    font-size: 25px;
    color: var(--accent);
  }

  .force-mobile #pun-ulinks .container {
    top: 42px;
    padding: 10px;
    margin: 0;
    left: 0;
    width: 140px;
    height: auto;
    background: var(--profile-bg);
    border-radius: var(--ks-radius-sm);
    border: none;
    display: none;
  }

  .force-mobile #pun-ulinks li {
    display: block;
    margin-bottom: 5px;
    background: var(--accent);
    text-align: center;
    border-radius: var(--ks-radius-xs);
    transition:
      color 0.5s linear 0s,
      background-color 0.5s linear 0s,
      border-color 0.5s linear 0s;
  }

  .force-mobile #pun-ulinks li a {
    display: block;
    margin: 0;
    color: var(--navi-link);
    font-size: 12px;
    padding: 0;
  }

  .force-mobile #pun-title table {
    margin: auto;
    box-sizing: border-box;
    background: var(--mob-head);
    width: 100%;
    height: 268px;
    display: flex;
    align-items: center;
    border-bottom: none;
    justify-content: center;
  }

  .force-mobile #pun-about {
    display: none;
  }

  .force-mobile #pun-ulinks {
    margin: -40px 0 0 21px;
    position: sticky;
    top: 9px;
    left: 0;
    line-height: 32px;
    border: 0;
    z-index: 9;
    width: 30px;
  }

  .force-mobile #pun-ulinks ul {
    display: none;
    z-index: 10000;
    position: absolute;
    top: 47px;
    right: 0;
  }

  .force-mobile #pun-ulinks:focus ul,
  .force-mobile #pun-ulinks:hover ul,
  .force-mobile #pun-ulinks > span.notify-bubble {
    display: block;
  }

  .force-mobile #pun-navlinks .container li {
    padding: 0 1px;
    margin: 0;
    line-height: 19px;
  }

  .force-mobile #navextra10,
  .force-mobile #navextra2,
  .force-mobile #navextra3,
  .force-mobile #navextra4,
  .force-mobile #navextra5,
  .force-mobile #navextra6,
  .force-mobile #navextra7,
  .force-mobile #navextra8,
  .force-mobile #navextra9,
  .force-mobile #navrules {
    display: none;
  }

  .force-mobile #pun-navlinks .container li a {
    display: inline-block;
    padding: 0;
    font-family: FontAwesome;
    font-size: 20px;
  }

  .force-mobile #pun-status span {
    white-space: break-spaces;
    margin-right: 0.5em;
  }

  .force-mobile #pun-status .item3.status-right {
    display: none !important;
  }

  .force-mobile #stylelist {
    top: 23px;
    width: 100%;
    left: 0;
    gap: 4px;
    justify-content: center;
  }

  .force-mobile .kindred-quote {
    position: absolute;
    width: 100%;
    font-family: var(--sec-font);
    text-align: center;
    text-transform: uppercase;
    font-style: italic;
    font-size: 9px;
    letter-spacing: 0.5px;
    left: 0;
    top: 214px;
    color: var(--bord);
  }

  .force-mobile #pun-status .container {
    text-align: left;
    position: relative;
    box-sizing: border-box;
    top: -2px;
    left: 0;
    width: 100%;
    background: var(--podform);
    padding: 5px 10px;
    height: auto;
    display: flex;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    border: var(--ks-border-default);
    border-width: 1px 0;
    border-radius: 0;
  }

  .force-mobile #pun-crumbs1 p.container,
  .force-mobile #pun-crumbs2 p.container {
    text-align: left;
    margin: 0 10px;
    height: auto;
    padding: 0;
    box-sizing: border-box;
  }

  .force-mobile #pun-crumbs1 p.container {
    margin: 10px;
  }

  .force-mobile .punbb .linkst {
    height: 20px;
    font-size: 8px;
    text-transform: uppercase;
    align-items: center;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0 0 10px;
  }

  .force-mobile .punbb .linksb {
    gap: 10px;
    display: flex;
    align-items: flex-start;
    flex-flow: row-reverse wrap;
    justify-content: space-between;
    margin: 12px 10px 0;
  }

  .force-mobile .forum td.tcr,
  .force-mobile .punbb tbody.hasicon td.tcl {
    padding: 0;
    display: block;
    width: 100%;
  }

  .force-mobile .forum td.tcr {
    margin-bottom: 0;
    text-align: right;
    margin-top: 2px;
  }

  .force-mobile #pun-index td div.tclcon,
  .force-mobile .pf-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .force-mobile .pf-wrap {
    text-align: right;
  }

  .force-mobile #pun-stats .container {
    padding: 15px;
    margin: 0;
    border-width: 1px 0;
    border-radius: 0;
  }

  .force-mobile #pun-stats li.item1,
  .force-mobile #pun-stats li.item2 {
    float: none;
    margin-bottom: 0;
  }

  .force-mobile #pun-stats li.item3,
  .force-mobile #pun-stats li.item4 {
    text-align: left;
    margin-bottom: 0;
  }

  .force-mobile #pun-crumbs2 .container {
    margin-left: 20px;
    margin-top: 0;
  }

  .force-mobile .post-author {
    float: none;
    margin: 0;
    border-width: 0;
    width: 100%;
    border-radius: 0;
  }

  .force-mobile #pun-main .post-author ul {
    padding: 0;
  }

  .force-mobile #pun-viewtopic .post h3 {
    border-radius: 0;
  }

  .force-mobile .punbb .post h3 strong {
    float: right;
    width: auto;
    text-align: center;
    font-weight: 400;
    margin-top: 0;
  }

  .force-mobile .post-author li {
    text-align: left;
  }

  .force-mobile .punbb .modmenu .container {
    text-transform: none;
    margin: 0 10px;
  }

  .force-mobile .pa-avatar img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 60px;
    height: 60px;
  }

  .force-mobile .punbb .post-links ul {
    padding: 0;
    height: auto;
    border-top-style: dashed;
    border-top-width: 1px;
    background: transparent;
    font-size: 11px;
    font-family: var(--main-font);
    font-weight: 400;
    margin: 10px 0;
    display: flex;
  }

  .force-mobile .punbb .post .container {
    padding-right: 0;
  }

  .force-mobile .punbb .post-box {
    padding: 10px 10px 0;
  }

  .force-mobile .punbb .post-body {
    margin-left: 0;
  }

  .force-mobile .punbb .formal .container {
    padding: 0;
  }

  .force-mobile .punbb fieldset {
    padding: 0 10px;
  }

  .force-mobile #pun-viewforum .main table {
    table-layout: fixed;
    width: 100%;
    padding: 10px;
  }

  .force-mobile #pun-searchtopics .main .tcl,
  .force-mobile #pun-viewforum .main .tcl {
    width: 100%;
    padding: 0;
  }

  .force-mobile #post-form legend,
  .force-mobile #pun-break1,
  .force-mobile #pun-break2,
  .force-mobile #pun-break3,
  .force-mobile #pun-break4,
  .force-mobile .category .tc2,
  .force-mobile .category .tc3,
  .force-mobile .category th,
  .force-mobile .forum .tc2,
  .force-mobile .forum .tc3,
  .force-mobile .forum th {
    display: none;
    width: 0;
  }

  .force-mobile #main-reply {
    width: 100%;
  }

  .force-mobile #post-form .formsubmit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) repeat(3, 38px);
    gap: 10px 8px;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 0;
  }

  :root:not([data-style='summer']) body.force-mobile #post-form .formsubmit,
  :root:not([data-style='summer']).force-mobile #post-form .formsubmit {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    margin: 14px auto 0;
  }

  .force-mobile #post-form .formsubmit .hotkeys-trigger {
    display: none;
  }

  .force-mobile #post-form .formsubmit .button,
  .force-mobile #post-form .formsubmit button {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 38px;
    min-height: 38px;
    margin: 0;
    justify-content: center;
    white-space: nowrap;
  }

  .force-mobile #post-form .formsubmit .submit {
    grid-column: 1;
    grid-row: 1;
  }

  .force-mobile #post-form .formsubmit .preview {
    grid-column: 2;
    grid-row: 1;
  }

  .force-mobile #post-form .formsubmit .ks-btn-change-group,
  .force-mobile #post-form .formsubmit .ks-btn-create-page,
  .force-mobile #post-form .formsubmit .ks-btn-fill-profile {
    grid-row: 1;
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    margin-left: 0;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    text-indent: -999px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px 16px;
  }

  .force-mobile #post-form .formsubmit .ks-btn-fill-profile {
    grid-column: 3;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff6ec' d='M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256m-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h258.1c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l58.8-58.8c-31.4-19.9-68.8-31.6-109.3-31.6zm267.2-16.4c-7.7-7.7-20.2-7.7-27.9 0l-94.3 94.3c-2.5 2.5-4.3 5.7-5.2 9.2l-15 60.1c-1.7 6.8 4.4 12.9 11.2 11.2l60.1-15c3.5-.9 6.7-2.7 9.2-5.2l94.3-94.3c7.7-7.7 7.7-20.2 0-27.9z'/%3E%3C/svg%3E");
  }

  .force-mobile #post-form .formsubmit .ks-btn-create-page {
    grid-column: 4;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff6ec' d='M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0zm192 0v128h128zm-64 240c13.3 0 24 10.7 24 24v48h48c13.3 0 24 10.7 24 24s-10.7 24-24 24h-48v48c0 13.3-10.7 24-24 24s-24-10.7-24-24v-48h-48c-13.3 0-24-10.7-24-24s10.7-24 24-24h48v-48c0-13.3 10.7-24 24-24'/%3E%3C/svg%3E");
  }

  .force-mobile #post-form .formsubmit .ks-btn-change-group {
    grid-column: 5;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='%23fff6ec' d='M96 128a128 128 0 1 1 256 0 128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M504 312v-48h-48c-13.3 0-24-10.7-24-24s10.7-24 24-24h48v-48c0-13.3 10.7-24 24-24s24 10.7 24 24v48h48c13.3 0 24 10.7 24 24s-10.7 24-24 24h-48v48c0 13.3-10.7 24-24 24s-24-10.7-24-24'/%3E%3C/svg%3E");
  }

  .force-mobile #form-buttons td {
    padding: 0 5px;
    display: inline-block;
    width: 27px;
    background-image: none;
    position: relative;
    height: 27px;
    margin: 0;
  }

  .force-mobile #button-files_rusff {
    display: none;
  }

  .force-mobile #form-buttons td:hover {
    background-color: transparent;
  }

  .force-mobile #notify-settings {
    display: none;
  }

  .force-mobile #pun-messages .tclcon {
    padding: 10px 0 10px 17px;
  }

  .force-mobile #pun-messages .user-avatar {
    display: none;
  }

  .force-mobile #pun-messages table div.icon,
  .force-mobile #pun-messages tr.inew div.icon {
    margin-top: 13px;
  }

  .force-mobile #profile input,
  .force-mobile #profile select,
  .force-mobile #punbbsearch input,
  .force-mobile #punbbsearch select,
  .force-mobile #register input,
  .force-mobile #register select {
    max-width: 200px;
  }

  .force-mobile #pun-modviewforum .main .tcl,
  .force-mobile #pun-searchtopics .main .tcl,
  .force-mobile #pun-userlist .main .tcl {
    background-color: transparent;
    width: 20%;
  }

  .force-mobile #pun-userlist .user-avatar {
    display: none;
  }

  .force-mobile #pun-userlist .usertable .container {
    padding: 0 0.3em 2.3em;
    border-top: none;
  }

  .force-mobile #pun-searchtopics .main .tc2,
  .force-mobile #pun-userlist .main .tc2 {
    width: 15%;
  }

  .force-mobile #pun-searchtopics table {
    display: block;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .force-mobile #pun-searchtopics thead {
    display: none;
  }

  .force-mobile #pun-searchtopics tbody.hasicon {
    display: block;
    width: 100%;
  }

  .force-mobile #pun-searchtopics tbody.hasicon tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'topic' 'forum' 'last';
    gap: 8px;
    box-sizing: border-box;
    width: calc(100% - 20px);
    height: auto;
    margin: 10px;
    padding: 14px;
    overflow: visible;
    background: var(--quote);
    border: var(--ks-border-default);
    border-radius: var(--ks-radius-sm);
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcl {
    grid-area: topic;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcl .intd {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    width: 100%;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcl div.icon {
    float: none;
    margin: 2px 0 0;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcl .tclcon {
    display: block;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tc2 {
    grid-area: forum;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0 0 0 30px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 11px;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tc3 {
    display: none;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcr {
    grid-area: last;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    text-align: right;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcr .user-avatar {
    display: none;
  }

  .force-mobile #pun-searchtopics tbody.hasicon td.tcr a,
  .force-mobile #pun-searchtopics tbody.hasicon td.tcr span.byuser {
    display: inline;
    text-align: right;
  }

  .force-mobile #BookmCntToggle {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 20px;
    opacity: 0.7;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.3s ease-out;
    top: -142px;
    display: none;
  }

  .force-mobile #tags .container {
    position: absolute;
    right: 0;
    top: 83px;
    left: 0;
    z-index: 2;
    width: 350px;
    padding: 10px;
    box-sizing: border-box;
  }

  .force-mobile #pun-debug h2,
  .force-mobile #pun-main h1,
  .force-mobile #pun-main h2,
  .force-mobile .punbb .section h2 {
    margin: 0 0 10px;
    display: none;
  }

  .force-mobile .post-img-Sp {
    width: 140px;
    margin: 10px 6px 0;
    display: none;
  }

  .force-mobile #form-buttons tr {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
  }

  .force-mobile #pun-main .category h2,
  .force-mobile #pun-stats h2 {
    margin: 0;
    text-align: center;
    box-shadow: none;
    border-radius: 0;
    display: flex;
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
    border-width: 0;
    background: transparent;
    height: 30px;
  }

  .force-mobile #pun-index .category table tr {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    margin: 0 20px;
    position: relative;
    overflow: visible;
  }

  .force-mobile #pun-index .category table tr + tr {
    margin: 15px 20px;
  }

  .force-mobile #pun-index .tcl h3 {
    text-align: left;
    height: auto;
    display: block;
    margin-top: 0;
    letter-spacing: 0.5px;
    font-weight: 400;
  }

  .force-mobile .punbb .user-avatar {
    margin: 1px 0 2px 20px;
    float: right;
    display: none;
  }

  .force-mobile #pun-viewforum .tcr {
    position: relative;
    display: block;
    width: 100%;
    gap: 0 10px;
    align-items: center;
  }

  .force-mobile #pun-announcement .container .html-box a {
    display: none;
  }

  .force-mobile #form-buttons table,
  .force-mobile #form-buttons tbody,
  .force-mobile #form-buttons tr {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
  }

  .force-mobile #pun-index .tcr {
    width: 100%;
    display: block;
    text-align: right;
    margin-top: 10px;
  }

  .force-mobile #pun-navlinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    text-transform: lowercase;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    top: -2px;
    background: var(--profile-bg) center/cover;
    height: 45px;
    border: var(--ks-border-dark);
    border-width: 1px 0;
    border-radius: 0;
  }

  .force-mobile #pun:before {
    display: none;
  }

  .force-mobile #pun-navlinks .container {
    padding: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0;
  }

  .force-mobile #pun-index .category h2 span,
  .force-mobile #pun-stats h2 span {
    font-size: 24px;
    justify-content: center;
  }

  .force-mobile .punbb .post h3 span {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: space-between;
    margin: 0 10px;
  }

  .force-mobile #pun-stats h2 span {
    font-size: 16px;
  }

  .force-mobile #pun-mod .category .tc2 {
    display: block;
    width: auto;
  }

  .force-mobile #pun-navlinks .container li a span {
    font-size: 0;
  }

  .force-mobile #pun-navlinks li#navindex > a:before {
    content: '\f015';
  }

  .force-mobile #pun-navlinks li#navuserlist > a:before {
    content: '\f0c0';
  }

  .force-mobile #pun-navlinks li#navsearch > a:before {
    content: '\f002';
  }

  .force-mobile #pun-navlinks li#navprofile > a:before {
    content: '\f2bd';
  }

  .force-mobile #pun-navlinks li#navpm > a:before {
    content: '\f0e0';
  }

  .force-mobile #pun-navlinks li#navadmin > a:before {
    content: '\f013';
  }

  .force-mobile #pun-navlinks li#navlogout > a:before {
    content: '\f08b';
  }

  .force-mobile #pun-navlinks li#navregister > a:before {
    content: '\f234';
  }

  .force-mobile #pun-navlinks li#navlogin > a:before {
    content: '\f02e';
  }

  .force-mobile #pun-navlinks li#navpr_1 > a:before {
    content: '\f1d8';
  }

  .force-mobile #pun-navlinks li#navpr_2 > a:before,
  .force-mobile #pun-navlinks li#navprofiles > a:before {
    content: '\f02d';
  }

  .force-mobile #pun-navlinks li#navextra1 > a:before {
    content: '\f02e';
    font-family: Font Awesome\6 Pro;
    font-style: normal;
    font-size: 20px;
  }

  .force-mobile #pun-navlinks li#navextraBL > a:before {
    content: '\f05e';
    font-family: Font Awesome\6 Pro;
    font-style: normal;
    font-size: 20px;
  }

  .force-mobile #pun-index .category .container {
    border-radius: 0;
    border-width: 1px 0;
  }

  .force-mobile #pun-index .tcl h3 a {
    font-size: 17px;
  }

  .force-mobile .pf-text {
    margin-top: 3px;
  }

  .force-mobile .forum tr {
    margin: 10px 0;
    display: flex;
    gap: 0;
    font: 400 11px var(--main-font);
    background: var(--quote);
    text-transform: lowercase;
    border-radius: var(--ks-radius-sm);
    padding: 10px;
    height: auto;
    flex-direction: column;
  }

  .force-mobile .pa-author a {
    font-weight: 400;
    padding: 4px 10px;
    border-radius: var(--radius);
  }

  .force-mobile .pa-fld2 {
    text-align: center;
  }

  .force-mobile .post-author li.pa-fld3 {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  .force-mobile .post-author li.pa-fld3 > pers-plah {
    display: block;
  }

  .force-mobile .prof-wrap {
    background: var(--quote);
    margin: 10px 0;
    border-radius: var(--ks-radius-xs);
    border: 1px solid #8f8d8d63;
    box-shadow: 6px 7px 10px #91909042;
  }

  .force-mobile #form-buttons {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
  }

  .force-mobile #plng {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .force-mobile #form-buttons table tr {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    padding: 0;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .force-mobile #pun-adnav ul {
    display: flex;
    flex-wrap: wrap;
  }

  .force-mobile #pun-adnav {
    float: none;
    width: 100%;
    margin-left: 0;
  }

  .force-mobile .adminmain {
    padding-left: 0;
    margin-bottom: 0;
  }

  .force-mobile .punbb {
    height: auto;
  }

  .force-mobile .punbb-admin .adminmain {
    padding: 0;
  }

  .force-mobile .punbb-admin #pun-adnav {
    float: none;
    clear: both;
    width: 100%;
    margin-left: 0;
    display: block;
    box-sizing: border-box;
  }

  .force-mobile .punbb-admin {
    width: 100%;
    max-width: 540px;
    background: #c9c7c4;
  }

  .force-mobile #pun-admain fieldset {
    border-color: transparent;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .force-mobile .admin-advert-block {
    width: 100%;
    height: 60px;
  }

  .force-mobile #pun-admain fieldset .handle,
  .force-mobile #pun-admain fieldset p {
    border-left-width: 10em;
  }

  .force-mobile #pun-admain .adlabel {
    width: 11em;
    margin-left: -10em;
  }

  .force-mobile #pun-stats .statsinfo {
    display: flex;
    margin-bottom: 0;
    margin-top: 0;
    justify-content: flex-start;
    padding: 10px;
    border-radius: var(--ks-radius-xs);
    flex-wrap: wrap;
    gap: 5px;
  }

  .force-mobile #pun-title table:before {
    display: none;
    content: 'kindred spirits';
  }

  .force-mobile #pun-ulinks.scroll_navi .container {
    display: none;
  }

  .force-mobile #pun-ulinks.scroll_navi:focus ul,
  .force-mobile #pun-ulinks.scroll_navi:hover ul {
    display: block;
    background: var(--profile-bg);
    border-radius: var(--ks-radius-sm);
  }

  .force-mobile #pun-navlinks.scroll_navi {
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--profile-bg) center/cover;
    height: 57px;
    left: auto;
    border-radius: 0;
    margin-left: -30px;
  }

  .force-mobile #pun-navlinks.scroll_navi .container {
    top: 0;
    height: 24px;
    margin-top: 0;
  }

  .force-mobile .activees,
  .force-mobile .activees2 {
    --promo-size: 38px;
    --promo-gap-x: 10px;
    position: absolute;
    top: 20px;
    left: 30px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px var(--promo-gap-x);
    width: -moz-fit-content;
    width: fit-content;
    max-width: 182px;
    height: auto;
    min-height: var(--promo-size);
  }

  .force-mobile .activees2 {
    right: 30px;
    left: auto;
    flex-direction: row-reverse;
  }

  .force-mobile #pun-navlinks.nav-scrolled {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-transform: uppercase;
    justify-content: flex-end;
    width: 100%;
    z-index: 9;
    background: var(--navi-bg);
    height: 50px;
    border-radius: 0;
    backdrop-filter: none;
    left: 0;
    position: sticky;
    top: 0;
    margin: -3px 0 0 -30px;
    border: var(--ks-border-dark);
    border-width: 1px;
  }

  .force-mobile .forum-name span {
    text-shadow: 0 0 10px #0000004d;
    background: transparent;
    padding: 0 20px;
    border-radius: var(--ks-radius-lg);
    font-size: 10vw;
  }

  .force-mobile .forum-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    font-family: var(--sec-font);
    font-size: 40px;
    text-transform: uppercase;
    color: var(--tab-text);
    font-weight: 400;
    padding: 0 25px;
    left: 50%;
    transform: translateX(-50%);
    top: 86px;
    width: 100%;
  }

  .force-mobile label.fm-toggle {
    display: flex;
    justify-content: center;
    margin-top: -21px;
    position: relative;
    gap: 6px;
  }

  .force-mobile .kindred-info {
    top: 60px;
    padding: 2px 16px;
    display: none;
  }

  .force-mobile .scroll-rail {
    display: none;
  }

  .force-mobile tr.tr-divider {
    display: block;
    text-transform: uppercase;
    font-family: var(--sec-font);
    letter-spacing: 0.6px;
    padding: 0 10px;
  }

  .force-mobile .activees2:before,
  .force-mobile .activees:before {
    content: '';
    top: calc(100% + 6px);
    left: 50%;
    width: -moz-max-content;
    width: max-content;
    max-width: calc(100% + 20px);
    font-size: 14px;
    line-height: 1;
    transform: translateX(-50%);
  }

  .force-mobile .spirit-clock {
    position: absolute;
    width: 105.5px;
    height: 105.5px;
    left: auto;
    top: 145px;
    right: 20px;
  }

  .force-mobile .sclock {
    --cx: 52.25px;
    --cy: 52.25px;
    background: url(https://forumstatic.ru/files/001c/8d/fd/89606.webp);
    width: 104.5px;
    height: 104.5px;
    background-size: cover;
    position: relative;
  }

  .force-mobile .sclock-aw {
    --w: 8px;
    --h: 24.5px;
    --pivot-x: 4px;
    --pivot-y: 24.5px;
    z-index: 2;
  }

  .force-mobile .sclock-ar,
  .force-mobile .sclock-aw {
    position: absolute;
    width: var(--w);
    height: var(--h);
    left: calc(var(--cx) - var(--pivot-x));
    top: calc(var(--cy) - var(--pivot-y));
    transform-origin: var(--pivot-x) var(--pivot-y);
    will-change: transform;
  }

  .force-mobile .sclock-ar {
    --w: 10px;
    --h: 35.5px;
    --pivot-x: 5px;
    --pivot-y: 35.5px;
    z-index: 3;
  }

  .force-mobile .author-wrap {
    margin: 10px 20px;
    border-radius: 0;
    background: var(--kndr-img) top center/cover;
    display: flex;
    gap: 10px;
    padding: 5px 10px;
    width: auto;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: row-reverse;
    box-shadow: 6px 5px 10px #0000;
    border: var(--ks-border-dark);
  }

  .force-mobile .pa-title {
    font-size: 10px;
    margin: 33px 0 0;
  }

  .force-mobile .pa-author {
    margin: 21px 0 0 103px;
    font-size: 20px;
    display: flex;
    gap: 20px;
    position: absolute;
  }

  .force-mobile .pa-fld1 {
    display: none;
  }

  .force-mobile .pa-fld6 {
    width: 100%;
    overflow: hidden;
    height: 90px;
    border-radius: 0;
  }

  .force-mobile .pa-fld6 img {
    border-radius: 0;
    height: 90px;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 0.5;
  }

  .force-mobile .punbb .post .post-author .pa-avatar {
    width: 60px;
  }
}

.settings-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  max-width: 92vw;
  background: transparent;
  color: var(--tab-text);
  border-right: 1px solid var(--dark-bord);
  box-shadow: 0 10px 30px rgb(0 0 0/12%);
  transform: translateX(-104%);
  transition: transform 0.28s ease;
  z-index: 1550;
  padding: 60px 14px 20px;
  box-sizing: border-box;
  overflow-y: auto;
  font: 14px/1.45 var(--main-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  backdrop-filter: blur(18px);
}

.settings-menu::-webkit-scrollbar {
  width: 8px;
}

.settings-menu::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: var(--ks-radius-md);
}

.settings-menu::-webkit-scrollbar-track {
  background: transparent;
}

.settings-menu.open {
  transform: translateX(0);
}

.settings-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0/50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  z-index: 1500;
}

.settings-menu__overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.settings-menu__close,
.settings-menu__toggle {
  position: fixed;
  top: 0px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: var(--ks-border-dark);
  border-radius: var(--ks-radius-sm);
  padding: 0;
  cursor: pointer;
  z-index: 9999999 !important;
  box-shadow: 0 2px 8px rgb(0 0 0/12%);
}

.settings-menu__toggle {
  left: 12px;
  top: 10px;
  background: var(--dark-bord);
}

.settings-menu__close {
  right: 12px;
  background: transparent;
  backdrop-filter: blur(18px);
}

.settings-menu__close:hover,
.settings-menu__toggle:hover {
  background: var(--accent2);
}

.settings-menu__close:focus-visible,
.settings-menu__section li:focus-visible,
.settings-menu__section li > a:focus-visible,
.settings-menu__toggle:focus-visible {
  outline: 2px solid #0056b3;
  outline-offset: 2px;
}

.settings-menu__close i,
.settings-menu__toggle i {
  font-size: 20px;
}

.settings-menu__toggle i {
  color: var(--tab-text);
}

.settings-menu__close i {
  color: #fff;
}

.settings-menu__toggle--hidden {
  display: none;
}

.settings-menu__section {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--dark-bord);
}

.settings-menu__section:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.settings-menu__section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--tab-text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.settings-menu__section > ul,
.settings-menu__submenu {
  list-style: none;
  display: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.settings-menu__section > ul {
  padding: 0;
  margin: 0;
}

.settings-menu__item--has-children.open > .settings-menu__submenu,
.settings-menu__item--has-children:hover > .settings-menu__submenu,
.settings-menu__section.open > ul {
  display: block;
  opacity: 1;
}

.settings-menu__section li {
  border-radius: var(--ks-radius-xxs);
  line-height: 1.35;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  cursor: pointer;
  padding: 8px 10px;
}

.settings-menu__section li > a {
  display: block;
  color: inherit;
  text-decoration: none;
  margin: -8px -10px;
  padding: 8px 10px;
  border-radius: var(--ks-radius-xxs);
}

.settings-menu__section li > a:active,
.settings-menu__section li > a:hover {
  background: var(--accent2);
}

.settings-menu__section li:active,
.settings-menu__section li:hover {
  border: var(--ks-border-dark);
}

.settings-menu__section li:hover {
  background: var(--sec-text);
}

.settings-menu__section li:active {
  background: var(--text);
}

.settings-menu__item--has-children {
  position: relative;
}

.settings-menu__item--has-children > .settings-menu__expand {
  background: none;
  border: none;
  margin-left: 6px;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.settings-menu__item--has-children > .settings-menu__expand i {
  transition: transform 0.2s ease;
}

.settings-menu__item--has-children.open > .settings-menu__expand i {
  transform: rotate(90deg);
}

.settings-menu__submenu {
  padding-left: 14px;
  margin: 6px 0 0;
}

@media screen and (width <=992px) and (hover: none) and (pointer: coarse) {
  .settings-menu {
    width: 280px;
  }
}

@media screen and (width <=768px) and (hover: none) and (pointer: coarse) {
  .settings-menu {
    width: 86vw;
    max-width: none;
    border-right: 0;
    box-shadow: 0 12px 36px rgb(0 0 0/18%);
    padding-left: calc(14px + env(safe-area-inset-left, 0));
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0));
  }

  .settings-menu__toggle {
    bottom: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
    top: auto;
  }

  .settings-menu__close i,
  .settings-menu__toggle i {
    font-size: 22px;
  }

  .settings-menu__close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-menu,
  .settings-menu__overlay {
    transition: none;
  }
}

@media print {
  .settings-menu,
  .settings-menu__close,
  .settings-menu__overlay,
  .settings-menu__toggle {
    display: block;
  }
}

#navpm .unreads,
#notify-link .unreads {
  border-radius: var(--ks-radius-xs) !important;
  font:
    700 11px Tahoma,
    Verdana !important;
  cursor: pointer !important;
  color: var(--bt-bg) !important;
  background: var(--accent2) !important;
}

.font-resizer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0.5em;
  position: relative;
  width: 100%;
  justify-content: flex-start;
}

.pa-respect img {
  display: none;
}

.icon[data-new-topics]:before,
.subforums span[data-new-topics]:before {
  background: var(--accent) !important;
  color: var(--tab-text);
  left: -22px;
}

#pun-messages .user-avatar {
  display: none;
}

h2.chars_title {
  font-family: var(--sec-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
  text-align: center;
  width: auto;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 20px;
}

button.chars__view-btn {
  background: var(--accent);
  border: var(--ks-border-accent);
  border-radius: var(--ks-radius-xs);
  padding: 5px 10px;
  text-transform: uppercase;
  font-family: var(--main-font);
  font-size: 11px;
  color: var(--bt-bg);
}

button.chars__view-btn.is-active {
  background: var(--accent2);
}

.chars__views {
  display: flex;
  gap: 10px;
  margin: 10px 0;
  justify-content: center;
}

.chars__filters {
  padding: 10px 20px;
}

.chars__card,
.chars__filters {
  background: var(--quote);
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xs);
}

.chars__card {
  font-family: var(--main-font);
}

.chars__card-title {
  font-family: var(--sec-font);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bt-bg);
  padding: 2px 10px;
  border-radius: var(--ks-radius-xs);
}

.chars__card.is-related {
  border-color: var(--accent);
  box-shadow: none;
}

.chars__col {
  background: var(--quote);
  border-radius: var(--ks-radius-xs);
  border: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chars__col-title {
  background: var(--accent);
  border-radius: var(--ks-radius-xs);
  padding: 5px;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  color: var(--bt-bg);
  font-family: var(--main-font);
}

section.chars__sec {
  align-items: center;
  background: var(--htm-clr);
  border-radius: var(--ks-radius-xs);
  border: var(--ks-border-default);
  padding: 10px 20px;
}

h4.chars__sec-title {
  font-family: var(--sec-font);
  font-size: 15px;
  color: var(--accent2);
  line-height: 10px;
}

.chars__lines {
  margin: 10px;
  font-family: var(--main-font);
}

span.chars__line-left {
  font-weight: 700;
}

.chars__mini {
  border-radius: var(--ks-radius-md);
  background: var(--quote);
  border: var(--ks-border-default);
}

.chars__mini-grid {
  margin-top: 10px;
}

.chars__mini-name {
  word-break: break-all;
  text-align: center;
  font-family: var(--main-font);
}

.chars__mini-role {
  text-align: center;
}

.font-resizer button {
  border-radius: 3px;
  cursor: pointer;
  color: var(--text);
}

.font-resizer button,
.kindred-aca {
  background: var(--quote);
  border: var(--ks-border-default);
}

.kindred-aca {
  border-radius: var(--ks-radius-xs);
}

.ka-head {
  text-transform: none;
  background: var(--kndr-img) top/cover;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--tab-text);
  align-items: center;
  border-radius: 5px 5px 0 0;
  gap: 0;
  font-family: var(--sec-font);
  font-size: 36px;
  text-shadow: 3px 0 10px #4646463b;
}

.ka-head span {
  text-transform: uppercase;
}

.ka-head span,
.ka-text {
  font-family: var(--main-font);
  font-size: 13px;
}

.ka-text {
  padding: 20px 30px;
  line-height: 20px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.ka-text text {
  border: var(--ks-border-default);
  background: var(--htm-clr);
  border-radius: var(--ks-radius-xs);
  padding: 10px 20px;
}

.custom_tag_charcard.char-card,
.custom_tag_charcard.char-card * {
  box-sizing: border-box;
}

.custom_tag_charcard.char-card {
  --char-card-bg: color-mix(in srgb, var(--htm-clr) 82%, var(--quote));
  --char-card-bg-soft: color-mix(in srgb, var(--quote) 84%, transparent);
  --char-card-panel: color-mix(in srgb, var(--quote) 88%, var(--podform));
  --char-card-panel-soft: color-mix(in srgb, var(--podform) 86%, var(--quote));
  --char-card-border: color-mix(in srgb, var(--bord) 82%, transparent);
  --char-card-border-strong: color-mix(
    in srgb,
    var(--dark-bord) 52%,
    var(--bord)
  );
  --char-card-text: var(--text);
  --char-card-muted: color-mix(in srgb, var(--sec-text) 78%, transparent);
  --char-card-title: var(--accent2);
  --char-card-accent: var(--accent);
  --char-card-radius: var(--ks-radius-lg);
  --char-card-radius-sm: var(--ks-radius-sm);
  --char-card-gap: clamp(10px, 1.4vw, 16px);
  --char-card-pad: clamp(18px, 2.4vw, 30px);
  --char-card-image-width: clamp(170px, 21vw, 220px);
  --char-card-image-height: clamp(212px, 26.25vw, 275px);
  --char-card-image-mobile-width: clamp(180px, 68vw, 230px);
  --char-card-image-mobile-height: clamp(225px, 85vw, 288px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--char-card-gap);
  width: min(100%, 920px);
  margin: 0 auto 1.2em;
  padding: var(--char-card-pad);
  overflow: hidden;
  color: var(--char-card-text);
  font: 400 13px/1.6 var(--main-font);
  text-align: left;
  background:
    radial-gradient(
      circle at 12% 0,
      color-mix(in srgb, var(--char-card-accent) 14%, transparent),
      transparent 32%
    ),
    linear-gradient(135deg, var(--char-card-bg), var(--char-card-bg-soft));
  border: 1px solid var(--char-card-border);
  border-radius: var(--char-card-radius);
  box-shadow: var(--shadow2);
}

.custom_tag_charcard.char-card:before {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--char-card-border) 70%, transparent);
  border-radius: calc(var(--char-card-radius) - 6px);
  pointer-events: none;
}

.custom_tag_charcard.char-card p,
.punbb .post-content .custom_tag_charcard.char-card p {
  margin: 0;
  padding: 0;
  line-height: inherit;
}

.custom_tag_charcard.char-card > * {
  min-width: 0;
}

.custom_tag_charcard.char-card
  > :is(.char-field, .char-face-proto, .char-pair, .char-occupation) {
  position: relative;
  margin: 0;
  padding: 16px;
  background: var(--char-card-panel);
  border: 1px solid var(--char-card-border);
  border-radius: var(--char-card-radius-sm);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tab-text) 10%, transparent);
}

.custom_tag_charcard.char-card .char-face-fandom:before,
.custom_tag_charcard.char-card .char-gift-desc:before,
.custom_tag_charcard.char-card .char-gift:before,
.custom_tag_charcard.char-card .char-role:before,
.custom_tag_charcard.char-card .char-status:before,
.custom_tag_charcard.char-card
  > :is(.char-field, .char-face-proto, .char-pair, .char-occupation):before {
  display: block;
  margin: 0 0 7px;
  color: var(--char-card-title);
  font: 400 14px/1.15 var(--sec-font);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.custom_tag_charcard.char-card .char-name-en:before,
.custom_tag_charcard.char-card .char-name-ru:before,
.custom_tag_charcard.char-card .personal-text:before {
  content: none;
}

.custom_tag_charcard.char-card .char-face-proto:before {
  content: 'ïðîòîòèï';
}

.custom_tag_charcard.char-card .char-face-fandom:before {
  content: 'ôàíäîì';
}

.custom_tag_charcard.char-card .char-birthdate:before {
  content: 'äàòà ðîæäåíèÿ';
}

.custom_tag_charcard.char-card .char-age:before {
  content: 'âîçðàñò';
}

.custom_tag_charcard.char-card .char-race:before {
  content: 'ðàñà';
}

.custom_tag_charcard.char-card .char-gender:before {
  content: 'ïîë';
}

.custom_tag_charcard.char-card .char-ability:before {
  content: 'äàð';
}

.custom_tag_charcard.char-card .char-gift:before {
  content: 'íàïðàâëåíèå';
}

.custom_tag_charcard.char-card .char-gift-desc:before {
  content: 'îïèñàíèå';
}

.custom_tag_charcard.char-card .char-pair:before {
  content: 'ðîäñòâåííàÿ äóøà';
}

.custom_tag_charcard.char-card .char-bondlevel:before {
  content: 'óðîâåíü ñâÿçè';
}

.custom_tag_charcard.char-card .char-occupation:before {
  content: 'çàíÿòîñòü';
}

.custom_tag_charcard.char-card .char-status:before {
  content: 'ñòàòóñ';
}

.custom_tag_charcard.char-card .char-role:before {
  content: 'êóðñ / ðîëü';
}

.custom_tag_charcard.char-card .char-appearance:before {
  content: 'âíåøíîñòü';
}

.custom_tag_charcard.char-card .char-bio:before {
  content: 'áèîãðàôèÿ';
}

.custom_tag_charcard.char-card .char-misc:before {
  content: 'äîïîëíèòåëüíî';
}

.custom_tag_charcard.char-card > .char-name-en,
.custom_tag_charcard.char-card > .char-name-ru {
  grid-column: 1/-1;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.custom_tag_charcard.char-card > .char-name-en {
  margin: 0 0 -10px;
  color: var(--char-card-muted);
  font: 500 11px/1.2 var(--main-font);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.custom_tag_charcard.char-card > .char-name-ru {
  color: var(--char-card-title);
  font: 400 clamp(32px, 5vw, 54px) / 1 var(--sec-font);
  letter-spacing: 0.02em;
  text-transform: none;
}

.custom_tag_charcard.char-card .personal-text,
.custom_tag_charpt.personal-text {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom_tag_charcard.char-card > .char-image {
  grid-column: 1/-1;
  justify-self: stretch;
  width: 100%;
  margin: 2px 0 4px;
  padding: 12px 0 16px;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.custom_tag_charcard.char-card > .char-image:before {
  content: '';
  position: absolute;
  top: 50%;
  left: clamp(12px, 6vw, 96px);
  right: clamp(12px, 6vw, 96px);
  z-index: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--char-card-border-strong),
    transparent
  );
  opacity: 0.72;
  pointer-events: none;
}

.custom_tag_charcard.char-card > .char-image p {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  width: 100%;
  min-height: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.custom_tag_charcard.char-card > .char-image br {
  display: none;
}

.custom_tag_charcard.char-card > .char-image img,
.punbb .post-content .custom_tag_charcard.char-card > .char-image img.postimg {
  display: block;
  flex: 0 1 var(--char-card-image-width);
  width: var(--char-card-image-width);
  height: var(--char-card-image-height);
  max-width: min(100%, var(--char-card-image-width));
  max-height: none;
  aspect-ratio: 4/5;
  padding: 6px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  background: var(--char-card-panel-soft);
  border: 1px solid var(--char-card-border-strong);
  border-radius: calc(var(--char-card-radius-sm) + 2px);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px color-mix(in srgb, var(--tab-text) 22%, transparent);
  vertical-align: middle;
}

.custom_tag_charcard.char-card > .char-bondlevel,
.custom_tag_charcard.char-card > .char-face-proto {
  grid-column: span 4;
}

.custom_tag_charcard.char-card
  > :is(.char-birthdate, .char-age, .char-race, .char-gender) {
  grid-column: span 2;
}

.custom_tag_charcard.char-card > .char-ability,
.custom_tag_charcard.char-card > .char-ability:before,
.custom_tag_charcard.char-card > .char-occupation,
.custom_tag_charcard.char-card > .char-pair,
.custom_tag_charcard.char-card > :is(.char-appearance, .char-bio, .char-misc) {
  grid-column: 1/-1;
}

.custom_tag_charcard.char-card > .char-bondlevel:empty {
  display: none;
}

.custom_tag_charcard.char-card
  :is(
    .char-gift,
    .char-gift-desc,
    .char-face-fandom,
    .char-status,
    .char-role
  ) {
  min-width: 0;
  padding: 12px;
  background: var(--char-card-panel-soft);
  border: 1px solid var(--char-card-border);
  border-radius: var(--ks-radius-xs);
}

.custom_tag_charcard.char-card > .char-ability {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.7fr);
  gap: 12px;
}

.custom_tag_charcard.char-card > .char-occupation {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.custom_tag_charcard.char-card > .char-occupation:before {
  grid-column: 1/-1;
  margin-bottom: 0;
}

.custom_tag_charcard.char-card > .char-occupation > p {
  display: none;
}

.custom_tag_charcard.char-card > :is(.char-appearance, .char-bio, .char-misc) {
  padding: 20px clamp(18px, 2.5vw, 28px);
}

.custom_tag_charcard.char-card
  > :is(.char-appearance, .char-bio, .char-misc)
  p {
  text-align: justify;
}

.custom_tag_charcard.char-card
  :is(.char-field, .char-face-proto, .char-pair, .char-occupation)
  a {
  color: var(--char-card-accent);
  font-weight: 700;
}

.custom_tag_charcard.char-card
  :is(.char-field, .char-face-proto, .char-pair, .char-occupation)
  a:hover {
  color: var(--char-card-title);
}

@supports selector(:has(*)) {
  .custom_tag_charcard.char-card:not(:has(> .char-bondlevel:empty))
    > .char-pair {
    grid-column: span 8;
  }
}

:root[data-style='summer'] .custom_tag_charcard.char-card {
  --char-card-bg: color-mix(
    in srgb,
    var(--summer-topic-panel) 88%,
    transparent
  );
  --char-card-bg-soft: color-mix(
    in srgb,
    var(--summer-topic-paper) 74%,
    var(--quote)
  );
  --char-card-panel: color-mix(
    in srgb,
    var(--summer-topic-paper) 84%,
    var(--quote)
  );
  --char-card-panel-soft: color-mix(
    in srgb,
    var(--summer-topic-input) 86%,
    var(--podform)
  );
  --char-card-border: var(--summer-topic-border-soft);
  --char-card-border-strong: var(--summer-topic-border);
  --char-card-title: var(--summer-topic-title);
  --char-card-accent: var(--summer-topic-title-soft);
  box-shadow: var(--summer-topic-shadow);
}

.force-mobile .custom_tag_charcard.char-card {
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1em;
  padding: 14px;
  border-radius: var(--ks-radius-lg);
}

.force-mobile .custom_tag_charcard.char-card:before {
  inset: 8px;
}

.force-mobile .custom_tag_charcard.char-card > * {
  grid-column: 1/-1;
}

.force-mobile
  .custom_tag_charcard.char-card
  > :is(.char-field, .char-face-proto, .char-pair, .char-occupation) {
  padding: 14px;
}

.force-mobile .custom_tag_charcard.char-card > .char-name-en {
  margin-bottom: -6px;
  letter-spacing: 0.16em;
}

.force-mobile .custom_tag_charcard.char-card > .char-name-ru {
  font-size: clamp(27px, 9vw, 38px);
}

.force-mobile .custom_tag_charcard.char-card > .char-image {
  width: 100%;
  margin: 0;
  padding: 8px 0 10px;
}

.force-mobile .custom_tag_charcard.char-card > .char-image:before {
  inset: 4px auto 4px 50%;
  width: 1px;
  height: auto;
  background: linear-gradient(
    180deg,
    transparent,
    var(--char-card-border-strong),
    transparent
  );
}

.force-mobile .custom_tag_charcard.char-card > .char-image p {
  flex-flow: column nowrap;
  gap: 12px;
}

.force-mobile .custom_tag_charcard.char-card > .char-image img,
.force-mobile
  .punbb
  .post-content
  .custom_tag_charcard.char-card
  > .char-image
  img.postimg {
  flex-basis: auto;
  width: var(--char-card-image-mobile-width);
  height: var(--char-card-image-mobile-height);
  max-width: min(100%, var(--char-card-image-mobile-width));
  aspect-ratio: 4/5;
}

.force-mobile .custom_tag_charcard.char-card > .char-ability,
.force-mobile .custom_tag_charcard.char-card > .char-occupation {
  grid-template-columns: 1fr;
}

.force-mobile
  .custom_tag_charcard.char-card
  :is(
    .char-gift,
    .char-gift-desc,
    .char-face-fandom,
    .char-status,
    .char-role
  ) {
  padding: 11px;
}

.force-mobile
  .custom_tag_charcard.char-card
  > :is(.char-appearance, .char-bio, .char-misc) {
  padding: 14px;
}

.force-mobile
  .custom_tag_charcard.char-card
  > :is(.char-appearance, .char-bio, .char-misc)
  p {
  text-align: left;
}

.offer {
  --offer-max: 920px;
  --offer-pad: clamp(18px, 2.4vw, 30px);
  --offer-gap: clamp(14px, 2vw, 22px);
  --offer-section-pad: clamp(16px, 2vw, 22px);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--offer-gap);
  max-width: var(--offer-max);
  margin: 0 auto;
  padding: var(--offer-pad);
  overflow: hidden;
  border: 1px solid var(--offer-border);
  border-radius: var(--offer-radius);
  background:
    var(--offer-glow-top), var(--offer-glow-bottom),
    linear-gradient(135deg, var(--offer-bg), var(--offer-bg-soft));
  color: var(--text);
  box-shadow: var(--offer-shadow);
  font-family: var(--main-font, sans-serif);
  line-height: 1.62;
}

.offer:after,
.offer:before {
  content: '';
  position: absolute;
  pointer-events: none;
}

.offer:before {
  inset: 12px;
  z-index: -1;
  border: 1px solid var(--offer-inner-border);
  border-radius: calc(var(--offer-radius) - 6px);
}

.offer:after {
  right: -76px;
  bottom: -86px;
  z-index: -1;
  width: clamp(180px, 22vw, 270px);
  height: clamp(180px, 22vw, 270px);
  border-radius: 50%;
  background: var(--offer-ornament);
  opacity: 0.68;
}

.offer *,
.offer :after,
.offer :before {
  box-sizing: border-box;
}

.offer p {
  margin: 0;
}

.offer > .custom_tag {
  position: relative;
  z-index: 1;
}

.offer .offertitle {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 2px 8px 4px;
  color: var(--offer-title);
  text-align: center;
}

.offer .offertitle:before {
  content: 'àêöèÿ íà ïåðñîíàæà';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 5px 13px;
  border: 1px solid var(--offer-kicker-border);
  border-radius: var(--ks-radius-pill);
  background: var(--offer-kicker-bg);
  color: var(--offer-kicker-text);
  box-shadow: var(--offer-kicker-shadow);
  font-family: var(--main-font, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.offer .offertitle:after {
  content: '';
  width: min(260px, 58%);
  height: 1px;
  border-radius: var(--ks-radius-pill);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.72;
}

.offer .offertitle p {
  max-width: 820px;
  font-family: var(--sec-font, var(--main-font, serif));
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.02;
  letter-spacing: 0.018em;
  text-wrap: balance;
  text-shadow: var(--offer-title-shadow);
  padding: 0;
}

.offer .offergallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: clamp(10px, 1.6vw, 16px);
  min-width: 0;
}

.offer .offerimg {
  position: relative;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid var(--offer-image-border);
  border-radius: calc(var(--offer-radius) - 8px);
  background: var(--offer-image-bg);
  box-shadow: var(--offer-image-shadow);
  transform: translateZ(0);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease;
}

.offer .offerimg:only-child {
  justify-self: center;
  width: min(260px, 100%);
}

.offer .offerimg:after,
.offer .offerimg:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.offer .offerimg:before {
  z-index: 2;
  border: 1px solid var(--offer-image-highlight);
  border-radius: inherit;
}

.offer .offerimg:after {
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 58%, var(--offer-image-fade)),
    linear-gradient(135deg, var(--offer-image-sheen), transparent 42%);
  opacity: 0.52;
}

.offer .offerimg:hover {
  border-color: var(--accent);
  box-shadow: var(--offer-image-shadow-hover);
  filter: saturate(1.04) contrast(1.02);
  transform: translateY(-2px);
}

.offer .offerimg a,
.offer .offerimg p {
  display: block;
  width: 100%;
  height: 100%;
}

.offer .offerimg .postimg,
.offer .offerimg img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  transition: transform 0.35s ease;
}

.offer .offerimg:hover .postimg,
.offer .offerimg:hover img {
  transform: scale(1.03);
}

.offer .offeridentity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 14px);
  align-items: stretch;
  min-width: 0;
  padding: clamp(12px, 1.6vw, 18px);
  border: 1px solid var(--offer-card-border);
  border-radius: calc(var(--offer-radius) - 8px);
  background: var(--offer-identity-bg);
  box-shadow: var(--offer-panel-shadow);
}

.offer .offerface,
.offer .offername,
.offer .offerrace {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  place-items: center center;
  min-width: 0;
  min-height: 112px;
  padding: 16px 14px;
  border: 1px solid var(--offer-card-border);
  border-radius: calc(var(--offer-radius) - 10px);
  background: var(--offer-identity-cell-bg);
  color: var(--text);
  text-align: center;
}

.offer .offerface:before,
.offer .offername:before,
.offer .offerrace:before {
  content: attr(data-title);
  display: block;
  margin-bottom: 7px;
  color: var(--offer-label);
  font-family: var(--main-font, sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.offer .offerface:not([data-title]):before {
  content: 'Âíåøíîñòü';
}

.offer .offername:not([data-title]):before {
  content: 'Èìÿ è âîçðàñò';
}

.offer .offerrace:not([data-title]):before {
  content: 'Ðàñà / ðîëü';
}

.offer .offerface p,
.offer .offername p,
.offer .offerrace p {
  align-self: center;
  max-width: 100%;
  margin: 0;
  color: inherit;
  font-family: var(--main-font, sans-serif);
  font-size: clamp(14px, 1.15vw, 16px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.38;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.offer .offerface a,
.offer .offername a,
.offer .offerrace a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 48%, transparent);
  text-underline-offset: 3px;
}

.offer .offerface a:hover,
.offer .offername a:hover,
.offer .offerrace a:hover {
  color: var(--accent2);
}

@media screen and (width <=700px) and (hover: none) and (pointer: coarse) {
  .offer .offeridentity {
    grid-template-columns: 1fr;
  }

  .offer .offerface,
  .offer .offername,
  .offer .offerrace {
    min-height: 92px;
  }
}

.offer .offerabout,
.offer .offerextra,
.offer .offergift {
  position: relative;
  display: grid;
  gap: 0.8em;
  min-width: 0;
  padding: var(--offer-section-pad);
  overflow: hidden;
  border: 1px solid var(--offer-section-border);
  border-left: 4px solid var(--accent);
  border-radius: calc(var(--offer-radius) - 10px);
  background:
    linear-gradient(180deg, var(--offer-section-highlight), transparent 36%),
    var(--offer-section-bg);
  box-shadow: var(--offer-panel-shadow);
  color: var(--text);
}

.offer .offerabout:before,
.offer .offerextra:before,
.offer .offergift:before {
  content: attr(data-title);
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 2px;
  padding: 6px 13px;
  border: 1px solid var(--offer-heading-border);
  border-radius: var(--ks-radius-pill);
  background: var(--offer-heading-bg);
  color: var(--tab-text);
  box-shadow: var(--offer-heading-shadow);
  font-family: var(--main-font, sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.offer .offergift:not([data-title]):before {
  content: 'Äàð';
}

.offer .offerabout:not([data-title]):before {
  content: 'Î ïåðñîíàæå';
}

.offer .offerextra:not([data-title]):before {
  content: 'Äîïîëíèòåëüíî';
}

.offer .offerabout p,
.offer .offerextra p,
.offer .offergift p {
  margin: 0;
}

.offer .offerabout p + p,
.offer .offerextra p + p,
.offer .offergift p + p {
  margin-top: 0.86em;
}

.offer .offerabout strong,
.offer .offerextra strong,
.offer .offergift strong {
  color: var(--offer-title);
}

.offer .offerabout em,
.offer .offerextra em,
.offer .offergift em {
  color: var(--sec-text);
}

.offer .offerabout del,
.offer .offerextra del,
.offer .offergift del {
  color: var(--offer-label);
}

.offer .offerabout a,
.offer .offerextra a,
.offer .offergift a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-underline-offset: 3px;
}

.offer .offerabout a:hover,
.offer .offerextra a:hover,
.offer .offergift a:hover {
  color: var(--accent2);
}

.offer .offerabout ol,
.offer .offerabout ul,
.offer .offerextra ol,
.offer .offerextra ul,
.offer .offergift ol,
.offer .offergift ul {
  margin: 0;
  padding-left: 1.2em;
}

.offer .offerabout li + li,
.offer .offerextra li + li,
.offer .offergift li + li {
  margin-top: 0.46em;
}

.hotkeys-trigger {
  display: inline-flex;
  margin: 0 5px;
  padding: 6px 20px;
  border: 1px solid #464646;
  border-radius: var(--ks-radius-sm);
  background-color: #4c4c4c;
  color: #ddddde;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.hotkeys-trigger:focus,
.hotkeys-trigger:hover {
  background-color: #d6e6f5;
  outline: none;
}

#post-form .formsubmit {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
}

#post-form .formsubmit .button,
#post-form .formsubmit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  height: 32px;
  margin: 0;
  padding: 0 18px;
  color: var(--tab-text);
  background: var(--accent2);
  border: var(--ks-border-dark);
  border-radius: var(--ks-radius-md);
  box-shadow: var(--shadow2);
  font: 700 10px var(--main-font);
  text-transform: uppercase;
  letter-spacing: 0.25px;
  cursor: pointer;
}

#post-form .formsubmit .preview {
  color: var(--accent);
  background: transparent;
  border-color: color-mix(in srgb, var(--bord) 72%, transparent);
}

#post-form .formsubmit .button:focus-visible,
#post-form .formsubmit .button:hover,
#post-form .formsubmit button:focus-visible,
#post-form .formsubmit button:hover {
  color: var(--tab-text);
  background: var(--dark-bord);
  border-color: var(--dark-bord);
  outline: none;
}

#post-form .formsubmit .hotkeys-trigger {
  min-width: 46px;
  width: 46px;
  height: 32px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border-color: color-mix(in srgb, var(--bord) 72%, transparent);
  font: 700 14px/1 var(--main-font);
  text-transform: none;
}

#post-form .formsubmit .hotkeys-trigger:focus-visible,
#post-form .formsubmit .hotkeys-trigger:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--dark-bord);
}

#post-form .formsubmit .ks-btn-fill-profile {
  margin-left: auto;
}

#post-form .formsubmit .ks-btn-change-group,
#post-form .formsubmit .ks-btn-create-page,
#post-form .formsubmit .ks-btn-fill-profile {
  justify-self: flex-end;
}

.hotkeys-modal {
  background: var(--quote);
  border: var(--ks-border-default);
  box-shadow: 0 2px 16px rgb(0 0 0/20%);
  padding: 0;
  min-width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: var(--ks-radius-md);
  font-family: var(--main-font);
  animation: hkfadein 0.18s;
}

@keyframes hkfadein {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

.hotkeys-modal.hk-box {
  padding: 1em 1.5em 1.2em;
  position: relative;
  outline: none;
}

.hotkeys-modal h3 {
  margin: 0 0 0.8em;
  font-size: 1.1em;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
}

.hotkeys-modal ul {
  margin: 0;
  padding-left: 22px;
  list-style: disc;
}

.hotkeys-modal li {
  margin-bottom: 0.35em;
  font-size: 1em;
}

.pa-fld2 {
  position: absolute;
  background: var(--profile-bg);
  width: 32px;
  height: 32px;
  border-radius: 100%;
  border: var(--ks-border-profile);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(-50%);
  left: 50%;
  top: -15px;
  z-index: 9;
}

.reply-char-counter {
  margin: 0 20px;
  background: var(--quote);
  width: auto;
  display: inline-flex;
  padding: 5px 10px;
  border-radius: var(--ks-radius-xs);
  text-transform: uppercase;
  border: var(--ks-border-default);
  font-family: var(--main-font);
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  .minimal-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    justify-content: center;
    margin: 0 10px;
    position: relative;
  }

  .minimal-toggle input {
    display: none;
  }

  .minimal-switch {
    width: 44px;
    height: 24px;
    background: var(--dark-bord);
    border-radius: var(--ks-radius-xl);
    position: relative;
  }

  .minimal-knob,
  .minimal-switch {
    transition:
      background-color 0.2s ease,
      transform 0.2s ease;
  }

  .minimal-knob {
    width: 20px;
    height: 20px;
    background: var(--quote);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 3px rgb(0 0 0/10%);
  }

  .minimal-toggle input:checked + .minimal-switch {
    background: var(--dark-bord);
  }

  .minimal-toggle input:checked + .minimal-switch .minimal-knob {
    transform: translateX(20px);
  }

  .minimal-label {
    display: none;
  }
}

tr.tr-divider {
  display: block;
  text-transform: uppercase;
  font-family: var(--sec-font);
  letter-spacing: 0.6px;
}

body.mask-modal-open {
  overflow: hidden;
}

#mask-overlay,
#mask-overlay * {
  box-sizing: border-box;
}

#mask-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 26px);
  overflow: hidden auto;
  color: var(--text);
  font: 400 12px/1.45 var(--main-font);
  background:
    radial-gradient(
      circle at 18% 10%,
      var(--mask-overlay-glow, hsla(0, 0%, 100%, 0.1)) 0 18%,
      transparent 46%
    ),
    var(--mask-overlay-bg, rgb(0 0 0/58%));
  backdrop-filter: blur(7px) saturate(1.05);
  overscroll-behavior: contain;
  animation: mask-overlay-in 0.18s ease both;
}

#mask-dialog {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, calc(100vw - 32px));
  max-height: min(88dvh, 860px);
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(
      145deg,
      var(--mask-dialog-highlight, hsla(0, 0%, 100%, 0.18)),
      transparent 42%
    ),
    var(--mask-dialog-bg, var(--quote));
  border: 1px solid var(--mask-border-strong, var(--bord));
  border-radius: 22px;
  box-shadow: var(--mask-shadow, 0 24px 70px rgb(0 0 0/34%));
  animation: mask-dialog-in 0.2s ease both;
}

.mask-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px 16px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 56%
    ),
    var(--mask-header-bg, color-mix(in srgb, var(--quote) 92%, var(--podform)));
  border-bottom: 1px solid var(--mask-border, var(--bord));
}

.mask-header h3 {
  margin: 0;
  color: var(--mask-heading, var(--accent2));
  font: 400 clamp(22px, 3vw, 34px)/1 var(--sec-font);
  letter-spacing: 0.03em;
  text-transform: none;
}

.mask-header p {
  max-width: 680px;
  margin: 7px 0 0;
  color: var(--mask-muted, var(--sec-text));
  font: 500 12px/1.45 var(--main-font);
}

.mask-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font: 700 9px/1 var(--main-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mask-close-btn {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--mask-muted, var(--sec-text));
  font: 400 24px/1 var(--main-font);
  background: var(
    --mask-control-bg,
    color-mix(in srgb, var(--podform) 78%, transparent)
  );
  border: 1px solid var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-pill);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.mask-close-btn:focus-visible,
.mask-close-btn:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-1px);
}

.mask-content {
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(360px, 1.28fr) minmax(
      224px,
      0.82fr
    );
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(in srgb, var(--accent) 8%, transparent) 0 20%,
      transparent 58%
    ),
    var(--mask-content-bg, color-mix(in srgb, var(--quote) 72%, transparent));
}

.mask-form-panel,
.mask-preview-panel,
.mask-storage-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  color: var(--text);
  background:
    linear-gradient(
      180deg,
      var(--mask-panel-shine, hsla(0, 0%, 100%, 0.1)),
      transparent 38%
    ),
    var(--mask-panel-bg, color-mix(in srgb, var(--podform) 84%, var(--quote)));
  border: 1px solid var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-xl, 12px);
  box-shadow: var(--mask-panel-shadow, inset 0 1px 0 hsla(0, 0%, 100%, 0.14));
  scrollbar-width: thin;
  scrollbar-color: var(--mask-scroll-thumb, var(--accent)) transparent;
}

.mask-form-panel,
.mask-preview-panel {
  padding: 14px;
}

.mask-preview-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mask-preview-panel:before,
.mask-storage-title {
  display: block;
  margin: 0 0 2px;
  color: var(--mask-heading, var(--accent2));
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mask-preview-panel:before {
  content: 'Ïðåäïðîñìîòð';
}

#mask-dialog .mask-profile-preview.punbb {
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 400 12px/1.45 var(--main-font);
}

#mask-dialog .mask-profile-preview .post {
  width: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
}

#mask-dialog .mask-profile-preview .post-author {
  float: none;
  width: 240px;
  max-width: 100%;
  min-height: 0;
  margin: 24px auto 0;
}

#mask-dialog .mask-profile-preview .post-author ul {
  width: 100%;
  margin: 0;
  padding: 0 0 10px;
  text-align: center;
}

#mask-dialog .mask-profile-preview .post-author .author-wrap,
#mask-dialog .mask-profile-preview .post-author .wrap-resp,
#mask-dialog .mask-profile-preview .post-author li,
#mask-dialog .mask-profile-preview .post-author ul {
  box-sizing: border-box;
}

#mask-dialog .mask-profile-preview .post-author li {
  list-style: none;
}

#mask-dialog .mask-profile-preview .post-author .pa-fld2 {
  z-index: 5;
}

#mask-dialog .mask-profile-preview .post-author .author-wrap {
  position: relative;
  overflow: visible;
}

#mask-dialog .mask-profile-preview .post-author .pa-fld6 {
  width: 100%;
  max-width: none;
}

#mask-dialog .mask-profile-preview .post-author .pa-fld6 img,
#mask-dialog .mask-profile-preview .post-author .pa-fld6 > div {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

#mask-dialog .mask-profile-preview .post-author .pa-avatar img {
  display: block;
  max-width: min(200px, 100%);
  height: auto;
  margin-inline: auto;
}

#mask-dialog .mask-profile-preview .post-author .pa-fld1 p {
  padding: 0;
}

#mask-dialog .mask-profile-preview .post-author .pa-fld3 {
  overflow: visible;
}

#mask-dialog .mask-profile-preview .post-author .pa-fld3 img {
  max-width: 100%;
}

#mask-dialog .mask-preview-signature {
  margin-top: 12px;
  padding: 10px;
  color: var(--text);
  background: var(
    --mask-field-bg,
    color-mix(in srgb, var(--quote) 82%, var(--podform))
  );
  border: 1px solid
    var(--mask-border-soft, color-mix(in srgb, var(--bord) 68%, transparent));
  border-radius: var(--ks-radius-lg, 10px);
}

#mask-dialog .mask-preview-signature .post-sig {
  margin: 0;
}

#mask-dialog .mask-preview-signature .post-sig dt {
  display: block;
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  color: var(--mask-heading, var(--accent2));
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.09em;
  text-align: left;
  text-transform: uppercase;
  border: 0;
}

#mask-dialog .mask-preview-signature .post-sig dd {
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 500 12px/1.5 var(--main-font);
  overflow-wrap: anywhere;
}

#mask-dialog .mask-preview-signature-empty {
  color: var(--mask-muted, var(--sec-text));
  font: 600 11px/1.45 var(--main-font);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author {
  position: relative;
  float: none;
  width: 240px;
  max-width: 100%;
  min-height: 540px;
  margin: 28px auto 0;
  padding: 0 12px 12px;
  color: var(--prof-text);
  overflow: visible;
  background: transparent;
  border: var(--ks-border-profile);
  border-color: color-mix(in srgb, var(--prof-bord) 86%, transparent);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--summer-topic-shadow);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author:before {
  content: '\f52d';
  z-index: 2;
  color: var(--accent);
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
  font-size: 16px;
  font-weight: 400;
  border-radius: 50%;
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author:before,
:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2 {
  position: absolute;
  top: -20px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--summer-topic-panel-strong);
  border: var(--ks-border-profile);
  transform: translateX(-50%);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2 {
  z-index: 6;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--prof-bord) 90%, transparent);
  border-radius: 50%;
  box-shadow:
    0 3px 10px rgb(0 0 0/10%),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2
  img,
:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2
  > a,
:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2
  > div,
:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2
  > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-author {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 32px 0 8px;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-author a {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 34px);
  min-height: 32px;
  padding: 4px 14px 5px;
  color: var(--summer-topic-label-text) !important;
  font: 400 15px/1.2 var(--sec-font);
  text-align: center;
  background: var(--summer-topic-label-bg);
  border-radius: var(--ks-radius-sm);
  box-shadow: var(--summer-card-shadow);
  text-shadow: 0 1px 3px rgb(0 0 0/26%);
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .indOnline {
  background: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--tab-text) 28%, transparent);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .author-wrap {
  position: relative;
  z-index: 2;
  margin: 2px 0 0;
  padding: 10px 10px 12px;
  overflow: visible;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--prof-bord) 76%, transparent);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--summer-topic-glow);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .author-wrap:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel-strong) 38%, transparent),
    color-mix(in srgb, var(--summer-topic-panel) 20%, transparent)
  );
  border-radius: inherit;
  pointer-events: none;
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .author-wrap
  > :not(.pa-fld6) {
  position: relative;
  z-index: 2;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-title {
  position: relative;
  z-index: 2;
  margin: 0 0 7px;
  padding: 0;
  color: var(--prof-text);
  font: 600 10px var(--main-font);
  text-align: center;
  text-transform: lowercase;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-avatar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-avatar img {
  display: block;
  width: 200px;
  height: 250px;
  max-width: 100%;
  margin: 0 auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 7px;
  outline: 1px solid color-mix(in srgb, var(--prof-bord) 66%, transparent);
  box-shadow: 0 8px 18px rgb(0 0 0/18%);
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-fld6 {
  position: absolute;
  top: -72px;
  right: -12px;
  left: -12px;
  z-index: 0;
  width: auto;
  height: 270px;
  overflow: hidden;
  background: transparent;
  border-radius: var(--ks-radius-lg) var(--ks-radius-lg) 0 0;
  opacity: 1;
  pointer-events: none;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-fld6 img,
:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-fld6 > div {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 25%;
  object-position: center 25%;
  background-position: center 25%;
  background-size: cover;
  border-radius: 0;
  filter: grayscale(0.2) sepia(0.16);
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 22%,
    rgb(0 0 0/82%) 40%,
    rgb(0 0 0/42%) 58%,
    rgb(0 0 0/12%) 72%,
    transparent 84%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 22%,
    rgb(0 0 0/82%) 40%,
    rgb(0 0 0/42%) 58%,
    rgb(0 0 0/12%) 72%,
    transparent 84%,
    transparent
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-fld1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 13px 9px 12px;
  color: var(--prof-text);
  text-align: center;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel) 48%, transparent),
    color-mix(in srgb, var(--profile) 36%, transparent)
  );
  border-top: 1px solid color-mix(in srgb, var(--prof-bord) 62%, transparent);
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .pa-fld1
  .lz-name {
  color: var(--accent);
  font: 400 13px var(--sec-font);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .pa-fld1
  .lz-text {
  margin: 6px 3px 0;
  color: var(--prof-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .wrap-resp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 10px 0;
  padding: 0 2px;
  color: var(--prof-text);
  font: 500 10px var(--main-font);
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .wrap-resp li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-awards,
:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-last-visit,
:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-online {
  display: none;
}

:root[data-style='summer'] #mask-dialog .mask-profile-preview .pa-fld3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% + 24px);
  height: 40px;
  margin: 8px -12px 0;
  padding: 0;
  overflow: visible;
  box-sizing: border-box;
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .pa-fld3
  .pers-plah,
:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .pa-fld3
  > pers-plah {
  position: relative;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 220px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  color: var(--tab-text);
  font: 500 9px/1.2 var(--main-font);
  text-align: center;
  text-transform: uppercase;
  background: var(--pers-pl) center/cover;
  border: 0;
  border-radius: var(--ks-radius-sm);
  box-shadow: none;
  transform: none;
}

:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .pa-fld3
  .pers-plah
  img,
:root[data-style='summer']
  #mask-dialog
  .mask-profile-preview
  .pa-fld3
  > pers-plah
  img {
  position: relative;
  z-index: 0;
  display: block;
  width: 220px;
  max-width: 220px;
  height: 40px;
  max-height: 40px;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: inherit;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .post-author {
  width: min(100%, 390px);
  max-width: 390px;
  min-height: 0;
  margin: 16px auto 0;
  padding: 12px 10px 10px;
  overflow: visible;
  border-radius: var(--ks-radius-xl);
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .post-author ul {
  padding: 0;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .post-author li {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: initial;
}

#mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .post-author
  .pa-fld2 {
  position: relative;
  top: auto;
  left: auto;
  z-index: 5;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  transform: none;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-author {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(100%, 280px);
  min-width: 0;
  height: auto;
  margin: 0 auto 12px;
  padding: 0;
  gap: 6px;
  text-align: center;
  box-sizing: border-box;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-author a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 5px 13px 6px;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--ks-radius-md);
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .author-wrap {
  position: relative;
  display: grid;
  grid-template: 'avatar title' auto 'avatar info' auto/82px minmax(0, 1fr);
  gap: 5px 12px;
  align-items: center;
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 14px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--ks-radius-xl);
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-fld6 {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--profile-bg) center top/cover no-repeat;
  border-radius: inherit;
  opacity: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000, #000 42%, transparent);
  mask-image: linear-gradient(180deg, #000, #000 42%, transparent);
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-fld6 img,
#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-fld6 > div {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(0.12) sepia(0.12);
  opacity: 0.66;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-avatar {
  position: relative;
  z-index: 2;
  display: block;
  grid-area: avatar;
  place-self: start center;
  width: 78px;
  height: 78px;
  margin: 0;
  padding: 0;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-avatar img {
  display: block;
  width: 78px;
  height: 78px;
  max-width: 78px;
  max-height: 78px;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 9px;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-title {
  position: relative;
  z-index: 2;
  grid-area: title;
  place-self: start start;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--prof-text);
  font: 500 13px/1.25 var(--main-font);
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: 0 1px 7px hsla(0, 0%, 100%, 0.45);
  text-transform: none;
  white-space: nowrap;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-fld1 {
  position: relative;
  z-index: 2;
  grid-area: info;
  place-self: start start;
  max-width: 100%;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0;
  color: var(--prof-text);
  text-align: left;
  background: transparent;
  border: 0;
  opacity: 0.9;
}

#mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .pa-fld1
  .lz-name {
  max-width: 100%;
  overflow: hidden;
  color: var(--prof-text);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: 0 1px 7px hsla(0, 0%, 100%, 0.4);
  white-space: nowrap;
}

#mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .pa-fld1
  .lz-text {
  display: none;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .wrap-resp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px 12px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .wrap-resp li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  color: var(--prof-text);
  font: 600 12px/1 var(--main-font);
  white-space: nowrap;
}

#mask-overlay[data-force-mobile='true'] .mask-profile-preview .pa-fld3 {
  display: none;
}

:root[data-style='summer']
  #mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .post
  .post-author,
:root[data-style='summer']
  .force-mobile
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author,
:root[data-style='summer'].force-mobile
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author {
  width: min(100%, 390px);
  max-width: 390px;
  min-height: 0;
  padding: 12px 10px 10px;
}

:root[data-style='summer']
  #mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .post
  .post-author:before,
:root[data-style='summer']
  .force-mobile
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author:before,
:root[data-style='summer'].force-mobile
  #mask-dialog
  .mask-profile-preview
  .post
  .post-author:before {
  content: none;
  display: none;
}

:root[data-style='summer']
  #mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .post-author
  .pa-fld2,
:root[data-style='summer']
  .force-mobile
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2,
:root[data-style='summer'].force-mobile
  #mask-dialog
  .mask-profile-preview
  .post-author
  .pa-fld2 {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 auto 8px;
  transform: none;
}

:root[data-style='summer']
  #mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .pa-author,
:root[data-style='summer']
  .force-mobile
  #mask-dialog
  .mask-profile-preview
  .pa-author,
:root[data-style='summer'].force-mobile
  #mask-dialog
  .mask-profile-preview
  .pa-author {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(100%, 280px);
  margin: 0 auto 12px;
  text-align: center;
}

:root[data-style='summer']
  #mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .pa-author
  a,
:root[data-style='summer']
  .force-mobile
  #mask-dialog
  .mask-profile-preview
  .pa-author
  a,
:root[data-style='summer'].force-mobile
  #mask-dialog
  .mask-profile-preview
  .pa-author
  a {
  width: auto;
  max-width: 100%;
  padding: 5px 13px 6px;
  font-size: 16px;
  transform: none;
}

:root[data-style='summer']
  #mask-overlay[data-force-mobile='true']
  .mask-profile-preview
  .author-wrap,
:root[data-style='summer']
  .force-mobile
  #mask-dialog
  .mask-profile-preview
  .author-wrap,
:root[data-style='summer'].force-mobile
  #mask-dialog
  .mask-profile-preview
  .author-wrap {
  min-height: 104px;
  padding: 14px;
  grid-template: 'avatar title' auto 'avatar info' auto/82px minmax(0, 1fr);
}

.mask-preview-row {
  display: grid;
  gap: 5px;
  padding: 10px;
  overflow: hidden;
  background: var(
    --mask-field-bg,
    color-mix(in srgb, var(--quote) 82%, var(--podform))
  );
  border: 1px solid
    var(--mask-border-soft, color-mix(in srgb, var(--bord) 68%, transparent));
  border-radius: var(--ks-radius-lg, 10px);
}

.mask-preview-label {
  color: var(--mask-muted, var(--sec-text));
  font: 700 9px/1.15 var(--main-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mask-preview-avatar {
  display: block;
  width: min(180px, 100%);
  max-width: 100%;
  height: auto;
  max-height: 230px;
  margin: 0 auto;
  -o-object-fit: contain;
  object-fit: contain;
  background: var(
    --mask-empty-bg,
    color-mix(in srgb, var(--podform) 80%, var(--quote))
  );
  border: 1px solid var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-lg, 10px);
  box-shadow: 0 10px 22px rgb(0 0 0/12%);
}

.mask-preview-bbcode,
.mask-preview-html,
.mask-preview-link,
.mask-preview-text,
.mask-preview-value {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font: 600 12px/1.45 var(--main-font);
  overflow-wrap: anywhere;
}

.mask-preview-bbcode:empty,
.mask-preview-html:empty,
.mask-preview-text:empty {
  display: none;
}

.mask-preview-html div[title] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  color: var(--tab-text);
  background: var(--accent);
  border-radius: var(--ks-radius-pill);
}

.mask-preview-link {
  color: var(--accent);
  text-decoration: none;
}

.mask-preview-link:focus-visible,
.mask-preview-link:hover {
  color: var(--accent2);
  text-decoration: underline;
}

.mask-form-panel {
  display: flex;
  flex-direction: column;
}

.mask-templates-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(
    --mask-field-bg,
    color-mix(in srgb, var(--quote) 82%, var(--podform))
  );
  border: 1px solid
    var(--mask-border-soft, color-mix(in srgb, var(--bord) 68%, transparent));
  border-radius: var(--ks-radius-lg, 10px);
}

.mask-field-label,
.mask-templates-container label {
  color: var(--mask-heading, var(--accent2));
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mask-field-input,
.mask-form-field textarea,
.mask-templates-container select {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  color: var(--text);
  font: 500 12px/1.45 var(--main-font);
  background: var(
    --mask-input-bg,
    color-mix(in srgb, var(--quote) 88%, var(--podform))
  );
  border: 1px solid var(--mask-input-border, var(--bord));
  border-radius: var(--ks-radius-md, 8px);
  outline: none;
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1);
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.mask-templates-container select {
  height: 36px;
  cursor: pointer;
}

.mask-field-input::-moz-placeholder,
.mask-form-field textarea::-moz-placeholder {
  color: color-mix(
    in srgb,
    var(--mask-muted, var(--sec-text)) 62%,
    transparent
  );
}

.mask-field-input::placeholder,
.mask-form-field textarea::placeholder {
  color: color-mix(
    in srgb,
    var(--mask-muted, var(--sec-text)) 62%,
    transparent
  );
}

.mask-field-input:focus,
.mask-form-field textarea:focus,
.mask-templates-container select:focus {
  border-color: var(--text-tab-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--text-tab-accent) 18%, transparent),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.12);
}

.mask-form {
  display: grid;
  gap: 10px;
}

.mask-form-field {
  display: grid;
  grid-template-areas: 'label template' 'input input' 'error error';
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  padding: 12px;
  background: var(
    --mask-field-bg,
    color-mix(in srgb, var(--quote) 82%, var(--podform))
  );
  border: 1px solid
    var(--mask-border-soft, color-mix(in srgb, var(--bord) 68%, transparent));
  border-radius: var(--ks-radius-lg, 10px);
}

.mask-field-label {
  grid-area: label;
  align-self: center;
}

.mask-template-btn {
  grid-area: template;
  place-self: center end;
  padding: 0;
  color: var(--accent);
  font: 700 10px/1.2 var(--main-font);
  text-transform: lowercase;
  background: transparent;
  border: 0;
  border-radius: var(--ks-radius-xs, 5px);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.mask-template-btn:focus-visible,
.mask-template-btn:hover {
  color: var(--accent2);
  text-decoration: underline;
  transform: translateY(-1px);
}

.mask-field-input {
  grid-area: input;
  min-height: 38px;
}

.mask-form-field textarea {
  grid-area: input;
  min-height: 86px;
  max-height: 210px;
  resize: vertical;
}

.mask-field-error {
  grid-area: error;
  min-height: 0;
  color: var(--prof-link);
  font: 700 10px/1.35 var(--main-font);
}

.mask-field-error:empty {
  display: none;
}

.mask-preview-code {
  display: block;
  width: 100%;
  max-height: 148px;
  margin: 12px 0 0;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--mask-code-text, var(--mask-muted, var(--sec-text)));
  font:
    500 11px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    Liberation Mono,
    Courier New,
    monospace;
  background: var(
    --mask-code-bg,
    color-mix(in srgb, var(--profile) 12%, var(--quote))
  );
  border: 1px dashed var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-lg, 10px);
}

.mask-errors {
  min-height: 0;
  margin: 10px 0 0;
  color: var(--prof-link);
  font: 700 11px/1.35 var(--main-font);
  background: color-mix(in srgb, var(--prof-link) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--prof-link) 30%, transparent);
  border-radius: var(--ks-radius-md, 8px);
}

.mask-errors:empty {
  display: none;
}

.mask-storage-panel {
  display: grid;
  align-content: start;
  grid-auto-rows: min-content;
  gap: 8px;
  padding: 14px;
}

.mask-storage-title {
  position: sticky;
  top: -14px;
  z-index: 2;
  margin: -14px -14px 2px;
  padding: 14px 14px 10px;
  background: linear-gradient(
    180deg,
    var(--mask-panel-bg, color-mix(in srgb, var(--podform) 84%, var(--quote)))
      72%,
    transparent
  );
}

.mask-storage-panel.drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}

.mask-storage-item {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  color: var(--text);
  background: var(
    --mask-field-bg,
    color-mix(in srgb, var(--quote) 82%, var(--podform))
  );
  border: 1px solid
    var(--mask-border-soft, color-mix(in srgb, var(--bord) 68%, transparent));
  border-radius: var(--ks-radius-lg, 10px);
  cursor: default;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.mask-storage-item:hover {
  background: var(
    --mask-item-hover-bg,
    color-mix(in srgb, var(--quote) 92%, var(--podform))
  );
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgb(0 0 0/10%);
  transform: translateY(-1px);
}

.mask-storage-item.highlight,
.mask-storage-item.mask-dragging {
  opacity: 0.72;
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.mask-placeholder {
  min-height: 62px;
  margin: 2px 0;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 2px dashed var(--accent);
  border-radius: var(--ks-radius-lg, 10px);
}

.drag-handle,
.mask-delete-btn,
.mask-move-down,
.mask-move-up {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--accent);
  font: 800 14px/1 var(--main-font);
  background: var(
    --mask-control-bg,
    color-mix(in srgb, var(--podform) 78%, transparent)
  );
  border: 1px solid var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-xs, 5px);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.drag-handle {
  cursor: grab;
  font-size: 18px;
}

.drag-handle:active {
  cursor: grabbing;
}

.mask-move-down,
.mask-move-up {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.drag-handle:focus-visible,
.drag-handle:hover,
.mask-delete-btn:focus-visible,
.mask-delete-btn:hover,
.mask-move-down:focus-visible,
.mask-move-down:hover,
.mask-move-up:focus-visible,
.mask-move-up:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-1px);
}

.mask-storage-load {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-column: 4;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--ks-radius-md, 8px);
  cursor: pointer;
}

.mask-storage-load:focus-visible .mask-storage-name,
.mask-storage-load:hover .mask-storage-name {
  color: var(--accent2);
}

.mask-storage-avatar {
  display: block;
  width: 46px;
  height: 46px;
  -o-object-fit: cover;
  object-fit: cover;
  background: var(
    --mask-empty-bg,
    color-mix(in srgb, var(--podform) 80%, var(--quote))
  );
  border: 1px solid var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-md, 8px);
  box-shadow: 0 5px 12px rgb(0 0 0/12%);
}

.mask-storage-item > .mask-storage-avatar {
  grid-column: 4;
}

.mask-storage-meta {
  min-width: 0;
  overflow: hidden;
}

.mask-storage-name,
.mask-storage-status {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mask-storage-name {
  color: var(--text);
  font: 800 12px/1.2 var(--main-font);
}

.mask-storage-status {
  margin-top: 3px;
  color: var(--mask-muted, var(--sec-text));
  font: 600 10px/1.25 var(--main-font);
}

.mask-delete-btn {
  grid-column: 5;
  color: var(--prof-link);
  font-size: 18px;
}

.mask-storage-empty {
  display: grid;
  place-items: center;
  min-height: 210px;
  padding: 20px;
  color: var(--mask-muted, var(--sec-text));
  text-align: center;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--accent) 13%, transparent),
      transparent 60%
    ),
    var(--mask-field-bg, color-mix(in srgb, var(--quote) 82%, var(--podform)));
  border: 1px dashed var(--mask-border, var(--bord));
  border-radius: var(--ks-radius-lg, 10px);
}

.mask-storage-empty b {
  display: inline-block;
  margin: 4px 0 3px;
  color: var(--mask-heading, var(--accent2));
}

.mask-storage-empty span {
  font-size: 11px;
}

.mask-tooltip {
  position: fixed;
  z-index: 1000002;
  max-width: min(300px, calc(100vw - 24px));
  padding: 9px 10px;
  color: var(--prof-text);
  font: 600 11px/1.45 var(--main-font);
  background: var(
    --mask-tooltip-bg,
    color-mix(in srgb, var(--profile) 92%, #000)
  );
  border: 1px solid var(--mask-tooltip-border, var(--prof-bord));
  border-radius: var(--ks-radius-md, 8px);
  box-shadow: 0 10px 24px rgb(0 0 0/26%);
  opacity: 0;
  pointer-events: none;
  overflow-wrap: anywhere;
  transition: opacity 0.14s ease;
}

.mask-tooltip--visible {
  opacity: 1;
}

.mask-storage-item.mask-dragging ~ .mask-tooltip,
.mask-tooltip--visible:empty {
  display: none;
}

.mask-tooltip-field + .mask-tooltip-field {
  margin-top: 5px;
}

.mask-tooltip-field b {
  color: var(--accent);
}

.mask-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  justify-content: end;
  gap: 8px;
  padding: 13px 16px;
  background: var(
    --mask-actions-bg,
    color-mix(in srgb, var(--quote) 94%, var(--podform))
  );
  border-top: 1px solid var(--mask-border, var(--bord));
}

.mask-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  min-width: 124px;
  padding: 9px 13px;
  color: var(--tab-text);
  font: 800 10px/1.2 var(--main-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--ks-radius-md, 8px);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.mask-action-btn:focus-visible,
.mask-action-btn:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
  transform: translateY(-1px);
}

.mask-action-btn[data-action='save'] {
  background: var(--accent2);
  border-color: var(--accent2);
}

.mask-action-btn[data-action='insert'] {
  color: var(--accent2);
  background: var(
    --mask-secondary-bg,
    color-mix(in srgb, var(--accent) 12%, transparent)
  );
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
}

.mask-action-btn[data-action='cancel'],
.mask-action-btn[data-action='clear'] {
  color: var(--mask-muted, var(--sec-text));
  background: var(
    --mask-control-bg,
    color-mix(in srgb, var(--podform) 78%, transparent)
  );
  border-color: var(--mask-border, var(--bord));
}

.mask-action-btn[data-action='cancel']:focus-visible,
.mask-action-btn[data-action='cancel']:hover,
.mask-action-btn[data-action='clear']:focus-visible,
.mask-action-btn[data-action='clear']:hover,
.mask-action-btn[data-action='insert']:focus-visible,
.mask-action-btn[data-action='insert']:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.mask-form-panel::-webkit-scrollbar,
.mask-preview-code::-webkit-scrollbar,
.mask-preview-panel::-webkit-scrollbar,
.mask-storage-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mask-form-panel::-webkit-scrollbar-thumb,
.mask-preview-code::-webkit-scrollbar-thumb,
.mask-preview-panel::-webkit-scrollbar-thumb,
.mask-storage-panel::-webkit-scrollbar-thumb {
  background: var(--mask-scroll-thumb, var(--accent));
  border: 2px solid transparent;
  border-radius: var(--ks-radius-pill);
  background-clip: padding-box;
}

.mask-form-panel::-webkit-scrollbar-track,
.mask-preview-code::-webkit-scrollbar-track,
.mask-preview-panel::-webkit-scrollbar-track,
.mask-storage-panel::-webkit-scrollbar-track {
  background: transparent;
}

.drag-handle:focus-visible,
.mask-action-btn:focus-visible,
.mask-close-btn:focus-visible,
.mask-delete-btn:focus-visible,
.mask-field-input:focus-visible,
.mask-form-field textarea:focus-visible,
.mask-move-down:focus-visible,
.mask-move-up:focus-visible,
.mask-storage-load:focus-visible,
.mask-template-btn:focus-visible,
.mask-templates-container select:focus-visible {
  outline: 2px solid var(--text-tab-accent);
  outline-offset: 2px;
}

#mask-overlay[data-force-mobile='true'],
.force-mobile #mask-overlay {
  place-items: stretch;
  padding: 8px;
  overflow: hidden;
}

#mask-overlay[data-force-mobile='true'] #mask-dialog,
.force-mobile #mask-dialog {
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: calc(100dvh - 16px);
  max-height: calc(100dvh - 16px);
  border-radius: var(--ks-radius-xl, 12px);
}

#mask-overlay[data-force-mobile='true'] .mask-header,
.force-mobile .mask-header {
  padding: 14px 14px 12px;
}

#mask-overlay[data-force-mobile='true'] .mask-header h3,
.force-mobile .mask-header h3 {
  font-size: 25px;
}

#mask-overlay[data-force-mobile='true'] .mask-header p,
.force-mobile .mask-header p {
  display: none;
}

#mask-overlay[data-force-mobile='true'] .mask-content,
.force-mobile .mask-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 10px;
  overflow: hidden auto;
}

#mask-overlay[data-force-mobile='true'] .mask-form-panel,
#mask-overlay[data-force-mobile='true'] .mask-preview-panel,
#mask-overlay[data-force-mobile='true'] .mask-storage-panel,
.force-mobile .mask-form-panel,
.force-mobile .mask-preview-panel,
.force-mobile .mask-storage-panel {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

#mask-overlay[data-force-mobile='true'] .mask-form-panel,
.force-mobile .mask-form-panel {
  order: 1;
}

#mask-overlay[data-force-mobile='true'] .mask-preview-panel,
.force-mobile .mask-preview-panel {
  order: 2;
}

#mask-overlay[data-force-mobile='true'] .mask-storage-panel,
.force-mobile .mask-storage-panel {
  order: 3;
  max-height: none;
}

#mask-overlay[data-force-mobile='true'] .mask-actions,
.force-mobile .mask-actions {
  grid-template-columns: 1fr 1fr;
  padding: 10px;
}

#mask-overlay[data-force-mobile='true'] .mask-action-btn,
.force-mobile .mask-action-btn {
  min-width: 0;
  width: 100%;
}

@media screen and (width <=900px) {
  #mask-dialog {
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(760px, calc(100vw - 20px));
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .mask-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden auto;
  }

  .mask-form-panel,
  .mask-preview-panel,
  .mask-storage-panel {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  .mask-form-panel {
    order: 1;
  }

  .mask-preview-panel {
    order: 2;
  }

  .mask-storage-panel {
    order: 3;
    max-height: none;
  }
}

@media screen and (width <=620px) {
  #mask-overlay {
    place-items: stretch;
    padding: 0;
    overflow: hidden;
  }

  #mask-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-inline: 0;
    border-radius: 0;
  }

  .mask-header {
    padding: 13px 12px 11px;
  }

  .mask-header h3 {
    font-size: 23px;
  }

  .mask-header p {
    display: none;
  }

  .mask-content {
    gap: 9px;
    padding: 9px;
  }

  .mask-form-panel,
  .mask-preview-panel,
  .mask-storage-panel {
    padding: 11px;
    border-radius: var(--ks-radius-lg, 10px);
  }

  .mask-form-field,
  .mask-templates-container {
    grid-template-columns: 1fr;
  }

  .mask-form-field {
    grid-template-areas: 'label' 'template' 'input' 'error';
  }

  .mask-template-btn {
    justify-self: start;
  }

  .mask-storage-item {
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    padding: 7px;
  }

  .mask-storage-load {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .mask-storage-avatar {
    width: 42px;
    height: 42px;
  }

  .mask-actions {
    grid-template-columns: 1fr;
    padding: 9px calc(9px + env(safe-area-inset-right))
      calc(9px + env(safe-area-inset-bottom))
      calc(9px + env(safe-area-inset-left));
  }
}

@media (prefers-reduced-motion: reduce) {
  #mask-dialog,
  #mask-overlay {
    animation: none;
  }
}

@keyframes mask-overlay-in {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mask-dialog-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#navprofiles,
#pun-navlinks,
#pun-navlinks .container {
  overflow: visible;
}

#navprofiles {
  position: relative;
  z-index: 214748000;
}

#pun-navlinks.section:has(.multiacc-profilemenu.is-open),
#pun-navlinks.section:has(.multiacc-profilemenu.open),
#pun-navlinks.section:has(.multiacc-profilemenu[style*='block']) {
  z-index: 214748000;
}

#navprofiles > a {
  position: relative;
  z-index: 2;
}

#navprofiles .multiacc-profilemenu,
#pun-navlinks.section #navprofiles .multiacc-profilemenu {
  --multiacc-bg: color-mix(in srgb, var(--quote) 94%, var(--podform));
  --multiacc-bg-soft: color-mix(in srgb, var(--podform) 78%, var(--quote));
  --multiacc-bg-hover: color-mix(in srgb, var(--accent) 14%, var(--quote));
  --multiacc-bg-active: linear-gradient(180deg, var(--accent), var(--accent2));
  --multiacc-text: var(--text);
  --multiacc-muted: color-mix(in srgb, var(--sec-text) 84%, transparent);
  --multiacc-active-text: var(--tab-text);
  --multiacc-border: color-mix(in srgb, var(--bord) 82%, transparent);
  --multiacc-border-strong: color-mix(
    in srgb,
    var(--dark-bord) 72%,
    var(--bord)
  );
  --multiacc-button-bg: color-mix(in srgb, var(--podform) 82%, var(--quote));
  --multiacc-button-bg-hover: var(--accent2);
  --multiacc-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  --multiacc-focus: 0 0 0 2px color-mix(in srgb, var(--accent) 34%, transparent);
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 214748001;
  display: block;
  box-sizing: border-box;
  width: -moz-max-content;
  width: max-content;
  min-width: 210px;
  max-width: min(300px, calc(100vw - 24px));
  max-height: min(70vh, 420px);
  margin: 0;
  padding: 7px;
  overflow: auto;
  color: var(--multiacc-text);
  font: 500 12px/1.35 var(--main-font);
  text-align: left;
  text-transform: none;
  list-style: none;
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--accent) 13%, transparent) 0 32%,
      transparent 62%
    ),
    linear-gradient(180deg, var(--multiacc-bg), var(--multiacc-bg-soft));
  border: 1px solid var(--multiacc-border-strong);
  border-radius: var(--ks-radius-lg);
  box-shadow:
    var(--multiacc-shadow),
    inset 0 1px 0 color-mix(in srgb, var(--tab-text) 16%, transparent);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

#navprofiles .multiacc-profilemenu,
#navprofiles .multiacc-profilemenu * {
  box-sizing: border-box;
}

#navprofiles .multiacc-profilemenu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#navprofiles .multiacc-profilemenu::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--ks-radius-pill);
}

#navprofiles .multiacc-profilemenu a:after,
#navprofiles .multiacc-profilemenu a:before {
  content: none !important;
  display: none !important;
}

#navprofiles .multiacc-profilemenu li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 8px 10px;
  color: var(--multiacc-text);
  background: color-mix(in srgb, var(--quote) 78%, transparent);
  border: 1px solid var(--multiacc-border);
  border-radius: var(--ks-radius-xs);
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

#navprofiles .multiacc-profilemenu li + li {
  margin-top: 5px;
}

#navprofiles .multiacc-profilemenu li:first-child {
  color: var(--multiacc-active-text);
  font-weight: 700;
  background: var(--multiacc-bg-active);
  border-color: color-mix(in srgb, var(--accent2) 78%, transparent);
}

#navprofiles .multiacc-profilemenu li:focus-within,
#navprofiles .multiacc-profilemenu li:hover {
  color: var(--multiacc-text);
  background: var(--multiacc-bg-hover);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

#navprofiles .multiacc-profilemenu li:first-child:focus-within,
#navprofiles .multiacc-profilemenu li:first-child:hover {
  color: var(--multiacc-active-text);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 88%, var(--tab-text)),
    var(--accent2)
  );
}

#navprofiles .multiacc-profilemenu a {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit !important;
  font: 600 12px/1.3 var(--sec-font) !important;
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

#navprofiles .multiacc-profilemenu a:focus,
#navprofiles .multiacc-profilemenu a:hover {
  color: inherit !important;
}

#navprofiles .multiacc-delete-btn:focus-visible,
#navprofiles .multiacc-profilemenu a:focus-visible {
  outline: none;
  box-shadow: var(--multiacc-focus);
}

#navprofiles .multiacc-profilemenu a.multiacc-active {
  color: var(--accent) !important;
}

#navprofiles .multiacc-profilemenu li:first-child a.multiacc-active {
  color: inherit !important;
}

#navprofiles .multiacc-delete-btn {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 0 0 8px !important;
  padding: 0;
  color: var(--multiacc-muted);
  font-size: 0;
  line-height: 1;
  background: var(--multiacc-button-bg);
  border: 1px solid var(--multiacc-border);
  border-radius: var(--ks-radius-pill);
  cursor: pointer;
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

#navprofiles .multiacc-delete-btn:before {
  content: '\f00d';
  font-family:
    Font Awesome\6 Pro,
    FontAwesome,
    sans-serif;
  font-size: 10px;
  font-weight: 600;
}

#navprofiles .multiacc-delete-btn:focus-visible,
#navprofiles .multiacc-delete-btn:hover {
  color: var(--multiacc-active-text);
  background: var(--multiacc-button-bg-hover);
  border-color: var(--accent2);
  transform: scale(1.06);
}

.force-mobile #navprofiles .multiacc-profilemenu,
.force-mobile #pun-navlinks.section #navprofiles .multiacc-profilemenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 214748001;
  width: min(268px, calc(100vw - 18px));
  min-width: min(220px, calc(100vw - 18px));
  max-width: calc(100vw - 18px);
  max-height: min(54vh, 360px);
  padding: 6px;
  font-size: 12px;
  border-radius: var(--ks-radius-md);
}

.force-mobile #navprofiles .multiacc-profilemenu li {
  min-height: 34px;
  padding: 8px 9px;
  gap: 6px;
}

.force-mobile #navprofiles .multiacc-profilemenu a {
  font: 600 12px/1.25 var(--main-font) !important;
  letter-spacing: 0;
  text-transform: none;
}

.force-mobile #navprofiles .multiacc-delete-btn {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

.multiacc-dialog {
  --multiacc-dialog-bg: color-mix(in srgb, var(--quote) 94%, var(--podform));
  --multiacc-dialog-panel: color-mix(in srgb, var(--podform) 78%, var(--quote));
  --multiacc-dialog-border: color-mix(
    in srgb,
    var(--dark-bord) 72%,
    var(--bord)
  );
  position: relative;
  z-index: 214748002;
  width: min(360px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 12px;
  color: var(--text);
  font: 500 12px/1.4 var(--main-font);
  background: linear-gradient(
    180deg,
    var(--multiacc-dialog-bg),
    var(--multiacc-dialog-panel)
  );
  border: 1px solid var(--multiacc-dialog-border);
  border-radius: var(--ks-radius-lg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.multiacc-dialog,
.multiacc-dialog * {
  box-sizing: border-box;
}

.multiacc-dialog > form {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.multiacc-dialog input {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--quote) 88%, var(--podform));
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xs);
  outline: none;
}

.multiacc-dialog input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.multiacc-dialog form > div {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
  font-family: var(--main-font);
}

.multiacc-dialog form > div:not(:last-child) {
  flex-direction: column;
}

.multiacc-dialog button {
  min-height: 32px;
  margin: 0;
  padding: 6px 12px;
  color: var(--tab-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--ks-radius-xs);
  cursor: pointer;
  font: 700 11px/1.2 var(--main-font);
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}

.multiacc-dialog button:focus-visible,
.multiacc-dialog button:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  transform: translateY(-1px);
}

.force-mobile .multiacc-dialog {
  position: fixed;
  top: calc(72px + env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  left: max(12px, env(safe-area-inset-left));
  width: auto;
  max-height: calc(100svh - 96px);
  overflow: auto;
  margin: 0;
  padding: 12px;
  z-index: 214748002;
}

.force-mobile .multiacc-dialog form > div:last-child {
  flex-direction: column-reverse;
}

.force-mobile .multiacc-dialog button {
  width: 100%;
}

.posts-char-count-wrapper {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 20px;
}

.posts-char-count:before {
  content: 'êîëè÷åñòâî ñèìâîëîâ: ';
  text-transform: uppercase;
  opacity: 0.5;
}

.posts-char-count {
  font-family: var(--main-font);
  font-size: 12px;
}

.rfu-anchor {
  position: relative;
  overflow: visible;
}

.rfu-layer {
  position: absolute;
  inset: 0;
  z-index: 6500;
  overflow: visible;
  pointer-events: none;
}

.rfu-modal {
  position: absolute;
  z-index: 1;
  inset-inline-end: 8px;
  top: 8px;
  display: none;
  min-width: 480px;
  max-width: min(640px, 96%);
  overflow: hidden;
  color: var(--text);
  font: 400 12px/1.35 var(--main-font);
  background: var(--quote);
  border: 1px solid var(--bord);
  border-radius: var(--ks-radius-sm);
  box-shadow: var(--rfu-shadow);
  pointer-events: auto;
}

.rfu-modal,
.rfu-modal * {
  box-sizing: border-box;
}

.rfu-open {
  display: block;
}

.rfu-footer,
.rfu-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: var(--quote);
}

.rfu-toolbar {
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--bord);
}

.rfu-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--bord);
}

.rfu-seg {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.rfu-label {
  color: var(--sec-text);
  font: 600 11px/1.2 var(--main-font);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rfu-btn,
.rfu-host,
.rfu-select {
  font: 500 12px/1.2 var(--main-font);
}

.rfu-host {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--text);
  cursor: pointer;
}

.rfu-host input {
  margin-right: 2px;
  accent-color: var(--accent);
}

.rfu-btn,
.rfu-select {
  color: var(--text);
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: var(--ks-radius-sm);
}

.rfu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    opacity 0.2s ease;
}

.rfu-btn:focus-visible,
.rfu-btn:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.rfu-btn:focus-visible,
.rfu-host input:focus-visible,
.rfu-select:focus-visible {
  outline: 2px solid var(--text-tab-accent);
  outline-offset: 2px;
}

.rfu-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.rfu-select {
  min-height: 30px;
  padding: 0.35rem 0.5rem;
}

.rfu-drop {
  position: relative;
  min-height: 92px;
  padding: 16px;
  background: var(--rfu-panel-bg);
}

.rfu-drop:after {
  content: '';
  inset: 10px;
  border: 2px dashed var(--rfu-drop-border);
  border-radius: var(--ks-radius-lg);
}

.rfu-drop:after,
.rfu-hint {
  position: absolute;
  pointer-events: none;
}

.rfu-hint {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  color: var(--sec-text);
  font: 500 11px/1.35 var(--main-font);
  text-align: center;
}

.rfu-drop .rfu-seg {
  position: relative;
  z-index: 1;
  padding-top: 0.4rem;
}

.rfu-drop.rfu-hover {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
}

.rfu-list {
  max-height: 180px;
  padding: 8px 12px;
  overflow: auto;
  background: var(--quote);
}

.rfu-item,
.rfu-list {
  display: grid;
  gap: 8px;
}

.rfu-item {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  padding: 8px;
  background: var(--podform);
  border: 1px solid var(--bord);
  border-radius: var(--ks-radius-lg);
}

.rfu-thumb {
  display: block;
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
  image-rendering: auto;
  background: var(--tab-text);
  border: 1px solid var(--bord);
  border-radius: var(--ks-radius-sm);
}

.rfu-meta {
  min-width: 0;
  color: var(--text);
  font: 400 12px/1.35 var(--main-font);
}

.rfu-meta b {
  font-weight: 700;
}

.rfu-actions {
  display: flex;
  gap: 8px;
}

.rfu-actions .rfu-btn--ok {
  color: var(--tab-text);
  background: var(--accent);
  border-color: var(--accent);
}

.rfu-actions .rfu-btn--ok:focus-visible,
.rfu-actions .rfu-btn--ok:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

.rfu-progress {
  height: 7px;
  margin-top: 0.4rem;
  overflow: hidden;
  background: var(--rfu-progress-bg);
  border: 1px solid var(--bord);
  border-radius: var(--ks-radius-pill);
}

.rfu-bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.08s linear;
}

.rfu-list a {
  color: var(--accent);
  text-decoration: none;
}

.rfu-list a:focus-visible,
.rfu-list a:hover {
  text-decoration: underline;
}

.rfu-error {
  margin-top: 0.35rem;
  color: var(--prof-link);
}

.rfu-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: -4px;
  margin-left: auto;
  padding: 0;
  border-radius: var(--ks-radius-sm);
}

.rfu-x span {
  font-size: 16px;
  line-height: 1;
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  .rfu-modal {
    inset-inline: 8px;
    min-width: 0;
    max-width: none;
    width: calc(100% - 16px);
  }

  .rfu-footer,
  .rfu-toolbar {
    padding: 8px;
  }

  .rfu-toolbar {
    align-items: stretch;
  }

  .rfu-seg {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .rfu-drop {
    min-height: 104px;
    padding: 14px;
  }

  .rfu-hint {
    padding: 0 18px;
  }

  .rfu-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .rfu-thumb {
    width: 48px;
    height: 48px;
  }

  .rfu-actions {
    grid-column: 1/-1;
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rfu-bar,
  .rfu-btn {
    transition: none;
  }
}

#pun-viewtopic .post .balance-tool {
  display: block;
  box-sizing: border-box;
  width: min(430px, 100%);
  margin: 12px 0 0 auto;
  color: var(--text);
  font-family: var(--main-font);
  text-align: left;
}

#pun-viewtopic .post .balance-tool *,
#pun-viewtopic .post .balance-tool :after,
#pun-viewtopic .post .balance-tool :before {
  box-sizing: border-box;
}

#pun-viewtopic .post .balance-tool dd,
#pun-viewtopic .post .balance-tool dl,
#pun-viewtopic .post .balance-tool p {
  margin: 0;
}

#pun-viewtopic .post .balance-tool__open,
#pun-viewtopic .post .balance-tool__run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px;
  padding: 0 14px;
  color: var(--tab-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--ks-radius-xs);
  box-shadow: var(--ks-balance-button-shadow);
  cursor: pointer;
  font: 700 10px/1.2 var(--main-font);
  letter-spacing: 0.055em;
  text-transform: uppercase;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition:
    color 0.24s ease,
    background-color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease,
    transform 0.14s ease;
}

#pun-viewtopic .post .balance-tool__open {
  float: right;
}

#pun-viewtopic .post .balance-tool__open:before {
  content: '\f51e';
  margin-right: 6px;
  font: 700 11px/1 Font Awesome\6 Pro;
}

#pun-viewtopic .post .balance-tool__open[aria-expanded='true'] {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
}

#pun-viewtopic .post .balance-tool__open:focus-visible,
#pun-viewtopic .post .balance-tool__open:hover,
#pun-viewtopic .post .balance-tool__run:focus-visible,
#pun-viewtopic .post .balance-tool__run:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
  box-shadow: var(--ks-balance-button-shadow-hover);
  transform: translateY(-1px);
}

#pun-viewtopic .post .balance-tool__open:active,
#pun-viewtopic .post .balance-tool__run:active {
  transform: translateY(0);
}

#pun-viewtopic .post .balance-tool__amount:focus-visible,
#pun-viewtopic .post .balance-tool__open:focus-visible,
#pun-viewtopic .post .balance-tool__run:focus-visible,
#pun-viewtopic .post .balance-tool__select:focus-visible {
  outline: 2px solid var(--text-tab-accent);
  outline-offset: 2px;
}

#pun-viewtopic .post .balance-tool__panel {
  clear: both;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  color: var(--text);
  background:
    linear-gradient(180deg, var(--ks-balance-panel-glow), transparent 54%),
    var(--ks-balance-panel-bg);
  border: 1px solid var(--ks-balance-border);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-balance-panel-shadow);
}

#pun-viewtopic .post .balance-tool__panel[hidden] {
  display: none;
}

#pun-viewtopic .post .balance-tool__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

#pun-viewtopic .post .balance-tool__label {
  min-width: 0;
  color: var(--ks-balance-muted);
  font: 700 10px/1.25 var(--main-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#pun-viewtopic .post .balance-tool__amount,
#pun-viewtopic .post .balance-tool__select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  padding: 7px 9px;
  color: var(--text);
  background: var(--ks-balance-field-bg);
  border: 1px solid var(--ks-balance-input-border);
  border-radius: var(--ks-radius-xs);
  box-shadow: var(--ks-balance-field-shadow);
  font: 600 12px/1.25 var(--main-font);
  letter-spacing: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition:
    background-color 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease;
}

#pun-viewtopic .post .balance-tool__select {
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ks-balance-muted) 50%),
    linear-gradient(135deg, var(--ks-balance-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) 50%,
    calc(100% - 10px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

#pun-viewtopic .post .balance-tool__amount {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--accent2);
}

#pun-viewtopic .post .balance-tool__amount:focus-visible,
#pun-viewtopic .post .balance-tool__select:focus-visible {
  background: var(--ks-balance-field-bg-focus);
  border-color: var(--ks-balance-input-border-focus);
  box-shadow: var(--ks-balance-field-shadow-focus);
}

#pun-viewtopic .post .balance-tool__amount:disabled,
#pun-viewtopic .post .balance-tool__run:disabled,
#pun-viewtopic .post .balance-tool__run[aria-disabled='true'],
#pun-viewtopic .post .balance-tool__select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

#pun-viewtopic .post .balance-tool__run:disabled,
#pun-viewtopic .post .balance-tool__run[aria-disabled='true'] {
  color: var(--ks-balance-disabled-text);
  background: var(--ks-balance-disabled-bg);
  border-color: var(--ks-balance-border);
  box-shadow: none;
  transform: none;
}

#pun-viewtopic .post .balance-tool__status-area {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
  font: 500 12px/1.45 var(--main-font);
}

#pun-viewtopic .post .balance-tool__status-area > p {
  margin: 0;
}

#pun-viewtopic .post .balance-tool__error {
  padding: 7px 9px;
  color: var(--prof-link);
  background: var(--ks-balance-error-bg);
  border: 1px solid var(--ks-balance-error-border);
  border-radius: var(--ks-radius-xs);
  font-weight: 700;
}

#pun-viewtopic .post .balance-tool__report {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  color: var(--text);
  background: var(--ks-balance-report-bg);
  border: 1px solid var(--ks-balance-report-border);
  border-left-width: 4px;
  border-radius: var(--ks-radius-sm);
}

#pun-viewtopic .post .balance-tool__report p {
  margin: 0;
}

#pun-viewtopic .post .balance-tool__kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 10px;
  min-width: 0;
}

#pun-viewtopic .post .balance-tool__kv dt {
  color: var(--ks-balance-muted);
  font-weight: 700;
}

#pun-viewtopic .post .balance-tool__kv dd {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

#pun-viewtopic .post .balance-tool.is-busy {
  opacity: 0.72;
  pointer-events: none;
}

.force-mobile #pun-viewtopic .post .balance-tool {
  width: 100%;
  margin: 12px 0 0;
}

.force-mobile #pun-viewtopic .post .balance-tool__open,
.force-mobile #pun-viewtopic .post .balance-tool__run {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  font-size: 11px;
}

.force-mobile #pun-viewtopic .post .balance-tool__panel {
  gap: 12px;
  margin-top: 10px;
  padding: 13px;
  border-radius: var(--ks-radius-lg);
}

.force-mobile #pun-viewtopic .post .balance-tool__kv,
.force-mobile #pun-viewtopic .post .balance-tool__row {
  grid-template-columns: minmax(0, 1fr);
}

.force-mobile #pun-viewtopic .post .balance-tool__label {
  font-size: 10px;
}

.force-mobile #pun-viewtopic .post .balance-tool__amount,
.force-mobile #pun-viewtopic .post .balance-tool__select {
  min-height: 40px;
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  #pun-viewtopic .post .balance-tool__amount,
  #pun-viewtopic .post .balance-tool__open,
  #pun-viewtopic .post .balance-tool__run,
  #pun-viewtopic .post .balance-tool__select {
    transition: none;
  }
}

#quote-bubble {
  position: absolute;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  max-width: min(240px, calc(100% - 8px));
  margin: 0;
  padding: 6px 10px;
  color: var(--prof-text);
  font: 600 12px/1.2 var(--main-font);
  text-align: center;
  text-decoration: none;
  background: var(--profile);
  border: 1px solid var(--prof-bord);
  border-radius: var(--ks-radius-sm);
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    color 0.16s ease,
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease,
    transform 0.16s ease;
}

#quote-bubble.show {
  display: flex;
  opacity: 1;
  transform: none;
}

#quote-bubble:focus-visible,
#quote-bubble:hover {
  color: var(--tab-text);
  background: var(--accent2);
  border-color: var(--accent2);
  box-shadow: var(--shadow2);
}

#quote-bubble:focus-visible {
  outline: 2px solid var(--text-tab-accent);
  outline-offset: 2px;
}

#quote-bubble img {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
  object-fit: contain;
}

#quote-bubble img:not([src]),
#quote-bubble img[src=''] {
  display: none;
}

#quote-bubble span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  #quote-bubble {
    gap: 5px;
    max-width: min(220px, calc(100% - 8px));
    padding: 7px 10px;
    font-size: 11px;
  }

  #quote-bubble img {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #quote-bubble {
    transition: none;
  }
}

.ts-style-btn {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0;
  background: var(--sec-text);
  border: var(--ks-border-dark);
  border-radius: var(--ks-radius-xxs);
}

.ts-style-btn:before {
  content: '\f56b';
  width: 17px;
  height: 17px;
  display: block;
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
  color: var(--tab-text);
  font-size: 17px;
  font-weight: 400;
}

.ts-style-btn.ts-style-winter:before {
  content: '\f2dc';
}

.ts-style-btn.ts-style-spring:before {
  content: '\f18c';
}

.ts-style-mount {
  display: flex;
  gap: 10px;
}

.custom_tag.chrono-episode,
.custom_tag.chrono-episode * {
  box-sizing: border-box;
}

.custom_tag.chrono-episode {
  --ce-gap: 14px;
  --ce-data-gap: 12px;
  --ce-padding: 18px;
  --ce-card-padding: 14px 16px;
  --ce-content-inset: clamp(0px, 4vw, 30px);
  --ce-bg: var(--htm-bg) center/cover;
  --ce-card-bg: var(--quote);
  --ce-card-border: var(--ks-border-default);
  --ce-card-shadow: none;
  --ce-title-bg: var(--quote);
  --ce-title-color: var(--accent2);
  --ce-label-bg: var(--pers-pl) center/cover;
  --ce-label-color: var(--dialog-bg, var(--tab-text));
  --ce-text: var(--text);
  --ce-muted: var(--sec-text);
  --ce-icon-display: none;
  --ce-icon-col: 0px;
  --ce-icon-gap: 0px;
  --ce-icon-size: 40px;
  --ce-icon-bg: transparent;
  --ce-icon-color: var(--accent);
  --ce-thumb-w: 64px;
  --ce-thumb-h: 48px;
  --ce-single-max-w: 430px;
  --ce-single-max-h: 160px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ce-gap);
  width: 100%;
  min-width: 0;
  margin: 0 auto 20px;
  padding: var(--ce-padding);
  overflow: hidden;
  color: var(--ce-text);
  font-family: var(--main-font);
  background: var(--ce-bg);
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xs);
}

.custom_tag.chrono-episode p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.custom_tag.chrono-display {
  position: relative;
  top: -20px;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.custom_tag.chrono-display p {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 3px 28px 5px !important;
  overflow-wrap: anywhere;
  color: var(--ce-title-color) !important;
  background: var(--ce-title-bg);
  border: var(--ce-card-border);
  border-width: 0 1px 1px;
  border-radius: 0 0 var(--ks-radius-xs) var(--ks-radius-xs);
  font-family: var(--sec-font) !important;
  font-size: 21px;
  line-height: 1.15 !important;
  text-align: center;
  text-transform: uppercase;
}

.custom_tag.chrono-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'images images' 'date location' 'members members';
  gap: var(--ce-data-gap);
  min-width: 0;
  margin: 0 var(--ce-content-inset);
}

.custom_tag.chrono-images {
  grid-area: images;
  min-width: 0;
}

.custom_tag.chrono-date {
  grid-area: date;
}

.custom_tag.chrono-location {
  grid-area: location;
}

.custom_tag.chrono-members {
  grid-area: members;
}

.custom_tag.chrono-images p {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 10px;
  background: var(--ce-card-bg);
  border: var(--ce-card-border);
  border-radius: var(--ks-radius-xs);
  box-shadow: var(--ce-card-shadow);
}

.custom_tag.chrono-images p:empty {
  display: none;
}

.custom_tag.chrono-images p > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  text-decoration: none;
}

.custom_tag.chrono-images a > img,
.custom_tag.chrono-images img,
.custom_tag.chrono-images img.postimg {
  display: block;
  width: var(--ce-thumb-w);
  height: var(--ce-thumb-h);
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 3px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  background: color-mix(in srgb, var(--quote) 58%, transparent);
  border: var(--ce-card-border);
  border-radius: var(--ks-radius-xs);
}

.custom_tag.chrono-images p:has(> a:only-child) > a > img,
.custom_tag.chrono-images p:has(> img:only-child) > img {
  width: auto;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.custom_tag.chrono-announce,
.custom_tag.chrono-date,
.custom_tag.chrono-location,
.custom_tag.chrono-members {
  position: relative;
  display: grid;
  grid-template-columns: var(--ce-icon-col) minmax(0, 1fr);
  gap: 6px var(--ce-icon-gap);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: var(--ce-card-padding);
  overflow: hidden;
  background: var(--ce-card-bg);
  border: var(--ce-card-border);
  border-radius: var(--ks-radius-xs);
  box-shadow: var(--ce-card-shadow);
}

.custom_tag.chrono-date,
.custom_tag.chrono-location,
.custom_tag.chrono-members {
  margin: 0;
}

.custom_tag.chrono-announce {
  margin: 0 var(--ce-content-inset);
}

.custom_tag.chrono-announce:before,
.custom_tag.chrono-date:before,
.custom_tag.chrono-location:before,
.custom_tag.chrono-members:before {
  display: inline-flex;
  grid-column: 2;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  padding: 2px 10px 3px;
  overflow: hidden;
  color: var(--ce-label-color);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--ce-label-bg);
  border-radius: var(--ks-radius-xs);
  font-family: var(--sec-font);
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: 0.7px;
  text-align: center;
  text-transform: uppercase;
}

.custom_tag.chrono-date:before {
  content: 'Äàòà';
}

.custom_tag.chrono-location:before {
  content: 'Ëîêàöèÿ';
}

.custom_tag.chrono-members:before {
  content: 'Ó÷àñòíèêè';
}

.custom_tag.chrono-announce:before {
  content: 'Ñþæåò';
}

.custom_tag.chrono-announce:after,
.custom_tag.chrono-date:after,
.custom_tag.chrono-location:after,
.custom_tag.chrono-members:after {
  display: var(--ce-icon-display);
  grid-column: 1;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  place-self: center;
  width: var(--ce-icon-size);
  height: var(--ce-icon-size);
  color: var(--ce-icon-color);
  background: var(--ce-icon-bg);
  border-radius: var(--ks-radius-xs);
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.custom_tag.chrono-announce > p,
.custom_tag.chrono-date > p,
.custom_tag.chrono-location > p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  color: var(--ce-text);
  overflow-wrap: break-word;
  word-break: normal;
  text-align: left;
}

.custom_tag.chrono-date > p {
  white-space: nowrap;
}

.custom_tag.chrono-members .chrono-member {
  grid-column: 2;
  min-width: 0;
}

.custom_tag.chrono-members .chrono-member p {
  min-width: 0;
  color: var(--ce-text);
  overflow-wrap: break-word;
  word-break: normal;
  text-align: left;
}

.custom_tag.chrono-serial {
  display: none;
}

.force-mobile .custom_tag.chrono-episode {
  --ce-gap: 14px;
  --ce-data-gap: 14px;
  --ce-padding: 14px;
  --ce-card-padding: 14px 12px;
  --ce-content-inset: 0px;
  --ce-thumb-w: 44px;
  --ce-thumb-h: 44px;
  --ce-single-max-h: 130px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 18px;
  border-radius: var(--ks-radius-lg);
}

.force-mobile .custom_tag.chrono-data {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'images images' 'date location' 'members members';
  margin: 0;
}

.force-mobile .custom_tag.chrono-display p {
  padding: 4px 16px 5px;
  font-size: 18px;
}

.force-mobile .custom_tag.chrono-announce,
.force-mobile .custom_tag.chrono-date,
.force-mobile .custom_tag.chrono-location,
.force-mobile .custom_tag.chrono-members {
  border-radius: var(--ks-radius-md);
}

.force-mobile .custom_tag.chrono-images p {
  gap: 6px;
  padding: 8px;
}

.force-mobile .custom_tag.chrono-announce > p,
.force-mobile .custom_tag.chrono-date > p,
.force-mobile .custom_tag.chrono-location > p,
.force-mobile .custom_tag.chrono-members .chrono-member p {
  font-size: 14px;
  line-height: 1.5;
}

:root[data-style='summer'] .custom_tag.chrono-episode {
  --ce-bg:
    radial-gradient(
      circle at 50% 0%,
      color-mix(in srgb, var(--accent) 9%, transparent) 0 18%,
      transparent 54%
    ),
    var(--summer-topic-shell);
  --ce-card-bg: var(--summer-topic-panel);
  --ce-card-border: 1px solid var(--summer-topic-border);
  --ce-card-shadow: var(--summer-topic-glow);
  --ce-title-bg: var(--summer-topic-paper-strong);
  --ce-title-color: var(--summer-topic-title);
  --ce-label-bg: var(--summer-topic-label-bg);
  --ce-label-color: var(--summer-topic-label-text);
  --ce-icon-display: flex;
  --ce-icon-col: 42px;
  --ce-icon-gap: 12px;
  --ce-icon-bg: var(--summer-topic-icon-bg);
  --ce-icon-color: var(--accent);
  --ce-thumb-w: var(--summer-chrono-thumb-w, 64px);
  --ce-thumb-h: var(--summer-chrono-thumb-h, 48px);
  --ce-single-max-w: var(--summer-chrono-single-max-w, 430px);
  --ce-single-max-h: var(--summer-chrono-single-max-h, 170px);
  position: relative;
  isolation: isolate;
  border-color: var(--summer-topic-border);
  box-shadow: var(--summer-topic-shadow);
}

:root[data-style='summer'] .custom_tag.chrono-episode:after,
:root[data-style='summer'] .custom_tag.chrono-episode:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

:root[data-style='summer'] .custom_tag.chrono-episode:before {
  background: var(--offer-glow-top), var(--offer-glow-bottom);
}

:root[data-style='summer'] .custom_tag.chrono-episode:after {
  inset: auto 8% -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--summer-topic-line),
    transparent
  );
}

:root[data-style='summer'] .custom_tag.chrono-display p {
  border-color: var(--summer-topic-border);
  font-family: Asther, auge, serif;
  text-shadow: 0 1px 0 var(--summer-title-glow);
}

:root[data-style='summer'] .custom_tag.chrono-images p {
  background:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--accent) 9%, transparent),
      transparent 68%
    ),
    var(--ce-card-bg);
}

:root[data-style='summer'] .custom_tag.chrono-images a > img,
:root[data-style='summer'] .custom_tag.chrono-images img,
:root[data-style='summer'] .custom_tag.chrono-images img.postimg {
  border-color: var(--summer-chrono-image-frame, var(--summer-topic-border));
  box-shadow: var(--summer-topic-thumb-shadow);
  filter: saturate(0.95) contrast(0.98);
  transition:
    transform 0.5s ease,
    filter 0.5s ease,
    box-shadow 0.5s ease;
}

:root[data-style='summer'] .custom_tag.chrono-images img:hover {
  transform: translateY(-2px);
  filter: saturate(1.08) contrast(1.02);
}

:root[data-style='summer'] .custom_tag.chrono-date:after {
  content: '\f073';
}

:root[data-style='summer'] .custom_tag.chrono-location:after {
  content: '\f3c5';
}

:root[data-style='summer'] .custom_tag.chrono-members:after {
  content: '\f0c0';
}

:root[data-style='summer'] .custom_tag.chrono-announce:after {
  content: '\f52d';
}

:root[data-style='summer'][data-scheme='light'] .custom_tag.chrono-episode {
  --ce-card-bg:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(255, 250, 244, 0.72) 0%,
      transparent 64%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 244, 0.72),
      rgba(250, 240, 228, 0.78) 52%,
      rgba(239, 218, 197, 0.82)
    );
  --ce-card-border: 1px solid rgba(212, 172, 137, 0.68);
}

:root[data-style='summer'][data-scheme='light'] .custom_tag.chrono-display p {
  color: var(--summer-chrono-title);
  text-shadow:
    0 1px 0 rgba(255, 250, 243, 0.9),
    0 3px 12px rgba(151, 92, 57, 0.18);
}

:root[data-style='summer'][data-scheme='light']
  .custom_tag.chrono-images
  a
  > img,
:root[data-style='summer'][data-scheme='light'] .custom_tag.chrono-images img,
:root[data-style='summer'][data-scheme='light']
  .custom_tag.chrono-images
  img.postimg {
  background: rgba(255, 248, 240, 0.72);
  border-color: rgba(192, 143, 105, 0.72);
}

.force-mobile:root[data-style='summer'] .custom_tag.chrono-episode,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-episode {
  --ce-card-padding: 12px 10px;
  --ce-icon-display: none;
  --ce-icon-col: 0px;
  --ce-icon-gap: 0px;
  --ce-icon-size: 34px;
  --ce-thumb-w: 44px;
  --ce-thumb-h: 44px;
  --ce-single-max-h: 126px;
}

.force-mobile:root[data-style='summer'] .custom_tag.chrono-date,
.force-mobile:root[data-style='summer'] .custom_tag.chrono-location,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-date,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-location {
  min-height: 108px;
}

.force-mobile:root[data-style='summer'] .custom_tag.chrono-announce:before,
.force-mobile:root[data-style='summer'] .custom_tag.chrono-date:before,
.force-mobile:root[data-style='summer'] .custom_tag.chrono-location:before,
.force-mobile:root[data-style='summer'] .custom_tag.chrono-members:before,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-announce:before,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-date:before,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-location:before,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-members:before {
  padding: 2px 8px 3px;
  font-size: 11px;
  letter-spacing: 0.45px;
}

.force-mobile:root[data-style='summer'] .custom_tag.chrono-date > p,
.force-mobile:root[data-style='summer'] .custom_tag.chrono-location > p,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-date > p,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-location > p {
  font-size: 14px;
  line-height: 1.35;
}

.force-mobile:root[data-style='summer'] .custom_tag.chrono-location > p,
:root[data-style='summer'] body.force-mobile .custom_tag.chrono-location > p {
  overflow-wrap: break-word;
  word-break: normal;
}

.unread-notifications #notifications-wrap table {
  padding: 10px 15px;
}

.font-resizer .slider {
  accent-color: var(--accent);
}

.scroll-rail {
  position: fixed;
  right: auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--plash);
  color: var(--tab-text) !important;
  text-decoration: none;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgb(0 0 0/30%);
  border: var(--ks-border-dark);
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
  margin: 5px 0 5px 1100px;
}

.scroll-rail.rail-up {
  bottom: 170px;
}

.scroll-rail.rail-down {
  bottom: 110px;
}

input#dice-count {
  border-radius: var(--ks-radius-xxs);
  border: none;
  padding: 3px 5px;
}

.dice-modal input[type='text'] {
  width: 100%;
  padding: 0.4em;
  box-sizing: border-box;
}

.modal-dialog {
  background: var(--quote);
  border-radius: var(--ks-radius-xs);
  font-family: var(--main-font);
  font-size: 0.9em;
}

.modal-dialog input {
  border-radius: var(--ks-radius-xxs);
  border: var(--ks-border-default);
  background: var(--podform);
}

.modal-actions button {
  background: var(--accent);
  border: var(--ks-border-accent);
  padding: 3px 10px;
  border-radius: var(--ks-radius-xs);
  color: #ddd;
  text-transform: uppercase;
  font-family: var(--main-font);
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.episode-alert {
  border: 2px solid var(--accent);
}

.float-toolbar {
  display: none;
  position: absolute;
  background: var(--podform);
  font-family: var(--main-font);
  border: 1px solid #bbb;
  padding: 8px 12px;
  border-radius: var(--ks-radius-sm);
  z-index: 99;
  box-shadow: 0 2px 6px rgb(0 0 0/6%);
  font-size: 14px;
  margin-top: 6px;
}

.float-toolbar .float-btn {
  cursor: pointer;
  margin: 0 6px;
  font-size: 18px;
  color: #333;
  transition: color 0.2s;
}

.float-toolbar .float-btn:hover {
  color: var(--accent);
}

#button-float {
  background: url(https://i.imgur.com/CUf5wNZ.png) no-repeat center 7px;
  width: 34px;
  min-width: 34px;
  cursor: pointer;
}

.float-toolbar strong {
  width: 100%;
  display: block;
  margin-bottom: 10px;
}

.modal__content {
  margin: 20px;
  background: var(--dark-bord);
  border-radius: var(--ks-radius-xs);
  border: 1px solid var(--button-hover);
  padding: 20px;
}

.post-content .highlight-text {
  background-color: var(--accent);
  color: var(--bt-bg);
}

.post-content abbr {
  cursor: help;
  border-bottom: 1px dotted #000;
}

.custom_tag.kindredaca p {
  margin: 0;
  padding: 5px 0 0 !important;
  line-height: normal;
}

.custom_tag.kindredaca {
  background: var(--quote);
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xs);
}

.custom_tag.kahead {
  text-transform: none;
  background: var(--kndr-img) top/cover;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--tab-text);
  align-items: center;
  border-radius: 5px 5px 0 0;
  gap: 0;
  font-family: var(--sec-font);
  font-size: 36px;
  text-shadow: 3px 0 10px #4646463b;
}

.custom_tag.kaheadtitle {
  text-transform: uppercase;
  text-align: center;
}

.custom_tag.kaheadtitle,
.custom_tag.katext {
  font-family: var(--main-font);
  font-size: 13px;
}

.custom_tag.katext {
  padding: 20px 30px;
  line-height: 20px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.custom_tag.katexttext {
  border: var(--ks-border-default);
  background: var(--htm-clr);
  border-radius: var(--ks-radius-xs);
  padding: 10px 20px;
}

.pa-fld2 div {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Asther;
  font-size: 13px;
  text-transform: lowercase;
  color: #fff;
}

.kindred-info .ki-ash {
  position: absolute;
  top: 50%;
  right: -12px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  display: block;
  z-index: 2;
}

.kindred-info .ki-ash img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  filter: drop-shadow(0 0 2px rgb(0 0 0/35%));
  pointer-events: auto;
  -webkit-user-drag: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

@media screen and (width <=520px) and (hover: none) and (pointer: coarse) {
  .kindred-info {
    padding-right: 36px;
    font-size: 13px;
  }

  .kindred-info .ki-ash {
    right: 10px;
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kindred-info .ki-ash img {
    transition: none;
  }
}

#sticker-pack-button {
  cursor: pointer;
  position: relative;
}

#sticker-pack-button.loading {
  opacity: 0.6;
  cursor: progress;
}

.sticker-pack-modal-container {
  position: absolute;
  z-index: 1000;
  top: 200%;
  transform: translateX(-50%);
  margin-top: 4px;
}

.sticker-pack-modal {
  position: relative;
  width: 560px;
  max-width: 96vw;
  height: 320px;
  max-height: 320px;
  background: var(--quote);
  color: var(--text);
  border-radius: var(--ks-radius-sm);
  box-shadow: 0 2px 16px rgb(0 0 0/25%);
  border: var(--ks-border-default);
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  overflow: visible;
}

.sticker-pack-modal.active {
  display: flex;
}

.sticker-pack-modal .modal__tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 0 8px;
  min-height: 40px;
  background: transparent;
  border-bottom: 1px solid var(--bord);
  position: relative;
  margin: 4px 8px 0;
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
}

.sticker-pack-modal .modal__tabs::-webkit-scrollbar {
  height: 6px;
}

.sticker-pack-modal .modal__tabs::-webkit-scrollbar-track {
  background: transparent;
}

.sticker-pack-modal .modal__tabs::-webkit-scrollbar-thumb {
  background: rgb(0 0 0/20%);
  border-radius: 3px;
}

.sticker-pack-modal .modal__tab {
  cursor: pointer;
  padding: 6px 12px;
  margin: 0;
  border-radius: 5px 5px 0 0;
  border: var(--ks-border-transparent);
  border-bottom: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  font: inherit;
  min-height: 32px;
  box-sizing: border-box;
}

.sticker-pack-modal .modal__tab.active {
  background: var(--accent);
  box-shadow: none;
  color: var(--bt-bg, #f3f1f2);
  border-color: var(--accent2);
  margin-bottom: -1px;
}

.sticker-pack-tab-icon {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: var(--ks-radius-xxs);
  -o-object-fit: contain;
  object-fit: contain;
  text-align: center;
  line-height: 24px;
  font-size: 16px;
}

.sticker-pack-modal .modal__content {
  margin: 0;
  background: transparent;
  border: none;
  padding: 10px;
  box-sizing: border-box;
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
}

.sticker-pack-modal .modal__content.active {
  display: flex;
}

.sticker-pack-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.sticker-pack-item {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sticker-pack-item img {
  max-width: 44px;
  max-height: 44px;
  display: block;
  cursor: pointer;
  border-radius: var(--ks-radius-xxs);
  width: 100% !important;
  height: 100% !important;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background-color 0.12s ease-out;
}

.sticker-pack-item:hover img {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 0 0 2px var(--accent2);
  background-color: rgb(0 0 0/3%);
}

.sticker-pack-remove-item {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #b00;
  background: hsla(0, 0%, 100%, 0.7);
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-pack-modal-add {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 4px 8px;
  border-top: 1px solid var(--bord);
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--podform);
  box-sizing: border-box;
  border-radius: var(--ks-radius-xxs);
}

.sticker-pack-modal-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 8px;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-xxs);
  background: var(--htm-clr);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  height: 30px;
}

.sticker-pack-modal-input::-moz-placeholder {
  color: var(--sec-text);
  opacity: 0.7;
}

.sticker-pack-modal-input::placeholder {
  color: var(--sec-text);
  opacity: 0.7;
}

.sticker-pack-modal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--quote);
}

.sticker-pack-modal-add-btn,
.sticker-pack-modal__close {
  border-radius: var(--ks-radius-xxs);
  border: var(--ks-border-accent);
  background: var(--accent);
  color: var(--bt-bg, #f3f1f2);
  cursor: pointer;
  font: inherit;
}

.sticker-pack-modal-add-btn {
  flex: 0 0 auto;
  min-width: 36px;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sticker-pack-modal-add-btn:hover,
.sticker-pack-modal__close:hover {
  filter: brightness(1.05);
}

.sticker-pack-modal-add-btn:active,
.sticker-pack-modal__close:active {
  transform: translateY(1px);
}

.sticker-pack-modal__footer {
  border-top: 1px solid var(--bord);
  padding: 6px 10px;
  background: var(--podform);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sticker-pack-modal__close {
  min-width: 80px;
  padding: 10px;
  font-size: 12px;
}

i.fa-user {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (width <=600px) and (hover: none) and (pointer: coarse) {
  #sticker-pack-button {
    position: static;
  }

  .sticker-pack-modal-container {
    position: fixed;
    inset: 0;
    transform: none;
    margin-top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: rgb(0 0 0/45%);
  }

  .sticker-pack-modal-container.active {
    display: flex;
  }

  .sticker-pack-modal {
    width: 100%;
    max-width: 420px;
    height: 380px;
    max-height: min(380px, 100%);
  }

  .sticker-pack-modal.active {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .sticker-pack-modal .modal__tabs {
    grid-column: 1/2;
    grid-row: 1/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 2px 8px 4px;
    margin: 0;
    border-bottom: none;
    border-right: 1px solid var(--bord);
    overflow: hidden auto;
    min-height: 0;
    gap: 4px;
  }

  .sticker-pack-modal .modal__tab {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--ks-radius-xxs);
    border: var(--ks-border-transparent);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
  }

  .sticker-pack-modal .modal__tab.active {
    background: var(--accent);
    color: var(--bt-bg, #f3f1f2);
    border-color: var(--accent2);
    margin-bottom: 0;
  }

  .sticker-pack-modal .modal__tab .sticker-pack-tab-icon,
  .sticker-pack-modal .modal__tab img {
    width: 28px;
    height: 28px;
    display: block;
    margin: auto;
    -o-object-fit: contain;
    object-fit: contain;
  }

  .sticker-pack-modal .modal__tab i.sticker-pack-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .sticker-pack-modal .modal__content {
    grid-column: 2/3;
    grid-row: 1/3;
    padding: 10px;
  }

  .sticker-pack-modal__footer {
    grid-column: 1/3;
    grid-row: 3/4;
  }

  .sticker-pack-modal-add {
    padding: 4px 6px;
  }

  .sticker-pack-modal-add-btn,
  .sticker-pack-modal-input {
    height: 28px;
    font-size: 11px;
  }
}

#pun-reputation .post_reputation textarea {
  font-size: 16px;
}

#messages strong a {
  font-weight: 900;
  font-size: 0.8rem;
}

#ks-closed-topic-recovery {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: var(--overlay-bg, rgb(0 0 0/50%));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap, 16px);
}

#ks-closed-topic-recovery .ks-ctr__panel {
  width: min(920px, 100%);
  background: var(--dialog-bg, #d1cfcf);
  color: var(--text-color, #333);
  border: 1px solid var(--panel-border, #b5b5b5);
  border-radius: var(--radius, 6px);
  box-shadow: 0 20px 70px rgb(0 0 0/35%);
  padding: var(--small-gap, 8px);
  font-family:
    var(--main-font, system-ui),
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
}

#ks-closed-topic-recovery .ks-ctr__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-gap, 8px);
  margin-bottom: var(--small-gap, 8px);
}

#ks-closed-topic-recovery .ks-ctr__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--sec-text, var(--text-color, #333));
}

#ks-closed-topic-recovery .ks-ctr__iconbtn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--input-border, #a9a5a5);
  background: var(--panel-bg-light, #cbc9ca);
  color: var(--text-color, #333);
  border-radius: calc(var(--radius, 6px) + 2px);
  padding: 6px 10px;
  cursor: pointer;
}

#ks-closed-topic-recovery .ks-ctr__iconbtn:hover {
  background: var(--form-bg, #b5b5b5);
}

#ks-closed-topic-recovery .ks-ctr__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-color, #666);
  margin-bottom: var(--small-gap, 8px);
}

#ks-closed-topic-recovery .ks-ctr__ul {
  margin: 6px 0 0 18px;
  padding: 0;
}

#ks-closed-topic-recovery code {
  background: var(--panel-bg-light, #cbc9ca);
  border: 1px solid var(--panel-border, #b5b5b5);
  padding: 1px 6px;
  border-radius: calc(var(--radius, 6px) - 2px);
  color: var(--text-color, #333);
}

#ks-closed-topic-recovery .ks-ctr__ta {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  background: var(--form-bg, #b5b5b5);
  color: var(--text-color, #333);
  border: 1px solid var(--input-border, #a9a5a5);
  border-radius: var(--radius, 6px);
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}

#ks-closed-topic-recovery .ks-ctr__ta:focus {
  border-color: var(--input-focus, #915252);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--input-focus, #915252) 25%, transparent);
}

#ks-closed-topic-recovery .ks-ctr__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--small-gap, 8px);
  margin-top: var(--small-gap, 8px);
}

#ks-closed-topic-recovery .ks-ctr__btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid var(--input-border, #a9a5a5);
  background: var(--button-bg, #915252);
  color: var(--button-text, #dddbdc);
  padding: 8px 12px;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#ks-closed-topic-recovery .ks-ctr__btn:hover {
  background: var(--button-hover, #272727);
}

#ks-closed-topic-recovery .ks-ctr__hint {
  margin-top: var(--small-gap, 8px);
  font-size: 12px;
  color: var(--muted-color, #666);
  min-height: 16px;
}

.winter #pun-navlinks,
.winter #pun-navlinks.nav-scrolled {
  background: url(https://forumstatic.ru/files/001c/8d/fd/13277.jpg);
}

.winter .activees,
.winter .activees2 {
  --promo-overlay: #879db3bd;
  --promo-overlay-hover: color-mix(
    in srgb,
    var(--navi-link-hov) 70%,
    transparent
  );
}

.winter .activees div:after,
.winter .activees2 div:after {
  background: var(--promo-overlay);
}

.winter .activees a:focus-visible div:after,
.winter .activees a:hover div:after,
.winter .activees2 a:focus-visible div:after,
.winter .activees2 a:hover div:after {
  opacity: 0.68;
  background: var(--promo-overlay-hover);
}

.winter .pa-fld1 {
  border-top: 1px solid var(--prof-bord);
  background: linear-gradient(180deg, #edebec87, transparent);
}

.punbb .post-video {
  width: 100%;
  max-width: 100%;
}

.punbb .post-video__inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
}

.punbb .post-video__inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.copy-all-btn,
.copy-post-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--bord, #b8b8b8);
  background: var(--podform, #c9c8c8);
  color: var(--text, #000);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  vertical-align: middle;
  line-height: 1;
  transform: translateZ(0);
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    opacity 0.12s ease;
}

.copy-all-btn:hover,
.copy-post-btn:hover {
  background: var(--navi-link-hov, #df6565);
  color: var(--tab-text, #c9c8c8);
  border-color: var(--dark-bord, #232323);
}

.copy-all-btn:active,
.copy-post-btn:active {
  background: var(--accent2, #5b2a2a);
  color: var(--tab-text, #c9c8c8);
  transform: translateY(1px);
  box-shadow: 0 2px 7px rgb(0 0 0/12%);
}

.copy-all-btn:focus-visible,
.copy-post-btn:focus-visible {
  outline: none;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.12),
    0 0 0 2px var(--text-tab-accent, #b96161);
}

.copy-all-btn:disabled,
.copy-post-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.copy-all-btn > i,
.copy-post-btn > i {
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}

.punbb .post h3 .copy-post-btn {
  position: relative;
  top: -1px;
}

#pun-main h1 .copy-all-btn {
  position: relative;
  top: -2px;
}

.winter .indOnline,
.winter .pa-author a {
  background: var(--dark-bord);
}

.winter .author-wrap {
  border: var(--ks-border-profile);
}

.spring #pun-navlinks {
  background: var(--navi-bg);
}

.spring .scroll-rail {
  box-shadow: var(--shadow);
}

.spring #pun-ulinks .container {
  background: var(--transp-bg);
}

.spring #pun-index .category tr.inew {
  background: var(--pf-bg) center/cover;
  box-shadow: var(--shadow2);
  border: 1px solid var(--bord2);
}

.spring .author-wrap {
  background: var(--kndr-img) center/cover;
  border: var(--ks-border-profile);
}

.spring .author-wrap,
.spring .punbb .post .post-author a:hover {
  color: var(--tab-text);
}

.spring .ka-text text {
  border: 1px solid var(--bord2);
  background: var(--bord);
}

.spring .academy-panel {
  border: var(--ks-border-dark);
}

.spring .academy-panel-body {
  color: var(--tab-text);
}

.spring .pa-fld1 {
  border-top: 1px solid var(--prof-bord);
  background: linear-gradient(180deg, #472d5e4a, transparent);
}

.spring .punbb .post .post-author {
  box-shadow: var(--shadow);
}

.character,
.character * {
  box-sizing: border-box;
}

.character {
  --cm-font: var(--main-font, Georgia, 'Times New Roman', serif);
  --cm-radius: var(--ks-radius-lg, var(--radius, 18px));
  --cm-radius-sm: var(--ks-radius-sm, 10px);
  --cm-gap: 16px;
  --cm-gap-sm: 8px;
  --cm-side-w: 198px;
  --cm-avatar-w: 156px;
  --cm-avatar-h: 204px;
  --cm-slot: 54px;
  --cm-slot-gap: 10px;
  --cm-appearance-h: 132px;
  --cm-tile-h: 38px;
  --cm-tile-gap: 10px;
  --cm-overlay: rgba(12, 10, 12, 0.68);
  --cm-text: var(--text, #302d2a);
  --cm-muted: color-mix(in srgb, var(--cm-text) 62%, transparent);
  --cm-soft: color-mix(in srgb, var(--cm-text) 9%, transparent);
  --cm-softer: color-mix(in srgb, var(--cm-text) 5%, transparent);
  --cm-accent: var(--accent, #8b5f64);
  --cm-accent2: var(--accent2, #ac8876);
  --cm-accent-soft: color-mix(in srgb, var(--cm-accent) 18%, transparent);
  --cm-accent-glow: color-mix(in srgb, var(--cm-accent) 34%, transparent);
  --cm-panel: color-mix(
    in srgb,
    var(--podform, #f4efe8) 88%,
    var(--quote, #fffaf3)
  );
  --cm-panel-strong: color-mix(
    in srgb,
    var(--quote, #fffaf3) 84%,
    var(--podform, #f4efe8)
  );
  --cm-bg: var(--podform, #f4efe8);
  --cm-deep: color-mix(in srgb, var(--quote, #fffaf3) 48%, var(--cm-accent) 8%);
  --cm-border-color: color-mix(
    in srgb,
    var(--cm-accent) 34%,
    var(--cm-text) 18%
  );
  --cm-border: 1px solid
    color-mix(in srgb, var(--cm-border-color) 62%, transparent);
  --cm-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --cm-inner-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.16);
  --cm-focus: color-mix(in srgb, var(--cm-accent2) 64%, #fff);
  --cm-button-text: var(--tab-text, #fff7ee);
  color: var(--cm-text);
  font: 400 14px/1.5 var(--cm-font);
}

:root[data-scheme='dark'] .character,
body.dark .character,
html.dark .character {
  --cm-overlay: rgba(5, 5, 7, 0.76);
  --cm-panel: color-mix(in srgb, var(--podform, #29262b) 82%, #000);
  --cm-panel-strong: color-mix(
    in srgb,
    var(--quote, #242229) 72%,
    var(--podform, #29262b)
  );
  --cm-bg: var(--podform, #29262b);
  --cm-deep: color-mix(in srgb, var(--quote, #242229) 54%, #000);
  --cm-muted: color-mix(in srgb, var(--cm-text) 58%, transparent);
  --cm-soft: color-mix(in srgb, #fff 7%, transparent);
  --cm-softer: color-mix(in srgb, #fff 4%, transparent);
  --cm-shadow: 0 26px 82px rgba(0, 0, 0, 0.58);
  --cm-inner-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.07);
}

.character-modal {
  position: relative;
  width: -moz-max-content;
  width: max-content;
  max-width: calc(100vw - 36px);
  color: var(--cm-text);
  background: transparent;
}

.modal-overlay.cm-no-backdrop {
  padding: 24px;
  background:
    radial-gradient(
      circle at 50% 18%,
      color-mix(in srgb, var(--accent, #8b5f64) 24%, transparent),
      transparent 34%
    ),
    var(--cm-overlay) !important;
  backdrop-filter: blur(7px) saturate(0.92);
}

.character :where(button, input, select, summary, a):focus-visible {
  outline: 2px solid var(--cm-focus);
  outline-offset: 3px;
}

.character :where(button, input, select) {
  font: inherit;
}

.character :where(button) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.character .cm-bg,
.character .cm-btn,
.character .cm-close,
.character .cm-details > summary,
.character .cm-icon,
.character .cm-input,
.character .cm-link,
.character .cm-plate,
.character .cm-slot--item,
.character .modal__tab {
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.22s ease,
    transform 0.22s ease;
}

.character .modal__content,
.character .modal__content.active {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.character .modal__content[hidden] {
  display: none;
}

.cm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.cm-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 48px));
  min-width: min(780px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  min-height: 560px;
  overflow: hidden;
  background-color: var(--cm-bg);
  background-image:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--cm-accent) 10%, transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 15% 0,
      color-mix(in srgb, var(--cm-accent2) 16%, transparent),
      transparent 38%
    );
  border: var(--cm-border);
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow), var(--cm-inner-shadow);
  isolation: isolate;
}

.cm-shell:after,
.cm-shell:before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.cm-shell:before {
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--cm-accent) 12%, transparent),
      transparent
    ),
    radial-gradient(
      circle at 50% -20%,
      color-mix(in srgb, #fff 12%, transparent),
      transparent 42%
    );
  opacity: 0.8;
}

.cm-shell:after {
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--cm-border-color) 32%, transparent);
  border-radius: calc(var(--cm-radius) - 7px);
}

.cm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--cm-muted);
  background: color-mix(in srgb, var(--cm-panel) 78%, transparent);
  border: var(--cm-border);
  border-radius: var(--cm-radius-sm);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.cm-close:focus-visible,
.cm-close:hover {
  color: var(--cm-button-text);
  background: var(--cm-accent);
  border-color: color-mix(in srgb, var(--cm-accent) 72%, #fff 16%);
  transform: translateY(-1px);
}

.cm-header {
  position: relative;
  display: grid;
  grid-template-columns: var(--cm-side-w) minmax(260px, 1fr) var(--cm-side-w);
  gap: var(--cm-gap);
  align-items: stretch;
  flex: 0 0 auto;
  min-height: 274px;
  padding: 22px 66px 18px 22px;
  border-bottom: var(--cm-border);
}

.cm-header:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 42px;
  bottom: 34px;
  width: 1px;
  background: linear-gradient(transparent, var(--cm-accent-soft), transparent);
  opacity: 0.85;
}

.cm-side {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-content: start;
  min-width: 0;
  gap: 10px;
}

.cm-avatar {
  position: relative;
  width: var(--cm-avatar-w);
  height: var(--cm-avatar-h);
  overflow: hidden;
  background: var(--cm-panel-strong);
  border: var(--cm-border);
  border-radius: calc(var(--cm-radius) - 4px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
}

.cm-avatar:before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 2;
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  border-radius: calc(var(--cm-radius) - 10px);
  pointer-events: none;
}

.cm-avatar:after {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 3;
  max-width: calc(100% - 16px);
  padding: 5px 9px 4px;
  color: var(--cm-button-text);
  background: color-mix(in srgb, var(--cm-accent) 72%, rgba(0, 0, 0, 0.2));
  border: 1px solid hsla(0, 0%, 100%, 0.22);
  border-radius: 999px;
  font: 700 9px/1 var(--main-font, Arial, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.cm-side--left .cm-avatar:after {
  content: 'ïåðñîíàæ';
}

.cm-side--right .cm-avatar:after {
  content: 'äóøà';
}

.cm-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  color: transparent;
  font-size: 0;
  filter: saturate(0.9) contrast(1.02);
  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.cm-side:hover .cm-avatar img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.04);
}

.cm-side__meta {
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  min-width: 0;
  padding: 0 6px;
  text-align: center;
}

.cm-name {
  max-width: 100%;
  font: 700 22px/1.12 var(--sec-font, var(--cm-font));
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.cm-link,
.cm-name {
  color: var(--cm-text);
}

.cm-link {
  display: inline-block;
  text-decoration: none;
}

.cm-link:hover {
  color: var(--cm-accent);
  text-shadow: 0 0 18px var(--cm-accent-glow);
}

.cm-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 28px;
  margin-top: 8px;
  padding: 5px 12px;
  color: var(--cm-muted);
  background: color-mix(in srgb, var(--cm-panel) 70%, transparent);
  border: var(--cm-border);
  border-radius: 999px;
  font: 700 10px/1.25 var(--main-font, Arial, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cm-center {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
}

.cm-center:before {
  content: '\2726';
  position: absolute;
  top: 22px;
  left: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--cm-accent2);
  font-family: Arial, sans-serif;
  background: var(--cm-deep);
  border: var(--cm-border);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px var(--cm-softer),
    0 14px 34px rgba(0, 0, 0, 0.14);
  transform: translateX(-50%);
}

.cm-bars {
  display: grid;
  width: min(430px, 100%);
  gap: 12px;
  padding: 82px 24px 28px;
  background: color-mix(in srgb, var(--cm-panel) 74%, transparent);
  border: var(--cm-border);
  border-radius: calc(var(--cm-radius) - 2px);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1);
}

.cm-barrow {
  display: grid;
  gap: 7px;
}

.cm-barrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--cm-muted);
  font: 700 10px/1.2 var(--main-font, Arial, sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cm-barrow__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cm-barrow__value {
  flex: 0 0 auto;
  color: var(--cm-text);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cm-bar {
  position: relative;
  height: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cm-text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cm-border-color) 38%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.16);
}

.cm-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 18px currentcolor;
}

.character .modal__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 0 0 auto;
  padding: 0 22px;
  background: color-mix(in srgb, var(--cm-panel-strong) 76%, transparent);
  border-bottom: var(--cm-border);
}

.character .modal__tab {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: 58px;
  padding: 0;
  color: var(--cm-muted);
  background: transparent;
  border: 0;
  border-left: 1px solid
    color-mix(in srgb, var(--cm-border-color) 24%, transparent);
  font-size: 18px;
  cursor: pointer;
}

.character .modal__tab:last-child {
  border-right: 1px solid
    color-mix(in srgb, var(--cm-border-color) 24%, transparent);
}

.character .modal__tab:after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cm-accent),
    transparent
  );
  opacity: 0;
  transform: scaleX(0.36);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.character .modal__tab:hover {
  color: var(--cm-accent);
  background: var(--cm-softer);
}

.character .modal__tab.active,
.character .modal__tab[aria-selected='true'] {
  color: var(--cm-text);
  background: linear-gradient(180deg, var(--cm-accent-soft), transparent);
}

.character .modal__tab.active:after,
.character .modal__tab[aria-selected='true']:after {
  opacity: 1;
  transform: scaleX(1);
}

.cm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 22px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.character ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.character ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--cm-accent) 52%, transparent);
  border-radius: 999px;
}

.character ::-webkit-scrollbar-track {
  background: transparent;
}

.cm-pane {
  width: 100%;
  min-width: 0;
  padding: 18px;
  background: color-mix(in srgb, var(--cm-panel) 78%, transparent);
  border: var(--cm-border);
  border-radius: calc(var(--cm-radius) - 4px);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.08);
}

.cm-h3 {
  font: 700 18px/1.2 var(--sec-font, var(--cm-font));
}

.cm-h3,
.cm-p {
  margin: 0 0 10px;
  color: var(--cm-text);
}

.cm-list,
.cm-muted {
  color: var(--cm-muted);
}

.cm-list {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.cm-mt {
  margin-top: 18px;
}

.cm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.cm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  color: var(--cm-text);
  background: var(--cm-softer);
  border: var(--cm-border);
  border-radius: 999px;
  font-size: 12px;
}

.cm-gift {
  display: grid;
  grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cm-gift__media {
  position: relative;
  overflow: hidden;
  background: var(--cm-panel-strong);
  border: var(--cm-border);
  border-radius: calc(var(--cm-radius) - 4px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.cm-gift__media:after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid hsla(0, 0%, 100%, 0.18);
  border-radius: calc(var(--cm-radius) - 10px);
  pointer-events: none;
}

.cm-gift__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
  object-fit: cover;
}

.cm-gift__text {
  min-width: 0;
}

.cm-details {
  margin-top: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--cm-panel-strong) 70%, transparent);
  border: var(--cm-border);
  border-radius: var(--cm-radius-sm);
}

.cm-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 11px 14px;
  color: var(--cm-text);
  cursor: pointer;
  list-style: none;
}

.cm-details > summary:after {
  content: '+';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--cm-muted);
  border: var(--cm-border);
  border-radius: 50%;
}

.cm-details[open] > summary:after {
  content: '&#8722;';
  color: var(--cm-accent);
}

.cm-details > summary::-webkit-details-marker {
  display: none;
}

.cm-details__body {
  padding: 0 14px 14px;
  color: var(--cm-muted);
}

.cm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.cm-input {
  flex: 1 1 auto;
  min-width: 160px;
  height: 42px;
  padding: 0 14px;
  color: var(--cm-text);
  background: color-mix(in srgb, var(--cm-panel-strong) 72%, transparent);
  border: var(--cm-border);
  border-radius: var(--cm-radius-sm);
  outline: none;
}

.cm-input::-moz-placeholder {
  color: color-mix(in srgb, var(--cm-muted) 78%, transparent);
}

.cm-input::placeholder {
  color: color-mix(in srgb, var(--cm-muted) 78%, transparent);
}

.cm-input:focus {
  border-color: color-mix(in srgb, var(--cm-accent) 70%, #fff 10%);
  box-shadow: 0 0 0 3px var(--cm-accent-soft);
}

.cm-toolbar__right {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  color: var(--cm-button-text);
  background: linear-gradient(135deg, var(--cm-accent), var(--cm-accent2));
  border: 1px solid color-mix(in srgb, var(--cm-accent) 74%, transparent);
  border-radius: var(--cm-radius-sm);
  cursor: pointer;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cm-accent) 18%, transparent);
}

.cm-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--cm-accent) 24%, transparent);
}

.cm-btn--ghost {
  color: var(--cm-text);
  background: color-mix(in srgb, var(--cm-panel-strong) 78%, transparent);
  border: var(--cm-border);
  box-shadow: none;
}

.cm-btn--ghost:hover {
  color: var(--cm-accent);
  border-color: color-mix(in srgb, var(--cm-accent) 70%, transparent);
  box-shadow: none;
}

.cm-btn--icon {
  width: 42px;
  min-width: 42px;
  padding: 0;
}

.cm-filters {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9;
  width: 238px;
  padding: 14px;
  background: var(--cm-panel-strong);
  border: var(--cm-border);
  border-radius: var(--cm-radius-sm);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.cm-filters[hidden] {
  display: none;
}

.cm-filters__title {
  margin-bottom: 8px;
  font-weight: 800;
}

.cm-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  color: var(--cm-text);
  font-size: 13px;
  cursor: pointer;
}

.cm-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--cm-accent);
}

.cm-filters__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.cm-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
  gap: 18px;
  align-items: start;
}

.cm-slots {
  --cm-slots-rows: 4;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cm-slot), 1fr));
  grid-auto-rows: var(--cm-slot);
  gap: var(--cm-slot-gap);
  align-content: start;
  min-width: 0;
  height: calc(
    var(--cm-slots-rows) * var(--cm-slot) + (var(--cm-slots-rows) - 1) *
      var(--cm-slot-gap)
  );
  overflow: auto;
  padding: 2px 8px 2px 2px;
  scrollbar-gutter: stable;
}

.cm-slots[data-slots='char-ach'],
.cm-slots[data-slots='player-ach'] {
  --cm-slots-rows: 2;
}

.cm-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--cm-softer), transparent),
    color-mix(in srgb, var(--cm-panel-strong) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--cm-border-color) 48%, transparent);
  border-radius: var(--cm-radius-sm);
}

.cm-slot--empty {
  border-style: dashed;
  opacity: 0.82;
}

.cm-slot--empty:before {
  content: '';
  width: 30%;
  height: 30%;
  border: 1px solid color-mix(in srgb, var(--cm-muted) 38%, transparent);
  border-radius: 50%;
  opacity: 0.55;
}

.cm-slot--item {
  padding: 0;
  cursor: pointer;
}

.cm-slot--item:hover {
  border-color: var(--cm-accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.16);
}

.cm-slot--item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.cm-slot--skeleton {
  overflow: hidden;
  border-style: solid;
}

.cm-slot--skeleton:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #fff 18%, transparent),
    transparent
  );
  transform: translateX(-110%);
  animation: cm-shimmer 1.2s linear infinite;
}

@keyframes cm-shimmer {
  0% {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(110%);
  }
}

.cm-qty {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  color: var(--cm-button-text);
  background: color-mix(in srgb, var(--cm-accent) 78%, #000 12%);
  border: 1px solid hsla(0, 0%, 100%, 0.24);
  border-radius: 999px;
  font: 800 11px/18px var(--main-font, Arial, sans-serif);
  text-align: center;
}

.character .is-selected {
  border-color: var(--cm-accent);
  box-shadow:
    0 0 0 3px var(--cm-accent-soft),
    0 12px 24px rgba(0, 0, 0, 0.16);
}

.cm-infobox {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 14px;
  background: color-mix(in srgb, var(--cm-panel-strong) 76%, transparent);
  border: var(--cm-border);
  border-radius: calc(var(--cm-radius) - 4px);
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.cm-infobox.is-updating {
  opacity: 0.72;
  transform: translateY(2px);
}

.cm-infobox__title {
  margin-bottom: 12px;
  color: var(--cm-text);
  font: 800 14px/1.2 var(--main-font, Arial, sans-serif);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cm-infobox__body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.cm-infobox__img {
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--cm-panel);
  border: var(--cm-border);
  border-radius: var(--cm-radius-sm);
}

.cm-infobox__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.cm-infobox__text {
  min-width: 0;
}

.cm-infobox__name {
  margin-bottom: 4px;
  color: var(--cm-text);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.cm-infobox__meta {
  margin-bottom: 8px;
  color: var(--cm-muted);
  font-size: 12px;
}

.cm-infobox__desc {
  color: var(--cm-text);
  font-size: 13px;
  line-height: 1.45;
}

.cm-infobox--gift .cm-infobox__desc,
.cm-infobox--gift .cm-infobox__meta,
.cm-infobox.is-empty .cm-infobox__body,
.cm-infobox[data-kind='gift'] .cm-infobox__desc,
.cm-infobox[data-kind='gift'] .cm-infobox__meta {
  display: none;
}

.cm-appearance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cm-frame {
  min-width: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--cm-panel-strong) 72%, transparent);
  border: var(--cm-border);
  border-radius: calc(var(--cm-radius) - 4px);
}

.cm-frame__head {
  padding: 13px 14px 11px;
  background: linear-gradient(90deg, var(--cm-accent-soft), transparent);
  border-bottom: var(--cm-border);
}

.cm-frame__head .cm-h3 {
  margin: 0;
  font-size: 16px;
}

.cm-frame__body {
  padding: 14px;
}

.cm-backgrounds,
.cm-bg-list,
.cm-bgs,
.cm-icons,
.cm-plates {
  display: grid;
  align-content: start;
  height: var(--cm-appearance-h);
  max-height: var(--cm-appearance-h);
  overflow: hidden auto;
  padding: 2px 8px 2px 2px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.cm-icons {
  --cm-icon: 42px;
  grid-template-columns: repeat(auto-fill, minmax(var(--cm-icon), 1fr));
  grid-auto-rows: var(--cm-icon);
  gap: 10px;
}

.cm-backgrounds,
.cm-bg-list,
.cm-bgs,
.cm-plates {
  grid-template-columns: 1fr;
  grid-auto-rows: var(--cm-tile-h);
  gap: var(--cm-tile-gap);
}

.cm-bg,
.cm-icon,
.cm-plate {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cm-muted);
  background: var(--cm-panel);
  border: var(--cm-border);
  border-radius: var(--cm-radius-sm);
  cursor: copy;
}

.cm-icon {
  height: 100%;
  font-size: 16px;
}

.cm-icon i,
.cm-icon img {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
  object-fit: contain;
}

.cm-bg,
.cm-plate {
  height: var(--cm-tile-h);
}

.cm-bg__thumb,
.cm-plate__thumb {
  display: block;
  width: 100%;
  height: 100%;
  background-position: 50%;
  background-size: cover;
  pointer-events: none;
}

.cm-bg.is-copied,
.cm-bg:hover,
.cm-icon.is-copied,
.cm-icon:hover,
.cm-plate.is-copied,
.cm-plate:hover {
  color: var(--cm-accent);
  border-color: var(--cm-accent);
  box-shadow: 0 0 0 3px var(--cm-accent-soft);
}

.force-mobile .modal-overlay.cm-no-backdrop {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0;
}

.force-mobile .character-modal {
  width: 100%;
  max-width: 100%;
}

.force-mobile .character {
  --cm-gap: 12px;
  --cm-side-w: auto;
  --cm-avatar-w: 72px;
  --cm-avatar-h: 92px;
  --cm-slot: minmax(46px, 1fr);
  --cm-slot-gap: 8px;
  --cm-appearance-h: 168px;
  width: 100%;
  min-width: 0;
  font-size: 13px;
}

.force-mobile .cm-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  border: 0;
  border-radius: 0;
}

.force-mobile .cm-shell:after {
  inset: 6px;
  border-radius: 14px;
}

.force-mobile .cm-close {
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
}

.force-mobile .cm-header {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 0;
  padding: 54px 12px 12px;
  gap: 10px;
}

.force-mobile .cm-header:before {
  display: none;
}

.force-mobile .cm-side {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  place-items: center start;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  background: color-mix(in srgb, var(--cm-panel) 66%, transparent);
  border: var(--cm-border);
  border-radius: 14px;
}

.force-mobile .cm-side__meta,
.force-mobile .cm-side__meta--right {
  justify-items: start;
  padding: 0;
  text-align: left;
}

.force-mobile .cm-name {
  font-size: 16px;
  line-height: 1.15;
}

.force-mobile .cm-role {
  width: 100%;
  min-height: 24px;
  margin-top: 5px;
  padding: 4px 8px;
  font-size: 8px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.force-mobile .cm-avatar {
  border-radius: 12px;
}

.force-mobile .cm-avatar:before {
  inset: 5px;
  border-radius: 8px;
}

.force-mobile .cm-avatar:after {
  display: none;
}

.force-mobile .cm-side--left {
  order: 1;
}

.force-mobile .cm-side--right {
  order: 2;
}

.force-mobile .cm-center {
  order: 3;
  grid-column: 1/-1;
}

.force-mobile .cm-center:before {
  top: 14px;
  width: 34px;
  height: 34px;
  font-size: 13px;
}

.force-mobile .cm-bars {
  width: 100%;
  gap: 10px;
  padding: 58px 12px 14px;
  border-radius: 14px;
}

.force-mobile .character .modal__tabs {
  order: 3;
  padding: 0;
  border-top: var(--cm-border);
  border-bottom: 0;
}

.force-mobile .character .modal__tab {
  height: calc(54px + env(safe-area-inset-bottom) / 2);
  padding-bottom: env(safe-area-inset-bottom);
  font-size: 17px;
}

.force-mobile .cm-scroll {
  order: 2;
  padding: 12px;
}

.force-mobile .cm-pane {
  padding: 12px;
  border-radius: 14px;
}

.force-mobile .cm-appearance,
.force-mobile .cm-gift,
.force-mobile .cm-two {
  grid-template-columns: 1fr;
  gap: 12px;
}

.force-mobile .cm-gift__media img {
  max-height: 220px;
}

.force-mobile .cm-toolbar {
  align-items: stretch;
  gap: 8px;
}

.force-mobile .cm-input {
  min-width: 0;
}

.force-mobile .cm-filters {
  position: fixed;
  inset: auto 12px calc(66px + env(safe-area-inset-bottom));
  width: auto;
}

.force-mobile .cm-slots {
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  grid-auto-rows: 46px;
  height: auto;
  max-height: none;
  padding-right: 0;
  overflow: visible;
}

.force-mobile .cm-infobox {
  position: static;
  padding: 12px;
  border-radius: 14px;
}

.force-mobile .cm-infobox__body {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
}

.force-mobile .cm-infobox__img {
  width: 72px;
  height: 72px;
}

.force-mobile .cm-backgrounds,
.force-mobile .cm-bg-list,
.force-mobile .cm-bgs,
.force-mobile .cm-icons,
.force-mobile .cm-plates {
  height: var(--cm-appearance-h);
  max-height: var(--cm-appearance-h);
}

.force-mobile .cm-frame__body,
.force-mobile .cm-frame__head {
  padding: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .character *,
  .character :after,
  .character :before {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

.custom_tag_fittingroom {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  box-sizing: border-box;
}

#ks-fittingroom-post {
  --fr-preview-width: 246px;
}

#ks-fittingroom-post,
#ks-fittingroom-post .container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  box-sizing: border-box;
  overflow: visible;
}

.force-mobile #ks-fittingroom-post,
.force-mobile #ks-fittingroom-post .ks-fr-panel,
.force-mobile #ks-fittingroom-post .ks-fr-ui,
.force-mobile #ks-fittingroom-post .post-body,
.force-mobile #ks-fittingroom-post .post-box,
.force-mobile #ks-fittingroom-post .post-content,
.force-mobile #ks-fittingroom-post > .container {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.force-mobile #ks-fittingroom-post {
  width: 100%;
  margin-inline: 0;
  overflow: visible;
}

.force-mobile #ks-fittingroom-post > .container {
  display: block;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.force-mobile #ks-fittingroom-post .post-body {
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.force-mobile #ks-fittingroom-post .post-box {
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.force-mobile #ks-fittingroom-post .ks-fr-panel,
.force-mobile #ks-fittingroom-post .ks-fr-ui,
.force-mobile #ks-fittingroom-post .post-content {
  width: 100%;
  margin-inline: 0;
}

#ks-fittingroom-post .post-author[data-ks='fitting-profile'] {
  display: block;
  visibility: visible;
  opacity: 1;
  height: auto;
  max-height: none;
  overflow: visible;
}

#ks-fittingroom-post .post-author[data-ks='fitting-profile'] ul {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
}

#ks-fittingroom-post
  .post-author[data-ks='fitting-profile']
  li:not(.pa-author) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-author[data-ks='fitting-profile'] .ks-fr-applied-icon {
  width: 20px;
  height: 20px;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
  image-rendering: auto;
}

.post-author[data-ks='fitting-profile'] .pers-plah {
  position: relative;
}

.post-author[data-ks='fitting-profile'] .ks-fr-applied-plate,
.post-author[data-ks='fitting-profile'] .ks-fr-plateoverlay,
.post-author[data-ks='fitting-profile'] .pers-plah.ks-fr-platewrap:after {
  position: absolute;
  inset: 0;
}

.post-author[data-ks='fitting-profile'] .ks-fr-applied-plate {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: inherit;
}

.post-author[data-ks='fitting-profile'] .pers-plah.ks-fr-platewrap {
  isolation: isolate;
}

.post-author[data-ks='fitting-profile'] .pers-plah.ks-fr-platewrap:after {
  content: '';
  z-index: 2;
  background: var(--fr-plate-overlay);
  pointer-events: none;
}

.post-author[data-ks='fitting-profile'] .ks-fr-plateleft {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  -o-object-fit: contain;
  object-fit: contain;
  z-index: 3;
  filter: var(--fr-plate-left-filter);
  pointer-events: none;
}

.post-author[data-ks='fitting-profile'] .ks-fr-plateoverlay {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.post-author[data-ks='fitting-profile'] .ks-fr-plateoverlay__text {
  width: 100%;
  padding: 0 12px 0 calc(12px + var(--ks-fr-leftspace, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  color: var(--ks-fr-platecolor, var(--tab-text));
  text-shadow: var(--fr-plate-text-shadow);
}

.post-author[data-ks='fitting-profile'] .ks-fr-plateoverlay__line {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-fr-ui {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--main-font, system-ui, sans-serif);
  color: var(--text);
}

.ks-fr-ui,
.ks-fr-ui * {
  box-sizing: border-box;
}

.ks-fr-ui button,
.ks-fr-ui input,
.ks-fr-ui textarea {
  font-family: inherit;
  color: inherit;
}

.ks-fr-ui .ks-fr-item:focus-visible,
.ks-fr-ui .ks-fr-pill:focus-visible,
.ks-fr-ui :where(button, input, textarea):focus-visible {
  outline: 2px solid var(--text-tab-accent);
  outline-offset: 2px;
}

.ks-fr-ui .ks-fr-cart,
.ks-fr-ui .ks-fr-create,
.ks-fr-ui .ks-fr-panel {
  border: 1px solid var(--fr-border);
  border-radius: var(--ks-radius-sm, 6px);
  background: var(--fr-panel);
}

.ks-fr-ui .ks-fr-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--ks-radius-md, 8px);
  box-shadow: var(--fr-shadow);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 340px);
  grid-template-areas: 'tabs tabs' 'subtabs subtabs' 'tools tools' 'list cart' 'create cart' 'divider divider';
  gap: var(--fr-gap);
  align-items: start;
  background: var(--fr-bg);
}

.ks-fr-ui .ks-fr-actions,
.ks-fr-ui .ks-fr-cart__actions,
.ks-fr-ui .ks-fr-cart__right,
.ks-fr-ui .ks-fr-cart__summary,
.ks-fr-ui .ks-fr-cart__total,
.ks-fr-ui .ks-fr-cartright,
.ks-fr-ui .ks-fr-controls,
.ks-fr-ui .ks-fr-create__buy,
.ks-fr-ui .ks-fr-row,
.ks-fr-ui .ks-fr-subtabs,
.ks-fr-ui .ks-fr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ks-fr-ui .ks-fr-panel > * {
  min-width: 0;
}

.ks-fr-ui .ks-fr-tabs {
  grid-area: tabs;
}

.ks-fr-ui .ks-fr-subtabs {
  grid-area: subtabs;
}

.ks-fr-ui #ks-fr-cart-clear,
.ks-fr-ui #ks-fr-cart-copy,
.ks-fr-ui .ks-fr-actions button,
.ks-fr-ui .ks-fr-create__row button,
.ks-fr-ui .ks-fr-pill,
.ks-fr-ui .ks-fr-subtabs button,
.ks-fr-ui .ks-fr-tabs button,
.ks-fr-ui .ks-fr-tools button {
  border: 1px solid var(--fr-border);
  border-radius: var(--ks-radius-sm, 6px);
  cursor: pointer;
  transition:
    color 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease,
    opacity 0.12s ease;
}

.ks-fr-ui .ks-fr-subtabs button,
.ks-fr-ui .ks-fr-tabs button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 12px;
  background: var(--fr-panel);
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ks-fr-ui .ks-fr-subtabs button[aria-pressed='true'],
.ks-fr-ui .ks-fr-tabs button[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent2);
  color: var(--tab-text);
  box-shadow: var(--fr-item-shadow);
}

.ks-fr-ui #ks-fr-cart-clear:hover,
.ks-fr-ui .ks-fr-actions button:hover,
.ks-fr-ui .ks-fr-create__row button:hover,
.ks-fr-ui .ks-fr-pill:hover,
.ks-fr-ui .ks-fr-subtabs button:hover,
.ks-fr-ui .ks-fr-tabs button:hover,
.ks-fr-ui .ks-fr-tools button:hover {
  border-color: var(--accent2);
}

.ks-fr-ui .ks-fr-item:active,
.ks-fr-ui .ks-fr-pill:active,
.ks-fr-ui .ks-fr-subtabs button:active,
.ks-fr-ui .ks-fr-tabs button:active {
  transform: translateY(1px);
}

.ks-fr-ui .ks-fr-tools {
  grid-area: tools;
  display: flex;
  gap: 8px;
  align-items: center;
}

.ks-fr-ui #ks-fr-custom-plate-text,
.ks-fr-ui #ks-fr-text,
.ks-fr-ui .ks-fr-cart__comment textarea,
.ks-fr-ui .ks-fr-create textarea,
.ks-fr-ui .ks-fr-create__row input[type='url'],
.ks-fr-ui .ks-fr-tools input[type='search'] {
  border: 1px solid var(--fr-border);
  border-radius: var(--ks-radius-sm, 6px);
  outline: none;
  background: var(--fr-field-bg);
  color: var(--text);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background-color 0.14s ease;
}

.ks-fr-ui .ks-fr-tools input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
}

.ks-fr-ui .ks-fr-tools input[type='search']::-moz-placeholder,
.ks-fr-ui input::-moz-placeholder,
.ks-fr-ui textarea::-moz-placeholder {
  color: var(--fr-muted);
}

.ks-fr-ui .ks-fr-tools input[type='search']::placeholder,
.ks-fr-ui input::placeholder,
.ks-fr-ui textarea::placeholder {
  color: var(--fr-muted);
}

.ks-fr-ui .ks-fr-cart__comment textarea:focus-visible,
.ks-fr-ui .ks-fr-tools input[type='search']:focus-visible,
.ks-fr-ui input[type='url']:focus-visible,
.ks-fr-ui textarea:focus-visible {
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 25%, transparent);
}

.ks-fr-ui #ks-fr-cart-clear,
.ks-fr-ui #ks-fr-cart-copy,
.ks-fr-ui .ks-fr-actions button,
.ks-fr-ui .ks-fr-create__row button,
.ks-fr-ui .ks-fr-tools button {
  min-height: 32px;
  padding: 0 12px;
  background: transparent;
  font-weight: 800;
}

.ks-fr-ui .ks-fr-tools button {
  height: 34px;
  font-weight: 700;
}

.ks-fr-ui .ks-fr-actions button:hover,
.ks-fr-ui .ks-fr-create__row button:hover,
.ks-fr-ui .ks-fr-pill:hover,
.ks-fr-ui .ks-fr-tools button:hover {
  background-color: color-mix(in srgb, var(--fr-panel) 72%, transparent);
}

.ks-fr-ui .ks-fr-list {
  grid-area: list;
  min-height: 240px;
  max-height: 520px;
  overflow: hidden auto;
  padding: 8px;
  border-radius: var(--ks-radius-sm, 6px);
  border: 1px solid var(--fr-border);
  background: var(--fr-panel);
  display: grid;
  gap: 8px;
  align-content: start;
}

.ks-fr-ui .ks-fr-list[data-cat='icon'] {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.ks-fr-ui .ks-fr-list[data-cat='background'],
.ks-fr-ui .ks-fr-list[data-cat='plate'] {
  grid-template-columns: minmax(0, 1fr);
}

.ks-fr-ui .ks-fr-cartitem,
.ks-fr-ui .ks-fr-create__block,
.ks-fr-ui .ks-fr-item,
.ks-fr-ui .ks-fr-mini {
  border: 1px solid var(--fr-border-soft);
  border-radius: var(--ks-radius-sm, 6px);
}

.ks-fr-ui .ks-fr-cartitem,
.ks-fr-ui .ks-fr-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--fr-panel-soft);
}

.ks-fr-ui .ks-fr-item {
  min-width: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease,
    background-color 0.12s ease;
}

.ks-fr-ui .ks-fr-item:hover {
  border-color: var(--accent2);
  box-shadow: var(--fr-item-shadow);
}

.ks-fr-ui .ks-fr-item[aria-pressed='true'] {
  border-color: var(--accent2);
  box-shadow: var(--fr-item-shadow-active);
}

.ks-fr-ui .ks-fr-item.ks-fr-item--icon {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
}

.ks-fr-ui
  .ks-fr-list[data-mode='owned'][data-cat='icon']
  .ks-fr-item.ks-fr-item--icon {
  grid-template-columns: 44px minmax(0, 1fr);
}

.ks-fr-ui .ks-fr-list[data-cat='background'] .ks-fr-item,
.ks-fr-ui .ks-fr-list[data-cat='plate'] .ks-fr-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.ks-fr-ui .ks-fr-list[data-mode='shop'][data-cat='background'] .ks-fr-item,
.ks-fr-ui .ks-fr-list[data-mode='shop'][data-cat='plate'] .ks-fr-item {
  padding-bottom: 10px;
}

.ks-fr-ui .ks-fr-list[data-cat='background'] .ks-fr-controls,
.ks-fr-ui .ks-fr-list[data-cat='plate'] .ks-fr-controls {
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2px;
}

.ks-fr-ui .ks-fr-list[data-mode='owned'][data-cat='background'] .ks-fr-controls,
.ks-fr-ui .ks-fr-list[data-mode='owned'][data-cat='plate'] .ks-fr-controls {
  display: none;
}

.ks-fr-ui .ks-fr-cartthumb,
.ks-fr-ui .ks-fr-thumb {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--ks-radius-md, 8px);
  border: 1px solid var(--fr-border-soft);
  background: var(--fr-thumb-bg);
}

.ks-fr-ui .ks-fr-cartthumb.is-icon,
.ks-fr-ui .ks-fr-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ks-fr-ui .ks-fr-thumb--icon {
  width: 44px;
  height: 44px;
}

.ks-fr-ui .ks-fr-cartthumb.is-icon {
  width: 40px;
  height: 40px;
}

.ks-fr-ui .ks-fr-cartthumb.is-icon img,
.ks-fr-ui .ks-fr-thumb--icon img {
  width: 22px;
  height: 22px;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

.ks-fr-ui .ks-fr-cartthumb.is-wide,
.ks-fr-ui .ks-fr-thumb--wide {
  background: 50% / cover no-repeat;
  flex: 0 0 auto;
}

.ks-fr-ui .ks-fr-thumb--wide {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.ks-fr-ui .ks-fr-list[data-cat='plate'] .ks-fr-thumb--wide {
  height: 38px;
  background-size: cover;
}

.ks-fr-ui .ks-fr-list[data-cat='background'] .ks-fr-thumb--wide {
  height: 90px;
  background-size: cover;
}

.ks-fr-ui .ks-fr-cartthumb.is-wide {
  width: 86px;
  height: 40px;
}

.ks-fr-ui .ks-fr-cap,
.ks-fr-ui .ks-fr-carttitle {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text);
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-fr-ui .ks-fr-cap {
  line-height: 1.15;
}

.ks-fr-ui .ks-fr-list[data-cat='background'] .ks-fr-cap.ks-fr-hidden,
.ks-fr-ui .ks-fr-list[data-cat='plate'] .ks-fr-cap.ks-fr-hidden {
  display: none;
}

.ks-fr-ui .ks-fr-cartright,
.ks-fr-ui .ks-fr-controls {
  flex: 0 0 auto;
}

.ks-fr-ui .ks-fr-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--accent2);
}

.ks-fr-ui .ks-fr-moneyicon {
  opacity: 0.95;
}

.ks-fr-ui .ks-fr-cart__total,
.ks-fr-ui .ks-fr-mini__label,
.ks-fr-ui .ks-fr-muted {
  font-size: 12px;
  color: var(--fr-muted);
}

.ks-fr-ui .ks-fr-muted {
  opacity: 0.9;
}

.ks-fr-ui .ks-fr-empty {
  padding: 14px 10px;
  text-align: center;
}

.ks-fr-ui .ks-fr-pill {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  border-radius: var(--ks-radius-pill, 999px);
}

.ks-fr-ui .ks-fr-create {
  grid-area: create;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ks-fr-ui .ks-fr-create__block,
.ks-fr-ui .ks-fr-mini {
  background: var(--fr-panel-soft);
  padding: 10px;
}

.ks-fr-ui .ks-fr-mini {
  gap: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}

.ks-fr-ui .ks-fr-cart__title,
.ks-fr-ui .ks-fr-h {
  font-family: var(--sec-font, inherit);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 12px;
  color: var(--accent2);
}

.ks-fr-ui .ks-fr-h {
  margin-bottom: 6px;
  font-weight: 800;
}

.ks-fr-ui .ks-fr-cart__title {
  flex: 0 0 auto;
  font-weight: 900;
}

.ks-fr-ui .ks-fr-row {
  align-items: center;
}

.ks-fr-ui #ks-fr-custom-plate-text,
.ks-fr-ui #ks-fr-text,
.ks-fr-ui .ks-fr-cart__comment textarea,
.ks-fr-ui .ks-fr-create textarea,
.ks-fr-ui .ks-fr-create__row input[type='url'] {
  width: 100%;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.ks-fr-ui .ks-fr-create__row input[type='url'] {
  flex: 1 1 260px;
  width: auto;
  min-width: 0;
}

.ks-fr-ui .ks-fr-create__row textarea {
  flex: 1 1 100%;
  min-width: 0;
}

.ks-fr-ui #ks-fr-text {
  min-height: 90px;
  resize: vertical;
}

.ks-fr-ui .ks-fr-cart__comment textarea,
.ks-fr-ui .ks-fr-plate-ta {
  resize: vertical;
}

.ks-fr-ui .ks-fr-plate-ta {
  min-height: 62px;
}

.ks-fr-ui .ks-fr-cart__comment textarea {
  min-height: 84px;
}

.ks-fr-ui input[type='color'] {
  width: 44px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--fr-border);
  border-radius: var(--ks-radius-sm, 6px);
}

.ks-fr-ui .ks-fr-actions {
  margin-top: 8px;
}

.ks-fr-ui .ks-fr-create__buy {
  justify-content: space-between;
  margin-top: 8px;
}

.ks-fr-ui #ks-fr-cart-copy,
.ks-fr-ui .ks-fr-create__buy .ks-fr-create-add {
  background: var(--accent);
  border-color: var(--accent2);
  color: var(--tab-text);
}

.ks-fr-ui #ks-fr-cart-copy:hover,
.ks-fr-ui .ks-fr-create__buy .ks-fr-create-add:hover {
  filter: brightness(1.05);
}

.ks-fr-ui #ks-fr-cart-clear:hover {
  background-color: var(--fr-panel-soft);
}

.ks-fr-ui .ks-fr-divider {
  grid-area: divider;
  height: 1px;
  background: var(--fr-border-soft);
}

.ks-fr-ui .ks-fr-cart {
  grid-area: cart;
  padding: 10px;
  min-height: 240px;
  max-height: 520px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ks-fr-ui .ks-fr-cart__footer,
.ks-fr-ui .ks-fr-cart__head {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--fr-border-soft);
}

.ks-fr-ui .ks-fr-cart__head {
  order: 4;
  display: grid;
  gap: 10px;
}

.ks-fr-ui .ks-fr-cart__list {
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.ks-fr-ui .ks-fr-cart__comment {
  flex: 0 0 auto;
}

.ks-fr-ui .ks-fr-cart__footer {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
}

.ks-fr-ui .ks-fr-cart__summary {
  align-items: center;
  justify-content: space-between;
}

.ks-fr-ui .ks-fr-cart__actions,
.ks-fr-ui .ks-fr-cart__right {
  justify-content: flex-end;
}

.ks-fr-ui .ks-fr-cart__right {
  align-items: center;
}

.ks-fr-ui .ks-fr-cartitem {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

.ks-fr-ui .ks-fr-cart-del {
  width: 30px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.ks-fr-ui .ks-fr-toast {
  position: sticky;
  bottom: 8px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--ks-radius-pill, 999px);
  border: 1px solid var(--fr-toast-border);
  background: var(--fr-toast-bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.ks-fr-ui .ks-fr-toast.is-show {
  opacity: 1;
  transform: translateY(0);
}

.ks-fr-ui .ks-fr-hidden.ks-fr-hidden {
  display: none;
}

@media screen and (width <=860px) and (hover: none) and (pointer: coarse) {
  .ks-fr-ui .ks-fr-panel {
    grid-template-columns: 1fr;
    grid-template-areas: 'tabs' 'subtabs' 'tools' 'list' 'create' 'cart' 'divider';
  }

  .ks-fr-ui .ks-fr-cart {
    max-height: none;
  }
}

@media screen and (width <=640px) and (hover: none) and (pointer: coarse) {
  .ks-fr-ui .ks-fr-list[data-cat='background'] .ks-fr-thumb--wide {
    height: 76px;
  }
}

@media screen and (width <=520px) and (hover: none) and (pointer: coarse) {
  .ks-fr-ui .ks-fr-list[data-cat='icon'] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .ks-fr-ui .ks-fr-cartitem,
  .ks-fr-ui .ks-fr-item.ks-fr-item--icon {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 6px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ks-fr-ui .ks-fr-item,
  .ks-fr-ui .ks-fr-pill,
  .ks-fr-ui .ks-fr-subtabs button,
  .ks-fr-ui .ks-fr-tabs button,
  .ks-fr-ui .ks-fr-toast {
    transition: none;
  }
}

.ts-style-btn.ts-style-summer:before {
  content: '\f185';
}

.ts-style-btn.is-active {
  border: 1px solid var(--accent);
  background: var(--accent2);
}

#pun-userlist .formal,
#pun-userlist .usertable {
  margin-top: 16px;
}

#pun-userlist .formal .container,
#pun-userlist .usertable .container {
  box-sizing: border-box;
  margin: 0;
  padding: 18px;
  background: var(--quote, var(--podform, transparent));
  border: 1px solid var(--bord, transparent);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--shadow, 4px 4px 20px #0000000d);
}

#pun-userlist .formal .fs-box.inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

#pun-userlist .formal p {
  margin: 0;
}

#pun-userlist .formal .infofield {
  grid-column: 1/-1;
  padding-top: 4px;
  color: var(--sec-text, var(--text, inherit));
  font-size: 11px;
  line-height: 1.45;
}

#pun-userlist .formal input[type='text'],
#pun-userlist .formal select {
  box-sizing: border-box;
  width: 100%;
}

#pun-userlist .formal .formsubmit {
  margin-top: 12px;
  text-align: center;
}

#pun-userlist .usertable table,
#pun-userlist .usertable tbody,
#pun-userlist .usertable td,
#pun-userlist .usertable th,
#pun-userlist .usertable thead,
#pun-userlist .usertable tr {
  border: 0;
  background: transparent;
}

#pun-userlist .usertable thead {
  display: none;
}

#pun-userlist .usertable tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#pun-userlist .usertable tr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: 'name name name' 'title relation posts' 'registered registered lastvisit';
  gap: 10px 12px;
  box-sizing: border-box;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  background: var(--podform, var(--quote, transparent));
  border: 1px solid var(--bord, transparent);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--shadow, 4px 4px 20px #0000000d);
}

#pun-userlist .usertable tr:before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, currentColor);
  opacity: 0.55;
}

#pun-userlist .usertable tr:hover {
  border-color: var(--accent, var(--bord, transparent));
}

#pun-userlist .usertable td,
#pun-userlist .usertable td.tc2,
#pun-userlist .usertable td.tc3,
#pun-userlist .usertable td.tcl {
  display: flex;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  padding: 0;
  color: var(--text, inherit);
  text-align: left;
  text-transform: none;
}

#pun-userlist .usertable td:not(.username) {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--quote, transparent) 62%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--bord, currentColor) 68%, transparent);
  border-radius: 7px;
  font: 600 12px/1.25 var(--main-font, Arial, sans-serif);
}

#pun-userlist .usertable td:not(.username):before {
  display: block;
  color: var(--sec-text, var(--text, inherit));
  font: 500 9px/1.1 var(--main-font, Arial, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

#pun-userlist .usertable td.user_title {
  grid-area: title;
}

#pun-userlist .usertable td.user_title:before {
  content: 'ñòàòóñ';
}

#pun-userlist .usertable td.relation {
  grid-area: relation;
  color: var(--accent, inherit);
}

#pun-userlist .usertable td.relation:before {
  content: 'óâàæåíèå';
}

#pun-userlist .usertable td.num_posts {
  grid-area: posts;
}

#pun-userlist .usertable td.num_posts:before {
  content: 'ñîîáùåíèé';
}

#pun-userlist .usertable td.registered {
  grid-area: registered;
}

#pun-userlist .usertable td.registered:before {
  content: 'çàðåãèñòðèðîâàí';
}

#pun-userlist .usertable td.last_visit {
  grid-area: lastvisit;
}

#pun-userlist .usertable td.last_visit:before {
  content: 'áûë';
}

#pun-userlist .usertable td.username {
  grid-area: name;
  align-items: center;
  gap: 12px;
  padding: 0 0 32px;
  border-bottom: 1px solid var(--bord, transparent);
}

#pun-userlist .usertable .usersname {
  display: block;
  min-width: 0;
}

#pun-userlist .usertable .usersname a {
  display: inline-block;
  max-width: 100%;
  font: 500 21px/1.15 var(--sec-font, var(--main-font, Arial, sans-serif));
  text-transform: none;
  overflow-wrap: anywhere;
}

#pun-userlist .usertable .user-avatar {
  flex: 0 0 56px;
  display: block;
  float: none;
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0;
}

#pun-userlist .usertable .avatar-image,
#pun-userlist .usertable .user-avatar a {
  display: block;
  width: 56px;
  height: 56px;
}

#pun-userlist .usertable .avatar-image {
  opacity: 1;
  background-position: 50%;
  background-size: cover;
  border-radius: var(--ks-radius-md);
  mix-blend-mode: normal;
}

#pun-userlist .usertable .isonline {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--podform, #fff);
  border-radius: 50%;
  background: var(--accent, currentColor);
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  .force-mobile #pun-userlist .formal .container,
  .force-mobile #pun-userlist .usertable .container {
    margin-right: 10px;
    margin-left: 10px;
    padding: 12px;
    border-radius: var(--ks-radius-md);
  }

  .force-mobile #pun-userlist .formal .fs-box.inline {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .force-mobile #pun-userlist .formal .formsubmit {
    padding: 0 10px;
  }

  .force-mobile #pun-userlist .usertable tbody {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .force-mobile #pun-userlist .usertable tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 'name name' 'title title' 'relation posts' 'registered lastvisit';
    gap: 8px;
    padding: 12px;
    border-radius: var(--ks-radius-md);
  }

  .force-mobile #pun-userlist .usertable td.username {
    gap: 10px;
    padding-bottom: 10px;
  }

  .force-mobile #pun-userlist .usertable .usersname a {
    font-size: 18px;
  }

  .force-mobile #pun-userlist .usertable .user-avatar {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .force-mobile #pun-userlist .usertable .avatar-image,
  .force-mobile #pun-userlist .usertable .user-avatar a {
    width: 46px;
    height: 46px;
  }

  .force-mobile #pun-userlist .usertable td:not(.username) {
    min-height: 39px;
    padding: 7px 8px;
    font-size: 11px;
  }
}

:root[data-style='summer'] #pun-navlinks,
:root[data-style='summer'] #pun-navlinks.nav-scrolled {
  background: var(--navi-bg);
  border-color: var(--dark-bord);
  box-shadow: var(--shadow);
}

:root[data-style='summer'] #pun-navlinks a {
  color: var(--navi-link);
  text-shadow: none;
}

:root[data-style='summer'][data-scheme='dark'] body #pun-navlinks a {
  text-shadow: 0 1px 3px #000;
}

:root[data-style='summer'] #pun-navlinks a:active,
:root[data-style='summer'] #pun-navlinks a:focus,
:root[data-style='summer'] #pun-navlinks a:hover {
  color: var(--navi-link-hov);
}

:root[data-style='summer'] #pun-title {
  position: relative;
  width: 1100px;
  margin-left: -30px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 14px 28px rgb(100 54 32/18%),
    inset 0 0 0 1px color-mix(in srgb, var(--dark-bord) 75%, transparent);
}

:root[data-style='summer'] #pun-title .container {
  position: relative;
  overflow: visible;
}

:root[data-style='summer'] #pun-title table {
  position: relative;
  width: 1100px;
  margin-left: 0;
  background: var(--head) center center/cover no-repeat;
  border-radius: 7px 7px 0 0;
  box-shadow:
    inset 0 0 0 1px rgb(255 245 232/14%),
    inset 0 -48px 58px var(--summer-head-edge),
    inset 0 32px 42px var(--summer-head-fade);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000,
    #000 89%,
    rgb(0 0 0/72%) 96%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    #000,
    #000 89%,
    rgb(0 0 0/72%) 96%,
    transparent
  );
}

:root[data-style='summer'] #pun-title table:after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 78px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--summer-pun-overlay-top) 46%, transparent) 46%,
    color-mix(in srgb, var(--summer-pun-overlay-mid) 74%, transparent) 100%
  );
}

:root[data-style='summer'][data-scheme='dark'] body #pun-title table:after {
  background: linear-gradient(
    180deg,
    transparent,
    rgb(21 8 4/32%) 44%,
    rgb(10 4 3/62%)
  );
}

:root[data-style='summer'] #pun-title:before {
  content: 'Kindred Spirits';
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  font-family: Asther, auge, serif;
  font-size: 68px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--summer-title-color);
  text-shadow:
    0 1px 0 rgb(255 246 234/82%),
    0 3px 15px rgb(0 0 0/28%),
    0 0 18px color-mix(in srgb, var(--summer-title-glow) 65%, transparent);
  white-space: nowrap;
  pointer-events: none;
}

:root[data-style='summer'][data-scheme='dark'] body #pun-title:before {
  text-shadow:
    0 1px 0 #3a1a10,
    0 3px 15px #000,
    0 0 18px #e17638a0;
}

:root[data-style='summer'] #pun-title:after {
  content: '';
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 43px;
  transform: translateX(-50%);
  width: 600px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--summer-head-fade) 78%, transparent) 0,
    color-mix(in srgb, var(--summer-head-fade) 30%, transparent) 45%,
    transparent 72%
  );
  pointer-events: none;
}

:root[data-style='summer'] #stylelist {
  position: absolute;
  z-index: 30;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: 22px;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  visibility: visible;
  opacity: 1;
}

:root[data-style='summer'] #stylelist li {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent2) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--tab-text) 54%, transparent);
  box-shadow: 0 1px 6px rgb(0 0 0/22%);
}

:root[data-style='summer'] #stylelist li.active {
  background: var(--accent2);
  border-color: var(--tab-text);
}

:root[data-style='summer'] #stylelist li[data='dark'] a,
:root[data-style='summer'] #stylelist li[data='light'] a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  color: var(--tab-text);
}

:root[data-style='summer'] #stylelist li[data='dark'] a:before,
:root[data-style='summer'] #stylelist li[data='light'] a:before {
  content: '';
  display: block;
  background: var(--tab-text);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

:root[data-style='summer'] #stylelist li[data='light'] a:before {
  width: 13px;
  height: 13px;
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/70/50/21300.svg);
  mask-image: url(https://forumstatic.ru/files/001c/70/50/21300.svg);
}

:root[data-style='summer'] #stylelist li[data='dark'] a:before {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/70/50/57676.svg);
  mask-image: url(https://forumstatic.ru/files/001c/70/50/57676.svg);
}

:root[data-style='summer'] .kindred-info {
  z-index: 12;
  top: 140px;
  color: var(--tab-text);
  background: color-mix(in srgb, var(--accent2) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--tab-text) 22%, transparent);
  box-shadow: 5px 5px 12px rgb(0 0 0/18%);
  opacity: 0.5;
}

:root[data-style='summer'] .knews {
  z-index: 12;
  top: 190px;
  left: 356px;
  width: 420px;
  height: 90px;
  background: color-mix(in srgb, var(--summer-status-fill) 28%, transparent);
  border-radius: var(--ks-radius-md);
}

:root[data-style='summer'] .knews text {
  height: 70px;
  margin: 10px 12px;
  gap: 6px;
  color: var(--tab-text);
}

:root[data-style='summer'] .knews text p {
  display: block;
  padding: 0;
  line-height: 1.2;
  margin-top: 2px;
}

:root[data-style='summer'] .knews text p date {
  background: color-mix(in srgb, var(--accent2) 84%, transparent);
  color: var(--tab-text);
  border-radius: var(--ks-radius-xs);
  padding: 1px 5px;
  margin-right: 5px;
}

:root[data-style='summer'] .knews text p a {
  color: var(--accent);
  font-weight: 700;
}

:root[data-style='summer'] .knews text p a:hover {
  color: var(--navi-link-hov);
}

:root[data-style='summer'][data-scheme='dark'] body .knews {
  top: 218px;
  left: auto;
  right: 72px;
  width: 330px;
  height: auto;
  min-height: 76px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgb(35 15 8/76%), rgb(18 7 4/62%));
  border: 1px solid rgb(232 129 78/34%);
  box-shadow:
    0 8px 18px rgb(0 0 0/32%),
    inset 0 0 24px rgb(255 117 49/8%);
  backdrop-filter: blur(2px);
}

:root[data-style='summer'][data-scheme='dark'] body .knews text {
  height: auto;
  margin: 0;
  padding-right: 0;
  gap: 4px;
}

:root[data-style='summer'][data-scheme='dark'] body .knews text p {
  line-height: 1.25;
}

:root[data-style='summer'][data-scheme='dark'] body .knews text p date {
  background: rgb(211 105 63/78%);
  color: #fff0dd;
}

:root[data-style='summer'][data-scheme='dark'] body .knews text p a {
  color: #ffd2ad;
  font-weight: 700;
  text-shadow: 0 1px 4px rgb(0 0 0/72%);
}

:root[data-style='summer'][data-scheme='dark'] body .knews text p a:hover {
  color: #fff0d7;
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  :root:not([data-style='summer']) body.force-mobile .knews,
  :root:not([data-style='summer']).force-mobile .knews {
    --knews-mobile-bg: color-mix(in srgb, var(--quote) 34%, transparent);
    --knews-mobile-border: color-mix(in srgb, var(--tab-text) 36%, var(--bord));
    --knews-mobile-shadow: 0 8px 22px rgb(0 0 0/14%);
    --knews-mobile-date-bg: color-mix(in srgb, var(--accent2) 82%, transparent);
    --knews-mobile-date-text: var(--tab-text);
    --knews-mobile-link: color-mix(in srgb, var(--tab-text) 86%, var(--text));
    --knews-mobile-link-hover: var(--tab-text);
    position: absolute;
    top: 166px;
    right: 16px;
    left: 16px;
    z-index: 12;
    box-sizing: border-box;
    width: auto;
    max-width: calc(100vw - 32px);
    height: 84px;
    min-width: 0;
    padding: 10px 12px;
    overflow: hidden;
    text-align: left;
    background: var(--knews-mobile-bg);
    border: 1px solid var(--knews-mobile-border);
    border-radius: var(--ks-radius-md);
    box-shadow: var(--knews-mobile-shadow);
    backdrop-filter: blur(2px);
  }

  :root:not([data-style='summer']) body.force-mobile .knews text,
  :root:not([data-style='summer']).force-mobile .knews text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 62px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: var(--knews-mobile-link);
    font: 600 11px/1.2 var(--main-font);
    text-shadow: 0 1px 4px rgb(0 0 0/46%);
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
  }

  :root:not([data-style='summer']) body.force-mobile .knews text p,
  :root:not([data-style='summer']).force-mobile .knews text p {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 1.2;
  }

  :root:not([data-style='summer']) body.force-mobile .knews text p date,
  :root:not([data-style='summer']).force-mobile .knews text p date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 1px 6px 2px;
    color: var(--knews-mobile-date-text);
    background: var(--knews-mobile-date-bg);
    border-radius: var(--ks-radius-xs);
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    text-shadow: none;
  }

  :root:not([data-style='summer'])
    body.force-mobile
    #html-header
    .knews
    text
    p
    a,
  :root:not([data-style='summer']).force-mobile #html-header .knews text p a {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--knews-mobile-link);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :root:not([data-style='summer'])
    body.force-mobile
    #html-header
    .knews
    text
    p
    a:focus-visible,
  :root:not([data-style='summer'])
    body.force-mobile
    #html-header
    .knews
    text
    p
    a:hover,
  :root:not([data-style='summer']).force-mobile
    #html-header
    .knews
    text
    p
    a:focus-visible,
  :root:not([data-style='summer']).force-mobile
    #html-header
    .knews
    text
    p
    a:hover {
    color: var(--knews-mobile-link-hover);
  }
}

:root[data-style='summer'] #pun-ulinks .container {
  background: color-mix(in srgb, var(--summer-card-bg-soft) 66%, transparent);
  border-color: color-mix(in srgb, var(--summer-card-border) 72%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
}

:root[data-style='summer'] #pun-status {
  display: block;
  visibility: visible;
  opacity: 1;
  margin: 5px auto 15px;
  padding: 0;
  position: relative;
  z-index: 90;
  color: var(--summer-status-text);
  pointer-events: auto;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

:root[data-style='summer'] #pun-status h2 {
  display: none;
}

:root[data-style='summer'] #pun-status p.container {
  display: flex;
  position: relative;
  isolation: isolate;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-height: 30px;
  margin: 0;
  padding: 6px 64px;
  overflow: visible;
  line-height: 1.35;
  color: var(--summer-status-text);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  pointer-events: auto;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

:root[data-style='summer'] #pun-status p.container:after,
:root[data-style='summer'] #pun-status p.container:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  -webkit-mask-image: var(--summer-status-mask);
  mask-image: var(--summer-status-mask);
  z-index: 0;
}

:root[data-style='summer'] #pun-status p.container:before {
  top: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at center,
      var(--summer-status-fill-soft) 0,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-status-fill) 82%, transparent),
      color-mix(in srgb, var(--summer-status-fill) 38%, transparent)
    );
  box-shadow:
    inset 0 1px 0 hsla(0, 0%, 100%, 0.22),
    inset 0 -1px 0 rgb(178 122 86/28%),
    0 8px 18px var(--summer-status-shadow);
}

:root[data-style='summer'] #pun-status p.container:after {
  top: 0;
  bottom: 0;
  border-top: 1px solid var(--summer-status-line);
  border-bottom: 1px solid
    color-mix(in srgb, var(--summer-status-line) 72%, transparent);
}

:root[data-style='summer'] #pun-status a,
:root[data-style='summer'] #pun-status span,
:root[data-style='summer'] #pun-status strong {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

:root[data-style='summer'] #pun-status span {
  color: var(--summer-status-text);
}

:root[data-style='summer'] #pun-status strong {
  color: var(--summer-status-strong);
  font-weight: 700;
}

:root[data-style='summer'] #pun-status a {
  color: var(--summer-status-link);
  font-weight: 600;
}

:root[data-style='summer'] #pun-status a:hover {
  color: var(--summer-status-link-hover);
}

:root[data-style='summer'][data-scheme='light'] body #pun-status p.container {
  text-shadow: 0 1px 2px rgb(255 246 235/92%);
}

:root[data-style='summer'][data-scheme='dark'] body #pun-status p.container {
  text-shadow: 0 1px 4px rgb(0 0 0/72%);
}

:root[data-style='summer'] #pun-status .item3.status-right {
  display: inline;
  margin-left: auto;
}

:root[data-style='summer'] #pun-status .item4.status-right {
  display: none;
}

:root[data-style='summer'] #pun-break1,
:root[data-style='summer'] #pun-break3,
:root[data-style='summer'] #pun-break4 {
  height: 0;
  margin: 0;
  border: 0;
}

:root[data-style='summer'] #pun-crumbs1 p.container {
  margin-top: 6px;
}

:root[data-style='summer'] #pun-searchtopics {
  position: relative;
  isolation: isolate;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-pun-overlay-top) 58%, transparent) 0,
      color-mix(in srgb, var(--summer-pun-overlay-mid) 48%, transparent) 430px,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 50%, transparent) 100%
    )
    top/100% 100% no-repeat;
}

:root[data-style='summer'] #pun-searchtopics #pun-main {
  position: relative;
  isolation: isolate;
  padding-bottom: 14px;
}

:root[data-style='summer'] #pun-searchtopics #pun-main:after,
:root[data-style='summer'] #pun-searchtopics #pun-main:before {
  content: '';
  position: absolute;
  z-index: 0;
  left: -30px;
  right: -30px;
  pointer-events: none;
}

:root[data-style='summer'] #pun-searchtopics #pun-main:before {
  top: -22px;
  bottom: -58px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-pun-overlay-mid) 18%, transparent) 0,
      color-mix(in srgb, var(--summer-pun-overlay-mid) 30%, transparent) 18%,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 34%, transparent) 72%,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 22%, transparent) 100%
    ),
    radial-gradient(
      ellipse at 50% 88%,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 34%, transparent) 0,
      transparent 70%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    rgb(0 0 0/42%) 18px,
    #000 54px,
    #000 calc(100% - 88px),
    rgb(0 0 0/76%) calc(100% - 48px),
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    transparent,
    rgb(0 0 0/42%) 18px,
    #000 54px,
    #000 calc(100% - 88px),
    rgb(0 0 0/76%) calc(100% - 48px),
    transparent
  );
}

:root[data-style='summer'] #pun-searchtopics #pun-main:after {
  top: auto;
  bottom: 22px;
  height: 180px;
  background: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 18%, transparent) 28%,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 30%, transparent) 64%,
    transparent 100%
  );
}

:root[data-style='summer'] #pun-searchtopics #pun-main > * {
  position: relative;
  z-index: 1;
}

:root[data-style='summer'] #pun-searchtopics #pun-main .forum {
  position: relative;
  z-index: 1;
  margin-bottom: -8px;
  padding-bottom: 30px;
}

:root[data-style='summer'] #pun-searchtopics #pun-main .forum:after {
  content: '';
  position: absolute;
  left: -30px;
  right: -30px;
  bottom: -92px;
  z-index: 0;
  height: 170px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 44%, transparent) 0,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 30%, transparent) 38%,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 12%, transparent) 70%,
      transparent 100%
    ),
    radial-gradient(
      ellipse at 50% 0,
      color-mix(in srgb, var(--summer-card-bg) 20%, transparent) 0,
      transparent 72%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000,
    rgb(0 0 0/90%) 28%,
    rgb(0 0 0/42%) 72%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    #000,
    rgb(0 0 0/90%) 28%,
    rgb(0 0 0/42%) 72%,
    transparent
  );
}

:root[data-style='summer'] #pun-searchtopics #pun-main .forum > *,
:root[data-style='summer'] #pun-searchtopics #pun-main .linksb,
:root[data-style='summer'] #pun-searchtopics #pun-main .modmenu {
  position: relative;
  z-index: 1;
}

:root[data-style='summer'] #pun-searchtopics #pun-main .modmenu {
  margin-top: -4px;
  padding-top: 12px;
}

:root[data-style='summer'] #pun-searchtopics #pun-main .modmenu .container {
  margin: 0;
  padding: 8px 0 2px;
  background: transparent;
}

:root[data-style='summer'] #pun-searchtopics #pun-main .linksb {
  margin-top: 0;
  padding: 8px 0 0;
}

:root[data-style='summer'] #pun-searchtopics .forum tr,
:root[data-style='summer'] #pun-searchtopics .forum tr.altstyle,
:root[data-style='summer'] #pun-searchtopics .forum tr.inew {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 76%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 90%, transparent)
  );
  border-color: var(--summer-card-border);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'][data-scheme='dark'] body #pun-searchtopics .forum tr,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-searchtopics
  .forum
  tr.altstyle,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-searchtopics
  .forum
  tr.inew {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 70%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 86%, transparent)
  );
}

:root[data-style='summer'] #pun-index .category tr,
:root[data-style='summer'] #pun-index .category tr.inew {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 76%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 90%, transparent)
  );
  border: 1px solid var(--summer-card-border);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'][data-scheme='dark'] body #pun-index .category tr,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-index
  .category
  tr.inew {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 70%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 86%, transparent)
  );
}

:root[data-style='summer'] #pun-index .category h2 {
  opacity: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

:root[data-style='summer'] #pun-index .category h2:before {
  inset: 0;
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(720px, 92%);
  height: 104px;
  transform: translate(-50%, -50%);
  background: var(--cat-branch) center center/100% auto no-repeat;
  opacity: 0.5;
  mix-blend-mode: multiply;
  filter: sepia(0.18) saturate(0.88);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 0,
    rgb(0 0 0/82%) 36%,
    rgb(0 0 0/34%) 62%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 0,
    rgb(0 0 0/82%) 36%,
    rgb(0 0 0/34%) 62%,
    transparent 82%
  );
}

:root[data-style='summer'] .punbb .category td,
:root[data-style='summer'] .punbb .category th {
  color: var(--text);
}

:root[data-style='summer'] .punbb .category a {
  color: var(--accent);
}

:root[data-style='summer'] .punbb .category a:hover {
  color: var(--accent2);
}

:root[data-style='summer'][data-scheme='dark'] body .punbb .category a {
  color: #ee8d5f;
}

:root[data-style='summer'][data-scheme='dark'] body .punbb .category a:hover {
  color: #ffb17d;
}

.punbb .category .tclcon .pf-lnks a,
.punbb .category .tclcon .pf-lnks a:active,
.punbb .category .tclcon .pf-lnks a:focus,
.punbb .category .tclcon .pf-lnks a:hover,
.punbb .category .tclcon .pf-lnks a:link,
.punbb .category .tclcon .pf-lnks a:visited,
:root[data-style='summer'] .punbb .category .pf-lnks a,
:root[data-style='summer'] .punbb .category .pf-lnks a:active,
:root[data-style='summer'] .punbb .category .pf-lnks a:focus,
:root[data-style='summer'] .punbb .category .pf-lnks a:hover,
:root[data-style='summer'] .punbb .category .pf-lnks a:link,
:root[data-style='summer'] .punbb .category .pf-lnks a:visited,
:root[data-style='summer'][data-scheme='dark'] body .punbb .category .pf-lnks a,
:root[data-style='summer'][data-scheme='dark']
  body
  .punbb
  .category
  .pf-lnks
  a:active,
:root[data-style='summer'][data-scheme='dark']
  body
  .punbb
  .category
  .pf-lnks
  a:focus,
:root[data-style='summer'][data-scheme='dark']
  body
  .punbb
  .category
  .pf-lnks
  a:hover,
:root[data-style='summer'][data-scheme='dark']
  body
  .punbb
  .category
  .pf-lnks
  a:link,
:root[data-style='summer'][data-scheme='dark']
  body
  .punbb
  .category
  .pf-lnks
  a:visited {
  color: var(--tab-text);
}

:root[data-style='summer'] .forum-nav a {
  background: var(--accent2);
  color: var(--tab-text);
}

:root[data-style='summer'] .forum-nav a:hover {
  background: var(--dark-bord);
}

:root[data-style='summer'] #pun-stats .container {
  background: linear-gradient(
    180deg,
    var(--summer-card-bg-soft),
    var(--summer-card-bg)
  );
  border: 1px solid var(--summer-card-border);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #pun-stats .statsinfo {
  background: var(--sts-bg) center/cover;
  border: 1px solid
    color-mix(in srgb, var(--summer-card-border) 78%, transparent);
}

:root[data-style='summer'] #pun-about {
  position: relative;
  z-index: 2;
  margin-top: 10px;
}

:root[data-style='summer'] #pun-about p.container {
  position: relative;
  width: 1100px;
  height: 170px;
  margin: -34px 0 -34px -30px;
  overflow: hidden;
  border: 0;
  border-radius: 0 0 10px 10px;
  isolation: isolate;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-footer-fade) 18%, transparent) 0,
      color-mix(in srgb, var(--summer-footer-fade) 68%, transparent) 34%,
      color-mix(in srgb, var(--summer-footer-fade) 18%, transparent) 68%,
      var(--summer-footer-fade) 100%
    ),
    var(--ftr-im) center center/cover no-repeat;
  box-shadow:
    inset 0 34px 54px
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 42%, transparent),
    inset 0 -34px 48px
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 68%, transparent);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    rgb(0 0 0/22%) 20px,
    #000 68px,
    #000
  );
  mask-image: linear-gradient(
    180deg,
    transparent,
    rgb(0 0 0/22%) 20px,
    #000 68px,
    #000
  );
}

:root[data-style='summer'] #pun-about p.container:before {
  top: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      var(--summer-footer-fade) 0,
      color-mix(in srgb, var(--summer-footer-fade) 22%, transparent) 24%,
      color-mix(in srgb, var(--summer-footer-fade) 12%, transparent) 68%,
      var(--summer-footer-fade) 100%
    ),
    var(--ftr-im) center center/cover no-repeat;
}

:root[data-style='summer'] #pun-about p.container:after {
  bottom: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    var(--summer-pun-overlay-bottom) 0,
    transparent 22%,
    transparent 76%,
    var(--summer-pun-overlay-bottom) 100%
  );
}

:root[data-style='summer'] #pun-about p.container .item1,
:root[data-style='summer'] #pun-about p.container a {
  position: relative;
  z-index: 2;
}

:root[data-style='summer'] .scroll-rail {
  background: var(--plash);
  color: var(--tab-text);
  box-shadow: var(--shadow);
}

:root[data-style='summer'] .author-wrap {
  border: var(--ks-border-profile);
  color: var(--tab-text);
  box-shadow: var(--shadow);
}

:root[data-style='summer'] .pa-fld1 {
  border-top: 1px solid var(--prof-bord);
  background: linear-gradient(180deg, var(--summer-profile-fade), transparent);
}

:root[data-style='summer'] .indOnline,
:root[data-style='summer'] .pa-author a {
  background: var(--accent2);
  color: var(--tab-text);
}

:root[data-style='summer'] .pa-author a:hover {
  background: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style='summer'] .punbb .post .post-author {
  box-shadow: var(--shadow);
}

:root[data-style='summer'] .punbb .post .post-author a {
  color: var(--prof-link);
}

:root[data-style='summer'] .punbb .post .post-author a:hover {
  color: var(--prof-text);
}

:root[data-style='summer'] .activees,
:root[data-style='summer'] .activees2 {
  --promo-overlay: color-mix(in srgb, var(--accent) 62%, transparent);
  --promo-overlay-hover: color-mix(
    in srgb,
    var(--navi-link-hov) 60%,
    transparent
  );
  --promo-border: color-mix(in srgb, var(--tab-text) 28%, transparent);
  z-index: 14;
  visibility: visible;
  opacity: 1;
}

:root[data-style='summer'] .activees2:before,
:root[data-style='summer'] .activees:before {
  color: var(--tab-text);
  text-shadow: 0 2px 10px rgb(0 0 0/45%);
}

:root[data-style='summer'] .activees a,
:root[data-style='summer'] .activees2 a {
  display: block;
  position: relative;
  z-index: 1;
}

:root[data-style='summer'] .activees div,
:root[data-style='summer'] .activees2 div {
  background: var(--summer-status-fill);
  border-color: var(--promo-border);
  box-shadow: var(--shadow);
}

:root[data-style='summer'] .activees div:after,
:root[data-style='summer'] .activees2 div:after {
  background: var(--promo-overlay);
  opacity: 0.86;
}

:root[data-style='summer'] .activees a:focus-visible div:after,
:root[data-style='summer'] .activees a:hover div:after,
:root[data-style='summer'] .activees2 a:focus-visible div:after,
:root[data-style='summer'] .activees2 a:hover div:after {
  opacity: 0.68;
  background: var(--promo-overlay-hover);
}

:root[data-style='summer'] .ka-text text {
  border: 1px solid var(--bord2);
  background: var(--bord);
}

:root[data-style='summer'] .academy-panel {
  border: var(--ks-border-dark);
}

:root[data-style='summer'] .academy-panel-body {
  color: var(--tab-text);
}

:root[data-style='summer'] .button,
:root[data-style='summer'] .punbb .button,
:root[data-style='summer'] input[type='button'],
:root[data-style='summer'] input[type='submit'] {
  background-color: var(--accent2);
  border-color: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style='summer'] .button:hover,
:root[data-style='summer'] .punbb .button:hover,
:root[data-style='summer'] input[type='button']:hover,
:root[data-style='summer'] input[type='submit']:hover {
  background-color: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style='summer'] #pun-viewtopic {
  color: var(--text);
}

:root[data-style='summer'] #pun-viewtopic #pun-main h1,
:root[data-style='summer'] #pun-viewtopic .main-title {
  display: none;
}

:root[data-style='summer'] #pun-viewtopic .linksb,
:root[data-style='summer'] #pun-viewtopic .linkst {
  min-height: 34px;
  margin: 10px 0;
  color: var(--sec-text);
}

:root[data-style='summer'] #pun-viewtopic #plng,
:root[data-style='summer'] #pun-viewtopic .new-poll a,
:root[data-style='summer'] #pun-viewtopic .new-topic a,
:root[data-style='summer'] #pun-viewtopic .pagelink,
:root[data-style='summer'] #pun-viewtopic .postlink span a,
:root[data-style='summer'] #pun-viewtopic .subscribelink {
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-md);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  text-transform: lowercase;
}

:root[data-style='summer'] #pun-viewtopic .post {
  position: relative;
  margin: 20px 0 34px;
  padding: 0;
  background: transparent;
  border: 0;
}

:root[data-style='summer'] #pun-viewtopic .post h3 {
  margin: 0 0 9px;
  padding: 0;
  text-align: left;
  background: transparent;
}

:root[data-style='summer'] #pun-viewtopic .post h3 span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 34px;
  padding: 0;
  color: var(--sec-text);
  font: 400 11px var(--main-font);
  text-transform: none;
  gap: 12px;
}

:root[data-style='summer'] #pun-viewtopic .post h3 a.sharelink,
:root[data-style='summer'] #pun-viewtopic .post h3 em.reportview {
  display: none;
}

:root[data-style='summer'] #pun-viewtopic .copy-post-btn,
:root[data-style='summer'] #pun-viewtopic .font-resizer button {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 7px;
  color: var(--text);
  box-shadow: var(--summer-card-shadow);
  cursor: pointer;
  transition:
    color 0.5s ease,
    background-color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

:root[data-style='summer'] #pun-viewtopic .copy-post-btn:hover,
:root[data-style='summer'] #pun-viewtopic .font-resizer button:hover {
  background: var(--accent);
  border-color: var(--accent2);
  color: var(--tab-text);
}

:root[data-style='summer'] #pun-viewtopic .font-resizer input.slider {
  width: 104px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--accent2) 0 28%,
    color-mix(in srgb, var(--bord) 76%, transparent) 28% 100%
  );
  box-shadow: none;
  accent-color: var(--accent2);
}

:root[data-style='summer'] #pun-viewtopic .post h3 .copy-post-btn {
  order: 20;
  font-size: 0;
}

:root[data-style='summer'] #pun-viewtopic .post h3 .copy-post-btn i,
:root[data-style='summer'] #pun-viewtopic .post h3 .copy-post-btn:before {
  font-size: 12px;
}

:root[data-style='summer'] #pun-viewtopic .post h3 a.permalink {
  order: 30;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 12px;
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-md);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  font-size: 10px;
}

:root[data-style='summer'] #pun-viewtopic .post h3 strong {
  order: 40;
  width: auto;
  color: var(--text);
  font: 400 14px var(--sec-font);
}

:root[data-style='summer'] #pun-viewtopic .post h3 strong:before {
  content: '#';
}

:root[data-style='summer'] #pun-viewtopic .post > .container {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--text);
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 10px 22px;
  padding: 12px 16px 14px;
  grid-template-rows: auto auto;
  align-items: start;
}

:root[data-style='summer'] #pun-viewtopic .post .post-author {
  border: var(--ks-border-profile);
  border-radius: var(--ks-radius-lg);
  color: var(--prof-text);
  box-shadow: var(--summer-topic-shadow);
  overflow: visible;
  position: relative;
  float: none;
  grid-column: 1;
  width: auto;
  min-height: 540px;
  margin: 12px 0 0;
  padding: 0 12px 12px;
  align-self: start;
  border-color: color-mix(in srgb, var(--prof-bord) 86%, transparent);
  grid-row: 1;
}

:root[data-style='summer'] #pun-viewtopic .post .post-author:before {
  content: '\f52d';
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--ks-border-profile);
  background: var(--summer-topic-panel-strong);
  color: var(--accent);
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
  font-weight: 400;
  box-shadow: var(--summer-card-shadow);
  left: 50%;
  top: -20px;
  width: 38px;
  height: 38px;
  font-size: 16px;
  z-index: 2;
}

:root[data-style='summer'] #pun-viewtopic .post .post-author:after {
  border-color: var(--race-frame-color, transparent);
  opacity: 0.72;
}

:root[data-style='summer'] #pun-viewtopic .post .post-author p,
:root[data-style='summer'] #pun-viewtopic .post .post-author ul {
  padding: 0;
  margin: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-author .pa-fld2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  border: var(--ks-border-profile);
  background: var(--summer-topic-panel-strong);
  z-index: 6;
  top: -20px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: color-mix(in srgb, var(--prof-bord) 90%, transparent);
  box-shadow:
    0 3px 10px rgb(0 0 0/10%),
    inset 0 1px 0 hsla(0, 0%, 100%, 0.45);
}

:root[data-style='summer'] #pun-viewtopic .post-author .pa-fld2 img {
  width: 22px;
  height: auto;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
}

:root[data-style='summer'] #pun-viewtopic .pa-author {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 8px;
  gap: 6px;
}

:root[data-style='summer'] #pun-viewtopic .pa-author a {
  position: relative;
  z-index: 2;
  border-radius: var(--ks-radius-sm);
  background: var(--summer-topic-label-bg);
  color: var(--summer-topic-label-text);
  font: 400 15px var(--sec-font);
  text-shadow: 0 1px 3px rgb(0 0 0/26%);
  box-shadow: var(--summer-card-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  max-width: calc(100% - 34px);
  padding: 4px 14px 5px;
  line-height: 1.2;
  text-align: center;
}

:root[data-style='summer'] #pun-viewtopic .pa-author a:hover {
  background: var(--dark-bord);
  color: var(--tab-text);
}

:root[data-style='summer'] #pun-viewtopic .indOnline {
  background: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--tab-text) 28%, transparent);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #pun-viewtopic .author-wrap {
  position: relative;
  z-index: 2;
  margin: 2px 0 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--prof-bord) 76%, transparent);
  box-shadow: var(--summer-topic-glow);
  padding: 10px 10px 12px;
  border-radius: var(--ks-radius-lg);
  background: transparent;
}

:root[data-style='summer'] #pun-viewtopic .author-wrap:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel-strong) 38%, transparent),
    color-mix(in srgb, var(--summer-topic-panel) 20%, transparent)
  );
  pointer-events: none;
}

:root[data-style='summer'] #pun-viewtopic .author-wrap > :not(.pa-fld6) {
  position: relative;
  z-index: 2;
}

:root[data-style='summer'] #pun-viewtopic .pa-title {
  position: relative;
  z-index: 2;
  margin: 0 0 7px;
  padding: 0;
  color: var(--prof-text);
  font: 600 10px var(--main-font);
  text-align: center;
  text-transform: lowercase;
}

:root[data-style='summer'] #pun-viewtopic .pa-avatar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

:root[data-style='summer'] #pun-viewtopic .pa-avatar img {
  display: block;
  margin: 0 auto;
  border-radius: 7px;
  outline: 1px solid color-mix(in srgb, var(--prof-bord) 66%, transparent);
  box-shadow: 0 8px 18px rgb(0 0 0/18%);
}

:root[data-style='summer'] #pun-viewtopic .post-author.no-avatar .pa-avatar,
:root[data-style='summer']
  #pun-viewtopic
  .post-author.no-avatar
  .pa-avatar
  img.defavtr {
  display: none;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld6 {
  position: absolute;
  top: -72px;
  right: -12px;
  left: -12px;
  z-index: 0;
  width: auto;
  height: 270px;
  overflow: hidden;
  border-radius: var(--ks-radius-lg) var(--ks-radius-lg) 0 0;
  background: transparent;
  opacity: 1;
  pointer-events: none;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld6 img,
:root[data-style='summer'] #pun-viewtopic .pa-fld6 > div {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 25%;
  object-position: center 25%;
  background-position: center 25%;
  background-size: cover;
  filter: grayscale(0.2) sepia(0.16);
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 22%,
    rgb(0 0 0/82%) 40%,
    rgb(0 0 0/42%) 58%,
    rgb(0 0 0/12%) 72%,
    transparent 84%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 22%,
    rgb(0 0 0/82%) 40%,
    rgb(0 0 0/42%) 58%,
    rgb(0 0 0/12%) 72%,
    transparent 84%,
    transparent
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 13px 9px 12px;
  border-top: 1px solid color-mix(in srgb, var(--prof-bord) 62%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel) 48%, transparent),
    color-mix(in srgb, var(--profile) 36%, transparent)
  );
  color: var(--prof-text);
  text-align: center;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld1 .lz-name {
  color: var(--accent);
  font: 400 13px var(--sec-font);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld1 .lz-text {
  margin: 6px 3px 0;
  color: var(--prof-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
}

:root[data-style='summer'] #pun-viewtopic .wrap-resp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  color: var(--prof-text);
  font: 500 10px var(--main-font);
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 10px 0;
}

:root[data-style='summer'] #pun-viewtopic .wrap-resp li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

:root[data-style='summer'] #pun-viewtopic .wrap-resp .fld-name:before {
  color: var(--accent);
}

:root[data-style='summer'] #pun-viewtopic .pa-awards,
:root[data-style='summer'] #pun-viewtopic .pa-last-visit,
:root[data-style='summer'] #pun-viewtopic .pa-online {
  display: none;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld3 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% + 24px);
  height: 40px;
  margin: 8px -12px 0 !important;
  padding: 0 !important;
  overflow: visible;
  box-sizing: border-box;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld3 .pers-plah,
:root[data-style='summer'] #pun-viewtopic .pa-fld3 > pers-plah {
  position: relative;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  max-width: 220px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--ks-radius-sm);
  background: var(--pers-pl) center/cover;
  color: var(--tab-text);
  text-align: center;
  font: 500 9px/1.2 var(--main-font);
  text-transform: uppercase;
  box-shadow: none;
  transform: none;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld3 .pers-plah:after,
:root[data-style='summer'] #pun-viewtopic .pa-fld3 .pers-plah:before,
:root[data-style='summer'] #pun-viewtopic .pa-fld3 > pers-plah:after,
:root[data-style='summer'] #pun-viewtopic .pa-fld3 > pers-plah:before {
  content: none;
  display: none;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld3 .pers-plah:has(img),
:root[data-style='summer'] #pun-viewtopic .pa-fld3 > pers-plah:has(img) {
  width: 220px;
  max-width: 220px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  background: transparent;
}

:root[data-style='summer'] #pun-viewtopic .pa-fld3 .pers-plah img,
:root[data-style='summer'] #pun-viewtopic .pa-fld3 > pers-plah img {
  position: relative;
  z-index: 0;
  display: block;
  max-height: 40px;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: inherit;
}

:root[data-style='summer'] #pun-viewtopic .post-body {
  padding: 0;
  border: 0;
  grid-column: 2;
  min-width: 0;
  margin-left: 0;
  grid-row: 1;
}

:root[data-style='summer'] #pun-viewtopic .post-box {
  position: relative;
  border: 1px solid var(--summer-topic-border);
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
  overflow: hidden;
  min-height: 260px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--summer-topic-paper-strong) 100%, transparent) 0,
    color-mix(in srgb, var(--summer-topic-paper) 94%, transparent) 38%,
    color-mix(in srgb, var(--summer-topic-paper-strong) 86%, transparent) 100%
  );
  padding: 20px 26px 58px;
}

:root[data-style='summer'] #post-form:before,
:root[data-style='summer'] #pun-viewtopic .post-box:before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(
      circle at 92% 8%,
      color-mix(in srgb, var(--accent) 11%, transparent) 0 14%,
      transparent 38%
    ),
    radial-gradient(
      circle at 5% 18%,
      color-mix(in srgb, var(--accent2) 8%, transparent) 0 11%,
      transparent 34%
    );
  opacity: 0.72;
}

:root[data-style='summer'] #post-form:before {
  z-index: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-content {
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--text);
  font: 400 13px/1.72 var(--main-font);
  text-align: justify;
  font-size: 14px;
  line-height: 1.72;
}

:root[data-style='summer'] #pun-viewtopic .post-content > p {
  margin: 0;
  padding: 0 0 1em;
}

:root[data-style='summer'] #pun-viewtopic .post-content hr {
  margin: 18px 48px 16px;
  border: 0;
  border-top: 1px dotted var(--summer-topic-line);
  opacity: 1;
}

:root[data-style='summer'] #pun-viewtopic .post-sig dt {
  border-top: 1px dotted var(--summer-topic-line);
  margin: 20px 0 14px;
}

:root[data-style='summer'] #pun-viewtopic .post-sig dd,
:root[data-style='summer'] #pun-viewtopic .post-sig p {
  color: var(--accent);
  text-align: right;
  font: italic 600 12px var(--main-font);
  margin-right: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-rating,
:root[data-style='summer'] #pun-viewtopic .post-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}

:root[data-style='summer'] #pun-viewtopic .post-rating p,
:root[data-style='summer'] #pun-viewtopic .post-vote p {
  min-height: 26px;
  margin: 0;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #pun-viewtopic .post-rating a:before {
  color: var(--accent);
}

:root[data-style='summer'] #pun-viewtopic .post-rating a:hover:before,
:root[data-style='summer'] #pun-viewtopic .post-vote a.positive:hover {
  color: var(--tab-text);
}

:root[data-style='summer'] #pun-viewtopic .post-links {
  background: transparent;
  grid-column: 1/-1;
  grid-row: 2;
  align-self: end;
  margin: 18px 0 0;
  padding: 14px 8px 0;
  border-top: 1px solid
    color-mix(in srgb, var(--summer-topic-border-soft) 58%, transparent);
}

:root[data-style='summer'] #pun-viewtopic .post-links ul {
  color: var(--sec-text);
  font: 400 11px var(--main-font);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-links li {
  display: inline-flex;
  padding: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-links a {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-pill);
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
  text-transform: lowercase;
  min-height: 30px;
}

:root[data-style='summer'] #pun-viewtopic .modmenu .container {
  margin: 10px 0 0;
  padding: 8px 0;
  color: var(--sec-text);
}

:root[data-style='summer'] #topic-users-in {
  color: var(--text);
}

:root[data-style='summer'] #post-form {
  position: relative;
  margin: 24px 0 12px;
  padding: 16px 14px 18px;
  border: 1px solid var(--summer-topic-border);
  border-radius: var(--ks-radius-lg);
  background: linear-gradient(
    180deg,
    var(--summer-topic-panel-strong),
    var(--summer-topic-panel)
  );
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
  overflow: visible;
  isolation: isolate;
}

:root[data-style='summer'] #post-form:after {
  content: '\f52d';
  position: absolute;
  right: 36px;
  bottom: 24px;
  color: color-mix(in srgb, var(--accent) 28%, transparent);
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
  font-size: 94px;
  font-weight: 300;
  line-height: 1;
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 1;
}

:root[data-style='summer'] #post-form h2 {
  position: relative;
  z-index: 10;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 24px;
  margin: 0 0 12px;
  padding: 0 0 0 24px;
  text-align: left;
  background: transparent;
}

:root[data-style='summer'] #post-form h2:before {
  content: '\f52d';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  font-family:
    Font Awesome\6 Pro,
    FontAwesome;
  font-size: 16px;
  font-weight: 400;
}

:root[data-style='summer'] #post-form h2 span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  font: 400 16px var(--sec-font);
  color: var(--summer-topic-title);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

:root[data-style='summer'] #post-form form.container {
  position: relative;
  z-index: 10;
  overflow: visible;
  padding: 0;
  background: transparent;
}

:root[data-style='summer'] #post-form fieldset {
  position: relative;
  z-index: 20;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
}

:root[data-style='summer'] #post-form .fs-box.hashelp > p:first-child,
:root[data-style='summer'] #post-form fieldset legend,
:root[data-style='summer'] #post-form fieldset legend span {
  display: none;
}

:root[data-style='summer'] #post-form .fs-box,
:root[data-style='summer'] #post-form .fs-box.hashelp {
  position: relative;
  z-index: 20;
  overflow: visible;
  padding: 0;
}

:root[data-style='summer'] #form-buttons {
  position: relative;
  margin: 0 0 12px;
  gap: 6px;
  z-index: 120;
}

:root[data-style='summer'] #form-buttons table tr {
  justify-content: space-around;
  gap: 4px;
}

:root[data-style='summer'] #form-buttons td {
  width: 27px;
  height: 25px;
  padding: 0;
  border-color: var(--summer-topic-border-soft);
  background: transparent;
}

:root[data-style='summer'] #form-buttons td:before {
  background: var(--summer-topic-panel);
  border: 1px solid var(--summer-topic-border-soft);
  color: var(--text);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #form-buttons td:hover:before {
  background: var(--accent);
  color: var(--tab-text);
}

:root[data-style='summer'] #main-reply {
  position: relative;
  display: block;
  width: 100%;
  min-height: 180px;
  margin: 0;
  padding: 16px 18px;
  resize: vertical;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-md);
  background: var(--summer-topic-input);
  color: var(--text);
  box-shadow: var(--summer-topic-glow);
  font: 400 13px/1.65 var(--main-font);
  z-index: 10;
}

:root[data-style='summer'] #main-reply:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-style='summer'] #post-form .reply-char-counter {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0;
  padding: 5px 10px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: 7px;
  background: var(--summer-topic-panel);
  color: var(--sec-text);
  font: 400 10px var(--main-font);
  text-transform: uppercase;
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #pun-crumbs2 .container {
  margin-top: 14px;
}

:root[data-style='summer'][data-scheme='dark'] body #pun-viewtopic #plng,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-viewtopic
  .copy-post-btn,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-viewtopic
  .font-resizer
  button,
:root[data-style='summer'][data-scheme='dark'] body #pun-viewtopic .pagelink,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-viewtopic
  .post
  h3
  a.permalink,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-viewtopic
  .postlink
  span
  a,
:root[data-style='summer'][data-scheme='dark']
  body
  #pun-viewtopic
  .subscribelink {
  box-shadow: 0 5px 14px rgb(0 0 0/30%);
}

:root[data-style='summer'] #pun-viewtopic .main .post {
  position: relative;
  margin: 18px 0 26px;
  padding: 0;
  border-left-color: var(--summer-topic-border);
  border-bottom: 1px solid var(--summer-topic-border);
  border-right-color: var(--summer-topic-border);
  border-top: 1px solid var(--summer-topic-border);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-shell) 90%, transparent),
    color-mix(in srgb, var(--summer-topic-panel) 92%, transparent)
  );
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
  isolation: isolate;
  overflow: visible;
  border-left: 1px solid
    color-mix(in srgb, var(--summer-topic-border) 14%, transparent);
  border-right: 1px solid
    color-mix(in srgb, var(--summer-topic-border) 14%, transparent);
}

:root[data-style='summer'] #pun-viewtopic .main .post h3 {
  margin: 0;
  padding: 10px 16px;
  min-height: 48px;
  border-bottom: 1px solid
    color-mix(in srgb, var(--summer-topic-border) 72%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-topic-panel-strong) 82%, transparent),
    color-mix(in srgb, var(--summer-topic-panel) 74%, transparent)
  );
  border-radius: 18px 18px 0 0;
}

:root[data-style='summer'][data-scheme='dark'] body #pun-viewtopic .post-box {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--summer-topic-paper-strong) 92%, transparent) 0,
    color-mix(in srgb, var(--summer-topic-paper) 82%, transparent) 40%,
    color-mix(in srgb, var(--summer-topic-paper-strong) 88%, transparent) 100%
  );
}

:root[data-style='summer'] #pun-viewtopic .post-box:before {
  background:
    radial-gradient(
      circle at 94% 10%,
      color-mix(in srgb, var(--accent) 10%, transparent) 0 12%,
      transparent 40%
    ),
    radial-gradient(
      circle at 8% 92%,
      color-mix(in srgb, var(--accent2) 9%, transparent) 0 10%,
      transparent 34%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--summer-topic-panel) 34%, transparent) 0,
      transparent 26%,
      transparent 74%,
      color-mix(in srgb, var(--summer-topic-panel) 22%, transparent) 100%
    );
  opacity: 0.75;
}

:root[data-style='summer'] #pun-viewtopic .rsp_wrap {
  position: absolute;
  right: 22px;
  bottom: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: auto;
  margin: 0;
}

:root[data-style='summer'] #pun-viewtopic .reactions-root {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

:root[data-style='summer']
  #pun-viewtopic
  .reaction-counters-container
  .reaction-chip,
:root[data-style='summer']
  #pun-viewtopic
  .reaction-picker-button.reaction-chip {
  min-width: 32px;
  min-height: 28px;
  border-radius: var(--ks-radius-md);
  border: 1px solid var(--summer-topic-border-soft);
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] #pun-viewtopic .post-links li.pl-delete {
  margin-left: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-links a:hover {
  background: var(--accent);
  border-color: var(--accent2);
  color: var(--tab-text);
}

:root[data-style='summer'] #pun-viewtopic .post-links .email,
:root[data-style='summer'] #pun-viewtopic .post-links .pm,
:root[data-style='summer'] #pun-viewtopic .post-links .profile {
  margin-right: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-sig {
  margin-top: 18px;
}

:root[data-style='summer'] #pun-viewtopic .post-author:has(.pa-fld2):before {
  opacity: 0.35;
  transform: translateX(-50%) scale(0.92);
}

:root[data-style='summer'] #pun-viewtopic .post-author .pa-fld2 > a,
:root[data-style='summer'] #pun-viewtopic .post-author .pa-fld2 > div,
:root[data-style='summer'] #pun-viewtopic .post-author .pa-fld2 > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--summer-topic-title);
  font: 400 14px/1 var(--sec-font);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

:root[data-style='summer'] #pun-viewtopic .pa-author .indOnline {
  flex: 0 0 auto;
  margin: 0;
}

:root[data-style='summer'] #post-form .areafield,
:root[data-style='summer'] #post-form .resizable-textarea,
:root[data-style='summer'] #post-form .resizable-textarea > span {
  position: relative;
  z-index: 10;
  overflow: visible;
}

:root[data-style='summer'] #addition-area,
:root[data-style='summer'] #color-area,
:root[data-style='summer'] #float-toolbar,
:root[data-style='summer'] #font-area,
:root[data-style='summer'] #image-area,
:root[data-style='summer'] #imageattach-area,
:root[data-style='summer'] #imageup-area,
:root[data-style='summer'] #keyboard-area,
:root[data-style='summer'] #size-area,
:root[data-style='summer'] #smilies-area,
:root[data-style='summer'] #spoiler-area,
:root[data-style='summer'] #table-area,
:root[data-style='summer'] #tags .container,
:root[data-style='summer'] #video-area {
  z-index: 5000;
  pointer-events: auto;
  box-shadow:
    0 12px 28px rgb(139 86 50/16%),
    var(--summer-topic-glow);
}

:root[data-style='summer'][data-scheme='dark'] body #addition-area,
:root[data-style='summer'][data-scheme='dark'] body #color-area,
:root[data-style='summer'][data-scheme='dark'] body #float-toolbar,
:root[data-style='summer'][data-scheme='dark'] body #font-area,
:root[data-style='summer'][data-scheme='dark'] body #image-area,
:root[data-style='summer'][data-scheme='dark'] body #imageattach-area,
:root[data-style='summer'][data-scheme='dark'] body #imageup-area,
:root[data-style='summer'][data-scheme='dark'] body #keyboard-area,
:root[data-style='summer'][data-scheme='dark'] body #size-area,
:root[data-style='summer'][data-scheme='dark'] body #smilies-area,
:root[data-style='summer'][data-scheme='dark'] body #spoiler-area,
:root[data-style='summer'][data-scheme='dark'] body #table-area,
:root[data-style='summer'][data-scheme='dark'] body #tags .container,
:root[data-style='summer'][data-scheme='dark'] body #video-area {
  box-shadow:
    0 14px 32px rgb(0 0 0/42%),
    var(--summer-topic-glow);
}

:root[data-style='summer'] #pun-viewtopic .post-rating p.container,
:root[data-style='summer'] #pun-viewtopic .post-vote p.container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  padding: 0;
}

:root[data-style='summer'] #pun-viewtopic .post-vote p.container {
  border: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-style='summer'] #pun-viewtopic .post-rating p.container {
  min-width: 42px;
  overflow: hidden;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-md);
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

:root[data-style='summer'] #pun-viewtopic .post-rating a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font: 700 12px/1 var(--main-font);
}

:root[data-style='summer'] #pun-viewtopic .post-vote a.positive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-md);
  background: var(--summer-topic-panel);
  color: var(--accent);
  box-shadow: var(--summer-card-shadow);
  font: 800 15px/1 var(--main-font);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

:root[data-style='summer']
  #pun-viewtopic
  .post-rating
  p.container:has(a:focus-visible),
:root[data-style='summer'] #pun-viewtopic .post-rating p.container:has(a:hover),
:root[data-style='summer'] #pun-viewtopic .post-vote a.positive:focus-visible,
:root[data-style='summer'] #pun-viewtopic .post-vote a.positive:hover {
  border-color: var(--accent2);
  background: var(--accent);
  color: var(--tab-text);
}

:root[data-style='summer']
  #pun-viewtopic
  .post-rating
  p.container:has(a:focus-visible)
  a,
:root[data-style='summer']
  #pun-viewtopic
  .post-rating
  p.container:has(a:hover)
  a {
  color: inherit;
}

:root[data-style='summer']
  #pun-viewtopic
  .post-rating
  p.container:has(a:focus-visible)
  a:before,
:root[data-style='summer']
  #pun-viewtopic
  .post-rating
  p.container:has(a:hover)
  a:before {
  color: currentcolor;
}

:root[data-style='summer'] #pun-viewtopic .post-links li.email {
  margin-right: auto;
}

:root[data-style='summer'] #pun-viewtopic .post h3 .font-resizer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-right: auto;
  padding: 4px 9px;
  border: 1px solid var(--summer-topic-border-soft);
  border-radius: var(--ks-radius-pill);
  background: color-mix(in srgb, var(--summer-topic-panel) 82%, transparent);
  box-shadow: var(--summer-card-shadow), var(--summer-topic-glow);
}

:root[data-style='summer'] #pun-viewtopic .post h3 .font-resizer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  border: var(--ks-border-transparent);
  border-radius: var(--ks-radius-pill);
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font: 700 12px/1 var(--main-font);
}

:root[data-style='summer'] #pun-viewtopic .post h3 .font-resizer button:hover {
  border-color: var(--summer-topic-border-soft);
  background: var(--accent);
  color: var(--tab-text);
}

:root[data-style='summer'] #pun-viewtopic .post h3 .font-resizer input.slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 118px;
  height: 18px;
  margin: 0 1px;
  padding: 0;
  border: 0;
  border-radius: var(--ks-radius-pill);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  accent-color: var(--accent);
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4px;
  border: 1px solid color-mix(in srgb, var(--accent2) 74%, var(--tab-text));
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 7px rgb(139 86 50/26%);
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 1px solid color-mix(in srgb, var(--accent2) 74%, var(--tab-text));
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 7px rgb(139 86 50/26%);
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

:root[data-style='summer'][data-scheme='dark']
  body
  #pun-viewtopic
  .post
  h3
  .font-resizer {
  background: color-mix(in srgb, var(--summer-topic-panel) 92%, transparent);
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: var(--ks-radius-pill);
  background: color-mix(
    in srgb,
    var(--summer-topic-border-soft) 78%,
    transparent
  );
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-moz-range-track {
  height: 5px;
  border-radius: var(--ks-radius-pill);
  background: color-mix(
    in srgb,
    var(--summer-topic-border-soft) 78%,
    transparent
  );
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  h3
  .font-resizer
  input.slider::-moz-range-progress {
  height: 5px;
  border-radius: var(--ks-radius-pill);
  background: var(--accent);
}

@supports not selector(:has(*)) {
  :root[data-style='summer'][data-scheme='dark'] body {
    background:
      var(--summer-body-tint),
      var(--base-bg) center center/cover fixed no-repeat;
  }
}

:root[data-style='summer'] #pun:after,
:root[data-style='summer'] #pun:before {
  z-index: 1;
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  pointer-events: none;
  border: 0;
  backdrop-filter: none;
}

:root[data-style='summer'] #pun:before {
  left: calc(var(--summer-edge-fade-width) * -1);
  z-index: 0;
  background:
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top/100% 100% no-repeat,
    var(--base-bg2) top center/1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 32%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top/100% 100% no-repeat;
}

:root[data-style='summer'] #pun:after,
:root[data-style='summer'] #pun:before {
  -webkit-mask-image: var(--summer-pun-mask-x);
  mask-image: var(--summer-pun-mask-x);
}

:root[data-style='summer'] #pun:after {
  right: calc(var(--summer-edge-fade-width) * -1);
  z-index: 1;
  background: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 28%, transparent) 6%,
    transparent 15%,
    transparent 85%,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 28%, transparent) 94%,
    transparent 100%
  );
}

:root[data-style='summer'] #pun-viewtopic .main .post:after,
:root[data-style='summer'] #pun-viewtopic .main .post:before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 92px;
  z-index: 0;
  pointer-events: none;
}

:root[data-style='summer'] #pun-viewtopic .main .post:before {
  left: -1px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(
    90deg,
    var(--summer-post-edge-mask) 0,
    var(--summer-post-edge-mask-soft) 42%,
    transparent 100%
  );
}

:root[data-style='summer'] #pun-viewtopic .main .post:after {
  right: -1px;
  border-radius: 0 18px 18px 0;
  background: linear-gradient(
    270deg,
    var(--summer-post-edge-mask) 0,
    var(--summer-post-edge-mask-soft) 42%,
    transparent 100%
  );
}

:root[data-style='summer'] #pun-viewtopic .main .post h3,
:root[data-style='summer'] #pun-viewtopic .main .post > .container {
  position: relative;
  z-index: 1;
}

:root[data-style='summer'] #pun {
  isolation: isolate;
  position: relative;
  z-index: 1;
  overflow: visible;
  background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--summer-pun-overlay-top) 58%, transparent) 0,
      color-mix(in srgb, var(--summer-pun-overlay-mid) 48%, transparent) 430px,
      color-mix(in srgb, var(--summer-pun-overlay-bottom) 50%, transparent) 100%
    )
    top/100% 100% no-repeat;
  box-shadow: var(--summer-pun-shadow);
}

:root[data-style='summer'] #pun > * {
  position: relative;
  z-index: 2;
}

:root[data-style='summer'] #pun > #pun-navlinks,
:root[data-style='summer']
  #pun
  > #pun-navlinks.section:has(.multiacc-profilemenu.is-open),
:root[data-style='summer']
  #pun
  > #pun-navlinks.section:has(.multiacc-profilemenu.open),
:root[data-style='summer']
  #pun
  > #pun-navlinks.section:has(.multiacc-profilemenu[style*='block']) {
  position: relative;
  z-index: 214748000;
  overflow: visible;
}

:root[data-style='summer'] #navprofiles,
:root[data-style='summer'] #pun-navlinks .container {
  overflow: visible;
}

:root[data-style='summer'] #navprofiles {
  z-index: 214748000;
}

:root[data-style='summer'] #navprofiles .multiacc-profilemenu {
  z-index: 214748001;
}

:root[data-style='summer'] #pun-about p.container:after,
:root[data-style='summer'] #pun-about p.container:before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-mask-image: var(--summer-pun-mask-x);
  mask-image: var(--summer-pun-mask-x);
  content: none;
  display: none;
}

:root[data-style='summer'] #pun-about p.container .item1,
:root[data-style='summer'] #pun-about p.container a,
:root[data-style='summer'] #pun-about p.container > * {
  position: relative;
  z-index: 2;
}

:root[data-style='summer'][data-scheme='dark'] body #pun:before {
  background:
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top/100% 100% no-repeat,
    var(--base-bg2) top center/1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 32%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top/100% 100% no-repeat;
}

:root[data-style='summer'][data-scheme='dark'] {
  background-color: #160b08;
  background-image:
    var(--summer-body-tint),
    url(https://forumstatic.ru/files/001c/b8/c1/83863.webp?v=1);
}

:root[data-style='summer'] body {
  min-height: 100vh;
  isolation: isolate;
  background: transparent;
}

:root[data-style='summer'] body:before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 430px,
        var(--summer-pun-overlay-bottom) 100%
      )
      top/100% 100% no-repeat,
    var(--base-bg2) top center/1100px auto no-repeat,
    linear-gradient(
        180deg,
        var(--summer-pun-overlay-top) 0,
        var(--summer-pun-overlay-mid) 34%,
        var(--summer-pun-overlay-bottom) 100%
      )
      top/100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    rgb(0 0 0/8%) calc(50% - 720px),
    rgb(0 0 0/42%) calc(50% - 660px),
    #000 calc(50% - 560px),
    #000 calc(50% + 560px),
    rgb(0 0 0/42%) calc(50% + 660px),
    rgb(0 0 0/8%) calc(50% + 720px),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    rgb(0 0 0/8%) calc(50% - 720px),
    rgb(0 0 0/42%) calc(50% - 660px),
    #000 calc(50% - 560px),
    #000 calc(50% + 560px),
    rgb(0 0 0/42%) calc(50% + 660px),
    rgb(0 0 0/8%) calc(50% + 720px),
    transparent
  );
}

:root[data-style='summer'] #pun-viewtopic .main .post:after,
:root[data-style='summer'] #pun-viewtopic .main .post:before,
:root[data-style='summer'] #pun:after,
:root[data-style='summer'] #pun:before {
  content: none;
  display: none;
}

:root[data-style='summer'][data-scheme='dark'] body #pun-about p.container {
  box-shadow:
    inset 0 42px 54px rgb(10 4 2/58%),
    inset 0 -40px 54px rgb(5 2 1/68%);
}

:root[data-style='summer'] #pun-index .category h2:after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(620px, 76%);
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--text-tab-accent) 30%, transparent),
    transparent
  );
  pointer-events: none;
}

:root[data-style='summer'] #pun-index .category h2 span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  color: var(--text-tab-accent);
  opacity: 0.52;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 62%, transparent) 0,
    transparent 72%
  );
}

:root[data-style='summer'][data-scheme='dark']
  body
  #pun-index
  .category
  h2:before {
  opacity: 0.2;
  mix-blend-mode: screen;
  filter: saturate(0.9) contrast(0.96);
}

:root[data-style='summer'][data-scheme='dark']
  body
  #pun-index
  .category
  h2:after {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--text-tab-accent) 26%, transparent),
    transparent
  );
}

:root[data-style='summer'][data-scheme='dark']
  body
  #pun-index
  .category
  h2
  span {
  opacity: 0.42;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--summer-pun-overlay-bottom) 46%, transparent) 0,
    transparent 72%
  );
}

:root[data-style='summer'] #pun-viewtopic .post-content .html-post-box {
  display: block;
  width: 100%;
  max-width: none;
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
}

:root[data-style='summer'] #pun-viewtopic .post-content .html-content,
:root[data-style='summer'] #pun-viewtopic .post-content .html-inner,
:root[data-style='summer'] #pun-viewtopic .post-content iframe.html_frame {
  display: block;
  width: 100%;
  max-width: none;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0;
  box-shadow: none !important;
}

:root[data-style='summer'] .custom_tag.kindredaca {
  position: relative;
  overflow: hidden;
  max-width: 690px;
  margin: 18px auto;
  border: 1px solid var(--summer-location-text-border);
  border-radius: var(--ks-radius-sm);
  background: var(--summer-location-bg);
  box-shadow: var(--summer-card-shadow);
}

:root[data-style='summer'] .custom_tag.kindredaca *,
:root[data-style='summer'] .custom_tag.kindredaca :after,
:root[data-style='summer'] .custom_tag.kindredaca :before {
  box-sizing: border-box;
}

:root[data-style='summer'] .custom_tag.kindredaca p {
  margin: 0;
  padding: 0;
}

:root[data-style='summer'] .custom_tag.kahead {
  position: relative;
  isolation: isolate;
  min-height: 138px;
  padding: 34px 24px 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--head) center top/cover no-repeat;
  border-radius: 5px 5px 0 0;
}

:root[data-style='summer'] .custom_tag.kahead:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-head-fade) 24%, transparent) 0,
    transparent 46%,
    color-mix(in srgb, var(--summer-head-edge) 42%, transparent) 100%
  );
  pointer-events: none;
}

:root[data-style='summer'] .custom_tag.kahead:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: -1;
  height: 66px;
  background: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--summer-location-head-fade) 52%, transparent) 54%,
    var(--summer-location-head-fade) 100%
  );
  pointer-events: none;
}

:root[data-style='summer'] .custom_tag.kahead > p {
  position: relative;
  z-index: 2;
  color: var(--summer-location-head-title);
  font-family: Asther, auge, serif;
  font-size: 34px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-shadow: var(--summer-location-head-shadow);
}

:root[data-style='summer'] .custom_tag.kaheadtitle {
  position: relative;
  z-index: 2;
}

:root[data-style='summer'] .custom_tag.kaheadtitle p {
  color: var(--summer-location-head-subtitle);
  font-family: var(--main-font);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: var(--summer-location-head-shadow);
}

:root[data-style='summer'] .custom_tag.katext {
  position: relative;
  z-index: 3;
  margin-top: -22px;
  padding: 20px 30px 22px;
  background: var(--summer-location-bg);
}

:root[data-style='summer'] .custom_tag.katexttext {
  padding: 17px 20px;
  border: 1px solid var(--summer-location-text-border);
  border-radius: var(--ks-radius-xs);
  background: var(--summer-location-text-bg);
  color: var(--text);
  line-height: 1.45;
  text-align: left;
}

:root[data-style='summer'] .custom_tag.katexttext + .custom_tag.katexttext {
  margin-top: 10px;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 0;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-author,
:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links
  .pl-email,
:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links
  .pl-website {
  display: none;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-body {
  grid-column: 1/-1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-body
  .post-box {
  min-height: 0;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links {
  grid-column: 1/-1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  > .container
  > .post-links
  ul {
  margin-left: 0;
  justify-content: flex-end;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  h3
  > span {
  margin-left: 0;
}

:root[data-style='summer']
  #pun-viewtopic
  .post:is(.hide-profile, .hideprofile)
  .custom_tag.kindredaca {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

@media screen and (width <=540px) and (hover: none) and (pointer: coarse) {
  :is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden auto;
    background-color: #f6eadc;
    background-image: var(--summer-body-tint), var(--base-bg);
    background-position: top, top;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
    --summer-mobile-nav-height: 56px;
    --summer-mobile-nav-button: 56px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .punbb {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title
    .container {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin-left: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title
    table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 268px;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
    background: var(--mob-head, var(--head)) center top/cover no-repeat;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title:before {
    top: 92px;
    max-width: calc(100vw - 24px);
    font-size: clamp(42px, 12vw, 68px);
    white-space: nowrap;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title:after {
    top: 76px;
    width: min(600px, 100vw);
    max-width: 100vw;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #stylelist {
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  :root[data-style='summer'] .minimal-toggle {
    display: flex;
    position: relative;
    z-index: 1;
    inset: auto;
    transform: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: calc(100vw - 32px);
    margin: 18px auto max(18px, env(safe-area-inset-bottom));
    padding: 4px 8px;
    color: var(--tab-text);
    font-family: var(--main-font);
    line-height: 1;
    border-radius: var(--ks-radius-pill);
    background: color-mix(in srgb, var(--accent2) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--tab-text) 34%, transparent);
    box-shadow: 0 3px 10px rgb(0 0 0/18%);
  }

  :root[data-style='summer'] .minimal-toggle input {
    display: none;
  }

  :root[data-style='summer'] .minimal-toggle i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--tab-text);
    font-size: 13px;
    line-height: 1;
  }

  :root[data-style='summer'] .minimal-switch {
    display: block;
    position: relative;
    width: 42px;
    height: 22px;
    flex: 0 0 42px;
    border-radius: var(--ks-radius-pill);
    background: color-mix(in srgb, var(--dark-bord) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--tab-text) 26%, transparent);
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }

  :root[data-style='summer'] .minimal-knob {
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--tab-text);
    box-shadow: 0 1px 4px rgb(0 0 0/22%);
    transition: transform 0.2s ease;
  }

  :root[data-style='summer'] .minimal-toggle input:checked + .minimal-switch {
    background: var(--accent2);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .minimal-toggle
    input:checked
    + .minimal-switch
    .minimal-knob {
    transform: translateX(20px);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .knews {
    left: 16px;
    right: 16px;
    top: 166px;
    width: auto;
    max-width: calc(100vw - 32px);
    height: 84px;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    .knews {
    left: 16px;
    right: 16px;
    top: 166px;
    width: auto;
    max-width: calc(100vw - 32px);
    min-height: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .knews
    text,
  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    .knews
    text {
    height: 62px;
    margin: 10px 0;
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    touch-action: pan-y;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .knews
    text
    p,
  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    .knews
    text
    p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .banners_bottom {
    order: 10;
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 100vw;
    height: 42px;
    margin: 0 auto 18px;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
    left: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    embed,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    iframe,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    img,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    object,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    video {
    max-width: 100%;
  }

  :is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  ),
  :root[data-style='summer'].force-mobile {
    height: auto;
    min-height: 100%;
    overflow: hidden visible;
    touch-action: auto;
    -webkit-overflow-scrolling: auto;
  }

  :is(
    :root[data-style='summer'].force-mobile body,
    :root[data-style='summer'] body.force-mobile
  ) {
    background-position: top;
    background-size: cover;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    position: relative;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .punbb {
    height: auto;
    min-height: 0;
    overflow-y: visible;
    touch-action: auto;
    -webkit-overflow-scrolling: auto;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer
    *,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-title
    table {
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .knews,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .knews
    text,
  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    .knews,
  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    .knews
    text {
    overflow: hidden;
    pointer-events: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .knews
    a,
  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    .knews
    a {
    pointer-events: auto;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-status {
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-status
    p.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 10px 16px 12px;
    text-align: left;
    box-sizing: border-box;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-status
    span {
    width: auto;
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-status
    .item3.status-right,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-status
    .item4.status-right {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer
    .container {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    background: var(--summer-footer-fade, var(--bt-bg));
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer
    .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .banners_bottom-inner {
    height: 42px;
    align-items: center;
  }

  :root[data-style='summer'] #html-footer .minimal-toggle {
    order: 1000;
    align-self: center;
    margin: 10px auto 0;
    position: relative;
    inset: auto;
    transform: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.scroll_navi,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.user-scrolled {
    touch-action: auto;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    box-shadow: none;
    background: linear-gradient(
      180deg,
      rgb(255 246 234/34%),
      rgb(250 232 211/42%) 46%,
      rgb(255 239 219/36%)
    );
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #html-footer
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .banners_bottom {
    background: transparent;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li
    a {
    font-size: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .kindred-info,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    .kindred-info
    .ki-ash {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks {
    position: relative;
    inset: auto;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: var(--summer-mobile-nav-height);
    min-height: var(--summer-mobile-nav-height);
    margin: 0 calc(50% - 50vw);
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    transform: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    border-width: 1px 0;
    border-radius: 0;
    background: var(--navi-bg);
    box-shadow: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi {
    position: fixed;
    inset: 0 0 auto;
    z-index: 3000;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi
    .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 8px 0 var(--summer-mobile-nav-button);
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    border: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    #navprofiles,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi
    .container {
    overflow: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    #navprofiles {
    position: relative;
    z-index: 214748000;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    #navprofiles
    .multiacc-profilemenu {
    z-index: 214748001;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    #navawards {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container
    > li,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled
    .container
    > li,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi
    .container
    > li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
    opacity: 1;
    visibility: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container
    > li
    > a,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled
    .container
    > li
    > a,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi
    .container
    > li
    > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: var(--summer-mobile-nav-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:
      Font Awesome\6 Pro,
      FontAwesome;
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    color: var(--accent);
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container
    > li
    > a:active,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container
    > li
    > a:focus,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container
    > li
    > a:hover {
    color: var(--accent2);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    .container
    > li
    > a:before,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.nav-scrolled
    .container
    > li
    > a:before,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks.scroll_navi
    .container
    > li
    > a:before {
    display: block;
    font-family:
      Font Awesome\6 Pro,
      FontAwesome;
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 700;
    line-height: 1;
    color: inherit;
    opacity: 1;
    visibility: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navindex
    > a:before {
    content: '\f015';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navuserlist
    > a:before {
    content: '\f0c0';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navsearch
    > a:before {
    content: '\f002';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navprofile
    > a:before {
    content: '\f2bd';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navpm
    > a:before {
    content: '\f0e0';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navadmin
    > a:before {
    content: '\f013';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navprofiles
    > a:before {
    content: '\f02d';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navlogout
    > a:before {
    content: '\f08b';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navregister
    > a:before {
    content: '\f234';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navlogin
    > a:before {
    content: '\f02e';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navpr_1
    > a:before {
    content: '\f1d8';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navpr_2
    > a:before {
    content: '\f02d';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navextra1
    > a:before {
    content: '\f02e';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li#navextraBL
    > a:before {
    content: '\f05e';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-navlinks
    li
    a
    span {
    display: none;
    font-size: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks {
    font-size: 0;
    color: var(--accent);
    position: relative;
    inset: auto;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--summer-mobile-nav-button);
    height: var(--summer-mobile-nav-height);
    min-width: var(--summer-mobile-nav-button);
    min-height: var(--summer-mobile-nav-height);
    margin: calc(var(--summer-mobile-nav-height) * -1) 0 0 calc(50% - 50vw);
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 1;
    transform: none;
    transition: none;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    touch-action: manipulation;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.scroll_navi,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.user-scrolled,
  :root[data-style='summer']
    body.force-mobile
    #pun-navlinks.nav-scrolled
    ~ #pun-ulinks,
  :root[data-style='summer']
    body.force-mobile
    #pun-navlinks.scroll_navi
    ~ #pun-ulinks,
  :root[data-style='summer'].force-mobile
    #pun-navlinks.nav-scrolled
    ~ #pun-ulinks,
  :root[data-style='summer'].force-mobile
    #pun-navlinks.scroll_navi
    ~ #pun-ulinks {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 3100;
    width: var(--summer-mobile-nav-button);
    height: var(--summer-mobile-nav-height);
    margin: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks:before {
    content: '\f0c9';
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--summer-mobile-nav-button);
    height: var(--summer-mobile-nav-height);
    margin: 0;
    padding: 0;
    font-family:
      Font Awesome\6 Pro,
      FontAwesome;
    font-size: 29px;
    font-weight: 400;
    line-height: 1;
    color: var(--accent);
    text-align: center;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks:focus-within:before,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks:hover:before {
    color: var(--accent2);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    h2 {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.scroll_navi
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.user-scrolled
    .container {
    position: absolute;
    top: calc(var(--summer-mobile-nav-height) + 6px);
    left: 8px;
    right: auto;
    z-index: 3101;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    height: auto;
    max-height: calc(100vh - var(--summer-mobile-nav-height) - 18px);
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden auto;
    border: 1px solid
      color-mix(in srgb, var(--summer-card-border) 72%, transparent);
    border-radius: var(--ks-radius-xl);
    background: color-mix(in srgb, var(--summer-card-bg-soft) 94%, transparent);
    box-shadow: 0 10px 26px rgb(100 54 32/18%);
    backdrop-filter: blur(8px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity 0.16s ease,
      transform 0.16s ease,
      visibility 0.16s ease;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.scroll_navi
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.user-scrolled
    .container,
  :root[data-style='summer']
    body.force-mobile
    #pun-navlinks.nav-scrolled
    ~ #pun-ulinks
    .container,
  :root[data-style='summer']
    body.force-mobile
    #pun-navlinks.scroll_navi
    ~ #pun-ulinks
    .container,
  :root[data-style='summer'].force-mobile
    #pun-navlinks.nav-scrolled
    ~ #pun-ulinks
    .container,
  :root[data-style='summer'].force-mobile
    #pun-navlinks.scroll_navi
    ~ #pun-ulinks
    .container {
    position: fixed;
    top: calc(var(--summer-mobile-nav-height) + 6px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: calc(100vw - 16px);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.is-open
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks.open
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks:active
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks:focus-within
    .container,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks:hover
    .container {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    line-height: 1.2;
    text-align: center;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li
    a {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 11px 12px;
    box-sizing: border-box;
    border-radius: var(--ks-radius-md);
    background: var(--accent);
    color: var(--tab-text);
    font-family: var(--main-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-transform: lowercase;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li
    a:active,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li
    a:focus,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-ulinks
    li
    a:hover {
    background: var(--accent2);
    color: var(--tab-text);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .main
    .post {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
    margin: 14px auto 22px;
    padding: 0;
    overflow: visible;
    border-radius: 14px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .main
    .post:after,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .main
    .post:before {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    :is(
      .topic,
      .main,
      .post,
      .post > .container,
      .post-body,
      .post-box,
      .post-author,
      .post-author ul,
      .post-author li,
      .author-wrap,
      .wrap-resp,
      .post-links,
      .post-links ul
    ) {
    box-sizing: border-box;
    max-width: 100%;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    > .container {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 10px;
    overflow: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    .post-author {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 16px 0 12px;
    padding: 22px 10px 10px;
    overflow: visible;
    border-radius: var(--ks-radius-xl);
    color: var(--prof-text);
    position: relative;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld2 {
    top: -18px;
    left: 50%;
    width: 36px;
    height: 36px;
    z-index: 5;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    li {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: initial;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-author {
    position: absolute;
    top: 42px;
    left: 114px;
    right: 24px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    gap: 6px;
    text-align: left;
    pointer-events: auto;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-author
    a {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 5px 11px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--ks-radius-md);
    font-size: 17px;
    line-height: 1.12;
    text-align: left;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-author
    .indOnline {
    flex: 0 0 auto;
    margin: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .author-wrap {
    display: grid;
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ks-radius-xl);
    grid-template: 'avatar empty' 30px 'avatar title' auto 'avatar info' auto/82px minmax(
        0,
        1fr
      );
    align-items: start;
    gap: 4px 12px;
    min-height: 126px;
    padding: 18px 14px 16px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-avatar {
    grid-area: avatar;
    position: relative;
    z-index: 2;
    display: block;
    width: 78px;
    height: 78px;
    padding: 0;
    margin: 0;
    place-self: start center;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld1 {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--prof-text);
    text-align: left;
    grid-area: info;
    place-self: start start;
    max-width: 100%;
    margin: 2px 0 0;
    opacity: 0.9;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld1
    .lz-text {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .wrap-resp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px 12px;
    width: 100%;
    margin: 10px 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .wrap-resp
    li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    width: auto;
    white-space: nowrap;
    color: var(--prof-text);
    font: 600 12px/1 var(--main-font);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .wrap-resp
    .fld-name:before {
    margin-right: 3px;
    color: var(--accent);
    font-size: 13px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(238px, 100%);
    height: 40px;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld3
    .pers-plah,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld3
    > pers-plah {
    width: min(220px, 100%);
    max-width: 220px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--ks-radius-sm);
    background: var(--pers-pl) center/cover;
    box-shadow: none;
    transform: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld3
    img {
    display: block;
    width: 100%;
    max-width: none;
    height: 40px;
    max-height: 40px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    border-radius: var(--ks-radius-sm);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-awards,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-last-visit,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-online,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld3
    .lz-name,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld3
    .lz-text {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld6
    img,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld6
    > div {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0;
    filter: grayscale(0.12) sepia(0.12);
    opacity: 0.66;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-body {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    clear: both;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-content
    iframe,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-content
    img,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-content
    video {
    max-width: 100%;
    height: auto;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links
    ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links
    li {
    display: inline-flex;
    width: auto;
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    .post-author:before {
    top: -18px;
    left: 50%;
    width: 36px;
    height: 36px;
    font-size: 15px;
    z-index: 4;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld2
    > a,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld2
    > div,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld2
    > img,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld2
    > span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld6 {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    background: var(--profile-bg) center top/cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000, #000 42%, transparent);
    mask-image: linear-gradient(180deg, #000, #000 42%, transparent);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-avatar
    img {
    display: block;
    width: 78px;
    height: 78px;
    max-width: 78px;
    max-height: 78px;
    margin: 0;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 9px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld3
    .pers-plah:has(img),
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld3
    > pers-plah:has(img) {
    width: min(220px, 100%);
    max-width: 220px;
    min-height: 40px;
    height: 40px;
    background: transparent;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-box:before {
    border-radius: inherit;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: left;
    font-size: 14px;
    line-height: 1.62;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-content
    > p {
    margin: 0 0 1em;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-sig {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid
      color-mix(in srgb, var(--summer-topic-border-soft) 62%, transparent);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-sig
    dt {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-sig
    dd,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-sig
    p {
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid
      color-mix(in srgb, var(--summer-topic-border-soft) 58%, transparent);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links
    a {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.2;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links
    .email,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links
    .pm,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-links
    .profile {
    margin-right: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-title {
    position: relative;
    z-index: 2;
    border-radius: var(--ks-radius-md);
    text-transform: none;
    grid-area: title;
    place-self: start start;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
    color: var(--prof-text);
    font: 500 13px/1.25 var(--main-font);
    text-align: left;
    text-shadow: 0 1px 7px hsla(0, 0%, 100%, 0.45);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .pa-fld1
    .lz-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    color: var(--prof-text);
    font-size: 11px;
    line-height: 1.25;
    text-shadow: 0 1px 7px hsla(0, 0%, 100%, 0.4);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld3:has(.lz-name),
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-author
    .pa-fld3:has(.lz-text) {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post-box {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ks-radius-xl);
    position: relative;
    padding: 14px 15px 52px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .rsp_wrap {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: auto;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .rsp_wrap
    .post-rating,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .rsp_wrap
    .post-vote,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .rsp_wrap
    p.container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .rsp_wrap
    .post-rating
    p.container {
    min-width: 36px;
    padding: 0 8px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .rsp_wrap
    a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: var(--ks-radius-md);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linksb,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linkst {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    min-height: 0;
    margin: 12px auto;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linksb
    .pagelink,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linkst
    .pagelink {
    flex: 0 1 auto;
    max-width: calc(100% - 120px);
    margin: 0;
    padding: 8px 12px;
    white-space: nowrap;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linksb
    .postlink,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linkst
    .postlink {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    text-align: right;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linksb
    .postlink
    span,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linkst
    .postlink
    span {
    display: inline-flex;
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linksb
    .postlink
    a,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .linkst
    .postlink
    a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 8px 14px;
    white-space: nowrap;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .main
    .post
    h3 {
    box-sizing: border-box;
    min-height: 0;
    margin: 0;
    padding: 11px 12px;
    overflow: visible;
    border-radius: 14px 14px 0 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    span {
    flex-wrap: wrap;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: auto;
    align-items: center;
    justify-content: stretch;
    gap: 9px 12px;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    .copy-post-btn,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    a.sharelink,
  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    em.reportview {
    display: none;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    a.permalink {
    order: 1;
    flex: 1 1 auto;
    grid-column: 1;
    grid-row: 1;
    place-self: center start;
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 7px 13px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: var(--ks-radius-lg);
    line-height: 1.15;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    strong {
    order: 2;
    flex: 0 0 auto;
    grid-column: 2;
    grid-row: 1;
    place-self: center end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 38px;
    max-width: 58px;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: var(--text);
    font: 400 19px var(--sec-font);
    line-height: 1;
    text-align: right;
    white-space: nowrap;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    strong:before {
    position: static;
    display: inline;
    margin: 0;
    content: '#';
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    .font-resizer {
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: stretch;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto auto minmax(92px, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 6px 10px;
    border-radius: var(--ks-radius-pill);
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    .font-resizer
    button {
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    font-size: 13px;
  }

  :is(
      :root[data-style='summer'].force-mobile,
      :root[data-style='summer'] body.force-mobile
    )
    #pun-viewtopic
    .post
    h3
    .font-resizer
    input.slider {
    flex: 1 1 auto;
    width: 100%;
    min-width: 92px;
    max-width: none;
    margin: 0;
  }

  :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
  :root[data-style='summer'][data-scheme='dark'] body.force-mobile {
    background-color: #160b08;
    background-image:
      linear-gradient(180deg, rgb(5 2 1/18%), rgb(8 3 2/30%)),
      url(https://forumstatic.ru/files/001c/b8/c1/83863.webp?v=1);
    background-position: top, top;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }

  :is(
    :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
    :root[data-style='summer'][data-scheme='dark'] body.force-mobile
  ) {
    background-color: #160b08;
    background-image: var(--summer-body-tint), var(--base-bg);
    background-position: top, top;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: scroll, scroll;
  }

  :is(
      :root[data-style='summer'].force-mobile[data-scheme='dark'] body,
      :root[data-style='summer'][data-scheme='dark'] body.force-mobile
    )
    #pun {
    background: linear-gradient(
      180deg,
      rgb(28 13 9/36%),
      rgb(17 8 6/52%) 44%,
      rgb(10 4 3/64%)
    );
  }
}

:root {
  --ks-pa-fld6-mask: linear-gradient(
    180deg,
    #000 0%,
    #000 38%,
    rgba(0, 0, 0, 0.72) 58%,
    rgba(0, 0, 0, 0.28) 76%,
    transparent 96%,
    transparent
  );
  --ks-pa-fld6-fallback-bg:
    radial-gradient(
      circle at 18% 8%,
      color-mix(in srgb, var(--accent, #8b6f91) 22%, transparent) 0 16%,
      transparent 42%
    ),
    radial-gradient(
      circle at 86% 2%,
      color-mix(in srgb, var(--accent2, #b27969) 18%, transparent) 0 13%,
      transparent 38%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--profile, #8f7898) 72%, var(--quote, #f8f1ea)) 0%,
      color-mix(in srgb, var(--profile, #8f7898) 38%, transparent) 62%,
      transparent 100%
    ),
    var(--profile-bg, var(--kndr-img, var(--profile, #8f7898)));
  --ks-author-empty-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--quote, #fbf6ee) 82%, transparent),
    color-mix(in srgb, var(--podform, #f4eadf) 56%, transparent)
  );
}

:root[data-scheme='dark'] {
  --ks-pa-fld6-mask: linear-gradient(
    180deg,
    #000 0%,
    #000 44%,
    rgba(0, 0, 0, 0.72) 63%,
    rgba(0, 0, 0, 0.24) 80%,
    transparent 97%,
    transparent
  );
  --ks-author-empty-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--quote, #1e1b1f) 86%, transparent),
    color-mix(in srgb, var(--podform, #141216) 58%, transparent)
  );
}

:root:not([data-style])[data-scheme='light'],
:root[data-style='classic'][data-scheme='light'],
:root[data-style='spring'][data-scheme='light'] {
  --ks-pa-fld6-mask: linear-gradient(
    180deg,
    #000 0%,
    #000 34%,
    rgba(0, 0, 0, 0.66) 55%,
    rgba(0, 0, 0, 0.22) 74%,
    rgb(0 0 0/4%) 88%,
    transparent
  );
}

:root:not([data-style], [data-scheme='dark']),
:root[data-style='classic'][data-scheme='light'] {
  --ks-author-classic-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--profile, #181818) 88%, var(--accent2, #5b2a2a))
        0%,
      var(--profile, #181818) 100%
    ),
    var(--profile, #181818);
  --ks-author-empty-bg: var(--ks-author-classic-bg);
  --ks-author-empty-text: var(--prof-text, #fff);
  --ks-author-empty-muted: color-mix(
    in srgb,
    var(--prof-text, #fff) 76%,
    transparent
  );
  --ks-author-empty-link: var(--prof-link, #ab5656);
  --ks-author-empty-link-hover: var(--tab-text, #c9c8c8);
  --ks-author-empty-icon: var(--prof-link, #ab5656);
  --ks-author-empty-panel-bg: color-mix(
    in srgb,
    var(--profile, #181818) 84%,
    #000
  );
  --ks-author-empty-panel-border: color-mix(
    in srgb,
    var(--prof-bord, #191919) 76%,
    var(--prof-link, #ab5656)
  );
}

:root[data-style='summer'] {
  --ks-pa-fld6-fallback-bg:
    radial-gradient(
      circle at 20% 2%,
      color-mix(in srgb, var(--accent2, #c77854) 22%, transparent) 0 15%,
      transparent 44%
    ),
    radial-gradient(
      circle at 92% 10%,
      color-mix(in srgb, var(--accent, #d08f65) 18%, transparent) 0 14%,
      transparent 40%
    ),
    linear-gradient(
      180deg,
      color-mix(
          in srgb,
          var(--summer-topic-panel-strong, var(--quote, #fff4e6)) 84%,
          transparent
        )
        0%,
      color-mix(
          in srgb,
          var(--summer-topic-panel, var(--podform, #f7e7d2)) 54%,
          transparent
        )
        62%,
      transparent 100%
    ),
    var(--profile-bg, var(--kndr-img, var(--summer-topic-panel, #f3dfc6)));
}

#pun-viewtopic .post .post-author .pa-fld6 {
  overflow: hidden;
  background: transparent;
}

#pun-viewtopic .post .post-author .pa-fld6:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ks-pa-fld6-fallback-bg);
  background-position: top;
  background-size: cover;
  pointer-events: none;
}

#pun-viewtopic .post .post-author .pa-fld6 img,
#pun-viewtopic .post .post-author .pa-fld6:before,
#pun-viewtopic .post .post-author .pa-fld6 > div {
  display: block;
  -webkit-mask-image: var(--ks-pa-fld6-mask);
  mask-image: var(--ks-pa-fld6-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#pun-viewtopic .post .post-author .pa-fld6 img,
#pun-viewtopic .post .post-author .pa-fld6 > div {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: inherit;
}

#pun-viewtopic .post .post-author .pa-fld6 img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}

#pun-viewtopic .post .post-author .pa-fld6 > div:empty {
  background: var(--ks-pa-fld6-fallback-bg);
  background-position: top;
  background-size: cover;
}

:is(
    :root:not([data-style], [data-scheme='dark']),
    :root[data-style='classic'][data-scheme='light']
  )
  #pun-viewtopic
  .post
  .post-author {
  color: var(--prof-text);
  background: var(--ks-author-classic-bg, var(--profile));
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) {
  color: var(--ks-author-empty-text, var(--text));
  background: var(--ks-author-empty-bg);
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .author-wrap {
  position: relative;
  overflow: hidden;
  background:
    var(--kndr-img) center/cover,
    var(--ks-author-empty-bg);
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .author-wrap:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  background: var(--ks-pa-fld6-fallback-bg);
  background-position: top;
  background-size: cover;
  opacity: 0.72;
  pointer-events: none;
  -webkit-mask-image: var(--ks-pa-fld6-mask);
  mask-image: var(--ks-pa-fld6-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .author-wrap > * {
  position: relative;
  z-index: 2;
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-fld1,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-fld1 .lz-name,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-fld1 .lz-text,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-last-visit,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-title,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .wrap-resp,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .wrap-resp li {
  color: var(--ks-author-empty-text, var(--text));
  text-shadow: none;
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-title {
  color: var(--ks-author-empty-muted, var(--ks-author-empty-text, var(--text)));
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .author-wrap a,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-last-visit a,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .wrap-resp a {
  color: var(--ks-author-empty-link, var(--accent2));
}

#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .author-wrap a:hover,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-last-visit a:hover,
#pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .wrap-resp a:hover {
  color: var(--ks-author-empty-link-hover, var(--accent));
}

#pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .wrap-resp
  .fld-name:before {
  color: var(--ks-author-empty-icon, var(--accent2));
}

#pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6), :has(.pa-fld1))
  .pa-avatar
  img {
  outline: 1px solid
    var(
      --ks-author-empty-panel-border,
      color-mix(in srgb, var(--bord) 70%, var(--dark-bord))
    );
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

#pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6), :has(.pa-fld1), :has(.pa-fld3))
  .wrap-resp {
  margin: 10px 10px 12px;
  padding: 7px 8px;
  background: var(
    --ks-author-empty-panel-bg,
    color-mix(in srgb, var(--quote) 78%, var(--podform))
  );
  border: 1px solid
    var(
      --ks-author-empty-panel-border,
      color-mix(in srgb, var(--bord) 70%, var(--dark-bord))
    );
  border-radius: var(--ks-radius-sm);
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6)) {
  min-height: 0;
  background:
    radial-gradient(
      circle at 50% 0,
      color-mix(
          in srgb,
          var(--summer-topic-panel-strong, var(--quote)) 72%,
          transparent
        )
        0 22%,
      transparent 52%
    ),
    var(--ks-author-empty-bg);
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .author-wrap {
  background: transparent;
}

:root[data-style='summer']
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .author-wrap:after {
  opacity: 0.58;
}

.force-mobile #pun-viewtopic .post .post-author .pa-fld6 img,
.force-mobile #pun-viewtopic .post .post-author .pa-fld6:before,
.force-mobile #pun-viewtopic .post .post-author .pa-fld6 > div {
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 46%,
    rgba(0, 0, 0, 0.52) 72%,
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    #000 0,
    #000 46%,
    rgba(0, 0, 0, 0.52) 72%,
    transparent
  );
}

.force-mobile #pun-viewtopic .post .post-author:not(:has(.pa-fld6)) {
  color: var(--ks-author-empty-text, var(--text));
}

.force-mobile #pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-fld1,
.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .pa-fld1
  .lz-name,
.force-mobile #pun-viewtopic .post .post-author:not(:has(.pa-fld6)) .pa-title,
.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .wrap-resp
  li {
  color: var(--ks-author-empty-text, var(--text));
  text-shadow: none;
}

.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .wrap-resp
  .fld-name:before {
  color: var(--ks-author-empty-icon, var(--accent2));
}

.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6), :has(.pa-fld1))
  .author-wrap {
  grid-template: 'avatar empty' 30px 'avatar title' auto/82px minmax(0, 1fr);
  align-items: center;
}

.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6), :has(.pa-fld1), :has(.pa-fld3))
  .wrap-resp {
  margin: 10px 0 0;
  padding: 8px;
  background: var(
    --ks-author-empty-panel-bg,
    color-mix(in srgb, var(--quote) 78%, var(--podform))
  );
  border: 1px solid
    var(
      --ks-author-empty-panel-border,
      color-mix(in srgb, var(--bord) 70%, var(--dark-bord))
    );
  border-radius: var(--ks-radius-md);
}

.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .author-wrap {
  min-height: 126px;
  background: var(--ks-author-empty-bg);
  border-color: var(
    --ks-author-empty-panel-border,
    color-mix(in srgb, var(--bord) 70%, var(--dark-bord))
  );
}

.force-mobile
  #pun-viewtopic
  .post
  .post-author:not(:has(.pa-fld6))
  .author-wrap:after {
  opacity: 0.64;
}

a.notification-type-toggle {
  margin: 10px;
  display: inline-block;
}

table#notifications-stored tbody {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 5px;
}

/* Force-mobile private messages */
.force-mobile #pun-messages #profile.messages-container > .container {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 10px 12px !important;
}

.force-mobile #pun-messages #profilenav {
  float: none;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
}

.force-mobile #pun-messages #profilenav h2 {
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
}

.force-mobile #pun-messages #profilenav h2 span {
  display: inline-flex;
  padding: 0;
  font-family: var(--sec-font);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sec-text);
}

.force-mobile #pun-messages #profilenav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
  padding: 0;
}

.force-mobile #pun-messages #profilenav li {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.force-mobile #pun-messages #profilenav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 32px;
  max-width: 100%;
  padding: 8px 10px;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-sm);
  background: var(--quote);
  color: var(--text);
  font-family: var(--main-font);
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.force-mobile #pun-messages #profilenav li.isactive a {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bt-bg);
}

.force-mobile #pun-messages #messages fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.force-mobile #pun-messages #messages legend {
  display: none;
}

.force-mobile #pun-messages #messages .fs-box,
.force-mobile #pun-messages #messages .fs-box > .container {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 !important;
  overflow: visible;
  border: 0;
}

.force-mobile #pun-messages #messages table {
  display: block;
  box-sizing: border-box;
  width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
}

.force-mobile #pun-messages #messages thead {
  display: block;
  width: 100%;
  margin: 0 0 8px;
}

.force-mobile #pun-messages #messages thead tr {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.force-mobile #pun-messages #messages thead th {
  display: none;
}

.force-mobile #pun-messages #messages thead th.pmtc24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 36px;
  min-height: 30px;
  margin: 0;
  padding: 0 !important;
  border: 0;
}

.force-mobile #pun-messages #messages tbody.hasicon {
  display: block;
  width: 100%;
}

.force-mobile #pun-messages #messages tbody.hasicon tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-areas:
    'topic check'
    'sender check'
    'date check';
  gap: 6px 10px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  margin: 0 0 10px;
  padding: 12px;
  overflow: visible;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-sm);
  background: var(--quote);
}

.force-mobile #pun-messages #messages tbody.hasicon td {
  display: block;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 0 !important;
  overflow: visible !important;
  border: 0;
  background: transparent;
  white-space: normal !important;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtcl1 {
  grid-area: topic;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtc22 {
  grid-area: sender;
  padding-left: 28px !important;
  color: var(--sec-text);
  font-size: 11px !important;
  line-height: 1.25;
  text-align: left !important;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtc33 {
  grid-area: date;
  padding-left: 28px !important;
  color: var(--sec-text);
  font-size: 10px !important;
  line-height: 1.2;
  text-align: left !important;
  white-space: nowrap !important;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtc24 {
  grid-area: check;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: stretch;
  width: 36px !important;
  min-width: 36px;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtcl1 .intd {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  min-width: 0;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtcl1 div.icon {
  float: none;
  margin: 1px 0 0 !important;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtcl1 .tclcon {
  display: block;
  min-width: 0;
  padding: 0 !important;
  text-align: left;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtcl1 .tclcon a {
  display: block;
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.force-mobile #pun-messages #messages tbody.hasicon td.pmtc22 > a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}

.force-mobile #pun-messages #messages input[type='checkbox'] {
  box-sizing: border-box;
  width: 18px;
  max-width: none;
  height: 18px;
  margin: 0;
  padding: 0;
}

.force-mobile #pun-messages #messages .linksb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  margin: 12px 0 0;
}

.force-mobile #pun-messages #messages .linksb .pagelink {
  float: none;
  flex: 1 1 180px;
  min-width: 0;
  overflow-x: auto;
  text-align: left;
  white-space: nowrap;
}

.force-mobile #pun-messages #messages .linksb .postlink {
  float: none;
  flex: 0 0 auto;
  margin: 0;
}

.force-mobile #pun-messages #messages .linksb .postlink .button {
  width: auto;
  max-width: none;
  min-height: 34px;
  margin: 0;
  padding: 8px 14px;
}

.force-mobile #pun-messages #messages .linksb .clearer {
  display: none;
}

:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  #profilenav
  a,
:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  #messages
  tbody.hasicon
  tr {
  border-color: var(--summer-card-border);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 76%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 90%, transparent)
  );
  box-shadow: var(--summer-card-shadow);
}

:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  #profilenav
  li.isactive
  a {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bt-bg);
}

:is(
    :root[data-style='summer'][data-scheme='dark'].force-mobile,
    :root[data-style='summer'][data-scheme='dark'] body.force-mobile
  )
  #pun-messages
  #profilenav
  a,
:is(
    :root[data-style='summer'][data-scheme='dark'].force-mobile,
    :root[data-style='summer'][data-scheme='dark'] body.force-mobile
  )
  #pun-messages
  #messages
  tbody.hasicon
  tr {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 70%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 86%, transparent)
  );
}

/* Force-mobile opened private message */
.force-mobile #pun-messages #profile.messages-container > .container > fieldset {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 14px;
  padding: 0 !important;
  border: 0;
}

.force-mobile
  #pun-messages
  #profile.messages-container
  > .container
  > fieldset
  > legend {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
}

.force-mobile
  #pun-messages
  #profile.messages-container
  > .container
  > fieldset
  > legend
  strong {
  display: inline-flex;
  max-width: 100%;
  padding: 7px 11px;
  overflow: hidden;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-sm);
  background: var(--quote);
  color: var(--accent);
  font: 600 12px/1.2 var(--main-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.force-mobile #pun-messages .post,
.force-mobile #pun-messages .post > .container,
.force-mobile #pun-messages .post-author,
.force-mobile #pun-messages .post-author li,
.force-mobile #pun-messages .post-author ul,
.force-mobile #pun-messages .post-body,
.force-mobile #pun-messages .post-box,
.force-mobile #pun-messages .post-content,
.force-mobile #pun-messages .post-links,
.force-mobile #pun-messages .post-links ul {
  box-sizing: border-box;
  max-width: 100%;
}

.force-mobile #pun-messages .post {
  width: 100%;
  min-width: 0;
  margin: 12px 0 14px;
  padding: 0;
  overflow: hidden;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-lg);
  background: var(--quote);
}

.force-mobile #pun-messages .post h3 {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 10px 12px;
  border-bottom: var(--ks-border-default);
  background: color-mix(in srgb, var(--podform) 72%, transparent);
  text-align: left;
}

.force-mobile #pun-messages .post h3 span {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--sec-text);
  font: 400 11px/1.2 var(--main-font);
  text-align: left;
  text-transform: uppercase;
}

.force-mobile #pun-messages .post > .container {
  display: block !important;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 10px !important;
  overflow: visible;
}

.force-mobile #pun-messages .post .post-author {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0 0 12px;
  padding: 12px;
  overflow: visible;
  border: var(--ks-border-profile);
  border-radius: var(--ks-radius-md);
  background: color-mix(in srgb, var(--quote) 76%, transparent);
  color: var(--prof-text);
  box-shadow: var(--shadow2, 4px 5px 10px #00000024);
}

.force-mobile #pun-messages .post-author p,
.force-mobile #pun-messages .post-author ul {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}

.force-mobile #pun-messages .post-author li {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: initial;
}

.force-mobile #pun-messages .pa-author {
  position: static;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  text-align: left;
}

.force-mobile #pun-messages .pa-author a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 11px;
  overflow: hidden;
  border-radius: var(--ks-radius-md);
  background: var(--accent2);
  color: var(--tab-text) !important;
  font: 600 15px/1.1 var(--sec-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.force-mobile #pun-messages .pa-author .indOffline,
.force-mobile #pun-messages .pa-author .indOnline {
  flex: 0 0 auto;
  margin: 0;
}

.force-mobile #pun-messages .author-wrap {
  display: grid;
  position: relative;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: 'avatar title';
  gap: 8px 12px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border: var(--ks-border-profile);
  border-radius: var(--ks-radius-md);
  background: var(--kndr-img) center/cover;
}

.force-mobile #pun-messages .pa-avatar {
  grid-area: avatar;
  display: block;
  width: 68px;
  height: 68px;
  margin: 0;
  padding: 0;
}

.force-mobile #pun-messages .pa-avatar img,
.force-mobile #pun-messages .punbb .post .post-author .pa-avatar img {
  display: block;
  width: 68px;
  max-width: 68px;
  height: 68px;
  max-height: 68px;
  margin: 0;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--ks-radius-sm);
}

.force-mobile #pun-messages .pa-title {
  grid-area: title;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--prof-text);
  font: 500 13px/1.25 var(--main-font);
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.force-mobile #pun-messages .post-author .pa-reg {
  display: none;
}

.force-mobile #pun-messages .post-author .wrap-resp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px 12px;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
}

.force-mobile #pun-messages .post-author .wrap-resp li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  color: var(--prof-text);
  font: 600 12px/1 var(--main-font);
  white-space: nowrap;
}

.force-mobile #pun-messages .post-body {
  display: block;
  clear: both;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-left: 0;
}

.force-mobile #pun-messages .post-box {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px !important;
  overflow: hidden;
  border: var(--ks-border-default) !important;
  border-radius: var(--ks-radius-md);
  background: var(--podform);
}

.force-mobile #pun-messages .post-content {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-align: left;
  word-break: normal;
}

.force-mobile #pun-messages .post-content > p {
  margin: 0;
  padding: 0;
}

.force-mobile #pun-messages .post-content iframe,
.force-mobile #pun-messages .post-content img,
.force-mobile #pun-messages .post-content video {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
}

.force-mobile #pun-messages .post-links {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: var(--ks-border-default);
}

.force-mobile #pun-messages .post-links ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.force-mobile #pun-messages .post-links li {
  display: inline-flex;
  width: auto;
  margin: 0;
  padding: 0;
}

.force-mobile #pun-messages .post-links .pl-email,
.force-mobile #pun-messages .post-links .pl-website {
  float: none;
}

.force-mobile #pun-messages .post-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 11px;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-pill);
  background: var(--quote);
  color: var(--accent);
  font-size: 11px;
  line-height: 1.2;
  text-transform: lowercase;
}

.force-mobile #pun-messages form#post {
  box-sizing: border-box;
  width: 100%;
  margin: 14px 0;
  padding: 0;
}

.force-mobile #pun-messages #post-form {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px !important;
  overflow: visible;
  border: var(--ks-border-default);
  border-radius: var(--ks-radius-md);
  background: var(--quote);
}

.force-mobile #pun-messages #post-form .fs-box,
.force-mobile #pun-messages #post-form .fs-box.hashelp,
.force-mobile #pun-messages #post-form .areafield,
.force-mobile #pun-messages #post-form .areafield span.input,
.force-mobile #pun-messages #post-form .resizable-textarea,
.force-mobile #pun-messages #post-form .resizable-textarea > span {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0;
  padding: 0 !important;
  overflow: visible;
}

.force-mobile #pun-messages #form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin: 0 0 10px;
  overflow: visible;
}

.force-mobile #pun-messages #form-buttons table,
.force-mobile #pun-messages #form-buttons tbody,
.force-mobile #pun-messages #form-buttons tr {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.force-mobile #pun-messages #form-buttons td {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
}

.force-mobile #pun-messages #form-buttons td:before {
  font-size: 13px;
}

.force-mobile #pun-messages #main-reply {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  min-height: 220px;
  margin: 0;
  padding: 12px !important;
  overflow: auto;
  resize: vertical;
  text-align: left;
}

.force-mobile #pun-messages #post-form .grippie {
  box-sizing: border-box;
  width: 100%;
}

.force-mobile #pun-messages #post-form > p:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin: 12px 0 0;
  padding: 0 !important;
}

.force-mobile #pun-messages #post-form > p:last-child > span {
  float: none !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.force-mobile #pun-messages #post-form > p:last-child .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  min-height: 34px;
  margin: 0;
  padding: 8px 14px;
}

.force-mobile #pun-messages #post-form > p:last-child .checkfield {
  justify-content: flex-start;
  color: var(--sec-text);
  font-size: 11px;
  line-height: 1.2;
}

.force-mobile #pun-messages #post-form > p:last-child .checkfield input {
  width: 18px;
  max-width: none;
  height: 18px;
  margin: 0;
  padding: 0;
}

:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  .post {
  border-color: var(--summer-card-border);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--summer-card-bg-soft) 76%, transparent),
    color-mix(in srgb, var(--summer-card-bg) 90%, transparent)
  );
  box-shadow: var(--summer-card-shadow);
}

:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  .post-box,
:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  #post-form {
  border-color: var(--summer-topic-border);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--summer-topic-paper-strong) 100%, transparent) 0,
    color-mix(in srgb, var(--summer-topic-paper) 94%, transparent) 42%,
    color-mix(in srgb, var(--summer-topic-paper-strong) 86%, transparent) 100%
  );
  box-shadow: var(--summer-topic-shadow), var(--summer-topic-glow);
}

:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  .post-links
  a {
  border-color: var(--summer-topic-border-soft);
  background: var(--summer-topic-panel);
  box-shadow: var(--summer-card-shadow);
}

:is(
    :root[data-style='summer'].force-mobile,
    :root[data-style='summer'] body.force-mobile
  )
  #pun-messages
  .post-links
  a:hover {
  border-color: var(--accent2);
  background: var(--accent);
  color: var(--tab-text);
}