/* roulang page: index */
:root{--ink:#181522;--muted:#6d6878;--paper:#faf8f3;--white:#fff;--line:#e7e1ed;--violet:#6537d8;--violet-dark:#4d20ba;--lime:#d9f72f;--coral:#f05c79;--soft:#f0ebff;--radius:18px;--shadow:0 16px 38px rgba(37,22,70,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.container{width:min(1220px,calc(100% - 40px));margin:auto}.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{min-height:76px;display:flex;align-items:center;gap:24px}.brand{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.04em}.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:17px}.links{display:flex;gap:6px;margin:auto}.links a{padding:8px 11px;border-radius:9px;font-size:.88rem;font-weight:750;color:#514b5d}.links a:hover,.links a.active{background:var(--soft);color:var(--violet)}.search{width:175px;position:relative}.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;background:#fff;outline:none;font-size:.82rem}.search:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted)}.search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(101,55,216,.15)}.menu{display:none;border:0;background:transparent;font-size:23px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:850;font-size:.9rem;transition:.2s ease;cursor:pointer}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(58,28,128,.18)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--violet);color:#fff}.btn-lime{background:var(--lime);color:#242118}.btn-outline{border-color:#d8d0e1;background:#fff;color:var(--ink)}.hero{min-height:590px;color:#fff;display:flex;align-items:end;padding:80px 0 52px;position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(19,13,35,.88),rgba(44,21,92,.58)),url('/assets/images/backpic/back-1.jpg') center/cover}.hero:after{content:"";position:absolute;inset:auto -5% -100px auto;width:520px;height:520px;border-radius:50%;background:rgba(217,247,47,.14);filter:blur(16px)}.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.35fr .65fr;gap:44px;align-items:end}.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--lime)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.45rem,5vw,4.65rem);line-height:1.02;letter-spacing:-.065em;max-width:860px;margin:14px 0 22px}.hero p{max-width:760px;font-size:1.04rem;color:#f0ecf7}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}.countdown{display:flex;gap:10px;flex-wrap:wrap}.clock{padding:8px 11px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);border-radius:9px;font-size:.82rem;font-weight:800}.access-panel{background:#fff;color:var(--ink);border-radius:var(--radius);padding:23px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.5)}.access-panel h3{font-size:1.15rem;margin-bottom:8px}.access-panel p{color:var(--muted);font-size:.88rem}.mini-row{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:11px 0;font-size:.82rem}.mini-row b{color:var(--violet)}section{padding:82px 0}.section-top{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}.section-top h2{font-size:clamp(1.7rem,3vw,2.55rem);line-height:1.12;letter-spacing:-.045em;margin:6px 0 0}.section-top p{max-width:620px;color:var(--muted);margin:0}.metrics{padding:32px 0;background:#21173b;color:#fff}.metric-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);border-radius:16px;overflow:hidden}.metric{background:#21173b;padding:20px}.metric strong{display:block;font-size:1.7rem;color:var(--lime);letter-spacing:-.05em}.metric span{font-size:.76rem;color:#ccc3d9}.matrix{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:16px}.tile{background:#fff;border:1px solid var(--line);padding:24px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(25,18,40,.03)}.tile.wide{background:var(--violet);color:#fff;grid-row:span 2;min-height:280px}.tile h3{font-size:1.17rem;margin:10px 0}.tile p{font-size:.9rem;color:var(--muted)}.wide p{color:#ddd3ff}.icon{font-size:1.45rem}.tag{display:inline-block;border-radius:999px;padding:4px 9px;background:var(--soft);color:var(--violet);font-size:.7rem;font-weight:850}.compare{background:#eee8f7}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.path{padding:28px;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}.path.featured{background:#2b194d;color:#fff}.path li{list-style:none;padding:11px 0;border-bottom:1px solid rgba(110,91,148,.17);font-size:.9rem}.device-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.device{border:1px solid var(--line);background:#fff;border-radius:15px;padding:20px;display:flex;gap:14px;align-items:center}.timeline{max-width:900px;margin:auto;border-left:2px solid #d8cbfa;padding-left:28px}.milestone{position:relative;padding:0 0 28px}.milestone:before{content:"";width:13px;height:13px;border-radius:50%;background:var(--lime);border:3px solid var(--violet);position:absolute;left:-36px;top:5px}.milestone small{color:var(--violet);font-weight:850}.gallery{display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:16px}.shot{overflow:hidden;border-radius:var(--radius);position:relative;min-height:230px;background:#281942}.shot:first-child{min-height:400px}.shot img{width:100%;height:100%;object-fit:cover;position:absolute}.caption{position:absolute;bottom:0;left:0;right:0;padding:18px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));font-weight:800}.feed{background:#fff}.feed-grid{display:grid;grid-template-columns:1.5fr .7fr;gap:22px}.post{display:grid;grid-template-columns:120px 1fr;gap:17px;padding:15px 0;border-bottom:1px solid var(--line)}.post img{width:120px;height:88px;object-fit:cover;border-radius:11px}.post h3{font-size:1.05rem;margin:4px 0}.post p{font-size:.86rem;color:var(--muted);margin:0}.empty{padding:35px;background:var(--soft);border-radius:15px;color:var(--muted)}.aside-note{background:var(--violet);border-radius:var(--radius);color:#fff;padding:28px}.aside-note p{color:#ded4ff}.assurance{background:#f6f2e9}.assurance-grid{display:grid;grid-template-columns:1.1fr repeat(3,.63fr);gap:14px}.assure{background:#fff;border-radius:14px;padding:20px;border:1px solid var(--line)}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick .tile{padding:20px}.faq{max-width:900px;margin:auto}.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;margin-bottom:10px}.faq summary{cursor:pointer;font-weight:850}.faq p{color:var(--muted);font-size:.92rem;padding-top:10px;margin-bottom:0}.form-wrap{background:#29174c;color:#fff;border-radius:22px;padding:clamp(26px,5vw,55px);display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}.form-wrap p{color:#dcd2f4}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:12px;border-radius:10px;border:1px solid transparent;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{box-shadow:0 0 0 3px rgba(217,247,47,.36)}.consent{font-size:.76rem;color:#c9bddf}.footer{background:#17121f;color:#dbd5e4;padding:48px 0 24px}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:35px}.footer h3{color:#fff}.footer a{display:block;color:#c8c0d3;font-size:.88rem;margin:8px 0}.footer a:hover{color:var(--lime)}.copyright{border-top:1px solid #3a3244;margin-top:30px;padding-top:18px;font-size:.78rem;color:#a89eaf}
@media(max-width:1024px){.links{gap:0}.search{display:none}.hero-inner,.feed-grid,.form-wrap{grid-template-columns:1fr}.access-panel{max-width:500px}.matrix{grid-template-columns:1fr 1fr}.tile.wide{grid-row:auto}.quick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.nav{min-height:66px}.menu{display:block;margin-left:auto}.links{display:none;position:absolute;top:66px;left:0;right:0;padding:13px 20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column}.links.open{display:flex}.nav>.btn{display:none}.hero{padding-top:65px;min-height:650px}.metric-grid,.compare-grid,.device-strip,.gallery,.assurance-grid,.footer-grid{grid-template-columns:1fr 1fr}.metric:first-child{grid-column:span 2}.shot:first-child{grid-column:span 2;min-height:300px}section{padding:62px 0}}
@media(max-width:520px){.container{width:min(100% - 28px,1220px)}h1{font-size:2.4rem}.metric-grid,.matrix,.compare-grid,.device-strip,.gallery,.assurance-grid,.quick,.footer-grid,.form-grid{grid-template-columns:1fr}.metric:first-child,.shot:first-child{grid-column:auto}.hero-actions .btn{width:100%}.section-top{display:block}.section-top p{margin-top:14px}.post{grid-template-columns:88px 1fr}.post img{width:88px;height:78px}.form-grid .full{grid-column:auto}}

/* roulang page: article */
:root{--ink:#181522;--muted:#6d6878;--paper:#faf8f3;--white:#fff;--line:#e7e1ed;--violet:#6537d8;--violet-dark:#4d20ba;--lime:#d9f72f;--coral:#f05c79;--soft:#f0ebff;--radius:18px;--shadow:0 16px 38px rgba(37,22,70,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,textarea{font:inherit}.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{min-height:76px;display:flex;align-items:center;gap:24px}.brand{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.04em}.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:17px}.links{display:flex;align-items:center;gap:2px;flex:1}.links a{padding:8px 11px;border-radius:9px;font-size:.88rem;font-weight:750;color:#514b5d}.links a:hover,.links a.active{background:var(--soft);color:var(--violet)}.search{width:175px;position:relative}.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;background:#fff;outline:none;font-size:.82rem}.search:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted)}.search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(101,55,216,.15)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:850;font-size:.9rem;transition:.2s ease;cursor:pointer}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(58,28,128,.18)}.btn-lime{background:var(--lime);color:#242118}.btn-primary{background:var(--violet);color:#fff}.btn-outline{border-color:#d8d0e1;background:#fff}.menu{display:none;border:0;background:transparent;font-size:23px}
.article-hero{padding:72px 0 64px;background:linear-gradient(110deg,#f1ebff 0%,#faf8f3 68%);border-bottom:1px solid var(--line)}.crumbs{font-size:.78rem;color:var(--muted);margin-bottom:25px}.crumbs a{color:var(--violet);font-weight:800}.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--violet)}h1{font-size:clamp(2.25rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.065em;max-width:900px;margin:12px 0 20px}.article-summary{font-size:1.08rem;color:var(--muted);max-width:760px}.meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:25px;color:var(--muted);font-size:.84rem}.tag{display:inline-block;border-radius:999px;padding:4px 10px;background:var(--soft);color:var(--violet);font-size:.7rem;font-weight:850}
.article-layout{display:grid;grid-template-columns:minmax(0,820px) 280px;gap:64px;align-items:start;padding:70px 0}.article-cover{width:100%;height:360px;object-fit:cover;border-radius:22px;box-shadow:var(--shadow);margin-bottom:42px}.article-body{font-size:1.05rem;color:#393342}.article-body h2,.article-body h3{color:var(--ink);line-height:1.18;letter-spacing:-.035em;margin:42px 0 15px}.article-body h2{font-size:2rem}.article-body h3{font-size:1.35rem}.article-body p{margin:0 0 22px}.article-body ul,.article-body ol{padding-left:24px;margin:18px 0 26px}.article-body li{margin:8px 0}.article-body a{color:var(--violet);font-weight:800}.article-body blockquote{margin:30px 0;padding:22px 26px;border-left:4px solid var(--lime);background:#fff;border-radius:0 14px 14px 0;font-size:1.15rem;font-weight:750;color:var(--ink)}.side-card{position:sticky;top:105px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}.side-card h2{font-size:1rem;margin:0 0 15px}.side-row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:12px 0;font-size:.82rem}.side-row span{color:var(--muted)}.takeaway{margin-top:48px;background:#29174c;color:#fff;border-radius:20px;padding:30px}.takeaway h2{margin:0 0 9px;font-size:1.5rem}.takeaway p{color:#ddd4ef;margin:0}.end-cta{margin:0 0 76px;padding:40px;background:var(--lime);border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:22px}.end-cta h2{margin:0;font-size:1.7rem;letter-spacing:-.04em}.footer{background:#17121f;color:#dbd5e4;padding:48px 0 24px}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:35px}.footer h3{color:#fff;font-size:1rem;margin:0 0 14px}.footer p{max-width:320px;color:#bdb4ca;font-size:.88rem}.footer a{display:block;color:#c8c0d3;font-size:.88rem;margin:8px 0}.footer a:hover{color:var(--lime)}.copyright{border-top:1px solid #3a3244;margin-top:30px;padding-top:18px;font-size:.78rem;color:#a89eaf}
@media(max-width:1024px){.links a{font-size:.78rem;padding:7px}.article-layout{grid-template-columns:minmax(0,1fr) 240px;gap:30px}}
@media(max-width:768px){.container{width:min(100% - 28px,1220px)}.nav{min-height:66px}.menu{display:block;margin-left:auto}.links{display:none;position:absolute;top:66px;left:0;right:0;padding:13px 20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.links.open{display:flex}.nav>.btn,.search{display:none}.article-hero{padding:52px 0 46px}.article-layout{display:block;padding:48px 0}.side-card{position:static;margin-top:40px}.article-cover{height:280px}.footer-grid{grid-template-columns:1fr 1fr}.end-cta{display:block}.end-cta .btn{margin-top:20px}}
@media(max-width:520px){h1{font-size:2.35rem}.article-body{font-size:1rem}.article-cover{height:220px}.footer-grid{grid-template-columns:1fr}.meta{gap:8px 14px}}

/* roulang page: category1 */
:root{--ink:#181522;--muted:#6d6878;--paper:#faf8f3;--white:#fff;--line:#e7e1ed;--violet:#6537d8;--violet-dark:#4d20ba;--lime:#d9f72f;--coral:#f05c79;--soft:#f0ebff;--deep:#29174c;--radius:18px;--shadow:0 16px 38px rgba(37,22,70,.09);--shadow-hover:0 20px 42px rgba(37,22,70,.16)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:24px}
.brand{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.04em;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:17px}
.links{display:flex;align-items:center;gap:3px;flex:1}
.links a{padding:8px 11px;border-radius:9px;font-size:.88rem;font-weight:750;color:#514b5d;transition:.2s ease}
.links a:hover,.links a.active{background:var(--soft);color:var(--violet)}
.search{width:175px;position:relative}
.search:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted);z-index:1}
.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;background:#fff;outline:none;font-size:.82rem;transition:.2s ease}
.search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(101,55,216,.15)}
.menu{display:none;border:0;background:transparent;color:var(--ink);font-size:23px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:850;font-size:.9rem;transition:.2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(58,28,128,.18)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(101,55,216,.28);outline-offset:3px}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--violet-dark)}
.btn-lime{background:var(--lime);color:#242118}
.btn-lime:hover{background:#e5ff4d}
.btn-outline{border-color:#d8d0e1;background:#fff;color:var(--ink)}
.btn-outline:hover{border-color:var(--violet);color:var(--violet)}
section{padding:78px 0}
.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--violet)}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:28px}
.section-top h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.05em;margin:7px 0 0}
.section-top p{max-width:570px;margin:0;color:var(--muted)}
.editorial-head{padding:66px 0 40px;background:linear-gradient(115deg,#f1ecff 0%,#faf8f3 58%,#ecffd2 100%);border-bottom:1px solid var(--line);overflow:hidden}
.editorial-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.editorial-head h1{font-size:clamp(2.7rem,5.5vw,5.3rem);line-height:.98;letter-spacing:-.075em;margin:10px 0 20px;max-width:760px}
.editorial-head p{max-width:630px;font-size:1.06rem;color:#554e61;margin:0}
.header-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #ddd4e7;background:rgba(255,255,255,.72);border-radius:999px;padding:7px 11px;font-size:.77rem;font-weight:800;color:#4f4858}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(217,247,47,.3)}
.head-card{background:var(--deep);border-radius:22px;padding:23px;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.head-card:after{content:"";position:absolute;width:180px;height:180px;right:-68px;bottom:-72px;background:var(--lime);border-radius:50%;opacity:.18}
.head-card img{height:220px;width:100%;object-fit:cover;border-radius:14px;position:relative;z-index:1}
.head-card .card-caption{position:relative;z-index:1;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.head-card strong{font-size:1.04rem}
.head-card span{font-size:.78rem;color:#dcd2f4}
.filter-rail{display:flex;gap:10px;overflow:auto;padding:4px 2px 10px;scrollbar-width:thin}
.filter-chip{border:1px solid var(--line);background:#fff;padding:9px 14px;border-radius:10px;font-weight:800;font-size:.82rem;color:#5d5567;white-space:nowrap}
.filter-chip.active,.filter-chip:hover{border-color:var(--violet);background:var(--soft);color:var(--violet)}
.discovery{padding-top:48px}
.featured-game{display:grid;grid-template-columns:1.1fr .9fr;min-height:430px;border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden;box-shadow:var(--shadow)}
.featured-game .feature-image{position:relative;min-height:310px}
.featured-game .feature-image img{width:100%;height:100%;object-fit:cover}
.featured-game .feature-image:after{content:"Featured selection";position:absolute;top:18px;left:18px;background:var(--lime);color:#252119;font-size:.73rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:8px}
.feature-copy{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.tag{display:inline-block;width:max-content;border-radius:999px;padding:4px 9px;background:var(--soft);color:var(--violet);font-size:.7rem;font-weight:850}
.feature-copy h2{font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.1;letter-spacing:-.05em;margin:15px 0 12px}
.feature-copy p{color:var(--muted);margin:0 0 20px}
.meta-list{border-top:1px solid var(--line);margin:0 0 24px}
.meta-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.83rem}
.meta-row span{color:var(--muted)}
.meta-row b{font-weight:850}
.game-shelf{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:16px}
.game-card{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 6px 18px rgba(37,22,70,.04);transition:.22s ease}
.game-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);border-color:#d2c5f5}
.game-card .cover{height:180px;overflow:hidden}
.game-card .cover img{width:100%;height:100%;object-fit:cover;transition:.35s ease}
.game-card:hover .cover img{transform:scale(1.05)}
.game-card-body{padding:18px}
.game-card h3{font-size:1.12rem;letter-spacing:-.03em;line-height:1.2;margin:10px 0 7px}
.game-card p{font-size:.86rem;color:var(--muted);margin:0}
.game-card.wide{display:grid;grid-template-columns:.92fr 1.08fr;grid-column:span 2}
.game-card.wide .cover{height:100%}
.game-card.wide .game-card-body{padding:27px}
.game-card.wide h3{font-size:1.5rem}
.rating{display:flex;align-items:center;gap:7px;color:#4b4355;font-size:.78rem;font-weight:800;margin-top:16px}
.stars{color:#e0aa15;letter-spacing:1px}
.panel-surface{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(21px,3vw,34px);box-shadow:0 7px 22px rgba(37,22,70,.04)}
.matrix{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.matrix-dark{background:var(--deep);color:#fff;border-radius:20px;padding:34px;position:relative;overflow:hidden}
.matrix-dark:before{content:"";width:220px;height:220px;position:absolute;top:-105px;right:-90px;border-radius:50%;background:var(--coral);opacity:.32}
.matrix-dark h2{position:relative;font-size:2rem;line-height:1.1;letter-spacing:-.05em;margin:12px 0}
.matrix-dark p{position:relative;color:#d9cfea;max-width:500px}
.matrix-dark .btn{position:relative;margin-top:14px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{padding:17px;border:1px solid var(--line);border-radius:14px;background:#fff}
.mode-icon{width:36px;height:36px;border-radius:11px;background:var(--soft);color:var(--violet);display:grid;place-items:center;font-size:1.1rem}
.mode h3{font-size:.98rem;margin:12px 0 5px;letter-spacing:-.025em}
.mode p{font-size:.81rem;color:var(--muted);margin:0}
.compatibility{background:#f1ecff;border-top:1px solid #e4dbf7;border-bottom:1px solid #e4dbf7}
.device-row{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:14px}
.device-intro h2{font-size:2rem;line-height:1.12;letter-spacing:-.05em;margin:8px 0}
.device-intro p{color:var(--muted);max-width:390px;margin:0}
.device-card{background:rgba(255,255,255,.8);border:1px solid rgba(101,55,216,.15);border-radius:16px;padding:20px}
.device-symbol{font-size:1.65rem;color:var(--violet)}
.device-card h3{margin:9px 0 4px;font-size:1rem}
.device-card p{margin:0;color:var(--muted);font-size:.82rem}
.highlight-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:20px;align-items:stretch}
.highlight-photo{border-radius:20px;min-height:360px;overflow:hidden;position:relative}
.highlight-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(24,21,34,.68),transparent 55%)}
.highlight-photo img{width:100%;height:100%;object-fit:cover}
.photo-label{position:absolute;z-index:1;left:25px;bottom:22px;color:#fff}
.photo-label small{color:var(--lime);font-size:.72rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.photo-label h3{font-size:1.45rem;line-height:1.14;margin:7px 0 0}
.point-list{display:grid;gap:12px}
.point{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.point:last-child{border-bottom:0}
.point-number{width:34px;height:34px;border-radius:10px;background:var(--lime);display:grid;place-items:center;font-weight:900;font-size:.8rem}
.point h3{margin:0 0 3px;font-size:1rem}
.point p{margin:0;color:var(--muted);font-size:.86rem}
.faq{max-width:900px;margin:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;margin-bottom:10px;transition:.2s ease}
.faq details[open]{border-color:#d1c2f4;box-shadow:0 8px 18px rgba(37,22,70,.05)}
.faq summary{cursor:pointer;font-weight:850;list-style:none;padding-right:28px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:-4px;font-size:1.35rem;color:var(--violet)}
.faq details[open] summary:after{content:"−"}
.faq p{color:var(--muted);font-size:.92rem;padding-top:10px;margin:0}
.cta-section{padding-top:25px}
.cta-band{border-radius:22px;background:linear-gradient(110deg,#32195f,#6537d8);padding:clamp(28px,5vw,52px);color:#fff;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;overflow:hidden;position:relative}
.cta-band:after{content:"✦";position:absolute;right:6%;bottom:-60px;color:rgba(217,247,47,.16);font-size:13rem;line-height:1}
.cta-band h2{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.05;letter-spacing:-.055em;margin:8px 0}
.cta-band p{color:#ddd2f4;max-width:620px;margin:0}
.cta-band .btn{position:relative;z-index:1;white-space:nowrap}
.footer{background:#17121f;color:#dbd5e4;padding:48px 0 24px;margin-top:78px}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:35px}
.footer .brand{color:#fff;width:max-content}
.footer p{font-size:.88rem;max-width:340px;color:#c8c0d3}
.footer h3{color:#fff;font-size:.9rem;margin:0 0 10px}
.footer a{display:block;color:#c8c0d3;font-size:.88rem;margin:8px 0;transition:.2s ease}
.footer a:hover{color:var(--lime)}
.copyright{border-top:1px solid #3a3244;margin-top:30px;padding-top:18px;font-size:.78rem;color:#a89eaf}
@media(max-width:1024px){
.nav{gap:15px}.links a{padding:8px 7px;font-size:.8rem}.search{display:none}
.editorial-grid,.featured-game,.highlight-grid{grid-template-columns:1fr}
.head-card{max-width:620px}.game-shelf{grid-template-columns:1fr 1fr}.device-row{grid-template-columns:1fr 1fr}.device-intro{grid-column:span 2}.matrix{grid-template-columns:1fr}.cta-band{grid-template-columns:1fr}
}
@media(max-width:768px){
.container{width:min(100% - 28px,1220px)}.nav{min-height:66px}.menu{display:block;margin-left:auto}.links{display:none;position:absolute;top:66px;left:0;right:0;padding:13px 20px 18px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;box-shadow:0 15px 25px rgba(37,22,70,.08)}.links.open{display:flex}.links a{padding:11px}.nav>.btn{display:none}
.editorial-head{padding:48px 0 32px}.editorial-head h1{font-size:clamp(2.5rem,12vw,4.2rem)}section{padding:58px 0}.section-top{display:block}.section-top p{margin-top:14px}.game-shelf{grid-template-columns:1fr}.game-card.wide{grid-template-columns:1fr;grid-column:auto}.game-card.wide .cover{height:220px}.game-card.wide .game-card-body{padding:20px}.mode-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:span 2}
}
@media(max-width:520px){
.editorial-head h1{font-size:2.55rem}.head-card{padding:16px}.head-card img{height:180px}.header-meta{gap:7px}.pill{font-size:.7rem}.featured-game .feature-image{min-height:230px}.feature-copy{padding:24px}.device-row,.mode-grid,.footer-grid{grid-template-columns:1fr}.device-intro,.footer-grid>div:first-child{grid-column:auto}.device-card{padding:17px}.matrix-dark{padding:25px}.panel-surface{padding:20px}.cta-band{padding:30px 24px}.cta-band .btn{width:100%}.footer{margin-top:58px}
}

/* roulang page: category2 */
:root{--ink:#181522;--muted:#6d6878;--paper:#faf8f3;--white:#fff;--line:#e7e1ed;--violet:#6537d8;--violet-dark:#4d20ba;--lime:#d9f72f;--coral:#f05c79;--soft:#f0ebff;--deep:#29174c;--radius:18px;--shadow:0 16px 38px rgba(37,22,70,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav{min-height:76px;display:flex;align-items:center;gap:24px}.brand{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.04em;white-space:nowrap}.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:17px}.links{display:flex;align-items:center;gap:2px;flex:1}.links a{padding:8px 11px;border-radius:9px;font-size:.86rem;font-weight:750;color:#514b5d;white-space:nowrap}.links a:hover,.links a.active{background:var(--soft);color:var(--violet)}.search{width:175px;position:relative}.search:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted);z-index:1}.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;background:#fff;outline:none;font-size:.82rem}.search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(101,55,216,.15)}.menu{display:none;border:0;background:transparent;font-size:23px;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:850;font-size:.9rem;transition:.2s ease;cursor:pointer}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(58,28,128,.18)}.btn:active{transform:translateY(0)}.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(101,55,216,.35);outline-offset:3px}.btn-primary{background:var(--violet);color:#fff}.btn-lime{background:var(--lime);color:#242118}.btn-outline{border-color:#d8d0e1;background:#fff;color:var(--ink)}
section{padding:78px 0}.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--violet)}.section-top{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}.section-top h2{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.13;letter-spacing:-.05em;margin:7px 0 0}.section-top p{max-width:540px;color:var(--muted);margin:0}.tag{display:inline-block;border-radius:999px;padding:4px 9px;background:var(--soft);color:var(--violet);font-size:.7rem;font-weight:850}.status{background:#fff0f3;color:#be3553}
.app-intro{padding:70px 0 55px;background:linear-gradient(125deg,#f1ebff 0%,#fff 52%,#effbc7 100%);border-bottom:1px solid var(--line)}.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}.intro-copy h1{font-size:clamp(2.5rem,5vw,4.9rem);line-height:.98;letter-spacing:-.075em;margin:13px 0 19px;max-width:680px}.intro-copy p{color:#514b5d;max-width:630px;font-size:1.04rem}.intro-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.meta-line{display:flex;gap:17px;flex-wrap:wrap;margin-top:24px;font-size:.82rem;font-weight:750;color:var(--muted)}.meta-line span:before{content:"•";margin-right:8px;color:var(--coral)}
.preview-card{background:var(--deep);border-radius:24px;min-height:405px;padding:19px;position:relative;overflow:hidden;box-shadow:var(--shadow);color:#fff}.preview-card:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(217,247,47,.18);right:-75px;top:-80px}.preview-image{height:282px;border-radius:15px;overflow:hidden;position:relative;z-index:1}.preview-image img{width:100%;height:100%;object-fit:cover}.preview-foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:15px;align-items:center;padding:17px 6px 0}.preview-foot strong{font-size:1.1rem}.preview-foot small{color:#cfc3e8;display:block}
.compatibility{padding-top:55px}.device-rail{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:13px}.device-card{border:1px solid var(--line);background:var(--white);border-radius:16px;padding:20px;min-height:150px;transition:.2s ease}.device-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.device-card.featured{background:var(--violet);color:#fff;border-color:var(--violet)}.device-icon{font-size:1.7rem;line-height:1;margin-bottom:18px}.device-card h3{margin:0 0 5px;font-size:1rem}.device-card p{font-size:.84rem;line-height:1.5;margin:0;color:var(--muted)}.device-card.featured p{color:#e4dcff}
.screen-section{background:#fff}.screen-grid{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-template-rows:205px 205px;gap:16px}.screen{border-radius:18px;overflow:hidden;position:relative;background:#ddd}.screen:first-child{grid-row:span 2}.screen img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.screen:hover img{transform:scale(1.04)}.screen span{position:absolute;left:13px;bottom:12px;background:rgba(24,21,34,.8);backdrop-filter:blur(5px);color:#fff;border-radius:8px;padding:5px 8px;font-size:.74rem;font-weight:800}
.access-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}.access-note{padding:36px;border-radius:22px;background:var(--deep);color:#fff}.access-note h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.12;letter-spacing:-.05em;margin:9px 0 15px}.access-note p{color:#d8d0e9}.access-note .tag{background:rgba(217,247,47,.15);color:var(--lime)}.steps{background:#fff;border:1px solid var(--line);border-radius:22px;padding:11px}.step{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:16px;padding:19px;border-bottom:1px solid var(--line)}.step:last-child{border:0}.step-no{width:34px;height:34px;border-radius:10px;background:var(--soft);color:var(--violet);display:grid;place-items:center;font-size:.84rem;font-weight:900}.step h3{margin:0;font-size:1rem}.step p{margin:3px 0 0;font-size:.86rem;color:var(--muted)}.step-mark{font-size:1.1rem;color:var(--coral)}
.release-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:22px}.release-main{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px}.release-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.release-main h2{font-size:1.75rem;line-height:1.15;letter-spacing:-.04em;margin:11px 0}.release-main p{max-width:690px;color:var(--muted)}.release-list{list-style:none;padding:0;margin:23px 0 0;display:grid;gap:12px}.release-list li{padding-left:24px;position:relative;font-size:.91rem}.release-list li:before{content:"✓";color:var(--violet);font-weight:900;position:absolute;left:0}.release-side{border-radius:20px;padding:27px;background:#effbc7}.release-side h3{margin:0 0 10px;font-size:1.25rem;letter-spacing:-.03em}.release-side p{color:#55513e;font-size:.9rem}.release-side dl{margin:19px 0 0}.release-side div{display:flex;justify-content:space-between;border-top:1px solid #d7e7a1;padding:10px 0;font-size:.82rem}.release-side dt{color:#6e6a51}.release-side dd{margin:0;font-weight:850}
.feature-matrix{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:15px}.feature-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px;min-height:190px;transition:.2s ease}.feature-card:hover{border-color:#c5b7ee;box-shadow:var(--shadow)}.feature-card.wide{background:linear-gradient(135deg,#f0ebff,#fff)}.feature-card h3{font-size:1.1rem;margin:13px 0 7px}.feature-card p{margin:0;color:var(--muted);font-size:.88rem}.feature-card .icon{color:var(--violet);font-size:1.55rem;font-weight:900}
.quick-section{padding-top:20px}.quick-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.quick{padding:20px;border-top:3px solid var(--lime);background:#fff;border-radius:14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-left:1px solid var(--line)}.quick b{display:block;font-size:.91rem;margin-bottom:5px}.quick span{font-size:.82rem;color:var(--muted)}
.faq-wrap{background:#f0ebff}.faq{max-width:910px;margin:auto}.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;margin-bottom:10px}.faq summary{cursor:pointer;font-weight:850;list-style:none}.faq summary:after{content:"+";float:right;color:var(--violet);font-size:1.2rem}.faq details[open] summary:after{content:"–"}.faq p{color:var(--muted);font-size:.92rem;padding-top:10px;margin:0}
.enquiry{padding-top:55px}.form-wrap{background:var(--deep);color:#fff;border-radius:22px;padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:.75fr 1.25fr;gap:48px}.form-wrap h2{font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.1;letter-spacing:-.05em;margin:9px 0 15px}.form-wrap p{color:#dcd2f4}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:12px;border-radius:10px;border:1px solid transparent;outline:none;background:#fff;color:var(--ink)}.form-grid textarea{resize:vertical;min-height:98px}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{box-shadow:0 0 0 3px rgba(217,247,47,.36)}.consent{font-size:.76rem;color:#cfc4e6;margin:0}.form-note{font-size:.78rem;color:#cfc4e6;margin:11px 0 0}
.footer{background:#17121f;color:#dbd5e4;padding:48px 0 24px}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:35px}.footer p{font-size:.89rem;max-width:370px;color:#c8c0d3}.footer h3{color:#fff;font-size:1rem;margin:0 0 13px}.footer a{display:block;color:#c8c0d3;font-size:.88rem;margin:8px 0}.footer a:hover{color:var(--lime)}.footer .brand{color:#fff}.copyright{border-top:1px solid #3a3244;margin-top:30px;padding-top:18px;font-size:.78rem;color:#a89eaf}
@media(max-width:1024px){.search{display:none}.intro-grid,.access-grid,.release-grid,.form-wrap{grid-template-columns:1fr}.feature-matrix{grid-template-columns:1fr 1fr}.nav{gap:12px}.links a{padding:8px 7px;font-size:.8rem}}
@media(max-width:768px){.container{width:min(100% - 28px,1220px)}.nav{min-height:66px}.links{display:none;position:absolute;top:66px;left:0;right:0;padding:13px 20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.links.open{display:flex}.links a{padding:11px}.menu{display:block;margin-left:auto}.nav>.btn{display:none}section{padding:58px 0}.app-intro{padding:54px 0 45px}.device-rail,.quick-row{grid-template-columns:1fr 1fr}.device-card.featured{grid-column:span 2}.screen-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 170px 170px}.screen:first-child{grid-column:span 2;grid-row:auto}.section-top{display:block}.section-top p{margin-top:12px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}
@media(max-width:520px){.intro-copy h1{font-size:2.55rem}.intro-actions .btn{width:100%}.preview-card{min-height:350px}.preview-image{height:225px}.device-rail,.quick-row,.feature-matrix,.footer-grid,.form-grid{grid-template-columns:1fr}.device-card.featured{grid-column:auto}.screen-grid{display:grid;grid-template-columns:1fr;grid-template-rows:230px 175px 175px 175px}.screen:first-child{grid-column:auto}.step{grid-template-columns:40px 1fr}.step-mark{display:none}.form-grid .full{grid-column:auto}.release-head{display:block}.footer-grid>div:first-child{grid-column:auto}}

/* roulang page: category3 */
:root{--ink:#181522;--muted:#6d6878;--paper:#faf8f3;--white:#fff;--line:#e7e1ed;--violet:#6537d8;--violet-dark:#4d20ba;--lime:#d9f72f;--coral:#f05c79;--soft:#f0ebff;--radius:18px;--shadow:0 16px 38px rgba(37,22,70,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:20px}
.brand{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.04em;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:17px}
.links{display:flex;align-items:center;gap:3px;margin-left:auto}
.links a{padding:8px 10px;border-radius:9px;font-size:.82rem;font-weight:750;color:#514b5d;white-space:nowrap}
.links a:hover,.links a.active{background:var(--soft);color:var(--violet)}
.search{width:175px;position:relative}
.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;background:#fff;outline:none;font-size:.82rem}
.search:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted)}
.search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(101,55,216,.15)}
.menu{display:none;border:0;background:transparent;font-size:23px;color:var(--ink);cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:850;font-size:.9rem;transition:.2s ease;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(58,28,128,.18)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(101,55,216,.3);outline-offset:3px}
.btn-primary{background:var(--violet);color:#fff}
.btn-lime{background:var(--lime);color:#242118}
.btn-outline{border-color:#d8d0e1;background:#fff;color:var(--ink)}
.page-hero{padding:74px 0 58px;background:linear-gradient(110deg,#f0ebff 0%,#faf8f3 58%,#edf7aa 100%);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:45px;align-items:center}
.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--violet)}
h1,h2,h3{line-height:1.12;letter-spacing:-.045em}
h1{font-size:clamp(2.7rem,6vw,5.3rem);margin:13px 0 18px;max-width:760px}
h2{font-size:clamp(1.8rem,3vw,2.7rem);margin:7px 0 0}
h3{font-size:1.08rem;margin:0 0 8px}
.lead{font-size:1.08rem;color:var(--muted);max-width:650px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}
.hero-art{min-height:330px;border-radius:22px;overflow:hidden;position:relative;box-shadow:var(--shadow);border:8px solid #fff}
.hero-art img{width:100%;height:100%;min-height:330px;object-fit:cover}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(29,16,49,.1),rgba(101,55,216,.48))}
.hero-note{position:absolute;z-index:1;left:22px;bottom:20px;color:#fff;font-weight:850;font-size:1.15rem;max-width:220px}
section{padding:76px 0}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:28px}
.section-top p{max-width:620px;color:var(--muted);margin:0}
.tag{display:inline-block;border-radius:999px;padding:4px 9px;background:var(--soft);color:var(--violet);font-size:.7rem;font-weight:850}
.guide-layout{display:grid;grid-template-columns:1.05fr 1.5fr;gap:22px;align-items:stretch}
.feature-guide{background:#29174c;color:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.feature-guide img{height:220px;width:100%;object-fit:cover}
.feature-copy{padding:25px}
.feature-copy p{color:#dcd2f4;margin:0 0 18px}
.guide-list{display:grid;gap:12px}
.guide-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px 20px;display:grid;grid-template-columns:1fr auto;gap:15px;transition:.2s ease}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfc0ee}
.guide-card p{color:var(--muted);font-size:.88rem;margin:4px 0 8px}
.meta{font-size:.75rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.topic-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.topic{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;min-height:132px}
.topic strong{display:block;font-size:1.5rem;color:var(--violet);margin-bottom:9px}
.topic span{font-size:.84rem;color:var(--muted)}
.split-panel{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.split-panel img{height:290px;width:100%;object-fit:cover;border-radius:14px}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.check-list li{padding-left:30px;position:relative;color:var(--muted)}
.check-list li:before{content:"✓";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:var(--lime);color:#29251b;text-align:center;font-weight:900;font-size:.78rem}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.quick-card{padding:23px;background:#f0ebff;border-radius:16px;border:1px solid #ded3fa}
.quick-card b{display:block;color:var(--violet);font-size:1.25rem;margin-bottom:6px}
.quick-card p{margin:0;color:var(--muted);font-size:.9rem}
.faq{max-width:900px;margin:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:850}
.faq p{color:var(--muted);font-size:.92rem;padding-top:10px;margin:0}
.cta{background:#29174c;color:#fff;border-radius:22px;padding:42px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.cta p{color:#dcd2f4;max-width:620px;margin:8px 0 0}
.empty{background:#fff;border:1px dashed #cfc5dd;padding:38px;border-radius:16px;color:var(--muted);text-align:center}
.footer{background:#17121f;color:#dbd5e4;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:35px}
.footer h3{color:#fff;letter-spacing:0;font-size:1rem}
.footer a{display:block;color:#c8c0d3;font-size:.88rem;margin:8px 0}
.footer a:hover{color:var(--lime)}
.footer p{color:#aaa1b4;max-width:300px;font-size:.88rem}
.copyright{border-top:1px solid #3a3244;margin-top:30px;padding-top:18px;font-size:.78rem;color:#a89eaf}
@media(max-width:1024px){.links{gap:0}.search{display:none}.hero-grid,.guide-layout,.split-panel{grid-template-columns:1fr}.topic-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.container{width:min(100% - 28px,1220px)}.nav{min-height:66px}.menu{display:block;margin-left:auto}.links{display:none;position:absolute;top:66px;left:0;right:0;padding:13px 20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.links.open{display:flex}.nav>.btn{display:none}.page-hero{padding:55px 0 42px}section{padding:58px 0}.quick-grid{grid-template-columns:1fr}.cta{display:block;padding:30px}.cta .btn{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){h1{font-size:2.65rem}.hero-actions .btn{width:100%}.hero-art,.hero-art img{min-height:250px}.topic-rail,.footer-grid{grid-template-columns:1fr}.guide-card{grid-template-columns:1fr}.split-panel{padding:17px}.split-panel img{height:220px}.cta{border-radius:16px}}

/* roulang page: category4 */
:root{--ink:#181522;--muted:#6d6878;--paper:#faf8f3;--white:#fff;--line:#e7e1ed;--violet:#6537d8;--violet-dark:#4d20ba;--lime:#d9f72f;--coral:#f05c79;--soft:#f0ebff;--success:#287e5b;--warning:#a76910;--radius:18px;--radius-sm:12px;--shadow:0 16px 38px rgba(37,22,70,.09);--shadow-hover:0 20px 45px rgba(37,22,70,.15)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1220px,calc(100% - 40px));margin:auto}
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:76px;display:flex;align-items:center;gap:24px}
.brand{font-weight:900;font-size:1.2rem;display:flex;align-items:center;gap:10px;letter-spacing:-.04em;white-space:nowrap}
.brand-mark{width:30px;height:30px;border-radius:10px;background:var(--violet);color:var(--lime);display:grid;place-items:center;font-size:17px}
.links{display:flex;align-items:center;gap:2px;margin-left:auto}
.links a{padding:8px 11px;border-radius:9px;font-size:.88rem;font-weight:750;color:#514b5d;transition:background .2s,color .2s}
.links a:hover,.links a.active{background:var(--soft);color:var(--violet)}
.search{width:175px;position:relative}
.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px 9px 32px;background:#fff;outline:none;font-size:.82rem;transition:border-color .2s,box-shadow .2s}
.search:before{content:"⌕";position:absolute;left:11px;top:7px;color:var(--muted);z-index:1}
.search input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(101,55,216,.15)}
.menu{display:none;border:0;background:transparent;font-size:23px;color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:11px;border:1px solid transparent;font-weight:850;font-size:.9rem;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(58,28,128,.18)}
.btn:active{transform:translateY(0)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(101,55,216,.34);outline-offset:3px}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--violet-dark)}
.btn-lime{background:var(--lime);color:#242118}
.btn-lime:hover{background:#c9e936}
.btn-outline{border-color:#d8d0e1;background:#fff;color:var(--ink)}
.btn-outline:hover{border-color:var(--violet);color:var(--violet)}
section{padding:76px 0}
.eyebrow{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;color:var(--violet)}
.section-top{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:27px}
.section-top h2{font-size:clamp(1.72rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.05em;margin:6px 0 0}
.section-top p{max-width:590px;color:var(--muted);margin:0}
.page-head{padding:65px 0 38px;background:linear-gradient(125deg,#f0ebff 0%,#fff 54%,#f7f2d3 100%);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.page-head:after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(101,55,216,.08);right:8%;top:-170px}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:21px}
.breadcrumb span{color:var(--violet)}
.page-head-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:45px;align-items:end;position:relative;z-index:1}
.page-head h1{font-size:clamp(2.5rem,5vw,4.8rem);line-height:1;letter-spacing:-.07em;margin:8px 0 17px;max-width:720px}
.page-head p{max-width:670px;color:#595263;font-size:1.03rem;margin:0}
.release-signal{background:#211538;color:#fff;border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow)}
.signal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.signal-top b{font-size:.92rem}
.status{font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900;padding:4px 9px;border-radius:999px}
.status.live{background:rgba(217,247,47,.18);color:var(--lime)}
.signal-row{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.16);padding-top:12px;margin-top:12px;font-size:.82rem;color:#d4cbe4}
.signal-row strong{color:#fff}
.filter-rail{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:22px 0}
.filter-set{display:flex;gap:9px;flex-wrap:wrap}
.filter-chip{border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:999px;font-weight:800;font-size:.78rem;color:#585164}
.filter-chip.active,.filter-chip:hover{border-color:var(--violet);background:var(--soft);color:var(--violet)}
.update-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start}
.featured-release{background:#29174c;border-radius:22px;overflow:hidden;color:#fff;box-shadow:var(--shadow)}
.featured-release img{width:100%;height:230px;object-fit:cover;opacity:.82}
.featured-copy{padding:25px}
.featured-copy h2{line-height:1.12;letter-spacing:-.04em;font-size:1.65rem;margin:11px 0}
.featured-copy p{color:#ddd3ee;margin:0 0 20px}
.release-list{display:grid;gap:12px}
.release-card{display:grid;grid-template-columns:104px 1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px;transition:transform .2s,box-shadow .2s,border-color .2s}
.release-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cfc2ee}
.release-date{font-size:.78rem;font-weight:900;color:var(--violet);line-height:1.35}
.release-date strong{display:block;font-size:1.3rem;letter-spacing:-.04em;color:var(--ink)}
.release-card h3{font-size:1rem;line-height:1.25;margin:0 0 4px;letter-spacing:-.025em}
.release-card p{font-size:.84rem;color:var(--muted);margin:0}
.arrow-link{font-size:1.2rem;color:var(--violet);font-weight:900}
.metadata-strip{background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.meta-cell{padding:20px 22px;border-right:1px solid var(--line)}
.meta-cell:last-child{border:0}
.meta-cell span{font-size:.71rem;text-transform:uppercase;letter-spacing:.1em;font-weight:900;color:var(--muted);display:block}
.meta-cell b{font-size:1.02rem;display:block;line-height:1.25;margin-top:5px}
.meta-cell em{font-style:normal;color:var(--success);font-size:.78rem;font-weight:800}
.timeline-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:60px}
.timeline-intro{position:sticky;top:108px;align-self:start}
.timeline-intro h2{font-size:clamp(2rem,3.5vw,3rem);letter-spacing:-.06em;line-height:1.05;margin:8px 0 15px}
.timeline-intro p{color:var(--muted);margin:0 0 20px}
.timeline{border-left:2px solid #dcd3ec;margin:8px 0 0 10px;padding-left:34px}
.milestone{position:relative;padding:0 0 31px}
.milestone:before{content:"";position:absolute;left:-43px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--lime);border:4px solid var(--paper);box-shadow:0 0 0 2px var(--violet)}
.milestone:last-child{padding-bottom:0}
.milestone time{font-size:.76rem;color:var(--violet);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.milestone h3{font-size:1.15rem;line-height:1.2;letter-spacing:-.035em;margin:5px 0}
.milestone p{color:var(--muted);margin:0;max-width:620px}
.preview-panel{display:grid;grid-template-columns:1fr 1fr;min-height:375px;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.preview-image{position:relative;min-height:300px}
.preview-image img{width:100%;height:100%;object-fit:cover}
.preview-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(34,18,62,.45),transparent 55%)}
.preview-copy{padding:clamp(26px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.preview-copy h2{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.1;letter-spacing:-.05em;margin:7px 0 15px}
.preview-copy p{color:var(--muted);margin:0 0 22px}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{position:relative;padding:8px 0 8px 27px;font-size:.9rem;font-weight:700;border-bottom:1px solid var(--line)}
.check-list li:last-child{border-bottom:0}
.check-list li:before{content:"✓";position:absolute;left:0;color:var(--violet);font-weight:900}
.assurance{background:linear-gradient(115deg,#27164a,#4d20ba);color:#fff;border-radius:22px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.1fr .9fr;gap:45px;align-items:center}
.assurance .eyebrow{color:var(--lime)}
.assurance h2{font-size:clamp(1.85rem,3.4vw,3rem);letter-spacing:-.055em;line-height:1.06;margin:7px 0 14px}
.assurance p{color:#dcd2ef;margin:0}
.assurance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.assurance-item{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);border-radius:14px;padding:17px}
.assurance-item b{display:block;color:var(--lime);font-size:.85rem;margin-bottom:4px}
.assurance-item span{font-size:.8rem;color:#ddd4ec}
.faq{max-width:920px;margin:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px 20px;margin-bottom:10px;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:#cfc1ec;box-shadow:0 8px 20px rgba(37,22,70,.06)}
.faq summary{cursor:pointer;font-weight:850;list-style:none;padding-right:28px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:0;top:-4px;font-size:1.4rem;color:var(--violet)}
.faq details[open] summary:after{content:"−"}
.faq p{color:var(--muted);font-size:.92rem;padding-top:10px;margin:0}
.cta-panel{background:#ebe5fc;border:1px solid #d8cef1;border-radius:22px;padding:clamp(28px,5vw,52px);display:flex;align-items:center;justify-content:space-between;gap:28px}
.cta-panel h2{font-size:clamp(1.75rem,3vw,2.6rem);letter-spacing:-.055em;line-height:1.08;margin:7px 0}
.cta-panel p{color:var(--muted);margin:0;max-width:690px}
.footer{background:#17121f;color:#dbd5e4;padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(2,.7fr);gap:35px}
.footer .brand{color:#fff}
.footer p{font-size:.9rem;max-width:370px;color:#bcb4c8}
.footer h3{color:#fff;font-size:.9rem;margin:0 0 13px}
.footer a{display:block;color:#c8c0d3;font-size:.88rem;margin:8px 0}
.footer a:hover{color:var(--lime)}
.copyright{border-top:1px solid #3a3244;margin-top:30px;padding-top:18px;font-size:.78rem;color:#a89eaf}
@media(max-width:1024px){
.links{gap:0}.search{display:none}.page-head-grid,.update-layout,.timeline-wrap,.assurance{grid-template-columns:1fr}.timeline-intro{position:static}.release-signal{max-width:530px}.metadata-strip{grid-template-columns:1fr 1fr}.meta-cell:nth-child(2){border-right:0}.meta-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:768px){
.container{width:min(100% - 28px,1220px)}.nav{min-height:66px}.menu{display:block;margin-left:auto}.links{display:none;position:absolute;top:66px;left:0;right:0;padding:13px 20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:4px}.links.open{display:flex}.links a{padding:11px}.nav>.btn{display:none}.page-head{padding:46px 0 33px}section{padding:58px 0}.filter-rail{align-items:flex-start;flex-direction:column}.release-card{grid-template-columns:82px 1fr}.release-card .arrow-link{display:none}.preview-panel{grid-template-columns:1fr}.preview-image{height:255px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:span 2}.cta-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){
.page-head h1{font-size:2.45rem}.section-top{display:block}.section-top p{margin-top:14px}.metadata-strip{grid-template-columns:1fr}.meta-cell,.meta-cell:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.meta-cell:last-child{border-bottom:0}.release-card{grid-template-columns:1fr;gap:8px}.release-date strong{display:inline;font-size:1rem;margin-right:6px}.timeline{padding-left:27px;margin-left:8px}.milestone:before{left:-36px}.assurance-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.btn{width:100%}.cta-panel .btn{width:100%}}