@font-face{
  font-family:"user";
  font-weight:400;
  font-style:normal;
  font-display:swap;
  src:url("./fonts/ziti.woff2") format("woff2");
}
:root{
  --main-color:52 73 94;
  --main:rgb(var(--main-color));
  --C:rgb(var(--main-color) / 70%);
  --B:rgb(var(--main-color) / 40%);
  --A:rgb(var(--main-color) / 20%);
  --O:rgb(var(--main-color) / 5%);
  --theme:#4285f4;
  --theme-10:rgba(66,133,244,.10);
  --theme-30:rgba(66,133,244,.30);
  --theme-60:rgba(66,133,244,.60);
  --theme-80:rgba(66,133,244,.80);
  --under-background:#f7f7f7e6;
  --background:#fff;
  --box-shadow:0 7px 15px 0 #a48fff30;
  --radius:1rem;
  --margin:2rem;
}
html.darkmode,
body.dark{
  --main-color:225 232 242;
  --under-background:#171c28e6;
  --background:#222734;
  --box-shadow:0 7px 15px 0 #00000045;
}
html.darkmode{
  filter:brightness(.8);
  -webkit-filter:brightness(.8);
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  scrollbar-width:thin;
  letter-spacing:.1rem;
}
html,body{scroll-behavior:smooth}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--main);
  background:var(--under-background);
  font-family:"user",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.app-loading .site-shell{
  opacity:1;
  visibility:visible;
}
body.app-loading::before{
  display:none;
}
@keyframes loadingSpin{to{transform:rotate(360deg)}}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
  background-color:var(--theme-60);
}
a{color:var(--main);text-decoration:none;transition:.2s}
a:hover{color:var(--theme)}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
img{transition:.5s}
.hidden{display:none!important}
.site-shell{
  position:relative;
  width:calc(100vw - 2 * var(--margin));
  max-width:75.25rem;
  min-height:calc(100vh - 2 * var(--margin));
  margin:var(--margin) auto;
  padding:0;
}
.cat-block{
  width:100%;
  margin-bottom:var(--margin);
  padding:var(--margin);
  color:var(--main);
  background:var(--background);
  border-radius:var(--radius);
  box-shadow:none;
  transition:.2s;
}
.cat-top{
  z-index:9;
  height:14.8125rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:var(--margin);
  text-align:center;
}
.cat-top.compact{height:14.8125rem}
.cat-profile{display:block;position:relative}
.site-avatar{
  width:7.4375rem;
  height:7.4375rem;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  padding:0;
  color:#fff;
  background:transparent;
  box-shadow:none;
  font-size:2rem;
  font-weight:800;
  margin-bottom:1.75rem;
}
.site-avatar img{
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  object-fit:cover;
}
.cat-top h1{
  margin:0 0 .4375rem;
  color:var(--main);
  font-size:28px;
  font-weight:400;
  line-height:1.25;
  transition:.5s;
}
.cat-top p{
  position:relative;
  width:500px;
  max-width:70vw;
  padding-top:.5rem;
  color:var(--main);
  opacity:.7;
  font-size:12.6px;
  line-height:21px;
  text-align:center;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.cat-top p::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:1px;
  opacity:.5;
  background:linear-gradient(90deg,var(--background) 0%,var(--main) 35%,var(--main) 65%,var(--background) 100%);
}
.cat-menu{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  gap:1rem;
}
.cat-menu.cat-block{margin-bottom:1.75rem;padding:1.25rem 2rem}
.menu-links{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
}
.menu-links>a,
.menu-group>button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.5rem;
  padding:calc(var(--margin) / 2);
  color:var(--main);
  font-size:16.8px;
  line-height:1;
  text-align:left;
  transition:.5s;
  white-space:nowrap;
}
.menu-links>a.active{font-weight:700}
.menu-links>a::after,
.menu-group::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:.25rem;
  height:.25rem;
  margin:0 auto;
  border-radius:50%;
  background:var(--theme);
  opacity:0;
  transition:.5s;
}
.menu-links>a:hover::after,
.menu-group:hover::after{opacity:1}
.menu-group{position:relative;display:flex;justify-content:center}
.menu-group::after{
  content:"ˇ";
  width:auto;
  height:auto;
  bottom:.2rem;
  color:var(--B);
  background:unset;
  font-family:serif;
  font-size:1.5rem;
  opacity:1;
}
.dropdown{
  position:absolute;
  top:0;
  left:50%;
  z-index:20;
  min-width:10rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:calc(var(--margin) / 2);
  border-radius:var(--radius);
  background:var(--background);
  box-shadow:var(--box-shadow);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,2.5rem);
  transition:.2s;
}
.menu-group:hover .dropdown,
.dropdown.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,3rem);
}
.dropdown button{
  width:100%;
  margin:.2rem 0;
  padding:.5rem;
  border-radius:.5rem;
  font-size:1rem;
  text-align:center;
}
.dropdown button:hover,
.dropdown button.active{color:#fff;background:var(--theme-80)}
.menu-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--margin);
  font-size:17.5px;
}
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1.5rem;
  height:1.5rem;
  color:var(--main);
  line-height:1;
}
.icon-symbol{
  display:block;
  font-family:Arial,"Microsoft YaHei",sans-serif;
  font-size:1.2rem;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
}
.count-icon{
  font-family:Arial,"Microsoft YaHei",sans-serif;
  font-size:.85em;
  line-height:1;
  letter-spacing:0;
}
.mobile-menu-btn{display:none}
.back-top-btn{display:none}
.menu-off{display:none}
.cat-popup{
  display:none;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:var(--margin);
}
.cat-popup.show{display:grid}
.popup-search label,
.popup-section h2{
  display:block;
  margin-bottom:.75rem;
  color:var(--B);
  font-size:.9rem;
}
.popup-search input{
  width:100%;
  height:auto;
  padding:.5rem;
  border:0;
  border-radius:.5rem;
  color:var(--main);
  background:var(--O);
  line-height:1.5rem;
}
.tag-cloud{display:flex;flex-wrap:wrap;gap:1rem}
.tag-cloud button{
  display:inline-block;
  padding:.4rem .6rem;
  border-radius:.5rem;
  color:var(--main);
  background:var(--O);
  font-size:.9rem;
}
.tag-cloud span,.muted{color:var(--B);font-size:x-small}
.stat-grid{display:flex;gap:var(--margin);padding:var(--margin)}
.stat-grid div{text-align:center}
.stat-grid strong{display:block;font-size:1.2rem}
.stat-grid span{display:block;color:var(--B);font-size:.85rem}
.cat-main{display:block}
.post-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--margin);
}
.post-card{
  position:relative;
  display:block;
  min-width:0;
  z-index:1;
  margin:0 0 var(--margin);
  animation:fadeInUp .5s .2s ease both;
}
.post-card::before,
.post-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  bottom:-.5rem;
  left:5%;
  width:90%;
  height:.4rem;
  opacity:.1;
  border-radius:0 0 .5rem .5rem;
  background:var(--main);
}
.post-card::after{
  bottom:-1rem;
  left:10%;
  width:80%;
}
.post-cover{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--O);
  box-shadow:var(--box-shadow);
}
.post-cover img{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:var(--box-shadow);
}
.post-card:hover .post-cover img{
  transform:scale(1.1);
  filter:blur(0) brightness(.78);
}
.cover-empty{
  min-height:22rem;
  display:grid;
  place-items:center;
  color:var(--B);
}
.post-label{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:.25rem;
  margin:.5rem;
  padding:3.5px 7px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  border-radius:7px;
  box-shadow:0 8px 24px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.20);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  font-size:10.5px;
  line-height:1.2;
  text-align:center;
  transition:.5s;
  cursor:default;
}
.post-label.one{inset:0 auto auto 0}
.post-label.one.is-new{background:rgba(66,133,244,.80)}
.post-label.two{inset:0 0 auto auto}
.post-label.two i{font-size:1rem;line-height:1}
.post-label.three{
  inset:auto 0 0 auto;
  max-width:calc(100% - 1rem);
  font-size:14px;
  font-weight:400;
}
.more-btn,.soft-btn,.buy-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  margin:var(--margin) auto 0;
  padding:.5rem 1.25rem;
  border-radius:999px;
  color:#fff;
  background:var(--main);
  font-weight:700;
}
.more-btn[hidden]{display:none}
.site-footer{
  color:var(--B);
  text-align:center;
  font-size:12.6px;
  line-height:24.5px;
}
.about-page,.article-wrap{display:block}
.article-card{
  position:relative;
  padding:28px 28px 28px 42px;
  margin-bottom:var(--margin);
  border-radius:var(--radius);
  background:var(--background);
  text-align:left;
}
.article-head .crumb{
  display:inline-flex;
  padding:.5rem;
  border-radius:.5rem;
  color:var(--B);
  background:var(--O);
  font-size:.9rem;
}
.article-head h1{
  padding:0;
  font-size:21px;
  font-weight:700;
  line-height:56px;
}
.article-head p,.article-card p{color:var(--B);line-height:1.75rem}
.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0;
  color:var(--A);
  font-size:12.6px;
  line-height:24.5px;
}
.article-tags span{
  padding:0;
  border-radius:0;
  color:var(--A);
  background:transparent;
  font-size:12.6px;
}
.buy-link{display:inline-flex;margin:1rem 0 0;background:var(--theme-80)}
.back-link{
  display:none;
  margin:0 0 var(--margin);
  color:var(--main);
  font-weight:700;
}
.detail-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--margin);
  margin:var(--margin) 0;
}
.detail-photo{
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:var(--radius);
  background:var(--O);
}
.detail-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  cursor:zoom-in;
}
.detail-photo:hover img{filter:blur(0) brightness(.75)}
.empty-state{padding:var(--margin);color:var(--B);text-align:center}
.fancybox__caption{display:none!important}
.fancybox__thumbs{scrollbar-width:none;-ms-overflow-style:none}
.fancybox__thumbs ::-webkit-scrollbar{display:none}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){
  .post-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .detail-list{grid-template-columns:repeat(3,1fr)}
  .cat-popup{grid-template-columns:1fr}
}
@media(max-width:800px){
  .post-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  :root{--radius:7px;--margin:14px}
  body{padding-bottom:84px}
  .site-shell{
    width:auto;
    margin:calc(2 * var(--margin)) var(--margin) calc(6 * var(--margin));
    max-width:none;
    padding:0;
  }
  .cat-top{height:245px}
  .cat-top.compact{height:245px}
  .site-avatar{width:7rem;height:7rem}
  .cat-top h1{font-size:28px}
  .cat-top p{width:500px;max-width:78vw;font-size:12.6px;line-height:21px}
  .cat-menu{position:static;padding:0;background:transparent}
  .cat-menu.cat-block{height:0;margin-bottom:var(--margin);padding:0;background:var(--background)}
  .menu-links{
    position:fixed;
    z-index:120;
    inset:0 auto 0 0;
    width:78vw;
    max-width:20rem;
    padding:var(--margin);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--background);
    box-shadow:var(--box-shadow);
    transform:translateX(-110%);
    transition:.5s;
  }
  .menu-links.show{transform:translateX(0)}
  .menu-links>a,.menu-group>button{
    justify-content:flex-start;
    width:100%;
    padding:1rem 0;
    border-top:1px dashed var(--A);
    font-size:16.8px;
  }
  .menu-links>a:first-child{border-top:0}
  .menu-links>a::after,.menu-group::after{display:none}
  .menu-group{width:100%;display:block}
  .dropdown{
    position:relative;
    left:auto;
    top:auto;
    min-width:0;
    width:100%;
    padding:.5rem 0 .5rem 1rem;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none!important;
    align-items:flex-start;
  }
  .dropdown button{
    width:auto;
    margin:.35rem;
    padding:.45rem .65rem;
    box-shadow:var(--box-shadow);
  }
  .menu-actions{
    position:fixed;
    z-index:90;
    left:50%;
    bottom:var(--margin);
    transform:translateX(-50%);
    gap:var(--margin);
    padding:10.5px;
    border-radius:35px;
    background:var(--background);
    box-shadow:var(--box-shadow);
  }
  .mobile-menu-btn,.back-top-btn{display:flex}
  .icon-btn{
    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--background);
    box-shadow:var(--box-shadow);
  }
  .icon-btn:active{box-shadow:inset var(--box-shadow)}
  .icon-symbol{font-size:1.2rem}
  .menu-off{
    position:fixed;
    z-index:110;
    inset:0;
    display:block;
    background:var(--A);
  }
  .cat-popup{
    position:fixed;
    z-index:100;
    left:var(--margin);
    right:var(--margin);
    bottom:5.6rem;
    max-height:62vh;
    overflow:auto;
  }
  .post-label.three{
    margin:0;
    font-size:14px;
    font-weight:400;
  }
  .detail-list{grid-template-columns:repeat(2,1fr)}
  .article-card{padding:28px}
}