@charset "UTF-8";
.joe_dropdown {
  position: relative;
}
.joe_dropdown__link {
  display: flex;
  align-items: center;
}
.joe_dropdown__link-icon {
  transition: transform 0.35s;
}
.joe_dropdown__menu {
  position: absolute;
  left: 50%;
  visibility: hidden;
  z-index: 999;
  border-top: 3px solid var(--theme);
  transform-origin: top;
  background: var(--background);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 var(--radius-inner) var(--radius-inner);
  padding: 10px 0;
  opacity: 0;
  transform: translateX(-50%) perspective(600px) rotateX(-45deg);
  transition: opacity 0.35s, visibility 0.35s, transform 0.35s;
}
.joe_dropdown__menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--theme);
}
.joe_dropdown.active .joe_dropdown__link-icon {
  transform: rotate(-180deg);
}
.joe_dropdown.active .joe_dropdown__menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) perspective(600px) rotateX(0);
}

.joe_header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--background);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  transition: top 0.35s;
}
.joe_header.active {
  top: -60px;
}
.joe_header.active .joe_header__below {
  border-top: none;
}
.joe_header.active.current .joe_header__below-title {
  display: block;
}
.joe_header.active.current .joe_header__below-class {
  display: none;
}
.joe_header__above {
  position: relative;
  z-index: 999;
  background: var(--background);
}
.joe_header__above .joe_container {
  align-items: center;
}
.joe_header__above-logo {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  padding-right: 15px;
  margin-right: 15px;
}
.joe_header__above-logo img {
  max-width: 150px;
  max-height: 50px;
  object-fit: cover;
}
.joe_header__above-logo svg {
  display: none;
}
.joe_header__above-logo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 20px;
  background: var(--classC);
  transform: translateY(-50%);
}
.joe_header__above-nav {
  display: flex;
  align-items: center;
}
.joe_header__above-nav .item {
  position: relative;
  height: 60px;
  line-height: 60px;
  font-size: 15px;
  padding: 0 8px;
  margin-right: 15px;
  transition: color 0.35s;
  white-space: nowrap;
  color: var(--main);
}
.joe_header__above-nav .item:last-child {
  margin-right: 0;
}
.joe_header__above-nav .item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  transition: opacity 0.5s, transform 0.5s;
  border-radius: 6px 6px 0 0;
  opacity: 0;
  transform: scaleX(0.25);
  background: var(--theme);
}
.joe_header__above-nav .item.active, .joe_header__above-nav .item:hover {
  color: var(--theme);
}
.joe_header__above-nav .item.active::after, .joe_header__above-nav .item:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.joe_header__above-nav .joe_dropdown__link a {
  height: 60px;
  line-height: 60px;
  font-size: 15px;
  padding-left: 8px;
  padding-right: 3px;
  transition: color 0.35s;
  white-space: nowrap;
  color: var(--main);
}
.joe_header__above-nav .joe_dropdown__menu {
  width: 110px;
  text-align: center;
}
.joe_header__above-nav .joe_dropdown__menu a {
  display: block;
  line-height: 34px;
  height: 34px;
  transition: color 0.35s, background 0.35s;
  color: var(--minor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 15px;
}
.joe_header__above-nav .joe_dropdown__menu a:hover, .joe_header__above-nav .joe_dropdown__menu a.active {
  color: var(--theme);
  background: var(--classD);
}
.joe_header__above-search {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.joe_header__above-search .input {
  background: var(--classC);
  width: 170px;
  height: 34px;
  border: 1px solid transparent;
  padding: 0 18px;
  color: var(--routine);
  transition: background 0.35s, border-color 0.35s, padding-right 0.35s;
  border-radius: 17px 0 0 17px;
}
.joe_header__above-search .input:focus {
  background: var(--background);
  border-color: var(--theme);
  padding-right: 28px;
}
.joe_header__above-search .input:focus ~ .icon {
  transform: translate3d(0, -50%, 0) rotateY(180deg);
}
.joe_header__above-search .submit {
  position: relative;
  z-index: 1;
  height: 34px;
  border: none;
  background: var(--theme);
  color: #fff;
  border-radius: 0 17px 17px 0;
  padding: 0 10px;
}
.joe_header__above-search .icon {
  position: absolute;
  top: 50%;
  left: 142px;
  width: 28px;
  height: 38px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAmCAYAAADX7PtfAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAHKElEQVRYw93Xe3DNdxrH8ecXiSK7i1qWFWW3rekiE2x3VEemtkkVVbWy4jY6atma2YpS6rJoozvbpRF1qW1EEYIk5xZE5EKE3CQi0SB30VwEIeeWnDi3nPf+kUNTE1R3mNn945n5nZkz8zrP53y/39/3EUCeZsn/HCgi80Rky1MDn/H2vjB6SpBVRMb9V6CI+InIBhE58bOez5b9xm9E0wu//0NTr/4+9SKyX0TGicjiP320kpBd+xCRv/0kUFEUf49OnfJGBwWzWn3UcfCGSa8xO1zxFoi3gLbJyZb8S/QeOIhRb0/hiA1GvjkREfF9bFBEQv0C3ySyrIaEO5DjaCXFYkdttKEyWFEbrKiNNjRmBztLrrIqVsfAYb507tJVryjKi48FisiK8Qs/IL4FVEYbOTY7l3FSjJNCp4PDpnZoOzi+BSKKq+j3wostiqK8/KPBv27+6pja9H03uXYHl3FwyeWgGCcFTscPwXalMdnZU1VPn4GDTCLS90eB2ibHHpXRhtpgRWWwkmqxU4yTEpwcvaUno7kZ7f1dtitds4tVcYcRkZMiskhRlCEPBdUG2/a7oNpoQ2Oyc8zUwrsp+QREp7CxpA6N0YbaaENtvBtrW2lMdsIy8xn00u/4aPly9h04QEBgICKy+oGgymiNUBltaN2xflxwlUmqdArKvyX0RBZf1ejbge5y/zi10cbg4SO4Ul3N8dRUqmprcQETJ01CUZQxHXdotH+jMtpYdLact9RniMzOxX6rDAzlrEzOIKLO+EPMXRqTnbCs88yePQuA18aOpWuPXuyIiKCouBgROfQA0Bq1tqiGsPRsMFbiaigBfQXoy1mZnMnOa6YOMBsHb7ewKbuAWTNnAhAQGEjPPn3JyMmh2W5HUZScDkGd0b5/RuoFqmtLiNj8GSLCxcwEMFTw95RM/l1ruBepxtTW2YKMYiYdPouuycHg4SOpqa8nTqPhclkZDuBcYSEiEtMxaLZHByXmU1qUiYeHByLCsZhIMFayPfMs/yy9TrzZQZzByqeX6pigzSLqbB5z4k+jNTvYcCqbvj4++i/Cwi7kFZxvidq/3+UzYAAi8l6HYLzZfiAoIZfoiHBEBBGhNDcZ9BXkln5LoCaLoMR8punOsCM7j8b6EjBWsDjxDHtuNKE1O9h95RrT14QyJngm01at48u8IkTktPtg6da9e/dffb8PTXbVVG0mqRva4pw8PgBMV6CxHBrLuVhZRMO1Ypw3LrPt8zXYrl8CfTmrUzL5ut2C0jY50TW3om1yEm+B/oNf0rvBYfPff//59pEefUd9BtKPU5oQS+vtMmgsx3W7DJf7GfNV5kyfgoiQpNoNxko+Tsog8u6Cuu8wiLfAb/2Gt7hBRUR6tAdTpmozQV/etjrbYXfBxspzKEpb3MU5x8FYwUxdOirDfXvTvT+1TU569vt17YP+w+RJ0ae4WdUWlcsdJfqKtmd9BWcSDiIijHvdH8xVVFdfYmpiPjqznQP1BmIamu6dRBqTnfCcQkQkukPQPyZdNToqzfZWaLKzuvwiGCpoLcrAnqS917G1/iKfL5iLMUkH3xWiK8hnWX4Vhy0uJi9ayqpYHRqzo+1stbgIePc9u4i83iE4O7128cvRp1mRZ2Hy+qRWQ25aW2d1RW0x3+04/zScTITcNJYmZxFxzcj+2lsM8vUjrrHlXrRR1Q107tLlYodnqaIo2iHDhlp8g+bzaSkcqbO0xiXn80boCdbtOkXuuUJuVRdjqbuI42YxNXmpLFkwh6FvTOCoDdeYP09nVazOpWtuRW20oWtu5Z0PlyMiwR2CIrJbG7WNyPD1DBrxCoEh61snhEYwcc1WXvnLelffgOX6gcE7VN1+3sM2cuwfEU9PRCRtftgWQnbupVf/AQSvXMta3TE0ZgeHbprx7tGz6oGvJxHx8vDyOr35sxWYrp4n8VAEsZGbiNsVTvy+7TzXr0+j+3sHRkx4G1GUnc90885bGhWDh4dHlqIo10Xk9oqDanQWF/M3bUVEPnjo+/CTEkJeXbgOX9+h/GPlIrR7t3I8difHYiLp3evZanf03iIyQkR6iKcXnl6dTymK0lVRFD8RmTpj7XqO2mDIq/6ISM+HgicbnPM+r4TVhS1M26IhYNlGxixcg4hiFpHnOrjd/fL+z8P8XyPmtoVOXl6Zj7xinLrpnLux3EXaDQff1ED4dxD8ZRwisvYxbuHquf8KR0Q2PRJcdcm5JL3BwR2blRablVZg1KhRLkVRej8GOFg6dUJEFj0S3F3NYpPVRrPNSovDweGEBERkx0+YNWYoivL8I8E7Tue8O04nFrsdBzDG3x8R8Xli01NISMiSrdu2kZGTzd7oaERk7xMd12ZFJC0b/8nX9Brsh4ikiUj3Jwpes/Ph3qzLeHb7RbGIeD7xgfRIQsIyH5/+RkVR+j+VCXjkyJHdFEXx/r+b8f8DZyW8Jd6/P38AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDItMjBUMTE6NTI6MjQrMDA6MDA4bfPmAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTAyLTIwVDExOjUyOjI0KzAwOjAwSTBLWgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  transition: transform 0.35s;
  transform: translate3d(100%, -50%, 0) rotateY(180deg);
}
.joe_header__above-search .result {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--background);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-inner);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.35s, opacity 0.35s, transform 0.35s;
  transform: translate3d(0, 15px, 0);
}
.joe_header__above-search .result.active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  visibility: visible;
}
.joe_header__above-search .result .item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid var(--classD);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 10px;
  transition: background 0.35s;
}
.joe_header__above-search .result .item:last-child {
  border-bottom: none;
}
.joe_header__above-search .result .item:nth-child(1) .sort {
  background: #fe2d46;
}
.joe_header__above-search .result .item:nth-child(2) .sort {
  background: #f60;
}
.joe_header__above-search .result .item:nth-child(3) .sort {
  background: #faa90e;
}
.joe_header__above-search .result .item:hover {
  background: var(--classD);
}
.joe_header__above-search .result .item .sort {
  color: #fff;
  background: #7f7f8c;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 2px;
  text-align: center;
  margin-right: 8px;
  font-weight: 500;
}
.joe_header__above-search .result .item .text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--routine);
  font-size: 12px;
}
.joe_header__above-search .result .item .views {
  color: var(--seat);
  font-size: 12px;
  margin-left: 5px;
}
.joe_header__above-searchicon, .joe_header__above-slideicon {
  display: none;
  width: 20px;
  height: 20px;
  fill: var(--routine);
  cursor: pointer;
}
.joe_header__above-searchicon {
  margin-left: auto;
}
.joe_header__below {
  position: relative;
  border-top: 1px solid var(--classC);
  height: 45px;
}
.joe_header__below-title {
  max-width: 450px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: none;
  line-height: 45px;
  font-size: 17px;
  font-weight: 700;
  color: var(--main);
  animation: showHeaderTitle 0.35s;
}
.joe_header__below-class {
  display: flex;
}
.joe_header__below-class .item {
  margin-right: 15px;
  color: var(--minor);
  height: 45px;
  line-height: 45px;
  transition: color 0.35s;
  white-space: nowrap;
}
.joe_header__below-class .item:hover, .joe_header__below-class .item.active {
  color: var(--theme);
}
.joe_header__below-class .joe_dropdown {
  margin-right: 15px;
}
.joe_header__below-class .joe_dropdown__link .item {
  margin-right: 3px;
}
.joe_header__below-class .joe_dropdown__menu {
  width: 110px;
  text-align: center;
}
.joe_header__below-class .joe_dropdown__menu a {
  display: block;
  height: 34px;
  line-height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--minor);
  transition: color 0.35s, background 0.35s;
}
.joe_header__below-class .joe_dropdown__menu a:hover, .joe_header__below-class .joe_dropdown__menu a.active {
  color: var(--theme);
  background: var(--classD);
}
.joe_header__below-sign {
  margin-left: auto;
}
.joe_header__below-sign .joe_dropdown__link {
  display: flex;
  align-items: center;
  height: 45px;
  color: var(--minor);
  cursor: pointer;
  user-select: none;
  transition: color 0.35s;
}
.joe_header__below-sign .joe_dropdown__link .icon {
  fill: var(--minor);
  margin-right: 3px;
  transition: fill 0.35s;
}
.joe_header__below-sign .joe_dropdown__link:hover {
  color: var(--theme);
}
.joe_header__below-sign .joe_dropdown__link:hover .icon {
  fill: var(--theme);
}
.joe_header__below-sign .joe_dropdown__menu {
  width: 110px;
  text-align: center;
}
.joe_header__below-sign .joe_dropdown__menu a {
  display: block;
  height: 34px;
  line-height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--minor);
  transition: color 0.35s, background 0.35s;
}
.joe_header__below-sign .joe_dropdown__menu a:hover, .joe_header__below-sign .joe_dropdown__menu a.active {
  color: var(--theme);
  background: var(--classD);
}
.joe_header__below-sign .item {
  display: flex;
  align-items: center;
  height: 45px;
  color: var(--minor);
}
.joe_header__below-sign .item .icon {
  fill: var(--minor);
  margin-right: 5px;
}
.joe_header__below-sign .item a {
  color: var(--minor);
  transition: color 0.25s;
}
.joe_header__below-sign .item a:hover {
  color: var(--theme);
}
.joe_header__below-sign .item .split {
  margin: 0 5px;
}
.joe_header__searchout {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 890;
  background: var(--background);
  border-top: 1px solid var(--classC);
  transform: translate3d(0, -100%, 0);
  transition: transform 0.35s, visibility 0.35s;
  visibility: hidden;
}
.joe_header__searchout.active {
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
.joe_header__searchout-inner {
  padding: 15px 0;
  width: 100%;
}
.joe_header__searchout-inner .search {
  width: 100%;
  display: flex;
  align-items: center;
}
.joe_header__searchout-inner .search input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--classB);
  border-right: none;
  border-radius: 2px 0 0 2px;
  color: var(--routine);
  background: var(--classD);
}
.joe_header__searchout-inner .search button {
  padding: 0 10px;
  height: 36px;
  border: none;
  background: var(--theme);
  color: #fff;
  border-radius: 0 2px 2px 0;
}
.joe_header__searchout-inner .title {
  color: var(--routine);
  padding: 15px 0 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.joe_header__searchout-inner .title .icon {
  width: 22px;
  height: 22px;
  fill: var(--routine);
  margin-right: 5px;
}
.joe_header__searchout-inner .cloud {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -5px;
}
.joe_header__searchout-inner .cloud .item {
  padding: 5px;
}
.joe_header__searchout-inner .cloud .item a {
  display: block;
  padding: 0 10px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
}
.joe_header__slideout {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  z-index: 1020;
  background: var(--classD);
  transform: translate3d(-100%, 0, 0);
  visibility: hidden;
  transition: transform 0.35s, visibility 0.35s;
  overflow-y: auto;
  padding: 135px 15px 15px;
}
.joe_header__slideout::-webkit-scrollbar {
  display: none;
}
.joe_header__slideout.active {
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
.joe_header__slideout-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
  z-index: -1;
}
.joe_header__slideout-author {
  display: flex;
  margin-bottom: 15px;
  background: var(--background);
  border-radius: var(--radius-wrap);
  padding: 15px;
  box-shadow: var(--box-shadow);
}
.joe_header__slideout-author .avatar {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: var(--radius-inner);
}
.joe_header__slideout-author .info {
  overflow: hidden;
  line-height: 25px;
}
.joe_header__slideout-author .info .link,
.joe_header__slideout-author .info .motto {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.joe_header__slideout-author .info .link {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--main);
}
.joe_header__slideout-author .info .motto {
  font-size: 12px;
  color: var(--routine);
}
.joe_header__slideout-count {
  background: var(--background);
  border-radius: var(--radius-wrap);
  padding: 10px 15px;
  box-shadow: var(--box-shadow);
  margin-bottom: 15px;
}
.joe_header__slideout-count .item {
  display: flex;
  align-items: center;
  color: var(--routine);
  padding: 5px 0;
}
.joe_header__slideout-count .item .icon {
  width: 15px;
  height: 15px;
  fill: var(--routine);
  margin-right: 5px;
}
.joe_header__slideout-count .item strong {
  font-weight: 500;
  color: var(--theme);
}
.joe_header__slideout-menu {
  background: var(--background);
  padding: 10px 15px;
  border-radius: var(--radius-wrap);
  overflow: hidden;
  box-shadow: var(--box-shadow);
}
.joe_header__slideout-menu .link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--main);
  transition: color 0.15s;
}
.joe_header__slideout-menu .link a {
  transition: color 0.15s;
  color: var(--routine);
}
.joe_header__slideout-menu .link .icon {
  width: 13px;
  height: 13px;
  fill: var(--minor);
  transition: transform 0.15s, fill 0.15s;
}
.joe_header__slideout-menu .link.in {
  color: var(--theme);
}
.joe_header__slideout-menu .link.in a {
  color: var(--theme);
}
.joe_header__slideout-menu .link.in .icon {
  fill: var(--theme);
  transform: rotate(90deg);
}
.joe_header__slideout-menu .current a {
  color: var(--theme);
  font-weight: 500;
  font-size: 15px;
}
.joe_header__slideout-menu .slides {
  display: none;
  border-left: 1px solid var(--classC);
  padding-left: 15px;
}
.joe_header__slideout-menu .slides .link {
  color: var(--routine);
}
.joe_header__slideout-menu .slides .current {
  color: var(--theme);
  font-weight: 500;
  font-size: 15px;
}
.joe_header__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.35s, opacity 0.35s;
  z-index: 880;
}
.joe_header__mask.active {
  visibility: visible;
  opacity: 1;
}
.joe_header__mask.slideout {
  z-index: 1010;
}

.joe_aside {
  padding: 15px 0;
  margin-left: 15px;
}
.joe_aside__item {
  position: relative;
  width: 250px;
  margin-bottom: 15px;
  border-radius: var(--radius-wrap);
  box-shadow: var(--box-shadow);
  overflow: hidden;
}
.joe_aside__item:last-child {
  position: sticky;
  margin-bottom: 0;
  transition: top 0.35s;
}
.joe_aside__item-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--classC);
  font-size: 16px;
  font-weight: 500;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  color: var(--main);
}
.joe_aside__item-title .icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  fill: var(--main);
}
.joe_aside__item-title .line {
  width: 10px;
  height: 1px;
  background: #4caf50;
  margin-left: 12px;
}
.joe_aside__item-contain {
  position: relative;
  padding: 15px;
}
.joe_aside__item.author {
  background: var(--background);
  padding: 45px 15px 15px;
}
.joe_aside__item.author::before {
  content: "";
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--background));
}
.joe_aside__item.author::after {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 273px;
  background: url('../img/aside-author.gif') no-repeat;
  background-size: cover;
  z-index: 3;
  pointer-events: none;
}
.joe_aside__item.author:hover::after {
  display: block;
}
.joe_aside__item.author .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  object-fit: cover;
  z-index: 1;
}
.joe_aside__item.author .user {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 15px;
}
.joe_aside__item.author .user .avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  object-fit: cover;
  transition: transform 0.75s;
  background: var(--background);
  padding: 5px;
}
.joe_aside__item.author .user .avatar:hover {
  transform: rotate(360deg);
}
.joe_aside__item.author .user .link {
  color: var(--theme);
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.joe_aside__item.author .user .link:hover {
  text-decoration: underline;
}
.joe_aside__item.author .user .motto {
  color: var(--main);
  text-align: center;
  word-break: break-word;
}
.joe_aside__item.author .count {
  width: 100%;
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--classC);
}
.joe_aside__item.author .count .item {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--routine);
  font-size: 12px;
}
.joe_aside__item.author .count .item:first-child {
  border-right: 1px solid var(--classC);
}
.joe_aside__item.author .count .item .num {
  max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  font-size: 22px;
  color: var(--main);
  margin-bottom: 3px;
  text-shadow: var(--text_shadow);
}
.joe_aside__item.author .list {
  padding-top: 15px;
}
.joe_aside__item.author .list .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 30px;
}
.joe_aside__item.author .list .item .link {
  position: relative;
  color: var(--routine);
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.joe_aside__item.author .list .item .link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--theme);
  transition: all 0.35s;
}
.joe_aside__item.author .list .item .link:hover {
  color: var(--theme);
}
.joe_aside__item.author .list .item .link:hover::after {
  width: 100%;
}
.joe_aside__item.author .list .item .icon {
  fill: var(--routine);
}
.joe_aside__item.hot {
  background: var(--background);
}
.joe_aside__item.hot .empty {
  text-align: center;
  color: var(--routine);
}
.joe_aside__item.hot .item {
  margin-bottom: 15px;
}
.joe_aside__item.hot .item:last-child {
  margin-bottom: 0;
}
.joe_aside__item.hot .item:nth-child(1) .link .sort {
  background: #ff183e;
}
.joe_aside__item.hot .item:nth-child(2) .link .sort {
  background: #ff5c38;
}
.joe_aside__item.hot .item:nth-child(3) .link .sort {
  background: #ffb821;
}
.joe_aside__item.hot .item .link {
  position: relative;
  display: block;
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.joe_aside__item.hot .item .link:hover .image {
  transform: scale(1.2);
}
.joe_aside__item.hot .item .link .sort {
  position: absolute;
  top: 5px;
  right: -20px;
  background: #7f7f8c;
  color: #fff;
  width: 65px;
  text-align: center;
  font-size: 12px;
  transform: rotate(45deg);
  font-weight: 500;
  z-index: 1;
  font-style: normal;
}
.joe_aside__item.hot .item .link .image {
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform 0.35s;
}
.joe_aside__item.hot .item .link .describe {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  font-size: 12px;
  color: var(--seat);
}
.joe_aside__item.hot .item .link .describe h6 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 24px;
  font-size: 14px;
}
.joe_aside__item.newreply {
  background: var(--background);
}
.joe_aside__item.newreply .empty {
  text-align: center;
  color: var(--routine);
}
.joe_aside__item.newreply .item {
  margin-bottom: 15px;
  border-bottom: 1px dashed var(--classC);
  padding-bottom: 15px;
}
.joe_aside__item.newreply .item:last-child {
  margin-bottom: 0;
  border-bottom-color: transparent;
  padding-bottom: 0;
}
.joe_aside__item.newreply .item .user {
  display: flex;
  margin-bottom: 12px;
}
.joe_aside__item.newreply .item .user .avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  border: 1px solid var(--classA);
  padding: 3px;
}
.joe_aside__item.newreply .item .user .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.joe_aside__item.newreply .item .user .info .author {
  color: var(--main);
  font-weight: 600;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.joe_aside__item.newreply .item .user .info .date {
  font-size: 12px;
  color: var(--minor);
}
.joe_aside__item.newreply .item .reply {
  position: relative;
  background: var(--classD);
  border-radius: 6px;
  padding: 5px 10px;
}
.joe_aside__item.newreply .item .reply::before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 6px solid var(--classD);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  left: 15px;
  bottom: 100%;
}
.joe_aside__item.newreply .item .reply .link {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  color: var(--minor);
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  transition: all 0.35s;
  max-height: 48px;
}
.joe_aside__item.newreply .item .reply .link:hover {
  color: var(--theme);
}
.joe_aside__item.newreply .item .reply .link .owo_image {
  height: 18px;
  vertical-align: -5px;
}
.joe_aside__item.advert {
  display: block;
}
.joe_aside__item.advert img {
  width: 100%;
  object-fit: cover;
}
.joe_aside__item.advert .icon {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 5px;
  border-radius: 2px;
  color: #ebebeb;
  pointer-events: none;
}
.joe_aside__item.tags {
  background: var(--background);
}
.joe_aside__item.tags .empty {
  text-align: center;
  color: var(--routine);
}

/* 侧边栏：那年今日 */
.joe_aside__item.history {
  background: var(--background);
}
.joe_aside__item.history .joe_aside__item-contain {
  padding: 8px 15px 12px;
}
.joe_aside__history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.joe_aside__history-list .item {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
}
.joe_aside__history-list .item + .item {
  border-top: 1px dashed var(--classC);
}
.joe_aside__history-list .item a {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  color: var(--routine);
  transition: color 0.35s;
}
.joe_aside__history-list .item a:hover {
  color: var(--theme);
}
.joe_aside__history-list .year {
  flex-shrink: 0;
  height: 20px;
  line-height: 20px;
  margin-right: 8px;
  padding: 0 6px;
  font-size: 12px;
  color: #fff;
  border-radius: 4px;
  background-image: linear-gradient(270deg, #b7e778, #7ed957, #4caf50);
}
.joe_aside__history-list .title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
}
.joe_aside__item.history .empty {
  padding: 10px 0;
  text-align: center;
  color: var(--minor);
}

/* 侧边栏：2D 标签云 */
.joe_aside__item.tags .list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.joe_aside__item.tags .list .item {
  max-width: 100%;
}
.joe_aside__item.tags .list .item a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: #fff;
  background: var(--classD);
  background: var(--joe-tag-c, var(--theme));
  border: 1px solid var(--classC);
  border-color: var(--classC);
  border-color: color-mix(in srgb, var(--joe-tag-c, var(--theme)) 80%, #fff 20%);
  border-radius: 14px;
  transition: all 0.35s;
}
.joe_aside__item.tags .list .item a:hover {
  color: #fff;
  filter: brightness(1.06) saturate(1.04);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.joe_aside__item.tags .list .count {
  margin-left: 6px;
  color: inherit;
  opacity: 0.8;
}
.joe_list__item {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--classC);
  padding: 15px 0;
}
.joe_list__item:last-child {
  border-bottom: none;
}
.joe_list__item .information .title {
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  color: var(--main);
  font-size: 18px;
  line-height: 24px;
  max-height: 48px;
  transition: color 0.35s;
}
.joe_list__item .information .title:hover {
  color: var(--theme);
}
.joe_list__item .information .title .badge {
  height: 20px;
  line-height: 20px;
  background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
  color: #fff;
  font-size: 12px;
  margin-right: 5px;
  border-radius: 2px;
  padding: 0 8px;
  white-space: nowrap;
  vertical-align: 2px;
}
.joe_list__item .information .abstract {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--minor);
  word-break: break-word;
  line-height: 22px;
  max-height: 44px;
  opacity: 0.85;
}
.joe_list__item .line {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: -15px;
  width: 4px;
  height: 25px;
  border-radius: 2px;
  background: var(--theme);
  transform: scaleY(0);
  transition: transform 0.35s;
}
.joe_list__item .meta {
  display: flex;
  align-items: center;
  margin-top: auto;
  color: var(--minor);
  font-size: 13px;
}
.joe_list__item .meta .items {
  display: flex;
  align-items: center;
}
.joe_list__item .meta .items li::after {
  content: "/";
  color: var(--seat);
  padding: 0 5px;
}
/* 文章归档 */
.joe_detail__archives {
  margin-bottom: 15px;
}
.joe_detail__archives .year-item {
  margin-bottom: 20px;
}
.joe_detail__archives .year-head {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
  outline: none;
}
.joe_detail__archives .year-head:hover .year {
  opacity: 0.85;
}
.joe_detail__archives .year-head .year {
  flex-shrink: 0;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background-image: linear-gradient(270deg, #b7e778, #7ed957, #4caf50, #2f9e44);
  background-color: #4caf50;
}
.joe_detail__archives .year-head .count {
  margin-left: 10px;
  font-size: 12px;
  color: var(--minor);
}
.joe_detail__archives .year-head .line {
  flex: 1;
  height: 1px;
  background: var(--classC);
  margin-left: 12px;
}
.joe_detail__archives .year-head .toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-left: 10px;
  padding: 0 8px;
  height: 22px;
  border: 1px solid var(--classC);
  border-radius: 11px;
  font-size: 12px;
  color: var(--minor);
  background: var(--classD);
  transition: color 0.35s, border-color 0.35s;
}
.joe_detail__archives .year-head:hover .toggle {
  color: var(--theme);
  border-color: var(--theme);
}
.joe_detail__archives .year-head .toggle svg {
  fill: currentColor;
  margin-left: 2px;
  transition: transform 0.35s;
}
.joe_detail__archives .year-item.collapsed .year-head {
  margin-bottom: 0;
}
.joe_detail__archives .year-item.collapsed .year-head .toggle svg {
  transform: rotate(-90deg);
}
.joe_detail__archives .post-list {
  list-style: none;
  overflow: hidden;
  max-height: 10000px;
  margin: 0;
  padding: 0 0 10px 12px;
  border-left: 2px solid var(--classC);
  transition: max-height 0.45s ease, opacity 0.35s ease, padding 0.35s ease;
  opacity: 1;
}
.joe_detail__archives .year-item.collapsed .post-list {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.joe_detail__archives .post-list .item {
  display: flex;
  align-items: center;
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 14px;
}
.joe_detail__archives .post-list .item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--classC);
  transition: background 0.35s;
}
.joe_detail__archives .post-list .item:hover::before {
  background: var(--theme);
}
.joe_detail__archives .post-list .item .date {
  flex-shrink: 0;
  width: 62px;
  margin-right: 10px;
  font-size: 13px;
  color: var(--minor);
  font-variant-numeric: tabular-nums;
}
.joe_detail__archives .post-list .item .link {
  color: var(--routine);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s;
}
.joe_detail__archives .post-list .item .link:hover {
  color: var(--theme);
}
.joe_detail__archives .empty {
  color: var(--minor);
  font-size: 13px;
  padding: 10px 0;
}
.joe_list__item .meta .items li:last-child::after {
  display: none;
}
.joe_list__item .meta .items li .comment-link {
  color: var(--minor);
  transition: color 0.35s;
}
.joe_list__item .meta .items li .comment-link:hover {
  color: var(--theme);
}
.joe_list__item .meta .last {
  margin-left: auto;
  display: flex;
  align-items: center;
}
.joe_list__item .meta .last .icon {
  margin-right: 3px;
}
.joe_list__item .meta .last .link {
  color: var(--minor);
}
.joe_list__item .meta .last .link:hover {
  color: var(--theme);
}
.joe_list__item:hover .line {
  transform: scaleY(1);
}
.joe_list__item.default {
  display: flex;
  position: relative;
}
.joe_list__item.default:hover .thumbnail img {
  opacity: 0.8;
}
.joe_list__item.default:hover .thumbnail time {
  transform: translate3d(0, 0, 0);
}
.joe_list__item.default .thumbnail {
  flex-shrink: 0;
  position: relative;
  width: 210px;
  height: 140px;
  margin-right: 15px;
  overflow: hidden;
}
.joe_list__item.default .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-inner);
  transition: opacity 0.35s;
}
.joe_list__item.default .thumbnail time {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 5px;
  background: var(--theme);
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  transition: transform 0.35s;
  transform: translate3d(120%, 0, 0);
}
.joe_list__item.default .thumbnail svg {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  fill: #fff;
}
.joe_list__item.default .information {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.joe_list__item.single:hover .thumbnail img {
  opacity: 0.8;
}
.joe_list__item.single:hover .thumbnail time {
  transform: translate3d(0, 0, 0);
}
.joe_list__item.single .information {
  margin-bottom: 15px;
}
.joe_list__item.single .thumbnail {
  display: block;
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  margin-bottom: 15px;
}
.joe_list__item.single .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-inner);
  transition: opacity 0.35s;
}
.joe_list__item.single .thumbnail time {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  background: var(--theme);
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  transition: transform 0.35s;
  transform: translate3d(120%, 0, 0);
}
.joe_list__item.single .thumbnail svg {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  fill: #fff;
}
.joe_list__item.multiple .information {
  margin-bottom: 15px;
}
.joe_list__item.multiple .thumbnail {
  display: grid;
  /* 文章配图可能不足 3 张：按实际张数均分，1 张时占满整行，避免留空列 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-template-rows: 180px;
  gap: 15px;
  margin-bottom: 15px;
}
.joe_list__item.multiple .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s, opacity 0.35s;
  border-radius: var(--radius-inner);
}
.joe_list__item.multiple .thumbnail img:hover {
  transform: scale(1.025);
  opacity: 0.85;
}
.joe_list__item.none .information {
  display: flex;
  flex-direction: column;
  height: 140px;
}
.joe_list__loading .item {

  display: flex;

  position: relative;

  width: 100%;

  padding: 15px 0;

  border-bottom: 1px solid var(--classC);

}

.joe_list__loading .item:last-child {

  border-bottom: none;

}

.joe_list__loading .item .thumbnail {

  flex-shrink: 0;

  position: relative;

  width: 210px;

  height: 140px;

  margin-right: 15px;

  background: var(--classD);

  animation: list_thumbnail_loading 0.5s infinite alternate;

  border-radius: var(--radius-inner);

}

.joe_list__loading .item .information {

  flex: 1;

  min-width: 0;

}

.joe_list__loading .item .information .title {

  height: 24px;

  border-radius: var(--radius-inner);

  background: var(--classD);

  animation: list_title_loading 0.75s infinite alternate;

  margin-bottom: 15px;

}

.joe_list__loading .item .information .abstract p {

  height: 18px;

  border-radius: var(--radius-inner);

  background: var(--classD);

  margin-bottom: 5px;

  animation: list_abstract_loading 0.8s infinite alternate;

}




.joe_alert {
  padding: 12px;
  border-radius: var(--radius-inner);
  line-height: 26px;
}
.joe_alert.info {
  border: 1px solid #abdcff;
}
.joe_alert.success {
  border: 1px solid #8ce6b0;
}
.joe_alert.warning {
  border: 1px solid #ffd77a;
}
.joe_alert.error {
  border: 1px solid #ffb08f;
}
.joe_alert *:last-child {
  margin-bottom: 0 !important;
}

.joe_gird {
  display: grid;
}
.joe_gird__item *:last-child {
  margin-bottom: 0 !important;
}

.joe_checkbox {
  -webkit-appearance: none;
  position: relative;
  border-radius: 2px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--theme);
  vertical-align: -2px;
}
.joe_checkbox:disabled {
  cursor: not-allowed;
}
.joe_checkbox:checked {
  border: none;
  background: var(--theme);
}
.joe_checkbox:checked::after {
  content: "";
  width: 3px;
  height: 7px;
  position: absolute;
  top: 2px;
  left: 5px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.joe_mtitle {
  display: flex;
  justify-content: center;
}
.joe_mtitle__text {
  position: relative;
  color: var(--minor);
  padding: 0 12px;
  transition: padding 0.35s;
}
.joe_mtitle__text:hover {
  padding: 0;
}
.joe_mtitle__text::before, .joe_mtitle__text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 1px;
  background: var(--theme);
}
.joe_mtitle__text::before {
  left: -35px;
}
.joe_mtitle__text::after {
  right: -35px;
}

.joe_abtn {
  display: inline-block;
  color: #fff;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  transform-origin: 100% 0;
  transform: translateZ(0);
}
.joe_abtn:hover {
  animation-name: wobble-bottom;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
.joe_abtn__icon {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
.joe_abtn__icon .fa {
  color: #fff;
}
.joe_abtn__icon [class^=fa-] {
  margin-right: 8px;
}
.joe_abtn__content {
  color: #fff;
  display: inline-block;
  vertical-align: top;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.joe_anote {
  position: relative;
  display: inline-block;
  color: #fff;
  height: 35px;
  line-height: 35px;
  transform: translateZ(0);
  transition: transform 0.35s;
}
.joe_anote:hover {
  transform: translateY(-3px);
}
.joe_anote__icon {
  display: inline-block;
  vertical-align: top;
  width: 35px;
  height: 35px;
  text-align: center;
  background: rgba(0, 0, 0, 0.2);
}
.joe_anote__icon .fa {
  color: #fff;
}
.joe_anote__content {
  color: #fff;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.joe_anote.secondary {
  background: #34495e;
}
.joe_anote.success {
  background: #27ae60;
}
.joe_anote.warning {
  background: #f39c12;
}
.joe_anote.error {
  background: #e74c3c;
}
.joe_anote.info {
  background: #3498db;
}

.joe_dotted {
  display: block;
  width: 100%;
  height: 2px;
  background-size: 80px;
}

.joe_hide {
  display: block;
  background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
  padding: 15px 0;
  text-align: center;
  position: relative;
  user-select: none;
  line-height: normal;
}
.joe_hide__button {
  position: relative;
  font-style: normal;
  cursor: pointer;
  color: var(--theme);
}

.joe_card__default {
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-inner);
  border: 1px solid var(--classC);
  background: var(--background);
  line-height: 26px;
}
.joe_card__default-title {
  padding: 8px 12px;
  border-bottom: 1px solid var(--classC);
  color: var(--main);
  user-select: none;
}
.joe_card__default-content {
  padding: 12px;
  color: var(--routine);
}
.joe_card__default-content *:last-child {
  margin-bottom: 0 !important;
}

.joe_message {
  display: block;
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  padding: 8px 15px;
  border-radius: 0 4px 4px 0;
  line-height: 26px;
}
.joe_message:hover .joe_message__icon {
  transform: rotate(360deg);
}
.joe_message__icon {
  position: absolute;
  top: -9px;
  left: -11px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: transform 0.85s;
}
.joe_message__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  fill: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.joe_message.success {
  border-left-color: #2bde3f;
  background: rgba(43, 222, 63, 0.1254901961);
  color: #2bde3f;
}
.joe_message.success .joe_message__icon {
  background: #2bde3f;
}
.joe_message.success .joe_message__icon::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
}
.joe_message.info {
  border-left-color: #1d72f3;
  background: rgba(29, 114, 243, 0.1254901961);
  color: #1d72f3;
}
.joe_message.info .joe_message__icon {
  background: #1d72f3;
}
.joe_message.info .joe_message__icon::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
}
.joe_message.warning {
  border-left-color: #ffc007;
  background: rgba(255, 192, 7, 0.1254901961);
  color: #ffc007;
}
.joe_message.warning .joe_message__icon {
  background: #ffc007;
}
.joe_message.warning .joe_message__icon::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
}
.joe_message.error {
  border-left-color: #f56c6c;
  background: rgba(245, 108, 108, 0.1254901961);
  color: #f56c6c;
}
.joe_message.error .joe_message__icon {
  background: #f56c6c;
}
.joe_message.error .joe_message__icon::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
}
.joe_message__content {
  display: block;
}

.joe_progress {
  width: 100%;
  display: flex;
  align-items: center;
}
.joe_progress__strip {
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--classC);
  min-width: 0;
  flex: 1;
  margin-right: 10px;
}
.joe_progress__strip-percent {
  position: relative;
  height: 100%;
  border-radius: 6px;
  transition: width 0.35s;
}
.joe_progress__strip-percent::before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 6px;
  animation: progress-active 3s ease-in-out infinite;
}
.joe_progress__percentage {
  color: var(--minor);
}

.joe_callout {
  padding: 12px;
  border: 1px solid var(--classB);
  border-left-width: 4px;
  border-radius: var(--radius-inner);
  color: var(--routine);
  line-height: 26px;
}
.joe_callout *:last-child {
  margin-bottom: 0 !important;
}

.joe_card__list {
  border: 1px solid var(--classC);
  border-radius: var(--radius-inner);
  overflow: hidden;
  line-height: 26px;
}
.joe_card__list-item {
  padding: 12px;
  border-bottom: 1px solid var(--classC);
}
.joe_card__list-item:last-child {
  border-bottom: none;
}
.joe_card__list-item *:last-child {
  margin-bottom: 0 !important;
}

.joe_timeline {
  line-height: 26px;
}
.joe_timeline__item {
  position: relative;
  padding-bottom: 15px;
}
.joe_timeline__item-tail {
  position: absolute;
  top: 0;
  left: 6px;
  height: 100%;
  border-left: 1px solid var(--classC);
}
.joe_timeline__item-circle {
  position: absolute;
  width: 13px;
  height: 13px;
  background-color: var(--background);
  border-radius: 50%;
  border: 1px solid #19be6b;
}
.joe_timeline__item-content {
  padding-left: 24px;
  position: relative;
  top: -5px;
}
.joe_timeline__item-content *:last-child {
  margin-bottom: 0 !important;
}
.joe_timeline__item:last-child {
  padding-bottom: 0;
}
.joe_timeline__item:last-child .joe_timeline__item-tail {
  display: none;
}

.joe_tabs {
  width: 100%;
  overflow: hidden;
  background: var(--background);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--classC);
  border-radius: var(--radius-inner);
  line-height: 26px;
}
.joe_tabs__head {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  background: var(--classD);
}
.joe_tabs__head-item {
  position: relative;
  padding: 0 15px;
  line-height: 40px;
  height: 40px;
  color: var(--minor);
  cursor: pointer;
  transition: color 0.5s;
  white-space: nowrap;
  font-size: 14px;
}
.joe_tabs__head-item::after {
  content: "";
  position: absolute;
  background: var(--theme);
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 2px;
  opacity: 0;
  border-radius: 2px;
  transform: scaleX(0.5);
  transition: opacity 0.25s, transform 0.25s;
}
.joe_tabs__head-item.active {
  color: var(--theme);
}
.joe_tabs__head-item.active::after {
  opacity: 1;
  transform: scaleX(1);
}
.joe_tabs__body-item {
  padding: 15px;
}
.joe_tabs__body-item *:last-child {
  margin-bottom: 0 !important;
}

.joe_vplayer {
  width: 100%;
  height: 500px;
}

.joe_card__describe {
  position: relative;
  border: 1px dashed var(--classA);
  line-height: 26px;
}
.joe_card__describe-title {
  position: absolute;
  top: 0;
  left: 8px;
  transform: translateY(-50%);
  background: var(--background);
  padding: 0 5px;
  color: var(--main);
  font-weight: 500;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe_card__describe-content {
  color: var(--routine);
  padding: 18px 15px 15px;
}
.joe_card__describe-content *:last-child {
  margin-bottom: 0 !important;
}

.joe_lamp {
  display: block;
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 1.5px;
  overflow: hidden;
  animation: lamp-background linear 4s infinite;
}
.joe_lamp::before, .joe_lamp::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  animation: lamp-front linear 4s infinite;
}
.joe_lamp::before {
  right: 50%;
  transform-origin: right;
}
.joe_lamp::after {
  left: 50%;
  transform-origin: left;
}

.joe_collapse {
  line-height: 26px;
}
.joe_collapse__item {
  margin-bottom: 10px;
  color: var(--routine);
  border: 1px solid var(--classC);
}
.joe_collapse__item-head {
  display: flex;
  align-items: center;
  background: var(--classD);
  padding: 10px 12px;
  padding-right: 8px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
.joe_collapse__item-head--label {
  padding-right: 8px;
}
.joe_collapse__item-head--icon {
  flex-shrink: 0;
  margin-left: auto;
  fill: var(--minor);
  transition: transform 0.3s ease;
}
.joe_collapse__item-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.joe_collapse__item-wrapper--content {
  padding: 12px;
}
.joe_collapse__item-wrapper--content *:last-child {
  margin-bottom: 0 !important;
}
.joe_collapse__item:last-child {
  margin-bottom: 0;
}
.joe_collapse__item.active .joe_collapse__item-head--icon {
  transform: rotate(-180deg);
}

.joe_cloud {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--classC);
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.joe_cloud__logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  background-size: 100% 100%;
}
.joe_cloud__logo._default {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTEzNS40NjcgODIzLjY4YTM3MC41NiA5My42NTMgMCAxIDAgNzQxLjEyIDAgMzcwLjU2IDkzLjY1MyAwIDEgMC03NDEuMTIgMHoiIGZpbGw9IiNCNkM5Q0IiLz48cGF0aCBkPSJNODUuMzMzIDgxMi4zNzNWMTUxLjA0YzguNzQ3LTIzLjA0IDIzLjQ2Ny00Mi42NjcgNDkuMjgtNDIuNjY3IDU1LjI1NCAxLjI4IDExMC45MzQtOS4zODYgMTY1LjU0NyA2LjgyN2ExNC41MDcgMTQuNTA3IDAgMCAwIDEwLjg4LTIuMzQ3IDcxLjY4IDcxLjY4IDAgMCAxIDMyLjIxMy01LjU0NmgxMTQuNTZhNTYuMzIgNTYuMzIgMCAwIDEgNjQgNTIuOTA2IDYxLjQ0IDYxLjQ0IDAgMCAwLTguNzQ2IDY5LjU0NyAyMDYuNTA3IDIwNi41MDcgMCAwIDEgOC41MzMgMjkuMjI3djU0MS40NGE1MS42MjcgNTEuNjI3IDAgMCAxLTQ4Ljg1MyA1Mi45MDZjLTU1LjI1NCAwLTExMS4xNDcgOC45Ni0xNjUuOTc0LTYuMTg2YTEzLjg2NyAxMy44NjcgMCAwIDAtOS4xNzMgMCA5NS41NzMgOTUuNTczIDAgMCAxLTQ1LjY1MyA2LjE4NmwtOTMuMjI3IDEuMjhjLTMzLjcwNyAyLjU2LTYxLjQ0LTYuNjEzLTczLjM4Ny00Mi4yNHptMzg5LjEyLTMzMS43MzNWMTc1LjU3M2MwLTEwLjQ1MyAxLjkyLTIxLjMzMy0xNC43Mi0yMS4zMzNIMzQxLjEyYTE0LjUwNyAxNC41MDcgMCAwIDAtMTUuNTczIDEwLjY2NyA5NS4xNDcgOTUuMTQ3IDAgMCAwLTcuMDQgNDEuMzg2djU2OC4zMmMxLjQ5MyAyNi42NjcgOS42IDM0LjM0NyAzNi4wNTMgMzQuMzQ3aDk5LjJjMTYuNDI3IDAgMjEuMzMzLTUuMzMzIDIxLjMzMy0yMS4zMzMtLjg1My0xMDIuNC0uNjQtMjA0LjgtLjY0LTMwNi45ODd6bS0zNDIuNCAwVjc4Ny4yYzAgOS42LTEuOTIgMjAuMDUzIDEzLjY1NCAxOS44NEgyNjYuMjRjNi4xODcgMCAxMS41MiAwIDEzLjQ0LTcuODkzYTEzOS4wOTMgMTM5LjA5MyAwIDAgMCA4LjMyLTM5LjA0VjIwMC4zMmExNDUuOTIgMTQ1LjkyIDAgMCAwIDAtMTUuNTczYy0yLjc3My0yNS4xNzQtOS44MTMtMzEuMzYtMzQuOTg3LTMxLjM2aC05OS4yYy0xNy40OTMgMC0yMS4zMzMgNS4zMzMtMjEuMzMzIDIxLjMzMyAwIDEwMi42MTMtLjQyNyAyMDUuMjI3LS40MjcgMzA2Ljc3M3oiIGZpbGw9IiMzMTQ1NTMiLz48cGF0aCBkPSJNODY0IDgyOC44bC02Mi4wOCAyMS4zMzNjLTQwLjUzMyAxNC4wOC02Ni45ODcgMS40OTQtODEuOTItMzkuMjUzLTcuODkzLTIxLjMzMy0xNi4yMTMtNDIuNjY3LTI0LjMyLTY0bC0zLjYyNy0zLjg0YTY0IDY0IDAgMCAwLTUuNzYtMjQuMzJjLTM2LjA1My0xMDAuNjkzLTcxLjY4LTIwMS44MTMtMTA4LjM3My0zMDIuMjkzLTE4Ljk4Ny01MS44NC0zNC45ODctMTA0Ljk2LTU3LjM4Ny0xNTUuNTJBMjA2LjUwNyAyMDYuNTA3IDAgMCAwIDUxMiAyMzEuNjhhNjEuNDQgNjEuNDQgMCAwIDEgOC43NDctNjkuNTQ3IDY3MS4xNDcgNjcxLjE0NyAwIDAgMSAxNDAuNTg2LTUzLjU0NmMyNy45NDctOC4xMDcgNTEuMiA5LjE3MyA2Mi4wOCAzOS42OHE1Mi40OCAxNDUuOTIgMTA0LjUzNCAyOTIuMDUzbDEwMy42OCAyOTAuMzQ3YzE2LjY0IDQ2LjI5MyA1LjMzMyA3MC42MTMtNDAuMzIgODcuNDY2LTkuMzg3IDMuMi0xOC4zNDcgNy4wNC0yNy4zMDcgMTAuNjY3em0yNi44OC03MS44OTNzLTEuMjgtNC4wNTQtMi4zNDctNy4wNFE3ODQuNjQgNDU4Ljg4IDY4MC45NiAxNjguMTA3Yy00LjQ4LTEyLjgtMTAuNDUzLTE1LjM2LTIzLjA0LTEwLjY2Ny0yOS4wMTMgMTEuMzA3LTU4LjAyNyAyMS4zMzMtODcuODkzIDMxLjE0Ny0xNy4yOCA1LjMzMy0xOC4xMzQgMTMuMDEzLTEyLjU4NyAyOC4zNzMgMzkuODkzIDEwOS40NCA3OC43MiAyMTkuMzA3IDExNy45NzMgMzI5LjE3M2w4OC4zMiAyNDYuODI3YzMuMiA5LjE3MyA1LjU0NyAxOS40MTMgMTkuODQgMTQuMDggMzIuODU0LTEyLjE2IDY1LjcwNy0yMy42OCA5OC43NzQtMzUuNDEzYTExLjMwNyAxMS4zMDcgMCAwIDAgOC43NDYtMTQuNzJ6IiBmaWxsPSIjNzkzOTQzIi8+PHBhdGggZD0iTTQ3NC40NTMgNDgwLjY0djMwNi45ODdjMCAxNS43ODYtNC4yNjYgMjEuMzMzLTIxLjMzMyAyMS4zMzMtMzMuMDY3LTEuMDY3LTY2LjEzMyAwLTk5LjIgMC0yNi40NTMgMC0zNC41Ni03LjY4LTM2LjA1My0zNC4zNDd2LTU2OC4zMmE5NS4xNDcgOTUuMTQ3IDAgMCAxIDcuMDQtNDEuMzg2IDE0LjUwNyAxNC41MDcgMCAwIDEgMTUuNTczLTEwLjY2N2gxMTguNjEzYzE2LjY0IDAgMTQuNzIgMTAuNDUzIDE0LjcyIDIxLjMzM3EuNjQgMTUyLjMyLjY0IDMwNS4wNjd6TTQxMi4xNiA1NzZ2MTMyLjA1M2MwIDExLjA5NCAxLjA2NyAyMS4zMzQgMTQuNzIgMjIuODI3czE2LjY0LTExLjA5MyAxNi40MjctMjMuMDRWNDQzLjczM2MwLTExLjA5My0xLjA2Ny0yMS4zMzMtMTQuNzItMjIuODI2cy0xNi42NCAxMS4wOTMtMTYuNjQgMjMuMDRjLjQyNiA0My4wOTMuMjEzIDg3LjA0LjIxMyAxMzIuMDUzem0zOC44MjctMjkwLjk4N2E1MC41NiA1MC41NiAwIDEgMC01MS40MTQgNDkuNzA3IDUwLjk4NyA1MC45ODcgMCAwIDAgNTEuNjI3LTUwLjc3M3pNMzU3Ljc2IDY0MS4wNjd2NjcuODRjMCAxMC44OCAyLjM0NyAyMS4zMzMgMTQuNzIgMjEuMzMzczE2LjY0LTkuMzg3IDE2LjY0LTIxLjMzM3YtMTM1LjY4YzAtMTAuODgtMi41Ni0yMS4zMzQtMTQuNzItMjEuMzM0cy0xNi42NCA5LjM4Ny0xNi42NCAyMS4zMzRjLjIxMyAyMi42MTMgMCA0NS40NCAwIDY3Ljg0ek0xMzIuMDUzIDQ4MS40OTNWMTc2LjQyN2MwLTE2Ljg1NCA0LjI2Ny0yMi44MjcgMjEuMzM0LTIxLjMzNCAzMy4wNjYgMS4yOCA2Ni4xMzMgMCA5OS4yIDAgMjUuMzg2IDAgMzIuMjEzIDYuMTg3IDM0Ljk4NiAzMS4zNmExNDUuOTIgMTQ1LjkyIDAgMCAxIDAgMTUuNTc0djU1OS43ODZhMTM5LjA5MyAxMzkuMDkzIDAgMCAxLTguMzIgMzkuMDRjLTIuMTMzIDcuNDY3LTcuNDY2IDcuODk0LTEzLjQ0IDcuODk0SDE0NS4yOGMtMTUuNTczIDAtMTMuNjUzLTEwLjI0LTEzLjY1My0xOS44NFY1MTEuNTczcS40MjYtMTUuMzYuNDI2LTMwLjA4em02Mi4yOTQgMTA2LjY2N1Y0NjcuODRjMC0xMS43MzMgMC0yMy44OTMtMTUuMzYtMjQuMTA3cy0xNiAxMS43MzQtMTYgMjMuNjh2MjM4LjkzNGMwIDExLjUyIDAgMjMuODkzIDE1LjM2IDI0LjEwNnMxNi0xMS43MzMgMTYtMjMuNjhjLS4yMTQtMzkuODkzIDAtNzkuMzYgMC0xMTguODI2ek0yNTYgMjgzLjczM2E1MC41NiA1MC41NiAwIDEgMC01MS4yIDQ5LjkyIDUwLjc3MyA1MC43NzMgMCAwIDAgNTEuMi00OS45MnptLTcuNjggMzQxLjMzNHYtODEuNDk0YzAtMTEuMzA2LTEuNzA3LTIxLjMzMy0xNS4zNi0yMS4zMzNzLTE2IDEwLjI0LTE2IDIxLjMzM1Y3MDguNDhjMCAxMS4zMDcgMS43MDcgMjEuMzMzIDE1LjM2IDIxLjMzM3MxNi0xMC4yNCAxNi0yMS4zMzNjLjIxMy0yNy45NDcuNDI3LTU1Ljg5My40MjctODMuNjI3eiIgZmlsbD0iI0I3RTFFQiIvPjxwYXRoIGQ9Ik04OTEuMDkzIDc1Ni45MDdhMTEuMzA3IDExLjMwNyAwIDAgMS04Ljc0NiAxNC43MmMtMzIuODU0IDExLjczMy02NS45MiAyMy40NjYtOTguNzc0IDM1LjQxMy0xNC4yOTMgNS4zMzMtMTYuNjQtNC45MDctMTkuODQtMTQuMDhsLTg4LjMyLTI0Ni44MjdDNjM2LjE2IDQzNi4yNjcgNTk3LjMzMyAzMjYuNCA1NTcuMjI3IDIxNi45NmMtNS41NDctMTUuMTQ3LTQuNjk0LTIzLjA0IDEyLjU4Ni0yOC4zNzMgMjkuNjU0LTguOTYgNTguODgtMjAuMDU0IDg3Ljg5NC0zMS4xNDcgMTIuNTg2LTQuOTA3IDE4LjU2LTIuMzQ3IDIzLjA0IDEwLjY2N3ExMDMuNjggMjkwLjk4NiAyMDcuNzg2IDU4MS43NmMxLjI4IDIuOTg2IDIuMTM0IDUuOTczIDIuNTYgNy4wNHptLTEyMC4zMi0yNjYuMjRjMC0yLjU2LTIuMTMzLTYuODI3LTMuNjI2LTExLjA5NEw2ODcuNzg3IDI1NmE4Mi41NiA4Mi41NiAwIDAgMC0zLjYyNy04Ljk2Yy0zLjg0LTcuNjgtOS44MTMtMTIuOC0xOC41Ni05LjgxM2ExNC45MzMgMTQuOTMzIDAgMCAwLTEwLjQ1MyAxOS44NGMwIDMuMiAxLjkyIDYuMTg2IDIuOTg2IDkuMTczbDc5Ljc4NyAyMjQuNDI3YTY4LjQ4IDY4LjQ4IDAgMCAwIDUuMzMzIDEyLjM3MyAxNC4yOTMgMTQuMjkzIDAgMCAwIDE4LjU2IDUuOTczYzYuMTg3LTMuNDEzIDkuMzg3LTkuMzg2IDguOTYtMTguMzQ2em0xOS4yIDEyOGE1MC41NiA1MC41NiAwIDEgMCA1MC4xMzQgNTAuOTg2IDUwLjk4NyA1MC45ODcgMCAwIDAtNTAuNzc0LTUwLjk4NnptLTk2LjY0LTE4Mi40YzAtMi45ODctMi41Ni04LjUzNC00LjQ4LTE0LjA4cS0yNi4wMjYtNzIuOTYtNTIuMDUzLTE0NC44NTRjLTMuODQtMTAuODgtNy40NjctMjQuNzQ2LTIzLjI1My0xOS40MTNzLTEwLjY2NyAxNy45Mi02LjQgMjkuMjI3bDUyLjkwNiAxNDcuNjI2YTcyLjUzMyA3Mi41MzMgMCAwIDAgNS45NzQgMTQuMjk0IDEzLjg2NyAxMy44NjcgMCAwIDAgMTcuMDY2IDUuNzZjNy4wNC0zLjIgMTAuMjQtOC43NDcgMTAuMjQtMTguNTZ6IiBmaWxsPSIjRkJCNkFDIi8+PHBhdGggZD0iTTQxMi4xNiA1NzZWNDQzLjk0N2MwLTExLjk0NyAxLjQ5My0yMy42OCAxNi42NC0yMy4wNHMxNC43MiAxMS43MzMgMTQuNzIgMjIuODI2VjcwNy44NGMwIDExLjk0Ny0xLjQ5MyAyMy42OC0xNi40MjcgMjMuMDRzLTE0LjcyLTExLjczMy0xNC43Mi0yMi44MjdjMC00NS4wMTMtLjIxMy04OS4zODYtLjIxMy0xMzIuMDUzem0zOS4wNC0yOTIuMDUzYTUwLjU2IDUwLjU2IDAgMSAxLTQ5LjQ5My01MS40MTQgNTAuOTg3IDUwLjk4NyAwIDAgMSA0OS40OTMgNTEuNDE0em0tMzAuOTMzLTEuNzA3Yy0yLjM0Ny0xMS41Mi04Ljc0Ny0xOC45ODctMjEuMzM0LTE4LjEzM2ExOC45ODcgMTguOTg3IDAgMCAwIDEuNDk0IDM4LjE4NmMxMi41ODYtLjIxMyAxOC4zNDYtOC4zMiAxOS42MjYtMjAuMDUzek0zNTcuNzYgNjQxLjA2N3YtNjcuODRjMC0xMS43MzQgMi45ODctMjEuMzM0IDE2LjY0LTIxLjMzNHMxNC43MiAxMC4yNCAxNC43MiAyMS4zMzR2MTM1LjY4YzAgMTEuNzMzLTIuOTg3IDIxLjMzMy0xNi42NCAyMS4zMzNzLTE0LjcyLTEwLjI0LTE0LjcyLTIxLjMzM2MuMjEzLTIyLjYxNCAwLTQ1LjIyNyAwLTY3Ljg0em0tMTYzLjQxMy01My4xMnYxMTguNGMwIDExLjczMyAwIDIzLjg5My0xNiAyMy42OHMtMTUuMzYtMTIuNTg3LTE1LjM2LTI0LjEwN1Y0NjYuOTg3YzAtMTEuNzM0IDAtMjMuODk0IDE2LTIzLjY4czE1LjM2IDEyLjU4NiAxNS4zNiAyNC4xMDZjLS4yMTQgNDAuMzIgMCA4MC40MjcgMCAxMjAuNTM0ek0yNTYgMjgzLjczM2E1MC41NiA1MC41NiAwIDEgMS00OS45Mi01MS4yIDUwLjc3MyA1MC43NzMgMCAwIDEgNDkuOTIgNTEuMnptLTMwLjcyIDBhMTkuNjI3IDE5LjYyNyAwIDAgMC0xOS4yLTE5LjIgMTkuMiAxOS4yIDAgMCAwLTEuOTIgMzguMTg3YzEyLjU4Ny40MjcgMTguOTg3LTcuMjUzIDIxLjU0Ny0xOS42Mjd6bTIzLjQ2NyAzNDEuMTJ2ODMuNDE0YzAgMTEuNTItMi4zNDcgMjEuMzMzLTE2IDIxLjMzM3MtMTUuMzYtMTAuODgtMTUuMzYtMjEuMzMzVjU0My4zNmMwLTExLjUyIDIuMzQ2LTIxLjMzMyAxNi0yMS4zMzNzMTUuMzYgMTAuODggMTUuMzYgMjEuMzMzYy0uMjE0IDI3LjA5MyAwIDUzLjk3MyAwIDgxLjQ5M3oiIGZpbGw9IiMzMTQ1NTMiLz48cGF0aCBkPSJNNzcwLjc3MyA0OTAuNjY3YzAgOC45Ni0xLjkyIDE0LjkzMy04Ljc0NiAxNy40OTNhMTQuMjkzIDE0LjI5MyAwIDAgMS0xOC41Ni01Ljk3MyA2OC40OCA2OC40OCAwIDAgMS01LjMzNC0xMi4zNzRsLTgwLTIyMi43MmMtMS4wNjYtMi45ODYtMi4xMzMtNi4xODYtMi45ODYtOS4xNzNhMTQuOTMzIDE0LjkzMyAwIDAgMSAxMC40NTMtMTkuODRjOC43NDctMi45ODcgMTQuOTMzIDEuOTIgMTguNTYgOS44MTNhODIuNTYgODIuNTYgMCAwIDEgMy42MjcgOC45Nkw3NjggNDc5LjU3M2MwIDQuMjY3IDEuOTIgOC41MzQgMi43NzMgMTEuMDk0em0xOC41NiAxMjhhNTAuNTYgNTAuNTYgMCAxIDEgMCAxMDAuOTA2IDUwLjU2IDUwLjU2IDAgMCAxIDAtMTAwLjkwNnptMTkuMiA1MC41NmMtMS45Mi0xMS41Mi04LjEwNi0xOS40MTQtMjAuMDUzLTE4Ljk4N2ExOC45ODcgMTguOTg3IDAgMCAwIDAgMzcuOTczYzEyLjU4Ny0uNDI2IDE4LjU2LTguMzIgMjAuNDgtMTkuODR6bS0xMTUuMi0yMzIuOTZjMCAxMC4wMjYtMy4yIDE1LjM2LTEwLjI0IDE3LjQ5M2ExMy44NjcgMTMuODY3IDAgMCAxLTE3LjA2Ni01Ljc2IDcyLjUzMyA3Mi41MzMgMCAwIDEtNS45NzQtMTQuMjkzTDYwNy4xNDcgMjg2LjA4Yy00LjA1NC0xMS4zMDctOS4xNzQtMjQuMTA3IDYuNC0yOS4yMjdzMTkuMiA4LjUzNCAyMy4yNTMgMTkuNDE0bDUyLjA1MyAxNDUuOTJjMS45MiA0LjQ4IDMuNDE0IDExLjA5MyA0LjQ4IDE0LjA4eiIgZmlsbD0iIzc5Mzk0MyIvPjwvc3ZnPg==");
}
.joe_cloud__logo._360 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik04NDMuMjk0IDg3MS45MDZjMC00OS42OTQgNDAuNjU5LTkwLjM1MyA5MC4zNTMtOTAuMzUzUzEwMjQgODIyLjIxMiAxMDI0IDg3MS45MDZzLTQwLjY1OSA5MC4zNTMtOTAuMzUzIDkwLjM1My05MC4zNTMtNDAuNjU5LTkwLjM1My05MC4zNTN6IiBmaWxsPSIjRkY5OTMyIi8+PHBhdGggZD0iTTg0NC44IDY4Ni42ODJsLTEzMS4wMTItNTIuNzA2Yy0xMC41NC00LjUxNy0xMC41NC0xMi4wNDctNi4wMjMtMjIuNTg4IDEyLjA0Ny0zMS42MjMgMTguMDctNjYuMjU5IDE4LjA3LTEwMC44OTQgMC0xNDcuNTc2LTEyNC45ODgtMjc0LjA3LTI3NC4wNy0yNzQuMDdzLTI3NC4wNyAxMjYuNDk0LTI3NC4wNyAyNzQuMDdjMCAzNC42MzUgOS4wMzQgNzAuNzc3IDIxLjA4MSAxMDIuNCAzLjAxMiA2LjAyNCAzLjAxMiAxMy41NTMgMCAxOS41NzctMy4wMTEgNC41MTctNi4wMjMgMC0xMC41NCAxLjUwNUw1NS43MTcgNjc3LjY0N2MtMS41MDYgMS41MDYtNC41MTggMS41MDYtNi4wMjQgMS41MDYtOS4wMzUgMC0xNS4wNTktNC41MTgtMTguMDctMTMuNTUzQzEyLjA0NyA2MTQuNCAxLjUwNiA1NjMuMiAxLjUwNiA1MTAuNDk0IDEuNTA2IDI2My41MyAyMDQuOCA2MC4yMzUgNDUzLjI3IDYwLjIzNXM0NTAuMjU4IDIwMS43ODkgNDUwLjI1OCA0NDguNzUzYzAgNTguNzMtMTAuNTQgMTE0LjQ0Ny0zMS42MjMgMTY3LjE1My0xLjUwNiA0LjUxOC02LjAyNCA5LjAzNS0xMi4wNDcgMTAuNTQxLTMuMDEyIDEuNTA2LTQuNTE4IDEuNTA2LTcuNTMgMS41MDZzLTQuNTE3IDAtNy41MjktMS41MDZ6IiBmaWxsPSIjMEZCMjY0Ii8+PHBhdGggZD0iTTUxLjIgNzE4LjMwNmMtNy41My0xNS4wNTktMTMuNTUzLTMxLjYyNC0xOS41NzYtNDYuNjgyLTMuMDEyLTcuNTMtMy4wMTItMTMuNTUzLTMuMDEyLTE2LjU2NSAwLTQ5LjY5NCA0MC42NTktODguODQ3IDkxLjg1OS04OC44NDcgMzcuNjQ3IDAgNjkuMjcgMjIuNTg4IDg0LjMyOSA1NS43MTcgMS41MDYgMy4wMTIgNi4wMjQgMTIuMDQ3IDkuMDM1IDE2LjU2NSA0Ni42ODMgODguODQ3IDEzOC41NDEgMTQ2LjA3IDIzOS40MzYgMTQ2LjA3IDk5LjM4OCAwIDE4OS43NC01NS43MTcgMjM3LjkyOS0xNDEuNTUyIDQuNTE4LTkuMDM2IDE2LjU2NS0zMC4xMTggMTguMDctMzEuNjI0IDE1LjA2LTMwLjExNyA0My42NzEtNDUuMTc2IDc2LjgtNDUuMTc2IDUxLjIgMCA5MS44NiA0MC42NTkgOTEuODYgODguODQ3IDAgNi4wMjMgMCAxMy41NTMtNC41MTggMjIuNTg4bC05LjAzNiAyMi41ODh2MS41MDZjLTEuNTA1IDQuNTE4LTMuMDExIDcuNTMtNi4wMjMgMTIuMDQ3LTc2LjggMTUzLjYtMjMxLjkwNiAyNDguNDctNDAzLjU3NyAyNDguNDdTMTI5LjUwNiA4NjguODk1IDUxLjIgNzE4LjMwN3oiIGZpbGw9IiNGRjk5MzIiLz48L3N2Zz4=");
}
.joe_cloud__logo._bd {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTI3MS4zOCA0MjkuNjM3YTI0NS41IDI0NS41IDAgMCAxLTMuMzk1LTQwLjc3N2MwLTEzNC42OCAxMDkuMTgtMjQzLjg2IDI0My44Ni0yNDMuODZzMjQzLjg2IDEwOS4xOCAyNDMuODYgMjQzLjg2YTI0NS41IDI0NS41IDAgMCAxLTMuMzk0IDQwLjc3NkM4NzUuOTY3IDQzMC4zMTIgOTc2IDUzMC43NjMgOTc2IDY1NC41NzhjMCAxMjQuMjM1LTEwMC43MTIgMjI0Ljk0Ny0yMjQuOTQ2IDIyNC45NDctNjIuNzQzIDAtMTE5LjQ4Ni0yNS42ODgtMTYwLjI4Ny02Ny4xMmwuMDAzLS4wMDRjLTIxLjQ0LTIxLjgyMi0yMS4zMjItNTYuODkzLjM1NC03OC41NyAyMS43OTYtMjEuNzk1IDU3LjEzMy0yMS43OTUgNzguOTI4IDAgLjY5My42OTQgMS4zNjUgMS40IDIuMDE0IDIuMTIgMjAuNDI3IDE5Ljg3IDQ4LjMxNyAzMi4xMDggNzkuMDY1IDMyLjEwOCA2Mi42MzEgMCAxMTMuNDA0LTUwLjc3MiAxMTMuNDA0LTExMy40MDMgMC02Mi42MzEtNTAuNzczLTExMy40MDMtMTEzLjQwNC0xMTMuNDAzLTI4LjczOSAwLTU0Ljk4MSAxMC42OS03NC45NjcgMjguMzExbC0uMDk2LS4wOTYtMS44ODYgMS44ODZjLTIuMiAyLjAzMy00LjMyIDQuMTUyLTYuMzUzIDYuMzUzbC00LjMwNiA0LjMwNS4wNzYuMDc3LTIyOS44NzYgMjI5Ljg3Ni0uMDMtLjAzYy00MC44MzMgNDEuNzA4LTk3Ljc2NyA2Ny41OS0xNjAuNzQ3IDY3LjU5QzE0OC43MTIgODc5LjUyNSA0OCA3NzguODEzIDQ4IDY1NC41NzhjMC0xMjMuNzExIDk5Ljg2Ni0yMjQuMDk4IDIyMy4zOC0yMjQuOTR6bTEuNjQ0IDMzOC40MjJjNjIuNjMgMCAxMTMuNDAzLTUwLjc3MiAxMTMuNDAzLTExMy40MDMgMC02Mi42MzEtNTAuNzcyLTExMy40MDMtMTEzLjQwMy0xMTMuNDAzLTYyLjYzMSAwLTExMy40MDQgNTAuNzcyLTExMy40MDQgMTEzLjQwMyAwIDYyLjYzIDUwLjc3MyAxMTMuNDAzIDExMy40MDQgMTEzLjQwM3pNNTExLjg0NSA1MjEuMWM3My4wMzQgMCAxMzIuMjQtNTkuMjA2IDEzMi4yNC0xMzIuMjQgMC03My4wMzMtNTkuMjA2LTEzMi4yMzktMTMyLjI0LTEzMi4yMzlzLTEzMi4yNCA1OS4yMDYtMTMyLjI0IDEzMi4yNGMwIDczLjAzMyA1OS4yMDYgMTMyLjIzOSAxMzIuMjQgMTMyLjIzOXoiIGZpbGw9IiMwNkE3RkYiLz48cGF0aCBkPSJNNjQzLjM1MSA0MDIuODY4YTU2Ljk2NiA1Ni45NjYgMCAwIDEtLjM1Mi02LjMzNGMwLTMxLjEyMyAyNS4yMy01Ni4zNTMgNTYuMzUzLTU2LjM1M3M1Ni4zNTMgMjUuMjMgNTYuMzUzIDU2LjM1M2MwIDIuMzktLjE1IDQuNzQ1LS40MzggNy4wNTctNy42MTYgMTI3LjgyLTExMy42ODggMjI5LjEyOC0yNDMuNDIyIDIyOS4xMjgtMTI5LjczNCAwLTIzNS44MDYtMTAxLjMwNy0yNDMuNDIyLTIyOS4xMjhhNTYuOTA4IDU2LjkwOCAwIDAgMS0uNDM4LTcuMDU3YzAtMzEuMTIzIDI1LjIzLTU2LjM1MyA1Ni4zNTMtNTYuMzUzczU2LjM1MyAyNS4yMyA1Ni4zNTMgNTYuMzUzYzAgMi4xNDEtLjEyIDQuMjU1LS4zNTIgNi4zMzQgNi45OTYgNjYuNDQ4IDYzLjIwNCAxMTguMjMgMTMxLjUwNiAxMTguMjMgNjguMzAyIDAgMTI0LjUxLTUxLjc4MiAxMzEuNTA2LTExOC4yM3oiIGZpbGw9IiNGRjQzNkEiLz48L3N2Zz4=");
}
.joe_cloud__logo._ty {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik0yODMuNSAzNjguOGMtMTAuMyAzMS43LTguMyA2Mi4zIDExLjggODkuNiAyMy44IDMyLjIgNTYuOSA0My41IDk2LjEgMzkuMiAxMS0xLjIgMjEuNS0zLjggMzEuOC03LjcgNDAuNy0xNS42IDY3LjgtNTcuOCA2MS05OC02LjUtMzguMy0yOC44LTY2LTY0LjgtNzkuOC02OC40LTI2LjItMTMyLjMtMTUuMi0xODkuNyAyOS45LTM1LjMgMjcuNy02MC43IDYzLTY3LjcgMTA4LjItMTEuMiA3My4xIDMuNCAxMzkuNSA1OC44IDE5Mi4zIDQxLjEgMzkuMiA5MC40IDU3LjQgMTQ3LjggNTUuOSA3Mi4zLTEuOSAxMzIuOS0zMCAxODUuNi03Ny45IDMxLjktMjkuMSA1Ny40LTYzLjggODQuOC05Ni45IDM2LjYtNDQuMyA3OC40LTgxLjUgMTM0LjEtMTAwLjMgNTYuMi0xOC45IDExMS42LTE2LjMgMTY2LjQgNS44IDQuMyAxLjcgOC42IDMuNSAxNSA2LjEtMTAuNiAxLjQtMTkuMiAyLjItMjcuNiAzLjgtNDIuOCA3LjgtNzYuMSAzMS41LTEwNC41IDYzLTMwLjMgMzMuNS01NC42IDcxLjYtODAuOCAxMDguMi0zNi41IDUxLjEtNzYuNiA5OC44LTEyNy41IDEzNi41LTYzLjUgNDctMTM0LjEgNzMuMy0yMTMuNiA2OS42LTU3LjktMi42LTExMi4zLTE5LjktMTYyLjYtNDktODMuNi00OC40LTE0MS0xMTcuNy0xNjIuMy0yMTMuMi0yMC4yLTkwLjMgMi4yLTE3MS44IDYwLjItMjQyLjcgNTIuOC02NC42IDEyNC05NS40IDIwNi0xMDQuMyAxMTUtMTIuNSAyMjEuNiA1Mi4xIDI2OS41IDE0OSAzNS4zIDcxLjUgMjMuNSAxNTIuNS0zMS4xIDIxMC4yLTM1LjIgMzcuMi03OS43IDU3LjUtMTMwLjUgNjEuNy01OS40IDQuOC0xMTIuOS0xMS43LTE1Ni45LTUyLjktNTQuOS01MS42LTcxLjktMTQwLjQtMTUtMjA2LjMgMS4xLTEuMyAyLjUtMi41IDMuOC0zLjcgMy4yLS4yIDMuMSAxLjQgMS45IDMuN3oiIGZpbGw9IiNGNUM1M0UiLz48L3N2Zz4=");
}
.joe_cloud__logo._ct {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik04NTAuNDYxIDc2NC40ODljLTE4LjgyOCA1MC4yMjUtMzUuODc5IDg2Ljg0MS04Mi40NjQgODYuODQxSDEyMC4xNjJjLTQ2LjU3OSAwLTg0Ljk2Mi00MC4yNjctODQuOTYyLTg2Ljg0MUwxNzUuNzU5IDI1OC40NmMxMy41NjgtNTcuMDkxIDM1Ljg4OS04Ni44MyA4Mi40NjItODYuODNoNjQ3LjgzN2M0Ni41ODIgMCA4NC45NjIgNDAuMjQ2IDg0Ljk2MiA4Ni44M0w4NTAuNDYxIDc2NC40ODl6TTMyMi41MTIgMzM3LjI0MmMtNC4zMjQgNC40MTctNy4xOTkgOC43NjQtNy4zNTMgOS4wMjQtLjEwMy4yMDctMi40NzkgNC45OTktMy4xODQgNi45MDktLjcwNSAxLjg4OC0yLjk0NyA5LjM3Ny0zLjA1MSA5LjcxbC0yLjQyNyA4Ljk4MnMtMS45MyA5LjI5NC0yLjIyIDEwLjc4OGMtLjIyOCAxLjE4Mi0xLjM0OSA5LjIyLTEuODc4IDEzLjA5MS0uMTM1Ljk4NS0uMjI4IDEuNjM4LS4yMzggMS43LS4wNjIuMzk1LTEuMTgyIDExLjgxNC0uODkzIDE3LjkyNC4yNzEgNi4wOTkuODQyIDE2LjcxMS44NSAxNi43NjIuMDEyLjEzNSAxLjYzIDEzLjczMyAzLjg3OSAyMi45MjMgMi4xNTkgOC43NzUgNC4yNDMgMTUuNjg1IDYuMzg5IDIxLjEyIDIuMDU0IDUuMTY1IDcuMDMzIDE0LjY4OCA3LjczOSAxNS43ODguMTI2LjE5Ni40MTUuNzA1LjgyOSAxLjQ1MiAyLjA1NCAzLjY3IDYuODY4IDEyLjI2IDExLjI5NiAxNy4yMTggNi4wOTggNi44MjYgMTIuNDQ3IDEzLjc5NiAxNy4yNSAxNy40MDYgNC4zMzcgMy4yNTggMTMuMjIzIDkuMzM0IDE5LjA2NSAxMS40MyA1LjI2OCAxLjkwOSA4Ljk2IDIuODg1IDEwLjE2NSAzLjAwOGguMTM1bC42NTItLjAyLjE0Ny0uNThjLjE2NS0uNjIyLS4yOTItLjg3MS0xLjAzOC0xLjI2Ni0xLjMxNy0uNzA1LTQuMzc4LTIuMzQzLTYuMzY5LTUuMDItMi44NjQtMy44MzgtNy4xMzYtMTEuMTA4LTkuNzgxLTE4Ljk0MS0yLjYyMy03Ljc2OS00LjE2LTE0Ljk5OC00LjczLTE3LjcyNi0uMzQxLTEuNjI5LTEuMTMxLTYuNjkxLTEuODk5LTExLjU4NWE5ODIuNzA2IDk4Mi43MDYgMCAwIDAtMS4zODktOC43NzVjLS4zNDMtMi4wNzQtMS41MTUtMTIuNzY5LTIuMTA3LTI0LjUtLjc0OC0xNC44MDIuMTM1LTMwLjE0Mi4xMzUtMzAuMjg4LjEzNS0xLjkzIDIuNTMtMjcuNzU4IDUuMjU5LTM5LjE2N2wuMjQ5LTEuMDE3YzIuNjM2LTExLjAxNSA0LjM4OC0xOC4yOTggOC45NzQtMjUuMzA5IDYuMDM3LTkuMjExIDguNzY0LTExLjI4NSA5LjMxNS0xMS4zMDZhLjg3Ljg3IDAgMCAwIC44Ny0uNjk0Yy4zODYtMS43OTQtOS40MzgtOS42NzktMTQuMTQ3LTExLjgxNC01LjQ0NS0yLjQ0OC0xMi4wNzQtNC45NjktMTkuOTk3LTQuOTY5LTYuMzcyLjE3NS0xNi4wMTkgMy4xODItMjAuNTAxIDcuNzQ2em00MDAuODExIDUwLjM2OGMtMTAuMTIzLTU3LjQ5Ny01MS4yNS03Ny44OTgtODMuMzk2LTc3Ljg5OC0yMi4zMDEgMC00My4zMzcgOC44MTYtNTkuMjI5IDI0LjgzMi0xNy43MjggMTcuODcyLTI3LjQxMyA0My4wNDYtMjcuOTk2IDcyLjgwNnYuMzcybC40NjcuNDY3aC4zMTNjLjU5IDAgLjY5My0uMTY2IDMuMzUtNC4yODMgOC4zMDYtMTIuOTE0IDMzLjU5Ni01Mi4xODUgNjEuMDExLTU4LjIwMWE0MS40OSA0MS40OSAwIDAgMSA4Ljg2OS0uOTc2YzE0LjM2NyAwIDI3LjEyNCA3LjUzMSAzNC45ODcgMjAuNjQyIDE0LjE5OSAyMy42OTEgMTAuMTIzIDYwLjcyMi0xMS4xNzEgMTAxLjYxMi04Ljg0OCAxNi45OS0zNi42NDYgNjYuNTUtNTguNjY4IDkxLjM2Mi01LjE3NCA1LjgyOS0xMC41MTggMTIuMDExLTE2LjE4MiAxOC41NjYtMjAuNDM0IDIzLjY3LTQxLjU2MyA0OC4xNDktNTUuNTE0IDU2LjUxMWEyNy43NTYgMjcuNzU2IDAgMCAwLTUuNjk1IDQuNTIzYy4xNjYtOC4xNzUuMzczLTE2LjM0Ny41Ny0yNC40OC40ODktMjAuMDE5IDEuMDA1LTQwLjcwMiAxLjAwNS02MC40MyAwLTMxLjUzMy0xLjIxMi01Ny42MS0zLjYwOS03Ny40ODQtMS40MTEtMTEuNzQzLTMuNTM4LTIxLjg2Ni01LjI0OS0yOS45OTYtLjY0My0zLjAzLTEuMjI1LTUuNzc4LTEuNjgtOC4yMTUtMy44OS0yMC43NDYtMTguMTcyLTUwLjM0OC0yNi41NTYtNjIuODk5LTcuOTQ2LTExLjg2Ny0yMS42NTgtMjUuNzU2LTM1LjgwNy0zNi4yNDItMTMuOTQtMTAuMzMyLTM3Ljg1OS0yMC4yMjctNTUuNjgtMjMuMDA3LTUuMDcxLS43OTctMTAuMDQxLTEuMjAzLTE0Ljc3LTEuMjAzLTExLjIyMyAwLTE5LjcyOSAyLjIyLTI1Ljg5IDQuMTcxLTYuMDE1IDEuODg3LTExLjczMSA1LjI0OC0xNS40NzUgNy43Mzh2LjAxYy0yLjk2NiAxLjUyNS00LjQxOSAzLjE2NC00LjQ4MSAzLjI0N2wxLjAzNyAxLjA4OWMuMDE5LS4wMTEgMS42Ni0xLjMxNyA0LjIzLTMuMDI5IDUuNjEzLTIuODUyIDEyLjkzNS0zLjIwNSAyMS4xMy0uOTQ0IDQuNDcxIDEuMjIzIDkuNjU3IDMuOTczIDE0LjkyOCA2Ljg1NyAxOC42NTkgMTQuMDEzIDI2LjExOCAyNC43MzggMzEuNTczIDM2LjUyMiAzLjk4MyA4LjYwOSA3LjI4MSAxNy40MzYgMTEuMzY5IDMwLjQ1MyA0LjEwOSAxMy4wODkgNy44MzMgMzUuODY5IDkuNjk4IDU5LjQxNS45MjUgMTEuNjE4IDEuNjcxIDI0LjA2NSAyLjQ1OCAzNy4yMzcgMS45NzEgMzMuMDQ3IDQuMDAzIDY3LjIxNSA5LjE0OSA5NC4xMDEgMi43OCAxNC41NDEgNi4xMTkgMjcuODYgMTAuMTg2IDQwLjc0MyAxMi40NTcgMzkuMzU0IDMwLjU3OCA2OC43NyA0My4zNzggODMuMTQ4IDExLjc1MSAxMy4yMzQgMjcuMjM5IDI2LjY5OCAzMC42ODMgMjYuNjk4LjA4MSAwIC4xNTUgMCAuMjI2LS4wMTlsLjAxMy4wMTkuMDUxLS4wMTljLjMzMi0uMDgzLjUzOC0uMjUuNjYzLS4zOTUuMDE5LS4wMi4wNDItLjA2Mi4wNjEtLjA4MmguMDExYy4zMjItLjIwNyAzMi43NjktMjEuMTYyIDU3LjI5OS00MS43NjEgODguMTEzLTczLjkzOSAxNjguMTUtMTk4Ljk1MSAxNDguMzI3LTMxMS41Nzh6IiBmaWxsPSIjRkZCOTBGIi8+PC9zdmc+");
}
.joe_cloud__logo._wy {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik04ODAuMyA2MzEuOWMtMy40IDAtNi45LS42LTEwLjItMS44LTE2LjEtNS43LTI0LjUtMjMuMy0xOC45LTM5LjQgNi40LTE4LjEgOS42LTM3LjEgOS42LTU2LjUgMC05My4zLTc1LjktMTY5LjItMTY5LjEtMTY5LjItNzcuNiAwLTE0NS4xIDUyLjQtMTY0IDEyNy41LTQuMiAxNi41LTIwLjggMjYuNi0zNy41IDIyLjQtMTYuNS00LjItMjYuNS0yMS0yMi40LTM3LjUgMjUuOS0xMDIuNSAxMTgtMTc0LjEgMjIzLjktMTc0LjEgMTI3LjMgMCAyMzAuOCAxMDMuNiAyMzAuOCAyMzAuOSAwIDI2LjQtNC40IDUyLjMtMTMuMSA3Ny00LjUgMTIuNy0xNi40IDIwLjctMjkuMSAyMC43eiIgZmlsbD0iIzA5RiIvPjxwYXRoIGQ9Ik00NDcuNCA3ODMuM0gzMzIuNmMtMTI3LjMgMC0yMzAuOS05Ny41LTIzMC45LTIxNy4zIDAtOTQuOSA2NS45LTE3OC4zIDE2MC0yMDYuOCAxMC4yLTExNy45IDEwOS41LTIxMC43IDIzMC0yMTAuNyAxMDcuMSAwIDIwMS44IDc1LjggMjI1LjMgMTgwLjEgMy43IDE2LjYtNi44IDMzLjEtMjMuNCAzNi45LTE2LjcgMy45LTMzLjItNi43LTM2LjktMjMuMy0xNy4xLTc2LjQtODYuNS0xMzEuOS0xNjUtMTMxLjktOTMuMyAwLTE2OS4yIDc1LjktMTY5LjIgMTY5LjEgMS43IDguMS4zIDE1LjQtNC40IDIyLjMtNC42IDYuOS0xMS43IDEwLjQtMTkuOSAxMi03OC4yIDE0LjgtMTM0LjkgNzguOS0xMzQuOSAxNTIuNCAwIDg1LjggNzUuOSAxNTUuNiAxNjkuMiAxNTUuNmgxMTQuOGMxNyAwIDMwLjkgMTMuOCAzMC45IDMwLjlzLTEzLjggMzAuNy0zMC44IDMwLjd6bTExMi43LTMxYy04LjIgMC0xNi4zLTMuMi0yMi40LTkuNi0xMS43LTEyLjQtMTEuMy0zMS45IDEuMS00My42bDEyNi43LTEyMC40YzExLjgtMTEuMyAzMC41LTExLjMgNDIuNSAwTDgzNC44IDY5OWMxMi40IDExLjcgMTIuOSAzMS4zIDEuMSA0My42LTExLjcgMTIuMy0zMS4zIDEyLjktNDMuNiAxLjFMNjg2LjggNjQzLjYgNTgxLjMgNzQzLjhjLTUuOSA1LjctMTMuNiA4LjUtMjEuMiA4LjV6IiBmaWxsPSIjMDlGIi8+PHBhdGggZD0iTTY4Ni44IDg3OWMtMTcgMC0zMC45LTEzLjgtMzAuOS0zMC45VjYwMWMwLTE3IDEzLjktMzAuOSAzMC45LTMwLjlzMzAuOSAxMy44IDMwLjkgMzAuOXYyNDcuMWMwIDE3LjEtMTMuOSAzMC45LTMwLjkgMzAuOXoiIGZpbGw9IiMwOUYiLz48L3N2Zz4=");
}
.joe_cloud__logo._github {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik01MTEuOTY2IDBDMjI5LjIzOSAwIDAgMjI5LjIzOSAwIDUxMi4wMzQgMCA3MzguMjM2IDE0Ni43MDUgOTMwLjEzMyAzNTAuMTc0IDk5Ny44MmMyNS42IDQuNzEgMzQuOTE4LTExLjA5NCAzNC45MTgtMjQuNjc5IDAtMTIuMTUxLS40MDktNDQuMzM5LS42ODItODcuMDc0LTE0Mi40MDUgMzAuOTU5LTE3Mi40NzYtNjguNjQyLTE3Mi40NzYtNjguNjQyLTIzLjI3OS01OS4xMTktNTYuODMyLTc0Ljg4OC01Ni44MzItNzQuODg4LTQ2LjQ5LTMxLjc0NCAzLjUxNi0zMS4xMyAzLjUxNi0zMS4xMyA1MS4zNyAzLjYxOCA3OC40MzggNTIuNzcgNzguNDM4IDUyLjc3IDQ1LjY3IDc4LjI2OCAxMTkuODA4IDU1LjY3MiAxNDguOTkyIDQyLjU2NCA0LjY0Mi0zMy4xMDkgMTcuODg2LTU1LjY3MSAzMi40OTUtNjguNDcxLTExMy42OTgtMTIuOTAzLTIzMy4xOTktNTYuODMyLTIzMy4xOTktMjUzLjAzMSAwLTU1LjkxIDE5LjkzNC0xMDEuNjE0IDUyLjcwMi0xMzcuMzg2LTUuMjkxLTEyLjk3MS0yMi44MzUtNjUuMDI0IDUuMDE3LTEzNS41MSAwIDAgNDIuOTc0LTEzLjc1NSAxNDAuOCA1Mi40OThhNDkwLjA3IDQ5MC4wNyAwIDAgMSAxMjguMTcxLTE3LjIzOCA0OTAuODM2IDQ5MC44MzYgMCAwIDEgMTI4LjE3MSAxNy4yMzhjOTcuNzU4LTY2LjI1MyAxNDAuNjYzLTUyLjQ5OCAxNDAuNjYzLTUyLjQ5OCAyNy45MjEgNzAuNDg2IDEwLjM0MyAxMjIuNTM5IDUuMDg2IDEzNS41MSAzMi44MzYgMzUuNzcyIDUyLjYzNCA4MS40NzYgNTIuNjM0IDEzNy4zODYgMCAxOTYuNjc3LTExOS43MDYgMjM5Ljk1OC0yMzMuNzc5IDI1Mi42NTUgMTguMzk3IDE1LjgwNCAzNC43ODEgNDcuMDM2IDM0Ljc4MSA5NC43ODkgMCA2OC40NzEtLjY0OCAxMjMuNjk5LS42NDggMTQwLjQ1OCAwIDEzLjY4OCA5LjI1IDI5LjYyOCAzNS4yMjUgMjQuNjQ1Qzg3Ny40MzEgOTI5LjkyOSAxMDI0IDczOC4xNjcgMTAyNCA1MTIuMDM0IDEwMjQgMjI5LjIzOSA3OTQuNzI2IDAgNTExLjk2NiAwIiBmaWxsPSIjRjY2Ii8+PC9zdmc+");
}
.joe_cloud__logo._lz {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjIiIGhlaWdodD0iMjIiPjxwYXRoIGQ9Ik02NzguNjQgNTE0LjAwN2ExNjguNDQ4IDE2OC40NDggMCAxIDAtMTY4LjQ0NyAxNjcuNzA2QTE2OC4wNyAxNjguMDcgMCAwIDAgNjc4LjY0IDUxNC4wMDd6IiBmaWxsPSIjRjRDQTFDIi8+PHBhdGggZD0iTTk4My4wNCA2MDMuNDEyYTI0Mi40ODggMjQyLjQ4OCAwIDAgMC0yODAuMzkyLTIzOC40MDdBMjUzLjMyMiAyNTMuMzIyIDAgMCAwIDI1Ni4yMiAyODcuMThhMjQ5LjEzNCAyNDkuMTM0IDAgMCAwLTQ4Ljk1NyAxNTMuMzg1QTIwMy4zOTcgMjAzLjM5NyAwIDAgMCAyNDAuMTg5IDg0NC44aDUyNy43NzVhMzEuOTkgMzEuOTkgMCAwIDAgMTQuNzUtMy43MTcgMjQyLjAzOCAyNDIuMDM4IDAgMCAwIDIwMC4zMjYtMjM3LjY3ek03NDAuNjA4IDc4MC43MTNIMjQwLjE4OWExMzkuMzg3IDEzOS4zODcgMCAxIDEgMC0yNzguNzY5IDMxLjk3IDMxLjk3IDAgMCAwIDguNzA0LTEuMzQxIDMxLjk2NCAzMS45NjQgMCAwIDAgMjQuODQ4LTM1Ljk5OSAxODcuODEyIDE4Ny44MTIgMCAwIDEgMTU3Ljc0Mi0yMTQuMDE2IDE4OC40NjIgMTg4LjQ2MiAwIDAgMSAyMDkuNTQxIDEzMi44MzkgMjQxLjYyOCAyNDEuNjI4IDAgMCAwLTE0Mi44NDggMjE5Ljk4NSAzMi4xOCAzMi4xOCAwIDAgMCA2NC4zNTggMCAxNzguMDY4IDE3OC4wNjggMCAxIDEgMTc4LjA3NCAxNzcuMzAxeiIgZmlsbD0iIzU5NUJCMyIvPjwvc3ZnPg==");
}
.joe_cloud__describe {
  line-height: normal;
  flex: 1;
  overflow: hidden;
}
.joe_cloud__describe-title {
  color: var(--theme);
  font-size: 14px;
  margin-bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.joe_cloud__describe-type {
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.joe_cloud__btn {
  flex-shrink: 0;
  margin-left: auto;
  background: var(--theme);
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
}

.joe_detail {
  background: var(--background);
  border-radius: var(--radius-wrap);
  padding: 15px;
  box-shadow: var(--box-shadow);
  margin-bottom: 15px;
}
.joe_detail__category {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.joe_detail__category .item {
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  margin-right: 5px;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
  transition: transform 0.35s, opacity 0.35s;
}
.joe_detail__category .item:hover {
  opacity: 0.85;
  transform: translate3d(0, -3px, 0);
}
.joe_detail__category .item:last-child {
  margin-right: 0;
}
.joe_detail__category .item-0 {
  background: #0396ff;
}
.joe_detail__category .item-1 {
  background: #ea5455;
}
.joe_detail__category .item-2 {
  background: #7367f0;
}
.joe_detail__category .item-3 {
  background: #28c76f;
}
.joe_detail__category .item-4 {
  background: #9f44d3;
}
.joe_detail__category .edit {
  color: var(--minor);
  margin-left: auto;
}
.joe_detail__category .edit:hover {
  color: var(--theme);
}
.joe_detail__title {
  font-size: 24px;
  color: var(--main);
  text-shadow: var(--text-shadow);
  text-align: center;
  margin-bottom: 15px;
  word-break: break-word;
}
.joe_detail__count {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--classC);
}
.joe_detail__count::after {
  content: "";
  position: absolute;
  bottom: -1.5px;
  left: 0;
  width: 80px;
  height: 3px;
  border-radius: 1.5px;
  background: var(--theme);
}
.joe_detail__count-information {
  display: flex;
  align-items: center;
}
.joe_detail__count-information .avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid var(--classA);
  padding: 3px;
  object-fit: cover;
}
.joe_detail__count-information .meta {
  display: flex;
  flex-direction: column;
  height: 35px;
  justify-content: space-between;
  font-size: 12px;
}
.joe_detail__count-information .meta .author .link {
  font-weight: 500;
  color: var(--theme);
}
.joe_detail__count-information .meta .author .link:hover {
  text-decoration: underline;
}
.joe_detail__count-information .meta .item {
  display: flex;
  align-items: center;
  color: var(--minor);
  line-height: 16px;
}
.joe_detail__count-information .meta .item .line {
  color: var(--seat);
  margin: 0 7px;
  vertical-align: middle;
}
.joe_detail__count-created {
  font-size: 32px;
  line-height: 42px;
  color: var(--routine);
  user-select: none;
  text-shadow: var(--text-shadow);
  font-family: consolas;
}
.joe_detail__overdue {
  padding-top: 15px;
}
.joe_detail__overdue-wrapper {
  background: #fffcef;
  border-radius: var(--radius-inner);
  padding: 15px;
  color: #db7c22;
  border: 1px solid #ffbb76;
  animation: overdue 1.5s ease-in-out;
}
.joe_detail__overdue-wrapper .title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}
.joe_detail__overdue-wrapper .title .icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}
.joe_detail__overdue-wrapper .content {
  padding-left: 28px;
}
.joe_detail__overdue-wrapper:hover {
  clip-path: circle(75%);
}
.joe_detail__article {
  padding-top: 15px;
  font-size: 15px;
  word-break: break-word;
  color: var(--routine);
}
.joe_detail__article h1,
.joe_detail__article h2,
.joe_detail__article h3,
.joe_detail__article h4,
.joe_detail__article h5,
.joe_detail__article h6 {
  color: var(--main);
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 18px;
  position: relative;
}
.joe_detail__article h1 {
  padding: 0 15px 0 20px;
}
.joe_detail__article h1::before {
  content: "¶";
  color: var(--theme);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 22px;
}
.joe_detail__article h2 {
  padding: 0 15px;
}
.joe_detail__article h2::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--theme);
}
.joe_detail__article h3 {
  padding: 0 15px;
}
.joe_detail__article h3::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--theme);
  border-radius: 0 4px 4px 0;
}
.joe_detail__article h4::before {
  content: "「";
  color: var(--theme);
  font-weight: 600;
  margin-right: 5px;
}
.joe_detail__article h4::after {
  content: "」";
  color: var(--theme);
  font-weight: 600;
  margin-left: 5px;
}
.joe_detail__article h5 {
  padding: 0 15px 0 28px;
}
.joe_detail__article h5::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==");
  background-size: 100% 100%;
}
.joe_detail__article h6 {
  padding: 0 15px 0 28px;
}
.joe_detail__article h6::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC");
  background-size: 100% 100%;
}
.joe_detail__article hr {
  border: none;
  height: 1px;
  background-color: var(--classB);
  margin-bottom: 18px;
}
.joe_detail__article p {
  line-height: 26px;
  margin-bottom: 18px;
}
/* 正文引用：左侧细绿条 + 浅灰底 + 全圆角（对齐参考截图，不再用绿字）
   竖条用 border-left 而非伪元素，能自然贴合圆角，不需要 overflow:hidden 裁剪 */
.joe_detail__article blockquote {
  line-height: 26px;
  /* 引用块整体居中，宽度跟着文字走：
     fit-content 让块收缩到内容宽度，左右 auto 外边距做水平居中；
     文字长于容器时由 max-width 兜住，自动退化成整行宽度。 */
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 12px 22px;
  background: #f6f7f7;
  border: none;
  border-left: 3px solid var(--theme);
  border-radius: 6px;
  color: var(--main);
}
html[data-night=night] .joe_detail__article blockquote {
  background: rgba(255, 255, 255, 0.05);
  color: var(--main);
  /* joe.mode.min.css 的夜间规则会给 blockquote 设 border-color: var(--classA)，
     特异性同款且先加载，会把绿色竖条刷成灰色，这里必须显式压回来 */
  border-color: var(--theme);
}
.joe_detail__article blockquote p {
  margin: 0;
}
.joe_detail__article a:not([class]) {
  display: inline-block;
  line-height: 26px;
  color: var(--theme);
  position: relative;
}
.joe_detail__article a:not([class]):hover::after {
  opacity: 1;
  transform: scaleX(1);
}
.joe_detail__article a:not([class])::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -1px;
  left: 0;
  background: var(--theme);
  transform: scaleX(0.25);
  opacity: 0;
  transition: transform 0.35s, opacity 0.35s;
}
.joe_detail__article code:not([class]) {
  display: inline-block;
  border-radius: var(--radius-inner);
  font-size: 12px;
  background: #f0f8ea;
  color: #3f9142;
  padding: 0 8px;
  vertical-align: top;
  word-break: break-word;
}
.joe_detail__article pre[class*=language-] {
  position: relative;
  margin: 0 0 18px;
  padding: 30px 0 0;
  font-size: 14px;
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.joe_detail__article pre[class*=language-] code[class*=language-] {
  display: block;
  overflow: auto;
  padding: 0 15px 12px;
}
.joe_detail__article pre[class*=language-]::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fc625d;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  z-index: 1;
}
.joe_detail__article pre[class*=language-] .copy {
  position: absolute;
  top: 9px;
  right: 15px;
  z-index: 5;
  color: #909399;
  transition: color 0.35s;
  cursor: pointer;
  user-select: none;
}
.joe_detail__article pre[class*=language-] .copy:hover {
  color: #c0c4cc;
}
.joe_detail__article img:not(.owo_image) {
  display: block;
  /* 宽度跟随图片原始尺寸：小图不放大，大图最多 800px，且不超过容器宽度 */
  width: auto !important;
  max-width: 100% !important;
  max-width: min(800px, 100%) !important;
  height: auto !important;
  border-radius: var(--radius-inner);
  transition: transform 0.35s, box-shadow 0.35s;
  cursor: zoom-in;
  margin: 0 auto;
}
.joe_detail__article img:not(.owo_image):hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
}
.joe_detail__article .owo_image {
  max-height: 26px;
  vertical-align: top;
}
.joe_detail__article ol,
.joe_detail__article ul {
  margin-bottom: 18px;
  padding-left: 36px;
}
.joe_detail__article ol li,
.joe_detail__article ul li {
  line-height: 26px;
}
.joe_detail__article ol li {
  list-style: decimal;
}
.joe_detail__article ul li {
  list-style: disc;
}
.joe_detail__article table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  color: var(--minor);
  margin-bottom: 18px;
  font-size: 13px;
  border-top: 1px solid var(--classC);
  border-left: 1px solid var(--classC);
}
.joe_detail__article table td,
.joe_detail__article table th {
  padding: 8px;
  border-bottom: 1px solid var(--classC);
  border-right: 1px solid var(--classC);
}
.joe_detail__article table thead th {
  font-weight: 500;
  background: var(--classC);
}
.joe_detail__article table tbody tr {
  transition: background 0.35s;
}
.joe_detail__article table tbody tr:hover {
  background: var(--classD);
}
.joe_detail__article-video {
  margin-bottom: 18px;
}
.joe_detail__article-video .play,
.joe_detail__article-video .episodes {
  position: relative;
  background: var(--classD);
  padding: 60px 15px 15px;
}
.joe_detail__article-video .play .title,
.joe_detail__article-video .episodes .title {
  position: absolute;
  top: 15px;
  left: -10px;
  background: var(--theme);
  color: #fff;
  font-weight: 500;
  box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  border-radius: 2px 2px 2px 0;
  user-select: none;
}
.joe_detail__article-video .play .title::after,
.joe_detail__article-video .episodes .title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-style: solid;
  border-width: 10px;
  border-color: var(--theme) transparent transparent;
  transform: rotate(90deg);
}
.joe_detail__article-video .play .box,
.joe_detail__article-video .episodes .box {
  border-top: 1px solid var(--classB);
  padding-top: 15px;
}
.joe_detail__article-video .play {
  margin-bottom: 15px;
}
.joe_detail__article-video .play .box iframe {
  background: #000;
  width: 100%;
  height: 520px;
}
.joe_detail__article-video .episodes .box {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}
.joe_detail__article-video .episodes .box .item {
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  background: var(--background);
  color: var(--routine);
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;
  padding: 0 10px;
}
.joe_detail__article-video .episodes .box .item.active {
  transform: translateY(-2px);
  color: #fff;
  background: var(--theme);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.joe_detail__article-video .episodes .box .item:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
.joe_detail__article-protected {
  display: flex;
  justify-content: center;
  background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
  padding: 20px 0;
  margin-bottom: 18px;
}
.joe_detail__article-protected .contain {
  position: relative;
  box-shadow: var(--box-shadow);
  border-radius: 20px;
  overflow: hidden;
}
.joe_detail__article-protected .contain .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
.joe_detail__article-protected .contain .password {
  width: 250px;
  height: 40px;
  border: none;
  color: var(--routine);
  padding-left: 50px;
  background: var(--background);
}
.joe_detail__article-protected .contain .submit {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: var(--main);
  border: none;
  background: none;
}
.joe_detail__operate {
  margin-bottom: 15px;
  color: var(--routine);
  display: flex;
  align-items: center;
}
.joe_detail__operate-tags {
  flex-shrink: 0;
  flex: 1;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
.joe_detail__operate-tags::-webkit-scrollbar {
  display: none;
}
.joe_detail__operate-tags a {
  flex-shrink: 0;
  position: relative;
  margin-right: 10px;
  font-size: 12px;
  background-color: var(--classD);
  color: var(--minor);
  border: 1px solid var(--classD);
  padding-right: 8px;
  padding-left: 29px;
  height: 26px;
  line-height: 26px;
  border-radius: 13px;
  max-width: 125px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.25s, color 0.25s;
}
.joe_detail__operate-tags a:hover {
  color: var(--routine);
  border: 1px solid var(--classC);
}
.joe_detail__operate-tags a:last-child, .joe_detail__operate-tags a:nth-child(5) {
  margin-right: 0;
}
.joe_detail__operate-tags a:nth-child(n+6) {
  display: none;
}
.joe_detail__operate-tags a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background: var(--background);
  border-radius: 50%;
}
.joe_detail__operate-tags a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPjxwYXRoIGQ9Ik02ODIuNjY3IDM1Ni44NDhIMzI1LjgxOGEzOC43ODggMzguNzg4IDAgMCAxLTM4Ljc4OC0zOC43ODcgMzguNzg4IDM4Ljc4OCAwIDAgMSAzOC43ODgtMzguNzg4aDM1Ni44NDlhMzguNzg4IDM4Ljc4OCAwIDAgMSAzOC43ODggMzguNzg4IDM4Ljc4OCAzOC43ODggMCAwIDEtMzguNzg4IDM4Ljc4N3oiIGZpbGw9IiM1NGI1ZGIiLz48cGF0aCBkPSJNOTA3LjYzNiAxMDI0aC0xNS41MTVMNTEyIDgwNi43ODhsLTM4MC4xMjEgMjA5LjQ1NEg5My4wOWE2Mi4wNiA2Mi4wNiAwIDAgMS0xNS41MTUtMzEuMDNWMTE2LjM2NEExMTYuMzY0IDExNi4zNjQgMCAwIDEgMTkzLjkzOSAwaDYzNi4xMjJhMTE2LjM2NCAxMTYuMzY0IDAgMCAxIDExNi4zNjMgMTE2LjM2NHY4NjguODQ4YTYyLjA2IDYyLjA2IDAgMCAxLTE1LjUxNSAzMS4wM3pNNTEyIDcyMS40NTVoMjMuMjczbDMzMy41NzUgMTg2LjE4MVYxMTYuMzY0YTM4Ljc4OCAzOC43ODggMCAwIDAtMzguNzg3LTM4Ljc4OEgxOTMuOTM5YTM4Ljc4OCAzOC43ODggMCAwIDAtMzguNzg3IDM4Ljc4OHY3OTkuMDNsMzQxLjMzMy0xODYuMTgyeiIgZmlsbD0iIzU0YjVkYiIvPjwvc3ZnPg==) no-repeat;
  background-size: 100% 100%;
}
.joe_detail__copyright {
  padding-top: 15px;
  border-top: 1px solid var(--classC);
}
.joe_detail__copyright .content {
  background: var(--classD);
  padding: 15px;
  border-radius: var(--radius-inner);
}
.joe_detail__copyright .content .item {
  color: var(--minor);
  margin-bottom: 5px;
  word-break: break-word;
  line-height: 22px;
}
.joe_detail__copyright .content .item:last-child {
  margin-bottom: 0;
}
.joe_detail__copyright .content .item .icon {
  width: 18px;
  height: 18px;
  margin-right: 3px;
  vertical-align: -4px;
}
.joe_detail__copyright .content .item .link {
  color: var(--minor);
}
.joe_detail__copyright .content .item .link:hover {
  color: var(--theme);
}
.joe_detail__related {
  padding-top: 15px;
}
.joe_detail__related-title {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: var(--main);
  padding-left: 15px;
  margin-bottom: 15px;
}
.joe_detail__related-title::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--theme);
}
.joe_detail__related-content {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, 1fr);
}
.joe_detail__related-content .item {
  overflow: hidden;
  border-radius: var(--radius-inner);
  transition: transform 0.25s, box-shadow 0.25s;
}
.joe_detail__related-content .item:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
}
.joe_detail__related-content .item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}
.joe_detail__related-content .item h6 {
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--classD);
  text-align: center;
  font-size: 13px;
  color: var(--minor);
  padding: 0 12px;
}
.joe_detail__friends {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}
.joe_detail__friends-item .contain {
  display: block;
  border-radius: var(--radius-inner);
  overflow: hidden;
  padding: 15px;
  color: #fff;
  word-break: break-word;
  transition: transform 0.35s, box-shadow 0.35s;
}
.joe_detail__friends-item .contain:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
}
.joe_detail__friends-item .contain .title {
  position: relative;
}
.joe_detail__friends-item .contain .title::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #fff;
}
.joe_detail__friends-item .contain .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.joe_detail__friends-item .contain .content .desc {
  margin-right: 10px;
}
.joe_detail__friends-item .contain .content .avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.joe_detail__leaving {
  padding-top: 15px;
}
.joe_detail__leaving-none {
  padding: 15px 0;
  text-align: center;
  user-select: none;
  color: var(--minor);
}
.joe_detail__leaving-list {
  position: relative;
  height: 500px;
}
.joe_detail__leaving-list .item {
  display: none;
  position: absolute;
  width: 200px;
  overflow: hidden;
  box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
  user-select: none;
  opacity: 0.88;
}
.joe_detail__leaving-list .item .user {
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: rgb(255, 255, 255);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.85);
  height: 40px;
  cursor: move;
}
.joe_detail__leaving-list .item .user .avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.joe_detail__leaving-list .item .user .nickname {
  min-width: 0;
  flex: 1;
  margin: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe_detail__leaving-list .item .user .nickname a {
  color: rgb(255, 255, 255);
}
.joe_detail__leaving-list .item .user .date {
  margin-left: auto;
}
.joe_detail__leaving-list .item .wrapper {
  padding: 10px;
}
.joe_detail__leaving-list .item .wrapper .content {
  height: 140px;
  overflow-y: auto;
  word-break: break-word;
  line-height: 24px;
  color: #fff;
}
.joe_detail__leaving-list .item .wrapper .content .owo_image {
  max-height: 24px;
}

.joe_footer {
  border-top: 1px solid var(--classB);
  color: var(--minor);
}
.joe_footer .joe_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 65px;
}
.joe_footer .joe_container .run {
  margin: 0 auto 0 10px;
}
.joe_footer .joe_container a {
  color: var(--minor);
  transition: all 0.35s;
}
.joe_footer .joe_container a:hover {
  color: var(--theme);
}

.joe_pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 15px;
}
.joe_pagination li {
  margin-left: 5px;
}
.joe_pagination li.active a {
  background: var(--theme);
  color: #fff;
  font-weight: 500;
}
.joe_pagination li a {
  display: flex;
  align-items: center;
  height: 32px;
  color: var(--main);
  padding: 0 15px;
  background: var(--background);
  border-radius: 2px;
  transition: background 0.35s, color 0.35s;
  user-select: none;
}
.joe_pagination li a:hover {
  background: var(--theme);
  color: #fff;
}
.joe_pagination li a:hover .icon {
  fill: #fff;
}
.joe_pagination li a .icon {
  width: 12px;
  height: 12px;
  fill: var(--routine);
  transition: fill 0.35s;
}
.joe_pagination li a .icon-next {
  transform: rotate(180deg);
}

.joe_action {
  position: fixed;
  bottom: 90px;
  right: 30px;
  z-index: 333;
}
.joe_action_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--background);
  border-radius: 50%;
  cursor: pointer;
  margin-top: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 20px rgba(0, 0, 0, 0.2);
}
.joe_action_item svg {
  position: absolute;
  width: 25px;
  height: 25px;
  fill: var(--theme);
}
.joe_action_item.scroll {
  visibility: hidden;
  transform: scale(0);
  transition: visibility 0.35s, transform 0.35s;
}
.joe_action_item.scroll.active {
  visibility: visible;
  transform: scale(1);
}
.joe_action_item.mode svg {
  transform: scale(0);
  opacity: 0;
  transition: transform 0.85s, opacity 0.85s;
}
.joe_action_item.mode svg.active {
  transform: scale(1);
  opacity: 1;
}

.joe_comment {
  /* 评论区容器不铺底色：整块透明，让页面背景（壁纸/夜间）透上来。
     原来这里的 --background 白底会把下方的瀑布流卡片包成一块大白板。 */
  background: transparent;
  border-radius: var(--radius-wrap);
  box-shadow: none;
  padding: 15px;
}
.joe_comment__title {
  font-weight: 500;
  text-align: center;
  font-size: 24px;
  color: var(--main);
  text-shadow: var(--text-shadow);
  border-bottom: 1px solid var(--classC);
  margin-bottom: 15px;
  padding-bottom: 15px;
}
.joe_comment__close {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--routine);
}
.joe_comment__close-icon {
  fill: var(--routine);
  margin-right: 5px;
}
.joe_comment__respond-form {
  border-radius: var(--radius-inner);
  background: var(--classD);
}
.joe_comment__respond-form .head {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--classA);
}
.joe_comment__respond-form .head .list {
  flex: 1;
}
.joe_comment__respond-form .head .list input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0 15px;
  height: 40px;
  color: var(--routine);
}
.joe_comment__respond-form .head .list:nth-child(2) {
  position: relative;
}
.joe_comment__respond-form .head .list:nth-child(2)::after, .joe_comment__respond-form .head .list:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--classA);
}
.joe_comment__respond-form .head .list:nth-child(2)::before {
  left: 0;
}
.joe_comment__respond-form .head .list:nth-child(2)::after {
  right: 0;
}
.joe_comment__respond-form .body {
  padding: 15px;
}
.joe_comment__respond-form .body .text {
  width: 100%;
  height: 200px;
  border: none;
  resize: none;
  vertical-align: middle;
  color: var(--routine);
  background: transparent;
}
/* 评论滑动验证：固定一段宽度，不再拉满整条底栏（窄屏仍可收缩） */
.joe_slider {
  position: relative;
  flex: 0 1 240px;
  max-width: 240px;
  min-width: 0;
  /* 间距交给 .foot 的 gap，这里不再左右各留 12px */
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}
.joe_slider__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px solid var(--classA);
  border-radius: var(--radius-inner);
  background: var(--classB);
  overflow: hidden;
  transition: border-color 0.35s, background 0.35s;
}
.joe_slider__text {
  position: relative;
  z-index: 2;
  font-size: 13px;
  color: var(--minor);
  pointer-events: none;
  transition: color 0.35s;
}
.joe_slider__fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  z-index: 1;
  background: var(--theme);
  opacity: 0.16;
  transition: width 0.2s linear, opacity 0.35s;
}
.joe_slider__handle {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 26px;
  border-radius: 3px;
  color: var(--minor);
  background: var(--background);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: grab;
  touch-action: none;
  transition: left 0.3s ease, color 0.35s, background 0.35s, box-shadow 0.35s;
}
.joe_slider__handle:focus-visible {
  outline: 2px solid var(--theme);
  outline-offset: 1px;
}
.joe_slider__handle .icon {
  position: absolute;
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: opacity 0.25s, transform 0.25s;
}
.joe_slider__handle .icon-arrow {
  fill: #ff4d4f;
}
.joe_slider__handle .icon-check {
  opacity: 0;
  transform: scale(0.6);
}
.joe_slider__tip {
  position: absolute;
  left: 2px;
  top: 100%;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--minor);
  white-space: nowrap;
}
.joe_slider__tip:empty {
  display: none;
}
.joe_slider__tip.is-error {
  color: #f56c6c;
}
.joe_slider.is-dragging .joe_slider__handle {
  cursor: grabbing;
  transition: color 0.35s, background 0.35s, box-shadow 0.35s;
}
.joe_slider.is-dragging .joe_slider__fill {
  transition: opacity 0.35s;
}
.joe_slider.is-verified .joe_slider__track {
  border-color: var(--theme);
}
.joe_slider.is-verified .joe_slider__text {
  color: var(--theme);
}
.joe_slider.is-verified .joe_slider__fill {
  opacity: 0.2;
}
.joe_slider.is-verified .joe_slider__handle {
  color: #fff;
  background: var(--theme);
  box-shadow: none;
  cursor: default;
}
.joe_slider.is-verified .joe_slider__handle .icon-arrow {
  opacity: 0;
  transform: scale(0.6);
}
.joe_slider.is-verified .joe_slider__handle .icon-check {
  opacity: 1;
  transform: scale(1);
}
.joe_slider.is-error .joe_slider__track {
  border-color: #f56c6c;
  animation: joe_slider_shake 0.4s;
}
@keyframes joe_slider_shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(3px);
  }
}
.joe_comment__respond-form .foot {
  position: relative;
  display: flex;
  align-items: center;
  /* 表情、滑块验证一起靠右，紧挨发送按钮；左侧留白给输入区视觉呼吸 */
  justify-content: flex-end;
  gap: 10px;
  padding: 0 15px 15px;
}
.joe_comment__respond-form .foot .owo {
  min-height: 32px;
  padding-top: 3px;
}
.joe_comment__respond-form .foot .owo .seat {
  text-align: center;
  color: var(--routine);
  height: 26px;
  line-height: 26px;
  background: var(--background);
  opacity: 0.85;
  border-radius: 13px;
  width: 70px;
}
.joe_comment__respond-form .foot .submit {
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: 0;
}
.joe_comment__respond-form .foot .submit .cancle {
  display: none;
  color: var(--main);
  cursor: pointer;
  margin-right: 10px;
  transition: color 0.35s;
}
.joe_comment__respond-form .foot .submit .cancle:hover {
  color: var(--theme);
}
.joe_comment__respond-form .foot .submit button {
  border-radius: 3px;
  height: 32px;
  padding: 0 15px;
  border: none;
  background: var(--theme);
  color: #fff;
  font-size: 14px;
}
.joe_comment__respond-form .foot .submit button:hover {
  animation: 5s ease-in-out 0s infinite normal none running shaked;
}
/* ===== 评论区：微信对话样式（访客：头像在左 + 浅色气泡；博主：头像在右 + 绿色气泡） ===== */
.joe_comment {
  --joe-avatar-size: 40px;
  --joe-avatar-radius: 6px;
  --joe-bubble-other: #e2f4c8;                     /* 访客气泡：浅绿 */
  --joe-bubble-other-color: #23301a;
  --joe-bubble-owner: #d7f5c1;
  --joe-bubble-owner: color-mix(in srgb, var(--theme) 34%, var(--background));
  --joe-bubble-owner-color: #1f2d16;
}
html[data-night=night] .joe_comment {
  --joe-bubble-other: rgba(191, 216, 24, 0.13);
  --joe-bubble-other-color: #e4ebd8;
  --joe-bubble-owner-color: #dce8d5;
}
.joe_comment .comment-list {
  padding-top: 15px;
  list-style: none;
}
.joe_comment .comment-list__item {
  list-style: none;
}
.joe_comment .comment-list__item-contain .term {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}
/* 头像：微信式圆角小方块 */
.joe_comment .comment-list__item-contain .term .avatar {
  flex: 0 0 auto;
  width: var(--joe-avatar-size);
  height: var(--joe-avatar-size);
  border-radius: var(--joe-avatar-radius);
  margin-right: 10px;
  padding: 0;
  border: none;
  background: var(--classC);
  object-fit: cover;
}
/* 博主自己的评论：头像、昵称、徽章、气泡整体靠右，模拟微信"我"这一侧 */
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term {
  flex-direction: row-reverse;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .avatar {
  margin-right: 0;
  margin-left: 10px;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content {
  align-items: flex-end;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content .user {
  justify-content: flex-end;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content .user .agent {
  order: -1;
  margin-left: 0;
  margin-right: 8px;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content .handle {
  justify-content: flex-end;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content .substance {
  background: var(--joe-bubble-owner);
  color: var(--joe-bubble-owner-color);
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content .substance::before {
  left: auto;
  right: -5px;
  border-right: none;
  border-left: 5px solid var(--joe-bubble-owner);
}
.joe_comment .comment-list__item-contain .term .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
  padding-bottom: 0;
}
/* 昵称行：微信里是小号浅灰字，浮在气泡上方 */
.joe_comment .comment-list__item-contain .term .content .user {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 5px;
  line-height: 18px;
  font-size: 13px;
  color: var(--minor);
}
.joe_comment .comment-list__item-contain .term .content .user .author {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 8px;
  font-weight: 500;
  /* 系统/浏览器信息现在带品牌 logo，比原来长得多；昵称不再参与压缩，装不下时改由右边换行 */
  flex: 0 0 auto;
}
.joe_comment .comment-list__item-contain .term .content .user .author a {
  color: var(--minor);
}
.joe_comment .comment-list__item-contain .term .content .user .owner {
  flex-shrink: 0;
  background: var(--theme);
  color: #fff;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 15px;
  font-style: normal;
}
.joe_comment .comment-list__item-contain .term .content .user .agent {
  margin-left: 8px;
  font-size: 12px;
  color: var(--seat);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* 剩余宽度归它，装不下时整块换行（.agent 本身 flex-wrap:wrap） */
  flex: 1 1 auto;
  min-width: 0;
}
.joe_comment .comment-list__item-contain .term .content .user .waiting {
  color: #e6a23c;
  font-style: normal;
}
/* 气泡：宽度随内容自适应，不超过 3/4，靠头像一侧留小尖角 */
.joe_comment .comment-list__item-contain .term .content .substance {
  position: relative;
  width: auto;
  max-width: min(78%, 620px);
  background: var(--joe-bubble-other);
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--joe-bubble-other-color, var(--main));
  margin-bottom: 6px;
  word-break: break-word;
  line-height: 1.75;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.joe_comment .comment-list__item-contain .term .content .substance::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -5px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid var(--joe-bubble-other);
}
/* 气泡内的代码/长串强制折行，防止撑破自适应宽度的气泡 */
.joe_comment .comment-list__item-contain .term .content .substance pre,
.joe_comment .comment-list__item-contain .term .content .substance code {
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 100%;
}
.joe_comment .comment-list__item-contain .term .content .substance .parent {
  display: block;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--theme);
  border-radius: 3px;
  color: var(--routine);
  font-size: 13px;
}
.joe_comment .comment-list__item-author > .comment-list__item-contain > .term .content .substance .parent {
  background: rgba(255, 255, 255, 0.35);
}
.joe_comment .comment-list__item-contain .term .content .substance .parent {
  color: #388bff;
  margin-bottom: 5px;
  user-select: none;
  font-weight: 500;
}
.joe_comment .comment-list__item-contain .term .content .substance .owo_image {
  height: 22px;
}
.joe_comment .comment-list__item-contain .term .content .handle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--seat);
}
/* 窄卡片里日期/回复/改网址宁可整块换行，也不要把两个字拆成两行 */
.joe_comment .comment-list__item-contain .term .content .handle > .date,
.joe_comment .comment-list__item-contain .term .content .handle > .reply,
.joe_comment .comment-list__item-contain .term .content .handle > .joe_comment__url {
  flex: 0 0 auto;
  white-space: nowrap;
}
.joe_comment .comment-list__item-contain .term .content .handle .date {
  margin-right: 0;
}
.joe_comment .comment-list__item-contain .term .content .handle .reply {
  display: flex;
  align-items: center;
  color: var(--minor);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.35s;
}
.joe_comment .comment-list__item-contain .term .content .handle .reply .icon {
  margin-right: 5px;
}
.joe_comment .comment-list__item-contain .term .content .handle .reply:hover {
  color: var(--theme);
}
.joe_comment .comment-list__item-contain .term .content .handle .reply:hover .icon {
  fill: var(--theme);
}
/* ===== 管理员维护评论者网址（仅登录的管理员能看到这个入口） ===== */
.joe_comment .comment-list__item-contain .term .content .handle .joe_comment__url {
  display: flex;
  align-items: center;
  color: var(--minor);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.35s;
}
.joe_comment .comment-list__item-contain .term .content .handle .joe_comment__url .icon {
  margin-right: 5px;
}
.joe_comment .comment-list__item-contain .term .content .handle .joe_comment__url:hover {
  color: var(--theme);
}
.joe_comment__urlbox {
  margin: 10px 0 2px;
}
.joe_comment__urlbox .row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--joe-ccard-bd, rgba(17, 24, 12, 0.14));
  border-radius: 8px;
  transition: border-color 0.25s;
}
.joe_comment__urlbox .row:focus-within {
  border-color: color-mix(in srgb, var(--theme) 55%, var(--joe-ccard-bd, rgba(17, 24, 12, 0.14)));
}
.joe_comment__urlbox .row .icon {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--minor);
}
.joe_comment__urlbox .row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--main);
  font-size: 13px;
  outline: none;
}
.joe_comment__urlbox .row input::placeholder {
  color: var(--minor);
}
.joe_comment__urlbox .foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 10px;
  margin-top: 8px;
}
.joe_comment__urlbox .foot .tip {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
  font-size: 12px;
  color: var(--minor);
}
.joe_comment__urlbox .foot .tip.is-error {
  color: #c0392b;
}
.joe_comment__urlbox .foot .clear,
.joe_comment__urlbox .foot .cancle,
.joe_comment__urlbox .foot .save {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: color 0.25s, background 0.25s, border-color 0.25s;
}
.joe_comment__urlbox .foot .clear {
  color: #c0392b;
  border-color: color-mix(in srgb, #c0392b 32%, transparent);
}
.joe_comment__urlbox .foot .clear:hover {
  background: color-mix(in srgb, #c0392b 10%, transparent);
}
.joe_comment__urlbox .foot .cancle {
  color: var(--minor);
  border-color: var(--joe-ccard-bd, rgba(17, 24, 12, 0.14));
}
.joe_comment__urlbox .foot .cancle:hover {
  color: var(--theme);
  border-color: color-mix(in srgb, var(--theme) 40%, transparent);
}
.joe_comment__urlbox .foot .save {
  background: var(--theme);
  color: #fff;
  border-color: var(--theme);
}
.joe_comment__urlbox .foot .save:disabled {
  opacity: 0.6;
  cursor: default;
}
html[data-night=night] .joe_comment__urlbox .foot .tip.is-error,
html[data-night=night] .joe_comment__urlbox .foot .clear {
  color: #ff8b7e;
}
html[data-night=night] .joe_comment__urlbox .foot .clear {
  border-color: color-mix(in srgb, #ff8b7e 34%, transparent);
}
.joe_comment .comment-list__item-children {
  margin: 2px 0 6px 4px;
  padding-left: 26px;
}
.joe_comment .comment-list__item-children > .comment-list {
  padding-top: 0;
  margin: 0;
  list-style: none;
}
.joe_comment .comment-list__item-children > .comment-list > .comment-list__item:first-child {
  padding-top: 6px;
}
.joe_comment .comment-list__item-children .comment-list__item-children .comment-list__item-children .comment-list__item-children {
  margin-left: 2px;
  padding-left: 16px;
}
/* 回复框被 JS append 进 .comment-list__item-contain（也就是卡片内部），
   卡片自带 padding，这里不再用 50px 左缩进，改成卡片内全宽 + 顶部留白 */
.joe_comment .comment-list__item .joe_comment__respond {
  margin: var(--joe-ccard-gap) 0 0;
  animation: showComment 0.5s;
}
.joe_comment .comment-list__item-author > .joe_comment__respond {
  margin-left: 0;
}
.joe_comment .comment-list__item-children .joe_comment__respond {
  margin-left: 0;
}
.joe_comment .comment-list .comment-list {
  padding-top: 0;
}

/* ===== 评论：一条留言 + 它的全部回复 = 一个卡片框 =====
   留言在上、回复在下，各自占行；卡片只负责把这一组和下一组隔开，
   层级靠 padding-left 缩进表达，不画竖线、也不做左右分栏。 */
.joe_comment {
  /* 卡底色白：浅绿留给访客气泡，页面不再整片泛绿 */
  --joe-ccard-bg: rgba(255, 255, 255, 0.74);
  --joe-ccard-bd: rgba(17, 24, 12, 0.10);
  --joe-ccard-gap: 16px;
  --joe-ccard-sd: 0 1px 2px rgba(16, 24, 12, 0.04), 0 8px 20px -10px rgba(16, 24, 12, 0.16);
  --joe-ccard-sd-hover: 0 2px 5px rgba(16, 24, 12, 0.06), 0 14px 30px -12px rgba(16, 24, 12, 0.22);
}
html[data-night=night] .joe_comment {
  --joe-ccard-bg: rgba(255, 255, 255, 0.035);
  --joe-ccard-bd: rgba(255, 255, 255, 0.10);
  --joe-ccard-sd: 0 1px 2px rgba(0, 0, 0, 0.28), 0 10px 24px -12px rgba(0, 0, 0, 0.55);
  --joe-ccard-sd-hover: 0 2px 5px rgba(0, 0, 0, 0.34), 0 16px 34px -14px rgba(0, 0, 0, 0.62);
}
.joe_comment > .comment-list > .comment-list__item {
  background: var(--joe-ccard-bg);
  border: 1px solid var(--joe-ccard-bd);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: var(--joe-ccard-gap);
  box-shadow: var(--joe-ccard-sd);
  /* hover 只改投影和描边，绝对不能用 transform：
     一旦卡片有了 transform 就会自成层叠上下文，卡片内展开的表情面板
     （.box 的 z-index:40）会被关在这张卡里，后面的卡片反过来盖住面板。
     位置靠 z-index 明排，见下面两条规则。 */
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  list-style: none;
  position: relative;
  z-index: 1;
}
/* 博主自己的留言：极淡青柠卡 */
.joe_comment > .comment-list > .comment-list__item-author {
  --joe-ccard-bg: rgba(247, 251, 233, 0.86);
  --joe-ccard-bd: rgba(139, 176, 46, 0.22);
}
html[data-night=night] .joe_comment > .comment-list > .comment-list__item-author {
  --joe-ccard-bg: rgba(191, 216, 24, 0.06);
  --joe-ccard-bd: rgba(191, 216, 24, 0.18);
}
.joe_comment > .comment-list > .comment-list__item:hover {
  box-shadow: var(--joe-ccard-sd-hover);
  border-color: color-mix(in srgb, var(--theme) 34%, var(--joe-ccard-bd));
}
/* ===== 留言序号：每层第一条留言一张卡片，序号只挂在这张卡上（回复不计数） =====
   尺寸与头像完全一致，靠卡片右上角；博主自己的卡片头像是右对齐的，
   序号镜像到左上角，避免和头像撞在一起。 */
.joe_comment > .comment-list > .comment-list__item[data-seq]::after {
  content: attr(data-seq);
  position: absolute;
  top: 14px;
  right: 14px;
  width: var(--joe-avatar-size, 40px);
  height: var(--joe-avatar-size, 40px);
  /* 带 1px 描边，走 border-box 才能和头像外径完全一致 */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--joe-avatar-radius, 6px);
  background: #dceeff;
  border: 1px solid #b3d7f8;
  color: #1d5fa8;
  font-size: calc(var(--joe-avatar-size, 40px) * 0.4);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.joe_comment > .comment-list > .comment-list__item-author[data-seq]::after {
  right: auto;
  left: 14px;
  background: #d0e9ff;
  border-color: #a9d1f6;
}
/* 夜间：底色还是半透明绿，数字往亮里提，别在深色背景上糊成一团 */
html[data-night=night] .joe_comment > .comment-list > .comment-list__item[data-seq]::after {
  background: rgba(122, 178, 255, 0.22);
  border-color: rgba(122, 178, 255, 0.40);
  color: #bcdcff;
}
/* 给序号让出位置：右上角 54px 见方，昵称/UA 行不会被压到徽章底下 */
.joe_comment > .comment-list > .comment-list__item[data-seq] > .comment-list__item-contain > .term {
  padding-right: 50px;
}
.joe_comment > .comment-list > .comment-list__item-author[data-seq] > .comment-list__item-contain > .term {
  padding-right: 0;
  padding-left: 50px;
}
/* 卡片里带回复框的那张要压住兄弟卡片，否则弹出的表情面板会被后面的卡片吃掉 */
.joe_comment > .comment-list > .comment-list__item:has(.joe_comment__respond) {
  z-index: 3;
}
/* 顶层发表评论框同理，排在所有卡片之上 */
.joe_comment > .joe_comment__respond {
  position: relative;
  z-index: 3;
}
/* 回复输入框也归到同一套卡片语言里，别让底部留一块灰补丁。
   变量带兜底值：这个表单偶尔会被输出到 .joe_comment 之外。 */
.joe_comment__respond-form {
  background: var(--joe-ccard-bg, transparent);
  border: 1px solid var(--joe-ccard-bd, rgba(17, 24, 12, 0.14));
  border-radius: 10px;
  box-shadow: var(--joe-ccard-sd, 0 1px 2px rgba(16, 24, 12, 0.05), 0 10px 24px -8px rgba(16, 24, 12, 0.20));
}
/* 点「回复」展开的表单是塞进卡片内部的，再叠投影就成了"卡中卡"，只留边框 */
.joe_comment .comment-list__item-contain .joe_comment__respond-form {
  box-shadow: none;
}
/* ===== 评论者的系统 / 浏览器 / 手机品牌图标 =====
   形状来自 Simple Icons 的品牌 path（24×24 viewBox），只画一遍，颜色交给 CSS：
   ::before 用 mask 裁形状、background-color 上色，换主题色或夜间都不用重画。
   手机品牌能识别就直接挂品牌 logo（华为/小米/OPPO/vivo/荣耀/三星/一加…），
   识别不出来才退回系统图标。 */
.joe_comment .comment-list__item-contain .term .content .user .agent {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.joe_comment .comment-list__item-contain .term .content .user .agent .ua {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.joe_comment .comment-list__item-contain .term .content .user .agent .ua::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: var(--ua-c, currentColor);
  -webkit-mask-image: var(--ua-i);
  mask-image: var(--ua-i);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* 彩色 sprite 图标（系统 + 主流浏览器）：<use> 引用 symbol，图标自带颜色，不走 mask */
.joe_comment .comment-list__item-contain .term .content .user .agent .joe-ua {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
}
/* 已有彩色图标就不再画 mask 兜底图标，避免同一行出现两个 */
.joe_comment .comment-list__item-contain .term .content .user .agent .ua.is-svg::before {
  display: none;
}
.joe_comment .comment-list__item-contain .term .content .user .agent .ua .ua-t {
  font-style: normal;
  line-height: 1;
}
/* 纯文字型的品牌标（三星/荣耀/OPPO/诺基亚/索尼/联想/魅族/HTC/华硕/HarmonyOS）
   是横向 wordmark，塞进 13px 方块会压成一条线，给它们单独放宽格子 */
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-samsung::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-honor::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-oppo::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-nokia::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-sony::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-lenovo::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-meizu::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-htc::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-asus::before,
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-harmony::before {
  width: 34px;
  height: 15px;
}
.joe_comment .comment-list__item-contain .term .content .user .agent .ua-sep {
  margin: 0 5px;
  opacity: 0.45;
}
/* 未知浏览器：地球；未知 Android 机型：手机轮廓 */
.ua-browser {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm6.9 6h-2.6a15.6 15.6 0 0 0-1.5-3.4A8 8 0 0 1 18.9 8zM12 4.3c.7 1 1.3 2.3 1.7 3.7h-3.4c.4-1.4 1-2.7 1.7-3.7zM4.3 14a8 8 0 0 1 0-4h3a19 19 0 0 0 0 4zm.8 2h2.6c.4 1.2.9 2.4 1.5 3.4A8 8 0 0 1 5.1 16zm2.6-8H5.1a8 8 0 0 1 4.1-3.4A15.6 15.6 0 0 0 7.7 8zM12 19.7c-.7-1-1.3-2.3-1.7-3.7h3.4c-.4 1.4-1 2.7-1.7 3.7zM14.2 14H9.8a17 17 0 0 1 0-4h4.4a17 17 0 0 1 0 4zm.6 5.4c.6-1 1.1-2.2 1.5-3.4h2.6a8 8 0 0 1-4.1 3.4zM16.7 14a19 19 0 0 0 0-4h3a8 8 0 0 1 0 4z'/%3E%3C/svg%3E");
}
.ua-phone {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 1h10a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 2v3h10V3zm5 15.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z'/%3E%3C/svg%3E");
}

.ua-win {
  --ua-c: #0078D4;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H11.377V11.372H0ZM12.623,0H24V11.372H12.623ZM0,12.623H11.377V24H0Zm12.623,0H24V24H12.623'/%3E%3C/svg%3E");
}
.ua-mac {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}
.ua-ios {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}
.ua-android {
  --ua-c: #3DDC84;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.4395 5.5586c-.675 1.1664-1.352 2.3318-2.0274 3.498-.0366-.0155-.0742-.0286-.1113-.043-1.8249-.6957-3.484-.8-4.42-.787-1.8551.0185-3.3544.4643-4.2597.8203-.084-.1494-1.7526-3.021-2.0215-3.4864a1.1451 1.1451 0 0 0-.1406-.1914c-.3312-.364-.9054-.4859-1.379-.203-.475.282-.7136.9361-.3886 1.5019 1.9466 3.3696-.0966-.2158 1.9473 3.3593.0172.031-.4946.2642-1.3926 1.0177C2.8987 12.176.452 14.772 0 18.9902h24c-.119-1.1108-.3686-2.099-.7461-3.0683-.7438-1.9118-1.8435-3.2928-2.7402-4.1836a12.1048 12.1048 0 0 0-2.1309-1.6875c.6594-1.122 1.312-2.2559 1.9649-3.3848.2077-.3615.1886-.7956-.0079-1.1191a1.1001 1.1001 0 0 0-.8515-.5332c-.5225-.0536-.9392.3128-1.0488.5449zm-.0391 8.461c.3944.5926.324 1.3306-.1563 1.6503-.4799.3197-1.188.0985-1.582-.4941-.3944-.5927-.324-1.3307.1563-1.6504.4727-.315 1.1812-.1086 1.582.4941zM7.207 13.5273c.4803.3197.5506 1.0577.1563 1.6504-.394.5926-1.1038.8138-1.584.4941-.48-.3197-.5503-1.0577-.1563-1.6504.4008-.6021 1.1087-.8106 1.584-.4941z'/%3E%3C/svg%3E");
}
.ua-harmony {
  --ua-c: #0A59F7;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.861 0H3.59v3.548h3.861V0H9.19v8.883H7.458V5.136H3.59v3.746H1.858Zm8.248 8.883ZM13.854 0h1.706l2.809 4.7h.1L21.278 0h1.719v8.883h-1.719v-4.38l.1-1.489h-.1l-2.334 3.983h-1.039l-2.347-3.983h-.1l.1 1.489v4.38h-1.706Zm4.702 21.648a4.082 4.082 0 0 1-1.154-.161 3.417 3.417 0 0 1-1.01-.484 3.5 3.5 0 0 1-.8-.782 3.817 3.817 0 0 1-.538-1.092l1.666-.62a2.411 2.411 0 0 0 .643 1.116 1.683 1.683 0 0 0 1.207.434 2.173 2.173 0 0 0 .524-.062 1.749 1.749 0 0 0 .459-.2 1.02 1.02 0 0 0 .328-.335.88.88 0 0 0 .118-.459 1.052 1.052 0 0 0-.092-.447 1.031 1.031 0 0 0-.315-.373 2.538 2.538 0 0 0-.564-.335 8.135 8.135 0 0 0-.852-.335l-.577-.2a4.753 4.753 0 0 1-.774-.335 3.44 3.44 0 0 1-.7-.509 2.662 2.662 0 0 1-.525-.695 2.093 2.093 0 0 1-.2-.918 2.248 2.248 0 0 1 .21-.968 2.433 2.433 0 0 1 .616-.794 2.87 2.87 0 0 1 .957-.533 3.726 3.726 0 0 1 1.246-.2 3.57 3.57 0 0 1 1.22.186 2.783 2.783 0 0 1 .879.459 2.468 2.468 0 0 1 .59.608 2.9 2.9 0 0 1 .328.633l-1.56.62a1.55 1.55 0 0 0-.485-.67 1.387 1.387 0 0 0-.944-.3 1.655 1.655 0 0 0-.957.261.754.754 0 0 0-.38.658.843.843 0 0 0 .367.682 4.232 4.232 0 0 0 1.167.534l.59.186a6.271 6.271 0 0 1 1.023.434 2.948 2.948 0 0 1 .8.57 2.191 2.191 0 0 1 .511.769 2.44 2.44 0 0 1 .183.98 2.317 2.317 0 0 1-.3 1.2 2.559 2.559 0 0 1-.747.819 3.361 3.361 0 0 1-1.036.484 4.184 4.184 0 0 1-1.128.161Zm-13.028 0a4.441 4.441 0 0 1-3.23-1.34 4.757 4.757 0 0 1-.956-1.476 4.912 4.912 0 0 1-.339-1.824 4.813 4.813 0 0 1 .339-1.811 4.569 4.569 0 0 1 .956-1.477 4.38 4.38 0 0 1 1.427-.992 4.5 4.5 0 0 1 1.8-.36 4.417 4.417 0 0 1 1.79.36 4.343 4.343 0 0 1 1.44.992 4.418 4.418 0 0 1 .944 1.477 4.67 4.67 0 0 1 .351 1.811 4.765 4.765 0 0 1-.351 1.824 4.589 4.589 0 0 1-.944 1.476 4.495 4.495 0 0 1-3.23 1.34Zm0-1.588a2.822 2.822 0 0 0 1.125-.223 2.761 2.761 0 0 0 .92-.621 2.723 2.723 0 0 0 .617-.955 3.321 3.321 0 0 0 .23-1.253 3.227 3.227 0 0 0-.23-1.24 2.7 2.7 0 0 0-.617-.968 2.759 2.759 0 0 0-.92-.62 2.821 2.821 0 0 0-1.125-.223 2.856 2.856 0 0 0-2.057.844 2.946 2.946 0 0 0-.617.968 3.388 3.388 0 0 0-.218 1.24 3.488 3.488 0 0 0 .218 1.253 2.972 2.972 0 0 0 .617.955 2.856 2.856 0 0 0 2.057.843Zm4.972 1.389Zm-8.269 1.039h6.5V24h-6.5Z'/%3E%3C/svg%3E");
}
.ua-linux {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.132 1.884 1.071.771-.06 1.592-.536 2.257-1.306.631-.765 1.683-1.084 2.378-1.503.348-.199.629-.469.649-.853.023-.4-.2-.811-.714-1.376v-.097l-.003-.003c-.17-.2-.25-.535-.338-.926-.085-.401-.182-.786-.492-1.046h-.003c-.059-.054-.123-.067-.188-.135a.357.357 0 00-.19-.064c.431-1.278.264-2.55-.173-3.694-.533-1.41-1.465-2.638-2.175-3.483-.796-1.005-1.576-1.957-1.56-3.368.026-2.152.236-6.133-3.544-6.139zm.529 3.405h.013c.213 0 .396.062.584.198.19.135.33.332.438.533.105.259.158.459.166.724 0-.02.006-.04.006-.06v.105a.086.086 0 01-.004-.021l-.004-.024a1.807 1.807 0 01-.15.706.953.953 0 01-.213.335.71.71 0 00-.088-.042c-.104-.045-.198-.064-.284-.133a1.312 1.312 0 00-.22-.066c.05-.06.146-.133.183-.198.053-.128.082-.264.088-.402v-.02a1.21 1.21 0 00-.061-.4c-.045-.134-.101-.2-.183-.333-.084-.066-.167-.132-.267-.132h-.016c-.093 0-.176.03-.262.132a.8.8 0 00-.205.334 1.18 1.18 0 00-.09.4v.019c.002.089.008.179.02.267-.193-.067-.438-.135-.607-.202a1.635 1.635 0 01-.018-.2v-.02a1.772 1.772 0 01.15-.768c.082-.22.232-.406.43-.533a.985.985 0 01.594-.2zm-2.962.059h.036c.142 0 .27.048.399.135.146.129.264.288.344.465.09.199.14.4.153.667v.004c.007.134.006.2-.002.266v.08c-.03.007-.056.018-.083.024-.152.055-.274.135-.393.2.012-.09.013-.18.003-.267v-.015c-.012-.133-.04-.2-.082-.333a.613.613 0 00-.166-.267.248.248 0 00-.183-.064h-.021c-.071.006-.13.04-.186.132a.552.552 0 00-.12.27.944.944 0 00-.023.33v.015c.012.135.037.2.08.334.046.134.098.2.166.268.01.009.02.018.034.024-.07.057-.117.07-.176.136a.304.304 0 01-.131.068 2.62 2.62 0 01-.275-.402 1.772 1.772 0 01-.155-.667 1.759 1.759 0 01.08-.668 1.43 1.43 0 01.283-.535c.128-.133.26-.2.418-.2zm1.37 1.706c.332 0 .733.065 1.216.399.293.2.523.269 1.052.468h.003c.255.136.405.266.478.399v-.131a.571.571 0 01.016.47c-.123.31-.516.643-1.063.842v.002c-.268.135-.501.333-.775.465-.276.135-.588.292-1.012.267a1.139 1.139 0 01-.448-.067 3.566 3.566 0 01-.322-.198c-.195-.135-.363-.332-.612-.465v-.005h-.005c-.4-.246-.616-.512-.686-.71-.07-.268-.005-.47.193-.6.224-.135.38-.271.483-.336.104-.074.143-.102.176-.131h.002v-.003c.169-.202.436-.47.839-.601.139-.036.294-.065.466-.065zm2.8 2.142c.358 1.417 1.196 3.475 1.735 4.473.286.534.855 1.659 1.102 3.024.156-.005.33.018.513.064.646-1.671-.546-3.467-1.089-3.966-.22-.2-.232-.335-.123-.335.59.534 1.365 1.572 1.646 2.757.13.535.16 1.104.021 1.67.067.028.135.06.205.067 1.032.534 1.413.938 1.23 1.537v-.043c-.06-.003-.12 0-.18 0h-.016c.151-.467-.182-.825-1.065-1.224-.915-.4-1.646-.336-1.77.465-.008.043-.013.066-.018.135-.068.023-.139.053-.209.064-.43.268-.662.669-.793 1.187-.13.533-.17 1.156-.205 1.869v.003c-.02.334-.17.838-.319 1.35-1.5 1.072-3.58 1.538-5.348.334a2.645 2.645 0 00-.402-.533 1.45 1.45 0 00-.275-.333c.182 0 .338-.03.465-.067a.615.615 0 00.314-.334c.108-.267 0-.697-.345-1.163-.345-.467-.931-.995-1.788-1.521-.63-.4-.986-.87-1.15-1.396-.165-.534-.143-1.085-.015-1.645.245-1.07.873-2.11 1.274-2.763.107-.065.037.135-.408.974-.396.751-1.14 2.497-.122 3.854a8.123 8.123 0 01.647-2.876c.564-1.278 1.743-3.504 1.836-5.268.048.036.217.135.289.202.218.133.38.333.59.465.21.201.477.335.876.335.039.003.075.006.11.006.412 0 .73-.134.997-.268.29-.134.52-.334.74-.4h.005c.467-.135.835-.402 1.044-.7zm2.185 8.958c.037.6.343 1.245.882 1.377.588.134 1.434-.333 1.791-.765l.211-.01c.315-.007.577.01.847.268l.003.003c.208.199.305.53.391.876.085.4.154.78.409 1.066.486.527.645.906.636 1.14l.003-.007v.018l-.003-.012c-.015.262-.185.396-.498.595-.63.401-1.746.712-2.457 1.57-.618.737-1.37 1.14-2.036 1.191-.664.053-1.237-.2-1.574-.898l-.005-.003c-.21-.4-.12-1.025.056-1.69.176-.668.428-1.344.463-1.897.037-.714.076-1.335.195-1.814.12-.465.308-.797.641-.984l.045-.022zm-10.814.049h.01c.053 0 .105.005.157.014.376.055.706.333 1.023.752l.91 1.664.003.003c.243.533.754 1.064 1.189 1.637.434.598.77 1.131.729 1.57v.006c-.057.744-.48 1.148-1.125 1.294-.645.135-1.52.002-2.395-.464-.968-.536-2.118-.469-2.857-.602-.369-.066-.61-.2-.723-.4-.11-.2-.113-.602.123-1.23v-.004l.002-.003c.117-.334.03-.752-.027-1.118-.055-.401-.083-.71.043-.94.16-.334.396-.4.69-.533.294-.135.64-.202.915-.47h.002v-.002c.256-.268.445-.601.668-.838.19-.201.38-.336.663-.336zm7.159-9.074c-.435.201-.945.535-1.488.535-.542 0-.97-.267-1.28-.466-.154-.134-.28-.268-.373-.335-.164-.134-.144-.333-.074-.333.109.016.129.134.199.2.096.066.215.2.36.333.292.2.68.467 1.167.467.485 0 1.053-.267 1.398-.466.195-.135.445-.334.648-.467.156-.136.149-.267.279-.267.128.016.034.134-.147.332a8.097 8.097 0 01-.69.468zm-1.082-1.583V5.64c-.006-.02.013-.042.029-.05.074-.043.18-.027.26.004.063 0 .16.067.15.135-.006.049-.085.066-.135.066-.055 0-.092-.043-.141-.068-.052-.018-.146-.008-.163-.065zm-.551 0c-.02.058-.113.049-.166.066-.047.025-.086.068-.14.068-.05 0-.13-.02-.136-.068-.01-.066.088-.133.15-.133.08-.031.184-.047.259-.005.019.009.036.03.03.05v.02h.003z'/%3E%3C/svg%3E");
}
.ua-ubuntu {
  --ua-c: #E95420;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.61.455a3.41 3.41 0 0 0-3.41 3.41 3.41 3.41 0 0 0 3.41 3.41 3.41 3.41 0 0 0 3.41-3.41 3.41 3.41 0 0 0-3.41-3.41zM12.92.8C8.923.777 5.137 2.941 3.148 6.451a4.5 4.5 0 0 1 .26-.007 4.92 4.92 0 0 1 2.585.737A8.316 8.316 0 0 1 12.688 3.6 4.944 4.944 0 0 1 13.723.834 11.008 11.008 0 0 0 12.92.8zm9.226 4.994a4.915 4.915 0 0 1-1.918 2.246 8.36 8.36 0 0 1-.273 8.303 4.89 4.89 0 0 1 1.632 2.54 11.156 11.156 0 0 0 .559-13.089zM3.41 7.932A3.41 3.41 0 0 0 0 11.342a3.41 3.41 0 0 0 3.41 3.409 3.41 3.41 0 0 0 3.41-3.41 3.41 3.41 0 0 0-3.41-3.41zm2.027 7.866a4.908 4.908 0 0 1-2.915.358 11.1 11.1 0 0 0 7.991 6.698 11.234 11.234 0 0 0 2.422.249 4.879 4.879 0 0 1-.999-2.85 8.484 8.484 0 0 1-.836-.136 8.304 8.304 0 0 1-5.663-4.32zm11.405.928a3.41 3.41 0 0 0-3.41 3.41 3.41 3.41 0 0 0 3.41 3.41 3.41 3.41 0 0 0 3.41-3.41 3.41 3.41 0 0 0-3.41-3.41z'/%3E%3C/svg%3E");
}
.ua-apple {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701'/%3E%3C/svg%3E");
}
.ua-samsung {
  --ua-c: #1428A0;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.8166 10.2808l.0459 2.6934h-.023l-.7793-2.6934h-1.2837v3.3925h.8481l-.0458-2.785h.023l.8366 2.785h1.2264v-3.3925zm-16.149 0l-.6418 3.427h.9284l.4699-3.1175h.0229l.4585 3.1174h.9169l-.6304-3.4269zm5.1805 0l-.424 2.6132h-.023l-.424-2.6132H6.5788l-.0688 3.427h.8596l.023-3.0832h.0114l.573 3.0831h.8711l.5731-3.083h.023l.0228 3.083h.8596l-.0802-3.4269zm-7.2664 2.4527c.0343.0802.0229.1949.0114.2522-.0229.1146-.1031.2292-.3324.2292-.2177 0-.3438-.126-.3438-.3095v-.3323H0v.2636c0 .7679.6074.9971 1.2493.9971.6189 0 1.1346-.2178 1.2149-.7794.0458-.298.0114-.4928 0-.5616-.1605-.722-1.467-.9283-1.5588-1.3295-.0114-.0688-.0114-.1375 0-.1834.023-.1146.1032-.2292.3095-.2292.2063 0 .321.126.321.3095v.2063h.8595v-.2407c0-.745-.6762-.8596-1.1576-.8596-.6074 0-1.1117.2063-1.2034.7564-.023.149-.0344.2866.0114.4585.1376.7106 1.364.9169 1.5358 1.3524m11.152 0c.0343.0803.0228.1834.0114.2522-.023.1146-.1032.2292-.3324.2292-.2178 0-.3438-.126-.3438-.3095v-.3323h-.917v.2636c0 .7564.596.9857 1.2379.9857.6189 0 1.1232-.2063 1.2034-.7794.0459-.298.0115-.4814 0-.5616-.1375-.7106-1.4327-.9284-1.5243-1.318-.0115-.0688-.0115-.1376 0-.1835.0229-.1146.1031-.2292.3094-.2292.1948 0 .321.126.321.3095v.2063h.848v-.2407c0-.745-.6647-.8596-1.146-.8596-.6075 0-1.1004.1948-1.192.7564-.023.149-.023.2866.0114.4585.1376.7106 1.341.9054 1.513 1.3524m2.8882.4585c.2407 0 .3094-.1605.3323-.2522.0115-.0343.0115-.0917.0115-.126v-2.533h.871v2.4642c0 .0688 0 .1948-.0114.2292-.0573.6419-.5616.8482-1.192.8482-.6303 0-1.1346-.2063-1.192-.8482 0-.0344-.0114-.1604-.0114-.2292v-2.4642h.871v2.533c0 .0458 0 .0916.0115.126 0 .0917.0688.2522.3095.2522m7.1518-.0344c.2522 0 .3324-.1605.3553-.2522.0115-.0343.0115-.0917.0115-.126v-.4929h-.3553v-.5043H24v.917c0 .0687 0 .1145-.0115.2292-.0573.6303-.596.8481-1.2034.8481-.6075 0-1.1461-.2178-1.2034-.8481-.0115-.1147-.0115-.1605-.0115-.2293v-1.444c0-.0574.0115-.172.0115-.2293.0802-.6419.596-.8482 1.2034-.8482s1.1347.2063 1.2034.8482c.0115.1031.0115.2292.0115.2292v.1146h-.8596v-.1948s0-.0803-.0115-.1261c-.0114-.0802-.0802-.2521-.3438-.2521-.2521 0-.321.1604-.3438.2521-.0115.0458-.0115.1032-.0115.1605v1.5702c0 .0458 0 .0916.0115.126 0 .0917.0917.2522.3323.2522'/%3E%3C/svg%3E");
}
.ua-huawei {
  --ua-c: #E60012;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.67 6.14S1.82 7.91 1.72 9.78v.35c.08 1.51 1.22 2.4 1.22 2.4 1.83 1.79 6.26 4.04 7.3 4.55 0 0 .06.03.1-.01l.02-.04v-.04C7.52 10.8 3.67 6.14 3.67 6.14zM9.65 18.6c-.02-.08-.1-.08-.1-.08l-7.38.26c.8 1.43 2.15 2.53 3.56 2.2.96-.25 3.16-1.78 3.88-2.3.06-.05.04-.09.04-.09zm.08-.78C6.49 15.63.21 12.28.21 12.28c-.15.46-.2.9-.21 1.3v.07c0 1.07.4 1.82.4 1.82.8 1.69 2.34 2.2 2.34 2.2.7.3 1.4.31 1.4.31.12.02 4.4 0 5.54 0 .05 0 .08-.05.08-.05v-.06c0-.03-.03-.05-.03-.05zM9.06 3.19a3.42 3.42 0 00-2.57 3.15v.41c.03.6.16 1.05.16 1.05.66 2.9 3.86 7.65 4.55 8.65.05.05.1.03.1.03a.1.1 0 00.06-.1c1.06-10.6-1.11-13.42-1.11-13.42-.32.02-1.19.23-1.19.23zm8.299 2.27s-.49-1.8-2.44-2.28c0 0-.57-.14-1.17-.22 0 0-2.18 2.81-1.12 13.43.01.07.06.08.06.08.07.03.1-.03.1-.03.72-1.03 3.9-5.76 4.55-8.64 0 0 .36-1.4.02-2.34zm-2.92 13.07s-.07 0-.09.05c0 0-.01.07.03.1.7.51 2.85 2 3.88 2.3 0 0 .16.05.43.06h.14c.69-.02 1.9-.37 3-2.26l-7.4-.25zm7.83-8.41c.14-2.06-1.94-3.97-1.94-3.98 0 0-3.85 4.66-6.67 10.8 0 0-.03.08.02.13l.04.01h.06c1.06-.53 5.46-2.77 7.28-4.54 0 0 1.15-.93 1.21-2.42zm1.52 2.14s-6.28 3.37-9.52 5.55c0 0-.05.04-.03.11 0 0 .03.06.07.06 1.16 0 5.56 0 5.67-.02 0 0 .57-.02 1.27-.29 0 0 1.56-.5 2.37-2.27 0 0 .73-1.45.17-3.14z'/%3E%3C/svg%3E");
}
.ua-honor {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.601 9.753v1.823H.807V9.753H0v4.498h.807v-1.874h1.794v1.874h.807V9.753h-.807Zm18.671.801h.898c.369 0 .667.297.667.662a.665.665 0 0 1-.667.663h-.898v-1.325Zm-.806-.801v4.498h.806v-2.002l1.68 2.002H24l-1.376-1.64a1.462 1.462 0 0 0-.444-2.858h-1.716.002Zm-7.63-.014v2.807l-1.959-2.807h-.644v4.498h.807v-2.82l1.968 2.82h.633V9.739h-.805Zm-7.532 2.26c0-.832.68-1.506 1.517-1.506A1.51 1.51 0 0 1 8.337 12c0 .832-.679 1.506-1.516 1.506-.403 0-.789-.159-1.073-.441A1.504 1.504 0 0 1 5.304 12v-.001ZM4.497 12c0 .933.566 1.774 1.434 2.132.869.357 1.868.16 2.533-.5.664-.66.863-1.653.503-2.515a2.324 2.324 0 0 0-2.146-1.425 2.316 2.316 0 0 0-2.323 2.307L4.497 12Zm11.04-.001a1.513 1.513 0 0 1 1.518-1.506c.838 0 1.516.675 1.516 1.507a1.513 1.513 0 0 1-1.518 1.506c-.402 0-.788-.159-1.072-.441a1.5 1.5 0 0 1-.444-1.066ZM14.73 12c0 .933.566 1.774 1.434 2.132.868.357 1.868.16 2.532-.5.665-.66.864-1.653.504-2.515a2.325 2.325 0 0 0-2.147-1.425 2.316 2.316 0 0 0-2.323 2.307V12Z'/%3E%3C/svg%3E");
}
.ua-xiaomi {
  --ua-c: #FF6900;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.016 0 4.756.255 2.493 2.516.23 4.776 0 8.033 0 12.012c0 3.98.23 7.235 2.494 9.497C4.757 23.77 8.017 24 12 24c3.983 0 7.243-.23 9.506-2.491C23.77 19.247 24 15.99 24 12.012c0-3.984-.233-7.243-2.502-9.504C19.234.252 15.978 0 12 0zM4.906 7.405h5.624c1.47 0 3.007.068 3.764.827.746.746.827 2.233.83 3.676v4.54a.15.15 0 0 1-.152.147h-1.947a.15.15 0 0 1-.152-.148V11.83c-.002-.806-.048-1.634-.464-2.051-.358-.36-1.026-.441-1.72-.458H7.158a.15.15 0 0 0-.151.147v6.98a.15.15 0 0 1-.152.148H4.906a.15.15 0 0 1-.15-.148V7.554a.15.15 0 0 1 .15-.149zm12.131 0h1.949a.15.15 0 0 1 .15.15v8.892a.15.15 0 0 1-.15.148h-1.949a.15.15 0 0 1-.151-.148V7.554a.15.15 0 0 1 .151-.149zM8.92 10.948h2.046c.083 0 .15.066.15.147v5.352a.15.15 0 0 1-.15.148H8.92a.15.15 0 0 1-.152-.148v-5.352a.15.15 0 0 1 .152-.147Z'/%3E%3C/svg%3E");
}
.ua-oppo {
  --ua-c: #1D7A46;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.85 12.786h-.001C1.639 12.774.858 12.2.858 11.321s.781-1.452 1.99-1.465c1.21.013 1.992.588 1.992 1.465s-.782 1.453-1.99 1.465zm.034-3.638h-.073C1.156 9.175 0 10.068 0 11.32s1.156 2.147 2.811 2.174h.073c1.655-.027 2.811-.921 2.811-2.174S4.54 9.175 2.885 9.148zm18.27 3.638c-1.21-.012-1.992-.587-1.992-1.465s.782-1.452 1.991-1.465c1.21.013 1.991.588 1.991 1.465s-.781 1.453-1.99 1.465zm.035-3.638h-.073c-1.655.027-2.811.92-2.811 2.173s1.156 2.147 2.81 2.174h.074C22.844 13.468 24 12.574 24 11.32s-1.156-2.146-2.811-2.173zm-6.126 3.638c-1.21-.012-1.99-.587-1.99-1.465s.78-1.452 1.99-1.465c1.21.013 1.991.588 1.991 1.465s-.781 1.453-1.99 1.465zm.036-3.638h-.073c-.789.013-1.464.222-1.955.574v-.37h-.857v5.5h.857v-1.931c.49.351 1.166.56 1.954.574h.074c1.655-.027 2.81-.921 2.81-2.174s-1.155-2.146-2.81-2.173zm-6.144 3.638c-1.21-.012-1.99-.587-1.99-1.465s.78-1.452 1.99-1.465c1.21.013 1.991.588 1.991 1.465s-.781 1.453-1.99 1.465zm.037-3.638H8.92c-.789.013-1.464.222-1.955.574v-.37h-.856v5.5h.856v-1.931c.491.351 1.166.56 1.955.574a3.728 3.728 0 0 0 .073 0c1.655-.027 2.811-.921 2.811-2.174s-1.156-2.146-2.81-2.173z'/%3E%3C/svg%3E");
}
.ua-vivo {
  --ua-c: #415FFF;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.604 14.101c-1.159 0-1.262-.95-1.262-1.24 0-.29.103-1.242 1.262-1.242h2.062c1.16 0 1.263.951 1.263 1.242 0 .29-.104 1.24-1.263 1.24m-2.062-3.527c-2.142 0-2.333 1.752-2.333 2.287 0 .535.19 2.286 2.333 2.286h2.062c2.143 0 2.334-1.751 2.334-2.286 0-.535-.19-2.287-2.334-2.287m-5.477.107c-.286 0-.345.05-.456.213-.11.164-2.022 3.082-2.022 3.082-.06.09-.126.126-.206.126-.08 0-.145-.036-.206-.126 0 0-1.912-2.918-2.022-3.082-.11-.164-.17-.213-.456-.213h-.668c-.154 0-.224.12-.127.267l2.283 3.467c.354.521.614.732 1.196.732s.842-.21 1.196-.732l2.284-3.467c.096-.146.026-.267-.128-.267m-8.876.284c0-.203.08-.284.283-.284h.505c.203 0 .283.08.283.283v3.9c0 .202-.08.283-.283.283h-.505c-.203 0-.283-.08-.283-.283zm-1.769-.285c-.287 0-.346.05-.456.213-.11.164-2.022 3.082-2.022 3.082-.061.09-.126.126-.206.126-.08 0-.145-.036-.206-.126 0 0-1.912-2.918-2.023-3.082-.11-.164-.169-.213-.455-.213H.175c-.171 0-.224.12-.127.267l2.283 3.467c.355.521.615.732 1.197.732.582 0 .842-.21 1.196-.732l2.283-3.467c.097-.146.044-.267-.127-.267m1.055-.893c-.165-.164-.165-.295 0-.46l.351-.351c.165-.165.296-.165.46 0l.352.351c.165.165.165.296 0 .46l-.352.352c-.164.165-.295.165-.46 0z'/%3E%3C/svg%3E");
}
.ua-oneplus {
  --ua-c: #F5010C;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 3.74V24h20.26V12.428h-2.256v9.317H2.254V5.995h9.318V3.742zM18.004 0v3.74h-3.758v2.256h3.758v3.758h2.255V5.996H24V3.74h-3.758V0zm-6.45 18.756V8.862H9.562c0 .682-.228 1.189-.577 1.504-.367.297-.91.437-1.556.437h-.245v1.625h2.133v6.31h2.237z'/%3E%3C/svg%3E");
}
.ua-meizu {
  --ua-c: #00A0E9;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.045 18.818h3.546A.41.41 0 0 0 24 18.41v-3.545a.41.41 0 0 0-.41-.41h-3.545a.41.41 0 0 0-.409.41v3.545c0 .226.184.41.41.41zM13.8 12.11a.095.095 0 0 1-.163-.068V5.591a.41.41 0 0 0-.409-.41H10.59a.545.545 0 0 0-.385.16L.16 15.387a.545.545 0 0 0-.16.385v2.638c0 .226.183.41.41.41h2.637a.547.547 0 0 0 .385-.16l6.769-6.769a.096.096 0 0 1 .163.068v6.451c0 .226.183.41.409.41h2.638a.547.547 0 0 0 .385-.16L23.84 8.613A.545.545 0 0 0 24 8.23V5.59a.41.41 0 0 0-.41-.41h-2.637a.546.546 0 0 0-.386.16z'/%3E%3C/svg%3E");
}
.ua-motorola {
  --ua-c: #E1140A;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C24.002 5.375 18.632.002 12.007 0H12zm7.327 18.065s-.581-2.627-1.528-4.197c-.514-.857-1.308-1.553-2.368-1.532-.745 0-1.399.423-2.2 1.553-.469.77-.882 1.573-1.235 2.403 0 0-.29-.675-.63-1.343a8.038 8.038 0 0 0-.605-1.049c-.804-1.13-1.455-1.539-2.2-1.553-1.049-.021-1.854.675-2.364 1.528-.948 1.574-1.528 4.197-1.528 4.197h-.864l4.606-15.12 3.56 11.804.024.021.024-.021 3.56-11.804 4.61 15.113h-.862z'/%3E%3C/svg%3E");
}
.ua-google {
  --ua-c: #4285F4;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z'/%3E%3C/svg%3E");
}
.ua-sony {
  --ua-c: currentColor;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5505 9.8881c.921 0 1.6574.2303 2.2209.7423.3848.3485.5999.8454.5939 1.3665a1.9081 1.9081 0 0 1-.5939 1.3726c-.5272.4848-1.3483.7423-2.221.7423-.8725 0-1.6785-.2575-2.2148-.7423-.3908-.3485-.609-.8484-.603-1.3726 0-.518.2182-1.015.603-1.3665.5-.4545 1.3847-.7423 2.2149-.7423zm.003 3.6692c.4606 0 .8878-.1606 1.1878-.4575.2999-.2999.4332-.6605.4332-1.1029 0-.4242-.1484-.821-.4333-1.1029-.2938-.2908-.7332-.4545-1.1877-.4545s-.8938.1637-1.1907.4545c-.2848.2818-.4333.6787-.4333 1.103-.006.409.1485.806.4333 1.1029.2969.2939.7332.4575 1.1907.4575zm-4.8418-1.9665c.1605.0424.315.094.4666.1636a1.352 1.352 0 0 1 .3787.2576c.197.206.309.4817.306.7665a.9643.9643 0 0 1-.3787.7788 2.0662 2.0662 0 0 1-.709.3485 3.7231 3.7231 0 0 1-1.1938.1697c-.352 0-.5467-.0406-.8138-.0962l-.077-.016c-.294-.0666-.5817-.1575-.8575-.2787a.0695.0695 0 0 0-.0424-.0121c-.0454 0-.0818.0394-.0818.0848v.203H.1212v-1.4786h.5242a.7559.7559 0 0 0 .1363.418c.2121.2607.4394.3607.6575.4395.3666.1212.7514.1848 1.1362.1969.5526 0 .8756-.134.9455-.163l.009-.0037.0062-.0023c.0616-.0226.3119-.1143.3119-.3916 0-.2743-.2338-.334-.387-.373l-.022-.0058c-.1708-.046-.562-.0872-.9897-.1323l-.1526-.016c-.4848-.0515-.9696-.1273-1.1968-.1758-.4977-.1097-.6942-.2917-.816-.4045l-.0082-.0076A1.0192 1.0192 0 0 1 0 11.1608c0-.497.3394-.797.7575-.9817.4454-.2.9756-.288 1.4392-.288.8211.0031 1.4877.2697 1.727.394.097.0515.1455-.0121.1455-.0606v-.1484h.5272v1.2876h-.4727a.9056.9056 0 0 0-.2939-.4909 1.289 1.289 0 0 0-.297-.1787c-.3968-.1667-.821-.2515-1.2513-.2455-.4423 0-.8665.085-1.0786.2153-.1333.0818-.2.1848-.2.306 0 .1727.1454.2424.2182.2636.1967.0597.6328.103.972.1369.0736.0073.1426.0142.2036.0206.3272.0334 1.012.1243 1.315.2zm18.1673-.9966v-.4787H24v.4696h-.4757c-.1727 0-.2424.0334-.3727.1788l-1.4271 1.63a.098.098 0 0 0-.0182.0698v.7423a1.106 1.106 0 0 0 .0121.103.1496.1496 0 0 0 .1.0909.9368.9368 0 0 0 .1303.009h.4848v.4698h-2.5724v-.4697h.4606a.9343.9343 0 0 0 .1302-.0091.1627.1627 0 0 0 .1031-.091.5626.5626 0 0 0 .009-.1v-.7422c0-.0242 0-.0242-.0333-.0636a606.7592 606.7592 0 0 0-1.4119-1.6028c-.0758-.0788-.2061-.2061-.406-.2061h-.4576v-.4696h2.5876v.4696h-.3121c-.0697 0-.1182.0697-.0576.1455 0 0 .8696 1.0392.8787 1.0513.0091.0122.0152.0122.0273.003.0121-.009.8938-1.0453.8999-1.0543a.0912.0912 0 0 0-.0182-.1273.1095.1095 0 0 0-.0606-.0182zm-6.284-.0031h.4848c.2212 0 .2606.0848.2636.2909l.0273 1.5664-2.5815-2.324H11.944v.4697h.412c.297 0 .3182.1636.3182.309v2.2138c.0004.1285.0009.295-.1818.295h-.506v.4667h2.1634v-.4697h-.5273c-.212 0-.2211-.097-.2242-.303v-1.8816l2.9724 2.6511h.7575l-.0394-2.9966c.003-.218.0182-.2908.2424-.2908h.4726v-.4697H15.595Z'/%3E%3C/svg%3E");
}
.ua-nokia {
  --ua-c: #124191;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 9.348v5.304h.796V9.348Zm-8.497-.09c-1.55 0-2.752 1.127-2.752 2.742 0 1.687 1.202 2.742 2.752 2.742 1.55 0 2.754-1.055 2.751-2.742a2.72 2.72 0 0 0-2.751-2.742ZM10.05 12c0 1.195-.876 1.987-1.957 1.987-1.082 0-1.958-.792-1.958-1.987 0-1.174.876-1.987 1.958-1.987 1.08 0 1.957.813 1.957 1.987zM0 9.176v5.476h.812v-3.619l4.218 3.79v-1.135zM11.442 12l2.952 2.652h1.184L12.622 12l2.956-2.652h-1.184ZM24 14.652h-.875l-.64-1.175h-2.898l-.64 1.175h-.875l1.06-1.958h2.937l-1.465-2.72.432-.798Z'/%3E%3C/svg%3E");
}
.ua-lenovo {
  --ua-c: #E2231A;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.044 12.288c0 .5-.343.867-.815.867-.464 0-.827-.38-.827-.867 0-.51.343-.868.815-.868.464 0 .827.381.827.868zm-14.305-.92a.787.787 0 0 0-.651.307.991.991 0 0 0-.172.738l1.479-.614a.708.708 0 0 0-.656-.43zm6.963.052c-.472 0-.816.358-.816.868 0 .486.364.867.828.867.472 0 .815-.368.815-.867 0-.487-.363-.868-.827-.868zM24 7.997v8.006H0V7.997h24zM5.01 13.05H3.088V9.825H2.23v4.003h2.78v-.777zm1.137-.094l2.163-.897a1.667 1.667 0 0 0-.37-.86c-.284-.33-.704-.505-1.216-.505-.931 0-1.633.686-1.633 1.593 0 .93.704 1.593 1.726 1.593.572 0 1.158-.272 1.432-.589l-.535-.411c-.357.264-.56.326-.885.326-.292 0-.52-.09-.682-.25zm5.57-1.039c0-.709-.507-1.223-1.252-1.223a1.28 1.28 0 0 0-1.005.494v-.442h-.846v3.081h.846v-1.753c0-.316.245-.651.698-.651.35 0 .712.243.712.651v1.753h.847v-1.91zm3.647.37c0-.904-.725-1.593-1.65-1.593-.933 0-1.663.7-1.663 1.593 0 .903.726 1.592 1.651 1.592.932 0 1.662-.7 1.662-1.592zm2.066 1.54l1.268-3.081h-.967l-.765 2.099-.765-2.1h-.966l1.268 3.081h.927zm4.449-1.54c0-.904-.725-1.593-1.65-1.593-.932 0-1.662.7-1.662 1.593 0 .903.725 1.592 1.65 1.592.932 0 1.662-.7 1.662-1.592z'/%3E%3C/svg%3E");
}
.ua-htc {
  --ua-c: #A4CF0C;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 14.75h-2.8c-.7-.05-1.15-.5-1.2-1.15v-1.15c.05-.65.6-1.25 1.2-1.25H24V9.95h-4.85c-.65.05-1.25.25-1.7.7-.4.4-.65 1.1-.7 1.75 0 .35-.05.85 0 1.15.05.75.3 1.3.7 1.7.4.45 1.05.7 1.7.7H24V14.7c0 .05-1.3.05-2 .05M8.5 10v1.25h2.95v4.7h1.25v-4.7h2.95V10Zm-1.3 2.35c0-.65-.25-1.25-.7-1.7-.5-.5-1.2-.7-1.7-.7H2.35c-.55 0-.95.2-1.15.35V8H0v8h1.25v-3.6c.05-.65.55-1.15 1.15-1.2.5-.05 1.95-.05 2.4 0 .65.05 1.1.55 1.15 1.2V16H7.2z'/%3E%3C/svg%3E");
}
.ua-lg {
  --ua-c: #A50034;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.522 14.078h3.27v1.33h-4.847v-6.83h1.577v5.5zm6.74-1.274h1.284v1.195c-.236.09-.698.18-1.137.18-1.42 0-1.893-.721-1.893-2.186 0-1.398.45-2.221 1.869-2.221.791 0 1.24.248 1.612.722l.982-.903c-.6-.855-1.646-1.114-2.629-1.114-2.208 0-3.368 1.205-3.368 3.504 0 2.288 1.047 3.528 3.358 3.528 1.06 0 2.096-.27 2.66-.665V11.53h-2.739v1.274zM5.291 6.709a5.29 5.29 0 1 1 0 10.582 5.291 5.291 0 1 1 0-10.582m3.16 8.457a4.445 4.445 0 0 0 1.31-3.161v-.242l-.22.001H6.596v.494h2.662l-.001.015a3.985 3.985 0 0 1-3.965 3.708 3.95 3.95 0 0 1-2.811-1.165 3.952 3.952 0 0 1-1.164-2.811c0-1.061.414-2.059 1.164-2.81a3.951 3.951 0 0 1 2.81-1.164l.252.003v-.495l-.251-.003a4.475 4.475 0 0 0-4.47 4.469c0 1.194.465 2.316 1.309 3.161a4.444 4.444 0 0 0 3.16 1.31 4.444 4.444 0 0 0 3.162-1.31m-2.91-1.297V9.644H5.04v4.72h1.556v-.495H5.543zm-1.265-3.552a.676.676 0 1 0-.675.674.676.676 0 0 0 .675-.674'/%3E%3C/svg%3E");
}
.ua-asus {
  --ua-c: #00539B;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.904 10.788V9.522h-4.656c-.972 0-1.41.6-1.482 1.182v.018-1.2h-1.368v1.266h1.362zm-6.144.456l-1.368-.078v1.458c0 .456-.228.594-1.02.594H14.28c-.654 0-.93-.186-.93-.594v-1.596l-1.386-.102v1.812h-.03c-.078-.528-.276-1.14-1.596-1.23L6 11.22c0 .666.474 1.062 1.218 1.14l3.024.306c.24.018.414.09.414.288 0 .216-.18.24-.456.24H5.946V11.22l-1.386-.09v3.348h5.646c1.26 0 1.662-.654 1.722-1.2h.03c.156.864.912 1.2 2.19 1.2h1.41c1.494 0 2.202-.456 2.202-1.524zm4.398.258l-4.338-.258c0 .666.438 1.11 1.182 1.17l3.09.24c.24.018.384.078.384.276 0 .186-.168.258-.516.258h-4.212v1.29h4.302c1.356 0 1.95-.474 1.95-1.554 0-.972-.534-1.338-1.842-1.422zm-10.194-1.98h1.386v1.266h-1.386zM3.798 11.07l-1.506-.15L0 14.478h1.686zm7.914-1.548h-4.23c-.984 0-1.416.612-1.518 1.2v-1.2H3.618c-.33 0-.486.102-.642.33l-.648.936h9.384Z'/%3E%3C/svg%3E");
}
.ua-chrome {
  --ua-c: #4285F4;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-5.344 9.257c.206.01.413.016.621.016 6.627 0 12-5.373 12-12 0-1.54-.29-3.011-.818-4.364zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728Z'/%3E%3C/svg%3E");
}
.ua-edge {
  --ua-c: #0078D7;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.86 17.86q.14 0 .25.12.1.13.1.25t-.11.33l-.32.46-.43.53-.44.5q-.21.25-.38.42l-.22.23q-.58.53-1.34 1.04-.76.51-1.6.91-.86.4-1.74.64t-1.67.24q-.9 0-1.69-.28-.8-.28-1.48-.78-.68-.5-1.22-1.17-.53-.66-.92-1.44-.38-.77-.58-1.6-.2-.83-.2-1.67 0-1 .32-1.96.33-.97.87-1.8.14.95.55 1.77.41.82 1.02 1.5.6.68 1.38 1.21.78.54 1.64.9.86.36 1.77.56.92.2 1.8.2 1.12 0 2.18-.24 1.06-.23 2.06-.72l.2-.1.2-.05zm-15.5-1.27q0 1.1.27 2.15.27 1.06.78 2.03.51.96 1.24 1.77.74.82 1.66 1.4-1.47-.2-2.8-.74-1.33-.55-2.48-1.37-1.15-.83-2.08-1.9-.92-1.07-1.58-2.33T.36 14.94Q0 13.54 0 12.06q0-.81.32-1.49.31-.68.83-1.23.53-.55 1.2-.96.66-.4 1.35-.66.74-.27 1.5-.39.78-.12 1.55-.12.7 0 1.42.1.72.12 1.4.35.68.23 1.32.57.63.35 1.16.83-.35 0-.7.07-.33.07-.65.23v-.02q-.63.28-1.2.74-.57.46-1.05 1.04-.48.58-.87 1.26-.38.67-.65 1.39-.27.71-.42 1.44-.15.72-.15 1.38zM11.96.06q1.7 0 3.33.39 1.63.38 3.07 1.15 1.43.77 2.62 1.93 1.18 1.16 1.98 2.7.49.94.76 1.96.28 1 .28 2.08 0 .89-.23 1.7-.24.8-.69 1.48-.45.68-1.1 1.22-.64.53-1.45.88-.54.24-1.11.36-.58.13-1.16.13-.42 0-.97-.03-.54-.03-1.1-.12-.55-.1-1.05-.28-.5-.19-.84-.5-.12-.09-.23-.24-.1-.16-.1-.33 0-.15.16-.35.16-.2.35-.5.2-.28.36-.68.16-.4.16-.95 0-1.06-.4-1.96-.4-.91-1.06-1.64-.66-.74-1.52-1.28-.86-.55-1.79-.89-.84-.3-1.72-.44-.87-.14-1.76-.14-1.55 0-3.06.45T.94 7.55q.71-1.74 1.81-3.13 1.1-1.38 2.52-2.35Q6.68 1.1 8.37.58q1.7-.52 3.58-.52Z'/%3E%3C/svg%3E");
}
.ua-firefox {
  --ua-c: #FF7139;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.452 3.445a11.002 11.002 0 00-2.482-1.908C16.944.997 15.098.093 12.477.032c-.734-.017-1.457.03-2.174.144-.72.114-1.398.292-2.118.56-1.017.377-1.996.975-2.574 1.554.583-.349 1.476-.733 2.55-.992a10.083 10.083 0 013.729-.167c2.341.34 4.178 1.381 5.48 2.625a8.066 8.066 0 011.298 1.587c1.468 2.382 1.33 5.376.184 7.142-.85 1.312-2.67 2.544-4.37 2.53-.583-.023-1.438-.152-2.25-.566-2.629-1.343-3.021-4.688-1.118-6.306-.632-.136-1.82.13-2.646 1.363-.742 1.107-.7 2.816-.242 4.028a6.473 6.473 0 01-.59-1.895 7.695 7.695 0 01.416-3.845A8.212 8.212 0 019.45 5.399c.896-1.069 1.908-1.72 2.75-2.005-.54-.471-1.411-.738-2.421-.767C8.31 2.583 6.327 3.061 4.7 4.41a8.148 8.148 0 00-1.976 2.414c-.455.836-.691 1.659-.697 1.678.122-1.445.704-2.994 1.248-4.055-.79.413-1.827 1.668-2.41 3.042C.095 9.37-.2 11.608.14 13.989c.966 5.668 5.9 9.982 11.843 9.982C18.62 23.971 24 18.591 24 11.956a11.93 11.93 0 00-3.548-8.511z'/%3E%3C/svg%3E");
}
.ua-safari {
  --ua-c: #006CFF;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm-.004.953h.006c.063 0 .113.05.113.113v1.842c0 .063-.05.113-.113.113h-.006a.112.112 0 0 1-.113-.113V1.066c0-.063.05-.113.113-.113zm-.941.041c.056.001.104.046.11.104l.077.918a.112.112 0 0 1-.101.12h-.01a.11.11 0 0 1-.12-.1l-.08-.919a.112.112 0 0 1 .102-.12h.01l.012-.003zm1.892 0H12.965a.113.113 0 0 1 .103.121l-.08.92a.111.111 0 0 1-.12.102h-.009a.111.111 0 0 1-.101-.121l.078-.92a.112.112 0 0 1 .111-.102zm-2.838.123a.11.11 0 0 1 .106.092l.32 1.818c.01.06-.03.119-.09.13l-.01.001a.111.111 0 0 1-.128-.09l-.32-1.818a.111.111 0 0 1 .09-.129l.01-.002a.103.103 0 0 1 .022-.002zm3.784.002h.021l.008.002c.061.01.102.07.092.131l-.32 1.814c-.011.062-.07.101-.132.09h-.005a.113.113 0 0 1-.092-.13l.32-1.815a.111.111 0 0 1 .108-.092zm-4.715.203c.048.002.09.035.103.084l.239.893a.112.112 0 0 1-.079.139l-.005.001a.114.114 0 0 1-.14-.08l-.237-.894a.11.11 0 0 1 .078-.137l.006-.002a.123.123 0 0 1 .035-.004zm5.644 0a.11.11 0 0 1 .033.004l.006.002c.06.016.097.079.08.139l-.24.892a.112.112 0 0 1-.137.08l-.005-.002a.114.114 0 0 1-.08-.138l.24-.893a.112.112 0 0 1 .103-.084zm-6.562.285a.11.11 0 0 1 .107.073L9 3.42a.107.107 0 0 1-.064.139l-.012.005a.11.11 0 0 1-.14-.066L8.15 1.76a.11.11 0 0 1 .065-.14l.014-.005a.106.106 0 0 1 .03-.008zm7.469.002c.014 0 .028.001.042.006l.012.006c.057.02.087.082.067.139l-.633 1.738a.11.11 0 0 1-.14.066l-.013-.003A.11.11 0 0 1 15 3.42l.633-1.738a.108.108 0 0 1 .096-.073zm-8.352.366a.112.112 0 0 1 .105.064l.393.838a.112.112 0 0 1-.055.148l-.008.004a.11.11 0 0 1-.146-.054l-.395-.838a.112.112 0 0 1 .055-.149l.008-.004a.11.11 0 0 1 .043-.01zm9.246 0a.11.11 0 0 1 .043.01l.006.003a.11.11 0 0 1 .053.149l-.391.838a.112.112 0 0 1-.148.054l-.006-.002a.112.112 0 0 1-.055-.148l.393-.84a.112.112 0 0 1 .105-.064zm-10.092.44c.04-.002.08.018.102.056l.922 1.597a.113.113 0 0 1-.041.155l-.006.002a.113.113 0 0 1-.154-.041l-.922-1.598a.113.113 0 0 1 .04-.154l.007-.002a.11.11 0 0 1 .052-.016zm10.94.001c.018 0 .035.004.052.014l.004.002a.114.114 0 0 1 .041.156l-.923 1.596a.114.114 0 0 1-.157.04l-.004-.001a.112.112 0 0 1-.04-.155l.925-1.595a.113.113 0 0 1 .102-.057zM5.729 2.93a.11.11 0 0 1 .093.047l.532.753a.114.114 0 0 1-.028.159l-.004.002a.114.114 0 0 1-.158-.028l-.531-.752a.114.114 0 0 1 .027-.158l.006-.002a.113.113 0 0 1 .063-.021zm12.542 0a.11.11 0 0 1 .063.02l.006.003a.112.112 0 0 1 .027.156l-.531.756a.112.112 0 0 1-.156.028l-.006-.004a.112.112 0 0 1-.028-.157l.532-.755a.11.11 0 0 1 .093-.047zm.747.578a.11.11 0 0 1 .08.027l.006.004c.047.04.053.111.013.158L17.932 5.11a.11.11 0 0 1-.157.016l-.005-.006a.11.11 0 0 1-.014-.156l1.185-1.414a.114.114 0 0 1 .077-.041zM4.984 3.51a.11.11 0 0 1 .077.039L6.244 4.96a.112.112 0 0 1-.014.158l-.003.004a.112.112 0 0 1-.159-.014L4.883 3.697a.112.112 0 0 1 .013-.158l.006-.004a.111.111 0 0 1 .082-.025zm-.714.64c.027 0 .055.01.076.032l.658.66a.107.107 0 0 1 0 .152l-.01.01a.107.107 0 0 1-.152 0l-.66-.658a.11.11 0 0 1 0-.155l.01-.01a.111.111 0 0 1 .078-.03zm15.462 0c.028 0 .055.01.077.032l.007.007a.109.109 0 0 1 0 .155l-.658.66a.109.109 0 0 1-.154 0l-.008-.008a.109.109 0 0 1 0-.154l.658-.66a.11.11 0 0 1 .078-.032zm.707.66c.038 0 .071.02.092.075a.112.112 0 0 1-.023.117l-7.606 8.08c-3.084 2.024-6.149 4.04-9.222 6.05-.078.051-.17.082-.211-.028a.112.112 0 0 1 .023-.118l7.594-8.08c3.084-2.023 6.161-4.039 9.234-6.049a.247.247 0 0 1 .12-.046zm-16.824.045a.109.109 0 0 1 .08.026l1.416 1.187a.11.11 0 0 1 .014.157l-.006.005a.11.11 0 0 1-.156.014L3.549 5.057a.109.109 0 0 1-.014-.155l.006-.007a.108.108 0 0 1 .074-.04zm17.336.756c.036 0 .072.017.094.05l.004.003a.114.114 0 0 1-.028.158l-.753.53a.112.112 0 0 1-.157-.028l-.004-.004a.114.114 0 0 1 .028-.158l.754-.53a.113.113 0 0 1 .062-.02zm-17.904.002c.02 0 .042.007.06.02l.76.531c.05.035.06.103.026.152l-.006.01a.109.109 0 0 1-.153.026l-.76-.532a.109.109 0 0 1-.025-.152l.006-.01a.108.108 0 0 1 .092-.045zm-.512.803c.018 0 .036.006.053.016l1.596.923a.111.111 0 0 1 .04.153l-.003.006a.111.111 0 0 1-.153.04L2.473 6.63a.111.111 0 0 1-.041-.152l.004-.006a.11.11 0 0 1 .1-.055zm18.932 0a.11.11 0 0 1 .1.055l.001.004a.113.113 0 0 1-.04.154l-1.596.926a.113.113 0 0 1-.155-.041l-.002-.004a.113.113 0 0 1 .041-.155l1.596-.925a.115.115 0 0 1 .055-.014zm-19.373.846c.014 0 .029.003.043.01l.838.392a.11.11 0 0 1 .052.147l-.004.01a.11.11 0 0 1-.146.052l-.838-.393a.11.11 0 0 1-.053-.146l.004-.01a.109.109 0 0 1 .104-.062zm19.81.002a.11.11 0 0 1 .106.062l.002.008a.11.11 0 0 1-.053.146l-.838.393a.11.11 0 0 1-.146-.053l-.004-.008a.11.11 0 0 1 .052-.146l.838-.393a.11.11 0 0 1 .043-.01zm-20.183.88c.014 0 .028.001.043.006l1.732.631a.112.112 0 0 1 .067.145l-.002.006a.11.11 0 0 1-.143.066l-1.732-.63a.113.113 0 0 1-.069-.145l.002-.004a.115.115 0 0 1 .102-.074zm20.549 0a.113.113 0 0 1 .11.075l.003.004a.115.115 0 0 1-.069.146l-1.732.629a.112.112 0 0 1-.145-.066l-.001-.006a.113.113 0 0 1 .068-.145l1.732-.63a.11.11 0 0 1 .034-.006zm-20.836.909a.11.11 0 0 1 .033.004l.892.24c.06.016.096.077.08.137l-.002.007a.11.11 0 0 1-.136.079l-.895-.239a.113.113 0 0 1-.078-.138l.002-.006a.113.113 0 0 1 .104-.084zm21.13.002a.115.115 0 0 1 .106.084v.004a.112.112 0 0 1-.078.138l-.893.239a.112.112 0 0 1-.138-.079v-.005a.112.112 0 0 1 .078-.14l.892-.237a.11.11 0 0 1 .033-.004zm-21.335.93.023.001 1.814.323c.062.01.101.069.09.13v.006a.111.111 0 0 1-.13.09l-1.815-.322a.113.113 0 0 1-.092-.131l.002-.006a.11.11 0 0 1 .108-.092zm21.519.001h.022c.052.002.1.038.109.092v.006c.01.062-.03.12-.092.13l-1.814.321a.113.113 0 0 1-.131-.092v-.005a.113.113 0 0 1 .092-.131l1.814-.32zm-21.644.944h.011l.922.084a.11.11 0 0 1 .102.119l-.002.01a.11.11 0 0 1-.121.1l-.922-.083a.11.11 0 0 1-.1-.12v-.009a.111.111 0 0 1 .11-.101zm21.779.002h.012c.056 0 .106.043.11.101v.008a.111.111 0 0 1-.1.121l-.923.08a.111.111 0 0 1-.12-.101v-.008a.111.111 0 0 1 .1-.121l.92-.08zm-11.82.73L6.091 16.95c2.02-1.324 4.039-2.646 6.066-3.976l-1.095-1.31zm11.87.219c.063 0 .114.05.114.113v.004c0 .063-.05.113-.113.113l-1.844.004a.113.113 0 0 1-.113-.113v-.004c0-.063.05-.113.113-.113l1.844-.004zm-21.869.002h1.844c.062 0 .112.05.112.111v.008c0 .062-.05.111-.112.111H1.064a.111.111 0 0 1-.11-.111v-.008c0-.061.049-.111.11-.111zm.952.875h.011a.11.11 0 0 1 .11.101v.006a.111.111 0 0 1-.102.121l-.922.08a.11.11 0 0 1-.119-.101l-.002-.006a.111.111 0 0 1 .102-.121l.922-.08zm19.955 0h.011l.922.08a.11.11 0 0 1 .102.119v.008a.112.112 0 0 1-.121.101l-.922-.08a.11.11 0 0 1-.102-.119v-.008a.111.111 0 0 1 .11-.101zm-18.924.705c.053.001.098.04.107.094l.002.004c.011.061-.03.12-.092.13l-1.812.32a.113.113 0 0 1-.13-.091v-.004a.115.115 0 0 1 .09-.133l1.811-.318a.117.117 0 0 1 .024-.002zm17.902 0c.008 0 .016 0 .024.002l1.816.32c.061.011.1.07.09.131v.004a.113.113 0 0 1-.131.092l-1.816-.32a.112.112 0 0 1-.09-.131v-.004a.113.113 0 0 1 .107-.094zM2.332 14.477a.11.11 0 0 1 .104.082l.002.005c.016.06-.02.121-.08.137l-.891.24a.112.112 0 0 1-.137-.08l-.002-.006a.112.112 0 0 1 .08-.136l.89-.239a.112.112 0 0 1 .034-.003zm19.332 0c.011 0 .024 0 .035.003l.893.239c.06.016.096.077.08.136l-.002.006a.111.111 0 0 1-.137.078l-.894-.238a.111.111 0 0 1-.078-.137l.002-.005a.109.109 0 0 1 .101-.082zm-18.213.517a.11.11 0 0 1 .11.074l.002.004a.112.112 0 0 1-.067.145l-1.732.63a.113.113 0 0 1-.145-.068l-.002-.004a.113.113 0 0 1 .069-.144L3.418 15a.11.11 0 0 1 .033-.006zm17.086 0c.015 0 .029 0 .043.006l1.734.63a.111.111 0 0 1 .067.143l-.002.008a.111.111 0 0 1-.143.067l-1.734-.631a.111.111 0 0 1-.066-.143l.002-.008a.111.111 0 0 1 .1-.072zM2.92 16.117a.109.109 0 0 1 .103.063l.004.01a.108.108 0 0 1-.052.144l-.838.393a.11.11 0 0 1-.147-.055l-.004-.008a.11.11 0 0 1 .053-.146l.838-.391a.112.112 0 0 1 .043-.01zm18.158 0a.11.11 0 0 1 .043.01l.838.39c.056.027.08.093.055.149l-.002.004a.112.112 0 0 1-.149.055l-.838-.391a.112.112 0 0 1-.054-.148l.002-.004a.112.112 0 0 1 .105-.065zm-16.957.315c.04-.001.078.02.1.056l.004.004a.11.11 0 0 1-.041.153l-1.596.921a.113.113 0 0 1-.154-.04l-.002-.005a.113.113 0 0 1 .04-.154l1.596-.922a.109.109 0 0 1 .053-.013zm15.756 0c.018 0 .036.004.053.013l1.597.924a.11.11 0 0 1 .041.152l-.002.004a.11.11 0 0 1-.152.041l-1.598-.921a.113.113 0 0 1-.04-.155l.001-.002a.111.111 0 0 1 .1-.056zm.328 1.193a.11.11 0 0 1 .06.021l.758.534c.05.035.061.102.026.152l-.004.008a.111.111 0 0 1-.154.027l-.756-.535a.109.109 0 0 1-.028-.152l.006-.008a.11.11 0 0 1 .092-.047zm-16.412.002c.035 0 .072.016.094.047l.004.008a.109.109 0 0 1-.028.152l-.756.531a.108.108 0 0 1-.152-.025l-.006-.008a.109.109 0 0 1 .028-.152l.755-.534a.107.107 0 0 1 .061-.019zm15.162.102a.112.112 0 0 1 .082.025l1.414 1.187a.11.11 0 0 1 .014.157l-.004.004a.113.113 0 0 1-.158.013L18.89 17.93a.11.11 0 0 1-.014-.157l.004-.005a.108.108 0 0 1 .074-.04zm-12.812 1.12a.11.11 0 0 1 .08.026l.007.008a.11.11 0 0 1 .014.154L5.06 20.451a.11.11 0 0 1-.155.012l-.008-.006a.11.11 0 0 1-.013-.154l1.185-1.414a.11.11 0 0 1 .075-.04zm11.703 0c.032 0 .065.015.088.042l1.181 1.41c.04.048.035.12-.013.16l-.002.002a.114.114 0 0 1-.16-.014l-1.182-1.41a.114.114 0 0 1 .013-.16l.002-.002a.115.115 0 0 1 .073-.027zm-12.928.114c.027 0 .054.01.074.031l.014.012a.107.107 0 0 1 0 .15l-.662.66a.105.105 0 0 1-.149 0l-.011-.011a.105.105 0 0 1 0-.149l.66-.662a.105.105 0 0 1 .074-.031zm14.164 0c.027 0 .053.01.074.031l.66.662a.106.106 0 0 1 0 .15l-.011.012a.106.106 0 0 1-.15-.002l-.66-.66a.106.106 0 0 1 .001-.15l.01-.012a.108.108 0 0 1 .076-.031zm-11.627.797c.018 0 .034.006.05.015l.007.004a.11.11 0 0 1 .04.15l-.921 1.598a.11.11 0 0 1-.15.041l-.008-.004a.111.111 0 0 1-.04-.152l.922-1.596a.113.113 0 0 1 .1-.056zm9.088.002a.11.11 0 0 1 .1.054l.925 1.596a.113.113 0 0 1-.04.154h-.005a.11.11 0 0 1-.152-.039l-.926-1.595a.113.113 0 0 1 .041-.155l.004-.002a.108.108 0 0 1 .053-.013zm-10.285.324c.021 0 .043.008.062.021l.004.002c.051.036.063.106.028.157l-.53.755a.112.112 0 0 1-.156.028l-.004-.002a.112.112 0 0 1-.027-.156l.53-.756a.113.113 0 0 1 .093-.05zm11.484.002c.036 0 .072.015.094.047l.53.756c.035.05.023.12-.028.156l-.004.002a.112.112 0 0 1-.156-.028l-.53-.755a.112.112 0 0 1 .028-.157l.004-.002a.112.112 0 0 1 .062-.02zm-8.863.342a.11.11 0 0 1 .043.006l.012.005c.056.02.084.081.064.137l-.633 1.74a.105.105 0 0 1-.136.063l-.014-.004a.106.106 0 0 1-.065-.137l.633-1.74a.107.107 0 0 1 .096-.07zm6.232 0a.107.107 0 0 1 .106.07l.633 1.738a.107.107 0 0 1-.065.137l-.015.006a.107.107 0 0 1-.137-.065L15 20.578a.107.107 0 0 1 .064-.137l.014-.005a.117.117 0 0 1 .033-.006zm-4.695.41c.008 0 .014 0 .021.002l.006.002c.062.01.101.067.09.129l-.318 1.812a.113.113 0 0 1-.131.092l-.004-.002a.111.111 0 0 1-.092-.129l.32-1.812a.113.113 0 0 1 .108-.094zm3.146.002c.008-.002.015 0 .022 0a.111.111 0 0 1 .107.092l.32 1.812c.012.061-.03.12-.091.131l-.004.002a.113.113 0 0 1-.13-.092l-.321-1.812a.113.113 0 0 1 .092-.131l.005-.002zm-5.79.119a.11.11 0 0 1 .042.01l.004.002a.114.114 0 0 1 .055.15l-.393.834a.112.112 0 0 1-.148.055l-.004-.002a.112.112 0 0 1-.055-.149l.393-.836a.112.112 0 0 1 .105-.064zm8.458 0a.108.108 0 0 1 .104.062l.39.84a.11.11 0 0 1-.052.147l-.008.004a.11.11 0 0 1-.146-.055l-.391-.838a.11.11 0 0 1 .053-.146l.008-.004a.11.11 0 0 1 .042-.01zm-4.236.018H12c.063 0 .115.05.115.113l.002 1.84c0 .063-.05.113-.113.113h-.006a.113.113 0 0 1-.113-.113l-.004-1.838c0-.063.05-.115.113-.115zm-2.592.578c.011 0 .022 0 .034.004l.005.002c.06.016.095.077.079.136l-.24.893a.111.111 0 0 1-.137.078l-.006-.002a.111.111 0 0 1-.078-.137l.24-.89a.113.113 0 0 1 .103-.084zm5.196.002a.11.11 0 0 1 .103.082l.24.89a.11.11 0 0 1-.078.137l-.006.002a.11.11 0 0 1-.136-.078l-.24-.89a.11.11 0 0 1 .078-.138l.005-.002a.112.112 0 0 1 .034-.003zm-3.475.302h.01l.008.002c.061.006.107.06.101.121l-.08.92a.112.112 0 0 1-.121.102h-.008a.11.11 0 0 1-.1-.121l.08-.922a.111.111 0 0 1 .11-.102zm1.736 0h.02a.11.11 0 0 1 .107.102l.08.924a.11.11 0 0 1-.101.119l-.008.002a.11.11 0 0 1-.12-.102l-.08-.924a.112.112 0 0 1 .102-.12z'/%3E%3C/svg%3E");
}
.ua-opera {
  --ua-c: #FF1B2D;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.051 5.238c-1.328 1.566-2.186 3.883-2.246 6.48v.564c.061 2.598.918 4.912 2.246 6.479 1.721 2.236 4.279 3.654 7.139 3.654 1.756 0 3.4-.537 4.807-1.471C17.879 22.846 15.074 24 12 24c-.192 0-.383-.004-.57-.014C5.064 23.689 0 18.436 0 12 0 5.371 5.373 0 12 0h.045c3.055.012 5.84 1.166 7.953 3.055-1.408-.93-3.051-1.471-4.81-1.471-2.858 0-5.417 1.42-7.14 3.654h.003zM24 12c0 3.556-1.545 6.748-4.002 8.945-3.078 1.5-5.946.451-6.896-.205 3.023-.664 5.307-4.32 5.307-8.74 0-4.422-2.283-8.075-5.307-8.74.949-.654 3.818-1.703 6.896-.205C22.455 5.25 24 8.445 24 12z'/%3E%3C/svg%3E");
}
.ua-ie {
  --ua-c: #0076D6;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.8 7.381c1.125-2.7 1.2-4.95-.15-6.3-1.5-1.499-5.1-1.05-8.924.75h-.45c-2.7 0-5.324.976-7.274 2.7-1.65 1.5-2.85 3.45-3.375 5.625.375-.45 2.475-2.925 4.875-4.275.075 0 .675-.375.675-.375-.075 0-1.2 1.125-1.425 1.35-5.25 5.4-8.324 13.574-5.924 15.973 1.574 1.575 4.424 1.2 7.724-.6 1.425.675 3 .975 4.724.975 2.25 0 4.35-.6 6.15-1.8 1.874-1.2 3.224-3.074 4.05-5.249h-5.85c-.75 1.425-2.475 2.4-4.275 2.4-2.55 0-4.65-2.1-4.724-4.5V13.83h15.298v-.225c0-.375.075-.825.075-1.124 0-1.8-.45-3.525-1.2-5.1zM2.477 22.38c-1.2-1.2-.824-3.524.6-6.299.675 1.875 1.8 3.525 3.225 4.725.45.375.975.75 1.5 1.05-2.4 1.274-4.35 1.5-5.325.524zm15.374-11.398H8.702v-.075c.15-2.325 2.324-4.35 4.874-4.35 2.4 0 4.35 1.875 4.5 4.35v.075zm4.574-4.2c-.45-.75-1.05-1.5-1.725-2.1a11.213 11.213 0 0 0-3.6-2.25c2.4-1.124 4.425-1.274 5.475-.224.825.975.75 2.624-.15 4.574 0 .075 0 .075 0 0 0 .075 0 .075 0 0z'/%3E%3C/svg%3E");
}
.ua-qq {
  --ua-c: #12B7F5;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E");
}
.ua-wechat {
  --ua-c: #07C160;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178A1.17 1.17 0 0 1 4.623 7.17c0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18a1.17 1.17 0 0 1-1.162 1.178 1.17 1.17 0 0 1-1.162-1.178c0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 0 1 .598.082l1.584.926a.272.272 0 0 0 .14.047c.134 0 .24-.111.24-.247 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 0 1-.023-.156.49.49 0 0 1 .201-.398C23.024 18.48 24 16.82 24 14.98c0-3.21-2.931-5.837-6.656-6.088V8.89c-.135-.01-.27-.027-.407-.03zm-2.53 3.274c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.97-.982zm4.844 0c.535 0 .969.44.969.982a.976.976 0 0 1-.969.983.976.976 0 0 1-.969-.983c0-.542.434-.982.969-.982z'/%3E%3C/svg%3E");
}
.ua-baidu {
  --ua-c: #2932E1;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.154 0C7.71 0 6.54 1.658 6.54 3.707c0 2.051 1.171 3.71 2.615 3.71 1.446 0 2.614-1.659 2.614-3.71C11.768 1.658 10.6 0 9.154 0zm7.025.594C14.86.58 13.347 2.589 13.2 3.927c-.187 1.745.25 3.487 2.179 3.735 1.933.25 3.175-1.806 3.422-3.364.252-1.555-.995-3.364-2.362-3.674a1.218 1.218 0 0 0-.261-.03zM3.582 5.535a2.811 2.811 0 0 0-.156.008c-2.118.19-2.428 3.24-2.428 3.24-.287 1.41.686 4.425 3.297 3.864 2.617-.561 2.262-3.68 2.183-4.362-.125-1.018-1.292-2.773-2.896-2.75zm16.534 1.753c-2.308 0-2.617 2.119-2.617 3.616 0 1.43.121 3.425 2.988 3.362 2.867-.063 2.553-3.238 2.553-3.988 0-.745-.62-2.99-2.924-2.99zm-8.264 2.478c-1.424.014-2.708.925-3.323 1.947-1.118 1.868-2.863 3.05-3.112 3.363-.25.309-3.61 2.116-2.864 5.42.746 3.301 3.365 3.237 3.365 3.237s1.93.19 4.171-.31c2.24-.495 4.17.123 4.17.123s5.233 1.748 6.665-1.616c1.43-3.364-.808-5.109-.808-5.109s-2.99-2.306-4.736-4.798c-1.072-1.665-2.348-2.268-3.528-2.257zm-2.234 3.84l1.542.024v8.197H7.758c-1.47-.291-2.055-1.292-2.13-1.462-.072-.173-.488-.976-.268-2.343.635-2.049 2.447-2.196 2.447-2.196h1.81zm3.964 2.39v3.881c.096.413.612.488.612.488h1.614v-4.343h1.689v5.782h-3.915c-1.517-.39-1.59-1.465-1.59-1.465v-4.317zm-5.458 1.147c-.66.197-.978.708-1.05.928-.076.22-.247.78-.1 1.269.294 1.095 1.248 1.144 1.248 1.144h1.37v-3.34z'/%3E%3C/svg%3E");
}
.ua-vivaldi {
  --ua-c: #EF3939;
  --ua-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C6.75 0 3.817 0 1.912 1.904.007 3.81 0 6.75 0 12s0 8.175 1.912 10.08C3.825 23.985 6.75 24 12 24c5.25 0 8.183 0 10.088-1.904C23.993 20.19 24 17.25 24 12s0-8.175-1.912-10.08C20.175.015 17.25 0 12 0zm-.168 3a9 9 0 016.49 2.648 9 9 0 010 12.704A9 9 0 1111.832 3zM7.568 7.496a1.433 1.433 0 00-.142.004A1.5 1.5 0 006.21 9.75l1.701 3c.93 1.582 1.839 3.202 2.791 4.822a1.417 1.417 0 001.41.75 1.5 1.5 0 001.223-.81l4.447-7.762A1.56 1.56 0 0018 8.768a1.5 1.5 0 10-2.828.914 2.513 2.513 0 01.256 1.119v.246a2.393 2.393 0 01-2.52 2.13 2.348 2.348 0 01-1.965-1.214c-.307-.51-.6-1.035-.9-1.553-.42-.72-.826-1.41-1.246-2.16a1.433 1.433 0 00-1.229-.754Z'/%3E%3C/svg%3E");
}
/* 「回复」做成小胶囊：卡片里有个可点的凸起，比纯文本链接更像卡片上的控件 */
.joe_comment .comment-list__item-contain .term .content .handle .reply {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 18px;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.joe_comment .comment-list__item-contain .term .content .handle .reply:hover {
  color: var(--theme);
  background: color-mix(in srgb, var(--theme) 10%, transparent);
  border-color: color-mix(in srgb, var(--theme) 24%, transparent);
}
.joe_comment > .comment-list > .comment-list__item:last-child {
  margin-bottom: 0;
}
/* 卡片内的留言本体 */
.joe_comment > .comment-list > .comment-list__item > .comment-list__item-contain {
  min-width: 0;
}
/* 该留言下的回复：另起一行跟在下面，靠左缩进表示层级 */
.joe_comment > .comment-list > .comment-list__item > .comment-list__item-children {
  margin: 12px 0 0;
  padding-left: 22px;
  min-width: 0;
}
/* 第二层及更深的所有同级回复都靠这条保持间距 */
.joe_comment .comment-list__item-children .comment-list > .comment-list__item + .comment-list__item {
  margin-top: 14px;
}
/* 卡片自带内边距，term 原来的 20px 下留白会让框底显得空，归零 */
.joe_comment .comment-list__item-contain .term {
  margin-bottom: 0;
}
/* 更深一层继续缩小缩进 */
.joe_comment .comment-list__item-children .comment-list__item-children {
  margin: 12px 0 0;
  padding-left: 14px;
}
.joe_comment .comment-list__item-children > .comment-list > .comment-list__item:first-child {
  padding-top: 0;
}
.joe_comment .comment-list__item-children .comment-list__item-children .comment-list__item-children .comment-list__item-children {
  margin-left: 0;
  padding-left: 8px;
}
/* ===== 瀑布流：顶层卡片按自身高度自动流进两列 =====
   用 CSS 多列而不是 flex/grid：多列的填充方式本身就是"填到平衡高度再换下一列"，
   卡片高度参差不齐时不会像 flex 换行那样在某一行留出大洞。
   break-inside: avoid 保证单张卡片不会被拦腰劈到两列去。 */
@media (min-width: 860px) {
  /* 原来是 CSS 多列（column-count）：填充方向是"先灌满左列再灌右列"，
     序号看过去是竖着走的（1、2 在左，3、4、5 在右）。
     改成 grid 行优先：1 左上 → 2 右上 → 3 左下 → 4 右下，从左往右读完再换行。 */
  .joe_comment > .comment-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 16px;
    row-gap: var(--joe-ccard-gap);
  }
  .joe_comment > .comment-list > .comment-list__item {
    width: auto;
    min-width: 0;
    margin: 0;
  }
  /* 上面的 grid 只是没有脚本 / 脚本还没跑时的样子（行优先，从左往右）。
     脚本一旦接上就加 .joe-masonry，换成卡片绝对定位的真瀑布流：
     两列各自往下堆，谁矮谁接下一张，不留大洞。
     padding 必须归零——绝对定位的包含块是 padding box，留着 padding 卡片会压上去。 */
  .joe_comment > .comment-list.joe-masonry {
    display: block;
    position: relative;
    padding: 0;
    margin-top: 15px;
    height: 0;
  }
  .joe_comment > .comment-list.joe-masonry > .comment-list__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  /* 列宽只剩一半，缩进跟着收一档，否则第三层回复会被挤成一条 */
  .joe_comment > .comment-list > .comment-list__item > .comment-list__item-children {
    padding-left: 14px;
  }
  .joe_comment .comment-list__item-children .comment-list__item-children {
    padding-left: 12px;
  }
}
/* 窄屏：卡片内边距和缩进一起收一档 */
@media (max-width: 768px) {
  .joe_comment > .comment-list > .comment-list__item {
    padding: 14px 14px 12px;
    border-radius: 8px;
  }
  /* 窄屏头像 34px（responsive.css 里写死），徽章跟着缩，不然比头像还大 */
  html .joe_comment {
    --joe-avatar-size: 34px;
  }
  /* 手机上一行放不下三个按钮的文字宽度，收一档间距与内边距 */
  html .joe_comment__urlbox .row {
    height: 32px;
    padding: 0 10px;
  }
  html .joe_comment__urlbox .foot .clear,
  html .joe_comment__urlbox .foot .cancle,
  html .joe_comment__urlbox .foot .save {
    padding: 0 10px;
    font-size: 12px;
  }
  /* 手机上卡片是单列铺满，投影的横向扩散收一点，避免贴边发脏 */
  html .joe_comment > .comment-list > .comment-list__item {
    box-shadow: 0 1px 2px rgba(16, 24, 12, 0.05), 0 8px 18px -8px rgba(16, 24, 12, 0.18);
  }
  html[data-night=night] .joe_comment > .comment-list > .comment-list__item {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 18px -8px rgba(0, 0, 0, 0.58);
  }
  /* 加 html 前缀压过 joe.responsive.min.css 里同名的 14px 左缩进 */
  html .joe_comment > .comment-list > .comment-list__item > .comment-list__item-children {
    padding-left: 12px;
  }
  /* 390px 宽度下 表情 + 滑块 + 发送 一行放不下（约需 286px，可用仅 258px），
     强行挤会让滑块里的「拖动滑块验证」被滑块把手盖住。
     所以这里让滑块吃满剩余宽度，发送按钮换到第二行靠右，两行都保持右对齐。 */
  .joe_comment__respond-form .foot {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .joe_comment__respond-form .foot .owo .seat {
    width: 56px;
  }
  /* 滑块不能跟着缩：390px 下把手 44px + 文字 78px 已经是最低开销，
     再缩就会出现把手盖住「拖动」两个字。固定 176px，让发送按钮主动换到第二行。 */
  .joe_slider {
    flex: 0 0 auto;
    width: 176px;
    min-width: 176px;
    max-width: 176px;
  }
  .joe_comment__respond-form .foot .submit button {
    padding: 0 12px;
    font-size: 13px;
  }
  /* 手机上底栏只剩约 200px，表情格子按 1/7 排才不会缩成几个像素 */
  html .joe_comment .joe_owo__contain .box .scroll .item {
    width: calc(100% / 7);
  }
}

.joe_comment .joe_pagination {
  padding-top: 0;
}

.joe_run__day, .joe_run__hour, .joe_run__minute, .joe_run__second {
  font-weight: 500;
  color: var(--theme);
}

.joe_owo__contain {
  position: relative;
}
.joe_owo__contain .seat {
  user-select: none;
  cursor: pointer;
}
/* 表情面板原来是 width:100% 跟着 70px 的「OωO」按钮走，格子只有 1/18 × 70 ≈ 4px，
   表情缩成几个像素根本点不中。改成以整条底栏（.foot 是 position:relative）为基准：
   position:static 让绝对定位越过 .owo，面板横跨底栏宽度，格子回到 30px 级别。 */
.joe_comment .joe_owo__contain {
  position: static;
}
.joe_comment .joe_owo__contain .box {
  position: absolute;
  left: 15px;
  right: 15px;
  top: calc(100% - 10px);
  width: auto;
  margin-top: 0;
  z-index: 40;
  border: 1px solid var(--joe-ccard-bd, rgba(17, 24, 12, 0.14));
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(16, 24, 12, 0.16), 0 2px 6px rgba(16, 24, 12, 0.08);
}
html[data-night=night] .joe_comment .joe_owo__contain .box {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.62);
}
/* 面板变宽后格子按 1/16 排，图片铺满格子、hover 底色仍沿用主题 */
.joe_comment .joe_owo__contain .box .scroll {
  padding: 6px;
}
.joe_comment .joe_owo__contain .box .scroll .item {
  width: calc(100% / 16);
  padding: 4px;
}
.joe_comment .joe_owo__contain .box .scroll .item img {
  display: block;
  width: 100%;
  height: auto;
}
/* 颜文字那栏是文字，按内容宽度排，别被 1/16 挤成一字一行 */
.joe_comment .joe_owo__contain .box .scroll:nth-child(3) .item {
  width: auto;
  min-width: 20%;
  font-size: 16px;
  line-height: 30px;
  white-space: nowrap;
}
.joe_owo__contain .box {
  width: 100%;
  display: none;
  background: var(--background);
  border-radius: var(--radius-inner);
  overflow: hidden;
  margin-top: 15px;
}
.joe_owo__contain .box .scroll {
  display: none;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: none;
  padding: 5px;
}
.joe_owo__contain .box .scroll .item {
  text-align: center;
  width: 5.5555555556%;
  display: inline-block;
  padding: 5px;
  cursor: pointer;
  border-radius: var(--radius-inner);
  transition: background 0.25s;
}
.joe_owo__contain .box .scroll .item img {
  max-width: 100%;
  max-height: 100%;
}
.joe_owo__contain .box .scroll .item:hover {
  background: var(--classD);
}
.joe_owo__contain .box .scroll:nth-child(3) .item {
  color: var(--routine);
  width: 20%;
}
.joe_owo__contain .box .bar {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--classC);
}
.joe_owo__contain .box .bar .item {
  line-height: 30px;
  padding: 0 10px;
  cursor: pointer;
  color: var(--routine);
  transition: background 0.25s, color 0.25s;
}
.joe_owo__contain .box .bar .item.active {
  color: #fff;
  background: var(--theme);
}

@keyframes wobble-bottom {
  16.65% {
    transform: skew(-12deg);
  }
  33.3% {
    transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}
@keyframes showComment {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 0;
  }
}
@keyframes list_thumbnail_loading {

  0% {

    transform: scale(0.85);

  }

  100% {

    transform: scale(1);

  }

}

@keyframes list_title_loading {

  0% {

    width: 80%;

  }

  100% {

    width: 95%;

  }

}

@keyframes list_abstract_loading {

  0% {

    width: 60%;

  }

  100% {

    width: 80%;

  }

}

@keyframes shaked {
  2% {
    transform: translateY(1.5px) rotate(1.5deg);
  }
  4% {
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  6% {
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  8% {
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  10% {
    transform: translateY(2.5px) rotate(1.5deg);
  }
  12% {
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  14% {
    transform: translateY(-1.5px) rotate(1.5deg);
  }
  16% {
    transform: translateY(-0.5px) rotate(-1.5deg);
  }
  18% {
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  20% {
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  22% {
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  24% {
    transform: translateY(1.5px) rotate(1.5deg);
  }
  26% {
    transform: translateY(0.5px) rotate(0.5deg);
  }
  28% {
    transform: translateY(0.5px) rotate(1.5deg);
  }
  30% {
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  32%, 34% {
    transform: translateY(1.5px) rotate(-0.5deg);
  }
  36% {
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  38% {
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  40% {
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  42% {
    transform: translateY(2.5px) rotate(-1.5deg);
  }
  44% {
    transform: translateY(1.5px) rotate(0.5deg);
  }
  46% {
    transform: translateY(-1.5px) rotate(2.5deg);
  }
  48% {
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  50% {
    transform: translateY(0.5px) rotate(0.5deg);
  }
  52% {
    transform: translateY(2.5px) rotate(2.5deg);
  }
  54% {
    transform: translateY(-1.5px) rotate(1.5deg);
  }
  56% {
    transform: translateY(2.5px) rotate(2.5deg);
  }
  58% {
    transform: translateY(0.5px) rotate(2.5deg);
  }
  60% {
    transform: translateY(2.5px) rotate(2.5deg);
  }
  62% {
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  64% {
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  66% {
    transform: translateY(1.5px) rotate(-0.5deg);
  }
  68% {
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  70% {
    transform: translateY(1.5px) rotate(0.5deg);
  }
  72% {
    transform: translateY(2.5px) rotate(1.5deg);
  }
  74% {
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  76% {
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  78% {
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  80% {
    transform: translateY(1.5px) rotate(1.5deg);
  }
  82% {
    transform: translateY(-0.5px) rotate(0.5deg);
  }
  84% {
    transform: translateY(1.5px) rotate(2.5deg);
  }
  86% {
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  88% {
    transform: translateY(-0.5px) rotate(2.5deg);
  }
  90% {
    transform: translateY(2.5px) rotate(-0.5deg);
  }
  92% {
    transform: translateY(0.5px) rotate(-0.5deg);
  }
  94% {
    transform: translateY(2.5px) rotate(0.5deg);
  }
  96% {
    transform: translateY(-0.5px) rotate(1.5deg);
  }
  98% {
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  0%, 100% {
    transform: translate(0px) rotate(0deg);
  }
}
@keyframes overdue {
  0% {
    clip-path: circle(0 at 0 0);
  }
  100% {
    clip-path: circle(100%);
  }
}
@keyframes progress-active {
  0% {
    opacity: 0.3;
    width: 0;
  }
  to {
    opacity: 0;
    width: 100%;
  }
}
@keyframes lamp-background {
  0%, 24.9% {
    background-color: #54b5db;
  }
  25%, 49.9% {
    background-color: #da4733;
  }
  50%, 74.9% {
    background-color: #3b78e7;
  }
  75%, to {
    background-color: #fdba2c;
  }
}
@keyframes lamp-front {
  0% {
    transform: scaleX(0);
    background-color: #da4733;
  }
  24.9% {
    transform: scaleX(0.5);
    background-color: #da4733;
  }
  25% {
    transform: scaleX(0);
    background-color: #3b78e7;
  }
  49.9% {
    transform: scaleX(0.5);
    background-color: #3b78e7;
  }
  50% {
    transform: scaleX(0);
    background-color: #fdba2c;
  }
  74.9% {
    transform: scaleX(0.5);
    background-color: #fdba2c;
  }
  75% {
    transform: scaleX(0);
    background-color: #409eff;
  }
  to {
    transform: scaleX(0.5);
    background-color: #409eff;
  }
}
@keyframes showHeaderTitle {
  0% {
    opacity: 0.25;
    transform: scale(0.25);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* 评论定位（侧边栏最新回复 / 评论锚点跳转） */
.comment-list__item-contain {
  /* 浏览器原生锚点跳转时预留固定头部的高度 */
  scroll-margin-top: 100px;
}
.joe_comment__highlight {
  animation: joeCommentHighlight 3s ease;
}
@keyframes joeCommentHighlight {
  0% {
    background-color: rgba(134, 149, 230, 0.22);
  }
  60% {
    background-color: rgba(134, 149, 230, 0.12);
  }
  100% {
    background-color: transparent;
  }
}
/* 搜索结果：正文命中片段的关键词高亮 */
.joe_list__item .abstract mark{background:#fff3bf;color:#c7254e;padding:0 2px;border-radius:2px}

/* 搜索结果：标题命中的关键词与摘要同款高亮 */
.joe_list__item .title mark{background:#fff3bf;color:#c7254e;padding:0 2px;border-radius:2px}

/* 自定义侧边模块：透明无底色
   基类 .joe_aside__item 带 box-shadow 投影，在没有背景填充时会于图片四周
   渲染出一圈淡灰"底板"；这里对自定义模块去掉投影/圆角/裁切，并强制图片透明。*/
.joe_aside__item.joe_aside__custom {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0;
}
.joe_aside__item.joe_aside__custom img,
.joe_aside__item.joe_aside__custom picture,
.joe_aside__item.joe_aside__custom svg,
.joe_aside__item.joe_aside__custom video,
.joe_aside__item.joe_aside__custom canvas,
.joe_aside__item.joe_aside__custom iframe {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.joe_aside__item.joe_aside__custom img {
  max-width: 100%;
  height: auto;
}

/* 文章页信息栏评论数：可点击直达评论区（#comments 锚点） */
#comments {
  /* 固定头部会遮挡锚点，原生跳转时预留高度 */
  scroll-margin-top: 80px;
}
.joe_detail__count-information .meta .item .comment-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.35s;
}
.joe_detail__count-information .meta .item .comment-link:hover {
  color: var(--theme);
  text-decoration: underline;
}

/* 侧边栏标签云：主题绿同色系实色底 + 白色文字
   白字要求底色足够深，色板整体压到明度 25%~38%（色相 102°~149°，含主题绿 H≈122°）；
   白字对比 4.01~7.44，8 色 CIEDE2000 最小色差 6.75，既有同族感又不至于糊成一片；
   每个标签的配色由 aside.php 随机分配（data-color 1~8），每次刷新都可能变 */
.joe_aside__item.tags .list {
  --joe-tag-p1: #247c09; /* 偏黄绿 · 深 */
  --joe-tag-p2: #129143; /* 青绿 · 鲜 */
  --joe-tag-p3: #2a611f; /* 主题色相 · 最深 */
  --joe-tag-p4: #508b37; /* 偏黄绿 · 最亮 */
  --joe-tag-p5: #11732f; /* 青绿 · 深 */
  --joe-tag-p6: #287b50; /* 偏青 · 最亮 */
  --joe-tag-p7: #0a940a; /* 纯正绿 · 鲜 */
  --joe-tag-p8: #246041; /* 偏青 · 最深 */
}
.joe_aside__item.tags .list .item:nth-child(8n + 1) a { --joe-tag-c: var(--joe-tag-p1); }
.joe_aside__item.tags .list .item:nth-child(8n + 2) a { --joe-tag-c: var(--joe-tag-p2); }
.joe_aside__item.tags .list .item:nth-child(8n + 3) a { --joe-tag-c: var(--joe-tag-p3); }
.joe_aside__item.tags .list .item:nth-child(8n + 4) a { --joe-tag-c: var(--joe-tag-p4); }
.joe_aside__item.tags .list .item:nth-child(8n + 5) a { --joe-tag-c: var(--joe-tag-p5); }
.joe_aside__item.tags .list .item:nth-child(8n + 6) a { --joe-tag-c: var(--joe-tag-p6); }
.joe_aside__item.tags .list .item:nth-child(8n + 7) a { --joe-tag-c: var(--joe-tag-p7); }
.joe_aside__item.tags .list .item:nth-child(8n + 8) a { --joe-tag-c: var(--joe-tag-p8); }

/* 随机配色：aside.php 为每个标签输出 data-color="1~8"，映射到上面的绿色板；
   每组 8 个洗牌发放并处理交界撞色，所以每次刷新顺序都不同 */
.joe_aside__item.tags .list .item a[data-color="1"] { --joe-tag-c: var(--joe-tag-p1); }
.joe_aside__item.tags .list .item a[data-color="2"] { --joe-tag-c: var(--joe-tag-p2); }
.joe_aside__item.tags .list .item a[data-color="3"] { --joe-tag-c: var(--joe-tag-p3); }
.joe_aside__item.tags .list .item a[data-color="4"] { --joe-tag-c: var(--joe-tag-p4); }
.joe_aside__item.tags .list .item a[data-color="5"] { --joe-tag-c: var(--joe-tag-p5); }
.joe_aside__item.tags .list .item a[data-color="6"] { --joe-tag-c: var(--joe-tag-p6); }
.joe_aside__item.tags .list .item a[data-color="7"] { --joe-tag-c: var(--joe-tag-p7); }
.joe_aside__item.tags .list .item a[data-color="8"] { --joe-tag-c: var(--joe-tag-p8); }

/* 夜间：底色略收 8%，避免鲜绿在深色背景上过亮 */
html[data-night=night] .joe_aside__item.tags .list .item a {
  background: var(--joe-tag-c);
  background: color-mix(in srgb, var(--joe-tag-c) 92%, #000 8%);
}

/* 夜间：主题色是浅亮绿 (#63c76a)，白字压在上面几乎糊在一起，页码改用深色文字 */
html[data-night=night] .joe_pagination li.active a,
html[data-night=night] .joe_pagination li a:hover {
  color: #1f1f1f;
}
html[data-night=night] .joe_pagination li a:hover .icon {
  fill: #1f1f1f;
}

/* ===== 那年今日（主栏胶囊块）：全站模板共用，窄屏显示；PC 端由侧边栏展示 ===== */
/* 那年今日 */
.joe_index__history {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid var(--classC);
  border-radius: var(--radius-inner);
  background: var(--background);
}
.joe_index__history-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--routine);
}
.joe_index__history-title svg {
  margin-right: 6px;
  fill: var(--theme);
}
.joe_index__history-list {
  margin-top: 8px;
}
.joe_index__history-list ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.joe_index__history-list .item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 28px;
  padding-right: 12px;
  font-size: 13px;
  border: 1px solid var(--classC);
  border-radius: 14px;
  background: var(--classD);
  overflow: hidden;
  transition: border-color 0.35s;
}
.joe_index__history-list .item:hover {
  border-color: var(--theme);
}
.joe_index__history-list .item .year {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 8px;
  padding: 0 8px;
  font-size: 12px;
  color: #fff;
  background-image: linear-gradient(270deg, #b7e778, #7ed957, #4caf50, #2f9e44);
  background-color: #4caf50;
}
.joe_index__history-list .item .link {
  color: var(--minor);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.35s;
}
.joe_index__history-list .item .link:hover {
  color: var(--theme);
}
.joe_index__history-list .empty {
  color: var(--minor);
  font-size: 13px;
  padding: 4px 0;
}
/* 那年今日：PC 端显示在侧边栏，主栏这份只在窄屏（<=992px）显示 */
@media (min-width: 993px) {
  .joe_index__history {
    display: none;
  }
}

/* ===== 那年今日：文章名悬停显示发布日期 =====
   只用右侧原地展开这一种效果（不挂 title 属性，避免浏览器原生悬浮提示）。
   不用浮层气泡：侧边栏卡片只有 250px 宽、行高 36px，向上弹的气泡必然会压住
   上一条文章名（第 1 条则压住「那年今日」标题），所以改成在标题右侧原地展开。
   日期由 core/function.php 输出成 <span class="hdate">；默认 max-width:0 收起来，
   悬停时展开，标题自带 flex:1 + ellipsis 会平滑让位，整块不会跳动也不会遮挡内容。 */
.joe_aside__history-list .item .hdate {
  flex: 0 0 auto;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  color: #2e7d32;
  transition: max-width 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
}
.joe_aside__history-list .item:hover .hdate {
  max-width: 84px;
  margin-left: 8px;
  opacity: 1;
}
html[data-night=night] .joe_aside__history-list .item .hdate {
  color: #9be08a;
}

/* ===== 配图描边：列表缩略图 + 文章正文 =====
   颜色收口成变量，夜间只换一组值 */
:root {
  --joe-img-bd: rgba(16, 24, 12, 0.20);
  --joe-img-bs: 0 3px 14px rgba(16, 24, 12, 0.14);
}
html[data-night=night] {
  --joe-img-bd: rgba(255, 255, 255, 0.24);
  --joe-img-bs: 0 3px 14px rgba(0, 0, 0, 0.55);
}
/* 阴影挂在外层链接上：.thumbnail 有 overflow:hidden，挂在 img 上会被自己裁掉 */
.joe_list__item.default .thumbnail,
.joe_list__item.single .thumbnail,
.joe_list__item.multiple .thumbnail {
  border-radius: var(--radius-inner);
  box-shadow: var(--joe-img-bs);
}
.joe_list__item.default .thumbnail img,
.joe_list__item.single .thumbnail img,
.joe_list__item.multiple .thumbnail img {
  box-sizing: border-box;
  /* 3px 留白做相框边：纯 1px 描边在浅色配图上几乎看不见 */
  padding: 3px;
  background: var(--classB, #e4e7ed);
  border: 1px solid var(--joe-img-bd);
}
/* 正文配图（表情图除外） */
.joe_detail__article img:not(.owo_image) {
  box-sizing: border-box;
  border: 1px solid var(--joe-img-bd);
  box-shadow: var(--joe-img-bs);
}


/* ===== Fei：内页单栏 =====
   所有内页（文章 / 独立页 / 归档 / 友链 / 壁纸 / 统计 / 留言）移除右侧栏，
   正文占满容器但保留一个舒适的最大阅读宽度，避免长行难读。 */
.joe_container.fei_single {
  display: block;
}
.joe_container.fei_single > .joe_main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  float: none;
}
/* 侧栏取消后，原本只在窄屏出现的「那年今日」胶囊在桌面端也要显示 */
@media (min-width: 993px) {
  .joe_container.fei_single .joe_index__history {
    display: block;
  }
}