/* roulang page: index */
:root{
            --bg:#f4f8fc;
            --bg-soft:#eef4fb;
            --panel:#ffffff;
            --panel-soft:#f8fbff;
            --line:#d8e4f2;
            --line-strong:#c6d7ea;
            --text:#17324d;
            --muted:#5f738c;
            --muted-2:#7b8fa4;
            --primary:#2f6dff;
            --primary-2:#48a7ff;
            --primary-soft:rgba(47,109,255,.08);
            --success:#1f9d7a;
            --shadow:0 12px 30px rgba(17,43,74,.08);
            --shadow-lg:0 20px 50px rgba(17,43,74,.12);
            --radius:24px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1280px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(72,167,255,.10), transparent 26%),
                radial-gradient(circle at top right, rgba(47,109,255,.07), transparent 24%),
                linear-gradient(180deg,#f8fbff 0%,#f4f8fc 44%,#eef4fb 100%);
            font-family: PingFang SC, Microsoft YaHei, Noto Sans CJK SC, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            line-height:1.65;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }
        ::selection{background:rgba(47,109,255,.16);color:var(--text)}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        input,select,textarea,button{outline:none}
        :focus-visible{
            outline:3px solid rgba(47,109,255,.22);
            outline-offset:2px;
        }
        .container{
            width:min(calc(100% - 2rem), var(--container));
            margin-inline:auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            background:rgba(248,251,255,.92);
            backdrop-filter:saturate(130%) blur(10px);
            border-bottom:1px solid rgba(216,228,242,.9);
            transition: box-shadow .2s ease, background .2s ease;
        }
        .site-header.is-scrolled{
            box-shadow:0 10px 30px rgba(17,43,74,.06);
            background:rgba(248,251,255,.96);
        }
        .brand-mark{
            width:40px;height:40px;border-radius:14px;
            background:linear-gradient(135deg,#2f6dff 0%, #48a7ff 100%);
            box-shadow:0 10px 20px rgba(47,109,255,.22);
            position:relative;
            flex:none;
        }
        .brand-mark:before,
        .brand-mark:after{
            content:"";
            position:absolute;
            border-radius:999px;
            background:rgba(255,255,255,.96);
        }
        .brand-mark:before{
            width:18px;height:4px;left:11px;top:12px;
        }
        .brand-mark:after{
            width:18px;height:4px;left:11px;bottom:12px;
        }
        .brand-mark i{
            position:absolute;
            left:16px;top:18px;
            width:8px;height:8px;border-radius:999px;
            background:#fff;
            box-shadow:0 0 0 4px rgba(255,255,255,.22);
        }
        .nav-link{
            position:relative;
            color:var(--muted);
            font-weight:600;
            transition: color .2s ease;
            padding:.45rem .2rem;
        }
        .nav-link:after{
            content:"";
            position:absolute;
            left:0;right:0;bottom:-.1rem;
            height:2px;
            border-radius:999px;
            background:linear-gradient(90deg,var(--primary),var(--primary-2));
            transform:scaleX(0);
            transform-origin:left;
            transition: transform .2s ease;
        }
        .nav-link:hover,
        .nav-link:focus-visible{
            color:var(--text);
        }
        .nav-link:hover:after,
        .nav-link:focus-visible:after,
        .nav-link.active:after{
            transform:scaleX(1);
        }
        .nav-link.active{
            color:var(--text);
        }
        .site-search{
            display:flex;
            align-items:center;
            gap:.5rem;
            min-width:320px;
            padding:.55rem .7rem;
            background:#fff;
            border:1px solid var(--line);
            border-radius:999px;
            box-shadow:0 6px 18px rgba(17,43,74,.04);
            transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .site-search:focus-within{
            border-color:rgba(47,109,255,.5);
            box-shadow:0 10px 26px rgba(47,109,255,.12);
            transform:translateY(-1px);
        }
        .site-search input{
            border:0;
            background:transparent;
            width:100%;
            color:var(--text);
            font-size:.95rem;
        }
        .site-search input::placeholder{color:#8da0b4}
        .site-search button{
            border:0;
            background:linear-gradient(135deg,var(--primary),var(--primary-2));
            color:#fff;
            font-weight:700;
            border-radius:999px;
            padding:.55rem .95rem;
            box-shadow:0 8px 18px rgba(47,109,255,.22);
            transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
        }
        .site-search button:hover{transform:translateY(-1px);filter:saturate(110%);box-shadow:0 12px 24px rgba(47,109,255,.28)}
        .site-search button:active{transform:translateY(0)}
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:.5rem;
            border-radius:999px;
            font-weight:700;
            padding:.82rem 1.2rem;
            border:1px solid transparent;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            background:linear-gradient(135deg,var(--primary),var(--primary-2));
            color:#fff;
            box-shadow:0 14px 30px rgba(47,109,255,.22);
        }
        .btn-primary:hover{box-shadow:0 18px 34px rgba(47,109,255,.28)}
        .btn-secondary{
            background:#fff;
            color:var(--text);
            border-color:var(--line);
            box-shadow:0 10px 24px rgba(17,43,74,.06);
        }
        .btn-secondary:hover{
            border-color:#bdd0e4;
            background:#fbfdff;
        }
        .btn-ghost{
            color:var(--muted);
            background:transparent;
            border-color:transparent;
        }
        .btn-ghost:hover{
            color:var(--text);
            background:rgba(47,109,255,.06);
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.42rem .82rem;
            border-radius:999px;
            background:var(--primary-soft);
            color:#1f57c9;
            border:1px solid rgba(47,109,255,.12);
            font-size:.82rem;
            font-weight:700;
            letter-spacing:.02em;
        }
        .badge-dot{
            width:.55rem;height:.55rem;border-radius:999px;background:var(--primary);
            box-shadow:0 0 0 4px rgba(47,109,255,.12);
            flex:none;
        }
        .panel{
            background:var(--panel);
            border:1px solid rgba(216,228,242,.92);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .panel-soft{
            background:linear-gradient(180deg,#fff 0%, #f9fcff 100%);
            border:1px solid rgba(216,228,242,.92);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .card{
            background:#fff;
            border:1px solid rgba(216,228,242,.95);
            border-radius:22px;
            box-shadow:0 10px 24px rgba(17,43,74,.06);
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        }
        .card:hover{
            transform:translateY(-3px);
            box-shadow:var(--shadow-lg);
            border-color:#bfd2e6;
        }
        .section-pad{padding:4.6rem 0}
        .section-kicker{
            color:#1f57c9;
            font-size:.78rem;
            letter-spacing:.18em;
            font-weight:800;
            text-transform:uppercase;
        }
        .section-title{
            margin:.45rem 0 0;
            font-size:clamp(1.65rem, 2.6vw, 2.7rem);
            line-height:1.12;
            font-weight:800;
            color:var(--text);
            letter-spacing:-.02em;
        }
        .section-lead{
            margin:.9rem 0 0;
            color:var(--muted);
            font-size:1rem;
            line-height:1.85;
            max-width:72ch;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            padding-top:4.8rem;
        }
        .hero-shell:before,
        .hero-shell:after{
            content:"";
            position:absolute;
            border-radius:999px;
            filter:blur(6px);
            pointer-events:none;
        }
        .hero-shell:before{
            width:26rem;height:26rem;
            background:radial-gradient(circle, rgba(72,167,255,.16) 0%, rgba(72,167,255,0) 68%);
            right:-7rem;top:-4rem;
        }
        .hero-shell:after{
            width:22rem;height:22rem;
            background:radial-gradient(circle, rgba(47,109,255,.12) 0%, rgba(47,109,255,0) 66%);
            left:-6rem;bottom:2rem;
        }
        .hero-title{
            font-size:clamp(2.2rem, 5vw, 4.2rem);
            line-height:1.04;
            letter-spacing:-.04em;
            font-weight:900;
            color:var(--text);
        }
        .hero-copy{
            font-size:1.05rem;
            line-height:1.9;
            color:var(--muted);
            max-width:62ch;
        }
        .hero-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.7rem;
            margin-top:1.2rem;
        }
        .hero-meta span{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.56rem .8rem;
            border-radius:999px;
            background:#fff;
            border:1px solid var(--line);
            color:var(--muted);
            font-size:.92rem;
            box-shadow:0 8px 20px rgba(17,43,74,.05);
        }
        .hero-meta b{color:var(--text)}
        .hero-quick{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:.95rem;
        }
        .metric{
            padding:1.1rem 1.15rem;
            border-radius:20px;
            background:linear-gradient(180deg,#fff 0%, #f9fcff 100%);
            border:1px solid rgba(216,228,242,.92);
            box-shadow:0 10px 24px rgba(17,43,74,.05);
        }
        .metric .num{
            display:block;
            font-size:1.7rem;
            line-height:1;
            font-weight:900;
            color:var(--text);
            letter-spacing:-.04em;
        }
        .metric .label{
            display:block;
            margin-top:.4rem;
            font-size:.88rem;
            color:var(--muted);
        }
        .dashboard-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:1rem;
        }
        .dashboard-card{
            padding:1.15rem;
            border-radius:20px;
            border:1px solid rgba(216,228,242,.92);
            background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
        }
        .dashboard-title{
            font-size:.9rem;
            color:var(--muted);
            font-weight:700;
        }
        .dashboard-value{
            margin-top:.3rem;
            font-size:1.65rem;
            font-weight:900;
            color:var(--text);
            letter-spacing:-.03em;
        }
        .dashboard-sub{
            margin-top:.2rem;
            color:var(--muted);
            font-size:.88rem;
        }
        .stat-line{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            font-size:.93rem;
            padding:.7rem 0;
            border-bottom:1px dashed rgba(198,215,234,.92);
        }
        .stat-line:last-child{border-bottom:0}
        .stat-line strong{color:var(--text)}
        .update-card{
            display:block;
            padding:1rem 1rem 1.1rem;
            height:100%;
        }
        .update-card h3{
            margin:.85rem 0 .55rem;
            font-size:1.03rem;
            line-height:1.48;
            font-weight:800;
            color:var(--text);
        }
        .update-card p{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
            line-height:1.8;
        }
        .update-card .meta-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.8rem;
            font-size:.82rem;
            color:var(--muted-2);
        }
        .update-card .meta-row time{white-space:nowrap}
        .update-card .more{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            margin-top:1rem;
            color:#1f57c9;
            font-weight:700;
            font-size:.92rem;
        }
        .update-card .more svg{
            transition: transform .2s ease;
        }
        .update-card:hover .more svg{transform:translateX(3px)}
        .empty-box{
            padding:1.5rem;
            border-radius:22px;
            border:1px dashed #c8d7ea;
            background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
            color:var(--muted);
            text-align:center;
        }
        .empty-box strong{
            display:block;
            color:var(--text);
            margin-bottom:.3rem;
        }
        .content-bento{
            display:grid;
            grid-template-columns:repeat(12,minmax(0,1fr));
            gap:1rem;
        }
        .bento-lg{
            grid-column:span 5;
            min-height:18rem;
            padding:1.35rem;
        }
        .bento-sm{
            grid-column:span 3;
            padding:1.15rem;
            min-height:8.8rem;
        }
        .bento-md{
            grid-column:span 4;
            padding:1.15rem;
            min-height:11rem;
        }
        .bento-xl{
            grid-column:span 7;
            padding:1.35rem;
            min-height:11rem;
        }
        .entry-card{
            padding:1.2rem;
            border-radius:22px;
            border:1px solid rgba(216,228,242,.92);
            background:linear-gradient(180deg,#fff 0%, #f9fcff 100%);
            box-shadow:0 10px 24px rgba(17,43,74,.05);
        }
        .entry-card h3{
            margin:.5rem 0 .4rem;
            font-size:1.04rem;
            font-weight:800;
        }
        .entry-card p{
            margin:0;
            color:var(--muted);
            line-height:1.75;
            font-size:.95rem;
        }
        .list-dots{
            margin:1rem 0 0;
            padding:0;
            list-style:none;
            display:grid;
            gap:.75rem;
        }
        .list-dots li{
            display:flex;
            gap:.72rem;
            align-items:flex-start;
            color:var(--text);
        }
        .list-dots li::before{
            content:"";
            width:.62rem;height:.62rem;
            margin-top:.45rem;
            border-radius:999px;
            background:linear-gradient(135deg,var(--primary),var(--primary-2));
            box-shadow:0 0 0 4px rgba(47,109,255,.08);
            flex:none;
        }
        .mini-tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.34rem .6rem;
            border-radius:999px;
            background:#eef5ff;
            border:1px solid #dbe8fb;
            color:#1f57c9;
            font-size:.8rem;
            font-weight:700;
        }
        .meter{
            margin-top:.75rem;
            height:.72rem;
            background:#ecf2f8;
            border-radius:999px;
            overflow:hidden;
        }
        .meter > span{
            display:block;
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg,var(--primary),var(--primary-2));
        }
        .compare-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:1rem;
        }
        .compare-card{
            padding:1.3rem;
            border-radius:24px;
            border:1px solid rgba(216,228,242,.92);
            background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
            box-shadow:0 10px 24px rgba(17,43,74,.05);
        }
        .compare-card h3{
            margin:.2rem 0 .35rem;
            font-size:1.2rem;
            font-weight:900;
            letter-spacing:-.02em;
        }
        .compare-card p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
            font-size:.95rem;
        }
        .compare-list{
            margin:1rem 0 0;
            display:grid;
            gap:.9rem;
        }
        .compare-item{
            display:grid;
            gap:.45rem;
        }
        .compare-item .row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            font-size:.92rem;
            color:var(--muted);
        }
        .compare-item .row strong{color:var(--text)}
        .compare-item .bar{
            width:100%;
            height:.72rem;
            background:#eaf1f8;
            border-radius:999px;
            overflow:hidden;
        }
        .compare-item .bar > span{
            display:block;
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg,var(--primary),var(--primary-2));
        }
        .compare-card.alt .bar > span{
            background:linear-gradient(90deg,#8fb6ea,#c2d5ec);
        }
        .faq details{
            border:1px solid rgba(216,228,242,.92);
            background:#fff;
            border-radius:20px;
            box-shadow:0 10px 24px rgba(17,43,74,.05);
            overflow:hidden;
        }
        .faq details + details{margin-top:.9rem}
        .faq summary{
            cursor:pointer;
            list-style:none;
            padding:1.05rem 1.15rem;
            font-weight:800;
            color:var(--text);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
        }
        .faq summary::-webkit-details-marker{display:none}
        .faq summary .sign{
            width:1.65rem;height:1.65rem;
            border-radius:999px;
            border:1px solid var(--line);
            display:grid;
            place-items:center;
            color:#1f57c9;
            background:#f8fbff;
            flex:none;
            transition: transform .2s ease, background .2s ease;
        }
        .faq details[open] summary .sign{
            transform:rotate(45deg);
            background:#eef5ff;
        }
        .faq .answer{
            padding:0 1.15rem 1.15rem;
            color:var(--muted);
            line-height:1.9;
        }
        .form-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:1rem;
        }
        .field{
            display:grid;
            gap:.45rem;
        }
        .field label{
            font-size:.92rem;
            color:var(--text);
            font-weight:700;
        }
        .input, .textarea, .select{
            width:100%;
            border-radius:18px;
            border:1px solid var(--line);
            background:#fff;
            color:var(--text);
            padding:.9rem 1rem;
            box-shadow:0 6px 18px rgba(17,43,74,.03);
            transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        .input:focus, .textarea:focus, .select:focus{
            border-color:rgba(47,109,255,.55);
            box-shadow:0 10px 24px rgba(47,109,255,.12);
            transform:translateY(-1px);
        }
        .textarea{min-height:8.8rem;resize:vertical}
        .help-note{
            color:var(--muted);
            font-size:.9rem;
            line-height:1.8;
        }
        .footer-link{
            color:var(--muted);
            transition: color .2s ease;
        }
        .footer-link:hover,
        .footer-link:focus-visible{color:var(--text)}
        .subtle-border{
            border-top:1px solid rgba(216,228,242,.92);
        }
        .mobile-panel{
            display:none;
        }
        .mobile-panel.show{
            display:block;
        }
        .scroll-top{
            position:fixed;
            right:1rem;
            bottom:1rem;
            z-index:40;
            width:3rem;
            height:3rem;
            border-radius:999px;
            border:1px solid rgba(216,228,242,.92);
            background:#fff;
            color:var(--text);
            box-shadow:0 12px 28px rgba(17,43,74,.10);
            display:grid;
            place-items:center;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        .scroll-top:hover{
            transform:translateY(-2px);
            box-shadow:0 16px 34px rgba(17,43,74,.14);
        }
        .line-clamp-2{
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .line-clamp-3{
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        @media (max-width: 1279px){
            .dashboard-grid{grid-template-columns:1fr}
            .bento-lg,.bento-sm,.bento-md,.bento-xl{grid-column:span 6}
        }
        @media (max-width: 1024px){
            .site-search{min-width:250px}
            .compare-grid,.hero-quick,.form-grid{grid-template-columns:1fr}
            .content-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
            .bento-lg,.bento-sm,.bento-md,.bento-xl{grid-column:span 6}
        }
        @media (max-width: 768px){
            .section-pad{padding:3.8rem 0}
            .hero-shell{padding-top:3.1rem}
            .site-search{min-width:100%}
            .hero-title{font-size:clamp(2rem, 11vw, 3rem)}
            .hero-meta{gap:.55rem}
            .hero-meta span{width:100%;justify-content:space-between}
            .content-bento{grid-template-columns:1fr}
            .bento-lg,.bento-sm,.bento-md,.bento-xl{grid-column:span 1}
            .update-card h3{font-size:1rem}
            .mobile-stack{flex-direction:column;align-items:stretch}
            .mobile-stack .btn{width:100%}
        }
        @media (max-width: 640px){
            .container{width:min(calc(100% - 1.2rem), var(--container))}
            .section-title{font-size:clamp(1.45rem, 8vw, 2.1rem)}
            .panel,.panel-soft,.card,.compare-card,.entry-card,.dashboard-card{border-radius:20px}
            .faq summary{padding:.95rem 1rem}
            .faq .answer{padding:0 1rem 1rem}
        }

/* roulang page: article */
:root{
            --bg:#f4f8fc;
            --bg-soft:#eef4fb;
            --panel:#fff;
            --panel-soft:#f8fbff;
            --line:#d8e4f2;
            --line-strong:#c6d7ea;
            --text:#17324d;
            --muted:#5f738c;
            --muted-2:#7b8fa4;
            --primary:#2f6dff;
            --primary-2:#48a7ff;
            --primary-soft:rgba(47,109,255,.08);
            --success:#1f9d7a;
            --shadow:0 12px 30px rgba(17,43,74,.08);
            --shadow-lg:0 20px 50px rgba(17,43,74,.12);
            --radius:24px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1280px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;color:var(--text);background:
            radial-gradient(circle at top left,rgba(72,167,255,.1),transparent 26%),
            radial-gradient(circle at top right,rgba(47,109,255,.07),transparent 24%),
            linear-gradient(180deg,#f8fbff 0%,#f4f8fc 44%,#eef4fb 100%);
            font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
            line-height:1.65;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{display:block;max-width:100%}
        button,input,select,textarea{font:inherit;outline:none}
        .container{width:min(calc(100% - 2rem),var(--container));margin-inline:auto}
        .site-header{position:sticky;top:0;z-index:50;background:rgba(248,251,255,.92);backdrop-filter:saturate(130%) blur(10px);border-bottom:1px solid rgba(216,228,242,.9);transition:.2s}
        .site-header.is-scrolled{box-shadow:0 10px 30px rgba(17,43,74,.06);background:rgba(248,251,255,.97)}
        .brand-mark{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,#2f6dff,#48a7ff);box-shadow:0 10px 20px rgba(47,109,255,.22);position:relative;flex:none}
        .brand-mark:before,.brand-mark:after{content:"";position:absolute;border-radius:999px;background:#fff}
        .brand-mark:before{width:18px;height:4px;left:11px;top:12px}
        .brand-mark:after{width:18px;height:4px;left:11px;bottom:12px}
        .brand-mark i{position:absolute;left:16px;top:18px;width:8px;height:8px;border-radius:999px;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
        .nav-link{position:relative;color:var(--muted);font-weight:600;padding:.45rem .2rem;transition:color .2s}
        .nav-link:after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:2px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary-2));transform:scaleX(0);transform-origin:left;transition:transform .2s}
        .nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:var(--text)}
        .nav-link:hover:after,.nav-link:focus-visible:after,.nav-link.active:after{transform:scaleX(1)}
        .site-search{display:flex;align-items:center;gap:.5rem;min-width:320px;padding:.55rem .7rem;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 18px rgba(17,43,74,.04);transition:.2s}
        .site-search:focus-within{border-color:rgba(47,109,255,.5);box-shadow:0 10px 26px rgba(47,109,255,.12);transform:translateY(-1px)}
        .site-search input{border:0;background:transparent;width:100%;color:var(--text);font-size:.95rem}
        .site-search input::placeholder{color:#8da0b4}
        .site-search button{border:0;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:700;border-radius:999px;padding:.55rem .95rem;box-shadow:0 8px 18px rgba(47,109,255,.22);transition:.2s}
        .site-search button:hover{filter:saturate(110%);transform:translateY(-1px)}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;font-weight:700;padding:.82rem 1.2rem;border:1px solid transparent;transition:.2s;user-select:none;white-space:nowrap}
        .btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}
        .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 14px 30px rgba(47,109,255,.22)}
        .btn-primary:hover{box-shadow:0 18px 34px rgba(47,109,255,.3)}
        .btn-secondary{background:#fff;color:var(--text);border-color:var(--line);box-shadow:0 10px 24px rgba(17,43,74,.06)}
        .btn-secondary:hover{border-color:#bdd0e4;background:#fbfdff}
        .btn-ghost{color:var(--muted);background:transparent}.btn-ghost:hover{color:var(--primary);background:var(--primary-soft)}
        .subtle-border{border-top:1px solid var(--line)}
        .eyebrow{display:inline-flex;align-items:center;gap:.45rem;color:var(--primary);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
        .eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary-2);box-shadow:0 0 0 5px rgba(72,167,255,.14)}
        .article-shell{padding:42px 0 86px}
        .crumbs{display:flex;align-items:center;gap:.55rem;color:var(--muted-2);font-size:.88rem;margin-bottom:24px}
        .crumbs a:hover{color:var(--primary);text-decoration:underline}
        .article-hero{padding:clamp(26px,5vw,64px);border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,#fff 0%,#f4f9ff 100%);box-shadow:var(--shadow);position:relative;overflow:hidden}
        .article-hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(47,109,255,.12);border-radius:50%;right:-80px;top:-90px}
        .article-title{font-size:clamp(2rem,4vw,4rem);line-height:1.18;letter-spacing:-.035em;font-weight:900;max-width:900px;position:relative;z-index:1}
        .article-summary{font-size:1.08rem;color:var(--muted);max-width:820px;margin-top:20px}
        .meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;color:var(--muted-2);font-size:.9rem;margin-top:26px}
        .tag{display:inline-flex;align-items:center;padding:.35rem .7rem;border-radius:999px;background:var(--primary-soft);border:1px solid #cfe0ff;color:#2864dd;font-size:.78rem;font-weight:800}
        .reading-layout{display:grid;grid-template-columns:minmax(0,820px) 300px;gap:28px;align-items:start;margin-top:30px}
        .article-body{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,5vw,58px)}
        .article-body h2,.article-body h3{color:var(--text);line-height:1.35;margin:2em 0 .7em;font-weight:850}
        .article-body h2{font-size:1.65rem;border-left:4px solid var(--primary);padding-left:14px}
        .article-body h3{font-size:1.25rem}
        .article-body p{color:#405b75;font-size:1.05rem;line-height:2;margin:1.05em 0}
        .article-body ul,.article-body ol{color:#405b75;padding-left:1.5rem;line-height:2;margin:1.1em 0}
        .article-body li{padding-left:.3rem;margin:.3rem 0}
        .article-body blockquote{margin:1.8rem 0;padding:1rem 1.2rem;border-left:4px solid var(--primary-2);background:#f1f7ff;color:#45637e;border-radius:0 12px 12px 0}
        .article-body img{border-radius:16px;border:1px solid var(--line);margin:1.5rem 0}
        .article-body hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
        .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:22px;position:sticky;top:100px}
        .side-card h3{font-size:1rem;font-weight:850;margin:0 0 16px}
        .side-item{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf2f8;color:var(--muted);font-size:.9rem}
        .side-item:last-child{border:0}.side-item strong{color:var(--text);text-align:right}
        .return-panel{margin-top:28px;padding:22px;border:1px solid #cfe0ff;background:#f5f9ff;border-radius:var(--radius-sm);display:flex;justify-content:space-between;align-items:center;gap:16px}
        .return-panel p{margin:0;color:var(--muted);font-size:.92rem}
        .empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
        .footer-link{color:var(--muted);transition:color .2s}.footer-link:hover{color:var(--primary);text-decoration:underline}
        @media(max-width:1279px){.site-search{min-width:230px}.reading-layout{grid-template-columns:minmax(0,1fr) 270px}}
        @media(max-width:1023px){.reading-layout{grid-template-columns:1fr}.side-card{position:static}.article-title{max-width:none}}
        @media(max-width:767px){.site-search{min-width:0;width:100%}.article-shell{padding-top:26px}.article-hero{padding:26px 20px}.article-body{padding:24px 20px}.article-body p{font-size:1rem}.return-panel{align-items:flex-start;flex-direction:column}}
        @media(max-width:520px){.container{width:min(calc(100% - 1.25rem),var(--container))}.article-title{font-size:1.85rem}.meta-row{gap:8px 12px}.site-search button{padding:.5rem .75rem}}
        :focus-visible{outline:3px solid rgba(47,109,255,.3);outline-offset:3px}