@charset "UTF-8";:root {
  --xxn-white: #fff;
  --xxn-white-op: rgba(255, 255, 255, 0.2);
  --xxn-black: #000;
  --xxn-black-op: rgba(0, 0, 0, 0.2);
  --xxn-none: #00000000;
  --xxn-gray: #999999;
  --xxn-gray-op: #9999992b;
  --xxn-vip: #e5a80d;
  --xxn-main: var(--xxn-theme);
  --xxn-main-op: var(--xxn-theme-op);
  --xxn-main-op-deep: var(--xxn-theme-op-deep);
  --xxn-main-op-light: var(--xxn-theme-op-light);
  --xxn-main-none: var(--xxn-theme-none);
  --xxn-shadow-theme: 0 8px 12px -3px var(--xxn-theme-op);
  --xxn-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, .15);
  --xxn-shadow-main: 0 8px 12px -3px var(--xxn-main-op);
  --xxn-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
  --xxn-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, .20);
  --xxn-shadow-black: 0 0 12px 4px rgba(0, 0, 0, .05);
  --xxn-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, .12);
  --xxn-shadow-red: 0 8px 12px -3px #ee7d7936;
  --xxn-shadow-green: 0 8px 12px -3px #87ee7936;
  --xxn-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);
  --xxn-snackbar-time: 5s;
  --style-border-hover-always: 1px solid var(--xxn-blue)
  --style-border
}

[data-theme=light] {
  --xxn-theme: #425AEF;
  --xxn-theme-op: #4259ef23;
  --xxn-theme-op-deep: #4259efdd;
  --xxn-theme-op-light: #4259ef0d;
  --xxn-theme-none: #4259ef01;
  --xxn-blue: #425AEF;
  --xxn-red: #f04a63;
  --xxn-pink: #FF7C7C;
  --xxn-green: #57bd6a;
  --xxn-yellow: #c28b00;
  --xxn-yellow-op: #d99c001a;
  --xxn-orange: #e38100;
  --xxn-shadow-orange: 0 8px 12px -3px rgba(227, 129, 0, .2);
  --xxn-purple: #7a60d2;
  --xxn-fontcolor: #363636;
  --xxn-background: #f7f9fe;
  --xxn-reverse: #000;
  --xxn-maskbg: rgba(255, 255, 255, 0.6);
  --xxn-maskbgdeep: rgba(255, 255, 255, 0.85);
  --xxn-hovertext: var(--xxn-main);
  --xxn-ahoverbg: #F7F7FA;
  --xxn-lighttext: var(--xxn-main);
  --xxn-secondtext: rgba(60, 60, 67, 0.8);
  --xxn-scrollbar: rgba(60, 60, 67, 0.4);
  --xxn-card-btn-bg: #edf0f7;
  --xxn-post-blockquote-bg: #fafcff;
  --xxn-post-tabs-bg: #f2f5f8;
  --xxn-secondbg: #f7f7f9;
  --xxn-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
  --xxn-card-bg: #fff;
  --xxn-card-bg-op: var(--xxn-black-op);
  --xxn-card-bg-none: rgba(255, 255, 255, 0);
  --xxn-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --xxn-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.00);
  --xxn-card-border: #e3e8f7;
  --xxn-shadow-border: 0 8px 16px -4px #2c2d300c;
  --xxn-tabs-background: #49B1F5;
  --style-border: 1px solid var(--xxn-card-border);
  --style-border-hover: 1px solid var(--xxn-main);
  --style-border-dashed: 1px dashed var(--xxn-theme-op);
  --style-border-forever: 2px solid var(--xxn-main)
  --xxn-fontcolor: #363636;
}

[data-theme=dark] {
  --xxn-theme: #f2b94b;
  --xxn-theme-op: #f2b94b23;
  --xxn-theme-op-deep: #f2b94bdd;
  --xxn-theme-none: #f2b94b00;
  --xxn-blue: #0084FF;
  --xxn-red: #FF3842;
  --xxn-pink: #d44040;
  --xxn-green: #3e9f50;
  --xxn-purple: #7a60d2;
  --xxn-yellow: #ffc93e;
  --xxn-yellow-op: #ffc93e30;
  --xxn-orange: #ff953e;
  --xxn-shadow-orange: 0 8px 12px -3px rgba(255, 149, 62, .2);
  --xxn-fontcolor: #F7F7FA;
  --xxn-background: #18171d;
  --xxn-reverse: #fff;
  --xxn-maskbg: rgba(0, 0, 0, 0.6);
  --xxn-maskbgdeep: rgba(0, 0, 0, 0.85);
  --xxn-hovertext: #0A84FF;
  --xxn-ahoverbg: #fff;
  --xxn-lighttext: var(--xxn-theme);
  --xxn-secondtext: #a1a2b8;
  --xxn-scrollbar: rgba(200, 200, 223, 0.4);
  --xxn-card-btn-bg: #30343f;
  --xxn-post-blockquote-bg: #000;
  --xxn-post-tabs-bg: #121212;
  --xxn-secondbg: #21232a;
  --xxn-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
  --xxn-card-bg: #1b1c20;
  --xxn-card-bg-op: var(--xxn-white-op);
  --xxn-card-bg-none: #1d1b2600;
  --xxn-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
  --xxn-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.0);
  --xxn-card-border: #3d3d3f;
  --xxn-shadow-border: 0 8px 16px -4px #00000050;
  --xxn-tabs-background: #81d8cf;
  --style-border: 1px solid var(--xxn-card-border);
  --style-border-hover: 1px solid var(--xxn-theme);
  --style-border-dashed: 1px dashed var(--xxn-theme-op);
  --style-border-forever: 2px solid var(--xxn-lighttext)
  --xxn-fontcolor: #F7F7FA;
}

.page #page:not(.home #page),.page #tag,.page #archive,.page #category{
  background: transparent!important;
  border: none!important;
  box-shadow: none!important;
  padding-top: 0;
}

.post-reward .reward-button {
    display: inline-block;
    padding: 4px 24px;
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
  }
  .post-reward:hover .reward-button {
    background: var(--btn-hover-color);
  }
  .post-reward:hover .reward-button>.reward-main {
    display: block;
  }
  .post-reward .reward-main {
    position: absolute;
    bottom: 40px;
    left: -23%;
    z-index: 100;
    display: none;
    padding: 0 0 15px;
  }
  .post-reward .reward-main .reward-all {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    margin: 0;
    padding: 20px 10px;
    border-radius: 4px;
    background: var(--reward-pop);
  }
  .post-reward .reward-main .reward-all:before {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
  }
  .post-reward .reward-main .reward-all:after {
    position: absolute;
    right: 0;
    bottom: 2px;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 13px solid var(--reward-pop);
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
    content: '';
  }
  .post-reward .reward-main .reward-all .reward-item {
    display: inline-block;
    padding: 0 8px;
    list-style-type: none;
    vertical-align: top;
  }
  .post-reward .reward-main .reward-all .reward-item img {
    width: 130px;
    height: 130px;
  }
  .post-reward .reward-main .reward-all .reward-item .post-qr-code-desc {
    width: 130px;
    color: #858585;
  }
  .author-content-item.single.reward .reward-list-updateDate {
    color: var(--xxn-gray);
    font-size: 14px;
  }
  #console.reward-show,#console.show {
    opacity: 1;
    pointer-events: all;
  }
  #console.reward-show .console-mask,#console.show .console-mask {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .about-reward {
    position: absolute;
    top: 1rem;
    right: 2rem;
  }
  .reward #con {
    position: relative;
    width: 350px;
    height: 85px;
    border-radius: 4px;
  }
  .reward #TA-con {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 157px;
    height: 50px;
    border-radius: 4px;
    background-color: #f25d8e;
    box-shadow: 0 4px 4px rgba(255,112,159,.3);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .reward #text-con {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100%;
  }
  .reward #linght {
    position: absolute;
    top: 36%;
    left: 4px;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-top: 10px solid #fff;
    border-radius: 4px;
    transform: rotate(-55deg);
  }
  .reward #linght::after {
    position: absolute;
    top: -13px;
    left: -11px;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-top: 10px solid #fff;
    border-radius: 4px;
    content: "";
    transform: rotate(180deg);
  }
  .reward #TA {
    float: right;
    color: #fff;
    font-size: 15px;
    line-height: 50px;
  }
  .reward #TA-con:hover {
    background-color: #ff6b9a;
  }
  .reward #tube-con {
    position: absolute;
    top: 15px;
    right: -5px;
    width: 157px;
    height: 55px;
  }
  .reward svg {
    width: 100%;
    height: 100%;
  }
  .reward #mask {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0;
    height: 100%;
    transition: all .5s;
  }
  .reward #mask svg {
    width: 157px;
    height: 55px;
  }
  .reward #TA-con:hover+#tube-con>#mask {
    width: 157px;
  }
  .reward #TA-con:hover+#tube-con>#orange-mask {
    animation: move1 .5s linear .2s infinite;
  }
  .reward #TA-con:hover+#tube-con>#orange-mask svg {
    animation: movetwo .5s linear .2s infinite;
  }
  .reward #orange-mask {
    position: absolute;
    top: 0;
    left: -15px;
    overflow: hidden;
    width: 18px;
    height: 100%;
  }
  .reward #orange-mask svg {
    position: absolute;
    top: 0;
    left: 15px;
    width: 157px;
    height: 55px;
  }
  @keyframes move1 {
    0% {
      left: -15px;
    }
    100% {
      left: 140px;
    }
  }
  @keyframes movetwo {
    0% {
      left: 15px;
    }
    100% {
      left: -140px;
    }
  }
  .reward #people {
    position: absolute;
    top: 4px;
    right: 10px;
    color: #aaa;
    font-size: 12px;
    font-family: "雅黑";
  }
  .reward #people>b {
    color: #777;
  }
  
  @media screen and (min-width:768px) and (max-width:896px) {
    .author-content-item.like-music .content-bottom .tips {
      display: none;
    }
  }
  @media screen and (max-width:768px) {
    .post-reward {
      display: none;
    }
    .layout>div:first-child:not(.recent-posts) {
      padding: 0rem 0rem!important;
      box-shadow: none!important;
    }
    #selfInfo-content-year {
      width: 90px;
    }
    .console-card-group-reward .reward-all .reward-item img {
      width: 130px;
      height: 130px;
    }
    .reward .about-reward #con {
      width: 170px;
    }
    .reward #tube-con {
      display: none;
    }
  }
  /* 响应式 */
  
  /* 打赏充电样式 */


  /* 好物推荐页面css开始 */
  
  #xxn-equipment > h2 {
    margin: 10px 7px 0;
  }
  #xxn-equipment .equipment-desc {
    margin: 0 7px;
    color: var(--xxn-secondtext);
  }
  #xxn-equipment {
    padding: 10px 20px;
    background: var(--xxn-gray-op);
    box-shadow: none !important;
  }
  #xxn-equipment .equipment {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 0;
    gap: 16px;
  }


  /* 新增CosPlay纯享版样式 */
/* 定义淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.xxn-equipment-dropdown {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: visible; /* 允许子元素超出边界 */
  font-size: 12px;
  color: var(--xxn-fontcolor);
}

.xxn-equipment-dropdown-wrapper {
  position: relative;
  display: inline-block; /* 可能需要根据您的布局进行调整 */
  margin-right: 10px; /* 根据实际需要调整 */
}

.xxn-equipment-download-trigger {
  cursor: pointer;
  display: block;
  border: 2px solid #ddd; /* 设置初始边框颜色 */
  border-radius: 12px; /* 设置圆角半径 */
  background-color: var(--xxn-gray-op);
  transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* transition-delay 设置为 0.3s */
  opacity: 1; /* 设置默认不透明度 */
  visibility: visible;
  padding: 4px 12px;
}

.xxn-equipment-download-trigger:hover {
  border-color: #F7F7FA; /* 鼠标悬停时边框颜色改变，替换成您偏好的颜色 */
}

/* 当鼠标不悬停时，使触发器透明并等待列表完全消失后再显示 */
.xxn-equipment-dropdown .xxn-equipment-download-trigger {
  transition: opacity 0.3s ease, visibility 0s linear 0.2s;
}

.xxn-equipment-download-list {
  display: flex;  /* 设置为flex布局 */
  flex-direction: row; /* 项目水平排列 */
  visibility: hidden; /* 默认设置为不可见 */
  position: absolute;
  top: 0;
  white-space: nowrap;
  z-index: 1;
  transform: translateX(-20px); /* 默认位移效果 */
  opacity: 0; /* 配合动画透明度过渡效果 */
  transition: visibility 0s linear 0.3s, opacity 0.3s ease, transform 0.3s ease;
  min-height: 100%;
}

/* 使用:hover伪类实现触发器和下拉列表的动画 */
.xxn-equipment-dropdown:hover .xxn-equipment-download-list {
  visibility: visible; /* 鼠标悬停时可见 */
  opacity: 1; /* 不透明显示 */
  transform: translateX(0px); /* 复原位移 */
  transition: visibility 0s 0s, opacity 0.3s ease, transform 0.3s ease; /* 移除visibility的延迟 */
}

.xxn-equipment-dropdown:hover .xxn-equipment-download-trigger {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s; /* 当悬停时立即开始动画 */
}


.xxn-equipment-dropdown a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block; /* 更改为块状显示 */
}

.xxn-equipment-dropdown a:first-child {
  border-left: none; /* 首个链接无分隔线 */
}

.xxn-equipment-dropdown a:hover {
  background-color: #ddd;
}

.xxn-equipment-box {
  border: 1px solid var(--xxn-secondbg);
  background: var(--xxn-card-bg);
  width: calc(100% / 4 - 12px);
  border-radius: 12px;
  overflow: hidden; /* 保持不变 */
}

  /* 初始化 */
  
  #xxn-equipment .equipment > .xxn-equipment-box {
    border: 1px solid var(--xxn-secondbg);
    background: var(--xxn-card-bg);
    width: calc(100% / 4 - 12px);
    border-radius: 12px;
    overflow: hidden;
  }
  #xxn-equipment .equipment .xxn-equipment-box img {
    min-width: 100%;
    max-width: 100%;
    height: 258px;
    object-fit: cover;
    animation:fadeIn 1s;
    cursor:pointer;
    transition:all .4s ease-in-out;
    margin-bottom: -0.8em;
  }
  #xxn-equipment .equipment .xxn-equipment-box img:hover {
    transform:scale(1.03);
  }
  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content {
    padding: 10px;
    background: var(--xxn-gray-op);
    box-shadow: none !important;
  }
  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content .xxn-equipment-name {
    color: var(--xxn-fontcolor);
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content .xxn-equipment-custom {
    font-size: 12px;
    color: var(--xxn-secondtext);
    line-height: 1;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content .xxn-equipment-opinion {
    line-height: 20px;
    color: var(--xxn-secondtext);
    height: 80px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom: 5px;
  }
  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content .xxn-equipment-box-more {
    display: flex;
    align-items: stretch;
    position: relative;
  }
  
  .xxn-equipment-box-more .xxn-bber-reply {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content .xxn-equipment-box-more a {
    font-size: 12px;
    background: var(--xxn-gray-op);
    color: var(--xxn-fontcolor);
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    margin-right: 0.6em;
    border: 2px solid #ddd;
  }
  #xxn-equipment .equipment .xxn-equipment-box .xxn-equipment-content .xxn-equipment-box-more a:hover {
    color: var(--xxn-white);
    background: var(--xxn-blue);
    box-shadow: 0 8px 16px -4px var(--xxn-black-op);
  }
  /* 好物页基础样式 */
  
  @media screen and (max-width: 900px) {
    #xxn-equipment .equipment {
      gap: 10px;
    }
    #xxn-equipment .equipment > .xxn-equipment-box {
      width: calc(100% / 3 - 7px);
    }
  }
  @media screen and (max-width: 768px) {
    #xxn-equipment .equipment {
      gap: 8px;
    }
    #xxn-equipment .equipment > .xxn-equipment-box {
      width: 100%;
    }
    #xxn-equipment .equipment .xxn-equipment-box img {
      height: 220px;
    }
  }
  /* 响应式 */
  
  /* 我的好物样式结束 */


  #page:has(#xxn_page) {
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #web_bg ~ .page:has(#xxn_page) {
    background: transparent !important;
  }
  /* page背景调整 */

  .xxn_page {
    background: transparent !important;
    padding: 10px 0px !important;
    border: 0;
    box-shadow: none !important;
  }
  
  .xxn-content.xxn-content-item.xxnPage {
    height: 19rem;
    color: var(--xxn-white);
    overflow: hidden;
    margin-top: 0;
    border-radius: 12px;
    border: var(--style-border);
    box-shadow: var(--xxn-shadow-border);
    position: relative;
  }
  .xxn-content-item .xxn-card-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem 2rem;
  }
  .xxn-content-item .xxn-content-item-tips {
    opacity: .8;
    font-size: .6rem;
    margin-bottom: .5rem;
  }
  .xxn-content-item .xxn-card-content .xxn-content-item-title {
    margin-bottom: .5rem;
  }
  .xxn-content-item .xxn-content-item-title {
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
  }
  .xxn-content-item .xxn-content-bottom {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .xxn-content-item .xxn-content-bottom .xxn-tips {
    font-weight: bold;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .xxn-content-item .xxn-card-content .xxn-change-button-group .xxn-change-button {
    height: 40px;
    width: auto;
    padding: 0 22px;
    border-radius: 20px;
    justify-content: center;
    background: var(--xxn-white);
    color: var(--xxn-black);
    display: flex;
    align-items: center;
    transition: .3s;
    cursor: pointer;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: translateZ(0);
    box-shadow: 0 8px 16px -4px var(--xxn-black-op);
  }
  .xxn-content-item .xxn-card-content .xxn-change-button-group .xxn-change-button i {
    margin-right: 4px;
    font-weight: bold;
  }
  #page:has(#xxn_page) .xxn-content-item .xxn-card-content .xxn-change-button-group .xxn-change-button:hover {
    background: var(--xxn-blue);
    color: var(--xxn-white);
  }
  
  @media screen and (max-width: 768px) {
    .xxn-content-item .xxn-card-content {
      padding: 1rem 1rem;
    }
    .xxn-content-item .xxn-card-content .xxn-change-button-group .xxn-change-button {
      width: 60px;
    }
    .xxn-content-item .xxn-card-content .xxn-change-button-group .xxn-change-button i {
      margin-right: -3px;
    }
    .xxn-content-item .xxn-card-content .xxn-change-button-group .xxn-change-button-text {
      display: none;
    }
  }
  /* 响应式 */
  

  /* 关于我们页面样式 */
  .xxn-about-page {
    background: transparent !important;
    padding: none;
    border: 0;
    box-shadow: none !important;
  }

  /* 短文/玉玉语录/舔狗日记 */
  #xxn-bber {
    margin-top: 1.5rem;
    width: 100%;
    border: none!important;
    box-shadow: none!important;
  }
  #xxn-bber #waterfall.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
  #xxn-bber .xxn-timeline #waterfall {
    opacity: 0;
    transition: .3s;
  }
  #xxn-bber .xxn-timeline #waterfall.show {
    opacity: 1;
  }
  #xxn-bber .xxn-timeline #waterfall .xxn-bber-item {
    position: relative;
    width: calc((100% - 6%) / 4); /* 减去的百分比是3个间隔总和的预留空间 */
    border: var(--style-border);
    border-radius: 12px;
    padding: 1rem 1rem 0.9rem;
    transition: all 0.3s ease 0s;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--xxn-card-bg);
    box-shadow: var(--xxn-shadow-border);
    margin-right: 2%;
    margin-bottom: 2%; /* 如果您想要有垂直间隔 */
    animation: slide-in .6s .4s backwards;
  
    /* 每4个元素的第4个，取消右边距 */
    &:nth-child(4n) {
      margin-right: 0;
    }
  }
  #xxn-bber > section > #waterfall > .xxn-bber-item {
    margin-bottom: 1rem;
  }
  #xxn-bber .xxn-timeline #waterfall .xxn-bber-item:hover {
    border: var(--style-border-hover);
  }
  @media screen and (max-width: 1300px) {
    #xxn-bber .xxn-timeline #waterfall .xxn-bber-item {
      width: 49%;
      margin-right: 1%;
    }
  }
  @media screen and (max-width: 768px) {
    #xxn-bber .xxn-timeline #waterfall .xxn-bber-item {
      width: 100%;
      margin-right: 0px;
    }
  }
  /* 响应式 */
  
  #xxn-bber div.xxn-bber-content {
    display: flex;
    flex-flow: wrap;
    border-radius: 12px;
    width: 100%;
    height: 100%;
  }
  #xxn-bber p {
    margin: 0px;
  }
  #xxn-bber .xxn-bber-content .datacont {
    order: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--xxn-fontcolor);
    width: 100%;
    line-height: 1.38;
    border-radius: 12px;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    text-align: justify;
    padding: 0px 8px;
  }
  #xxn-bber .xxn-bber-container-img {
    display: flex;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-left: 8px;
  }
  #xxn-bber .xxn-bber-container-img .imgbox {
    width: 100%;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 6px;
  }
  #xxn-bber .xxn-bber-container-img .imgbox .xxn-bber-content-img {
    # height: 100px;
    display: flex;
    position: relative;
  }
  #xxn-bber .xxn-bber-container-img .imgbox .xxn-bber-content-img img {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    border-radius: 6px;
    animation: slide-in .6s .4s backwards;
  }

  .xxn-bber-info-magnet {
    position: relative;
    padding: 4px;
    margin: 8px 0;
    width: 100%;
  }
  
  .xxn-bber-content-magnet-input {
    width: 100%;
    padding: 8px;
    font-size: .7em;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    color: #333;
    box-sizing: border-box;
    cursor: pointer;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  
  .xxn-bber-content-magnet-input:hover {
    background-color: #e8e8e8;
  }
  
  .xxn-bber-copied-tip {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    line-height: normal;
    opacity: 0;
    transition: opacity 2.5s;
  }
  
  .xxn-bber-content-magnet-input:focus + .xxn-bber-copied-tip {
    display: block;
    opacity: 1;
  }
  
  .xxn-bber-content-magnet-input:not(:focus) + .xxn-bber-copied-tip {
    opacity: 0;
    transition: visibility 0s 2.5s, opacity 2.5s linear; /* 2.5秒后消失 */
  }
  
  @keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
  }

  #xxn-bber .xxn-bber-video {
    position: relative;
    padding: 30% 50%;
    margin-bottom: 10px
  }
  #xxn-bber .xxn-bber-video video,
  #xxn-bber .xxn-bber-video iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    margin: 0;
    border-radius: 6px;
    border: var(--style-border);
  }
  #xxn-bber .xxn-bber-music {
    width: 100%;
    height: 90px;
    margin: 0 0 0.5rem;
    border-radius: 8px;
    overflow: hidden;
    border: var(--style-border);
    background: var(--xxn-secondbg);
  }
  #xxn-bber .aplayer {
    margin: 0;
  }
  #xxn-bber .aplayer.aplayer-withlrc .aplayer-pic {
    height: 82px;
    width: 82px;
    margin: 4px;
    border-radius: 4px;
  }
  .xxn-bber-music .aplayer.aplayer-withlrc .aplayer-info {
    padding: 5px 7px 0;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-music {
    height: 23px;
    text-align: center;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-music .aplayer-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
    color: var(--xxn-fontcolor);
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller {
    align-items: center;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    padding: 0;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: initial;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    background: var(--xxn-gray);
    height: 8px;
    border-radius: 12px;
    transition: 0.3s;
    overflow: hidden;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    height: 100%;
    border-radius: 12px;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    height: 100%;
    border-radius: 12px;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
    display: none;
  }
  #xxn-bber .aplayer .aplayer-info .aplayer-controller .aplayer-time {
    position: initial;
  }
  #xxn-bber .aplayer .aplayer-lrc p {
    color: var(--xxn-fontcolor);
  }
  #xxn-bber .xxn-timeline #waterfall .xxn-bber-item hr {
    display: flex;
    position: relative;
    margin: 8px 0px;
    border: 1px dashed var(--xxn-blue);
    width: 100%;
    opacity: 0.4;
  }
  #xxn-bber .xxn-bber-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
  }
  #xxn-bber .xxn-bber-info {
    display: flex;
  }
  #xxn-bber > section > #waterfall > .xxn-bber-item > div .xxn-bber-info-time,
  #xxn-bber > section > #waterfall > .xxn-bber-item > div .xxn-bber-info-from {
    color: var(--xxn-fontcolor);
    font-size: 1rem;
    background-color: var(--xxn-gray-op);
    padding: 0px 8px;
    border-radius: 20px;
    cursor: default;
    display: flex;
    align-items: center;
    padding-right: 12px;
  }
  #xxn-bber > section > #waterfall > .xxn-bber-item > div .xxn-bber-info-time > i {
    padding-right: 4px;
  }
  #xxn-bber > section > #waterfall > .xxn-bber-item > div .xxn-bber-info-from {
    margin-left: 0.5rem;
  }
  #xxn-bber > section > #waterfall > .xxn-bber-item > div .xxn-bber-info-from span {
    margin-left: 0.35rem;
  }
  #xxn-bber .xxn-bber-content-link {
    display: flex;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    align-items: center;
    background-color: rgba(245, 108, 108, 0.13);
    color: rgb(245, 108, 108);
    padding: 0px 8px;
    border-radius: 20px;
    padding-right: 10px;
  }
  #xxn-bber .xxn-bber-content-link i {
    margin-right: 4px;
  }
  #xxn-bber .xxn-bber-content-link:hover {
    background-color: var(--xxn-main);
    color: var(--xxn-white);
  }
  #xxn-bber-tips {
    font-size: 14px;
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
  }
  
  [data-theme="dark"] #xxn-bber .xxn-timeline #waterfall .xxn-bber-item hr {
    opacity: 0.2;
  }
  [data-theme="dark"] #xxn-bber .xxn-bber-music .aplayer,
  [data-theme="dark"] #xxn-bber .aplayer .aplayer-lrc:before,
  [data-theme="dark"] #xxn-bber .aplayer .aplayer-lrc:after {
    background: var(--xxn-card-bg);
    color: var(--xxn-fontcolor);
  }
  
  /* 即刻短文样式

  /* 订阅页面 */
  #post .tag_share + #follow {
    margin-top: 40px;
  }
  .rss-plan-list {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -4px;
    position: relative;
    justify-content: space-between;
  }
  .rss-plan-item:visited {
    color: var(--xxn-white);
  }
  .rss-plan-item.rss-plan-wechat {
    background: #27c125;
  }
  .rss-plan-item.rss-plan-mail {
    background: var(--xxn-blue);    
  }
  .rss-plan-item.rss-plan-rss {
    background: var(--xxn-orange);
  }
  .rss-plan-item {
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 240px;
    height: 240px;
    margin: 6px 0;
    overflow: hidden;
    text-decoration: none;
    width: calc(100% / 3 - 8px);
    filter: brightness(1);
    transition: .3s;
    border: var(--style-border);
    box-shadow: var(--xxn-shadow-border);
  }
  .rss-plan-item:hover {
    filter: brightness(1.1)
  }
  @media screen and (max-width: 1024px) {
    .rss-plan-item {
        width:calc(100% / 2 - 4px)
    }
    .rss-plan-item:first-child {
        width: 100%
    }
  }
  @media screen and (max-width: 768px) {
    .rss-plan-item {
        width:100%
    }
  }
  /* 卡片大小 */
  
  .rss-plan-description {
    font-size: 16px;
    color: var(--xxn-white);
    margin: 26px 0 0 30px;
    line-height: 20px;
  }
  .rss-plan-info-group {
    position: relative;
    margin: 0 0 26px 30px;
    color: var(--xxn-white);
  }
  .rss-plan-title {
    font-size: 36px;
    font-weight: 700;
    width: fit-content;
    line-height: 1;
  }
  .rss-plan-info {
    width: fit-content;
    opacity: .6;
  }
  img.rss-plan-icon {
    position: absolute;
    bottom: -50px;
    right: -20px;
    height: 140px;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
    -moz-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
    -o-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
    -ms-transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
    transition: all 1.2s cubic-bezier(.39,.575,.565,1) !important;
    transform-origin: bottom right;
    filter: blur(8px);
    opacity: .6;
  }
  .rss-plan-item:hover img.rss-plan-icon {
    bottom: -40px;
    right: -10px;
    filter: blur(0);
    opacity: 1
  }
  .rss-plan-item:hover {
    text-decoration: none !important;
  }
  /* 卡片订阅样式 */
  
  .follow-it-form-subscribe {
    position: relative;
    display: block;
    padding: 26px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: var(--style-border);
    box-shadow: var(--xxn-shadow-border);
    background-color: var(--xxn-background);
  }
  @media screen and (min-width: 768px) and (max-width: 1920px) {
    .follow-it-form-subscribe::before {
      content: '';
      background: url(https://yife68.gitee.io/xxn-pic/blog/follow.svg);
      position: absolute;
      top: 30px;
      right: 26px;
      width: 122px;
      height: 25px;
      filter: blur(2px);
    }
  }
  .follow-it-form-subscribe .heading {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .follow-it-form-subscribe .heading h5 {
    margin: 0 0 0.2rem 0;
    color: var(--xxn-fontcolor);
    font-size: 18px;
  }
  .follow-it-form-subscribe .input-field {
    margin-top: 20px;
    width: 100%;
  }
  .follow-it-form-subscribe .input-field input {
    width: 100%;
    height: 48px;
    border-radius: 6px;
    border: 2px solid var(--xxn-card-border);
    outline: none;
  }
  .follow-it-form-subscribe .input-field input::placeholder,
  .follow-it-form-subscribe .input-field input {
    opacity: .6;
    background: var(--xxn-secondbg);
    color: var(--xxn-fontcolor);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
  }
  .follow-it-form-subscribe .submit-button {
    margin-top: 16px;
    width: 100%;
  }
  .follow-it-form-subscribe .submit-button button {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 6px;
    line-height: 0;
    color: var(--xxn-white);
    background: var(--xxn-black);
    box-shadow: var(--xxn-shadow-border);
    transition: .3s;
  }
  .follow-it-form-subscribe .submit-button button:hover {
    cursor: pointer;
    background: var(--xxn-blue);
  }
  .submit-box {
    opacity: 0;
    height: 0;
    transition: all .3s ease 0s;
  }
  .submit-box.display {
    opacity: 1;
    height: auto;
  }
  /* follow样式 */
  
  /* 订阅样式 */

  /* Banner样式魔改 */
  
  .background-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    pointer-events: none;
  }


#search-button a, #comment-button a, #setting-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#search-button i, #comment-button i, #setting-button i {
    margin: 0 !important;
}

/* AI */
.post-XxnGPT {
  background: var(--xxn-secondbg);
  border-radius: 12px;
  padding: 12px;
  line-height: 1.3;
  border: var(--style-border-always);
  margin: 16px 0;
}

@media screen and (max-width: 768px) {
  .post-XxnGPT {
    margin-top: 22px;
  }
}

.XxnGPT-title {
  display: flex;
  color: var(--xxn-lighttext);
  border-radius: 8px;
  align-items: center;
  padding: 0 12px;
  cursor: default;
  user-select: none;
  position: relative;
}

.XxnGPT-title-text {
  font-weight: bold;
  margin-left: 8px;
  line-height: 1;
}

.XxnGPT-explanation {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--xxn-card-bg);
  border-radius: 8px;
  border: var(--style-border-always);
  font-size: 15px;
  line-height: 1.4;
  display: flex;
}

.XxnGPT-suggestions {
  display: flex;
  flex-wrap: wrap;
}

.XxnGPT-suggestions .XxnGPT-suggestions-item {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--xxn-card-bg);
  border-radius: 8px 8px 8px 0;
  border: var(--style-border-always);
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  width: fit-content;
  margin-right: 12px;
  cursor: pointer;
  transition: 0.3s;
}

.XxnGPT-suggestions .XxnGPT-suggestions-item:hover {
  background: var(--xxn-main);
  color: var(--xxn-white);
}

.blinking-cursor {
  background-color: var(--xxn-main);
  width: 10px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  animation: blinking-cursor 0.5s infinite;
  -webkit-animation: blinking-cursor 0.5s infinite;
  margin-left: 4px;
}

@keyframes blinking-cursor {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.XxnGPT-tag {
  font-size: 12px;
  background-color: var(--xxn-lighttext);
  color: var(--xxn-card-bg);
  font-weight: bold;
  border-radius: 4px;
  margin-left: auto;
  line-height: 1;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s, background-color 0s;
  position: absolute;
  right: 12px;
}

ins.adsbygoogle {
  margin: 16px 0;
  background: var(--xxn-card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: var(--style-border-always);
}

#XxnGPT-Toggle {
  font-size: 12px;
  background: var(--xxn-lighttext);
  color: var(--xxn-card-bg);
  padding: 4px;
  border-radius: 4px;
  margin-left: 6px;
  transform: scale(0.8);
  cursor: pointer;
  transition: 0.3s;
  font-weight: bold;
}

#XxnGPT-Toggle:hover {
  background: var(--xxn-fontcolor);
  color: var(--xxn-card-bg);
}

.XxnGPT-title-icon {
  width: 20px;
  height: 20px;
}

.XxnGPT-title-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--xxn-main);
}

.XxnGPT-title-icon svg path {
  fill: var(--xxn-main);
}

.XxnGPT-tag svg {
  fill:#7e8a97;
}

@keyframes breathe {
    0% {
        -webkit-transform: scale(.97);
        -moz-transform: scale(.97);
        -o-transform: scale(.97);
        -ms-transform: scale(.97);
        transform: scale(.97)
    }

    50% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(.97);
        -moz-transform: scale(.97);
        -o-transform: scale(.97);
        -ms-transform: scale(.97);
        transform: scale(.97)
    }
}

.XxnGPT-tag.playing svg {
  animation: 0.5s linear 0s infinite normal none running breathe;
  transform-origin: center;
  width: 20px;
  height: 20px;
}