:root {
    --ink:#25313e;
    --muted:#728092;
    --line:#e9edf1;
    --paper:#fff;
    --soft:#f7f8fa;
    --brand:#f36e5d;
    --brand-dark:#d95649;
    --navy:#1d344c;
    --radius:22px;
    --shadow:0 16px 42px rgba(38,59,79,.09)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
    line-height:1.65
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button {
    cursor:pointer
}
img {
    display:block;
    max-width:100%;
    object-fit:cover
}
.container {
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto
}
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px)
}
.header-inner {
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.brand {
    display:flex;
    align-items:center;
    gap:11px;
    flex:none
}
.brand img {
    width:46px;
    height:46px
}
.brand-text {
    display:flex;
    flex-direction:column;
    line-height:1.24
}
.brand strong {
    font-size:20px;
    letter-spacing:.04em
}
.brand small {
    color:var(--muted);
    font-size:11px;
    letter-spacing:.13em;
    margin-top:5px
}
.main-nav {
    display:flex;
    align-items:center;
    gap:5px
}
.nav-link {
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 10px;
    border-radius:12px;
    color:#596879;
    font-size:13px;
    white-space:nowrap;
    transition:.2s
}
.nav-link:hover,.nav-link.is-active {
    background:#fff0ed;
    color:var(--brand-dark)
}
.nav-icon {
    font-size:18px;
    line-height:1
}
.menu-toggle {
    display:none;
    border:0;
    background:#fff0ed;
    color:var(--brand);
    border-radius:10px;
    padding:6px 11px
}
.hero {
    margin-top:44px;
    min-height:552px;
    border-radius:32px;
    background:linear-gradient(120deg,#f7eee8 0%,#fff8ef 56%,#f7e7e4 100%);
    display:grid;
    grid-template-columns:1.03fr .97fr;
    overflow:hidden;
    position:relative
}
.hero-content {
    padding:73px 0 55px 65px;
    position:relative;
    z-index:2
}
.hero-kicker,.eyebrow {
    display:inline-block;
    color:var(--brand-dark);
    font-size:12px;
    font-weight:800;
    letter-spacing:.18em
}
.hero h1 {
    font-size:clamp(48px,6vw,78px);
    line-height:1.15;
    letter-spacing:.02em;
    margin:21px 0 18px;
    color:var(--navy)
}
.hero h1 a {
    color:inherit
}
.hero p {
    max-width:420px;
    color:#5f6d7a;
    font-size:17px;
    line-height:1.9
}
.hero-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:27px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:100px;
    padding:13px 24px;
    font-weight:700;
    font-size:14px;
    transition:transform .2s,background .2s
}
.button:hover {
    transform:translateY(-2px)
}
.button-primary {
    color:white;
    background:var(--brand)
}
.button-primary:hover {
    background:var(--brand-dark)
}
.button-light {
    background:#fff;
    color:var(--ink)
}
.hero-stats {
    display:flex;
    gap:37px;
    margin-top:56px
}
.hero-stats div {
    display:flex;
    flex-direction:column
}
.hero-stats strong {
    font-size:23px;
    color:var(--navy)
}
.hero-stats span {
    font-size:12px;
    color:var(--muted)
}
.hero-art {
    position:relative;
    display:flex;
    align-items:end;
    justify-content:center;
    padding:35px 44px 0
}
.hero-art::before {
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    border-radius:50%;
    background:#f5c9b9;
    top:37px;
    right:15px
}
.hero-cover {
    position:relative;
    width:min(390px,85%);
    height:490px;
    border:10px solid white;
    border-radius:190px 190px 20px 20px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(74,51,49,.22);
    transform:rotate(5deg)
}
.hero-cover img {
    width:100%;
    height:100%
}
.floating-note {
    position:absolute;
    left:10px;
    bottom:50px;
    background:#fff;
    border-radius:17px;
    padding:17px 22px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    z-index:2
}
.floating-note span {
    font-size:11px;
    color:var(--brand-dark);
    font-weight:700
}
.floating-note strong {
    font-size:20px
}
.floating-note small {
    color:var(--muted)
}
.discovery-bar {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
    padding:24px 34px;
    margin-top:24px;
    border:1px solid var(--line);
    border-radius:21px
}
.discovery-item {
    display:flex;
    align-items:center;
    gap:16px;
    padding:9px 25px;
    border-right:1px solid var(--line)
}
.discovery-item:last-child {
    border-right:0
}
.discovery-number {
    font-weight:800;
    color:#f3a59c;
    font-size:21px
}
.discovery-item>span:nth-child(2) {
    display:flex;
    flex-direction:column
}
.discovery-item strong {
    font-size:14px
}
.discovery-item small {
    color:var(--muted);
    font-size:12px
}
.arrow {
    margin-left:auto;
    color:var(--brand)
}
.section {
    padding-top:104px;
    padding-bottom:2px;
    scroll-margin-top:110px
}
.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px
}
.section-head h2 {
    font-size:clamp(28px,3vw,38px);
    line-height:1.3;
    margin:8px 0;
    color:var(--navy)
}
.section-head p {
    color:var(--muted);
    margin:0
}
.text-link {
    font-size:14px;
    color:var(--brand-dark);
    font-weight:700;
    white-space:nowrap
}
.category-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.category-card {
    border-radius:20px;
    min-height:207px;
    padding:25px;
    display:flex;
    flex-direction:column;
    align-items:start;
    transition:transform .2s,box-shadow .2s
}
.category-card:hover,.comic-card:hover,.article-card:hover {
    transform:translateY(-4px);
    box-shadow:var(--shadow)
}
.category-icon {
    font-size:31px;
    width:52px;
    height:52px;
    border-radius:15px;
    background:rgba(255,255,255,.7);
    display:grid;
    place-items:center;
    margin-bottom:14px
}
.category-card strong {
    font-size:18px
}
.category-card small {
    color:#647385;
    font-size:12px;
    line-height:1.6;
    margin-top:5px
}
.category-go {
    font-size:12px;
    font-weight:700;
    margin-top:auto;
    padding-top:14px
}
.category-peach,.cover-peach,.column-peach {
    background:#ffebe2
}
.category-gold,.cover-gold,.column-gold {
    background:#fff1cf
}
.category-lavender,.cover-lavender,.column-lavender {
    background:#eee9ff
}
.category-sky,.cover-sky,.column-sky {
    background:#e3f5f8
}
.category-mint,.cover-mint,.column-mint {
    background:#e4f6e8
}
.category-rose,.cover-rose,.column-rose {
    background:#ffe8ed
}
.category-blue,.cover-blue,.column-blue {
    background:#e5edff
}
.category-violet,.cover-violet,.column-violet {
    background:#eee9f3
}
.comic-grid {
    display:grid;
    gap:19px
}
.comic-grid.four,.chapter-strip {
    grid-template-columns:repeat(4,1fr)
}
.comic-card {
    display:block;
    min-width:0;
    border-radius:18px;
    transition:.2s
}
.cover {
    display:block;
    aspect-ratio:3/4;
    border-radius:17px;
    overflow:hidden;
    position:relative
}
.cover img {
    width:100%;
    height:100%
}
.cover-label {
    position:absolute;
    top:12px;
    left:12px;
    background:rgba(255,255,255,.92);
    border-radius:30px;
    padding:4px 11px;
    font-size:11px;
    font-weight:700
}
.card-copy {
    display:flex;
    flex-direction:column;
    padding:12px 2px 3px
}
.card-copy strong {
    font-size:17px
}
.card-copy small {
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.feature-section {
    margin-top:100px;
    background:#f7f8fa;
    padding:93px 0 102px
}
.feature-layout {
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:23px
}
.feature-main {
    height:430px;
    position:relative;
    overflow:hidden;
    border-radius:21px
}
.feature-main img {
    width:100%;
    height:100%
}
.feature-main::after {
    content:"";
    position:absolute;
    inset:40% 0 0;
    background:linear-gradient(transparent,rgba(18,25,34,.8))
}
.feature-overlay {
    position:absolute;
    bottom:28px;
    left:31px;
    right:30px;
    z-index:1;
    color:white;
    display:flex;
    flex-direction:column
}
.feature-overlay small {
    font-weight:700;
    color:#ffd8b6
}
.feature-overlay strong {
    font-size:30px;
    margin:3px 0
}
.feature-side {
    display:grid;
    gap:13px
}
.mini-story {
    background:#fff;
    border-radius:17px;
    padding:13px;
    display:flex;
    align-items:center;
    gap:14px;
    min-height:134px
}
.mini-story img {
    width:108px;
    height:108px;
    border-radius:11px;
    flex:none
}
.mini-story>span {
    display:flex;
    flex-direction:column;
    min-width:0
}
.mini-story small {
    color:var(--brand-dark);
    font-size:11px
}
.mini-story strong {
    font-size:18px
}
.mini-story span span {
    font-size:12px;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
}
.chapter-strip {
    display:grid;
    gap:18px
}
.horizontal-story {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    border-radius:22px;
    overflow:hidden;
    background:#e9f4f6;
    min-height:400px
}
.horizontal-art img {
    width:100%;
    height:100%
}
.horizontal-copy {
    padding:65px 55px;
    display:flex;
    flex-direction:column;
    align-items:start;
    justify-content:center
}
.horizontal-copy h3,.completed-panel h3 {
    font-size:33px;
    margin:9px 0
}
.horizontal-copy p,.completed-panel p {
    color:#617080;
    max-width:420px
}
.horizontal-copy .button {
    margin-top:12px
}
.tint-section {
    margin-top:100px;
    padding:92px 0 105px;
    background:#f4f8f4
}
.completed-panel {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    border-radius:22px;
    background:#fff0ec;
    padding:50px
}
.episode-list {
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:9px
}
.episode-list li a {
    display:block;
    background:#fff;
    padding:15px 19px;
    border-radius:12px;
    font-size:14px
}
.fantasy-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.fantasy-grid .cover {
    aspect-ratio:5/4
}
.ranking-section {
    margin-top:100px;
    padding:94px 0 104px;
    background:#f7f8fb
}
.rank-layout {
    display:grid;
    grid-template-columns:220px 1fr;
    gap:18px
}
.rank-tabs {
    display:flex;
    flex-direction:column;
    gap:9px
}
.rank-tabs button {
    text-align:left;
    border:0;
    border-radius:12px;
    background:#fff;
    padding:15px 19px;
    color:#647385;
    font-weight:700
}
.rank-tabs button.is-active {
    background:var(--navy);
    color:#fff
}
.rank-results {
    background:#fff;
    border-radius:20px;
    padding:14px 28px
}
.rank-list {
    display:none;
    list-style:none;
    margin:0;
    padding:0
}
.rank-list.is-active {
    display:block
}
.rank-list li {
    display:flex;
    align-items:center;
    gap:20px;
    padding:13px 0;
    border-bottom:1px solid var(--line)
}
.rank-list li:last-child {
    border-bottom:0
}
.rank-number {
    font-size:24px;
    color:#efa99c;
    font-weight:800;
    width:35px
}
.rank-list li a {
    display:flex;
    flex-direction:column;
    flex:1
}
.rank-list strong {
    font-size:16px
}
.rank-list small {
    color:var(--muted);
    font-size:12px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width:700px
}
.rank-arrow {
    color:var(--brand)
}
.steps-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px
}
.step-card {
    border:1px solid var(--line);
    border-radius:20px;
    padding:30px
}
.step-card>span {
    font-size:31px;
    font-weight:800;
    color:#f2ad9e
}
.step-card h3 {
    margin:12px 0 7px;
    font-size:20px
}
.step-card p {
    color:var(--muted);
    font-size:14px;
    margin:0
}
.about-section {
    display:grid;
    grid-template-columns:250px 1fr;
    align-items:center;
    gap:80px;
    padding-bottom:106px
}
.about-symbol {
    height:250px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#fff0eb;
    position:relative
}
.about-symbol::before {
    content:"";
    position:absolute;
    inset:30px;
    border:2px dashed #f7b3a8;
    border-radius:50%
}
.about-symbol span {
    font-size:110px;
    font-weight:900;
    color:var(--brand);
    transform:rotate(-12deg)
}
.about-section h2 {
    font-size:35px;
    margin:10px 0
}
.about-section p {
    color:#667486;
    line-height:2
}
.subscribe-section {
    background:#243b51;
    color:white;
    scroll-margin-top:100px
}
.subscribe-inner {
    min-height:290px;
    display:grid;
    grid-template-columns:1fr .9fr;
    align-items:center;
    gap:60px
}
.subscribe-section .eyebrow {
    color:#ffbdab
}
.subscribe-section h2 {
    font-size:36px;
    margin:11px 0
}
.subscribe-section p {
    color:#bdc8d0;
    margin:0
}
.subscribe-form {
    display:grid;
    grid-template-columns:1fr auto;
    gap:9px
}
.subscribe-form input {
    min-width:0;
    border:0;
    border-radius:12px;
    padding:15px 17px;
    background:white
}
.subscribe-form button {
    border:0;
    border-radius:12px;
    background:var(--brand);
    color:white;
    padding:15px 21px;
    font-weight:700
}
.subscribe-form .form-note {
    grid-column:1/-1;
    font-size:11px;
    color:#aebbc6;
    margin-top:5px
}
.site-footer {
    background:#1b2f41;
    color:#b5c3ce;
    font-size:12px
}
.footer-inner {
    min-height:72px;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.inner-page {
    padding-top:32px;
    padding-bottom:95px
}
.breadcrumbs {
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:13px;
    flex-wrap:wrap;
    margin-bottom:26px
}
.breadcrumbs a:hover {
    color:var(--brand)
}
.column-hero {
    border-radius:23px;
    min-height:240px;
    display:flex;
    align-items:center;
    gap:30px;
    padding:42px 60px
}
.column-icon {
    font-size:82px;
    color:var(--brand-dark)
}
.column-hero h1 {
    font-size:42px;
    line-height:1.2;
    margin:8px 0
}
.column-hero p {
    margin:0;
    color:#627284
}
.listing-section {
    padding-top:70px
}
.article-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:19px
}
.article-card {
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    transition:.2s;
    min-width:0;
    height:100%
}
.article-art {
    display:block;
    aspect-ratio:4/3;
    overflow:hidden
}
.article-art img {
    width:100%;
    height:100%
}
.article-card-body {
    padding:17px;
    display:flex;
    flex-direction:column;
    flex:1
}
.article-card-body small {
    color:var(--brand-dark);
    font-weight:800
}
.article-card-body strong {
    font-size:17px;
    margin:5px 0;
    min-height:56px;
    line-height:1.55
}
.article-card-body span {
    color:var(--muted);
    font-size:12px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:38px
}
.next-reads {
    border-top:1px solid var(--line);
    margin-top:75px;
    padding-top:36px
}
.next-reads h2 {
    font-size:23px
}
.next-pills {
    display:flex;
    flex-wrap:wrap;
    gap:10px
}
.next-pills a {
    border:1px solid var(--line);
    border-radius:100px;
    padding:8px 16px;
    font-size:13px
}
.reader-wrap {
    padding-top:31px;
    padding-bottom:100px
}
.reader-article {
    width:min(800px,100%);
    margin:auto
}
.reader-header {
    text-align:center;
    padding:30px 0 20px
}
.reader-header h1 {
    font-size:clamp(28px,4vw,43px);
    line-height:1.4;
    margin:13px 0 20px
}
.reader-meta {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    color:var(--muted);
    font-size:13px
}
.reading-note {
    background:#fff6f2;
    border-left:4px solid var(--brand);
    border-radius:10px;
    padding:18px 22px;
    margin:35px 0
}
.reading-note strong {
    font-size:15px
}
.reading-note p {
    font-size:13px;
    color:#657282;
    margin:5px 0 0
}
.story-content {
    font-size:17px;
    line-height:2.15
}
.story-content h2 {
    font-size:26px;
    margin:45px 0 19px
}
.story-content p {
    text-indent:2em;
    margin:23px 0
}
.chapter-image {
    margin:34px auto;
    max-width:680px;
    background:#f3f5f7;
    border-radius:14px;
    overflow:hidden
}
.chapter-image img {
    width:100%;
    aspect-ratio:4/5
}
.chapter-image figcaption {
    text-align:center;
    color:var(--muted);
    font-size:12px;
    padding:8px
}
.chapter-end {
    text-align:center;
    margin:55px 0 32px;
    padding:25px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}
.chapter-end span {
    display:block;
    color:var(--brand);
    font-size:25px
}
.chapter-end strong {
    font-size:20px
}
.chapter-end p {
    margin:5px;
    color:var(--muted);
    font-size:13px
}
.chapter-nav {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px
}
.chapter-nav a {
    text-align:center;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px 8px;
    font-size:13px;
    font-weight:700
}
.chapter-nav a:last-child {
    background:var(--brand);
    border-color:var(--brand);
    color:#fff
}
@media(max-width:1050px) {
    .header-inner {
        min-height:75px
    }
    .main-nav {
        gap:0
    }
    .nav-link {
        font-size:11px;
        padding:8px 7px
    }
    .nav-icon {
        font-size:15px
    }
    .brand-text small {
        display:none
    }
    .brand strong {
        font-size:17px
    }
    .hero-content {
        padding-left:45px
    }
    .discovery-item {
        padding-inline:13px
    }
    .category-grid,.article-grid {
        grid-template-columns:repeat(4,1fr)
    }
}
@media(max-width:760px) {
    .container {
        width:min(100% - 32px,640px)
    }
    .site-header {
        position:sticky
    }
    .header-inner {
        min-height:68px;
        flex-wrap:wrap
    }
    .menu-toggle {
        display:block;
        margin-left:auto
    }
    .main-nav {
        display:none;
        order:3;
        width:100%;
        padding:0 0 14px;
        grid-template-columns:repeat(4,1fr);
        gap:5px
    }
    .main-nav.open {
        display:grid
    }
    .nav-link {
        justify-content:center;
        flex-direction:column;
        gap:2px;
        font-size:11px
    }
    .hero {
        margin-top:22px;
        display:flex;
        flex-direction:column;
        min-height:0
    }
    .hero-content {
        padding:36px 27px 25px
    }
    .hero h1 {
        font-size:48px;
        margin:12px 0
    }
    .hero p {
        font-size:14px
    }
    .hero-stats {
        margin-top:28px;
        gap:25px
    }
    .hero-stats strong {
        font-size:19px
    }
    .hero-art {
        height:295px;
        padding:0 30px
    }
    .hero-art::before {
        width:290px;
        height:290px;
        top:3px;
        right:13px
    }
    .hero-cover {
        height:290px;
        width:235px
    }
    .floating-note {
        left:12px;
        bottom:20px;
        padding:9px 13px
    }
    .floating-note strong {
        font-size:14px
    }
    .floating-note small {
        font-size:10px
    }
    .discovery-bar {
        grid-template-columns:1fr;
        padding:10px 17px
    }
    .discovery-item {
        border-right:0;
        border-bottom:1px solid var(--line);
        padding:12px
    }
    .discovery-item:last-child {
        border-bottom:0
    }
    .section {
        padding-top:70px
    }
    .section-head {
        align-items:start
    }
    .section-head h2 {
        font-size:27px
    }
    .section-head p {
        font-size:13px
    }
    .text-link {
        font-size:12px
    }
    .category-grid {
        grid-template-columns:repeat(2,1fr);
        gap:10px
    }
    .category-card {
        min-height:190px;
        padding:17px
    }
    .category-card strong {
        font-size:16px
    }
    .category-card small {
        font-size:11px
    }
    .comic-grid.four,.chapter-strip,.article-grid {
        grid-template-columns:repeat(2,1fr);
        gap:14px
    }
    .cover-label {
        font-size:10px
    }
    .card-copy strong {
        font-size:15px
    }
    .feature-section,.tint-section,.ranking-section {
        margin-top:70px;
        padding:70px 0
    }
    .feature-layout,.horizontal-story,.completed-panel,.rank-layout,.about-section,.subscribe-inner {
        grid-template-columns:1fr
    }
    .feature-main {
        height:340px
    }
    .feature-side {
        gap:10px
    }
    .mini-story {
        min-height:90px
    }
    .mini-story img {
        width:75px;
        height:75px
    }
    .mini-story strong {
        font-size:16px
    }
    .horizontal-art {
        height:290px
    }
    .horizontal-copy {
        padding:30px
    }
    .completed-panel {
        padding:28px;
        gap:25px
    }
    .fantasy-grid,.steps-grid {
        grid-template-columns:1fr 1fr
    }
    .fantasy-grid .comic-card:last-child {
        display:none
    }
    .rank-tabs {
        flex-direction:row;
        overflow-x:auto
    }
    .rank-tabs button {
        flex:1;
        white-space:nowrap;
        font-size:12px;
        padding:11px
    }
    .rank-results {
        padding:10px 18px
    }
    .rank-list small {
        max-width:220px
    }
    .step-card {
        padding:20px
    }
    .step-card h3 {
        font-size:17px
    }
    .about-section {
        gap:22px;
        padding-bottom:70px
    }
    .about-symbol {
        width:160px;
        height:160px;
        margin:auto
    }
    .about-symbol span {
        font-size:72px
    }
    .about-symbol::before {
        inset:18px
    }
    .about-section h2 {
        font-size:28px
    }
    .subscribe-inner {
        gap:20px;
        padding:52px 0
    }
    .subscribe-section h2 {
        font-size:29px
    }
    .column-hero {
        padding:29px;
        min-height:190px;
        gap:14px
    }
    .column-icon {
        font-size:55px
    }
    .column-hero h1 {
        font-size:31px
    }
    .article-card-body {
        padding:12px
    }
    .article-card-body strong {
        font-size:15px;
        min-height:47px
    }
    .reader-meta {
        gap:7px 16px
    }
    .story-content {
        font-size:15px;
        line-height:2
    }
    .chapter-nav a {
        font-size:12px
    }
    .footer-inner {
        gap:12px;
        flex-wrap:wrap;
        padding:16px 0
    }
}
@media(max-width:430px) {
    .category-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .category-card {
        min-height:205px
    }
    .feature-main {
        height:290px
    }
    .fantasy-grid {
        grid-template-columns:1fr 1fr
    }
    .subscribe-form {
        grid-template-columns:1fr
    }
    .subscribe-form .form-note {
        grid-column:1
    }
    .rank-tabs button {
        padding:9px 6px;
        font-size:11px
    }
    .rank-list small {
        max-width:185px
    }
    .steps-grid {
        grid-template-columns:1fr
    }
    .chapter-nav {
        gap:5px
    }
    .chapter-nav a {
        padding:10px 3px;
        font-size:11px
    }
}