@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
:root {
    --ink:#202328;
    --muted:#687078;
    --line:#e8e9ea;
    --surface:#fff;
    --soft:#f7f7f5;
    --accent:#6d5d91;
    --radius:20px
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    color:var(--ink);
    background:#fff;
    font:16px/1.65 'Noto Sans SC','Microsoft YaHei',sans-serif
}
img {
    display:block;
    max-width:100%
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer
}
.shell {
    width:min(1160px,calc(100% - 48px));
    margin-inline:auto
}
.narrow {
    max-width:820px
}
.site-header {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(18px)
}
.header-inner {
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    flex:none
}
.brand span {
    display:flex;
    flex-direction:column;
    line-height:1.25
}
.brand strong {
    font-size:19px;
    letter-spacing:.02em
}
.brand small {
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}
.main-nav {
    display:flex;
    align-items:center;
    gap:2px
}
.main-nav a {
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 9px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    color:#5c636b;
    white-space:nowrap;
    transition:.2s
}
.main-nav a:hover,.main-nav a.active {
    background:#f0ecf7;
    color:#5b497e
}
.icon {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none
}
.menu-toggle {
    display:none;
    border:0;
    background:#f4f1f8;
    border-radius:10px;
    padding:6px 12px;
    font-size:22px
}
.hero {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:48px;
    align-items:center;
    margin-top:48px;
    min-height:550px;
    padding:54px;
    background:#f4f0e9;
    border-radius:28px;
    overflow:hidden
}
.eyebrow {
    color:#806b96;
    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase
}
.hero-copy h1 {
    font-size:clamp(42px,5vw,72px);
    line-height:1.15;
    letter-spacing:-.045em;
    margin:18px 0 24px
}
.hero-copy h1 a:hover {
    color:#6d5d91
}
.hero-copy>p {
    max-width:540px;
    color:#596069;
    font-size:18px;
    line-height:1.9
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:11px 22px;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    border:1px solid transparent;
    transition:transform .2s,box-shadow .2s
}
.button:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 22px #24252a18
}
.button-dark {
    background:#23252a;
    color:white
}
.button-light {
    background:#fff;
    color:#26272c;
    border-color:#e4e1dc
}
.button-white {
    background:#fff;
    color:#43345c
}
.hero-notes {
    display:flex;
    gap:18px;
    margin-top:34px;
    color:#77706a;
    font-size:12px
}
.hero-notes span+span:before {
    content:'•';
    padding-right:18px
}
.hero-art {
    height:450px;
    position:relative;
    border-radius:180px 180px 20px 20px;
    background:#d4c2bf
}
.hero-art>img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit
}
.hero-sticker {
    position:absolute;
    bottom:20px;
    left:-24px;
    background:#fff;
    padding:18px 22px;
    border-radius:14px;
    box-shadow:0 12px 30px #0002;
    display:flex;
    flex-direction:column
}
.hero-sticker span,.hero-sticker small {
    font-size:11px;
    color:#8b8380
}
.hero-sticker strong {
    font-size:16px
}
.section {
    padding-block:88px;
    scroll-margin-top:94px
}
.section-tint {
    background:#f8f8f6;
    scroll-margin-top:94px
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:30px
}
.section-heading h2,.split-feature h2,.about-panel h2,.subscribe-panel h2 {
    font-size:clamp(28px,3vw,38px);
    line-height:1.3;
    letter-spacing:-.035em;
    margin:8px 0 0
}
.section-heading p {
    max-width:410px;
    margin:0;
    color:var(--muted);
    font-size:14px
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}
.category-card {
    min-height:198px;
    padding:24px;
    border:1px solid #00000008;
    border-radius:18px;
    display:flex;
    align-items:start;
    flex-direction:column;
    transition:transform .2s
}
.category-card:hover,.comic-card:hover {
    transform:translateY(-4px)
}
.category-card .icon {
    width:24px;
    height:24px;
    stroke-width:1.6
}
.category-card h3 {
    font-size:19px;
    margin:14px 0 4px
}
.category-card p {
    font-size:12px;
    line-height:1.6;
    color:#60636a;
    margin:0;
    flex:1
}
.category-card span {
    font-size:12px;
    font-weight:700;
    margin-top:14px
}
.tone-lavender {
    background:#efedf8
}
.tone-peach {
    background:#fff0e8
}
.tone-rose {
    background:#f8e9ec
}
.tone-blue {
    background:#e9f0f9
}
.tone-mint {
    background:#e9f4ee
}
.tone-yellow {
    background:#f9f2dc
}
.tone-purple {
    background:#eeeaf3
}
.tone-coral {
    background:#f9ece6
}
.feature-grid,.comic-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:22px
}
.comic-card {
    min-width:0;
    display:flex;
    flex-direction:column;
    transition:transform .2s
}
.cover {
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:16px;
    position:relative
}
.cover img {
    width:100%;
    height:100%;
    object-fit:cover
}
.cover-number {
    position:absolute;
    bottom:12px;
    left:12px;
    padding:4px 9px;
    border-radius:6px;
    background:#fff;
    color:#1c2327;
    font-size:11px;
    font-weight:800
}
.comic-info {
    padding:13px 1px 0;
    min-height:104px
}
.comic-info small {
    font-size:11px;
    color:#927aa3
}
.comic-info h3 {
    font-size:16px;
    margin:4px 0 2px;
    line-height:1.4
}
.comic-info p {
    font-size:12px;
    color:#737982;
    margin:0
}
.text-link {
    display:inline-block;
    margin-top:28px;
    font-size:14px;
    font-weight:700;
    color:#68518b
}
.rank-layout {
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:48px
}
.rank-intro {
    padding:35px;
    border-radius:20px;
    background:#eeeaf4
}
.rank-intro h3 {
    font-size:27px;
    line-height:1.45;
    margin:20px 0
}
.rank-intro p {
    font-size:14px;
    color:#687078
}
.rank-board {
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px
}
.rank-tabs {
    display:flex;
    gap:8px;
    border-bottom:1px solid var(--line);
    padding-bottom:17px
}
.rank-tabs button {
    border:0;
    background:none;
    padding:8px 14px;
    border-radius:8px;
    color:#6d7278;
    font-size:13px;
    font-weight:700
}
.rank-tabs button.active {
    background:#ede8f5;
    color:#5b497e
}
.rank-list {
    list-style:none;
    padding:0;
    margin:8px 0 0
}
.rank-list li {
    border-bottom:1px solid var(--line)
}
.rank-list li:last-child {
    border:0
}
.rank-list a {
    display:grid;
    grid-template-columns:36px 1fr auto;
    align-items:center;
    gap:12px;
    padding:14px 4px
}
.rank-list .rank-no {
    font-weight:800;
    color:#8e72aa;
    font-size:20px
}
.rank-list strong {
    display:block;
    font-size:14px
}
.rank-list small {
    display:block;
    color:#838990;
    font-size:11px
}
.rank-list .arrow {
    color:#9a91a3
}
.collection-grid,.guide-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px
}
.collection-card {
    padding:27px;
    background:#f8f7f5;
    border-radius:18px;
    min-height:285px;
    display:flex;
    flex-direction:column
}
.collection-number {
    font-size:12px;
    color:#937da5;
    font-weight:800
}
.collection-card h3 {
    font-size:22px;
    margin:16px 0 6px
}
.collection-card p {
    font-size:13px;
    color:#73777e;
    margin:0
}
.collection-links {
    margin-top:auto;
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    padding-top:20px
}
.collection-links a {
    font-size:11px;
    background:#fff;
    border-radius:6px;
    padding:5px 8px;
    color:#5d526a
}
.split-feature {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:65px
}
.split-feature p {
    font-size:15px;
    color:#687078;
    line-height:2;
    max-width:440px;
    margin:20px 0 26px
}
.split-cover {
    height:310px;
    border-radius:20px;
    overflow:hidden
}
.split-cover img {
    width:100%;
    height:100%;
    object-fit:cover
}
.guide-grid article {
    border-top:2px solid #d7cce4;
    padding:24px 10px
}
.guide-grid span {
    font-size:13px;
    color:#9c88ae;
    font-weight:800
}
.guide-grid h3 {
    font-size:22px;
    margin:12px 0 7px
}
.guide-grid p {
    font-size:13px;
    color:#777e84;
    margin:0
}
.about-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    padding:48px;
    background:#f0f3ef;
    border-radius:22px
}
.about-panel p {
    font-size:14px;
    line-height:2;
    color:#5e6761;
    margin:0 0 12px
}
.faq-list {
    display:grid;
    gap:10px
}
.faq-list details {
    border:1px solid var(--line);
    border-radius:11px;
    padding:17px 21px
}
.faq-list summary {
    font-weight:700;
    cursor:pointer
}
.faq-list p {
    font-size:13px;
    color:#727980;
    margin-bottom:0
}
.subscribe-panel {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding:45px 50px;
    background:#6b587f;
    color:#fff;
    border-radius:24px
}
.subscribe-panel .eyebrow {
    color:#e3d3ee
}
.subscribe-panel p {
    color:#e5ddec;
    font-size:14px
}
.subscribe-action {
    display:flex;
    flex-direction:column;
    gap:9px;
    align-items:center;
    flex:none
}
.subscribe-action small {
    font-size:11px;
    color:#ddd2e6
}
.site-footer {
    border-top:1px solid var(--line);
    padding:34px 0 42px
}
.footer-inner {
    text-align:center
}
.footer-inner strong {
    font-size:15px
}
.footer-inner p,.footer-inner small {
    color:#92979b;
    font-size:11px
}
.footer-links {
    display:flex;
    justify-content:center;
    gap:22px;
    margin:12px 0;
    font-size:12px;
    color:#676d74
}
.inner-top {
    padding-top:30px
}
.breadcrumbs {
    display:flex;
    gap:9px;
    align-items:center;
    font-size:12px;
    color:#8b9095;
    margin-bottom:28px
}
.breadcrumbs a:hover {
    color:#664a83
}
.column-hero {
    border-radius:24px;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:35px;
    padding:38px 48px;
    overflow:hidden
}
.column-hero h1 {
    font-size:clamp(31px,4vw,50px);
    margin:9px 0 15px
}
.column-hero p {
    font-size:15px;
    line-height:1.9;
    max-width:520px
}
.column-meta {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:22px 0
}
.column-meta span {
    font-size:11px;
    padding:5px 10px;
    background:#ffffffa0;
    border-radius:20px
}
.column-hero img {
    width:100%;
    height:300px;
    object-fit:cover;
    border-radius:16px
}
.column-list {
    padding-top:65px
}
.back-row {
    padding-bottom:80px;
    font-size:13px;
    color:#6d5d91;
    font-weight:700
}
.chapter-main {
    padding:30px 0 80px
}
.chapter-header {
    text-align:center;
    padding:35px 0 28px;
    border-bottom:1px solid var(--line)
}
.chapter-header h1 {
    font-size:clamp(30px,4vw,46px);
    line-height:1.35;
    margin:13px 0
}
.chapter-meta {
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    color:#94999f;
    font-size:12px
}
.reading-note {
    background:#f6f4f8;
    border-radius:12px;
    padding:16px 20px;
    text-align:left;
    color:#6d6873;
    font-size:13px;
    line-height:1.8;
    margin:30px 0 0
}
.chapter-content {
    padding-top:35px
}
.story-panel {
    margin:30px auto 18px;
    width:min(100%,650px)
}
.story-panel img {
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:15px;
    background:#f2f0f3
}
.story-panel figcaption {
    text-align:center;
    color:#98959b;
    font-size:11px;
    margin-top:10px
}
.chapter-content>p {
    font-size:16px;
    line-height:2.2;
    letter-spacing:.02em;
    margin:18px 0 32px
}
.chapter-end {
    text-align:center;
    padding:30px;
    border-top:1px solid var(--line);
    margin-top:40px
}
.chapter-end span {
    font-size:14px;
    color:#7f679a;
    font-weight:700
}
.chapter-end p {
    font-size:12px;
    color:#93989d
}
.chapter-actions {
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:24px
}
.chapter-actions a {
    padding:10px 22px;
    border:1px solid var(--line);
    border-radius:9px;
    font-size:13px;
    font-weight:700
}
.chapter-actions .next {
    background:#24252a;
    color:#fff;
    border-color:#24252a
}
a:focus-visible,button:focus-visible,summary:focus-visible {
    outline:3px solid #9d83ba;
    outline-offset:3px
}
@media(max-width:1050px) {
    .main-nav a {
    padding:8px 6px;
    font-size:11px
}
.main-nav .icon {
    width:15px
}
.header-inner {
    gap:12px
}
.brand strong {
    font-size:16px
}
.brand small {
    font-size:9px
}

}
@media(max-width:800px) {
    .menu-toggle {
    display:block
}
.main-nav {
    display:none;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:12px 24px;
    grid-template-columns:repeat(4,1fr);
    box-shadow:0 14px 20px #0001
}
.main-nav.open {
    display:grid
}
.main-nav a {
    justify-content:center;
    font-size:12px;
    padding:11px
}
.hero {
    grid-template-columns:1fr;
    gap:32px;
    padding:38px;
    min-height:0
}
.hero-art {
    height:360px;
    max-width:520px;
    width:100%;
    justify-self:center
}
.category-grid,.feature-grid,.comic-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.rank-layout,.split-feature,.about-panel {
    grid-template-columns:1fr;
    gap:20px
}
.rank-intro {
    padding:25px
}
.collection-grid,.guide-grid {
    grid-template-columns:1fr 1fr
}
.subscribe-panel {
    padding:35px;
    align-items:start;
    flex-direction:column
}
.column-hero {
    grid-template-columns:1fr
}
.column-hero img {
    height:280px
}

}
@media(max-width:540px) {
    .shell {
    width:min(100% - 32px,1160px)
}
.header-inner {
    min-height:68px
}
.main-nav {
    top:68px;
    grid-template-columns:repeat(2,1fr)
}
.hero {
    margin-top:26px;
    padding:28px 23px;
    border-radius:20px
}
.hero-copy h1 {
    font-size:40px
}
.hero-copy>p {
    font-size:15px
}
.hero-notes {
    gap:7px;
    flex-wrap:wrap;
    font-size:10px
}
.hero-notes span+span:before {
    padding-right:7px
}
.hero-art {
    height:300px
}
.hero-sticker {
    left:10px;
    bottom:10px;
    padding:10px 13px
}
.section {
    padding-block:58px
}
.section-heading {
    display:block
}
.section-heading p {
    margin-top:10px
}
.category-grid {
    gap:10px
}
.category-card {
    padding:17px;
    min-height:195px
}
.category-card h3 {
    font-size:16px
}
.category-card p {
    font-size:11px
}
.feature-grid,.comic-grid {
    gap:14px
}
.comic-info h3 {
    font-size:14px
}
.comic-info p {
    font-size:11px
}
.rank-tabs button {
    padding:7px 9px;
    font-size:11px
}
.rank-board {
    padding:14px
}
.collection-grid,.guide-grid {
    grid-template-columns:1fr
}
.collection-card {
    min-height:230px
}
.split-cover {
    height:240px
}
.about-panel {
    padding:29px
}
.subscribe-panel {
    padding:30px
}
.column-hero {
    padding:26px
}
.column-hero img {
    height:230px
}
.chapter-content>p {
    font-size:15px
}
.chapter-meta {
    gap:9px
}

}