/* roulang page: index */
:root {
            --ink: #241a36;
            --ink-2: #35264c;
            --coral: #ee785f;
            --coral-dark: #d85d49;
            --mint: #4ea996;
            --cream: #f7f4ef;
            --paper: #fffdf9;
            --soft: #eee9e3;
            --line: #e5ded7;
            --text: #302d35;
            --muted: #77717a;
            --white: #ffffff;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow: 0 18px 48px rgba(36, 26, 54, .09);
            --shadow-soft: 0 8px 24px rgba(36, 26, 54, .07);
            --container: 1200px;
            --ease: 220ms ease;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--text);
            background: var(--cream);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        body, button, input { font-family: inherit; }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
        button { border: 0; cursor: pointer; }
        a:focus-visible, button:focus-visible, summary:focus-visible {
            outline: 3px solid rgba(238, 120, 95, .45);
            outline-offset: 3px;
        }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: 96px 0; }
        .section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 38px; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--coral-dark);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .12em;
        }
        .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); line-height: 1.25; letter-spacing: -.035em; }
        h1 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 24px; }
        h2 { font-size: clamp(30px, 3.3vw, 44px); margin-bottom: 14px; }
        h3 { font-size: 20px; margin-bottom: 8px; }
        .section-copy { max-width: 650px; color: var(--muted); margin-bottom: 0; }
        .topbar {
            background: var(--ink);
            color: rgba(255,255,255,.72);
            font-size: 13px;
            padding: 8px 0;
        }
        .topbar-inner { display: flex; justify-content: space-between; gap: 20px; }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(247,244,239,.94);
            border-bottom: 1px solid rgba(229,222,215,.9);
            backdrop-filter: blur(14px);
        }
        .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 32px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            flex-shrink: 0;
            color: var(--ink);
            font-size: 18px;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        .brand-mark {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            color: var(--white);
            background: var(--coral);
            font-size: 17px;
            box-shadow: 4px 4px 0 rgba(36,26,54,.13);
        }
        .main-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
        .main-nav a {
            position: relative;
            color: #625c66;
            font-size: 14px;
            font-weight: 700;
            padding: 26px 0;
            white-space: nowrap;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--ink); }
        .main-nav a.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 17px;
            height: 3px;
            border-radius: 3px;
            background: var(--coral);
        }
        .nav-download { margin-left: 4px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 800;
            transition: all var(--ease);
        }
        .btn-primary { color: var(--white); background: var(--coral); box-shadow: 0 8px 18px rgba(238,120,95,.22); }
        .btn-primary:hover { color: var(--white); background: var(--coral-dark); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(238,120,95,.3); }
        .btn-secondary { color: var(--ink); background: transparent; border: 1px solid rgba(36,26,54,.24); }
        .btn-secondary:hover { color: var(--coral-dark); border-color: var(--coral); background: rgba(238,120,95,.06); }
        .mobile-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 22px; }
        .hero {
            position: relative;
            overflow: hidden;
            padding: 88px 0 78px;
            color: var(--white);
            background: var(--ink);
        }
        .hero::before, .hero::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }
        .hero::before { width: 430px; height: 430px; right: -120px; top: -180px; background: rgba(238,120,95,.19); }
        .hero::after { width: 270px; height: 270px; left: 43%; bottom: -190px; background: rgba(78,169,150,.14); }
        .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
        .hero .eyebrow { color: #f4a18e; }
        .hero h1 { color: var(--white); max-width: 680px; }
        .hero h1 span { color: #f59b84; }
        .hero-copy { color: rgba(255,255,255,.72); max-width: 620px; font-size: 18px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 32px 0 28px; }
        .hero .btn-secondary { color: var(--white); border-color: rgba(255,255,255,.3); }
        .hero .btn-secondary:hover { color: var(--white); border-color: var(--coral); background: rgba(255,255,255,.08); }
        .hero-notes { display: flex; flex-wrap: wrap; gap: 18px; color: rgba(255,255,255,.62); font-size: 13px; }
        .hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
        .hero-notes i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
        .app-preview { position: relative; min-height: 420px; }
        .preview-panel {
            position: absolute;
            right: 0;
            top: 14px;
            width: min(100%, 440px);
            padding: 24px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 25px;
            background: #302343;
            box-shadow: 22px 22px 0 rgba(238,120,95,.14), var(--shadow);
        }
        .preview-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
        .preview-title { color: var(--white); font-weight: 800; }
        .status { display: inline-flex; align-items: center; gap: 6px; color: #9fe0d1; font-size: 12px; }
        .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
        .preview-screen {
            min-height: 218px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            padding: 22px;
            border-radius: 18px;
            overflow: hidden;
            background:
                linear-gradient(145deg, rgba(36,26,54,.08), rgba(36,26,54,.74)),
                radial-gradient(circle at 78% 20%, #f29b71 0 9%, transparent 10%),
                linear-gradient(135deg, #b9dfd1, #6a958f 48%, #342545 49%, #68425c);
        }
        .screen-kicker { color: rgba(255,255,255,.76); font-size: 12px; }
        .screen-name { margin: 3px 0 0; color: white; font-size: 29px; font-weight: 900; }
        .preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 15px; }
        .preview-stat { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.07); }
        .preview-stat small { display: block; color: rgba(255,255,255,.52); font-size: 11px; }
        .preview-stat strong { color: white; font-size: 16px; }
        .entry-strip { padding: 24px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
        .entry-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
        .entry-item { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border-radius: 13px; }
        .entry-item:hover { background: var(--soft); transform: translateY(-2px); }
        .entry-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; color: var(--coral-dark); background: #fff0eb; border-radius: 10px; font-weight: 900; }
        .entry-item strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.3; }
        .entry-item small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
        .overview { background: var(--paper); }
        .overview-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 70px; align-items: center; }
        .overview-intro { padding-right: 20px; }
        .overview-markers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .marker { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--cream); }
        .marker strong { display: block; color: var(--ink); font-size: 27px; letter-spacing: -.04em; }
        .marker span { color: var(--muted); font-size: 13px; }
        .info-band { display: flex; flex-wrap: wrap; margin-top: 26px; padding: 17px 20px; border-radius: 13px; background: #f2ede8; gap: 25px; }
        .info-band div { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
        .info-band b { color: var(--ink); }
        .download-section { background: #f1ece7; }
        .download-panel { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; padding: 48px; border-radius: var(--radius-lg); color: white; background: var(--ink); box-shadow: var(--shadow); }
        .download-panel h2 { color: white; }
        .download-panel p { color: rgba(255,255,255,.68); }
        .download-meta { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 25px 0; }
        .meta-cell { padding: 13px 15px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; background: rgba(255,255,255,.05); }
        .meta-cell small { display: block; color: rgba(255,255,255,.5); font-size: 11px; }
        .meta-cell strong { color: white; font-size: 14px; }
        .qr-side { display: flex; align-items: center; gap: 27px; padding: 23px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: rgba(255,255,255,.06); }
        .qr-code { width: 138px; height: 138px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background-color: white; background-image: linear-gradient(45deg,#241a36 25%,transparent 25%,transparent 75%,#241a36 75%),linear-gradient(45deg,#241a36 25%,transparent 25%,transparent 75%,#241a36 75%); background-position: 0 0, 9px 9px; background-size: 18px 18px; }
        .qr-code span { padding: 5px 8px; color: var(--ink); background: white; border-radius: 4px; font-size: 11px; font-weight: 800; }
        .qr-side h3 { color: white; font-size: 18px; }
        .qr-side p { margin-bottom: 0; font-size: 13px; }
        .games-section { background: var(--cream); }
        .game-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 20px; }
        .feature-game { min-height: 330px; display: flex; align-items: end; padding: 28px; border-radius: var(--radius-lg); overflow: hidden; color: white; background: linear-gradient(145deg, rgba(36,26,54,.05), rgba(36,26,54,.8)), linear-gradient(135deg,#c2e2d6 0%,#7ea99b 39%,#e18b72 40%,#4d304e 100%); }
        .feature-game h3 { color: white; font-size: 31px; margin-bottom: 8px; }
        .feature-game p { max-width: 470px; margin-bottom: 0; color: rgba(255,255,255,.75); }
        .game-side { display: grid; gap: 12px; }
        .game-row { display: flex; align-items: center; gap: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
        .game-cover { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(135deg,#efb276,#60405a); }
        .game-row:nth-child(2) .game-cover { background: linear-gradient(135deg,#a7d5c6,#35415c); }
        .game-row:nth-child(3) .game-cover { background: linear-gradient(135deg,#f2ae9b,#8a536d); }
        .game-row strong { color: var(--ink); font-size: 15px; }
        .game-row small { display: block; color: var(--muted); font-size: 12px; }
        .tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; color: var(--coral-dark); border-radius: 30px; background: #fff0eb; font-size: 11px; font-weight: 800; }
        .guide-section { background: var(--paper); }
        .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .step { position: relative; padding: 28px 25px 15px 0; margin-right: 25px; border-bottom: 1px solid var(--line); }
        .step:not(:last-child)::after { content: "→"; position: absolute; right: 0; top: 42px; color: var(--coral); font-size: 22px; }
        .step-num { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 19px; color: white; border-radius: 10px; background: var(--ink); font-size: 13px; font-weight: 900; }
        .step p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
        .compat-section { background: var(--soft); }
        .compat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .compat-card { padding: 29px; border-radius: var(--radius-md); background: var(--paper); }
        .compat-card.featured { color: white; background: var(--ink); }
        .compat-card.featured h3 { color: white; }
        .compat-card.featured p, .compat-card.featured li { color: rgba(255,255,255,.7); }
        .compat-card p { color: var(--muted); }
        .check-list { padding: 0; margin: 18px 0 0; list-style: none; }
        .check-list li { display: flex; gap: 10px; margin: 11px 0; color: var(--muted); font-size: 14px; }
        .check-list li::before { content: "✓"; color: var(--mint); font-weight: 900; }
        .updates-section { background: var(--cream); }
        .timeline { position: relative; max-width: 900px; margin: 0 auto; padding-left: 36px; border-left: 2px solid #d9d0c9; }
        .timeline-item { position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 0 0 30px; }
        .timeline-item::before { content: ""; position: absolute; width: 11px; height: 11px; left: -42px; top: 8px; border: 4px solid var(--cream); border-radius: 50%; background: var(--coral); }
        .timeline-date { color: var(--muted); font-size: 13px; }
        .timeline-content { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
        .timeline-content h3 { display: inline-block; margin-right: 10px; font-size: 18px; }
        .timeline-content p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
        .news-section { background: var(--paper); }
        .news-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
        .news-feature { padding: 31px; border-radius: var(--radius-lg); background: var(--ink); color: white; }
        .news-feature .tag { color: #ffd1c6; background: rgba(238,120,95,.18); }
        .news-feature h3 { margin: 28px 0 13px; color: white; font-size: 27px; }
        .news-feature p { color: rgba(255,255,255,.68); }
        .news-list { border-top: 1px solid var(--line); }
        .news-item { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
        .news-item:hover h3 { color: var(--coral-dark); }
        .news-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
        .news-item h3 { margin: 7px 0 4px; font-size: 17px; }
        .news-item p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .empty-state { padding: 28px; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; background: var(--cream); }
        .tutorial-section { background: #f1ece7; }
        .tutorial-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 38px; }
        .tutorial-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
        .tutorial-no { color: var(--coral-dark); font-size: 22px; font-weight: 900; }
        .tutorial-item h3 { margin: 0; font-size: 17px; }
        .tutorial-item p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
        .tutorial-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
        .security-section { background: var(--paper); }
        .security-box { display: grid; grid-template-columns: .75fr 1.25fr; gap: 40px; padding: 38px; border: 1px solid #dce9e4; border-radius: var(--radius-lg); background: #f1f8f5; }
        .security-box h2 { font-size: 31px; }
        .security-points { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
        .security-point { padding: 18px; border-radius: 13px; background: rgba(255,255,255,.74); }
        .security-point strong { display: block; color: var(--ink); margin-bottom: 3px; }
        .security-point span { color: var(--muted); font-size: 13px; }
        .faq-section { background: var(--cream); }
        .faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
        .faq-list details { border-bottom: 1px solid var(--line); }
        .faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 21px 0; color: var(--ink); cursor: pointer; font-weight: 800; list-style: none; }
        .faq-list summary::-webkit-details-marker { display: none; }
        .faq-list summary::after { content: "+"; color: var(--coral); font-size: 23px; font-weight: 400; }
        .faq-list details[open] summary::after { content: "−"; }
        .faq-answer { max-width: 800px; padding: 0 35px 22px 0; color: var(--muted); font-size: 14px; }
        .recommend-section { background: var(--paper); }
        .recommend-strip { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 14px; padding: 12px; border-radius: var(--radius-lg); background: var(--ink); }
        .recommend-card { min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border-radius: 15px; background: #332647; }
        .recommend-card:first-child { background: var(--coral); }
        .recommend-card h3 { color: white; font-size: 19px; }
        .recommend-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
        .recommend-card:first-child p { color: rgba(255,255,255,.82); }
        .recommend-card .recommend-link { color: white; font-size: 13px; font-weight: 800; }
        .bottom-cta { padding: 72px 0; background: var(--ink); color: white; }
        .cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
        .bottom-cta h2 { color: white; margin-bottom: 8px; }
        .bottom-cta p { margin-bottom: 0; color: rgba(255,255,255,.66); }
        .cta-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 15px; color: rgba(255,255,255,.48); font-size: 12px; }
        .site-footer { padding: 54px 0 24px; color: rgba(255,255,255,.61); background: #1b1428; }
        .footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .8fr; gap: 60px; padding-bottom: 42px; }
        .site-footer .brand { color: white; margin-bottom: 15px; }
        .footer-intro { max-width: 380px; margin: 0; font-size: 13px; }
        .footer-title { margin-bottom: 14px; color: white; font-size: 14px; font-weight: 800; }
        .footer-links { display: grid; gap: 8px; font-size: 13px; }
        .footer-links a:hover { color: #f5a08c; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 12px; }
        @media (max-width: 1024px) {
            .main-nav { gap: 14px; }
            .main-nav a { font-size: 13px; }
            .hero-grid, .overview-grid, .download-panel, .news-layout { gap: 38px; }
            .entry-list { grid-template-columns: repeat(3, 1fr); }
            .steps { grid-template-columns: repeat(2, 1fr); }
            .step:nth-child(2)::after { display: none; }
            .recommend-strip { grid-template-columns: 1fr 1fr; }
            .recommend-card:first-child { grid-column: span 2; }
        }
        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 34px)); }
            .topbar { display: none; }
            .nav-wrap { min-height: 68px; justify-content: space-between; }
            .brand { font-size: 16px; }
            .mobile-toggle { display: block; }
            .main-nav {
                position: absolute;
                display: none;
                top: 68px;
                left: 0;
                right: 0;
                padding: 12px 17px 20px;
                margin: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                border-bottom: 1px solid var(--line);
                background: var(--paper);
                box-shadow: var(--shadow-soft);
            }
            .main-nav.open { display: flex; }
            .main-nav a { padding: 13px 8px; }
            .main-nav a.active::after { left: 8px; right: auto; bottom: 7px; width: 24px; }
            .nav-download { margin: 7px 0 0; }
            .nav-download .btn { width: 100%; }
            .section { padding: 64px 0; }
            .hero { padding: 64px 0 58px; }
            .hero-grid, .overview-grid, .download-panel, .compat-grid, .news-layout, .security-box { grid-template-columns: 1fr; }
            .hero-grid { gap: 44px; }
            .app-preview { min-height: 345px; }
            .preview-panel { position: relative; top: 0; }
            .section-head { display: block; margin-bottom: 27px; }
            .section-head .section-copy { margin-top: 12px; }
            .entry-list { grid-template-columns: repeat(2, 1fr); }
            .download-panel { padding: 28px 22px; }
            .qr-side { align-items: flex-start; }
            .game-layout { grid-template-columns: 1fr; }
            .feature-game { min-height: 275px; }
            .steps { grid-template-columns: 1fr; }
            .step { margin-right: 0; padding-right: 0; }
            .step::after { display: none; }
            .tutorial-list { grid-template-columns: 1fr; }
            .security-points { grid-template-columns: 1fr 1fr; }
            .cta-inner { display: block; }
            .cta-inner .btn { margin-top: 25px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
            .footer-grid > :first-child { grid-column: span 2; }
        }
        @media (max-width: 520px) {
            h1 { font-size: 35px; }
            h2 { font-size: 30px; }
            .hero-copy { font-size: 16px; }
            .hero-actions .btn { width: 100%; }
            .entry-list { grid-template-columns: 1fr 1fr; gap: 5px; }
            .entry-item { display: block; padding: 13px 9px; }
            .entry-icon { margin-bottom: 8px; }
            .overview-markers, .download-meta, .security-points { grid-template-columns: 1fr; }
            .qr-side { display: block; }
            .qr-code { margin-bottom: 18px; }
            .timeline { padding-left: 23px; }
            .timeline-item { display: block; }
            .timeline-item::before { left: -29px; }
            .timeline-date { margin-bottom: 5px; }
            .recommend-strip { grid-template-columns: 1fr; }
            .recommend-card:first-child { grid-column: auto; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > :first-child { grid-column: auto; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 7px; }
        }

/* roulang page: category1 */
:root{
            --ink:#241a36;
            --ink-2:#35264c;
            --coral:#ee785f;
            --coral-dark:#d85d49;
            --mint:#4ea996;
            --cream:#f7f4ef;
            --paper:#fffdf9;
            --soft:#eee9e3;
            --line:#e5ded7;
            --text:#302d35;
            --muted:#77717a;
            --white:#fff;
            --radius-lg:24px;
            --radius-md:16px;
            --radius-sm:10px;
            --shadow:0 18px 48px rgba(36,26,54,.09);
            --shadow-soft:0 8px 24px rgba(36,26,54,.07);
            --container:1200px;
            --ease:220ms ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:var(--cream);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        body,button,input{font-family:inherit}
        img{display:block;max-width:100%}
        a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
        a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(238,120,95,.45);outline-offset:3px}
        h1,h2,h3,p{margin-top:0}
        h1,h2,h3{color:var(--ink);font-weight:900;letter-spacing:-.045em;line-height:1.18}
        h1{font-size:clamp(34px,5vw,56px);margin-bottom:20px}
        h2{font-size:clamp(28px,3.5vw,38px);margin-bottom:16px}
        h3{font-size:20px;margin-bottom:10px}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:13px;padding:8px 0}
        .topbar-inner{display:flex;justify-content:space-between;gap:20px}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(247,244,239,.95);border-bottom:1px solid rgba(229,222,215,.9);backdrop-filter:blur(14px)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:32px}
        .brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink);font-size:18px;font-weight:900;letter-spacing:-.04em}
        .brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--white);background:var(--coral);font-size:17px;box-shadow:4px 4px 0 rgba(36,26,54,.13)}
        .main-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
        .main-nav a{position:relative;color:#625c66;font-size:14px;font-weight:700;padding:26px 0;white-space:nowrap}
        .main-nav a:hover,.main-nav a.active{color:var(--ink)}
        .main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:3px;background:var(--coral)}
        .mobile-toggle{display:none;width:44px;height:44px;border:0;border-radius:10px;background:var(--soft);color:var(--ink);font-size:22px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border-radius:var(--radius-sm);font-size:15px;font-weight:800;transition:all var(--ease)}
        .btn-primary{color:var(--white);background:var(--coral);box-shadow:0 8px 18px rgba(238,120,95,.22)}
        .btn-primary:hover{color:var(--white);background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 12px 24px rgba(238,120,95,.3)}
        .btn-secondary{color:var(--ink);background:transparent;border:1px solid rgba(36,26,54,.24)}
        .btn-secondary:hover{color:var(--coral-dark);border-color:var(--coral);background:rgba(238,120,95,.06)}
        .page-hero{padding:76px 0 70px;background:var(--paper);border-bottom:1px solid var(--line)}
        .breadcrumb{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:28px}
        .breadcrumb a:hover{color:var(--coral-dark)}
        .breadcrumb span{color:#b3aaa5}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral-dark);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
        .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
        .page-hero p{max-width:700px;color:var(--muted);font-size:18px;margin-bottom:0}
        .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
        .tag{display:inline-flex;align-items:center;min-height:30px;padding:3px 11px;border-radius:30px;background:var(--soft);color:var(--ink-2);font-size:13px;font-weight:700}
        .tag.mint{background:rgba(78,169,150,.13);color:#287967}
        .tag.coral{background:rgba(238,120,95,.13);color:var(--coral-dark)}
        .section{padding:86px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
        .section-copy{max-width:650px;color:var(--muted);margin-bottom:0}
        .download-panel{display:grid;grid-template-columns:1.12fr .88fr;gap:32px;align-items:stretch}
        .info-card,.feature-card,.faq-card,.install-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-soft)}
        .info-card{padding:34px}
        .info-card h2{font-size:30px}
        .info-card p{color:var(--muted)}
        .fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:25px}
        .fact{padding:16px;background:var(--cream);border-radius:var(--radius-sm);border:1px solid var(--line)}
        .fact small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
        .fact strong{color:var(--ink);font-size:16px}
        .download-box{padding:34px;color:var(--white);background:var(--ink);border-radius:var(--radius-md);position:relative;overflow:hidden}
        .download-box:after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-75px;top:-85px;background:rgba(238,120,95,.2)}
        .download-box>*{position:relative;z-index:1}
        .download-box h3{color:var(--white);font-size:25px}
        .download-box p{color:rgba(255,255,255,.7);font-size:14px}
        .version{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);padding:16px 0;margin:22px 0}
        .version strong{font-size:22px;color:#f7a18d}
        .version span{font-size:13px;color:rgba(255,255,255,.65)}
        .download-box .btn{width:100%}
        .check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
        .install-card{padding:26px}
        .install-no{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--coral);color:white;font-weight:900;margin-bottom:20px}
        .install-card p{color:var(--muted);font-size:14px;margin-bottom:0}
        .compatibility{display:grid;grid-template-columns:.72fr 1.28fr;gap:24px;align-items:stretch}
        .compat-intro{padding:36px;border-radius:var(--radius-md);background:var(--mint);color:var(--white)}
        .compat-intro h2{color:var(--white)}
        .compat-intro p{color:rgba(255,255,255,.82)}
        .compat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
        .compat-item{padding:23px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
        .compat-item strong{display:block;color:var(--ink);margin-bottom:6px}
        .compat-item span{color:var(--muted);font-size:14px}
        .notice{display:flex;gap:18px;align-items:flex-start;padding:24px 28px;background:#fff7ed;border:1px solid #f1d9c5;border-left:4px solid var(--coral);border-radius:var(--radius-md)}
        .notice-mark{color:var(--coral-dark);font-size:22px;font-weight:900}
        .notice p{margin:0;color:#665b58}
        .faq-wrap{max-width:850px}
        details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;padding:0 22px}
        summary{list-style:none;cursor:pointer;padding:20px 30px 20px 0;color:var(--ink);font-weight:800;position:relative}
        summary::-webkit-details-marker{display:none}
        summary:after{content:"+";position:absolute;right:0;top:16px;color:var(--coral);font-size:24px;font-weight:400}
        details[open] summary:after{content:"−"}
        details p{color:var(--muted);font-size:15px;padding:0 0 19px;margin:0}
        .cta{padding:50px 0;background:var(--ink);color:white}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{color:white;margin-bottom:10px}
        .cta p{color:rgba(255,255,255,.7);margin:0}
        .site-footer{padding:58px 0 24px;background:#1d162c;color:rgba(255,255,255,.7)}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px;padding-bottom:42px}
        .site-footer .brand{color:var(--white);margin-bottom:16px}
        .footer-intro{max-width:400px;color:rgba(255,255,255,.58);font-size:14px;margin:0}
        .footer-title{color:var(--white);font-weight:800;margin-bottom:15px}
        .footer-links{display:grid;gap:8px;font-size:14px}
        .footer-links a:hover{color:#f59b84;transform:translateX(3px)}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.48)}
        @media(max-width:992px){
            .main-nav{gap:14px}
            .nav-wrap{gap:18px}
            .download-panel,.compatibility{grid-template-columns:1fr}
            .check-grid{grid-template-columns:repeat(3,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .topbar-inner{display:block;text-align:center}
            .topbar-inner span:last-child{display:none}
            .mobile-toggle{display:block;margin-left:auto}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;padding:12px 18px;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow)}
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 4px}
            .main-nav a.active:after{display:none}
            .main-nav .nav-download{margin:8px 0 2px}
            .page-hero{padding:55px 0 50px}
            .section{padding:62px 0}
            .section-head{display:block;margin-bottom:26px}
            .section-head .section-copy{margin-top:12px}
            .check-grid,.compat-list{grid-template-columns:1fr}
            .cta-inner{display:block}
            .cta .btn{margin-top:24px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}
            .footer-bottom span{display:block;margin-top:8px}
        }
        @media(max-width:520px){
            h1{font-size:35px}
            .brand{font-size:16px}
            .brand-mark{width:32px;height:32px}
            .fact-grid{grid-template-columns:1fr}
            .info-card,.download-box,.compat-intro{padding:25px}
            .notice{padding:20px}
            .footer-grid{grid-template-columns:1fr}
            .footer-grid>div:first-child{grid-column:auto}
        }

/* roulang page: article */
:root {
            --ink: #241a36;
            --ink-2: #35264c;
            --coral: #ee785f;
            --coral-dark: #d85d49;
            --mint: #4ea996;
            --cream: #f7f4ef;
            --paper: #fffdf9;
            --soft: #eee9e3;
            --line: #e5ded7;
            --text: #302d35;
            --muted: #77717a;
            --white: #ffffff;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow: 0 18px 48px rgba(36, 26, 54, .09);
            --shadow-soft: 0 8px 24px rgba(36, 26, 54, .07);
            --container: 1200px;
            --ease: 220ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            color: var(--text);
            background: var(--cream);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body, button, input { font-family: inherit; }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
        button { border: 0; cursor: pointer; }

        a:focus-visible, button:focus-visible, summary:focus-visible {
            outline: 3px solid rgba(238, 120, 95, .45);
            outline-offset: 3px;
        }

        .container {
            width: min(var(--container), calc(100% - 48px));
            margin: 0 auto;
        }

        .section { padding: 88px 0; }

        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 24px;
            margin-bottom: 36px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--coral-dark);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .12em;
        }

        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--coral);
        }

        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); letter-spacing: -.045em; font-weight: 900; }
        h1 { margin-bottom: 18px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.18; }
        h2 { margin-bottom: 14px; font-size: clamp(28px, 3vw, 38px); line-height: 1.25; }
        h3 { margin-bottom: 8px; font-size: 20px; line-height: 1.4; }

        .topbar {
            padding: 8px 0;
            color: rgba(255,255,255,.72);
            background: var(--ink);
            font-size: 13px;
        }

        .topbar-inner {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(247,244,239,.94);
            border-bottom: 1px solid rgba(229,222,215,.9);
            backdrop-filter: blur(14px);
        }

        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            flex-shrink: 0;
            color: var(--ink);
            font-size: 18px;
            font-weight: 900;
            letter-spacing: -.04em;
        }

        .brand-mark {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            color: var(--white);
            background: var(--coral);
            font-size: 17px;
            box-shadow: 4px 4px 0 rgba(36,26,54,.13);
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-left: auto;
        }

        .main-nav a {
            position: relative;
            padding: 26px 0;
            color: #625c66;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
        }

        .main-nav a:hover,
        .main-nav a.active { color: var(--ink); }

        .main-nav a.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 17px;
            height: 3px;
            border-radius: 3px;
            background: var(--coral);
        }

        .nav-download { margin-left: 4px; }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 800;
            transition: all var(--ease);
        }

        .btn-primary {
            color: var(--white);
            background: var(--coral);
            box-shadow: 0 8px 18px rgba(238,120,95,.22);
        }

        .btn-primary:hover {
            color: var(--white);
            background: var(--coral-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(238,120,95,.3);
        }

        .btn-secondary {
            color: var(--ink);
            background: transparent;
            border: 1px solid rgba(36,26,54,.24);
        }

        .btn-secondary:hover {
            color: var(--coral-dark);
            border-color: var(--coral);
            background: rgba(238,120,95,.06);
        }

        .mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            color: var(--ink);
            background: var(--soft);
            font-size: 22px;
        }

        .article-hero {
            padding: 78px 0 66px;
            color: var(--white);
            background:
                radial-gradient(circle at 83% 20%, rgba(238,120,95,.2), transparent 25%),
                radial-gradient(circle at 10% 100%, rgba(78,169,150,.15), transparent 26%),
                var(--ink);
        }

        .article-hero h1 {
            max-width: 900px;
            color: var(--white);
        }

        .article-hero .eyebrow { color: #f4a18e; }

        .article-summary {
            max-width: 800px;
            margin-bottom: 26px;
            color: rgba(255,255,255,.75);
            font-size: 18px;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 22px;
            color: rgba(255,255,255,.62);
            font-size: 14px;
        }

        .meta-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .meta-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--mint);
        }

        .breadcrumb-wrap {
            padding: 18px 0;
            border-bottom: 1px solid var(--line);
            background: var(--paper);
        }

        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .breadcrumb a:hover { color: var(--coral-dark); }
        .breadcrumb-separator { color: #b6ada8; }

        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 790px) 300px;
            gap: 64px;
            align-items: start;
        }

        .article-main {
            min-width: 0;
            padding: 38px 0 20px;
        }

        .article-lead {
            margin-bottom: 34px;
            padding: 24px 26px;
            border: 1px solid #e8d7d0;
            border-left: 4px solid var(--coral);
            border-radius: var(--radius-md);
            background: #fff8f4;
        }

        .article-lead-title {
            margin-bottom: 8px;
            color: var(--ink);
            font-size: 15px;
            font-weight: 900;
        }

        .article-lead p {
            margin-bottom: 0;
            color: #625b61;
        }

        .article-content {
            color: #3b3740;
            font-size: 17px;
            line-height: 1.95;
            overflow-wrap: anywhere;
        }

        .article-content h2 {
            position: relative;
            margin: 42px 0 16px;
            padding-left: 16px;
            font-size: 29px;
        }

        .article-content h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: .25em;
            width: 5px;
            height: 1.15em;
            border-radius: 4px;
            background: var(--coral);
        }

        .article-content h3 {
            margin-top: 30px;
            color: var(--ink-2);
        }

        .article-content p { margin-bottom: 20px; }
        .article-content ul,
        .article-content ol { margin: 0 0 24px; padding-left: 1.6em; }
        .article-content li { margin-bottom: 8px; }
        .article-content a { color: var(--coral-dark); text-decoration: underline; text-underline-offset: 3px; }
        .article-content blockquote {
            margin: 28px 0;
            padding: 20px 24px;
            color: #5d5661;
            border-left: 4px solid var(--mint);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            background: #eef8f5;
        }

        .article-content table {
            width: 100%;
            margin: 26px 0;
            border-collapse: collapse;
            background: var(--paper);
            font-size: 15px;
        }

        .article-content th,
        .article-content td {
            padding: 12px 14px;
            border: 1px solid var(--line);
            text-align: left;
        }

        .article-content th {
            color: var(--ink);
            background: var(--soft);
            font-weight: 800;
        }

        .article-content img {
            height: auto;
            margin: 28px auto;
            border-radius: var(--radius-md);
        }

        .article-notice {
            display: flex;
            gap: 14px;
            margin: 36px 0 10px;
            padding: 20px;
            border: 1px solid #cbe4dc;
            border-radius: var(--radius-md);
            background: #f0faf7;
        }

        .notice-icon {
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            border-radius: 50%;
            color: var(--white);
            background: var(--mint);
            font-weight: 900;
        }

        .article-notice strong {
            display: block;
            margin-bottom: 3px;
            color: var(--ink);
        }

        .article-notice p {
            margin: 0;
            color: #5d706b;
            font-size: 14px;
        }

        .article-aside {
            position: sticky;
            top: 108px;
            margin-top: 58px;
        }

        .aside-card {
            padding: 22px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--paper);
            box-shadow: var(--shadow-soft);
        }

        .aside-card + .aside-card { margin-top: 18px; }

        .aside-title {
            margin-bottom: 15px;
            color: var(--ink);
            font-size: 17px;
            font-weight: 900;
        }

        .aside-list {
            display: grid;
            gap: 12px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .aside-list li {
            padding-bottom: 12px;
            border-bottom: 1px solid var(--line);
        }

        .aside-list li:last-child {
            padding-bottom: 0;
            border-bottom: 0;
        }

        .aside-list a {
            display: block;
            color: #554d59;
            font-size: 14px;
            font-weight: 700;
        }

        .aside-list a:hover { color: var(--coral-dark); }

        .aside-note {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .article-bottom {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 42px;
            padding-top: 26px;
            border-top: 1px solid var(--line);
        }

        .faq-section {
            padding: 72px 0;
            background: var(--paper);
            border-top: 1px solid var(--line);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 60px;
        }

        .faq-intro p {
            max-width: 390px;
            color: var(--muted);
        }

        .faq-list {
            display: grid;
            gap: 12px;
        }

        .faq-list details {
            padding: 17px 20px;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            background: var(--cream);
        }

        .faq-list details[open] {
            border-color: rgba(238,120,95,.5);
            background: #fff8f4;
        }

        .faq-list summary {
            position: relative;
            padding-right: 28px;
            color: var(--ink);
            cursor: pointer;
            font-weight: 800;
            list-style: none;
        }

        .faq-list summary::-webkit-details-marker { display: none; }

        .faq-list summary::after {
            content: "+";
            position: absolute;
            right: 0;
            top: -2px;
            color: var(--coral-dark);
            font-size: 22px;
            font-weight: 400;
        }

        .faq-list details[open] summary::after { content: "−"; }

        .faq-answer {
            padding-top: 11px;
            color: var(--muted);
            font-size: 14px;
        }

        .download-cta {
            padding: 64px 0;
            color: var(--white);
            background: var(--ink-2);
        }

        .download-panel {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .download-panel h2 { color: var(--white); margin-bottom: 8px; }
        .download-panel p { margin: 0; color: rgba(255,255,255,.68); }
        .download-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }

        .site-footer {
            padding: 54px 0 0;
            color: rgba(255,255,255,.7);
            background: #1d162c;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr;
            gap: 46px;
            padding-bottom: 42px;
        }

        .site-footer .brand { color: var(--white); }
        .footer-intro { max-width: 370px; margin: 18px 0 0; font-size: 14px; line-height: 1.8; }
        .footer-title { margin-bottom: 15px; color: var(--white); font-size: 15px; font-weight: 800; }
        .footer-links { display: grid; gap: 9px; font-size: 14px; }
        .footer-links a:hover { color: #f4a18e; transform: translateX(3px); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 0;
            border-top: 1px solid rgba(255,255,255,.12);
            font-size: 13px;
        }

        @media (max-width: 992px) {
            .main-nav { gap: 15px; }
            .main-nav a { font-size: 13px; }
            .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
            .article-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 50px; }
            .aside-card + .aside-card { margin-top: 0; }
            .faq-grid { grid-template-columns: 1fr; gap: 28px; }
        }

        @media (max-width: 768px) {
            .container { width: min(var(--container), calc(100% - 34px)); }
            .topbar-inner { display: block; text-align: center; }
            .topbar-inner span + span { display: none; }
            .nav-wrap { min-height: 68px; justify-content: space-between; }
            .mobile-toggle { display: block; }
            .main-nav {
                position: absolute;
                top: 68px;
                left: 0;
                right: 0;
                display: none;
                align-items: stretch;
                gap: 0;
                margin: 0;
                padding: 10px 17px 17px;
                border-bottom: 1px solid var(--line);
                background: rgba(247,244,239,.98);
                box-shadow: var(--shadow-soft);
            }
            .main-nav.is-open { display: flex; flex-direction: column; }
            .main-nav a { padding: 13px 10px; }
            .main-nav a.active::after { right: auto; bottom: 7px; width: 28px; }
            .nav-download { margin: 8px 0 0; }
            .article-hero { padding: 54px 0 48px; }
            .article-summary { font-size: 16px; }
            .article-main { padding-top: 30px; }
            .article-aside { grid-template-columns: 1fr; }
            .aside-card + .aside-card { margin-top: 0; }
            .download-panel { display: block; }
            .download-actions { margin-top: 22px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; }
            .footer-bottom span + span { margin-top: 8px; }
        }

        @media (max-width: 520px) {
            .section { padding: 58px 0; }
            .article-hero h1 { font-size: 32px; }
            .article-content { font-size: 16px; }
            .article-lead { padding: 19px; }
            .article-notice { padding: 17px; }
            .download-actions .btn { width: 100%; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-grid > div:first-child { grid-column: auto; }
        }

/* roulang page: category2 */
:root{
            --ink:#241a36;
            --ink-2:#35264c;
            --coral:#ee785f;
            --coral-dark:#d85d49;
            --mint:#4ea996;
            --cream:#f7f4ef;
            --paper:#fffdf9;
            --soft:#eee9e3;
            --line:#e5ded7;
            --text:#302d35;
            --muted:#77717a;
            --white:#fff;
            --radius-lg:24px;
            --radius-md:16px;
            --radius-sm:10px;
            --shadow:0 18px 48px rgba(36,26,54,.09);
            --shadow-soft:0 8px 24px rgba(36,26,54,.07);
            --container:1200px;
            --ease:220ms ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:var(--cream);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        body,button,input{font-family:inherit}
        img{display:block;max-width:100%}
        a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
        a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(238,120,95,.45);outline-offset:3px}
        button{border:0;cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:13px;padding:8px 0}
        .topbar-inner{display:flex;justify-content:space-between;gap:20px}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(247,244,239,.95);border-bottom:1px solid rgba(229,222,215,.9);backdrop-filter:blur(14px)}
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:32px}
        .brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink);font-size:18px;font-weight:900;letter-spacing:-.04em}
        .brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--white);background:var(--coral);font-size:17px;box-shadow:4px 4px 0 rgba(36,26,54,.13)}
        .main-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
        .main-nav a{position:relative;color:#625c66;font-size:14px;font-weight:700;padding:26px 0;white-space:nowrap}
        .main-nav a:hover,.main-nav a.active{color:var(--ink)}
        .main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:3px;background:var(--coral)}
        .nav-download{margin-left:4px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border-radius:var(--radius-sm);font-size:15px;font-weight:800;transition:all var(--ease)}
        .btn-primary{color:var(--white);background:var(--coral);box-shadow:0 8px 18px rgba(238,120,95,.22)}
        .btn-primary:hover{color:var(--white);background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 12px 24px rgba(238,120,95,.3)}
        .btn-secondary{color:var(--ink);background:transparent;border:1px solid rgba(36,26,54,.24)}
        .btn-secondary:hover{color:var(--coral-dark);border-color:var(--coral);background:rgba(238,120,95,.06)}
        .mobile-toggle{display:none;width:44px;height:44px;border-radius:10px;background:var(--soft);color:var(--ink);font-size:22px}
        .hero{position:relative;overflow:hidden;padding:82px 0 78px;color:var(--white);background:var(--ink)}
        .hero:before,.hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
        .hero:before{width:430px;height:430px;right:-120px;top:-180px;background:rgba(238,120,95,.19)}
        .hero:after{width:270px;height:270px;left:43%;bottom:-190px;background:rgba(78,169,150,.14)}
        .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral-dark);font-size:13px;font-weight:800;letter-spacing:.12em}
        .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
        .hero .eyebrow{color:#f4a18e}
        h1,h2,h3{color:var(--ink);line-height:1.22;letter-spacing:-.045em;margin:0 0 18px;font-weight:900}
        h1{font-size:clamp(34px,4.5vw,58px)}
        h2{font-size:clamp(28px,3.2vw,38px)}
        h3{font-size:21px}
        .hero h1{color:var(--white);max-width:700px;margin-top:18px}
        .hero h1 span{color:#f59b84}
        .hero-copy{color:rgba(255,255,255,.74);max-width:650px;font-size:18px}
        .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 25px}
        .hero .btn-secondary{color:var(--white);border-color:rgba(255,255,255,.3)}
        .hero .btn-secondary:hover{color:var(--white);border-color:var(--coral);background:rgba(255,255,255,.08)}
        .hero-notes{display:flex;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.62);font-size:13px}
        .hero-notes span{display:inline-flex;align-items:center;gap:7px}
        .hero-notes i{width:7px;height:7px;border-radius:50%;background:var(--mint)}
        .app-panel{position:relative;min-height:365px;padding:28px;border-radius:var(--radius-lg);background:#35264c;border:1px solid rgba(255,255,255,.13);box-shadow:var(--shadow)}
        .app-panel:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;pointer-events:none}
        .panel-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.7);font-size:13px}
        .status{display:inline-flex;align-items:center;gap:7px;color:#a9dfcf}
        .status:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint)}
        .screen{position:relative;z-index:1;margin:31px auto 23px;width:78%;padding:24px 22px 20px;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 20px 35px rgba(0,0,0,.2);transform:rotate(2deg)}
        .screen-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
        .screen-logo{font-size:19px;font-weight:900}
        .screen-badge{padding:3px 8px;border-radius:20px;color:#286f63;background:#dff3ed;font-size:11px;font-weight:800}
        .screen-lines{display:grid;gap:11px}
        .screen-line{height:11px;border-radius:8px;background:#eee9e3}
        .screen-line:nth-child(2){width:72%;background:#f5b09d}
        .screen-line:nth-child(3){width:88%}
        .screen-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:23px}
        .screen-card{height:66px;border-radius:9px;background:#f4eee8}
        .screen-card:nth-child(2){background:#e2f1ec}
        .screen-card:nth-child(3){background:#f8ddd5}
        .panel-foot{position:relative;z-index:1;display:flex;justify-content:space-between;color:rgba(255,255,255,.58);font-size:12px}
        .section{padding:92px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:38px}
        .section-copy{max-width:650px;color:var(--muted);margin:0}
        .surface{background:var(--paper)}
        .intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
        .lead-text{font-size:18px;color:var(--muted);max-width:460px}
        .fact-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .fact{padding:24px 18px 22px 0;border-right:1px solid var(--line)}
        .fact:not(:first-child){padding-left:22px}
        .fact:last-child{border-right:0}
        .fact strong{display:block;color:var(--ink);font-size:25px;margin-bottom:4px}
        .fact span{color:var(--muted);font-size:13px}
        .scenario-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
        .scenario-card{min-height:205px;padding:28px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--paper);transition:all var(--ease)}
        .scenario-card:hover{transform:translateY(-4px);border-color:rgba(238,120,95,.55);box-shadow:var(--shadow-soft)}
        .scenario-card.featured{grid-row:span 2;background:var(--ink);color:rgba(255,255,255,.74)}
        .scenario-card.featured h3{color:var(--white);font-size:29px}
        .scenario-card h3{margin-top:25px}
        .scenario-card p{color:var(--muted);margin:0}
        .scenario-card.featured p{color:rgba(255,255,255,.68)}
        .number{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--white);background:var(--coral);font-weight:900}
        .mini-tag{display:inline-block;margin-top:23px;padding:5px 10px;border-radius:20px;color:var(--coral-dark);background:#fff0eb;font-size:12px;font-weight:800}
        .feature-band{padding:38px 42px;border-radius:var(--radius-lg);background:#eee9e3;display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}
        .feature-item{display:flex;gap:15px}
        .feature-icon{flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:12px;color:var(--white);background:var(--mint);font-weight:900}
        .feature-item h3{font-size:17px;margin:0 0 5px}
        .feature-item 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:30px 24px 10px 0;margin-right:24px}
        .step:not(:last-child):after{content:"";position:absolute;right:0;top:43px;width:25px;height:1px;background:var(--coral)}
        .step-num{color:var(--coral);font-size:14px;font-weight:900}
        .step h3{font-size:18px;margin:12px 0 8px}
        .step p{color:var(--muted);font-size:14px;margin:0}
        .device-section{background:var(--ink);color:var(--white)}
        .device-section h2{color:var(--white)}
        .device-section .section-copy{color:rgba(255,255,255,.68)}
        .device-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:35px}
        .device-card{padding:30px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);background:rgba(255,255,255,.06)}
        .device-card h3{color:var(--white);margin-bottom:10px}
        .device-card p{color:rgba(255,255,255,.65);margin:0}
        .device-label{color:#f59b84;font-size:13px;font-weight:800;letter-spacing:.08em}
        .reading-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
        .reading-main,.reading-side{padding:32px;border-radius:var(--radius-md);background:var(--paper);border:1px solid var(--line)}
        .reading-main{background:#fff0eb;border-color:#f4c4b8}
        .reading-main p,.reading-side p{color:var(--muted);margin:0 0 20px}
        .reading-list{display:grid;gap:0}
        .reading-list a{display:flex;justify-content:space-between;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);font-weight:800}
        .reading-list a:hover{color:var(--coral-dark);padding-left:6px}
        .reading-list small{color:var(--muted);font-weight:500;white-space:nowrap}
        .faq-list{max-width:900px;margin:0 auto}
        .faq-list details{border-bottom:1px solid var(--line);padding:20px 0}
        .faq-list summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;color:var(--ink);font-weight:800;list-style:none}
        .faq-list summary::-webkit-details-marker{display:none}
        .faq-list summary:after{content:"＋";color:var(--coral);font-size:21px;line-height:1}
        .faq-list details[open] summary:after{content:"−"}
        .faq-list details p{max-width:800px;color:var(--muted);margin:14px 0 0}
        .download-strip{padding:42px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;gap:30px;color:var(--white);background:var(--coral)}
        .download-strip h2{color:var(--white);font-size:30px;margin-bottom:8px}
        .download-strip p{margin:0;color:rgba(255,255,255,.82)}
        .download-strip .btn{color:var(--ink);background:var(--white)}
        .download-strip .btn:hover{background:#fff4ef}
        .info-line{display:flex;flex-wrap:wrap;gap:25px;margin-top:25px;color:var(--muted);font-size:13px}
        .site-footer{padding:62px 0 24px;color:rgba(255,255,255,.66);background:var(--ink)}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px}
        .site-footer .brand{color:var(--white)}
        .site-footer .brand-mark{box-shadow:none}
        .footer-intro{max-width:360px;margin:18px 0 0;font-size:14px;line-height:1.8}
        .footer-title{margin-bottom:16px;color:var(--white);font-weight:800}
        .footer-links{display:grid;gap:9px;font-size:14px}
        .footer-links a:hover{color:#f59b84}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:50px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);font-size:12px}
        @media(max-width:992px){
            .main-nav{gap:14px}
            .hero-grid,.intro-grid,.scenario-grid,.reading-grid{grid-template-columns:1fr}
            .hero-grid{gap:42px}
            .app-panel{max-width:600px}
            .steps{grid-template-columns:repeat(2,1fr)}
            .feature-band{grid-template-columns:1fr 1fr}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .topbar-inner{display:block;text-align:center}
            .topbar-inner span:last-child{display:none}
            .nav-wrap{min-height:68px;justify-content:space-between}
            .mobile-toggle{display:block}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:74px;padding:12px 18px;align-items:stretch;flex-direction:column;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 4px}
            .main-nav a.active:after{display:none}
            .nav-download{margin:5px 0 0}
            .hero{padding:62px 0 58px}
            .section{padding:64px 0}
            .section-head{display:block;margin-bottom:28px}
            .section-copy{margin-top:12px}
            .fact-row{grid-template-columns:1fr}
            .fact,.fact:not(:first-child){padding:18px 0;border-right:0;border-bottom:1px solid var(--line)}
            .fact:last-child{border-bottom:0}
            .feature-band{grid-template-columns:1fr;padding:27px}
            .device-grid{grid-template-columns:1fr}
            .download-strip{display:block;padding:30px}
            .download-strip .btn{margin-top:22px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
            .footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}
            .footer-bottom span{display:block;margin-top:7px}
        }
        @media(max-width:520px){
            .brand{font-size:15px}
            .brand-mark{width:31px;height:31px;font-size:15px}
            .hero-copy{font-size:16px}
            .hero-actions .btn{width:100%}
            .app-panel{padding:20px;min-height:320px}
            .screen{width:90%;padding:20px 16px}
            .scenario-card.featured{min-height:240px}
            .steps{grid-template-columns:1fr}
            .step{margin-right:0;border-bottom:1px solid var(--line)}
            .step:not(:last-child):after{display:none}
            .reading-main,.reading-side{padding:24px}
            .reading-list a{display:block}
            .reading-list small{display:block;margin-top:4px}
            .footer-grid{grid-template-columns:1fr}
            .footer-grid>div:first-child{grid-column:auto}
        }

/* roulang page: category3 */
:root {
            --ink: #241a36;
            --ink-2: #35264c;
            --coral: #ee785f;
            --coral-dark: #d85d49;
            --mint: #4ea996;
            --cream: #f7f4ef;
            --paper: #fffdf9;
            --soft: #eee9e3;
            --line: #e5ded7;
            --text: #302d35;
            --muted: #77717a;
            --white: #ffffff;
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --shadow: 0 18px 48px rgba(36, 26, 54, .09);
            --shadow-soft: 0 8px 24px rgba(36, 26, 54, .07);
            --container: 1200px;
            --ease: 220ms ease;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--text);
            background: var(--cream);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        body, button, input { font-family: inherit; }
        img { display: block; max-width: 100%; }
        a {
            color: inherit;
            text-decoration: none;
            transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
        }
        button { border: 0; cursor: pointer; }
        a:focus-visible, button:focus-visible, summary:focus-visible {
            outline: 3px solid rgba(238, 120, 95, .45);
            outline-offset: 3px;
        }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--ink); letter-spacing: -.045em; line-height: 1.22; }
        h1 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 22px; }
        h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 16px; }
        h3 { font-size: 20px; margin-bottom: 10px; }
        p { margin-bottom: 16px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .section { padding: 96px 0; }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 24px;
            margin-bottom: 38px;
        }
        .section-copy { max-width: 650px; color: var(--muted); margin-bottom: 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--coral-dark);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .12em;
            margin-bottom: 14px;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: var(--coral);
        }
        .topbar {
            padding: 8px 0;
            color: rgba(255,255,255,.72);
            background: var(--ink);
            font-size: 13px;
        }
        .topbar-inner {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(247,244,239,.94);
            border-bottom: 1px solid rgba(229,222,215,.9);
            backdrop-filter: blur(14px);
        }
        .nav-wrap {
            min-height: 76px;
            display: flex;
            align-items: center;
            gap: 32px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            flex-shrink: 0;
            color: var(--ink);
            font-size: 18px;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        .brand-mark {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            color: var(--white);
            background: var(--coral);
            font-size: 17px;
            box-shadow: 4px 4px 0 rgba(36,26,54,.13);
        }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-left: auto;
        }
        .main-nav a {
            position: relative;
            color: #625c66;
            font-size: 14px;
            font-weight: 700;
            padding: 26px 0;
            white-space: nowrap;
        }
        .main-nav a:hover, .main-nav a.active { color: var(--ink); }
        .main-nav a.active::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 17px;
            height: 3px;
            border-radius: 3px;
            background: var(--coral);
        }
        .main-nav .nav-download {
            padding: 0 18px;
            color: var(--white);
        }
        .main-nav .nav-download:hover { color: var(--white); }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 800;
            transition: all var(--ease);
        }
        .btn-primary {
            color: var(--white);
            background: var(--coral);
            box-shadow: 0 8px 18px rgba(238,120,95,.22);
        }
        .btn-primary:hover {
            color: var(--white);
            background: var(--coral-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(238,120,95,.3);
        }
        .btn-secondary {
            color: var(--ink);
            background: transparent;
            border: 1px solid rgba(36,26,54,.24);
        }
        .btn-secondary:hover {
            color: var(--coral-dark);
            border-color: var(--coral);
            background: rgba(238,120,95,.06);
        }
        .mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            color: var(--ink);
            background: var(--soft);
            font-size: 22px;
        }

        .page-hero {
            position: relative;
            overflow: hidden;
            padding: 76px 0 82px;
            background: var(--ink);
            color: var(--white);
        }
        .page-hero::before,
        .page-hero::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }
        .page-hero::before {
            width: 440px;
            height: 440px;
            right: -155px;
            top: -245px;
            background: rgba(238,120,95,.18);
        }
        .page-hero::after {
            width: 310px;
            height: 310px;
            left: 48%;
            bottom: -245px;
            background: rgba(78,169,150,.14);
        }
        .hero-inner {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 70px;
            align-items: end;
        }
        .page-hero .eyebrow { color: #f4a18e; }
        .page-hero h1 {
            max-width: 700px;
            color: var(--white);
        }
        .page-hero h1 span { color: #f59b84; }
        .hero-description {
            max-width: 680px;
            margin-bottom: 0;
            color: rgba(255,255,255,.74);
            font-size: 18px;
        }
        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-bottom: 25px;
            color: rgba(255,255,255,.58);
            font-size: 13px;
        }
        .breadcrumb a:hover { color: var(--white); }
        .hero-panel {
            padding: 25px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,.08);
        }
        .panel-kicker {
            color: #f6aa98;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: .08em;
        }
        .panel-title {
            margin: 8px 0 20px;
            color: var(--white);
            font-size: 23px;
            font-weight: 800;
        }
        .hero-metrics {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .hero-metric {
            padding: 14px;
            border-radius: 12px;
            background: rgba(255,255,255,.1);
        }
        .hero-metric strong {
            display: block;
            color: var(--white);
            font-size: 20px;
        }
        .hero-metric span {
            color: rgba(255,255,255,.6);
            font-size: 12px;
        }

        .info-strip {
            position: relative;
            z-index: 2;
            margin-top: -34px;
        }
        .info-strip-inner {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--paper);
            box-shadow: var(--shadow-soft);
        }
        .info-item {
            min-height: 108px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px 24px;
            border-right: 1px solid var(--line);
        }
        .info-item:last-child { border-right: 0; }
        .info-label {
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 3px;
        }
        .info-value {
            color: var(--ink);
            font-size: 18px;
            font-weight: 850;
        }

        .topic-layout {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 56px;
            align-items: start;
        }
        .topic-intro {
            position: sticky;
            top: 115px;
        }
        .topic-intro p { color: var(--muted); }
        .topic-note {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-top: 28px;
            padding: 16px;
            border-left: 3px solid var(--mint);
            background: rgba(78,169,150,.08);
            color: #56665f;
            font-size: 14px;
        }
        .topic-note b { color: var(--ink); }
        .topic-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .topic-card {
            min-height: 205px;
            padding: 24px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: var(--paper);
            transition: all var(--ease);
        }
        .topic-card:hover {
            transform: translateY(-4px);
            border-color: rgba(238,120,95,.55);
            box-shadow: var(--shadow-soft);
        }
        .topic-icon {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            margin-bottom: 18px;
            border-radius: 13px;
            color: var(--coral-dark);
            background: #fff0eb;
            font-size: 20px;
            font-weight: 900;
        }
        .topic-card p { color: var(--muted); font-size: 14px; margin-bottom: 0; }

        .feature-section { background: var(--paper); }
        .feature-card {
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            overflow: hidden;
            border-radius: var(--radius-lg);
            background: var(--ink);
            box-shadow: var(--shadow);
        }
        .feature-visual {
            min-height: 330px;
            position: relative;
            display: flex;
            align-items: end;
            padding: 32px;
            overflow: hidden;
            background:
                linear-gradient(145deg, rgba(238,120,95,.78), rgba(53,38,76,.2)),
                radial-gradient(circle at 25% 22%, #f7b09a 0 8%, transparent 9%),
                linear-gradient(135deg, #6b4267, #241a36 66%);
        }
        .feature-visual::after {
            content: "PG";
            position: absolute;
            right: 24px;
            top: 4px;
            color: rgba(255,255,255,.12);
            font-size: 180px;
            font-weight: 900;
            letter-spacing: -.15em;
        }
        .visual-caption {
            position: relative;
            z-index: 1;
            color: var(--white);
        }
        .visual-caption small {
            display: block;
            margin-bottom: 6px;
            color: rgba(255,255,255,.72);
        }
        .visual-caption strong { font-size: 25px; }
        .feature-content { padding: 42px 45px; color: rgba(255,255,255,.72); }
        .feature-content .eyebrow { color: #f4a18e; }
        .feature-content h2 { color: var(--white); max-width: 560px; }
        .feature-content p { max-width: 590px; }
        .feature-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px 26px;
            margin: 24px 0 30px;
            padding: 0;
            list-style: none;
        }
        .feature-list li {
            display: flex;
            gap: 9px;
            color: rgba(255,255,255,.82);
            font-size: 14px;
        }
        .feature-list li::before {
            content: "✓";
            color: #83d2be;
            font-weight: 900;
        }

        .timeline {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .timeline::before {
            content: "";
            position: absolute;
            left: 12%;
            right: 12%;
            top: 28px;
            height: 1px;
            background: var(--line);
        }
        .timeline-item {
            position: relative;
            z-index: 1;
            padding-top: 68px;
        }
        .timeline-number {
            position: absolute;
            top: 0;
            left: 0;
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            border: 7px solid var(--cream);
            border-radius: 50%;
            color: var(--white);
            background: var(--coral);
            font-weight: 900;
            box-shadow: 0 0 0 1px rgba(238,120,95,.3);
        }
        .timeline-item:nth-child(2) .timeline-number { background: var(--mint); }
        .timeline-item:nth-child(3) .timeline-number { background: var(--ink); }
        .timeline-item p { color: var(--muted); font-size: 14px; margin-bottom: 0; }

        .update-section { background: #f0ebe5; }
        .update-layout {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 30px;
        }
        .update-board {
            padding: 30px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--paper);
        }
        .update-row {
            display: grid;
            grid-template-columns: 105px 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 18px 0;
            border-bottom: 1px solid var(--line);
        }
        .update-row:last-child { border-bottom: 0; padding-bottom: 0; }
        .update-row:first-child { padding-top: 0; }
        .update-date { color: var(--muted); font-size: 13px; }
        .update-row h3 { margin-bottom: 3px; font-size: 17px; }
        .update-row p { margin: 0; color: var(--muted); font-size: 13px; }
        .badge {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 10px;
            border-radius: 999px;
            color: #477e70;
            background: #e2f2ed;
            font-size: 12px;
            font-weight: 800;
            white-space: nowrap;
        }
        .badge.coral { color: var(--coral-dark); background: #ffebe5; }
        .notice-card {
            padding: 32px;
            border-radius: var(--radius-lg);
            color: var(--white);
            background: var(--ink-2);
        }
        .notice-card h3 { color: var(--white); font-size: 24px; }
        .notice-card p { color: rgba(255,255,255,.7); }
        .notice-points {
            display: grid;
            gap: 13px;
            margin-top: 24px;
        }
        .notice-point {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding-top: 13px;
            border-top: 1px solid rgba(255,255,255,.14);
            color: rgba(255,255,255,.78);
            font-size: 14px;
        }
        .notice-point b { color: #f5a18d; }

        .reading-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 24px;
        }
        .reading-list {
            border-top: 1px solid var(--line);
        }
        .reading-item {
            display: grid;
            grid-template-columns: 58px 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 22px 0;
            border-bottom: 1px solid var(--line);
        }
        .reading-index {
            color: var(--coral);
            font-size: 25px;
            font-weight: 900;
        }
        .reading-item h3 { margin-bottom: 4px; font-size: 18px; }
        .reading-item p { margin: 0; color: var(--muted); font-size: 14px; }
        .arrow-link {
            color: var(--coral-dark);
            font-size: 14px;
            font-weight: 800;
            white-space: nowrap;
        }
        .arrow-link:hover { color: var(--ink); transform: translateX(3px); }
        .reading-side {
            padding: 30px;
            border-radius: var(--radius-lg);
            background: #fff0eb;
        }
        .reading-side h3 { font-size: 23px; }
        .reading-side p { color: var(--muted); }
        .tag-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
        .tag {
            padding: 7px 11px;
            border: 1px solid rgba(238,120,95,.25);
            border-radius: 999px;
            color: var(--coral-dark);
            background: rgba(255,255,255,.62);
            font-size: 13px;
            font-weight: 700;
        }

        .faq-section { background: var(--paper); }
        .faq-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 64px;
            align-items: start;
        }
        .faq-intro p { color: var(--muted); }
        .faq-list { border-top: 1px solid var(--line); }
        details {
            border-bottom: 1px solid var(--line);
        }
        summary {
            position: relative;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 21px 0;
            color: var(--ink);
            cursor: pointer;
            font-weight: 800;
            list-style: none;
        }
        summary::-webkit-details-marker { display: none; }
        summary::after {
            content: "+";
            color: var(--coral);
            font-size: 24px;
            font-weight: 400;
            line-height: 1;
        }
        details[open] summary::after { content: "−"; }
        details p {
            max-width: 720px;
            padding: 0 42px 22px 0;
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .cta-section { padding: 70px 0; }
        .cta-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 30px;
            padding: 38px 44px;
            border-radius: var(--radius-lg);
            color: var(--white);
            background: var(--coral);
            box-shadow: var(--shadow);
        }
        .cta-box h2 { color: var(--white); margin-bottom: 8px; }
        .cta-box p { margin: 0; color: rgba(255,255,255,.78); }
        .cta-box .btn {
            flex-shrink: 0;
            color: var(--ink);
            background: var(--white);
            box-shadow: none;
        }
        .cta-box .btn:hover {
            color: var(--ink);
            background: #fff5f0;
            transform: translateY(-2px);
        }

        .site-footer {
            padding: 62px 0 24px;
            color: rgba(255,255,255,.72);
            background: var(--ink);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr .8fr .8fr;
            gap: 50px;
            padding-bottom: 46px;
        }
        .site-footer .brand { color: var(--white); }
        .footer-intro {
            max-width: 390px;
            margin: 18px 0 0;
            color: rgba(255,255,255,.58);
            font-size: 14px;
        }
        .footer-title {
            margin-bottom: 15px;
            color: var(--white);
            font-weight: 800;
        }
        .footer-links {
            display: grid;
            gap: 8px;
            font-size: 14px;
        }
        .footer-links a:hover { color: #f59b84; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 22px;
            border-top: 1px solid rgba(255,255,255,.13);
            color: rgba(255,255,255,.45);
            font-size: 13px;
        }

        @media (max-width: 1024px) {
            .main-nav { gap: 15px; }
            .hero-inner, .topic-layout, .feature-card, .update-layout, .reading-grid, .faq-grid {
                gap: 34px;
            }
            .main-nav a { font-size: 13px; }
            .section { padding: 76px 0; }
        }
        @media (max-width: 820px) {
            .container { width: min(var(--container), calc(100% - 36px)); }
            .mobile-toggle { display: block; margin-left: auto; }
            .main-nav {
                position: absolute;
                left: 18px;
                right: 18px;
                top: calc(100% + 1px);
                display: none;
                align-items: stretch;
                flex-direction: column;
                gap: 0;
                padding: 10px 18px 18px;
                border: 1px solid var(--line);
                border-top: 0;
                border-radius: 0 0 16px 16px;
                background: var(--paper);
                box-shadow: var(--shadow-soft);
            }
            .main-nav.is-open { display: flex; }
            .main-nav a { padding: 13px 4px; }
            .main-nav a.active::after { bottom: 5px; right: auto; width: 34px; }
            .main-nav .nav-download { margin-top: 8px; padding: 0 16px; }
            .hero-inner, .topic-layout, .feature-card, .update-layout, .reading-grid, .faq-grid {
                grid-template-columns: 1fr;
            }
            .topic-intro { position: static; }
            .info-strip-inner { grid-template-columns: repeat(2, 1fr); }
            .info-item:nth-child(2) { border-right: 0; }
            .info-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .feature-visual { min-height: 250px; }
            .timeline { grid-template-columns: 1fr; gap: 26px; }
            .timeline::before { left: 27px; top: 28px; bottom: 28px; width: 1px; height: auto; }
            .timeline-item { padding: 0 0 0 78px; min-height: 78px; }
            .timeline-number { left: 0; }
            .cta-box { align-items: flex-start; flex-direction: column; padding: 32px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .footer-grid > div:first-child { grid-column: 1 / -1; }
        }
        @media (max-width: 520px) {
            .topbar-inner { align-items: flex-start; flex-direction: column; gap: 2px; }
            .container { width: min(var(--container), calc(100% - 28px)); }
            .nav-wrap { min-height: 68px; }
            .brand { font-size: 15px; }
            .brand-mark { width: 31px; height: 31px; font-size: 15px; }
            .page-hero { padding: 55px 0 65px; }
            .hero-description { font-size: 16px; }
            .hero-panel { padding: 20px; }
            .info-strip { margin-top: -24px; }
            .info-item { min-height: 92px; padding: 15px; }
            .info-value { font-size: 16px; }
            .topic-grid { grid-template-columns: 1fr; }
            .feature-content { padding: 30px 24px; }
            .feature-list { grid-template-columns: 1fr; }
            .update-board, .notice-card, .reading-side { padding: 23px; }
            .update-row { grid-template-columns: 1fr auto; gap: 7px 12px; }
            .update-date { grid-column: 1 / -1; }
            .update-row .badge { grid-column: 2; grid-row: 2; }
            .reading-item { grid-template-columns: 38px 1fr; gap: 12px; }
            .reading-item .arrow-link { grid-column: 2; }
            .section { padding: 60px 0; }
            .section-head { display: block; margin-bottom: 28px; }
            .section-head .section-copy { margin-top: 13px; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-grid > div:first-child { grid-column: auto; }
            .footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
        }

/* roulang page: category4 */
:root {
            --ink:#241a36;
            --ink-2:#35264c;
            --coral:#ee785f;
            --coral-dark:#d85d49;
            --mint:#4ea996;
            --cream:#f7f4ef;
            --paper:#fffdf9;
            --soft:#eee9e3;
            --line:#e5ded7;
            --text:#302d35;
            --muted:#77717a;
            --white:#fff;
            --radius-lg:24px;
            --radius-md:16px;
            --radius-sm:10px;
            --shadow:0 18px 48px rgba(36,26,54,.09);
            --shadow-soft:0 8px 24px rgba(36,26,54,.07);
            --container:1200px;
            --ease:220ms ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:var(--cream);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        body,button,input{font-family:inherit}
        img{display:block;max-width:100%}
        a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
        a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(238,120,95,.45);outline-offset:3px}
        button{border:0;cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:13px;padding:8px 0}
        .topbar-inner{display:flex;justify-content:space-between;gap:20px}
        .site-header{
            position:sticky;top:0;z-index:20;
            background:rgba(247,244,239,.94);
            border-bottom:1px solid rgba(229,222,215,.9);
            backdrop-filter:blur(14px)
        }
        .nav-wrap{min-height:76px;display:flex;align-items:center;gap:32px}
        .brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;color:var(--ink);font-size:18px;font-weight:900;letter-spacing:-.04em}
        .brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:var(--white);background:var(--coral);font-size:17px;box-shadow:4px 4px 0 rgba(36,26,54,.13)}
        .main-nav{display:flex;align-items:center;gap:24px;margin-left:auto}
        .main-nav a{position:relative;color:#625c66;font-size:14px;font-weight:700;padding:26px 0;white-space:nowrap}
        .main-nav a:hover,.main-nav a.active{color:var(--ink)}
        .main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:17px;height:3px;border-radius:3px;background:var(--coral)}
        .nav-download{margin-left:4px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border-radius:var(--radius-sm);font-size:15px;font-weight:800;transition:all var(--ease)}
        .btn-primary{color:var(--white);background:var(--coral);box-shadow:0 8px 18px rgba(238,120,95,.22)}
        .btn-primary:hover{color:var(--white);background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 12px 24px rgba(238,120,95,.3)}
        .btn-secondary{color:var(--ink);background:transparent;border:1px solid rgba(36,26,54,.24)}
        .btn-secondary:hover{color:var(--coral-dark);border-color:var(--coral);background:rgba(238,120,95,.06)}
        .mobile-toggle{display:none;width:44px;height:44px;border-radius:10px;background:var(--soft);color:var(--ink);font-size:22px}
        main{overflow:hidden}
        .page-hero{padding:78px 0 72px;background:var(--ink);color:var(--white);position:relative}
        .page-hero:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-130px;top:-190px;background:rgba(238,120,95,.16)}
        .page-hero .container{position:relative;z-index:1}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral-dark);font-size:13px;font-weight:800;letter-spacing:.12em}
        .page-hero .eyebrow{color:#f4a18e}
        .eyebrow:before{content:"";width:24px;height:2px;background:var(--coral)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(34px,5vw,56px);line-height:1.16;letter-spacing:-.055em;margin:18px 0 20px;font-weight:900}
        h2{font-size:clamp(28px,3.2vw,38px);line-height:1.25;letter-spacing:-.045em;color:var(--ink);margin-bottom:16px;font-weight:900}
        h3{font-size:20px;line-height:1.4;color:var(--ink);margin-bottom:10px;font-weight:850}
        .page-hero p{max-width:720px;color:rgba(255,255,255,.74);font-size:18px;margin-bottom:0}
        .breadcrumb{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;margin:28px 0 0}
        .breadcrumb a:hover{color:var(--coral-dark)}
        .section{padding:88px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
        .section-copy{max-width:650px;color:var(--muted);margin-bottom:0}
        .guide-overview{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
        .overview-panel,.fact-panel,.feature-card,.faq-list,.download-strip{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}
        .overview-panel{padding:36px}
        .overview-panel p{color:var(--muted);margin-bottom:24px}
        .check-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;padding:0;margin:0;list-style:none}
        .check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-weight:700}
        .check-list li:before{content:"✓";display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:rgba(78,169,150,.14);color:var(--mint);font-weight:900;margin-top:3px}
        .fact-panel{padding:28px;background:var(--ink);color:var(--white)}
        .fact-panel h3{color:var(--white);margin-bottom:22px}
        .fact-row{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:14px}
        .fact-row:last-child{border-bottom:0}
        .fact-row span:first-child{color:rgba(255,255,255,.58)}
        .fact-row span:last-child{font-weight:800;color:#f8b09c;text-align:right}
        .steps-section{background:var(--paper)}
        .step-line{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
        .step-line:before{content:"";position:absolute;left:9%;right:9%;top:28px;height:1px;background:var(--line)}
        .step{position:relative;z-index:1;padding:0 10px}
        .step-number{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:var(--coral);color:var(--white);font-size:20px;font-weight:900;margin-bottom:20px;box-shadow:0 8px 18px rgba(238,120,95,.22)}
        .step p{color:var(--muted);font-size:14px;margin-bottom:0}
        .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
        .feature-card{padding:28px;transition:all var(--ease)}
        .feature-card:hover{transform:translateY(-4px);border-color:rgba(238,120,95,.55);box-shadow:var(--shadow)}
        .card-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(238,120,95,.12);color:var(--coral-dark);font-size:20px;margin-bottom:18px}
        .feature-card p{color:var(--muted);font-size:14px;margin-bottom:0}
        .tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:30px;background:var(--soft);color:var(--ink-2);font-size:12px;font-weight:800}
        .tag.mint{background:rgba(78,169,150,.13);color:#327f70}
        .tag.coral{background:rgba(238,120,95,.13);color:var(--coral-dark)}
        .device-section{background:#f0ebe5}
        .device-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:center}
        .device-card{padding:32px;border-radius:var(--radius-lg);background:var(--ink);color:var(--white);min-height:310px;position:relative;overflow:hidden}
        .device-card:after{content:"PG";position:absolute;right:20px;bottom:-35px;font-size:180px;line-height:1;font-weight:900;color:rgba(255,255,255,.045)}
        .device-card h3{color:var(--white);position:relative;z-index:1}
        .device-card p{position:relative;z-index:1;color:rgba(255,255,255,.68);max-width:340px}
        .device-list{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
        .device-list span{border:1px solid rgba(255,255,255,.2);padding:7px 12px;border-radius:30px;color:rgba(255,255,255,.8);font-size:13px}
        .settings-list{display:grid;gap:12px}
        .setting-item{display:flex;gap:18px;align-items:flex-start;padding:19px 0;border-bottom:1px solid var(--line)}
        .setting-item:last-child{border-bottom:0}
        .setting-index{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:var(--white);color:var(--coral-dark);font-weight:900}
        .setting-item strong{display:block;color:var(--ink);margin-bottom:3px}
        .setting-item p{color:var(--muted);font-size:14px;margin-bottom:0}
        .update-band{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:center}
        .update-intro{padding:32px;border-radius:var(--radius-lg);background:var(--coral);color:var(--white)}
        .update-intro h2{color:var(--white);font-size:30px}
        .update-intro p{color:rgba(255,255,255,.78);margin-bottom:0}
        .update-list{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px 28px}
        .update-item{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;border-bottom:1px solid var(--line)}
        .update-item:last-child{border-bottom:0}
        .update-item strong{display:block;color:var(--ink)}
        .update-item small{display:block;color:var(--muted);margin-top:3px}
        .faq-wrap{max-width:900px}
        .faq-list{overflow:hidden}
        details{border-bottom:1px solid var(--line);padding:0 24px}
        details:last-child{border-bottom:0}
        summary{list-style:none;cursor:pointer;padding:22px 0;color:var(--ink);font-weight:850;display:flex;justify-content:space-between;gap:20px}
        summary::-webkit-details-marker{display:none}
        summary:after{content:"+";color:var(--coral-dark);font-size:24px;font-weight:400;line-height:1}
        details[open] summary:after{content:"−"}
        details p{color:var(--muted);font-size:14px;padding:0 30px 22px 0;margin-bottom:0}
        .download-strip{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:34px 38px;background:var(--ink);color:var(--white);border:0}
        .download-strip h2{color:var(--white);font-size:30px;margin-bottom:8px}
        .download-strip p{color:rgba(255,255,255,.68);margin-bottom:0}
        .download-strip .btn-secondary{color:var(--white);border-color:rgba(255,255,255,.3)}
        .site-footer{background:var(--ink);color:rgba(255,255,255,.68);padding:64px 0 24px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;padding-bottom:52px}
        .site-footer .brand{color:var(--white)}
        .footer-intro{max-width:370px;font-size:14px;margin:20px 0 0;color:rgba(255,255,255,.55)}
        .footer-title{color:var(--white);font-weight:850;margin-bottom:16px}
        .footer-links{display:grid;gap:9px;font-size:14px}
        .footer-links a:hover{color:#f4a18e}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.45)}
        @media (max-width:992px){
            .nav-wrap{gap:18px}.main-nav{gap:15px}
            .main-nav a{font-size:13px}
            .guide-overview,.device-layout,.update-band{grid-template-columns:1fr}
            .step-line{grid-template-columns:1fr 1fr;gap:28px}
            .step-line:before{display:none}
            .guide-grid{grid-template-columns:1fr 1fr}
        }
        @media (max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .topbar-inner{display:block;text-align:center}
            .topbar-inner span:last-child{display:none}
            .nav-wrap{min-height:68px}
            .mobile-toggle{display:block;margin-left:auto}
            .main-nav{display:none;position:absolute;left:16px;right:16px;top:74px;margin:0;padding:12px 18px;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 0}
            .main-nav a.active:after{display:none}
            .nav-download{margin:6px 0 0!important}
            .page-hero{padding:60px 0 54px}
            .section{padding:64px 0}
            .section-head{display:block;margin-bottom:26px}
            .section-head .section-copy{margin-top:12px}
            .overview-panel,.fact-panel,.feature-card{padding:24px}
            .check-list{grid-template-columns:1fr}
            .step-line{grid-template-columns:1fr}
            .guide-grid{grid-template-columns:1fr}
            .download-strip{display:block;padding:28px}
            .download-strip .btn{margin-top:22px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
            .footer-grid>div:first-child{grid-column:1/-1}
            .footer-bottom{display:block}
            .footer-bottom span{display:block;margin-top:8px}
        }
        @media (max-width:520px){
            h1{font-size:34px}
            h2{font-size:28px}
            .page-hero p{font-size:16px}
            .update-item{display:block}
            .update-item .tag{margin-top:10px}
            .footer-grid{grid-template-columns:1fr}
            .footer-grid>div:first-child{grid-column:auto}
        }