/* roulang page: index */
:root{--bg:#101323;--surface:#191e32;--text:#f3f5ff;--muted:#a4adc4;--line:rgba(255,255,255,.11);--accent:#c2ff64;--purple:#9c84ff;--radius:24px;--shadow:0 20px 60px rgba(0,0,0,.19)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}img,svg{display:block;max-width:100%}button,input,select{max-width:100%}a,button{transition:background .2s,color .2s,transform .2s,border-color .2s}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:active,.button:active{transform:translateY(1px)}::selection{background:var(--purple);color:#101323}.container{width:min(1180px,calc(100% - 64px));margin:auto}.site-header{position:sticky;top:0;z-index:40;background:rgba(16,19,35,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 10px 25px #00000012}.header-inner{position:relative}.brand-row{height:84px;display:flex;align-items:center;justify-content:space-between;transition:height .3s}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;letter-spacing:.3px}.brand-icon{display:grid;place-items:center;width:39px;height:43px;background:linear-gradient(145deg,#b4a0ff,#7047ea);clip-path:polygon(50% 0,100% 22%,91% 78%,50% 100%,9% 78%,0 22%);font-size:22px;color:white}.brand-note{color:var(--muted);font-size:12px;display:flex;gap:20px;align-items:center}.online-dot{width:6px;height:6px;display:inline-block;background:var(--accent);border-radius:50%;margin-right:7px}.channel-nav{height:49px;display:flex;gap:35px;align-items:stretch;border-top:1px solid var(--line);transition:height .3s}.channel-nav a{font-size:14px;color:var(--muted);display:flex;align-items:center;position:relative}.channel-nav a:hover,.channel-nav a.active{color:var(--text)}.channel-nav a.active:after{content:"";height:3px;background:var(--accent);position:absolute;bottom:0;left:0;right:0;border-radius:3px 3px 0 0}.nav-caption{margin-left:auto;align-self:center;font-size:12px;color:var(--muted)}.compact .brand-row{height:65px}.compact .brand-note{visibility:hidden}.compact .channel-nav{position:absolute;right:0;top:0;height:65px;border:0}.compact .nav-caption{display:none}.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:white}.hero{position:relative;overflow:hidden;padding:62px 0 40px;background:radial-gradient(ellipse at 80% 15%,#623ac546,transparent 52%),radial-gradient(ellipse at 9% 85%,#45684325,transparent 40%),#101323}.hero-stage{border:1px solid #c6b5ff35;border-radius:32px;padding:46px 52px 0;position:relative;overflow:hidden;background:linear-gradient(112deg,#30214c,#252746 58%,#222f39);box-shadow:var(--shadow)}.hero-stage:after{content:"";position:absolute;right:-45px;top:-115px;width:370px;height:370px;border:1px solid #c7b4ff26;border-radius:50%;box-shadow:0 0 0 45px #ad8bff08,0 0 0 95px #ad8bff06;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;color:#d0bcff;font-weight:700}.hero h1{font-size:clamp(34px,4.7vw,59px);line-height:1.22;font-weight:900;letter-spacing:-1.5px;position:relative;z-index:1;max-width:850px;margin:18px 0}.gradient-text{background:linear-gradient(100deg,#c4ff75,#c8b1ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{max-width:830px;color:#c4c7da;font-size:15px;line-height:2;margin-top:20px}.hero-sticker{position:absolute;right:37px;top:31px;background:var(--accent);color:#23330f;border-radius:50%;width:83px;height:83px;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.4;font-weight:900;transform:rotate(11deg);font-size:13px}.hero-sticker strong{font-size:27px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;padding:13px 23px;font-weight:700;font-size:14px;border:1px solid transparent;background:var(--accent);color:#182017;min-height:48px}.button:hover{background:#d5ff98;box-shadow:0 5px 25px #baff5620}.button.secondary{background:#ffffff08;color:var(--text);border-color:#ffffff30}.button.secondary:hover{background:#ffffff14}.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:35px;border-top:1px solid #ffffff20}.metric{padding:23px 18px;border-right:1px solid #ffffff15}.metric:first-child{padding-left:0}.metric:last-child{border:0}.metric strong{font-size:25px;line-height:1.3;display:block}.metric span{font-size:12px;color:#b6bbd0}.section{padding:54px 0;border-bottom:1px solid var(--line)}.section.alt{background:#14182a}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px}.section h2{font-size:28px;line-height:1.4;font-weight:800;letter-spacing:-.5px;margin:7px 0 12px}.section-copy{font-size:14px;color:var(--muted);max-width:800px;line-height:1.95}.section-index{font-size:11px;color:var(--purple);letter-spacing:2px;font-weight:700}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:26px;transition:border-color .2s,transform .2s,box-shadow .2s}.card:hover{border-color:#9c84ff60;box-shadow:var(--shadow);transform:translateY(-3px)}.card h3{font-size:18px;font-weight:800;margin:12px 0 9px}.card p{font-size:13px;line-height:1.9;color:var(--muted)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:7px;background:#c2ff6412;color:var(--accent);font-size:11px;font-weight:700}.badge.purple{background:#9c84ff18;color:#c7b9ff}.search-bar{display:flex;gap:12px;background:#1b2035;border:1px solid var(--line);border-radius:18px;padding:9px}.search-bar input{min-width:0;width:100%;background:transparent;border:0;color:var(--text);padding:8px 12px;outline-offset:0}.search-bar input::placeholder{color:#8790a8}.topic-number{font-size:32px;font-weight:900;color:#b8a3ff66;line-height:1}.text-link{color:#d1bfff;font-size:13px;font-weight:700;white-space:nowrap}.text-link:hover{color:var(--accent)}.coupon{position:relative;border:1px dashed #9990ba75;background:linear-gradient(125deg,#24293f,#1a2133);border-radius:20px;padding:25px;overflow:hidden}.coupon:after{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:var(--bg);right:-14px;top:50%;border:1px solid var(--line)}.coupon h3{font-size:18px;font-weight:800;margin:14px 0 9px}.coupon p{font-size:13px;color:var(--muted);min-height:72px}.coupon-bottom{margin-top:20px;border-top:1px dashed #ffffff20;padding-top:15px;display:flex;justify-content:space-between;font-size:12px;color:#d3c3ff}.timeline{padding-left:23px;border-left:1px solid #8d76c65c}.timeline-item{position:relative;padding:0 0 27px 19px}.timeline-item:last-child{padding-bottom:0}.timeline-item:before{content:"";position:absolute;left:-29px;top:8px;width:11px;height:11px;background:#b296ff;border-radius:50%;box-shadow:0 0 0 5px #211d35}.timeline-item h3{font-weight:700;font-size:16px}.timeline-item p{font-size:13px;color:var(--muted);margin-top:5px}.rank-row{display:grid;grid-template-columns:45px 1fr auto;align-items:center;gap:17px;padding:19px 0;border-bottom:1px solid var(--line)}.rank-row:last-child{border:0}.rank-num{font-size:26px;font-weight:900;color:#bba5ff}.rank-row p{font-size:13px;color:var(--muted);margin-top:4px}.progress-track{height:5px;background:#ffffff10;border-radius:10px;margin-top:10px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#a589fa,#c2ff64);border-radius:10px}.article-list{border-top:1px solid var(--line)}.article-item{padding:25px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:95px 1fr;gap:25px}.article-item h3{font-weight:800;font-size:19px;margin-bottom:8px}.article-item p{color:var(--muted);font-size:14px}.article-tag{font-size:12px;color:#ba9dfb;padding-top:5px}.compare-col{padding:27px;border:1px solid var(--line);border-radius:20px;background:#1a1e30}.compare-col.good{border-color:#c2ff6445;background:#202c252e}.clean-list{list-style:none;margin:0;padding:0}.clean-list li{position:relative;padding:10px 0 10px 20px;font-size:14px;color:#bdc5da}.clean-list li:before{content:"";position:absolute;left:0;top:21px;width:5px;height:5px;border-radius:50%;background:var(--purple)}details{border-bottom:1px solid var(--line)}summary{padding:21px 30px 21px 0;cursor:pointer;font-size:15px;font-weight:700;list-style:none;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:"+";position:absolute;right:2px;color:var(--accent);font-size:22px;top:15px}details[open] summary:after{content:"−"}details p{padding:0 30px 21px 0;color:var(--muted);font-size:14px;line-height:1.9}.save-box{border-radius:28px;background:linear-gradient(115deg,#32254b,#1e3038);padding:35px;border:1px solid #b79cff45}.field{display:block;color:#ccd1e1;font-size:13px}.field select{display:block;width:100%;background:#151a2c;color:#fff;border:1px solid #ffffff26;border-radius:12px;padding:12px;margin-top:8px}.form-status{font-size:13px;color:var(--accent);min-height:24px;margin-top:12px}.site-footer{padding:35px 0 28px;background:#0c0f1c}.footer-top{display:flex;justify-content:space-between;gap:30px;padding-bottom:24px;border-bottom:1px solid var(--line)}.footer-copy{max-width:600px;font-size:12px;color:#8992aa;margin-top:13px;line-height:1.9}.footer-links{display:flex;gap:22px;align-items:flex-start;font-size:12px;color:#b4bdd2}.footer-links a:hover{color:var(--accent)}.footer-bottom{padding-top:20px;font-size:11px;color:#808aa2;display:flex;justify-content:space-between;gap:20px}.empty-result{padding:20px;color:var(--muted);border:1px dashed var(--line);border-radius:15px}.searchable[hidden]{display:none!important}
@media(min-width:1025px){.hero h1{padding-right:75px}}
@media(max-width:1024px){.container{width:calc(100% - 48px)}.hero-stage{padding:36px 32px 0}.hero-sticker{right:25px;top:25px;width:65px;height:65px;font-size:10px}.hero-sticker strong{font-size:22px}.hero h1{max-width:80%}.section{padding:44px 0}.brand-note{gap:12px}.nav-caption{display:none}}
@media(max-width:768px){.container{width:calc(100% - 36px)}.brand-row,.compact .brand-row{height:68px}.brand{font-size:16px}.brand-note{display:none}.menu-toggle{display:block}.channel-nav,.compact .channel-nav{display:none;position:static;height:auto;border-top:1px solid var(--line);padding:10px 0 18px;gap:0;flex-direction:column}.channel-nav.open{display:flex}.channel-nav a{padding:11px 12px;border-radius:8px}.channel-nav a.active{background:#9c84ff18}.channel-nav a.active:after{display:none}.hero{padding:24px 0}.hero-stage{padding:29px 25px 0;border-radius:24px}.hero h1{max-width:100%;font-size:37px;padding-right:0}.hero-sticker{position:static;float:right;margin-left:15px;margin-top:-5px}.hero-copy{font-size:14px}.hero-metrics{grid-template-columns:repeat(2,1fr);margin-top:25px}.metric{padding:18px 10px}.metric:nth-child(2){border-right:0}.metric:nth-child(3){padding-left:0;border-top:1px solid #ffffff15}.metric:nth-child(4){border-top:1px solid #ffffff15}.section-head{display:block}.section-head .text-link{display:inline-block;margin-top:13px}.section h2{font-size:25px}.article-item{grid-template-columns:1fr;gap:8px}.footer-top,.footer-bottom{flex-direction:column}.save-box{padding:26px}.section-copy{font-size:14px}}
@media(max-width:520px){.container{width:calc(100% - 28px)}.hero h1{font-size:30px;letter-spacing:-.7px}.hero-stage{padding:25px 20px 0}.hero-sticker{width:58px;height:58px}.eyebrow{font-size:10px;letter-spacing:1px}.hero-copy{font-size:13px}.button{padding:12px 17px;font-size:13px}.metric strong{font-size:22px}.metric span{font-size:11px}.section{padding:36px 0}.card{padding:22px}.rank-row{grid-template-columns:30px 1fr;gap:12px}.rank-row>.badge{display:none}.search-bar{gap:3px}.search-bar input{font-size:13px;padding-left:8px}.search-bar .button{padding:10px 16px}.footer-links{flex-wrap:wrap}.brand-icon{width:31px;height:35px}.save-box{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* roulang page: category1 */
:root{--bg:#101323;--surface:#191e32;--text:#f3f5ff;--muted:#a4adc4;--line:rgba(255,255,255,.11);--accent:#c2ff64;--purple:#9c84ff;--radius:24px;--shadow:0 20px 60px rgba(0,0,0,.19)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit;max-width:100%;-webkit-tap-highlight-color:transparent}button{cursor:pointer}img,svg{display:block;max-width:100%}a,button{transition:background .2s,color .2s,transform .2s,border-color .2s}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:active,.button:active{transform:translateY(1px)}.container{width:min(1180px,calc(100% - 64px));margin:auto}.site-header{position:sticky;top:0;z-index:40;background:rgba(16,19,35,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 10px 25px #00000012}.header-inner{position:relative}.brand-row{height:84px;display:flex;align-items:center;justify-content:space-between;transition:height .3s}.brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:900;letter-spacing:.3px}.brand-icon{display:grid;place-items:center;width:39px;height:43px;flex-shrink:0;background:linear-gradient(145deg,#b4a0ff,#7047ea);clip-path:polygon(50% 0,100% 22%,91% 78%,50% 100%,9% 78%,0 22%);font-size:22px;color:white}.brand-note{color:var(--muted);font-size:12px;display:flex;gap:20px;align-items:center}.channel-nav{height:49px;display:flex;gap:35px;align-items:stretch;border-top:1px solid var(--line);transition:height .3s}.channel-nav a{font-size:14px;color:var(--muted);display:flex;align-items:center;position:relative}.channel-nav a:hover,.channel-nav a.active{color:var(--text)}.channel-nav a.active:after{content:"";height:3px;background:var(--accent);position:absolute;bottom:0;left:0;right:0;border-radius:3px 3px 0 0}.nav-caption{margin-left:auto;align-self:center;font-size:12px;color:var(--muted)}.compact .brand-row{height:65px}.compact .brand-note{visibility:hidden}.compact .channel-nav{position:absolute;right:0;top:0;height:65px;border:0}.compact .nav-caption{display:none}.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:white}
.hero{position:relative;overflow:hidden;padding:42px 0 48px;background:radial-gradient(ellipse at 80% 15%,#623ac546,transparent 52%),#101323}.hero-stage{border:1px solid #c6b5ff35;border-radius:32px;padding:36px;position:relative;overflow:hidden;background:linear-gradient(112deg,#30214c,#252746 58%,#222f39);box-shadow:var(--shadow)}.eyebrow{font-size:12px;letter-spacing:2px;color:#d0bcff;font-weight:700}.hero h1{font-size:clamp(32px,4.3vw,52px);line-height:1.25;font-weight:900;letter-spacing:-1px;margin:17px 0}.hero-copy{color:#c4c7da;font-size:15px;line-height:2;max-width:670px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:12px;padding:13px 23px;font-weight:700;font-size:14px;border:1px solid transparent;background:var(--accent);color:#182017;min-height:48px}.button:hover{background:#d5ff98;box-shadow:0 5px 25px #baff5620}.button.secondary{background:#ffffff08;color:var(--text);border-color:#ffffff30}.button.secondary:hover{background:#ffffff14}
.section{padding:58px 0;border-bottom:1px solid var(--line)}.section.alt{background:#14182a}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px}.section h2{font-size:28px;line-height:1.4;font-weight:800;letter-spacing:-.5px;margin:7px 0 12px}.section-copy{font-size:14px;color:var(--muted);max-width:800px;line-height:1.95}.section-index{font-size:11px;color:var(--purple);letter-spacing:2px;font-weight:700}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:26px;transition:border-color .2s,transform .2s,box-shadow .2s}.card:hover{border-color:#9c84ff60;box-shadow:var(--shadow);transform:translateY(-3px)}.card h3{font-size:18px;font-weight:800;margin:12px 0 9px}.card p{font-size:13px;line-height:1.9;color:var(--muted)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:7px;background:#c2ff6412;color:var(--accent);font-size:11px;font-weight:700}.badge.purple{background:#9c84ff18;color:#c7b9ff}.text-link{color:#d1bfff;font-size:13px;font-weight:700}.text-link:hover{color:var(--accent)}.rank-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:15px;padding:17px 0;border-bottom:1px solid var(--line)}.rank-row:last-child{border:0}.rank-row p{font-size:12px;color:var(--muted);margin-top:3px}.rank-number{font-size:21px;font-weight:900;color:var(--purple)}.article-list{border-top:1px solid var(--line)}.article-item{padding:25px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:95px 1fr;gap:25px}.article-item h3{font-weight:800;font-size:19px;margin-bottom:8px}.article-item p{color:var(--muted);font-size:14px}.article-tag{font-size:12px;color:#ba9dfb;padding-top:5px}.compare-col{padding:27px;border:1px solid var(--line);border-radius:20px;background:#1a1e32}.compare-col h3{font-size:19px;font-weight:800;margin:14px 0}.compare-col li{padding:13px 0;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.compare-col.emphasis{border-color:#9c84ff66;background:linear-gradient(125deg,#2b2444,#191e32)}.metric-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:26px}.metric{padding:19px 24px;background:#1b2033}.metric strong{font-size:25px;color:var(--accent);line-height:1.3}.metric span{display:block;font-size:12px;color:var(--muted);margin-top:5px}.milestone{border-top:2px solid #9c84ff50;padding-top:20px}.milestone b{color:var(--purple);font-size:13px}.milestone h3{font-size:18px;font-weight:800;margin:12px 0}.milestone p{font-size:13px;color:var(--muted)}.quick-line{display:flex;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:14px}.quick-line span{color:var(--muted);text-align:right}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{cursor:pointer;font-weight:700;padding-right:26px;position:relative;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"＋";position:absolute;right:0;color:var(--purple)}.faq-list details[open] summary:after{content:"−"}.faq-list details p{font-size:14px;color:var(--muted);padding-top:14px;max-width:850px}.save-panel{padding:36px;border:1px solid #9c84ff50;border-radius:28px;background:linear-gradient(115deg,#29233f,#191e32)}.form-label{font-size:13px;color:#d2d7e8;display:block;margin-bottom:8px}.form-control{width:100%;padding:12px 14px;border:1px solid #ffffff25;border-radius:12px;background:#111627;color:var(--text)}.form-control:hover{border-color:var(--purple)}.form-status{min-height:27px;margin-top:14px;font-size:13px;color:var(--accent)}.site-footer{padding:42px 0 23px;background:#0c101e}.footer-top{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:start}.footer-copy{max-width:700px;color:var(--muted);font-size:12px;margin-top:18px;line-height:2}.footer-links{display:flex;gap:24px;font-size:13px;color:var(--muted)}.footer-links a:hover{color:var(--accent)}.footer-bottom{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:11px;color:var(--muted)}
@media(max-width:1024px){.container{width:calc(100% - 48px)}.hero-stage{padding:28px}.brand-note{gap:12px}.nav-caption{font-size:11px}.footer-top{gap:25px}.metric{padding:17px}}
@media(max-width:768px){.container{width:calc(100% - 36px)}.brand-row,.compact .brand-row{height:68px}.brand-note,.nav-caption{display:none}.menu-toggle{display:block}.channel-nav,.compact .channel-nav{display:none;position:static;height:auto;flex-direction:column;gap:0;border-top:1px solid var(--line);padding:8px 0}.channel-nav.open{display:flex}.channel-nav a{padding:13px 4px}.compact .channel-nav a.active:after{height:2px}.hero{padding-top:28px}.section{padding:42px 0}.section-head{align-items:flex-start;flex-direction:column;gap:10px}.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:9px}.metric-strip{grid-template-columns:repeat(2,1fr)}.save-panel{padding:25px}}
@media(max-width:520px){.brand{font-size:16px;gap:8px}.brand-icon{width:32px;height:36px;font-size:19px}.hero-stage{padding:23px;border-radius:24px}.hero h1{font-size:34px}.section h2{font-size:25px}.card,.compare-col{padding:22px}.article-item{grid-template-columns:1fr;gap:7px}.quick-line{flex-direction:column;gap:5px}.quick-line span{text-align:left}.footer-links{gap:19px}.rank-row{gap:10px}.metric strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}