/* roulang page: index */
:root {
            --ink: #1d211e;
            --ink-soft: #343a35;
            --lime: #c8ed62;
            --lime-deep: #9fc43d;
            --coral: #ef785d;
            --cream: #f8f6ef;
            --sand: #efede5;
            --mist: #e4e6df;
            --white: #fffefa;
            --muted: #727971;
            --line: #d9ddd3;
            --shadow: 0 16px 42px rgba(29, 33, 30, .08);
            --shadow-sm: 0 7px 22px rgba(29, 33, 30, .06);
            --radius: 18px;
            --radius-lg: 28px;
            --container: 1200px;
            --ease: cubic-bezier(.2, .7, .2, 1);
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, input, textarea { font: inherit; }
        button { cursor: pointer; }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { line-height: 1.2; letter-spacing: -.035em; }
        h1 { font-size: clamp(2.55rem, 5.4vw, 5.4rem); margin-bottom: 24px; }
        h2 { font-size: clamp(2rem, 3.7vw, 3.4rem); margin-bottom: 16px; }
        h3 { font-size: 1.18rem; margin-bottom: 9px; }
        :focus-visible {
            outline: 3px solid var(--coral);
            outline-offset: 4px;
        }
        .container { width: min(var(--container), calc(100% - 64px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--ink-soft);
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 9px;
            background: var(--lime-deep);
        }
        .section { padding: 108px 0; }
        .section-head { max-width: 720px; margin-bottom: 42px; }
        .section-head p { color: var(--muted); max-width: 650px; margin-bottom: 0; }
        .muted { color: var(--muted); }
        .pill, .status {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 4px 11px;
            border-radius: 99px;
            font-size: .76rem;
            line-height: 1.2;
            font-weight: 750;
        }
        .pill { color: var(--ink); background: var(--lime); }
        .pill.coral { background: #ffd3c9; color: #7c3326; }
        .pill.gray { background: var(--mist); color: var(--ink-soft); }
        .status { gap: 6px; background: #dff3b0; color: #3f5b16; }
        .status::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #72a51a;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 50px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 12px;
            font-weight: 800;
            transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
        }
        .btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
        .btn-primary { background: var(--lime); color: var(--ink); }
        .btn-primary:hover { background: #d6f782; }
        .btn-dark { background: var(--ink); color: var(--lime); }
        .btn-dark:hover { background: #303832; }
        .btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
        .btn-outline:hover { background: var(--ink); color: var(--white); }
        .arrow { font-size: 1.2rem; line-height: 1; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(248, 246, 239, .94);
            border-bottom: 1px solid rgba(217, 221, 211, .8);
            backdrop-filter: blur(16px);
        }
        .header-inner {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-weight: 900;
            letter-spacing: -.045em;
            white-space: nowrap;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--ink);
            color: var(--lime);
            font-size: .9rem;
        }
        .brand-name { font-size: 1.05rem; }
        .main-nav { display: flex; align-items: center; gap: 4px; }
        .main-nav a {
            position: relative;
            padding: 10px 12px;
            color: var(--ink-soft);
            font-size: .92rem;
            font-weight: 700;
            transition: color .2s ease, background .2s ease;
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 3px;
            height: 3px;
            border-radius: 5px;
            background: transparent;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--ink); background: #eef0e8; }
        .main-nav a.active::after { background: var(--lime-deep); }
        .header-action { min-height: 42px; padding: 0 17px; font-size: .88rem; }
        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 1px solid var(--line);
            border-radius: 11px;
            background: var(--white);
            color: var(--ink);
            font-size: 1.2rem;
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 84px 0 78px;
            background: var(--sand);
        }
        .hero::before {
            content: "";
            position: absolute;
            width: 470px;
            height: 470px;
            right: -180px;
            top: -210px;
            border: 1px solid rgba(159, 196, 61, .35);
            border-radius: 50%;
        }
        .hero-grid {
            position: relative;
            display: grid;
            grid-template-columns: 5fr 7fr;
            align-items: center;
            gap: 70px;
        }
        .hero-copy { max-width: 650px; }
        .hero-copy h1 span { display: block; color: #556329; }
        .hero-copy > p { max-width: 590px; color: var(--ink-soft); font-size: 1.12rem; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 27px; }
        .hero-note {
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--muted);
            font-size: .85rem;
        }
        .hero-note .status { background: rgba(200, 237, 98, .55); }
        .device-stage { position: relative; min-height: 440px; }
        .device {
            position: absolute;
            background: #fdfdf8;
            border: 8px solid var(--ink);
            box-shadow: 12px 15px 0 rgba(29, 33, 30, .12);
        }
        .device-screen {
            height: 100%;
            padding: 15px;
            background: #e9ebdf;
            overflow: hidden;
        }
        .screen-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 17px; font-size: .65rem; font-weight: 800; }
        .screen-line { height: 10px; border-radius: 4px; background: var(--ink); opacity: .88; margin-bottom: 9px; }
        .screen-line.short { width: 58%; opacity: .35; }
        .screen-block { height: 70px; border-radius: 9px; background: var(--lime); margin: 17px 0; }
        .screen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
        .screen-row i { display: block; height: 52px; border-radius: 8px; background: #fffefa; border: 1px solid #d3d8c9; }
        .phone { width: 164px; height: 330px; right: 28px; top: 68px; border-radius: 28px; transform: rotate(7deg); z-index: 3; }
        .tablet { width: 300px; height: 214px; left: 40px; bottom: 43px; border-radius: 19px; transform: rotate(-7deg); z-index: 2; }
        .desktop { width: 370px; height: 245px; right: 74px; top: 9px; border-radius: 15px; transform: rotate(-3deg); z-index: 1; }
        .desktop::after {
            content: "";
            position: absolute;
            left: 42%;
            bottom: -52px;
            width: 58px;
            height: 47px;
            border-bottom: 8px solid var(--ink);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
        }
        .device-label {
            position: absolute;
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 13px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--white);
            box-shadow: var(--shadow-sm);
            font-weight: 800;
            font-size: .82rem;
        }
        .device-label.one { left: 0; top: 36px; }
        .device-label.two { right: 0; bottom: 4px; background: var(--ink); color: var(--lime); border-color: var(--ink); }
        .device-label b { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }

        .quick-strip { padding: 25px 0; background: var(--ink); color: var(--white); }
        .quick-grid { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 0; }
        .quick-item {
            min-height: 82px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px 22px;
            border-right: 1px solid rgba(255,255,255,.16);
            transition: background .2s ease, padding .2s ease;
        }
        .quick-item:first-child { padding-left: 0; }
        .quick-item:last-child { border: 0; }
        .quick-item:hover { background: rgba(200,237,98,.09); padding-left: 27px; }
        .quick-item strong { color: var(--lime); font-size: 1rem; }
        .quick-item small { color: #b8c0b5; font-size: .76rem; }
        .quick-arrow { margin-top: 3px; color: var(--lime); font-size: 1.15rem; }

        .adapt-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 70px; align-items: center; }
        .adapt-visual {
            min-height: 360px;
            padding: 35px;
            border-radius: var(--radius-lg);
            background: #dfe3d7;
            border: 1px solid #d0d5c7;
        }
        .adapt-board { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
        .adapt-board-top { display: flex; justify-content: space-between; align-items: center; }
        .adapt-board-title { font-size: 1.3rem; font-weight: 900; }
        .adapt-path { display: flex; align-items: center; gap: 10px; }
        .path-dot { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); font-weight: 800; }
        .path-line { width: 42px; height: 2px; background: #aeb7a5; }
        .adapt-ruler { display: flex; align-items: end; gap: 12px; height: 145px; }
        .ruler-bar { position: relative; display: flex; align-items: center; justify-content: center; width: 28%; border: 6px solid var(--ink); border-bottom: 12px solid var(--ink); border-radius: 12px 12px 7px 7px; background: var(--white); color: var(--muted); font-size: .75rem; font-weight: 800; }
        .ruler-bar.phone-bar { height: 105px; }
        .ruler-bar.tablet-bar { height: 130px; }
        .ruler-bar.desktop-bar { height: 145px; width: 42%; }
        .adapt-list { display: grid; gap: 13px; }
        .adapt-row {
            display: grid;
            grid-template-columns: 112px 1fr auto;
            align-items: center;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid var(--line);
        }
        .adapt-row:last-child { border-bottom: 0; }
        .adapt-row strong { font-size: 1rem; }
        .adapt-row p { margin: 0; color: var(--muted); font-size: .9rem; }
        .check { color: #6f921d; font-weight: 900; }

        .download-panel {
            background: #e7e9df;
            border: 1px solid #d6dbce;
            border-radius: var(--radius-lg);
            padding: 47px;
        }
        .download-grid { display: grid; grid-template-columns: 1fr 1.1fr .8fr; gap: 38px; align-items: center; }
        .app-symbol {
            width: 105px;
            height: 105px;
            display: grid;
            place-items: center;
            border-radius: 26px;
            background: var(--ink);
            color: var(--lime);
            font-size: 2rem;
            font-weight: 900;
            box-shadow: 10px 10px 0 rgba(29,33,30,.12);
        }
        .version { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
        .download-copy p { color: var(--muted); margin-bottom: 20px; }
        .qr-placeholder {
            min-height: 158px;
            display: grid;
            place-items: center;
            border: 1px dashed #9ca79a;
            border-radius: 14px;
            background: rgba(255,254,250,.55);
            color: var(--muted);
            text-align: center;
            font-size: .85rem;
        }
        .qr-pattern { display: grid; grid-template-columns: repeat(5, 10px); gap: 4px; margin: 0 auto 9px; }
        .qr-pattern i { width: 10px; height: 10px; background: var(--ink); }
        .qr-pattern i:nth-child(2n), .qr-pattern i:nth-child(7n) { background: transparent; }

        .steps-section { background: var(--white); }
        .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .step { position: relative; padding: 30px 25px 12px 0; border-right: 1px solid var(--line); }
        .step:not(:first-child) { padding-left: 25px; }
        .step:last-child { border-right: 0; }
        .step-number { color: var(--coral); font-size: 2rem; font-weight: 900; letter-spacing: -.06em; }
        .step p { color: var(--muted); font-size: .9rem; max-width: 220px; margin-bottom: 0; }

        .service-band { background: var(--ink); color: var(--white); }
        .service-layout { display: grid; grid-template-columns: 1.1fr 2fr; gap: 70px; align-items: center; }
        .service-band .eyebrow { color: #c5cec1; }
        .service-band h2 { color: var(--white); }
        .service-band p { color: #b5beb4; }
        .service-items { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.18); border-left: 1px solid rgba(255,255,255,.18); }
        .service-item { min-height: 125px; padding: 22px; border-right: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
        .service-item strong { display: block; margin-bottom: 6px; color: var(--lime); }
        .service-item span { color: #b5beb4; font-size: .86rem; }

        .compat-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 68px; align-items: start; }
        .compat-summary { padding: 30px; border-radius: 20px; background: var(--lime); }
        .compat-summary .big-number { display: block; font-size: 4.5rem; line-height: 1; font-weight: 900; letter-spacing: -.08em; }
        .compat-summary p { margin: 14px 0 0; color: #526329; }
        .compat-table { border-top: 1px solid var(--line); }
        .compat-line { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr auto; gap: 15px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
        .compat-line strong { font-size: .95rem; }
        .compat-line span { color: var(--muted); font-size: .86rem; }

        .news-section { background: #f0eee7; }
        .news-layout { display: grid; grid-template-columns: 1fr 1.55fr; gap: 70px; }
        .news-intro { position: sticky; top: 115px; align-self: start; }
        .news-intro .btn { margin-top: 22px; }
        .news-list { border-top: 1px solid var(--line); }
        .news-item {
            display: grid;
            grid-template-columns: 120px 1fr auto;
            gap: 22px;
            align-items: start;
            padding: 25px 0;
            border-bottom: 1px solid var(--line);
            transition: padding .2s ease, background .2s ease;
        }
        .news-item:hover { padding-left: 12px; padding-right: 12px; background: rgba(255,254,250,.6); }
        .news-date { color: var(--coral); font-size: .82rem; font-weight: 800; }
        .news-item h3 { margin-bottom: 6px; }
        .news-item p { margin-bottom: 0; color: var(--muted); font-size: .87rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .news-link { color: var(--ink); font-size: 1.25rem; font-weight: 900; }
        .empty-state { padding: 32px 0; color: var(--muted); }

        .timeline { position: relative; padding-left: 42px; }
        .timeline::before { content: ""; position: absolute; left: 10px; top: 5px; bottom: 5px; width: 2px; background: var(--line); }
        .timeline-item { position: relative; display: grid; grid-template-columns: 125px 1fr auto; gap: 25px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
        .timeline-item::before { content: ""; position: absolute; left: -37px; width: 12px; height: 12px; border: 3px solid var(--cream); border-radius: 50%; background: var(--lime-deep); box-shadow: 0 0 0 2px var(--lime-deep); }
        .timeline-date { font-weight: 900; }
        .timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }

        .phone-topic { background: var(--sand); }
        .phone-topic-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 70px; align-items: center; }
        .phone-outline {
            width: 190px;
            height: 350px;
            margin: 0 auto;
            padding: 12px;
            border: 9px solid var(--ink);
            border-radius: 32px;
            background: var(--white);
            box-shadow: 17px 17px 0 rgba(29,33,30,.12);
        }
        .phone-outline::before { content: ""; display: block; width: 53px; height: 8px; margin: 0 auto 17px; border-radius: 8px; background: var(--ink); }
        .phone-content { padding: 16px 10px; border-radius: 15px; background: #e7ebdc; height: 285px; }
        .phone-content .screen-block { height: 62px; }
        .topic-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
        .topic-point { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
        .topic-point b { display: block; color: var(--coral); margin-bottom: 5px; }
        .topic-point p { margin: 0; color: var(--muted); font-size: .88rem; }

        .wide-device { padding: 37px; border-radius: var(--radius-lg); background: var(--ink); color: var(--white); }
        .wide-device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
        .wide-device h2 { color: var(--white); }
        .wide-device p { color: #b8c1b7; }
        .screen-wide { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 18px; border: 7px solid #0f1210; border-radius: 12px; background: #e8eadf; }
        .screen-wide .main-panel { min-height: 145px; border-radius: 7px; background: var(--lime); }
        .screen-wide .side-panels { display: grid; gap: 8px; }
        .screen-wide .side-panels i { display: block; border-radius: 7px; background: var(--white); }

        .help-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; }
        .help-index { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
        .help-link { padding: 17px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); font-weight: 750; transition: background .2s ease, transform .2s ease; }
        .help-link:hover { transform: translateY(-3px); background: var(--lime); }
        .faq-list { border-top: 1px solid var(--line); }
        details { border-bottom: 1px solid var(--line); }
        summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 65px; cursor: pointer; list-style: none; font-weight: 800; }
        summary::-webkit-details-marker { display: none; }
        summary::after { content: "+"; color: var(--coral); font-size: 1.4rem; font-weight: 400; }
        details[open] summary::after { content: "−"; }
        details p { max-width: 700px; color: var(--muted); margin: 0 0 20px; font-size: .91rem; }

        .security-note { padding: 29px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .security-inner { display: flex; align-items: center; gap: 24px; }
        .security-icon { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: var(--lime); font-size: 1.45rem; }
        .security-note h3 { margin-bottom: 4px; }
        .security-note p { margin: 0; color: var(--muted); font-size: .9rem; }

        .closing { padding: 80px 0; background: var(--lime); }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
        .closing h2 { max-width: 690px; margin-bottom: 0; }
        .closing-actions { display: flex; flex-wrap: wrap; gap: 11px; }
        .closing .btn-dark { background: var(--ink); color: var(--lime); }
        .closing .btn-outline { border-color: var(--ink); }

        .site-footer { padding: 68px 0 26px; background: var(--ink); color: var(--white); }
        .footer-grid { display: grid; grid-template-columns: 1.65fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 51px; }
        .footer-brand p { max-width: 330px; color: #aeb8ad; font-size: .88rem; }
        .site-footer h3 { color: var(--lime); font-size: .92rem; letter-spacing: .02em; }
        .footer-links { display: grid; gap: 8px; }
        .footer-links a { color: #c2c9c0; font-size: .87rem; transition: color .2s ease; }
        .footer-links a:hover { color: var(--lime); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 21px; border-top: 1px solid rgba(255,255,255,.16); color: #899489; font-size: .78rem; }

        @media (max-width: 1024px) {
            .container { width: min(var(--container), calc(100% - 42px)); }
            .main-nav { gap: 0; }
            .main-nav a { padding-left: 8px; padding-right: 8px; font-size: .84rem; }
            .hero-grid, .adapt-grid, .compat-grid, .news-layout, .phone-topic-grid, .help-grid { gap: 38px; }
            .download-grid { grid-template-columns: 1fr 1.2fr; }
            .qr-placeholder { grid-column: 1 / -1; min-height: 95px; }
            .footer-grid { gap: 25px; }
        }

        @media (max-width: 768px) {
            .container { width: min(100% - 34px, var(--container)); }
            .header-inner { min-height: 68px; }
            .header-action { display: none; }
            .menu-toggle { display: block; }
            .main-nav {
                position: absolute;
                display: none;
                left: 17px;
                right: 17px;
                top: 76px;
                padding: 12px;
                flex-direction: column;
                align-items: stretch;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: var(--white);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 13px 14px; }
            .main-nav a::after { left: 14px; right: auto; width: 25px; bottom: 6px; }
            .hero { padding: 62px 0 45px; }
            .hero-grid, .adapt-grid, .compat-grid, .news-layout, .phone-topic-grid, .help-grid, .wide-device-grid, .service-layout { grid-template-columns: 1fr; }
            .hero-copy { max-width: none; }
            .device-stage { min-height: 365px; transform: scale(.83); transform-origin: center top; margin-bottom: -55px; }
            .quick-grid { grid-template-columns: repeat(2, 1fr); }
            .quick-item, .quick-item:first-child { padding: 14px 17px; border-bottom: 1px solid rgba(255,255,255,.16); }
            .quick-item:first-child { grid-column: 1 / -1; }
            .quick-item:nth-child(2) { padding-left: 0; }
            .section { padding: 72px 0; }
            .download-panel { padding: 28px 22px; }
            .download-grid { grid-template-columns: 1fr 1fr; }
            .download-copy { grid-column: 1 / -1; }
            .steps { grid-template-columns: 1fr 1fr; }
            .step { min-height: 155px; border-bottom: 1px solid var(--line); }
            .service-items { margin-top: 10px; }
            .news-intro { position: static; }
            .timeline-item { grid-template-columns: 100px 1fr; }
            .timeline-item .pill { grid-column: 2; justify-self: start; }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
            .closing-inner { align-items: flex-start; flex-direction: column; }
        }

        @media (max-width: 520px) {
            body { font-size: 15px; }
            .container { width: calc(100% - 30px); }
            h1 { font-size: 2.65rem; }
            .hero-copy > p { font-size: 1rem; }
            .hero-actions, .closing-actions { display: grid; grid-template-columns: 1fr; }
            .hero-actions .btn, .closing-actions .btn { width: 100%; }
            .device-stage { min-height: 285px; transform: scale(.62); margin-bottom: -105px; }
            .quick-grid { grid-template-columns: 1fr 1fr; }
            .quick-item { min-height: 76px; }
            .quick-item:first-child { grid-column: 1 / -1; }
            .adapt-visual { min-height: 285px; padding: 22px; }
            .adapt-ruler { height: 115px; }
            .ruler-bar.phone-bar { height: 75px; }
            .ruler-bar.tablet-bar { height: 96px; }
            .ruler-bar.desktop-bar { height: 112px; }
            .adapt-row { grid-template-columns: 88px 1fr; gap: 8px; }
            .adapt-row .check { grid-column: 2; }
            .download-grid { grid-template-columns: 1fr; }
            .app-symbol { margin-bottom: 8px; }
            .qr-placeholder { grid-column: auto; }
            .steps { grid-template-columns: 1fr; }
            .step, .step:not(:first-child) { padding: 23px 0; border-right: 0; min-height: auto; }
            .service-items, .topic-points, .help-index { grid-template-columns: 1fr; }
            .compat-summary { margin-bottom: 24px; }
            .compat-line { grid-template-columns: 1fr 1fr; }
            .compat-line span:nth-child(3) { grid-column: 1 / -1; }
            .news-item { grid-template-columns: 1fr auto; gap: 5px 14px; }
            .news-date { grid-column: 1 / -1; }
            .news-item p { grid-column: 1 / -1; }
            .timeline { padding-left: 28px; }
            .timeline-item { grid-template-columns: 1fr; gap: 4px; }
            .timeline-item .pill { grid-column: auto; }
            .timeline-item::before { left: -23px; }
            .security-inner { align-items: flex-start; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { flex-direction: column; gap: 7px; }
        }

/* roulang page: category1 */
:root{
            --ink:#1d211e;--ink-soft:#343a35;--lime:#c8ed62;--lime-deep:#9fc43d;
            --coral:#ef785d;--cream:#f8f6ef;--sand:#efede5;--mist:#e4e6df;
            --white:#fffefa;--muted:#727971;--line:#d9ddd3;
            --shadow:0 16px 42px rgba(29,33,30,.08);--shadow-sm:0 7px 22px rgba(29,33,30,.06);
            --radius:18px;--radius-lg:28px;--container:1200px;
            --ease:cubic-bezier(.2,.7,.2,1)
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;color:var(--ink);background:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 64px));margin:0 auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(248,246,239,.95);border-bottom:1px solid rgba(217,221,211,.8);backdrop-filter:blur(16px)}
        .header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
        .brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.045em;white-space:nowrap}
        .brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--lime);font-size:.9rem}
        .brand-name{font-size:1.05rem}
        .main-nav{display:flex;align-items:center;gap:4px}
        .main-nav a{position:relative;padding:10px 12px;color:var(--ink-soft);font-size:.92rem;font-weight:700;transition:.2s ease}
        .main-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:5px;background:transparent}
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eef0e8}
        .main-nav a.active::after{background:var(--lime-deep)}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 21px;border:1px solid transparent;border-radius:12px;font-weight:800;transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
        .btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d6f782}
        .btn-dark{background:var(--ink);color:var(--lime)}
        .btn-dark:hover{background:#303832}
        .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
        .btn-outline:hover{background:var(--ink);color:var(--white)}
        .header-action{min-height:42px;padding:0 17px;font-size:.88rem}
        .menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink);font-size:1.2rem}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.76rem;font-weight:800;letter-spacing:.13em}
        .eyebrow:before{content:"";width:28px;height:3px;border-radius:9px;background:var(--lime-deep)}
        .section{padding:94px 0}
        .section-head{max-width:720px;margin-bottom:38px}
        .section-head h2{margin:12px 0 10px;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.2;letter-spacing:-.04em}
        .section-head p{color:var(--muted);max-width:660px;margin:0}
        .hero-inner{padding:76px 0 70px}
        .category-hero{background:var(--sand);border-bottom:1px solid var(--line)}
        .hero-copy{max-width:790px}
        h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1.1;letter-spacing:-.065em;margin:16px 0 22px;font-weight:850}
        h1 span{display:block;color:#556329}
        .hero-copy p{max-width:700px;color:var(--ink-soft);font-size:1.1rem;margin:0 0 28px}
        .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
        .pill,.status{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;border-radius:99px;font-size:.76rem;line-height:1.2;font-weight:750}
        .pill{background:var(--lime);color:var(--ink)}
        .pill.coral{background:#ffd3c9;color:#7c3326}
        .pill.gray{background:var(--mist);color:var(--ink-soft)}
        .guide-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
        .guide-panel,.device-table,.step-list,.support-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
        .guide-panel{padding:30px}
        .guide-panel h3{margin:0 0 13px;font-size:1.35rem}
        .guide-panel p{color:var(--muted);margin:0}
        .tag-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}
        .device-table{overflow:hidden}
        .device-row{display:grid;grid-template-columns:1fr 1.5fr 110px;gap:18px;align-items:center;padding:21px 25px;border-bottom:1px solid var(--line)}
        .device-row:last-child{border-bottom:0}
        .device-row strong{font-size:1.05rem}
        .device-row span{color:var(--muted);font-size:.92rem}
        .status{justify-content:center;background:#e5f5b7;color:#435414}
        .status.warn{background:#ffd3c9;color:#7c3326}
        .scenario-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
        .scenario{padding:24px 20px;background:var(--mist);border-radius:16px;border:1px solid transparent;transition:.25s var(--ease)}
        .scenario:hover{background:var(--white);border-color:var(--line);transform:translateY(-4px)}
        .scenario b{display:block;font-size:1.1rem;margin-bottom:8px}
        .scenario p{margin:0;color:var(--muted);font-size:.9rem}
        .step-list{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
        .step{padding:28px 24px;border-right:1px solid var(--line);position:relative}
        .step:last-child{border-right:0}
        .step-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--lime);font-weight:900;margin-bottom:20px}
        .step h3{font-size:1.05rem;margin:0 0 8px}
        .step p{margin:0;color:var(--muted);font-size:.9rem}
        .dark-band{background:var(--ink);color:var(--white)}
        .dark-band .section-head p{color:#b9c0b9}
        .support-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;align-items:stretch}
        .support-box{padding:27px}
        .support-box h3{margin:0 0 10px}
        .support-box p{color:var(--muted);margin:0}
        .support-box.dark-box{background:#303832;color:var(--white);border-color:#485149}
        .dark-box p{color:#c1c9be}
        .faq-list{max-width:900px;border-top:1px solid var(--line)}
        details{border-bottom:1px solid var(--line);padding:0}
        summary{list-style:none;cursor:pointer;padding:21px 4px;font-weight:800;display:flex;justify-content:space-between;gap:20px}
        summary::-webkit-details-marker{display:none}
        summary:after{content:"＋";color:var(--lime-deep);font-size:1.3rem}
        details[open] summary:after{content:"－"}
        details p{margin:0;padding:0 40px 22px 4px;color:var(--muted)}
        .cta{padding:58px 0;background:var(--lime)}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
        .cta h2{margin:0;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.2}
        .cta p{margin:10px 0 0;color:#4e5b2c}
        .cta-actions{display:flex;gap:12px;flex-wrap:wrap}
        .site-footer{padding:68px 0 24px;background:var(--ink);color:var(--white)}
        .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:38px}
        .footer-brand p{max-width:340px;color:#aeb8ad;margin:18px 0 0;font-size:.92rem}
        .site-footer .brand{color:var(--white)}
        .site-footer h3{font-size:1rem;margin:4px 0 15px}
        .footer-links{display:grid;gap:8px}
        .footer-links a{color:#aeb8ad;font-size:.9rem;transition:color .2s}
        .footer-links a:hover{color:var(--lime)}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:25px;margin-top:48px;border-top:1px solid #39423b;color:#89948a;font-size:.78rem}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        @media(max-width:1024px){
            .main-nav a{padding-left:8px;padding-right:8px}.header-action{display:none}
            .guide-grid,.support-grid{grid-template-columns:1fr}.scenario-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(100% - 36px,var(--container))}
            .header-inner{min-height:68px}.menu-toggle{display:block}
            .main-nav{display:none;position:absolute;left:18px;right:18px;top:74px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
            .main-nav.open{display:flex}.main-nav a{padding:13px 15px}
            .hero-inner{padding:58px 0}.section{padding:70px 0}
            .device-row{grid-template-columns:1fr;gap:5px}.device-row .status{width:max-content}
            .step-list{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}
            .cta-inner{display:block}.cta-actions{margin-top:24px}
            .footer-grid{grid-template-columns:1fr 1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}
        }
        @media(max-width:520px){
            h1{font-size:2.45rem}.hero-copy p{font-size:1rem}
            .scenario-grid,.step-list,.footer-grid{grid-template-columns:1fr}
            .step{border-right:0;border-bottom:1px solid var(--line)!important}.step:last-child{border-bottom:0!important}
            .guide-panel,.support-box{padding:23px}.btn{width:100%}.cta-actions{display:grid}
        }

/* roulang page: article */
:root {
            --ink: #1d211e;
            --ink-soft: #343a35;
            --lime: #c8ed62;
            --lime-deep: #9fc43d;
            --coral: #ef785d;
            --cream: #f8f6ef;
            --sand: #efede5;
            --mist: #e4e6df;
            --white: #fffefa;
            --muted: #727971;
            --line: #d9ddd3;
            --shadow: 0 16px 42px rgba(29, 33, 30, .08);
            --shadow-sm: 0 7px 22px rgba(29, 33, 30, .06);
            --radius: 18px;
            --radius-lg: 28px;
            --container: 1200px;
            --ease: cubic-bezier(.2, .7, .2, 1);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, input, textarea { font: inherit; }
        button { cursor: pointer; }
        button:focus-visible, a:focus-visible {
            outline: 3px solid rgba(159, 196, 61, .75);
            outline-offset: 3px;
        }
        .container {
            width: min(var(--container), calc(100% - 64px));
            margin: 0 auto;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--ink-soft);
            font-size: .76rem;
            font-weight: 800;
            letter-spacing: .13em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 9px;
            background: var(--lime-deep);
        }
        .section { padding: 86px 0; }
        .section-head {
            max-width: 760px;
            margin-bottom: 38px;
        }
        .section-head h2 {
            margin: 13px 0 10px;
            font-size: clamp(1.8rem, 3vw, 2.7rem);
            line-height: 1.2;
            letter-spacing: -.045em;
            font-weight: 850;
        }
        .section-head p {
            max-width: 700px;
            margin: 0;
            color: var(--muted);
        }
        .muted { color: var(--muted); }
        .pill, .status {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 4px 11px;
            border-radius: 99px;
            font-size: .76rem;
            line-height: 1.2;
            font-weight: 750;
        }
        .pill { color: var(--ink); background: var(--lime); }
        .pill.coral { background: #ffd3c9; color: #7c3326; }
        .pill.gray { background: var(--mist); color: var(--ink-soft); }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 50px;
            padding: 0 21px;
            border: 1px solid transparent;
            border-radius: 12px;
            font-weight: 800;
            transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
        }
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-sm);
        }
        .btn-primary { background: var(--lime); color: var(--ink); }
        .btn-primary:hover { background: #d6f782; }
        .btn-dark { background: var(--ink); color: var(--lime); }
        .btn-dark:hover { background: #303832; }
        .btn-outline {
            border-color: var(--ink);
            color: var(--ink);
            background: transparent;
        }
        .btn-outline:hover {
            background: var(--ink);
            color: var(--white);
        }
        .arrow { font-size: 1.2rem; line-height: 1; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(248, 246, 239, .94);
            border-bottom: 1px solid rgba(217, 221, 211, .8);
            backdrop-filter: blur(16px);
        }
        .header-inner {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-weight: 900;
            letter-spacing: -.045em;
            white-space: nowrap;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--ink);
            color: var(--lime);
            font-size: .9rem;
        }
        .brand-name { font-size: 1.05rem; }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .main-nav a {
            position: relative;
            padding: 10px 12px;
            color: var(--ink-soft);
            font-size: .92rem;
            font-weight: 700;
            transition: color .2s ease, background .2s ease;
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            left: 12px;
            right: 12px;
            bottom: 3px;
            height: 3px;
            border-radius: 5px;
            background: transparent;
        }
        .main-nav a:hover,
        .main-nav a.active {
            color: var(--ink);
            background: #eef0e8;
        }
        .main-nav a.active::after { background: var(--lime-deep); }
        .header-action {
            min-height: 42px;
            padding: 0 17px;
            font-size: .88rem;
        }
        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 1px solid var(--line);
            border-radius: 11px;
            background: var(--white);
            color: var(--ink);
            font-size: 1.2rem;
        }

        .article-hero {
            position: relative;
            overflow: hidden;
            padding: 76px 0 68px;
            background: var(--sand);
            border-bottom: 1px solid var(--line);
        }
        .article-hero::after {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: -120px;
            top: -190px;
            border: 1px solid rgba(159, 196, 61, .42);
            border-radius: 50%;
        }
        .article-hero-inner {
            position: relative;
            z-index: 1;
            max-width: 920px;
        }
        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            align-items: center;
            margin: 0 0 28px;
            color: var(--muted);
            font-size: .86rem;
        }
        .breadcrumb a:hover { color: var(--ink); }
        .breadcrumb-separator { color: var(--coral); }
        .article-hero h1 {
            max-width: 900px;
            margin: 15px 0 18px;
            font-size: clamp(2rem, 5vw, 4.15rem);
            line-height: 1.12;
            letter-spacing: -.065em;
            font-weight: 900;
            overflow-wrap: anywhere;
        }
        .article-summary {
            max-width: 820px;
            margin: 0;
            color: var(--ink-soft);
            font-size: 1.12rem;
        }
        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px 22px;
            align-items: center;
            margin-top: 28px;
            color: var(--muted);
            font-size: .88rem;
        }
        .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }
        .meta-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--coral);
        }

        .reading-section { background: var(--cream); }
        .reading-layout {
            display: grid;
            grid-template-columns: minmax(0, 820px) 260px;
            gap: 72px;
            align-items: start;
            justify-content: center;
        }
        .article-content {
            min-width: 0;
            color: var(--ink-soft);
            font-size: 1.06rem;
        }
        .article-content > *:first-child { margin-top: 0; }
        .article-content h2,
        .article-content h3 {
            color: var(--ink);
            letter-spacing: -.035em;
            line-height: 1.3;
            font-weight: 850;
        }
        .article-content h2 {
            margin: 42px 0 16px;
            font-size: 1.85rem;
        }
        .article-content h3 {
            margin: 30px 0 12px;
            font-size: 1.35rem;
        }
        .article-content p { margin: 0 0 20px; }
        .article-content ul,
        .article-content ol {
            margin: 0 0 24px;
            padding-left: 1.5em;
        }
        .article-content li { margin: 7px 0; }
        .article-content a {
            color: #607d1e;
            text-decoration: underline;
            text-decoration-color: rgba(96, 125, 30, .35);
            text-underline-offset: 3px;
        }
        .article-content a:hover {
            color: var(--ink);
            text-decoration-color: var(--ink);
        }
        .article-content blockquote {
            margin: 30px 0;
            padding: 20px 24px;
            border-left: 5px solid var(--lime-deep);
            border-radius: 0 14px 14px 0;
            background: var(--white);
            color: var(--ink);
        }
        .article-content img {
            width: 100%;
            height: auto;
            margin: 28px 0;
            border-radius: 16px;
            border: 1px solid var(--line);
        }
        .table-scroll {
            overflow-x: auto;
            margin: 26px 0;
        }
        .article-content table {
            width: 100%;
            min-width: 560px;
            border-collapse: collapse;
            background: var(--white);
            border: 1px solid var(--line);
        }
        .article-content th,
        .article-content td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--line);
        }
        .article-content th {
            background: var(--mist);
            color: var(--ink);
            font-weight: 800;
        }
        .article-content hr {
            margin: 36px 0;
            border: 0;
            border-top: 1px solid var(--line);
        }
        .article-sidebar {
            position: sticky;
            top: 108px;
        }
        .sidebar-card {
            padding: 21px;
            margin-bottom: 16px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }
        .sidebar-card h3 {
            margin: 0 0 13px;
            font-size: 1rem;
            font-weight: 850;
        }
        .sidebar-card p {
            margin: 0;
            color: var(--muted);
            font-size: .9rem;
        }
        .toc-list {
            display: grid;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .toc-list a {
            display: block;
            padding: 8px 10px;
            border-radius: 8px;
            color: var(--muted);
            font-size: .88rem;
        }
        .toc-list a:hover {
            color: var(--ink);
            background: var(--sand);
        }

        .article-action {
            padding: 25px 28px;
            margin-top: 42px;
            border-radius: var(--radius);
            background: var(--ink);
            color: var(--white);
        }
        .article-action-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
        }
        .article-action h2 {
            margin: 0 0 5px;
            color: var(--lime);
            font-size: 1.35rem;
            line-height: 1.3;
        }
        .article-action p {
            margin: 0;
            color: #c8cec4;
            font-size: .92rem;
        }
        .article-action .btn { flex: 0 0 auto; }

        .info-section { background: var(--white); }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }
        .info-card {
            min-height: 150px;
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--cream);
        }
        .info-card strong {
            display: block;
            margin: 10px 0 5px;
            color: var(--ink);
            font-size: 1.12rem;
        }
        .info-card span {
            display: block;
            color: var(--muted);
            font-size: .88rem;
        }
        .info-icon {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: var(--lime);
            color: var(--ink);
            font-weight: 900;
        }

        .related-section { background: var(--sand); }
        .related-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .related-item {
            display: flex;
            flex-direction: column;
            min-height: 190px;
            padding: 23px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
            transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
        }
        .related-item:hover {
            transform: translateY(-4px);
            border-color: var(--lime-deep);
            box-shadow: var(--shadow-sm);
        }
        .related-item h3 {
            margin: 16px 0 8px;
            font-size: 1.12rem;
            line-height: 1.4;
            font-weight: 850;
        }
        .related-item p {
            margin: 0;
            color: var(--muted);
            font-size: .9rem;
        }
        .related-arrow {
            margin-top: auto;
            padding-top: 17px;
            color: #627d1e;
            font-size: .9rem;
            font-weight: 800;
        }

        .faq-section { background: var(--cream); }
        .faq-list {
            max-width: 860px;
            display: grid;
            gap: 11px;
        }
        .faq-item {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: var(--white);
        }
        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 62px;
            padding: 15px 20px;
            border: 0;
            background: transparent;
            color: var(--ink);
            text-align: left;
            font-weight: 800;
        }
        .faq-question span:last-child {
            color: var(--lime-deep);
            font-size: 1.5rem;
            line-height: 1;
            transition: transform .2s ease;
        }
        .faq-answer {
            display: none;
            padding: 0 20px 18px;
            color: var(--muted);
            font-size: .94rem;
        }
        .faq-item.open {
            border-color: var(--lime-deep);
            background: #fbfdf4;
        }
        .faq-item.open .faq-answer { display: block; }
        .faq-item.open .faq-question span:last-child { transform: rotate(45deg); }

        .return-section {
            padding: 66px 0 86px;
            background: var(--ink);
            color: var(--white);
        }
        .return-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
        }
        .return-inner h2 {
            margin: 0 0 8px;
            color: var(--lime);
            font-size: clamp(1.7rem, 3vw, 2.5rem);
            line-height: 1.2;
            letter-spacing: -.045em;
        }
        .return-inner p {
            margin: 0;
            color: #c6cdc4;
        }
        .return-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
            flex: 0 0 auto;
        }
        .return-section .btn-outline {
            border-color: #b9c1b8;
            color: var(--white);
        }
        .return-section .btn-outline:hover {
            background: var(--white);
            color: var(--ink);
        }

        .site-footer {
            padding: 64px 0 22px;
            background: #171b18;
            color: var(--white);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.7fr repeat(3, 1fr);
            gap: 42px;
            padding-bottom: 46px;
        }
        .footer-brand p {
            max-width: 330px;
            margin: 17px 0 0;
            color: #aeb7ad;
            font-size: .9rem;
        }
        .site-footer .brand { color: var(--white); }
        .site-footer .brand-mark {
            background: var(--lime);
            color: var(--ink);
        }
        .site-footer h3 {
            margin: 3px 0 14px;
            color: var(--lime);
            font-size: .95rem;
            font-weight: 850;
        }
        .footer-links {
            display: grid;
            gap: 8px;
        }
        .footer-links a {
            color: #aeb7ad;
            font-size: .88rem;
            transition: color .2s ease, transform .2s ease;
        }
        .footer-links a:hover {
            color: var(--white);
            transform: translateX(3px);
        }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,.12);
            color: #89938a;
            font-size: .78rem;
        }

        .not-found {
            max-width: 820px;
            padding: 45px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--white);
            box-shadow: var(--shadow-sm);
        }
        .not-found h2 {
            margin: 0 0 9px;
            font-size: 1.8rem;
        }
        .not-found p {
            margin: 0 0 22px;
            color: var(--muted);
        }

        @media (max-width: 1024px) {
            .container { width: min(var(--container), calc(100% - 48px)); }
            .reading-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; }
            .article-sidebar {
                position: static;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 14px;
            }
            .sidebar-card { margin: 0; }
            .info-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 24px; }
        }

        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 36px)); }
            .header-inner { min-height: 68px; }
            .main-nav {
                display: none;
                position: absolute;
                left: 18px;
                right: 18px;
                top: 76px;
                padding: 10px;
                flex-direction: column;
                align-items: stretch;
                border: 1px solid var(--line);
                border-radius: 15px;
                background: var(--white);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .header-action { display: none; }
            .menu-toggle { display: block; }
            .article-hero { padding: 55px 0 50px; }
            .article-hero h1 { font-size: clamp(2rem, 9vw, 3.2rem); }
            .section { padding: 68px 0; }
            .article-sidebar { grid-template-columns: 1fr; }
            .article-action-inner,
            .return-inner {
                align-items: flex-start;
                flex-direction: column;
            }
            .article-action .btn,
            .return-actions { width: 100%; }
            .return-actions .btn { flex: 1; }
            .related-list { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { flex-direction: column; gap: 7px; }
        }

        @media (max-width: 520px) {
            .container { width: min(var(--container), calc(100% - 28px)); }
            .brand-name { font-size: .94rem; }
            .brand-mark { width: 32px; height: 32px; }
            .article-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
            .article-content { font-size: 1rem; }
            .article-action { padding: 22px 19px; }
            .info-grid { grid-template-columns: 1fr; }
            .info-card { min-height: auto; }
            .not-found { padding: 28px 22px; }
            .return-actions { flex-direction: column; }
            .return-actions .btn { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
        }

/* roulang page: category2 */
:root {
            --ink:#1d211e;
            --ink-soft:#343a35;
            --lime:#c8ed62;
            --lime-deep:#9fc43d;
            --coral:#ef785d;
            --cream:#f8f6ef;
            --sand:#efede5;
            --mist:#e4e6df;
            --white:#fffefa;
            --muted:#727971;
            --line:#d9ddd3;
            --shadow:0 16px 42px rgba(29,33,30,.08);
            --shadow-sm:0 7px 22px rgba(29,33,30,.06);
            --radius:18px;
            --radius-lg:28px;
            --container:1200px;
            --ease:cubic-bezier(.2,.7,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 64px));margin:0 auto}
        .section{padding:104px 0}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--ink-soft);
            font-size:.76rem;
            font-weight:800;
            letter-spacing:.13em;
        }
        .eyebrow:before{
            content:"";
            width:28px;
            height:3px;
            border-radius:9px;
            background:var(--lime-deep);
        }
        h1,h2,h3,p{margin-top:0}
        h1,h2,h3{letter-spacing:-.04em;line-height:1.2}
        h1{font-size:clamp(2.45rem,5vw,4.8rem);font-weight:850;margin:18px 0 22px}
        h2{font-size:clamp(2rem,3.3vw,3.1rem);font-weight:850;margin-bottom:16px}
        h3{font-size:1.22rem;font-weight:800}
        .muted{color:var(--muted)}
        .pill,.status{
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:4px 11px;
            border-radius:99px;
            font-size:.76rem;
            line-height:1.2;
            font-weight:750;
        }
        .pill{color:var(--ink);background:var(--lime)}
        .pill.coral{background:#ffd3c9;color:#7c3326}
        .pill.gray{background:var(--mist);color:var(--ink-soft)}
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:50px;
            padding:0 21px;
            border:1px solid transparent;
            border-radius:12px;
            font-weight:800;
            transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
        }
        .btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
        .btn-primary{background:var(--lime);color:var(--ink)}
        .btn-primary:hover{background:#d6f782}
        .btn-dark{background:var(--ink);color:var(--lime)}
        .btn-dark:hover{background:#303832}
        .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
        .btn-outline:hover{background:var(--ink);color:var(--white)}
        .arrow{font-size:1.2rem;line-height:1}
        :focus-visible{outline:3px solid var(--coral);outline-offset:3px}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(248,246,239,.94);
            border-bottom:1px solid rgba(217,221,211,.8);
            backdrop-filter:blur(16px);
        }
        .header-inner{
            min-height:78px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:11px;
            font-weight:900;
            letter-spacing:-.045em;
            white-space:nowrap;
        }
        .brand-mark{
            display:grid;
            place-items:center;
            width:34px;
            height:34px;
            border-radius:10px;
            background:var(--ink);
            color:var(--lime);
            font-size:.9rem;
        }
        .brand-name{font-size:1.05rem}
        .main-nav{display:flex;align-items:center;gap:4px}
        .main-nav a{
            position:relative;
            padding:10px 12px;
            color:var(--ink-soft);
            font-size:.92rem;
            font-weight:700;
            transition:color .2s ease,background .2s ease;
        }
        .main-nav a:after{
            content:"";
            position:absolute;
            left:12px;
            right:12px;
            bottom:3px;
            height:3px;
            border-radius:5px;
            background:transparent;
        }
        .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eef0e8}
        .main-nav a.active:after{background:var(--lime-deep)}
        .header-action{min-height:42px;padding:0 17px;font-size:.88rem}
        .menu-toggle{
            display:none;
            width:44px;
            height:44px;
            border:1px solid var(--line);
            border-radius:11px;
            background:var(--white);
            color:var(--ink);
            font-size:1.2rem;
        }
        .page-hero{
            padding:86px 0 82px;
            background:var(--sand);
            border-bottom:1px solid var(--line);
        }
        .page-hero-grid{
            display:grid;
            grid-template-columns:7fr 5fr;
            gap:78px;
            align-items:center;
        }
        .page-hero-copy{max-width:720px}
        .page-hero-copy h1 span{display:block;color:#556329}
        .page-hero-copy p{max-width:650px;font-size:1.1rem;color:var(--ink-soft)}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .download-visual{
            position:relative;
            min-height:350px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .download-board{
            width:min(100%,410px);
            padding:30px;
            border:1px solid rgba(29,33,30,.12);
            border-radius:26px;
            background:var(--white);
            box-shadow:var(--shadow);
            transform:rotate(2deg);
        }
        .board-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
        .app-symbol{
            width:70px;
            height:70px;
            display:grid;
            place-items:center;
            border-radius:20px;
            background:var(--ink);
            color:var(--lime);
            font-size:2rem;
            font-weight:900;
        }
        .board-lines{display:grid;gap:12px;margin:24px 0}
        .board-lines i{height:10px;border-radius:99px;background:var(--mist);display:block}
        .board-lines i:nth-child(1){width:82%}
        .board-lines i:nth-child(2){width:61%}
        .board-lines i:nth-child(3){width:72%}
        .board-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
        .mini-code{
            width:82px;
            height:82px;
            padding:8px;
            background:#f2f2ec;
            border:1px solid var(--line);
            display:grid;
            grid-template-columns:repeat(5,1fr);
            gap:4px;
        }
        .mini-code b{background:var(--ink)}
        .mini-code b:nth-child(2n){background:var(--lime-deep)}
        .download-summary{font-size:.82rem;color:var(--muted);text-align:right}
        .download-summary strong{display:block;color:var(--ink);font-size:1.4rem}
        .intro-strip{
            padding:28px 0;
            background:var(--ink);
            color:var(--white);
        }
        .strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
        .strip-item{display:flex;gap:14px;align-items:flex-start}
        .strip-icon{
            flex:0 0 34px;
            width:34px;
            height:34px;
            display:grid;
            place-items:center;
            border-radius:10px;
            background:var(--lime);
            color:var(--ink);
            font-weight:900;
        }
        .strip-item strong{display:block;color:var(--lime);font-size:.95rem}
        .strip-item span{display:block;color:#c8cdc5;font-size:.88rem}
        .section-head{max-width:740px;margin-bottom:42px}
        .section-head p{color:var(--muted);max-width:680px;margin-bottom:0}
        .download-layout{display:grid;grid-template-columns:5fr 7fr;gap:28px;align-items:stretch}
        .download-card{
            padding:34px;
            border-radius:var(--radius-lg);
            background:var(--ink);
            color:var(--white);
            min-height:370px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .download-card h2{color:var(--lime);margin-top:18px}
        .download-card p{color:#cdd2ca;max-width:420px}
        .download-card .btn{align-self:flex-start}
        .system-panel{
            padding:34px;
            border-radius:var(--radius-lg);
            background:var(--white);
            border:1px solid var(--line);
            box-shadow:var(--shadow-sm);
        }
        .system-row{
            display:grid;
            grid-template-columns:88px 1fr auto;
            gap:18px;
            align-items:center;
            padding:22px 0;
            border-bottom:1px solid var(--line);
        }
        .system-row:last-child{border-bottom:0;padding-bottom:0}
        .system-row:first-child{padding-top:0}
        .system-badge{
            width:70px;
            height:70px;
            border-radius:18px;
            background:var(--sand);
            display:grid;
            place-items:center;
            font-size:1.45rem;
            font-weight:900;
        }
        .system-row h3{margin-bottom:4px}
        .system-row p{margin:0;color:var(--muted);font-size:.9rem}
        .check{color:#607a1e;font-weight:900;font-size:1.35rem}
        .steps-section{background:#e8e9e1}
        .steps-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:0;
            border-top:1px solid var(--ink);
            border-bottom:1px solid var(--ink);
        }
        .step{
            min-height:210px;
            padding:27px 25px;
            border-right:1px solid var(--ink);
        }
        .step:last-child{border-right:0}
        .step-number{font-size:2.3rem;line-height:1;color:var(--coral);font-weight:900;margin-bottom:28px}
        .step h3{margin-bottom:10px}
        .step p{color:var(--muted);font-size:.92rem;margin-bottom:0}
        .info-grid{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start}
        .version-table{
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:var(--white);
        }
        .version-head,.version-item{
            display:grid;
            grid-template-columns:1.05fr 1.3fr 1fr .8fr;
            gap:16px;
            align-items:center;
            padding:18px 22px;
        }
        .version-head{
            background:var(--ink);
            color:var(--lime);
            font-size:.8rem;
            font-weight:800;
        }
        .version-item{border-bottom:1px solid var(--line);font-size:.92rem}
        .version-item:last-child{border-bottom:0}
        .version-item span:not(.pill){color:var(--ink-soft)}
        .notice-card{
            padding:30px;
            background:#fff0dc;
            border:1px solid #f4c9aa;
            border-radius:var(--radius);
        }
        .notice-card h3{margin:16px 0 10px}
        .notice-card p{color:#76584a;margin-bottom:20px;font-size:.94rem}
        .notice-list{display:grid;gap:12px;padding:0;margin:0;list-style:none}
        .notice-list li{display:flex;gap:10px;color:#644d43;font-size:.9rem}
        .notice-list li:before{content:"•";color:var(--coral);font-size:1.2rem;line-height:1.2}
        .faq-section{background:var(--white)}
        .faq-list{max-width:900px;border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            min-height:70px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            font-weight:800;
            padding:18px 0;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"+";font-size:1.5rem;color:var(--lime-deep);font-weight:400}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{max-width:760px;color:var(--muted);padding:0 46px 22px 0}
        .cta-section{padding:80px 0}
        .cta-box{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
            padding:42px 48px;
            border-radius:var(--radius-lg);
            background:var(--lime);
        }
        .cta-box h2{margin-bottom:8px}
        .cta-box p{margin-bottom:0;color:#495329}
        .cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
        .site-footer{background:var(--ink);color:var(--white);padding:66px 0 26px}
        .footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:42px}
        .footer-brand p{max-width:340px;color:#b9c0b6;margin-top:20px;font-size:.9rem}
        .site-footer .brand-name{color:var(--white)}
        .site-footer h3{font-size:1rem;color:var(--lime);margin:5px 0 17px}
        .footer-links{display:grid;gap:8px}
        .footer-links a{color:#bbc2b8;font-size:.88rem;transition:color .2s ease,transform .2s ease}
        .footer-links a:hover{color:var(--lime);transform:translateX(3px)}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:25px;
            margin-top:46px;
            border-top:1px solid #3c443d;
            color:#8f998e;
            font-size:.78rem;
        }
        @media (max-width:1024px){
            .page-hero-grid{gap:38px}
            .download-layout,.info-grid{grid-template-columns:1fr}
            .steps-grid{grid-template-columns:repeat(2,1fr)}
            .step:nth-child(2){border-right:0}
            .step:nth-child(-n+2){border-bottom:1px solid var(--ink)}
            .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
            .footer-brand{grid-column:1/-1}
        }
        @media (max-width:768px){
            .container{width:min(var(--container),calc(100% - 40px))}
            .header-inner{min-height:70px}
            .main-nav{
                display:none;
                position:absolute;
                top:70px;
                left:20px;
                right:20px;
                padding:12px;
                flex-direction:column;
                align-items:stretch;
                background:var(--white);
                border:1px solid var(--line);
                border-radius:16px;
                box-shadow:var(--shadow);
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 14px}
            .menu-toggle{display:block}
            .header-action{display:none}
            .page-hero{padding:62px 0 58px}
            .page-hero-grid{grid-template-columns:1fr}
            .download-visual{min-height:290px}
            .download-board{max-width:390px}
            .strip-grid{grid-template-columns:1fr;gap:17px}
            .section{padding:76px 0}
            .version-head,.version-item{grid-template-columns:1fr 1fr;gap:8px}
            .version-head span:nth-child(3),.version-head span:nth-child(4),
            .version-item span:nth-child(3),.version-item span:nth-child(4){display:none}
            .cta-box{padding:32px 26px;display:block}
            .cta-actions{margin-top:25px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .footer-brand{grid-column:1/-1}
            .footer-bottom{display:block}
            .footer-bottom span{display:block;margin-top:8px}
        }
        @media (max-width:520px){
            h1{font-size:2.45rem}
            h2{font-size:2rem}
            .brand-name{font-size:.92rem;white-space:normal;line-height:1.2}
            .page-hero-copy p{font-size:1rem}
            .hero-actions,.cta-actions{flex-direction:column;align-items:stretch}
            .hero-actions .btn,.cta-actions .btn{width:100%}
            .download-board{padding:23px;transform:none}
            .system-panel,.download-card{padding:25px}
            .system-row{grid-template-columns:60px 1fr auto;gap:12px}
            .system-badge{width:56px;height:56px;border-radius:14px;font-size:1.1rem}
            .steps-grid{grid-template-columns:1fr}
            .step{border-right:0!important;border-bottom:1px solid var(--ink)}
            .step:last-child{border-bottom:0}
            .footer-grid{grid-template-columns:1fr}
            .footer-brand{grid-column:auto}
        }

/* roulang page: category3 */
:root{
        --ink:#1d211e;--ink-soft:#343a35;--lime:#c8ed62;--lime-deep:#9fc43d;
        --coral:#ef785d;--cream:#f8f6ef;--sand:#efede5;--mist:#e4e6df;
        --white:#fffefa;--muted:#727971;--line:#d9ddd3;
        --shadow:0 16px 42px rgba(29,33,30,.08);--shadow-sm:0 7px 22px rgba(29,33,30,.06);
        --radius:18px;--radius-lg:28px;--container:1200px;--ease:cubic-bezier(.2,.7,.2,1)
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 64px));margin:0 auto}
    .section{padding:96px 0}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.76rem;font-weight:800;letter-spacing:.12em}
    .eyebrow:before{content:"";width:28px;height:3px;border-radius:9px;background:var(--lime-deep)}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(2.35rem,5vw,4.7rem);line-height:1.12;letter-spacing:-.06em;font-weight:850;margin:18px 0 22px}
    h2{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.2;letter-spacing:-.045em;font-weight:850;margin-bottom:17px}
    h3{font-size:1.14rem;line-height:1.35;font-weight:800}
    .section-head{max-width:720px;margin-bottom:40px}
    .section-head p{color:var(--muted);max-width:650px;margin-bottom:0}
    .muted{color:var(--muted)}
    .pill,.status{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;border-radius:99px;font-size:.76rem;line-height:1.2;font-weight:750}
    .pill{color:var(--ink);background:var(--lime)}
    .pill.coral{background:#ffd3c9;color:#7c3326}
    .pill.gray{background:var(--mist);color:var(--ink-soft)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 21px;border:1px solid transparent;border-radius:12px;font-weight:800;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
    .btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
    .btn:focus-visible,.main-nav a:focus-visible,.menu-toggle:focus-visible,.faq-item summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
    .btn-primary{background:var(--lime);color:var(--ink)}
    .btn-primary:hover{background:#d6f782}
    .btn-dark{background:var(--ink);color:var(--lime)}
    .btn-dark:hover{background:#303832}
    .btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
    .btn-outline:hover{background:var(--ink);color:var(--white)}
    .arrow{font-size:1.2rem;line-height:1}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(248,246,239,.94);border-bottom:1px solid rgba(217,221,211,.8);backdrop-filter:blur(16px)}
    .header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.045em;white-space:nowrap}
    .brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--lime);font-size:.9rem}
    .brand-name{font-size:1.05rem}
    .main-nav{display:flex;align-items:center;gap:4px}
    .main-nav a{position:relative;padding:10px 12px;color:var(--ink-soft);font-size:.92rem;font-weight:700;transition:color .2s ease,background .2s ease}
    .main-nav a:after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:3px;border-radius:5px;background:transparent}
    .main-nav a:hover,.main-nav a.active{color:var(--ink);background:#eef0e8}
    .main-nav a.active:after{background:var(--lime-deep)}
    .header-action{min-height:42px;padding:0 17px;font-size:.88rem}
    .menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink);font-size:1.2rem}
    .page-hero{padding:82px 0 76px;background:var(--sand);border-bottom:1px solid var(--line)}
    .page-hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:78px;align-items:end}
    .page-hero h1 span{display:block;color:#556329}
    .page-hero-copy{max-width:760px}
    .page-hero-copy p{max-width:670px;color:var(--ink-soft);font-size:1.1rem}
    .hero-aside{padding:26px;border-left:4px solid var(--lime-deep);background:rgba(255,254,250,.58);border-radius:0 var(--radius) var(--radius) 0}
    .hero-aside strong{display:block;font-size:1.7rem;line-height:1.2;margin:10px 0}
    .hero-aside p{color:var(--muted);font-size:.92rem;margin-bottom:0}
    .intro-strip{padding:25px 0;background:var(--ink);color:var(--white)}
    .intro-strip .strip-inner{display:flex;justify-content:space-between;align-items:center;gap:24px}
    .strip-inner p{margin:0;color:#dce1d8}
    .strip-inner .pill{flex:none}
    .directory{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .entry-row{display:flex;align-items:center;gap:18px;padding:22px 23px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
    .entry-row:hover{transform:translateY(-4px);border-color:var(--lime-deep);box-shadow:var(--shadow-sm)}
    .entry-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;background:var(--lime);font-weight:900}
    .entry-row h3{margin:0 0 4px}
    .entry-row p{margin:0;color:var(--muted);font-size:.9rem}
    .entry-arrow{margin-left:auto;font-size:1.5rem;color:var(--lime-deep)}
    .scene-layout{display:grid;grid-template-columns:4fr 8fr;gap:44px;align-items:start}
    .scene-note{padding:27px;background:#e7e9df;border-radius:var(--radius-lg)}
    .scene-note p{color:var(--ink-soft);margin-bottom:0}
    .scene-list{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
    .scene-card{padding:23px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
    .scene-card h3{margin:13px 0 7px}
    .scene-card p{margin:0;color:var(--muted);font-size:.91rem}
    .steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .step{position:relative;padding:29px 22px 31px;border-right:1px solid var(--line)}
    .step:last-child{border-right:0}
    .step-num{color:var(--coral);font-size:1.8rem;font-weight:900;line-height:1}
    .step h3{margin:17px 0 8px}
    .step p{margin:0;color:var(--muted);font-size:.9rem}
    .status-panel{padding:42px;background:var(--ink);color:var(--white);border-radius:var(--radius-lg)}
    .status-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1px;margin-top:30px;background:#4b544c;border:1px solid #4b544c}
    .status-cell{padding:20px;background:var(--ink)}
    .status-cell strong{display:block;font-size:1.1rem;margin:8px 0 3px}
    .status-cell span:last-child{color:#b9c2b7;font-size:.88rem}
    .dot{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:var(--lime)}
    .faq-list{max-width:850px;border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-item summary{display:flex;justify-content:space-between;gap:20px;padding:20px 4px;cursor:pointer;font-weight:800;list-style:none}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";color:var(--lime-deep);font-size:1.4rem;font-weight:400}
    .faq-item[open] summary:after{content:"−"}
    .faq-answer{padding:0 42px 21px 4px;color:var(--muted)}
    .cta-band{padding:54px 0;background:var(--lime)}
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta-inner h2{margin-bottom:8px}
    .cta-inner p{margin:0;color:var(--ink-soft)}
    .site-footer{padding:66px 0 24px;background:var(--ink);color:var(--white)}
    .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:42px}
    .footer-brand .brand{color:var(--white);margin-bottom:18px}
    .footer-brand p{max-width:340px;color:#b9c2b7;font-size:.9rem}
    .site-footer h3{font-size:.95rem;margin:4px 0 17px;color:var(--lime)}
    .footer-links{display:grid;gap:8px}
    .footer-links a{color:#c6cdc4;font-size:.88rem;transition:color .2s ease}
    .footer-links a:hover{color:var(--lime)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:54px;padding-top:20px;border-top:1px solid #454d46;color:#9da79c;font-size:.78rem}
    @media(max-width:1024px){.page-hero-grid{gap:40px}.container{width:min(var(--container),calc(100% - 48px))}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
    @media(max-width:768px){
        .container{width:min(100% - 36px,var(--container))}
        .header-inner{min-height:70px}.main-nav{display:none;position:absolute;left:18px;right:18px;top:70px;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
        .main-nav.open{display:flex}.main-nav a{padding:12px 14px}.header-action{display:none}.menu-toggle{display:block}
        .page-hero{padding:60px 0}.page-hero-grid,.scene-layout{grid-template-columns:1fr}
        .intro-strip .strip-inner,.cta-inner{align-items:flex-start;flex-direction:column}
        .directory{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}
        .status-grid{grid-template-columns:1fr}
        .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}
        .footer-bottom{flex-direction:column;margin-top:38px}
    }
    @media(max-width:520px){
        .section{padding:70px 0}h1{font-size:2.45rem}.page-hero-copy p{font-size:1rem}
        .scene-list{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.step,.step:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}
        .status-panel{padding:27px 20px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
        .entry-row{padding:18px}.cta-band{padding:42px 0}
    }

/* roulang page: category4 */
:root {
            --ink:#1d211e;
            --ink-soft:#343a35;
            --lime:#c8ed62;
            --lime-deep:#9fc43d;
            --coral:#ef785d;
            --cream:#f8f6ef;
            --sand:#efede5;
            --mist:#e4e6df;
            --white:#fffefa;
            --muted:#727971;
            --line:#d9ddd3;
            --shadow:0 16px 42px rgba(29,33,30,.08);
            --shadow-sm:0 7px 22px rgba(29,33,30,.06);
            --radius:18px;
            --radius-lg:28px;
            --container:1200px;
            --ease:cubic-bezier(.2,.7,.2,1);
        }
        * { box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        a { color:inherit; text-decoration:none; }
        img { max-width:100%; display:block; }
        button,input,textarea { font:inherit; }
        button { cursor:pointer; }
        .container { width:min(var(--container),calc(100% - 64px)); margin:0 auto; }
        .section { padding:96px 0; }
        .section-head { max-width:720px; margin-bottom:40px; }
        .section-head p { color:var(--muted); max-width:650px; margin:12px 0 0; }
        h1,h2,h3,p { margin-top:0; }
        h1,h2,h3 { letter-spacing:-.045em; line-height:1.2; }
        h1 { font-size:clamp(2.35rem,5vw,4.6rem); font-weight:850; margin-bottom:22px; }
        h2 { font-size:clamp(1.8rem,3vw,2.8rem); font-weight:850; margin-bottom:14px; }
        h3 { font-size:1.2rem; font-weight:800; margin-bottom:9px; }
        .eyebrow {
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--ink-soft);
            font-size:.76rem;
            font-weight:800;
            letter-spacing:.13em;
        }
        .eyebrow:before { content:""; width:28px; height:3px; border-radius:9px; background:var(--lime-deep); }
        .pill,.status {
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:4px 11px;
            border-radius:99px;
            font-size:.76rem;
            line-height:1.2;
            font-weight:750;
        }
        .pill { color:var(--ink); background:var(--lime); }
        .pill.coral { background:#ffd3c9; color:#7c3326; }
        .pill.gray { background:var(--mist); color:var(--ink-soft); }
        .btn {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:50px;
            padding:0 21px;
            border:1px solid transparent;
            border-radius:12px;
            font-weight:800;
            transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
        }
        .btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }
        .btn-primary { background:var(--lime); color:var(--ink); }
        .btn-primary:hover { background:#d6f782; }
        .btn-dark { background:var(--ink); color:var(--lime); }
        .btn-dark:hover { background:#303832; }
        .btn-outline { border-color:var(--ink); color:var(--ink); background:transparent; }
        .btn-outline:hover { background:var(--ink); color:var(--white); }
        .arrow { font-size:1.2rem; line-height:1; }
        .site-header {
            position:sticky;
            top:0;
            z-index:20;
            background:rgba(248,246,239,.94);
            border-bottom:1px solid rgba(217,221,211,.8);
            backdrop-filter:blur(16px);
        }
        .header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
        .brand { display:inline-flex; align-items:center; gap:11px; font-weight:900; letter-spacing:-.045em; white-space:nowrap; }
        .brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--ink); color:var(--lime); font-size:.9rem; }
        .brand-name { font-size:1.05rem; }
        .main-nav { display:flex; align-items:center; gap:4px; }
        .main-nav a { position:relative; padding:10px 12px; color:var(--ink-soft); font-size:.92rem; font-weight:700; transition:color .2s ease,background .2s ease; }
        .main-nav a:after { content:""; position:absolute; left:12px; right:12px; bottom:3px; height:3px; border-radius:5px; background:transparent; }
        .main-nav a:hover,.main-nav a.active { color:var(--ink); background:#eef0e8; }
        .main-nav a.active:after { background:var(--lime-deep); }
        .header-action { min-height:42px; padding:0 17px; font-size:.88rem; }
        .menu-toggle { display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:11px; background:var(--white); color:var(--ink); font-size:1.2rem; }
        .page-hero { padding:86px 0 78px; background:var(--sand); border-bottom:1px solid var(--line); }
        .page-hero-grid { display:grid; grid-template-columns:7fr 5fr; align-items:end; gap:70px; }
        .page-hero-copy { max-width:780px; }
        .page-hero-copy p { max-width:700px; color:var(--ink-soft); font-size:1.12rem; }
        .hero-aside { padding:26px; background:var(--ink); color:var(--white); border-radius:var(--radius-lg); }
        .hero-aside strong { display:block; color:var(--lime); font-size:2.3rem; line-height:1.1; margin:9px 0; }
        .hero-aside p { color:#c9cec5; font-size:.92rem; margin:0; }
        .news-layout { display:grid; grid-template-columns:1.5fr .8fr; gap:42px; align-items:start; }
        .news-list { border-top:1px solid var(--line); }
        .news-item { display:grid; grid-template-columns:118px 1fr 28px; gap:22px; padding:28px 0; border-bottom:1px solid var(--line); transition:padding .25s var(--ease),background .25s var(--ease); }
        .news-item:hover { padding-left:15px; background:rgba(255,254,250,.55); }
        .news-date { color:var(--muted); font-size:.86rem; font-weight:750; }
        .news-item p { color:var(--muted); margin:7px 0 0; font-size:.93rem; }
        .news-arrow { font-size:1.35rem; color:var(--lime-deep); align-self:center; }
        .side-panel { padding:28px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
        .side-panel h3 { margin-bottom:18px; }
        .topic-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
        .topic-row:last-child { border-bottom:0; }
        .topic-row span:last-child { color:var(--muted); font-size:.84rem; }
        .topic-row a:hover { color:#687f25; }
        .sand-section { background:var(--sand); }
        .topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
        .topic-card { min-height:170px; padding:23px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); transition:transform .25s var(--ease),box-shadow .25s var(--ease); }
        .topic-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); }
        .topic-card .number { color:var(--coral); font-weight:850; font-size:.86rem; }
        .topic-card p { color:var(--muted); font-size:.9rem; margin:0; }
        .guide-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
        .guide-step { position:relative; padding:25px 22px; border-left:3px solid var(--lime-deep); background:var(--white); border-radius:0 var(--radius) var(--radius) 0; }
        .guide-step b { display:block; font-size:2rem; line-height:1; margin-bottom:18px; color:var(--lime-deep); }
        .guide-step p { color:var(--muted); font-size:.9rem; margin:0; }
        .status-band { background:var(--ink); color:var(--white); }
        .status-grid { display:grid; grid-template-columns:1.1fr 2fr; gap:60px; align-items:center; }
        .status-band h2 { color:var(--white); }
        .status-band p { color:#c8cec4; margin-bottom:0; }
        .status-list { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
        .status-box { padding:21px; border:1px solid #454b45; border-radius:14px; }
        .status-box strong { display:block; color:var(--lime); margin:8px 0 2px; }
        .status-box small { color:#aeb6ac; }
        .faq-list { max-width:850px; border-top:1px solid var(--line); }
        .faq-item { border-bottom:1px solid var(--line); }
        .faq-item summary { list-style:none; cursor:pointer; padding:20px 4px; font-weight:800; display:flex; justify-content:space-between; gap:20px; }
        .faq-item summary::-webkit-details-marker { display:none; }
        .faq-item summary:after { content:"+"; color:var(--lime-deep); font-size:1.4rem; line-height:1; }
        .faq-item[open] summary:after { content:"−"; }
        .faq-answer { padding:0 45px 20px 4px; color:var(--muted); }
        .cta { padding:62px 0; background:var(--lime); }
        .cta-inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
        .cta h2 { margin-bottom:8px; }
        .cta p { margin:0; color:#4e5d29; }
        .site-footer { padding:64px 0 26px; background:var(--ink); color:var(--white); }
        .footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:42px; padding-bottom:50px; }
        .footer-brand p { max-width:350px; color:#aeb6ac; margin:19px 0 0; font-size:.9rem; }
        .site-footer .brand-name { color:var(--white); }
        .site-footer h3 { color:var(--lime); font-size:1rem; letter-spacing:0; }
        .footer-links { display:grid; gap:8px; }
        .footer-links a { color:#b9c0b7; font-size:.9rem; transition:color .2s ease,padding .2s ease; }
        .footer-links a:hover { color:var(--lime); padding-left:4px; }
        .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid #414740; color:#9da69d; font-size:.8rem; }
        a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
        @media (max-width:1024px) {
            .page-hero-grid,.news-layout,.status-grid { gap:35px; }
            .topic-grid,.guide-grid { grid-template-columns:repeat(2,1fr); }
            .footer-grid { grid-template-columns:repeat(2,1fr); }
        }
        @media (max-width:768px) {
            .container { width:min(var(--container),calc(100% - 40px)); }
            .header-inner { min-height:70px; }
            .main-nav { display:none; position:absolute; top:70px; left:20px; right:20px; padding:10px; flex-direction:column; align-items:stretch; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }
            .main-nav.open { display:flex; }
            .main-nav a { padding:12px 14px; }
            .menu-toggle { display:block; }
            .header-action { display:none; }
            .page-hero { padding:64px 0; }
            .page-hero-grid,.news-layout,.status-grid { grid-template-columns:1fr; }
            .hero-aside { max-width:500px; }
            .section { padding:72px 0; }
            .status-list { grid-template-columns:1fr; }
            .cta-inner { align-items:flex-start; flex-direction:column; }
        }
        @media (max-width:520px) {
            .container { width:calc(100% - 32px); }
            h1 { font-size:2.35rem; }
            .topic-grid,.guide-grid { grid-template-columns:1fr; }
            .news-item { grid-template-columns:82px 1fr 18px; gap:12px; }
            .news-item:hover { padding-left:8px; }
            .footer-grid { grid-template-columns:1fr; gap:30px; }
            .footer-bottom { flex-direction:column; gap:7px; }
            .btn { width:100%; }
        }