/* roulang page: index */
:root {
            --plum: #402c4a;
            --plum-deep: #2d2035;
            --plum-soft: #eee8f0;
            --coral: #e56b4c;
            --coral-dark: #bf4f35;
            --sage: #557477;
            --sage-soft: #e6efed;
            --paper: #ffffff;
            --mist: #f2f5f2;
            --ink: #25262a;
            --muted: #687078;
            --quiet: #92999c;
            --line: #dce3df;
            --line-dark: #cbd4d0;
            --shadow: 0 12px 30px rgba(37, 38, 42, .08);
            --shadow-soft: 0 5px 16px rgba(37, 38, 42, .06);
            --radius: 12px;
            --radius-small: 8px;
            --max: 1200px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--mist);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            text-rendering: optimizeLegibility;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; }
        button { font: inherit; }
        h1, h2, h3, p, ul, ol { margin-top: 0; }
        h1, h2, h3 { line-height: 1.25; font-weight: 700; }
        p { color: var(--muted); }
        .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: 88px 0; }
        .section-tight { padding: 64px 0; }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 34px;
        }
        .section-head h2 { margin: 0; font-size: 32px; color: var(--plum-deep); }
        .section-head p { max-width: 560px; margin: 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            color: var(--sage);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .eyebrow::before {
            content: "";
            display: inline-block;
            width: 22px;
            height: 2px;
            background: var(--coral);
        }
        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 2px 9px;
            border: 1px solid var(--line);
            border-radius: 5px;
            color: var(--sage);
            background: #f7faf8;
            font-size: 12px;
            line-height: 1.4;
        }
        .tag.plum { color: var(--plum); background: var(--plum-soft); border-color: #ddd0e1; }
        .tag.coral { color: var(--coral-dark); background: #fff0eb; border-color: #f5d1c5; }
        .tag.sage { color: #3d6162; background: var(--sage-soft); border-color: #c9dbd7; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 7px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
        .btn:focus-visible, a:focus-visible, button:focus-visible {
            outline: 3px solid rgba(229, 107, 76, .35);
            outline-offset: 3px;
        }
        .btn-primary { color: #fff; background: var(--plum); }
        .btn-primary:hover { background: var(--plum-deep); }
        .btn-coral { color: #fff; background: var(--coral); }
        .btn-coral:hover { background: var(--coral-dark); }
        .btn-light { color: var(--plum); background: #fff; border-color: #cfc2d3; }
        .btn-light:hover { border-color: var(--plum); background: var(--plum-soft); }
        .btn-small { min-height: 38px; padding: 0 14px; font-size: 13px; }
        .icon-arrow { font-size: 18px; line-height: 1; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(220, 227, 223, .9);
            background: rgba(242, 245, 242, .96);
            backdrop-filter: blur(12px);
        }
        .nav-wrap { display: flex; align-items: center; min-height: 76px; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 230px; }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 9px;
            color: #fff;
            background: var(--plum);
            font-size: 18px;
            font-weight: 800;
        }
        .brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
        .brand-name { color: var(--plum-deep); font-size: 18px; font-weight: 800; }
        .brand-sub { margin-top: 4px; color: var(--sage); font-size: 11px; }
        .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
        .main-nav a {
            position: relative;
            padding: 25px 12px 22px;
            color: var(--muted);
            font-size: 14px;
            white-space: nowrap;
            transition: color .2s ease, background .2s ease;
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            right: 12px;
            bottom: 14px;
            left: 12px;
            height: 2px;
            background: var(--coral);
            transform: scaleX(0);
            transition: transform .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--plum); background: rgba(238, 232, 240, .65); }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .nav-mobile { display: none; width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 7px; color: var(--plum); background: #fff; cursor: pointer; }
        .nav-mobile span, .nav-mobile span::before, .nav-mobile span::after { display: block; width: 18px; height: 2px; margin: auto; background: currentColor; content: ""; }
        .nav-mobile span::before { transform: translateY(-6px); }
        .nav-mobile span::after { transform: translateY(4px); }
        .hero {
            position: relative;
            overflow: hidden;
            min-height: 600px;
            padding: 88px 0 48px;
            color: #fff;
            background: var(--plum-deep);
        }
        .hero::before {
            position: absolute;
            top: 0;
            right: 0;
            width: 43%;
            height: 100%;
            background: #493451;
            content: "";
            clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
        }
        .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
        .hero-copy { max-width: 610px; }
        .hero .eyebrow { color: #d7e4df; }
        .hero h1 { max-width: 620px; margin: 0 0 22px; color: #fff; font-size: clamp(38px, 5vw, 58px); letter-spacing: 0; }
        .hero h1 em { color: #f6a187; font-style: normal; }
        .hero-copy > p { max-width: 560px; margin-bottom: 30px; color: #d8d2dc; font-size: 17px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .hero .btn-light { border-color: #bdaec1; color: #fff; background: transparent; }
        .hero .btn-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
        .hero-note { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #bfc9c7; font-size: 13px; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #8fc2ad; box-shadow: 0 0 0 4px rgba(143,194,173,.14); }
        .access-visual { position: relative; min-height: 390px; padding: 30px 0 0 32px; }
        .desk-panel {
            position: relative;
            width: min(100%, 500px);
            min-height: 300px;
            padding: 24px;
            border: 1px solid rgba(255,255,255,.2);
            border-radius: 12px;
            background: #f9faf8;
            box-shadow: 18px 22px 0 rgba(28, 17, 35, .25);
            color: var(--ink);
        }
        .panel-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
        .panel-dots { display: flex; gap: 5px; }
        .panel-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d4dad7; }
        .panel-title { color: var(--plum); font-size: 15px; font-weight: 800; }
        .panel-state { color: var(--sage); font-size: 12px; }
        .panel-body { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; padding-top: 24px; }
        .entry-line { display: flex; align-items: center; gap: 11px; margin: 17px 0; color: var(--muted); font-size: 13px; }
        .entry-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; color: var(--plum); background: var(--plum-soft); font-weight: 800; }
        .entry-bar { height: 9px; margin: 9px 0; border-radius: 3px; background: #e6ebe7; }
        .entry-bar.short { width: 65%; }
        .entry-button { width: 100%; height: 35px; margin-top: 14px; border-radius: 5px; background: var(--coral); }
        .device-tile { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
        .device-tile strong { display: block; color: var(--plum); font-size: 13px; }
        .device-screen { height: 108px; margin-top: 13px; padding: 12px; border-radius: 6px; background: #f1f5f2; }
        .screen-head { width: 55%; height: 7px; margin-bottom: 15px; border-radius: 2px; background: #9aafb0; }
        .screen-row { height: 8px; margin: 9px 0; border-radius: 2px; background: #d4dfdc; }
        .screen-row.wide { width: 85%; }
        .hero-strip { position: relative; z-index: 1; display: flex; align-items: center; gap: 30px; margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); color: #d8d2dc; font-size: 13px; }
        .hero-strip b { color: #fff; font-weight: 700; }
        .direct { background: #fff; }
        .operation-line { display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: center; gap: 0; padding: 27px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-soft); }
        .op-step { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .op-number { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--plum); font-weight: 800; }
        .op-step strong { display: block; color: var(--ink); font-size: 15px; }
        .op-step span { display: block; color: var(--quiet); font-size: 12px; }
        .op-arrow { padding: 0 15px; color: var(--coral); font-size: 21px; }
        .devices { background: var(--mist); }
        .device-grid { display: grid; grid-template-columns: 1.15fr .95fr .95fr; gap: 16px; }
        .device-card { min-height: 240px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
        .device-card:hover { transform: translateY(-3px); border-color: #c2b3c7; box-shadow: var(--shadow); }
        .device-card.featured { color: #fff; background: var(--plum); border-color: var(--plum); }
        .device-card.featured p, .device-card.featured .device-meta { color: #d8d2dc; }
        .device-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
        .device-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 9px; color: var(--plum); background: var(--plum-soft); font-size: 20px; font-weight: 800; }
        .featured .device-symbol { color: var(--plum); background: #fff; }
        .device-card h3 { margin: 0; font-size: 19px; }
        .device-card p { min-height: 54px; margin-bottom: 18px; font-size: 14px; }
        .device-meta { color: var(--sage); font-size: 13px; }
        .device-link { display: inline-flex; margin-top: 16px; color: var(--coral); font-size: 14px; font-weight: 700; }
        .app-section { background: #e9efec; }
        .app-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
        .app-phone { position: relative; width: 220px; height: 390px; margin: auto; padding: 11px; border: 7px solid #27222b; border-radius: 28px; background: #fff; box-shadow: 14px 16px 0 rgba(64,44,74,.12); }
        .phone-camera { width: 53px; height: 7px; margin: 0 auto 14px; border-radius: 8px; background: #27222b; }
        .phone-screen { height: 340px; padding: 20px 15px; border-radius: 17px; background: #f3f6f3; }
        .phone-logo { display: grid; place-items: center; width: 45px; height: 45px; margin: 18px auto; border-radius: 12px; color: #fff; background: var(--plum); font-weight: 800; }
        .phone-line { height: 9px; margin: 13px 0; border-radius: 3px; background: #d8e2de; }
        .phone-line.small { width: 62%; }
        .phone-action { height: 36px; margin-top: 26px; border-radius: 6px; background: var(--coral); }
        .app-info h2 { margin-bottom: 16px; font-size: 34px; color: var(--plum-deep); }
        .app-info > p { max-width: 580px; margin-bottom: 26px; }
        .app-details { display: flex; flex-wrap: wrap; gap: 22px; margin: 25px 0; }
        .app-detail { min-width: 110px; }
        .app-detail small { display: block; margin-bottom: 3px; color: var(--quiet); font-size: 12px; }
        .app-detail strong { color: var(--plum); font-size: 15px; }
        .download-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
        .download-code { display: flex; align-items: center; gap: 9px; color: var(--sage); font-size: 12px; }
        .code-grid { display: grid; grid-template-columns: repeat(5, 4px); gap: 2px; padding: 7px; border: 1px solid var(--line-dark); background: #fff; }
        .code-grid i { width: 4px; height: 4px; background: var(--plum); }
        .security { background: #fff; }
        .security-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
        .security-intro h2 { margin-bottom: 16px; color: var(--plum-deep); font-size: 32px; }
        .security-intro p { margin-bottom: 22px; }
        .state-box { padding: 18px; border-left: 3px solid var(--sage); background: var(--sage-soft); color: #385758; font-size: 13px; }
        .check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; border-top: 1px solid var(--line); }
        .check-item { display: flex; gap: 15px; padding: 22px 0; border-bottom: 1px solid var(--line); }
        .check-mark { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: #315d5c; background: var(--sage-soft); font-size: 14px; font-weight: 800; }
        .check-item strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 15px; }
        .check-item span { color: var(--muted); font-size: 13px; }
        .steps { background: var(--plum-soft); }
        .timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .timeline::before { position: absolute; top: 25px; right: 12%; left: 12%; height: 1px; background: #cdbed1; content: ""; }
        .time-step { position: relative; z-index: 1; }
        .time-no { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 20px; border: 5px solid var(--plum-soft); border-radius: 50%; color: #fff; background: var(--coral); font-size: 16px; font-weight: 800; box-shadow: 0 0 0 1px #d5c5d8; }
        .time-step h3 { margin-bottom: 8px; color: var(--plum); font-size: 18px; }
        .time-step p { margin: 0; font-size: 14px; }
        .beginner { background: #fff; }
        .beginner-grid { display: grid; grid-template-columns: 280px 1fr; gap: 60px; }
        .topic-index { border-right: 1px solid var(--line); }
        .topic-index a { display: block; padding: 11px 18px; border-left: 3px solid transparent; color: var(--muted); font-size: 14px; }
        .topic-index a:hover, .topic-index a.current { border-left-color: var(--coral); color: var(--plum); background: #faf6fa; font-weight: 700; }
        .guide-list { display: grid; gap: 0; }
        .guide-item { display: grid; grid-template-columns: 1fr auto; gap: 25px; padding: 20px 0; border-bottom: 1px solid var(--line); }
        .guide-item:first-child { padding-top: 0; }
        .guide-item h3 { margin: 0 0 5px; color: var(--plum); font-size: 18px; }
        .guide-item p { margin: 0; font-size: 14px; }
        .guide-item time { color: var(--quiet); font-size: 12px; white-space: nowrap; }
        .trouble { background: var(--mist); }
        .faq-list { max-width: 920px; margin: auto; border-top: 1px solid var(--line-dark); }
        .faq-item { border-bottom: 1px solid var(--line-dark); }
        .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; color: var(--plum); font-weight: 700; cursor: pointer; list-style: none; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: "+"; color: var(--coral); font-size: 23px; font-weight: 400; }
        .faq-item[open] summary::after { content: "−"; }
        .faq-answer { max-width: 780px; padding: 0 34px 20px 0; color: var(--muted); font-size: 14px; }
        .news { background: #fff; }
        .news-layout { display: grid; grid-template-columns: 1.3fr .7fr; gap: 54px; }
        .news-list { border-top: 1px solid var(--line-dark); }
        .news-item { display: grid; grid-template-columns: 94px 1fr auto; gap: 22px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
        .news-date { color: var(--quiet); font-size: 12px; line-height: 1.4; }
        .news-date b { display: block; margin-bottom: 2px; color: var(--plum); font-size: 19px; }
        .news-item h3 { margin: 0 0 4px; color: var(--plum); font-size: 17px; }
        .news-item p { margin: 0; font-size: 13px; }
        .news-item .arrow { color: var(--coral); font-size: 20px; }
        .empty-state { padding: 30px 0; color: var(--quiet); border-bottom: 1px solid var(--line); }
        .notice-panel { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #f9fbf9; }
        .notice-panel h3 { margin-bottom: 20px; color: var(--plum); font-size: 20px; }
        .notice { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 13px; }
        .notice b { min-width: 57px; color: var(--sage); font-weight: 700; }
        .notice span { color: var(--muted); }
        .protection { background: var(--mist); }
        .protection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .protection-item { padding: 23px 20px; border-top: 3px solid var(--sage); background: #fff; }
        .protection-item h3 { margin: 15px 0 7px; color: var(--plum); font-size: 17px; }
        .protection-item p { margin: 0; font-size: 13px; }
        .protect-icon { color: var(--sage); font-size: 22px; font-weight: 800; }
        .comparison { background: #fff; }
        .compare-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); background: #fff; }
        .compare-table th, .compare-table td { padding: 17px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
        .compare-table th { color: var(--plum); background: var(--plum-soft); font-size: 14px; }
        .compare-table td { color: var(--muted); font-size: 14px; }
        .compare-table tr:last-child td { border-bottom: 0; }
        .reading { background: var(--mist); }
        .reading-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .reading-item { padding: 22px; border: 1px solid var(--line); background: #fff; transition: transform .2s ease, box-shadow .2s ease; }
        .reading-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
        .reading-item h3 { margin: 15px 0 8px; color: var(--plum); font-size: 17px; }
        .reading-item p { margin-bottom: 15px; font-size: 13px; }
        .reading-item a { color: var(--coral-dark); font-size: 13px; font-weight: 700; }
        .faq-section { background: #fff; }
        .closing { padding: 62px 0; color: #fff; background: var(--plum); }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .closing h2 { margin: 0 0 8px; font-size: 30px; }
        .closing p { margin: 0; color: #d8d2dc; }
        .closing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
        .closing .btn-light { color: #fff; border-color: #bdaec1; background: transparent; }
        .site-footer { padding: 48px 0 24px; color: #d4ccd8; background: #29222e; }
        .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 38px; }
        .footer-brand .brand-name { color: #fff; }
        .footer-brand .brand-sub { color: #b4c3bf; }
        .footer-brand p { max-width: 300px; margin-top: 19px; color: #aaa3ae; font-size: 13px; }
        .footer-col h3 { margin: 4px 0 15px; color: #fff; font-size: 14px; }
        .footer-col a { display: block; margin: 8px 0; color: #aaa3ae; font-size: 13px; transition: color .2s ease; }
        .footer-col a:hover { color: #f6a187; }
        .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #8e8791; font-size: 12px; }
        .footer-bottom p { margin: 0; color: inherit; }
        @media (max-width: 1024px) {
            .container { width: min(var(--max), calc(100% - 36px)); }
            .nav-wrap { gap: 15px; }
            .brand { min-width: 205px; }
            .main-nav a { padding-right: 8px; padding-left: 8px; font-size: 13px; }
            .main-nav a::after { right: 8px; left: 8px; }
            .hero-grid, .app-layout { gap: 35px; }
            .security-layout { gap: 35px; }
            .protection-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .section { padding: 65px 0; }
            .section-head { display: block; margin-bottom: 25px; }
            .section-head h2 { margin-bottom: 12px; font-size: 28px; }
            .nav-wrap { min-height: 66px; }
            .brand { min-width: 0; flex: 1; }
            .nav-actions .btn-light { display: none; }
            .nav-mobile { display: block; }
            .main-nav {
                position: absolute;
                top: 66px;
                right: 18px;
                left: 18px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                padding: 8px;
                border: 1px solid var(--line);
                border-radius: 8px;
                background: #fff;
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 12px 14px; }
            .main-nav a::after { display: none; }
            .hero { min-height: 0; padding: 65px 0 32px; }
            .hero::before { width: 100%; opacity: .3; clip-path: polygon(55% 0, 100% 0, 100% 100%, 25% 100%); }
            .hero-grid { display: block; }
            .hero h1 { font-size: 39px; }
            .access-visual { min-height: 320px; padding: 44px 0 0; }
            .desk-panel { min-height: 250px; padding: 18px; }
            .panel-body { gap: 12px; padding-top: 17px; }
            .hero-strip { margin-top: 24px; gap: 12px; flex-wrap: wrap; }
            .operation-line { grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px; }
            .op-arrow { display: none; }
            .device-grid, .news-layout { grid-template-columns: 1fr; }
            .app-layout, .security-layout, .beginner-grid { grid-template-columns: 1fr; gap: 35px; }
            .app-phone { order: 2; }
            .topic-index { display: flex; flex-wrap: wrap; gap: 5px; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
            .topic-index a { border-bottom: 2px solid transparent; border-left: 0; padding: 8px 10px; }
            .topic-index a:hover, .topic-index a.current { border-bottom-color: var(--coral); border-left: 0; }
            .timeline { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
            .timeline::before { display: none; }
            .reading-list { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
        }
        @media (max-width: 520px) {
            .container { width: min(var(--max), calc(100% - 28px)); }
            .brand-mark { width: 34px; height: 34px; font-size: 16px; }
            .brand-name { font-size: 16px; }
            .brand-sub { font-size: 10px; }
            .nav-actions .btn-primary { min-height: 38px; padding: 0 11px; font-size: 12px; }
            .hero h1 { font-size: 34px; }
            .hero-copy > p { font-size: 15px; }
            .hero-actions .btn { width: 100%; }
            .access-visual { min-height: 275px; }
            .desk-panel { transform: scale(.9); transform-origin: top left; width: 111%; }
            .panel-body { grid-template-columns: 1fr; }
            .panel-body .device-tile { display: none; }
            .operation-line { grid-template-columns: 1fr; }
            .device-grid { gap: 12px; }
            .device-card { min-height: 0; }
            .app-info h2, .security-intro h2 { font-size: 28px; }
            .download-row { align-items: flex-start; flex-direction: column; }
            .check-list, .protection-grid { grid-template-columns: 1fr; }
            .news-item { grid-template-columns: 65px 1fr auto; gap: 12px; }
            .news-item h3 { font-size: 15px; }
            .news-item p { font-size: 12px; }
            .compare-table { display: block; overflow-x: auto; white-space: nowrap; }
            .compare-table th, .compare-table td { padding: 13px 14px; }
            .closing-inner { display: block; }
            .closing h2 { font-size: 26px; }
            .closing-actions { margin-top: 22px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom p + p { margin-top: 7px; }
        }

/* roulang page: category1 */
:root {
            --plum: #402c4a;
            --plum-deep: #2d2035;
            --plum-soft: #eee8f0;
            --coral: #e56b4c;
            --coral-dark: #bf4f35;
            --sage: #557477;
            --sage-soft: #e6efed;
            --paper: #ffffff;
            --mist: #f2f5f2;
            --ink: #25262a;
            --muted: #687078;
            --quiet: #92999c;
            --line: #dce3df;
            --line-dark: #cbd4d0;
            --shadow: 0 12px 30px rgba(37, 38, 42, .08);
            --shadow-soft: 0 5px 16px rgba(37, 38, 42, .06);
            --radius: 12px;
            --radius-small: 8px;
            --max: 1200px;
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--mist);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            text-rendering: optimizeLegibility;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; }
        button, input { font: inherit; }
        button { border: 0; }
        .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: 88px 0; }
        .section-tight { padding: 64px 0; }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 34px;
        }
        .section-head h2 {
            margin: 0;
            color: var(--plum-deep);
            font-size: clamp(26px, 3vw, 32px);
            line-height: 1.35;
        }
        .section-head p { max-width: 550px; margin: 0; color: var(--muted); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            color: var(--sage);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .eyebrow::before {
            content: "";
            display: inline-block;
            width: 22px;
            height: 2px;
            background: var(--coral);
        }
        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 2px 9px;
            border: 1px solid var(--line);
            border-radius: 5px;
            color: var(--sage);
            background: #f7faf8;
            font-size: 12px;
            line-height: 1.4;
        }
        .tag.plum { color: var(--plum); background: var(--plum-soft); border-color: #ddd0e1; }
        .tag.coral { color: var(--coral-dark); background: #fff0eb; border-color: #f5d1c5; }
        .tag.sage { color: #3d6162; background: var(--sage-soft); border-color: #c9dbd7; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 7px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
        .btn:focus-visible, a:focus-visible, button:focus-visible {
            outline: 3px solid rgba(229, 107, 76, .35);
            outline-offset: 3px;
        }
        .btn-primary { color: #fff; background: var(--plum); }
        .btn-primary:hover { background: var(--plum-deep); }
        .btn-coral { color: #fff; background: var(--coral); }
        .btn-coral:hover { background: var(--coral-dark); }
        .btn-light { color: var(--plum); background: #fff; border-color: #cfc2d3; }
        .btn-light:hover { border-color: var(--plum); background: var(--plum-soft); }
        .btn-small { min-height: 38px; padding: 0 14px; font-size: 13px; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(220, 227, 223, .9);
            background: rgba(242, 245, 242, .96);
            backdrop-filter: blur(12px);
        }
        .nav-wrap { display: flex; align-items: center; min-height: 76px; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 230px; }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 9px;
            color: #fff;
            background: var(--plum);
            font-size: 18px;
            font-weight: 800;
        }
        .brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
        .brand-name { color: var(--plum-deep); font-size: 18px; font-weight: 800; }
        .brand-sub { margin-top: 4px; color: var(--sage); font-size: 11px; }
        .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
        .main-nav a {
            position: relative;
            padding: 25px 12px 22px;
            color: var(--muted);
            font-size: 14px;
            white-space: nowrap;
            transition: color .2s ease, background .2s ease;
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            right: 12px;
            bottom: 14px;
            left: 12px;
            height: 2px;
            background: var(--coral);
            transform: scaleX(0);
            transition: transform .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--plum); background: rgba(238, 232, 240, .65); }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .nav-mobile {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line-dark);
            border-radius: 7px;
            color: var(--plum);
            background: #fff;
            cursor: pointer;
        }
        .nav-mobile span, .nav-mobile span::before, .nav-mobile span::after {
            display: block;
            width: 18px;
            height: 2px;
            margin: auto;
            background: currentColor;
            content: "";
        }
        .nav-mobile span::before { transform: translateY(-6px); }
        .nav-mobile span::after { transform: translateY(4px); }

        .page-intro {
            padding: 48px 0 56px;
            border-bottom: 1px solid var(--line);
            background: var(--paper);
        }
        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-bottom: 30px;
            color: var(--quiet);
            font-size: 13px;
        }
        .breadcrumb a { color: var(--sage); }
        .breadcrumb a:hover { color: var(--coral-dark); }
        .crumb-arrow { color: var(--line-dark); }
        .intro-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
            gap: 50px;
            align-items: end;
        }
        .page-intro h1 {
            max-width: 760px;
            margin: 0;
            color: var(--plum-deep);
            font-size: clamp(34px, 4.4vw, 48px);
            line-height: 1.22;
            letter-spacing: .01em;
        }
        .page-intro p {
            max-width: 760px;
            margin: 20px 0 0;
            color: var(--muted);
            font-size: 17px;
        }
        .intro-meta {
            padding: 20px 0 4px 24px;
            border-left: 2px solid var(--coral);
        }
        .intro-meta strong { display: block; color: var(--plum); font-size: 15px; }
        .intro-meta span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }

        .guide-panel {
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--paper);
            box-shadow: var(--shadow-soft);
        }
        .guide-label {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 38px;
            color: #fff;
            background: var(--plum);
        }
        .guide-label h2 { margin: 8px 0 12px; font-size: 26px; line-height: 1.35; }
        .guide-label p { margin: 0; color: rgba(255,255,255,.78); }
        .guide-topics {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 20px;
        }
        .topic-item {
            min-height: 112px;
            padding: 20px;
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .topic-item:nth-child(2n) { border-right: 0; }
        .topic-item:nth-last-child(-n+2) { border-bottom: 0; }
        .topic-item strong { display: block; color: var(--plum-deep); font-size: 16px; }
        .topic-item span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }

        .content-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 42px;
            align-items: start;
        }
        .article-list {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--paper);
        }
        .article-row {
            display: grid;
            grid-template-columns: 108px minmax(0, 1fr) auto;
            gap: 22px;
            align-items: center;
            padding: 25px 28px;
            border-bottom: 1px solid var(--line);
            transition: background .2s ease;
        }
        .article-row:last-child { border-bottom: 0; }
        .article-row:hover { background: #fbfcfb; }
        .article-date {
            color: var(--sage);
            font-size: 13px;
            font-weight: 700;
            line-height: 1.45;
        }
        .article-date b { display: block; color: var(--plum); font-size: 18px; }
        .article-content h3 { margin: 0; color: var(--plum-deep); font-size: 19px; line-height: 1.45; }
        .article-content p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
        .article-action { color: var(--coral-dark); font-size: 14px; font-weight: 700; white-space: nowrap; }
        .article-action:hover { color: var(--plum); }
        .list-more {
            display: flex;
            justify-content: center;
            padding: 22px;
            border-top: 1px solid var(--line);
            background: #fafcfb;
        }
        .side-card {
            margin-bottom: 20px;
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--paper);
        }
        .side-card h3 { margin: 0 0 16px; color: var(--plum-deep); font-size: 18px; }
        .side-card p { margin: 0; color: var(--muted); font-size: 14px; }
        .status-list { display: grid; gap: 13px; margin-top: 16px; }
        .status-line { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 14px; }
        .status-dot { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 8px; border-radius: 50%; background: var(--sage); }
        .status-dot.warn { background: var(--coral); }
        .notice-card { border-top: 3px solid var(--coral); }
        .notice-card strong { display: block; margin-bottom: 7px; color: var(--plum); font-size: 15px; }

        .index-band { background: #eaf0ed; border-top: 1px solid #dbe5e0; border-bottom: 1px solid #dbe5e0; }
        .scene-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
        .scene-item {
            min-height: 165px;
            padding: 23px 20px;
            border-right: 1px solid var(--line-dark);
            border-bottom: 1px solid var(--line-dark);
            background: rgba(255,255,255,.42);
        }
        .scene-no { display: block; margin-bottom: 14px; color: var(--coral-dark); font-size: 13px; font-weight: 800; }
        .scene-item strong { display: block; color: var(--plum-deep); font-size: 16px; line-height: 1.4; }
        .scene-item span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }

        .steps-wrap {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 58px;
            align-items: start;
        }
        .steps-intro { position: sticky; top: 104px; }
        .steps-intro h2 { margin: 0 0 14px; color: var(--plum-deep); font-size: 30px; line-height: 1.35; }
        .steps-intro p { margin: 0; color: var(--muted); }
        .steps-list { position: relative; }
        .steps-list::before {
            content: "";
            position: absolute;
            top: 21px;
            bottom: 21px;
            left: 21px;
            width: 1px;
            background: var(--line-dark);
        }
        .step {
            position: relative;
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 20px;
            padding-bottom: 27px;
        }
        .step:last-child { padding-bottom: 0; }
        .step-num {
            position: relative;
            z-index: 1;
            display: grid;
            place-items: center;
            width: 43px;
            height: 43px;
            border: 1px solid #d5c5da;
            border-radius: 50%;
            color: var(--plum);
            background: var(--paper);
            font-size: 14px;
            font-weight: 800;
        }
        .step-main { padding: 4px 0 10px; }
        .step-main h3 { margin: 0; color: var(--plum-deep); font-size: 18px; }
        .step-main p { margin: 7px 0 0; color: var(--muted); font-size: 14px; }

        .faq-area { background: var(--paper); }
        .faq-list { border-top: 1px solid var(--line); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 21px 4px;
            color: var(--plum-deep);
            background: transparent;
            text-align: left;
            font-weight: 700;
            cursor: pointer;
        }
        .faq-question::after {
            content: "+";
            color: var(--coral);
            font-size: 24px;
            font-weight: 400;
            transition: transform .2s ease;
        }
        .faq-item.open .faq-question::after { transform: rotate(45deg); }
        .faq-answer {
            display: none;
            max-width: 850px;
            padding: 0 4px 22px;
            color: var(--muted);
            font-size: 15px;
        }
        .faq-item.open .faq-answer { display: block; }
        .faq-answer a { color: var(--coral-dark); font-weight: 700; }
        .faq-answer a:hover { color: var(--plum); }

        .related-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .related-item {
            display: flex;
            flex-direction: column;
            min-height: 212px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--paper);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }
        .related-item:hover { transform: translateY(-3px); border-color: #cbbdd0; box-shadow: var(--shadow-soft); }
        .related-item h3 { margin: 15px 0 10px; color: var(--plum-deep); font-size: 18px; line-height: 1.45; }
        .related-item p { margin: 0; color: var(--muted); font-size: 14px; }
        .related-meta { margin-top: auto; padding-top: 18px; color: var(--quiet); font-size: 12px; }

        .closing {
            padding: 58px 0;
            background: var(--plum-deep);
        }
        .closing-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }
        .closing h2 { margin: 0; color: #fff; font-size: clamp(25px, 3vw, 34px); }
        .closing p { margin: 10px 0 0; color: rgba(255,255,255,.72); }
        .closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }
        .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.48); background: transparent; }
        .btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

        .site-footer { padding: 62px 0 0; color: rgba(255,255,255,.72); background: #29232d; }
        .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 38px; padding-bottom: 48px; }
        .site-footer .brand { min-width: 0; }
        .site-footer .brand-mark { background: var(--coral); }
        .site-footer .brand-name { color: #fff; }
        .site-footer .brand-sub { color: #aac1c0; }
        .footer-brand p { max-width: 350px; margin: 19px 0 0; font-size: 14px; line-height: 1.75; }
        .footer-col h3 { margin: 4px 0 15px; color: #fff; font-size: 15px; }
        .footer-col a { display: block; margin: 8px 0; color: rgba(255,255,255,.68); font-size: 14px; transition: color .2s ease; }
        .footer-col a:hover { color: #fff; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,.12);
            color: rgba(255,255,255,.48);
            font-size: 12px;
        }
        .footer-bottom p { margin: 0; }

        @media (max-width: 1100px) {
            .nav-wrap { gap: 15px; }
            .brand { min-width: 205px; }
            .main-nav a { padding-right: 9px; padding-left: 9px; font-size: 13px; }
            .nav-actions .btn-light { display: none; }
            .content-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 25px; }
            .scene-grid { grid-template-columns: repeat(3, 1fr); }
            .steps-wrap { gap: 38px; }
        }
        @media (max-width: 820px) {
            .container { width: min(var(--max), calc(100% - 36px)); }
            .section { padding: 66px 0; }
            .section-tight { padding: 52px 0; }
            .nav-wrap { min-height: 68px; justify-content: space-between; }
            .main-nav {
                position: absolute;
                top: 68px;
                right: 18px;
                left: 18px;
                display: none;
                padding: 8px;
                border: 1px solid var(--line);
                border-radius: var(--radius-small);
                background: #fff;
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: block; }
            .main-nav a { display: block; padding: 13px 14px; border-radius: 6px; }
            .main-nav a::after { display: none; }
            .nav-actions .btn-primary { min-height: 40px; padding: 0 13px; font-size: 13px; }
            .nav-mobile { display: block; }
            .intro-grid, .content-layout, .steps-wrap { grid-template-columns: 1fr; }
            .intro-meta { padding-left: 18px; }
            .guide-panel { grid-template-columns: 1fr; }
            .guide-label { padding: 30px; }
            .content-layout aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
            .side-card { margin: 0; }
            .steps-intro { position: static; }
            .related-list { grid-template-columns: 1fr; }
            .related-item { min-height: 170px; }
            .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
        }
        @media (max-width: 560px) {
            body { font-size: 15px; }
            .container { width: min(var(--max), calc(100% - 28px)); }
            .brand { min-width: 0; gap: 9px; }
            .brand-mark { width: 34px; height: 34px; font-size: 16px; }
            .brand-name { font-size: 16px; }
            .brand-sub { font-size: 10px; }
            .nav-actions .btn-primary { display: none; }
            .page-intro { padding: 32px 0 42px; }
            .page-intro p { font-size: 15px; }
            .section-head { display: block; margin-bottom: 26px; }
            .section-head p { margin-top: 12px; }
            .guide-topics { grid-template-columns: 1fr; }
            .topic-item, .topic-item:nth-child(2n), .topic-item:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
            .topic-item:last-child { border-bottom: 0; }
            .article-row { grid-template-columns: 1fr; gap: 10px; padding: 21px 18px; }
            .article-date { display: flex; align-items: baseline; gap: 8px; }
            .article-date b { display: inline; font-size: 14px; }
            .article-action { margin-top: 2px; }
            .content-layout aside { grid-template-columns: 1fr; }
            .scene-grid { grid-template-columns: 1fr 1fr; }
            .scene-item { min-height: 145px; padding: 18px 16px; }
            .scene-item:last-child { grid-column: span 2; }
            .steps-list::before { left: 18px; }
            .step { grid-template-columns: 38px 1fr; gap: 15px; }
            .step-num { width: 37px; height: 37px; font-size: 12px; }
            .closing-inner { display: block; }
            .closing-actions { margin-top: 24px; }
            .closing-actions .btn { width: 100%; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom p + p { margin-top: 6px; }
        }

/* roulang page: category2 */
:root {
            --plum: #402c4a;
            --plum-deep: #2d2035;
            --plum-soft: #eee8f0;
            --coral: #e56b4c;
            --coral-dark: #bf4f35;
            --sage: #557477;
            --sage-soft: #e6efed;
            --paper: #ffffff;
            --mist: #f2f5f2;
            --ink: #25262a;
            --muted: #687078;
            --quiet: #92999c;
            --line: #dce3df;
            --line-dark: #cbd4d0;
            --shadow: 0 12px 30px rgba(37, 38, 42, .08);
            --shadow-soft: 0 5px 16px rgba(37, 38, 42, .06);
            --radius: 12px;
            --radius-small: 8px;
            --max: 1200px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--mist);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            text-rendering: optimizeLegibility;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; }
        button { font: inherit; }
        p { margin-top: 0; }
        h1, h2, h3, h4 { line-height: 1.3; }
        .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: 88px 0; }
        .section-tight { padding: 64px 0; }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 34px;
        }
        .section-head h2 { margin: 0; color: var(--plum-deep); font-size: 32px; }
        .section-head p { max-width: 560px; margin: 0; color: var(--muted); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            color: var(--sage);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .04em;
        }
        .eyebrow::before {
            content: "";
            display: inline-block;
            width: 22px;
            height: 2px;
            background: var(--coral);
        }
        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 25px;
            padding: 2px 9px;
            border: 1px solid var(--line);
            border-radius: 5px;
            color: var(--sage);
            background: #f7faf8;
            font-size: 12px;
            line-height: 1.4;
        }
        .tag.plum { color: var(--plum); background: var(--plum-soft); border-color: #ddd0e1; }
        .tag.coral { color: var(--coral-dark); background: #fff0eb; border-color: #f5d1c5; }
        .tag.sage { color: #3d6162; background: var(--sage-soft); border-color: #c9dbd7; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 7px;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
        .btn:focus-visible, a:focus-visible, button:focus-visible {
            outline: 3px solid rgba(229, 107, 76, .35);
            outline-offset: 3px;
        }
        .btn-primary { color: #fff; background: var(--plum); }
        .btn-primary:hover { color: #fff; background: var(--plum-deep); }
        .btn-coral { color: #fff; background: var(--coral); }
        .btn-coral:hover { color: #fff; background: var(--coral-dark); }
        .btn-light { color: var(--plum); background: #fff; border-color: #cfc2d3; }
        .btn-light:hover { color: var(--plum); border-color: var(--plum); background: var(--plum-soft); }
        .btn-small { min-height: 38px; padding: 0 14px; font-size: 13px; }
        .icon-arrow { font-size: 18px; line-height: 1; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(220, 227, 223, .9);
            background: rgba(242, 245, 242, .96);
            backdrop-filter: blur(12px);
        }
        .nav-wrap { display: flex; align-items: center; min-height: 76px; gap: 30px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; min-width: 230px; }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 9px;
            color: #fff;
            background: var(--plum);
            font-size: 18px;
            font-weight: 800;
        }
        .brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
        .brand-name { color: var(--plum-deep); font-size: 18px; font-weight: 800; }
        .brand-sub { margin-top: 4px; color: var(--sage); font-size: 11px; }
        .main-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
        .main-nav a {
            position: relative;
            padding: 25px 12px 22px;
            color: var(--muted);
            font-size: 14px;
            white-space: nowrap;
            transition: color .2s ease, background .2s ease;
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            right: 12px;
            bottom: 14px;
            left: 12px;
            height: 2px;
            background: var(--coral);
            transform: scaleX(0);
            transition: transform .2s ease;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--plum); background: rgba(238, 232, 240, .65); }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .nav-actions { display: flex; align-items: center; gap: 10px; }
        .nav-mobile {
            display: none;
            width: 42px;
            height: 42px;
            border: 1px solid var(--line-dark);
            border-radius: 7px;
            color: var(--plum);
            background: #fff;
            cursor: pointer;
        }
        .nav-mobile span, .nav-mobile span::before, .nav-mobile span::after {
            display: block;
            width: 18px;
            height: 2px;
            margin: auto;
            background: currentColor;
            content: "";
        }
        .nav-mobile span::before { transform: translateY(-6px); }
        .nav-mobile span::after { transform: translateY(4px); }

        .page-hero {
            padding: 62px 0 58px;
            color: #fff;
            background: var(--plum-deep);
        }
        .breadcrumb-line {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 30px;
            color: #cfc5d2;
            font-size: 13px;
        }
        .breadcrumb-line a { color: #f1eaf3; }
        .breadcrumb-line a:hover { color: #ffb09d; }
        .breadcrumb-line .current { color: #d7a99c; }
        .page-hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
            align-items: center;
            gap: 72px;
        }
        .page-hero h1 {
            max-width: 700px;
            margin: 0 0 20px;
            font-size: clamp(34px, 4vw, 50px);
            letter-spacing: 0;
        }
        .page-hero-copy {
            max-width: 650px;
            margin: 0;
            color: #ddd5e0;
            font-size: 17px;
        }
        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 28px;
        }
        .hero-meta .tag {
            color: #e3dbe5;
            border-color: rgba(255,255,255,.2);
            background: rgba(255,255,255,.08);
        }
        .device-stage {
            position: relative;
            min-height: 290px;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 14px;
            background: #36243f;
            overflow: hidden;
        }
        .device-stage::before {
            position: absolute;
            top: 24px;
            right: 24px;
            width: 100px;
            height: 100px;
            border: 1px solid rgba(229,107,76,.42);
            border-radius: 50%;
            content: "";
        }
        .device-stage::after {
            position: absolute;
            right: 12%;
            bottom: 24px;
            width: 55%;
            height: 1px;
            background: rgba(255,255,255,.16);
            content: "";
        }
        .desktop-frame {
            position: absolute;
            top: 48px;
            left: 11%;
            width: 68%;
            height: 155px;
            padding: 11px;
            border: 6px solid #eee8f0;
            border-bottom-width: 12px;
            border-radius: 7px;
            background: #fff;
            box-shadow: 0 14px 25px rgba(0,0,0,.2);
        }
        .desktop-screen { height: 100%; padding: 14px; background: #f2f5f2; }
        .screen-bar { width: 42%; height: 8px; margin-bottom: 14px; border-radius: 3px; background: var(--plum); }
        .screen-row { display: flex; gap: 8px; margin-bottom: 9px; }
        .screen-line { height: 7px; border-radius: 2px; background: #ccd8d3; }
        .screen-line.long { width: 74%; }
        .screen-line.short { width: 38%; }
        .screen-button { width: 58px; height: 20px; margin-top: 13px; border-radius: 4px; background: var(--coral); }
        .phone-frame {
            position: absolute;
            right: 10%;
            bottom: 35px;
            width: 76px;
            height: 144px;
            padding: 8px 6px;
            border: 4px solid #d8c9db;
            border-radius: 13px;
            background: #fff;
            box-shadow: 0 12px 22px rgba(0,0,0,.25);
        }
        .phone-screen { height: 100%; padding: 9px 6px; border-radius: 7px; background: var(--sage-soft); }
        .phone-screen .screen-bar { width: 70%; height: 6px; margin-bottom: 12px; }
        .phone-screen .screen-line { height: 5px; margin-bottom: 7px; }
        .phone-screen .screen-button { width: 32px; height: 15px; margin-top: 9px; }

        .intro-band { border-bottom: 1px solid var(--line); background: var(--paper); }
        .intro-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0;
        }
        .intro-item {
            min-height: 132px;
            padding: 30px 28px;
            border-right: 1px solid var(--line);
        }
        .intro-item:first-child { padding-left: 0; }
        .intro-item:last-child { padding-right: 0; border-right: 0; }
        .intro-number { display: block; margin-bottom: 8px; color: var(--coral); font-size: 13px; font-weight: 800; }
        .intro-item h2, .intro-item h3 { margin: 0 0 7px; color: var(--plum-deep); font-size: 19px; }
        .intro-item p { margin: 0; color: var(--muted); font-size: 14px; }

        .download-section { background: var(--sage-soft); }
        .download-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
            gap: 48px;
            align-items: stretch;
        }
        .download-copy h2 { margin: 0 0 18px; color: var(--plum-deep); font-size: 34px; }
        .download-copy > p { max-width: 610px; color: var(--muted); }
        .download-points {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px 24px;
            margin: 28px 0 30px;
            padding: 0;
            list-style: none;
        }
        .download-points li {
            position: relative;
            padding-left: 25px;
            color: var(--ink);
            font-size: 14px;
        }
        .download-points li::before {
            position: absolute;
            top: 8px;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--coral);
            content: "";
        }
        .download-panel {
            padding: 28px;
            border: 1px solid #c9dbd7;
            border-radius: var(--radius);
            background: #fff;
            box-shadow: var(--shadow-soft);
        }
        .download-panel-top { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
        .download-panel h3 { margin: 0 0 4px; color: var(--plum-deep); font-size: 22px; }
        .download-panel p { margin: 0; color: var(--muted); font-size: 13px; }
        .download-icon {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            border-radius: 10px;
            color: #fff;
            background: var(--coral);
            font-size: 22px;
            font-weight: 800;
        }
        .download-info {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin: 24px 0;
            padding: 16px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }
        .download-info span { display: block; color: var(--quiet); font-size: 12px; }
        .download-info strong { display: block; margin-top: 3px; color: var(--ink); font-size: 14px; }
        .download-code {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 22px;
        }
        .code-box {
            display: grid;
            place-items: center;
            width: 74px;
            height: 74px;
            border: 7px solid #fff;
            outline: 1px solid var(--line-dark);
            color: var(--plum);
            background:
                linear-gradient(45deg, var(--plum) 25%, transparent 25%, transparent 75%, var(--plum) 75%),
                linear-gradient(45deg, var(--plum) 25%, transparent 25%, transparent 75%, var(--plum) 75%);
            background-position: 0 0, 8px 8px;
            background-size: 16px 16px;
            font-size: 10px;
            font-weight: 800;
        }
        .download-code p { margin: 0; color: var(--muted); font-size: 13px; }

        .device-section { background: var(--paper); }
        .device-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }
        .device-card {
            position: relative;
            min-height: 220px;
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .device-card:hover { transform: translateY(-3px); border-color: #c5b4c9; box-shadow: var(--shadow-soft); }
        .device-card:nth-child(2) { background: #faf8fb; }
        .device-card:nth-child(3) { background: #f6faf8; }
        .device-symbol {
            display: grid;
            place-items: center;
            width: 43px;
            height: 43px;
            margin-bottom: 20px;
            border-radius: 9px;
            color: var(--plum);
            background: var(--plum-soft);
            font-size: 19px;
            font-weight: 800;
        }
        .device-card:nth-child(2) .device-symbol { color: var(--coral-dark); background: #fff0eb; }
        .device-card:nth-child(3) .device-symbol { color: #3d6162; background: var(--sage-soft); }
        .device-card h3 { margin: 0 0 9px; color: var(--plum-deep); font-size: 20px; }
        .device-card p { min-height: 54px; margin: 0 0 18px; color: var(--muted); font-size: 14px; }
        .text-link { color: var(--plum); font-size: 14px; font-weight: 700; }
        .text-link:hover { color: var(--coral-dark); }

        .records-section { background: var(--mist); }
        .record-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.3fr) minmax(270px, .7fr);
            gap: 44px;
        }
        .record-list { border-top: 1px solid var(--line-dark); }
        .record-item {
            display: grid;
            grid-template-columns: 116px minmax(0, 1fr) auto;
            gap: 18px;
            align-items: center;
            padding: 22px 0;
            border-bottom: 1px solid var(--line);
        }
        .record-date { color: var(--quiet); font-size: 13px; }
        .record-content h3 { margin: 7px 0 5px; color: var(--plum-deep); font-size: 18px; }
        .record-content p { margin: 0; color: var(--muted); font-size: 14px; }
        .side-note {
            padding: 26px;
            border-left: 3px solid var(--coral);
            background: #fff;
        }
        .side-note h3 { margin: 0 0 11px; color: var(--plum-deep); font-size: 20px; }
        .side-note p { margin: 0 0 20px; color: var(--muted); font-size: 14px; }
        .side-note ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 14px; }
        .side-note li + li { margin-top: 9px; }

        .compare-section { background: var(--paper); }
        .compare-table {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
        }
        .compare-row {
            display: grid;
            grid-template-columns: 1fr 1.15fr 1.15fr;
            border-bottom: 1px solid var(--line);
        }
        .compare-row:last-child { border-bottom: 0; }
        .compare-row > div { padding: 17px 20px; border-right: 1px solid var(--line); font-size: 14px; }
        .compare-row > div:last-child { border-right: 0; }
        .compare-row.header { color: #fff; background: var(--plum); }
        .compare-row.header > div { font-weight: 700; }
        .compare-row:not(.header) > div:first-child { color: var(--plum-deep); font-weight: 700; background: #faf8fb; }
        .compare-row:not(.header) > div:not(:first-child) { color: var(--muted); }

        .steps-section { background: #f8faf8; }
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0;
            border-top: 1px solid var(--line-dark);
            border-bottom: 1px solid var(--line-dark);
        }
        .step {
            position: relative;
            min-height: 190px;
            padding: 28px 24px 26px;
            border-right: 1px solid var(--line);
        }
        .step:last-child { border-right: 0; }
        .step-number {
            display: block;
            margin-bottom: 22px;
            color: var(--coral);
            font-size: 26px;
            font-weight: 800;
        }
        .step h3 { margin: 0 0 8px; color: var(--plum-deep); font-size: 18px; }
        .step p { margin: 0; color: var(--muted); font-size: 14px; }

        .faq-section { background: var(--paper); }
        .faq-list { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line-dark); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item summary {
            position: relative;
            padding: 20px 45px 20px 0;
            color: var(--plum-deep);
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after {
            position: absolute;
            top: 20px;
            right: 5px;
            color: var(--coral);
            content: "+";
            font-size: 24px;
            font-weight: 400;
            line-height: 1;
        }
        .faq-item[open] summary::after { content: "−"; }
        .faq-answer { max-width: 760px; padding: 0 45px 20px 0; color: var(--muted); font-size: 14px; }

        .closing-section { padding: 68px 0; background: var(--plum); }
        .closing-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
        }
        .closing-wrap h2 { margin: 0 0 8px; color: #fff; font-size: 30px; }
        .closing-wrap p { margin: 0; color: #d7cedb; }
        .closing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
        .closing-actions .btn-light { border-color: #e6dce8; }

        .site-footer { padding: 62px 0 24px; color: #d5cdd8; background: #25262a; }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.55fr repeat(3, 1fr);
            gap: 36px;
            padding-bottom: 44px;
        }
        .site-footer .brand-mark { color: var(--plum-deep); background: #e9dfea; }
        .site-footer .brand-name { color: #fff; }
        .site-footer .brand-sub { color: #c4b7c8; }
        .footer-brand p { max-width: 330px; margin: 20px 0 0; color: #a9a5ab; font-size: 14px; }
        .footer-col { display: flex; flex-direction: column; gap: 10px; }
        .footer-col h3 { margin: 0 0 9px; color: #fff; font-size: 15px; }
        .footer-col a { color: #aaa8ad; font-size: 14px; transition: color .2s ease; }
        .footer-col a:hover { color: #ffab96; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,.12);
            color: #949398;
            font-size: 12px;
        }
        .footer-bottom p { margin: 0; }

        @media (max-width: 1100px) {
            .nav-wrap { gap: 16px; }
            .brand { min-width: 205px; }
            .main-nav a { padding-right: 8px; padding-left: 8px; font-size: 13px; }
            .main-nav a::after { right: 8px; left: 8px; }
            .page-hero-grid { gap: 40px; }
        }

        @media (max-width: 900px) {
            .nav-actions .btn-light { display: none; }
            .page-hero-grid, .download-layout, .record-layout { grid-template-columns: 1fr; }
            .device-stage { max-width: 560px; }
            .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .device-card:last-child { grid-column: span 2; }
            .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .step:nth-child(2) { border-right: 0; }
            .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
            .footer-brand { grid-column: span 3; }
        }

        @media (max-width: 768px) {
            .container { width: min(var(--max), calc(100% - 32px)); }
            .section { padding: 64px 0; }
            .section-tight { padding: 46px 0; }
            .section-head { display: block; margin-bottom: 25px; }
            .section-head h2 { font-size: 27px; margin-bottom: 10px; }
            .nav-wrap { min-height: 68px; }
            .brand { min-width: 0; flex: 1; }
            .brand-sub { font-size: 10px; }
            .main-nav {
                position: absolute;
                top: calc(100% + 1px);
                right: 16px;
                left: 16px;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 8px;
                border: 1px solid var(--line);
                border-radius: 8px;
                background: var(--paper);
                box-shadow: var(--shadow);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 13px 14px; border-radius: 5px; }
            .main-nav a::after { display: none; }
            .main-nav a:hover, .main-nav a.active { background: var(--plum-soft); }
            .nav-mobile { display: block; }
            .nav-actions .btn-primary { min-height: 40px; padding: 0 12px; font-size: 13px; }
            .page-hero { padding: 42px 0 44px; }
            .page-hero h1 { font-size: 35px; }
            .page-hero-copy { font-size: 15px; }
            .intro-grid { grid-template-columns: 1fr; }
            .intro-item, .intro-item:first-child, .intro-item:last-child {
                min-height: auto;
                padding: 22px 0;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }
            .intro-item:last-child { border-bottom: 0; }
            .download-points { grid-template-columns: 1fr; }
            .device-grid { grid-template-columns: 1fr; }
            .device-card:last-child { grid-column: auto; }
            .record-item { grid-template-columns: 1fr; gap: 6px; }
            .record-item .btn { justify-self: start; margin-top: 7px; }
            .compare-table { border-radius: 8px; }
            .compare-row { grid-template-columns: 1fr; }
            .compare-row.header { display: none; }
            .compare-row > div {
                display: grid;
                grid-template-columns: 104px minmax(0, 1fr);
                gap: 12px;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }
            .compare-row > div::before {
                color: var(--quiet);
                content: attr(data-label);
                font-size: 12px;
                font-weight: 700;
            }
            .compare-row > div:first-child { background: var(--plum-soft); }
            .compare-row > div:first-child::before { color: var(--plum); }
            .compare-row > div:last-child { border-bottom: 0; }
            .steps-grid { grid-template-columns: 1fr; }
            .step, .step:nth-child(2) {
                min-height: auto;
                border-right: 0;
                border-bottom: 1px solid var(--line);
            }
            .step:last-child { border-bottom: 0; }
            .closing-wrap { display: block; }
            .closing-actions { margin-top: 24px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
            .footer-brand { grid-column: span 2; }
            .footer-bottom { display: block; }
            .footer-bottom p + p { margin-top: 8px; }
        }

        @media (max-width: 520px) {
            .container { width: min(var(--max), calc(100% - 28px)); }
            .brand-mark { width: 34px; height: 34px; font-size: 16px; }
            .brand-name { font-size: 16px; }
            .brand-sub { display: none; }
            .nav-actions .btn-primary { display: none; }
            .page-hero h1 { font-size: 31px; }
            .device-stage { min-height: 240px; }
            .desktop-frame { top: 42px; left: 8%; width: 73%; height: 132px; }
            .phone-frame { right: 7%; bottom: 28px; transform: scale(.88); transform-origin: bottom right; }
            .download-panel { padding: 22px; }
            .download-panel-top { gap: 10px; }
            .download-panel h3 { font-size: 19px; }
            .closing-wrap h2 { font-size: 26px; }
            .closing-actions .btn { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-brand { grid-column: auto; }
        }

/* roulang page: article */
:root {
            --plum:#402c4a;
            --plum-deep:#2d2035;
            --plum-soft:#eee8f0;
            --coral:#e56b4c;
            --coral-dark:#bf4f35;
            --sage:#557477;
            --sage-soft:#e6efed;
            --paper:#fff;
            --mist:#f2f5f2;
            --ink:#25262a;
            --muted:#687078;
            --quiet:#92999c;
            --line:#dce3df;
            --line-dark:#cbd4d0;
            --shadow:0 12px 30px rgba(37,38,42,.08);
            --shadow-soft:0 5px 16px rgba(37,38,42,.06);
            --radius:12px;
            --radius-small:8px;
            --max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--mist);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            text-rendering:optimizeLegibility
        }
        img{display:block;max-width:100%}
        a{color:inherit;text-decoration:none}
        button{font:inherit}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .site-header{
            position:sticky;top:0;z-index:20;
            border-bottom:1px solid rgba(220,227,223,.9);
            background:rgba(242,245,242,.96);
            backdrop-filter:blur(12px)
        }
        .nav-wrap{display:flex;align-items:center;min-height:76px;gap:30px}
        .brand{display:inline-flex;align-items:center;gap:12px;min-width:230px}
        .brand-mark{
            display:grid;place-items:center;width:38px;height:38px;
            border-radius:9px;color:#fff;background:var(--plum);
            font-size:18px;font-weight:800
        }
        .brand-copy{display:flex;flex-direction:column;line-height:1.15}
        .brand-name{color:var(--plum-deep);font-size:18px;font-weight:800}
        .brand-sub{margin-top:4px;color:var(--sage);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:4px;flex:1}
        .main-nav a{
            position:relative;padding:25px 12px 22px;color:var(--muted);
            font-size:14px;white-space:nowrap;transition:color .2s ease,background .2s ease
        }
        .main-nav a:after{
            content:"";position:absolute;right:12px;bottom:14px;left:12px;
            height:2px;background:var(--coral);transform:scaleX(0);
            transition:transform .2s ease
        }
        .main-nav a:hover,.main-nav a.active{color:var(--plum);background:rgba(238,232,240,.65)}
        .main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .nav-mobile{
            display:none;width:42px;height:42px;border:1px solid var(--line-dark);
            border-radius:7px;color:var(--plum);background:#fff;cursor:pointer
        }
        .nav-mobile span,.nav-mobile span:before,.nav-mobile span:after{
            display:block;width:18px;height:2px;margin:auto;background:currentColor;content:""
        }
        .nav-mobile span:before{transform:translateY(-6px)}
        .nav-mobile span:after{transform:translateY(4px)}
        .btn{
            display:inline-flex;align-items:center;justify-content:center;gap:9px;
            min-height:46px;padding:0 20px;border:1px solid transparent;
            border-radius:7px;font-size:15px;font-weight:700;cursor:pointer;
            transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease
        }
        .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
        .btn:focus-visible,a:focus-visible,button:focus-visible{
            outline:3px solid rgba(229,107,76,.35);outline-offset:3px
        }
        .btn-primary{color:#fff;background:var(--plum)}
        .btn-primary:hover{background:var(--plum-deep)}
        .btn-coral{color:#fff;background:var(--coral)}
        .btn-coral:hover{background:var(--coral-dark)}
        .btn-light{color:var(--plum);background:#fff;border-color:#cfc2d3}
        .btn-light:hover{border-color:var(--plum);background:var(--plum-soft)}
        .btn-small{min-height:38px;padding:0 14px;font-size:13px}
        .article-hero{
            padding:54px 0 62px;
            color:#fff;
            background:var(--plum-deep);
            border-bottom:5px solid var(--coral)
        }
        .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;color:#d9cddd;font-size:13px}
        .breadcrumb a:hover{color:#fff}
        .breadcrumb .current{color:#f7c0b0}
        .article-hero h1{
            max-width:900px;margin:0 0 20px;
            font-size:clamp(32px,5vw,48px);line-height:1.25;
            letter-spacing:0
        }
        .article-lead{max-width:820px;margin:0;color:#e8e1e9;font-size:17px}
        .meta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
        .meta-chip{
            display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;
            border:1px solid rgba(255,255,255,.2);border-radius:5px;
            color:#eee6ef;background:rgba(255,255,255,.08);font-size:12px
        }
        .article-layout{
            display:grid;grid-template-columns:minmax(0,820px) 260px;
            gap:56px;align-items:start;padding:76px 0
        }
        .article-paper{
            min-width:0;padding:42px 48px;background:var(--paper);
            border:1px solid var(--line);border-radius:var(--radius);
            box-shadow:var(--shadow-soft)
        }
        .article-content{font-size:16px;line-height:1.95}
        .article-content h2{
            margin:36px 0 15px;padding-left:15px;
            border-left:4px solid var(--coral);color:var(--plum-deep);
            font-size:27px;line-height:1.4
        }
        .article-content h3{margin:28px 0 10px;color:var(--plum);font-size:20px}
        .article-content p{margin:0 0 20px}
        .article-content ul,.article-content ol{margin:0 0 24px;padding-left:1.6em}
        .article-content li{margin:7px 0}
        .article-content a{color:var(--coral-dark);text-decoration:underline;text-underline-offset:3px}
        .article-content blockquote{
            margin:26px 0;padding:18px 22px;border-left:4px solid var(--sage);
            color:#466365;background:var(--sage-soft)
        }
        .article-content table{width:100%;margin:26px 0;border-collapse:collapse}
        .article-content th,.article-content td{padding:11px 13px;border:1px solid var(--line);text-align:left}
        .article-content th{color:var(--plum);background:var(--plum-soft)}
        .article-content img{height:auto;margin:24px auto;border-radius:8px}
        .empty-state{
            padding:48px 20px;text-align:center;color:var(--muted);
            border:1px dashed var(--line-dark);border-radius:var(--radius-small);
            background:#fafcfb
        }
        .empty-state strong{display:block;margin-bottom:8px;color:var(--plum);font-size:20px}
        .reading-aside{
            position:sticky;top:104px;padding:23px 20px;
            border:1px solid var(--line);border-radius:var(--radius);
            background:#fff
        }
        .reading-aside h2{margin:0 0 15px;color:var(--plum-deep);font-size:18px}
        .reading-aside a{
            display:block;padding:9px 0;border-bottom:1px solid var(--line);
            color:var(--muted);font-size:14px
        }
        .reading-aside a:last-child{border-bottom:0}
        .reading-aside a:hover{color:var(--coral-dark)}
        .support-section{padding:0 0 78px}
        .support-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
        .support-card{
            padding:27px 28px;border:1px solid var(--line);border-radius:var(--radius);
            background:#fff
        }
        .support-card h2{margin:0 0 9px;color:var(--plum-deep);font-size:22px}
        .support-card p{margin:0;color:var(--muted);font-size:15px}
        .support-link{display:inline-flex;margin-top:18px;color:var(--coral-dark);font-weight:700}
        .support-link:hover{text-decoration:underline}
        .action-bar{
            display:flex;align-items:center;justify-content:space-between;gap:24px;
            padding:30px 34px;color:#fff;background:var(--plum);
            border-radius:var(--radius)
        }
        .action-bar h2{margin:0 0 5px;font-size:25px}
        .action-bar p{margin:0;color:#ded3e1;font-size:14px}
        .action-buttons{display:flex;flex-wrap:wrap;gap:10px}
        .article-nav{
            display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px
        }
        .article-nav a{
            display:block;padding:18px 20px;border:1px solid var(--line);
            border-radius:var(--radius-small);background:#fff;transition:.2s ease
        }
        .article-nav a:hover{border-color:#c6aeca;box-shadow:var(--shadow-soft);transform:translateY(-2px)}
        .article-nav small{display:block;margin-bottom:5px;color:var(--quiet);font-size:12px}
        .article-nav strong{color:var(--plum);font-size:15px}
        .site-footer{padding:58px 0 24px;color:#d9d0dc;background:var(--plum-deep)}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
        .footer-brand .brand{margin-bottom:18px}
        .footer-brand .brand-name{color:#fff}
        .footer-brand .brand-sub{color:#c6b7ca}
        .footer-brand p{max-width:330px;margin:0;color:#b9afbD;font-size:14px}
        .footer-col{display:flex;flex-direction:column;gap:8px}
        .footer-col h3{margin:3px 0 9px;color:#fff;font-size:15px}
        .footer-col a{color:#bdb4c2;font-size:14px;transition:color .2s ease}
        .footer-col a:hover{color:#f4a28c}
        .footer-bottom{
            display:flex;justify-content:space-between;gap:20px;margin-top:45px;
            padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
            color:#a69ba9;font-size:12px
        }
        .footer-bottom p{margin:0}
        @media (max-width:1024px){
            .nav-wrap{gap:15px}.brand{min-width:205px}
            .main-nav a{padding-left:8px;padding-right:8px;font-size:13px}
            .article-layout{grid-template-columns:minmax(0,1fr) 220px;gap:28px}
        }
        @media (max-width:768px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .nav-wrap{min-height:68px}.main-nav{
                display:none;position:absolute;top:68px;right:16px;left:16px;
                flex-direction:column;align-items:stretch;padding:8px;
                border:1px solid var(--line);border-radius:var(--radius-small);
                background:#fff;box-shadow:var(--shadow)
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 14px}.main-nav a:after{display:none}
            .nav-actions .btn-light{display:none}.nav-mobile{display:block}
            .article-hero{padding:38px 0 45px}
            .article-layout{display:block;padding:46px 0 60px}
            .reading-aside{position:static;margin-bottom:22px}
            .article-paper{padding:28px 23px}
            .support-grid,.article-nav{grid-template-columns:1fr}
            .action-bar{align-items:flex-start;flex-direction:column;padding:25px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
        }
        @media (max-width:520px){
            .brand{min-width:0}.brand-sub{font-size:10px}
            .nav-actions .btn-primary{min-height:40px;padding:0 12px;font-size:13px}
            .article-hero h1{font-size:32px}
            .article-lead{font-size:15px}
            .section-head h2{font-size:25px}
            .footer-grid{grid-template-columns:1fr}
            .footer-bottom{align-items:flex-start;flex-direction:column;margin-top:32px}
        }

/* roulang page: category3 */
:root{
            --plum:#402c4a;
            --plum-deep:#2d2035;
            --plum-soft:#eee8f0;
            --coral:#e56b4c;
            --coral-dark:#bf4f35;
            --sage:#557477;
            --sage-soft:#e6efed;
            --paper:#fff;
            --mist:#f2f5f2;
            --ink:#25262a;
            --muted:#687078;
            --quiet:#92999c;
            --line:#dce3df;
            --line-dark:#cbd4d0;
            --shadow:0 12px 30px rgba(37,38,42,.08);
            --shadow-soft:0 5px 16px rgba(37,38,42,.06);
            --radius:12px;
            --radius-small:8px;
            --max:1200px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--mist);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
            text-rendering:optimizeLegibility;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button{font:inherit}
        .container{width:min(var(--max),calc(100% - 48px));margin:0 auto}
        .section{padding:84px 0}
        .section-tight{padding:58px 0}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:24px;
            margin-bottom:32px
        }
        .section-head h2{margin:0;color:var(--plum-deep);font-size:32px;line-height:1.3}
        .section-head p{max-width:560px;margin:0;color:var(--muted)}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:13px;
            color:var(--sage);
            font-size:13px;
            font-weight:700;
            letter-spacing:.04em
        }
        .eyebrow:before{content:"";width:22px;height:2px;background:var(--coral)}
        .tag{
            display:inline-flex;
            align-items:center;
            min-height:25px;
            padding:2px 9px;
            border:1px solid var(--line);
            border-radius:5px;
            color:var(--sage);
            background:#f7faf8;
            font-size:12px;
            line-height:1.4
        }
        .tag.plum{color:var(--plum);background:var(--plum-soft);border-color:#ddd0e1}
        .tag.coral{color:var(--coral-dark);background:#fff0eb;border-color:#f5d1c5}
        .tag.sage{color:#3d6162;background:var(--sage-soft);border-color:#c9dbd7}
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            min-height:46px;
            padding:0 20px;
            border:1px solid transparent;
            border-radius:7px;
            font-size:15px;
            font-weight:700;
            cursor:pointer;
            transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease
        }
        .btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
        .btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid rgba(229,107,76,.35);outline-offset:3px}
        .btn-primary{color:#fff;background:var(--plum)}
        .btn-primary:hover{background:var(--plum-deep)}
        .btn-coral{color:#fff;background:var(--coral)}
        .btn-coral:hover{background:var(--coral-dark)}
        .btn-light{color:var(--plum);background:#fff;border-color:#cfc2d3}
        .btn-light:hover{border-color:var(--plum);background:var(--plum-soft)}
        .site-header{
            position:sticky;
            top:0;
            z-index:20;
            border-bottom:1px solid rgba(220,227,223,.9);
            background:rgba(242,245,242,.96);
            backdrop-filter:blur(12px)
        }
        .nav-wrap{display:flex;align-items:center;min-height:76px;gap:30px}
        .brand{display:inline-flex;align-items:center;gap:12px;min-width:230px}
        .brand-mark{
            display:grid;
            place-items:center;
            width:38px;
            height:38px;
            border-radius:9px;
            color:#fff;
            background:var(--plum);
            font-size:18px;
            font-weight:800
        }
        .brand-copy{display:flex;flex-direction:column;line-height:1.15}
        .brand-name{color:var(--plum-deep);font-size:18px;font-weight:800}
        .brand-sub{margin-top:4px;color:var(--sage);font-size:11px}
        .main-nav{display:flex;align-items:center;gap:4px;flex:1}
        .main-nav a{
            position:relative;
            padding:25px 12px 22px;
            color:var(--muted);
            font-size:14px;
            white-space:nowrap;
            transition:color .2s ease,background .2s ease
        }
        .main-nav a:after{
            content:"";
            position:absolute;
            right:12px;
            bottom:14px;
            left:12px;
            height:2px;
            background:var(--coral);
            transform:scaleX(0);
            transition:transform .2s ease
        }
        .main-nav a:hover,.main-nav a.active{color:var(--plum);background:rgba(238,232,240,.65)}
        .main-nav a:hover:after,.main-nav a.active:after{transform:scaleX(1)}
        .nav-actions{display:flex;align-items:center;gap:10px}
        .nav-mobile{
            display:none;
            width:42px;
            height:42px;
            border:1px solid var(--line-dark);
            border-radius:7px;
            color:var(--plum);
            background:#fff;
            cursor:pointer
        }
        .nav-mobile span,.nav-mobile span:before,.nav-mobile span:after{display:block;width:18px;height:2px;margin:auto;background:currentColor;content:""}
        .nav-mobile span:before{transform:translateY(-6px)}
        .nav-mobile span:after{transform:translateY(4px)}
        .page-intro{padding:54px 0 42px;background:#fff;border-bottom:1px solid var(--line)}
        .crumbs{display:flex;gap:9px;align-items:center;margin-bottom:24px;color:var(--quiet);font-size:13px}
        .crumbs a{color:var(--sage)}
        .crumbs a:hover{color:var(--plum)}
        .intro-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end}
        .page-intro h1{max-width:760px;margin:0 0 18px;color:var(--plum-deep);font-size:45px;line-height:1.25;letter-spacing:.01em}
        .page-intro .lead{max-width:730px;margin:0;color:var(--muted);font-size:17px}
        .status-panel{padding:22px;border:1px solid #c9dbd7;border-radius:var(--radius);background:var(--sage-soft)}
        .status-panel strong{display:block;margin-bottom:8px;color:var(--sage);font-size:18px}
        .status-line{display:flex;align-items:center;gap:9px;color:#456466;font-size:14px}
        .status-dot{width:9px;height:9px;border-radius:50%;background:#6d9a8f}
        .guide-area{background:var(--mist)}
        .guide-list{display:grid;gap:14px}
        .guide-item{
            display:grid;
            grid-template-columns:68px 1fr auto;
            gap:20px;
            align-items:center;
            padding:22px 24px;
            border:1px solid var(--line);
            border-radius:var(--radius-small);
            background:#fff;
            transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
        }
        .guide-item:hover{transform:translateY(-2px);border-color:#cfc2d3;box-shadow:var(--shadow-soft)}
        .guide-number{color:var(--coral);font-size:28px;font-weight:800}
        .guide-item h3{margin:0 0 5px;color:var(--plum);font-size:19px}
        .guide-item p{margin:0;color:var(--muted);font-size:14px}
        .guide-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
        .scene-band{background:#fff}
        .scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);background:var(--line)}
        .scene{min-height:166px;padding:25px 22px;background:#fff}
        .scene b{display:block;margin-bottom:10px;color:var(--plum);font-size:18px}
        .scene p{margin:0;color:var(--muted);font-size:14px}
        .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
        .step{position:relative;padding:26px 24px 8px;border-right:1px solid var(--line)}
        .step:last-child{border-right:0}
        .step-num{display:inline-grid;place-items:center;width:31px;height:31px;margin-bottom:15px;border-radius:50%;color:#fff;background:var(--plum);font-weight:800}
        .step h3{margin:0 0 7px;color:var(--plum-deep);font-size:17px}
        .step p{margin:0;color:var(--muted);font-size:14px}
        .security-strip{padding:30px 34px;border-left:4px solid var(--sage);background:#eaf1ef}
        .security-strip h2{margin:0 0 8px;color:var(--plum-deep);font-size:25px}
        .security-strip p{max-width:850px;margin:0;color:#536365}
        .faq-section{background:#fff}
        .faq-list{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-item summary{position:relative;padding:19px 42px 19px 2px;color:var(--plum);font-weight:700;cursor:pointer;list-style:none}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"＋";position:absolute;right:4px;color:var(--coral);font-size:22px;font-weight:400}
        .faq-item[open] summary:after{content:"－"}
        .faq-answer{padding:0 42px 20px 2px;color:var(--muted);font-size:14px}
        .related{background:var(--mist)}
        .related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .related-item{padding:22px;border:1px solid var(--line);border-radius:var(--radius-small);background:#fff}
        .related-item h3{margin:14px 0 8px;color:var(--plum);font-size:17px}
        .related-item p{margin:0 0 14px;color:var(--muted);font-size:14px}
        .related-item a{color:var(--coral-dark);font-size:13px;font-weight:700}
        .closing{padding:54px 0;background:var(--plum-deep);color:#fff}
        .closing-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
        .closing h2{margin:0 0 7px;font-size:28px}
        .closing p{margin:0;color:#d9cedc}
        .site-footer{padding:58px 0 22px;color:#ddd5df;background:#29222d}
        .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:42px}
        .footer-brand p{max-width:310px;margin:18px 0 0;color:#bcb2bf;font-size:14px}
        .site-footer .brand-name{color:#fff}
        .site-footer .brand-sub{color:#c0a9c5}
        .footer-col{display:flex;flex-direction:column;gap:9px}
        .footer-col h3{margin:0 0 8px;color:#fff;font-size:15px}
        .footer-col a{color:#bcb2bf;font-size:14px;transition:color .2s ease}
        .footer-col a:hover{color:#fff}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:46px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);color:#978d9a;font-size:12px}
        .footer-bottom p{margin:0}
        @media(max-width:1024px){
            .nav-wrap{gap:15px}.brand{min-width:205px}.main-nav a{padding-left:8px;padding-right:8px;font-size:13px}
            .nav-actions .btn-light{display:none}.intro-grid{gap:28px}.scene-grid{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:767px){
            .container{width:min(var(--max),calc(100% - 32px))}
            .section{padding:62px 0}.section-head{display:block;margin-bottom:24px}.section-head h2{font-size:27px}.section-head p{margin-top:12px}
            .nav-wrap{min-height:68px}.brand{min-width:0;flex:1}.brand-sub{font-size:10px}.nav-actions{gap:7px}.nav-actions .btn{min-height:40px;padding:0 11px;font-size:13px}.nav-mobile{display:block}
            .main-nav{display:none;position:absolute;top:68px;right:16px;left:16px;flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow)}
            .main-nav.open{display:flex}.main-nav a{padding:13px 14px}.main-nav a:after{right:14px;bottom:7px;left:14px}
            .page-intro{padding:36px 0 32px}.intro-grid{display:block}.page-intro h1{font-size:34px}.page-intro .lead{font-size:15px}.status-panel{margin-top:25px}
            .guide-item{grid-template-columns:42px 1fr;gap:12px;padding:18px}.guide-item .btn{grid-column:2;justify-self:start}.guide-number{font-size:23px}
            .scene-grid{grid-template-columns:1fr}.scene{min-height:auto;padding:20px}
            .steps{display:block}.step{padding:22px 0 22px 48px;border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.step-num{position:absolute;left:0;top:22px}
            .security-strip{padding:23px 20px}.security-strip h2{font-size:23px}
            .related-list{grid-template-columns:1fr}.closing-inner{display:block}.closing .btn{margin-top:22px;width:100%}
            .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block;margin-top:32px}.footer-bottom p+p{margin-top:7px}
        }
        @media(max-width:520px){
            .brand-mark{width:34px;height:34px}.brand-name{font-size:16px}.brand-sub{font-size:9px}.nav-actions .btn-primary{font-size:12px}
            .page-intro h1{font-size:30px}.crumbs{font-size:12px}.footer-grid{grid-template-columns:1fr}
        }