/* roulang page: index */
:root {
            --bg: #101016;
            --bg-deep: #0b0b10;
            --panel: #181820;
            --panel-strong: #20202b;
            --panel-soft: #15151d;
            --line: #30303d;
            --text: #f4f1f5;
            --muted: #aaa5b1;
            --faint: #777481;
            --pink: #ed3d83;
            --pink-deep: #b92b65;
            --cyan: #9df2d0;
            --yellow: #f4c86b;
            --radius: 18px;
            --radius-sm: 10px;
            --shadow: 0 18px 50px rgba(0,0,0,.28);
            --container: 1240px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background:
                radial-gradient(circle at 78% 8%, rgba(237,61,131,.10), transparent 28%),
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
                var(--bg);
            background-size: auto, 32px 32px, 32px 32px, auto;
            color: var(--text);
            font-family: "Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            line-height: 1.7;
            min-width: 320px;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .22;
            background-image: radial-gradient(rgba(255,255,255,.18) .6px, transparent .8px);
            background-size: 7px 7px;
            mask-image: linear-gradient(to bottom, #000, transparent 70%);
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-size: 12px;
            letter-spacing: .14em;
            text-transform: uppercase;
            font-weight: 700;
        }
        .eyebrow:before {
            content: "";
            width: 22px;
            height: 2px;
            background: var(--pink);
        }
        .section { padding: 104px 0; position: relative; }
        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 30px;
            margin-bottom: 38px;
        }
        .section-head h2 {
            font-size: clamp(28px, 4vw, 48px);
            line-height: 1.15;
            letter-spacing: -.045em;
            margin-top: 13px;
        }
        .section-head p { color: var(--muted); max-width: 460px; font-size: 15px; }
        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(255,255,255,.08);
            background: rgba(16,16,22,.88);
            backdrop-filter: blur(16px);
        }
        .nav {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 34px;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 255px;
        }
        .brand-mark {
            width: 36px;
            height: 36px;
            position: relative;
            border: 2px solid var(--pink);
            border-radius: 50%;
            transform: rotate(-25deg);
        }
        .brand-mark:before {
            content: "";
            position: absolute;
            width: 46px;
            height: 14px;
            left: -7px;
            top: 9px;
            border: 1px solid var(--cyan);
            border-radius: 50%;
        }
        .brand strong { display: block; font-size: 17px; letter-spacing: .04em; }
        .brand small { display: block; color: var(--faint); font-size: 9px; letter-spacing: .14em; }
        .nav-links { display: flex; align-items: center; gap: 24px; flex: 1; }
        .nav-links a {
            color: var(--muted);
            font-size: 14px;
            padding: 27px 2px 24px;
            border-bottom: 2px solid transparent;
            transition: .25s ease;
            white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--text); border-color: var(--pink); }
        .nav-action, .btn-primary {
            background: var(--pink);
            color: #fff;
            border: 1px solid var(--pink);
            border-radius: 9px;
            padding: 11px 18px;
            font-weight: 700;
            font-size: 14px;
            transition: .25s ease;
            box-shadow: 0 8px 22px rgba(237,61,131,.18);
            white-space: nowrap;
        }
        .nav-action:hover, .btn-primary:hover { background: #f75a98; transform: translateY(-2px); }
        .btn-secondary {
            border: 1px solid var(--line);
            background: #17171f;
            color: var(--text);
            border-radius: 9px;
            padding: 11px 18px;
            font-weight: 700;
            font-size: 14px;
            transition: .25s ease;
        }
        .btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
        a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(157,242,208,.7); outline-offset: 3px; }
        .menu-toggle { display: none; border: 1px solid var(--line); color: var(--text); background: var(--panel); border-radius: 8px; padding: 8px 11px; }

        .hero { padding: 94px 0 38px; overflow: hidden; }
        .hero-grid {
            min-height: 555px;
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
            gap: 64px;
            align-items: center;
        }
        .hero h1 {
            font-size: clamp(34px, 5.3vw, 72px);
            line-height: 1.08;
            letter-spacing: -.065em;
            max-width: 760px;
            margin: 18px 0 24px;
        }
        .hero h1 em { color: var(--pink); font-style: normal; }
        .hero-copy { color: var(--muted); font-size: 17px; max-width: 650px; }
        .hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
        .hero-note { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
        .status {
            padding: 7px 11px;
            background: var(--panel);
            border: 1px solid var(--line);
            color: var(--muted);
            border-radius: 7px;
            font-size: 12px;
        }
        .status b { color: var(--cyan); font-weight: 600; }
        .hero-art {
            position: relative;
            min-height: 490px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .orbit {
            position: absolute;
            width: 390px;
            height: 390px;
            border: 1px solid rgba(237,61,131,.45);
            border-radius: 50%;
            transform: rotate(-24deg) skewX(-10deg);
        }
        .orbit:after {
            content: "";
            position: absolute;
            inset: 48px -22px;
            border: 1px solid rgba(157,242,208,.35);
            border-radius: 50%;
        }
        .orbit-dot {
            width: 12px;
            height: 12px;
            position: absolute;
            top: 34px;
            right: 68px;
            border-radius: 50%;
            background: var(--yellow);
            box-shadow: 0 0 20px var(--yellow);
        }
        .score-panel {
            position: relative;
            width: min(100%, 390px);
            background: #202029;
            border: 1px solid #444251;
            box-shadow: var(--shadow);
            padding: 22px;
            transform: rotate(3deg);
            z-index: 2;
        }
        .score-panel:before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 4px; background: var(--pink); }
        .panel-top { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
        .live-dot { color: var(--pink); }
        .match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 28px 0; text-align: center; }
        .team { font-weight: 700; font-size: 18px; }
        .team span { display: block; color: var(--faint); font-size: 11px; font-weight: 400; }
        .match-time { color: var(--yellow); font-family: monospace; font-size: 15px; }
        .match-state { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
        .panel-bars { display: flex; gap: 5px; margin-top: 24px; }
        .panel-bars i { height: 5px; flex: 1; background: var(--line); }
        .panel-bars i:nth-child(1), .panel-bars i:nth-child(2), .panel-bars i:nth-child(5) { background: var(--pink); }
        .info-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px 0; }
        .strip-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
        .strip-item { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 10px; }
        .strip-item strong { color: var(--text); font-size: 14px; }
        .strip-item .num { color: var(--pink); font-size: 18px; font-weight: 800; }

        .entry-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
        .entry-main, .entry-small { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); transition: .25s ease; }
        .entry-main:hover, .entry-small:hover { border-color: var(--pink); transform: translateY(-4px); box-shadow: var(--shadow); }
        .entry-main { min-height: 290px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#25212a,#181820 65%); }
        .entry-main h3 { max-width: 410px; font-size: 30px; line-height: 1.25; margin: 16px 0 10px; }
        .entry-main p, .entry-small p { color: var(--muted); font-size: 14px; }
        .entry-small-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .entry-small { padding: 24px; min-height: 136px; }
        .entry-small h3 { font-size: 19px; margin-bottom: 6px; }
        .entry-small .entry-icon { color: var(--cyan); font-size: 22px; margin-bottom: 10px; }
        .entry-link { color: var(--pink); font-size: 13px; margin-top: 18px; display: inline-block; }

        .news-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; }
        .featured-news { min-height: 360px; padding: 30px; border-radius: var(--radius); background: #28242e; border: 1px solid #49404d; display: flex; flex-direction: column; justify-content: end; position: relative; overflow: hidden; }
        .featured-news:before { content: "XK"; position: absolute; right: 20px; top: 14px; color: rgba(237,61,131,.18); font-size: 110px; font-weight: 900; letter-spacing: -.1em; }
        .featured-news:after { content: ""; position: absolute; width: 250px; height: 250px; border: 1px solid rgba(157,242,208,.25); border-radius: 50%; right: -90px; top: 52px; }
        .featured-news > * { position: relative; z-index: 1; }
        .featured-news h3 { font-size: 27px; line-height: 1.3; max-width: 470px; margin: 13px 0; }
        .featured-news p { color: var(--muted); font-size: 14px; max-width: 470px; }
        .news-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
        .news-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 18px; align-items: center; padding: 19px 0; border-bottom: 1px solid var(--line); transition: .2s ease; }
        .news-item:hover { padding-left: 8px; border-color: var(--pink); }
        .news-date { color: var(--yellow); font-family: monospace; font-size: 13px; }
        .news-title { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
        .news-excerpt { color: var(--muted); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
        .news-tag { font-size: 11px; color: var(--cyan); border: 1px solid rgba(157,242,208,.35); padding: 3px 7px; border-radius: 4px; white-space: nowrap; }

        .download {
            background: #20222b;
            border: 1px solid #3d3d4b;
            border-radius: var(--radius);
            overflow: hidden;
            position: relative;
        }
        .download-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 390px; }
        .download-copy { padding: 54px; display: flex; flex-direction: column; justify-content: center; }
        .download-copy h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.15; margin: 14px 0; }
        .download-copy p { color: var(--muted); max-width: 470px; }
        .download-actions { display: flex; gap: 12px; margin-top: 27px; flex-wrap: wrap; }
        .download-visual { position: relative; display: flex; align-items: center; justify-content: center; background: #15151c; overflow: hidden; }
        .download-visual:before { content: ""; width: 360px; height: 360px; border: 1px solid rgba(237,61,131,.36); border-radius: 50%; position: absolute; }
        .device { width: 176px; height: 318px; border: 7px solid #44434e; border-radius: 26px; background: #0d0d13; box-shadow: 17px 18px 0 rgba(237,61,131,.17); padding: 22px 13px; transform: rotate(-8deg); position: relative; z-index: 2; }
        .device:before { content: ""; width: 58px; height: 5px; border-radius: 10px; background: #41404b; position: absolute; top: 8px; left: 52px; }
        .screen-top { color: var(--pink); font-size: 10px; font-weight: 800; border-bottom: 1px solid var(--line); padding: 9px 0; }
        .screen-block { height: 54px; margin-top: 12px; background: #25232d; border-left: 3px solid var(--cyan); padding: 8px; }
        .screen-block b { display: block; font-size: 9px; }
        .screen-block span { color: var(--faint); font-size: 8px; }
        .qr-box { position: absolute; right: 40px; bottom: 42px; width: 98px; height: 98px; background: repeating-linear-gradient(45deg,#eee 0 4px,#222 4px 8px); border: 8px solid #eee; }
        .download-tip { color: var(--muted); font-size: 12px; position: absolute; right: 34px; bottom: 19px; }

        .steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .step { padding: 28px 22px; border-right: 1px solid var(--line); }
        .step:last-child { border-right: 0; }
        .step-num { color: var(--pink); font-family: monospace; font-size: 13px; }
        .step h3 { font-size: 17px; margin: 12px 0 7px; }
        .step p { color: var(--muted); font-size: 13px; }

        .faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
        details { border-bottom: 1px solid var(--line); }
        summary { list-style: none; cursor: pointer; padding: 22px 4px; font-size: 17px; font-weight: 700; display: flex; justify-content: space-between; gap: 20px; }
        summary::-webkit-details-marker { display: none; }
        summary:after { content: "+"; color: var(--pink); font-size: 24px; font-weight: 400; line-height: 1; }
        details[open] summary:after { content: "−"; }
        details p { color: var(--muted); padding: 0 40px 24px 4px; font-size: 14px; }

        .cta { padding: 35px 40px; background: var(--pink); border-radius: var(--radius); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
        .cta h2 { font-size: clamp(23px,3vw,34px); line-height: 1.2; }
        .cta p { opacity: .82; font-size: 14px; margin-top: 5px; }
        .cta .btn-secondary { background: #fff; border-color: #fff; color: #9c1d53; }
        .cta .btn-secondary:hover { background: #f6dbe6; }

        footer { border-top: 1px solid var(--line); padding: 64px 0 26px; background: var(--bg-deep); }
        .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 35px; }
        .footer-brand p { color: var(--muted); max-width: 300px; font-size: 13px; margin-top: 16px; }
        .footer-col h3 { font-size: 14px; margin-bottom: 15px; }
        .footer-col a { display: block; color: var(--faint); font-size: 13px; margin: 9px 0; transition: .2s; }
        .footer-col a:hover { color: var(--cyan); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 38px; margin-top: 38px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }

        .empty-state { border: 1px dashed var(--line); padding: 40px; text-align: center; color: var(--muted); border-radius: var(--radius); grid-column: 1 / -1; }
        .empty-state a { display: inline-block; color: var(--pink); margin-top: 12px; }

        @media (max-width: 1100px) {
            .brand { min-width: 215px; }
            .nav { gap: 18px; }
            .nav-links { gap: 15px; }
            .hero-grid { gap: 30px; }
            .download-copy { padding: 38px; }
        }
        @media (max-width: 900px) {
            .nav-links { display: none; position: absolute; left: 24px; right: 24px; top: 72px; padding: 12px 18px; background: #1a1a22; border: 1px solid var(--line); border-radius: 12px; flex-direction: column; align-items: stretch; gap: 0; box-shadow: var(--shadow); }
            .nav-links.open { display: flex; }
            .nav-links a { padding: 12px 4px; border-bottom: 1px solid var(--line); }
            .nav-links a:last-child { border-bottom: 0; }
            .menu-toggle { display: block; margin-left: auto; }
            .nav-action { display: none; }
            .hero-grid, .entry-layout, .news-layout, .download-grid { grid-template-columns: 1fr; }
            .hero { padding-top: 65px; }
            .hero-art { min-height: 390px; }
            .download-visual { min-height: 350px; }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
            .footer-grid .footer-col:last-child { display: none; }
        }
        @media (max-width: 640px) {
            .container { width: min(100% - 32px, var(--container)); }
            .section { padding: 72px 0; }
            .section-head { display: block; margin-bottom: 26px; }
            .section-head p { margin-top: 13px; }
            .hero h1 { font-size: 37px; }
            .hero-copy { font-size: 15px; }
            .hero-art { min-height: 320px; }
            .orbit { width: 270px; height: 270px; }
            .score-panel { width: 92%; }
            .strip-grid { grid-template-columns: 1fr 1fr; gap: 13px; }
            .entry-small-wrap { grid-template-columns: 1fr; }
            .entry-main { min-height: 250px; padding: 25px; }
            .news-item { grid-template-columns: 70px 1fr; gap: 10px; }
            .news-tag { grid-column: 2; width: max-content; }
            .download-copy { padding: 31px 24px; }
            .download-visual { min-height: 330px; }
            .qr-box { right: 20px; bottom: 42px; width: 78px; height: 78px; border-width: 6px; }
            .download-tip { right: 15px; bottom: 17px; font-size: 10px; }
            .steps { grid-template-columns: 1fr 1fr; }
            .step:nth-child(2) { border-right: 0; }
            .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .cta { display: block; padding: 28px 24px; }
            .cta .btn-secondary { display: inline-block; margin-top: 20px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 8px; }
        }

/* roulang page: category1 */
:root {
            --bg: #101016;
            --bg-deep: #0b0b10;
            --panel: #181820;
            --panel-strong: #20202b;
            --panel-soft: #15151d;
            --line: #30303d;
            --line-light: rgba(255,255,255,.11);
            --text: #f4f1f5;
            --muted: #aaa5b1;
            --faint: #777481;
            --pink: #ed3d83;
            --pink-deep: #b92b65;
            --cyan: #9df2d0;
            --yellow: #f4c86b;
            --green: #8de1a5;
            --radius: 18px;
            --radius-sm: 10px;
            --shadow: 0 18px 50px rgba(0,0,0,.28);
            --container: 1240px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            min-width: 320px;
            color: var(--text);
            background:
                radial-gradient(circle at 78% 8%, rgba(237,61,131,.10), transparent 28%),
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
                var(--bg);
            background-size: auto, 32px 32px, 32px 32px, auto;
            font-family: "Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            line-height: 1.7;
        }

        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .2;
            background-image: radial-gradient(rgba(255,255,255,.18) .6px, transparent .8px);
            background-size: 7px 7px;
            mask-image: linear-gradient(to bottom, #000, transparent 70%);
            z-index: -1;
        }

        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container {
            width: min(var(--container), calc(100% - 48px));
            margin: 0 auto;
        }

        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(255,255,255,.08);
            background: rgba(16,16,22,.9);
            backdrop-filter: blur(16px);
        }

        .nav {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 255px;
        }

        .brand-mark {
            width: 36px;
            height: 36px;
            position: relative;
            flex: 0 0 auto;
            border: 2px solid var(--pink);
            border-radius: 50%;
            transform: rotate(-25deg);
        }

        .brand-mark:before {
            content: "";
            position: absolute;
            width: 46px;
            height: 14px;
            left: -7px;
            top: 9px;
            border: 1px solid var(--cyan);
            border-radius: 50%;
        }

        .brand strong {
            display: block;
            font-size: 17px;
            line-height: 1.25;
            letter-spacing: .04em;
        }

        .brand small {
            display: block;
            color: var(--faint);
            font-size: 9px;
            line-height: 1.4;
            letter-spacing: .14em;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 24px;
            flex: 1;
        }

        .nav-links a {
            color: var(--muted);
            font-size: 14px;
            padding: 27px 2px 24px;
            border-bottom: 2px solid transparent;
            transition: .25s ease;
            white-space: nowrap;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text);
            border-color: var(--pink);
        }

        .nav-action,
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--pink);
            color: #fff;
            border: 1px solid var(--pink);
            border-radius: 9px;
            padding: 11px 18px;
            font-weight: 700;
            font-size: 14px;
            transition: .25s ease;
            box-shadow: 0 8px 22px rgba(237,61,131,.18);
            white-space: nowrap;
        }

        .nav-action:hover,
        .btn-primary:hover {
            color: #fff;
            background: #f75a98;
            transform: translateY(-2px);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--line);
            background: #17171f;
            color: var(--text);
            border-radius: 9px;
            padding: 11px 18px;
            font-weight: 700;
            font-size: 14px;
            transition: .25s ease;
        }

        .btn-secondary:hover {
            color: var(--cyan);
            border-color: var(--cyan);
            transform: translateY(-2px);
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(157,242,208,.72);
            outline-offset: 3px;
        }

        .menu-toggle {
            display: none;
            border: 1px solid var(--line);
            color: var(--text);
            background: var(--panel);
            border-radius: 8px;
            padding: 8px 11px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-size: 12px;
            letter-spacing: .14em;
            font-weight: 700;
        }

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

        .page-hero {
            padding: 92px 0 70px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .page-hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 390px;
            gap: 76px;
            align-items: end;
        }

        .breadcrumb {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin: 0 0 25px;
            color: var(--faint);
            font-size: 13px;
        }

        .breadcrumb a:hover { color: var(--cyan); }
        .breadcrumb .current { color: var(--muted); }

        .page-hero h1 {
            max-width: 820px;
            margin: 0 0 24px;
            font-size: clamp(38px, 6vw, 70px);
            line-height: 1.08;
            letter-spacing: -.065em;
        }

        .page-hero h1 em {
            color: var(--pink);
            font-style: normal;
        }

        .page-intro {
            max-width: 740px;
            margin: 0;
            color: var(--muted);
            font-size: 17px;
        }

        .hero-index {
            position: relative;
            padding: 28px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .hero-index:after {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            right: -65px;
            top: -65px;
            border: 1px solid rgba(157,242,208,.28);
            border-radius: 50%;
            box-shadow: 0 0 0 18px rgba(157,242,208,.04), 0 0 0 36px rgba(157,242,208,.025);
        }

        .index-label {
            color: var(--faint);
            font-size: 11px;
            letter-spacing: .13em;
            text-transform: uppercase;
        }

        .index-number {
            margin: 14px 0 4px;
            color: var(--pink);
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 58px;
            line-height: 1;
            font-weight: 800;
        }

        .hero-index p {
            position: relative;
            z-index: 1;
            margin: 12px 0 0;
            color: var(--muted);
            font-size: 14px;
        }

        .section {
            position: relative;
            padding: 96px 0;
        }

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

        .section-head h2 {
            margin: 13px 0 0;
            font-size: clamp(28px, 4vw, 48px);
            line-height: 1.15;
            letter-spacing: -.045em;
        }

        .section-head p {
            max-width: 470px;
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .feature-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
            gap: 22px;
        }

        .feature-card,
        .update-list,
        .info-panel,
        .faq-wrap,
        .reading-card {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .feature-card {
            position: relative;
            min-height: 395px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 38px;
            overflow: hidden;
            isolation: isolate;
        }

        .feature-card:before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            background:
                linear-gradient(145deg, rgba(237,61,131,.2), transparent 40%),
                linear-gradient(30deg, #28202a, #15151d 65%);
        }

        .feature-card:after {
            content: "";
            position: absolute;
            z-index: -1;
            width: 410px;
            height: 410px;
            right: -130px;
            top: -100px;
            border: 1px solid rgba(157,242,208,.22);
            border-radius: 50%;
            box-shadow:
                0 0 0 28px rgba(157,242,208,.035),
                0 0 0 58px rgba(157,242,208,.025),
                0 0 0 88px rgba(157,242,208,.018);
        }

        .feature-art-label {
            position: absolute;
            top: 28px;
            right: 30px;
            padding: 7px 10px;
            color: var(--cyan);
            border: 1px solid rgba(157,242,208,.35);
            border-radius: 5px;
            font-family: ui-monospace, monospace;
            font-size: 11px;
            letter-spacing: .08em;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            padding: 4px 9px;
            border-radius: 5px;
            color: #15151d;
            background: var(--cyan);
            font-size: 11px;
            font-weight: 800;
        }

        .tag.pink {
            color: #fff;
            background: var(--pink-deep);
        }

        .tag.yellow {
            color: #2b2110;
            background: var(--yellow);
        }

        .feature-card h3 {
            max-width: 610px;
            margin: 18px 0 12px;
            font-size: clamp(24px, 3vw, 38px);
            line-height: 1.25;
        }

        .feature-card p {
            max-width: 620px;
            margin: 0 0 22px;
            color: var(--muted);
            font-size: 15px;
        }

        .meta-line {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px;
            color: var(--faint);
            font-size: 12px;
        }

        .meta-line span + span:before {
            content: "·";
            margin-right: 14px;
            color: var(--pink);
        }

        .update-list {
            padding: 8px 24px;
        }

        .update-item {
            display: block;
            padding: 23px 0;
            border-bottom: 1px solid var(--line);
            transition: .25s ease;
        }

        .update-item:last-child { border-bottom: 0; }

        .update-item:hover {
            padding-left: 8px;
            border-color: var(--pink);
        }

        .update-item-top {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            align-items: center;
            margin-bottom: 8px;
        }

        .update-item time {
            color: var(--faint);
            font-family: ui-monospace, monospace;
            font-size: 11px;
        }

        .update-item h3 {
            margin: 0 0 7px;
            font-size: 17px;
            line-height: 1.45;
        }

        .update-item p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .reading-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 16px;
        }

        .reading-card {
            min-height: 206px;
            padding: 25px;
            transition: .25s ease;
        }

        .reading-card:hover {
            transform: translateY(-4px);
            border-color: rgba(237,61,131,.65);
        }

        .reading-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            margin-bottom: 22px;
            color: var(--pink);
            border: 1px solid rgba(237,61,131,.5);
            border-radius: 10px;
            font-size: 20px;
        }

        .reading-card:nth-child(2) .reading-icon { color: var(--yellow); border-color: rgba(244,200,107,.45); }
        .reading-card:nth-child(3) .reading-icon { color: var(--cyan); border-color: rgba(157,242,208,.45); }

        .reading-card h3 {
            margin: 0 0 9px;
            font-size: 19px;
        }

        .reading-card p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .timeline {
            position: relative;
            max-width: 980px;
            margin: 0 auto;
        }

        .timeline:before {
            content: "";
            position: absolute;
            top: 10px;
            bottom: 10px;
            left: 108px;
            width: 1px;
            background: linear-gradient(var(--pink), var(--line), transparent);
        }

        .timeline-row {
            position: relative;
            display: grid;
            grid-template-columns: 108px 1fr;
            gap: 34px;
            padding-bottom: 34px;
        }

        .timeline-row:last-child { padding-bottom: 0; }

        .timeline-date {
            padding-top: 4px;
            color: var(--cyan);
            font-family: ui-monospace, monospace;
            font-size: 12px;
        }

        .timeline-content {
            position: relative;
            padding: 23px 25px;
            background: var(--panel-soft);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: .25s ease;
        }

        .timeline-content:before {
            content: "";
            position: absolute;
            left: -40px;
            top: 27px;
            width: 11px;
            height: 11px;
            background: var(--pink);
            border: 3px solid var(--bg);
            border-radius: 50%;
            box-shadow: 0 0 0 1px var(--pink);
        }

        .timeline-content:hover {
            border-color: var(--pink);
            background: var(--panel);
        }

        .timeline-content h3 {
            margin: 0 0 9px;
            font-size: 19px;
        }

        .timeline-content p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .content-band {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 25px;
            align-items: stretch;
        }

        .info-panel {
            padding: 31px;
        }

        .info-panel.accent {
            background:
                linear-gradient(135deg, rgba(237,61,131,.15), transparent 55%),
                var(--panel-strong);
            border-color: rgba(237,61,131,.4);
        }

        .info-panel h3 {
            margin: 0 0 13px;
            font-size: 24px;
        }

        .info-panel p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .detail-list {
            display: grid;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .detail-list li {
            display: grid;
            grid-template-columns: 35px 1fr;
            gap: 15px;
            padding: 17px 0;
            border-bottom: 1px solid var(--line);
        }

        .detail-list li:last-child { border-bottom: 0; }
        .detail-list b {
            color: var(--pink);
            font-family: ui-monospace, monospace;
            font-size: 13px;
        }

        .detail-list strong {
            display: block;
            margin-bottom: 3px;
            font-size: 15px;
        }

        .detail-list span {
            color: var(--muted);
            font-size: 13px;
        }

        .faq-wrap {
            max-width: 930px;
            margin: 0 auto;
            padding: 8px 27px;
        }

        .faq-item {
            border-bottom: 1px solid var(--line);
        }

        .faq-item:last-child { border-bottom: 1px solid var(--line);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 0;
            color: var(--text);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }

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

        .faq-item summary:after {
            content: "+";
            color: var(--pink);
            font-size: 24px;
            font-weight: 400;
            line-height: 1;
            transition: transform .25s ease;
        }

        .faq-item[open] summary:after {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-width: 850px;
            padding: 0 42px 21px 0;
            color: var(--muted);
            font-size: 14px;
        }

        .cta {
            padding: 35px 42px;
            background:
                linear-gradient(110deg, rgba(237,61,131,.2), transparent 62%),
                var(--panel-strong);
            border: 1px solid rgba(237,61,131,.45);
            border-radius: var(--radius);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .cta h2 {
            margin: 0 0 8px;
            font-size: clamp(24px, 3vw, 36px);
            line-height: 1.2;
        }

        .cta p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .cta-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            flex: 0 0 auto;
        }

        footer {
            padding: 70px 0 25px;
            background: var(--bg-deep);
            border-top: 1px solid rgba(255,255,255,.08);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.7fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 52px;
        }

        .footer-brand p {
            max-width: 310px;
            margin: 21px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .footer-col {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .footer-col h3 {
            margin: 0 0 10px;
            color: var(--text);
            font-size: 14px;
        }

        .footer-col a {
            width: fit-content;
            color: var(--faint);
            font-size: 13px;
            transition: .2s ease;
        }

        .footer-col a:hover { color: var(--cyan); }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 22px;
            color: var(--faint);
            border-top: 1px solid var(--line);
            font-size: 12px;
        }

        @media (max-width: 1100px) {
            .nav { gap: 20px; }
            .brand { min-width: 220px; }
            .nav-links { gap: 15px; }
            .page-hero-grid { gap: 40px; }
            .feature-layout { grid-template-columns: 1fr; }
            .feature-card { min-height: 350px; }
        }

        @media (max-width: 900px) {
            .container { width: min(var(--container), calc(100% - 36px)); }
            .nav { min-height: 70px; }
            .brand { min-width: 0; flex: 1; }
            .nav-links {
                display: none;
                position: absolute;
                top: 70px;
                left: 18px;
                right: 18px;
                padding: 12px 18px;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                background: var(--panel-strong);
                border: 1px solid var(--line);
                border-radius: 12px;
                box-shadow: var(--shadow);
            }

            .nav-links.open { display: flex; }
            .nav-links a { padding: 13px 4px; border-bottom: 1px solid var(--line); }
            .nav-links a:last-child { border-bottom: 0; }
            .nav-action { display: none; }
            .menu-toggle { display: inline-block; }
            .page-hero { padding: 68px 0 55px; }
            .page-hero-grid { grid-template-columns: 1fr; }
            .hero-index { max-width: 390px; }
            .reading-grid { grid-template-columns: 1fr 1fr; }
            .content-band { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; }
        }

        @media (max-width: 640px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .brand strong { font-size: 15px; }
            .brand small { font-size: 8px; }
            .page-hero h1 { font-size: 42px; }
            .page-intro { font-size: 15px; }
            .section { padding: 68px 0; }
            .section-head {
                display: block;
                margin-bottom: 27px;
            }
            .section-head p { margin-top: 16px; }
            .feature-card { padding: 27px; min-height: 390px; }
            .feature-card h3 { font-size: 26px; }
            .update-list { padding: 5px 19px; }
            .reading-grid { grid-template-columns: 1fr; }
            .timeline:before { left: 8px; }
            .timeline-row {
                display: block;
                padding: 0 0 25px 32px;
            }
            .timeline-date { margin-bottom: 9px; }
            .timeline-content:before {
                left: -30px;
                top: 16px;
            }
            .timeline-content { padding: 19px; }
            .faq-wrap { padding: 5px 20px; }
            .faq-item summary { font-size: 15px; }
            .faq-answer { padding-right: 0; }
            .cta {
                display: block;
                padding: 28px 23px;
            }
            .cta-actions {
                margin-top: 22px;
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
            .cta-actions a { width: 100%; }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 30px 20px;
            }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom {
                display: block;
                line-height: 1.9;
            }
            .footer-bottom span { display: block; }
            .footer-bottom span + span { margin-top: 6px; }
        }

/* roulang page: article */
:root {
            --bg: #101016;
            --bg-deep: #0b0b10;
            --panel: #181820;
            --panel-strong: #20202b;
            --panel-soft: #15151d;
            --line: #30303d;
            --text: #f4f1f5;
            --muted: #aaa5b1;
            --faint: #777481;
            --pink: #ed3d83;
            --pink-deep: #b92b65;
            --cyan: #9df2d0;
            --yellow: #f4c86b;
            --radius: 18px;
            --radius-sm: 10px;
            --shadow: 0 18px 50px rgba(0,0,0,.28);
            --container: 1240px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            min-width: 320px;
            color: var(--text);
            background:
                radial-gradient(circle at 78% 8%, rgba(237,61,131,.10), transparent 28%),
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
                var(--bg);
            background-size: auto, 32px 32px, 32px 32px, auto;
            font-family: "Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            line-height: 1.7;
        }

        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .22;
            background-image: radial-gradient(rgba(255,255,255,.18) .6px, transparent .8px);
            background-size: 7px 7px;
            mask-image: linear-gradient(to bottom, #000, transparent 70%);
        }

        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; height: auto; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }

        .topbar {
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid rgba(255,255,255,.08);
            background: rgba(16,16,22,.88);
            backdrop-filter: blur(16px);
        }

        .nav {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 255px;
        }

        .brand-mark {
            width: 36px;
            height: 36px;
            position: relative;
            border: 2px solid var(--pink);
            border-radius: 50%;
            transform: rotate(-25deg);
            flex: 0 0 auto;
        }

        .brand-mark:before {
            content: "";
            position: absolute;
            width: 46px;
            height: 14px;
            left: -7px;
            top: 9px;
            border: 1px solid var(--cyan);
            border-radius: 50%;
        }

        .brand strong {
            display: block;
            font-size: 17px;
            letter-spacing: .04em;
            line-height: 1.25;
        }

        .brand small {
            display: block;
            color: var(--faint);
            font-size: 9px;
            letter-spacing: .14em;
            line-height: 1.25;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 24px;
            flex: 1;
        }

        .nav-links a {
            color: var(--muted);
            font-size: 14px;
            padding: 27px 2px 24px;
            border-bottom: 2px solid transparent;
            transition: .25s ease;
            white-space: nowrap;
        }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--text);
            border-color: var(--pink);
        }

        .nav-action,
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--pink);
            color: #fff;
            border: 1px solid var(--pink);
            border-radius: 9px;
            padding: 11px 18px;
            font-weight: 700;
            font-size: 14px;
            transition: .25s ease;
            box-shadow: 0 8px 22px rgba(237,61,131,.18);
            white-space: nowrap;
        }

        .nav-action:hover,
        .btn-primary:hover {
            color: #fff;
            background: #f75a98;
            transform: translateY(-2px);
        }

        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--line);
            background: #17171f;
            color: var(--text);
            border-radius: 9px;
            padding: 11px 18px;
            font-weight: 700;
            font-size: 14px;
            transition: .25s ease;
        }

        .btn-secondary:hover {
            color: var(--cyan);
            border-color: var(--cyan);
            transform: translateY(-2px);
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible {
            outline: 3px solid rgba(157,242,208,.7);
            outline-offset: 3px;
        }

        .menu-toggle {
            display: none;
            border: 1px solid var(--line);
            color: var(--text);
            background: var(--panel);
            border-radius: 8px;
            padding: 8px 11px;
        }

        .article-hero {
            padding: 82px 0 62px;
            border-bottom: 1px solid rgba(255,255,255,.08);
            position: relative;
            overflow: hidden;
        }

        .article-hero:after {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: 4%;
            top: -180px;
            border: 1px solid rgba(237,61,131,.22);
            border-radius: 50%;
            box-shadow: 0 0 0 28px rgba(157,242,208,.025), 0 0 0 58px rgba(237,61,131,.025);
            pointer-events: none;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-size: 12px;
            letter-spacing: .14em;
            font-weight: 700;
        }

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

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

        .breadcrumb a:hover { color: var(--cyan); }
        .breadcrumb .current { color: var(--muted); }

        .article-hero h1 {
            position: relative;
            z-index: 1;
            max-width: 900px;
            margin: 17px 0 22px;
            font-size: clamp(34px, 5vw, 66px);
            line-height: 1.12;
            letter-spacing: -.06em;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 22px;
            color: var(--muted);
            font-size: 14px;
        }

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

        .meta-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--pink);
            box-shadow: 0 0 0 4px rgba(237,61,131,.12);
        }

        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 820px) 260px;
            gap: 72px;
            align-items: start;
            padding: 78px 0 96px;
        }

        .article-content {
            min-width: 0;
            color: #d8d4dc;
            font-size: 17px;
            line-height: 1.95;
        }

        .article-content > *:first-child { margin-top: 0; }
        .article-content h2,
        .article-content h3,
        .article-content h4 {
            color: var(--text);
            line-height: 1.35;
            letter-spacing: -.03em;
            margin: 2.2em 0 .75em;
        }

        .article-content h2 {
            font-size: clamp(25px, 3vw, 35px);
            padding-left: 16px;
            border-left: 3px solid var(--pink);
        }

        .article-content h3 { font-size: 25px; }
        .article-content h4 { font-size: 20px; }
        .article-content p { margin: 0 0 1.25em; }
        .article-content a { color: var(--cyan); border-bottom: 1px solid rgba(157,242,208,.35); }
        .article-content a:hover { color: var(--pink); border-color: var(--pink); }

        .article-content ul,
        .article-content ol {
            margin: 1.2em 0 1.5em;
            padding-left: 1.6em;
        }

        .article-content li { padding-left: 6px; margin: .35em 0; }
        .article-content li::marker { color: var(--pink); }

        .article-content blockquote {
            margin: 2em 0;
            padding: 22px 25px;
            color: #eeeaf0;
            background: var(--panel);
            border-left: 3px solid var(--cyan);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        }

        .article-content img {
            width: 100%;
            margin: 2em 0 .6em;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            box-shadow: var(--shadow);
        }

        .article-content figure { margin: 2em 0; }
        .article-content figcaption { color: var(--faint); font-size: 13px; text-align: center; }
        .article-content hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }

        .article-content table {
            display: block;
            width: 100%;
            overflow-x: auto;
            border-collapse: collapse;
            margin: 1.8em 0;
            font-size: 15px;
        }

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

        .article-content th {
            color: var(--text);
            background: var(--panel-strong);
        }

        .article-content td { background: rgba(24,24,32,.72); }

        .article-aside {
            position: sticky;
            top: 105px;
        }

        .aside-card {
            padding: 22px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: 0 12px 35px rgba(0,0,0,.18);
        }

        .aside-card + .aside-card { margin-top: 16px; }
        .aside-card h3 {
            margin: 0 0 14px;
            font-size: 15px;
            color: var(--text);
        }

        .aside-card p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
        }

        .aside-card .aside-label {
            display: block;
            margin-bottom: 9px;
            color: var(--cyan);
            font-size: 11px;
            letter-spacing: .12em;
            font-weight: 700;
        }

        .aside-links {
            display: grid;
            gap: 9px;
        }

        .aside-links a {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 9px 0;
            color: var(--muted);
            font-size: 13px;
            border-bottom: 1px solid rgba(255,255,255,.08);
            transition: .2s ease;
        }

        .aside-links a:last-child { border-bottom: 0; }
        .aside-links a:hover { color: var(--cyan); padding-left: 4px; }
        .aside-links a span { color: var(--pink); }

        .article-empty {
            max-width: 820px;
            margin: 78px auto 96px;
            padding: 58px 30px;
            text-align: center;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius);
        }

        .empty-icon {
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            margin: 0 auto 19px;
            color: var(--pink);
            border: 1px solid var(--pink);
            border-radius: 50%;
            font-size: 25px;
        }

        .article-empty h1 {
            margin: 0 0 12px;
            font-size: 30px;
        }

        .article-empty p {
            margin: 0 0 24px;
            color: var(--muted);
        }

        .article-footer {
            padding: 28px 0 0;
            border-top: 1px solid var(--line);
        }

        .article-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 16px;
            margin-top: 28px;
        }

        .article-actions a {
            min-width: 180px;
        }

        .related-section {
            padding: 0 0 96px;
        }

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

        .section-head h2 {
            margin: 13px 0 0;
            font-size: clamp(27px, 3.4vw, 42px);
            line-height: 1.15;
            letter-spacing: -.045em;
        }

        .section-head p {
            max-width: 440px;
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .related-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            min-height: 112px;
            padding: 22px 24px;
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: .25s ease;
        }

        .related-card:hover {
            border-color: rgba(237,61,131,.7);
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }

        .related-card h3 {
            margin: 7px 0 5px;
            color: var(--text);
            font-size: 17px;
            line-height: 1.45;
        }

        .related-card time,
        .related-card .category {
            color: var(--faint);
            font-size: 12px;
        }

        .related-arrow {
            flex: 0 0 auto;
            color: var(--pink);
            font-size: 24px;
        }

        .download-strip {
            margin: 0 0 96px;
            padding: 30px 34px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            background: var(--panel-strong);
            border: 1px solid rgba(237,61,131,.45);
            border-radius: var(--radius);
            box-shadow: inset 4px 0 0 var(--pink);
        }

        .download-strip h2 {
            margin: 0 0 6px;
            font-size: 25px;
        }

        .download-strip p {
            margin: 0;
            color: var(--muted);
            font-size: 14px;
        }

        .download-strip .strip-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            flex: 0 0 auto;
        }

        footer {
            padding: 70px 0 22px;
            background: var(--bg-deep);
            border-top: 1px solid rgba(255,255,255,.08);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.8fr repeat(3, 1fr);
            gap: 42px;
        }

        .footer-brand p {
            max-width: 330px;
            margin: 18px 0 0;
            color: var(--muted);
            font-size: 14px;
        }

        .footer-col {
            display: grid;
            align-content: start;
            gap: 9px;
        }

        .footer-col h3 {
            margin: 0 0 8px;
            color: var(--text);
            font-size: 14px;
        }

        .footer-col a {
            width: fit-content;
            color: var(--muted);
            font-size: 13px;
            transition: .2s ease;
        }

        .footer-col a:hover {
            color: var(--cyan);
            transform: translateX(3px);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 56px;
            padding-top: 19px;
            color: var(--faint);
            font-size: 12px;
            border-top: 1px solid rgba(255,255,255,.08);
        }

        @media (max-width: 1100px) {
            .nav { gap: 18px; }
            .brand { min-width: 220px; }
            .nav-links { gap: 15px; }
            .article-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 38px; }
        }

        @media (max-width: 900px) {
            .menu-toggle { display: block; }
            .nav-action { margin-left: auto; }
            .nav-links {
                display: none;
                position: absolute;
                top: 78px;
                left: 24px;
                right: 24px;
                padding: 10px 18px;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                background: var(--panel-strong);
                border: 1px solid var(--line);
                border-radius: var(--radius-sm);
                box-shadow: var(--shadow);
            }

            .nav-links.open { display: flex; }
            .nav-links a { padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.08); }
            .nav-links a:last-child { border-bottom: 0; }
            .article-layout { grid-template-columns: 1fr; }
            .article-aside {
                position: static;
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
                order: -1;
            }

            .aside-card + .aside-card { margin-top: 0; }
            .footer-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: 25px; }
        }

        @media (max-width: 640px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .nav { min-height: 70px; }
            .brand { min-width: 0; gap: 9px; }
            .brand-mark { width: 31px; height: 31px; }
            .brand-mark:before { width: 39px; left: -6px; top: 8px; }
            .brand strong { font-size: 15px; }
            .brand small { font-size: 7px; }
            .nav-action { padding: 9px 12px; font-size: 12px; }
            .menu-toggle { padding: 7px 9px; }
            .nav-links { top: 70px; left: 16px; right: 16px; }
            .article-hero { padding: 53px 0 42px; }
            .article-hero h1 { font-size: 35px; }
            .article-layout { padding: 48px 0 66px; }
            .article-content { font-size: 16px; line-height: 1.88; }
            .article-aside { grid-template-columns: 1fr; }
            .related-section { padding-bottom: 66px; }
            .related-grid { grid-template-columns: 1fr; }
            .related-card { padding: 18px; }
            .download-strip {
                align-items: flex-start;
                flex-direction: column;
                margin-bottom: 66px;
                padding: 25px 22px;
            }

            .download-strip .strip-actions { width: 100%; }
            .download-strip .strip-actions a { flex: 1; }
            .section-head { display: block; }
            .section-head p { margin-top: 15px; }
            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { flex-direction: column; gap: 8px; margin-top: 38px; }
        }

        @media (max-width: 420px) {
            .nav-action { display: none; }
            .article-actions a,
            .download-strip .strip-actions a { width: 100%; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

/* roulang page: category3 */
:root {
            --bg:#101016;
            --bg-deep:#0b0b10;
            --panel:#181820;
            --panel-strong:#20202b;
            --panel-soft:#15151d;
            --line:#30303d;
            --text:#f4f1f5;
            --muted:#aaa5b1;
            --faint:#777481;
            --pink:#ed3d83;
            --pink-deep:#b92b65;
            --cyan:#9df2d0;
            --yellow:#f4c86b;
            --radius:18px;
            --radius-sm:10px;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            min-width:320px;
            background:
                radial-gradient(circle at 78% 8%,rgba(237,61,131,.1),transparent 28%),
                linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
                var(--bg);
            background-size:auto,32px 32px,32px 32px,auto;
            color:var(--text);
            font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            line-height:1.7;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            z-index:-1;
            pointer-events:none;
            opacity:.2;
            background-image:radial-gradient(rgba(255,255,255,.18) .6px,transparent .8px);
            background-size:7px 7px;
            mask-image:linear-gradient(to bottom,#000,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{
            position:sticky;
            top:0;
            z-index:20;
            border-bottom:1px solid rgba(255,255,255,.08);
            background:rgba(16,16,22,.9);
            backdrop-filter:blur(16px);
        }
        .nav{min-height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;min-width:255px}
        .brand-mark{
            width:36px;height:36px;position:relative;border:2px solid var(--pink);
            border-radius:50%;transform:rotate(-25deg);flex:none
        }
        .brand-mark:before{
            content:"";position:absolute;width:46px;height:14px;left:-7px;top:9px;
            border:1px solid var(--cyan);border-radius:50%
        }
        .brand strong{display:block;font-size:17px;letter-spacing:.04em}
        .brand small{display:block;color:var(--faint);font-size:9px;letter-spacing:.14em}
        .nav-links{display:flex;align-items:center;gap:24px;flex:1}
        .nav-links a{
            color:var(--muted);font-size:14px;padding:27px 2px 24px;
            border-bottom:2px solid transparent;transition:.25s ease;white-space:nowrap
        }
        .nav-links a:hover,.nav-links a.active{color:var(--text);border-color:var(--pink)}
        .nav-action,.btn-primary{
            display:inline-flex;align-items:center;justify-content:center;
            background:var(--pink);color:#fff;border:1px solid var(--pink);
            border-radius:9px;padding:11px 18px;font-weight:700;font-size:14px;
            transition:.25s ease;box-shadow:0 8px 22px rgba(237,61,131,.18);
            white-space:nowrap
        }
        .nav-action:hover,.btn-primary:hover{background:#f75a98;transform:translateY(-2px);color:#fff}
        .btn-secondary{
            display:inline-flex;align-items:center;justify-content:center;
            border:1px solid var(--line);background:#17171f;color:var(--text);
            border-radius:9px;padding:11px 18px;font-weight:700;font-size:14px;
            transition:.25s ease
        }
        .btn-secondary:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
        a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(157,242,208,.7);outline-offset:3px}
        .menu-toggle{display:none;border:1px solid var(--line);color:var(--text);background:var(--panel);border-radius:8px;padding:8px 11px}
        .eyebrow{
            display:inline-flex;align-items:center;gap:8px;color:var(--cyan);
            font-size:12px;letter-spacing:.14em;font-weight:700
        }
        .eyebrow:before{content:"";width:22px;height:2px;background:var(--pink)}
        .hero{padding:88px 0 72px;border-bottom:1px solid rgba(255,255,255,.06)}
        .hero-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
        .hero h1{
            margin:18px 0 22px;max-width:720px;font-size:clamp(38px,5vw,68px);
            line-height:1.1;letter-spacing:-.06em
        }
        .hero h1 em{font-style:normal;color:var(--pink)}
        .hero-copy{max-width:650px;color:var(--muted);font-size:17px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
        .hero-note{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
        .badge,.status{
            display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
            border-radius:999px;padding:5px 10px;color:var(--muted);font-size:12px
        }
        .badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)}
        .hero-visual{min-height:370px;position:relative;display:flex;align-items:center;justify-content:center}
        .orbit{
            position:absolute;width:370px;height:250px;border:1px solid rgba(157,242,208,.35);
            border-radius:50%;transform:rotate(-24deg)
        }
        .orbit:after{
            content:"";position:absolute;width:9px;height:9px;background:var(--pink);
            border-radius:50%;top:18px;right:45px;box-shadow:0 0 20px var(--pink)
        }
        .guide-board{
            width:min(100%,430px);position:relative;background:var(--panel);
            border:1px solid var(--line);border-radius:22px;padding:25px;
            box-shadow:var(--shadow);transform:rotate(2deg)
        }
        .board-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:17px}
        .board-title{font-weight:800;font-size:19px}
        .board-code{font:12px monospace;color:var(--cyan);letter-spacing:.12em}
        .board-list{padding-top:16px;display:grid;gap:10px}
        .board-item{display:flex;align-items:center;gap:13px;padding:13px;background:var(--panel-soft);border-left:3px solid var(--pink);border-radius:8px}
        .board-item:nth-child(2){border-left-color:var(--yellow)}
        .board-item:nth-child(3){border-left-color:var(--cyan)}
        .board-number{font:700 16px monospace;color:var(--faint)}
        .board-item strong{display:block;font-size:14px}
        .board-item small{display:block;color:var(--muted);font-size:12px}
        .section{padding:96px 0;position:relative}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
        .section-head h2{font-size:clamp(28px,4vw,46px);line-height:1.15;letter-spacing:-.045em;margin:13px 0 0}
        .section-head p{color:var(--muted);max-width:470px;font-size:15px;margin:0}
        .intro-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px}
        .intro-panel,.number-card,.access-panel,.faq-wrap,.cta{
            background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
            box-shadow:var(--shadow)
        }
        .intro-panel{padding:34px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
        .intro-panel h3{font-size:25px;margin:0 0 12px}
        .intro-panel p{color:var(--muted);margin:0}
        .mini-line{height:1px;background:linear-gradient(90deg,var(--pink),transparent);margin-top:25px}
        .number-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
        .number-card{padding:24px;position:relative;overflow:hidden}
        .number-card:after{content:"";position:absolute;right:-28px;bottom:-35px;width:100px;height:100px;border:1px solid rgba(237,61,131,.28);border-radius:50%}
        .number{font:700 34px monospace;color:var(--pink);line-height:1}
        .number-card h3{font-size:17px;margin:17px 0 6px}
        .number-card p{font-size:13px;color:var(--muted);margin:0}
        .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
        .step{background:var(--panel-soft);padding:30px 25px;min-height:210px}
        .step:nth-child(even){background:var(--panel)}
        .step-index{color:var(--yellow);font:700 13px monospace;letter-spacing:.1em}
        .step h3{font-size:19px;margin:25px 0 10px}
        .step p{color:var(--muted);font-size:14px;margin:0}
        .feature-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
        .feature-copy{padding:12px 0}
        .feature-copy h2{font-size:clamp(28px,4vw,45px);line-height:1.15;letter-spacing:-.04em;margin:15px 0}
        .feature-copy p{color:var(--muted);max-width:540px}
        .check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:15px}
        .check-list li{display:flex;gap:13px;color:var(--text);font-size:15px}
        .check-list li:before{content:"✓";display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:rgba(157,242,208,.12);color:var(--cyan);font-weight:800}
        .access-panel{padding:30px;display:grid;gap:16px;background:linear-gradient(135deg,var(--panel-strong),var(--panel))}
        .access-head{display:flex;justify-content:space-between;gap:20px;align-items:start}
        .access-head h3{font-size:22px;margin:0}
        .access-head span{color:var(--cyan);font:12px monospace}
        .access-row{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;padding:18px 0;border-top:1px solid var(--line)}
        .access-icon{width:42px;height:42px;border-radius:10px;background:var(--pink);display:grid;place-items:center;font-weight:800;color:#fff}
        .access-row h4{font-size:16px;margin:0 0 4px}
        .access-row p{color:var(--muted);font-size:13px;margin:0}
        .faq-wrap{max-width:900px;margin:0 auto;overflow:hidden}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-item:last-child{border-bottom:0}
        .faq-item summary{list-style:none;cursor:pointer;padding:22px 25px;font-weight:700;display:flex;justify-content:space-between;gap:20px}
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:after{content:"+";color:var(--pink);font-size:22px;line-height:1}
        .faq-item[open] summary:after{content:"−"}
        .faq-answer{padding:0 25px 23px;color:var(--muted);font-size:14px;max-width:780px}
        .cta{padding:38px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--pink-deep);border-color:rgba(255,255,255,.18)}
        .cta h2{font-size:clamp(24px,3vw,36px);line-height:1.2;margin:0 0 8px}
        .cta p{margin:0;color:#f9dce8;font-size:14px}
        .cta .btn-primary{background:#fff;color:var(--pink-deep);border-color:#fff;box-shadow:none}
        .cta .btn-primary:hover{background:var(--cyan);border-color:var(--cyan);color:#10201b}
        footer{padding:68px 0 28px;background:var(--bg-deep);border-top:1px solid var(--line)}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
        .footer-brand p{max-width:300px;color:var(--muted);font-size:13px;margin-top:20px}
        .footer-col{display:grid;align-content:start;gap:10px}
        .footer-col h3{font-size:14px;margin:5px 0 9px}
        .footer-col a{color:var(--muted);font-size:13px;transition:.2s}
        .footer-col a:hover{color:var(--cyan);padding-left:3px}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:48px;padding-top:20px;color:var(--faint);font-size:12px}
        .crumbs{padding:25px 0 0;color:var(--faint);font-size:13px}
        .crumbs a:hover{color:var(--cyan)}
        @media(max-width:1024px){
            .nav{gap:18px}.brand{min-width:220px}.nav-links{gap:15px}
            .nav-links a{font-size:13px}
            .hero-layout{gap:38px}.steps{grid-template-columns:repeat(2,1fr)}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav{min-height:68px;justify-content:space-between}
            .nav-links{
                display:none;position:absolute;top:68px;left:0;right:0;padding:12px 16px;
                background:var(--bg-deep);border-bottom:1px solid var(--line);flex-direction:column;
                align-items:stretch;gap:0
            }
            .nav-links.open{display:flex}
            .nav-links a{padding:13px 9px;border-bottom:1px solid rgba(255,255,255,.06)}
            .nav-action{display:none}.menu-toggle{display:block}
            .hero{padding:62px 0 48px}.hero-layout,.intro-grid,.feature-layout{grid-template-columns:1fr}
            .hero-visual{min-height:310px;order:-1}.orbit{width:300px;height:205px}
            .hero h1{font-size:clamp(36px,11vw,58px)}
            .section{padding:68px 0}.section-head{display:block}.section-head p{margin-top:15px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .footer-brand{grid-column:1/-1}.cta{display:block;padding:30px}.cta .btn-primary{margin-top:22px}
        }
        @media(max-width:520px){
            .brand{min-width:0}.brand strong{font-size:15px}.brand small{font-size:8px}
            .brand-mark{width:31px;height:31px}.brand-mark:before{width:39px;left:-6px;top:8px}
            .hero-copy{font-size:15px}.hero-actions>*{width:100%}
            .number-grid,.steps{grid-template-columns:1fr}
            .intro-panel,.access-panel{padding:23px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
            .footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
        }

/* roulang page: category4 */
:root{
            --bg:#101016;
            --bg-deep:#0b0b10;
            --panel:#181820;
            --panel-strong:#20202b;
            --panel-soft:#15151d;
            --line:#30303d;
            --text:#f4f1f5;
            --muted:#aaa5b1;
            --faint:#777481;
            --pink:#ed3d83;
            --pink-deep:#b92b65;
            --cyan:#9df2d0;
            --yellow:#f4c86b;
            --radius:18px;
            --radius-sm:10px;
            --shadow:0 18px 50px rgba(0,0,0,.28);
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            min-width:320px;
            color:var(--text);
            background:
                radial-gradient(circle at 76% 10%,rgba(237,61,131,.11),transparent 26%),
                linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
                var(--bg);
            background-size:auto,32px 32px,32px 32px,auto;
            font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            line-height:1.7;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            opacity:.2;
            background-image:radial-gradient(rgba(255,255,255,.18) .6px,transparent .8px);
            background-size:7px 7px;
            mask-image:linear-gradient(to bottom,#000,transparent 70%);
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .topbar{
            position:sticky;
            top:0;
            z-index:20;
            border-bottom:1px solid rgba(255,255,255,.08);
            background:rgba(16,16,22,.9);
            backdrop-filter:blur(16px);
        }
        .nav{min-height:78px;display:flex;align-items:center;gap:34px}
        .brand{display:flex;align-items:center;gap:12px;min-width:255px}
        .brand-mark{
            width:36px;height:36px;position:relative;border:2px solid var(--pink);
            border-radius:50%;transform:rotate(-25deg);flex:none
        }
        .brand-mark:before{
            content:"";position:absolute;width:46px;height:14px;left:-7px;top:9px;
            border:1px solid var(--cyan);border-radius:50%
        }
        .brand strong{display:block;font-size:17px;letter-spacing:.04em}
        .brand small{display:block;color:var(--faint);font-size:9px;letter-spacing:.14em}
        .nav-links{display:flex;align-items:center;gap:24px;flex:1}
        .nav-links a{
            color:var(--muted);font-size:14px;padding:27px 2px 24px;
            border-bottom:2px solid transparent;transition:.25s ease;white-space:nowrap
        }
        .nav-links a:hover,.nav-links a.active{color:var(--text);border-color:var(--pink)}
        .nav-action,.btn-primary{
            background:var(--pink);color:#fff;border:1px solid var(--pink);
            border-radius:9px;padding:11px 18px;font-weight:700;font-size:14px;
            transition:.25s ease;box-shadow:0 8px 22px rgba(237,61,131,.18);white-space:nowrap
        }
        .nav-action:hover,.btn-primary:hover{background:#f75a98;transform:translateY(-2px);color:#fff}
        .btn-secondary{
            border:1px solid var(--line);background:#17171f;color:var(--text);
            border-radius:9px;padding:11px 18px;font-weight:700;font-size:14px;transition:.25s ease
        }
        .btn-secondary:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
        a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(157,242,208,.7);outline-offset:3px}
        .menu-toggle{display:none;border:1px solid var(--line);color:var(--text);background:var(--panel);border-radius:8px;padding:8px 11px}
        .eyebrow{
            display:inline-flex;align-items:center;gap:8px;color:var(--cyan);
            font-size:12px;letter-spacing:.14em;font-weight:700
        }
        .eyebrow:before{content:"";width:22px;height:2px;background:var(--pink)}
        .hero{padding:70px 0 62px;border-bottom:1px solid rgba(255,255,255,.06)}
        .breadcrumb{display:flex;gap:9px;color:var(--faint);font-size:13px;margin-bottom:38px}
        .breadcrumb a:hover{color:var(--cyan)}
        .breadcrumb span:last-child{color:var(--muted)}
        .download-hero{
            display:grid;
            grid-template-columns:minmax(0,1fr) minmax(390px,.82fr);
            gap:74px;
            align-items:center;
        }
        .hero h1{
            margin:17px 0 20px;
            max-width:720px;
            font-size:clamp(38px,5.3vw,70px);
            line-height:1.08;
            letter-spacing:-.065em
        }
        .hero h1 em{font-style:normal;color:var(--pink)}
        .hero-copy{max-width:650px;color:var(--muted);font-size:17px}
        .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
        .hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
        .badge{
            display:inline-flex;align-items:center;gap:7px;
            padding:6px 10px;border:1px solid var(--line);border-radius:7px;
            color:var(--muted);font-size:12px;background:rgba(255,255,255,.025)
        }
        .badge i{width:6px;height:6px;background:var(--cyan);border-radius:50%;display:inline-block}
        .device-stage{
            min-height:440px;position:relative;display:flex;align-items:center;justify-content:center
        }
        .device-stage:before{
            content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(237,61,131,.3);
            border-radius:50%;box-shadow:0 0 0 28px rgba(237,61,131,.025),0 0 0 56px rgba(157,242,208,.025)
        }
        .phone{
            width:235px;height:420px;padding:10px;border:7px solid #292933;border-radius:30px;
            background:#09090d;box-shadow:var(--shadow),0 0 0 1px #4a4652;transform:rotate(6deg);position:relative;z-index:2
        }
        .phone:before{content:"";display:block;width:74px;height:14px;margin:0 auto 12px;border-radius:0 0 10px 10px;background:#292933}
        .screen{height:360px;overflow:hidden;border-radius:18px;background:#171721;padding:15px}
        .screen-top{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:20px}
        .screen-title{font-weight:800;font-size:22px;line-height:1.2;margin-bottom:15px}
        .screen-highlight{height:92px;border-radius:12px;background:linear-gradient(135deg,#72234d,#26213c);padding:14px;margin-bottom:13px}
        .screen-highlight small{color:var(--cyan);font-size:9px}
        .screen-highlight strong{display:block;font-size:15px;margin-top:8px}
        .screen-line{height:48px;border-bottom:1px solid #302e39;display:flex;align-items:center;justify-content:space-between;font-size:11px}
        .screen-line span{color:var(--muted)}
        .scan-card{
            position:absolute;right:4px;bottom:27px;width:188px;padding:17px;background:var(--panel-strong);
            border:1px solid var(--line);border-radius:var(--radius-sm);z-index:3;box-shadow:var(--shadow)
        }
        .fake-qr{
            width:90px;height:90px;margin:8px auto 12px;
            background:
                linear-gradient(90deg,#fff 10%,transparent 10% 20%,#fff 20% 30%,transparent 30% 40%,#fff 40% 55%,transparent 55% 66%,#fff 66% 78%,transparent 78%),
                linear-gradient(#fff 10%,transparent 10% 22%,#fff 22% 35%,transparent 35% 48%,#fff 48% 60%,transparent 60% 71%,#fff 71% 85%,transparent 85%);
            border:7px solid #fff
        }
        .scan-card h3{font-size:14px;margin:0;text-align:center}
        .scan-card p{font-size:11px;color:var(--muted);text-align:center;margin:4px 0 0}
        .section{padding:92px 0;position:relative}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:34px}
        .section-head h2{font-size:clamp(28px,4vw,46px);line-height:1.15;letter-spacing:-.045em;margin:12px 0 0}
        .section-head p{color:var(--muted);max-width:480px;font-size:15px;margin:0}
        .path-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}
        .path-main,.path-side,.step-card,.faq-list,.help-panel{
            background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.16)
        }
        .path-main{padding:30px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between}
        .path-main h3{font-size:28px;margin:0 0 10px}
        .path-main p,.path-side p,.step-card p,.help-panel p{color:var(--muted);margin:0}
        .path-main .path-foot{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:26px}
        .path-side{padding:26px;display:flex;flex-direction:column;justify-content:space-between}
        .path-side h3{font-size:20px;margin:0 0 9px}
        .mini-icon{width:42px;height:42px;border:1px solid var(--pink);color:var(--pink);display:grid;place-items:center;border-radius:11px;font-size:20px;margin-bottom:25px}
        .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
        .step-card{padding:25px;min-height:190px;position:relative;overflow:hidden}
        .step-card:after{content:"";position:absolute;right:-22px;bottom:-28px;width:100px;height:100px;border:1px solid rgba(157,242,208,.2);border-radius:50%}
        .step-num{font-family:monospace;color:var(--pink);font-size:13px;letter-spacing:.12em}
        .step-card h3{font-size:20px;margin:20px 0 8px}
        .notice-strip{padding:18px 22px;background:#211c28;border-left:3px solid var(--yellow);color:var(--muted);font-size:14px;margin-top:22px}
        .download-panel{
            display:grid;grid-template-columns:.8fr 1.2fr;gap:25px;align-items:stretch
        }
        .download-copy{padding:34px 0}
        .download-copy h2{font-size:clamp(30px,4vw,48px);line-height:1.15;margin:14px 0 18px}
        .download-copy p{color:var(--muted);max-width:480px}
        .download-box{padding:30px;background:var(--panel-strong);border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:145px 1fr;gap:28px;align-items:center}
        .qr-large{width:138px;height:138px;background-color:#fff;border:10px solid #fff;background-image:linear-gradient(45deg,#13131a 25%,transparent 25%,transparent 75%,#13131a 75%),linear-gradient(45deg,#13131a 25%,transparent 25%,transparent 75%,#13131a 75%);background-position:0 0,14px 14px;background-size:28px 28px}
        .download-box h3{margin:0 0 8px;font-size:22px}
        .download-box p{color:var(--muted);font-size:14px;margin:0 0 18px}
        .download-actions{display:flex;gap:10px;flex-wrap:wrap}
        .faq-list{overflow:hidden}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-item:last-child{border-bottom:0}
        .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 25px;background:transparent;color:var(--text);border:0;text-align:left;font-weight:700}
        .faq-question span:last-child{color:var(--pink);font-size:22px;transition:.25s}
        .faq-answer{display:none;color:var(--muted);padding:0 25px 22px;max-width:850px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
        .cta{
            padding:34px 38px;background:var(--pink);border-radius:var(--radius);
            display:flex;align-items:center;justify-content:space-between;gap:25px;color:#fff
        }
        .cta h2{font-size:clamp(25px,3vw,38px);margin:0 0 5px;line-height:1.2}
        .cta p{margin:0;color:rgba(255,255,255,.78)}
        .cta .btn-secondary{background:#fff;border-color:#fff;color:#29131f}
        .cta .btn-secondary:hover{color:var(--pink-deep);border-color:#fff}
        footer{padding:65px 0 24px;background:var(--bg-deep);border-top:1px solid rgba(255,255,255,.07)}
        .footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:38px}
        .footer-brand p{max-width:330px;color:var(--muted);font-size:14px;margin-top:20px}
        .footer-col{display:flex;flex-direction:column;gap:9px}
        .footer-col h3{font-size:14px;margin:3px 0 10px;color:var(--text)}
        .footer-col a{font-size:13px;color:var(--faint);transition:.2s}
        .footer-col a:hover{color:var(--cyan)}
        .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:55px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:12px}
        @media(max-width:1024px){
            .nav{gap:18px}.brand{min-width:220px}.nav-links{gap:14px}
            .download-hero{gap:35px}.path-grid,.download-panel{grid-template-columns:1fr}
            .download-copy{padding:0}
        }
        @media(max-width:768px){
            .container{width:min(var(--container),calc(100% - 32px))}
            .nav{min-height:68px;justify-content:space-between}.brand{min-width:0}
            .brand small{font-size:8px}.nav-action{padding:9px 12px;font-size:12px}
            .menu-toggle{display:block}.nav-links{
                display:none;position:absolute;left:16px;right:16px;top:72px;flex-direction:column;
                align-items:stretch;gap:0;padding:9px;background:var(--panel-strong);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)
            }
            .nav-links.show{display:flex}.nav-links a{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
            .hero{padding:42px 0 45px}.download-hero{grid-template-columns:1fr}
            .hero h1{font-size:clamp(36px,11vw,58px)}.hero-copy{font-size:15px}
            .device-stage{min-height:390px;margin-top:15px}.section{padding:65px 0}
            .section-head{display:block}.section-head p{margin-top:14px}
            .steps{grid-template-columns:1fr}.path-main .path-foot{display:block}.path-main .btn-primary{display:inline-block;margin-top:20px}
            .download-box{grid-template-columns:1fr;text-align:center;justify-items:center}.download-box p{max-width:340px}
            .download-actions{justify-content:center}.cta{display:block;padding:28px 24px}.cta .btn-secondary{display:inline-block;margin-top:20px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
        }
        @media(max-width:520px){
            .brand strong{font-size:15px}.brand-mark{width:31px;height:31px}.brand-mark:before{width:39px;left:-6px;top:8px}
            .nav-action{display:none}.hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%;text-align:center}
            .device-stage{transform:scale(.9);margin-left:-12px;margin-right:-12px}
            .scan-card{right:0}.path-main,.path-side,.step-card,.download-box{padding:22px}
            .footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
        }

/* roulang page: category2 */
:root {
            --bg: #101016;
            --bg-deep: #0b0b10;
            --panel: #181820;
            --panel-strong: #20202b;
            --panel-soft: #15151d;
            --line: #30303d;
            --line-bright: #47475a;
            --text: #f4f1f5;
            --muted: #aaa5b1;
            --faint: #777481;
            --pink: #ed3d83;
            --pink-deep: #b92b65;
            --cyan: #9df2d0;
            --yellow: #f4c86b;
            --blue: #92b8ff;
            --radius: 18px;
            --radius-sm: 10px;
            --shadow: 0 18px 50px rgba(0,0,0,.28);
            --container: 1240px;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            min-width: 320px;
            background:
                radial-gradient(circle at 82% 4%, rgba(237,61,131,.12), transparent 27%),
                radial-gradient(circle at 12% 43%, rgba(157,242,208,.055), transparent 21%),
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
                var(--bg);
            background-size: auto, auto, 32px 32px, 32px 32px, auto;
            color: var(--text);
            font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
            line-height: 1.7;
        }
        body:before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .2;
            background-image: radial-gradient(rgba(255,255,255,.18) .6px, transparent .8px);
            background-size: 7px 7px;
            mask-image: linear-gradient(to bottom, #000, transparent 72%);
            z-index: -1;
        }
        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button, input { font: inherit; }
        button { cursor: pointer; }
        h1, h2, h3, p { margin-top: 0; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .section { position: relative; padding: 92px 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--cyan);
            font-size: 12px;
            letter-spacing: .14em;
            font-weight: 700;
        }
        .eyebrow:before {
            content: "";
            width: 22px;
            height: 2px;
            background: var(--pink);
        }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 36px;
        }
        .section-head h2 {
            margin: 12px 0 0;
            max-width: 760px;
            font-size: clamp(28px, 3.7vw, 46px);
            line-height: 1.16;
            letter-spacing: -.045em;
        }
        .section-head p {
            margin: 0;
            max-width: 420px;
            color: var(--muted);
            font-size: 15px;
        }
        .topbar {
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid rgba(255,255,255,.08);
            background: rgba(16,16,22,.9);
            backdrop-filter: blur(16px);
        }
        .nav {
            min-height: 78px;
            display: flex;
            align-items: center;
            gap: 34px;
        }
        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 255px;
        }
        .brand-mark {
            width: 36px;
            height: 36px;
            position: relative;
            flex: 0 0 36px;
            border: 2px solid var(--pink);
            border-radius: 50%;
            transform: rotate(-25deg);
        }
        .brand-mark:before {
            content: "";
            position: absolute;
            width: 46px;
            height: 14px;
            left: -7px;
            top: 9px;
            border: 1px solid var(--cyan);
            border-radius: 50%;
        }
        .brand strong { display: block; font-size: 17px; letter-spacing: .04em; }
        .brand small { display: block; color: var(--faint); font-size: 9px; letter-spacing: .14em; }
        .nav-links { display: flex; align-items: center; gap: 24px; flex: 1; }
        .nav-links a {
            padding: 27px 2px 24px;
            border-bottom: 2px solid transparent;
            color: var(--muted);
            white-space: nowrap;
            font-size: 14px;
            transition: .25s ease;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--text); border-color: var(--pink); }
        .nav-action, .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid var(--pink);
            border-radius: 9px;
            padding: 11px 18px;
            background: var(--pink);
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            box-shadow: 0 8px 22px rgba(237,61,131,.18);
            transition: .25s ease;
        }
        .nav-action:hover, .btn-primary:hover {
            background: #f75a98;
            color: #fff;
            transform: translateY(-2px);
        }
        .btn-secondary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 1px solid var(--line);
            border-radius: 9px;
            padding: 11px 18px;
            background: #17171f;
            color: var(--text);
            font-size: 14px;
            font-weight: 700;
            transition: .25s ease;
        }
        .btn-secondary:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
        a:focus-visible, button:focus-visible, input:focus-visible {
            outline: 3px solid rgba(157,242,208,.72);
            outline-offset: 3px;
        }
        .menu-toggle {
            display: none;
            border: 1px solid var(--line);
            border-radius: 8px;
            padding: 8px 11px;
            background: var(--panel);
            color: var(--text);
        }

        .page-hero {
            position: relative;
            overflow: hidden;
            padding: 70px 0 64px;
        }
        .page-hero:after {
            content: "";
            position: absolute;
            width: 520px;
            height: 520px;
            right: -190px;
            top: -270px;
            border: 1px solid rgba(237,61,131,.26);
            border-radius: 50%;
            box-shadow: 0 0 0 42px rgba(237,61,131,.035), 0 0 0 96px rgba(157,242,208,.02);
            pointer-events: none;
        }
        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 30px;
            color: var(--faint);
            font-size: 13px;
        }
        .breadcrumb a:hover { color: var(--cyan); }
        .breadcrumb b { color: var(--line-bright); font-weight: 400; }
        .breadcrumb span { color: var(--muted); }
        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
            align-items: end;
            gap: 64px;
        }
        .page-hero h1 {
            max-width: 760px;
            margin: 16px 0 20px;
            font-size: clamp(38px, 5.2vw, 68px);
            line-height: 1.08;
            letter-spacing: -.065em;
        }
        .page-hero h1 em { color: var(--pink); font-style: normal; }
        .hero-copy {
            max-width: 660px;
            margin-bottom: 0;
            color: var(--muted);
            font-size: 17px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .status-board {
            position: relative;
            padding: 26px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: linear-gradient(145deg, #1e1e29, #15151d);
            box-shadow: var(--shadow);
        }
        .status-board:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--pink), var(--yellow), transparent 78%);
        }
        .board-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 20px;
            color: var(--muted);
            font-size: 12px;
            letter-spacing: .08em;
        }
        .pulse {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: var(--cyan);
            font-weight: 700;
        }
        .pulse:before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 0 5px rgba(157,242,208,.1);
        }
        .board-list { display: grid; gap: 0; }
        .board-item {
            display: grid;
            grid-template-columns: 76px 1fr auto;
            align-items: center;
            gap: 14px;
            padding: 14px 0;
            border-top: 1px solid rgba(255,255,255,.08);
        }
        .board-time { color: var(--yellow); font-family: monospace; font-size: 12px; }
        .board-item strong { display: block; font-size: 14px; }
        .board-item small { color: var(--faint); font-size: 12px; }
        .badge {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            border: 1px solid currentColor;
            border-radius: 99px;
            padding: 3px 8px;
            font-size: 11px;
            line-height: 1.3;
            font-weight: 700;
            white-space: nowrap;
        }
        .badge-live { color: var(--cyan); background: rgba(157,242,208,.07); }
        .badge-next { color: var(--yellow); background: rgba(244,200,107,.07); }
        .badge-archive { color: #c5bdd1; background: rgba(197,189,209,.06); }

        .signal-strip {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: rgba(11,11,16,.56);
        }
        .signal-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        .signal-item {
            display: flex;
            align-items: center;
            gap: 13px;
            min-height: 84px;
            padding: 18px 24px;
            border-right: 1px solid var(--line);
        }
        .signal-item:first-child { border-left: 1px solid var(--line); }
        .signal-index {
            color: var(--pink);
            font-family: monospace;
            font-size: 13px;
            font-weight: 700;
        }
        .signal-item strong { display: block; font-size: 14px; }
        .signal-item span:last-child { display: block; color: var(--faint); font-size: 12px; }

        .overview-grid {
            display: grid;
            grid-template-columns: 1.12fr .88fr;
            gap: 24px;
        }
        .feature-panel, .guide-panel, .timeline-card, .faq-wrap {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--panel);
            box-shadow: var(--shadow);
        }
        .feature-panel {
            min-height: 390px;
            padding: 32px;
            background:
                linear-gradient(135deg, rgba(237,61,131,.09), transparent 42%),
                var(--panel);
        }
        .feature-panel h3, .guide-panel h3 { margin: 0 0 10px; font-size: 25px; letter-spacing: -.03em; }
        .feature-panel > p, .guide-panel > p { color: var(--muted); font-size: 15px; }
        .event-track { margin-top: 28px; }
        .track-row {
            display: grid;
            grid-template-columns: 116px 22px 1fr auto;
            align-items: center;
            gap: 14px;
            padding: 16px 0;
            border-top: 1px solid rgba(255,255,255,.08);
        }
        .track-date { color: var(--muted); font-size: 13px; }
        .track-node {
            position: relative;
            width: 12px;
            height: 12px;
            border: 2px solid var(--pink);
            border-radius: 50%;
        }
        .track-node:after {
            content: "";
            position: absolute;
            top: 12px;
            left: 3px;
            width: 2px;
            height: 32px;
            background: var(--line);
        }
        .track-row:last-child .track-node:after { display: none; }
        .track-copy strong { display: block; font-size: 15px; }
        .track-copy span { color: var(--faint); font-size: 13px; }
        .guide-panel { padding: 32px; }
        .guide-list { margin: 25px 0 0; padding: 0; list-style: none; }
        .guide-list li {
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 14px;
            padding: 17px 0;
            border-top: 1px solid rgba(255,255,255,.08);
        }
        .guide-no {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: rgba(237,61,131,.12);
            color: var(--pink);
            font-size: 12px;
            font-weight: 800;
        }
        .guide-list strong { display: block; margin-bottom: 3px; font-size: 14px; }
        .guide-list span { color: var(--muted); font-size: 13px; }

        .update-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 330px;
            align-items: start;
            gap: 24px;
        }
        .timeline-card { overflow: hidden; }
        .timeline-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 21px 25px;
            border-bottom: 1px solid var(--line);
            background: var(--panel-strong);
        }
        .timeline-head h3 { margin: 0; font-size: 18px; }
        .timeline-head span { color: var(--faint); font-size: 12px; }
        .event-entry {
            display: grid;
            grid-template-columns: 104px 1fr auto;
            gap: 22px;
            align-items: start;
            padding: 25px;
            border-bottom: 1px solid rgba(255,255,255,.08);
            transition: background .25s ease;
        }
        .event-entry:last-child { border-bottom: 0; }
        .event-entry:hover { background: rgba(255,255,255,.025); }
        .entry-date {
            padding-right: 18px;
            border-right: 1px solid var(--line);
            color: var(--yellow);
            font-family: monospace;
            font-size: 12px;
            line-height: 1.8;
        }
        .entry-main h3 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.02em; }
        .entry-main p { margin: 0; color: var(--muted); font-size: 14px; }
        .entry-link {
            align-self: center;
            color: var(--cyan);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }
        .entry-link:hover { color: var(--pink); }
        .side-info {
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--panel-soft);
        }
        .side-info h3 { margin: 0 0 17px; font-size: 20px; }
        .side-info p { color: var(--muted); font-size: 14px; }
        .filter-list { display: grid; gap: 9px; margin: 21px 0 25px; }
        .filter-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 11px 12px;
            border: 1px solid transparent;
            border-radius: 8px;
            color: var(--muted);
            font-size: 14px;
            transition: .2s ease;
        }
        .filter-item:hover, .filter-item.current {
            border-color: var(--line);
            background: var(--panel);
            color: var(--text);
        }
        .filter-item b {
            color: var(--faint);
            font-family: monospace;
            font-size: 11px;
            font-weight: 400;
        }
        .notice {
            padding: 15px;
            border-left: 3px solid var(--pink);
            background: rgba(237,61,131,.07);
            color: var(--muted);
            font-size: 13px;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: 1fr 1.05fr .95fr;
            gap: 16px;
        }
        .step-card {
            position: relative;
            min-height: 235px;
            padding: 27px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--panel);
            transition: transform .25s ease, border-color .25s ease;
        }
        .step-card:hover { border-color: rgba(237,61,131,.65); transform: translateY(-4px); }
        .step-card:nth-child(2) { background: linear-gradient(145deg, rgba(157,242,208,.08), transparent 55%), var(--panel); }
        .step-card:nth-child(3) { background: linear-gradient(145deg, rgba(244,200,107,.08), transparent 55%), var(--panel); }
        .step-number {
            display: block;
            margin-bottom: 42px;
            color: var(--pink);
            font-family: monospace;
            font-size: 13px;
            font-weight: 700;
        }
        .step-card h3 { margin: 0 0 9px; font-size: 21px; }
        .step-card p { margin: 0; color: var(--muted); font-size: 14px; }
        .step-symbol {
            position: absolute;
            right: 22px;
            top: 18px;
            color: rgba(255,255,255,.12);
            font-family: monospace;
            font-size: 52px;
            font-weight: 800;
        }

        .download-band {
            position: relative;
            overflow: hidden;
            padding: 45px 0;
            border-top: 1px solid rgba(237,61,131,.45);
            border-bottom: 1px solid rgba(237,61,131,.35);
            background: linear-gradient(100deg, #2b1230, #1b1827 55%, #122422);
        }
        .download-band:after {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: 6%;
            top: -180px;
            border: 55px solid rgba(157,242,208,.06);
            border-radius: 50%;
        }
        .download-inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 32px;
        }
        .download-inner h2 {
            max-width: 680px;
            margin: 9px 0 0;
            font-size: clamp(27px, 3.5vw, 42px);
            letter-spacing: -.045em;
            line-height: 1.18;
        }
        .download-inner p { margin: 13px 0 0; color: #c9c1cd; font-size: 15px; }
        .download-actions { display: flex; gap: 12px; flex-wrap: wrap; }
        .download-band .btn-secondary { background: rgba(11,11,16,.42); }

        .faq-wrap { padding: 8px 28px; }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-item:last-child { border-bottom: 0; }
        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            padding: 23px 0;
            border: 0;
            background: transparent;
            color: var(--text);
            text-align: left;
            font-size: 16px;
            font-weight: 700;
        }
        .faq-icon {
            position: relative;
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            border: 1px solid var(--line-bright);
            border-radius: 50%;
        }
        .faq-icon:before, .faq-icon:after {
            content: "";
            position: absolute;
            top: 10px;
            left: 5px;
            width: 10px;
            height: 1px;
            background: var(--cyan);
            transition: transform .25s ease;
        }
        .faq-icon:after { transform: rotate(90deg); }
        .faq-question[aria-expanded="true"] .faq-icon:after { transform: rotate(0); }
        .faq-answer {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .28s ease;
        }
        .faq-answer > div { overflow: hidden; }
        .faq-answer p { margin: 0; padding: 0 34px 22px 0; color: var(--muted); font-size: 14px; }
        .faq-item.open .faq-answer { grid-template-rows: 1fr; }

        footer {
            padding: 68px 0 24px;
            border-top: 1px solid var(--line);
            background: var(--bg-deep);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, .8fr);
            gap: 42px;
            padding-bottom: 50px;
        }
        .footer-brand p {
            max-width: 340px;
            margin: 20px 0 0;
            color: var(--muted);
            font-size: 14px;
        }
        .footer-col h3 {
            margin: 0 0 15px;
            color: var(--text);
            font-size: 14px;
        }
        .footer-col a {
            display: block;
            width: fit-content;
            margin: 9px 0;
            color: var(--muted);
            font-size: 13px;
            transition: color .2s ease;
        }
        .footer-col a:hover { color: var(--cyan); }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 21px;
            border-top: 1px solid var(--line);
            color: var(--faint);
            font-size: 12px;
        }

        @media (max-width: 1100px) {
            .nav { gap: 20px; }
            .brand { min-width: 225px; }
            .nav-links { gap: 16px; }
            .hero-grid { gap: 35px; }
            .update-layout { grid-template-columns: minmax(0, 1fr) 285px; }
            .footer-grid { gap: 25px; }
        }
        @media (max-width: 900px) {
            .nav { justify-content: space-between; min-height: 70px; }
            .nav-links {
                display: none;
                position: absolute;
                top: 70px;
                left: 0;
                right: 0;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 10px 24px 18px;
                border-bottom: 1px solid var(--line);
                background: var(--panel);
            }
            .nav-links.open { display: flex; }
            .nav-links a { padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.07); }
            .menu-toggle { display: inline-flex; }
            .nav-action { margin-left: auto; }
            .hero-grid, .overview-grid, .update-layout { grid-template-columns: 1fr; }
            .status-board { max-width: 620px; }
            .section { padding: 74px 0; }
            .steps-grid { grid-template-columns: repeat(3, 1fr); }
            .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
        }
        @media (max-width: 680px) {
            .container { width: min(var(--container), calc(100% - 32px)); }
            .brand { min-width: 0; }
            .brand strong { font-size: 15px; }
            .brand small { font-size: 8px; }
            .nav-action { display: none; }
            .page-hero { padding: 48px 0 50px; }
            .page-hero h1 { font-size: clamp(34px, 11vw, 52px); }
            .hero-copy { font-size: 15px; }
            .section-head { display: block; margin-bottom: 28px; }
            .section-head p { margin-top: 14px; }
            .signal-grid { grid-template-columns: 1fr; }
            .signal-item, .signal-item:first-child { min-height: 68px; border-left: 0; border-right: 0; border-bottom: 1px solid var(--line); }
            .signal-item:last-child { border-bottom: 0; }
            .feature-panel, .guide-panel { padding: 23px; }
            .track-row { grid-template-columns: 82px 18px 1fr; gap: 10px; }
            .track-row .badge { display: none; }
            .event-entry { grid-template-columns: 1fr; gap: 11px; padding: 21px; }
            .entry-date { padding: 0; border: 0; }
            .entry-link { justify-self: start; }
            .steps-grid { grid-template-columns: 1fr; }
            .step-card { min-height: 190px; }
            .download-inner { display: block; }
            .download-actions { margin-top: 25px; }
            .download-actions a { flex: 1; }
            .faq-wrap { padding: 5px 19px; }
            .faq-question { font-size: 15px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin: 5px 0; }
        }
        @media (max-width: 420px) {
            .brand small { display: none; }
            .brand-mark { width: 31px; height: 31px; flex-basis: 31px; }
            .brand-mark:before { width: 40px; left: -7px; top: 7px; }
            .hero-actions a { width: 100%; }
            .board-item { grid-template-columns: 62px 1fr; }
            .board-item .badge { display: none; }
            .footer-grid { grid-template-columns: 1fr; }
            .footer-brand { grid-column: auto; }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}