body,
p,
pre {
  margin: 0;
}

button {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

h1,
h2,
h3 {
  margin: 0;
  font: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

a {
  color: inherit;
  text-decoration: none;
}
:root { /* rgba(0 0 0 .5) */ /* rgba(0, 0, 0, .3) */

  /* appview 色表 */
}
html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
}

img {
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
  text-rendering: optimizeLegibility;
  line-height: 1.2;
  color: #333;
}

#react-root,
div,
article,
footer,
header,
main,
nav,
section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}

button {
  cursor: pointer;
}

::-moz-selection {
  background-color: #dddedf;
}

::selection {
  background-color: #dddedf;
}

::-webkit-input-placeholder {
  color: #808080;
}
.u-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.u-prewrap {
  white-space: pre-wrap;
}
.BrowserHappy {
  display: block;
  font-size: 1.2em;
  line-height: 2.6;
  background: #eee;
  text-align: center;
}

  .BrowserHappy a {
    color: #259;
  }
@font-face {
  font-family: 'icomoon';
  src: url(//static.zhihu.com/hemingway/icomoon.4356ce085a0c387d28c3d236716f682d.ttf) format('truetype'),
    url(//static.zhihu.com/hemingway/icomoon.207481a709643f0dfd3d7418ad204e91.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
  font-size: 24px;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-feature-settings: normal;
          font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ic_collect:before {
  content: '\e933';
}
.icon-wallet:before {
  content: '\e932';
}
.icon-ic_wechatpay:before {
  content: '\e931';
}
.icon-ic_pass:before {
  content: '\e930';
}
.icon-ic_visibility_off:before {
  content: '\e92d';
}
.icon-ic_highlighted:before {
  content: '\e92e';
}
.icon-ic_conversations:before {
  content: '\e92f';
}
.icon-ic_share_dudu:before {
  content: '\e928';
}
.icon-ic_check_button_off:before {
  content: '\e92b';
}
.icon-ic_check_button_on:before {
  content: '\e92c';
}
.icon-ic_comment:before {
  content: '\e92a';
}
.icon-ic_lock:before {
  content: '\e929';
}
.icon-ic_invite_cancel:before {
  content: '\e927';
}
.icon-ic_column_no_article:before {
  content: '\e923';
}
.icon-ic_no_article:before {
  content: '\e924';
}
.icon-ic_no_contribute:before {
  content: '\e925';
}
.icon-ic_no_drafts:before {
  content: '\e926';
}
.icon-ic_column_end:before {
  content: '\e91b';
}
.icon-ic_column_play:before {
  content: '\e922';
}
.icon-ic_edit_editlink:before {
  content: '\e91c';
}
.icon-ic_edit_link:before {
  content: '\e91d';
}
.icon-ic_edit_showlink:before {
  content: '\e91e';
}
.icon-ic_edit_t:before {
  content: '\e91f';
}
.icon-ic_prompt_done:before {
  content: '\e920';
}
.icon-ic_prompt_error:before {
  content: '\e921';
}
.icon-ic_nav_review:before {
  content: '\e919';
}
.icon-ic_loading:before {
  content: '\e91a';
}
.icon-ic_review_add:before {
  content: '\e918';
}
.icon-ic_column_report:before {
  content: '\e917';
}
.icon-ic_close:before {
  content: '\e900';
}
.icon-ic_column_edit:before {
  content: '\e901';
}
.icon-ic_column_like:before {
  content: '\e902';
}
.icon-ic_column_more:before {
  content: '\e903';
}
.icon-ic_column_reply:before {
  content: '\e904';
}
.icon-ic_column_share:before {
  content: '\e905';
}
.icon-ic_comment_like:before {
  content: '\e906';
}
.icon-ic_help:before {
  content: '\e907';
}
.icon-ic_like_more:before {
  content: '\e908';
}
.icon-ic_nav_more:before {
  content: '\e909';
}
.icon-ic_nav_new:before {
  content: '\e90a';
}
.icon-ic_phot_camera_alt:before {
  content: '\e90b';
}
.icon-ic_phot_delete:before {
  content: '\e90c';
}
.icon-ic_phot_full_screen1:before {
  content: '\e90d';
}
.icon-ic_phot_full_screen2:before {
  content: '\e90e';
}
.icon-ic_radio_button_off:before {
  content: '\e90f';
}
.icon-ic_radio_button_on:before {
  content: '\e910';
}
.icon-ic_refresh:before {
  content: '\e911';
}
.icon-ic_search:before {
  content: '\e912';
}
.icon-ic_share_sina:before {
  content: '\e913';
}
.icon-ic_share_wechat:before {
  content: '\e914';
}
.icon-ic_unfold:before {
  content: '\e915';
}
.icon-ic_zhihu_logo:before {
  content: '\e916';
}
/**
 * appview 色板
 * see https://docs.google.com/document/d/1Jsl5hQqS6dHs9jA2KguH2d9ULbrRHHDB7Z985_PTrWY/edit?ts=58ec5b3b （不全）
 */

/*
 * 日间模式
 * 以 iOS 为默认，android 样式做补充；夜间同。
 */
.appview .av-card {
    background: #fff;
  }
.appview .av-titleFont,
  .appview .av-bodyFont {
    color: #444;
  }
.appview .av-footerFont {
    color: #999;
  }
.appview .av-cardBackground {
    background: #edeef0;
  }
.appview .av-borderColor {
    border-color: rgba(222, 222, 222, 0.5);
  }

.appview--android .av-titleFont,
  .appview--android .av-bodyFont {
    color: rgba(0, 0, 0, 0.87);
  }

.appview--android .av-footerFont {
    color: rgba(0, 0, 0, 0.54);
  }

.appview--android .av-cardBackground {
    background: #eff2f4;
  }

.appview--android .av-borderColor {
    border-color: rgba(0, 0, 0, 0.12);
  }

.appview--unifiedStyle .av-card,
  .appview--unifiedStyle .av-cardBackground {
    background-color: #ffffff;
  }

.appview--unifiedStyle .av-titleFont {
    color: #1a1a1a;
  }

.appview--unifiedStyle .av-bodyFont {
    color: #444444;
  }

.appview--unifiedStyle .av-footerFont {
    color: #bfbfbf;
  }

.appview--unifiedStyle .av-borderColor {
    border-color: #d3d3d3;
  }

/*
 * 夜间模式
 */
.appview--dark .av-titleFont,
  .appview--dark .av-bodyFont {
    color: #808394;
  }
.appview--dark .av-footerFont {
    color: #606476;
  }
.appview--dark .av-card {
    background: #1e1e29;
  }
.appview--dark .av-cardBackground {
    background: #13161e;
  }
.appview--dark .av-borderColor {
    border-color: #808394;
  }
.appview--dark.appview--android .av-titleFont,
    .appview--dark.appview--android .av-bodyFont {
      color: rgba(255, 255, 255, 0.87);
    }
.appview--dark.appview--android .av-footerFont {
      color: rgba(255, 255, 255, 0.54);
    }
.appview--dark.appview--android .av-card {
      background: #37474f;
    }
.appview--dark.appview--android .av-cardBackground {
      background: #212b30;
    }
.appview--dark.appview--android .av-borderColor {
      border-color: rgba(255, 255, 255, 0.12);
    }
.appview--dark.appview--unifiedStyle .av-card,
    .appview--dark.appview--unifiedStyle .av-cardBackground {
      background: #1a1a1a;
    }
.appview--dark.appview--unifiedStyle .av-titleFont {
      color: #999999;
    }
.appview--dark.appview--unifiedStyle .av-bodyFont {
      color: #808080;
    }
.appview--dark.appview--unifiedStyle .av-footerFont {
      color: #444444;
    }
.appview--dark.appview--unifiedStyle .av-borderColor {
      border-color: #444444;
    }
/**
 * NOTE:
 *   Hover 时使用统一的模式使按钮变暗：
 *   填充型，在原有颜色基础上降低亮度（lightness）5%，如：color-mod(cc(GBL05A) l(-5%))
 */
.Button {
  display: inline-block;
  padding: 0 16px;
  font-size: 14px;
  line-height: 32px;
  color: #8590A6;
  text-align: center;
  cursor: pointer;
  background: none;
  /* 默认使用 currentColor，防止使用方不必要的重置 */
  border: 1px solid;
  border-radius: 3px;
}
/* Firefox button padding, border compatible */
.Button::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
.Button:focus {
    outline: none;
    transition: box-shadow 0.3s;
  }
html[data-focus-visible] .Button:focus {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(0, 132, 255, 0.3);
  }
html[data-theme='dark'][data-focus-visible] .Button:focus {
    box-shadow: 0 0 0 2px #1A1A1A, 0 0 0 4px rgba(58, 118, 208, 0.6);
  }
.Button:disabled {
    cursor: default;
    opacity: 0.5;
  }
html[data-theme="dark"] .Button {
  color: #606A80;
}

.Button--grey {
  color: #8590A6;
  border-color: #8590A6;
}

.Button--grey:hover:not(:disabled) {
    background-color: rgba(133, 144, 166, 0.06);
  }

html[data-theme="dark"] .Button--grey:hover:not(:disabled) {
    background-color: rgba(96, 106, 128, 0.06);
}

html[data-theme="dark"] .Button--grey {
  color: #606A80;
}

html[data-theme="dark"] .Button--grey {
  border-color: #606A80;
}

.Button--blue {
  color: #0084FF;
  border-color: #0084FF;
}

.Button--blue:hover:not(:disabled) {
    background-color: rgba(0, 132, 255, 0.06);
  }

html[data-theme="dark"] .Button--blue:hover:not(:disabled) {
    background-color: rgba(58, 118, 208, 0.06);
}

html[data-theme="dark"] .Button--blue {
  color: #3A76D0;
}

html[data-theme="dark"] .Button--blue {
  border-color: #3A76D0;
}

.Button--green {
  color: #11a668;
  border-color: #11a668;
}

.Button--green:hover:not(:disabled) {
    /* 尽管绿色不再被使用，但为了保持组件为 API 完整还留着这个  */
    background-color: rgba(17, 166, 104, 0.06);
  }

.Button--red {
  color: #FF3366;
  border-color: #FF3366;
}

.Button--red:hover:not(:disabled) {
    background-color: rgba(255, 51, 102, 0.06);
  }

html[data-theme="dark"] .Button--red:hover:not(:disabled) {
    background-color: rgba(217, 33, 85, 0.06);
}

html[data-theme="dark"] .Button--red {
  color: #D92155;
}

html[data-theme="dark"] .Button--red {
  border-color: #D92155;
}

/* 填充型的按钮 */
.Button--primary.Button--blue {
    color: #FFFFFF;
    background-color: #0084FF;
  }
.Button--primary.Button--blue:hover:not(:disabled) {
      border-color: hsl(208.94117647058823, 100%, 45%);
      background-color: hsl(208.94117647058823, 100%, 45%);
    }
html[data-theme="dark"] .Button--primary.Button--blue:hover:not(:disabled) {
      border-color: hsl(216, 61.4754098361%, 47.1568627451%);
}
html[data-theme="dark"] .Button--primary.Button--blue:hover:not(:disabled) {
      background-color: hsl(216, 61.4754098361%, 47.1568627451%);
}
html[data-theme="dark"] .Button--primary.Button--blue {
    color: #EBEBEB;
}
html[data-theme="dark"] .Button--primary.Button--blue {
    background-color: #3A76D0;
}
.Button--primary.Button--green {
    color: #FFFFFF;
    background-color: #12b370;
  }
.Button--primary.Button--green:hover:not(:disabled) {
      /* 尽管绿色不再被使用，但为了保持组件为 API 完整还留着这个  */
      border-color: hsl(155.0310559006211, 81.7258883249%, 33.6274509804%);
      background-color: hsl(155.0310559006211, 81.7258883249%, 33.6274509804%) !important;
    }
html[data-theme="dark"] .Button--primary.Button--green {
    color: #EBEBEB;
}
.Button--primary.Button--red {
    color: #FFFFFF;
    background-color: #FF3366;
  }
.Button--primary.Button--red:hover:not(:disabled) {
      border-color: hsl(345, 100%, 55%);
      background-color: hsl(345, 100%, 55%);
    }
html[data-theme="dark"] .Button--primary.Button--red:hover:not(:disabled) {
      border-color: hsl(343.04347826086956, 73.6%, 44.0196078431%);
}
html[data-theme="dark"] .Button--primary.Button--red:hover:not(:disabled) {
      background-color: hsl(343.04347826086956, 73.6%, 44.0196078431%);
}
html[data-theme="dark"] .Button--primary.Button--red {
    color: #EBEBEB;
}
html[data-theme="dark"] .Button--primary.Button--red {
    background-color: #D92155;
}
.Button--primary.Button--grey {
    color: #FFFFFF;
    background-color: #8590A6;
  }
.Button--primary.Button--grey:hover:not(:disabled) {
      border-color: hsl(220.00000000000003, 15.6398104265%, 53.6274509804%);
      background-color: hsl(220.00000000000003, 15.6398104265%, 53.6274509804%);
    }
html[data-theme="dark"] .Button--primary.Button--grey:hover:not(:disabled) {
      border-color: hsl(221.25, 14.2857142857%, 38.9215686275%);
}
html[data-theme="dark"] .Button--primary.Button--grey:hover:not(:disabled) {
      background-color: hsl(221.25, 14.2857142857%, 38.9215686275%);
}
html[data-theme="dark"] .Button--primary.Button--grey {
    color: #EBEBEB;
}
html[data-theme="dark"] .Button--primary.Button--grey {
    background-color: #606A80;
}

.Button--spread {
  width: 100%;
}

.Button-icon {
  margin-right: 7px;
}

.Button--plain .Button-icon {
    margin-right: 6px;
  }

.Button--red .Button-icon,
  .Button--blue .Button-icon,
  .Button--green .Button-icon {
    fill: currentColor;
  }

.Button--plain,
.Button--link {
  height: auto;
  padding: 0;
  line-height: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

html[data-theme='dark'] .Button--plain, html[data-theme='dark'] .Button--link {
    border: none;
  }

html[data-theme='dark'] .Button--plain:hover, html[data-theme='dark'] .Button--link:hover {
      background-color: transparent;
      background-color: initial;
    }

.Button--plain:hover {
    background-color: transparent;
    background-color: initial;
    color: hsl(220.00000000000003, 15.6398104265%, 53.6274509804%);
  }

html[data-theme="dark"] .Button--plain:hover {
    color: hsl(221.25, 14.2857142857%, 38.9215686275%);
}

.Button--link {
  color: #175199;
}

.Button--link:hover {
    background-color: transparent;
    background-color: initial;
    color: hsl(213.23076923076923, 73.8636363636%, 29.5098039216%);
  }

html[data-theme="dark"] .Button--link:hover {
    color: hsl(213.23076923076923, 73.8636363636%, 29.5098039216%);
}

html[data-theme="dark"] .Button--link {
  color: #175199;
}

/* 仅有图标的按钮，默认正方形（34x34 与默认高度一致，保持合适触摸区域）*/

.Button--withIcon.Button--iconOnly {
    padding: 0 4px;
  }

.Button--withIcon.Button--plain,
  .Button--withIcon.Button--link {
    padding: 0;
  }

.Button--withIcon.Button--withLabel .Button-zi {
    margin-right: 4px;
  }
.ModalButtonGroup--vertical {
    margin-top: 40px;
    margin-bottom: 16px;
  }

    .ModalButtonGroup--vertical .Button {
      display: block;
      width: 220px;
      margin-right: auto;
      margin-left: auto;
    }

    .ModalButtonGroup--vertical .Button + .Button {
      margin-top: 28px;
    }

    .Modal-content--buttonGroupOnly .ModalButtonGroup--vertical {
      margin-top: 60px;
    }
  .ModalButtonGroup--horizontal {
    display: flex;
    flex-direction: row;
    margin-top: 48px;
  }
  .ModalButtonGroup--horizontal .Button {
      flex: 1 1;
    }
  /* only single Button */
  .ModalButtonGroup--horizontal .Button:last-child:first-child {
        width: 220px;
        margin-right: auto;
        margin-left: auto;
        flex: initial;
      }
  .ModalButtonGroup--horizontal .Button + .Button {
      margin-left: 16px;
    }
.Modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 203;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  transition: opacity 300ms ease-out;
}

  .Modal-wrapper.Modal-enter {
      opacity: 0.01;
    }

  .Modal-wrapper.Modal-enter-active {
      opacity: 1;
    }

  .Modal-wrapper.Modal-leave {
      opacity: 1;
    }

  .Modal-wrapper.Modal-leave-active {
      opacity: 0.01;
    }

.Modal-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-color: rgba(26, 26, 26, 0.65);
  transition: background-color 300ms ease-out;
}

.Modal-wrapper--transparent .Modal-backdrop {
    background-color: transparent;
  }

html[data-theme="dark"] .Modal-backdrop {
  background-color: rgba(0, 0, 0, 0.65);
}

.Modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-height: calc(100vh - 24px * 2);
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1);
  box-sizing: border-box;
  transition: max-height 800ms ease;
}

html[data-theme='dark'] .Modal {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

.Modal:focus {
    outline: none;
  }

.Modal--large {
    width: 536px;
  }

.Modal--fullPage {
    width: 688px;
    height: calc(100vh - 24px * 2);
  }

.Modal-enter .Modal {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }

.Modal-enter-active .Modal {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
    transition: transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out;
  }

.Modal-leave .Modal {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

.Modal-leave-active .Modal {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
    transition: transform 300ms ease-out, opacity 300ms ease-out, -webkit-transform 300ms ease-out;
  }

.Modal-inner {
  overflow: auto;
  background: #FFFFFF;
  border-radius: 2px;
}

.Modal--fullPage .Modal-inner {
    height: 100%;
  }

html[data-theme="dark"] .Modal-inner {
  background: #1A1A1A;
}

.Modal-closeButton {
  position: absolute;
  top: 8px;
  right: -60px;
  padding: 12px;
}

.Modal-closeIcon {
  vertical-align: top;
  fill: #FFFFFF;
}

html[data-theme="dark"] .Modal-closeIcon {
  fill: #EBEBEB;
}

.Modal-title {
  margin-top: 40px;
  font-size: 24px;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
}

.Modal-title.Modal-title--simple {
    font-family: inherit;
    font-size: 20px;
  }

html[data-theme="dark"] .Modal-title {
  color: #999999;
}

.Modal-subtitle {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590A6;
  text-align: center;
}

.Modal-subtitle a {
    text-decoration: underline;
  }

html[data-theme="dark"] .Modal-subtitle {
  color: #606A80;
}

.Modal-content {
  flex: 1 1;
  padding: 0 24px 32px;
  margin-top: 24px;
  line-height: 1.7;
  opacity: 1;
}

.Modal--fullPage .Modal-content {
    padding: 0;
  }

.Modal-content.Modal-content--spread {
    height: 100%;
    margin-top: 0;
  }

.Modal-content.Modal-content--hidden {
    opacity: 0;
    transition: opacity 300ms ease-out;
  }

.Modal-footer {
  padding: 16px 24px;
  font-size: 13px;
  line-height: 1.7;
  color: #8590A6;
  background: #F6F6F6;
  border-top: 1px solid #EBEBEB;
}

.Modal-footer a {
    text-decoration: underline;
  }

html[data-theme="dark"] .Modal-footer {
  color: #606A80;
}

html[data-theme="dark"] .Modal-footer {
  background: #2E2E2E;
}

html[data-theme="dark"] .Modal-footer {
  border-top: 1px solid #444444;
}
.VagueImage {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F6F6F6;
}
  html[data-theme="dark"] .VagueImage {
  background-color: #2E2E2E;
}

.VagueImage-mask {
  z-index: 1;
  opacity: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 300ms ease-in;
}

.VagueImage-mask.is-active {
    opacity: 1;
  }

.VagueImage-mask,
  .VagueImage-mask::before,
  .VagueImage-mask::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

.VagueImage-mask::after,
  .VagueImage-mask::before {
    display: block;
    content: '';
  }

.VagueImage-mask::before {
    background-color: #FFFFFF;
    opacity: 0.32;
  }

html[data-theme="dark"] .VagueImage-mask::before {
    background-color: #1A1A1A;
}

.VagueImage-mask::after {
    -webkit-filter: blur(16px);
            filter: blur(16px);
    background-image: inherit;
    background-size: cover;
    background-position: center;
  }

.VagueImage-innerLarge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}
.LinkCard {
  position: relative;
  display: block;
  margin: 1em auto;

  width: 390px;
  box-sizing: border-box;
  border-radius: 12px;
  max-width: 100%;
  overflow: hidden;
}

  .LinkCard,
  .LinkCard:hover {
    text-decoration: none;
    border: none !important;
    color: inherit !important;
  }

.LinkCard-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: inherit;
  background-color: rgba(246, 246, 246, 0.88);
}

.LinkCard--noImage .LinkCard-content {
    background-color: #F6F6F6;
  }

html[data-theme="dark"] .LinkCard--noImage .LinkCard-content {
    background-color: #2E2E2E;
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {

.LinkCard-content {
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px)
}
  }

html[data-theme="dark"] .LinkCard-content {
  background-color: rgba(46, 46, 46, 0.88);
}

.LinkCard-text {
  overflow: hidden;
}

.LinkCard-title {
  /* 2 行截断（Chrome/Safari），注意卡片是自适应宽度的 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 2 行截断 fallback */
  max-height: calc(16px * 1.25 * 2);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: #1A1A1A;
}

html[data-theme="dark"] .LinkCard-title {
  color: #999999;
}

.LinkCard-meta {
  display: flex;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #999999;
  white-space: nowrap;
}

html[data-theme="dark"] .LinkCard-meta {
  color: #646464;
}

.LinkCard-textMeta {
  overflow: hidden;
  text-overflow: ellipsis;
}

.LinkCard-metaItem:first-child::before {
    content: none;
  }

.LinkCard-metaItem::before {
    content: ' · ';
  }

@media (max-width: 320px) {

.LinkCard-metaItem-jobLocation {
    display: none
}
  }

.LinkCard-badge {
  background: #FFFFFF;
  border-radius: 5px;
  color: #C2A469;
  display: inline-block;
  margin-left: 8px;
  min-width: 50px;
  padding: 0 4px;
  text-align: center;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
}

html[data-ios] .LinkCard-badge {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .LinkCard-badge {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

html[data-theme="dark"] .LinkCard-badge {
  background: #1A1A1A;
}

html[data-theme="dark"] .LinkCard-badge {
  color: #806E46;
}

.LinkCard-image {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: inherit;
}

/* 3:2, 180x120 */

.LinkCard-image.LinkCard-image--horizontal {
    width: 90px;
  }

/* 3:4, 120x160 */

.LinkCard-image.LinkCard-image--vertical {
    height: 80px;
  }

.LinkCard-imageCell {
  margin-left: 8px;
  border-radius: 6px;
}

html[data-theme='dark'] .LinkCard--hasImage .LinkCard-imageCell {
    -webkit-filter: brightness(0.7);
            filter: brightness(0.7);
  }

.LinkCard-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  background-size: cover;
  background-position: center;
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {

.LinkCard-backdrop {
    -webkit-filter: none;
            filter: none
}
  }

.LinkCard-image--default {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #EBEBEB;
  color: #D3D3D3;
}

html[data-theme="dark"] .LinkCard-image--default {
  background-color: #444444;
}

html[data-theme="dark"] .LinkCard-image--default {
  color: #2E2E2E;
}
.ReferenceList {
  clear: both;
  font-size: 0.8em;
}

  .ReferenceList li:focus {
    outline: none;
    transition: box-shadow 0.3s;
  }

  html[data-focus-visible] .ReferenceList li:focus {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(0, 132, 255, 0.3);
  }

  html[data-theme='dark'][data-focus-visible] .ReferenceList li:focus {
    box-shadow: 0 0 0 2px #1A1A1A, 0 0 0 5px rgba(58, 118, 208, 0.6);
  }

  .ReferenceList .ReferenceList-backHint {
    padding-right: 0.25em;
  }

  .ReferenceList .ReferenceList-backLink {
    color: #175199;
    padding-right: 0.25em;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }

  html[data-ios] .ReferenceList .ReferenceList-backLink {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

  html[data-android] .ReferenceList .ReferenceList-backLink {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

  @media (hover: hover) {
      .ReferenceList .ReferenceList-backLink:hover {
        text-decoration: underline;
      }
    }

  html[data-theme="dark"] .ReferenceList .ReferenceList-backLink {
    color: #175199;
}
/**
 * 富文本样式
 */

.RichText {

  /* RichText 有时候会以 inline 的时候被显示（比如 people tagline） */
  /* 这种时候不光不需要清除浮动（问答文章等真正的富文本才需要） */
  /* 反而会因为添加的前后两个 block 导致样式错误，因此只有「真正的 RichText」 */
}

/* TODO：删除这个，应由外部传入 ztext 专有的 mention class */

.RichText a.UserLink-link {
    color: #175199;
  }

.RichText a.UserLink-link:hover {
    border-bottom: 1px solid #175199;
  }

html[data-theme="dark"] .RichText a.UserLink-link:hover {
    border-bottom: 1px solid #175199;
}

html[data-theme="dark"] .RichText a.UserLink-link {
    color: #175199;
}

/* 即「可能插入 float 图片」的富文本需要显式添加该 class */

.RichText--clearBoth::before,
    .RichText--clearBoth::after {
      clear: both;
      content: '';
      display: block;
    }
/**
 * 内容排版规范
 * http://wiki.in.zhihu.com/pages/viewpage.action?pageId=41363888
 * 注意：
 * - 此样式表主要包含原生标签样式
 * - 文档（wiki）按 rem 标记，但样式需要跨多项目、多页面使用，不适合使用 rem，所以部分样式存在 rem/em 转换
 *
 * 行间距规范
 * http://wiki.in.zhihu.com/pages/viewpage.action?pageId=56537531
 * - 约定了空段落应当被缩减高度
 */

.ztext {

  word-break: break-word;
  line-height: 1.6;

  /* 空段落 */
  /* 空段落的高度需要缩减为 2.8em */
  /* 1.4em 上边距 + 1.6em 行高 + 1.4em 下边距 在缩减后变成： */
}

.ztext > :first-child {
    margin-top: 0;
  }

.ztext > :last-child {
    margin-bottom: 0;
  }

/* 标题（暂只支持二级与三级标题） */

.ztext h1,
  .ztext h2 {
    clear: left;
    margin-top: calc(1.4em * 2 / 1.2);
    margin-bottom: calc(1.4em / 1.2);
    font-size: 1.2em;
    line-height: 1.5;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }

html[data-ios] .ztext h1, html[data-ios] .ztext h2 {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ztext h1, html[data-android] .ztext h2 {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ztext h3,
  .ztext h4,
  .ztext h5,
  .ztext h6 {
    clear: left;
    margin-top: calc(1.4em * 1.5 / 1.1);
    margin-bottom: calc(1.4em / 1.1);
    font-size: 1.1em;
    line-height: 1.5;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }

html[data-ios] .ztext h3, html[data-ios] .ztext h4, html[data-ios] .ztext h5, html[data-ios] .ztext h6 {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ztext h3, html[data-android] .ztext h4, html[data-android] .ztext h5, html[data-android] .ztext h6 {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

/* 下划线 */

.ztext u {
    text-decoration: none;
    border-bottom: 1px dashed #808080;
  }

html[data-theme="dark"] .ztext u {
    border-bottom: 1px dashed #808080;
}

/* 粗体 */

.ztext b {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }

html[data-ios] .ztext b {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ztext b {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

/* 上标 */

.ztext sup {
    font-size: 0.8em;
  }

/* 注释 */

.ztext sup[data-draft-type='reference'] {
    color: #175199;
  }

html[data-theme="dark"] .ztext sup[data-draft-type='reference'] {
    color: #175199;
}

/* 链接 */

.ztext a:focus {
    outline: none;
    transition: box-shadow 0.3s;
  }

html[data-focus-visible] .ztext a:focus {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(0, 132, 255, 0.3);
  }

html[data-theme='dark'][data-focus-visible] .ztext a:focus {
    box-shadow: 0 0 0 2px #1A1A1A, 0 0 0 4px rgba(58, 118, 208, 0.6);
  }

.ztext a.ztext-link,
  .ztext a.internal,
  .ztext a.external {
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid #808080;
  }

.ztext a.ztext-link:hover, .ztext a.internal:hover, .ztext a.external:hover {
      color: #175199;
      border-bottom: 1px solid #175199;
    }

html[data-theme="dark"] .ztext a.ztext-link:hover, html[data-theme="dark"] .ztext a.internal:hover, html[data-theme="dark"] .ztext a.external:hover {
      color: #175199;
}

html[data-theme="dark"] .ztext a.ztext-link:hover, html[data-theme="dark"] .ztext a.internal:hover, html[data-theme="dark"] .ztext a.external:hover {
      border-bottom: 1px solid #175199;
}

/* 优化过后的超级链接，隐藏 protocol 和 path */

.ztext a.ztext-link > .ellipsis::after, .ztext a.internal > .ellipsis::after, .ztext a.external > .ellipsis::after {
      content: '...';
    }

.ztext a.ztext-link > .invisible, .ztext a.internal > .invisible, .ztext a.external > .invisible {
      /* .u-hideText */
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
    }

.ztext a.ztext-link u, .ztext a.internal u, .ztext a.external u {
      border: none;
    }

html[data-theme="dark"] .ztext a.ztext-link, html[data-theme="dark"] .ztext a.internal, html[data-theme="dark"] .ztext a.external {
    border-bottom: 1px solid #808080;
}

/* 提及链接 */

.ztext a.member_mention {
    color: #175199;
  }

.ztext a.member_mention:hover {
    border-bottom: 1px solid #175199;
  }

html[data-theme="dark"] .ztext a.member_mention:hover {
    border-bottom: 1px solid #175199;
}

html[data-theme="dark"] .ztext a.member_mention {
    color: #175199;
}

/* 段落 */

.ztext p {
    margin: 1.4em 0;
  }

/* http://wiki.in.zhihu.com/pages/viewpage.action?pageId=56537531 */

.ztext p.ztext-empty-paragraph {
    margin: calc(
        (2.8em - (1.4em * 2 + 1.6em)) /
          2
      )
      0;
  }

/* 连续的空段落可能是故意的，需要保留 */

.ztext p.ztext-empty-paragraph + .ztext-empty-paragraph {
      margin: 1.4em 0;
    }

/* 分割线 */

.ztext hr {
    margin: 4em auto;
    width: 240px;
    max-width: 100%;
    border: none;
    border-top: 1px solid #D3D3D3;
  }

html[data-theme="dark"] .ztext hr {
    border-top: 1px solid #2E2E2E;
}

/* 公式 */

.ztext img[eeimg] {
    max-width: 100%;
    vertical-align: middle;
  }

/* 公式使用 GBK02A [#1A1A1A, #999999] */

html[data-theme='dark'] .ztext img[eeimg] {
      -webkit-filter: invert(0.6) hue-rotate(180deg);
              filter: invert(0.6) hue-rotate(180deg); /* 0.6 = 0x99/0xff */
  }

/* inline math */

.ztext img[eeimg='1'] {
    margin: 0 3px;
    display: inline-block;
  }

/* display math */

.ztext img[eeimg='2'] {
    margin: 1.4em auto;
    display: block;
  }

/* 引用 */

.ztext blockquote {
    margin: 1.4em 0;
    padding-left: 1em;
    color: #646464;
    border-left: 3px solid #D3D3D3;
  }

html[data-theme="dark"] .ztext blockquote {
    color: #999999;
}

html[data-theme="dark"] .ztext blockquote {
    border-left: 3px solid #2E2E2E;
}

/** 列表
   * 对于列表的特别定制（https://codepen.io/ambarli/full/yjaYLZ/）：
   * - 项目符号与左边对齐
   * - 折行的文本与之前的文本对齐
   * - 防止溢出（三位数及以上的序号）
   * - 对齐列表外的相邻文本
   * - 同级的序号始终右侧对齐（仅有序列表）
   */

.ztext ol,
  .ztext ul {
    margin: 1.4em 0;
    padding: 0;
  }

.ztext ol ol,
    .ztext ol ul,
    .ztext ul ol,
    .ztext ul ul {
      margin: 0;
    }

/* 错误格式兼容（https://git.in.zhihu.com/fe/zhihu-components/issues/27） */

.ztext ol > ol,
    .ztext ol > ul,
    .ztext ul > ol,
    .ztext ul > ul {
      display: table-row;
    }

.ztext ol > ol::before, .ztext ol > ul::before, .ztext ul > ol::before, .ztext ul > ul::before {
        display: table-cell;
        content: '';
      }

/* 负 margin 是为了在侵蚀掉相邻 p 的合并上下边距 */

.ztext ul {
    display: table;
  }

.ztext ul > li {
      display: table-row;
      list-style: none;
    }

.ztext ul > li::before {
        display: table-cell;
        content: '• ';
        white-space: pre;
      }

/* 0.6em 上边距 + 1.6em 行高 + 0.6em 下边距 */

.ztext ol {
    display: table;
    counter-reset: ol;
  }

.ztext ol > li {
      display: table-row;
      list-style: none;
    }

.ztext ol > li::before {
        display: table-cell;
        /* 与原生一致，并且不同数字的占用宽度不一样（即使位数相同，例如 1/8 的宽度不一样） */
        text-align: right;
        counter-increment: ol;
        content: counter(ol) '. ';
        white-space: pre;
      }

/* hack level 2（错误格式兼容） */

.ztext ol ol {
    counter-reset: ol2;
  }

.ztext ol ol li::before {
      counter-increment: ol2;
      content: counter(ol2) '. ';
    }

/* hack level 3（错误格式兼容） */

.ztext ol ol ol {
    counter-reset: ol3;
  }

.ztext ol ol ol li::before {
      counter-increment: ol3;
      content: counter(ol3) '. ';
    }

/* hack level 4（错误格式兼容 —— Draft.js 最高支持四级嵌套） */

.ztext ol ol ol ol {
    counter-reset: ol4;
  }

.ztext ol ol ol ol li::before {
      counter-increment: ol4;
      content: counter(ol4) '. ';
    }

/* 图片（容器） */

.ztext figure {
    margin: 1.4em 0;
  }

.ztext figure .content_image,
    .ztext figure .origin_image {
      margin: 0 auto;
    }

.ztext figure figcaption {
      margin-top: calc(0.6em / 0.9);
      padding: 0 1em; /* 如果存在全宽图片，防止文字贴边 */
      font-size: 0.9em;
      line-height: 1.5;
      text-align: center;
      color: #999999;
    }

html[data-theme="dark"] .ztext figure figcaption {
      color: #646464;
}

/* 让相邻图片注释区分明显一些 */

.ztext figure + figure {
      margin-top: calc(1.4em * 1.6);
    }

/* 图片容器上（RichText）或容器内（编辑器）设置了小图尺寸 */

.ztext figure[data-size='small'],
    .ztext figure:not([data-size]) > [data-size='small'] {
      clear: both;
    }

/* 图片容器上（RichText）或容器内（编辑器）设置了左右浮动属性 */

.ztext figure[data-size='left'],
    .ztext figure:not([data-size]) > [data-size='left'] {
      float: left;
      margin: 0 20px 20px 0;
      max-width: 33%;
    }

.ztext figure[data-size='right'],
    .ztext figure:not([data-size]) > [data-size='right'] {
      float: right;
      margin: 0 0 20px 20px;
      max-width: 33%;
    }

/* 图片（content_image 是宽度 <= 420 的图片，origin_image 是宽度 > 420 的图片） */

.ztext .content_image,
  .ztext .origin_image {
    display: block;
    max-width: 100%;
    margin: 1.4em auto;
  }

html[data-theme='dark'] .ztext .content_image, html[data-theme='dark'] .ztext .origin_image {
    -webkit-filter: brightness(0.7);
            filter: brightness(0.7);
  }

/* https://bugs.webkit.org/show_bug.cgi?id=183271 */

html[data-ios] .ztext .content_image, html[data-ios] .ztext .origin_image {
      -webkit-filter: none;
              filter: none;
    }

/* iOS 11 下 Mobile Safari 使用滤镜偶尔会破坏图片显示 */

.ztext .content_image[data-size='small'], .ztext .origin_image[data-size='small'] {
      max-width: 40%;
    }

.ztext .content_image.zh-lightbox-thumb, .ztext .origin_image.zh-lightbox-thumb {
      cursor: zoom-in;
    }

/* 内联代码*/

.ztext code {
    margin: 0 2px;
    padding: 3px 4px;
    border-radius: 3px;
    font-family: Menlo, Monaco, Consolas, 'Andale Mono', 'lucida console', 'Courier New', monospace;
    font-size: 0.9em;
    background-color: #F6F6F6;
  }

html[data-theme="dark"] .ztext code {
    background-color: #2E2E2E;
}

/* 预格式化文本（代码块容器，高亮样式在 highlight.css） */

.ztext pre {
    margin: 1.4em 0;
    padding: calc(0.8em / 0.9);
    font-size: 0.9em;
    /* 覆盖 .ztext 设置的 break-word，否则 Safari 下会折行 */
    word-break: initial;
    /* overflow 容器不需要 break-word（同时确保 IE/Edge 显示滚动条，覆盖了外层的 word-wrap 样式） */
    word-wrap: initial;
    white-space: pre;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #F6F6F6;
    border-radius: 4px;
  }

.ztext pre code {
      margin: 0;
      padding: 0;
      font-size: inherit;
      border-radius: 0;
      background-color: inherit;
    }

html[data-theme="dark"] .ztext pre {
    background: #2E2E2E;
}

/* 当前列表用表格模拟样式，内部遇到 pre 溢出时会 overflow 不生效（发生在旧的内容和用户构造提交的内容上）；TODO: 移除表格显示 */

.ztext li pre {
    white-space: pre-wrap;
  }

/* 注释 hover 气泡 */
.ztext-referene-tooltip .TooltipContent-children {
  display: block;
  max-width: 250px;
  max-height: 150px;
  overflow: auto;
  white-space: normal;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

/* 旧的视频和分享，已废弃（新编辑器不再提供） */
.ztext .video-box,
.ztext .link-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 1.4em 0;
  overflow: auto;
  white-space: normal;
  cursor: pointer;
  border: solid 1px #EBEBEB;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}
html[data-theme='dark'] .ztext .video-box, html[data-theme='dark'] .ztext .link-box {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
.ztext .video-box .thumbnail, .ztext .link-box .thumbnail {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
    -o-object-fit: cover;
       object-fit: cover;
  }
.ztext .video-box .content, .ztext .link-box .content {
    display: flex;
    width: 100%;
    padding: 10px 1em;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-around;
  }
.ztext .video-box .title, .ztext .link-box .title {
    font-size: 1.2em;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .ztext .video-box .title, html[data-ios] .ztext .link-box .title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .ztext .video-box .title, html[data-android] .ztext .link-box .title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
.ztext .video-box .url, .ztext .link-box .url {
    overflow: hidden;
    color: #808080;

    /* .u-ellipsis */
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
  }
html[data-theme="dark"] .ztext .video-box .url, html[data-theme="dark"] .ztext .link-box .url {
    color: #808080;
}
.ztext .video-box .label, .ztext .link-box .label {
    display: none;
  }
html[data-theme="dark"] .ztext .video-box, html[data-theme="dark"] .ztext .link-box {
  border: solid 1px #444444;
}
/* 代码高亮（由 Pygments 实现） */
.highlight {
  margin: 1em 0;
}
.highlight pre {
    margin: 0;
  }
/* 修改自 trac 主题 */
.highlight .hll {
    background-color: #FDFDFD;
  }
html[data-theme="dark"] .highlight .hll {
    background-color: #2E2E2E;
}
/* Comment */
.highlight .c {
    font-style: italic;
    color: #999999;
  }
html[data-theme="dark"] .highlight .c {
    color: #646464;
}
/* Error */
.highlight .err {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .err {
    color: #B7302D;
}
/* Keyword */
.highlight .k {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .k {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .k {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Operator */
.highlight .o {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .o {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .o {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Comment.Multiline */
.highlight .cm {
    font-style: italic;
    color: #999999;
  }
html[data-theme="dark"] .highlight .cm {
    color: #646464;
}
/* Comment.Preproc */
.highlight .cp {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    color: #999999;
  }
html[data-ios] .highlight .cp {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .cp {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
html[data-theme="dark"] .highlight .cp {
    color: #646464;
}
/* Comment.Single */
.highlight .c1 {
    font-style: italic;
    color: #999999;
  }
html[data-theme="dark"] .highlight .c1 {
    color: #646464;
}
.highlight .cs {
    font-style: italic;
    /* Comment.Special */
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    color: #999999;
  }
html[data-ios] .highlight .cs {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .cs {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
html[data-theme="dark"] .highlight .cs {
    color: #646464;
}
/* Generic.Deleted */
.highlight .gd {
    color: #1A1A1A;
    background-color: #EBEBEB;
  }
html[data-theme="dark"] .highlight .gd {
    color: #999999;
}
html[data-theme="dark"] .highlight .gd {
    background-color: #444444;
}
/* Generic.Emph */
.highlight .ge {
    font-style: italic;
  }
/* Generic.Error */
.highlight .gr {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .gr {
    color: #B7302D;
}
/* Generic.Heading */
.highlight .gh {
    color: #999999;
  }
html[data-theme="dark"] .highlight .gh {
    color: #646464;
}
/* Generic.Inserted */
.highlight .gi {
    color: #1A1A1A;
    background-color: #F6F6F6;
  }
html[data-theme="dark"] .highlight .gi {
    color: #999999;
}
html[data-theme="dark"] .highlight .gi {
    background-color: #2E2E2E;
}
/* Generic.Output */
.highlight .go {
    color: #808080;
  }
html[data-theme="dark"] .highlight .go {
    color: #808080;
}
/* Generic.Prompt */
.highlight .gp {
    color: #646464;
  }
html[data-theme="dark"] .highlight .gp {
    color: #999999;
}
/* Generic.Strong */
.highlight .gs {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .gs {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .gs {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Generic.Subheading */
.highlight .gu {
    color: #999999;
  }
html[data-theme="dark"] .highlight .gu {
    color: #646464;
}
/* Generic.Traceback */
.highlight .gt {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .gt {
    color: #B7302D;
}
/* Keyword.Constant */
.highlight .kc {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .kc {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .kc {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Keyword.Declaration */
.highlight .kd {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .kd {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .kd {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Keyword.Namespace */
.highlight .kn {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .kn {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .kn {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Keyword.Pseudo */
.highlight .kp {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .kp {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .kp {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Keyword.Reserved */
.highlight .kr {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .kr {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .kr {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Keyword.Type */
.highlight .kt {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    color: #175199;
  }
html[data-ios] .highlight .kt {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .kt {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
html[data-theme="dark"] .highlight .kt {
    color: #175199;
}
/* Literal.Number */
.highlight .m {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .m {
    color: #3A76D0;
}
/* Literal.String */
.highlight .s {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .s {
    color: #B7302D;
}
/* Name.Attribute */
.highlight .na {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .na {
    color: #3A76D0;
}
/* Name.Builtin */
.highlight .nb {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .nb {
    color: #3A76D0;
}
/* Name.Class */
.highlight .nc {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    color: #175199;
  }
html[data-ios] .highlight .nc {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .nc {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
html[data-theme="dark"] .highlight .nc {
    color: #175199;
}
/* Name.Constant */
.highlight .no {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .no {
    color: #3A76D0;
}
/* Name.Entity */
.highlight .ni {
    color: #5868D1;
  }
html[data-theme="dark"] .highlight .ni {
    color: #5868D1;
}
/* Name.Exception */
.highlight .ne {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    color: #F1403C;
  }
html[data-ios] .highlight .ne {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .ne {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
html[data-theme="dark"] .highlight .ne {
    color: #B7302D;
}
/* Name.Function */
.highlight .nf {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    color: #F1403C;
  }
html[data-ios] .highlight .nf {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .nf {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
html[data-theme="dark"] .highlight .nf {
    color: #B7302D;
}
/* Name.Namespace */
.highlight .nn {
    color: #646464;
  }
html[data-theme="dark"] .highlight .nn {
    color: #999999;
}
/* Name.Tag */
.highlight .nt {
    color: #175199;
  }
html[data-theme="dark"] .highlight .nt {
    color: #175199;
}
/* Name.Variable */
.highlight .nv {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .nv {
    color: #3A76D0;
}
/* Operator.Word */
.highlight .ow {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }
html[data-ios] .highlight .ow {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
html[data-android] .highlight .ow {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
/* Text.Whitespace */
.highlight .w {
    color: #BFBFBF;
  }
html[data-theme="dark"] .highlight .w {
    color: #444444;
}
/* Literal.Number.Float */
.highlight .mf {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .mf {
    color: #3A76D0;
}
/* Literal.Number.Hex */
.highlight .mh {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .mh {
    color: #3A76D0;
}
/* Literal.Number.Integer */
.highlight .mi {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .mi {
    color: #3A76D0;
}
/* Literal.Number.Oct */
.highlight .mo {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .mo {
    color: #3A76D0;
}
/* Literal.String.Backtick */
.highlight .sb {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .sb {
    color: #B7302D;
}
/* Literal.String.Char */
.highlight .sc {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .sc {
    color: #B7302D;
}
/* Literal.String.Doc */
.highlight .sd {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .sd {
    color: #B7302D;
}
/* Literal.String.Double */
.highlight .s2 {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .s2 {
    color: #B7302D;
}
/* Literal.String.Escape */
.highlight .se {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .se {
    color: #B7302D;
}
/* Literal.String.Heredoc */
.highlight .sh {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .sh {
    color: #B7302D;
}
/* Literal.String.Interpol */
.highlight .si {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .si {
    color: #B7302D;
}
/* Literal.String.Other */
.highlight .sx {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .sx {
    color: #B7302D;
}
/* Literal.String.Regex */
.highlight .sr {
    color: #C2A469;
  }
html[data-theme="dark"] .highlight .sr {
    color: #806E46;
}
/* Literal.String.Single */
.highlight .s1 {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .s1 {
    color: #B7302D;
}
/* Literal.String.Symbol */
.highlight .ss {
    color: #F1403C;
  }
html[data-theme="dark"] .highlight .ss {
    color: #B7302D;
}
/* Name.Builtin.Pseudo */
.highlight .bp {
    color: #999999;
  }
html[data-theme="dark"] .highlight .bp {
    color: #646464;
}
/* Name.Variable.Class */
.highlight .vc {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .vc {
    color: #3A76D0;
}
/* Name.Variable.Global */
.highlight .vg {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .vg {
    color: #3A76D0;
}
/* Name.Variable.Instance */
.highlight .vi {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .vi {
    color: #3A76D0;
}
/* Literal.Number.Integer.Long */
.highlight .il {
    color: #0084FF;
  }
html[data-theme="dark"] .highlight .il {
    color: #3A76D0;
}
.highlight::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
.highlight::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(26, 26, 26, 0.5);
    border-radius: 6px;
  }
.highlight::-webkit-scrollbar-thumb:horizontal:hover {
      background-color: rgba(26, 26, 26, 0.6);
    }
html[data-theme="dark"] .highlight::-webkit-scrollbar-thumb:horizontal:hover {
      background-color: rgba(153, 153, 153, 0.6);
}
html[data-theme="dark"] .highlight::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(153, 153, 153, 0.5);
}
.Avatar {
  background: #FFFFFF;
  border-radius: 2px;
}
  html[data-theme="dark"] .Avatar {
  background: #1A1A1A;
}

.Avatar--medium {
  border-radius: 3px;
}

.Avatar--large {
  border-radius: 4px;
}

.Avatar--round {
  border-radius: 50%;
}
.AutoComplete-UserItem {
  width: 188px;
  height: 50px;
  padding: 9px 0;
  line-height: normal;
  box-sizing: border-box;
}

.AutoComplete-UserDetail {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

.AutoComplete-UserName,
.AutoComplete-UserHeadline {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AutoComplete-UserName {
  font-size: 14px;
  color: #1A1A1A;
}

html[data-theme="dark"] .AutoComplete-UserName {
  color: #999999;
}

.AutoComplete-UserHeadline {
  font-size: 12px;
  color: #8590A6;
}

html[data-theme="dark"] .AutoComplete-UserHeadline {
  color: #606A80;
}

.AutoComplete-UserAvatar {
  vertical-align: middle;
}
.Input-wrapper {
  position: relative;
  display: flex;
  width: 180px;
  height: 34px;
  padding: 4px 10px;
  font-size: 14px;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  border-radius: 3px;
  box-sizing: border-box;
  transition: background 200ms, border 200ms;
}

  .Input-wrapper.Input-wrapper--grey {
    background: #F6F6F6;
  }

  html[data-theme="dark"] .Input-wrapper.Input-wrapper--grey {
    background: #2E2E2E;
}

  .Input-wrapper.Input-wrapper--spread {
    width: 100%;
  }

  .Input-wrapper.Input-wrapper--multiline {
    height: inherit;
  }

  .Input-wrapper.Input-wrapper--large {
    height: auto;
    padding: 6px 12px;
  }

  .Input-wrapper .RichText--editable {
    padding: 6px 12px;
  }

  .Input-wrapper .DraftEditor-root {
    height: auto;
  }

  .Input-wrapper .Editable-toolbar {
    /* 工具栏的按钮有 所以上下 padding 少 1 */
    /* 左右 13 是 16 - 1 按钮 border - 2 按钮 margin */
    height: auto;
    padding: 5px 13px;
  }

  .Input-wrapper .Dropzone-overlay {
    margin: 6px 12px;
  }

  .Input-wrapper.Input-wrapper--noPadding {
    padding: 0;
  }

  .Input-wrapper.is-focus {
    background: #FFFFFF;
    border: 1px solid #8590A6;
  }

  html[data-theme="dark"] .Input-wrapper.is-focus {
    background: #1A1A1A;
}

  html[data-theme="dark"] .Input-wrapper.is-focus {
    border: 1px solid #606A80;
}

  html[data-theme="dark"] .Input-wrapper {
  background: #1A1A1A;
}

  html[data-theme="dark"] .Input-wrapper {
  border: 1px solid #444444;
}

.Input {
  flex: 1 1;
  padding: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
  border: none;
  resize: none;
}

.Input:focus {
    outline: none;
  }

input.Input {
    color: #1A1A1A;
    height: 24px;
    line-height: 24px;
  }

html[data-theme="dark"] input.Input {
    color: #999999;
}

textarea.Input {
    color: #1A1A1A;
  }

html[data-theme="dark"] textarea.Input {
    color: #999999;
}

.Input:not(input) {
    line-height: 24px;
  }

.Input:-ms-input-placeholder {
    line-height: normal;
  }

.Input::-webkit-input-placeholder,
  .Input .public-DraftEditorPlaceholder-root {
    color: #8590A6;
  }

.Input:-ms-input-placeholder,
  .Input .public-DraftEditorPlaceholder-root {
    color: #8590A6;
  }

.Input::-ms-input-placeholder,
  .Input .public-DraftEditorPlaceholder-root {
    color: #8590A6;
  }

.Input::placeholder,
  .Input .public-DraftEditorPlaceholder-root {
    color: #8590A6;
  }

html[data-theme="dark"] .Input::-webkit-input-placeholder, html[data-theme="dark"] .Input .public-DraftEditorPlaceholder-root {
    color: #606A80;
}

html[data-theme="dark"] .Input:-ms-input-placeholder, html[data-theme="dark"] .Input .public-DraftEditorPlaceholder-root {
    color: #606A80;
}

html[data-theme="dark"] .Input::-ms-input-placeholder, html[data-theme="dark"] .Input .public-DraftEditorPlaceholder-root {
    color: #606A80;
}

html[data-theme="dark"] .Input::placeholder, html[data-theme="dark"] .Input .public-DraftEditorPlaceholder-root {
    color: #606A80;
}

.Input--validationError::-webkit-input-placeholder {
    color: #F1403C;
  }

.Input--validationError:-ms-input-placeholder {
    color: #F1403C;
  }

.Input--validationError::-ms-input-placeholder {
    color: #F1403C;
  }

.Input--validationError::placeholder {
    color: #F1403C;
  }

html[data-theme="dark"] .Input--validationError::-webkit-input-placeholder {
    color: #B7302D;
}

html[data-theme="dark"] .Input--validationError:-ms-input-placeholder {
    color: #B7302D;
}

html[data-theme="dark"] .Input--validationError::-ms-input-placeholder {
    color: #B7302D;
}

html[data-theme="dark"] .Input--validationError::placeholder {
    color: #B7302D;
}

.Input-wrapper--multiline .Input {
    /* textarea 不能应用 overflow: hidden，会导致多行文本内容超过时失去任何提示 */
    overflow: auto;
  }

.Input-after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}
.Popover {
  position: relative;
  display: inline-block;
}

.Popover-arrow {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.Popover-arrow::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: -12px;
    border: 1px solid #EBEBEB;
    background: #FFFFFF;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    pointer-events: auto;
  }

html[data-theme="dark"] .Popover-arrow::after {
    border: 1px solid #2E2E2E;
}

html[data-theme="dark"] .Popover-arrow::after {
    background: #1A1A1A;
}

.Popover-arrow--top {
  width: 32px;
  height: 16px;
  margin-top: -2px;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

.Popover-arrow--top::after {
    left: 50%;
    top: -8px;
  }

.Popover-arrow--bottom {
  width: 32px;
  height: 16px;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
}

.Popover-arrow--bottom::after {
    left: 50%;
    bottom: -8px;
  }

.Popover-arrow--left {
  width: 16px;
  height: 32px;
  margin-left: -2px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.Popover-arrow--left::after {
    left: -8px;
    top: 50%;
  }

.Popover-arrow--right {
  width: 16px;
  height: 32px;
  -webkit-transform: translate(-100%, -50%);
          transform: translate(-100%, -50%);
}

.Popover-arrow--right::after {
    right: -8px;
    top: 50%;
  }

.Popover-content {
  position: absolute;
  background: #FFFFFF;
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1);
  z-index: 203;
}

html[data-theme='dark'] .Popover-content {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

.Popover-content-enter {
    opacity: 0.01;
  }

.Popover-content-enter-active {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out, opacity 200ms ease-out;
    transition: transform 200ms ease-out, opacity 200ms ease-out, -webkit-transform 200ms ease-out;
  }

.Popover-content-leave {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

.Popover-content-leave-active {
    opacity: 0.01;
    transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out, opacity 200ms ease-out;
    transition: transform 200ms ease-out, opacity 200ms ease-out, -webkit-transform 200ms ease-out;
  }

.Popover-content--fixed {
    position: fixed;
  }

html[data-theme="dark"] .Popover-content {
  background: #1A1A1A;
}

html[data-theme="dark"] .Popover-content {
  border: 1px solid #2E2E2E;
}

.Popover-content--top {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  margin-top: -8px;
}

.Popover-content--top.Popover-content--arrowed {
    margin-top: calc(-8px - 8px);
  }

.Popover-content--top.Popover-content--enter,
  .Popover-content--top.Popover-content-leave-active {
    -webkit-transform: translateY(8px);
            transform: translateY(8px);
  }

.Popover-content--bottom {
  margin-top: 8px;
}

.Popover-content--bottom.Popover-content--arrowed {
    margin-top: calc(8px + 8px);
  }

.Popover-content--bottom.Popover-content--enter,
  .Popover-content--bottom.Popover-content-leave-active {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }

.Popover-content--left {
  -webkit-transform-origin: right center;
          transform-origin: right center;
  margin-left: -8px;
}

.Popover-content--left.Popover-content--arrowed {
    margin-left: calc((8px + 8px) / -1);
  }

.Popover-content--left.Popover-content--enter,
  .Popover-content--left.Popover-content-leave-active {
    -webkit-transform: translateX(8px);
            transform: translateX(8px);
  }

.Popover-content--right {
  margin-left: 8px;
}

.Popover-content--right.Popover-content--arrowed {
    margin-left: calc(8px + 8px);
  }

.Popover-content--right.Popover-content--enter,
  .Popover-content--right.Popover-content-leave-active {
    -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
  }

.AttentionPopover {
  font-size: 15px;
  background-color: #0084FF;
  color: white;
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
}

.AttentionPopover .Popover-arrow {
    border: none;
  }

.AttentionPopover .Popover-arrow::after {
      border-color: #0084FF;
      background: #0084FF;
    }

.AttentionPopover .Popover-arrow--top::after {
    border-top-color: #0084FF;
  }

.AttentionPopover .Popover-arrow--bottom::after {
    border-bottom-color: #0084FF;
  }

.AttentionPopover .Popover-arrow--left::after {
    border-left-color: #0084FF;
  }

.AttentionPopover .Popover-arrow--right::after {
    border-right-color: #0084FF;
  }

html[data-theme="dark"] & {
}
.Menu {
  padding: 6px 0;
}

.Menu-item {
  display: block;
  width: 100%;
  padding: 0 20px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.Menu-item.is-active {
    background: #F6F6F6;
  }

html[data-theme="dark"] .Menu-item.is-active {
    background: #2E2E2E;
}

.Menu-item--noActive {
  cursor: default;
}

.Menu-divider {
  margin: 8px 0;
  border-bottom: 1px solid #EBEBEB;
}

html[data-theme="dark"] .Menu-divider {
  border-bottom: 1px solid #444444;
}
.AutoComplete-DefaultItem {
  line-height: 40px;
}
.AutoComplete-menu--hidden {
  visibility: hidden;
}
.Pagination {
  padding: 16px 20px;
  text-align: center;
  margin: 0 auto;
}

.PaginationButton {
  color: #1A1A1A;
  transition: color 200ms;
  padding: 0 15px;
}

.PaginationButton:not(:disabled):hover {
    color: #175199;
  }

html[data-theme="dark"] .PaginationButton:not(:disabled):hover {
    color: #175199;
}

html[data-theme="dark"] .PaginationButton {
  color: #999999;
}

.PaginationButton--current {
  color: #8590A6;
}

html[data-theme="dark"] .PaginationButton--current {
  color: #606A80;
}

.PaginationButton--ellipsis {
  border: none;
  background: none;
}
.Button {
  border-radius: 4px;
  border-color: #b3b3b3;
  color: #808080;
}

  .Button:active {
    background-color: #b3b3b3;
    color: #fff;
  }

  .Button:focus {
    outline: #f1f2f3 auto 5px;
  }

  /* for legacy iconfont */

  .Button.icon {
    font-size: 24px;
    line-height: 1;
  }

  .Button .icon {
    vertical-align: -4px;
  }

.Button[disabled] {
  border-color: #b3b3b3;
  color: #808080;
}

.Button[disabled].Button--blue {
    background-color: transparent;
  }

.Button[disabled]:hover {
    background-color: transparent;
  }

.Button--plain {
  color: #808080;
}

.Button--plain:active {
    color: #808080;
    background: transparent;
  }

.Button--primary.Button--green {
    background-color: #50c87e;
    border-color: #50c87e;
  }

.Button--primary.Button--green:hover {
      background-color: rgba(77, 190, 46, 0.06);
      color: #50c87e;
    }

.Button--green {
  color: #50c87e;
  border-color: #50c87e;
}

.Button--green:active {
    background: #50c87e;
    color: #fff;
  }

.Button--blue {
  border-color: #0080ff;
  color: #0080ff;
}

.Button--blue:active {
    background: #0080ff;
    color: #fff;
  }

.Button--black {
  color: #333;
  border-color: #333;
}

.Button--black:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }

.Button--black:active {
    background-color: #333;
    color: #fff;
  }

.Button--red {
  border-color: #f75659;
  color: #f75659;
}

.Button--red:hover {
    background-color: rgba(226, 109, 109, 0.06);
  }

.Button--red:active {
    background: #f75659;
    color: #fff;
  }

html:not([data-focus-method='pointer']) .Button:focus {
  box-shadow: none;
}

.AutoComplete-UserHeadline {
  white-space: nowrap !important;
}

.RichText {
  white-space: normal;
}

.RichText ul + br,
  .RichText ol + br,
  .RichText p + br {
    display: none;
  }

.RichText img,
  .RichText .VagueImage {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

.RichText embed {
    width: 100%;
    /* height: $break / (16/9) + 40; */
  }

.Menu-item .Button {
    padding: 0;
    margin: 0;
  }

.Menu-item.is-active {
    background: #f7f8f9;
  }

.Pagination {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.PaginationButton {
  height: 34px;
  line-height: 32px;
  width: 34px;
  margin: 0 8px;
  text-align: center;
  font-size: 15px;
  color: #808080;
  padding: 0;
  border-radius: 50%;
}

.PaginationButton + .PaginationButton {
    margin: 0 8px;
  }

.PaginationButton:not(:disabled):hover {
    background: transparent;
    border: 1px solid #808080;
    color: #333;
  }

.PaginationButton--current {
  border: 1px solid #b3b3b3;
}

.PaginationButton-prev,
.PaginationButton-next {
  width: auto;
  padding: 0 10px;
}

.PaginationButton-prev:hover, .PaginationButton-next:hover {
    border: 0 !important;
  }

@media (max-width: 660px) {
  .PaginationButton {
    display: none;
  }

  .PaginationButton-prev,
  .PaginationButton-next {
    display: block;
  }
}

.SimpleInput-wrapper {
  width: auto;
  height: auto;
  padding: 0;
  overflow: visible;
  font-size: 16px;
  border: 0;
}

.SimpleInput-wrapper.is-focus {
    border: 0;
  }

.SimpleInput,
.SimpleInput-wrapper .Input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  outline: none;
  min-height: 40px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
  font-size: 14px;
  line-height: 20px;
  padding: 10px 4px 11px;
  margin-bottom: 2px;
  transition: box-shadow ease-in-out 0.15s;
}

.SimpleInput:focus,
  .SimpleInput.Editable--focus,
  .SimpleInput-wrapper .Input:focus,
  .SimpleInput-wrapper .Input.Editable--focus {
    box-shadow: 0 2px 0 #0080ff;
  }

.SimpleInput[disabled], .SimpleInput-wrapper .Input[disabled] {
    background: transparent;
  }

.SimpleInput[disabled]:focus,
  .SimpleInput[disabled].Editable--focus,
  .SimpleInput-wrapper .Input[disabled]:focus,
  .SimpleInput-wrapper .Input[disabled].Editable--focus {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
  }

.SimpleInput::-webkit-input-placeholder, .SimpleInput-wrapper .Input::-webkit-input-placeholder {
    color: #b3b3b3;
  }

.SimpleInput:-ms-input-placeholder, .SimpleInput-wrapper .Input:-ms-input-placeholder {
    color: #b3b3b3;
  }

.SimpleInput::-ms-input-placeholder, .SimpleInput-wrapper .Input::-ms-input-placeholder {
    color: #b3b3b3;
  }

.SimpleInput::placeholder, .SimpleInput-wrapper .Input::placeholder {
    color: #b3b3b3;
  }

.Input .public-DraftEditorPlaceholder-root {
  color: #b3b3b3;
}

.SimpleInput-wrapper--search {
  position: relative;
}

.SimpleInput-wrapper--search .SimpleInput,
  .SimpleInput-wrapper--search .Input {
    padding-left: 30px;
  }

.SimpleInput-wrapper--search:before {
    content: '\e912';
    font-size: 24px;
    color: #808080;
    position: absolute;
    width: 24px;
    height: 24px;
    left: 4px;
    font-family: icomoon;
  }

.Checkbox {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  outline: none;
}

.Checkbox:before {
    content: '\e92b';
    font-family: 'icomoon';
    color: #666768;
    font-size: 24px;
    vertical-align: -4px;
  }

.Checkbox:checked:before {
    content: '\e92c';
    color: #0080ff;
  }

.Checkbox:hover:before {
    color: #0080ff;
  }

.Radio {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  outline: none;
}

.Radio:before {
    content: '\e90f';
    font-family: 'icomoon';
    color: #666768;
    font-size: 24px;
    vertical-align: -4px;
  }

.Radio:checked:before {
    content: '\e910';
    color: #0080ff;
  }

.Radio:hover:before {
    color: #0080ff;
  }

.DraftEditor-editorContainer div {
    display: block;
  }

.Editable-imageUploader-status {
  display: flex !important;
}

.Editable-videoUploader-thumbnail {
  display: flex !important;
}

.Editable-embeddedVideoUploader-status {
  display: flex !important;
}

.VideoErrorCard-thumbnail {
  display: flex !important;
}

.AutoComplete-UserItem {
  width: 100%;
}

.AutoComplete-UserDetail {
  display: block;
}

.AutoComplete-UserHeadline {
  display: none;
}

.ImageView-inner {
  display: block;
}

.AutoComplete-UserItem {
  flex-direction: row;
  align-items: center;
}

.FavlistsModal {
  width: 400px;
}

@media (max-width: 660px) {

.FavlistsModal {
    width: 100%
}
  }

.Favlists-content .CheckItem-input {
    visibility: hidden;
  }

.Favlists-actions {
  flex-direction: row;
}

.Favlists-addIcon {
  box-sizing: content-box;
}

.RichText-gifPlaceholder {
  text-align: center;
}

.Modal-inner {
  min-height: 300px;
}

/* LinkCard */
#react-root .LinkCard-content {
    display: flex;
    flex-direction: row;
  }
#react-root .LinkCard-content div:first-child {
      flex-shrink: initial;
    }
#react-root .LinkCard-title {
    display: -webkit-box;
  }
#react-root .LinkCard-image--default {
    display: flex;
  }
#react-root .LinkCard-image {
    max-width: none;
    max-width: initial; /* 不应该被上面重置 */
  }
.MobileModal-wrapper {
  position: relative;
}

.MobileModal-wrapper--absoluted {
  position: absolute;
  top: 0;
  max-height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.MobileModal {
  background: #FFFFFF;
}

html[data-theme="dark"] .MobileModal {
  background: #1A1A1A;
}

.MobileModal-content--default {
  padding-top: 50px;
  padding-bottom: 60px;
  min-height: 100vh;
  box-sizing: border-box;
}

.MobileModal-closeButton {
  position: fixed;
  top: 0;
  right: 0;
  padding: 12px 12px;
  z-index: 100;
}

.MobileModal-closeIcon {
  fill: #1A1A1A;
  display: block;
}

html[data-theme="dark"] .MobileModal-closeIcon {
  fill: #999999;
}

.MobileModal-title {
  font-weight: 700;
}

.MobileModal-title--default {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0 16px;
  border-bottom: 1px solid #EBEBEB;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.05);
  margin: 0;
  font-size: 16px;
  line-height: 49px;
  background: #FFFFFF;
  z-index: 99;
}

html[data-theme="dark"] .MobileModal-title--default {
  border-bottom: 1px solid #444444;
}

html[data-theme="dark"] .MobileModal-title--default {
  box-shadow: 0 1px 3px rgba(153, 153, 153, 0.05);
}

html[data-theme="dark"] .MobileModal-title--default {
  background: #1A1A1A;
}

.MobileModal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(26, 26, 26, 0.65);
}

html[data-theme="dark"] .MobileModal-backdrop {
  background: rgba(153, 153, 153, 0.65);
}

.MobileModal--plain {
  position: fixed;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 100;
  margin: auto;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 87.2%;
  box-shadow: 0 5px 20px 0 rgba(23, 81, 153, 0.5);
  border-radius: 2px;
  overflow: hidden;
}

.MobileModal--plain .MobileModal-closeIcon {
    fill: #8590A6;
  }

html[data-theme="dark"] .MobileModal--plain .MobileModal-closeIcon {
    fill: #606A80;
}

html[data-theme="dark"] .MobileModal--plain {
  box-shadow: 0 5px 20px 0 rgba(23, 81, 153, 0.5);
}

.MobileModal-content--plain {
  padding: 16px 20px;
}

.MobileModal-title--plain {
  text-align: center;
  padding: 24px 20px 8px;
  font-size: 18px;
}

.MobileModal-subtitle {
  font-size: 14px;
  padding: 0 20px;
  color: #8590A6;
}

html[data-theme="dark"] .MobileModal-subtitle {
  color: #606A80;
}
.ColumnFollowButton {
  width: 92px;
}
.Icon {
  vertical-align: text-bottom;
  fill: currentColor;
}

.Icon--grey {
  color: #8590A6;
}

html[data-theme="dark"] .Icon--grey {
  color: #606A80;
}

.Icon--left {
  margin-right: 6px;
}
.Sticky.is-fixed {
    position: fixed;
    z-index: 2;
    box-sizing: border-box;

    /* https://stackoverflow.com/questions/21278020/font-weight-turns-lighter-on-mac-safari */
    -webkit-font-smoothing: subpixel-antialiased;
  }
  .Sticky.is-absolute {
    position: absolute;
    top: auto;
    bottom: 0;
    z-index: 1;
    margin-bottom: 0;
    box-sizing: border-box;
  }
  .Sticky.is-absolute.is-bottom {
      top: 0;
      bottom: auto;
      margin-top: 0;
    }
  .Sticky.Sticky--CSSSticky {
    position: -webkit-sticky;
    position: sticky;
  }

.Sticky--holder {
  visibility: hidden;
}
.AppHeader {
  border-bottom: 1px solid rgba(30, 35, 42, 0.06);
  box-shadow: 0 1px 3px 0 rgba(0, 34, 77, 0.05);
  background-color: #fff;
  background-clip: content-box;
  min-width: 100%;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
}

  .AppHeader + .Sticky--holder {
    background-color: #fff;
    visibility: visible;
    visibility: initial;
  }

  .AppHeader.is-hide {
    min-width: 100%;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }

  .AppHeader,
  .AppHeader.is-fixed {
    z-index: 100;
  }

  .AppHeader .Icon {
    vertical-align: middle;
  }

  .AppHeader #react-root,
  .AppHeader div,
  .AppHeader article,
  .AppHeader footer,
  .AppHeader header,
  .AppHeader main,
  .AppHeader nav,
  .AppHeader section {
    display: inherit;
    flex-direction: row;
    flex-shrink: 1;
  }

.AppHeader-inner {
  display: flex;
  justify-content: space-between;
}

.AppHeader-navItem {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 0 12px;
}

.AppHeader-link {
  display: flex;
  align-items: center;
}

.AppHeader-logo {
  padding: 0 20px;
  line-height: 52px;
}

.AppHeader-actions {
  display: flex;
  font-size: 16px;
  color: #0f88eb;
}

.AppHeader-authLink {
  padding: 0 20px;
  white-space: nowrap;
}

.AppHeader-downloadLink {
  position: relative;
  white-space: nowrap;
  padding: 0 20px;
}

.AppHeader-downloadLink::after {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    display: block;
    width: 0;
    height: 16px;
    border-left: 1px solid #e7eaf1;
    content: '';
  }

.AppHeader-profileEntry {
  vertical-align: middle;
  line-height: normal;
}

.AppHeader-moreIconWrapper {
  position: relative;
  margin-right: 24px;
}

.AppHeader-notiOrMsgIcon {
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 28px;
  left: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #f75659;
  box-sizing: content-box;
}
.Avatar-hemingway {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.Avatar--s {
  width: 26px;
  height: 26px;
}
.Navbar {
  contain: layout;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 59px;
  width: 100%;
  border-bottom: 1px solid transparent;
  color: #808080;
  background: rgba(255, 255, 255, 0.97);
  /* will-change: transform; iOS safari has a bug on this. @see T91765 */
  z-index: 2;
  position: relative;
}

  .Navbar a {
    transition: color 0.2s;
  }

  .Navbar a:hover {
    text-decoration: none;
    color: #333;
  }

.Navbar.ScrollBackFixed {
  position: fixed;
  border-color: rgba(0, 0, 0, 0.08);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  will-change: transform;
}

.Navbar.ScrollBackFixed-active {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.Navbar.ScrollBackFixed-animation {
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.Navbar-logo-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(59px - 1px);
  align-self: stretch;
  justify-content: center;
}

.Navbar-logo {
  flex-grow: 1;
  display: flex;
  width: 58px;
  align-items: center;
  justify-content: center;
  color: gray;
  transition: color 0.05s ease-in-out;
}

.Navbar-title {
  margin: 0 auto;
  width: 660px;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

.Navbar-columnIcon {
  flex: 0 0 38px;
  height: 38px;
  margin-right: 12px;
  border-radius: 50%;
}

.Navbar-postTitleName {
  line-height: 15px;
}

.Navbar-postTitleMeta {
  font-size: 13px;
  color: #808080;
  margin-bottom: 3px;
}

.Navbar-postTitleMain {
  font-size: 14px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  line-height: 16px;
  color: #333;
  max-width: 420px;
  text-overflow: ellipsis;
  overflow: hidden;
}

html[data-ios] .Navbar-postTitleMain {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .Navbar-postTitleMain {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.Navbar-columnTitle {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.Navbar.showColumnTitle .Navbar-columnTitle {
  opacity: 1;
  visibility: visible;
}

.Navbar-columnTitleMain {
  color: #333;
  justify-content: center;
}

.Navbar-followBtn {
  margin-left: 1em;
  height: 32px;
  line-height: 1;
}

.Navbar-functionality {
  position: absolute;
  right: 0;
  top: 0;
  flex-direction: row;
  height: calc(59px - 1px);
  align-items: center;
  align-self: stretch;
}

.Navbar-write {
  display: flex;
  cursor: pointer;
  align-items: center;
  padding: 0 10px;
  white-space: nowrap;
}

.Navbar-write .icon {
    margin-right: 3px;
  }

.Navbar-menuEntry {
  width: 66px;
  flex: 0 0 66px;
  text-align: center;
  transition: color 0.2s;
}

.Navbar-menuEntry:hover {
    color: #333;
  }

.Navbar-menu .Menu-item {
    outline: none;
    display: flex;
    align-items: center;
    padding-right: 16px;
    font-size: 14px;
    width: 200px;
    height: 54px;
    white-space: nowrap;
  }

.Navbar-columnList {
  width: 200px;
  max-height: 270px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.Navbar-columnList:hover {
    overflow-y: auto;
  }

.Navbar-columnItem {
  flex-shrink: 0;
}

.Navbar-columnItem > span {
    flex: 1 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.Navbar-columnItem .Avatar-hemingway {
    flex-shrink: 0;
    margin-right: 16px;
  }

.Navbar-menuToggler {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Navbar-menuToggler:hover {
    color: #333;
  }

@media (max-width: 760px) {
  .Navbar-logo-wrapper,
  .Navbar-functionality {
    flex: 0 0 auto;
    width: auto;
  }
  .Navbar-title {
    position: relative;
    flex: 1 0;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 24px;
    overflow: hidden;
    margin-left: 56px;
    margin-right: 80px;
  }

  .Navbar-titleMr60 {
    margin-right: 60px;
  }

  .Navbar-title::before {
    content: '';
    height: 24px;
    width: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    background: rgba(0, 0, 0, 0.16);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .Navbar-postTitleName {
    flex-shrink: 1;
    overflow: hidden;
  }
  .Navbar-columnIcon,
  .Navbar-followBtn {
    display: none;
  }
}

@media (max-width: 420px) {
  .Navbar-write {
    display: none;
  }
}

.Navbar-me {
  flex-direction: row;
  align-items: center;
  margin-right: 16px;
}

.Navbar-me img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }

.Navbar-loginButton {
  height: 32px;
  line-height: 30px;
  margin: 0 16px 0 6px;
  width: 72px;
}
.Bull {
  margin: 0 6px;
}

  .Bull::before {
    content: '·';
  }
.HomeTop {
  position: relative;
  height: 470px;
  text-align: center;
  z-index: 0;
  background: url(//static.zhihu.com/hemingway/patterns.c72a480c60ed2d53948b8e1c66713274.png) center no-repeat;
}

  .HomeTop:before {
    content: '';
    background: url(//static.zhihu.com/hemingway/bg@2x.033e5b2de89da3a0bb85022a2e6d47ce.png) repeat-x;
    background-size: 20px 450px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
  }

  .HomeTop h1 {
    width: 129px;
    height: 0;
    padding-top: 179px;
    overflow: hidden;
    margin: 0;
    background: url(//static.zhihu.com/hemingway/logo.84666bea29882d2dd3f4227d96484568.png) center no-repeat;
    background-size: 129px 179px;
    position: absolute;
    left: 50%;
    margin-left: -65px;
    top: 152px;
  }

  .HomeTop h2 {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    margin: 0;
    position: absolute;
    top: 350px;
    width: 100%;
    color: #2a2a2a;
    letter-spacing: 0.5em;
  }

  .HomeTop a {
    text-decoration: none;
  }

.HomeTop-btn {
  position: absolute;
  top: 413px;
  left: 50%;
  width: 120px;
  height: 38px;
  margin-left: -51px;
  line-height: 36px;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  border-color: #333;
  color: #333;
}

.HomeTop-requestBtn {
  position: absolute;
  top: 466px;
  left: 50%;
  margin-left: -39px;
  line-height: 12px;
  font-size: 14px;
  color: #50c87e;
}

.HomeTop-requestBtn .Icon {
    margin-left: 2px;
  }

@media (max-width: 420px) {
  .HomeTop-requestBtn {
    display: none;
  }

  .HomeTop-btn {
    display: none;
  }
}
.BlockTitle {
  position: relative;
  display: block;
  margin-bottom: 32px;
  line-height: 22px;
}

.BlockTitle-title {
  position: relative;
  display: inline;
  padding-right: 16px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  background: #fbfcfc;
  z-index: 1;
}

html[data-ios] .BlockTitle-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .BlockTitle-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.BlockTitle-line {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  color: #f0f0f0;
  background: currentColor;
}

@media (max-width: 660px) {
  .BlockTitle {
    margin-bottom: 16px;
  }
}

@media (max-width: 420px) {
  .BlockTitle {
    margin-left: 16px;
    margin-right: 16px;
  }
}

.appview .BlockTitle.BlockTitle {
    padding: 10px 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 0;
  }

.appview .BlockTitle-title {
    background: none;
  }

.appview .BlockTitle-line {
    display: none;
  }

.appview--unifiedStyle .BlockTitle-title {
    color: #1a1a1a;
  }

.appview--unifiedStyle.appview--dark .BlockTitle-title {
    color: #646464;
  }
.Refresh-button {
  position: relative;
  top: 5px;
  line-height: 0;
  display: inline-block;
}

.Refresh-Rotate {
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.Refresh-button-wrapper {
  font-size: 13px;
  padding: 0;
  min-height: 0;
  min-width: 0;
  vertical-align: middle;
  box-sizing: border-box;
  width: 90px;
  height: 32px;
  color: #333;
  border-color: #333;
}
.HomeColumn {
  margin-top: 48px;
  width: 1020px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

  @media screen and (max-width: 1020px) {.HomeColumn {
    width: 660px
}
  }

.HomeColumn-List {
  min-height: 546px;
}

.HomeColumn-List::before,
  .HomeColumn-List::after {
    display: table;
    content: '';
  }

.HomeColumn-List:after {
    clear: both;
  }

.HomeColumn-List li {
    float: left;
    list-style: none;
    margin: 20px 0 0 16px;
    width: 206px;
    height: 258px;
    text-align: center;
    color: #808080;
    box-sizing: border-box;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    position: relative;
  }

.HomeColumn-List li:nth-child(4n-3) {
      margin-left: 0;
    }

.HomeColumn-List li:nth-child(-n + 4) {
      margin-top: 0;
    }

@media screen and (min-width: 1020px) {
      .HomeColumn-List li:nth-child(4n-3) {
        margin-left: 74px;
      }
    }

@media screen and (max-width: 1020px) {
      .HomeColumn-List li:nth-child(4n-3) {
        margin-left: 16px;
      }
      .HomeColumn-List li:nth-child(3n-2) {
        margin-left: 5px;
      }
      .HomeColumn-List li:nth-child(-n + 4) {
        margin-top: 20px;
      }
      .HomeColumn-List li:nth-child(-n + 3) {
        margin-top: 0;
      }
    }

.Home-random {
  text-align: center;
  margin: 36px 0 0;
}

.HomeColumn-avatar {
  margin: 26px auto 8px;
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
}

.HomeColumn-avatar img {
    width: 48px;
    height: 48px;
  }

.HomeColumn-title {
  margin: 16px 16px 7px;
  color: #333;
  font-size: 16px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-ios] .HomeColumn-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .HomeColumn-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.HomeColumn-title a {
    color: #333;
  }

.HomeColumn-description {
  line-height: 21px;
  height: 42px;
  margin-bottom: 14px;
  word-break: break-all;
  padding-left: 16px;
  padding-right: 16px;
}

.HomeColumn-description a {
    color: gray;
  }

.HomeColumn-meta {
  margin-bottom: 15px;
}

.HomeColumn-btn {
  margin-bottom: 23px;
  padding: 0;
  min-height: 0;
  min-width: 0;
  line-height: 30px;
  box-sizing: border-box;
  width: 90px;
  height: 32px;
}

@media (max-width: 420px) {
  .HomeColumn {
    margin-top: 0;
    width: 100%;
  }

  .HomeColumn-meta {
    display: none;
  }
    .HomeColumn-List li {
      height: 88px;
      display: block;
      width: 100%;
      margin: 0 !important;
      background: #fbfcfc;
      box-shadow: none;
    }

  .HomeColumn-avatar {
    float: left;
    margin: 20px 12px 20px 16px;
  }

  .HomeColumn-title {
    margin: 20px 52px 2px 12px;
    text-align: left;
    width: 136px;
  }

  .HomeColumn-description {
    margin: 2px 2px 22px 12px;
    line-height: 20px;
    text-align: left;
    width: 144px;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
  }

  .HomeColumn-btn {
    position: absolute;
    top: 28px;
    right: 16px;
    border: none;
  }
}
.HomeBottom {
  margin-top: 48px;
  background: url(//static.zhihu.com/hemingway/bg@2x.033e5b2de89da3a0bb85022a2e6d47ce.png) repeat-x;
  background-size: 20px 450px;
  text-align: center;
  color: #2a2a2a;
  padding-top: 134px;
  display: block;
}

  .HomeBottom h3 {
    padding: 26px 0;
    font-size: 18px;
    font-weight: 300;
    margin: 0 auto 40px;
    border: solid #97ffd8;
    border-width: 1px 0;
    width: 345px;
    letter-spacing: 14px;
    white-space: nowrap;
  }

.HomeBottom-button {
  font-size: 14px;
  padding: 0;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  width: 120px;
  height: 38px;
  line-height: 36px;
  color: #333;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px solid #333;
}

.HomeBottom-button:hover {
    background-color: rgba(207, 216, 230, 0.1);
  }

.HomeBottom-footer {
  margin: 80px 0 60px 0;
  font-size: 12px;
  line-height: 22px;
  color: gray;
  display: block;
}

@media (max-width: 420px) {
  .HomeBottom {
    padding-top: 46px;
  }

  .HomeBottom-button {
    display: none;
  }

  .HomeBottom-footer {
    margin: 40px;
  }
}
.Home-body {
  background: #fbfcfc;
}

.Home-blockTitle .BlockTitle-title {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }

.Home-blockTitle .BlockTitle-line {
    color: #d9d9d9;
  }

.Home-layout {
  margin: 0 auto;
}

@media screen and (min-width: 1020px) {
  .Home-blockTitle {
    margin: 0 auto 30px;
    text-align: center;
  }

  .Home-layout {
    width: 1020px;
  }
}
.LoadingBar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 101;
  display: none;
  height: 2px;
  pointer-events: none;
  background: #0084FF;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

  .LoadingBar.is-active {
    display: block;
    -webkit-animation: LoadingBarForward 1s ease-in-out 0.8s infinite;
            animation: LoadingBarForward 1s ease-in-out 0.8s infinite;
  }

  html[data-theme="dark"] .LoadingBar {
  background: #3A76D0;
}

@-webkit-keyframes LoadingBarForward {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes LoadingBarForward {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }

  40% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  60% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.RNSModal-describe {
  color: #707070;
  margin-bottom: 24px;
}

  .RNSModal-describe a {
    color: #0080ff;
    cursor: pointer;
  }
.Editable-VideoTitleInput-container {
  align-self: stretch;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  width: 100%;
}
  html[data-theme="dark"] .Editable-VideoTitleInput-container {
  background: #1A1A1A;
}

.Editable-VideoTitleInput-innerContainer {
  cursor: text;
  display: flex;
  padding: 0 16px;
}

.Editable-VideoTitleInput-innerContainer--isBeforeIconShown {
    padding: 0 10px;
  }

.Editable-VideoTitleInput-beforeIcon {
  color: #808080;
}

html[data-theme="dark"] .Editable-VideoTitleInput-beforeIcon {
  color: #808080;
}

.Editable-VideoTitleInput-value {
  font-size: 15px;
  line-height: 48px;
}

.Editable-VideoTitleInput-value--noContent {
    color: #808080;
  }

html[data-theme="dark"] .Editable-VideoTitleInput-value--noContent {
    color: #808080;
}

.Editable-VideoTitleInput {
  border: none;
  box-sizing: border-box;
  font-size: 15px;
  height: 48px;
  padding: 0;
  width: 100%;
}

.Editable-VideoTitleInput:focus {
    outline: none;
  }

.Editable-VideoTitleInput::-webkit-input-placeholder {
    color: #808080;
  }

.Editable-VideoTitleInput:-ms-input-placeholder {
    color: #808080;
  }

.Editable-VideoTitleInput::-ms-input-placeholder {
    color: #808080;
  }

.Editable-VideoTitleInput::placeholder {
    color: #808080;
  }

html[data-theme="dark"] .Editable-VideoTitleInput::-webkit-input-placeholder {
    color: #808080;
}

html[data-theme="dark"] .Editable-VideoTitleInput:-ms-input-placeholder {
    color: #808080;
}

html[data-theme="dark"] .Editable-VideoTitleInput::-ms-input-placeholder {
    color: #808080;
}

html[data-theme="dark"] .Editable-VideoTitleInput::placeholder {
    color: #808080;
}
.VideoCardPlayButton {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin: auto;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.VideoCardPlayButton-icon {
  display: block;
  box-shadow: 0 0 4px 0 rgba(26, 26, 26, 0.16);
  border-radius: 50%;
}

html[data-theme='dark'] .VideoCardPlayButton-icon {
    -webkit-filter: brightness(0.7);
            filter: brightness(0.7);
  }

html[data-theme="dark"] .VideoCardPlayButton-icon {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
}

.VideoCardPlayButton-withFileSize {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 36px;
  margin: auto;
  text-align: center;
}

.VideoCardPlayButton-withFileSize .VideoCardPlayButton-withFileSize--inner {
    /* 这一部分不区分夜间模式，使用一套颜色 */
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    line-height: 35px;
    padding: 0 14px 0 11.5px;
    font-size: 13px;
    border-radius: 18px;
    display: inline-block;
    color: white;
    background-color: rgba(18, 18, 18, 0.6); /* BK11 */
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border: solid 0.5px rgba(255, 255, 255, 0.1);
  }

html[data-ios] .VideoCardPlayButton-withFileSize .VideoCardPlayButton-withFileSize--inner {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .VideoCardPlayButton-withFileSize .VideoCardPlayButton-withFileSize--inner {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

/* 不支持模糊的浏览器上使用更深一点的背景 */

@supports not ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {

.VideoCardPlayButton-withFileSize .VideoCardPlayButton-withFileSize--inner {
      background-color: rgba(18, 18, 18, 0.8);
  }
    }

.VideoCardPlayButton-withFileSize .Zi {
    margin-right: 7.5px;
  }
.VideoCard {
  position: relative;
  overflow: hidden;
  border: solid 1px #EBEBEB;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
}
  html[data-theme='dark'] .VideoCard {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  html[data-theme="dark"] .VideoCard {
  border: solid 1px #444444;
}

.VideoCard--converting .VideoCard-thumbnail {
    -webkit-filter: blur(8px);
            filter: blur(8px);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }

.VideoCard--converting::after {
    content: '视频正在转码中';
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }

html[data-theme="dark"] .VideoCard--converting::after {
    color: #1A1A1A;
}

.VideoCard-link {
  display: block;
}

.VideoCard-layout {
  display: flex;
  flex-wrap: wrap;
}

.VideoCard-poster {
  width: 120px;
  height: 90px;
  background-color: #EBEBEB;
  position: relative;
}

.VideoCard-poster img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.VideoCard-poster .VideoCard-playIcon--nonLens {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 36px;
    margin: auto;
  }

html[data-theme="dark"] .VideoCard-poster {
  background-color: #444444;
}

.VideoCard-video {
  position: relative;
  width: 100%;
}

.VideoCard-video::before {
    display: block;
    padding-top: calc(100% * 9 / 16);
    content: '';
  }

.VideoCard-video-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.VideoCard-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #EBEBEB;
}

.VideoCard-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

html[data-theme="dark"] .VideoCard-thumbnail {
  background-color: #444444;
}

.VideoCard-thumbnail--placeholder {
  background-image: url('https://zhstatic.zhihu.com/zhihu-components/video-card/video_placeholder.jpg');
  background-size: cover;
}

.VideoCard--interactive .VideoCard-video:hover .VideoCard-play-button {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.VideoCard-content {
  flex: 1 1;
  padding: 10px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.VideoCard-VideoTitleInputHolder {
  height: 48px;
  width: 100%;
}

.VideoCard-title {
  overflow: hidden;
  height: 28px;
  font-size: 16px;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.VideoCard--interactive
  .VideoCard-link
  .VideoCard-content:hover
  .VideoCard-title {
  color: #175199;
}

html[data-theme="dark"] .VideoCard--interactive
  .VideoCard-link
  .VideoCard-content:hover
  .VideoCard-title {
  color: #175199;
}

.VideoCard-description {
  height: 25px;
  margin-top: 5px;
  line-height: 25px;
}

.VideoCard-source {
  display: inline-block;
  margin-right: 10px;
  color: #8590A6;
}

html[data-theme="dark"] .VideoCard-source {
  color: #606A80;
}

.VideoCard-badge {
  display: inline-block;
  padding: 0 8px;
  color: #8590A6;
  background-color: #F6F6F6;
  border-radius: 3px;
}

html[data-theme="dark"] .VideoCard-badge {
  color: #606A80;
}

html[data-theme="dark"] .VideoCard-badge {
  background-color: #2E2E2E;
}

.VideoCard-player {
  width: 100%;
  height: 100%;
  background-color: #1A1A1A;
}

.VideoCard-player iframe,
  .VideoCard-player .Embed {
    display: block;
    width: 100%;
    height: 100%;
  }

html[data-theme="dark"] .VideoCard-player {
  background-color: #999999;
}

.VideoCard-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}

.VideoCard-overlay.is-loading {
    opacity: 0;
  }

html[data-theme="dark"] .VideoCard-overlay {
  background-color: #1A1A1A;
}

.VideoCard-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #1A1A1A;
  transition: opacity 0.3s, visibility 0.3s;
}

.VideoCard-mask:not(.is-shown) {
    opacity: 0;
    visibility: hidden;
  }

html[data-theme="dark"] .VideoCard-mask {
  background-color: #999999;
}

.VideoCard--mobile .VideoCard-poster {
    width: 100px;
    height: 75px;
  }

.VideoCard--mobile .VideoCard-video:hover .VideoCard-play-button {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

.VideoCard--mobile .VideoCard-content {
    padding: 10px 12px;
  }

.VideoCard--mobile .VideoCard-title {
    font-size: 16px;
  }

.VideoCard--mobile .VideoCard-description {
    margin-top: 0;
    font-size: 12px;
  }
input[type='range'].RangeInput {
  width: 220px;
  height: 12px;
  padding: 0;
  margin: 0 10px;
  vertical-align: middle;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

  input[type='range'].RangeInput:focus {
    outline: none;
    transition: box-shadow 0.3s;
  }

  html[data-focus-visible] input[type='range'].RangeInput:focus {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(0, 132, 255, 0.3);
  }

  html[data-theme='dark'][data-focus-visible] input[type='range'].RangeInput:focus {
    box-shadow: 0 0 0 2px #1A1A1A, 0 0 0 4px rgba(58, 118, 208, 0.6);
  }

  input[type='range'].RangeInput::-webkit-slider-runnable-track {
    height: 5px;
    cursor: pointer;
    background: #F6F6F6;
    border-radius: 2px;
  }

  html[data-theme="dark"] input[type='range'].RangeInput::-webkit-slider-runnable-track {
    background: #2E2E2E;
}

  input[type='range'].RangeInput::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    cursor: pointer;
    background: #D3D3D3;
    border-radius: 50%;
    -webkit-appearance: none;
            appearance: none;
  }

  html[data-theme="dark"] input[type='range'].RangeInput::-webkit-slider-thumb {
    background: #2E2E2E;
}

  input[type='range'].RangeInput::-moz-range-track {
    height: 5px;
    cursor: pointer;
    background: #F6F6F6;
    border-radius: 2px;
  }

  html[data-theme="dark"] input[type='range'].RangeInput::-moz-range-track {
    background: #2E2E2E;
}

  input[type='range'].RangeInput::-moz-range-thumb {
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: #D3D3D3;
    border: none;
    border-radius: 50%;
  }

  html[data-theme="dark"] input[type='range'].RangeInput::-moz-range-thumb {
    background: #2E2E2E;
}

  input[type='range'].RangeInput::-ms-track {
    width: 100%;
    height: 5px;
    color: transparent;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
  }

  input[type='range'].RangeInput::-ms-fill-lower,
  input[type='range'].RangeInput::-ms-fill-upper {
    background: #F6F6F6;
    border-radius: 2px;
  }

  html[data-theme="dark"] input[type='range'].RangeInput::-ms-fill-lower, html[data-theme="dark"] input[type='range'].RangeInput::-ms-fill-upper {
    background: #2E2E2E;
}

  input[type='range'].RangeInput::-ms-thumb {
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: #D3D3D3;
    border: none;
    border-radius: 50%;
  }

  html[data-theme="dark"] input[type='range'].RangeInput::-ms-thumb {
    background: #2E2E2E;
}

  input[type='range'].RangeInput::-ms-tooltip {
    display: none;
  }

  input[type='range'].RangeInput .Zi {
    vertical-align: middle;
    display: inline-block;
    fill: #8590A6;
  }

  html[data-theme="dark"] input[type='range'].RangeInput .Zi {
    fill: #606A80;
}
.Mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  transition: opacity 200ms ease-in;
}

.Mask-hidden {
  pointer-events: none;
  opacity: 0;
}

.Mask-mask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  box-sizing: border-box;
}

.Mask-mask--black {
  background: #1A1A1A;
}

html[data-theme="dark"] .Mask-mask--black {
  background: #999999;
}

.Mask-mask--white {
  background: rgba(255, 255, 255, 0.95);
}

html[data-theme="dark"] .Mask-mask--white {
  background: rgba(26, 26, 26, 0.95);
}

.Mask-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  color: #FFFFFF;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

html[data-theme="dark"] .Mask-content {
  color: #1A1A1A;
}

.Mask-content--full {
  width: 100%;
  height: 100%;
}
.VideoErrorCard-thumbnail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.VideoErrorCard-error {
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  color: #8590A6;
}

html[data-theme="dark"] .VideoErrorCard-error {
  color: #606A80;
}
.CommentEditor {
  flex-direction: row;
}

.CommentEditor-avatar {
  margin-right: 16px;
}

.CommentEditor-input {
  flex: 1 1;
}

.CommentEditor-input .Input {
    min-height: 46px;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 0;
  }

.CommentEditor-input--focus .Input-wrapper {
    border-color: rgba(0, 128, 255, 0.5);
  }

.CommentEditor-actions {
  flex-direction: row;
  margin-top: 20px;
  justify-content: flex-end;
}

.CommentEditor-actions .Button {
    width: 80px;
    height: 34px;
    margin-left: 16px;
  }
.ConfirmModal-body {
  color: #8590a6;
  text-align: center;
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
}

.ConfirmModal-mobile {
  margin-top: 50px;
}

.ConfirmModal-buttons {
  margin-top: 40px;
  margin-bottom: 16px;
}

.ConfirmModal-buttons .Button {
    display: block;
    width: 220px;
    margin-right: auto;
    margin-left: auto;
  }

.ConfirmModal-buttons .Button--blue {
    background: #0f88eb;
    color: #fff;
  }

.ConfirmModal-buttons .Button--blue:hover {
      background-color: #0d79d1;
    }

.ConfirmModal-cancelButton {
  margin-top: 28px;
  padding: 0 16px;
  line-height: 32px;
  color: #8590a6;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 1px solid #ccd8e1;
  border-radius: 3px;
}
/* FIXME name conflict with zhihu-components */
.Menu {
  position: relative;
  border: 0;
  box-shadow: none;
}

.Menu-dropdown {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  line-height: 54px;
  font-size: 14px;
  text-align: left;
  color: #333;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  -webkit-transform: translateY(-10%);
          transform: translateY(-10%);
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: all 0.1s;
}

.Menu-dropdown li {
    padding: 0;
  }

.Menu-dropdown li > .Button,
    .Menu-dropdown li > a {
      padding: 0 16px;
      width: 100%;
      height: auto;
      line-height: 42px;
      text-align: left;
      display: block;
      color: #333;
    }

.Menu-dropdown li:hover {
    background: #f7f8f9;
  }

.Menu-dropdown li:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

.Menu-dropdown li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

.Menu-dropdown a {
    display: block;
  }

.MenuButton-listen-hover ~ .Menu-dropdown {
  transition-delay: 0.2s;
}

/* keep specificity same for easier override */
.Menu--open > .Menu-dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}
.HoverTitle {
  position: relative;
}

.HoverTitle:hover::before,
.HoverTitle:hover::after,
.HoverTitle:focus::before,
.HoverTitle:focus::after {
  -webkit-animation: hoverTitleFadeIn 100ms linear forwards;
          animation: hoverTitleFadeIn 100ms linear forwards;
}
.HoverTitle:hover::before,
.HoverTitle:hover::after {
  -webkit-animation-delay: 300ms;
          animation-delay: 300ms;
}

.HoverTitle::before,
.HoverTitle::after {
  content: '';
  position: absolute;
  left: 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
}

.HoverTitle::before {
  top: 22px;
  width: 0;
  height: 0;
  margin: 0 0 0 -6px;
  font-size: 0;
  color: rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid currentColor;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.HoverTitle::after {
  content: attr(data-hover-title);
  top: 28px;
  padding: 10px 16px;
  border-radius: 4px;
  line-height: 1.5;
  font-size: 13px;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
}

@-webkit-keyframes hoverTitleFadeIn {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes hoverTitleFadeIn {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}

.HoverTitle--slim::before {
    top: 28px;
  }

.HoverTitle--slim::after {
    top: 34px;
    padding: 3px 8px;
    line-height: 1.8;
  }
.Triangle {
  position: relative;
  display: block;
  width: 1em;
  height: 1em;
}

.Triangle-inner,
.Triangle-outer {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
}

.Triangle--up .Triangle-inner,
  .Triangle--up .Triangle-outer {
    border-bottom-color: currentColor;
  }

.Triangle--up .Triangle-outer {
    -webkit-transform: translateY(-1px);
            transform: translateY(-1px);
  }

.Triangle--down .Triangle-inner,
  .Triangle--down .Triangle-outer {
    border-top-color: currentColor;
  }

.Triangle--down .Triangle-outer {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
  }
.ReportInfringement {
  margin-top: -12px;
}

.ReportInfringement--mobile {
  margin-top: 0;
  padding: 20px;
}

.ReportInfringement-subtitle {
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 20px;
  color: #8590A6;
}

html[data-theme="dark"] .ReportInfringement-subtitle {
  color: #606A80;
}

.ReportInfringement-item {
  display: flex;
  align-items: flex-start;
}

.ReportInfringement-item:nth-child(2) {
    padding-top: 10px;
    margin-bottom: 17px;
    border-top: 1px solid #F6F6F6;
  }

html[data-theme="dark"] .ReportInfringement-item:nth-child(2) {
    border-top: 1px solid #2E2E2E;
}

.ReportInfringement-link {
  color: #0084FF;
}

html[data-theme="dark"] .ReportInfringement-link {
  color: #3A76D0;
}

.ReportInfringement-image {
  display: block;
  flex-basis: 80px;
  height: 80px;
  margin-right: 16px;
}

.ReportInfringement-item {
  padding: 0 8px 0 10px;
  margin-bottom: 10px;
}

.ReportInfringement-itemTitle {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #1A1A1A;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
}

html[data-ios] .ReportInfringement-itemTitle {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ReportInfringement-itemTitle {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

html[data-theme="dark"] .ReportInfringement-itemTitle {
  color: #999999;
}

.ReportInfringement-itemDescription {
  font-size: 12px;
  line-height: 20px;
  color: #444444;
}

html[data-theme="dark"] .ReportInfringement-itemDescription {
  color: #808080;
}

.ReportInfringement-arrow {
  flex-basis: 24px;
  height: 24px;
  min-width: 24px;
  margin-left: 16px;
}
.ReportOrgContent {
  width: 352px;
  height: 48px;
  margin-top: 1em;
  font-size: 14px;
  line-height: 24px;
  color: #646464;
}
  html[data-theme="dark"] .ReportOrgContent {
  color: #999999;
}

.ReportOrgContent-highlight {
  color: #FF9607;
}

html[data-theme="dark"] .ReportOrgContent-highlight {
  color: #FF9607;
}
.ReportInfringementMobile {
  padding: 20px;
}

.ReportInfringementMobile-button {
  display: block;
  width: 100%;
}

.ReportInfringementMobile-text {
  font-size: 15px;
  line-height: 1.7;
  color: #1A1A1A;
}

.ReportInfringementMobile-text + .ReportInfringementMobile-text {
    margin-top: 1em;
  }

html[data-theme="dark"] .ReportInfringementMobile-text {
  color: #999999;
}

.ReportInfringementMobile-img {
  margin-top: 1em;
  margin-bottom: 5em;
  display: block;
  width: 100%;
}

.ReportInfringementMobile-link {
  color: #0084FF;
}

html[data-theme="dark"] .ReportInfringementMobile-link {
  color: #3A76D0;
}

.ReportInfringementMobile-bold {
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
}

html[data-ios] .ReportInfringementMobile-bold {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ReportInfringementMobile-bold {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
.ReportDeclare-description {
  font-size: 14px;
  line-height: 24px;
  color: #1A1A1A;
}

  .ReportDeclare-description a {
    color: #0084FF;
  }

  html[data-theme="dark"] .ReportDeclare-description a {
    color: #3A76D0;
}

  html[data-theme="dark"] .ReportDeclare-description {
  color: #999999;
}

.ReportDeclare-mobileButton {
  display: block;
  width: 100%;
}

.ReportDeclare-mobileText {
  font-size: 15px;
  line-height: 1.7;
  color: #1A1A1A;
}

.ReportDeclare-mobileText + .ReportDeclare-mobileText {
    margin-top: 1em;
  }

html[data-theme="dark"] .ReportDeclare-mobileText {
  color: #999999;
}

.ReportDeclare-mobileImg {
  margin-top: 1em;
  margin-bottom: 5em;
  display: block;
  width: 100%;
}
.ReportTrespass-description {
  font-size: 14px;
  line-height: 24px;
  color: #1A1A1A;
}
  .ReportTrespass-description a {
    color: #0084FF;
  }
  html[data-theme="dark"] .ReportTrespass-description a {
    color: #3A76D0;
}
  html[data-theme="dark"] .ReportTrespass-description {
  color: #999999;
}
.ReportOption-check {
  font-size: 14px;
  color: #8590A6;
}

  .ReportOption-check input {
    margin-right: 8px;
  }

  html[data-theme="dark"] .ReportOption-check {
  color: #606A80;
}

.ReportOption-desc {
  font-size: 14px;
  color: #999999;
}

html[data-theme="dark"] .ReportOption-desc {
  color: #646464;
}
.ReportMenu-inner {
  margin-bottom: 30px;
  font-size: 14px;
  line-height: 1.75;
}

.ReportMenu-mobile .ReportMenu-inner:not(.ReportMenu-options) {
  padding-top: 18px;
}

.ReportMenu-item {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 12px 0;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid #F6F6F6;
  outline: none;
}

html[data-theme="dark"] .ReportMenu-item {
  border-bottom: 1px solid #2E2E2E;
}

.ReportMenu-itemValue {
  flex: 1 1;
}

.ReportMenu-itemCheck {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.ReportMenu-itemCheck:checked + .ReportMenu-itemCheckIcon {
    opacity: 1;
  }

.ReportMenu-itemCheckIcon {
  fill: #0084FF;
  opacity: 0;
  transition: opacity 200ms;
}

html[data-theme="dark"] .ReportMenu-itemCheckIcon {
  fill: #3A76D0;
}

.ReportMenu-paragraph {
  white-space: pre-wrap;
  list-style: none;
}

.ReportMenu-paragraph--light {
  margin-top: 1em;
  color: #8590A6;
}

html[data-theme="dark"] .ReportMenu-paragraph--light {
  color: #606A80;
}

.ReportMenu-textarea {
  width: 100%;
}

.ReportMenu-link {
  color: #175199;
}

.ReportMenu-link:hover {
    text-decoration: underline;
  }

html[data-theme="dark"] .ReportMenu-link {
  color: #175199;
}

.ReportMenu-link--light {
  text-decoration: underline;
}

.ReportMenu-errorText {
  width: 100%;
  margin-top: 16px;
  color: #F1403C;
  font-size: 15px;
  text-align: right;
}

html[data-theme="dark"] .ReportMenu-errorText {
  color: #B7302D;
}
.Report {
  margin-top: 6px;
}

.ReportButton {
  font-size: 15px;
  font-weight: normal;
}

.ReportModal .ReportInfringement-image {
    flex-shrink: 0;
  }

.ReportModal .ReportInfringement-content {
    flex-basis: 288px;
  }

/* 覆盖 zhihu-business 中的宽度限制 */

.ReportModal .ReportOrgContent {
    width: auto;
  }

@media (max-width: 660px) {

.ReportModal {
    width: 100%
}
  }

.ReportMenu {
  display: block;
  padding: 0 16px;
}

.ReportMenu .ModalButtonGroup--horizontal {
    flex-direction: row;
  }

@media (max-width: 660px) {

.ReportMenu .ModalButtonGroup--horizontal {
      padding: 0 16px
  }
    }

@media (max-width: 660px) {

.ReportMenu-inner {
    margin: 16px
}
  }
.CommentItem {
  position: relative;
  padding-left: 60px;
  margin-top: 32px;
}

.CommentItem--deleted {
  border: solid #f0f0f0;
  border-width: 1px 0;
  padding: 16px 0;
}

.CommentItem--deleted + .CommentItem--deleted {
    border-top: 0;
    margin-top: 0;
  }

.CommentItem-author {
  position: absolute;
  left: 0;
}

.CommentItem-authorTitle {
  color: #808080;
}

.CommentItem-headWrapper {
  position: relative;
}

.CommentItem-headWrapper a {
    color: #333;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
  }

html[data-ios] .CommentItem-headWrapper a {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .CommentItem-headWrapper a {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.CommentItem-head {
  flex-direction: row;
  line-height: 24px;
}

.CommentItem-head--rightPad {
  margin-right: 86px;
}

.CommentItem-context {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CommentItem-replySplit {
  margin: 0 6px;
}

.CommentItem-conversationButton {
  position: absolute;
  right: 0;
  height: 24px;
  line-height: 24px;
}

.CommentItem-reviewingBadge {
  margin-left: 6px;
}

.CommentItem-reviewingMenu {
  padding: 0;
}

.CommentItem-reviewingMenu .MenuButton {
    height: 24px;
    width: 24px;
    padding: 0;
  }

.CommentItem-reviewingMenu .MenuButton .icon {
      vertical-align: 0;
    }

.CommentItem-reviewingMenu .Menu-dropdown {
    top: 36px;
    margin-left: -134px;
    width: 272px;
  }

.CommentItem-reviewingMenu .Menu-item {
    white-space: nowrap;
    text-indent: 0;
    text-align: center;
  }

.CommentItem-reviewingMenu .Menu-item:hover {
      cursor: default;
      background: transparent;
    }

.CommentItem-reviewingMenu .Triangle {
    position: absolute;
    top: 1px;
    left: 50%;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

.CommentItem-content {
  min-height: 22px;
  margin: 8px 0;
  font-size: 15px;
  line-height: 24px;
  word-break: break-word;
}

.CommentItem-content a {
    color: #259;
  }

.CommentItem-content a:hover {
      text-decoration: underline;
    }

.CommentItem-foot {
  flex-direction: row;
  color: #808080;
  font-size: 14px;
  line-height: 30px;
}

.CommentItem-like {
  position: absolute;
  right: 0;
}

.CommentItem-like--empty {
  display: none;
}

.CommentItem-action {
  align-items: center;
  height: 30px;
  line-height: 30px;
  display: none;
  margin-left: 8px;
}

.CommentItem-action + .CommentItem-action {
    margin-left: 8px;
  }

.CommentItem:hover .CommentItem-action {
    display: block;
  }

.CommentItem-action.Button:hover,
  .CommentItem-action .Button:hover {
    color: #333;
  }

.CommentItem-action--visible {
  display: block;
}

.CommentItem-inlineReply {
  padding: 20px 0;
}

.CommentItem-actionReport {
  margin: 0;
}

.CommentItem-actionReport .ReportButton {
    margin: 0;
    font-size: inherit;
  }

@media (max-width: 420px) {
    .CommentItem .icon {
      display: none;
    }

  .CommentItem-action {
    display: block;
  }
}
.Spinner {
  contain: strict;
  display: block;
  margin: 0 auto;
  width: 24px;
  height: 24px;
  line-height: 24px;
}

.Spinner::after {
  content: '\e91a';
  display: inline-block;
  font-size: 24px;
  font-family: 'icomoon';
  -webkit-animation: spinner 0.8s infinite;
          animation: spinner 0.8s infinite;
  vertical-align: -4px;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.PostReviewComment {
  position: absolute;
  background-color: #fff;
  top: 75px;
  right: 16px;
  height: 70vh;
  width: 240px;
  padding-bottom: 60px;
  z-index: 4;
}

.PostReviewComment--close {
  height: auto;
  padding-bottom: 0;
}

.PostReviewComment--close .PostReviewComment-editor,
  .PostReviewComment--close .PostReviewComment-list,
  .PostReviewComment--close .PostReviewComment-description,
  .PostReviewComment--close .PostReviewComment-empty {
    display: none;
  }

.PostReviewComment-title {
  font-size: 18px;
  padding: 16px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
}

html[data-ios] .PostReviewComment-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .PostReviewComment-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.PostReviewComment-description {
  font-size: 12px;
  height: 12px;
  line-height: 12px;
  padding-left: 16px;
  margin-bottom: 10px;
  color: #808080;
}

.PostReviewComment-editor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 6px 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.PostReviewComment-editor .Editable {
    min-height: auto;
  }

.PostReviewComment-editor .RichText {
    min-height: auto !important;
  }

.PostReviewComment-editor .DraftEditor-root {
    padding-left: 0;
  }

.PostReviewComment-editor .CommentEditor-actions {
    display: none;
  }

.PostReviewComment-editor--opened .CommentEditor-actions {
    display: flex;
  }

.PostReviewComment-list {
  padding: 0 13px 0 16px;
  height: calc(70vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.PostReviewComment-list .Spinner {
    margin: 30px auto;
  }

.PostReviewComment-empty {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  color: #b3b3b3;
}

.PostReviewComment-empty i {
    font-size: 64px;
  }

.PostReviewComment-list--editorOpen {
  height: calc(70vh - 194px);
}

.PostReviewCommentItem {
  padding-left: 0;
  position: relative;
}

.PostReviewCommentItem:first-child {
    margin-top: 0;
  }

.PostReviewCommentItem .CommentItem-headWrapper,
  .PostReviewCommentItem .CommentItem-foot {
    padding-left: 60px;
  }

.PostReviewCommentItem .CommentItem-head {
    height: 36px;
    line-height: 20px;
    padding-bottom: 16px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 13px;
  }

.PostReviewCommentItem .CommentItem-content {
    font-size: 13px;
    color: #333;
  }

.PostReviewCommentItem .CommentItem-foot {
    position: absolute;
    top: 23px;
    left: 0;
    font-size: 13px;
    line-height: 13px;
  }

.PostReviewCommentItem .CommentItem-foot .CommentItem-action:not(.CommentItem-actionRemove) {
      display: none;
    }

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove {
      font-size: 13px;
      height: 13px;
      line-height: 13px;
    }

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove .icon {
        display: none;
      }

.PostReviewCommentItem .CommentItem-foot .CommentItem-actionRemove:before {
        content: '·';
        margin-right: 6px;
      }

.PostReviewCommentItem.is-published .CommentItem-actionRemove {
  display: none;
}

.PostReviewComment-close,
.PostReviewComment-toggle {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 14px;
  right: 16px;
  cursor: pointer;
  color: #808080;
}

.PostReviewComment-toggle i {
    display: inline-block;
  }

.PostReviewComment-toggle--open i {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
.UploadPicture-wrapper {
  cursor: pointer;
}

.UploadPicture-input {
  display: none;
}
.TitleImage {
  display: block;
}

  .TitleImage img {
    display: block;
  }

  .Layout-titleImage--normal .TitleImage {
    margin-bottom: 24px;
  }

.TitleImage-image {
  position: relative;
  background: #b3b3b3 no-repeat center center;
  background-size: cover;
}

.TitleImage-image--full {
  width: 100vw;
  height: calc(100vh - 59px);
  margin-left: calc(660px / 2 - 50vw);
}

.TitleImage-image--full::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.16);
    height: 100%;
  }

.TitleImage-imagePure {
  width: 100%;
}

@media (max-width: 660px) {
  .TitleImage-imagePure--fixed {
    height: auto !important;
  }
}
.FakeProgress {
  width: 210px;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  border-radius: 2px;
}

.FakeProgress-inner {
  transition: width ease-in 0.2s;
  background: #fff;
  width: 0%;
  height: 4px;
}
.WriteCover-wrapper {
  background: #f7f8f9;
  line-height: 192px;
  color: #808080;
  min-height: 192px;
  text-align: center;
}

.WriteCover-previewWrapper {
  height: 100%;
  flex: 1 1;
  justify-content: center;
  position: relative;
}

.Layout-titleImage--full .WriteCover-previewWrapper {
    position: static;
  }

.Layout-titleImage--normal .WriteCover-previewWrapper .TitleImage {
    margin-bottom: 0;
  }

.WriteCover-previewWrapper--empty:after {
    content: '添加题图';
    color: #b3b3b3;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 64px;
    line-height: 1;
    opacity: 0;
    z-index: 0;
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    transition: all 0.2s;
  }

.WriteCover-previewWrapper--empty:hover:after {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

.WriteCover-uploadIcon {
  font-size: 42px;
  color: rgba(0, 0, 0, 0.2);
}

.WriteCover-uploadInput {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.WriteCover-progress {
  align-self: center;
}

.WriteCover-editWrapper {
  position: absolute;
  flex-direction: row;
  height: 42px;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 4px 0 0 0;
  border: 0;
}

.WriteCover-editWrapper .Button {
    color: #fff;
  }

.WriteCover-editWrapper .Button:nth-child(1):active {
      border-radius: 4px 0 0 0;
    }

.WriteCover-editWrapper .Button:active {
      background: #000;
      opacity: 0.5;
    }

.WriteCover-editButton {
  width: 48px;
  border: 0;
  border-radius: 0;
  display: flex;
  padding: 0;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.WriteIndex-titleInput {
  margin: 16px 0;
  border: 0;
  padding: 0;
  height: auto;
  width: 100%;
  position: relative;
}

  .WriteIndex-titleInput.is-focus {
    border: 0;
  }

  .WriteIndex-titleInput .Input {
    height: 44px;
    min-height: 44px;
    display: block;
    width: 100%;
    border: 0;
    font-size: 32px;
    line-height: 1.4;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    outline: none;
    box-shadow: none;
  }

  html[data-ios] .WriteIndex-titleInput .Input {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

  html[data-android] .WriteIndex-titleInput .Input {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

  .WriteIndex-titleInput .Input::-webkit-input-placeholder {
      color: #b3b3b3;
    }

  .WriteIndex-titleInput .Input:-ms-input-placeholder {
      color: #b3b3b3;
    }

  .WriteIndex-titleInput .Input::-ms-input-placeholder {
      color: #b3b3b3;
    }

  .WriteIndex-titleInput .Input::placeholder {
      color: #b3b3b3;
    }

  .WriteIndex-titleInput .Input:focus {
      outline: none;
    }

  .Layout-titleImage--full .WriteIndex-titleInput {
    position: absolute;
    margin: 0;
    width: 660px;
    top: calc(100vh - 44px);
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    background: transparent;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.18);
  }

  .Layout-titleImage--full .WriteIndex-titleInput .Input {
      color: #fff;
    }
.PostEditor,
  .PostEditor.is-focus {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .PostEditor .Editable {
    overflow: visible;
  }
  .PostEditor .Editable-toolbar {
    background: transparent;
    flex-direction: row;
    padding: 5px 13px;
  }
  .PostEditor .Editable-control:disabled {
      border-color: transparent;
    }
  .PostEditor .Icon {
    fill: #aaa;
  }
  .PostEditor .RichText {
    margin: 30px 0;
    padding: 0 0 200px;
    min-width: 660px;
  }
  .PostEditor .RichText .Editable-VideoTitleInput-innerContainer {
      display: flex;
      flex-direction: row;
    }
  .PostEditor .DraftEditor-root {
    padding: 0;
    font-size: 16px;
    min-height: 300px;
  }
  /* 全局的 flex 重置影响了 flex-wrap 效果 */
  .PostEditor .public-DraftStyleDefault-block {
    max-width: 100%;
  }
  .PostEditor .VideoCard-layout {
    display: flex;
    flex-direction: row;
  }
  .PostEditor .Editable-imageUploader {
    margin: 0 auto;
  }
  .PostEditor .Editable-imageUploader-layout {
    display: inline-block;
  }

.Image-resizer {
  display: block;
}

.Image-captionInput {
  display: block;
}

.Editable-toolbarMenuItem {
  border-radius: 0;
  color: #8590a6;
}

.Editable-toolbarMenuItem:focus {
    outline: 0;
  }

.Editable-docModal-loading,
.Editable-docModal-fileName {
  flex-direction: row;
}

.Editable-docModal .Modal-inner {
  min-height: 0;
}

.WatermarkHint-modalBody {
  align-items: center;
}
.ColumnSearchMenu .Menu-dropdown {
    min-height: 214px;
    overflow: hidden;
    margin-top: 45px;
    width: 208px;
    left: 50%;
    margin-left: -104px;
  }
  .ColumnSearchMenu .MenuButton-listen-click {
    display: flex;
    margin: 0 auto;
    flex-direction: row;
  }

.ColumnSearchMenu-searchInput {
  width: 100%;
  height: 52px;
  border: none;
}

.ColumnSearchMenu-searchInput svg {
    position: absolute;
    top: 18px;
    left: 20px;
  }

.ColumnSearchMenu-searchInput .Input {
    margin-left: 37px;
    color: #333;
  }

.ColumnSearchMenu-searchInput.is-focus {
  border: none;
}

.ColumnSearchMenu-selectFriendsButton {
  padding: 0 !important;
}

.ColumnSearchMenu-friends {
  border-radius: 0;
  cursor: pointer;
  padding: 5px 16px;
  line-height: 44px;
  white-space: nowrap;
  border: 0;
  color: #333;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
}

.ColumnSearchMenu-friends span {
    font-size: 15px;
  }

.ColumnSearchMenu-image {
  width: 36px;
  height: 36px;
  margin-right: 14px;
  border-radius: 50%;
  vertical-align: middle;
  max-width: 100%;
  border: 0;
}
.ReviewPanel-triggerButton {
  margin-right: 10px;
}

  .ReviewPanel-triggerButton .icon {
    position: relative;
    top: 2px;
    margin-right: 2px;
  }

  .ReviewPanel-triggerButton:hover {
    color: #333;
  }

.ReviewPanel-prpover {
  top: 58px;
  right: 128px;
}

.ReviewPanel-wrapper {
  width: 320px;
  min-height: 277px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 16px;
  font-size: 14px;
  color: #808080;
  line-height: 1.7;
}

.ReviewPanel-review {
  font-size: 14px;
  color: gray;
  line-height: 1.7;
  padding: 60px 0 30px;
  text-align: center;
}

.ReviewPanel-review .Icon {
    margin: 0 auto 16px;
  }

.ReviewPanel-section .Menu {
  border: 0;
  box-shadow: 0;
  width: auto;
  height: auto;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}

.ReviewPanel-title {
  font-size: 18px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  color: #333;
  margin-bottom: 16px;
}

html[data-ios] .ReviewPanel-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ReviewPanel-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ReviewPanel-selectButton {
  align-self: center;
}

.ReviewPanel-selectButton .icon {
    font-size: 36px;
    color: #b3b3b3;
  }

.ReviewPanel-selectButton:hover .icon {
    color: #808080;
  }

/*padding-bottom: 20px;*/

.ReviewPanel-section + .ReviewPanel-section {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }

.ReviewPanel-sectionTitle {
  text-align: center;
  margin-top: 20px;
  flex-direction: row;
  justify-content: center;
}

.ReviewPanel-selectColumnMenu {
  align-self: center;
}

.ReviewPanel-selectColumnMenu .Menu-dropdown {
    width: 200px;
    -webkit-transform: translate(-82px, 40px);
            transform: translate(-82px, 40px);
  }

.ReviewPanel-selectColumnMenu .Menu-item .Button {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    height: 54px;
  }

.ReviewPanel-selectedColumn {
  align-self: center;
  position: relative;
  cursor: pointer;
  margin: 10px auto 16px;
}

.ReviewPanel-selectedColumn .Button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: none;
  }

.ReviewPanel-selectedColumn i {
    color: #fff;
  }

.ReviewPanel-selectedColumn:hover .Button {
    display: flex;
  }

.ReviewPanel-selectFriends {
  cursor: pointer;
}

.ReviewPanel-selectFriends-transform i {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

.ReviewPanel-button {
  margin-top: 16px;
}

.ReviewPanel-button .Button {
    margin-left: 215px;
    width: 72px;
    height: 32px;
    border-color: #0080ff;
    color: #0080ff;
  }

.ReviewPanel-button .Button[disabled] {
      color: #b3b3b3;
      opacity: 1;
      background-color: transparent;
      border-color: rgba(0, 0, 0, 0.1);
    }

.ReviewPanel-friend {
  height: 36px;
  margin-right: 8px;
  display: flex;
}

.ReviewPanel-friend .Avatar-hemingway {
    margin: 2px 8px 0 8px;
  }

.ReviewPanel-selectFriend {
  position: relative;
}

.ReviewPanel-selectFriend .Button {
    position: absolute;
    top: 0;
    margin-left: 8px;
    margin-top: 2px;
    padding: 0;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: none;
  }

.ReviewPanel-selectFriend i {
    color: #fff;
  }

.ReviewPanel-selectFriend:hover .Button {
    display: flex;
  }

.ReviewPanel-columnName {
  vertical-align: middle;
  margin-right: 14px;
}
.StaticCacheBanner {
  position: relative;
  z-index: 100;
  padding: 16px 10px;
  line-height: 28px;
  color: #8590A6;
  text-align: center;
  background-color: #EBEBEB;
}

  .StaticCacheBanner a {
    color: #175199;
    transition: border-bottom 200ms ease-in;
  }

  .StaticCacheBanner a:hover {
      border-bottom: 1px solid rgba(23, 81, 153, 0.72);
    }

  html[data-theme="dark"] .StaticCacheBanner a:hover {
      border-bottom: 1px solid rgba(23, 81, 153, 0.72);
}

  html[data-theme="dark"] .StaticCacheBanner a {
    color: #175199;
}

  html[data-theme="dark"] .StaticCacheBanner {
  color: #606A80;
}

  html[data-theme="dark"] .StaticCacheBanner {
  background-color: #444444;
}
.Layout {
  background: #fff;
  min-height: 660px;
}

.Layout-navbarHolder {
  height: 59px;
}

.Layout-navbarHolder--new-mobile {
    height: 52px;
  }

.Layout-main {
  margin: 47px auto 0;
  padding: 0 0;
  width: 660px;
  z-index: 1;
}

@media (max-width: 660px) {

.Layout-main {
    width: 100% !important;
    margin-top: 35px
}
  }

.GlobalAlert {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -230px;
  width: 460px;
  line-height: 24px;
  color: #666768;
  z-index: 204;
  border: solid rgba(0, 0, 0, 0.08);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
  flex-direction: row;
  padding: 30px;
}

.GlobalAlert i {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    display: inline-block;
  }

.GlobalAlert.sticky {
    position: fixed;
    top: 0;
  }

.GlobalAlert-content {
    flex: 1 1;
  }

.GlobalAlert-info i {
  color: #50c87e;
}

.GlobalAlert-error i {
  color: #f75659;
}

.GlobalAlert--margin {
  top: 59px;
}

.StaticCacheBanner {
  display: block;
}

.appview .Layout-main {
  margin: 0;
  width: auto;
}
.PublishPanel-triggerButton {
  width: 82px;
  height: 32px;
  line-height: 30px;
  padding: 0;
}

  .PublishPanel-triggerButton .icon {
    margin-right: -3px;
    vertical-align: -5px;
    pointer-events: none;
  }

.PublishPanel-wrapper {
  position: relative;
  float: right;
  padding: 0 10px;
}

.PublishPanel-prpover {
  position: fixed;
  top: 62px;
  right: 12px;
  line-height: 1;
  cursor: default;
  width: 320px;
  min-height: 266px !important;
  height: auto;
  padding-bottom: 64px;
  margin-right: -12px;
  -webkit-animation: dropdown 0.2s;
          animation: dropdown 0.2s;
  opacity: 1;
  margin-top: -4px;
  z-index: 40;
  outline: 0;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1);
}
.PublishPanel-prpover .Popover-arrow,
.PublishPanel-prpover .Popover-arrow:after {
  border: 8px solid transparent;
  display: block;
  width: 0;
  height: 0;
  border-top-width: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  border-bottom-color: #ebebeb;
  position: fixed;
  top: 58px;
  right: 100px;
}

.PublishPanel-prpover .Popover-arrow--bottom:after {
  border-bottom-color: #fff;
  top: 0;
}

.publish-title {
  font-size: 18px;
  padding: 16px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
}

html[data-ios] .publish-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .publish-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.publish-content {
  max-height: 270px;
  overflow: auto;
  padding: 0 16px;
  font-size: 14px;
  color: gray;
  line-height: 1.7;
}

.publish-tags {
  margin-top: 16px;
}

.publish-tags::before {
    display: table;
    content: '';
  }

.publish-tags::after {
    clear: both;
    display: table;
    content: '';
  }

.publish-tags li {
    position: relative;
    float: left;
    list-style: none;
    margin: 0 15px 10px 0;
  }

.publish-tagsWrapper {
  cursor: pointer;
  position: relative;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
}

.publish-taglink {
  color: gray;
  border-radius: 15px;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 36px 5px 16px;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  background: #eee;
}

.publish-removeTag {
  cursor: pointer;
  position: absolute;
  width: 18px;
  height: 18px;
  right: 14px;
  top: 50%;
  margin-top: -8px;
  text-align: center;
  line-height: 11px;
}

.publish-searchInput {
  margin-top: 16px;
  width: 100%;
  border: none !important;
}

.publish-searchInput .Icon--search {
    position: absolute;
    top: 8px;
    left: 2px;
  }

.publish-searchInput .Input {
    margin-left: 19px;
  }

.publish-line {
  width: 100%;
  background: rgba(0, 0, 0, 0.16);
  height: 1px;
  margin-top: 2px;
}

.publish-suggest {
  position: absolute;
  top: 150px;
  z-index: 30;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  box-sizing: border-box;
}

.publish-suggest .publish-row {
    cursor: pointer;
    padding: 0 16px;
    line-height: 44px;
    white-space: nowrap;
    border: 0;
    color: #333;
  }

.publish-suggest .publish-row::first-child {
      border-radius: 4px 4px 0 0;
    }

.publish-suggest .publish-row::last-child {
      border-radius: 4px 4px 0 0;
    }

.publish-normalRow:hover {
    background-color: #f7f8f9;
  }

.publish-name {
  font-size: 15px;
}

.publish-empty {
  color: #b3b3b3;
}

.publish-stepOneButton {
  position: absolute;
  bottom: 16px;
  right: 16px;
}

.publish-buttonWrapper {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 16px;
}

.publish-button {
  width: 72px;
  height: 32px;
  line-height: 30px;
  box-sizing: border-box;
  font-size: 12px;
}

.publish-Item {
  line-height: 18px;
  height: 45px;
  margin-bottom: 20px;
  position: relative;
  color: #333;
}

.publish-columnItem {
  line-height: 45px;
  position: relative;
  color: #333;
}

.publish-columnLabel {
  display: flex;
}

.publish-columnLabel span {
    display: block;
  }

.publish-columnInput {
  position: absolute;
  top: 10px;
  right: 0;
}

.publish-description {
  font-size: 13px;
  color: #b3b3b3;
  display: block;
}

.publish-columnImg {
  height: 36px;
  margin-right: 14px;
  vertical-align: middle;
  border: none;
  border-radius: 50%;
}

.publish-returnButton {
  height: 32px;
  width: 72px;
  font-size: 14px;
  border-color: transparent;
  color: gray;
}

.publish-returnButton:hover {
    color: #333;
  }

.publish-stepTwoButton {
  margin-left: 160px;
  font-size: 12px;
}

.publish-searchEmptyInput {
  display: none;
}

.publish-lable {
  margin-bottom: 20px;
}
.WriteIndex-pageTitleWrapper {
  flex-direction: row;
  align-items: center;
}

.WriteIndex-pageTitle {
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  color: #333;
  margin-right: 20px;
}

html[data-ios] .WriteIndex-pageTitle {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .WriteIndex-pageTitle {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.WriteIndex-pageSubTitle {
  color: #b3b3b3;
}

.WriteIndex-LengthStatus {
  margin-bottom: 16px;
  color: #8590A6;
  font-size: 14px;
  text-align: right;
}

html[data-theme="dark"] .WriteIndex-LengthStatus {
  color: #606A80;
}

.WriteIndex-pageTitleError,
.WriteIndex-LengthStatus-warning {
  color: #F1403C;
}

html[data-theme="dark"] .WriteIndex-pageTitleError, html[data-theme="dark"] .WriteIndex-LengthStatus-warning {
  color: #B7302D;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.WriteIndex-pageTitleLoading {
  -webkit-animation: loading 0.9s infinite;
          animation: loading 0.9s infinite;
}

.Editable-videoModal-typeButton:active {
    outline: none;
  }

.Editable .is-fixed {
    top: 58px !important;
    background-color: rgba(255, 255, 255, 0.97);
    width: 100%;
  }
.HelpMenu-help {
  display: inline-block;
  background: #fff;
  width: 18px;
  height: 18px;
  z-index: 1;
  position: relative;
  text-align: center;
  line-height: 18px;
  color: gray;
}

.HelpMenu-icon {
  display: inline-block;
  cursor: pointer;
  background: #fff;
  margin-left: -24px;
}

.HelpMenu-menu {
  width: 370px;
  margin-left: -198px;
  min-height: auto !important;
  padding: 16px;
  right: auto;
  left: 50%;
  margin-top: 14px;
  font-size: 14px;
  color: gray;
  font-weight: 400;
  cursor: default;
  top: 100%;
  z-index: 40;
  outline: 0;
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  box-sizing: border-box;
}

.HelpMenu-menu:before,
  .HelpMenu-menu:after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin: 0 0 0 -8px;
    font-size: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
  }

.HelpMenu-menu:before {
    top: -10px;
    border-bottom: 9px solid rgba(0, 0, 0, 0.08);
  }

.HelpMenu-menu:after {
    top: -9px;
    border-bottom: 9px solid #fff;
  }

.HelpMenu-menuItem {
  padding: 0;
}
@media screen and (max-width: 660px) {
    .Users-List .Users-bio {
      display: none;
    }
  }
  .Users-List li {
    position: relative;
    padding-left: 64px;
    min-height: 48px;
    margin-bottom: 40px;
  }
  .Users-List li .Users-Avatar {
      position: absolute;
      top: 0;
      left: 0;
    }
  .Users-List li .Users-Intro {
      line-height: 28px;
      flex-direction: row;
      font-size: 16px;
      color: gray;
    }
  .Users-List li .Users-Intro a {
        color: #333;
        margin-right: 5px;
        /* 与设计一致，不支持设备将回退为 700 */
        font-weight: 600;
        /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
        font-synthesis: style;
      }
  html[data-ios] .Users-List li .Users-Intro a {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
  html[data-android] .Users-List li .Users-Intro a {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
  .Users-List li .Users-postsCount {
      flex-direction: row;
      color: gray;
      margin-top: 3px;
      font-size: 14px;
    }
.Navbar-titleContent {
  flex-direction: row;
  color: #333;
  width: 100%;
  overflow: hidden;
}

  .Navbar-titleContent img {
    margin-right: 12px;
    border-radius: 50%;
    vertical-align: middle;
  }

  .Navbar-titleContent .Navbar-titleName {
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    max-width: calc(100% - 56px);
    display: block;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-ios] .Navbar-titleContent .Navbar-titleName {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

  html[data-android] .Navbar-titleContent .Navbar-titleName {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

  @media screen and (max-width: 660px) {

  .Navbar-titleContent .Navbar-titleName {
      max-width: 100%
  }
    }

  .Navbar-titleContent .ColumnFollowButton {
    margin-left: 32px;
  }

  @media screen and (max-width: 660px) {
    .Navbar-titleContent .Navbar-titleAvatar,
    .Navbar-titleContent .ColumnFollowButton {
      display: none;
    }
  }

@media screen and (max-width: 660px) {

.AboutIndex-Wrapper {
    padding-left: 16px;
    padding-right: 16px
}
  }

.AboutIndex-Wrapper h2 {
    font-size: 18px;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    margin: 0 0 32px;
  }

html[data-ios] .AboutIndex-Wrapper h2 {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .AboutIndex-Wrapper h2 {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.AboutIndex-Wrapper .block-title::after {
    content: '';
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    top: 11px;
    background: #f0f0f0;
  }

.AboutIndex-Wrapper .avatar {
    border-radius: 50%;
  }

.AboutIndex-Wrapper .AboutIndex-introContent {
    flex-direction: row;
  }

.AboutIndex-Wrapper .AboutIndex-introContent .AboutIndex-introInfo {
      margin-left: 16px;
      font-size: 15px;
    }

.AboutIndex-Wrapper .AboutIndex-introContent .AboutIndex-introInfo h4 {
        font-size: 20px;
        /* 与设计一致，不支持设备将回退为 700 */
        font-weight: 600;
        /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
        font-synthesis: style;
        line-height: 22px;
        margin: 16px 0;
      }

html[data-ios] .AboutIndex-Wrapper .AboutIndex-introContent .AboutIndex-introInfo h4 {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .AboutIndex-Wrapper .AboutIndex-introContent .AboutIndex-introInfo h4 {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.AboutIndex-Wrapper .AboutIndex-topicWrapper,
  .AboutIndex-Wrapper .AboutIndex-descriptionWrapper,
  .AboutIndex-Wrapper .AboutIndex-AuthorsWrapper {
    margin-top: 48px;
  }

.AboutIndex-Wrapper .block-title {
    line-height: 22px;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    margin: 0 0 32px;
    font-size: 16px;
    position: relative;
  }

html[data-ios] .AboutIndex-Wrapper .block-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .AboutIndex-Wrapper .block-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.AboutIndex-Wrapper .block-title span {
      background: #fff;
      position: relative;
      z-index: 1;
      padding-right: 16px;
    }

.AboutIndex-Wrapper .block-title .HelpMenu-icon {
      margin-left: 2px;
      vertical-align: -2px;
    }

.AboutIndex-Wrapper .block-title .HelpMenu-menu {
      width: 200px;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      margin-left: 0;
    }

@media screen and (max-width: 660px) {

.AboutIndex-Wrapper .block-title .HelpMenu-menu {
        width: 100px
    }
      }

.AboutIndex-Wrapper .AboutIndex-topicWrapper .AboutIndex-topicList {
      display: block;
    }

.AboutIndex-Wrapper .AboutIndex-topicWrapper .AboutIndex-topicList span {
        margin: 0 16px 16px 0;
        display: inline-block;
        color: gray;
        border-radius: 15px;
        font-size: 14px;
        line-height: 20px;
        padding: 5px 16px;
        max-width: 100%;
        background: #eee;
      }

.AboutIndex-Wrapper .AboutIndex-descriptionWrapper p {
      font-size: 15px;
      line-height: 24px;
    }
.Drafts-item {
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.Drafts-title {
  font-size: 16px;
  padding: 0 0 8px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  max-height: 60px;
  color: #333;
  text-decoration: none;
  margin: 0;
  overflow: hidden;
}

.Drafts-link {
  color: #333;
  text-decoration: none;
}

.Drafts-meta {
  color: gray;
  text-decoration: none;
  font-size: 14px;
  display: inline;
}

.Drafts-updated {
  position: relative;
  cursor: pointer;
  color: gray;
}

.Drafts-updated:hover {
    color: #333;
  }

.Drafts-updated:hover:before {
      content: '';
      position: absolute;
      left: 50%;
      width: 0;
      height: 0;
      margin: 0 0 0 -6px;
      font-size: 0;
      border-bottom: 6px solid rgba(0, 0, 0, 0.8);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      transition: all 0.05s ease-in-out;
      opacity: 0;
      bottom: auto;
      top: 22px;
      visibility: visible;
      opacity: 1;
      z-index: 50;
    }

.Drafts-updated:hover:after {
      content: attr(data-title);
      white-space: normal;
      bottom: auto;
      top: 28px;
      padding: 10px 16px;
      color: #fff;
      line-height: 1.5;
      text-align: center;
      position: absolute;
      left: 50%;
      box-sizing: border-box;
      font-size: 13px;
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.8);
      border-radius: 4px;
      pointer-events: none;
      visibility: visible;
      opacity: 1;
      z-index: 50;
      line-height: 1.8;
      width: 290px;
      margin-left: -145px;
      transition: all 0.05s ease-in-out;
    }

@media screen and (max-width: 660px) {

.Drafts-updated:hover:after {
        margin-left: -30px
    }
      }

.Drafts-removeButton {
  cursor: pointer;
}

.Drafts-removeButton:hover {
    color: #333;
  }
.Drafts-modalTitle {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590a6;
  text-align: center;
}

.Drafts-list {
  margin-bottom: 80px;
}

.Drafts-list .Spinner {
    margin-bottom: 56px;
  }

@media (max-width: 420px) {
  .Drafts-list {
    margin: 0 16px;
  }
}
.ColumnSettings-layout {
  margin-top: 0;
  width: 660px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  padding: 0 0 55px;
}

.ColumnSettings-titles {
  line-height: 18px;
}

.ColumnSettings-subtitle {
  font-size: 13px;
  color: gray;
  margin-bottom: 2px;
  cursor: pointer;
}

.ColumnSettings-maintitle {
  font-size: 14px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  color: #414243;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-ios] .ColumnSettings-maintitle {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ColumnSettings-maintitle {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ColumnSettings-tab {
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 48px;
  height: 66px;
  flex-direction: row;
  cursor: pointer;
}

.ColumnSettings-type {
  position: relative;
  bottom: -2px;
  margin-right: 16px;
  float: left;
  padding: 0 16px;
  line-height: 64px;
  color: #333;
  text-decoration: none;
}

.ColumnSettings-type:active {
    color: #0080ff;
    border-bottom: 2px solid #0080ff;
  }

.ColumnSettings-active {
  color: #0080ff;
  border-bottom: 2px solid #0080ff;
}

.ColumnSettings-contributeNum {
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  background: #e26d6d;
  padding: 0 6px;
  border-radius: 9px;
  position: relative;
  bottom: 1px;
  margin-left: 5px;
  vertical-align: baseline;
}

@media (max-width: 420px) {
  .ColumnSettings-tab {
    display: flex;
    padding-top: 10px;
    height: 55px;
  }

  .ColumnSettings-type {
    flex: 1 1;
    float: none;
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    line-height: 43px;
  }
}
.UserAvatar {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  background-color: #FFFFFF;
  border: 4px solid #FFFFFF;
  border-radius: 8px;
}
  html[data-theme="dark"] .UserAvatar {
  background-color: #1A1A1A;
}
  html[data-theme="dark"] .UserAvatar {
  border: 4px solid #1A1A1A;
}

.UserAvatar-inner {
  vertical-align: top;
}

.UserAvatar-holder {
  width: 160px;
  height: 160px;
}

.UserAvatar-round {
  border-radius: 50%;
  width: 160px;
  height: 160px;
}
.UploadImageModal-modal {
  text-align: center;
}

  .UploadImageModal-modal div {
    display: block;
  }

.UploadImageModal-container {
  width: 100%;
  height: 100%;
  margin: 0 auto 30px;
  cursor: move;
}

.UploadImageModal-container canvas {
    vertical-align: top;
  }
.UserAvatarEditor {
  cursor: pointer;
  position: relative;
}

.UserAvatarEditor-avatar {
  background: #F6F6F6;
  border: 4px solid #FFFFFF;
  border-radius: 8px;
}

html[data-theme="dark"] .UserAvatarEditor-avatar {
  background: #2E2E2E;
}

html[data-theme="dark"] .UserAvatarEditor-avatar {
  border: 4px solid #1A1A1A;
}

.UserAvatarEditor-title {
  font-size: 24px;
  color: #1A1A1A;
}

html[data-theme="dark"] .UserAvatarEditor-title {
  color: #999999;
}

.UserAvatarEditor-subTitle {
  font-size: 14px;
  color: #8590A6;
}

html[data-theme="dark"] .UserAvatarEditor-subTitle {
  color: #606A80;
}

.UserAvatarEditor-range {
  width: 200px;
  margin: 20px 10px;
}

.UserAvatarEditor-maskInner {
  z-index: 4;
  border: 4px solid #FFFFFF;
  border-radius: 8px;
}

html[data-theme="dark"] .UserAvatarEditor-maskInner {
  border: 4px solid #1A1A1A;
}

.UserAvatarEditor-maskInnerText {
  white-space: nowrap;
}

.UserAvatarEditor-cameraIcon {
  margin-bottom: 14px;
  fill: #FFFFFF;
}

html[data-theme="dark"] .UserAvatarEditor-cameraIcon {
  fill: #1A1A1A;
}

.UserAvatarEditor-maskRoundInner {
  border-radius: 50%;
}
.ColumnForm-basicInfo {
  margin-top: 30px;
  padding-top: 30px;
  display: block;
}

.ColumnForm-formTitle {
  margin-top: 7px;
  float: left;
  width: 80px;
  text-align: right;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  line-height: 29px;
}

html[data-ios] .ColumnForm-formTitle {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ColumnForm-formTitle {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ColumnForm-formContent {
  margin-left: 116px;
  position: relative;
  display: block;
}

.ColumnForm-muiInput {
  display: inline-block;
  border: 0;
  min-height: 40px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  line-height: 20px;
  padding: 10px 4px 11px;
  outline: 0;
  border-radius: 0;
  margin-bottom: 2px;
  transition: box-shadow ease-in-out 0.15s;
  width: 368px;
  font-size: 16px;
  padding-left: 0;
}

.ColumnForm-tips {
  width: 368px;
  transition: all 0.2s ease-in;
  visibility: visible;
  opacity: 1;
  font-size: 14px;
  color: gray;
  padding-top: 10px;
  position: absolute;
  flex-direction: row;
}

.ColumnForm-tips:before,
  .ColumnForm-tips:after {
    display: table;
    content: '';
  }

.ColumnForm-tips:after {
    clear: both;
  }

.ColumnForm-save {
  position: absolute;
  right: 0;
  top: 7px;
  flex-direction: row;
}

.ColumnForm-save .Button {
    width: 72px;
    height: 32px;
  }

.ColumnForm-tipsNumber {
  margin-left: 194px;
}

.ColumnForm-cancelButton {
  margin-right: 16px;
}

.ColumnForm-spine {
  display: inline-block;
  vertical-align: 0;
  font-size: 16px;
  margin-right: 2px;
}

.ColumnForm-tipsRightNumber {
  margin-left: 340px;
}

.ColumnForm-slugInput {
  width: 200px;
}

.ColumnForm-pendingName {
  max-width: 550px;
}

@media (max-width: 420px) {
  .ColumnForm-formTitle {
    float: none;
    display: block;
    text-align: left;
  }

  .ColumnForm-formContent {
    margin-left: 0;
  }
}
.ColumnFormTopic-basicInfo {
  margin-top: 30px;
  padding-top: 30px;
  display: block;
}

.ColumnFormTopic-title {
  float: left;
  width: 80px;
  text-align: right;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  line-height: 29px;
}

html[data-ios] .ColumnFormTopic-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ColumnFormTopic-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ColumnFormTopic-content {
  margin-left: 116px;
  position: relative;
}

.ColumnFormTopic-topic {
  padding-left: 0;
  font-weight: 400;
  margin-bottom: 0;
  line-height: 22px;
  position: relative;
  font-size: 16px;
  display: block;
}

.ColumnFormTopic-topic span {
    position: relative;
    z-index: 1;
    padding-right: 16px;
  }

.ColumnFormTopic-topic:before {
    display: table;
    content: '';
  }

.ColumnFormTopic-tag {
  margin-bottom: 15px;
  margin-right: 16px;
  color: gray;
  border-radius: 15px;
  font-size: 14px;
  line-height: 20px;
  padding: 5px 15px 5px 16px;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  background: #eee;
  cursor: pointer;
}

.ColumnFormTopic-tag:hover {
    background-color: #f6f6f6;
  }

@media (max-width: 420px) {
  .ColumnFormTopic-title {
    float: none;
    display: block;
    text-align: left;
  }

  .ColumnFormTopic-content {
    margin-left: 0;
    margin-top: 12px;
  }

    .ColumnFormTopic-content .HelpMenu-help {
      position: absolute;
      top: 0;
      margin-top: -36px;
      left: 92px;
    }
}
.ColumnFormContribution-basicInfo {
  display: block;
}

.ColumnFormContribution-title {
  float: left;
  width: 80px;
  text-align: right;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  line-height: 29px;
}

html[data-ios] .ColumnFormContribution-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ColumnFormContribution-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ColumnFormContribution-content {
  margin-left: 116px;
  position: relative;
}

.ColumnFormContribution-mintro {
  font-size: 16px;
  padding: 6px 0 12px;
  display: block;
}

.ColumnFormContribution-submission {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  margin-right: 8px;
}

@media (max-width: 420px) {
  .ColumnFormContribution-title {
    float: none;
    display: block;
    text-align: left;
  }

  .ColumnFormContribution-content {
    margin-left: 0;
  }
}
.ColumnSetting-errorMessage {
  padding: 0 38px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #8590a6;
  text-align: center;
}

.ColumnSetting-hr {
  height: 1px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  margin: 48px 0;
  box-sizing: content-box;
}

.ColumnSetting-deleteButton {
  text-align: left;
  margin-left: 116px;
  width: 60px;
}

.ColumnSetting-deleteModalDescription {
  padding: 0 16px 15px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
}

.ColumnSetting-userAvatar {
  margin: 0 auto;
  position: relative;
  width: 160px;
  height: 160px;
}

.ColumnSetting-userAvatar .Mask-content {
    display: block;
  }

@media (max-width: 420px) {
  .ColumnSetting {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ColumnSetting-deleteModalDescription {
    margin-top: 20px;
  }
}
.Time {
  position: relative;
  cursor: pointer;
}

  .Time:hover {
    color: #333;
  }

  .Time:hover:before {
      content: '';
      position: absolute;
      left: 50%;
      width: 0;
      height: 0;
      margin: 0 0 0 -6px;
      font-size: 0;
      border-bottom: 6px solid rgba(0, 0, 0, 0.8);
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      transition: all 0.05s ease-in-out;
      opacity: 0;
      bottom: auto;
      top: 22px;
      visibility: visible;
      opacity: 1;
      z-index: 50;
    }

  .Time:hover:after {
      content: attr(data-title);
      white-space: normal;
      bottom: auto;
      top: 28px;
      padding: 10px 16px;
      color: #fff;
      line-height: 1.5;
      text-align: center;
      position: absolute;
      left: 50%;
      box-sizing: border-box;
      font-size: 13px;
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.8);
      border-radius: 4px;
      pointer-events: none;
      visibility: visible;
      opacity: 1;
      z-index: 50;
      line-height: 1.8;
      width: 290px;
      margin-left: -145px;
      transition: all 0.05s ease-in-out;
    }
.ColumnListItem-item {
  position: relative;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ColumnListItem-title {
  margin-right: 120px;
  font-size: 16px;
  padding: 0 0 8px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  max-height: 60px;
  color: #333;
  text-decoration: none;
  margin: 0;
  overflow: hidden;
}

.ColumnListItem-title a {
    cursor: pointer;
  }

.ColumnListItem-meta {
  color: gray;
  flex-direction: row;
  font-size: 14px;
}

.ColumnListItem-include,
.ColumnListItem-edit,
.ColumnListItem-remove,
.ColumnListItem-pin {
  cursor: pointer;
}

.ColumnListItem-include:hover, .ColumnListItem-edit:hover, .ColumnListItem-remove:hover, .ColumnListItem-pin:hover {
    color: #333;
  }
.ColumnPosts-title {
  line-height: 22px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  position: relative;
  margin: 0;
  font-size: 16px;
}
  html[data-ios] .ColumnPosts-title {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }
  html[data-android] .ColumnPosts-title {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }
  .ColumnPosts-title span {
    background: #fff;
    position: relative;
    z-index: 1;
    width: 90px;
  }
  .ColumnPosts-title:after {
    content: '';
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    top: 11px;
    background: #f0f0f0;
  }

.ColumnPosts-modalTitle {
  line-height: 20px;
  text-align: center;
  color: gray;
  font-size: 14px;
}

.ColumnPosts-infiniteList .Spinner {
    margin: 50px auto;
  }

@media (max-width: 420px) {
  .ColumnPosts {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ColumnPosts-modalTitle {
    margin-top: 20px;
  }
}
.ColumnContributes-container {
  margin-bottom: 80px;
  position: relative;
}

.ColumnContributes-items {
  margin-top: -48px;
}

.ColumnContributes-item {
  position: relative;
  padding: 20px 0;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ColumnContributes-title {
  width: 70%;
  font-size: 16px;
  padding: 0 0 8px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
  max-height: 60px;
  color: #333;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ColumnContributes-meta {
  display: block;
  color: gray;
  font-size: 14px;
}

.ColumnContributes-meta a:hover {
      color: #333;
    }

.ColumnContributes-functions {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 26px;
  display: block;
}

.ColumnContributes-button {
  padding: 7px 12px;
  line-height: 18px;
  cursor: pointer;
  min-width: 80px;
  min-height: 32px;
  text-align: center;
}

.ColumnContributes-button:hover {
    color: #333;
  }

.ColumnContributes-linkButton {
  color: #50c87e;
  font-size: 14px;
}

.ColumnContributes-linkButton:hover {
    color: #0ca547;
  }

.ColumnContributes-ignoreModalDescribe {
  padding: 0 16px 15px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
  text-align: center;
}

.ColumnContributes-emptyList {
  padding: 130px 0 48px;
  text-align: center;
}

.ColumnContributes-iconShow {
  font-size: 106px;
  color: #e5e5e5;
}

.ColumnContributes-emptyTitle {
  margin-top: 29px;
  color: gray;
}

@media (max-width: 420px) {
  .ColumnContributes-items {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ColumnContributes-ignoreModalDescribe {
    margin-top: 20px;
  }
}
.ColumnAuthorsList {
  line-height: 22px;
  position: relative;
  font-size: 16px;
}

  .ColumnAuthorsList:after {
    content: '';
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    top: 11px;
    background: #f0f0f0;
    margin-right: 60px;
  }

.ColumnAuthorsList-title {
  display: block;
  margin: 0 0 32px;
}

.ColumnAuthorsList-name {
  background: #fff;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
  position: relative;
  z-index: 1;
  padding-right: 16px;
}

html[data-ios] .ColumnAuthorsList-name {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ColumnAuthorsList-name {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ColumnAuthorsList-SearchMenu {
  width: 55px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  position: absolute;
  top: -6px;
  right: 0;
  background: #fff;
}

.ColumnAuthorsList-trigger {
  display: block;
  height: 100%;
  color: gray;
  font-size: 14px;
  cursor: pointer;
  text-align: right;
  z-index: 3;
}

.ColumnAuthorsList-items {
  list-style: none;
  height: 48px;
  margin-bottom: 40px;
  position: relative;
}

.ColumnAuthorsList-items .Avatar-hemingway {
    width: 48px;
    height: 48px;
  }

.ColumnAuthorsList-items a {
    float: left;
  }

.ColumnAuthorsList-intro {
  margin-left: 64px;
}

.ColumnAuthorsList-intro strong {
    font-size: 16px;
    /* 与设计一致，不支持设备将回退为 700 */
    font-weight: 600;
    /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
    font-synthesis: style;
    margin-bottom: 6px;
    display: inline-block;
    line-height: 22px;
  }

html[data-ios] .ColumnAuthorsList-intro strong {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .ColumnAuthorsList-intro strong {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

.ColumnAuthorsList-intro .ColumnAuthorsList-creator {
    width: 48px;
    height: 12px;
    font-size: 12px;
    border-radius: 4px;
    padding: 3px 6px;
    margin-left: 8px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #f6f6f6;
  }

.ColumnAuthorsList-bio {
  display: block;
  color: gray;
  font-size: 14px;
  padding-right: 10px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ColumnAuthorsList-functions {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  margin-top: 7px;
}

.ColumnAuthorsList-sendMessageButton {
  cursor: pointer;
}

.ColumnAuthorsList-cancelButton,
.ColumnAuthorsList-revamp {
  margin-right: -3px;
  margin-left: 46px;
  cursor: pointer;
}

.ColumnAuthorsList-modalIntro {
  padding: 0 16px 15px;
  line-height: 20px;
  color: gray;
  font-size: 14px;
  text-align: center;
}

.ColumnAuthorsList-modalIntro span {
    color: #333;
  }

.Modal-inner {
  min-height: auto;
}

.ColumnAuthorsList-empty {
  padding: 10px 0;
  font-size: 14px;
  color: gray;
  text-align: center;
}

.ColumnAuthorsList-input {
  width: 100%;
}

.ColumnAuthorsList-revamp {
  display: inline-block;
}

.ColumnAuthorsList-revamp .icon-ic_unfold {
    position: relative;
    top: 4px;
  }

.ColumnAuthorsList-revamp .Menu-list {
    width: 92px;
  }

.ColumnAuthorsList-revampItem {
  padding: 0 16px;
  text-align: center;
  border: 0;
  color: #333;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .ColumnAuthorsList {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ColumnAuthorsList-modal {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ColumnAuthorsList-modalIntro {
    margin-top: 20px;
  }
}
.ColumnAuthors-basicInfo {
  position: relative;
  margin-bottom: 73px;
}
.ImageView {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  overflow: hidden;
  transition: background-color 200ms ease-in-out;
}

  .ImageView.is-active {
    background-color: rgba(26, 26, 26, 0.65);
  }

  html[data-theme="dark"] .ImageView.is-active {
    background-color: rgba(0, 0, 0, 0.65);
}

.ImageView-inner {
  height: 100%;
  box-sizing: border-box;
}

.ImageView-img {
  cursor: zoom-out;
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
}

.ImageView-transformOrigin {
  -webkit-transform-origin: left top;
          transform-origin: left top;
  transition: 300ms ease-in-out;
  transition-property: -webkit-transform opacity;
  transition-property: transform opacity;
  transition-property: transform opacity, -webkit-transform opacity;
}
.Badge {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.Badge-wrapper {
  margin-left: 6px;
}
.AuthorIndex-warpper {
  flex-direction: row;
  position: relative;
  align-items: center;
  font-size: 14px;
  color: #808080;
}

  .AuthorIndex-warpper .AuthorIndex-name,
  .AuthorIndex-warpper time {
    color: #808080;
  }

  .AuthorIndex-warpper .AuthorIndex-name:hover, .AuthorIndex-warpper time:hover {
      color: #333;
    }

  .AuthorIndex-warpper .Badge {
    position: relative;
    top: -1px;
  }

.AuthorIndex-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AuthorIndex-avatar {
  margin-right: 12px;
}

.AuthorIndex-followButton {
  width: 88px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0;
}

@media (max-width: 660px) {
  .AuthorIndex-warpper {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.IconWeibo {
  color: #e16a70;
}
.IconWechat {
  color: #81d300;
}
.PostShare .MenuButton {
    font-size: 15px;
    font-weight: normal;
  }
  .PostShare .Menu-dropdown {
    top: 100%;
    width: 134px;
    left: 50%;
    margin-left: -66px;
  }
  .PostShare .Menu-item {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .PostShare .Menu-item:first-child {
      border-top: 0;
    }

.PostShare-qrCode {
  width: 99px;
  height: 99px;
}
.Annotation-mark {
  box-sizing: border-box;
  padding: 16px;
  margin-top: 16px;
  border-radius: 4px;
  position: relative;
  background-color: #F6F6F6;
}
  html[data-theme="dark"] .Annotation-mark {
  background-color: #2E2E2E;
}

.Annotation-header {
  display: flex;
  flex-direction: row;
}

.Annotation-alert {
  margin-right: 5px;
  width: 16px;
  height: 16px;
}

.Annotation-markTitle {
  color: #444444;
  font-size: 15px;
  /* 与设计一致，不支持设备将回退为 700 */
  font-weight: 600;
  /* 禁止粗体合成(待 webkit bug 修复后可以删除，https://trac.webkit.org/changeset/223589/webkit) */
  font-synthesis: style;
}

html[data-ios] .Annotation-markTitle {
    /* 与 iOS app 一致，使用 medium 字重 */
    font-weight: 500;
  }

html[data-android] .Annotation-markTitle {
    /* Android 中文字重 bug，需要 700 达到粗体效果 */
    font-weight: 700;
  }

html[data-theme="dark"] .Annotation-markTitle {
  color: #808080;
}

.Annotation-markSummary {
  margin-top: 4px;
  color: #444444;
  font-size: 14px;
  line-height: 20px;
  overflow: auto;
}

.Annotation-markSummary a {
    cursor: pointer;
    color: #175199;
    text-decoration: underline;
  }

html[data-theme="dark"] .Annotation-markSummary a {
    color: #175199;
}

html[data-theme="dark"] .Annotation-markSummary {
  color: #808080;
}
.Video {
  margin: 12px 0;
}

  .Video .VideoCard-layout {
    display: flex;
    flex-direction: row;
  }

.appview--dark .Video .VideoCard {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
  }

.appview--dark .Video .VideoCard .VideoCard-poster {
      -webkit-filter: brightness(0.9);
              filter: brightness(0.9);
    }

.appview--dark .Video .VideoCard .VideoCard-title {
      color: inherit;
    }

.appview--dark .Video .VideoCard .VideoCard-source {
      color: inherit;
      opacity: 0.7;
    }

.appview--dark .Video .VideoCard .VideoCard-badge {
      color: inherit;
      opacity: 0.7;
      background-color: rgba(255, 255, 255, 0.2);
    }
.GifPlayer {
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  max-width: 100%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 防止当它宽度小于最大布局可用宽度时，夜间模式的遮罩突出*/
  cursor: pointer;
  text-align: center;
}
  html[data-theme='dark'] .GifPlayer {
      position: relative;
    }
  html[data-theme='dark'] .GifPlayer::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: inherit;
      pointer-events: none;
    }
  .GifPlayer[data-size='small'] {
    max-width: 40%;
  }

.GifPlayer img {
  max-width: 100%;
  vertical-align: top;
}

.GifPlayer-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -30px;
  pointer-events: none;
  transition: 0.3s ease-out;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-origin: center;
          transform-origin: center;
  opacity: 1;
}

.GifPlayer.isPlaying .GifPlayer-icon {
    -webkit-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
  }
.RichText-imagePlaceholder {
  margin: 1em auto;
  padding: 40px 0;
  text-align: center;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.05);
}

.appview--dark .RichText-imagePlaceholder {
  color: rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.1);
}

.RichText a {
    word-break: break-all;
  }

.RichText .Formula {
    display: inline-block;
  }

.RichText .Formula .Formula-image {
      display: inline;
    }

.appview .RichText figure {
    margin-left: -16px;
    margin-right: -16px;
  }

.appview .RichText .video-box[data-lens-id]:not([data-lens-id='']) {
    border: solid 1px #e7eaf1;
    box-shadow: none;
    padding-top: calc(100% * 9 / 16);
  }

.appview .RichText .video-box[data-lens-id]:not([data-lens-id='']):before {
      content: '';
      border: solid 3px #fff;
      z-index: 2;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 50px;
      height: 60px;
      position: absolute;
      width: 60px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

.appview .RichText .video-box[data-lens-id]:not([data-lens-id='']):after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 11.5px 0 11.5px 18px;
      border-color: transparent transparent transparent #fff;
      position: absolute;
      z-index: 3;
      border-radius: 2px;
      opacity: 0.9;
      left: 2%;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

.appview .RichText .video-box[data-lens-id]:not([data-lens-id='']) .thumbnail {
      position: absolute;
      -o-object-fit: cover;
         object-fit: cover;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }

.appview .RichText .video-box[data-lens-id]:not([data-lens-id='']) .content {
      display: none;
    }

.appview .RichText a.member_mention:hover {
    text-decoration: none;
  }

.appview--dark .RichText img[eeimg] {
    -webkit-filter: invert();
            filter: invert();
  }

.appview--unifiedStyle .RichText a:not(.video-box):not(.link-box):not(.member_mention) {
    color: #0084ff;
  }

.appview--unifiedStyle .RichText pre {
    background-color: #f6f6f6;
  }

.appview--unifiedStyle.appview--dark .RichText a:not(.video-box):not(.link-box):not(.member_mention) {
    color: #3a76d0;
  }

.appview--unifiedStyle.appview--dark .RichText pre {
    background-color: #000000;
  }
.PinManage .Menu-dropdown {
    top: 100%;
    width: 88px;
    left: 50%;
    margin-left: -44px;
  }

    .PinManage .Menu-dropdown .Button {
      text-align: center;
      padding: 0;
    }

    .PinManage .Menu-dropdown .Menu-item + .Menu-item {
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

.PinManage-deleteButton {
  margin-top: 6px;
}
.CommentContainer {
  padding-bottom: 48px;
}

  .CommentContainer .CommentContainer-mainEditor .CommentEditor-actions {
      display: none;
    }

  .CommentContainer .CommentContainer-mainEditor.CommentEditor--opened .CommentEditor-actions {
        display: flex;
      }

.CommentContainer-blockTitle {
  position: relative;
  z-index: 3;
}

.CommentContainerDisabled {
  padding: 13px 0;
  background: #f7f8f9;
  color: #808080;
  text-align: center;
  border-radius: 4px;
  font-size: 15px;
}

.CommentContainer .CommentEditor + .CommentContainerDisabled {
  margin-top: 24px;
}

.CommentContainer-list {
  margin-top: 32px;
}

.CommentContainer-list .CommentItem:first-child {
    margin-top: 0;
  }

.CommentContainer-listLoading {
  position: relative;
}

.CommentContainer-listLoading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
  }

.CommentContainer-spinner {
  margin: 30px;
}

.CommentContainer-listSpinner {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
}

.CommentContainer-split {
  font-size: 14px;
  margin: 32px auto 0;
  width: 500px;
  text-align: center;
}

.CommentContainer-split .BlockTitle-title {
    padding: 0 16px;
    font-weight: 400;
    color: #808080;
  }

.CommentContainer-pagination {
  margin-top: 16px;
}

.ConversationDialog .Spinner {
    margin: 120px auto;
  }

.ConversationDialog-list {
  max-height: calc(60vh - 80px);
  overflow: auto;
  padding-bottom: 40px;
}

.ConversationDialog-list .CommentItem {
    padding-right: 16px;
  }

.ConversationDialog-list .CommentItem .CommentItem-like {
      right: 16px;
    }

.ConversationDialog-list .CommentItem:first-child {
    margin-top: 0;
  }

@media (max-width: 660px) {

.ConversationDialog-list {
    padding: 16px;
    max-height: none;
    max-height: initial
}
  }

.ConversationDialog-editor {
  padding: 16px;
  margin: 24px -16px -16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 660px) {
  .CommentContainer-mainEditor,
  .CommentContainer-list {
    padding-left: 16px;
    padding-right: 16px;
  }

  .CommentContainer-split {
    width: 100%;
  }
}
.ImageGallery {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  overflow: hidden;
  transition: background-color 200ms ease-in-out;
}

  .ImageGallery.is-active {
    background-color: rgba(26, 26, 26, 0.65);
  }

  html[data-theme="dark"] .ImageGallery.is-active {
    background-color: rgba(0, 0, 0, 0.65);
}

  .ImageGallery .ImageGallery-Content {
    position: absolute;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

  .ImageGallery .ImageGallery-Content .ImageGallery-arrow-left,
    .ImageGallery .ImageGallery-Content .ImageGallery-arrow-right {
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }

.ImageGallery-arrow-left,
.ImageGallery-arrow-right,
.ImageGallery-close {
  position: absolute;
  cursor: pointer;
  width: 72px;
  height: 72px;
}

.ImageGallery-arrow-left::before, .ImageGallery-arrow-right::before, .ImageGallery-close::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
  }

.ImageGallery-arrow-left:hover::before, .ImageGallery-arrow-right:hover::before, .ImageGallery-close:hover::before {
      background: #FFFFFF;
      opacity: 0.1;
    }

html[data-theme="dark"] .ImageGallery-arrow-left:hover::before, html[data-theme="dark"] .ImageGallery-arrow-right:hover::before, html[data-theme="dark"] .ImageGallery-close:hover::before {
      background: #1A1A1A;
}

.ImageGallery-arrow-left:active::before, .ImageGallery-arrow-right:active::before, .ImageGallery-close:active::before {
      background: #FFFFFF;
      opacity: 0.3;
    }

html[data-theme="dark"] .ImageGallery-arrow-left:active::before, html[data-theme="dark"] .ImageGallery-arrow-right:active::before, html[data-theme="dark"] .ImageGallery-close:active::before {
      background: #1A1A1A;
}

.ImageGallery-arrow-left svg, .ImageGallery-arrow-right svg, .ImageGallery-close svg {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }

.ImageGallery-arrow-disabled {
  opacity: 0.3;
  cursor: default;
}

.ImageGallery-arrow-disabled:hover::before, .ImageGallery-arrow-disabled:active::before {
      background: transparent;
    }

.ImageGallery-Inner {
  height: 100%;
  box-sizing: border-box;
  display: block;
}

.ImageGallery-CursorZoomIn {
  cursor: -webkit-zoom-in;
}

.ImageGallery-transition {
  transition: all 300ms ease-in-out;
}

.ImageGallery-fixed {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.ImageGallery-close {
  position: absolute;
  top: 24px;
  right: 14px;
}
.Image-Wrapper-Preview {
  flex-direction: row;
  margin-right: -2px;
  display: block;
}

  .Image-Wrapper-Preview::after {
    display: block;
    clear: both;
    content: '';
    visibility: hidden;
    height: 0;
  }

  .Image-Wrapper-Preview .Thumbnail-Wrapper {
    float: left;
    box-sizing: border-box;
    position: relative;
    height: 1px;
    margin-bottom: 2px;
    cursor: zoom-in;
  }

  .Image-Wrapper-Preview .Thumbnail-Wrapper span {
      margin-right: 2px;
      position: relative;
      display: block;
      overflow: hidden;
      height: 100%;
    }

  .Image-Wrapper-Preview .Thumbnail-Wrapper span img {
        position: absolute;
      }

  .Image-Wrapper-Preview .Thumbnail-Wrapper .Image-PreviewVague .VagueImage {
        position: static;
      }

  .Image-Wrapper-Preview .Thumbnail-Wrapper .Image-PreviewVague > img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
      }

  .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Surplus-Sign {
      position: absolute;
      left: 0;
      top: 0;
      right: 2px;
      bottom: 0;
      font-size: 32px;
      color: #FFFFFF;
      font-style: normal;
      z-index: 1;
      font-weight: 500;
      letter-spacing: 4px;
      justify-content: center;
      align-items: center;
      display: flex;
    }

  .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Surplus-Sign::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #1A1A1A;
        opacity: 0.3;
        z-index: -1;
      }

  html[data-theme="dark"] .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Surplus-Sign::before {
        background: #999999;
}

  html[data-theme="dark"] .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Surplus-Sign {
      color: #1A1A1A;
}

  .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Gif-Sign {
      position: absolute;
      background: rgba(255, 255, 255, 0.55);
      border-radius: 4px;
      border: 1px solid rgba(26, 26, 26, 0.15);
      color: rgba(26, 26, 26, 0.35);
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      cursor: pointer;
      width: 28px;
      height: 16px;
      right: 6px;
      bottom: 6px;
      font-weight: 500;
      font-style: normal;
      text-align: center;
      line-height: 18px;
      font-size: 12px;
    }

  html[data-theme="dark"] .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Gif-Sign {
      background: rgba(26, 26, 26, 0.55);
}

  html[data-theme="dark"] .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Gif-Sign {
      border: 1px solid rgba(153, 153, 153, 0.15);
}

  html[data-theme="dark"] .Image-Wrapper-Preview .Thumbnail-Wrapper .Thumbnail-Gif-Sign {
      color: rgba(153, 153, 153, 0.35);
}
.RePin-content {
  border: 1px solid #e7eaf2;
  box-shadow: 0 1px 3px 0 rgba(0, 33, 77, 0.05);
  background: #fff;
  margin-top: 12px;
  border-radius: 4px;
  padding: 16px;
  font-size: 15px;
  line-height: 25px;
}

  .RePin-content .Repin-author-name {
    color: #333;
    font-size: 15px;
    margin-right: 5px;
  }

  .RePin-content .Repin-text {
    flex-direction: row;
  }

  .RePin-content blockquote {
    padding-left: 1.2em;
    border-left: 4px solid #e2e3e4;
    color: #333;
    margin: 8px 0;
    margin-top: 8px;
  }

  .RePin-content .Repin-link {
    font-size: 14px;
    color: #9197a3;
    line-height: 16px;
    margin-top: 8px;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .RePin-content .Video {
    margin-bottom: 0;
    margin-top: 8px;
  }

  .RePin-content .Image-Wrapper-Preview {
    margin-top: 8px;
  }

  .RePin-content .Image-preview-1 .Thumbnail-Wrapper, .RePin-content .Image-preview-2 .Thumbnail-Wrapper, .RePin-content .Image-preview-4 .Thumbnail-Wrapper {
      width: 50%;
    }

  .RePin-content .Image-preview-3 .Thumbnail-Wrapper, .RePin-content .Image-preview-6 .Thumbnail-Wrapper, .RePin-content .Image-preview-9 .Thumbnail-Wrapper {
      width: 33.33%;
    }

  .RePin-content .Image-preview-5 .Thumbnail-Wrapper {
      width: 33.33%;
    }

  .RePin-content .Image-preview-5 .Thumbnail-Wrapper:nth-child(1),
      .RePin-content .Image-preview-5 .Thumbnail-Wrapper:nth-child(2) {
        width: 50%;
      }

  .RePin-content .Image-preview-7 .Thumbnail-Wrapper {
      width: 25%;
    }

  .RePin-content .Image-preview-7 .Thumbnail-Wrapper:nth-child(1),
      .RePin-content .Image-preview-7 .Thumbnail-Wrapper:nth-child(2),
      .RePin-content .Image-preview-7 .Thumbnail-Wrapper:nth-child(3) {
        width: 33.33%;
      }

  .RePin-content .Image-preview-8 .Thumbnail-Wrapper {
      width: 25%;
    }
.PinIndex-content {
  margin-top: 30px;
  line-height: 1.7;
}

  .PinIndex-content > div {
    /* .RichText 下一级的 div 是「想法中的文字」，会被全局 column flex 感染 */
    /* 这是为了取消 div 的 column flex 效果 */
    display: block;
  }

.PinIndex-footer {
  flex-wrap: wrap;
  flex-direction: row;
  color: rgba(0, 0, 0, 0.54);
}

.PinIndex-reaction {
  margin: 40px 0;
  flex: 0 0 50%;
  align-items: flex-start;
}

.PinIndex-reactionButton {
  line-height: 22px;
  padding: 4px 16px;
}

.PinIndex-reactionButton .PinIndex-reactionIcon {
    margin-right: 6px;
  }

.PinIndex-control {
  margin: 40px 0;
  flex: 0 0 50%;
  justify-content: flex-end;
  flex-direction: row;
  align-items: flex-start;
}

.PinIndex-control > div {
    margin-left: 15px;
  }

.PinIndex-isReviewing {
  width: 100%;
  font-size: 14px;
  line-height: 26px;
  padding: 12px 16px;
  background: #e7eaf1;
  border-radius: 4px;
  margin-top: 10px;
}

@media (max-width: 660px) {
  .PinIndex-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.BookReviewManage .Menu-dropdown {
    top: 100%;
    width: 88px;
    left: 50%;
    margin-left: -44px;
  }

    .BookReviewManage .Menu-dropdown .Button {
      text-align: center;
      padding: 0;
    }

    .BookReviewManage .Menu-dropdown .Menu-item + .Menu-item {
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

.BookReviewManage-deleteButton {
  margin-top: 6px;
}
.BookReviewIndex-content {
  margin-top: 30px;
  line-height: 1.7;
}

.BookReviewIndex-footer {
  flex-wrap: wrap;
  flex-direction: row;
  color: rgba(0, 0, 0, 0.54);
}

.BookReviewIndex-vote {
  margin: 40px 0;
  flex: 0 0 50%;
  align-items: flex-start;
}

.BookReviewIndex-voteButton {
  flex: 1 1;
  justify-content: center;
  min-height: 36px;
}

.BookReviewIndex-voteButton .icon {
    margin-right: 4px;
  }

.BookReviewIndex-voteButton[disabled] {
    border-color: transparent;
    opacity: 1;
    padding: 0;
    color: #50c87e;
  }

.BookReviewIndex-voteButton[disabled]:hover {
      background: transparent;
    }

.BookReviewIndex-voteButton[disabled]:active {
      background: transparent;
      color: #50c87e;
    }

.BookReviewIndex-control {
  margin: 40px 0;
  flex: 0 0 50%;
  justify-content: flex-end;
  flex-direction: row;
  align-items: flex-start;
}

.BookReviewIndex-control > * + * {
    margin-left: 15px;
  }

@media (max-width: 660px) {
  .BookReviewIndex-content,
  .BookReviewIndex-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .BookReviewIndex-vote {
    order: 4;
    margin-top: 0;
  }

  .BookReviewIndex-control {
    flex: 0 0 100%;
    justify-content: flex-start;
    margin-bottom: 20px;
    order: 3;
  }

    .BookReviewIndex-control .PostShare .Menu-dropdown {
      margin-left: 0;
      left: 0;
    }
}

.appview .BookReviewIndex-footer {
    padding-bottom: 30px;
    margin-bottom: 5px;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.5;
  }
.Tooltip {
  position: absolute;
  width: 0;
  height: 0;
}

.Tooltip-enter,
.Tooltip-leave {
  transition: opacity 300ms;
}

.Tooltip-enter {
  opacity: 0;
}

.Tooltip-enter-active {
  opacity: 1;
}

.Tooltip-leave {
  opacity: 1;
}

.Tooltip-leave-active {
  opacity: 0;
}

.TooltipContent-wrapper {
  position: relative;
  width: 0;
  height: 0;
}

.TooltipContent {
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px 8px;
  color: #FFFFFF;
  white-space: nowrap;
  background-color: rgba(26, 26, 26, 0.8);
  border-radius: 4px;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.TooltipContent.TooltipContent--white {
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    color: #646464;
    box-shadow: 0 5px 20px rgba(26, 26, 26, 0.1);
  }

html[data-theme='dark'] .TooltipContent.TooltipContent--white {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

.TooltipContent.TooltipContent--white .TooltipContent-arrow::after {
      background: #FFFFFF;
      border: 1px solid #EBEBEB;
    }

html[data-theme="dark"] .TooltipContent.TooltipContent--white .TooltipContent-arrow::after {
      background: #1A1A1A;
}

html[data-theme="dark"] .TooltipContent.TooltipContent--white .TooltipContent-arrow::after {
      border: 1px solid #2E2E2E;
}

html[data-theme="dark"] .TooltipContent.TooltipContent--white {
    background: #1A1A1A;
}

html[data-theme="dark"] .TooltipContent.TooltipContent--white {
    border: 1px solid #2E2E2E;
}

html[data-theme="dark"] .TooltipContent.TooltipContent--white {
    color: #999999;
}

html[data-theme="dark"] .TooltipContent {
  color: #1A1A1A;
}

html[data-theme="dark"] .TooltipContent {
  background-color: rgba(153, 153, 153, 0.8);
}

.TooltipContent--top {
  -webkit-transform: translate(-50%, -100%) translateY(-8px);
          transform: translate(-50%, -100%) translateY(-8px);
}

.TooltipContent--bottom {
  -webkit-transform: translate(-50%, 0) translateY(8px);
          transform: translate(-50%, 0) translateY(8px);
}

.TooltipContent--left {
  -webkit-transform: translate(-100%, -50%) translateX(-8px);
          transform: translate(-100%, -50%) translateX(-8px);
}

.TooltipContent--right {
  -webkit-transform: translate(0, -50%) translateX(8px);
          transform: translate(0, -50%) translateX(8px);
}

.TooltipContent-arrow {
  overflow: hidden;
  position: absolute;
}

.TooltipContent-arrow::after {
    background: rgba(26, 26, 26, 0.8);
    box-sizing: border-box;
    content: '';
    height: 32px;
    pointer-events: auto;
    position: absolute;
    width: 32px;
  }

.TooltipContent--top .TooltipContent-arrow::after {
      -webkit-transform: translate(-8px, -32px) rotate(45deg);
              transform: translate(-8px, -32px) rotate(45deg);
    }

.TooltipContent--bottom .TooltipContent-arrow::after {
      -webkit-transform: translate(-8px, 8px) rotate(45deg);
              transform: translate(-8px, 8px) rotate(45deg);
    }

.TooltipContent--left .TooltipContent-arrow::after {
      -webkit-transform: translate(-32px, -8px) rotate(45deg);
              transform: translate(-32px, -8px) rotate(45deg);
    }

.TooltipContent--right .TooltipContent-arrow::after {
      -webkit-transform: translate(8px, -8px) rotate(45deg);
              transform: translate(8px, -8px) rotate(45deg);
    }

html[data-theme="dark"] .TooltipContent-arrow::after {
    background: rgba(153, 153, 153, 0.8);
}

.TooltipContent--top .TooltipContent-arrow {
    height: 8px;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 100%);
            transform: translate(-50%, 100%);
    width: 16px;
  }

.TooltipContent--bottom .TooltipContent-arrow {
    height: 8px;
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
    width: 16px;
  }

.TooltipContent--left .TooltipContent-arrow {
    height: 16px;
    right: 0;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
            transform: translate(100%, -50%);
    width: 8px;
  }

.TooltipContent--right .TooltipContent-arrow {
    height: 16px;
    left: 0;
    top: 50%;
    -webkit-transform: translate(-100%, -50%);
            transform: translate(-100%, -50%);
    width: 8px;
  }

.TooltipContent a {
  color: inherit;
  text-decoration: underline;
}
.GlobalTooltip {
  position: fixed;
  z-index: 9999;
}
.LoginModal-loginButon {
  margin: 0 70px;
  height: 38px;
  line-height: 36px;
}

.LoginModal-registerButton {
  margin: 24px 0;
}

.LoginModal-registerButton .icon {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    display: inline-block;
  }

/*# sourceMappingURL=app.8753c51e3825d1f2e8fd4f44abf6f5a3.css.map*/