/* roulang page: index */
:root{
            --bg: #090d12;
            --bg-2: #0f141b;
            --panel: #111821;
            --panel-2: #151e29;
            --panel-3: #1a2431;
            --line: rgba(255,255,255,.09);
            --line-2: rgba(112,255,224,.18);
            --text: #edf3f7;
            --muted: #96a4b3;
            --muted-2: #6f7d8d;
            --accent: #57f0d7;
            --accent-2: #72ff9f;
            --accent-3: #ff5dcf;
            --warn: #f4b15d;
            --shadow: 0 18px 50px rgba(0,0,0,.42);
            --shadow-soft: 0 12px 30px rgba(0,0,0,.28);
            --radius: 22px;
            --radius-sm: 16px;
            --radius-lg: 28px;
            --container: 1240px;
            --gap: 24px;
            --gap-lg: 32px;
            --space: 18px;
            --space-lg: 28px;
            --ring: 0 0 0 4px rgba(87,240,215,.18);
            --transition: 180ms ease;
            --grid: rgba(255,255,255,.045);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background:
                radial-gradient(circle at 12% 10%, rgba(87,240,215,.12), transparent 20%),
                radial-gradient(circle at 86% 8%, rgba(255,93,207,.12), transparent 20%),
                radial-gradient(circle at 50% 0%, rgba(114,255,159,.08), transparent 18%),
                linear-gradient(180deg, #070a0f 0%, #0a0e14 46%, #070a0f 100%);
            color: var(--text);
            line-height:1.7;
            min-height:100vh;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(to right, var(--grid) 1px, transparent 1px),
                linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
            background-size: 70px 70px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.22) 58%, transparent 100%);
            opacity:.45;
            z-index:0;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(87,240,215,.25);color:#fff}
        .skip-link{
            position:absolute;
            left:-999px;
            top:12px;
            z-index:20;
            padding:10px 14px;
            border-radius:999px;
            background:#fff;
            color:#000;
        }
        .skip-link:focus{left:12px}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
            position:relative;
            z-index:1;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter: blur(18px);
            background: rgba(7,10,15,.72);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .site-header::after{
            content:"";
            display:block;
            height:2px;
            background:linear-gradient(90deg, transparent 0%, rgba(87,240,215,.9) 18%, rgba(255,93,207,.75) 52%, rgba(114,255,159,.85) 82%, transparent 100%);
            opacity:.85;
        }
        .nav-wrap{
            min-height:74px;
            display:flex;
            align-items:center;
            gap:18px;
            justify-content:space-between;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
            letter-spacing:.2px;
        }
        .brand-mark{
            width:40px;
            height:40px;
            border-radius:14px;
            position:relative;
            background:
                radial-gradient(circle at 30% 30%, rgba(87,240,215,.88), rgba(87,240,215,.18) 48%, transparent 68%),
                linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
            border:1px solid rgba(87,240,215,.28);
            box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 28px rgba(87,240,215,.18);
            flex:0 0 auto;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:9px;
            border-radius:12px;
            border:1px solid rgba(255,255,255,.14);
        }
        .brand-mark::after{
            inset:15px;
            border-color: rgba(255,93,207,.22);
            transform: rotate(18deg);
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .brand-text strong{
            font-size:1rem;
            line-height:1.1;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-text span{
            font-size:.82rem;
            color:var(--muted);
        }
        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.1);
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            color:var(--text);
            box-shadow:var(--shadow-soft);
        }
        .nav-toggle:focus-visible,
        .btn:focus-visible,
        .chip:focus-visible,
        .mini-link:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        summary:focus-visible{
            outline:none;
            box-shadow: var(--ring), var(--shadow-soft);
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:16px;
        }
        .nav-menu{
            display:flex;
            align-items:center;
            gap:8px;
            padding:8px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }
        .nav-menu a{
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
            border:1px solid transparent;
            font-size:.95rem;
        }
        .nav-menu a:hover,
        .nav-menu a:focus-visible{
            color:var(--text);
            background: rgba(87,240,215,.08);
            border-color: rgba(87,240,215,.18);
            transform: translateY(-1px);
        }
        .nav-menu a.active{
            color:#071018;
            background: linear-gradient(135deg, rgba(87,240,215,1), rgba(114,255,159,.92));
            box-shadow: 0 10px 24px rgba(87,240,215,.16);
            border-color: transparent;
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            padding:12px 18px;
            border-radius:999px;
            border:1px solid transparent;
            background:transparent;
            color:var(--text);
            font-weight:700;
            letter-spacing:.2px;
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
            user-select:none;
        }
        .btn:hover{
            transform: translateY(-1px);
        }
        .btn:active{
            transform: translateY(0);
            opacity:.92;
        }
        .btn-primary{
            background: linear-gradient(135deg, rgba(87,240,215,1), rgba(114,255,159,.95));
            color:#041016;
            box-shadow: 0 12px 28px rgba(87,240,215,.18), inset 0 1px 0 rgba(255,255,255,.28);
        }
        .btn-primary:hover{
            box-shadow: 0 15px 32px rgba(87,240,215,.22), 0 0 0 1px rgba(87,240,215,.2);
        }
        .btn-secondary{
            border-color: rgba(255,255,255,.1);
            background: rgba(255,255,255,.03);
            color: var(--text);
        }
        .btn-secondary:hover{
            border-color: rgba(87,240,215,.25);
            background: rgba(87,240,215,.07);
        }
        .btn-ghost{
            color:var(--muted);
            border-color:rgba(255,255,255,.08);
            background:rgba(255,255,255,.02);
        }
        .btn-ghost:hover{
            color:var(--text);
            border-color:rgba(255,255,255,.14);
            background:rgba(255,255,255,.05);
        }
        .section{
            padding: 34px 0;
        }
        .section:first-of-type{
            padding-top: 28px;
        }
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:20px;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:.86rem;
            color:var(--accent);
            letter-spacing:.12em;
            text-transform:uppercase;
        }
        .section-kicker::before{
            content:"";
            width:26px;
            height:1px;
            background:linear-gradient(90deg, transparent, var(--accent));
        }
        .section-title{
            margin:8px 0 0;
            font-size: clamp(1.5rem, 2vw, 2.25rem);
            line-height:1.15;
        }
        .section-desc{
            max-width:820px;
            color:var(--muted);
            margin:10px 0 0;
            font-size:1rem;
        }
        .hero{
            padding-top: 22px;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            padding: 26px;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 15% 20%, rgba(87,240,215,.14), transparent 26%),
                radial-gradient(circle at 84% 14%, rgba(255,93,207,.13), transparent 24%),
                linear-gradient(180deg, rgba(20,28,39,.98), rgba(12,17,24,.95));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:-1px;
            border-radius:inherit;
            background: linear-gradient(135deg, rgba(87,240,215,.18), transparent 30%, transparent 70%, rgba(255,93,207,.16));
            mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
            -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
            padding:1px;
            opacity:.55;
            pointer-events:none;
        }
        .hero-grid{
            display:grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 26px;
            align-items:stretch;
        }
        .hero-copy{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:20px;
            min-width:0;
        }
        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background: rgba(255,255,255,.04);
            color:var(--muted);
            font-size:.88rem;
            line-height:1;
        }
        .tag-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background: var(--accent);
            box-shadow: 0 0 0 4px rgba(87,240,215,.1);
        }
        .hero h1{
            margin:0;
            font-size: clamp(2.1rem, 4.2vw, 4.8rem);
            line-height:1.02;
            letter-spacing:-.04em;
        }
        .hero-lead{
            max-width: 760px;
            color:#dce4ea;
            font-size: clamp(1rem, 1.25vw, 1.12rem);
            margin: 0;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
        }
        .hero-meta{
            display:grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap:12px;
        }
        .meta-card{
            padding:14px 16px;
            border-radius:18px;
            background: rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
        }
        .meta-card strong{
            display:block;
            font-size:1.12rem;
            line-height:1.1;
        }
        .meta-card span{
            display:block;
            margin-top:6px;
            color:var(--muted);
            font-size:.9rem;
        }
        .hero-dashboard{
            display:grid;
            grid-template-columns: 1fr;
            gap:14px;
        }
        .dash-card{
            padding:18px;
            border-radius: 22px;
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
        }
        .dash-top{
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:flex-start;
            margin-bottom:14px;
        }
        .dash-top .label{
            color:var(--muted);
            font-size:.88rem;
        }
        .dash-top .state{
            color:var(--accent);
            font-size:.86rem;
            white-space:nowrap;
        }
        .dash-big{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:16px;
        }
        .dash-big strong{
            font-size: clamp(2rem, 3.2vw, 3.25rem);
            line-height:1;
        }
        .dash-big span{
            color:var(--muted);
            display:block;
            margin-top:8px;
            font-size:.92rem;
        }
        .bar-list{
            display:grid;
            gap:12px;
            margin-top:16px;
        }
        .bar-item{
            display:grid;
            gap:7px;
        }
        .bar-head{
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:center;
            color:var(--muted);
            font-size:.88rem;
        }
        .bar{
            height:10px;
            border-radius:999px;
            background: rgba(255,255,255,.07);
            overflow:hidden;
        }
        .bar > i{
            display:block;
            height:100%;
            border-radius:inherit;
            background: linear-gradient(90deg, rgba(87,240,215,1), rgba(114,255,159,.92));
            box-shadow: 0 0 18px rgba(87,240,215,.28);
        }
        .chip-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:16px;
        }
        .chip{
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
            color:var(--text);
            font-size:.88rem;
            transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .chip:hover,
        .chip:focus-visible{
            transform: translateY(-1px);
            border-color: rgba(87,240,215,.22);
            background: rgba(87,240,215,.08);
            box-shadow: 0 10px 20px rgba(0,0,0,.18);
        }
        .matrix-grid{
            display:grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 18px;
        }
        .matrix-card{
            position:relative;
            overflow:hidden;
            padding:20px;
            border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
            min-height: 182px;
        }
        .matrix-card::after{
            content:"";
            position:absolute;
            inset:auto -20% -70% auto;
            width:220px;
            height:220px;
            background: radial-gradient(circle, rgba(87,240,215,.12), transparent 60%);
            pointer-events:none;
        }
        .matrix-card:hover{
            transform: translateY(-3px);
            border-color: rgba(87,240,215,.22);
            box-shadow: 0 18px 34px rgba(0,0,0,.36);
        }
        .matrix-card .badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 10px;
            border-radius:999px;
            background: rgba(87,240,215,.08);
            color: var(--accent);
            border:1px solid rgba(87,240,215,.15);
            font-size:.82rem;
            margin-bottom:12px;
        }
        .matrix-card h3{
            margin:0 0 10px;
            font-size:1.14rem;
            line-height:1.3;
        }
        .matrix-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
        }
        .matrix-card .mini-link{
            display:inline-flex;
            margin-top:16px;
            color:var(--accent);
            font-weight:700;
            gap:8px;
            transition: transform var(--transition), opacity var(--transition);
        }
        .mini-link:hover{
            transform: translateX(2px);
            opacity:.9;
        }
        .matrix-card.large{grid-column: span 7;}
        .matrix-card.tall{grid-column: span 5; min-height: 236px;}
        .matrix-card.small{grid-column: span 4;}
        .matrix-card.banner{grid-column: 1 / -1; min-height:auto; display:flex; align-items:center; justify-content:space-between; gap:18px;}
        .banner-copy{max-width:720px}
        .banner-copy h3{margin-bottom:8px}
        .banner-actions{display:flex; gap:10px; flex-wrap:wrap}
        .compare-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:18px;
        }
        .compare-panel{
            padding:22px;
            border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
        }
        .compare-panel h3{
            margin:0 0 8px;
            font-size:1.15rem;
        }
        .compare-panel p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .compare-bars{
            display:grid;
            gap:14px;
        }
        .compare-row{
            display:grid;
            gap:7px;
        }
        .compare-row-head{
            display:flex;
            justify-content:space-between;
            gap:14px;
            align-items:center;
            font-size:.9rem;
            color:var(--muted);
        }
        .compare-duo{
            display:grid;
            gap:10px;
        }
        .compare-strip{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:12px;
        }
        .compare-chip{
            border-radius:18px;
            padding:16px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
        }
        .compare-chip strong{
            display:block;
            font-size:1.2rem;
            margin-bottom:6px;
        }
        .compare-chip span{
            color:var(--muted);
            font-size:.92rem;
        }
        .compare-chip.accent{
            background: linear-gradient(180deg, rgba(87,240,215,.12), rgba(255,255,255,.03));
            border-color: rgba(87,240,215,.2);
        }
        .compare-chip.rose{
            background: linear-gradient(180deg, rgba(255,93,207,.10), rgba(255,255,255,.03));
            border-color: rgba(255,93,207,.18);
        }
        .story-grid{
            display:grid;
            grid-template-columns: 1.05fr .95fr;
            gap:18px;
        }
        .story-panel{
            padding:24px;
            border-radius: var(--radius);
            background:
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
                radial-gradient(circle at 12% 18%, rgba(114,255,159,.08), transparent 30%);
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
        }
        .story-panel h3{
            margin:0 0 12px;
            font-size:1.25rem;
        }
        .story-panel p{
            margin:0;
            color:var(--muted);
        }
        .story-quote{
            margin-top:18px;
            padding:18px;
            border-radius:18px;
            background: rgba(0,0,0,.16);
            border:1px solid rgba(255,255,255,.06);
            color:#dce6ed;
        }
        .story-list{
            margin:18px 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:12px;
        }
        .story-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:#d7e1e9;
        }
        .story-list li::before{
            content:"";
            width:10px;
            height:10px;
            margin-top:7px;
            border-radius:50%;
            background: linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow: 0 0 0 4px rgba(87,240,215,.08);
            flex:0 0 auto;
        }
        .calendar-board{
            padding:24px;
            border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
        }
        .calendar-list{
            display:grid;
            gap:12px;
            margin-top:16px;
        }
        .calendar-item{
            display:grid;
            grid-template-columns: 82px 1fr;
            gap:14px;
            align-items:start;
            padding:14px;
            border-radius:18px;
            background: rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.06);
        }
        .calendar-date{
            display:inline-flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            min-height:76px;
            border-radius:16px;
            background: rgba(87,240,215,.08);
            border:1px solid rgba(87,240,215,.14);
            color:var(--accent);
        }
        .calendar-date strong{
            font-size:1.2rem;
            line-height:1;
        }
        .calendar-date span{
            font-size:.82rem;
            color:var(--muted);
            margin-top:4px;
        }
        .calendar-item h4{
            margin:0 0 6px;
            font-size:1rem;
        }
        .calendar-item p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .calendar-note{
            margin-top:16px;
            padding:14px 16px;
            border-radius:18px;
            border:1px dashed rgba(87,240,215,.22);
            color:#dce6ed;
            background: rgba(87,240,215,.05);
        }
        .news-layout{
            display:grid;
            grid-template-columns: 1fr 320px;
            gap:18px;
            align-items:start;
        }
        .news-grid{
            display:grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        .news-card{
            padding:20px;
            border-radius: var(--radius);
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
            display:flex;
            flex-direction:column;
            min-height: 220px;
        }
        .news-card:hover{
            transform: translateY(-3px);
            border-color: rgba(87,240,215,.22);
            box-shadow: 0 16px 34px rgba(0,0,0,.34);
        }
        .news-card h3{
            margin:12px 0 10px;
            font-size:1.08rem;
            line-height:1.45;
        }
        .news-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
            flex:1;
        }
        .news-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .news-pill{
            display:inline-flex;
            align-items:center;
            padding:7px 10px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.82rem;
        }
        .news-action{
            margin-top:14px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
        }
        .news-action .link{
            color:var(--accent);
            font-weight:700;
            display:inline-flex;
            align-items:center;
            gap:8px;
        }
        .news-side{
            padding:22px;
            border-radius: var(--radius);
            background:
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
                radial-gradient(circle at 20% 0%, rgba(255,93,207,.12), transparent 35%);
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
            position:sticky;
            top:96px;
        }
        .news-side h3{
            margin:0 0 10px;
            font-size:1.1rem;
        }
        .news-side p{
            margin:0 0 16px;
            color:var(--muted);
            font-size:.95rem;
        }
        .side-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:12px;
        }
        .side-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#dbe4ea;
        }
        .side-list li::before{
            content:"";
            width:9px;
            height:9px;
            border-radius:50%;
            background: linear-gradient(135deg, var(--accent), var(--accent-3));
            margin-top:8px;
            box-shadow: 0 0 0 4px rgba(255,93,207,.08);
            flex:0 0 auto;
        }
        .empty-state{
            padding:28px;
            border-radius: var(--radius);
            border:1px dashed rgba(255,255,255,.14);
            background: rgba(255,255,255,.03);
            color:#d8e2ea;
            text-align:center;
            min-height: 160px;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .faq-list{
            display:grid;
            gap:12px;
        }
        details.faq-item{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.08);
            background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            box-shadow: var(--shadow-soft);
            overflow:hidden;
            transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
        }
        details.faq-item[open]{
            border-color: rgba(87,240,215,.24);
            box-shadow: 0 16px 32px rgba(0,0,0,.3);
        }
        details.faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            justify-content:space-between;
            gap:16px;
            align-items:center;
            font-weight:700;
            color:var(--text);
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"+";
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:10px;
            color:var(--accent);
            border:1px solid rgba(87,240,215,.18);
            background: rgba(87,240,215,.05);
            flex:0 0 auto;
            transition: transform var(--transition), background var(--transition);
        }
        details.faq-item[open] summary::after{
            content:"−";
            transform: rotate(0deg);
            background: rgba(87,240,215,.1);
        }
        .faq-content{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .cta-shell{
            padding:24px;
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 88% 12%, rgba(255,93,207,.14), transparent 26%),
                radial-gradient(circle at 12% 20%, rgba(87,240,215,.12), transparent 28%),
                linear-gradient(180deg, rgba(20,28,39,.98), rgba(12,17,24,.95));
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow);
        }
        .cta-grid{
            display:grid;
            grid-template-columns: 1fr 390px;
            gap:18px;
            align-items:start;
        }
        .cta-copy h2{
            margin:0 0 10px;
            font-size: clamp(1.55rem, 2vw, 2.2rem);
        }
        .cta-copy p{
            margin:0;
            color:#dbe4ea;
            max-width:760px;
        }
        .form-panel{
            padding:22px;
            border-radius: 22px;
            background: rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            box-shadow: var(--shadow-soft);
        }
        .field-grid{
            display:grid;
            gap:14px;
            margin-top:14px;
        }
        .field-row{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:12px;
        }
        .field label{
            display:block;
            margin:0 0 8px;
            color:#dfe7ee;
            font-size:.92rem;
            font-weight:600;
        }
        .field input,
        .field textarea{
            width:100%;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.1);
            background: rgba(5,8,12,.5);
            color:var(--text);
            padding:13px 14px;
            transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
        }
        .field input::placeholder,
        .field textarea::placeholder{
            color:#6c7988;
        }
        .field input:focus,
        .field textarea:focus{
            border-color: rgba(87,240,215,.32);
            box-shadow: 0 0 0 4px rgba(87,240,215,.14);
            background: rgba(5,8,12,.68);
            outline:none;
        }
        .field textarea{
            min-height:120px;
            resize:vertical;
        }
        .form-note{
            color:var(--muted);
            font-size:.9rem;
            margin-top:10px;
        }
        .site-footer{
            margin-top: 18px;
            border-top:1px solid rgba(255,255,255,.08);
            background: linear-gradient(180deg, rgba(9,13,18,.7), rgba(6,9,13,.98));
        }
        .footer-grid{
            display:grid;
            grid-template-columns: 1.35fr .75fr .9fr;
            gap:20px;
            padding:28px 0;
        }
        .footer-brand strong{
            display:block;
            font-size:1.08rem;
            margin-bottom:8px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width: 520px;
        }
        .footer-col h4{
            margin:0 0 12px;
            font-size:1rem;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            transition: color var(--transition), transform var(--transition);
        }
        .footer-links a:hover{
            color:var(--accent);
            transform: translateX(2px);
        }
        .copyright{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:12px;
            padding: 16px 0 24px;
            color:var(--muted-2);
            border-top:1px solid rgba(255,255,255,.06);
            font-size:.92rem;
        }
        .footer-line{
            height:1px;
            background: linear-gradient(90deg, transparent, rgba(87,240,215,.35), rgba(255,93,207,.28), transparent);
            opacity:.75;
        }
        .mono{
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        }
        @media (max-width: 1180px){
            .hero-grid,
            .story-grid,
            .cta-grid,
            .news-layout{
                grid-template-columns: 1fr;
            }
            .news-side{
                position:static;
            }
            .matrix-card.large,
            .matrix-card.tall,
            .matrix-card.small,
            .matrix-card.banner{
                grid-column: span 12;
            }
        }
        @media (max-width: 1024px){
            .hero-meta{
                grid-template-columns:1fr;
            }
            .compare-grid{
                grid-template-columns:1fr;
            }
            .news-grid{
                grid-template-columns:1fr;
            }
            .footer-grid{
                grid-template-columns:1fr 1fr;
            }
            .footer-brand{
                grid-column:1 / -1;
            }
        }
        @media (max-width: 860px){
            .site-nav{
                position:fixed;
                inset:74px 16px auto 16px;
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:14px;
                padding:16px;
                border-radius:24px;
                background: rgba(10,14,20,.94);
                border:1px solid rgba(255,255,255,.08);
                box-shadow: var(--shadow);
                backdrop-filter: blur(18px);
            }
            .site-nav.is-open{display:flex}
            .nav-menu{
                width:100%;
                flex-direction:column;
                align-items:stretch;
                border-radius:20px;
                padding:10px;
            }
            .nav-menu a{
                width:100%;
                text-align:center;
            }
            .nav-actions{
                width:100%;
            }
            .nav-actions .btn{
                flex:1;
            }
            .nav-toggle{display:inline-flex}
            .nav-wrap{gap:12px}
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .matrix-grid{
                gap:14px;
            }
            .field-row{
                grid-template-columns:1fr;
            }
            .calendar-item{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 520px){
            .container{width:min(var(--container), calc(100% - 24px))}
            .hero-shell,
            .matrix-card,
            .compare-panel,
            .story-panel,
            .calendar-board,
            .news-card,
            .form-panel,
            .cta-shell{
                border-radius: 20px;
            }
            .hero-shell{
                padding:18px;
            }
            .hero h1{
                font-size: clamp(1.9rem, 9vw, 3.2rem);
            }
            .hero-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .hero-actions .btn{
                width:100%;
            }
            .hero-meta{
                gap:10px;
            }
            .meta-card{
                padding:12px 14px;
            }
            .matrix-card.banner{
                flex-direction:column;
                align-items:flex-start;
            }
            .cta-shell,
            .form-panel{
                padding:18px;
            }
            .footer-grid{
                grid-template-columns:1fr;
            }
            .copyright{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (min-width: 1440px){
            .container{
                width:min(1280px, calc(100% - 48px));
            }
            .hero-shell{
                padding: 30px;
            }
        }

/* roulang page: article */
:root{
            --bg: #090d12;
            --bg-2: #0f141b;
            --panel: #111821;
            --panel-2: #151e29;
            --panel-3: #1a2431;
            --line: rgba(255,255,255,.09);
            --line-2: rgba(112,255,224,.18);
            --text: #edf3f7;
            --muted: #96a4b3;
            --muted-2: #6f7d8d;
            --accent: #57f0d7;
            --accent-2: #72ff9f;
            --accent-3: #ff5dcf;
            --warn: #f4b15d;
            --shadow: 0 18px 50px rgba(0,0,0,.42);
            --shadow-soft: 0 12px 30px rgba(0,0,0,.28);
            --radius: 22px;
            --radius-sm: 16px;
            --radius-lg: 28px;
            --container: 1240px;
            --gap: 24px;
            --gap-lg: 32px;
            --space: 18px;
            --space-lg: 28px;
            --ring: 0 0 0 4px rgba(87,240,215,.18);
            --transition: 180ms ease;
            --grid: rgba(255,255,255,.045);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            background:
                radial-gradient(circle at 12% 10%, rgba(87,240,215,.12), transparent 20%),
                radial-gradient(circle at 86% 8%, rgba(255,93,207,.12), transparent 20%),
                radial-gradient(circle at 50% 0%, rgba(114,255,159,.08), transparent 18%),
                linear-gradient(180deg, #070a0f 0%, #0a0e14 46%, #070a0f 100%);
            color: var(--text);
            line-height:1.7;
            min-height:100vh;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(to right, var(--grid) 1px, transparent 1px),
                linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
            background-size: 70px 70px;
            mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,.22) 58%, transparent 100%);
            opacity:.45;
            z-index:0;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(87,240,215,.28);color:#fff}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
            position:relative;
            z-index:1;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter: blur(18px);
            background: rgba(7,10,15,.72);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .site-header::after{
            content:"";
            display:block;
            height:2px;
            background:linear-gradient(90deg, transparent 0%, rgba(87,240,215,.9) 18%, rgba(255,93,207,.75) 52%, rgba(114,255,159,.85) 82%, transparent 100%);
            opacity:.85;
        }
        .nav-wrap{
            min-height:74px;
            display:flex;
            align-items:center;
            gap:18px;
            justify-content:space-between;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
            font-weight:800;
            letter-spacing:.2px;
        }
        .brand-mark{
            width:40px;
            height:40px;
            border-radius:14px;
            position:relative;
            background:
                radial-gradient(circle at 30% 30%, rgba(87,240,215,.88), rgba(87,240,215,.18) 48%, transparent 68%),
                linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
            border:1px solid rgba(87,240,215,.28);
            box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 28px rgba(87,240,215,.18);
            flex:0 0 auto;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:9px;
            border-radius:12px;
            border:1px solid rgba(255,255,255,.14);
        }
        .brand-mark::after{
            inset:15px;
            border-color: rgba(255,93,207,.22);
            transform: rotate(18deg);
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .brand-text strong{
            font-size:1rem;
            line-height:1.1;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-text span{
            font-size:.82rem;
            color:var(--muted);
        }
        .nav-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.1);
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            color:var(--text);
            box-shadow:var(--shadow-soft);
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:16px;
        }
        .nav-menu{
            display:flex;
            align-items:center;
            gap:8px;
            padding:8px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background: rgba(255,255,255,.03);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
        }
        .nav-menu a{
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
            font-size:.94rem;
        }
        .nav-menu a:hover{
            color:var(--text);
            background:rgba(255,255,255,.06);
            transform:translateY(-1px);
        }
        .nav-menu a.active{
            color:#08120f;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 24px rgba(87,240,215,.22);
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:42px;
            padding:11px 16px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:750;
            line-height:1.1;
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition), color var(--transition), opacity var(--transition);
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0);opacity:.86}
        .btn-primary{
            color:#07100e;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 14px 34px rgba(87,240,215,.20), inset 0 1px 0 rgba(255,255,255,.35);
        }
        .btn-primary:hover{
            box-shadow:0 18px 42px rgba(87,240,215,.28), 0 0 0 1px rgba(255,255,255,.10) inset;
        }
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.12);
        }
        .btn-secondary:hover{
            border-color:rgba(87,240,215,.42);
            box-shadow:0 12px 28px rgba(0,0,0,.26), 0 0 24px rgba(87,240,215,.10);
        }
        .btn-ghost{
            color:var(--accent);
            background:rgba(87,240,215,.06);
            border-color:rgba(87,240,215,.18);
        }
        .btn-ghost:hover{
            border-color:rgba(87,240,215,.48);
            background:rgba(87,240,215,.1);
        }
        .nav-toggle:focus-visible,
        .btn:focus-visible,
        .chip:focus-visible,
        .mini-link:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        summary:focus-visible{
            outline:none;
            box-shadow: var(--ring), var(--shadow-soft);
        }

        .progress{
            position:fixed;
            left:0;
            top:0;
            height:3px;
            width:0;
            background:linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2));
            z-index:80;
            box-shadow:0 0 18px rgba(87,240,215,.45);
        }

        main{
            position:relative;
            z-index:1;
        }
        .section{
            padding:70px 0;
        }
        .article-hero{
            padding:44px 0 42px;
        }
        .breadcrumb{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:8px;
            margin:0 0 22px;
            color:var(--muted);
            font-size:.92rem;
        }
        .breadcrumb a{
            color:var(--accent);
            transition:color var(--transition), opacity var(--transition);
        }
        .breadcrumb a:hover{
            color:var(--accent-2);
        }
        .breadcrumb .sep{
            color:var(--muted-2);
        }
        .article-hero-grid{
            display:grid;
            grid-template-columns:minmax(0, 1.3fr) minmax(340px, .7fr);
            gap:var(--gap-lg);
            align-items:stretch;
        }
        .article-title-panel,
        .group-panel,
        .content-card,
        .side-card,
        .param-card,
        .shot-card,
        .faq-card,
        .cta-panel,
        .related-card{
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
                rgba(17,24,33,.86);
            box-shadow:var(--shadow-soft);
            border-radius:var(--radius);
        }
        .article-title-panel{
            padding:34px;
            position:relative;
            overflow:hidden;
        }
        .article-title-panel::before{
            content:"";
            position:absolute;
            width:260px;
            height:260px;
            border-radius:50%;
            right:-90px;
            top:-100px;
            background:radial-gradient(circle, rgba(87,240,215,.16), transparent 68%);
            pointer-events:none;
        }
        .article-title-panel::after{
            content:"";
            position:absolute;
            inset:auto 28px 0 28px;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(87,240,215,.55), transparent);
            opacity:.75;
        }
        .eyebrow{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .badge,
        .chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            border-radius:999px;
            padding:7px 11px;
            font-size:.84rem;
            line-height:1;
            border:1px solid rgba(255,255,255,.10);
            color:var(--muted);
            background:rgba(255,255,255,.035);
        }
        .badge-accent{
            color:#08120f;
            border-color:rgba(87,240,215,.58);
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            font-weight:800;
        }
        .badge-pink{
            color:#ffe8f8;
            border-color:rgba(255,93,207,.32);
            background:rgba(255,93,207,.10);
        }
        .badge-warn{
            color:#ffe5c1;
            border-color:rgba(244,177,93,.32);
            background:rgba(244,177,93,.10);
        }
        h1{
            margin:0;
            font-size:clamp(2rem, 4.2vw, 4.5rem);
            line-height:1.08;
            letter-spacing:-.04em;
            max-width:920px;
        }
        .article-summary{
            margin:20px 0 0;
            color:#c5d0db;
            font-size:1.05rem;
            max-width:880px;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:26px;
        }
        .meta-item{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:14px;
            color:var(--muted);
            background:rgba(255,255,255,.035);
            border:1px solid rgba(255,255,255,.08);
            font-size:.92rem;
        }
        .dot{
            width:7px;
            height:7px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 16px rgba(87,240,215,.5);
        }
        .group-panel{
            padding:24px;
            background:
                radial-gradient(circle at 70% 20%, rgba(255,93,207,.13), transparent 36%),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
                rgba(15,20,27,.92);
            display:flex;
            flex-direction:column;
            min-height:100%;
        }
        .group-top{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:flex-start;
            margin-bottom:20px;
        }
        .group-top h2{
            margin:0;
            font-size:1.2rem;
            line-height:1.35;
        }
        .live-dot{
            display:inline-flex;
            align-items:center;
            gap:7px;
            color:var(--accent-2);
            font-size:.86rem;
            white-space:nowrap;
        }
        .live-dot::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent-2);
            box-shadow:0 0 16px rgba(114,255,159,.55);
        }
        .group-count{
            padding:18px;
            border-radius:20px;
            background:rgba(0,0,0,.18);
            border:1px solid rgba(255,255,255,.08);
            margin-bottom:18px;
        }
        .group-count strong{
            display:block;
            font-size:2.45rem;
            line-height:1;
            letter-spacing:-.04em;
            color:var(--accent);
        }
        .group-count span{
            display:block;
            margin-top:8px;
            color:var(--muted);
            font-size:.92rem;
        }
        .progress-line{
            height:10px;
            border-radius:999px;
            background:rgba(255,255,255,.07);
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
            margin:18px 0 10px;
        }
        .progress-line i{
            display:block;
            width:76%;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--accent), var(--accent-3));
            box-shadow:0 0 18px rgba(87,240,215,.3);
        }
        .group-tip{
            color:var(--muted);
            font-size:.92rem;
            margin:0 0 20px;
        }
        .group-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
            margin-top:auto;
        }
        .hero-metrics{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
            margin-top:18px;
        }
        .metric-mini{
            padding:13px;
            border-radius:16px;
            background:rgba(255,255,255,.035);
            border:1px solid rgba(255,255,255,.08);
        }
        .metric-mini b{
            display:block;
            color:var(--text);
            font-size:1.18rem;
            line-height:1.1;
        }
        .metric-mini span{
            color:var(--muted);
            font-size:.82rem;
        }

        .article-layout{
            display:grid;
            grid-template-columns:minmax(0, 820px) minmax(280px, 1fr);
            gap:var(--gap-lg);
            align-items:start;
        }
        .content-card{
            overflow:hidden;
            background:
                linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
                rgba(13,18,25,.92);
        }
        .article-toolbar{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            padding:18px 22px;
            border-bottom:1px solid var(--line);
            background:rgba(255,255,255,.025);
        }
        .article-toolbar strong{
            font-size:1rem;
        }
        .toolbar-actions{
            display:flex;
            align-items:center;
            gap:9px;
            flex-wrap:wrap;
        }
        .mini-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:34px;
            padding:7px 11px;
            border-radius:999px;
            color:var(--accent);
            border:1px solid rgba(87,240,215,.18);
            background:rgba(87,240,215,.055);
            transition:transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
            font-size:.88rem;
        }
        .mini-link:hover{
            transform:translateY(-1px);
            color:var(--accent-2);
            border-color:rgba(87,240,215,.45);
            background:rgba(87,240,215,.09);
        }
        .article-body{
            padding:34px;
            color:#d8e1e8;
            font-size:1.04rem;
            line-height:1.92;
        }
        .article-body h2,
        .article-body h3,
        .article-body h4{
            color:var(--text);
            line-height:1.35;
            letter-spacing:-.02em;
            margin:2em 0 .75em;
        }
        .article-body h2{
            font-size:1.72rem;
            padding-left:14px;
            border-left:3px solid var(--accent);
        }
        .article-body h3{font-size:1.34rem}
        .article-body h4{font-size:1.12rem}
        .article-body p{margin:0 0 1.15em}
        .article-body a{
            color:var(--accent);
            border-bottom:1px solid rgba(87,240,215,.36);
            transition:color var(--transition), border-color var(--transition);
        }
        .article-body a:hover{
            color:var(--accent-2);
            border-color:rgba(114,255,159,.58);
        }
        .article-body ul,
        .article-body ol{
            padding-left:1.35em;
            margin:0 0 1.25em;
        }
        .article-body li{margin:.45em 0}
        .article-body blockquote{
            margin:1.6em 0;
            padding:18px 20px;
            border-radius:18px;
            border:1px solid rgba(87,240,215,.20);
            border-left:4px solid var(--accent);
            background:rgba(87,240,215,.055);
            color:#e8f8f5;
        }
        .article-body img{
            margin:24px auto;
            border-radius:20px;
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow-soft);
        }
        .article-body table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.10);
            border-radius:18px;
            margin:22px 0;
        }
        .article-body th,
        .article-body td{
            padding:13px 15px;
            border-bottom:1px solid rgba(255,255,255,.08);
            text-align:left;
        }
        .article-body th{
            color:var(--text);
            background:rgba(255,255,255,.055);
        }
        .article-body tr:last-child td{border-bottom:0}
        .not-found{
            padding:48px 34px;
            text-align:center;
        }
        .not-found h2{
            margin:0 0 12px;
            font-size:1.8rem;
        }
        .not-found p{
            color:var(--muted);
            margin:0 0 24px;
        }
        .side-stack{
            display:grid;
            gap:18px;
            position:sticky;
            top:104px;
        }
        .side-card{
            padding:22px;
        }
        .side-card h3{
            margin:0 0 14px;
            font-size:1.05rem;
        }
        .toc-list,
        .side-list{
            display:grid;
            gap:10px;
            margin:0;
            padding:0;
            list-style:none;
        }
        .toc-list a,
        .side-list a{
            display:flex;
            justify-content:space-between;
            gap:10px;
            padding:12px 13px;
            border-radius:14px;
            color:var(--muted);
            background:rgba(255,255,255,.025);
            border:1px solid rgba(255,255,255,.07);
            transition:transform var(--transition), border-color var(--transition), color var(--transition), background var(--transition);
        }
        .toc-list a:hover,
        .side-list a:hover{
            transform:translateX(3px);
            color:var(--text);
            border-color:rgba(87,240,215,.28);
            background:rgba(87,240,215,.055);
        }
        .param-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:14px;
        }
        .param-card{
            padding:18px;
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .param-card:hover{
            transform:translateY(-3px);
            border-color:rgba(87,240,215,.30);
            box-shadow:0 16px 38px rgba(0,0,0,.30);
        }
        .param-card span{
            display:block;
            color:var(--muted);
            font-size:.86rem;
            margin-bottom:8px;
        }
        .param-card strong{
            display:block;
            font-size:1.02rem;
            color:var(--text);
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:end;
            gap:20px;
            margin-bottom:22px;
        }
        .section-kicker{
            display:inline-flex;
            color:var(--accent);
            font-size:.9rem;
            font-weight:750;
            margin-bottom:8px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(1.5rem, 2.4vw, 2.35rem);
            line-height:1.2;
            letter-spacing:-.035em;
        }
        .section-head p{
            margin:8px 0 0;
            max-width:680px;
            color:var(--muted);
        }
        .shot-wrap{
            display:grid;
            grid-template-columns:minmax(0, 1fr) 320px;
            gap:18px;
        }
        .shot-card{
            min-height:330px;
            overflow:hidden;
            position:relative;
            background:
                radial-gradient(circle at 28% 24%, rgba(87,240,215,.16), transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(255,93,207,.12), transparent 32%),
                rgba(17,24,33,.9);
        }
        .shot-stage{
            position:absolute;
            inset:0;
            display:grid;
            place-items:center;
            padding:30px;
            opacity:0;
            transform:translateX(20px);
            transition:opacity 260ms ease, transform 260ms ease;
        }
        .shot-stage.active{
            opacity:1;
            transform:translateX(0);
        }
        .shot-mock{
            width:min(560px, 100%);
            aspect-ratio:16 / 10;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.12);
            background:
                linear-gradient(90deg, rgba(87,240,215,.24) 0 2px, transparent 2px 100%),
                linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
            box-shadow:var(--shadow);
            padding:18px;
            display:grid;
            grid-template-rows:36px 1fr;
            gap:16px;
        }
        .mock-dots{
            display:flex;
            gap:8px;
            align-items:center;
        }
        .mock-dots i{
            width:10px;
            height:10px;
            border-radius:50%;
            background:rgba(255,255,255,.20);
        }
        .mock-dots i:nth-child(1){background:var(--accent-3)}
        .mock-dots i:nth-child(2){background:var(--warn)}
        .mock-dots i:nth-child(3){background:var(--accent-2)}
        .mock-body{
            display:grid;
            grid-template-columns:1fr .72fr;
            gap:14px;
        }
        .mock-lines,
        .mock-panel{
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(0,0,0,.18);
            padding:16px;
        }
        .mock-lines span{
            display:block;
            height:10px;
            border-radius:999px;
            background:rgba(255,255,255,.12);
            margin-bottom:13px;
        }
        .mock-lines span:nth-child(1){width:82%;background:rgba(87,240,215,.36)}
        .mock-lines span:nth-child(2){width:64%}
        .mock-lines span:nth-child(3){width:72%}
        .mock-lines span:nth-child(4){width:46%;background:rgba(255,93,207,.22)}
        .mock-panel{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .mock-panel b{
            font-size:2rem;
            line-height:1;
            color:var(--accent);
        }
        .mock-panel em{
            font-style:normal;
            color:var(--muted);
            font-size:.92rem;
        }
        .shot-nav{
            display:grid;
            gap:12px;
        }
        .shot-tab{
            width:100%;
            text-align:left;
            padding:17px;
            border-radius:18px;
            color:var(--muted);
            background:rgba(255,255,255,.035);
            border:1px solid rgba(255,255,255,.08);
            transition:transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
        }
        .shot-tab:hover{
            transform:translateY(-2px);
            color:var(--text);
            border-color:rgba(87,240,215,.28);
        }
        .shot-tab.active{
            color:var(--text);
            border-color:rgba(87,240,215,.46);
            background:rgba(87,240,215,.075);
            box-shadow:0 0 26px rgba(87,240,215,.08);
        }
        .shot-tab strong{
            display:block;
            margin-bottom:4px;
        }
        .shot-tab span{
            display:block;
            font-size:.9rem;
            color:var(--muted);
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .related-card{
            padding:20px;
            min-height:170px;
            display:flex;
            flex-direction:column;
            gap:12px;
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .related-card:hover{
            transform:translateY(-3px);
            border-color:rgba(87,240,215,.28);
            box-shadow:0 18px 42px rgba(0,0,0,.3);
        }
        .related-card h3{
            margin:0;
            font-size:1.08rem;
            line-height:1.45;
        }
        .related-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .related-card .mini-link{
            margin-top:auto;
            align-self:flex-start;
        }
        .faq-list{
            display:grid;
            gap:14px;
        }
        .faq-card{
            overflow:hidden;
            transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .faq-card[open]{
            border-color:rgba(87,240,215,.36);
            background:rgba(87,240,215,.045);
            box-shadow:0 14px 34px rgba(0,0,0,.25);
        }
        .faq-card summary{
            list-style:none;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:20px 22px;
            color:var(--text);
            font-weight:800;
            cursor:pointer;
        }
        .faq-card summary::-webkit-details-marker{display:none}
        .faq-card summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:50%;
            display:grid;
            place-items:center;
            color:#07100e;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            flex:0 0 auto;
        }
        .faq-card[open] summary::after{content:"–"}
        .faq-card p{
            margin:0;
            padding:0 22px 22px;
            color:var(--muted);
        }
        .cta-panel{
            padding:28px;
            display:grid;
            grid-template-columns:minmax(0, 1fr) auto;
            gap:24px;
            align-items:center;
            background:
                radial-gradient(circle at 16% 40%, rgba(87,240,215,.14), transparent 28%),
                radial-gradient(circle at 84% 35%, rgba(255,93,207,.12), transparent 30%),
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
                rgba(15,20,27,.94);
        }
        .cta-panel h2{
            margin:0;
            font-size:clamp(1.45rem, 2.1vw, 2.2rem);
            line-height:1.22;
        }
        .cta-panel p{
            margin:10px 0 0;
            color:var(--muted);
            max-width:720px;
        }
        .cta-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .subscribe-bar{
            display:grid;
            grid-template-columns:1fr 1fr auto;
            gap:12px;
            margin-top:18px;
            max-width:840px;
        }
        .subscribe-bar input{
            width:100%;
            min-height:48px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(0,0,0,.18);
            color:var(--text);
            padding:0 15px;
            transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
        }
        .subscribe-bar input::placeholder{color:var(--muted-2)}
        .subscribe-bar input:focus{
            border-color:rgba(87,240,215,.5);
            background:rgba(0,0,0,.24);
        }

        .site-footer{
            padding:44px 0 30px;
            position:relative;
            z-index:1;
            background:rgba(5,8,12,.58);
            border-top:1px solid rgba(255,255,255,.06);
        }
        .footer-line{
            height:1px;
            margin-bottom:28px;
            background:linear-gradient(90deg, transparent, rgba(87,240,215,.55), rgba(255,93,207,.36), transparent);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.35fr .75fr 1fr;
            gap:28px;
        }
        .footer-brand strong{
            display:block;
            font-size:1.1rem;
            margin-bottom:10px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:520px;
        }
        .footer-col h4{
            margin:0 0 12px;
            font-size:.98rem;
            color:var(--text);
        }
        .footer-links{
            display:grid;
            gap:8px;
            color:var(--muted);
            font-size:.93rem;
        }
        .footer-links a,
        .footer-links span{
            color:var(--muted);
            transition:color var(--transition), transform var(--transition);
            overflow-wrap:anywhere;
        }
        .footer-links a:hover{
            color:var(--accent);
            transform:translateX(2px);
        }
        .mono{
            font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        }
        .copyright{
            margin-top:28px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.06);
            display:flex;
            justify-content:space-between;
            gap:16px;
            color:var(--muted-2);
            font-size:.9rem;
        }
        .back-top{
            position:fixed;
            right:20px;
            bottom:20px;
            z-index:40;
            width:46px;
            height:46px;
            border-radius:16px;
            border:1px solid rgba(87,240,215,.22);
            background:rgba(17,24,33,.82);
            color:var(--accent);
            box-shadow:var(--shadow-soft);
            opacity:0;
            transform:translateY(12px);
            pointer-events:none;
            transition:opacity var(--transition), transform var(--transition), border-color var(--transition), background var(--transition);
        }
        .back-top.show{
            opacity:1;
            transform:translateY(0);
            pointer-events:auto;
        }
        .back-top:hover{
            border-color:rgba(87,240,215,.5);
            background:rgba(87,240,215,.08);
        }

        @media (max-width:1280px){
            :root{--container:1120px}
            .article-hero-grid{grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr)}
            .article-layout{grid-template-columns:minmax(0, 760px) minmax(260px, 1fr)}
        }
        @media (max-width:1024px){
            .site-nav{
                position:absolute;
                top:74px;
                left:16px;
                right:16px;
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:12px;
                padding:14px;
                border-radius:22px;
                background:rgba(10,14,20,.96);
                border:1px solid rgba(255,255,255,.10);
                box-shadow:var(--shadow);
            }
            .site-nav.open{display:flex}
            .nav-toggle{display:inline-flex}
            .nav-menu{
                border-radius:18px;
                flex-direction:column;
                align-items:stretch;
            }
            .nav-menu a{text-align:center}
            .nav-actions{
                display:grid;
                grid-template-columns:1fr 1fr;
            }
            .article-hero-grid,
            .article-layout,
            .shot-wrap{
                grid-template-columns:1fr;
            }
            .side-stack{
                position:static;
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .param-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
            .related-grid{grid-template-columns:1fr 1fr}
            .footer-grid{grid-template-columns:1fr 1fr}
            .footer-brand{grid-column:1 / -1}
            .cta-panel{grid-template-columns:1fr}
            .cta-actions{justify-content:flex-start}
        }
        @media (max-width:768px){
            .container{width:min(100% - 28px, var(--container))}
            .section{padding:52px 0}
            .article-hero{padding:30px 0 34px}
            .article-title-panel,
            .group-panel,
            .article-body,
            .side-card,
            .cta-panel{
                padding:22px;
            }
            h1{font-size:clamp(1.85rem, 9vw, 3.1rem)}
            .article-toolbar{
                align-items:flex-start;
                flex-direction:column;
            }
            .group-actions,
            .hero-metrics,
            .side-stack,
            .related-grid,
            .subscribe-bar{
                grid-template-columns:1fr;
            }
            .section-head{
                display:block;
            }
            .shot-card{min-height:290px}
            .mock-body{grid-template-columns:1fr}
            .mock-panel{display:none}
            .footer-grid{grid-template-columns:1fr}
            .copyright{flex-direction:column}
        }
        @media (max-width:520px){
            .brand-text span{display:none}
            .brand-text strong{font-size:.94rem;max-width:210px}
            .nav-actions{grid-template-columns:1fr}
            .meta-row{display:grid;grid-template-columns:1fr}
            .param-grid{grid-template-columns:1fr}
            .article-title-panel{border-radius:20px}
            .breadcrumb{font-size:.86rem}
            .btn{width:100%}
            .toolbar-actions{width:100%}
            .mini-link{flex:1}
            .shot-mock{padding:13px;border-radius:20px}
        }