@layer pages{.joe_index{overflow:hidden}.joe_index__banner{background:var(--bg-page);padding:15px 15px 5px;& .swiper{border-radius:var(--radius-img);--swiper-theme-color:#fff;flex:1;min-width:0;height:400px;& .swiper-slide{overflow:hidden;transform:translate(0,0)}& .item{cursor:default;height:400px;display:block;transform:translate(0,0);&.clickable{cursor:pointer}& .thumbnail{object-fit:cover;width:100%;height:100%;transition:transform .6s var(--ease-out)}&:hover .thumbnail{transform:scale(1.03)}& .title-row{z-index:1;user-select:none;text-align:left;color:#fff;background:#0006;padding:10px 80px 10px 14px;font-size:18px;position:absolute;bottom:0;left:0;right:0;& .title{white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:18px;font-weight:700;overflow:hidden}& .subtitle{white-space:nowrap;text-overflow:ellipsis;color:#b9b9b9;font-size:14px;overflow:hidden}}& .joe-font{z-index:1;color:#fff;opacity:.5;font-size:20px;position:absolute;top:10px;left:10px}}&.swiper-horizontal{& .swiper-pagination-bullets{top:unset;bottom:10px;right:10px;left:unset;width:auto}& .swiper-pagination-bullet{transition:width var(--dur-base) var(--ease-out);border-radius:30px}& .swiper-pagination-bullet-active{width:14px}}&.swiper-vertical{& .swiper-button-next,& .swiper-button-prev{display:none}}& .swiper-button-next,& .swiper-button-prev{transition:background var(--dur-base) var(--ease-out), right var(--dur-base) var(--ease-out), left var(--dur-base) var(--ease-out);background:#0000001a;border-radius:2px;&:hover{background:#00000040}&:after{font-size:20px}}& .swiper-button-next{opacity:0;right:-15px}& .swiper-button-prev{opacity:0;left:-15px}&:hover{& .swiper-button-next{opacity:1;right:10px}& .swiper-button-prev{opacity:1;left:10px}}}}.joe_index__article{padding:0 15px}.joe_index{& .joe_list__item{will-change:transform;background:var(--bg-page)}}@media (width<=1200px){.joe_index__hot-list{column-gap:10px;& .item .link .inner .image{height:90px}}.joe_index__banner{display:block}.swiper{height:360px;& .item{height:360px}}.joe_index__banner{& .swiper{height:350px;& .item{height:350px;& .title-row{padding:10px 80px 10px 14px;& .title{font-size:16px}& .subtitle{font-size:13px}}}}}}@media (width<=992px){.joe_index__hot-list{& .item .link .inner .image{height:95px}}.joe_index__banner{& .swiper{height:340px;& .item{height:340px}}}}@media (width<=768px){.joe_index__banner{& .swiper{height:300px;& .item{height:300px;& .title{font-size:15px}}}}.joe_index__hot-list{grid-template-columns:repeat(2,1fr);gap:10px}.joe_index__banner{& .swiper{& .item{& .title-row{padding:10px 12px}}& .swiper-pagination{display:none}}}}@media (width<=500px){.joe_index{border-radius:0}.joe_index__banner{border-radius:0;padding:0;& .swiper{border-radius:0;height:220px;& .swiper-slide{border-radius:0}& .item{height:220px;& .title-row{padding:8px 10px;& .title{font-size:14px;font-weight:400}& .subtitle{display:none}}}& .swiper-button-next,& .swiper-button-prev{display:none}}}.joe_index__hot-list{grid-template-columns:repeat(2,1fr);gap:10px;& .item .link .inner .image{height:70px}}.joe_index__title-notice{display:none}}.joe_resume_bar{border-radius:var(--radius-wrap);background:color-mix(in srgb, var(--theme) 7%, var(--bg-page));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--theme) 14%, transparent);transition:background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);align-items:center;margin:15px 15px 0;display:flex;&[hidden]{display:none}&:hover{background:color-mix(in srgb, var(--theme) 11%, var(--bg-page))}&.is-leaving{opacity:0;transform:translateY(-4px)}& .link{flex:1;align-items:center;gap:12px;min-width:0;padding:10px 4px 10px 12px;display:flex}& .ring{background:conic-gradient(var(--theme) calc(var(--p) * 1%), color-mix(in srgb, var(--theme) 16%, transparent) 0);border-radius:50%;flex:none;place-items:center;width:36px;height:36px;display:grid;&>span{width:28px;height:28px;color:var(--theme-text);font-variant-numeric:tabular-nums;background:var(--bg-page);border-radius:50%;justify-content:center;align-items:baseline;font-size:11px;font-weight:600;line-height:28px;display:flex;&:after{content:"%";margin-left:1px;font-size:8px;font-weight:500}}}& .text{flex:1;gap:2px;min-width:0;display:grid}& .label{color:var(--text-secondary);font-size:12px}& .title{color:var(--text-title);white-space:nowrap;text-overflow:ellipsis;transition:color var(--dur-fast) var(--ease-out);font-size:14px;font-weight:600;overflow:hidden}& .link:hover .title{color:var(--theme-text)}& .go{color:var(--theme-text);transition:transform var(--dur-base) var(--ease-spring);flex:none;transform:rotate(-90deg)}& .link:hover .go{transform:rotate(-90deg)translateY(3px)}& .close{width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);background:0 0;border:0;border-radius:50%;flex:none;place-items:center;margin-right:8px;padding:0;display:grid;&:hover{color:var(--text-title);background:color-mix(in srgb, var(--theme) 12%, transparent)}& .joe-font{font-size:14px}}}@media (width<=768px){.joe_index--compact{& .joe_index__hot-list{overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;grid-template-columns:none;grid-auto-columns:40%;grid-auto-flow:column;gap:10px;overflow-x:auto;&::-webkit-scrollbar{display:none}& .item{scroll-snap-align:start}&.hotlist .item .link .inner{height:80px}}& .joe_moments_stack__list li:nth-child(n+2){display:none}}}}