:root{
    --ink:#272636;
    --muted:#777483;
    --line:#ebe8ef;
    --paper:#fffdfb;
    --pink:#f8d9dd;
    --accent:#de6d8a;
    --dark:#313047;
    --max:1180px
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
    line-height:1.7
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
img{
    display:block;
    max-width:100%;
    object-fit:cover
}
.container{
    width:min(var(--max),calc(100% - 48px));
    margin:auto
}
.reading-container{
    width:min(790px,calc(100% - 40px));
    margin:auto
}
.site-header{
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,253,251,.94);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)
}
.header-inner{
    display:flex;
    align-items:center;
    min-height:76px;
    gap:12px
}
.brand{
    display:grid;
    place-items:center
}
.logo-mark{
    display:grid;
    place-items:center;
    width:41px;
    height:41px;
    border-radius:13px 13px 18px 18px;
    color:white;
    font-weight:900;
    font-size:21px;
    background:linear-gradient(145deg,#ed92ab,#ca557c);
    box-shadow:0 6px 18px #d8678d44
}
.brand-name{
    font-weight:900;
    white-space:nowrap;
    font-size:18px;
    letter-spacing:.03em
}
.main-nav{
    margin-left:auto;
    display:flex;
    gap:4px;
    align-items:center
}
.nav-link{
    font-size:13px;
    padding:8px 9px;
    border-radius:9px;
    white-space:nowrap;
    color:#5d5968
}
.nav-link:hover,.nav-link.active{
    color:#b84468;
    background:#fcebf0
}
.header-cta{
    font-size:12px;
    white-space:nowrap;
    margin-left:8px;
    border-radius:40px;
    padding:8px 16px;
    background:#333047;
    color:#fff
}
.hero{
    padding:80px 0 90px
}
.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center
}
.eyebrow{
    font-size:12px;
    letter-spacing:.22em;
    font-weight:800;
    color:#d26883;
    text-transform:uppercase
}
.hero h1{
    font-size:clamp(46px,5.8vw,78px);
    letter-spacing:-.045em;
    line-height:1.15;
    margin:22px 0
}
.hero h1 a:hover{
    color:#d26883
}
.hero-lead{
    font-size:18px;
    max-width:560px;
    color:#5d5968
}
.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 22px;
    border-radius:10px;
    font-weight:800;
    font-size:14px;
    transition:transform .2s,box-shadow .2s
}
.button:hover{
    transform:translateY(-2px)
}
.primary{
    background:#d96383;
    color:white;
    box-shadow:0 9px 24px #de6d8a44
}
.secondary{
    background:white;
    color:#4b4657;
    border:1px solid #ddd8df
}
.light{
    background:#fff;
    color:#ac4065
}
.hero-stats{
    display:flex;
    gap:36px;
    margin-top:55px
}
.hero-stats div{
    display:flex;
    flex-direction:column
}
.hero-stats strong{
    font-size:22px;
    line-height:1.2
}
.hero-stats span{
    font-size:12px;
    color:var(--muted)
}
.hero-art{
    position:relative;
    min-height:490px;
    padding:15px 34px 24px
}
.hero-art:before{
    content:"";
    position:absolute;
    inset:45px 0 0 30px;
    background:#fce9e7;
    border-radius:46% 54% 51% 49%
}
.hero-image{
    position:relative;
    width:100%;
    height:450px;
    border-radius:190px 190px 24px 24px;
    box-shadow:0 24px 65px #63506328
}
.hero-orbit{
    position:absolute;
    right:2px;
    top:0;
    font-size:92px;
    color:#edc49a;
    z-index:1
}
.hero-art-label{
    position:absolute;
    left:0;
    bottom:0;
    background:white;
    border:1px solid var(--line);
    padding:17px 22px;
    border-radius:16px;
    box-shadow:0 12px 28px #4c3a491c;
    display:flex;
    flex-direction:column;
    min-width:185px
}
.hero-art-label span,.hero-art-label small{
    font-size:12px;
    color:var(--muted)
}
.hero-art-label strong{
    font-size:19px
}
.section{
    padding:84px 0;
    scroll-margin-top:76px
}
.section-warm{
    background:#faf6f3
}
.section-dark{
    background:#333046;
    color:white
}
.section-heading{
    margin-bottom:32px
}
.section-heading h2{
    font-size:clamp(29px,3vw,39px);
    line-height:1.25;
    letter-spacing:-.035em;
    margin:9px 0
}
.section-heading p{
    color:var(--muted);
    margin:0
}
.section-dark .section-heading p{
    color:#c8c4d1
}
.category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.category-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    min-height:162px;
    padding:22px;
    transition:transform .2s,box-shadow .2s
}
.category-card:hover,.comic-card:hover,.genre-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px #44405a13
}
.category-card>div{
    display:flex;
    flex-direction:column;
    position:relative
}
.category-icon{
    font-size:26px;
    color:#d97190
}
.category-card strong{
    font-size:18px;
    margin-top:16px
}
.category-card small{
    color:var(--muted)
}
.category-arrow{
    position:absolute;
    right:0;
    bottom:0;
    font-size:20px;
    color:#b8aeb8
}
.category-2,.category-6{
    background:#fff8f5
}
.category-3,.category-7{
    background:#f7f6ff
}
.category-4,.category-8{
    background:#f5faf8
}
.comic-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px;
    align-items:stretch
}
.comic-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-width:0;
    transition:transform .2s,box-shadow .2s
}
.cover-link{
    display:block;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#f3edf0
}
.cover{
    width:100%;
    height:100%;
    aspect-ratio:4/5
}
.card-copy{
    padding:17px;
    display:flex;
    flex-direction:column;
    flex:1
}
.card-meta{
    display:flex;
    justify-content:space-between;
    gap:6px;
    align-items:center;
    font-size:11px;
    color:var(--muted)
}
.chip{
    background:#fcecf1;
    color:#ba5775;
    border-radius:30px;
    padding:3px 8px;
    white-space:nowrap
}
.comic-card h3{
    font-size:17px;
    line-height:1.4;
    margin:12px 0 6px;
    min-height:2.8em
}
.comic-card p{
    font-size:12px;
    line-height:1.7;
    color:var(--muted);
    margin:0 0 13px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.text-link{
    margin-top:auto;
    color:#bd4d70;
    font-size:12px;
    font-weight:800
}
.section-more{
    display:inline-block;
    margin-top:23px;
    color:#b84868;
    font-weight:800
}
.feature-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:46px;
    align-items:center
}
.feature-visual{
    height:390px;
    border-radius:18px;
    overflow:hidden
}
.feature-image{
    width:100%;
    height:100%;
    aspect-ratio:6/4
}
.feature-copy h3,.completed-copy h3{
    font-size:38px;
    margin:13px 0;
    line-height:1.25
}
.feature-copy p,.completed-copy p{
    color:var(--muted);
    font-size:16px
}
.feature-copy .button{
    margin-top:13px
}
.mini-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:20px
}
.mini-card{
    border:1px solid var(--line);
    border-radius:11px;
    padding:13px 15px;
    font-size:13px
}
.mini-card>span{
    display:flex;
    gap:8px;
    flex-wrap:wrap
}
.mini-card b{
    color:#d06988
}
.mini-card em{
    font-style:normal;
    color:var(--muted);
    font-size:11px
}
.genre-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px
}
.genre-card{
    background:#ffffff12;
    border:1px solid #ffffff24;
    border-radius:15px;
    padding:22px;
    min-height:235px;
    transition:transform .2s
}
.genre-card span{
    font-size:25px;
    color:#efb8c6
}
.genre-card h3{
    font-size:17px;
    line-height:1.4
}
.genre-card p{
    font-size:12px;
    color:#cfccd6
}
.genre-card b{
    font-size:12px;
    color:#f4cad6
}
.rank-shell{
    display:grid;
    grid-template-columns:230px 1fr;
    gap:30px;
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px
}
.rank-tabs{
    display:flex;
    flex-direction:column;
    gap:10px
}
.rank-tab{
    text-align:left;
    border:0;
    background:#f8f6f7;
    border-radius:10px;
    padding:14px 16px;
    cursor:pointer;
    color:#696675
}
.rank-tab.active{
    background:#d96383;
    color:white;
    font-weight:800
}
.rank-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}
.rank-item{
    display:flex;
    align-items:center;
    gap:14px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px
}
.rank-number{
    font-size:22px;
    color:#d57b91
}
.rank-item div{
    display:flex;
    flex-direction:column;
    min-width:0
}
.rank-item b{
    font-size:14px
}
.rank-item div span{
    font-size:11px;
    color:var(--muted)
}
.rank-go{
    margin-left:auto;
    white-space:nowrap;
    font-size:11px;
    color:#b84868
}
.note-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.note-card{
    border-top:3px solid #df819b;
    background:#fff;
    padding:25px;
    border-radius:0 0 13px 13px;
    box-shadow:0 8px 26px #2e26350c
}
.note-card>span{
    font-size:13px;
    color:#d06c89
}
.note-card h3{
    font-size:19px
}
.note-card p{
    font-size:14px;
    color:var(--muted)
}
.completed-layout{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    background:#f2f0f8;
    border-radius:19px;
    padding:40px
}
.completed-episodes{
    display:grid;
    gap:9px
}
.completed-episodes a{
    padding:13px 16px;
    background:#fff;
    border-radius:9px;
    font-size:14px
}
.about-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:75px
}
.about-lead{
    font-size:23px;
    line-height:1.8;
    margin:0
}
.about-points{
    display:grid;
    gap:14px
}
.about-points div{
    border-left:3px solid #e287a0;
    padding-left:18px
}
.about-points p{
    color:var(--muted);
    margin:4px 0;
    font-size:14px
}
.faq-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.faq-grid>div{
    background:#fff;
    border:1px solid var(--line);
    padding:24px;
    border-radius:13px
}
.faq-grid h3{
    margin:0 0 9px
}
.faq-grid p{
    font-size:14px;
    color:var(--muted);
    margin:0
}
.subscribe-section{
    padding-top:20px;
    padding-bottom:0
}
.subscribe-panel{
    background:linear-gradient(120deg,#d16583,#a75981);
    color:white;
    padding:48px 55px;
    border-radius:20px 20px 0 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.subscribe-panel .eyebrow{
    color:#fbe1e7
}
.subscribe-panel h2{
    font-size:34px;
    margin:8px 0
}
.subscribe-panel p{
    max-width:650px;
    margin:0;
    color:#ffe9ef
}
.subscribe-panel .button{
    flex:none
}
.footer{
    background:#333047;
    color:#eeeaf2;
    padding:35px 0
}
.footer-inner{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap
}
.footer strong{
    font-size:17px
}
.footer p{
    font-size:12px;
    color:#c3bece;
    margin:0
}
.footer-links{
    display:flex;
    gap:18px;
    margin-left:auto;
    font-size:12px
}
.copyright{
    width:100%;
    border-top:1px solid #ffffff24;
    padding-top:16px
}
.page-hero{
    background:#faf4f4;
    padding:58px 0 60px
}
.breadcrumbs{
    display:flex;
    gap:10px;
    font-size:12px;
    color:#8a8490;
    margin-bottom:25px
}
.breadcrumbs a:hover{
    color:#bc5472
}
.page-hero h1{
    font-size:46px;
    margin:12px 0
}
.page-hero p{
    max-width:700px;
    color:#6d6875
}
.page-hero-meta{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px
}
.page-hero-meta span{
    background:#fff;
    border:1px solid #eee2e8;
    border-radius:30px;
    padding:5px 12px;
    font-size:12px
}
.listing-grid{
    row-gap:26px
}
.listing-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.chapter-top{
    padding:50px 0 36px;
    background:#faf4f4
}
.chapter-top h1{
    font-size:clamp(33px,5vw,52px);
    margin:10px 0
}
.chapter-meta{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
    font-size:12px;
    color:#797480
}
.reading-note{
    background:white;
    border-left:3px solid #da7792;
    padding:15px 18px;
    margin-top:25px;
    color:#67616c;
    font-size:14px
}
.chapter-content{
    padding:50px 0 75px
}
.chapter-content h2{
    font-size:24px
}
.story-panel{
    margin:32px 0 12px;
    background:#f7f2f3;
    border-radius:13px;
    overflow:hidden
}
.story-image{
    width:100%;
    aspect-ratio:4/5
}
.story-panel figcaption{
    text-align:center;
    padding:11px;
    color:#7c7380;
    font-size:12px
}
.story-text{
    font-size:17px;
    line-height:2.1;
    letter-spacing:.02em;
    margin:0 0 40px
}
.chapter-end{
    text-align:center;
    margin:65px 0 35px;
    border-top:1px solid var(--line);
    padding-top:34px
}
.chapter-end span{
    font-size:27px;
    color:#d87d99
}
.chapter-end h2{
    margin:5px
}
.chapter-end p{
    color:var(--muted)
}
.chapter-nav{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap
}
@media(max-width:1080px){
    .main-nav{
        overflow:auto;
        max-width:calc(100vw - 250px)
    }
    .header-cta{
        display:none
    }
    .hero-grid{
        gap:25px
    }
    .genre-grid{
        grid-template-columns:repeat(3,1fr)
    }
}
@media(max-width:760px){
    .container{
        width:min(100% - 30px,var(--max))
    }
    .header-inner{
        min-height:63px
    }
    .brand-name{
        font-size:15px
    }
    .logo-mark{
        width:34px;
        height:34px;
        font-size:18px
    }
    .main-nav{
        margin-left:5px;
        max-width:calc(100vw - 155px)
    }
    .nav-link{
        font-size:12px;
        padding:7px
    }
    .hero{
        padding:44px 0 60px
    }
    .hero-grid{
        grid-template-columns:1fr
    }
    .hero-art{
        min-height:350px;
        padding:0 20px
    }
    .hero-image{
        height:340px
    }
    .hero-art:before{
        inset:25px 0 0 10px
    }
    .hero-stats{
        margin-top:32px
    }
    .section{
        padding:56px 0
    }
    .category-grid,.comic-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:13px
    }
    .category-card{
        min-height:135px;
        padding:16px
    }
    .category-card strong{
        font-size:15px
    }
    .comic-card h3{
        font-size:14px
    }
    .card-copy{
        padding:12px
    }
    .feature-layout,.completed-layout,.about-grid{
        grid-template-columns:1fr;
        gap:20px
    }
    .feature-visual{
        height:300px
    }
    .mini-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .genre-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .rank-shell{
        display:block;
        padding:16px
    }
    .rank-tabs{
        flex-direction:row;
        overflow:auto;
        margin-bottom:16px
    }
    .rank-tab{
        white-space:nowrap;
        font-size:12px;
        padding:10px
    }
    .note-grid,.faq-grid{
        grid-template-columns:1fr
    }
    .subscribe-panel{
        padding:32px 24px;
        display:block
    }
    .subscribe-panel .button{
        margin-top:20px
    }
    .footer-links{
        margin-left:0
    }
    .page-hero h1{
        font-size:34px
    }
    .listing-bottom{
        display:block
    }
    .story-text{
        font-size:15px
    }
}
@media(max-width:450px){
    .hero-stats{
        gap:20px
    }
    .category-grid{
        gap:9px
    }
    .category-card{
        padding:13px
    }
    .category-icon{
        font-size:21px
    }
    .comic-grid{
        gap:9px
    }
    .card-meta{
        display:block
    }
    .card-meta span{
        display:block;
        width:max-content;
        margin-bottom:4px
    }
    .rank-list{
        grid-template-columns:1fr
    }
    .completed-layout{
        padding:25px
    }
    .genre-grid{
        grid-template-columns:1fr 1fr
    }
    .genre-card{
        padding:14px;
        min-height:220px
    }
    .chapter-nav .button{
        flex:1
    }
    .footer-inner{
        display:block
    }
    .footer-links{
        margin:18px 0
    }
}