.dw-page{min-height:100vh;background:#000;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.dw-fan-container{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;perspective:1200px}
.dw-fan{position:relative;width:0;height:0;display:flex;align-items:center;justify-content:center}
.dw-card{position:absolute;width:2.6rem;height:3.6rem;border-radius:.16rem;overflow:hidden;cursor:pointer;transition:transform .5s cubic-bezier(.25,.46,.45,.94),box-shadow .45s,border-color .35s;border:1px solid rgba(255,255,255,.12);box-shadow:0 .1rem .4rem rgba(0,0,0,.5);transform-origin:center bottom;will-change:transform;z-index:1}
.dw-card:hover{z-index:100;border-color:rgba(255,255,255,.35);box-shadow:0 .3rem .8rem rgba(0,0,0,.8)}
.dw-card-img{position:absolute;inset:0;z-index:0}
.dw-card-mask{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.75) 100%);z-index:1}
.dw-card-content{display:none}
.dw-card-corner{position:absolute;top:.1rem;left:.1rem;font-size:.28rem;color:rgba(255,255,255,.15);z-index:2;font-family:Georgia,serif;line-height:1}
.dw-card-corner-bottom{position:absolute;bottom:.1rem;right:.1rem;font-size:.28rem;color:rgba(255,255,255,.15);z-index:2;font-family:Georgia,serif;line-height:1;transform:rotate(180deg)}
.dw-card-suit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;color:rgba(255,255,255,.06);z-index:1}
.dw-card.zoomed{position:fixed;z-index:200;transition:all .8s cubic-bezier(.25,.46,.45,.94)}
.dw-fan-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:180;opacity:0;pointer-events:none;transition:opacity .6s ease}
.dw-fan-overlay.active{opacity:1;pointer-events:auto}
.dw-card-preview{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.dw-card-preview.active{opacity:1}
.dw-card-preview-bg{position:absolute;inset:0;z-index:0;transition:opacity .5s ease;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%)}
.dw-card-info{position:absolute;bottom:1.2rem;left:0;width:100%;text-align:center;z-index:10;opacity:0;transform:translateY(.3rem);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.dw-card-info.active{opacity:1;transform:translateY(0)}
.dw-card-info-title{font-size:.28rem;font-weight:700;color:#fff;letter-spacing:.02rem;line-height:1.2;margin-bottom:.06rem}
.dw-card-info-cat{font-size:.11rem;color:rgba(255,255,255,.4);letter-spacing:.06rem;text-transform:uppercase;margin-bottom:.04rem}
.dw-card-info-meta{font-size:.1rem;color:rgba(255,255,255,.25);letter-spacing:.02rem}
.dw-more-btn{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:.1rem;cursor:pointer;opacity:1;transition:opacity .4s ease}
.dw-more-btn.hidden{opacity:0;pointer-events:none}
.dw-more-text{font-size:.12rem;color:rgba(255,255,255,.35);letter-spacing:.08rem;text-transform:uppercase;transition:color .35s}
.dw-more-btn:hover .dw-more-text{color:rgba(255,255,255,.7)}
.dw-more-dots{display:flex;gap:.06rem;align-items:center}
.dw-more-dots span{width:.04rem;height:.04rem;border-radius:50%;background:rgba(255,255,255,.25);transition:background .35s}
.dw-more-btn:hover .dw-more-dots span{background:rgba(255,255,255,.6)}
.dw-back2card-btn{position:absolute;bottom:1.2rem;left:.5rem;z-index:10;display:flex;flex-direction:column;align-items:center;gap:.1rem;cursor:pointer;opacity:1;transition:opacity .4s ease}
.dw-back2card-btn .dw-more-text{font-size:.12rem;color:rgba(255,255,255,.35);letter-spacing:.08rem;text-transform:uppercase;transition:color .35s}
.dw-back2card-btn:hover .dw-more-text{color:rgba(255,255,255,.7)}
.dw-back2card-btn .dw-more-dots{display:flex;gap:.06rem;align-items:center}
.dw-back2card-btn .dw-more-dots span{width:.04rem;height:.04rem;border-radius:50%;background:rgba(255,255,255,.25);transition:background .35s}
.dw-back2card-btn:hover .dw-more-dots span{background:rgba(255,255,255,.6)}

.dw-detail{position:fixed;top:0;left:0;width:100%;height:100%;z-index:150;background:#000;overflow-y:auto;animation:dwFadeIn .4s ease}
@keyframes dwFadeIn{from{opacity:0}to{opacity:1}}
.dw-detail-back{position:fixed;top:.3rem;left:.5rem;z-index:160;display:flex;align-items:center;gap:.08rem;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:.14rem;padding:.08rem .2rem;border-radius:.2rem;cursor:pointer;transition:all .35s}
.dw-detail-back:hover{background:rgba(0,0,0,.85);border-color:rgba(255,255,255,.3)}
.dw-detail-back svg{width:.16rem;height:.16rem;fill:none;stroke:currentColor;stroke-width:2}
.dw-detail-hero{width:100%;height:55vh;position:relative;display:flex;align-items:center;justify-content:center}
.dw-detail-hero-bg{position:absolute;inset:0;z-index:0}
.dw-detail-hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);z-index:1}
.dw-detail-hero-content{position:relative;z-index:2;text-align:center;padding:0 .5rem}
.dw-detail-hero-title{font-size:.6rem;font-weight:700;color:#fff;letter-spacing:.04rem;line-height:1.15}
.dw-detail-hero-cat{font-size:.14rem;color:rgba(255,255,255,.5);letter-spacing:.08rem;text-transform:uppercase;margin-top:.12rem}
.dw-detail-body{max-width:9rem;margin:0 auto;padding:.6rem .5rem}
.dw-detail-desc{font-size:.16rem;color:rgba(255,255,255,.6);line-height:1.8;margin-bottom:.5rem}
.dw-detail-meta{display:flex;gap:.6rem;flex-wrap:wrap;padding-top:.4rem;border-top:1px solid rgba(255,255,255,.08)}
.dw-detail-meta-item{flex:1;min-width:1.5rem}
.dw-detail-meta-label{font-size:.11rem;color:rgba(255,255,255,.35);letter-spacing:.06rem;text-transform:uppercase;margin-bottom:.06rem}
.dw-detail-meta-value{font-size:.16rem;color:#fff;font-weight:600}

.dw-list-page{height:100vh;background:#000;padding:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.dw-list-inner{width:100%;max-width:14rem;margin:0 auto;padding:0 .5rem;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
.dw-list-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:.16rem;align-content:center;align-items:stretch;width:100%;max-width:12rem}
.dw-list-header{position:absolute;top:1.1rem;left:.5rem;z-index:2;text-align:left}
.dw-list-header-title{font-size:.28rem;font-weight:700;color:#fff;letter-spacing:.02rem}
.dw-list-header-sub{font-size:.11rem;color:rgba(255,255,255,.35);margin-top:.06rem;letter-spacing:.06rem;text-transform:uppercase}
.dw-list-card{display:flex;align-items:stretch;border-radius:.1rem;overflow:hidden;cursor:pointer;transition:transform .45s cubic-bezier(.25,.46,.45,.94),box-shadow .45s;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.dw-list-card:hover{transform:translateY(-.02rem);box-shadow:0 .1rem .3rem rgba(0,0,0,.55)}
.dw-list-card-thumb{width:35%;min-height:1.6rem;flex-shrink:0;background-size:cover!important;background-position:center!important;transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.dw-list-card:hover .dw-list-card-thumb{transform:scale(1.05)}
.dw-list-card-body{flex:1;padding:.2rem;display:flex;flex-direction:column;justify-content:center}
.dw-list-card-cat{font-size:.11rem;color:rgba(255,255,255,.45);letter-spacing:.04rem;text-transform:uppercase;margin-bottom:.08rem}
.dw-list-card-title{font-size:.18rem;font-weight:700;color:#fff;letter-spacing:.01rem;line-height:1.3}
.dw-list-card-meta{font-size:.11rem;color:rgba(255,255,255,.3);margin-top:.08rem;letter-spacing:.01rem}
.dw-list-card-desc{font-size:.12rem;color:rgba(255,255,255,.5);margin-top:.1rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dw-list-pagination{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:.12rem;align-items:center}
.dw-list-page-btn{width:.4rem;height:.4rem;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.5);font-size:.14rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center}
.dw-list-page-btn:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
.dw-list-page-btn.active{background:#fff;color:#000;border-color:#fff;font-weight:600}
.dw-list-page-btn.prev,.dw-list-page-btn.next{width:auto;padding:0 .16rem;border-radius:.2rem}