/* roulang page: index */
:root{
  --ink:#17121e;
  --night:#201326;
  --night-2:#2b1834;
  --berry:#5b244e;
  --coral:#ff765f;
  --coral-dark:#dc584f;
  --mint:#a7f2c9;
  --cream:#fff8ed;
  --paper:#fffdf9;
  --muted:#877989;
  --line:#eadfe5;
  --soft:#f6eef1;
  --shadow:0 18px 50px rgba(37,18,42,.12);
  --shadow-dark:0 22px 60px rgba(8,4,15,.28);
  --radius:18px;
  --container:1220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:16px}
a{color:inherit;text-decoration:none}
button,a{transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
img{display:block;max-width:100%}
button{font:inherit;border:0;cursor:pointer}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.site-header{background:rgba(255,248,237,.94);border-bottom:1px solid rgba(91,36,78,.12);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.04em;color:var(--night);white-space:nowrap}
.brand-mark{width:37px;height:37px;border-radius:12px;background:var(--night);display:grid;place-items:center;color:var(--coral);font-size:19px;box-shadow:5px 5px 0 var(--mint)}
.brand-text{font-size:18px}
.brand-text small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;line-height:1.2;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{display:block;padding:9px 13px;border-radius:9px;color:#5d4c61;font-size:14px;font-weight:700}
.nav-links a:hover,.nav-links a.active{color:var(--night);background:#f2e4e9}
.nav-links a.active{box-shadow:inset 0 -3px 0 var(--coral)}
.nav-cta{background:var(--coral)!important;color:#fff!important;padding:10px 17px!important;box-shadow:0 7px 18px rgba(255,118,95,.24)}
.nav-cta:hover{background:var(--coral-dark)!important;transform:translateY(-2px)}
.menu-toggle{display:none;background:var(--night);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px}
.notice-bar{background:var(--night);color:#e9dce9;font-size:13px}
.notice-inner{height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.notice-inner span:first-child{color:var(--mint)}
.notice-link{color:#fff;font-weight:700}
.notice-link:hover{color:var(--coral)}
.hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:92px 0 86px}
.hero:before{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(167,242,201,.18);border-radius:50%;right:-190px;top:-280px;box-shadow:0 0 0 28px rgba(255,118,95,.05),0 0 0 62px rgba(167,242,201,.035)}
.hero:after{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 70%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:20px}
.eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
.hero h1{font-size:clamp(34px,4.4vw,62px);line-height:1.13;letter-spacing:-.055em;max-width:720px;margin-bottom:23px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero-copy{color:#d6c9da;max-width:600px;font-size:17px;line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:14px;border:1px solid transparent}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 25px rgba(255,118,95,.22)}
.btn-primary:hover{background:#ff927d;transform:translateY(-3px);box-shadow:0 15px 30px rgba(255,118,95,.3)}
.btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
.btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
.hero-art{min-height:380px;position:relative;display:flex;align-items:center;justify-content:center}
.stage-card{width:min(100%,445px);background:#311b3a;border:1px solid rgba(255,255,255,.13);padding:26px;border-radius:24px;box-shadow:var(--shadow-dark);transform:rotate(3deg)}
.stage-top{display:flex;justify-content:space-between;align-items:center;color:#e9dceb;font-size:12px;margin-bottom:28px}
.status-dot{display:inline-flex;align-items:center;gap:7px}.status-dot:before{content:"";width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px var(--mint)}
.stage-title{font-size:29px;line-height:1.2;font-weight:800;margin-bottom:24px}
.stage-title span{color:var(--mint)}
.stage-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:12px}
.stage-tile{min-height:118px;border-radius:15px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;font-weight:800}
.stage-tile strong{font-size:23px}.stage-tile small{font-size:12px;color:rgba(255,255,255,.72)}
.tile-coral{background:var(--coral)}.tile-mint{background:var(--mint);color:var(--night)}.tile-purple{background:#7f5a99;grid-column:span 2;min-height:82px}
.stage-note{margin-top:18px;color:#cbbbd1;font-size:12px}
.section{padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
.section-kicker{color:var(--coral-dark);font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:8px}
.section h2{font-size:clamp(26px,3vw,40px);line-height:1.2;letter-spacing:-.04em;color:var(--night)}
.section-intro{color:var(--muted);max-width:560px}
.text-link{font-weight:800;color:var(--berry);font-size:14px;border-bottom:1px solid var(--coral)}
.text-link:hover{color:var(--coral-dark);padding-bottom:3px}
.lobby-layout{display:grid;grid-template-columns:1.45fr .8fr;gap:18px}
.lobby-main,.lobby-side{border-radius:var(--radius);overflow:hidden;position:relative}
.lobby-main{min-height:310px;padding:35px;background:var(--berry);color:#fff;display:flex;flex-direction:column;justify-content:end}
.lobby-main:before{content:"C7";position:absolute;right:22px;top:-40px;color:rgba(255,255,255,.08);font-size:230px;font-weight:900;line-height:1}
.lobby-main h3{position:relative;font-size:32px;line-height:1.2;margin-bottom:10px}.lobby-main p{position:relative;color:#ead9e7;max-width:500px}
.lobby-main .btn{position:relative;align-self:flex-start;margin-top:22px;background:var(--mint);color:var(--night)}
.lobby-main .btn:hover{background:#d1ffe4}
.lobby-side{display:grid;gap:18px}
.lobby-side article{padding:25px;background:#fff;border:1px solid var(--line);min-height:146px;display:flex;flex-direction:column;justify-content:space-between}
.lobby-side article:nth-child(2){background:#f0f7e9;border-color:#d6e8c9}
.lobby-side h3{font-size:21px;color:var(--night)}.lobby-side p{font-size:14px;color:var(--muted)}
.mini-arrow{font-size:13px;font-weight:800;color:var(--berry)}
.category-strip{display:flex;gap:10px;overflow:auto;padding:4px 2px 15px;scrollbar-width:thin}
.category-strip a{flex:0 0 auto;border:1px solid var(--line);background:#fff;padding:10px 16px;border-radius:30px;color:#6e5d70;font-size:14px;font-weight:700}
.category-strip a:hover,.category-strip a.active{border-color:var(--coral);background:#fff1ed;color:var(--coral-dark)}
.browse-panel{margin-top:18px;display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 8px 25px rgba(52,25,54,.04)}
.browse-copy{background:var(--soft);padding:28px;border-radius:14px;display:flex;flex-direction:column;justify-content:center}
.browse-copy h3{font-size:25px;color:var(--night);margin-bottom:9px}.browse-copy p{color:var(--muted);font-size:14px}
.browse-copy .btn{align-self:flex-start;margin-top:20px;background:var(--night);color:#fff}
.browse-copy .btn:hover{background:var(--berry)}
.topic-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.topic-item{border:1px solid var(--line);padding:20px;border-radius:13px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between}
.topic-item:hover{transform:translateY(-3px);border-color:var(--coral);box-shadow:var(--shadow)}
.topic-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:var(--night);color:var(--mint);font-size:13px;font-weight:800}
.topic-item h4{font-size:16px;color:var(--night)}.topic-item p{font-size:12px;color:var(--muted);line-height:1.55}
.news-section{background:#f5ecef}
.news-layout{display:grid;grid-template-columns:1fr 1.18fr;gap:48px;align-items:start}
.news-lead{background:var(--night);color:#fff;border-radius:var(--radius);padding:32px;min-height:265px;position:relative;overflow:hidden}
.news-lead:after{content:"资讯";position:absolute;right:-12px;bottom:-36px;color:rgba(255,255,255,.08);font-size:110px;font-weight:900}
.news-lead h3{font-size:27px;line-height:1.3;position:relative;z-index:1}.news-lead p{color:#cdbbd0;font-size:14px;margin-top:13px;position:relative;z-index:1}
.news-list{display:grid;gap:0;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:18px;padding:20px 22px;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}.news-item:hover{background:#fff9f6}
.news-date{font-family:ui-monospace,SFMono-Regular,monospace;color:var(--coral-dark);font-size:12px;font-weight:800}
.news-meta{color:var(--muted);font-size:11px;margin-top:5px}
.news-item h4{font-size:16px;line-height:1.4;color:var(--night);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-item p{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
.news-arrow{color:var(--berry);font-size:20px}.news-item a:hover .news-arrow{color:var(--coral);transform:translateX(3px)}
.empty-state{padding:35px;text-align:center;color:var(--muted);font-size:14px}
.app-panel{background:var(--night-2);color:#fff;border-radius:24px;overflow:hidden;padding:40px 48px;display:grid;grid-template-columns:180px 1fr 240px;align-items:center;gap:40px;position:relative}
.app-panel:before{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(167,242,201,.18);border-radius:50%;right:150px;top:-240px}
.phone{width:132px;height:220px;border:6px solid #f1e6ef;border-radius:25px;background:#190f20;padding:20px 12px;box-shadow:0 18px 25px rgba(0,0,0,.25);transform:rotate(-7deg);position:relative}
.phone:before{content:"";display:block;width:32px;height:5px;background:#f1e6ef;border-radius:5px;margin:-11px auto 22px}
.phone-screen{height:130px;border-radius:10px;background:linear-gradient(140deg,var(--coral),#7b4b91);padding:12px;color:#fff;font-size:12px;font-weight:800}
.phone-screen b{display:block;font-size:24px;margin-top:25px}.phone-bars{height:8px;background:var(--mint);border-radius:6px;margin-top:12px}
.app-copy{position:relative}.app-copy h2{color:#fff;font-size:31px;margin-bottom:10px}.app-copy p{color:#d7c6da;font-size:14px}
.app-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:19px}.app-tags span{border:1px solid rgba(255,255,255,.2);padding:5px 10px;border-radius:20px;font-size:11px;color:var(--mint)}
.app-actions{position:relative}.qr{height:120px;width:120px;background:repeating-linear-gradient(45deg,#fff 0 4px,#e9d9e7 4px 7px);border:8px solid #fff;border-radius:8px;margin-bottom:14px}
.app-actions .btn{width:100%;background:var(--coral);color:#fff}.app-actions small{display:block;color:#bdaec1;font-size:11px;margin-top:10px}
.features{padding:54px 0;background:#fff}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature{padding:25px 23px;border-right:1px solid var(--line)}.feature:last-child{border-right:0}
.feature strong{display:block;font-size:17px;color:var(--night);margin-bottom:5px}.feature p{font-size:13px;color:var(--muted);line-height:1.55}
.feature-mark{color:var(--coral);font-size:22px;font-weight:900;margin-bottom:10px}
.faq-grid{max-width:880px;margin:0 auto}.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:21px 4px;font-weight:800;color:var(--night);display:flex;justify-content:space-between;gap:20px}
.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:var(--coral);font-size:23px;line-height:1}
.faq-item[open] summary{color:var(--coral-dark)}.faq-item[open] summary:after{content:"−"}
.faq-answer{padding:0 38px 22px 4px;color:var(--muted);font-size:14px;line-height:1.85}
.final-cta{background:var(--coral);color:#fff;padding:50px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.final-cta h2{font-size:32px;line-height:1.25}.final-cta p{color:#ffe8e1;margin-top:7px}.final-cta .btn{background:var(--night);color:#fff}.final-cta .btn:hover{background:#402047;transform:translateY(-2px)}
.site-footer{background:#17101c;color:#d6c8d7;padding:53px 0 22px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:42px}.footer-brand{color:#fff;font-size:19px;margin-bottom:14px}.footer-intro{font-size:13px;color:#a99aac;max-width:310px}.footer-title{color:#fff;font-size:13px;font-weight:800;margin-bottom:15px}.footer-links{list-style:none;display:grid;gap:8px}.footer-links a{color:#a99aac;font-size:13px}.footer-links a:hover{color:var(--mint);padding-left:3px}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:19px;display:flex;justify-content:space-between;gap:20px;color:#8e7c92;font-size:11px}.footer-bottom a:hover{color:var(--mint)}
@media (max-width:1200px){.hero-grid{gap:38px}.app-panel{grid-template-columns:150px 1fr 190px;padding:35px}.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
@media (max-width:992px){.nav-links{gap:0}.nav-links a{padding:8px 8px;font-size:13px}.hero{padding:70px 0}.hero-grid{grid-template-columns:1fr}.hero-art{min-height:300px;max-width:540px}.lobby-layout,.news-layout{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.feature:nth-child(2){border-right:0}.feature:nth-child(-n+2){border-bottom:1px solid var(--line)}.app-panel{grid-template-columns:150px 1fr}.app-actions{grid-column:2}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.navbar{height:68px}.menu-toggle{display:block}.nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--cream);padding:12px 16px 18px;border-bottom:1px solid var(--line);box-shadow:0 14px 25px rgba(30,15,32,.1);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.nav-links a{padding:12px 14px}.notice-inner{height:auto;min-height:38px;padding:7px 0}.notice-inner span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero h1{font-size:39px}.section{padding:58px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:14px}.browse-panel{grid-template-columns:1fr}.news-item{grid-template-columns:70px 1fr auto;gap:12px}.app-panel{grid-template-columns:1fr;padding:35px 25px;text-align:center}.phone{margin:0 auto}.app-tags{justify-content:center}.app-actions{grid-column:auto;max-width:240px;margin:0 auto;width:100%}.qr{margin-left:auto;margin-right:auto}.cta-inner{display:block}.final-cta .btn{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand-block{grid-column:span 2}}
@media (max-width:576px){body{font-size:15px}.brand-text{font-size:15px}.brand-text small{display:none}.brand-mark{width:33px;height:33px}.hero{padding:55px 0 58px}.hero h1{font-size:32px}.hero-copy{font-size:15px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.hero-art{min-height:255px}.stage-card{padding:20px}.stage-title{font-size:23px}.stage-grid{gap:8px}.stage-tile{min-height:95px;padding:12px}.stage-tile strong{font-size:18px}.section h2{font-size:29px}.lobby-main{min-height:275px;padding:25px}.lobby-main h3{font-size:26px}.topic-list{grid-template-columns:1fr}.news-item{grid-template-columns:1fr auto;padding:17px}.news-date{grid-column:1 / -1}.news-item h4{font-size:15px}.feature-grid{grid-template-columns:1fr}.feature,.feature:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.feature:last-child{border-bottom:0}.faq-answer{padding-right:8px}.footer-grid{grid-template-columns:1fr;gap:27px}.footer-brand-block{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}}

/* roulang page: index */
:root {
            --ink: #17121b;
            --ink-soft: #241b2a;
            --plum: #331d3d;
            --plum-light: #4b2b55;
            --coral: #ff745b;
            --coral-dark: #e85c49;
            --mint: #b7f47e;
            --cream: #fff7ed;
            --paper: #f5eee9;
            --white: #fffdfb;
            --text: #332b35;
            --muted: #766c76;
            --line: rgba(51, 29, 61, .14);
            --shadow: 0 18px 48px rgba(25, 13, 32, .16);
            --radius-lg: 18px;
            --radius-md: 12px;
            --radius-sm: 9px;
            --container: 1220px;
            --ease: 180ms ease;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            background: var(--paper);
            color: var(--text);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.7;
            overflow-x: hidden;
        }
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .12;
            background-image: radial-gradient(#6c536e .7px, transparent .7px);
            background-size: 7px 7px;
            z-index: -1;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; border: 0; }
        ul { list-style: none; }
        :focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--coral);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            width: 24px;
            height: 2px;
            background: currentColor;
        }
        .section { padding: 88px 0; }
        .section-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 28px;
            margin-bottom: 38px;
        }
        .section-heading h2 {
            margin-top: 10px;
            color: var(--ink);
            font-size: clamp(28px, 3.3vw, 44px);
            line-height: 1.2;
            letter-spacing: 0;
        }
        .section-heading p { max-width: 450px; color: var(--muted); }
        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--plum);
            font-size: 14px;
            font-weight: 800;
            white-space: nowrap;
        }
        .text-link::after { content: "↗"; transition: transform var(--ease); }
        .text-link:hover { color: var(--coral-dark); text-decoration: underline; }
        .text-link:hover::after { transform: translate(3px, -3px); }

        .site-header {
            position: relative;
            z-index: 20;
            background: var(--ink);
            color: var(--white);
            border-bottom: 1px solid rgba(255,255,255,.1);
        }
        .nav-wrap {
            min-height: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            min-width: 210px;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: 0;
        }
        .brand-mark {
            width: 38px;
            height: 38px;
            position: relative;
            display: grid;
            place-items: center;
            border: 2px solid var(--coral);
            border-radius: 50%;
            color: var(--mint);
            font-family: Georgia, serif;
            font-size: 21px;
            font-weight: 700;
        }
        .brand-mark::after {
            content: "";
            position: absolute;
            width: 7px;
            height: 7px;
            right: -3px;
            top: 1px;
            border-radius: 50%;
            background: var(--mint);
        }
        .main-nav { display: flex; align-items: center; gap: 4px; }
        .main-nav a {
            position: relative;
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding: 0 13px;
            color: #d9cedd;
            font-size: 14px;
            font-weight: 700;
            transition: color var(--ease);
        }
        .main-nav a::after {
            content: "";
            position: absolute;
            left: 13px;
            right: 13px;
            bottom: 4px;
            height: 3px;
            border-radius: 2px;
            background: var(--coral);
            transform: scaleX(0);
            transition: transform var(--ease);
        }
        .main-nav a:hover, .main-nav a.active { color: var(--white); }
        .main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
        .nav-action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 0 17px;
            border-radius: var(--radius-sm);
            background: var(--coral);
            color: var(--ink);
            font-size: 14px;
            font-weight: 900;
            transition: background var(--ease), transform var(--ease);
        }
        .nav-action:hover { background: var(--mint); transform: translateY(-2px); }
        .menu-toggle { display: none; color: var(--white); background: transparent; font-size: 25px; }

        .notice-bar { background: var(--plum); color: #eaddea; }
        .notice-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 38px;
            gap: 20px;
            font-size: 12px;
        }
        .notice-inner span:first-child { color: var(--mint); font-weight: 800; }
        .notice-inner a:hover { color: var(--mint); }

        .hero {
            position: relative;
            min-height: 635px;
            display: flex;
            align-items: center;
            background: var(--ink);
            color: var(--white);
            overflow: hidden;
        }
        .hero::before {
            content: "";
            position: absolute;
            width: 620px;
            height: 620px;
            right: -110px;
            top: -180px;
            border: 1px solid rgba(255,116,91,.28);
            border-radius: 50%;
            box-shadow: 0 0 0 34px rgba(255,116,91,.06), 0 0 0 70px rgba(183,244,126,.045);
        }
        .hero::after {
            content: "";
            position: absolute;
            left: 47%;
            bottom: -170px;
            width: 740px;
            height: 280px;
            border-radius: 50%;
            background: rgba(255,116,91,.13);
            filter: blur(30px);
        }
        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(420px, .86fr);
            align-items: center;
            gap: 65px;
            padding: 74px 0 90px;
        }
        .hero-copy { max-width: 670px; }
        .hero-copy .eyebrow { color: var(--mint); }
        .hero h1 {
            margin: 20px 0 22px;
            max-width: 690px;
            color: var(--white);
            font-size: clamp(36px, 5vw, 66px);
            line-height: 1.12;
            letter-spacing: 0;
        }
        .hero h1 strong { color: var(--coral); font-weight: inherit; }
        .hero-copy > p {
            max-width: 600px;
            color: #d5c8d6;
            font-size: 17px;
            line-height: 1.9;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
        .btn {
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 20px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-weight: 800;
            transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
        }
        .btn-primary { background: var(--coral); color: var(--ink); }
        .btn-primary:hover { background: var(--mint); transform: translateY(-3px); }
        .btn-outline { border-color: rgba(255,255,255,.3); color: var(--white); }
        .btn-outline:hover { border-color: var(--mint); color: var(--mint); transform: translateY(-3px); }
        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 42px;
            color: #ab9aaa;
            font-size: 12px;
        }
        .hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
        .hero-meta i { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--mint); }

        .stage-art { position: relative; min-height: 410px; }
        .stage-topline {
            position: absolute;
            top: 12px;
            left: 45px;
            right: 10px;
            height: 2px;
            background: var(--coral);
            box-shadow: 0 0 24px rgba(255,116,91,.5);
        }
        .stage-topline::before, .stage-topline::after {
            content: "";
            position: absolute;
            top: -8px;
            width: 18px;
            height: 18px;
            border: 2px solid var(--mint);
            border-radius: 50%;
        }
        .stage-topline::before { left: 12%; }
        .stage-topline::after { right: 13%; }
        .stage-panel {
            position: absolute;
            left: 34px;
            top: 67px;
            width: 79%;
            min-height: 260px;
            padding: 27px;
            background: #271b2e;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 18px 18px 5px 5px;
            box-shadow: var(--shadow);
        }
        .stage-panel::before {
            content: "";
            position: absolute;
            inset: 16px;
            border: 1px solid rgba(183,244,126,.2);
            border-radius: 10px;
            pointer-events: none;
        }
        .stage-label { position: relative; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
        .stage-panel h3 { position: relative; margin: 22px 0 12px; font-size: 28px; line-height: 1.25; }
        .stage-panel p { position: relative; max-width: 250px; color: #baaabd; font-size: 13px; }
        .stage-grid {
            position: absolute;
            right: 25px;
            bottom: 27px;
            display: grid;
            grid-template-columns: repeat(2, 46px);
            gap: 9px;
        }
        .stage-grid span {
            height: 46px;
            display: grid;
            place-items: center;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 8px;
            color: var(--coral);
            background: rgba(255,255,255,.04);
            font-weight: 900;
        }
        .stage-grid span:nth-child(2), .stage-grid span:nth-child(3) { color: var(--mint); }
        .stage-card {
            position: absolute;
            right: 0;
            bottom: 19px;
            width: 190px;
            padding: 18px;
            background: var(--coral);
            color: var(--ink);
            border-radius: 12px;
            transform: rotate(4deg);
            box-shadow: 0 16px 30px rgba(0,0,0,.25);
        }
        .stage-card small { font-size: 11px; font-weight: 900; }
        .stage-card strong { display: block; margin: 6px 0; font-size: 22px; line-height: 1.2; }
        .stage-card span { font-size: 12px; }
        .stage-floor {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 72px;
            border-top: 2px solid rgba(183,244,126,.5);
            transform: perspective(150px) rotateX(25deg);
            background: repeating-linear-gradient(90deg, transparent 0 57px, rgba(255,255,255,.06) 58px 59px);
        }

        .hall { background: var(--white); }
        .hall-layout { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; }
        .hall-feature {
            min-height: 310px;
            position: relative;
            overflow: hidden;
            padding: 38px;
            border-radius: var(--radius-lg);
            background: var(--plum);
            color: var(--white);
        }
        .hall-feature::after {
            content: "C7";
            position: absolute;
            right: -4px;
            bottom: -55px;
            color: rgba(255,255,255,.07);
            font: 900 220px/1 Arial, sans-serif;
        }
        .hall-feature h3 { position: relative; z-index: 1; max-width: 420px; margin: 20px 0 13px; font-size: 34px; line-height: 1.25; }
        .hall-feature p { position: relative; z-index: 1; max-width: 440px; color: #d7c8db; }
        .hall-feature .text-link { position: relative; z-index: 1; margin-top: 27px; color: var(--mint); }
        .hall-side { display: grid; gap: 18px; }
        .hall-tile { min-height: 146px; padding: 26px; border-radius: var(--radius-lg); color: var(--ink); transition: transform var(--ease), box-shadow var(--ease); }
        .hall-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .hall-tile.coral { background: var(--coral); }
        .hall-tile.mint { background: var(--mint); }
        .tile-icon { font-size: 25px; font-weight: 900; }
        .hall-tile h3 { margin-top: 8px; font-size: 21px; line-height: 1.3; }
        .hall-tile p { margin-top: 5px; font-size: 13px; line-height: 1.55; }

        .browse { background: var(--paper); }
        .topic-tabs { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 30px; scrollbar-width: thin; }
        .topic-tab {
            flex: 0 0 auto;
            padding: 10px 17px;
            border: 1px solid var(--line);
            border-radius: 30px;
            color: var(--muted);
            background: transparent;
            font-size: 14px;
            font-weight: 800;
            transition: all var(--ease);
        }
        .topic-tab:hover, .topic-tab.active { border-color: var(--plum); background: var(--plum); color: var(--white); }
        .browse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .browse-card {
            position: relative;
            min-height: 260px;
            display: flex;
            flex-direction: column;
            justify-content: end;
            overflow: hidden;
            padding: 25px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--white);
            transition: transform var(--ease), box-shadow var(--ease);
        }
        .browse-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .browse-art { position: absolute; top: 25px; right: 25px; width: 92px; height: 92px; border-radius: 50%; background: var(--mint); }
        .browse-art::after { content: ""; position: absolute; inset: 16px; border: 2px solid var(--plum); transform: rotate(45deg); }
        .browse-card:nth-child(2) .browse-art { background: var(--coral); border-radius: 14px; transform: rotate(12deg); }
        .browse-card:nth-child(3) .browse-art { background: #d8b9e6; border-radius: 12px 50%; }
        .browse-card h3 { position: relative; margin-bottom: 7px; color: var(--ink); font-size: 22px; }
        .browse-card p { position: relative; min-height: 49px; color: var(--muted); font-size: 14px; line-height: 1.65; }
        .browse-card .text-link { position: relative; margin-top: 18px; font-size: 13px; }

        .updates { background: var(--white); }
        .updates-layout { display: grid; grid-template-columns: .33fr .67fr; gap: 55px; }
        .updates-intro { padding-top: 10px; }
        .updates-intro h2 { margin: 13px 0 15px; color: var(--ink); font-size: 38px; line-height: 1.25; }
        .updates-intro p { color: var(--muted); }
        .updates-list { border-top: 1px solid var(--line); }
        .update-item {
            display: grid;
            grid-template-columns: 112px 1fr 86px;
            align-items: center;
            gap: 20px;
            min-height: 108px;
            border-bottom: 1px solid var(--line);
            transition: background var(--ease), padding var(--ease);
        }
        .update-item:hover { padding-left: 12px; background: #fff8f3; }
        .update-date { color: var(--muted); font: 700 12px/1.4 ui-monospace, monospace; }
        .update-date strong { display: block; margin-bottom: 3px; color: var(--plum); font-size: 20px; }
        .update-body h3 { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 17px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .update-body p { display: -webkit-box; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .update-meta { margin-top: 5px; color: var(--coral-dark); font-size: 11px; font-weight: 800; }
        .update-arrow { justify-self: end; color: var(--plum); font-size: 23px; transition: transform var(--ease); }
        .update-item:hover .update-arrow { transform: translateX(4px); color: var(--coral-dark); }
        .empty-state { padding: 38px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }

        .app-section { background: var(--ink); color: var(--white); }
        .app-panel {
            position: relative;
            display: grid;
            grid-template-columns: .7fr 1fr .7fr;
            align-items: center;
            gap: 42px;
            min-height: 350px;
            overflow: hidden;
            padding: 50px 62px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: var(--radius-lg);
            background: var(--plum);
        }
        .app-panel::before {
            content: "";
            position: absolute;
            width: 370px;
            height: 370px;
            left: -130px;
            bottom: -240px;
            border: 1px solid rgba(183,244,126,.4);
            border-radius: 50%;
        }
        .phone { position: relative; z-index: 1; width: 152px; height: 272px; margin: auto; padding: 10px; border: 5px solid #d5c9d6; border-radius: 25px; background: var(--ink); transform: rotate(-8deg); box-shadow: 15px 20px 30px rgba(0,0,0,.3); }
        .phone-screen { height: 100%; padding: 18px 11px; border-radius: 16px; background: #42234b; }
        .phone-notch { width: 45px; height: 6px; margin: -10px auto 22px; border-radius: 0 0 8px 8px; background: #d5c9d6; }
        .phone-screen b { display: block; color: var(--mint); font-size: 14px; }
        .phone-line { height: 9px; margin-top: 14px; border-radius: 5px; background: var(--coral); }
        .phone-line.short { width: 55%; margin-top: 8px; background: rgba(255,255,255,.28); }
        .phone-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 22px; }
        .phone-blocks i { display: block; height: 48px; border-radius: 7px; background: rgba(183,244,126,.75); }
        .phone-blocks i:nth-child(2) { background: rgba(255,116,91,.8); }
        .app-copy { position: relative; z-index: 1; }
        .app-copy h2 { margin: 12px 0; font-size: 37px; line-height: 1.25; }
        .app-copy p { color: #d7c8db; }
        .app-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
        .app-tags span { padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: var(--mint); font-size: 12px; }
        .download-box { position: relative; z-index: 1; text-align: center; }
        .qr {
            width: 124px;
            height: 124px;
            display: grid;
            place-items: center;
            margin: 0 auto 16px;
            border: 7px solid var(--white);
            background:
                linear-gradient(90deg, var(--ink) 10%, transparent 10% 20%, var(--ink) 20% 31%, transparent 31% 45%, var(--ink) 45% 57%, transparent 57% 70%, var(--ink) 70% 82%, transparent 82%),
                linear-gradient(var(--ink) 10%, transparent 10% 21%, var(--ink) 21% 34%, transparent 34% 48%, var(--ink) 48% 60%, transparent 60% 75%, var(--ink) 75% 88%, transparent 88%);
            background-color: var(--white);
        }
        .qr span { padding: 3px; background: var(--white); color: var(--ink); font-size: 9px; font-weight: 900; }
        .download-box p { color: #cbbdce; font-size: 12px; }
        .download-box .btn { width: 100%; margin-top: 15px; }

        .features { background: var(--cream); }
        .feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .feature-item { min-height: 160px; padding: 29px 24px; border-right: 1px solid var(--line); }
        .feature-item:last-child { border-right: 0; }
        .feature-icon { color: var(--coral-dark); font-size: 24px; font-weight: 900; }
        .feature-item h3 { margin: 12px 0 5px; color: var(--ink); font-size: 17px; }
        .feature-item p { color: var(--muted); font-size: 13px; line-height: 1.55; }

        .faq { background: var(--paper); }
        .faq-list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            min-height: 72px;
            padding: 16px 4px;
            background: transparent;
            color: var(--ink);
            text-align: left;
            font-size: 17px;
            font-weight: 800;
        }
        .faq-question::after { content: "+"; color: var(--coral-dark); font-size: 25px; font-weight: 400; transition: transform var(--ease); }
        .faq-item.open .faq-question { color: var(--plum); }
        .faq-item.open .faq-question::after { transform: rotate(45deg); color: var(--mint); }
        .faq-answer { max-height: 0; overflow: hidden; color: var(--muted); font-size: 14px; transition: max-height 240ms ease, padding 240ms ease; }
        .faq-item.open .faq-answer { max-height: 180px; padding: 0 42px 22px 4px; }

        .closing { padding: 70px 0; background: var(--coral); }
        .closing-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
        .closing h2 { max-width: 650px; color: var(--ink); font-size: clamp(27px, 4vw, 45px); line-height: 1.25; }
        .closing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
        .closing .btn-primary { background: var(--ink); color: var(--white); }
        .closing .btn-primary:hover { background: var(--plum); }
        .closing .btn-outline { border-color: var(--ink); color: var(--ink); }
        .closing .btn-outline:hover { background: var(--ink); color: var(--white); }

        .site-footer { padding: 57px 0 25px; background: var(--ink); color: #c7bac9; }
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 45px; padding-bottom: 45px; }
        .footer-brand { color: var(--white); }
        .footer-brand p { max-width: 300px; margin-top: 17px; color: #9e8fa1; font-size: 13px; }
        .footer-col h3 { margin-bottom: 17px; color: var(--white); font-size: 14px; }
        .footer-col li { margin: 9px 0; font-size: 13px; }
        .footer-col a:hover { color: var(--mint); text-decoration: underline; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: #827487; font-size: 12px; }

        @media (max-width: 1200px) {
            .hero-grid { gap: 35px; }
            .app-panel { padding: 42px; }
        }
        @media (max-width: 992px) {
            .main-nav { gap: 0; }
            .main-nav a { padding: 0 8px; font-size: 13px; }
            .main-nav a::after { left: 8px; right: 8px; }
            .hero-grid { grid-template-columns: 1fr; padding-top: 65px; }
            .hero-copy { max-width: 760px; }
            .stage-art { max-width: 600px; width: 100%; margin: 0 auto; }
            .updates-layout { grid-template-columns: 1fr; gap: 25px; }
            .updates-intro { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
            .updates-intro h2 { margin-bottom: 0; }
            .updates-intro p { max-width: 360px; }
            .app-panel { grid-template-columns: .6fr 1fr; }
            .download-box { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 18px; }
            .qr { margin: 0; }
            .download-box .btn { width: auto; }
            .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 32px, var(--container)); }
            .section { padding: 58px 0; }
            .nav-wrap { min-height: 68px; }
            .brand { min-width: 0; font-size: 18px; }
            .main-nav {
                position: absolute;
                top: 68px;
                left: 0;
                right: 0;
                display: none;
                padding: 12px 16px 20px;
                background: var(--ink);
                border-top: 1px solid rgba(255,255,255,.1);
                box-shadow: 0 18px 25px rgba(0,0,0,.25);
            }
            .main-nav.show { display: block; }
            .main-nav a { display: flex; min-height: 45px; padding: 0 4px; }
            .main-nav a::after { left: 0; right: auto; width: 28px; bottom: 2px; }
            .nav-action { margin-left: auto; margin-right: 8px; }
            .menu-toggle { display: block; width: 44px; height: 44px; }
            .notice-inner { min-height: 34px; }
            .notice-inner a { display: none; }
            .hero { min-height: auto; }
            .hero-grid { padding: 58px 0 60px; }
            .hero h1 { font-size: 39px; }
            .stage-art { min-height: 335px; transform: scale(.9); transform-origin: top center; margin-bottom: -30px; }
            .section-heading { display: block; margin-bottom: 28px; }
            .section-heading p { margin-top: 12px; }
            .hall-layout { grid-template-columns: 1fr; }
            .hall-feature { min-height: 280px; }
            .browse-grid { grid-template-columns: 1fr 1fr; }
            .feature-strip { grid-template-columns: 1fr 1fr; }
            .feature-item:nth-child(2) { border-right: 0; }
            .feature-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .app-panel { grid-template-columns: 1fr; padding: 36px 25px; text-align: center; }
            .phone { transform: rotate(-5deg); }
            .app-tags { justify-content: center; }
            .download-box { grid-column: auto; display: block; }
            .qr { margin: 25px auto 14px; }
            .download-box .btn { width: min(100%, 240px); }
            .closing-inner { display: block; }
            .closing-actions { margin-top: 25px; }
            .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
            .footer-brand { grid-column: 1 / -1; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 8px; }
        }
        @media (max-width: 520px) {
            .hero h1 { font-size: 34px; }
            .hero-copy > p { font-size: 15px; }
            .hero-actions .btn { flex: 1 1 100%; }
            .stage-art { min-height: 285px; transform: scale(.74); width: 135%; margin-left: -17%; margin-bottom: -75px; }
            .hall-feature { padding: 27px; }
            .hall-feature h3 { font-size: 28px; }
            .browse-grid { grid-template-columns: 1fr; }
            .browse-card { min-height: 220px; }
            .updates-intro { display: block; }
            .updates-intro h2 { font-size: 32px; margin-bottom: 8px; }
            .update-item { grid-template-columns: 76px 1fr 25px; gap: 9px; min-height: 125px; }
            .update-date strong { font-size: 17px; }
            .update-body h3 { font-size: 15px; }
            .update-body p { font-size: 12px; }
            .update-arrow { font-size: 19px; }
            .feature-strip { grid-template-columns: 1fr; }
            .feature-item, .feature-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
            .feature-item:last-child { border-bottom: 0; }
            .faq-question { font-size: 15px; }
            .closing-actions .btn { flex: 1 1 100%; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

/* roulang page: article */
:root{
            --ink:#17121e;
            --night:#201326;
            --night-2:#2b1834;
            --berry:#5b244e;
            --coral:#ff765f;
            --coral-dark:#dc584f;
            --mint:#a7f2c9;
            --cream:#fff8ed;
            --paper:#fffdf9;
            --muted:#877989;
            --line:#eadfe5;
            --soft:#f6eef1;
            --shadow:0 18px 50px rgba(37,18,42,.12);
            --shadow-dark:0 22px 60px rgba(8,4,15,.28);
            --radius:18px;
            --radius-lg:22px;
            --radius-md:12px;
            --radius-sm:9px;
            --container:1220px;
            --ease:180ms ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.7;
        }
        a{color:inherit;text-decoration:none}
        a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
        a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
        img{display:block;max-width:100%;height:auto}
        button{font:inherit;border:0;cursor:pointer}
        ul{padding:0;margin:0;list-style:none}
        .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}

        .site-header{
            position:sticky;
            top:0;
            z-index:30;
            background:rgba(255,248,237,.95);
            border-bottom:1px solid rgba(91,36,78,.12);
            backdrop-filter:blur(14px);
        }
        .navbar{
            min-height:78px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:11px;
            color:var(--night);
            font-weight:800;
            letter-spacing:-.04em;
            white-space:nowrap;
        }
        .brand-mark{
            width:37px;
            height:37px;
            border-radius:12px;
            display:grid;
            place-items:center;
            color:var(--coral);
            background:var(--night);
            font-size:19px;
            box-shadow:5px 5px 0 var(--mint);
        }
        .brand-text{font-size:18px}
        .brand-text small{
            display:block;
            margin-top:1px;
            color:var(--muted);
            font-size:10px;
            line-height:1.2;
            letter-spacing:.12em;
            font-weight:700;
        }
        .main-nav{
            display:flex;
            align-items:center;
            gap:4px;
        }
        .main-nav a{
            display:block;
            padding:9px 13px;
            border-radius:9px;
            color:#5d4c61;
            font-size:14px;
            font-weight:700;
        }
        .main-nav a:hover,.main-nav a.active{
            color:var(--night);
            background:#f2e4e9;
        }
        .main-nav a.active{box-shadow:inset 0 -3px 0 var(--coral)}
        .main-nav a:last-child{
            color:#fff;
            background:var(--coral);
            box-shadow:0 7px 18px rgba(255,118,95,.24);
        }
        .main-nav a:last-child:hover{background:var(--coral-dark);transform:translateY(-2px)}
        .menu-toggle{
            display:none;
            padding:9px 12px;
            border-radius:9px;
            color:#fff;
            background:var(--night);
            font-size:13px;
        }

        .article-hero{
            position:relative;
            overflow:hidden;
            padding:78px 0 76px;
            color:#fff;
            background:var(--night);
        }
        .article-hero:before{
            content:"";
            position:absolute;
            width:560px;
            height:560px;
            right:-180px;
            top:-300px;
            border:1px solid rgba(167,242,201,.2);
            border-radius:50%;
            box-shadow:0 0 0 30px rgba(255,118,95,.05),0 0 0 70px rgba(167,242,201,.035);
        }
        .article-hero:after{
            content:"";
            position:absolute;
            inset:0;
            opacity:.18;
            background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
            background-size:42px 42px;
            mask-image:linear-gradient(90deg,#000,transparent 80%);
        }
        .article-hero-inner{position:relative;z-index:1;max-width:940px}
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:9px;
            margin-bottom:28px;
            color:#cbbbd1;
            font-size:13px;
        }
        .breadcrumb a:hover{color:var(--mint)}
        .breadcrumb .separator{color:var(--coral)}
        .article-label{
            display:inline-flex;
            align-items:center;
            gap:9px;
            margin-bottom:18px;
            color:var(--mint);
            font-size:12px;
            font-weight:900;
            letter-spacing:.13em;
        }
        .article-label:before{
            content:"";
            width:25px;
            height:3px;
            border-radius:3px;
            background:var(--coral);
        }
        .article-hero h1{
            max-width:900px;
            margin:0 0 23px;
            color:#fff;
            font-size:clamp(32px,5vw,62px);
            line-height:1.16;
            letter-spacing:-.055em;
            overflow-wrap:anywhere;
        }
        .article-summary{
            max-width:780px;
            margin:0;
            color:#d8cbdc;
            font-size:17px;
            line-height:1.9;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px 22px;
            margin-top:30px;
            color:#bcaabd;
            font-size:13px;
        }
        .meta-item{display:inline-flex;align-items:center;gap:7px}
        .meta-dot{width:6px;height:6px;border-radius:50%;background:var(--coral)}

        .article-wrap{padding:76px 0 92px}
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,820px) 280px;
            gap:72px;
            align-items:start;
            justify-content:center;
        }
        .article-content{
            min-width:0;
            color:#3a303b;
            font-size:17px;
            line-height:1.95;
        }
        .article-content h2{
            margin:48px 0 18px;
            color:var(--night);
            font-size:30px;
            line-height:1.3;
            letter-spacing:-.035em;
        }
        .article-content h3{
            margin:34px 0 13px;
            color:var(--berry);
            font-size:22px;
            line-height:1.4;
        }
        .article-content p{margin:0 0 22px}
        .article-content ul,.article-content ol{
            margin:20px 0 26px;
            padding-left:25px;
        }
        .article-content ul{list-style:disc}
        .article-content ol{list-style:decimal}
        .article-content li{padding-left:7px;margin:8px 0}
        .article-content blockquote{
            margin:30px 0;
            padding:20px 24px;
            color:var(--berry);
            background:var(--soft);
            border-left:4px solid var(--coral);
            border-radius:0 var(--radius-md) var(--radius-md) 0;
        }
        .article-content img{
            width:auto;
            max-width:100%;
            margin:30px auto;
            border-radius:var(--radius-md);
            box-shadow:var(--shadow);
        }
        .article-content table{
            width:100%;
            margin:28px 0;
            border-collapse:collapse;
            background:var(--paper);
            border:1px solid var(--line);
            font-size:15px;
        }
        .article-content th,.article-content td{
            padding:12px 15px;
            text-align:left;
            border-bottom:1px solid var(--line);
        }
        .article-content th{color:var(--night);background:var(--soft)}
        .article-content strong{color:var(--berry)}
        .article-content hr{margin:42px 0;border:0;border-top:1px solid var(--line)}
        .article-content pre{
            overflow:auto;
            padding:18px;
            color:#f8e9f4;
            background:var(--night);
            border-radius:var(--radius-md);
            font-size:14px;
        }
        .empty-state{
            padding:58px 30px;
            text-align:center;
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .empty-icon{
            width:58px;height:58px;margin:0 auto 18px;
            display:grid;place-items:center;
            color:var(--coral);
            background:var(--soft);
            border-radius:50%;
            font-size:24px;
        }
        .empty-state h2{margin:0 0 10px;color:var(--night);font-size:26px}
        .empty-state p{margin:0 0 22px;color:var(--muted)}
        .btn{
            display:inline-flex;
            min-height:46px;
            align-items:center;
            justify-content:center;
            padding:10px 20px;
            border:1px solid transparent;
            border-radius:10px;
            font-size:14px;
            font-weight:800;
        }
        .btn-primary{
            color:#fff;
            background:var(--coral);
            box-shadow:0 10px 25px rgba(255,118,95,.22);
        }
        .btn-primary:hover{color:#fff;background:#ff927d;transform:translateY(-3px)}
        .btn-dark{color:#fff;background:var(--night)}
        .btn-dark:hover{color:var(--mint);background:var(--night-2);transform:translateY(-2px)}

        .article-side{
            position:sticky;
            top:110px;
        }
        .side-card{
            padding:24px;
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .side-card + .side-card{margin-top:18px}
        .side-card h2{
            margin:0 0 16px;
            color:var(--night);
            font-size:18px;
            line-height:1.4;
        }
        .side-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.8}
        .side-nav li{border-bottom:1px solid var(--line)}
        .side-nav li:last-child{border-bottom:0}
        .side-nav a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:12px 0;
            color:#5d4c61;
            font-size:14px;
            font-weight:700;
        }
        .side-nav a:after{content:"→";color:var(--coral)}
        .side-nav a:hover{color:var(--coral-dark);padding-left:4px}
        .side-badge{
            display:inline-block;
            margin-bottom:12px;
            padding:5px 9px;
            color:var(--berry);
            background:var(--mint);
            border-radius:6px;
            font-size:11px;
            font-weight:900;
        }

        .article-footer-links{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
            margin-top:58px;
            padding-top:26px;
            border-top:1px solid var(--line);
        }
        .article-link{
            min-height:82px;
            padding:16px 18px;
            background:var(--paper);
            border:1px solid var(--line);
            border-radius:var(--radius-md);
        }
        .article-link:hover{border-color:var(--coral);transform:translateY(-3px);box-shadow:var(--shadow)}
        .article-link span{display:block;margin-bottom:5px;color:var(--muted);font-size:12px}
        .article-link strong{display:block;color:var(--night);font-size:14px;line-height:1.5}

        .cta-band{
            padding:62px 0;
            color:#fff;
            background:var(--berry);
        }
        .cta-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .cta-band h2{margin:0 0 8px;font-size:clamp(25px,3vw,37px);line-height:1.25}
        .cta-band p{margin:0;color:#dbcbdc;font-size:15px}
        .cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex-shrink:0}
        .btn-light{color:var(--night);background:var(--mint)}
        .btn-light:hover{color:var(--night);background:#d4ffdf;transform:translateY(-2px)}

        .site-footer{
            padding:62px 0 22px;
            color:#d9cbdc;
            background:var(--ink);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.7fr 1fr 1fr 1fr;
            gap:42px;
            padding-bottom:45px;
        }
        .footer-brand .brand{color:#fff;margin-bottom:18px}
        .footer-brand p{max-width:350px;margin:0;color:#a998ad;font-size:14px;line-height:1.8}
        .footer-col h3{
            margin:0 0 15px;
            color:#fff;
            font-size:15px;
        }
        .footer-col li+li{margin-top:9px}
        .footer-col a{color:#a998ad;font-size:14px}
        .footer-col a:hover{color:var(--mint);padding-left:3px}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:20px;
            padding-top:20px;
            border-top:1px solid rgba(255,255,255,.1);
            color:#88788e;
            font-size:12px;
        }

        @media (max-width:1199px){
            .main-nav{gap:0}
            .main-nav a{padding-left:9px;padding-right:9px}
            .article-layout{grid-template-columns:minmax(0,780px) 250px;gap:40px}
        }
        @media (max-width:991px){
            .menu-toggle{display:block}
            .main-nav{
                display:none;
                position:absolute;
                top:78px;
                left:24px;
                right:24px;
                padding:12px;
                flex-direction:column;
                align-items:stretch;
                background:var(--paper);
                border:1px solid var(--line);
                border-radius:var(--radius-md);
                box-shadow:var(--shadow);
            }
            .main-nav.open{display:flex}
            .main-nav a{padding:12px 14px}
            .article-layout{display:block}
            .article-side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:45px}
            .side-card+.side-card{margin-top:0}
            .footer-grid{grid-template-columns:1.5fr 1fr 1fr}
            .footer-brand{grid-column:1/-1}
        }
        @media (max-width:767px){
            .container{width:min(calc(100% - 32px),var(--container))}
            .article-hero{padding:58px 0 54px}
            .article-hero h1{font-size:36px}
            .article-wrap{padding:48px 0 60px}
            .article-content{font-size:16px;line-height:1.85}
            .article-content h2{font-size:26px;margin-top:38px}
            .article-content h3{font-size:20px}
            .article-footer-links{grid-template-columns:1fr}
            .article-side{display:block}
            .side-card+.side-card{margin-top:16px}
            .cta-inner{display:block}
            .cta-actions{margin-top:22px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
            .footer-brand{grid-column:1/-1}
            .footer-bottom{display:block}
            .footer-bottom span{display:block}
            .footer-bottom span+span{margin-top:8px}
        }
        @media (max-width:520px){
            .navbar{min-height:70px}
            .main-nav{top:70px;left:16px;right:16px}
            .brand-text{font-size:16px}
            .brand-text small{display:none}
            .brand-mark{width:34px;height:34px}
            .article-hero h1{font-size:31px}
            .article-summary{font-size:15px}
            .article-meta{display:block}
            .meta-item{margin-bottom:8px}
            .footer-grid{grid-template-columns:1fr}
            .footer-brand{grid-column:auto}
            .cta-actions .btn{width:100%}
        }

/* roulang page: category1 */
:root{
            --ink:#17121e;
            --night:#201326;
            --night-2:#2b1834;
            --berry:#5b244e;
            --coral:#ff765f;
            --coral-dark:#dc584f;
            --mint:#a7f2c9;
            --cream:#fff8ed;
            --paper:#fffdf9;
            --muted:#877989;
            --line:#eadfe5;
            --soft:#f6eef1;
            --shadow:0 18px 50px rgba(37,18,42,.12);
            --shadow-dark:0 22px 60px rgba(8,4,15,.28);
            --radius:18px;
            --container:1220px;
            --ease:180ms ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;font-size:16px;line-height:1.7}
        a{color:inherit;text-decoration:none}
        a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
        a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
        img{display:block;max-width:100%}
        button{font:inherit;border:0;cursor:pointer}
        .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
        .site-header{position:sticky;top:0;z-index:20;background:rgba(255,248,237,.95);border-bottom:1px solid rgba(91,36,78,.12);backdrop-filter:blur(14px)}
        .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:11px;color:var(--night);font-weight:800;letter-spacing:-.04em;white-space:nowrap}
        .brand-mark{width:37px;height:37px;border-radius:12px;background:var(--night);display:grid;place-items:center;color:var(--coral);font-size:19px;box-shadow:5px 5px 0 var(--mint)}
        .brand-text{font-size:18px}
        .brand-text small{display:block;color:var(--muted);font-size:10px;line-height:1.2;letter-spacing:.12em}
        .main-nav{display:flex;align-items:center;gap:4px}
        .main-nav a{padding:9px 13px;border-radius:9px;color:#5d4c61;font-size:14px;font-weight:700}
        .main-nav a:hover,.main-nav a.active{color:var(--night);background:#f2e4e9}
        .main-nav a.active{box-shadow:inset 0 -3px 0 var(--coral)}
        .nav-cta{background:var(--coral)!important;color:#fff!important;box-shadow:0 7px 18px rgba(255,118,95,.24)}
        .nav-cta:hover{background:var(--coral-dark)!important;transform:translateY(-2px)}
        .menu-toggle{display:none;background:var(--night);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px}
        .notice-bar{background:var(--night-2);color:#dbcddd;font-size:13px}
        .notice-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:18px}
        .notice-inner strong{color:var(--mint);font-weight:800}
        .notice-link{color:#fff;border-bottom:1px solid var(--coral)}
        .inner-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:78px 0 76px}
        .inner-hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(167,242,201,.18);border-radius:50%;right:-140px;top:-260px;box-shadow:0 0 0 28px rgba(255,118,95,.05),0 0 0 64px rgba(167,242,201,.035)}
        .inner-hero:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
        .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:70px}
        .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;color:#bcaebe;font-size:13px;margin-bottom:22px}
        .breadcrumb a:hover{color:var(--mint)}
        .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:17px}
        .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
        h1{font-size:clamp(36px,5vw,62px);line-height:1.12;letter-spacing:-.055em;margin:0 0 21px;font-weight:800}
        .inner-hero h1 em{font-style:normal;color:var(--coral)}
        .hero-copy{max-width:635px;color:#d8cbdc;font-size:17px;line-height:1.9;margin:0}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
        .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:800;border:1px solid transparent}
        .btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 25px rgba(255,118,95,.22)}
        .btn-primary:hover{background:#ff927d;transform:translateY(-3px);box-shadow:0 15px 30px rgba(255,118,95,.3)}
        .btn-outline{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.04);color:#fff}
        .btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
        .hall-visual{min-height:330px;position:relative;display:flex;align-items:center;justify-content:center}
        .orbit{position:absolute;width:285px;height:285px;border:1px solid rgba(167,242,201,.35);border-radius:50%;transform:rotate(-18deg)}
        .orbit:before,.orbit:after{content:"";position:absolute;width:13px;height:13px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 7px rgba(255,118,95,.13)}
        .orbit:before{top:16px;left:50px}.orbit:after{right:22px;bottom:54px;background:var(--mint)}
        .hall-panel{position:relative;width:min(100%,410px);padding:25px;background:#321b3b;border:1px solid rgba(255,255,255,.14);border-radius:22px;box-shadow:var(--shadow-dark);transform:rotate(3deg)}
        .panel-line{display:flex;justify-content:space-between;color:#cbbbd1;font-size:12px;margin-bottom:25px}
        .panel-title{font-size:27px;font-weight:800;line-height:1.2;margin-bottom:20px}
        .panel-title span{color:var(--mint)}
        .panel-tiles{display:grid;grid-template-columns:1.35fr .85fr;gap:11px}
        .panel-tile{min-height:105px;padding:16px;border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-weight:800}
        .panel-tile strong{font-size:22px}.panel-tile small{font-size:12px;color:rgba(255,255,255,.75)}
        .tile-coral{background:var(--coral)}.tile-mint{background:#47735f}.tile-plum{background:#63436f}
        .section{padding:84px 0}
        .section-soft{background:var(--paper)}
        .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
        .section-kicker{color:var(--coral-dark);font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:7px}
        h2{color:var(--night);font-size:clamp(27px,3.2vw,42px);line-height:1.2;letter-spacing:-.04em;margin:0;font-weight:800}
        .section-intro{max-width:570px;color:var(--muted);margin:0}
        .text-link{color:var(--berry);font-size:14px;font-weight:800;border-bottom:1px solid var(--coral);white-space:nowrap}
        .text-link:hover{color:var(--coral-dark);padding-bottom:3px}
        .hall-layout{display:grid;grid-template-columns:1.45fr .75fr;gap:18px}
        .hall-main{position:relative;min-height:335px;overflow:hidden;padding:36px;border-radius:var(--radius);background:var(--berry);color:#fff;display:flex;flex-direction:column;justify-content:end;box-shadow:var(--shadow)}
        .hall-main:before{content:"C7";position:absolute;right:15px;top:-52px;color:rgba(255,255,255,.08);font-size:245px;line-height:1;font-weight:900}
        .hall-main>*{position:relative;z-index:1}
        .hall-main h3{font-size:32px;margin:0 0 12px}.hall-main p{max-width:530px;color:#eaddea;margin:0 0 22px}
        .hall-stack{display:grid;gap:18px}
        .hall-side{min-height:158px;padding:26px;border-radius:var(--radius);background:#f2dcd6;border:1px solid #ebc9c2}
        .hall-side:last-child{background:#dff3e8;border-color:#c5e8d4}
        .hall-side h3{font-size:21px;margin:0 0 7px;color:var(--night)}.hall-side p{font-size:14px;color:#665866;margin:0 0 14px}
        .mini-link{font-size:13px;font-weight:800;color:var(--berry)}
        .mini-link:hover{color:var(--coral-dark);text-decoration:underline}
        .category-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 15px;scrollbar-width:thin}
        .category-strip a{flex:0 0 auto;padding:11px 18px;border:1px solid var(--line);border-radius:30px;background:#fff;color:var(--berry);font-size:14px;font-weight:800}
        .category-strip a:hover,.category-strip a.active{background:var(--night);border-color:var(--night);color:#fff}
        .browse-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:stretch;margin-top:22px}
        .browse-feature{padding:32px;border-radius:var(--radius);background:var(--night);color:#fff}
        .browse-feature .number{color:var(--mint);font:700 48px/1 monospace;opacity:.85}
        .browse-feature h3{font-size:25px;margin:26px 0 10px}.browse-feature p{color:#d4c5d8;margin:0 0 22px}
        .browse-list{display:grid;gap:10px}
        .browse-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 20px;background:#fff;border:1px solid var(--line);border-radius:14px}
        .browse-row:hover{transform:translateX(4px);border-color:var(--coral);box-shadow:var(--shadow)}
        .browse-row strong{display:block;color:var(--night);font-size:17px}.browse-row span{display:block;color:var(--muted);font-size:13px}
        .row-arrow{color:var(--coral);font-size:23px}
        .feature-band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
        .feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
        .feature-item{padding:25px 24px;border-right:1px solid var(--line)}.feature-item:first-child{padding-left:0}.feature-item:last-child{border-right:0}
        .feature-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--night);color:var(--mint);font-weight:900;margin-bottom:14px}
        .feature-item h3{font-size:17px;margin:0 0 5px}.feature-item p{color:var(--muted);font-size:13px;margin:0}
        .updates-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px}
        .updates-intro{padding:30px;border-radius:var(--radius);background:#eadbe4}.updates-intro h3{font-size:27px;line-height:1.3;margin:0 0 12px}.updates-intro p{color:#6e5c6d;margin:0 0 22px}
        .update-list{border-top:1px solid var(--line)}
        .update-item{display:grid;grid-template-columns:105px 1fr auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
        .update-date{color:var(--berry);font:700 13px/1.4 monospace}.update-meta{font-size:12px;color:var(--muted);margin-bottom:3px}.update-title{font-weight:800;color:var(--night);font-size:16px}.update-title:hover{color:var(--coral-dark)}
        .update-arrow{color:var(--coral);font-size:20px}
        .empty-state{padding:27px;border:1px dashed #cdbec7;border-radius:14px;background:#fff;color:var(--muted);text-align:center}
        .app-panel{display:grid;grid-template-columns:200px 1fr 230px;gap:34px;align-items:center;padding:38px 42px;border-radius:24px;background:var(--night);color:#fff;overflow:hidden;position:relative}
        .app-panel:after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(167,242,201,.17);border-radius:50%;right:-120px;bottom:-180px}
        .device{height:220px;width:122px;margin:auto;border:7px solid #100b16;border-radius:24px;background:linear-gradient(150deg,#ff765f 0 38%,#6e3b72 38% 100%);padding:15px 10px;box-shadow:0 14px 0 rgba(167,242,201,.25)}
        .device-bar{height:5px;width:38px;border-radius:5px;background:rgba(255,255,255,.75);margin:0 auto 30px}.device-mark{font-weight:900;font-size:28px;text-align:center;color:#fff;margin-top:28px}.device-note{font-size:10px;text-align:center;color:#f8dfe2;margin-top:18px}
        .app-panel h2{color:#fff;margin-bottom:11px}.app-panel p{color:#d7c8d9;margin:0;max-width:510px}
        .download-box{position:relative;z-index:1}.qr-box{height:104px;width:104px;margin-bottom:14px;border:6px solid #fff;background:repeating-linear-gradient(45deg,#24152b 0 5px,#fff 5px 10px);color:var(--night);display:grid;place-items:center;font-size:11px;font-weight:800;text-align:center}
        .download-box .btn{width:100%;margin-bottom:8px}.download-note{font-size:12px;color:#bdadbf}
        .faq-list{max-width:870px;margin:0 auto;border-top:1px solid var(--line)}
        .faq-item{border-bottom:1px solid var(--line)}.faq-question{width:100%;background:transparent;text-align:left;padding:20px 4px;color:var(--night);font-weight:800;display:flex;justify-content:space-between;gap:18px}.faq-question:hover{color:var(--coral-dark)}.faq-symbol{color:var(--coral);font-size:23px;line-height:1}
        .faq-answer{display:none;padding:0 38px 21px 4px;color:var(--muted);font-size:14px}.faq-item.open .faq-answer{display:block}.faq-item.open .faq-symbol{transform:rotate(45deg)}
        .cta{padding:58px 0;background:var(--coral);color:#fff}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{color:#fff;font-size:34px}.cta p{margin:7px 0 0;color:#ffe9e4}.cta .btn{background:var(--night);color:#fff}.cta .btn:hover{background:#38203f;transform:translateY(-2px)}
        .site-footer{background:var(--night);color:#fff;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px}.footer-brand .brand{color:#fff}.footer-brand p{max-width:320px;color:#c6b7c8;font-size:13px;margin:19px 0 0}.footer-col h3{font-size:14px;margin:0 0 15px;color:var(--mint)}.footer-col ul{list-style:none;padding:0;margin:0}.footer-col li{margin:8px 0}.footer-col a{color:#c8b9ca;font-size:13px}.footer-col a:hover{color:var(--coral);padding-left:3px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.13);margin-top:42px;padding-top:19px;color:#9d8da1;font-size:12px}
        @media (max-width:1200px){.hero-grid{gap:38px}.main-nav a{padding:9px 8px;font-size:13px}}
        @media (max-width:992px){.main-nav{display:none;position:absolute;left:24px;right:24px;top:70px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px 14px}.menu-toggle{display:block}.hero-grid,.hall-layout,.browse-layout,.updates-layout{grid-template-columns:1fr}.hall-visual{min-height:280px}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-item:nth-child(2){border-right:0}.app-panel{grid-template-columns:150px 1fr}.download-box{grid-column:2}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
        @media (max-width:768px){.container{width:min(calc(100% - 34px),var(--container))}.navbar{height:70px}.notice-inner{padding:8px 0}.notice-inner span:last-child{display:none}.inner-hero{padding:58px 0}.section{padding:58px 0}.section-head,.cta-inner{align-items:flex-start;flex-direction:column}.app-panel{grid-template-columns:1fr;text-align:center;padding:32px 24px}.device{margin:0 auto}.download-box{grid-column:auto;width:min(100%,250px);margin:0 auto}.qr-box{margin-left:auto;margin-right:auto}.update-item{grid-template-columns:82px 1fr}.update-arrow{display:none}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:6px}}
        @media (max-width:576px){h1{font-size:37px}.hero-actions .btn{width:100%}.hall-main{min-height:300px;padding:27px}.hall-main h3{font-size:27px}.feature-grid{grid-template-columns:1fr}.feature-item,.feature-item:first-child{border-right:0;border-bottom:1px solid var(--line);padding:20px 0}.feature-item:last-child{border-bottom:0}.browse-row{padding:16px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.footer-bottom{margin-top:30px}.section-head{margin-bottom:23px}}
        @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* roulang page: category2 */
:root{
            --ink:#17121e;
            --night:#201326;
            --night-2:#2b1834;
            --berry:#5b244e;
            --coral:#ff765f;
            --coral-dark:#dc584f;
            --mint:#a7f2c9;
            --cream:#fff8ed;
            --paper:#fffdf9;
            --muted:#877989;
            --line:#eadfe5;
            --soft:#f6eef1;
            --shadow:0 18px 50px rgba(37,18,42,.12);
            --shadow-dark:0 22px 60px rgba(8,4,15,.28);
            --radius:18px;
            --container:1220px;
            --ease:180ms ease;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{margin:0;font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:16px}
        a{color:inherit;text-decoration:none}
        a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
        a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
        img{display:block;max-width:100%}
        button{font:inherit;border:0;cursor:pointer}
        .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
        .site-header{background:rgba(255,248,237,.95);border-bottom:1px solid rgba(91,36,78,.12);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
        .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.04em;color:var(--night);white-space:nowrap}
        .brand-mark{width:37px;height:37px;border-radius:12px;background:var(--night);display:grid;place-items:center;color:var(--coral);font-size:19px;box-shadow:5px 5px 0 var(--mint)}
        .brand-text{font-size:18px}
        .brand-text small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;line-height:1.2;margin-top:1px}
        .main-nav{display:flex;align-items:center;gap:4px}
        .main-nav a{display:block;padding:9px 13px;border-radius:9px;color:#5d4c61;font-size:14px;font-weight:700}
        .main-nav a:hover,.main-nav a.active{color:var(--night);background:#f2e4e9}
        .main-nav a.active{box-shadow:inset 0 -3px 0 var(--coral)}
        .nav-cta{background:var(--coral)!important;color:#fff!important;padding:10px 17px!important;box-shadow:0 7px 18px rgba(255,118,95,.24)}
        .nav-cta:hover{background:var(--coral-dark)!important;transform:translateY(-2px)}
        .menu-toggle{display:none;background:var(--night);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px}
        .notice-bar{background:var(--night-2);color:#e9dceb;font-size:13px}
        .notice-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
        .notice-inner strong{color:var(--mint);font-weight:800}
        .notice-link{color:#fff;border-bottom:1px solid var(--coral)}
        .page-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:78px 0 74px}
        .page-hero:before{content:"";position:absolute;width:580px;height:580px;border:1px solid rgba(167,242,201,.18);border-radius:50%;right:-180px;top:-300px;box-shadow:0 0 0 30px rgba(255,118,95,.05),0 0 0 68px rgba(167,242,201,.035)}
        .page-hero:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 75%)}
        .hero-content{position:relative;z-index:1;max-width:760px}
        .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;color:#cbbbd1;font-size:13px;margin-bottom:24px}
        .breadcrumb a:hover{color:var(--mint)}
        .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:17px}
        .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
        h1{font-size:clamp(35px,5vw,64px);line-height:1.12;letter-spacing:-.055em;margin:0 0 20px;font-weight:800}
        h1 em{font-style:normal;color:var(--coral)}
        .hero-copy{color:#d6c9da;max-width:670px;font-size:17px;line-height:1.9;margin:0}
        .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
        .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:14px;border:1px solid transparent}
        .btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 25px rgba(255,118,95,.22)}
        .btn-primary:hover{background:#ff927d;transform:translateY(-3px);box-shadow:0 15px 30px rgba(255,118,95,.3)}
        .btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
        .btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
        .hero-index{position:absolute;right:8%;bottom:28px;z-index:1;color:rgba(255,255,255,.08);font-size:170px;font-weight:900;line-height:1}
        .section{padding:82px 0}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
        .section-kicker{color:var(--coral-dark);font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:8px}
        h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em;color:var(--night);margin:0}
        .section-intro{color:var(--muted);max-width:580px;margin:10px 0 0}
        .category-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
        .filter-panel{background:var(--night);color:#fff;border-radius:var(--radius);padding:25px;position:sticky;top:104px}
        .filter-panel h3{font-size:20px;margin:0 0 8px}
        .filter-panel p{font-size:13px;color:#cbbbd1;margin:0 0 22px}
        .filter-list{display:grid;gap:8px}
        .filter-list button{width:100%;text-align:left;background:transparent;border:1px solid rgba(255,255,255,.14);color:#dbcddd;border-radius:10px;padding:11px 13px;font-size:14px;font-weight:700}
        .filter-list button:hover,.filter-list button.active{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateX(3px)}
        .category-main{min-width:0}
        .category-strip{display:flex;gap:9px;overflow:auto;padding:3px 2px 18px;scrollbar-width:thin}
        .category-strip a{white-space:nowrap;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;color:var(--berry);font-size:13px;font-weight:800}
        .category-strip a:hover,.category-strip a.active{background:var(--berry);border-color:var(--berry);color:#fff}
        .feature-game{display:grid;grid-template-columns:1.05fr .95fr;min-height:260px;background:var(--berry);border-radius:var(--radius);overflow:hidden;color:#fff;margin-bottom:20px}
        .feature-copy{padding:32px}
        .feature-copy .badge{background:var(--mint);color:var(--night)}
        .badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;letter-spacing:.04em}
        .feature-copy h3{font-size:29px;line-height:1.25;margin:22px 0 10px}
        .feature-copy p{color:#eaddec;margin:0;max-width:460px}
        .feature-visual{position:relative;min-height:240px;background:#351d41;overflow:hidden}
        .feature-visual:before,.feature-visual:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(167,242,201,.55)}
        .feature-visual:before{width:270px;height:270px;right:-55px;top:-30px}
        .feature-visual:after{width:160px;height:160px;right:42px;top:35px;border-color:rgba(255,118,95,.7)}
        .visual-letter{position:absolute;z-index:1;left:35px;bottom:18px;font-size:112px;font-weight:900;color:var(--coral);line-height:1}
        .game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
        .game-card{background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
        .game-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(91,36,78,.32)}
        .game-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#f9d9d2;color:var(--coral-dark);font-weight:900;font-size:19px}
        .game-card:nth-child(2) .game-icon{background:#dff8e7;color:#3b8d68}
        .game-card:nth-child(3) .game-icon{background:#eadcf0;color:var(--berry)}
        .game-card:nth-child(4) .game-icon{background:#f8e8ba;color:#a56b16}
        .game-card h3{font-size:19px;margin:13px 0 5px}
        .game-card p{font-size:13px;color:var(--muted);margin:0}
        .card-link{color:var(--berry);font-size:13px;font-weight:900;margin-top:14px}
        .card-link:hover{color:var(--coral-dark);padding-left:4px}
        .info-band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0}
        .info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
        .info-item{display:flex;gap:13px;align-items:flex-start}
        .info-number{color:var(--coral-dark);font-weight:900;font-size:24px;line-height:1}
        .info-item strong{display:block;font-size:15px;color:var(--night)}
        .info-item span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
        .browse-section{background:var(--paper)}
        .browse-layout{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center}
        .browse-list{border-top:1px solid var(--line)}
        .browse-row{display:flex;align-items:center;gap:17px;padding:18px 0;border-bottom:1px solid var(--line)}
        .browse-row b{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--night);color:var(--mint);font-size:13px}
        .browse-row strong{font-size:16px}
        .browse-row small{display:block;color:var(--muted);font-size:12px}
        .browse-row .arrow{margin-left:auto;color:var(--coral);font-size:20px}
        .browse-art{min-height:330px;border-radius:20px;background:var(--night-2);position:relative;overflow:hidden;padding:29px;color:#fff}
        .browse-art:before{content:"游戏分类";position:absolute;right:-18px;bottom:0;color:rgba(255,255,255,.08);font-size:68px;font-weight:900;writing-mode:vertical-rl}
        .mini-board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:55px}
        .mini-cell{height:70px;border-radius:12px;background:#43234b;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;color:var(--mint);font-size:22px;font-weight:900}
        .mini-cell:nth-child(2),.mini-cell:nth-child(5){background:var(--coral);color:#fff}
        .faq-wrap{max-width:900px;margin:0 auto}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;background:transparent;padding:20px 4px;color:var(--night);font-weight:800;font-size:16px}
        .faq-question:hover{color:var(--coral-dark)}
        .faq-question span:last-child{color:var(--coral);font-size:22px;line-height:1}
        .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 45px 20px 4px}
        .faq-item.open .faq-answer{display:block}
        .faq-item.open .faq-question{color:var(--coral-dark)}
        .cta{padding:66px 0;background:var(--berry);color:#fff}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
        .cta h2{color:#fff;font-size:clamp(26px,3vw,38px)}
        .cta p{color:#e6d8e8;margin:10px 0 0;max-width:640px}
        .site-footer{background:var(--ink);color:#fff;padding:58px 0 22px}
        .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px}
        .footer-brand p{color:#b9aebe;max-width:330px;font-size:13px;margin:18px 0 0}
        .site-footer .brand{color:#fff}
        .site-footer .brand-mark{background:var(--coral);color:#fff;box-shadow:5px 5px 0 var(--mint)}
        .footer-col h3{font-size:14px;margin:3px 0 16px;color:var(--mint)}
        .footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
        .footer-col a{color:#b9aebe;font-size:13px}
        .footer-col a:hover{color:var(--coral);padding-left:3px}
        .footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:18px;display:flex;justify-content:space-between;gap:20px;color:#907f94;font-size:12px}
        @media (max-width:1200px){.main-nav a{padding-left:9px;padding-right:9px}.hero-index{right:3%}}
        @media (max-width:992px){.main-nav{display:none}.menu-toggle{display:block}.category-layout{grid-template-columns:1fr}.filter-panel{position:static}.filter-list{grid-template-columns:repeat(3,1fr)}.info-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}
        @media (max-width:768px){.container{width:min(calc(100% - 34px),var(--container))}.navbar{height:70px}.notice-inner{padding:7px 0}.notice-link{display:none}.page-hero{padding:58px 0 60px}.hero-index{font-size:110px;right:-5px;bottom:10px}.section{padding:58px 0}.section-head{display:block}.feature-game,.browse-layout{grid-template-columns:1fr}.feature-visual{min-height:180px}.game-grid{grid-template-columns:1fr}.filter-list{grid-template-columns:repeat(2,1fr)}.cta-inner{display:block}.cta .btn{margin-top:23px}.footer-grid{grid-template-columns:1fr 1fr}}
        @media (max-width:576px){.brand-text{font-size:16px}.brand-text small{display:none}.hero-actions,.hero-actions .btn{width:100%}.filter-list{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.browse-art{min-height:270px}.mini-board{margin-top:35px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:7px}}

@media (max-width:768px){
    .main-nav.is-open{
        display:flex;
        position:absolute;
        top:70px;
        left:17px;
        right:17px;
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        background:var(--paper);
        border:1px solid var(--line);
        border-radius:14px;
        box-shadow:var(--shadow);
    }
    .main-nav.is-open a{padding:12px 14px}
}

/* roulang page: category3 */
:root{
      --ink:#17121e;--night:#201326;--night-2:#2b1834;--berry:#5b244e;
      --coral:#ff765f;--coral-dark:#dc584f;--mint:#a7f2c9;--cream:#fff8ed;
      --paper:#fffdf9;--muted:#877989;--line:#eadfe5;--soft:#f6eef1;
      --shadow:0 18px 50px rgba(37,18,42,.12);--shadow-dark:0 22px 60px rgba(8,4,15,.28);
      --radius:18px;--container:1220px;--ease:180ms ease
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:16px}
    a{color:inherit;text-decoration:none}
    a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
    a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
    img{display:block;max-width:100%}
    button{font:inherit;border:0;cursor:pointer}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .site-header{background:rgba(255,248,237,.95);border-bottom:1px solid rgba(91,36,78,.12);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.04em;color:var(--night);white-space:nowrap}
    .brand-mark{width:37px;height:37px;border-radius:12px;background:var(--night);display:grid;place-items:center;color:var(--coral);font-size:19px;box-shadow:5px 5px 0 var(--mint)}
    .brand-text{font-size:18px}.brand-text small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;line-height:1.2}
    .main-nav{display:flex;align-items:center;gap:4px}
    .main-nav a{display:block;padding:9px 13px;border-radius:9px;color:#5d4c61;font-size:14px;font-weight:700}
    .main-nav a:hover,.main-nav a.active{color:var(--night);background:#f2e4e9}
    .main-nav a.active{box-shadow:inset 0 -3px 0 var(--coral)}
    .nav-cta{background:var(--coral)!important;color:#fff!important;box-shadow:0 7px 18px rgba(255,118,95,.24)}
    .nav-cta:hover{background:var(--coral-dark)!important;transform:translateY(-2px)}
    .menu-toggle{display:none;background:var(--night);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px}
    .ticker{background:var(--night-2);color:#dacadd;font-size:13px}
    .ticker-inner{min-height:38px;display:flex;align-items:center;gap:12px}
    .ticker b{color:var(--mint);font-size:11px;letter-spacing:.1em}
    .hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:78px 0 76px}
    .hero:before{content:"";position:absolute;width:610px;height:610px;border:1px solid rgba(167,242,201,.18);border-radius:50%;right:-190px;top:-290px;box-shadow:0 0 0 28px rgba(255,118,95,.05),0 0 0 62px rgba(167,242,201,.035)}
    .hero:after{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 72%)}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
    .crumb{font-size:13px;color:#cdbbd1;margin-bottom:24px}.crumb a{color:var(--mint)}.crumb span{margin:0 8px;color:#806586}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:18px}
    .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
    h1{font-size:clamp(36px,5vw,64px);line-height:1.12;letter-spacing:-.055em;margin:0 0 22px;font-weight:800}
    h1 em{font-style:normal;color:var(--coral)}
    .hero-copy{color:#d6c9da;max-width:620px;font-size:17px;line-height:1.9;margin:0}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:14px;border:1px solid transparent}
    .btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 25px rgba(255,118,95,.22)}
    .btn-primary:hover{background:#ff927d;transform:translateY(-3px);box-shadow:0 15px 30px rgba(255,118,95,.3)}
    .btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
    .btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
    .playboard{position:relative;min-height:340px;padding:28px;background:#311b3a;border:1px solid rgba(255,255,255,.13);border-radius:24px;box-shadow:var(--shadow-dark);transform:rotate(2deg)}
    .playboard:after{content:"03";position:absolute;right:22px;bottom:-24px;color:rgba(167,242,201,.16);font:900 150px/1 Arial}
    .board-top{display:flex;justify-content:space-between;color:#dfd0e1;font-size:12px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:18px}
    .board-title{font-size:30px;font-weight:800;line-height:1.2;margin:30px 0 22px}
    .board-title span{color:var(--mint)}
    .board-row{display:flex;align-items:center;gap:13px;margin:16px 0;color:#f8eaf5}
    .board-no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--coral);font-weight:800}
    .board-row:nth-child(3) .board-no{background:var(--mint);color:var(--night)}
    .board-row:nth-child(4) .board-no{background:#cda8e0;color:var(--night)}
    .board-row small{display:block;color:#bdaec2;font-size:11px}
    .section{padding:82px 0}.section.alt{background:var(--paper)}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
    .section-kicker{color:var(--coral-dark);font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:8px}
    h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em;color:var(--night);margin:0}
    .section-intro{color:var(--muted);max-width:570px;margin:0}
    .text-link{font-weight:800;color:var(--berry);font-size:14px;border-bottom:1px solid var(--coral);white-space:nowrap}
    .text-link:hover{color:var(--coral-dark);padding-bottom:3px}
    .play-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}
    .play-feature{min-height:325px;background:var(--berry);color:#fff;border-radius:var(--radius);padding:34px;position:relative;overflow:hidden}
    .play-feature:before{content:"热门";position:absolute;right:-12px;top:14px;color:rgba(255,255,255,.08);font-size:110px;font-weight:900}
    .play-feature h3{font-size:30px;margin:70px 0 12px;position:relative}.play-feature p{color:#e1d2e1;max-width:490px;position:relative}
    .play-feature .btn{margin-top:15px}
    .side-stack{display:grid;gap:22px}.play-small{padding:25px;border-radius:var(--radius);min-height:151px;border:1px solid var(--line);background:#fff}
    .play-small.mint{background:var(--mint);border-color:transparent}.play-small.coral{background:#ffe1d8;border-color:transparent}
    .play-small h3{margin:0 0 6px;font-size:21px;color:var(--night)}.play-small p{margin:0;color:#625467;font-size:14px}
    .number-list{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:24px}
    .number-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:15px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px}
    .number-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--coral)}
    .number{font-size:26px;font-weight:900;color:var(--coral)}.number-item h3{font-size:17px;margin:0;color:var(--night)}.number-item p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.arrow{color:var(--berry);font-size:22px}
    .info-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .info-item{padding:24px 18px;border-right:1px solid var(--line)}.info-item:last-child{border-right:0}.info-item strong{display:block;color:var(--night);font-size:16px;margin-bottom:4px}.info-item span{color:var(--muted);font-size:13px}
    .guide-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:start}.guide-note{border-left:4px solid var(--coral);padding:8px 0 8px 22px;color:#655769}.guide-note strong{display:block;color:var(--night);font-size:22px;margin-bottom:8px}
    .steps{display:grid;gap:12px}.step{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}.step:last-child{border:0}.step-num{flex:0 0 34px;height:34px;border-radius:9px;background:var(--night);color:var(--mint);display:grid;place-items:center;font-weight:800}.step h3{font-size:17px;margin:0 0 3px}.step p{margin:0;color:var(--muted);font-size:14px}
    .faq{max-width:850px;margin:30px auto 0}.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:11px;padding:0 21px}.faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font-weight:800;color:var(--night);position:relative}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:0;color:var(--coral);font-size:22px;top:14px}.faq details[open] summary:after{content:"−"}.faq p{color:var(--muted);font-size:14px;margin:0 0 19px;line-height:1.8}
    .cta{background:var(--night-2);color:#fff;padding:52px 0}.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}.cta h2{color:#fff;font-size:32px}.cta p{color:#d7c8d9;margin:8px 0 0}.cta-actions{display:flex;gap:11px;flex-wrap:wrap}
    .site-footer{background:#17101c;color:#e8dce9;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1fr;gap:40px}.footer-brand p{color:#aa9baa;max-width:330px;font-size:14px;margin-top:20px}.footer-brand .brand{color:#fff}.footer-col h3{font-size:14px;color:#fff;margin:0 0 15px}.footer-col ul{list-style:none;margin:0;padding:0}.footer-col li{margin:8px 0}.footer-col a{color:#aa9baa;font-size:13px}.footer-col a:hover{color:var(--mint);padding-left:3px}.footer-bottom{display:flex;justify-content:space-between;gap:18px;border-top:1px solid rgba(255,255,255,.1);margin-top:42px;padding-top:19px;color:#8d7e90;font-size:12px}
    @media(max-width:1100px){.main-nav a{padding-left:8px;padding-right:8px;font-size:13px}.hero-grid{gap:38px}.container{width:min(calc(100% - 40px),var(--container))}}
    @media(max-width:900px){.navbar{height:70px}.main-nav{display:none;position:absolute;top:70px;left:20px;right:20px;background:var(--cream);padding:12px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px 14px}.menu-toggle{display:block}.hero-grid,.guide-grid{grid-template-columns:1fr}.hero{padding:58px 0}.play-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-col:last-child{display:none}}
    @media(max-width:680px){.container{width:min(calc(100% - 30px),var(--container))}.hero h1{font-size:39px}.hero-art{min-height:280px}.playboard{transform:none}.section{padding:58px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:14px}.number-list{grid-template-columns:1fr}.info-strip{grid-template-columns:1fr 1fr}.info-item:nth-child(2){border-right:0}.info-item:nth-child(-n+2){border-bottom:1px solid var(--line)}.cta-inner{display:block}.cta-actions{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin:7px 0}}
    @media(max-width:480px){.brand-text{font-size:16px}.brand-mark{width:33px;height:33px}.hero-actions .btn{width:100%}.play-feature{padding:25px}.play-feature h3{margin-top:55px}.info-strip{grid-template-columns:1fr}.info-item{border-right:0!important;border-bottom:1px solid var(--line)}.info-item:last-child{border-bottom:0}.footer-grid{grid-template-columns:1fr}.footer-col:last-child{display:block}}

/* roulang page: category4 */
:root{
        --ink:#17121e;
        --night:#201326;
        --night-2:#2b1834;
        --berry:#5b244e;
        --coral:#ff765f;
        --coral-dark:#dc584f;
        --mint:#a7f2c9;
        --cream:#fff8ed;
        --paper:#fffdf9;
        --muted:#877989;
        --line:#eadfe5;
        --soft:#f6eef1;
        --shadow:0 18px 50px rgba(37,18,42,.12);
        --shadow-dark:0 22px 60px rgba(8,4,15,.28);
        --radius:18px;
        --container:1220px;
        --ease:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:16px}
    a{color:inherit;text-decoration:none}
    a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
    a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
    img{display:block;max-width:100%}
    button{font:inherit;border:0;cursor:pointer}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .site-header{background:rgba(255,248,237,.95);border-bottom:1px solid rgba(91,36,78,.12);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.04em;color:var(--night);white-space:nowrap}
    .brand-mark{width:37px;height:37px;border-radius:12px;background:var(--night);display:grid;place-items:center;color:var(--coral);font-size:19px;box-shadow:5px 5px 0 var(--mint)}
    .brand-text{font-size:18px}
    .brand-text small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;line-height:1.2;margin-top:1px}
    .main-nav{display:flex;align-items:center;gap:4px;list-style:none}
    .main-nav a{display:block;padding:9px 13px;border-radius:9px;color:#5d4c61;font-size:14px;font-weight:700}
    .main-nav a:hover,.main-nav a.active{color:var(--night);background:#f2e4e9}
    .main-nav a.active{box-shadow:inset 0 -3px 0 var(--coral)}
    .main-nav a:last-child{background:var(--coral);color:#fff;padding:10px 17px;box-shadow:0 7px 18px rgba(255,118,95,.24)}
    .main-nav a:last-child:hover{background:var(--coral-dark);transform:translateY(-2px)}
    .menu-toggle{display:none;background:var(--night);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px}
    .notice-bar{background:var(--night-2);color:#e9dceb;font-size:13px}
    .notice-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}
    .notice-inner strong{color:var(--mint);font-weight:800}
    .notice-inner a{color:#fff;border-bottom:1px solid var(--coral)}
    .hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:78px 0 82px}
    .hero:before{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(167,242,201,.18);border-radius:50%;right:-180px;top:-300px;box-shadow:0 0 0 28px rgba(255,118,95,.05),0 0 0 62px rgba(167,242,201,.035)}
    .hero:after{content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 70%)}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}
    .breadcrumb{display:flex;flex-wrap:wrap;gap:9px;color:#cbbbd1;font-size:13px;margin-bottom:22px}
    .breadcrumb a:hover{color:var(--mint)}
    .breadcrumb span{color:var(--coral)}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:18px}
    .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
    h1,h2,h3,p{margin-top:0}
    .hero h1{font-size:clamp(36px,4.5vw,60px);line-height:1.13;letter-spacing:-.055em;max-width:700px;margin-bottom:22px}
    .hero h1 em{font-style:normal;color:var(--coral)}
    .hero-copy{color:#d6c9da;max-width:610px;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:14px;border:1px solid transparent}
    .btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 25px rgba(255,118,95,.22)}
    .btn-primary:hover{background:#ff927d;transform:translateY(-3px);box-shadow:0 15px 30px rgba(255,118,95,.3)}
    .btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
    .btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
    .hero-art{min-height:330px;position:relative;display:flex;align-items:center;justify-content:center}
    .event-board{width:min(100%,430px);background:#311b3a;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:25px;box-shadow:var(--shadow-dark);transform:rotate(2deg)}
    .board-head{display:flex;justify-content:space-between;align-items:center;color:#e9dceb;font-size:12px;margin-bottom:27px}
    .live-dot{display:inline-flex;align-items:center;gap:7px;color:var(--mint)}
    .live-dot:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
    .board-title{font-size:28px;font-weight:800;line-height:1.25;margin-bottom:22px}
    .board-row{display:grid;grid-template-columns:54px 1fr auto;gap:13px;align-items:center;padding:15px 0;border-top:1px solid rgba(255,255,255,.12)}
    .board-row:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
    .board-date{font-size:12px;color:var(--mint);font-weight:800}
    .board-row strong{font-size:14px;color:#fff}
    .board-row small{display:block;color:#bdadbf;font-size:11px}
    .board-state{font-size:11px;border:1px solid rgba(167,242,201,.45);color:var(--mint);padding:4px 7px;border-radius:6px}
    .section{padding:84px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:30px}
    .section-kicker{color:var(--coral-dark);font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:8px}
    .section h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em;color:var(--night);margin-bottom:8px}
    .section-intro{color:var(--muted);max-width:590px}
    .text-link{font-weight:800;color:var(--berry);font-size:14px;border-bottom:1px solid var(--coral);white-space:nowrap}
    .text-link:hover{color:var(--coral-dark);padding-bottom:3px}
    .event-feature{display:grid;grid-template-columns:1.18fr .82fr;gap:18px;margin-bottom:20px}
    .feature-panel{min-height:300px;border-radius:var(--radius);padding:34px;background:var(--berry);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:end}
    .feature-panel:after{content:"活动";position:absolute;right:-10px;top:-42px;font-size:180px;line-height:1;font-weight:900;color:rgba(255,255,255,.08)}
    .feature-panel>*{position:relative;z-index:1}
    .feature-panel h3{font-size:30px;max-width:430px;line-height:1.25;margin-bottom:12px}
    .feature-panel p{color:#eaddea;max-width:470px;margin-bottom:22px}
    .feature-panel .btn{align-self:flex-start}
    .side-panel{border-radius:var(--radius);background:#f1dfe4;border:1px solid #e6cbd4;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
    .side-panel h3{font-size:23px;color:var(--night);line-height:1.3}
    .side-panel p{color:#735e70}
    .side-mark{font-size:54px;color:var(--coral-dark);font-weight:900;line-height:1}
    .event-timeline{position:relative;margin-top:25px;padding-left:30px}
    .event-timeline:before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:#e3cbd2}
    .timeline-item{position:relative;display:grid;grid-template-columns:120px 1fr auto;gap:24px;align-items:center;padding:21px 20px 21px 0;border-bottom:1px solid var(--line)}
    .timeline-item:before{content:"";position:absolute;left:-27px;width:12px;height:12px;border-radius:50%;background:var(--coral);border:3px solid var(--cream);box-shadow:0 0 0 1px var(--coral)}
    .timeline-item.future:before{background:var(--mint);box-shadow:0 0 0 1px #75cda0}
    .timeline-date{color:var(--berry);font-weight:900;font-size:14px}
    .timeline-item h3{font-size:18px;margin-bottom:4px;color:var(--night)}
    .timeline-item p{font-size:13px;color:var(--muted);margin:0}
    .status{justify-self:end;font-size:12px;font-weight:800;padding:6px 10px;border-radius:7px;background:#f7ddd8;color:var(--coral-dark);white-space:nowrap}
    .status.next{background:#e1f8ea;color:#318060}
    .status.done{background:#eee7ee;color:#76677a}
    .category-strip{padding:28px 0;background:var(--night-2);color:#fff}
    .category-strip .container{display:flex;align-items:center;justify-content:space-between;gap:25px}
    .category-strip h2{color:#fff;font-size:23px;margin:0}
    .category-links{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
    .category-links a{border:1px solid rgba(255,255,255,.2);color:#dfd2e2;border-radius:8px;padding:8px 13px;font-size:13px}
    .category-links a:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
    .info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .info-block{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
    .info-block h3{font-size:21px;color:var(--night);margin-bottom:10px}
    .info-block p{color:var(--muted);margin-bottom:18px}
    .info-list{list-style:none;padding:0;margin:0}
    .info-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
    .info-list li:before{content:"↗";color:var(--coral-dark);font-weight:900}
    .faq{max-width:900px;margin:0 auto}
    .faq details{background:var(--paper);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
    .faq summary{cursor:pointer;list-style:none;padding:19px 22px;font-weight:800;color:var(--night);display:flex;justify-content:space-between;gap:15px}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary:after{content:"+";color:var(--coral-dark);font-size:22px;line-height:1}
    .faq details[open] summary{background:#f5e8eb;color:var(--berry)}
    .faq details[open] summary:after{content:"−"}
    .faq-answer{padding:0 22px 20px;color:var(--muted);font-size:14px}
    .cta{background:var(--coral);color:#fff;padding:48px 0}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{color:#fff;font-size:clamp(25px,3vw,37px);margin-bottom:7px}
    .cta p{color:#ffe9e3;margin:0}
    .cta .btn{background:var(--night);color:#fff}
    .cta .btn:hover{background:#38203f;transform:translateY(-2px)}
    .site-footer{background:var(--night);color:#fff;padding:58px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:35px;padding-bottom:45px}
    .footer-brand .brand{color:#fff;margin-bottom:17px}
    .footer-brand p{color:#c7b9ca;max-width:330px;font-size:14px}
    .footer-col h3{font-size:14px;margin:3px 0 15px;color:var(--mint)}
    .footer-col ul{list-style:none;padding:0;margin:0}
    .footer-col li{margin:8px 0}
    .footer-col a{font-size:13px;color:#c7b9ca}
    .footer-col a:hover{color:var(--coral);padding-left:3px}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#a99aaa;font-size:12px}
    @media (max-width:1200px){.main-nav a{padding-left:9px;padding-right:9px}.hero-grid{gap:40px}}
    @media (max-width:992px){.main-nav{display:none}.menu-toggle{display:block}.hero-grid,.event-feature{grid-template-columns:1fr}.hero-art{min-height:280px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
    @media (max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.navbar{height:70px}.notice-inner{padding:8px 0}.notice-inner span{display:none}.hero{padding:58px 0 60px}.hero h1{font-size:clamp(34px,10vw,48px)}.section{padding:58px 0}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:14px}.timeline-item{grid-template-columns:90px 1fr;gap:14px}.timeline-item .status{grid-column:2;justify-self:start}.category-strip .container{display:block}.category-links{justify-content:flex-start;margin-top:17px}.info-grid{grid-template-columns:1fr}.cta-inner{display:block}.cta .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}}
    @media (max-width:576px){.brand-text{font-size:16px}.brand-text small{display:none}.hero-actions{display:grid}.hero-actions .btn{width:100%}.event-board{transform:none;padding:20px}.board-title{font-size:23px}.feature-panel{min-height:330px;padding:25px}.feature-panel h3{font-size:25px}.side-panel{min-height:210px}.event-timeline{padding-left:24px}.timeline-item{padding-right:0}.timeline-date{font-size:12px}.timeline-item h3{font-size:16px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:7px}}

/* roulang page: category5 */
:root{
        --ink:#17121e;
        --night:#201326;
        --night-2:#2b1834;
        --berry:#5b244e;
        --coral:#ff765f;
        --coral-dark:#dc584f;
        --mint:#a7f2c9;
        --cream:#fff8ed;
        --paper:#fffdf9;
        --muted:#877989;
        --line:#eadfe5;
        --soft:#f6eef1;
        --shadow:0 18px 50px rgba(37,18,42,.12);
        --shadow-dark:0 22px 60px rgba(8,4,15,.28);
        --radius:18px;
        --container:1220px;
        --ease:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:16px}
    a{color:inherit;text-decoration:none}
    a,button{transition:color var(--ease),background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease)}
    a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
    img{display:block;max-width:100%}
    button{font:inherit;border:0;cursor:pointer}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .site-header{background:rgba(255,248,237,.95);border-bottom:1px solid rgba(91,36,78,.12);position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}
    .navbar{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.04em;color:var(--night);white-space:nowrap}
    .brand-mark{width:37px;height:37px;border-radius:12px;background:var(--night);display:grid;place-items:center;color:var(--coral);font-size:19px;box-shadow:5px 5px 0 var(--mint)}
    .brand-text{font-size:18px}
    .brand-text small{display:block;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:700;line-height:1.2;margin-top:1px}
    .main-nav{display:flex;align-items:center;gap:4px}
    .main-nav a{display:block;padding:9px 13px;border-radius:9px;color:#5d4c61;font-size:14px;font-weight:700}
    .main-nav a:hover,.main-nav a.active{color:var(--night);background:#f2e4e9}
    .main-nav a.active{box-shadow:inset 0 -3px 0 var(--coral)}
    .nav-cta{background:var(--coral)!important;color:#fff!important;box-shadow:0 7px 18px rgba(255,118,95,.24)}
    .nav-cta:hover{background:var(--coral-dark)!important;transform:translateY(-2px)}
    .menu-toggle{display:none;background:var(--night);color:#fff;border-radius:9px;padding:9px 12px;font-size:13px}
    .notice-bar{background:var(--night-2);color:#d9c9df;font-size:13px}
    .notice-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:18px}
    .notice-inner strong{color:var(--mint);font-weight:800}
    .notice-link{color:#fff;border-bottom:1px solid var(--coral)}
    .page-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:76px 0 82px}
    .page-hero:before{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(167,242,201,.2);border-radius:50%;right:-130px;top:-240px;box-shadow:0 0 0 35px rgba(255,118,95,.05),0 0 0 76px rgba(167,242,201,.035)}
    .page-hero:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,#000,transparent 76%)}
    .hero-content{position:relative;z-index:1;max-width:760px}
    .breadcrumb{display:flex;flex-wrap:wrap;gap:9px;color:#bcaec1;font-size:13px;margin-bottom:24px}
    .breadcrumb a:hover{color:var(--mint)}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--mint);font-size:12px;font-weight:800;letter-spacing:.13em;margin-bottom:16px}
    .eyebrow:before{content:"";width:24px;height:3px;border-radius:3px;background:var(--coral)}
    .page-hero h1{font-size:clamp(35px,5vw, sixty);font-size:clamp(35px,5vw,60px);line-height:1.12;letter-spacing:-.055em;margin:0 0 20px}
    .page-hero h1 em{font-style:normal;color:var(--coral)}
    .hero-copy{color:#d6c9da;max-width:650px;font-size:17px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
    .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:14px;border:1px solid transparent}
    .btn-primary{background:var(--coral);color:#fff;box-shadow:0 10px 25px rgba(255,118,95,.22)}
    .btn-primary:hover{background:#ff927d;transform:translateY(-3px)}
    .btn-outline{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.04)}
    .btn-outline:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px)}
    .section{padding:82px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:32px}
    .section-kicker{color:var(--coral-dark);font-size:12px;font-weight:900;letter-spacing:.12em;margin-bottom:8px}
    .section h2{font-size:clamp(27px,3vw,40px);line-height:1.2;letter-spacing:-.04em;color:var(--night);margin:0}
    .section-intro{color:var(--muted);max-width:590px;margin:8px 0 0}
    .download-panel{display:grid;grid-template-columns:280px 1fr 245px;gap:42px;align-items:center;background:var(--berry);color:#fff;border-radius:24px;padding:42px 48px;box-shadow:var(--shadow-dark);position:relative;overflow:hidden}
    .download-panel:after{content:"C7";position:absolute;right:-12px;bottom:-66px;color:rgba(255,255,255,.055);font-size:260px;font-weight:900;line-height:1}
    .device-art{height:330px;width:178px;border:8px solid #130d18;border-radius:30px;background:#321d3d;box-shadow:16px 18px 0 rgba(0,0,0,.17),0 0 0 1px rgba(255,255,255,.18);padding:17px;transform:rotate(-5deg);margin:auto;position:relative;z-index:1}
    .device-notch{width:64px;height:7px;background:#130d18;border-radius:8px;margin:0 auto 24px}
    .device-label{color:var(--mint);font-size:11px;font-weight:800;letter-spacing:.08em}
    .device-title{font-size:23px;font-weight:800;line-height:1.2;margin:12px 0 25px}
    .device-block{height:54px;border-radius:11px;background:linear-gradient(135deg,var(--coral),#9b4864);margin-bottom:10px;padding:13px;font-size:12px;font-weight:800}
    .device-block.mint{background:var(--mint);color:var(--night)}
    .download-copy{position:relative;z-index:1}
    .download-copy .tag{display:inline-flex;background:var(--mint);color:var(--night);padding:5px 10px;border-radius:20px;font-size:12px;font-weight:900;margin-bottom:17px}
    .download-copy h2{font-size:clamp(28px,3.2vw,43px);line-height:1.2;margin:0 0 15px;letter-spacing:-.045em}
    .download-copy p{color:#ddcfdf;max-width:520px}
    .download-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .download-points span{border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:7px 10px;color:#f3e9f1;font-size:12px}
    .qr-box{position:relative;z-index:1;text-align:center;border-left:1px solid rgba(255,255,255,.16);padding-left:34px}
    .qr-code{width:128px;height:128px;background-color:#fff;background-image:linear-gradient(45deg,#201326 25%,transparent 25%),linear-gradient(-45deg,#201326 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#201326 75%),linear-gradient(-45deg,transparent 75%,#201326 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;border:9px solid #fff;margin:0 auto 15px}
    .qr-box small{display:block;color:#d9c9df;line-height:1.6}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .step{background:var(--paper);border:1px solid var(--line);padding:27px 25px;border-radius:var(--radius);position:relative}
    .step:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(255,118,95,.42)}
    .step-num{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--night);color:var(--mint);font-weight:900;font-size:18px;margin-bottom:20px}
    .step h3{font-size:19px;margin:0 0 8px;color:var(--night)}
    .step p{color:var(--muted);font-size:14px;margin:0}
    .device-guide{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
    .guide-card{padding:30px;background:var(--soft);border-radius:16px;border:1px solid var(--line)}
    .guide-card:nth-child(2){background:#e9f8ef}
    .guide-card h3{margin:0 0 10px;color:var(--night);font-size:21px}
    .guide-card p{margin:0;color:var(--muted)}
    .guide-list{padding:0;margin:20px 0 0;list-style:none}
    .guide-list li{padding:11px 0;border-top:1px solid rgba(51,29,61,.1);font-size:14px;color:#4d414e}
    .guide-list li:before{content:"✓";color:var(--coral-dark);font-weight:900;margin-right:9px}
    .feature-strip{background:#f1e5e9;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .feature{padding:10px 20px;border-left:3px solid var(--coral)}
    .feature:nth-child(even){border-color:var(--mint)}
    .feature strong{display:block;color:var(--night);font-size:16px}
    .feature span{font-size:13px;color:var(--muted)}
    .faq-list{max-width:880px;margin:auto}
    .faq-item{border-top:1px solid var(--line)}
    .faq-item:last-child{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;background:transparent;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:21px 4px;color:var(--night);font-weight:800;font-size:16px}
    .faq-question span:last-child{color:var(--coral-dark);font-size:24px;font-weight:400}
    .faq-answer{display:none;color:var(--muted);padding:0 45px 21px 4px;font-size:15px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question{color:var(--coral-dark)}
    .cta{background:var(--night);color:#fff;border-radius:22px;padding:42px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;position:relative;overflow:hidden}
    .cta:before{content:"";position:absolute;right:10%;top:-90px;width:230px;height:230px;border:1px solid rgba(167,242,201,.22);border-radius:50%}
    .cta h2{font-size:clamp(25px,3vw,36px);margin:0 0 8px;position:relative;z-index:1}
    .cta p{color:#cfc0d3;margin:0;position:relative;z-index:1}
    .cta .hero-actions{margin:0;position:relative;z-index:1}
    .site-footer{background:#17101d;color:#fff;padding:62px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:45px}
    .footer-brand .brand{color:#fff}
    .footer-brand p{max-width:355px;color:#a99bab;font-size:14px;margin:20px 0 0}
    .footer-col h3{font-size:14px;margin:4px 0 15px;color:var(--mint)}
    .footer-col ul{list-style:none;padding:0;margin:0}
    .footer-col li{margin:8px 0}
    .footer-col a{color:#b7aaba;font-size:14px}
    .footer-col a:hover{color:var(--coral);padding-left:3px}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;color:#8e8192;font-size:12px}
    @media(max-width:1100px){
        .main-nav{gap:0}.main-nav a{padding-left:8px;padding-right:8px;font-size:13px}
        .download-panel{grid-template-columns:220px 1fr 190px;padding:35px}
    }
    @media(max-width:900px){
        .menu-toggle{display:block}.main-nav{display:none;position:absolute;left:24px;right:24px;top:70px;background:var(--cream);padding:12px;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:12px 14px}
        .download-panel{grid-template-columns:200px 1fr}.qr-box{grid-column:2;border-left:0;padding:15px 0 0;text-align:left;display:flex;align-items:center;gap:17px}.qr-code{margin:0}
        .features{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:700px){
        .container{width:min(calc(100% - 32px),var(--container))}.navbar{height:70px}.brand-text{font-size:16px}.notice-inner{padding:7px 0;align-items:flex-start}.notice-link{display:none}
        .page-hero{padding:55px 0 60px}.section{padding:58px 0}.section-head{display:block}.section-intro{margin-top:12px}
        .download-panel{grid-template-columns:1fr;padding:30px 24px;gap:25px}.device-art{height:285px}.download-copy h2{font-size:31px}.qr-box{grid-column:auto;text-align:center;justify-content:center}.qr-code{margin:0}
        .steps,.device-guide{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.cta{display:block;padding:32px 25px}.cta .hero-actions{margin-top:22px}
        .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
    }
    @media(max-width:480px){
        .features{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.page-hero h1{font-size:37px}.hero-actions .btn{width:100%}
        .download-panel{border-radius:16px}.device-art{transform:none}
    }

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