/* roulang page: index */
:root{
            --bg: #f5f7fc;
            --bg-soft: #eef2ff;
            --panel: rgba(255,255,255,.92);
            --panel-strong: #ffffff;
            --text: #142033;
            --muted: #65748b;
            --line: #dfe5f1;
            --primary: #6656f5;
            --primary-strong: #4f3fe0;
            --accent: #ff7b6b;
            --accent-soft: #ffe9e5;
            --success: #14b8a6;
            --warning: #f59e0b;
            --shadow: 0 18px 45px rgba(19, 34, 59, .08);
            --shadow-soft: 0 8px 20px rgba(19, 34, 59, .06);
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 16px;
            --radius-sm: 12px;
            --space-1: 6px;
            --space-2: 10px;
            --space-3: 14px;
            --space-4: 18px;
            --space-5: 24px;
            --space-6: 32px;
            --space-7: 44px;
            --space-8: 64px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(102,86,245,.12), transparent 34%),
                radial-gradient(circle at top right, rgba(255,123,107,.10), transparent 28%),
                linear-gradient(180deg, #f8faff 0%, #f4f7fc 36%, #f6f8fd 100%);
            line-height:1.7;
            overflow-x:hidden;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color .22s ease, transform .22s ease, opacity .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        img{
            max-width:100%;
            display:block;
        }
        button,input,textarea,select{
            font:inherit;
        }
        ::selection{
            background:rgba(102,86,245,.18);
            color:var(--text);
        }
        .skip-link{
            position:absolute;
            left:-9999px;
            top:auto;
            width:1px;
            height:1px;
            overflow:hidden;
        }
        .skip-link:focus{
            left:16px;
            top:16px;
            width:auto;
            height:auto;
            z-index:9999;
            padding:10px 14px;
            border-radius:999px;
            background:#fff;
            box-shadow:var(--shadow);
        }
        .page-shell{
            position:relative;
        }
        .grid-container{
            max-width:1240px;
            padding-left:18px;
            padding-right:18px;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(180%) blur(18px);
            background:rgba(244,247,252,.84);
            border-bottom:1px solid rgba(223,229,241,.78);
        }
        .header-inner{
            padding:14px 0 10px;
        }
        .brand-row{
            display:flex;
            align-items:center;
            gap:16px;
            justify-content:space-between;
            flex-wrap:wrap;
        }
        .brand-mark{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }
        .brand-badge{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, var(--primary), #8b7dfc);
            color:#fff;
            font-weight:800;
            box-shadow:0 10px 22px rgba(102,86,245,.28);
            flex-shrink:0;
        }
        .brand-copy{
            min-width:0;
        }
        .brand-name{
            display:block;
            font-size:1.05rem;
            line-height:1.15;
            font-weight:800;
            letter-spacing:.2px;
            color:var(--text);
        }
        .brand-note{
            display:block;
            font-size:.86rem;
            color:var(--muted);
            margin-top:2px;
        }
        .header-tools{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
        }
        .search-form{
            display:flex;
            align-items:center;
            gap:10px;
            background:#fff;
            border:1px solid var(--line);
            border-radius:999px;
            padding:8px 10px 8px 14px;
            box-shadow:var(--shadow-soft);
            min-width:min(430px, 52vw);
        }
        .search-form i{
            color:#8b96ab;
            font-size:.98rem;
        }
        .search-input{
            border:none;
            outline:none;
            box-shadow:none;
            margin:0;
            height:34px;
            background:transparent;
            color:var(--text);
            min-width:0;
            flex:1;
            padding:0;
        }
        .search-input::placeholder{
            color:#97a3b5;
        }
        .search-btn,
        .ghost-btn,
        .solid-btn,
        .outline-btn{
            border:none;
            cursor:pointer;
            border-radius:999px;
            font-weight:700;
            transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease, opacity .22s ease;
        }
        .search-btn{
            background:var(--primary);
            color:#fff;
            padding:10px 16px;
            box-shadow:0 10px 20px rgba(102,86,245,.18);
        }
        .search-btn:hover,
        .solid-btn:hover,
        .ghost-btn:hover,
        .outline-btn:hover{
            transform:translateY(-1px);
        }
        .search-btn:active,
        .solid-btn:active,
        .ghost-btn:active,
        .outline-btn:active{
            transform:translateY(0);
        }
        .search-btn:focus-visible,
        .solid-btn:focus-visible,
        .ghost-btn:focus-visible,
        .outline-btn:focus-visible,
        .nav-pill:focus-visible,
        .news-link:focus-visible,
        .footer-link:focus-visible,
        .faq-item summary:focus-visible,
        input:focus-visible,
        textarea:focus-visible{
            outline:3px solid rgba(102,86,245,.22);
            outline-offset:2px;
        }
        .header-action{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .ghost-btn{
            background:rgba(255,255,255,.82);
            color:var(--text);
            border:1px solid var(--line);
            padding:10px 16px;
        }
        .solid-btn{
            background:linear-gradient(135deg, var(--primary), var(--primary-strong));
            color:#fff;
            padding:11px 18px;
            box-shadow:0 14px 28px rgba(102,86,245,.22);
        }
        .outline-btn{
            background:transparent;
            color:var(--primary);
            border:1px solid rgba(102,86,245,.22);
            padding:10px 16px;
        }
        .outline-btn:hover{
            border-color:rgba(102,86,245,.42);
            background:rgba(102,86,245,.06);
        }
        .nav-strip{
            display:flex;
            align-items:center;
            gap:10px;
            margin-top:12px;
            padding:10px 0 0;
            border-top:1px solid rgba(223,229,241,.8);
            overflow-x:auto;
            scrollbar-width:none;
        }
        .nav-strip::-webkit-scrollbar{display:none}
        .nav-pill{
            flex:0 0 auto;
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 16px;
            border-radius:999px;
            border:1px solid transparent;
            color:#4f5f77;
            background:transparent;
            white-space:nowrap;
            font-size:.96rem;
        }
        .nav-pill:hover{
            color:var(--text);
            background:rgba(255,255,255,.88);
            border-color:rgba(223,229,241,.94);
            box-shadow:var(--shadow-soft);
        }
        .nav-pill.is-active{
            color:var(--primary-strong);
            background:#fff;
            border-color:rgba(102,86,245,.14);
            box-shadow:0 10px 22px rgba(102,86,245,.10);
        }
        .menu-toggle{
            display:none;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid var(--line);
            background:#fff;
            color:var(--text);
            box-shadow:var(--shadow-soft);
        }
        .menu-toggle:hover{
            border-color:rgba(102,86,245,.28);
            color:var(--primary-strong);
        }
        .mobile-panel{
            display:none;
            margin-top:12px;
            padding:12px;
            border-radius:22px;
            background:rgba(255,255,255,.88);
            border:1px solid rgba(223,229,241,.88);
            box-shadow:var(--shadow-soft);
        }
        .mobile-panel.is-open{
            display:block;
        }
        .mobile-panel .search-form{
            min-width:0;
            width:100%;
        }
        .mobile-stack{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            margin-top:12px;
        }
        .mobile-stack .solid-btn,
        .mobile-stack .ghost-btn,
        .mobile-stack .outline-btn{
            width:calc(50% - 5px);
            justify-content:center;
            text-align:center;
        }
        .section{
            padding:var(--space-8) 0;
        }
        .section-tight{
            padding:var(--space-7) 0;
        }
        .section-head{
            margin-bottom:var(--space-5);
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 12px;
            border-radius:999px;
            background:rgba(102,86,245,.08);
            color:var(--primary-strong);
            font-weight:700;
            font-size:.9rem;
            letter-spacing:.2px;
        }
        .eyebrow.alt{
            background:rgba(255,123,107,.10);
            color:#d75142;
        }
        .section-title{
            margin:14px 0 10px;
            font-size:clamp(1.5rem, 1.2rem + 1vw, 2.35rem);
            line-height:1.18;
            letter-spacing:-.02em;
            font-weight:800;
            color:var(--text);
        }
        .section-desc{
            margin:0;
            color:var(--muted);
            max-width:760px;
            font-size:1rem;
        }
        .hero-wrap{
            padding:28px;
            border-radius:34px;
            background:
                linear-gradient(135deg, rgba(22,32,51,.96) 0%, rgba(31,45,79,.96) 40%, rgba(88,70,214,.96) 100%);
            color:#eef2ff;
            box-shadow:0 28px 70px rgba(15, 24, 41, .18);
            position:relative;
            overflow:hidden;
        }
        .hero-wrap:before,
        .hero-wrap:after{
            content:"";
            position:absolute;
            border-radius:50%;
            pointer-events:none;
            opacity:.6;
        }
        .hero-wrap:before{
            width:260px;
            height:260px;
            right:-80px;
            top:-60px;
            background:radial-gradient(circle, rgba(255,255,255,.20), transparent 68%);
        }
        .hero-wrap:after{
            width:210px;
            height:210px;
            right:140px;
            bottom:-90px;
            background:radial-gradient(circle, rgba(255,123,107,.16), transparent 65%);
        }
        .hero-grid{
            position:relative;
            z-index:1;
        }
        .hero-identity{
            display:flex;
            align-items:flex-start;
            gap:18px;
            flex-wrap:wrap;
        }
        .hero-avatar{
            width:76px;
            height:76px;
            border-radius:26px;
            background:
                linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
                linear-gradient(145deg, #ffffff 0%, #f0f2ff 100%);
            color:var(--primary-strong);
            display:grid;
            place-items:center;
            box-shadow:0 16px 32px rgba(0,0,0,.14);
            border:1px solid rgba(255,255,255,.2);
            flex-shrink:0;
        }
        .hero-avatar span{
            font-size:1.9rem;
            font-weight:900;
            letter-spacing:-.05em;
        }
        .hero-title{
            margin:0;
            font-size:clamp(2rem, 1.3rem + 2.4vw, 3.55rem);
            line-height:1.06;
            letter-spacing:-.04em;
            font-weight:900;
            color:#fff;
        }
        .hero-subtitle{
            margin:14px 0 0;
            max-width:760px;
            color:rgba(238,242,255,.88);
            font-size:1.02rem;
        }
        .hero-actions{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            margin-top:24px;
        }
        .hero-actions .solid-btn{
            background:linear-gradient(135deg, #ffffff, #f3f5ff);
            color:var(--primary-strong);
        }
        .hero-actions .solid-btn:hover{
            background:#fff;
        }
        .hero-actions .ghost-btn{
            color:#fff;
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.18);
        }
        .hero-actions .outline-btn{
            color:#fff;
            border-color:rgba(255,255,255,.22);
            background:rgba(255,255,255,.05);
        }
        .hero-badges{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            margin-top:22px;
        }
        .data-badge{
            display:inline-flex;
            align-items:center;
            gap:9px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.16);
            color:#fff;
            font-weight:700;
            font-size:.93rem;
            backdrop-filter:blur(10px);
        }
        .data-badge i{
            color:#d8d4ff;
        }
        .hero-board{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:14px;
            margin-top:26px;
        }
        .hero-panel{
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.15);
            border-radius:24px;
            padding:18px;
            backdrop-filter:blur(10px);
            box-shadow:0 14px 32px rgba(5, 12, 30, .16);
        }
        .hero-panel h3{
            margin:0 0 6px;
            font-size:1rem;
            color:#fff;
            font-weight:800;
        }
        .hero-panel p{
            margin:0;
            color:rgba(238,242,255,.78);
            font-size:.92rem;
        }
        .hero-panel strong{
            font-size:1.9rem;
            color:#fff;
            line-height:1.1;
            display:block;
            margin-top:8px;
        }
        .hero-panel.big{
            grid-column:span 7;
            min-height:190px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
                linear-gradient(135deg, rgba(110,91,246,.30), rgba(72,214,191,.16));
        }
        .hero-panel.side{
            grid-column:span 5;
            display:grid;
            gap:14px;
        }
        .hero-mini{
            display:grid;
            grid-template-columns:1fr auto;
            align-items:center;
            gap:12px;
            padding:16px;
            border-radius:20px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
        }
        .hero-mini .mini-num{
            font-size:1.35rem;
            font-weight:900;
            color:#fff;
        }
        .hero-mini small{
            display:block;
            color:rgba(238,242,255,.72);
        }
        .hero-progress{
            margin-top:16px;
        }
        .progress-track{
            width:100%;
            height:10px;
            border-radius:999px;
            background:rgba(255,255,255,.14);
            overflow:hidden;
            margin-top:8px;
        }
        .progress-fill{
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, #9de4ff, #fff, #ffd3cf);
        }
        .series-shell{
            background:var(--panel);
            border:1px solid rgba(223,229,241,.92);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
            padding:24px;
        }
        .series-top{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:18px;
            flex-wrap:wrap;
            margin-bottom:18px;
        }
        .series-top .tagline{
            color:var(--muted);
            margin-top:8px;
            max-width:780px;
        }
        .series-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .directory-card,
        .series-card,
        .metric-card,
        .hot-card,
        .news-card,
        .bubble-card,
        .plan-card,
        .faq-card,
        .cta-card{
            background:var(--panel-strong);
            border:1px solid rgba(223,229,241,.95);
            border-radius:24px;
            box-shadow:var(--shadow-soft);
        }
        .directory-card{
            grid-column:span 5;
            padding:22px;
        }
        .directory-tree{
            list-style:none;
            padding:0;
            margin:0;
        }
        .directory-tree li{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            padding:12px 0;
            border-bottom:1px dashed rgba(223,229,241,.95);
            color:var(--text);
        }
        .directory-tree li:last-child{
            border-bottom:none;
        }
        .directory-tree b{
            display:block;
            font-size:1rem;
        }
        .directory-tree span{
            color:var(--muted);
            font-size:.92rem;
        }
        .directory-badge{
            flex-shrink:0;
            padding:7px 11px;
            border-radius:999px;
            font-size:.82rem;
            font-weight:700;
            color:var(--primary-strong);
            background:rgba(102,86,245,.08);
        }
        .series-card{
            grid-column:span 7;
            padding:22px;
        }
        .pill-wrap{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:14px 16px;
            border-radius:18px;
            background:linear-gradient(180deg, #fff, #fbfcff);
            border:1px solid rgba(223,229,241,.95);
            min-width:calc(50% - 6px);
            box-shadow:0 10px 20px rgba(19,34,59,.04);
        }
        .pill-icon{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:rgba(102,86,245,.08);
            color:var(--primary-strong);
            flex-shrink:0;
        }
        .pill-text{
            min-width:0;
            flex:1;
        }
        .pill-text strong{
            display:block;
            font-size:1rem;
            color:var(--text);
            line-height:1.2;
        }
        .pill-text small{
            color:var(--muted);
            display:block;
            margin-top:2px;
            font-size:.88rem;
        }
        .pill-tag{
            flex-shrink:0;
            padding:7px 10px;
            background:var(--accent-soft);
            color:#d64d3f;
            border-radius:999px;
            font-weight:700;
            font-size:.8rem;
        }
        .metric-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .metric-card{
            grid-column:span 3;
            padding:20px;
            position:relative;
            overflow:hidden;
        }
        .metric-card:before{
            content:"";
            position:absolute;
            inset:auto -18% -35% auto;
            width:120px;
            height:120px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(102,86,245,.13), transparent 66%);
        }
        .metric-name{
            color:var(--muted);
            font-size:.94rem;
            margin:0 0 10px;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .metric-value{
            margin:0;
            font-size:2rem;
            line-height:1;
            font-weight:900;
            letter-spacing:-.03em;
            color:var(--text);
        }
        .metric-foot{
            margin-top:12px;
            color:var(--muted);
            font-size:.92rem;
        }
        .analysis-card{
            grid-column:span 6;
            padding:22px;
        }
        .analysis-head{
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:flex-start;
            flex-wrap:wrap;
            margin-bottom:16px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(20,184,166,.10);
            color:#0f8d80;
            font-size:.82rem;
            font-weight:700;
        }
        .bar-list{
            display:grid;
            gap:12px;
        }
        .bar-row{
            display:grid;
            grid-template-columns:110px 1fr 42px;
            gap:12px;
            align-items:center;
        }
        .bar-row label{
            color:var(--text);
            font-size:.94rem;
            font-weight:700;
        }
        .bar-track{
            width:100%;
            height:12px;
            background:#edf1f7;
            border-radius:999px;
            overflow:hidden;
        }
        .bar-fill{
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--primary), #7bd3ff);
        }
        .bar-fill.alt{
            background:linear-gradient(90deg, #ff8f82, #ffbf80);
        }
        .bar-fill.green{
            background:linear-gradient(90deg, #17b7a7, #7ae1c5);
        }
        .bar-row strong{
            text-align:right;
            color:var(--primary-strong);
            font-size:.92rem;
        }
        .snapshot-card{
            grid-column:span 6;
            padding:22px;
        }
        .snapshot-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .snapshot-list li{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:14px 0;
            border-bottom:1px solid rgba(223,229,241,.8);
        }
        .snapshot-list li:last-child{
            border-bottom:none;
        }
        .snapshot-dot{
            width:12px;
            height:12px;
            border-radius:50%;
            margin-top:8px;
            background:linear-gradient(145deg, var(--primary), #8dd9ff);
            box-shadow:0 0 0 6px rgba(102,86,245,.09);
            flex-shrink:0;
        }
        .snapshot-copy strong{
            display:block;
            font-size:1rem;
            line-height:1.35;
            margin-bottom:4px;
        }
        .snapshot-copy span{
            color:var(--muted);
            font-size:.92rem;
        }
        .hot-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .hot-feature{
            grid-column:span 5;
            padding:24px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)),
                linear-gradient(145deg, rgba(102,86,245,.06), rgba(255,123,107,.05));
            position:relative;
            overflow:hidden;
        }
        .hot-feature:after{
            content:"";
            position:absolute;
            right:-90px;
            bottom:-90px;
            width:220px;
            height:220px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(102,86,245,.10), transparent 65%);
        }
        .hot-feature h3{
            margin:12px 0 10px;
            font-size:1.48rem;
            line-height:1.25;
            font-weight:900;
        }
        .hot-feature p{
            margin:0;
            color:var(--muted);
        }
        .hot-rail{
            grid-column:span 7;
            display:grid;
            gap:16px;
        }
        .hot-card{
            padding:18px;
            display:grid;
            grid-template-columns:120px 1fr;
            gap:16px;
            align-items:stretch;
        }
        .hot-cover{
            border-radius:20px;
            background:
                linear-gradient(135deg, rgba(102,86,245,.95), rgba(255,123,107,.88));
            min-height:118px;
            position:relative;
            overflow:hidden;
        }
        .hot-cover:before,
        .hot-cover:after{
            content:"";
            position:absolute;
            border-radius:50%;
            background:rgba(255,255,255,.22);
        }
        .hot-cover:before{
            width:58px;
            height:58px;
            right:14px;
            top:14px;
        }
        .hot-cover:after{
            width:94px;
            height:94px;
            left:-20px;
            bottom:-18px;
            opacity:.7;
        }
        .hot-body h4{
            margin:2px 0 8px;
            font-size:1.08rem;
            line-height:1.4;
            font-weight:800;
        }
        .hot-body p{
            margin:8px 0 0;
            color:var(--muted);
            font-size:.94rem;
        }
        .badge-row{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(102,86,245,.09);
            color:var(--primary-strong);
            font-size:.8rem;
            font-weight:700;
        }
        .tag.alt{
            background:rgba(255,123,107,.12);
            color:#cf574a;
        }
        .scene-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .scene-media{
            grid-column:span 5;
            padding:24px;
            border-radius:var(--radius-xl);
            background:
                linear-gradient(145deg, rgba(22,32,51,.94), rgba(30,40,67,.96)),
                radial-gradient(circle at top right, rgba(102,86,245,.22), transparent 35%);
            color:#eff3ff;
            position:relative;
            overflow:hidden;
            box-shadow:0 24px 56px rgba(14, 20, 35, .16);
        }
        .scene-media h3{
            margin:0 0 10px;
            color:#fff;
            font-size:1.3rem;
            font-weight:900;
        }
        .scene-media p{
            margin:0;
            color:rgba(238,242,255,.78);
        }
        .scene-step-list{
            margin-top:18px;
            display:grid;
            gap:12px;
        }
        .scene-step{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px;
            border-radius:20px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
        }
        .scene-step .num{
            width:34px;
            height:34px;
            border-radius:12px;
            display:grid;
            place-items:center;
            font-weight:900;
            color:var(--primary-strong);
            background:#fff;
            flex-shrink:0;
        }
        .scene-step b{
            display:block;
            color:#fff;
            margin-bottom:2px;
        }
        .scene-step span{
            color:rgba(238,242,255,.76);
            font-size:.92rem;
        }
        .scene-flow{
            grid-column:span 7;
            padding:24px;
        }
        .flow-grid{
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:14px;
        }
        .flow-card{
            padding:18px;
            border-radius:20px;
            background:linear-gradient(180deg, #fff, #fbfcff);
            border:1px solid rgba(223,229,241,.95);
            box-shadow:0 10px 18px rgba(19,34,59,.04);
            position:relative;
        }
        .flow-card .step-num{
            font-size:.8rem;
            font-weight:900;
            color:#fff;
            background:linear-gradient(135deg, var(--primary), var(--primary-strong));
            display:inline-flex;
            padding:6px 10px;
            border-radius:999px;
            margin-bottom:12px;
        }
        .flow-card h4{
            margin:0 0 8px;
            font-size:1.05rem;
            line-height:1.35;
            font-weight:800;
        }
        .flow-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .news-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .news-list-card{
            grid-column:span 7;
            padding:22px;
        }
        .news-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .news-link{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
            padding:14px 0;
            border-bottom:1px solid rgba(223,229,241,.9);
        }
        .news-link:last-child{
            border-bottom:none;
        }
        .news-link strong{
            display:block;
            font-size:1rem;
            line-height:1.45;
            font-weight:700;
        }
        .news-link span{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            background:#f0f4ff;
            color:var(--primary-strong);
            font-size:.78rem;
            font-weight:700;
            flex-shrink:0;
        }
        .news-side{
            grid-column:span 5;
            padding:22px;
        }
        .news-highlight{
            padding:18px;
            border-radius:20px;
            background:linear-gradient(145deg, rgba(255,123,107,.12), rgba(102,86,245,.08));
            border:1px solid rgba(223,229,241,.9);
            margin-bottom:14px;
        }
        .news-highlight h4{
            margin:0 0 10px;
            font-size:1.05rem;
            font-weight:800;
        }
        .news-highlight p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .news-mini-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .news-mini-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            padding:10px 0;
        }
        .news-mini-list i{
            color:var(--success);
            margin-top:5px;
        }
        .bubble-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .bubble-card{
            padding:18px;
        }
        .bubble-wall{
            grid-column:span 8;
            display:grid;
            grid-template-columns:repeat(3, 1fr);
            gap:14px;
        }
        .bubble-item{
            padding:16px;
            border-radius:20px;
            background:linear-gradient(180deg, #fff, #fafcff);
            border:1px solid rgba(223,229,241,.95);
            box-shadow:0 10px 18px rgba(19,34,59,.04);
            min-height:128px;
        }
        .bubble-top{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:10px;
        }
        .bubble-av{
            width:36px;
            height:36px;
            border-radius:12px;
            display:grid;
            place-items:center;
            font-weight:900;
            color:#fff;
            background:linear-gradient(135deg, var(--primary), #8f7bfd);
            flex-shrink:0;
        }
        .bubble-top strong{
            font-size:.96rem;
            display:block;
            line-height:1.2;
        }
        .bubble-top span{
            color:var(--muted);
            font-size:.84rem;
        }
        .bubble-item p{
            margin:0;
            color:var(--text);
            line-height:1.62;
            font-size:.94rem;
        }
        .bubble-side{
            grid-column:span 4;
            padding:22px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:
                linear-gradient(145deg, rgba(22,32,51,.96), rgba(61,72,104,.96));
            color:#eff3ff;
        }
        .bubble-side h3{
            margin:0 0 10px;
            color:#fff;
            font-size:1.32rem;
            font-weight:900;
        }
        .bubble-side p{
            margin:0;
            color:rgba(238,242,255,.80);
        }
        .bubble-side .solid-btn{
            width:fit-content;
            margin-top:18px;
            background:#fff;
            color:var(--primary-strong);
        }
        .membership-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .plan-card{
            grid-column:span 4;
            padding:22px;
            position:relative;
            overflow:hidden;
        }
        .plan-card.recommended{
            border-color:rgba(102,86,245,.34);
            box-shadow:0 20px 42px rgba(102,86,245,.12);
            transform:translateY(-4px);
        }
        .plan-card.recommended:before{
            content:"推荐";
            position:absolute;
            top:16px;
            right:-34px;
            transform:rotate(35deg);
            background:linear-gradient(135deg, var(--primary), var(--primary-strong));
            color:#fff;
            font-size:.72rem;
            font-weight:900;
            letter-spacing:.12em;
            padding:8px 38px;
        }
        .plan-name{
            margin:0 0 8px;
            font-size:1.1rem;
            font-weight:800;
        }
        .plan-price{
            margin:0;
            font-size:2rem;
            font-weight:900;
            line-height:1;
            color:var(--primary-strong);
        }
        .plan-desc{
            margin:12px 0 16px;
            color:var(--muted);
        }
        .plan-list{
            list-style:none;
            padding:0;
            margin:0 0 18px;
            display:grid;
            gap:10px;
        }
        .plan-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--text);
            line-height:1.5;
        }
        .plan-list i{
            color:var(--success);
            margin-top:4px;
            flex-shrink:0;
        }
        .faq-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
        }
        .faq-list{
            grid-column:span 8;
            display:grid;
            gap:12px;
        }
        .faq-item{
            padding:0;
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            font-weight:800;
            color:var(--text);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary i{
            color:var(--primary-strong);
            transition:transform .22s ease;
        }
        .faq-item[open] summary{
            border-bottom:1px solid rgba(223,229,241,.82);
        }
        .faq-item[open] summary i{
            transform:rotate(180deg);
        }
        .faq-answer{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .faq-aside{
            grid-column:span 4;
            padding:22px;
            background:
                linear-gradient(145deg, rgba(255,123,107,.12), rgba(102,86,245,.08)),
                #fff;
        }
        .faq-aside h3{
            margin:0 0 10px;
            font-size:1.25rem;
            font-weight:900;
        }
        .faq-aside p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .check-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .check-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--text);
        }
        .check-list i{
            margin-top:5px;
            color:var(--accent);
        }
        .cta-card{
            padding:24px;
            background:
                linear-gradient(135deg, rgba(22,32,51,.96), rgba(39,48,77,.96) 58%, rgba(102,86,245,.94) 100%);
            color:#eef2ff;
            border-color:transparent;
        }
        .cta-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
            align-items:stretch;
        }
        .cta-copy{
            grid-column:span 7;
        }
        .cta-copy h3{
            margin:0 0 10px;
            font-size:1.5rem;
            line-height:1.22;
            color:#fff;
            font-weight:900;
        }
        .cta-copy p{
            margin:0;
            color:rgba(238,242,255,.82);
            max-width:700px;
        }
        .cta-form-wrap{
            grid-column:span 5;
        }
        .subscribe-form{
            display:grid;
            gap:12px;
            margin-top:0;
        }
        .subscribe-form label{
            display:block;
            font-size:.9rem;
            font-weight:700;
            color:#fff;
            margin-bottom:6px;
        }
        .subscribe-form input{
            width:100%;
            height:48px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.18);
            background:rgba(255,255,255,.08);
            color:#fff;
            padding:0 14px;
            margin:0;
            box-shadow:none;
        }
        .subscribe-form input::placeholder{
            color:rgba(238,242,255,.62);
        }
        .subscribe-form .solid-btn{
            width:100%;
            justify-content:center;
            padding:13px 18px;
            background:#fff;
            color:var(--primary-strong);
        }
        .form-note{
            margin-top:10px;
            color:rgba(238,242,255,.72);
            font-size:.86rem;
        }
        .toast{
            display:none;
            margin-top:12px;
            padding:12px 14px;
            border-radius:14px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.18);
            color:#fff;
        }
        .toast.is-show{
            display:block;
        }
        .site-footer{
            margin-top:var(--space-8);
            padding:34px 0 44px;
            background:#111827;
            color:#e8edf9;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:16px;
            align-items:start;
        }
        .footer-brand{
            grid-column:span 5;
        }
        .footer-brand .brand-name{
            color:#fff;
            font-size:1.15rem;
        }
        .footer-brand p{
            margin:12px 0 0;
            color:rgba(232,237,249,.76);
            max-width:540px;
        }
        .footer-links{
            grid-column:span 7;
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .footer-box{
            padding:18px;
            border-radius:20px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
        }
        .footer-box h4{
            margin:0 0 12px;
            font-size:1rem;
            color:#fff;
        }
        .footer-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-link{
            color:rgba(232,237,249,.76);
        }
        .footer-link:hover{
            color:#fff;
        }
        .footer-bottom{
            margin-top:24px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:center;
            flex-wrap:wrap;
            color:rgba(232,237,249,.66);
            font-size:.92rem;
        }
        .footer-meta strong{
            color:#fff;
        }
        .panel-title{
            margin:0 0 12px;
            font-size:1.08rem;
            font-weight:800;
            color:var(--text);
        }
        .muted{
            color:var(--muted);
        }
        .spacer{
            height:8px;
        }
        @media (max-width: 1200px){
            .search-form{
                min-width:min(360px, 44vw);
            }
            .hero-panel.big,
            .hero-panel.side{
                grid-column:span 12;
            }
            .metric-card{
                grid-column:span 6;
            }
            .analysis-card,
            .snapshot-card,
            .news-list-card,
            .news-side,
            .cta-copy,
            .cta-form-wrap,
            .footer-brand,
            .footer-links{
                grid-column:span 12;
            }
            .hot-feature,
            .hot-rail,
            .scene-media,
            .scene-flow,
            .bubble-wall,
            .bubble-side,
            .faq-list,
            .faq-aside{
                grid-column:span 12;
            }
            .bubble-wall{
                grid-template-columns:repeat(2, 1fr);
            }
        }
        @media (max-width: 1024px){
            .series-grid,
            .hot-grid,
            .scene-grid,
            .news-grid,
            .membership-grid,
            .faq-grid,
            .footer-grid{
                grid-template-columns:repeat(12, 1fr);
            }
            .directory-card,
            .series-card,
            .analysis-card,
            .snapshot-card,
            .news-list-card,
            .news-side,
            .bubble-wall,
            .bubble-side,
            .faq-list,
            .faq-aside,
            .cta-copy,
            .cta-form-wrap{
                grid-column:span 12;
            }
            .plan-card{
                grid-column:span 6;
            }
            .hot-feature,
            .hot-rail{
                grid-column:span 12;
            }
            .hot-rail{
                grid-template-columns:repeat(2, 1fr);
            }
            .hot-card{
                grid-template-columns:110px 1fr;
            }
            .hero-wrap{
                padding:22px;
            }
        }
        @media (max-width: 768px){
            .brand-row{
                gap:12px;
            }
            .search-form,
            .header-action{
                display:none;
            }
            .menu-toggle{
                display:inline-grid;
                place-items:center;
            }
            .mobile-panel{
                display:none;
            }
            .mobile-panel.is-open{
                display:block;
            }
            .hero-wrap{
                padding:18px;
                border-radius:26px;
            }
            .hero-board{
                grid-template-columns:1fr;
            }
            .hero-panel.big,
            .hero-panel.side{
                grid-column:span 12;
            }
            .section{
                padding:56px 0;
            }
            .section-tight{
                padding:48px 0;
            }
            .pill{
                min-width:100%;
            }
            .metric-card{
                grid-column:span 12;
            }
            .plan-card{
                grid-column:span 12;
            }
            .hot-rail{
                grid-template-columns:1fr;
            }
            .hot-card{
                grid-template-columns:1fr;
            }
            .hot-cover{
                min-height:92px;
            }
            .flow-grid{
                grid-template-columns:1fr;
            }
            .bubble-wall{
                grid-template-columns:1fr;
            }
            .footer-links{
                grid-template-columns:1fr;
            }
            .footer-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (max-width: 520px){
            .grid-container{
                padding-left:14px;
                padding-right:14px;
            }
            .hero-avatar{
                width:62px;
                height:62px;
                border-radius:20px;
            }
            .hero-avatar span{
                font-size:1.45rem;
            }
            .hero-title{
                font-size:clamp(1.65rem, 1.1rem + 2vw, 2.2rem);
            }
            .hero-subtitle,
            .section-desc{
                font-size:.96rem;
            }
            .hero-actions,
            .mobile-stack{
                flex-direction:column;
                align-items:stretch;
            }
            .hero-actions .solid-btn,
            .hero-actions .ghost-btn,
            .hero-actions .outline-btn,
            .mobile-stack .solid-btn,
            .mobile-stack .ghost-btn,
            .mobile-stack .outline-btn{
                width:100%;
            }
            .series-shell,
            .directory-card,
            .series-card,
            .metric-card,
            .analysis-card,
            .snapshot-card,
            .hot-feature,
            .news-list-card,
            .news-side,
            .bubble-side,
            .faq-aside,
            .cta-card,
            .plan-card{
                padding:18px;
                border-radius:20px;
            }
            .bar-row{
                grid-template-columns:84px 1fr 38px;
            }
            .news-link{
                flex-direction:column;
            }
            .news-link span{
                align-self:flex-start;
            }
        }