/* roulang page: index */
:root{
            --bg:#0C0812;
            --bg-soft:#120D1B;
            --bg-panel:#171022;
            --bg-panel-2:rgba(31,22,45,.86);
            --line:rgba(216,208,238,.12);
            --line-strong:rgba(139,92,246,.42);
            --text:#F3EEF8;
            --muted:#B9B1CA;
            --muted-2:#8E86A2;
            --accent:#8B5CF6;
            --accent-2:#C04D8F;
            --gold:#C6A15B;
            --gold-soft:rgba(198,161,91,.18);
            --shadow:0 18px 60px rgba(0,0,0,.34);
            --shadow-soft:0 12px 30px rgba(54,26,97,.18);
            --radius-xl:26px;
            --radius-lg:20px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1240px;
            --space-xxl:clamp(5rem, 7vw, 7rem);
            --space-xl:clamp(3.5rem, 5vw, 5.5rem);
            --space-lg:clamp(2rem, 3vw, 3rem);
            --space-md:1.1rem;
            --space-sm:.75rem;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:
                radial-gradient(circle at 20% 10%, rgba(139,92,246,.12), transparent 26%),
                radial-gradient(circle at 86% 18%, rgba(192,77,143,.10), transparent 22%),
                radial-gradient(circle at 50% 60%, rgba(198,161,91,.07), transparent 28%),
                linear-gradient(180deg, #0B0710 0%, #0C0812 22%, #120D1B 100%);
            color:var(--text);
            font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            line-height:1.85;
            overflow-x:hidden;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
            background-size:22px 22px;
            opacity:.12;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.82), transparent 90%);
            z-index:0;
        }
        a{color:inherit;text-decoration:none;transition:all .22s var(--ease)}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        ::selection{background:rgba(139,92,246,.35);color:#fff}
        .container{
            width:min(100% - 2rem, var(--container));
            margin-inline:auto;
            position:relative;
            z-index:1;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.55rem;
            padding:.42rem .82rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.88rem;
            letter-spacing:.02em;
            backdrop-filter:blur(8px);
        }
        .eyebrow i{color:var(--gold)}
        .section{
            padding:var(--space-xxl) 0;
            position:relative;
        }
        .section + .section{border-top:1px solid rgba(255,255,255,.03)}
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:1rem;
            margin-bottom:1.6rem;
        }
        .section-head h2,
        .section-head h3{
            margin:0;
            letter-spacing:-.02em;
            line-height:1.15;
        }
        .section-head h2{
            font-size:clamp(1.9rem, 3vw, 2.7rem);
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:58ch;
            font-size:1rem;
        }
        .section-link{
            color:#fff;
            font-weight:700;
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            border-bottom:1px solid rgba(139,92,246,.4);
            padding-bottom:.12rem;
        }
        .section-link:hover{color:#F9F6FF;border-bottom-color:var(--gold)}
        .glass-card{
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(24,16,36,.95), rgba(17,11,28,.92));
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .glass-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 18%, transparent 36%),
                radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 35%);
            pointer-events:none;
        }
        .glass-card:hover{border-color:var(--line-strong); box-shadow:0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(139,92,246,.1) inset}
        .btn{
            border:1px solid transparent;
            border-radius:999px;
            padding:.92rem 1.25rem;
            font-weight:800;
            letter-spacing:.01em;
            line-height:1;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.55rem;
            cursor:pointer;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
            min-height:48px;
        }
        .btn:focus, .menu-toggle:focus, .nav-link:focus, input:focus, select:focus, textarea:focus, .accordion-title:focus{
            outline:none;
            box-shadow:0 0 0 3px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.1) inset;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            box-shadow:0 12px 30px rgba(139,92,246,.26);
        }
        .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(139,92,246,.35)}
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:rgba(217,211,232,.18);
        }
        .btn-secondary:hover{transform:translateY(-2px); border-color:rgba(198,161,91,.42); color:#fff}
        .tag{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.35rem .7rem;
            border-radius:999px;
            border:1px solid rgba(217,211,232,.14);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.82rem;
        }
        .tag.soft-gold{border-color:rgba(198,161,91,.26); background:rgba(198,161,91,.08); color:#E7D5AB}
        .tag.soft-purple{border-color:rgba(139,92,246,.25); background:rgba(139,92,246,.08); color:#D9CCFF}
        .muted{color:var(--muted)}
        .small{font-size:.95rem}
        .line{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(217,211,232,.16), transparent);
            margin:1.25rem 0;
        }

        /* Header */
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            border-bottom:1px solid rgba(255,255,255,.04);
            background:rgba(10,7,16,.52);
            backdrop-filter:blur(14px);
            transition:all .28s var(--ease);
        }
        .site-header.is-scrolled{
            background:rgba(8,5,14,.88);
            box-shadow:0 16px 50px rgba(0,0,0,.26);
            border-bottom-color:rgba(139,92,246,.16);
        }
        .header-inner{
            padding:.9rem 0 0;
        }
        .brand-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            padding-bottom:.95rem;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:.72rem;
            min-width:0;
        }
        .brand-mark{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            color:#fff;
            background:
                radial-gradient(circle at 30% 28%, rgba(255,255,255,.22), transparent 36%),
                linear-gradient(135deg, rgba(139,92,246,.96), rgba(192,77,143,.88));
            box-shadow:0 8px 20px rgba(139,92,246,.25), inset 0 0 0 1px rgba(255,255,255,.12);
            font-size:1rem;
            flex:none;
        }
        .brand-text{
            font-size:1.12rem;
            font-weight:900;
            letter-spacing:.02em;
            white-space:nowrap;
        }
        .brand-note{
            display:flex;
            align-items:center;
            gap:.5rem;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .brand-note .tag{white-space:nowrap}
        .menu-toggle{
            display:none;
            width:46px;
            height:46px;
            border-radius:14px;
            border:1px solid rgba(217,211,232,.15);
            background:rgba(255,255,255,.03);
            color:var(--text);
        }
        .channel-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            padding:0 0 1rem;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:.35rem;
            flex-wrap:wrap;
        }
        .nav-link{
            padding:.7rem 1rem;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            font-weight:700;
            font-size:.95rem;
        }
        .nav-link:hover{
            color:#fff;
            background:rgba(255,255,255,.03);
            border-color:rgba(139,92,246,.18);
        }
        .nav-link.active{
            color:#fff;
            background:rgba(139,92,246,.12);
            border-color:rgba(139,92,246,.25);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
        }
        .nav-cta{
            padding:.75rem 1.1rem;
            border-radius:999px;
            background:linear-gradient(135deg, rgba(139,92,246,.95), rgba(192,77,143,.96));
            color:#fff;
            font-weight:800;
            box-shadow:0 12px 28px rgba(139,92,246,.22);
        }
        .nav-cta:hover{transform:translateY(-1px)}
        .tool-links{
            display:flex;
            align-items:center;
            gap:.65rem;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .tool-link{
            color:var(--muted);
            font-size:.9rem;
            border-bottom:1px solid transparent;
            padding-bottom:.1rem;
        }
        .tool-link:hover{color:#fff;border-color:rgba(198,161,91,.45)}
        .mobile-drawer{
            position:fixed;
            inset:0 0 0 auto;
            width:min(92vw, 380px);
            background:linear-gradient(180deg, rgba(17,11,27,.98), rgba(10,7,17,.98));
            border-left:1px solid rgba(255,255,255,.06);
            box-shadow:-16px 0 50px rgba(0,0,0,.4);
            transform:translateX(100%);
            opacity:0;
            pointer-events:none;
            transition:transform .3s var(--ease), opacity .3s var(--ease);
            z-index:60;
            padding:1.05rem;
            display:flex;
            flex-direction:column;
            gap:1rem;
        }
        .mobile-drawer.open{
            transform:translateX(0);
            opacity:1;
            pointer-events:auto;
        }
        .drawer-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            padding-bottom:.8rem;
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .drawer-close{
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid rgba(217,211,232,.15);
            background:rgba(255,255,255,.03);
            color:#fff;
        }
        .drawer-nav{
            display:grid;
            gap:.5rem;
        }
        .drawer-nav a{
            min-height:46px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:.85rem 1rem;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(217,211,232,.1);
            color:var(--text);
            font-weight:700;
        }
        .drawer-nav a:hover{border-color:rgba(139,92,246,.28); transform:translateX(2px)}
        .drawer-footer{
            margin-top:auto;
            color:var(--muted);
            font-size:.92rem;
            border-top:1px solid rgba(255,255,255,.06);
            padding-top:.9rem;
        }

        /* Hero */
        .hero{
            padding:clamp(3rem, 5vw, 5rem) 0 var(--space-xl);
            position:relative;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:clamp(1.25rem, 2vw, 2rem);
            align-items:stretch;
        }
        .hero-copy{
            display:flex;
            flex-direction:column;
            justify-content:center;
            gap:1.15rem;
            min-height:clamp(560px, 68vh, 740px);
            padding:clamp(1.4rem, 2vw, 2rem);
            border-radius:var(--radius-xl);
            border:1px solid rgba(255,255,255,.06);
            background:
                radial-gradient(circle at 15% 15%, rgba(139,92,246,.12), transparent 28%),
                radial-gradient(circle at 85% 22%, rgba(198,161,91,.08), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .hero-copy::after{
            content:"";
            position:absolute;
            right:-5%;
            top:-10%;
            width:260px;
            height:260px;
            border-radius:50%;
            border:1px solid rgba(139,92,246,.18);
            box-shadow:0 0 0 1px rgba(198,161,91,.08) inset;
            opacity:.66;
            animation:drift 14s ease-in-out infinite;
        }
        .hero-copy::before{
            content:"";
            position:absolute;
            left:-8%;
            bottom:-14%;
            width:300px;
            height:300px;
            border-radius:50%;
            border:1px solid rgba(198,161,91,.1);
            opacity:.52;
            animation:drift2 18s ease-in-out infinite;
        }
        @keyframes drift{
            0%,100%{transform:translate3d(0,0,0) scale(1)}
            50%{transform:translate3d(-10px,16px,0) scale(1.02)}
        }
        @keyframes drift2{
            0%,100%{transform:translate3d(0,0,0) scale(1)}
            50%{transform:translate3d(14px,-12px,0) scale(1.03)}
        }
        .hero-kicker{
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
            align-items:center;
        }
        .hero h1{
            margin:0;
            font-size:clamp(2.55rem, 5vw, 4.2rem);
            line-height:1.04;
            letter-spacing:-.04em;
            max-width:12ch;
        }
        .hero h1 .accent{
            background:linear-gradient(135deg, #FFF, #DCCBFF 24%, #9B7CFF 56%, #E9D9B1 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }
        .hero p{
            margin:0;
            font-size:clamp(1rem, 1.15vw, 1.1rem);
            color:var(--muted);
            max-width:62ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.8rem;
            align-items:center;
            margin-top:.25rem;
        }
        .hero-micro{
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
            color:var(--muted);
            font-size:.92rem;
        }
        .hero-micro span{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.42rem .65rem;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(217,211,232,.12);
        }
        .hero-stage{
            display:grid;
            grid-template-rows:auto 1fr auto;
            gap:1rem;
            padding:1rem;
            min-height:clamp(560px, 68vh, 740px);
        }
        .stage-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:1rem;
            padding:.35rem .2rem 0;
        }
        .stage-title{
            display:flex;
            flex-direction:column;
            gap:.2rem;
        }
        .stage-title strong{font-size:1.02rem}
        .stage-title span{color:var(--muted);font-size:.9rem}
        .stage-badge{
            padding:.48rem .7rem;
            border-radius:999px;
            background:rgba(198,161,91,.12);
            border:1px solid rgba(198,161,91,.24);
            color:#EEDAB5;
            font-size:.86rem;
            white-space:nowrap;
        }
        .stage-focus{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:1rem;
            align-items:stretch;
            min-height:340px;
        }
        .stage-panel{
            border-radius:24px;
            border:1px solid rgba(217,211,232,.11);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
                linear-gradient(180deg, rgba(30,21,45,.92), rgba(17,12,27,.96));
            position:relative;
            overflow:hidden;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
        }
        .stage-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(110deg, transparent 0%, rgba(255,255,255,.04) 15%, transparent 30%),
                radial-gradient(circle at 30% 30%, rgba(139,92,246,.22), transparent 28%),
                radial-gradient(circle at 80% 10%, rgba(198,161,91,.12), transparent 22%);
            pointer-events:none;
        }
        .panel-main{
            padding:1.05rem;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:340px;
        }
        .panel-sigil{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
        }
        .sigil{
            width:58px;
            height:58px;
            border-radius:18px;
            display:grid;
            place-items:center;
            background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.2), transparent 34%), linear-gradient(135deg, rgba(139,92,246,.95), rgba(192,77,143,.9));
            box-shadow:0 14px 30px rgba(139,92,246,.26);
            font-size:1.15rem;
        }
        .panel-meta{
            display:grid;
            gap:.5rem;
            justify-items:end;
            text-align:right;
        }
        .panel-meta .tag{font-size:.8rem}
        .panel-visual{
            margin-top:1rem;
            border-radius:22px;
            border:1px solid rgba(217,211,232,.1);
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), transparent),
                radial-gradient(circle at 14% 18%, rgba(139,92,246,.14), transparent 24%),
                radial-gradient(circle at 86% 26%, rgba(198,161,91,.12), transparent 18%),
                linear-gradient(180deg, rgba(14,10,22,.95), rgba(9,6,14,.98));
            min-height:210px;
            padding:1rem;
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:.85rem;
        }
        .panel-visual .visual-card{
            border-radius:18px;
            border:1px solid rgba(217,211,232,.12);
            background:rgba(255,255,255,.03);
            padding:.95rem;
            display:flex;
            flex-direction:column;
            gap:.55rem;
            min-height:100%;
        }
        .visual-card h3{
            margin:0;
            font-size:1.02rem;
            line-height:1.2;
        }
        .visual-card p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
        }
        .micro-list{
            margin:0;
            padding-left:1.1rem;
            color:#EAE3F4;
            font-size:.92rem;
        }
        .micro-list li + li{margin-top:.32rem}
        .visual-mini{
            display:grid;
            gap:.75rem;
        }
        .mini-box{
            border-radius:18px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
            padding:.85rem .9rem;
        }
        .mini-box strong{display:block;font-size:1.02rem;margin-bottom:.25rem}
        .mini-box span{color:var(--muted);font-size:.9rem}
        .stage-footer{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            color:var(--muted);
            font-size:.88rem;
            padding:0 .2rem .2rem;
            flex-wrap:wrap;
        }
        .stage-footer .dots{
            display:flex;
            gap:.4rem;
        }
        .stage-footer .dots i{
            width:8px;height:8px;border-radius:999px;background:rgba(139,92,246,.8);display:block
        }

        /* Services */
        .service-grid{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:1rem;
        }
        .service-main{
            padding:1.2rem;
            min-height:290px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .service-main-top{
            display:flex;
            justify-content:space-between;
            gap:1rem;
            align-items:flex-start;
        }
        .service-main-top h3{
            margin:.2rem 0 .5rem;
            font-size:clamp(1.4rem,2.5vw,2rem);
            line-height:1.15;
        }
        .service-main-top p{
            margin:0;
            color:var(--muted);
            max-width:52ch;
        }
        .service-points{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:.8rem;
            margin-top:1rem;
        }
        .point{
            border:1px solid rgba(217,211,232,.11);
            border-radius:18px;
            padding:.85rem;
            background:rgba(255,255,255,.02);
            min-height:104px;
        }
        .point i{
            display:inline-grid;
            place-items:center;
            width:34px;
            height:34px;
            border-radius:12px;
            background:rgba(139,92,246,.12);
            color:#E4D7FF;
            margin-bottom:.65rem;
        }
        .point strong{display:block;font-size:1rem;margin-bottom:.25rem}
        .point span{color:var(--muted);font-size:.9rem}
        .cap-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1rem;
        }
        .cap-card{
            padding:1rem;
            min-height:138px;
            display:flex;
            flex-direction:column;
            gap:.55rem;
        }
        .cap-card i{
            color:var(--gold);
            font-size:1.1rem;
        }
        .cap-card h4{margin:0;font-size:1.08rem}
        .cap-card p{margin:0;color:var(--muted);font-size:.92rem}
        .cap-card a{
            margin-top:auto;
            color:#fff;
            font-weight:700;
            font-size:.92rem;
            display:inline-flex;
            align-items:center;
            gap:.35rem;
        }

        /* Data */
        .data-band{
            padding:1rem;
        }
        .data-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:1rem;
        }
        .metric{
            border-radius:20px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
            padding:1.05rem;
            min-height:148px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            position:relative;
            overflow:hidden;
        }
        .metric::after{
            content:"";
            position:absolute;
            right:-18px;
            top:-18px;
            width:82px;
            height:82px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(139,92,246,.26), transparent 68%);
            opacity:.9;
        }
        .metric .num{
            font-size:clamp(2rem,3.6vw,3rem);
            font-weight:900;
            line-height:1;
            background:linear-gradient(135deg, #F5F1FF 0%, #CBB7FF 24%, #8B5CF6 55%, #E8D1A1 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }
        .metric .label{color:#F2ECFF;font-weight:700}
        .metric .desc{color:var(--muted);font-size:.9rem}
        .notice-strip{
            margin-top:1rem;
            padding:.9rem 1rem;
            border-radius:18px;
            border:1px solid rgba(198,161,91,.16);
            background:rgba(198,161,91,.06);
            color:#E5D5AE;
            font-size:.92rem;
            display:flex;
            gap:.65rem;
            align-items:flex-start;
        }
        .notice-strip i{color:var(--gold);margin-top:.2rem}

        /* Scenarios */
        .scene-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:1rem;
            align-items:stretch;
        }
        .scene-feature{
            padding:1.1rem;
            display:grid;
            grid-template-columns:1fr .95fr;
            gap:1rem;
            min-height:360px;
        }
        .scene-feature .visual{
            border-radius:22px;
            border:1px solid rgba(217,211,232,.11);
            background:
                radial-gradient(circle at 30% 25%, rgba(139,92,246,.16), transparent 30%),
                radial-gradient(circle at 82% 18%, rgba(198,161,91,.12), transparent 22%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
                linear-gradient(180deg, rgba(14,10,22,.94), rgba(9,6,14,.98));
            padding:1rem;
            position:relative;
            overflow:hidden;
        }
        .scene-feature .visual::before{
            content:"";
            position:absolute;
            inset:14px;
            border-radius:18px;
            border:1px solid rgba(139,92,246,.14);
            opacity:.75;
        }
        .thumbnail{
            border-radius:18px;
            height:100%;
            min-height:250px;
            background:
                linear-gradient(135deg, rgba(139,92,246,.18), rgba(192,77,143,.08)),
                linear-gradient(180deg, rgba(255,255,255,.04), transparent);
            display:flex;
            align-items:flex-end;
            padding:1rem;
            color:#EDE7FB;
            font-weight:700;
            letter-spacing:.01em;
            position:relative;
        }
        .thumbnail::after{
            content:"";
            position:absolute;
            inset:16px;
            border-radius:16px;
            border:1px dashed rgba(217,211,232,.12);
        }
        .scene-copy{
            display:flex;
            flex-direction:column;
            gap:.7rem;
            justify-content:space-between;
        }
        .scene-copy h3{
            margin:.25rem 0 0;
            font-size:1.45rem;
            line-height:1.18;
        }
        .scene-copy p{margin:0;color:var(--muted)}
        .bullet-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:.55rem;
        }
        .bullet-list li{
            display:flex;
            gap:.55rem;
            align-items:flex-start;
            color:#ECE5FA;
            background:rgba(255,255,255,.02);
            border:1px solid rgba(217,211,232,.09);
            border-radius:16px;
            padding:.75rem .8rem;
        }
        .bullet-list i{color:var(--gold);margin-top:.22rem}
        .scene-side{
            display:grid;
            gap:1rem;
        }
        .scene-side .scene-card{
            padding:1rem;
            min-height:170px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .scene-card h4{margin:0;font-size:1.05rem}
        .scene-card p{margin:0;color:var(--muted);font-size:.92rem}
        .scene-card a{
            margin-top:.6rem;
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            color:#fff;
            font-weight:700;
            width:fit-content;
        }

        /* Guide */
        .guide-grid{
            display:grid;
            grid-template-columns:.88fr 1.12fr;
            gap:1rem;
        }
        .guide-box{
            padding:1.1rem;
        }
        .timeline{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:1rem;
        }
        .timeline li{
            display:grid;
            grid-template-columns:42px 1fr;
            gap:.9rem;
            align-items:flex-start;
            position:relative;
        }
        .timeline li:not(:last-child)::after{
            content:"";
            position:absolute;
            left:20px;
            top:42px;
            bottom:-12px;
            width:1px;
            background:linear-gradient(180deg, rgba(139,92,246,.36), rgba(198,161,91,.08));
        }
        .step-dot{
            width:42px;
            height:42px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(139,92,246,.96), rgba(192,77,143,.92));
            color:#fff;
            box-shadow:0 12px 26px rgba(139,92,246,.22);
            position:relative;
            z-index:1;
        }
        .step-content{
            padding-bottom:.2rem;
        }
        .step-content strong{display:block;font-size:1.04rem;margin-bottom:.18rem}
        .step-content p{margin:0;color:var(--muted);font-size:.95rem}
        .checklist{
            display:grid;
            gap:.8rem;
        }
        .check-item{
            display:flex;
            gap:.7rem;
            align-items:flex-start;
            padding:.9rem 1rem;
            border-radius:18px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
        }
        .check-item i{
            color:var(--gold);
            margin-top:.2rem;
            width:22px;
        }
        .check-item strong{display:block;margin-bottom:.2rem}
        .check-item span{color:var(--muted);font-size:.92rem}

        /* Latest */
        .latest-grid{
            display:grid;
            grid-template-columns:.95fr 1.05fr;
            gap:1rem;
            align-items:stretch;
        }
        .latest-feature{
            padding:1.15rem;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:520px;
        }
        .latest-feature h3{
            margin:.8rem 0 .5rem;
            font-size:clamp(1.5rem, 2.5vw, 2.1rem);
            line-height:1.14;
        }
        .latest-feature p{margin:0;color:var(--muted)}
        .latest-focus{
            margin-top:1rem;
            display:grid;
            gap:.85rem;
        }
        .latest-focus .mini{
            padding:.85rem .95rem;
            border-radius:18px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
            display:flex;
            gap:.7rem;
            align-items:flex-start;
        }
        .latest-focus .mini i{
            color:var(--gold);
            margin-top:.2rem;
        }
        .latest-list{
            padding:1rem;
            min-height:520px;
        }
        .latest-items{
            display:grid;
            gap:.8rem;
        }
        .post-item{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:.85rem;
            align-items:start;
            padding:1rem;
            border-radius:20px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
            transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
        }
        .post-item:hover{
            transform:translateY(-3px);
            border-color:rgba(139,92,246,.28);
            background:rgba(255,255,255,.045);
        }
        .post-badge{
            width:46px;
            height:46px;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:rgba(139,92,246,.13);
            color:#DCCBFF;
            font-weight:800;
            flex:none;
        }
        .post-item h4{
            margin:0 0 .25rem;
            font-size:1.02rem;
            line-height:1.3;
        }
        .post-item p{
            margin:.15rem 0 .4rem;
            color:var(--muted);
            font-size:.92rem;
        }
        .post-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            color:var(--muted-2);
            font-size:.84rem;
        }
        .post-item .read-more{
            margin-top:.2rem;
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            color:#FFF;
            font-weight:700;
            font-size:.9rem;
        }
        .empty-state{
            min-height:100%;
            border-radius:22px;
            border:1px dashed rgba(217,211,232,.14);
            background:rgba(255,255,255,.02);
            display:grid;
            place-items:center;
            padding:1.5rem;
            color:var(--muted);
            text-align:center;
            gap:.6rem;
        }
        .empty-state i{font-size:2rem;color:rgba(139,92,246,.7)}

        /* FAQ */
        .faq-wrap{
            padding:1rem;
        }
        .accordion{
            border:none;
            background:transparent;
        }
        .accordion-item{
            margin-bottom:.9rem;
            border:1px solid rgba(217,211,232,.1);
            border-radius:18px;
            overflow:hidden;
            background:rgba(255,255,255,.025);
        }
        .accordion-title{
            color:#fff;
            font-size:1rem;
            font-weight:800;
            padding:1rem 1.1rem;
            border:none;
            background:transparent;
            position:relative;
        }
        .accordion-title::before{
            content:"+";
            font-size:1.35rem;
            line-height:1;
            color:var(--gold);
            right:1rem;
            left:auto;
            top:50%;
            transform:translateY(-50%);
            margin-top:0;
        }
        .is-active > .accordion-title::before{
            content:"–";
            color:#DCCBFF;
        }
        .accordion-title:hover{background:rgba(255,255,255,.03)}
        .accordion-content{
            border:none;
            padding:0 1.1rem 1rem;
            color:var(--muted);
            background:transparent;
            border-left:3px solid rgba(139,92,246,.55);
            margin-left:1rem;
            margin-bottom:1rem;
        }

        /* Contact */
        .contact-grid{
            display:grid;
            grid-template-columns:.95fr 1.05fr;
            gap:1rem;
            align-items:stretch;
        }
        .contact-card,
        .form-card{
            padding:1.1rem;
        }
        .contact-card h3,
        .form-card h3{
            margin:.4rem 0 .5rem;
            font-size:clamp(1.3rem, 2vw, 1.8rem);
        }
        .contact-card p,
        .form-card p{
            margin:0;
            color:var(--muted);
        }
        .feedback-list{
            margin:1rem 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:.65rem;
        }
        .feedback-list li{
            display:flex;
            align-items:flex-start;
            gap:.6rem;
            padding:.85rem .95rem;
            border-radius:16px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
        }
        .feedback-list i{color:var(--gold);margin-top:.2rem}
        .feedback-list strong{display:block}
        .feedback-list span{color:var(--muted);font-size:.92rem}
        .form-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:.85rem;
            margin-top:1rem;
        }
        .field{
            display:grid;
            gap:.45rem;
        }
        .field.full{grid-column:1 / -1}
        .field label{
            font-size:.92rem;
            color:#EDE6FA;
            font-weight:700;
        }
        .field input,
        .field select,
        .field textarea{
            width:100%;
            color:var(--text);
            background:rgba(255,255,255,.03);
            border:1px solid rgba(217,211,232,.12);
            border-radius:16px;
            padding:.86rem 1rem;
            min-height:48px;
            transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
        }
        .field textarea{min-height:142px;resize:vertical}
        .field input::placeholder,
        .field textarea::placeholder{color:rgba(185,177,202,.72)}
        .field input:hover,
        .field select:hover,
        .field textarea:hover{border-color:rgba(139,92,246,.22)}
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.8rem;
            align-items:center;
            margin-top:1rem;
        }
        .form-note{
            color:var(--muted);
            font-size:.92rem;
        }

        /* Footer */
        .site-footer{
            padding:2.2rem 0 2.8rem;
            border-top:1px solid rgba(255,255,255,.05);
            margin-top:var(--space-xl);
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
                linear-gradient(180deg, rgba(10,7,16,.22), rgba(10,7,16,.54));
        }
        .footer-inner{
            padding-top:1.25rem;
            border-top:1px solid rgba(217,211,232,.08);
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:1rem;
        }
        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:.8rem;
        }
        .footer-brand .brand-text{font-size:1.16rem}
        .footer-brand p{margin:0;color:var(--muted);max-width:58ch}
        .footer-links{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:.8rem;
        }
        .footer-links a{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.7rem .9rem;
            border-radius:14px;
            border:1px solid rgba(217,211,232,.1);
            background:rgba(255,255,255,.03);
            color:var(--text);
        }
        .footer-links a:hover{border-color:rgba(139,92,246,.24);transform:translateY(-2px)}
        .copyright{
            grid-column:1 / -1;
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:.8rem;
            color:var(--muted-2);
            font-size:.9rem;
            padding-top:.5rem;
        }

        /* Progress & back top */
        .scroll-progress{
            position:fixed;
            top:0;
            left:0;
            height:3px;
            width:0;
            background:linear-gradient(90deg, var(--gold), var(--accent), var(--accent-2));
            z-index:90;
            box-shadow:0 0 18px rgba(139,92,246,.55);
        }
        .back-top{
            position:fixed;
            right:1rem;
            bottom:1rem;
            width:48px;
            height:48px;
            border-radius:16px;
            border:1px solid rgba(217,211,232,.14);
            background:rgba(10,7,16,.78);
            color:#fff;
            display:grid;
            place-items:center;
            box-shadow:var(--shadow);
            z-index:55;
            opacity:0;
            pointer-events:none;
            transform:translateY(8px);
            transition:all .24s var(--ease);
        }
        .back-top.show{
            opacity:1;
            pointer-events:auto;
            transform:translateY(0);
        }

        /* Foundation overrides */
        .grid-x{margin-left:0;margin-right:0}
        .grid-x > .cell{padding-left:0;padding-right:0}
        .grid-margin-x > .cell{padding-left:.5rem;padding-right:.5rem}
        .accordion-title::before{border:none}
        .menu a{display:inline-flex}

        /* Responsive */
        @media (max-width: 1199px){
            .hero-grid,
            .service-grid,
            .scene-grid,
            .guide-grid,
            .latest-grid,
            .contact-grid,
            .footer-inner{
                grid-template-columns:1fr;
            }
            .hero-copy,
            .hero-stage{
                min-height:auto;
            }
            .stage-focus,
            .scene-feature{
                grid-template-columns:1fr;
            }
            .service-points,
            .data-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .cap-grid{
                grid-template-columns:1fr 1fr;
            }
        }
        @media (max-width: 767px){
            .brand-row{padding-bottom:.75rem}
            .channel-row{display:none}
            .tool-links{display:none}
            .menu-toggle{display:grid;place-items:center}
            .hero{
                padding-top:2rem;
            }
            .hero h1{max-width:100%;font-size:clamp(2.15rem, 8vw, 3rem)}
            .hero-copy{padding:1.05rem}
            .hero-actions{flex-direction:column;align-items:stretch}
            .hero-actions .btn{width:100%}
            .service-points,
            .data-grid,
            .cap-grid,
            .form-grid,
            .footer-links{
                grid-template-columns:1fr;
            }
            .panel-visual{
                grid-template-columns:1fr;
            }
            .stage-footer{align-items:flex-start}
            .section{padding:4rem 0}
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .scene-feature{
                grid-template-columns:1fr;
            }
            .latest-feature,
            .latest-list{
                min-height:auto;
            }
            .brand-text{font-size:1rem}
            .btn{width:auto}
            .copyright{
                flex-direction:column;
            }
        }
        @media (max-width: 520px){
            .container{width:min(100% - 1.1rem, var(--container))}
            .hero-copy,
            .hero-stage,
            .service-main,
            .contact-card,
            .form-card,
            .latest-feature,
            .latest-list,
            .faq-wrap,
            .guide-box,
            .data-band,
            .scene-feature,
            .scene-side .scene-card{
                padding:.9rem;
            }
            .hero-copy{border-radius:22px}
            .glass-card{border-radius:22px}
            .post-item{grid-template-columns:1fr}
            .post-badge{width:42px;height:42px}
        }
        @media (prefers-reduced-motion: reduce){
            *, *::before, *::after{
                animation:none !important;
                scroll-behavior:auto !important;
                transition:none !important;
            }
        }

/* roulang page: article */
:root{
            --bg:#0C0812;
            --bg-soft:#120D1B;
            --bg-panel:#171022;
            --bg-panel-2:rgba(31,22,45,.86);
            --line:rgba(216,208,238,.12);
            --line-strong:rgba(139,92,246,.42);
            --text:#F3EEF8;
            --muted:#B9B1CA;
            --muted-2:#8E86A2;
            --accent:#8B5CF6;
            --accent-2:#C04D8F;
            --gold:#C6A15B;
            --gold-soft:rgba(198,161,91,.18);
            --shadow:0 18px 60px rgba(0,0,0,.34);
            --shadow-soft:0 12px 30px rgba(54,26,97,.18);
            --radius-xl:26px;
            --radius-lg:20px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1240px;
            --space-xxl:clamp(5rem, 7vw, 7rem);
            --space-xl:clamp(3.5rem, 5vw, 5.5rem);
            --space-lg:clamp(2rem, 3vw, 3rem);
            --space-md:1.1rem;
            --space-sm:.75rem;
            --ease:cubic-bezier(.2,.8,.2,1);
        }

        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            background:
                radial-gradient(circle at 20% 10%, rgba(139,92,246,.12), transparent 26%),
                radial-gradient(circle at 86% 18%, rgba(192,77,143,.10), transparent 22%),
                radial-gradient(circle at 50% 60%, rgba(198,161,91,.07), transparent 28%),
                linear-gradient(180deg, #0B0710 0%, #0C0812 22%, #120D1B 100%);
            color:var(--text);
            font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
            line-height:1.85;
            overflow-x:hidden;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
            background-size:22px 22px;
            opacity:.12;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.82), transparent 90%);
            z-index:0;
        }
        body::after{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(90deg, transparent 0, transparent calc(50% - 620px), rgba(139,92,246,.08) calc(50% - 619px), rgba(139,92,246,.08) calc(50% - 618px), transparent calc(50% - 617px), transparent calc(50% + 617px), rgba(139,92,246,.08) calc(50% + 618px), rgba(139,92,246,.08) calc(50% + 619px), transparent calc(50% + 620px), transparent 100%);
            opacity:.24;
            z-index:0;
        }
        a{color:inherit;text-decoration:none;transition:all .22s var(--ease)}
        a:hover{color:#fff}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        ::selection{background:rgba(139,92,246,.35);color:#fff}

        .container{
            width:min(100% - 2rem, var(--container));
            margin-inline:auto;
            position:relative;
            z-index:1;
        }

        .skip-link{
            position:absolute;
            left:-9999px;
            top:auto;
            width:1px;
            height:1px;
            overflow:hidden;
        }
        .skip-link:focus{
            left:1rem;
            top:1rem;
            width:auto;
            height:auto;
            z-index:9999;
            padding:.8rem 1rem;
            border-radius:999px;
            background:#fff;
            color:#000;
        }

        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.55rem;
            padding:.42rem .82rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.88rem;
            letter-spacing:.02em;
            backdrop-filter:blur(8px);
        }
        .eyebrow i{color:var(--gold)}

        .tag{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.44rem .78rem;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:.82rem;
            line-height:1;
            white-space:nowrap;
        }
        .tag i{color:var(--gold)}

        .btn{
            border:1px solid transparent;
            border-radius:999px;
            padding:.92rem 1.25rem;
            font-weight:800;
            letter-spacing:.01em;
            line-height:1;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.55rem;
            cursor:pointer;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
            min-height:48px;
            user-select:none;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0)}
        .btn:focus,
        .menu-toggle:focus,
        .nav-link:focus,
        input:focus,
        select:focus,
        textarea:focus,
        .accordion-title:focus,
        .feedback-link:focus,
        .toc-link:focus{
            outline:none;
            box-shadow:0 0 0 3px rgba(139,92,246,.28), 0 0 0 1px rgba(255,255,255,.1) inset;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
            box-shadow:0 12px 30px rgba(139,92,246,.26);
        }
        .btn-primary:hover{box-shadow:0 16px 36px rgba(139,92,246,.35), 0 0 0 1px rgba(255,255,255,.06) inset}
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:rgba(216,208,238,.16);
            box-shadow:0 10px 24px rgba(0,0,0,.16);
        }
        .btn-secondary:hover{
            border-color:var(--line-strong);
            background:rgba(139,92,246,.10);
            box-shadow:0 14px 30px rgba(0,0,0,.22), 0 0 0 1px rgba(139,92,246,.12) inset;
        }
        .btn-gold{
            color:#120D1B;
            background:linear-gradient(135deg, #EBC37A 0%, #C6A15B 100%);
            box-shadow:0 12px 28px rgba(198,161,91,.22);
        }
        .btn-gold:hover{box-shadow:0 16px 34px rgba(198,161,91,.28)}
        .btn-link{
            color:var(--muted);
            padding:0;
            min-height:auto;
            border:none;
            background:none;
        }
        .btn-link:hover{color:#fff}

        .glass-card{
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(24,16,36,.95), rgba(17,11,28,.92));
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .glass-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 18%, transparent 36%),
                radial-gradient(circle at top right, rgba(139,92,246,.16), transparent 35%);
            pointer-events:none;
        }
        .glass-card:hover{
            border-color:var(--line-strong);
            box-shadow:0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(139,92,246,.1) inset;
        }

        .section{
            padding:var(--space-xxl) 0;
            position:relative;
        }
        .section + .section{border-top:1px solid rgba(255,255,255,.03)}
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:1rem;
            margin-bottom:1.6rem;
        }
        .section-head h2,
        .section-head h3{
            margin:0;
            letter-spacing:-.02em;
            line-height:1.15;
        }
        .section-head h2{
            font-size:clamp(1.9rem, 3vw, 2.7rem);
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:58ch;
            font-size:1rem;
        }
        .section-link{
            color:#fff;
            font-weight:700;
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            border-bottom:1px solid rgba(139,92,246,.4);
            padding-bottom:.12rem;
            white-space:nowrap;
        }
        .section-link:hover{color:#F9F6FF;border-bottom-color:var(--gold)}

        .site-header{
            position:sticky;
            top:0;
            z-index:120;
            transition:background .24s var(--ease), box-shadow .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease);
            border-bottom:1px solid rgba(255,255,255,.04);
            background:rgba(12,8,18,.55);
            backdrop-filter:blur(12px);
        }
        .site-header.is-scrolled{
            background:rgba(10,7,15,.86);
            box-shadow:0 14px 36px rgba(0,0,0,.34);
            border-bottom-color:rgba(255,255,255,.08);
        }
        .site-header .top-row{
            padding:.9rem 0 .72rem;
            transition:padding .24s var(--ease), opacity .24s var(--ease), max-height .24s var(--ease), transform .24s var(--ease);
            max-height:120px;
            overflow:hidden;
        }
        .site-header.is-scrolled .top-row{
            max-height:0;
            padding:0;
            opacity:0;
            transform:translateY(-8px);
        }
        .brand-line{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:.78rem;
            font-weight:900;
            letter-spacing:.02em;
            color:#fff;
            white-space:nowrap;
        }
        .brand:hover{color:#fff}
        .brand-mark{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:
                radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 35%),
                linear-gradient(135deg, rgba(139,92,246,.92), rgba(192,77,143,.88));
            box-shadow:0 14px 30px rgba(139,92,246,.24), inset 0 1px 0 rgba(255,255,255,.25);
            color:#fff;
            border:1px solid rgba(255,255,255,.08);
        }
        .brand-mark i{font-size:1.1rem}
        .brand-text{
            font-size:1.05rem;
            line-height:1.1;
        }
        .brand-sub{
            display:block;
            margin-top:.14rem;
            color:var(--muted-2);
            font-size:.76rem;
            font-weight:600;
        }

        .header-tools{
            display:flex;
            align-items:center;
            gap:.6rem;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .header-tools .tool-pill{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.52rem .8rem;
            border-radius:999px;
            border:1px solid rgba(216,208,238,.14);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.82rem;
        }
        .header-tools .tool-pill i{color:var(--gold)}
        .menu-toggle{
            display:none;
            align-items:center;
            justify-content:center;
            width:48px;
            height:48px;
            border-radius:14px;
            border:1px solid rgba(216,208,238,.14);
            background:rgba(255,255,255,.03);
            color:#fff;
            cursor:pointer;
            transition:all .22s var(--ease);
        }
        .menu-toggle:hover{
            border-color:var(--line-strong);
            box-shadow:0 0 0 1px rgba(139,92,246,.12) inset;
        }
        .menu-toggle i{font-size:1.05rem}

        .nav-row{
            padding:0 0 1rem;
            transition:padding .24s var(--ease), transform .24s var(--ease);
        }
        .site-header.is-scrolled .nav-row{
            padding:.65rem 0 .72rem;
        }
        .nav-shell{
            display:flex;
            align-items:center;
            gap:1rem;
            justify-content:space-between;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:.45rem;
            flex-wrap:wrap;
        }
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            color:var(--muted);
            font-weight:700;
            padding:.72rem 1rem;
            border-radius:999px;
            border:1px solid transparent;
            transition:all .22s var(--ease);
        }
        .nav-link:hover{
            color:#fff;
            background:rgba(255,255,255,.03);
            border-color:rgba(216,208,238,.12);
        }
        .nav-link.active{
            color:#fff;
            background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(192,77,143,.10));
            border-color:rgba(139,92,246,.32);
            box-shadow:0 0 0 1px rgba(139,92,246,.05) inset;
        }
        .nav-link.active::after{
            content:"";
            position:absolute;
            left:1rem;
            right:1rem;
            bottom:.42rem;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(198,161,91,.9), transparent);
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:.7rem;
        }

        .mobile-drawer{
            display:none;
            position:fixed;
            inset:0;
            background:rgba(5,4,8,.72);
            backdrop-filter:blur(10px);
            z-index:150;
            opacity:0;
            pointer-events:none;
            transition:opacity .24s var(--ease);
        }
        .mobile-drawer.is-open{
            opacity:1;
            pointer-events:auto;
        }
        .drawer-panel{
            position:absolute;
            right:0;
            top:0;
            height:100%;
            width:min(92vw, 360px);
            background:linear-gradient(180deg, rgba(18,13,27,.98), rgba(10,7,15,.98));
            border-left:1px solid rgba(216,208,238,.12);
            box-shadow:-24px 0 50px rgba(0,0,0,.42);
            padding:1rem;
            transform:translateX(100%);
            transition:transform .28s var(--ease);
            display:flex;
            flex-direction:column;
        }
        .mobile-drawer.is-open .drawer-panel{transform:translateX(0)}
        .drawer-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.75rem;
            padding:.35rem .2rem 1rem;
        }
        .drawer-nav{
            display:flex;
            flex-direction:column;
            gap:.5rem;
            padding-top:.3rem;
        }
        .drawer-nav .nav-link{
            justify-content:space-between;
            width:100%;
            padding:1rem 1rem;
            border-radius:18px;
            border-color:rgba(216,208,238,.10);
            background:rgba(255,255,255,.02);
        }
        .drawer-footer{
            margin-top:auto;
            padding-top:1rem;
            border-top:1px solid rgba(255,255,255,.05);
            color:var(--muted);
            font-size:.92rem;
        }

        .page-hero{
            padding:clamp(3rem, 6vw, 5rem) 0 2.2rem;
            position:relative;
        }
        .hero-shell{
            display:grid;
            grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
            gap:clamp(1.3rem, 3vw, 2rem);
            align-items:stretch;
        }
        .hero-copy{
            padding:clamp(1.35rem, 2.6vw, 2rem);
            border-radius:var(--radius-xl);
            background:
                radial-gradient(circle at top left, rgba(139,92,246,.11), transparent 28%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(22,16,35,.98), rgba(16,11,27,.92));
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            position:relative;
            overflow:hidden;
        }
        .hero-copy::after{
            content:"";
            position:absolute;
            inset:-2px;
            background:
                radial-gradient(circle at 12% 12%, rgba(198,161,91,.14), transparent 10%),
                radial-gradient(circle at 88% 16%, rgba(139,92,246,.18), transparent 16%),
                linear-gradient(110deg, transparent 0%, rgba(255,255,255,.05) 24%, transparent 48%);
            pointer-events:none;
            opacity:.9;
        }
        .crumbs{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:.45rem;
            color:var(--muted-2);
            font-size:.92rem;
            margin-bottom:1rem;
        }
        .crumbs a{
            color:var(--muted);
            border-bottom:1px solid rgba(139,92,246,.28);
        }
        .crumbs a:hover{color:#fff;border-bottom-color:var(--gold)}
        .crumbs span.sep{opacity:.45}
        .hero-title{
            margin:0;
            font-size:clamp(2.15rem, 4.5vw, 4.05rem);
            line-height:1.08;
            letter-spacing:-.04em;
            position:relative;
            z-index:1;
        }
        .hero-lead{
            margin:1rem 0 0;
            color:var(--muted);
            font-size:1.02rem;
            max-width:68ch;
            position:relative;
            z-index:1;
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            margin:1.2rem 0 0;
            position:relative;
            z-index:1;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.8rem;
            margin-top:1.35rem;
            position:relative;
            z-index:1;
        }
        .hero-note{
            margin-top:1rem;
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
            align-items:center;
            color:var(--muted-2);
            font-size:.9rem;
            position:relative;
            z-index:1;
        }
        .hero-note .tag{background:rgba(255,255,255,.03)}

        .hero-side{
            display:grid;
            gap:1rem;
        }
        .side-panel{
            padding:1.2rem;
            border-radius:var(--radius-xl);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)), rgba(18,13,27,.9);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            position:relative;
        }
        .side-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 88% 14%, rgba(198,161,91,.14), transparent 18%),
                radial-gradient(circle at 18% 12%, rgba(139,92,246,.16), transparent 20%);
            pointer-events:none;
        }
        .panel-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.75rem;
            margin-bottom:1rem;
            position:relative;
            z-index:1;
        }
        .panel-head strong{font-size:1.02rem}
        .panel-head span{color:var(--muted-2);font-size:.88rem}
        .update-timeline{
            display:grid;
            gap:.75rem;
            position:relative;
            z-index:1;
        }
        .update-item{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:.8rem;
            align-items:start;
            padding:.8rem .85rem;
            border-radius:18px;
            border:1px solid rgba(216,208,238,.08);
            background:rgba(255,255,255,.02);
        }
        .update-dot{
            width:12px;
            height:12px;
            margin-top:.35rem;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--gold));
            box-shadow:0 0 0 6px rgba(139,92,246,.11);
        }
        .update-item h4{
            margin:0;
            font-size:1rem;
            line-height:1.35;
        }
        .update-item p{
            margin:.25rem 0 0;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.7;
        }
        .panel-search{
            display:grid;
            gap:.6rem;
            position:relative;
            z-index:1;
        }
        .search-box{
            display:flex;
            align-items:center;
            gap:.55rem;
            padding:.86rem .95rem;
            border-radius:16px;
            border:1px solid rgba(216,208,238,.14);
            background:rgba(255,255,255,.03);
        }
        .search-box i{color:var(--gold)}
        .search-box input{
            width:100%;
            border:none;
            background:transparent;
            color:var(--text);
            outline:none;
        }
        .search-box input::placeholder{color:var(--muted-2)}
        .panel-safety{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            position:relative;
            z-index:1;
        }

        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.08fr) 320px;
            gap:1.3rem;
            align-items:start;
        }
        .article-main{
            min-width:0;
        }
        .article-toolbar{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            margin-bottom:1rem;
        }
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.48rem .78rem;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(216,208,238,.12);
            color:var(--muted);
            font-size:.84rem;
        }
        .meta-chip i{color:var(--gold)}
        .article-card{
            padding:1.35rem;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                radial-gradient(circle at top right, rgba(139,92,246,.12), transparent 22%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
                linear-gradient(180deg, rgba(23,16,34,.96), rgba(14,10,20,.92));
            box-shadow:var(--shadow);
        }
        .article-card h1{
            margin:0;
            font-size:clamp(2rem, 4vw, 3.4rem);
            line-height:1.1;
            letter-spacing:-.04em;
        }
        .article-summary{
            margin:1rem 0 0;
            color:var(--muted);
            font-size:1.02rem;
            max-width:72ch;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.6rem;
            margin-top:1.15rem;
            padding-top:1rem;
            border-top:1px solid rgba(255,255,255,.05);
        }
        .meta-item{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.5rem .75rem;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(216,208,238,.1);
            color:var(--muted);
            font-size:.86rem;
        }
        .meta-item i{color:var(--gold)}
        .article-content{
            margin-top:1rem;
            padding:1.35rem;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.006)),
                rgba(13,9,18,.8);
            box-shadow:var(--shadow-soft);
        }
        .article-content > :first-child{margin-top:0}
        .article-content > :last-child{margin-bottom:0}
        .article-content p{
            margin:0 0 1.1rem;
            color:#E8E2F5;
            font-size:1rem;
            line-height:1.9;
        }
        .article-content h2,
        .article-content h3,
        .article-content h4{
            color:#fff;
            letter-spacing:-.02em;
            line-height:1.22;
            margin:1.7rem 0 .85rem;
        }
        .article-content h2{font-size:clamp(1.45rem, 2.3vw, 2rem)}
        .article-content h3{font-size:clamp(1.2rem, 1.8vw, 1.45rem)}
        .article-content h4{font-size:1.1rem}
        .article-content ul,
        .article-content ol{
            margin:0 0 1.1rem 1.25rem;
            color:#E8E2F5;
        }
        .article-content li{margin:.45rem 0}
        .article-content hr{
            border:none;
            height:1px;
            margin:1.6rem 0;
            background:linear-gradient(90deg, transparent, rgba(139,92,246,.45), rgba(198,161,91,.42), transparent);
        }
        .article-content a{
            color:#fff;
            border-bottom:1px solid rgba(139,92,246,.45);
        }
        .article-content a:hover{
            color:#fff;
            border-bottom-color:var(--gold);
        }
        .article-content blockquote{
            margin:1.2rem 0;
            padding:1rem 1.1rem 1rem 1.2rem;
            border-left:4px solid var(--accent);
            border-radius:0 18px 18px 0;
            background:rgba(139,92,246,.08);
            color:#F3EEF8;
        }
        .article-content table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            margin:1rem 0 1.3rem;
            overflow:hidden;
            border:1px solid rgba(216,208,238,.12);
            border-radius:18px;
            background:rgba(255,255,255,.02);
        }
        .article-content th,
        .article-content td{
            padding:.85rem .9rem;
            text-align:left;
            border-bottom:1px solid rgba(216,208,238,.08);
        }
        .article-content th{
            color:#fff;
            background:rgba(255,255,255,.03);
        }
        .article-content tr:last-child td{border-bottom:none}
        .article-content img{
            border-radius:18px;
            border:1px solid rgba(216,208,238,.1);
            box-shadow:0 18px 28px rgba(0,0,0,.22);
            margin:1rem 0;
        }
        .article-content .note-box,
        .article-content .tip-box{
            margin:1rem 0;
            padding:1rem 1.05rem;
            border-radius:18px;
            border:1px solid rgba(139,92,246,.18);
            background:rgba(139,92,246,.08);
            color:#F0EAFE;
        }
        .article-content .tip-box{
            border-color:rgba(198,161,91,.18);
            background:rgba(198,161,91,.08);
        }

        .article-side{
            display:grid;
            gap:1rem;
            position:sticky;
            top:108px;
        }
        .side-card{
            padding:1rem;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
                rgba(18,13,27,.92);
            box-shadow:var(--shadow-soft);
        }
        .side-card h3{
            margin:0 0 .85rem;
            font-size:1.15rem;
            line-height:1.25;
        }
        .side-list{
            display:grid;
            gap:.65rem;
        }
        .side-list a,
        .feedback-link,
        .toc-link{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:.75rem;
            padding:.82rem .9rem;
            border-radius:16px;
            border:1px solid rgba(216,208,238,.10);
            background:rgba(255,255,255,.02);
            color:var(--muted);
        }
        .side-list a:hover,
        .feedback-link:hover,
        .toc-link:hover{
            border-color:var(--line-strong);
            background:rgba(139,92,246,.08);
            color:#fff;
        }
        .side-list a span,
        .feedback-link span,
        .toc-link span{display:block}
        .side-list a small,
        .feedback-link small,
        .toc-link small{
            color:var(--muted-2);
            display:block;
            margin-top:.15rem;
        }
        .side-list .arrow{
            color:var(--gold);
            flex:0 0 auto;
        }

        .reading-progress{
            position:fixed;
            left:0;
            top:0;
            width:100%;
            height:3px;
            z-index:200;
            background:transparent;
        }
        .reading-progress span{
            display:block;
            width:0;
            height:100%;
            background:linear-gradient(90deg, var(--accent), var(--gold), var(--accent-2));
            box-shadow:0 0 18px rgba(139,92,246,.5);
        }

        .blocks-grid{
            display:grid;
            gap:1rem;
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:1rem;
        }
        .mini-card{
            padding:1rem;
            border-radius:22px;
            border:1px solid var(--line);
            background:
                radial-gradient(circle at top right, rgba(198,161,91,.10), transparent 20%),
                rgba(255,255,255,.02);
            transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
        }
        .mini-card:hover{
            transform:translateY(-4px);
            border-color:var(--line-strong);
            box-shadow:0 18px 40px rgba(0,0,0,.24);
        }
        .mini-card .mini-top{
            display:flex;
            justify-content:space-between;
            gap:1rem;
            align-items:center;
            margin-bottom:.7rem;
        }
        .mini-card h4{
            margin:0;
            font-size:1.03rem;
            line-height:1.45;
        }
        .mini-card p{
            margin:.45rem 0 0;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.75;
        }

        .guide-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:1rem;
        }
        .guide-card{
            padding:1.1rem;
            border-radius:24px;
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)),
                rgba(18,13,27,.92);
            position:relative;
            overflow:hidden;
        }
        .guide-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at top right, rgba(139,92,246,.12), transparent 26%),
                linear-gradient(120deg, transparent 0%, rgba(255,255,255,.04) 18%, transparent 34%);
            pointer-events:none;
        }
        .guide-card .icon{
            width:46px;
            height:46px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:rgba(139,92,246,.14);
            border:1px solid rgba(139,92,246,.20);
            margin-bottom:.9rem;
            color:#fff;
        }
        .guide-card h3{margin:0;font-size:1.1rem}
        .guide-card p{margin:.5rem 0 0;color:var(--muted);font-size:.94rem;line-height:1.75}
        .guide-card .card-foot{
            margin-top:1rem;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:.75rem;
            color:var(--muted-2);
            font-size:.88rem;
        }

        .faq-wrap{
            display:grid;
            grid-template-columns:minmax(0,1fr);
            gap:1rem;
        }
        .accordion{
            background:transparent;
            border:none;
            margin:0;
        }
        .accordion-item{
            margin-bottom:.8rem;
            border-radius:22px;
            overflow:hidden;
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            box-shadow:0 12px 24px rgba(0,0,0,.12);
        }
        .accordion-title{
            color:#fff;
            font-weight:800;
            font-size:1rem;
            line-height:1.45;
            padding:1rem 1.05rem;
            background:transparent;
            border:none;
            position:relative;
        }
        .accordion-title:hover{
            background:rgba(255,255,255,.03);
        }
        .accordion-title::before{
            border-color:transparent transparent transparent var(--gold);
        }
        .accordion-content{
            border-top:1px solid rgba(255,255,255,.05);
            background:rgba(139,92,246,.05);
            color:#E8E2F5;
            padding:1rem 1.05rem 1.15rem;
        }
        .accordion-content p{margin:0;color:#E8E2F5;line-height:1.9}
        .accordion-content ul{margin:.7rem 0 0 1.15rem}
        .accordion-content li{margin:.35rem 0}

        .feedback-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:1rem;
            align-items:start;
        }
        .feedback-card{
            padding:1.25rem;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                radial-gradient(circle at top right, rgba(198,161,91,.10), transparent 18%),
                rgba(255,255,255,.02);
            box-shadow:var(--shadow-soft);
        }
        .feedback-card h3{
            margin:0 0 .5rem;
            font-size:1.25rem;
            line-height:1.25;
        }
        .feedback-card p{
            margin:.35rem 0 0;
            color:var(--muted);
            font-size:.95rem;
            line-height:1.8;
        }
        .feedback-form{
            display:grid;
            gap:.85rem;
            margin-top:1rem;
        }
        .field-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:.85rem;
        }
        .field{
            display:grid;
            gap:.45rem;
        }
        .field label{
            color:#F1ECFA;
            font-size:.92rem;
            font-weight:700;
        }
        .field input,
        .field select,
        .field textarea{
            width:100%;
            padding:.9rem 1rem;
            border-radius:16px;
            border:1px solid rgba(216,208,238,.14);
            background:rgba(255,255,255,.03);
            color:var(--text);
            transition:all .22s var(--ease);
        }
        .field input::placeholder,
        .field textarea::placeholder{color:var(--muted-2)}
        .field input:focus,
        .field select:focus,
        .field textarea:focus{
            border-color:rgba(139,92,246,.52);
            background:rgba(139,92,246,.06);
        }
        .field textarea{
            min-height:140px;
            resize:vertical;
        }
        .form-hint{
            color:var(--muted-2);
            font-size:.86rem;
            line-height:1.7;
        }

        .note-strip{
            padding:1rem 1.1rem;
            border-radius:18px;
            border:1px solid rgba(198,161,91,.16);
            background:rgba(198,161,91,.08);
            color:#F5EBDD;
            display:flex;
            gap:.8rem;
            align-items:flex-start;
        }
        .note-strip i{color:var(--gold);margin-top:.25rem}
        .note-strip strong{color:#fff}

        .site-footer{
            margin-top:var(--space-xxl);
            padding:2.4rem 0 2.1rem;
            border-top:1px solid rgba(255,255,255,.05);
            background:
                linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.008)),
                linear-gradient(180deg, rgba(11,7,16,.96), rgba(10,7,15,.98));
            position:relative;
        }
        .site-footer::before{
            content:"";
            position:absolute;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(90deg, transparent, rgba(139,92,246,.10), transparent),
                radial-gradient(circle at 10% 20%, rgba(198,161,91,.08), transparent 18%);
            opacity:.72;
        }
        .footer-inner{
            display:grid;
            grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) auto;
            gap:1rem 1.2rem;
            align-items:start;
        }
        .footer-brand p{
            margin:.95rem 0 0;
            color:var(--muted);
            max-width:54ch;
        }
        .brand-note{
            display:flex;
            flex-wrap:wrap;
            gap:.55rem;
            margin-top:1rem;
        }
        .footer-links{
            display:grid;
            gap:.7rem;
        }
        .footer-links a{
            display:inline-flex;
            align-items:center;
            gap:.55rem;
            color:var(--muted);
            width:max-content;
        }
        .footer-links a:hover{color:#fff}
        .copyright{
            display:grid;
            gap:.4rem;
            color:var(--muted-2);
            font-size:.92rem;
            justify-items:end;
            text-align:right;
        }

        .empty-state{
            padding:1.3rem;
            border-radius:24px;
            border:1px dashed rgba(216,208,238,.18);
            background:rgba(255,255,255,.02);
            display:grid;
            place-items:center;
            text-align:center;
            gap:.7rem;
            color:var(--muted);
        }
        .empty-state i{
            font-size:2rem;
            color:var(--gold);
        }

        .return-top{
            position:fixed;
            right:1rem;
            bottom:1rem;
            width:48px;
            height:48px;
            border-radius:16px;
            border:1px solid rgba(216,208,238,.12);
            background:rgba(18,13,27,.92);
            color:#fff;
            display:grid;
            place-items:center;
            box-shadow:var(--shadow-soft);
            z-index:100;
            opacity:0;
            pointer-events:none;
            transform:translateY(12px);
            transition:all .24s var(--ease);
        }
        .return-top.is-visible{
            opacity:1;
            pointer-events:auto;
            transform:translateY(0);
        }
        .return-top:hover{
            border-color:var(--line-strong);
            background:rgba(139,92,246,.12);
        }

        @media (max-width: 1023px){
            .hero-shell,
            .article-layout,
            .feedback-grid,
            .footer-inner{
                grid-template-columns:1fr;
            }
            .article-side{
                position:static;
            }
            .guide-grid,
            .related-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .nav-links{
                gap:.35rem;
            }
        }

        @media (max-width: 767px){
            .site-header .top-row{display:none}
            .nav-row{padding:.85rem 0}
            .nav-shell{
                align-items:center;
            }
            .nav-links,
            .nav-actions .btn-secondary{
                display:none;
            }
            .menu-toggle{display:inline-flex}
            .mobile-drawer{display:block}
            .hero-title{font-size:clamp(2rem, 8vw, 2.7rem)}
            .hero-lead{font-size:.98rem}
            .section{padding:3.8rem 0}
            .guide-grid,
            .related-grid,
            .field-grid{
                grid-template-columns:1fr;
            }
            .section-head{
                align-items:flex-start;
                flex-direction:column;
            }
            .article-card,
            .article-content,
            .side-card,
            .feedback-card,
            .hero-copy,
            .side-panel{
                border-radius:22px;
            }
            .footer-inner{gap:1.2rem}
            .copyright{justify-items:start;text-align:left}
            .nav-actions .btn-primary{
                padding:.82rem 1rem;
                min-height:44px;
            }
        }

        @media (max-width: 520px){
            .container{width:min(100% - 1.2rem, var(--container))}
            .page-hero{padding:2rem 0 1.2rem}
            .hero-copy,
            .article-card,
            .article-content,
            .side-card,
            .feedback-card,
            .side-panel{
                padding:1rem;
            }
            .hero-actions{
                flex-direction:column;
            }
            .hero-actions .btn{
                width:100%;
            }
            .note-strip{
                align-items:flex-start;
            }
            .brand-text{font-size:.98rem}
            .brand-mark{width:38px;height:38px}
            .menu-toggle{width:44px;height:44px}
            .return-top{
                right:.75rem;
                bottom:.75rem;
            }
        }