/* roulang page: index */
:root {
            --blue: #2457a6;
            --blue-dark: #183c73;
            --blue-soft: #eaf1fb;
            --green: #5f8c67;
            --lime: #d3e78b;
            --ink: #1c2a3d;
            --muted: #718096;
            --line: #e3eaf2;
            --paper: #ffffff;
            --canvas: #f5f8fc;
            --radius: 12px;
            --shadow: 0 12px 32px rgba(35, 63, 101, .08);
            --container: 1180px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: 88px; }
        body {
            margin: 0;
            padding-bottom: 76px;
            color: var(--ink);
            background: var(--canvas);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 15px;
            line-height: 1.7;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button, a { -webkit-tap-highlight-color: transparent; }
        button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
            outline: 3px solid rgba(36, 87, 166, .35);
            outline-offset: 3px;
        }
        .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
        .site-header {
            position: sticky; top: 0; z-index: 50;
            background: rgba(255,255,255,.96);
            border-bottom: 1px solid var(--line);
            backdrop-filter: blur(12px);
        }
        .nav-row { min-height: 76px; display: flex; align-items: center; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
        .brand-mark {
            width: 42px; height: 42px; display: grid; place-items: center;
            border-radius: 10px; color: #fff; background: var(--blue);
            font-size: 14px; font-weight: 800;
            box-shadow: 0 5px 12px rgba(36,87,166,.2);
        }
        .brand-name { font-size: 16px; font-weight: 750; line-height: 1.25; }
        .brand-caption { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
        .nav-links { display: flex; align-items: center; gap: 25px; margin-left: auto; }
        .nav-links a { padding: 9px 0; color: #536277; font-size: 14px; transition: color .2s ease; }
        .nav-links a:hover, .nav-links a.active { color: var(--blue); }
        .nav-links a.active { font-weight: 700; }
        .nav-cta, .button {
            min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
            gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px;
            background: var(--blue); color: #fff; font-weight: 700; cursor: pointer;
            transition: background .2s, box-shadow .2s, transform .2s, border-color .2s;
        }
        .nav-cta:hover, .button-primary:hover { background: var(--blue-dark); box-shadow: 0 8px 18px rgba(36,87,166,.2); transform: translateY(-1px); }
        .menu-toggle {
            display: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line);
            border-radius: 8px; background: white; color: var(--ink); cursor: pointer;
        }
        .hero {
            position: relative; overflow: hidden; min-height: 490px;
            display: flex; align-items: end; color: white;
            background:
                linear-gradient(90deg, rgba(12,29,53,.82) 0%, rgba(21,47,80,.58) 47%, rgba(28,54,79,.08) 100%),
                url('/assets/huangguo-hero.jpg') center 42% / cover no-repeat,
                #365579;
        }
        .hero::after {
            content: ""; position: absolute; inset: auto 0 0; height: 128px;
            background: linear-gradient(0deg, rgba(11,27,48,.56), transparent);
            pointer-events: none;
        }
        .hero-inner { position: relative; z-index: 1; width: 100%; padding: 60px 0 42px; }
        .hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #e7f0fb; font-size: 13px; }
        .hero-kicker::before { content: ""; width: 24px; height: 2px; background: var(--lime); }
        h1 { max-width: 760px; margin: 0; font-size: 48px; line-height: 1.2; font-weight: 800; }
        .hero-highlight { color: #e0f09c; }
        .hero-subtitle { margin: 13px 0 0; font-size: 20px; font-weight: 600; }
        .hero-copy { max-width: 650px; margin: 13px 0 21px; color: rgba(255,255,255,.88); font-size: 15px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
        .button-light { color: var(--blue-dark); background: #fff; }
        .button-light:hover { background: #eef4fb; transform: translateY(-1px); }
        .button-ghost { color: white; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.48); }
        .button-ghost:hover { background: rgba(255,255,255,.22); }
        .series-rail {
            position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 9px;
            margin-top: 30px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.35);
        }
        .series-rail a {
            padding: 6px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 99px;
            color: white; font-size: 12px; transition: background .2s;
        }
        .series-rail a:hover { background: rgba(255,255,255,.2); }
        main { overflow: hidden; }
        .section { padding: 66px 0; border-bottom: 1px solid var(--line); }
        .section-white { background: var(--paper); }
        .section-soft { background: #f0f5fb; }
        .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
        .section-head h2 { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 760; }
        .section-head p { max-width: 680px; margin: 9px 0 0; color: var(--muted); font-size: 14px; }
        .section-link { flex: 0 0 auto; color: var(--blue); font-weight: 700; font-size: 13px; }
        .section-link:hover { color: var(--blue-dark); }
        .eyebrow { display: block; margin-bottom: 7px; color: var(--blue); font-size: 11px; font-weight: 800; }
        .selling-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
        .selling-item { display: flex; gap: 16px; padding: 12px 26px; border-right: 1px solid var(--line); }
        .selling-item:first-child { padding-left: 0; }
        .selling-item:last-child { border-right: 0; }
        .point-number { color: var(--blue); font-size: 13px; font-weight: 800; }
        .selling-item h3 { margin: 0 0 5px; font-size: 17px; }
        .selling-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .work-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
        .work-card { min-width: 0; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s, box-shadow .2s; }
        .work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .poster {
            position: relative; aspect-ratio: 3 / 4; display: flex; align-items: end; overflow: hidden;
            padding: 15px; color: white; isolation: isolate;
        }
        .poster::before, .poster::after { content: ""; position: absolute; z-index: -1; }
        .poster::before { width: 82%; height: 82%; right: -25%; top: -13%; border: 1px solid rgba(255,255,255,.33); border-radius: 50%; }
        .poster::after { width: 110%; height: 44%; left: -10%; top: 21%; border-top: 1px solid rgba(255,255,255,.35); transform: rotate(-23deg); }
        .poster-title { max-width: 100%; font-size: 21px; font-weight: 800; line-height: 1.25; text-shadow: 0 2px 9px rgba(0,0,0,.3); }
        .poster-blue { background: linear-gradient(145deg,#376ca4,#1c3354 60%,#8299ad); }
        .poster-violet { background: linear-gradient(145deg,#7661a3,#302e55 65%,#c2a5b4); }
        .poster-green { background: linear-gradient(145deg,#579278,#1d4f53 65%,#c3d4a0); }
        .poster-yellow { background: linear-gradient(145deg,#c7a754,#627442 62%,#e6d6a1); }
        .poster-red { background: linear-gradient(145deg,#a85454,#492f46 60%,#c19883); }
        .poster-cyan { background: linear-gradient(145deg,#5c9ca5,#315772 63%,#ced7bf); }
        .poster-orange { background: linear-gradient(145deg,#c27c51,#584454 65%,#e1c49b); }
        .poster-navy { background: linear-gradient(145deg,#54728e,#273851 62%,#a5bac0); }
        .poster-pink { background: linear-gradient(145deg,#bc7188,#6a465e 65%,#e6c0b3); }
        .poster-olive { background: linear-gradient(145deg,#87945a,#3f594e 62%,#d2c78d); }
        .poster-lilac { background: linear-gradient(145deg,#9b83ad,#514b70 65%,#dac3bd); }
        .poster-slate { background: linear-gradient(145deg,#697b88,#293c50 65%,#bdc5c4); }
        .badge {
            position: absolute; top: 10px; left: 10px; padding: 4px 7px; border-radius: 5px;
            background: rgba(255,255,255,.95); color: var(--blue-dark); font-size: 10px; font-weight: 800;
        }
        .badge-update { color: #476a4b; background: #eff7e8; }
        .badge-hd { color: #2457a6; background: #edf4ff; }
        .work-info { padding: 12px; }
        .work-title-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
        .work-title { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
        .score { flex: 0 0 auto; color: #b47b20; font-size: 12px; font-weight: 800; }
        .work-meta { display: flex; justify-content: space-between; gap: 6px; margin-top: 5px; color: var(--muted); font-size: 11px; }
        .scene-strip { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 290px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
        .scene-art {
            position: relative; min-height: 290px; overflow: hidden;
            background: linear-gradient(135deg, rgba(21,53,87,.1), rgba(25,72,94,.12)), url('/assets/huangguo-scene.jpg') center / cover no-repeat, #7b9a9d;
        }
        .scene-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(30deg, rgba(20,42,60,.35), transparent 70%); }
        .scene-label { position: absolute; left: 23px; bottom: 20px; color: white; font-size: 13px; font-weight: 700; }
        .scene-copy { display: flex; flex-direction: column; justify-content: center; padding: 35px; }
        .scene-copy h3 { margin: 0 0 11px; font-size: 24px; }
        .scene-copy p { margin: 0; color: var(--muted); font-size: 14px; }
        .scene-steps { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
        .scene-steps span { padding: 7px 10px; background: var(--blue-soft); border-radius: 6px; color: var(--blue-dark); font-size: 12px; font-weight: 650; }
        .featured-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, minmax(135px, auto)); gap: 14px; }
        .featured-item { position: relative; display: flex; align-items: end; overflow: hidden; min-height: 135px; padding: 20px; border-radius: 9px; color: white; background: #405c79; }
        .featured-item:first-child { grid-row: span 2; }
        .featured-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(15,32,52,.76),rgba(15,32,52,.04)); }
        .featured-item::after { content: ""; position: absolute; width: 150px; height: 150px; right: -25px; top: -35px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
        .feature-one { background: linear-gradient(135deg,#355e83,#72929a); }
        .feature-two { background: linear-gradient(135deg,#6e597e,#343b59); }
        .feature-three { background: linear-gradient(135deg,#667f62,#3b5d5d); }
        .feature-four { background: linear-gradient(135deg,#9e7950,#5b5660); }
        .featured-copy { position: relative; z-index: 1; }
        .featured-copy small { color: #e3eea9; font-size: 11px; font-weight: 750; }
        .featured-copy h3 { margin: 4px 0 2px; font-size: 18px; }
        .featured-copy span { color: rgba(255,255,255,.8); font-size: 12px; }
        .channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .channel {
            display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 14px;
            padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 9px;
            transition: border-color .2s, box-shadow .2s;
        }
        .channel:hover { border-color: #b6c9e4; box-shadow: var(--shadow); }
        .channel-symbol { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }
        .channel h3 { margin: 0 0 4px; font-size: 15px; }
        .channel p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
        .quote-band { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 25px 0; border-block: 1px solid var(--line); }
        .quote-item { padding: 8px 22px; border-right: 1px solid var(--line); }
        .quote-item:first-child { padding-left: 0; }
        .quote-item:last-child { border-right: 0; }
        .quote-mark { color: var(--blue); font-size: 24px; line-height: 1; }
        .quote-item p { margin: 7px 0 8px; font-size: 14px; font-weight: 620; }
        .quote-item span { color: var(--muted); font-size: 12px; }
        .ranking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; }
        .rank-row { display: grid; grid-template-columns: 35px minmax(0,1fr) auto auto; align-items: center; gap: 13px; min-height: 57px; border-bottom: 1px solid var(--line); }
        .rank-no { color: #8a98a9; font-size: 16px; font-weight: 800; }
        .rank-row:nth-child(-n+3) .rank-no { color: var(--blue); }
        .rank-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
        .rank-tag { color: var(--muted); font-size: 11px; }
        .rank-stat { color: #a27021; font-size: 12px; font-weight: 700; white-space: nowrap; }
        .compare-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
        .compare-col { padding-top: 17px; border-top: 3px solid var(--blue); }
        .compare-col:last-child { border-color: var(--green); }
        .compare-col h3 { margin: 0 0 10px; font-size: 17px; }
        .compare-col p { margin: 0; color: var(--muted); font-size: 14px; }
        .compare-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .compare-points span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; color: #536277; font-size: 11px; }
        .news-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
        .news-item { display: grid; grid-template-columns: 82px 1fr; gap: 15px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
        .news-thumb { width: 82px; height: 66px; border-radius: 7px; background: #5b7890; }
        .news-blue { background: linear-gradient(135deg,#48729a,#263b5d); }
        .news-green { background: linear-gradient(135deg,#77956b,#375d5a); }
        .news-yellow { background: linear-gradient(135deg,#c2a65f,#62774f); }
        .news-red { background: linear-gradient(135deg,#a36962,#514659); }
        .news-violet { background: linear-gradient(135deg,#83719c,#394c6b); }
        .news-cyan { background: linear-gradient(135deg,#65a0a4,#416b81); }
        .news-item h3 { margin: 0 0 4px; font-size: 13px; line-height: 1.5; }
        .news-item time { color: var(--muted); font-size: 11px; }
        .topic-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 26px; align-items: stretch; }
        .topic-main { display: flex; flex-direction: column; justify-content: end; min-height: 260px; padding: 28px; border-radius: 10px; color: white; background: linear-gradient(120deg,rgba(25,48,78,.82),rgba(31,63,79,.2)), url('/assets/huangguo-topic.jpg') center / cover no-repeat, #547286; }
        .topic-main small { color: #e2eea8; font-weight: 750; }
        .topic-main h3 { margin: 7px 0; font-size: 24px; }
        .topic-main p { max-width: 520px; margin: 0; color: rgba(255,255,255,.85); font-size: 13px; }
        .topic-list { display: flex; flex-direction: column; justify-content: center; border-top: 1px solid var(--line); }
        .topic-link { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 650; }
        .topic-link span:last-child { color: var(--blue); }
        .update-list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .update-list::before { content: ""; position: absolute; top: 9px; left: 7px; right: 7px; height: 1px; background: #cbd8e7; }
        .update-item { position: relative; padding-top: 26px; }
        .update-item::before { content: ""; position: absolute; top: 4px; left: 0; width: 11px; height: 11px; border: 3px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #8ea8c8; }
        .update-date { color: var(--blue); font-size: 11px; font-weight: 800; }
        .update-item h3 { margin: 5px 0 1px; font-size: 14px; }
        .update-item p { margin: 0; color: var(--muted); font-size: 12px; }
        .faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
        .faq-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
        .faq-item summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: "+"; color: var(--blue); font-size: 19px; line-height: 1; }
        .faq-item[open] summary::after { content: "−"; }
        .faq-item p { margin: 10px 28px 0 0; color: var(--muted); font-size: 13px; }
        .assurance-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .assurance { display: flex; gap: 12px; align-items: flex-start; }
        .assurance-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; background: #e9f2e8; color: var(--green); font-size: 15px; font-weight: 800; }
        .assurance h3 { margin: 0 0 3px; font-size: 14px; }
        .assurance p { margin: 0; color: var(--muted); font-size: 12px; }
        .fixed-cta {
            position: fixed; z-index: 45; right: 0; bottom: 0; left: 0; min-height: 62px;
            display: flex; align-items: center; background: rgba(255,255,255,.97);
            border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(33,55,84,.06);
            backdrop-filter: blur(10px);
        }
        .fixed-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
        .fixed-inner p { margin: 0; color: #536277; font-size: 13px; font-weight: 600; }
        .fixed-inner .button { min-height: 40px; }
        .site-footer { padding: 48px 0 22px; background: #17263b; color: #d9e2ed; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 33px; }
        .footer-brand { color: white; }
        .footer-intro { max-width: 300px; margin: 14px 0 0; color: #aebbd0; font-size: 12px; }
        .footer-col h3 { margin: 0 0 13px; color: white; font-size: 13px; }
        .footer-col a { display: block; width: fit-content; margin: 8px 0; color: #aebbd0; font-size: 12px; }
        .footer-col a:hover { color: white; }
        .copyright { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13); color: #9babc0; font-size: 11px; }
        .copyright a { color: #c1ccda; }
        @media (max-width: 1024px) {
            .nav-row { gap: 18px; }
            .nav-links { gap: 16px; }
            .work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .section { padding: 55px 0; }
            .container { width: min(var(--container), calc(100% - 40px)); }
        }
        @media (max-width: 768px) {
            .nav-row { min-height: 68px; }
            .brand-name { font-size: 14px; }
            .nav-cta { display: none; }
            .menu-toggle { display: inline-grid; place-items: center; }
            .nav-links {
                position: absolute; top: 68px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch;
                gap: 0; padding: 8px 20px 16px; background: white; border-bottom: 1px solid var(--line);
                box-shadow: 0 14px 22px rgba(24,49,81,.08);
            }
            .nav-links.is-open { display: flex; }
            .nav-links a { padding: 12px 4px; border-bottom: 1px solid #eef1f5; }
            .hero { min-height: 470px; background-position: 57% center; }
            .hero-inner { padding: 48px 0 29px; }
            h1 { max-width: 580px; font-size: 39px; }
            .hero-copy { max-width: 570px; }
            .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
            .selling-points { grid-template-columns: 1fr; }
            .selling-item, .selling-item:first-child { padding: 15px 0; border-right: 0; border-bottom: 1px solid var(--line); }
            .selling-item:last-child { border-bottom: 0; }
            .channel-grid { grid-template-columns: repeat(2, 1fr); }
            .scene-strip { grid-template-columns: 1fr; }
            .scene-art { min-height: 240px; }
            .scene-copy { padding: 25px; }
            .featured-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
            .featured-item:first-child { grid-row: auto; min-height: 185px; }
            .featured-item { min-height: 135px; }
            .ranking-grid { grid-template-columns: 1fr; }
            .rank-row:nth-child(6) { border-top: 1px solid var(--line); }
            .news-layout { grid-template-columns: 1fr; }
            .topic-layout { grid-template-columns: 1fr; }
            .topic-main { min-height: 230px; }
            .update-list { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
            .update-list::before { display: none; }
            .faq-list { grid-template-columns: 1fr; }
            .assurance-row { grid-template-columns: 1fr; gap: 18px; }
            .footer-grid { grid-template-columns: 1.2fr 1fr; }
        }
        @media (max-width: 520px) {
            body { padding-bottom: 72px; }
            .container { width: calc(100% - 32px); }
            .section { padding: 43px 0; }
            .section-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 20px; }
            .section-head h2 { font-size: 23px; }
            .section-head p { font-size: 13px; }
            .hero { min-height: 490px; background-position: 62% center; }
            .hero-inner { padding: 41px 0 24px; }
            h1 { font-size: 34px; }
            .hero-subtitle { font-size: 17px; }
            .hero-copy { font-size: 13px; }
            .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
            .hero-actions .button { padding-inline: 10px; font-size: 13px; }
            .series-rail { gap: 7px; margin-top: 23px; }
            .series-rail a { padding: 5px 9px; font-size: 11px; }
            .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
            .work-info { padding: 10px; }
            .poster-title { font-size: 18px; }
            .channel-grid { grid-template-columns: 1fr; }
            .featured-grid { gap: 10px; }
            .featured-item { min-height: 130px; padding: 14px; }
            .featured-item:first-child { min-height: 150px; }
            .featured-copy h3 { font-size: 15px; }
            .quote-band { grid-template-columns: 1fr; padding: 10px 0; }
            .quote-item, .quote-item:first-child { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
            .quote-item:last-child { border-bottom: 0; }
            .rank-row { grid-template-columns: 28px minmax(0,1fr) auto; gap: 9px; }
            .rank-tag { display: none; }
            .compare-layout { grid-template-columns: 1fr; gap: 23px; }
            .news-item { grid-template-columns: 72px 1fr; gap: 12px; }
            .news-thumb { width: 72px; height: 59px; }
            .update-list { gap: 16px 12px; }
            .update-item h3 { font-size: 13px; }
            .fixed-inner { gap: 10px; }
            .fixed-inner p { max-width: 60%; font-size: 12px; line-height: 1.4; }
            .fixed-inner .button { min-height: 38px; padding-inline: 12px; font-size: 12px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
            .footer-grid > :first-child { grid-column: 1 / -1; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
        }

/* roulang page: category1 */
:root{--blue:#2457a6;--blue-dark:#183c73;--blue-soft:#eaf1fb;--green:#5f8c67;--lime:#d3e78b;--ink:#1c2a3d;--muted:#718096;--line:#e3eaf2;--paper:#fff;--canvas:#f5f8fc;--radius:12px;--shadow:0 12px 32px rgba(35,63,101,.08);--container:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;padding-bottom:76px;color:var(--ink);background:var(--canvas);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(36,87,166,.35);outline-offset:3px}.container{width:min(var(--container),calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav-row{min-height:76px;display:flex;align-items:center;gap:30px}.brand{display:inline-flex;align-items:center;gap:11px;flex:0 0 auto}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;color:#fff;background:var(--blue);font-size:14px;font-weight:800;box-shadow:0 5px 12px rgba(36,87,166,.2)}.brand-name{font-size:16px;font-weight:750;line-height:1.25}.brand-caption{display:block;margin-top:3px;color:var(--muted);font-size:11px;font-weight:500}.nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}.nav-links a{padding:9px 0;color:#536277;font-size:14px;transition:.2s}.nav-links a:hover,.nav-links a.active{color:var(--blue)}.nav-links a.active{font-weight:700}.nav-cta,.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border:1px solid transparent;border-radius:8px;background:var(--blue);color:#fff;font-weight:700;transition:.2s}.nav-cta:hover,.button:hover{background:var(--blue-dark);box-shadow:0 8px 18px rgba(36,87,166,.2);transform:translateY(-1px)}.menu-toggle{display:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
main{overflow:hidden}.section{padding:58px 0;border-bottom:1px solid var(--line)}.section-white{background:var(--paper)}.section-soft{background:#f0f5fb}.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:26px}.section-head h2{margin:0;font-size:27px;line-height:1.3}.section-head p{max-width:680px;margin:8px 0 0;color:var(--muted);font-size:14px}.eyebrow{display:block;margin-bottom:7px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.08em}.crumb{padding:20px 0 10px;color:var(--muted);font-size:13px}.crumb a{color:var(--blue)}.category-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:38px;align-items:center}.category-intro h1{margin:0;font-size:42px;line-height:1.2}.category-intro h1 span{color:var(--blue)}.category-intro p{max-width:650px;color:var(--muted);font-size:16px}.intro-panel{padding:25px;background:var(--blue);color:white;border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}.intro-panel:after{content:"";position:absolute;width:170px;height:170px;border:1px solid rgba(255,255,255,.2);border-radius:50%;right:-45px;bottom:-65px}.intro-panel strong{display:block;font-size:28px}.intro-panel small{color:#dce9f8}.overview{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.overview-item{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 18px rgba(35,63,101,.04)}.overview-item b{display:block;margin-bottom:7px;color:var(--blue);font-size:18px}.overview-item p{margin:0;color:var(--muted);font-size:13px}.filterbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filter{padding:8px 15px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--muted);font-size:13px}.filter.active,.filter:hover{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}.sort{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted)}.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.work-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:.2s}.work-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.poster{height:205px;display:flex;align-items:end;padding:17px;position:relative;color:#fff;background:linear-gradient(145deg,#7f9db1,#263a57 65%,#c4d0c5)}.poster:nth-child(2n){background:linear-gradient(145deg,#bd9f8b,#465470 65%,#d4d8c1)}.poster:nth-child(3n){background:linear-gradient(145deg,#71928c,#233a5b 66%,#d5c79a)}.poster-title{font-size:21px;font-weight:800;line-height:1.25;text-shadow:0 2px 9px rgba(0,0,0,.35)}.badge{position:absolute;top:12px;left:12px;padding:4px 8px;border-radius:5px;background:#e7f3da;color:#477149;font-size:11px;font-weight:700}.badge.blue{background:#e3efff;color:var(--blue)}.card-body{padding:14px}.card-body h3{margin:0 0 5px;font-size:16px}.card-body p{margin:0;color:var(--muted);font-size:13px}.meta{display:flex;justify-content:space-between;margin-top:12px;color:var(--muted);font-size:12px}.rating{color:#c17c2e;font-weight:700}.more{text-align:center;margin-top:27px}.button-outline{background:#fff;color:var(--blue);border-color:#b9cce5}.button-outline:hover{background:var(--blue-soft)}.updates{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}.timeline{border-left:2px solid #c9d9ee;padding-left:24px}.update{position:relative;padding:0 0 22px}.update:before{content:"";position:absolute;left:-31px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:3px solid var(--blue-soft)}.update time{color:var(--blue);font-size:12px}.update h3{margin:3px 0;font-size:16px}.update p{margin:0;color:var(--muted);font-size:13px}.rank-box{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.rank-row{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:9px;padding:12px 0;border-bottom:1px solid var(--line)}.rank-row:last-child{border:0}.rank-no{color:var(--blue);font-weight:800}.rank-row small{display:block;color:var(--muted)}.faq-list{max-width:850px;margin:auto}.faq-list details{background:#fff;border-bottom:1px solid var(--line);padding:18px 0}.faq-list summary{cursor:pointer;font-weight:700;list-style:none}.faq-list summary:after{content:"＋";float:right;color:var(--blue);font-size:20px}.faq-list details[open] summary:after{content:"－"}.faq-list p{margin:12px 0 0;color:var(--muted);font-size:14px}.site-footer{padding:54px 0 25px;background:#fff}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}.footer-intro{max-width:300px;color:var(--muted);font-size:13px}.footer-col h3{margin:0 0 12px;font-size:14px}.footer-col a{display:block;margin:8px 0;color:var(--muted);font-size:13px}.footer-col a:hover{color:var(--blue)}.copyright{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.copyright a{color:var(--blue)}.fixed-cta{position:fixed;z-index:40;right:22px;bottom:20px;display:flex;align-items:center;gap:15px;padding:10px 12px 10px 18px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(24,60,115,.16);font-size:13px}.fixed-cta .button{min-height:38px;padding:0 14px;font-size:13px}
@media(max-width:1024px){.nav-links{gap:15px}.work-grid{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
@media(max-width:768px){.container{width:min(var(--container),calc(100% - 32px))}.nav-row{min-height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;padding:12px 20px 18px;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}.nav-links.open{display:flex}.nav-links a{padding:11px 0}.nav-cta{display:none}.category-intro,.updates{grid-template-columns:1fr}.category-intro h1{font-size:34px}.overview{grid-template-columns:1fr}.work-grid{grid-template-columns:repeat(2,1fr);gap:14px}.poster{height:185px}.section{padding:45px 0}.section-head{display:block}.section-link{display:inline-block;margin-top:12px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.fixed-cta{left:16px;right:16px;justify-content:space-between}}
@media(max-width:520px){.brand-name{font-size:14px}.brand-caption{font-size:10px}.filterbar{display:block}.sort{margin-top:12px;width:100%}.work-grid{grid-template-columns:1fr 1fr}.poster{height:160px;padding:12px}.poster-title{font-size:17px}.card-body{padding:11px}.card-body h3{font-size:14px}.footer-grid{grid-template-columns:1fr}.fixed-cta{font-size:12px}.fixed-cta .button{padding:0 11px}}

/* roulang page: category2 */
:root {
      --blue: #2457a6;
      --blue-dark: #183c73;
      --blue-soft: #eaf1fb;
      --green: #5f8c67;
      --lime: #d3e78b;
      --ink: #1c2a3d;
      --muted: #718096;
      --line: #e3eaf2;
      --paper: #ffffff;
      --canvas: #f5f8fc;
      --radius: 12px;
      --shadow: 0 12px 32px rgba(35, 63, 101, .08);
      --container: 1180px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 88px; }
    body {
      margin: 0;
      padding-bottom: 32px;
      color: var(--ink);
      background: var(--canvas);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 15px;
      line-height: 1.7;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    button:focus-visible, a:focus-visible, summary:focus-visible {
      outline: 3px solid rgba(36, 87, 166, .35);
      outline-offset: 3px;
    }
    .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: rgba(255,255,255,.96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }
    .nav-row { min-height: 76px; display: flex; align-items: center; gap: 30px; }
    .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
    .brand-mark {
      width: 42px; height: 42px; display: grid; place-items: center;
      border-radius: 10px; color: #fff; background: var(--blue);
      font-size: 14px; font-weight: 800; box-shadow: 0 5px 12px rgba(36,87,166,.2);
    }
    .brand-name { font-size: 16px; font-weight: 750; line-height: 1.25; }
    .brand-caption { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
    .nav-links { display: flex; align-items: center; gap: 25px; margin-left: auto; }
    .nav-links a { padding: 9px 0; color: #536277; font-size: 14px; transition: color .2s ease; }
    .nav-links a:hover, .nav-links a.active { color: var(--blue); }
    .nav-links a.active { font-weight: 700; }
    .nav-cta, .button {
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
      gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px;
      background: var(--blue); color: #fff; font-weight: 700; cursor: pointer;
      transition: background .2s, box-shadow .2s, transform .2s, border-color .2s;
    }
    .nav-cta:hover, .button-primary:hover {
      background: var(--blue-dark); box-shadow: 0 8px 18px rgba(36,87,166,.2); transform: translateY(-1px);
    }
    .menu-toggle {
      display: none; width: 44px; height: 44px; margin-left: auto;
      border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); cursor: pointer;
    }
    main { overflow: hidden; }
    .section { padding: 55px 0; border-bottom: 1px solid var(--line); }
    .section-white { background: var(--paper); }
    .section-soft { background: #f0f5fb; }
    .breadcrumb { padding: 22px 0 0; color: var(--muted); font-size: 13px; }
    .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
    .breadcrumb li + li::before { content: "/"; margin-right: 9px; color: #a6b1bf; }
    .breadcrumb a:hover { color: var(--blue); }
    .category-heading {
      display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 36px;
      padding-top: 31px; padding-bottom: 35px;
    }
    .eyebrow { display: block; margin-bottom: 8px; color: var(--blue); font-size: 12px; font-weight: 800; }
    h1, h2, h3, p { margin-top: 0; }
    h1 { max-width: 780px; margin-bottom: 11px; font-size: 38px; line-height: 1.25; }
    .category-heading p { max-width: 730px; margin: 0; color: var(--muted); font-size: 15px; }
    .heading-note { padding-left: 20px; border-left: 2px solid var(--lime); color: #536277; font-size: 13px; }
    .heading-note strong { display: block; margin-bottom: 3px; color: var(--blue-dark); font-size: 16px; }
    .overview-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
    .overview-copy h2, .section-head h2 { margin-bottom: 10px; font-size: 25px; line-height: 1.35; }
    .overview-copy p { max-width: 650px; margin: 0; color: var(--muted); }
    .topic-list { display: flex; flex-wrap: wrap; gap: 9px; }
    .topic-tag, .filter-chip {
      display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px;
      border: 1px solid var(--line); border-radius: 7px; background: white;
      color: #536277; font-size: 13px;
    }
    .topic-tag::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--green); }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
    .section-head p { max-width: 620px; margin: 0; color: var(--muted); font-size: 14px; }
    .section-link { flex: 0 0 auto; color: var(--blue); font-size: 13px; font-weight: 700; }
    .section-link:hover { color: var(--blue-dark); }
    .catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 34px; align-items: start; }
    .filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 0 20px; }
    .filter-label { margin-right: 3px; color: var(--muted); font-size: 13px; }
    .filter-chip { min-height: 32px; cursor: default; transition: .2s ease; }
    .filter-chip.is-active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 700; }
    .catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
    .work-card {
      min-width: 0; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius);
      transition: transform .2s, box-shadow .2s;
    }
    .work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .poster {
      position: relative; display: flex; align-items: end; aspect-ratio: 4 / 3; overflow: hidden;
      padding: 16px; isolation: isolate; color: #fff;
    }
    .poster::before {
      position: absolute; z-index: -1; inset: 0; content: "";
      background: linear-gradient(0deg, rgba(16,30,49,.78), rgba(16,30,49,.02) 75%);
    }
    .poster::after {
      position: absolute; z-index: -2; inset: 0; content: "";
      background: linear-gradient(135deg, #708eac, #314c68 58%, #b3c6c6);
      transition: transform .35s;
    }
    .work-card:hover .poster::after { transform: scale(1.04); }
    .poster-2::after { background: linear-gradient(135deg, #8b9f9a, #496b72 55%, #c5b9a1); }
    .poster-3::after { background: linear-gradient(135deg, #a1a4b0, #505b76 55%, #c39183); }
    .poster-4::after { background: linear-gradient(135deg, #8c9eae, #31425d 55%, #93a6a2); }
    .poster-5::after { background: linear-gradient(135deg, #ad9d89, #65716d 55%, #718c9b); }
    .poster-6::after { background: linear-gradient(135deg, #819aaa, #375274 55%, #b4a89d); }
    .poster-title { max-width: 100%; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; }
    .poster-kicker { position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 5px; background: rgba(255,255,255,.92); color: var(--blue-dark); font-size: 11px; font-weight: 800; }
    .poster-kicker.update { color: #426b4b; }
    .work-info { padding: 13px 14px 14px; }
    .work-info h3 { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
    .work-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px; color: var(--muted); font-size: 12px; }
    .rating { color: #9a741e; font-weight: 750; }
    .genre-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .genre-tags span { padding: 2px 7px; border-radius: 4px; background: #f1f5f9; color: #66758a; font-size: 11px; }
    .catalog-more { display: flex; justify-content: center; padding-top: 22px; }
    .button-outline { border-color: #c8d5e5; background: white; color: var(--blue); }
    .button-outline:hover { border-color: var(--blue); background: var(--blue-soft); }
    .side-panel { padding-top: 3px; }
    .side-panel h2 { margin: 0 0 13px; font-size: 18px; }
    .rank-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
    .rank-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .rank-number { color: #8b98a8; font-size: 13px; font-weight: 800; }
    .rank-list li:nth-child(-n+3) .rank-number { color: var(--blue); }
    .rank-title { overflow: hidden; color: #34445a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .rank-score { color: var(--muted); font-size: 11px; }
    .rank-foot { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
    .new-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .new-item { min-width: 0; padding: 15px 16px; border-left: 2px solid #cbd9e9; background: rgba(255,255,255,.68); }
    .new-item time { display: block; margin-bottom: 5px; color: var(--blue); font-size: 11px; font-weight: 750; }
    .new-item h3 { margin: 0 0 4px; font-size: 14px; }
    .new-item p { margin: 0; color: var(--muted); font-size: 12px; }
    .faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }
    .faq-intro h2 { margin: 0 0 9px; font-size: 25px; }
    .faq-intro p { margin: 0; color: var(--muted); font-size: 14px; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary { position: relative; padding: 16px 36px 16px 0; cursor: pointer; font-weight: 700; list-style: none; }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after { position: absolute; right: 4px; top: 14px; content: "+"; color: var(--blue); font-size: 22px; font-weight: 400; }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-list details p { margin: -3px 0 17px; color: var(--muted); font-size: 14px; }
    .site-footer { padding: 48px 0 18px; background: #fff; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 35px; padding-bottom: 31px; }
    .footer-brand { margin-bottom: 13px; }
    .footer-intro { max-width: 330px; margin: 0; color: var(--muted); font-size: 13px; }
    .footer-col h3 { margin: 0 0 12px; font-size: 14px; }
    .footer-col a { display: block; width: fit-content; margin: 7px 0; color: var(--muted); font-size: 13px; }
    .footer-col a:hover { color: var(--blue); }
    .copyright { padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
    .copyright a { color: var(--blue); }
    @media (max-width: 1024px) {
      .nav-row { gap: 18px; }
      .nav-links { gap: 15px; }
      .nav-cta { display: none; }
      .catalog-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 24px; }
      .catalog-grid { gap: 12px; }
      .footer-grid { gap: 22px; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 36px)); }
      .nav-row { min-height: 68px; }
      .menu-toggle { display: grid; place-items: center; }
      .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
        display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink);
      }
      .menu-toggle span { position: relative; }
      .menu-toggle span::before, .menu-toggle span::after { position: absolute; left: 0; content: ""; }
      .menu-toggle span::before { top: -6px; }
      .menu-toggle span::after { top: 6px; }
      .nav-links {
        display: none; position: absolute; top: 68px; left: 0; right: 0; z-index: 55;
        margin: 0; padding: 12px 22px 18px; border-bottom: 1px solid var(--line);
        background: white; box-shadow: 0 12px 18px rgba(35,63,101,.08);
      }
      .nav-links.is-open { display: grid; gap: 2px; }
      .nav-links a { padding: 10px 0; }
      .category-heading { grid-template-columns: 1fr; gap: 18px; padding-top: 25px; }
      h1 { font-size: 32px; }
      .heading-note { max-width: 420px; }
      .overview-row { grid-template-columns: 1fr; gap: 22px; }
      .catalog-layout { grid-template-columns: 1fr; }
      .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .side-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
      .side-panel h2, .side-panel .rank-list, .side-panel .rank-foot { grid-column: 1 / -1; }
      .new-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .faq-layout { grid-template-columns: 1fr; gap: 22px; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
      body { font-size: 14px; }
      .container { width: calc(100% - 32px); }
      .brand-name { font-size: 14px; }
      .brand-mark { width: 39px; height: 39px; }
      .section { padding: 39px 0; }
      .breadcrumb { padding-top: 16px; }
      .category-heading { padding-top: 23px; padding-bottom: 27px; }
      h1 { font-size: 29px; }
      .overview-copy h2, .section-head h2, .faq-intro h2 { font-size: 22px; }
      .section-head { display: block; margin-bottom: 19px; }
      .section-head p { margin-top: 7px; }
      .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 8px; }
      .filter-label, .filter-chip { flex: 0 0 auto; }
      .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
      .poster { padding: 12px; }
      .poster-title { font-size: 15px; }
      .work-info { padding: 11px; }
      .work-info h3 { font-size: 13px; }
      .work-meta { font-size: 11px; }
      .side-panel { display: block; }
      .new-list { gap: 10px; }
      .new-item { padding: 12px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .copyright { line-height: 1.8; }
    }