:root,
[data-theme=light] {
  --tg-brand-50: #e8f5fc;
  --tg-brand-100: #d2ebfa;
  --tg-brand-200: #a8d9f4;
  --tg-brand-300: #7dc8ee;
  --tg-brand-400: #52b6e7;
  --tg-brand-500: #2aabee;
  --tg-brand-600: #229ed9;
  --tg-brand-700: #1c84b5;
  --tg-brand-800: #166a91;
  --tg-brand-900: #11506d;
  --tg-brand-gradient-start: #2aabee;
  --tg-brand-gradient-end: #229ed9;
  --tg-semantic-success: #31b545;
  --tg-semantic-warning: #f4b400;
  --tg-semantic-danger: #e53935;
  --tg-semantic-info: #229ed9;
  --tg-bg: #ffffff;
  --tg-bg-brand: #e8f5fc;
  --tg-bg-opacity: rgba(255, 255, 255, 0.8);
  --tg-surface: #f5f8fa;
  --tg-surface-muted: #eef3f6;
  --tg-text-primary: #0e1621;
  --tg-text-secondary: #9a9a9a;
  --tg-text-muted: #c4c4c4;
  --tg-border: #f0f3f6;
  --tg-overlay: rgba(14, 22, 33, 0.6);
  --tg-overlay-button: rgba(0, 0, 0, 0.1);
  --tg-overlay-text: #f5f8fa;
  color-scheme: light;
  --header-height: 57px;
  --backdrop-filter: blur(25px);
}

[data-theme=dark] {
  --tg-bg: #111111;
  --tg-bg-brand: #04293a;
  --tg-bg-opacity: rgba(17, 17, 17, 0.8);
  --tg-surface: #242f3d;
  --tg-surface-muted: #1f2935;
  --tg-text-primary: #f5f8fa;
  --tg-text-secondary: #c6c6c6;
  --tg-text-muted: #9c9c9c;
  --tg-border: #282b2e;
  --tg-overlay: rgba(0, 0, 0, 0.6);
  --tg-overlay-button: rgba(255, 255, 255, 0.1);
  --tg-overlay-text: #f5f8fa;
  color-scheme: dark;
}

*,
*::before,
*::after {
  font-family: "SF Pro Text", "PingFang SC", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--tg-border) transparent;
  font-weight: normal;
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  outline: none;
}

html {
  font-size: 100%;
  width: 100%;
  height: 100%;
  scrollbar-gutter: stable;
}

body {
  color: var(--tg-text-primary);
  background: var(--tg-bg);
}

main,
footer > div {
  width: min(60rem, 100%);
  margin-inline: auto;
}

header > div {
  width: min(72rem, 100%);
  margin-inline: auto;
}

.action {
  display: inline-flex;
  align-items: center;
  min-width: 1rem;
  --action-icon: none;
}
.action::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask-image: var(--action-icon);
  mask-image: var(--action-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
}
.action.like {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.6445 21.7188C23.6445 21.25 23.4336 20.875 23.1875 20.3828L15.8867 5.33594C15.3945 4.32812 14.9375 4.01172 14.3164 4.01172C13.6953 4.01172 13.25 4.32812 12.7578 5.33594L5.44531 20.3828C5.21094 20.8867 5 21.2617 5 21.7305C5 22.5977 5.65625 23.1367 6.67578 23.1367L21.957 23.125C22.9766 23.125 23.6445 22.5859 23.6445 21.7188Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.dislike {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.6445 5.42969C23.6445 4.5625 22.9766 4.02344 21.957 4.02344L6.67578 4.01172C5.65625 4.01172 5 4.55078 5 5.41797C5 5.88672 5.21094 6.27344 5.44531 6.76562L12.7578 21.8242C13.25 22.8203 13.6953 23.1367 14.3164 23.1367C14.9375 23.1367 15.3945 22.8203 15.8867 21.8242L23.1875 6.76562C23.4336 6.28516 23.6445 5.89844 23.6445 5.42969Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.replies {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4492 24.4922C13.2461 24.4922 13.8203 23.9062 13.8203 23.1211V18.6445H14.1602C18.707 18.6445 21.5664 19.793 23.6172 23.625C24.0273 24.375 24.5664 24.4922 25.0586 24.4922C25.6797 24.4922 26.2656 23.9297 26.2656 22.9219C26.2656 14.2617 22.5977 8.85938 14.1602 8.85938H13.8203V4.42969C13.8203 3.64453 13.2461 3 12.4258 3C11.8516 3 11.4648 3.24609 10.8438 3.83203L1.59766 12.4805C1.14062 12.9141 1 13.3477 1 13.7461C1 14.1328 1.15234 14.5781 1.59766 15L10.8438 23.7305C11.4062 24.2578 11.875 24.4922 12.4492 24.4922Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.subscribe {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.76953 21.9688H23.3438C24.4453 21.9688 25.1133 21.4062 25.1133 20.5508C25.1133 19.3789 23.918 18.3242 22.9102 17.2812C22.1367 16.4727 21.9258 14.8086 21.832 13.4609C21.75 8.96094 20.5547 5.86719 17.4375 4.74219C16.9922 3.20703 15.7852 2 14.0508 2C12.3281 2 11.1094 3.20703 10.6758 4.74219C7.55859 5.86719 6.36328 8.96094 6.28125 13.4609C6.1875 14.8086 5.97656 16.4727 5.20312 17.2812C4.18359 18.3242 3 19.3789 3 20.5508C3 21.4062 3.65625 21.9688 4.76953 21.9688ZM14.0508 26.668C16.043 26.668 17.4961 25.2148 17.6484 23.5742H10.4648C10.6172 25.2148 12.0703 26.668 14.0508 26.668Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.unsubscribe {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.76953 21.9688H23.3438C24.4453 21.9688 25.1133 21.4062 25.1133 20.5508C25.1133 19.3789 23.918 18.3242 22.9102 17.2812C22.1367 16.4727 21.9258 14.8086 21.832 13.4609C21.75 8.96094 20.5547 5.86719 17.4375 4.74219C16.9922 3.20703 15.7852 2 14.0508 2C12.3281 2 11.1094 3.20703 10.6758 4.74219C7.55859 5.86719 6.36328 8.96094 6.28125 13.4609C6.1875 14.8086 5.97656 16.4727 5.20312 17.2812C4.18359 18.3242 3 19.3789 3 20.5508C3 21.4062 3.65625 21.9688 4.76953 21.9688ZM14.0508 26.668C16.043 26.668 17.4961 25.2148 17.6484 23.5742H10.4648C10.6172 25.2148 12.0703 26.668 14.0508 26.668Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.notice {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.76953 21.9688H23.3438C24.4453 21.9688 25.1133 21.4062 25.1133 20.5508C25.1133 19.3789 23.918 18.3242 22.9102 17.2812C22.1367 16.4727 21.9258 14.8086 21.832 13.4609C21.75 8.96094 20.5547 5.86719 17.4375 4.74219C16.9922 3.20703 15.7852 2 14.0508 2C12.3281 2 11.1094 3.20703 10.6758 4.74219C7.55859 5.86719 6.36328 8.96094 6.28125 13.4609C6.1875 14.8086 5.97656 16.4727 5.20312 17.2812C4.18359 18.3242 3 19.3789 3 20.5508C3 21.4062 3.65625 21.9688 4.76953 21.9688ZM14.0508 26.668C16.043 26.668 17.4961 25.2148 17.6484 23.5742H10.4648C10.6172 25.2148 12.0703 26.668 14.0508 26.668Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.back {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.30324 23.2915C5.71339 23.69 6.39308 23.69 6.79152 23.2915L14.2915 15.7915L21.7915 23.2915C22.19 23.69 22.8814 23.7017 23.2798 23.2915C23.6782 22.8814 23.6782 22.2134 23.2798 21.815L15.7798 14.3032L23.2798 6.80324C23.6782 6.4048 23.69 5.72511 23.2798 5.32668C22.8696 4.91652 22.19 4.91652 21.7915 5.32668L14.2915 12.8267L6.79152 5.32668C6.39308 4.91652 5.70168 4.9048 5.30324 5.32668C4.9048 5.73683 4.9048 6.4048 5.30324 6.80324L12.8032 14.3032L5.30324 21.815C4.9048 22.2134 4.89308 22.8931 5.30324 23.2915Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.close {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.30324 23.2915C5.71339 23.69 6.39308 23.69 6.79152 23.2915L14.2915 15.7915L21.7915 23.2915C22.19 23.69 22.8814 23.7017 23.2798 23.2915C23.6782 22.8814 23.6782 22.2134 23.2798 21.815L15.7798 14.3032L23.2798 6.80324C23.6782 6.4048 23.69 5.72511 23.2798 5.32668C22.8696 4.91652 22.19 4.91652 21.7915 5.32668L14.2915 12.8267L6.79152 5.32668C6.39308 4.91652 5.70168 4.9048 5.30324 5.32668C4.9048 5.73683 4.9048 6.4048 5.30324 6.80324L12.8032 14.3032L5.30324 21.815C4.9048 22.2134 4.89308 22.8931 5.30324 23.2915Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.left {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 14.1719C8 14.4648 8.10547 14.7227 8.32812 14.9453L17.6211 24.0273C17.8203 24.2383 18.0781 24.3438 18.3828 24.3438C18.9922 24.3438 19.4609 23.8867 19.4609 23.2773C19.4609 22.9727 19.332 22.7148 19.1445 22.5156L10.6133 14.1719L19.1445 5.82812C19.332 5.62891 19.4609 5.35938 19.4609 5.06641C19.4609 4.45703 18.9922 4 18.3828 4C18.0781 4 17.8203 4.10547 17.6211 4.30469L8.32812 13.3984C8.10547 13.6094 8 13.8789 8 14.1719Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.right {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4609 14.1719C19.4609 13.8789 19.3438 13.6094 19.1211 13.3984L9.83984 4.30469C9.62891 4.10547 9.37109 4 9.06641 4C8.46875 4 8 4.45703 8 5.06641C8 5.35938 8.11719 5.62891 8.30469 5.82812L16.8359 14.1719L8.30469 22.5156C8.11719 22.7148 8 22.9727 8 23.2773C8 23.8867 8.46875 24.3438 9.06641 24.3438C9.37109 24.3438 9.62891 24.2383 9.83984 24.0273L19.1211 14.9453C19.3438 14.7227 19.4609 14.4648 19.4609 14.1719Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.link {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5728 8.62451L13.0142 10.2065C14.561 10.3354 15.5688 10.7925 16.3306 11.5542C18.3813 13.605 18.3696 16.5112 16.3423 18.5386L12.5103 22.3589C10.4712 24.398 7.58838 24.4097 5.5376 22.3706C3.48682 20.3081 3.49854 17.4253 5.5376 15.3862L7.83447 13.0894C7.50635 12.3511 7.42432 11.4722 7.55322 10.7105L4.10791 14.144C1.30713 16.9565 1.28369 20.9409 4.11963 23.7769C6.96729 26.6245 10.9517 26.6011 13.7524 23.8003L17.7603 19.7808C20.5728 16.9683 20.5962 12.9839 17.7485 10.148C17.0103 9.40967 16.0728 8.88233 14.5728 8.62451ZM14.2798 18.2808L15.8384 16.6987C14.2915 16.5815 13.2837 16.1128 12.522 15.3511C10.4712 13.3003 10.4829 10.3941 12.5103 8.3667L16.3306 4.54639C18.3813 2.50733 21.2642 2.49561 23.3149 4.54639C25.3657 6.59717 25.3423 9.4917 23.3149 11.519L21.0181 13.8159C21.3462 14.5659 21.4165 15.4331 21.2993 16.1948L24.7446 12.7612C27.5454 9.94873 27.5688 5.97608 24.7329 3.12842C21.8853 0.280765 17.9009 0.304201 15.0884 3.1167L11.0923 7.12451C8.27979 9.93701 8.25635 13.9214 11.104 16.7573C11.8423 17.4956 12.7798 18.023 14.2798 18.2808Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.add {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 13.668C4 14.2422 4.48047 14.7109 5.04297 14.7109H12.625V22.293C12.625 22.8555 13.0938 23.3359 13.668 23.3359C14.2422 23.3359 14.7227 22.8555 14.7227 22.293V14.7109H22.293C22.8555 14.7109 23.3359 14.2422 23.3359 13.668C23.3359 13.0938 22.8555 12.6133 22.293 12.6133H14.7227V5.04297C14.7227 4.48047 14.2422 4 13.668 4C13.0938 4 12.625 4.48047 12.625 5.04297V12.6133H5.04297C4.48047 12.6133 4 13.0938 4 13.668Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.person {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.00391 24.0703H21.7188C22.9727 24.0703 23.7227 23.4844 23.7227 22.5117C23.7227 19.4883 19.9375 15.3164 13.8555 15.3164C7.78516 15.3164 4 19.4883 4 22.5117C4 23.4844 4.75 24.0703 6.00391 24.0703ZM13.8672 13.2188C16.375 13.2188 18.5547 10.9688 18.5547 8.03906C18.5547 5.14453 16.375 3 13.8672 3C11.3594 3 9.17969 5.19141 9.17969 8.0625C9.17969 10.9688 11.3477 13.2188 13.8672 13.2188Z" fill="black" fill-opacity="0.85"/></svg>');
}
.action.menu {
  --action-icon: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="2.99592" y1="7" x2="24.9959" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/><line x1="3" y1="14" x2="25" y2="14" stroke="black" stroke-width="2" stroke-linecap="round"/><line x1="3" y1="21" x2="25" y2="21" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
}

header {
  padding: 0 1rem;
  background: var(--tg-bg-opacity);
  backdrop-filter: var(--backdrop-filter);
  border-bottom: 1px solid var(--tg-border);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
header .header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  padding: 0.75rem 0;
}
header .header-logo {
  min-width: 5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
header .header-logo img {
  height: 2rem;
}
header .header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
header .header-nav a {
  white-space: nowrap;
}
header .header-login {
  min-width: 5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}
header .header-login img {
  width: 1rem;
  height: 1rem;
  object-fit: cover;
}

main {
  display: grid;
}

a {
  color: var(--tg-text-primary);
}

label {
  font-size: 0.875rem;
  color: var(--tg-text-secondary);
}

input,
select,
textarea,
.md-editor {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--tg-text-primary);
  border: none;
  margin: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  background: transparent;
}

input {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--tg-border);
}
input:focus {
  border-color: var(--tg-brand-500);
}
input[type=datetime-local] {
  height: 35px;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  background: none;
  outline: none;
  color: var(--tg-brand-500);
}
button.delete {
  color: #e53935;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1rem;
}

img,
video {
  display: block;
}

b {
  font-weight: 500;
}

.hidden {
  display: none;
}

[hidden] {
  display: none !important;
}

.nav-link-active {
  color: var(--tg-brand-500);
}

.mono {
  font-family: "SF Mono", "SF Mono Regular", "SF Mono Medium", "SF Mono SemiBold", "SF Mono Bold", "SF Mono Heavy", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

footer {
  margin-top: 1rem;
  padding: 1rem 0 5rem 0;
  border-top: 1px solid var(--tg-border);
}
footer .footer {
  display: flex;
  flex-direction: column;
}
footer .footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.community {
  display: flex;
  align-items: flex-start;
}
.community-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.title {
  margin-top: var(--header-height);
  margin-bottom: 1rem;
}
.title > div {
  width: min(64rem, 100%);
  margin-inline: auto;
  border-bottom: 1px solid var(--tg-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}
.title > div a {
  font-size: 1.5rem;
}
.title-side-toggle {
  display: none;
  color: var(--tg-text-primary);
  margin-left: auto;
}

.login-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
}

.login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: var(--tg-surface);
  padding: 1rem;
}
.login-panel h2 {
  font-size: 1.125rem;
}
.login-panel > p {
  font-size: 0.875rem;
  text-align: center;
}
.login-panel button {
  color: var(--tg-brand-500);
  cursor: pointer;
  transition: color 0.18s ease-in-out, opacity 0.18s ease-in-out;
  font-size: 0.875rem;
}
.login-panel button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-panel label {
  width: 100%;
  max-width: 20rem;
  text-align: left;
  color: var(--tg-text-secondary);
  font-size: 0.875rem;
}
.login-panel-qr img {
  display: block;
  width: min(12rem, 100%);
  aspect-ratio: 1/1;
  object-fit: contain;
}
.login-panel-qr-status {
  font-size: 0.875rem;
  color: var(--tg-text-secondary);
}
.login-panel-qr-status.is-success {
  color: var(--tg-semantic-success);
}
.login-panel-qr-status.is-error {
  color: var(--tg-semantic-danger);
}
.login-panel-code > input {
  width: 100%;
  max-width: 20rem;
  border-bottom: 1px solid var(--tg-text-muted);
  padding: 0.5rem 0;
}
.login-panel-code > input:focus {
  border-color: var(--tg-brand-500);
}
.login-panel-code .login-code-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.login-panel-code .login-code-panel > p {
  font-size: 0.75rem;
}
.login-panel-code .login-code-grid {
  width: 100%;
  max-width: 20rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}
.login-panel-code .login-code-grid .login-code-box {
  width: 100%;
  text-align: center;
  font-size: 1.125rem;
  border-bottom: 1px solid var(--tg-text-muted);
  padding: 0.5rem 0;
}
.login-panel-code .login-code-grid .login-code-box:focus {
  border-color: var(--tg-brand-500);
}
.login-panel-code .login-error {
  color: var(--tg-semantic-danger);
}
.login-panel-code .login-message {
  color: var(--tg-semantic-success);
}
.login-panel-code .login-hint {
  color: var(--tg-text-secondary);
}

.login-divider {
  width: 1px;
  height: 100%;
}

.separater.horizontal {
  width: 100%;
  height: 1px;
  background: var(--tg-border);
  margin: 2rem 0;
}
.separater.vertical {
  width: 1px;
  height: 100%;
  background: var(--tg-border);
  margin: 0 2rem;
}

.side {
  position: sticky;
  width: 12rem;
  top: calc(var(--header-height) + 1rem);
  align-self: flex-start;
  height: fit-content;
  display: flex;
  flex-direction: column;
}
.side h3 {
  color: var(--tg-text-secondary);
  margin-top: 1rem;
  border-top: 1px solid var(--tg-border);
  padding: 0.5rem 0;
}
.side-mine {
  display: flex;
  flex-direction: column;
}
.side-mine > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.side-mine > div > a {
  display: flex;
  align-items: center;
}
.side-mine > div > a > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.side-mine > div > a > span.count {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.side-status {
  display: flex;
  flex-direction: column;
}
.side-status > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.side-status > div > a {
  display: flex;
  justify-content: space-between;
}
.side-status > div > a > span:last-child {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.side-tags {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.side-tags > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.side-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--tg-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease-in-out;
  z-index: 19;
}
.side-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.admin-main {
  display: flex;
  align-items: flex-start;
}

.admin-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-side > a {
  display: block;
}
.admin-side-sub summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--tg-text-primary);
  list-style: none;
}
.admin-side-sub summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--tg-text-primary);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4609 14.1719C19.4609 13.8789 19.3438 13.6094 19.1211 13.3984L9.83984 4.30469C9.62891 4.10547 9.37109 4 9.06641 4C8.46875 4 8 4.45703 8 5.06641C8 5.35938 8.11719 5.62891 8.30469 5.82812L16.8359 14.1719L8.30469 22.5156C8.11719 22.7148 8 22.9727 8 23.2773C8 23.8867 8.46875 24.3438 9.06641 24.3438C9.37109 24.3438 9.62891 24.2383 9.83984 24.0273L19.1211 14.9453C19.3438 14.7227 19.4609 14.4648 19.4609 14.1719Z" fill="black" fill-opacity="0.85"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4609 14.1719C19.4609 13.8789 19.3438 13.6094 19.1211 13.3984L9.83984 4.30469C9.62891 4.10547 9.37109 4 9.06641 4C8.46875 4 8 4.45703 8 5.06641C8 5.35938 8.11719 5.62891 8.30469 5.82812L16.8359 14.1719L8.30469 22.5156C8.11719 22.7148 8 22.9727 8 23.2773C8 23.8867 8.46875 24.3438 9.06641 24.3438C9.37109 24.3438 9.62891 24.2383 9.83984 24.0273L19.1211 14.9453C19.3438 14.7227 19.4609 14.4648 19.4609 14.1719Z" fill="black" fill-opacity="0.85"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  transition: transform 0.2s ease-in-out;
}
.admin-side-sub summary::-webkit-details-marker {
  display: none;
}
.admin-side-sub[open] summary::after {
  transform: rotate(90deg);
}
.admin-side-sub > div {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding-left: 0.75rem;
}

.admin-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.admin-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-block h2 {
  font-size: 1.25rem;
}

.admin-search {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.admin-search input {
  flex: 1;
}

.admin-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-form.admin-inline-form {
  flex-direction: row;
}
.admin-form.admin-inline-form input {
  flex: 1;
}
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.admin-form button {
  align-self: flex-start;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.admin-list-header span {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.admin-list-header a {
  color: var(--tg-brand-500);
}

.admin-main,
.admin-block,
.admin-table-wrap {
  min-width: 0;
}

.admin-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.admin-table thead {
  border-top: 1px solid var(--tg-border);
}
.admin-table tr {
  border-bottom: 1px solid var(--tg-border);
}
.admin-table th, .admin-table td {
  text-align: left;
  padding: 0.5rem;
  white-space: nowrap;
}
.admin-table th:first-child, .admin-table td:first-child {
  padding-left: 0;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--tg-bg);
}
.admin-table th:last-child, .admin-table td:last-child {
  padding-right: 0;
  text-align: right;
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--tg-bg);
}
.admin-table th {
  color: var(--tg-text-secondary);
  font-weight: normal;
  white-space: nowrap;
}

.admin-actions > a {
  color: var(--tg-brand-500);
}
.admin-actions form {
  display: inline-block;
}

.admin-pager {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}

.post-card {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.post-card:not(:last-child) {
  border-bottom: 1px solid var(--tg-border);
}
.post-card-link {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.post-card-link-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-card-link-content h3 {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--tg-text-primary);
  font-size: 1.125rem;
}
.post-card-link-content h3.updated::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--tg-brand-500);
  padding: 0.125rem 0.25rem;
}
.post-card-link-content p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.post-card-link-attachments {
  display: flex;
  gap: 0.5rem;
  position: relative;
}
.post-card-link-attachments > span {
  position: absolute;
  top: 0;
  right: 0;
  width: 3.25rem;
  height: 100%;
  background: var(--tg-overlay);
  color: var(--tg-overlay-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card-link-attachments img {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: cover;
}
.post-card-link-attachments-video {
  position: relative;
  overflow: hidden;
  background: var(--tg-surface-muted);
}
.post-card-link-attachments-video > span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tg-overlay-button);
}
.post-card-link-attachments-audio {
  position: relative;
  overflow: hidden;
}
.post-card-meta {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.spacer {
  flex: 1;
}

.tag {
  display: inline-block;
  background: var(--tg-surface-muted);
  padding: 0 0.5rem;
}

.status {
  display: flex;
  align-items: center;
}
.status::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  margin-right: 0.5rem;
}
.status.all::before {
  background: var(--tg-surface-muted);
}
.status.open::before {
  background: var(--tg-semantic-success);
}
.status.closed::before {
  background: var(--tg-semantic-danger);
}
.status.fixing::before {
  background: var(--tg-semantic-warning);
}
.status.fixed::before {
  background: var(--tg-semantic-info);
}

.search {
  position: sticky;
  top: var(--header-height);
  background: var(--tg-bg);
  z-index: 10;
}
.search-form-input {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  position: relative;
}
.search-form-input::before {
  content: "";
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background-color: var(--tg-text-secondary);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 11.3516C3 16.5078 7.19531 20.7031 12.3516 20.7031C14.3906 20.7031 16.2539 20.0469 17.7891 18.9453L23.5547 24.7227C23.8242 24.9922 24.1758 25.1211 24.5508 25.1211C25.3477 25.1211 25.8984 24.5234 25.8984 23.7383C25.8984 23.3633 25.7578 23.0234 25.5117 22.7773L19.7812 17.0117C20.9883 15.4414 21.7031 13.4844 21.7031 11.3516C21.7031 6.19531 17.5078 2 12.3516 2C7.19531 2 3 6.19531 3 11.3516ZM5.00391 11.3516C5.00391 7.29688 8.29688 4.00391 12.3516 4.00391C16.4062 4.00391 19.6992 7.29688 19.6992 11.3516C19.6992 15.4062 16.4062 18.6992 12.3516 18.6992C8.29688 18.6992 5.00391 15.4062 5.00391 11.3516Z" fill="black" fill-opacity="0.85"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 11.3516C3 16.5078 7.19531 20.7031 12.3516 20.7031C14.3906 20.7031 16.2539 20.0469 17.7891 18.9453L23.5547 24.7227C23.8242 24.9922 24.1758 25.1211 24.5508 25.1211C25.3477 25.1211 25.8984 24.5234 25.8984 23.7383C25.8984 23.3633 25.7578 23.0234 25.5117 22.7773L19.7812 17.0117C20.9883 15.4414 21.7031 13.4844 21.7031 11.3516C21.7031 6.19531 17.5078 2 12.3516 2C7.19531 2 3 6.19531 3 11.3516ZM5.00391 11.3516C5.00391 7.29688 8.29688 4.00391 12.3516 4.00391C16.4062 4.00391 19.6992 7.29688 19.6992 11.3516C19.6992 15.4062 16.4062 18.6992 12.3516 18.6992C8.29688 18.6992 5.00391 15.4062 5.00391 11.3516Z" fill="black" fill-opacity="0.85"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  position: absolute;
  left: -1.5rem;
}
.search-form-input-tags {
  display: flex;
  gap: 0.25rem;
}
.search-form-input-text {
  flex: 1;
  display: flex;
}
.search-form-input-text input {
  flex: 1;
  border-bottom: none;
  padding: 0;
}
.search-form-input-text button {
  color: var(--tg-brand-500);
}
.search-filters {
  display: none !important;
  flex-direction: column;
}
.sort {
  display: flex;
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
  border-top: 1px solid var(--tg-border);
  border-bottom: 1px solid var(--tg-border);
  padding: 0.5rem 0;
}
.sort-count {
  flex: 1;
}
.sort-form-options > button {
  color: var(--tg-text-secondary);
}
.sort-form-options > button[aria-pressed=true] {
  color: var(--tg-brand-500);
}

.create-post {
  padding: 1rem;
  display: flex;
  justify-content: center;
}
.create-post button {
  color: var(--tg-brand-500);
}

.post {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.post-title {
  display: flex;
  align-items: center;
}
.post-title h1 {
  flex: 1;
  font-size: 1.5rem;
}
.post-meta {
  display: flex;
  gap: 0.5rem;
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.post-tags {
  display: flex;
  gap: 0.5rem;
}
.md-editor {
  min-height: 1rem;
  border-bottom: 1px solid var(--tg-border);
  padding: 0.25rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.md-editor:focus {
  border-color: var(--tg-brand-500);
}
.md-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--tg-text-muted);
  pointer-events: none;
}

.markdown-content {
  word-break: break-word;
}
.markdown-content > :first-child {
  margin-top: 0;
}
.markdown-content > :last-child {
  margin-bottom: 0;
}
.markdown-content blockquote {
  margin: 0 0 0.5rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--tg-brand-500);
  color: var(--tg-text-secondary);
}
.markdown-content p {
  margin: 0 0 0.5rem;
}
.markdown-content ul, .markdown-content ol {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}
.markdown-content pre {
  overflow: auto;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: var(--tg-surface-muted);
}
.markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.interactive {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  gap: 1rem;
  font-size: 0.8125rem;
  color: var(--tg-text-secondary);
}
.interactive > form {
  display: flex;
  align-items: center;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.load-more > form {
  display: flex;
}
.load-more button {
  color: var(--tg-brand-500);
  cursor: pointer;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 1px solid var(--tg-border);
}
.comments-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}
.comments-title span {
  color: var(--tg-text-secondary);
}
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.comments-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.comments-form-reply {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 2px solid var(--tg-brand-500);
}
.comments-form-reply.hidden {
  display: none;
}
.comments-form-reply-content {
  flex: 1;
  padding-left: 0.5rem;
}
.comments-form-reply-content span {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.comments-form .md-editor {
  display: block;
}
.comments-form-attachments.hidden {
  display: none;
}
.comments-form-actions {
  display: flex;
  justify-content: space-between;
}
.comments-form-actions > input {
  display: none !important;
}
.comments-form-actions > button, .comments-form-actions > label {
  color: var(--tg-brand-500);
}

.comment {
  display: flex;
  gap: 0.5rem;
}
.comment.is-paging-hidden {
  display: none;
}
.comment-avatar {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: cover;
  border-radius: 50%;
}
.comment-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.comment-content-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.comment-content-info-time {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.comment-content-info-button {
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--tg-text-secondary);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4492 24.4922C13.2461 24.4922 13.8203 23.9062 13.8203 23.1211V18.6445H14.1602C18.707 18.6445 21.5664 19.793 23.6172 23.625C24.0273 24.375 24.5664 24.4922 25.0586 24.4922C25.6797 24.4922 26.2656 23.9297 26.2656 22.9219C26.2656 14.2617 22.5977 8.85938 14.1602 8.85938H13.8203V4.42969C13.8203 3.64453 13.2461 3 12.4258 3C11.8516 3 11.4648 3.24609 10.8438 3.83203L1.59766 12.4805C1.14062 12.9141 1 13.3477 1 13.7461C1 14.1328 1.15234 14.5781 1.59766 15L10.8438 23.7305C11.4062 24.2578 11.875 24.4922 12.4492 24.4922Z" fill="black" fill-opacity="0.85"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4492 24.4922C13.2461 24.4922 13.8203 23.9062 13.8203 23.1211V18.6445H14.1602C18.707 18.6445 21.5664 19.793 23.6172 23.625C24.0273 24.375 24.5664 24.4922 25.0586 24.4922C25.6797 24.4922 26.2656 23.9297 26.2656 22.9219C26.2656 14.2617 22.5977 8.85938 14.1602 8.85938H13.8203V4.42969C13.8203 3.64453 13.2461 3 12.4258 3C11.8516 3 11.4648 3.24609 10.8438 3.83203L1.59766 12.4805C1.14062 12.9141 1 13.3477 1 13.7461C1 14.1328 1.15234 14.5781 1.59766 15L10.8438 23.7305C11.4062 24.2578 11.875 24.4922 12.4492 24.4922Z" fill="black" fill-opacity="0.85"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
}
.comment-content-reply {
  color: var(--tg-text-secondary);
  border-left: 2px solid var(--tg-border);
  padding-left: 0.5rem;
}
.comment-content-status {
  background: var(--tg-brand-500);
  text-align: center;
}

.attachments {
  display: flex;
  gap: 0.5rem;
}
.attachments img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}
.attachments-video {
  background: var(--tg-surface-muted);
  position: relative;
}
.attachments-video > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.attachments-file {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}

.attachments-preview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.preview img {
  width: 4rem;
  height: 4rem;
  object-fit: cover;
}
.preview-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.preview-meta-name {
  color: var(--tg-text-primary);
}
.preview-meta-size {
  color: var(--tg-text-secondary);
}
.preview-remove {
  display: flex;
}

.media-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 20;
  background: var(--tg-overlay);
}
.media-viewer.hidden {
  display: none !important;
}
.media-viewer-content {
  height: 80%;
}
.media-viewer-content img {
  height: 100%;
  object-fit: contain;
}
.media-viewer-content video {
  height: 100%;
}
.media-viewer-controls {
  position: fixed;
  bottom: 1.25rem;
  display: flex;
  justify-content: center;
  background: var(--tg-overlay-button);
  color: var(--tg-overlay-text);
}
.media-viewer-controls .action {
  color: var(--tg-overlay-text);
}
.media-viewer-controls > div {
  padding: 0 1rem;
}

#create-post-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 0;
  z-index: 20;
  background: var(--tg-overlay);
}
#create-post-modal.hidden {
  display: none !important;
}
#create-post-modal > div {
  width: min(56rem, 100%);
  display: grid;
  gap: 1rem;
  padding: 2rem;
  background: var(--tg-surface);
}

.creater {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.creater-title {
  font-size: 1.5rem;
}
.creater-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.creater-form-actions {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
}
.creater-form-actions > button {
  color: var(--tg-brand-500);
}

.wizard-step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wizard-step.hidden {
  display: none !important;
}
.wizard-step > p {
  color: var(--tg-text-secondary);
}
.wizard-step-1-tags {
  display: flex;
  gap: 0.25rem;
}
.wizard-step-1-tags label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wizard-step-1-tags label input {
  display: none !important;
}
.wizard-step-1-tags label .action {
  color: var(--tg-brand-500);
}
.wizard-step-2 > input {
  border-bottom: 1px solid var(--tg-border);
  padding: 0.25rem 0;
}
.wizard-step-2 > input:focus {
  border-color: var(--tg-brand-500);
}
.wizard-step-4 {
  justify-content: flex-start;
}
.wizard-step-4-input {
  display: flex;
  justify-content: flex-start;
}
.wizard-step-4-input div {
  width: 4rem;
  height: 4rem;
  border: 1px solid var(--tg-border);
}
.wizard-step-4-input input {
  display: none !important;
}
.wizard-step-4-input label {
  display: block;
  width: 4rem;
  height: 4rem;
  background-color: var(--tg-border);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 13.668C4 14.2422 4.48047 14.7109 5.04297 14.7109H12.625V22.293C12.625 22.8555 13.0938 23.3359 13.668 23.3359C14.2422 23.3359 14.7227 22.8555 14.7227 22.293V14.7109H22.293C22.8555 14.7109 23.3359 14.2422 23.3359 13.668C23.3359 13.0938 22.8555 12.6133 22.293 12.6133H14.7227V5.04297C14.7227 4.48047 14.2422 4 13.668 4C13.0938 4 12.625 4.48047 12.625 5.04297V12.6133H5.04297C4.48047 12.6133 4 13.0938 4 13.668Z" fill="black" fill-opacity="0.85"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 13.668C4 14.2422 4.48047 14.7109 5.04297 14.7109H12.625V22.293C12.625 22.8555 13.0938 23.3359 13.668 23.3359C14.2422 23.3359 14.7227 22.8555 14.7227 22.293V14.7109H22.293C22.8555 14.7109 23.3359 14.2422 23.3359 13.668C23.3359 13.0938 22.8555 12.6133 22.293 12.6133H14.7227V5.04297C14.7227 4.48047 14.2422 4 13.668 4C13.0938 4 12.625 4.48047 12.625 5.04297V12.6133H5.04297C4.48047 12.6133 4 13.0938 4 13.668Z" fill="black" fill-opacity="0.85"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 2rem;
  mask-size: 2rem;
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 0;
}
.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--tg-border);
  padding-bottom: 0.5rem;
}
.home-section-header h2 {
  font-size: 1.25rem;
}
.home-section-header > a {
  color: var(--tg-brand-500);
}

.home-hero {
  width: 100%;
  background: linear-gradient(135deg, var(--tg-bg-brand), var(--tg-surface));
}
.home-hero-content {
  width: min(60rem, 100%);
  margin-inline: auto;
  display: flex;
  align-items: center;
  border-radius: 1rem;
}
.home-hero-content-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.home-hero-content-copy > p:first-child {
  color: var(--tg-brand-700);
}
.home-hero-content-copy h1 {
  font-size: 2rem;
  line-height: 1.25;
}
.home-hero-content-copy > p:not(:first-child) {
  color: var(--tg-text-secondary);
}
.home-hero-content-copy-actions {
  flex: 1.5;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.25rem;
}
.home-hero-content-copy-actions > a:first-child {
  color: #fff;
  background: var(--tg-brand-500);
  padding: 0.375rem 0.875rem;
}
.home-hero-content-copy-actions > a:last-child {
  color: var(--tg-brand-700);
}
.home-hero-content-product {
  display: flex;
  justify-content: center;
}
.home-hero-content-product > img {
  width: 100%;
  max-width: 40rem;
  height: auto;
}

.home-news {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.home-news-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  border-bottom: 1px solid var(--tg-border);
  padding: 1rem 0;
}
.home-news-item > p {
  color: var(--tg-text-secondary);
  font-size: 0.8125rem;
}
.home-news-item > h3 {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 8rem;
}
.home-downloads.desktop {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.home-download-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.home-download-item > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  padding: 0 2rem;
}
.home-download-item > h3 {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.home-download-item > h3 img {
  height: 1rem;
}

.home-downloads.desktop {
  padding: 0 6rem;
}
.home-downloads.desktop .home-download-item > img {
  padding: 0 2rem;
}

.home-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-feature-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.home-feature-item > .home-feature-animated {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.home-feature-item > .home-feature-animated > div {
  padding-top: 56.25%;
}
.home-feature-item > .home-feature-animated img {
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0 auto;
}
.home-feature-item > .home-feature-animated canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-feature-item > .home-feature-animated img {
  object-fit: cover;
}
.home-feature-item > .home-feature-animated canvas {
  object-fit: contain;
}
.home-feature-item > h3 {
  font-size: 1rem;
  text-align: center;
}
.home-feature-item > p {
  color: var(--tg-text-secondary);
  font-size: 0.875rem;
  text-align: center;
  padding: 0 1rem;
}

.about-main {
  display: flex;
  align-items: flex-start;
}

.about-side > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.about-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.about-detail > h2 {
  font-size: 1.25rem;
}

.faq-main {
  display: flex;
  align-items: flex-start;
}

.faq-side > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-faq,
.faq {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.home-faq > details,
.faq > details {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}
.home-faq > details:not(:last-child),
.faq > details:not(:last-child) {
  border-bottom: 1px solid var(--tg-border);
}
.home-faq > details summary,
.faq > details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1.125rem;
}
.home-faq > details summary::after,
.faq > details summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--tg-text-primary);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1836 20.4805C14.4766 20.4805 14.7695 20.3633 14.9688 20.1406L24.0391 10.8477C24.2383 10.6484 24.3555 10.3906 24.3555 10.0977C24.3555 9.48828 23.8984 9.01953 23.2891 9.01953C22.9961 9.01953 22.7266 9.13672 22.5273 9.32422L13.5508 18.5H14.8047L5.82812 9.32422C5.64062 9.13672 5.37109 9.01953 5.06641 9.01953C4.45703 9.01953 4 9.48828 4 10.0977C4 10.3906 4.11719 10.6484 4.31641 10.8594L13.3867 20.1406C13.6094 20.3633 13.8789 20.4805 14.1836 20.4805Z" fill="black" fill-opacity="0.85"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1836 20.4805C14.4766 20.4805 14.7695 20.3633 14.9688 20.1406L24.0391 10.8477C24.2383 10.6484 24.3555 10.3906 24.3555 10.0977C24.3555 9.48828 23.8984 9.01953 23.2891 9.01953C22.9961 9.01953 22.7266 9.13672 22.5273 9.32422L13.5508 18.5H14.8047L5.82812 9.32422C5.64062 9.13672 5.37109 9.01953 5.06641 9.01953C4.45703 9.01953 4 9.48828 4 10.0977C4 10.3906 4.11719 10.6484 4.31641 10.8594L13.3867 20.1406C13.6094 20.3633 13.8789 20.4805 14.1836 20.4805Z" fill="black" fill-opacity="0.85"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  transition: transform 0.2s ease-in-out;
}
.home-faq > details[open] summary::after,
.faq > details[open] summary::after {
  transform: rotate(180deg);
}
.home-faq > details p,
.faq > details p {
  padding: 0.5rem 0;
}

.download-main {
  display: flex;
  align-items: flex-start;
}

.download-side > details {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.download-side > details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--tg-text-primary);
  list-style: none;
}
.download-side > details summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: var(--tg-text-primary);
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4609 14.1719C19.4609 13.8789 19.3438 13.6094 19.1211 13.3984L9.83984 4.30469C9.62891 4.10547 9.37109 4 9.06641 4C8.46875 4 8 4.45703 8 5.06641C8 5.35938 8.11719 5.62891 8.30469 5.82812L16.8359 14.1719L8.30469 22.5156C8.11719 22.7148 8 22.9727 8 23.2773C8 23.8867 8.46875 24.3438 9.06641 24.3438C9.37109 24.3438 9.62891 24.2383 9.83984 24.0273L19.1211 14.9453C19.3438 14.7227 19.4609 14.4648 19.4609 14.1719Z" fill="black" fill-opacity="0.85"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.4609 14.1719C19.4609 13.8789 19.3438 13.6094 19.1211 13.3984L9.83984 4.30469C9.62891 4.10547 9.37109 4 9.06641 4C8.46875 4 8 4.45703 8 5.06641C8 5.35938 8.11719 5.62891 8.30469 5.82812L16.8359 14.1719L8.30469 22.5156C8.11719 22.7148 8 22.9727 8 23.2773C8 23.8867 8.46875 24.3438 9.06641 24.3438C9.37109 24.3438 9.62891 24.2383 9.83984 24.0273L19.1211 14.9453C19.3438 14.7227 19.4609 14.4648 19.4609 14.1719Z" fill="black" fill-opacity="0.85"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  transition: transform 0.2s ease-in-out;
}
.download-side > details summary::-webkit-details-marker {
  display: none;
}
.download-side > details[open] summary::after {
  transform: rotate(90deg);
}
.download-side > details > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.25rem 0 0.25rem 1.5rem;
  font-size: 0.875rem;
}
.download-side > details > div > a[aria-current=page] {
  color: var(--tg-brand-500);
}

.download {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.download > article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.download > article:not(:last-child) {
  border-bottom: 1px solid var(--tg-border);
}
.download > article > a {
  color: var(--tg-brand-500);
}
.download-description {
  margin-top: 0.75rem;
}

.news-main {
  display: flex;
  align-items: flex-start;
}

.news-side > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.news {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.news-item {
  flex: 1 0 100%;
  min-width: 0;
  align-items: center;
  padding-bottom: 1rem;
  display: flex;
  gap: 0.5rem;
}
.news-item:not(:last-child) {
  border-bottom: 1px solid var(--tg-border);
}
.news-item-cover {
  width: 10rem;
  height: 5rem;
  object-fit: cover;
  border-radius: 0.5rem;
}
.news-item-content p {
  color: var(--tg-text-secondary);
}
.news-item-content h2 {
  font-size: 1.125rem;
}
.news.all .news-item:first-child {
  flex-direction: column;
  align-items: flex-start;
}
.news.all .news-item:first-child img {
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
.news.all .news-item:nth-child(2), .news.all .news-item:nth-child(3) {
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 calc(50% - 1rem);
}
.news.all .news-item:nth-child(2) img, .news.all .news-item:nth-child(3) img {
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
.news-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.news-detail > h1 {
  font-size: 1.5rem;
}
.news-detail-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 2/1;
  border-radius: 0.5rem;
  object-fit: cover;
}

@media (max-width: 48rem) {
  header .header-nav {
    gap: 0.5rem;
  }
  header .header-nav > a:first-child {
    display: none;
  }
  header .header-logo {
    min-width: 2.5rem;
  }
  header .header-login {
    min-width: 2.5rem;
  }
  footer {
    padding: 1rem 1rem 5rem 1rem;
  }
  main {
    padding: 0 1rem;
  }
  .title > div {
    padding: 0.5rem 1rem;
  }
  .download > article {
    flex-direction: column;
  }
  .separater {
    display: none !important;
  }
  .side {
    display: none !important;
  }
  .title-side-toggle {
    display: inline-flex;
  }
  .side.side-drawer-active {
    display: flex !important;
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: min(18rem, 86vw);
    max-width: 100%;
    height: calc(100% - var(--header-height));
    padding: 1rem;
    overflow-y: auto;
    background: var(--tg-bg);
    z-index: 20;
    transform: translate3d(-102%, 0, 0);
    transition: transform 0.24s ease-in-out;
    will-change: transform;
  }
  .side.side-drawer-active.is-open {
    transform: translate3d(0, 0, 0);
  }
  .side-drawer-backdrop {
    top: var(--header-height);
  }
  .search-form-input {
    padding: 0.5rem 0 0.5rem 1.5rem;
  }
  .search-form-input::before {
    left: 0;
  }
  .search-filters {
    display: none !important;
  }
  .post-card-meta .tag {
    display: none !important;
  }
  .about-main {
    flex-direction: column;
  }
  .about-main .separater.vertical {
    display: none;
  }
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .home-hero-content {
    padding: 2rem 1rem 0 1rem;
    display: flex;
    flex-direction: column;
  }
  .home-hero-content-copy > * {
    text-align: center;
  }
  .home-hero-content-copy h1 {
    font-size: 1.5rem;
  }
  .home-hero-content-copy-actions {
    justify-content: center;
  }
  .login-main,
  .home-news,
  .home-downloads,
  .home-features {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-downloads {
    padding: 0 4rem;
  }
  .home-downloads .home-download-item > img {
    padding: 0 2rem;
  }
  .home-downloads.desktop {
    padding: 0 1rem;
  }
  .home-downloads.desktop .home-download-item > img {
    padding: 0;
  }
  .login-divider {
    width: 100%;
    height: 1px;
  }
  #community-detail {
    width: 100%;
  }
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .title-side-toggle,
  .side.side-drawer-active,
  .side-drawer-backdrop {
    transition: none !important;
  }
}