/* roulang page: index */
:root{
      --ink:#121214;--panel:#1b1a1d;--panel-2:#242126;--paper:#f4f1f2;
      --plum:#7a365f;--plum-dark:#5e2849;--mint:#a6e8c6;--orange:#d87545;
      --muted:#aaa4aa;--line:rgba(255,255,255,.12);--soft-line:#ddd7db;
      --shadow:0 12px 28px rgba(18,18,20,.12);--radius:16px;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--ink);color:var(--paper);line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none}
    button,input,select{font:inherit}
    button{cursor:pointer}
    .container{width:min(1280px,calc(100% - 48px));margin:auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(18,18,20,.96);border-bottom:1px solid transparent;transition:.25s}
    .site-header.scrolled{border-color:var(--line);box-shadow:0 6px 20px rgba(0,0,0,.18)}
    .nav-shell{height:72px;display:flex;align-items:center;justify-content:space-between;gap:28px}
    .brand{display:flex;align-items:center;gap:12px;min-width:250px}
    .brand-mark{width:34px;height:34px;border:2px solid var(--mint);display:grid;place-items:center;color:var(--mint);font-weight:800;font-family:monospace}
    .brand strong{font-size:16px;letter-spacing:.04em}
    .brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2}
    .nav-links{display:flex;align-items:center;gap:6px}
    .nav-links a,.mobile-link{padding:8px 13px;color:#c7c1c7;border-radius:8px;transition:.2s}
    .nav-links a:hover,.nav-links a.active{color:#fff;background:var(--plum)}
    .nav-side{display:flex;align-items:center;gap:10px}
    .search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 11px;color:var(--muted);transition:.25s}
    .search-box input{width:0;opacity:0;background:none;border:0;outline:0;color:#fff;transition:.25s}
    .search-box:focus-within input{width:120px;opacity:1}
    .age-badge,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:12px}
    .age-badge{color:#f2b394;border:1px solid rgba(216,117,69,.55)}
    .tag{background:#eee8eb;color:#5e2849}
    .tag.dark{background:rgba(166,232,198,.12);color:var(--mint);border:1px solid rgba(166,232,198,.3)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;border:1px solid transparent;font-weight:700;transition:.2s}
    .btn:hover{transform:translateY(-2px)}
    .btn:focus,.nav-links a:focus,input:focus,select:focus,button:focus{outline:2px solid var(--mint);outline-offset:3px}
    .btn-primary{background:var(--plum);color:#fff}.btn-primary:hover{background:var(--plum-dark)}
    .btn-outline{border-color:rgba(255,255,255,.3);color:#fff}.btn-outline:hover{border-color:var(--mint);color:var(--mint)}
    .menu-btn{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:8px;padding:8px 11px}
    .mobile-menu{display:none;padding:12px 0 22px;border-top:1px solid var(--line)}
    .mobile-menu.open{display:block}.mobile-link{display:block;margin:3px 0}
    .hero{min-height:640px;background:var(--panel);position:relative;overflow:hidden}
    .hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(166,232,198,.3) 80px,transparent 81px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(166,232,198,.2) 80px,transparent 81px)}
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.15fr;min-height:640px;align-items:center;gap:56px}
    .eyebrow{color:var(--mint);font:12px/1.2 monospace;letter-spacing:.12em;text-transform:uppercase}
    h1,h2,h3{line-height:1.2;margin:0 0 18px}
    h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.04em}
    h1 span{color:var(--mint);display:block}
    h2{font-size:clamp(28px,3vw,38px);color:#201e22}
    h3{font-size:19px}
    .hero h2,.hero h3{color:#fff}
    .lead{font-size:17px;color:#c9c3c9;max-width:590px;margin:0 0 26px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
    .notice{font-size:12px;color:#b9b2b9;display:flex;align-items:center;gap:8px}
    .notice i{width:7px;height:7px;background:var(--orange);border-radius:50%;display:inline-block}
    .visual-stage{height:470px;position:relative;border-left:1px solid var(--line);padding-left:40px;display:flex;align-items:center}
    .arc{position:absolute;width:410px;height:410px;border:1px solid rgba(166,232,198,.28);border-radius:50%;right:5%;top:28px}
    .arc:before{content:"";position:absolute;width:270px;height:270px;border:1px dashed rgba(216,117,69,.4);border-radius:50%;inset:68px}
    .frame{position:relative;width:78%;height:310px;background:linear-gradient(135deg,#33262f,#171619 58%,#5d314e);border:1px solid rgba(255,255,255,.24);box-shadow:18px 18px 0 rgba(122,54,95,.55);padding:22px;overflow:hidden}
    .frame:after{content:"CONTENT / 018";position:absolute;right:18px;bottom:14px;color:var(--mint);font:12px monospace}
    .frame-lines{height:100%;border:1px solid rgba(166,232,198,.4);background:linear-gradient(120deg,transparent 35%,rgba(166,232,198,.12) 36% 43%,transparent 44%),radial-gradient(circle at 70% 25%,rgba(216,117,69,.6),transparent 22%);position:relative}
    .frame-lines:before{content:"国产内容索引";position:absolute;left:20px;top:22px;color:#fff;font-size:21px;font-weight:700}
    .data-chip{position:absolute;background:var(--paper);color:#201e22;padding:14px 16px;box-shadow:var(--shadow);min-width:150px}
    .data-chip strong{display:block;font:27px monospace;color:var(--plum)}.data-chip small{color:#6b646a}
    .chip-a{right:0;top:62px}.chip-b{left:20px;bottom:24px}.chip-c{right:35px;bottom:0}
    .section-light{background:var(--paper);color:#211e22;padding:94px 0}
    .section-dark{background:var(--panel);padding:94px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
    .section-head p{max-width:610px;color:#706970;margin:0}
    .section-dark .section-head p{color:#afa8af}.section-dark h2{color:#fff}
    .scoreboard{background:#242126;padding:15px 22px;display:flex;justify-content:space-between;align-items:center;color:#d7d0d7;font:12px monospace;border-bottom:2px solid var(--plum)}
    .scoreboard span:last-child{color:var(--mint)}
    .metrics{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1px;background:#464047;border:1px solid #464047}
    .metric{background:var(--panel);padding:27px 24px;min-height:145px}.metric:first-child{background:var(--plum)}
    .metric b{font:42px monospace;color:var(--mint);display:block}.metric:first-child b{color:#fff}
    .metric em{font-style:normal;color:#aaa4aa;font-size:13px}.metric:first-child em{color:#e5cbdc}
    .matrix{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(150px,auto);gap:15px}
    .feature-card{grid-row:span 2;grid-column:span 2;background:var(--plum);padding:30px;position:relative;overflow:hidden}
    .feature-card:after{content:"01";position:absolute;right:20px;bottom:-20px;font:130px monospace;color:rgba(255,255,255,.08)}
    .feature-card p,.dark-card p{color:#bcb5bc;margin:0 0 22px}
    .dark-card{background:#242126;border:1px solid rgba(255,255,255,.1);padding:22px;transition:.2s;position:relative}
    .dark-card:before{content:"";height:3px;background:transparent;position:absolute;left:0;right:0;top:0;transition:.2s}
    .dark-card:hover{border-color:rgba(166,232,198,.55);transform:translateY(-3px)}.dark-card:hover:before{background:var(--mint)}
    .arrow{color:var(--mint);font-size:22px}
    .scene-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .scene-main{background:#29262b;min-height:300px;padding:32px;position:relative;overflow:hidden}
    .scene-main:before{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(166,232,198,.25);border-radius:50%;right:-60px;top:35px}
    .scene-main p,.scene-side p{color:#b9b2b9;max-width:530px}
    .scene-side{background:#ede8eb;color:#29262b;padding:28px}.scene-side p{color:#756d75}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
    .step{border-top:2px solid var(--mint);padding-top:16px}.step b{font:25px monospace;color:var(--plum);display:block}
    .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.quote{padding:26px;background:#fff;border-left:4px solid var(--plum);box-shadow:var(--shadow)}.quote p{color:#5d565d;margin:0 0 15px}
    .info-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px}.info-list{border-top:1px solid var(--soft-line)}.info-item{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--soft-line);color:#373238}.info-item:hover{color:var(--plum)}.info-item small{color:#8d858d;white-space:nowrap}.featured{background:#242126;color:#fff;padding:28px}.featured p{color:#b9b2b9}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.faq-item{border-bottom:1px solid var(--soft-line);background:#fff}.faq-q{width:100%;min-height:58px;border:0;background:none;text-align:left;padding:16px 18px;display:flex;justify-content:space-between;font-weight:700;color:#28242a}.faq-a{display:none;padding:0 18px 18px;color:#665e66}.faq-item.open{background:#eee6eb}.faq-item.open .faq-a{display:block}.faq-item.open .plus{transform:rotate(45deg);color:var(--plum)}
    .cta-panel{background:#1b1a1d;padding:46px;display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center;border:1px solid var(--line)}.cta-panel h2{color:#fff}.cta-panel p{color:#b9b2b9}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:13px;color:#d8d1d8}.field input,.field select{background:#f4f1f2;border:2px solid transparent;border-radius:8px;padding:11px;color:#2b272c}.field input:focus,.field select:focus{border-color:var(--mint);outline:0}.check{font-size:12px;color:#aaa4aa;display:flex;gap:8px;margin:15px 0}.check input{accent-color:var(--plum)}
    footer{background:#0d0d0f;padding:55px 0 22px;color:#aaa4aa}.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px}.footer-title{color:#fff;font-weight:700;margin-bottom:14px}.footer-links{display:grid;gap:8px;font-size:13px}.footer-links a:hover{color:var(--mint);text-decoration:underline;text-underline-offset:4px}.copyright{border-top:1px solid var(--line);margin-top:35px;padding-top:18px;font-size:12px;display:flex;justify-content:space-between;gap:20px}
    @media(max-width:1024px){.nav-links{display:none}.menu-btn{display:block}.hero-grid{grid-template-columns:1fr 1fr;gap:25px}.visual-stage{padding-left:15px}.matrix{grid-template-columns:repeat(2,1fr)}.feature-card{grid-column:span 2}.footer-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:768px){.container{width:min(100% - 32px,640px)}.nav-shell{height:64px}.brand{min-width:0}.brand small{display:none}.brand strong{font-size:14px}.nav-side .search-box,.nav-side .age-badge{display:none}.hero,.hero-grid{min-height:auto}.hero-grid{display:block;padding:70px 0 55px}.visual-stage{height:360px;margin-top:45px;border-left:0;padding-left:0}.frame{width:82%;height:240px}.data-chip{transform:scale(.85)}.section-light,.section-dark{padding:62px 0}.section-head{display:block}.section-head p{margin-top:12px}.metrics{grid-template-columns:1fr 1fr}.metric{padding:20px 16px;min-height:125px}.metric b{font-size:32px}.scene-wrap,.info-grid,.cta-panel{grid-template-columns:1fr}.steps,.quote-grid,.faq-grid{grid-template-columns:1fr}.cta-panel{padding:28px;gap:28px}}
    @media(max-width:520px){h1{font-size:36px}.hero-actions .btn{width:100%}.metrics{grid-template-columns:1fr}.matrix{grid-template-columns:1fr}.feature-card{grid-column:auto}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.copyright{display:block}.copyright span{display:block;margin-top:8px}}

/* roulang page: category2 */
:root{
 --ink:#121214;--panel:#1b1a1d;--panel-2:#242126;--paper:#f4f1f2;
 --plum:#7a365f;--plum-dark:#5e2849;--mint:#a6e8c6;--orange:#d87545;
 --muted:#aaa4aa;--line:rgba(255,255,255,.12);--soft-line:#ddd7db;
 --shadow:0 12px 28px rgba(18,18,20,.12);--radius:16px;
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(1280px,calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(18,18,20,.97);border-bottom:1px solid transparent;transition:.25s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.nav-shell{height:72px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand-mark{width:34px;height:34px;border:2px solid var(--mint);display:grid;place-items:center;color:var(--mint);font-weight:800;font-family:monospace;letter-spacing:-.08em}
.brand strong{font-size:16px;letter-spacing:.04em}
.brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a,.mobile-link{padding:8px 13px;color:#c7c1c7;border-radius:8px;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:var(--plum)}
.nav-side{display:flex;align-items:center;gap:10px}
.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 11px;color:var(--muted);transition:.25s}
.search-box input{width:0;opacity:0;background:none;border:0;outline:0;color:#fff;transition:.25s}
.search-box:focus-within{border-color:rgba(166,232,198,.65)}
.search-box:focus-within input{width:120px;opacity:1}
.age-badge,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:12px}
.age-badge{color:#f2b394;border:1px solid rgba(216,117,69,.55)}
.tag{background:#eee8eb;color:#5e2849}
.tag.dark{background:rgba(166,232,198,.12);color:var(--mint);border:1px solid rgba(166,232,198,.3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;border:1px solid transparent;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn:focus,.nav-links a:focus,input:focus,select:focus,button:focus{outline:2px solid var(--mint);outline-offset:3px}
.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:var(--plum-dark)}
.btn-outline{border-color:rgba(255,255,255,.3);color:#fff}
.btn-outline:hover{border-color:var(--mint);color:var(--mint)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:8px;padding:8px 11px}
.mobile-menu{display:none;padding:12px 0 22px;border-top:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-link{display:block;margin:3px 0}
.section-light{background:var(--paper);color:#211e22;padding:88px 0}
.section-dark{background:var(--panel);padding:88px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.section-head h2{font-size:32px;line-height:1.25;margin:8px 0 0;color:inherit}
.section-head p{max-width:570px;color:#706970;margin:0}
.section-dark .section-head h2{color:#fff}
.section-dark .section-head p{color:#afa8af}
.eyebrow{color:var(--mint);font:12px/1.2 monospace;letter-spacing:.12em;text-transform:uppercase}
.breadcrumb{display:flex;gap:8px;align-items:center;color:#aaa4aa;font-size:13px;margin-bottom:18px}
.breadcrumb span{color:var(--mint)}
.hero-special{background:var(--panel);position:relative;overflow:hidden}
.hero-special:before{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(166,232,198,.25) 80px,transparent 81px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(166,232,198,.14) 80px,transparent 81px)}
.hero-special:after{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(166,232,198,.24);border-radius:50%;right:-250px;top:-255px}
.special-grid{position:relative;z-index:1;display:grid;grid-template-columns:.72fr 1.28fr;gap:54px;align-items:center;min-height:380px;padding:54px 0}
.hero-special h1{font-size:48px;line-height:1.18;letter-spacing:-.045em;margin:10px 0 18px;color:#fff}
.hero-copy{max-width:500px;color:#c8c1c8;font-size:16px;margin:0}
.filter-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.filter-pills a{padding:6px 11px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#d4cdd3;transition:.2s}
.filter-pills a:hover{border-color:var(--mint);color:var(--mint)}
.preview-stack{height:260px;position:relative;border-left:1px solid var(--line)}
.preview-card{position:absolute;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 28px rgba(0,0,0,.25);overflow:hidden}
.preview-card:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 45%,rgba(166,232,198,.12));pointer-events:none}
.preview-card .frame-no{font:700 12px monospace;letter-spacing:.13em;color:var(--mint)}
.preview-card strong{display:block;font-size:18px;line-height:1.35;margin:28px 0 5px}
.preview-card small{color:#bcb3ba}
.preview-one{background:#29262b;width:58%;height:212px;left:42px;top:23px;padding:24px}
.preview-two{background:var(--plum);width:42%;height:164px;right:14px;top:0;padding:21px}
.preview-three{background:#e9e3e6;color:#211e22;width:43%;height:120px;right:48px;bottom:0;padding:16px}
.preview-three .frame-no{color:var(--plum)}
.preview-three small{color:#6f666d}
.status-strip{background:#242126;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.status-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr .8fr;gap:0}
.status-item{padding:17px 22px;border-right:1px solid var(--line)}
.status-item:last-child{border:0}
.status-item strong{display:block;color:#fff;font:700 21px/1.1 monospace}
.status-item span{display:block;color:#aaa4aa;font-size:12px;margin-top:5px}
.status-item:first-child strong{font-family:inherit;font-size:14px;color:var(--mint);letter-spacing:.08em}
.topic-list{position:relative}
.topic-list:before{content:"";position:absolute;left:37px;top:22px;bottom:22px;width:1px;background:#cfc6cc}
.topic-row{display:grid;grid-template-columns:76px minmax(0,1fr) 214px;gap:22px;align-items:center;padding:25px 0;border-bottom:1px solid var(--soft-line);position:relative}
.topic-no{position:relative;z-index:1;font:700 27px monospace;color:var(--plum);display:flex;flex-direction:column;align-items:center;gap:5px}
.topic-no i{display:block;width:10px;height:10px;background:var(--mint);border:2px solid var(--paper);border-radius:50%;box-shadow:0 0 0 2px var(--plum)}
.topic-body h3{font-size:20px;line-height:1.35;margin:0 0 8px;color:#242026}
.topic-body p{margin:8px 0 10px;color:#6d666c;max-width:630px}
.meta-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#847c83;font-size:12px}
.meta-line .tag{padding:2px 8px}
.topic-art{height:124px;background:#29262b;position:relative;overflow:hidden;border-radius:12px;border:1px solid rgba(18,18,20,.15);padding:14px;display:flex;flex-direction:column;justify-content:space-between}
.topic-art:before{content:"";position:absolute;width:154px;height:154px;border:1px solid rgba(166,232,198,.38);border-radius:50%;right:-54px;top:-35px}
.topic-art:after{content:"";position:absolute;left:0;right:0;bottom:19px;height:1px;background:rgba(166,232,198,.45)}
.topic-art span{position:relative;z-index:1;font:12px monospace;color:var(--mint)}
.topic-art b{position:relative;z-index:1;color:#fff;font-size:13px;letter-spacing:.08em}
.enter-link{display:inline-flex;align-items:center;gap:7px;color:var(--plum);font-weight:700;font-size:13px;transition:.2s}
.enter-link:hover{color:var(--plum-dark);text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:4px}
.enter-link:hover em{transform:translateX(4px)}
.enter-link em{font-style:normal;font-size:18px;transition:.2s}
.feature-break{margin:31px 0;background:#242126;color:#fff;display:grid;grid-template-columns:1.35fr .65fr;min-height:190px;overflow:hidden;position:relative}
.feature-break:before{content:"";position:absolute;width:330px;height:330px;border:1px solid rgba(166,232,198,.22);border-radius:50%;right:12%;top:-160px}
.feature-break-copy{padding:32px 36px;position:relative;z-index:1}
.feature-break-copy h3{font-size:25px;line-height:1.3;margin:9px 0}
.feature-break-copy p{color:#c3bbc2;max-width:620px;margin:0 0 16px}
.feature-score{background:var(--plum);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.feature-score:after{content:"SELECT";font:700 52px monospace;color:rgba(255,255,255,.09);position:absolute;transform:rotate(-90deg)}
.feature-score div{position:relative;z-index:1;text-align:center}
.feature-score b{display:block;font:700 43px/1 monospace;color:var(--mint)}
.feature-score span{font-size:12px;color:#f3dfe9;letter-spacing:.1em}
.notice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.notice-card{border:1px solid var(--soft-line);background:#fff;padding:29px;position:relative;overflow:hidden;transition:.2s}
.notice-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--plum)}
.notice-card:nth-child(2):before{background:var(--mint)}
.notice-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.notice-icon{width:37px;height:37px;display:grid;place-items:center;background:#eee6eb;color:var(--plum);font:700 14px monospace;margin-bottom:18px}
.notice-card h3{font-size:20px;margin:0 0 8px;color:#28242a}
.notice-card p{margin:0;color:#6d666c}
.preference-section{background:var(--panel);padding:84px 0}
.cta-panel{background:#242126;border:1px solid var(--line);padding:44px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;box-shadow:0 16px 35px rgba(0,0,0,.16)}
.cta-panel h2{font-size:32px;line-height:1.3;margin:10px 0 14px;color:#fff}
.cta-panel p{color:#b9b1b8;margin:0 0 20px}
.form-note{font-size:12px;color:#dca27f;border-left:2px solid var(--orange);padding-left:11px}
.preference-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:13px;font-weight:700;color:#eae4e8}
.field{width:100%;border:1px solid rgba(255,255,255,.18);background:#f7f3f4;color:#272328;border-radius:8px;padding:11px 12px;outline:0}
.field:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(166,232,198,.16)}
.check-row{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;color:#b9b1b8;font-size:12px;line-height:1.55}
.check-row input{margin-top:3px;accent-color:var(--plum)}
.form-message{display:none;grid-column:1/-1;color:var(--mint);font-size:13px;padding:9px 11px;background:rgba(166,232,198,.1);border-left:2px solid var(--mint)}
footer{background:#121214;border-top:1px solid var(--line);padding:58px 0 22px;color:#aaa4aa}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.footer-title{font-weight:700;color:#fff;margin-bottom:12px}
.footer-grid p{margin:0;max-width:300px}
.footer-links{display:flex;flex-direction:column;gap:7px;font-size:13px}
.footer-links a:hover{color:var(--mint);text-decoration:underline;text-underline-offset:4px}
.copyright{border-top:1px solid var(--line);margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#817a81}
@media(max-width:1024px){
 .nav-links{display:none}.menu-btn{display:block}.brand{min-width:0}.nav-side .age-badge{display:none}
 .special-grid{grid-template-columns:1fr 1fr;gap:26px}.hero-special h1{font-size:42px}
 .topic-row{grid-template-columns:65px minmax(0,1fr) 180px}.topic-list:before{left:32px}
}
@media(max-width:768px){
 .container{width:min(100% - 32px,1280px)}.nav-shell{height:64px}.nav-side .btn{display:none}.search-box input{width:78px;opacity:1}
 .special-grid{grid-template-columns:1fr;min-height:unset;padding:48px 0 38px;gap:26px}.hero-special h1{font-size:36px}.preview-stack{height:220px;border-left:0;border-top:1px solid var(--line)}
 .preview-one{left:8px;top:20px}.preview-two{right:2px}.preview-three{right:30px}
 .status-grid{grid-template-columns:1fr 1fr}.status-item:nth-child(2){border-right:0}.status-item{padding:14px 16px;border-bottom:1px solid var(--line)}
 .section-light,.section-dark{padding:62px 0}.section-head{display:block;margin-bottom:26px}.section-head h2{font-size:28px}.section-head p{margin-top:12px}
 .topic-list:before{display:none}.topic-row{grid-template-columns:52px minmax(0,1fr);gap:13px;padding:22px 0}.topic-art{grid-column:2;height:112px}.topic-no{align-self:start;align-items:flex-start}.topic-no i{margin-left:5px}
 .feature-break{grid-template-columns:1fr}.feature-break-copy{padding:29px}.feature-score{min-height:110px}
 .notice-grid,.cta-panel{grid-template-columns:1fr}.cta-panel{gap:24px;padding:28px}.cta-panel h2{font-size:28px}
 .footer-grid{grid-template-columns:1fr 1fr}.copyright{flex-direction:column}
}
@media(max-width:520px){
 body{font-size:14px}.brand strong{font-size:14px}.brand small{display:none}.search-box{padding:7px}.search-box input{width:55px}.special-grid{padding-top:36px}.hero-special h1{font-size:32px}
 .preview-one{width:63%;padding:16px}.preview-two{width:45%;padding:16px}.preview-card strong{font-size:15px}.preview-three{width:47%;right:10px}
 .status-grid{grid-template-columns:1fr}.status-item,.status-item:nth-child(2){border-right:0}.status-item:last-child{border-bottom:0}
 .topic-body h3{font-size:18px}.topic-row{grid-template-columns:42px minmax(0,1fr)}.topic-no{font-size:21px}
 .feature-break-copy h3{font-size:22px}.notice-card{padding:23px}.preference-form{grid-template-columns:1fr}.form-group.full{grid-column:auto}
 .footer-grid{grid-template-columns:1fr;gap:24px}.footer-grid p{max-width:100%}
}

/* roulang page: category1 */
:root{
 --ink:#121214;--panel:#1b1a1d;--panel-2:#242126;--paper:#f4f1f2;
 --plum:#7a365f;--plum-dark:#5e2849;--mint:#a6e8c6;--orange:#d87545;
 --muted:#aaa4aa;--line:rgba(255,255,255,.12);--soft-line:#ddd7db;
 --shadow:0 12px 28px rgba(18,18,20,.12);--radius:16px;
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
.container{width:min(1280px,calc(100% - 48px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(18,18,20,.97);border-bottom:1px solid transparent;transition:.25s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.nav-shell{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand-mark{width:34px;height:34px;border:2px solid var(--mint);display:grid;place-items:center;color:var(--mint);font-weight:800;font-family:monospace}
.brand strong{font-size:16px;letter-spacing:.04em}
.brand small{display:block;color:var(--muted);font-size:11px;line-height:1.2}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a,.mobile-link{padding:8px 13px;color:#c7c1c7;border-radius:8px;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:var(--plum)}
.nav-side{display:flex;align-items:center;gap:10px}
.search-box{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 11px;color:var(--muted);transition:.25s}
.search-box input{width:0;opacity:0;background:none;border:0;outline:0;color:#fff;transition:.25s}
.search-box:focus-within input{width:120px;opacity:1}
.age-badge,.tag{display:inline-flex;align-items:center;border-radius:999px;padding:3px 9px;font-size:12px}
.age-badge{color:#f2b394;border:1px solid rgba(216,117,69,.55)}
.tag{background:#eee8eb;color:#5e2849}
.tag.dark{background:rgba(166,232,198,.12);color:var(--mint);border:1px solid rgba(166,232,198,.3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;border:1px solid transparent;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn:focus,.nav-links a:focus,input:focus,select:focus,button:focus{outline:2px solid var(--mint);outline-offset:3px}
.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:var(--plum-dark)}
.btn-outline{border-color:rgba(255,255,255,.3);color:#fff}
.btn-outline:hover{border-color:var(--mint);color:var(--mint)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:#fff;border-radius:8px;padding:8px 11px}
.mobile-menu{display:none;padding:12px 0 22px;border-top:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-link{display:block;margin:3px 0}
.page-hero{background:var(--panel);position:relative;overflow:hidden;min-height:360px}
.page-hero:before{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(166,232,198,.17);border-radius:50%;right:-120px;top:-200px}
.page-hero:after{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 71px,rgba(166,232,198,.32) 72px,transparent 73px),repeating-linear-gradient(0deg,transparent 0 71px,rgba(166,232,198,.16) 72px,transparent 73px)}
.hero-inner{min-height:360px;position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:54px}
.breadcrumb{display:flex;gap:8px;align-items:center;color:#aaa4aa;font-size:13px;margin-bottom:13px}
.breadcrumb span{color:var(--mint)}
.eyebrow{color:var(--mint);font:12px/1.2 monospace;letter-spacing:.12em}
.hero-title{font-size:clamp(32px,4vw,52px);line-height:1.2;letter-spacing:-.04em;margin:12px 0 15px;color:#fff;font-weight:800}
.hero-copy{max-width:650px;color:#c9c3c9;font-size:16px;margin:0}
.hero-side{border-left:1px solid var(--line);padding-left:42px;min-height:234px;display:flex;align-items:center}
.score-panel{width:100%;background:#242126;border:1px solid rgba(255,255,255,.13);box-shadow:0 14px 30px rgba(0,0,0,.18);padding:22px;position:relative}
.score-panel:before{content:"";position:absolute;left:0;top:0;width:68px;height:3px;background:var(--mint)}
.score-top{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:13px}
.score-label{font:12px monospace;color:var(--mint);letter-spacing:.12em}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:18px}
.score-num{font:28px monospace;color:#fff;display:block;line-height:1}
.score-grid small{font-size:11px;color:#aaa4aa}
.section-light{background:var(--paper);color:#211e22;padding:84px 0}
.section-dark{background:var(--panel);padding:84px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:30px}
.section-head h2{font-size:clamp(27px,3vw,36px);line-height:1.3;margin:0;letter-spacing:-.03em}
.section-head p{max-width:590px;color:#706970;margin:0}
.section-dark .section-head h2{color:#fff}
.section-dark .section-head p{color:#b9b2b9}
.filter-console{background:#201e22;border:1px solid rgba(255,255,255,.13);padding:18px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:10px;box-shadow:var(--shadow)}
.filter-console input,.filter-console select{width:100%;min-height:46px;border:1px solid rgba(255,255,255,.16);background:#2a272d;color:#f4f1f2;border-radius:8px;padding:0 13px;outline:none}
.filter-console select option{background:#242126}
.filter-console input::placeholder{color:#aaa4aa}
.filter-console input:focus,.filter-console select:focus{border-color:var(--mint)}
.filter-btn{min-height:46px;white-space:nowrap}
.recommend-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding:16px 0;border-top:1px solid var(--soft-line);border-bottom:1px solid var(--soft-line)}
.recommend-bar strong{font-size:13px;color:#514b51;margin-right:4px}
.index-pill{display:inline-flex;padding:6px 11px;border-radius:999px;background:#fff;border:1px solid var(--soft-line);font-size:13px;color:#4a434a;transition:.2s}
.index-pill:hover{background:var(--plum);color:#fff;border-color:var(--plum);transform:translateY(-1px)}
.category-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.category-card{background:#fff;border:1px solid var(--soft-line);min-height:228px;padding:20px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:.22s;box-shadow:0 4px 12px rgba(18,18,20,.04)}
.category-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:transparent;transition:.2s}
.category-card:hover{transform:translateY(-4px);border-color:rgba(122,54,95,.55);box-shadow:var(--shadow)}
.category-card:hover:before{background:var(--mint)}
.category-card.featured-card{grid-column:span 6;grid-row:span 2;min-height:472px;background:#28252a;color:#fff}
.category-card.standard{grid-column:span 3}
.category-card.wide{grid-column:span 6}
.visual-cover{position:absolute;inset:0 0 auto;height:112px;background:#302d33;overflow:hidden}
.visual-cover:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(166,232,198,.38);border-radius:50%;right:-38px;top:-70px}
.visual-cover:after{content:"";position:absolute;left:18px;bottom:17px;width:64%;height:4px;background:repeating-linear-gradient(90deg,var(--mint) 0 13px,transparent 13px 21px);opacity:.72}
.featured-card .visual-cover{height:100%;opacity:.72;background:linear-gradient(145deg,#352a33,#161619)}
.featured-card .visual-cover:before{width:340px;height:340px;right:-42px;top:72px;border-color:rgba(166,232,198,.38)}
.card-code{position:absolute;top:20px;left:20px;font:12px monospace;letter-spacing:.1em;color:var(--mint);z-index:1}
.card-content{position:relative;z-index:2;margin-top:102px}
.featured-card .card-content{margin-top:auto}
.card-content h3{font-size:20px;line-height:1.35;margin:0 0 7px}
.card-content p{margin:0;color:#706970;font-size:14px;line-height:1.7}
.featured-card .card-content p{color:#d0c9d0;max-width:420px}
.card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:17px;padding-top:12px;border-top:1px solid var(--soft-line);font-size:12px;color:#837b83}
.featured-card .card-meta{border-color:var(--line);color:#bdb5bd}
.card-arrow{font-size:20px;color:var(--plum);transition:.2s}
.featured-card .card-arrow{color:var(--mint)}
.category-card:hover .card-arrow{transform:translateX(4px)}
.tag-cloud{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.cloud-tag{display:inline-flex;align-items:center;padding:8px 13px;border-radius:999px;border:1px solid var(--soft-line);background:#fff;color:#554e55;font-size:14px;transition:.2s}
.cloud-tag:hover{border-color:var(--plum);color:var(--plum);transform:translateY(-2px)}
.cloud-tag.mint{border-color:rgba(81,160,116,.55);background:#effbf4;color:#32734f}
.cloud-tag.plum{border-color:rgba(122,54,95,.32);background:#f4ebf0;color:var(--plum)}
.reading-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px}
.notice-card{background:#fff;padding:27px;border-left:4px solid var(--plum);box-shadow:0 5px 16px rgba(18,18,20,.05)}
.notice-card h3{margin:0 0 12px;font-size:21px}
.notice-card p{color:#676068;margin:0 0 14px}
.notice-list{margin:0;padding:0;list-style:none}
.notice-list li{padding:10px 0;border-top:1px solid var(--soft-line);display:flex;gap:10px;color:#514b51}
.notice-list li:before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--mint);margin-top:9px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq-item{border-bottom:1px solid var(--soft-line);background:#fff}
.faq-q{width:100%;min-height:60px;border:0;background:none;text-align:left;padding:15px 17px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-weight:700;color:#28242a}
.faq-q .num{font:12px monospace;color:var(--plum);margin-right:9px}
.faq-q .plus{font-size:22px;line-height:1;color:var(--plum);transition:.2s}
.faq-a{display:none;padding:0 18px 18px;color:#665e66;font-size:14px}
.faq-item.open{background:#eee6eb}
.faq-item.open .faq-a{display:block}
.faq-item.open .plus{transform:rotate(45deg)}
.cta-panel{background:#1b1a1d;padding:42px;display:grid;grid-template-columns:1fr 1fr;gap:42px;border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cta-panel h2{font-size:32px;line-height:1.3;margin:8px 0 13px;color:#fff}
.cta-panel p{color:#b9b2b9;margin:0 0 17px}
.form-note{display:flex;gap:9px;color:#e7a17c;font-size:13px}
.simple-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-self:center}
.simple-form input{min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.18);background:#f4f1f2;color:#211e22;border-radius:9px;outline:none}
.simple-form input:focus{border-color:var(--mint);box-shadow:0 0 0 2px rgba(166,232,198,.18)}
.form-status{display:none;grid-column:1/-1;color:var(--mint);font-size:13px}
.form-status.show{display:block}
footer{background:#121214;border-top:1px solid var(--line);padding:55px 0 20px;color:#c4bdc4}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.footer-title{font-weight:800;color:#fff;margin-bottom:12px}
.footer-grid p{margin:0;color:#a9a2a9;max-width:295px;line-height:1.7}
.footer-links{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#aaa4aa}
.footer-links a{transition:.2s}
.footer-links a:hover{color:var(--mint);text-decoration:underline;text-underline-offset:4px}
.copyright{margin-top:38px;padding-top:17px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;color:#817a81;font-size:12px}
@media(max-width:1024px){
 .nav-links{display:none}.menu-btn{display:block}.nav-side .search-box,.nav-side .age-badge{display:none}
 .hero-inner{grid-template-columns:1fr;gap:10px;padding:45px 0}.hero-side{padding:0;border:0;min-height:auto;padding-bottom:42px}
 .category-card.standard{grid-column:span 4}.filter-console{grid-template-columns:1fr 1fr 1fr}
 .filter-console .search-field{grid-column:span 3}.reading-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}
}
@media(max-width:768px){
 .container{width:min(100% - 32px,1280px)}.nav-shell{height:64px}.brand{min-width:0}.brand small{display:none}.brand strong{font-size:14px}
 .page-hero,.hero-inner{min-height:auto}.hero-title{font-size:35px}.hero-copy{font-size:15px}
 .section-light,.section-dark{padding:58px 0}.section-head{display:block;margin-bottom:24px}.section-head h2{margin-bottom:10px}
 .category-grid{grid-template-columns:repeat(2,1fr)}.category-card.featured-card,.category-card.standard,.category-card.wide{grid-column:span 1;grid-row:auto;min-height:250px}
 .category-card.featured-card{min-height:330px}.featured-card .visual-cover{height:100%}
 .filter-console{grid-template-columns:1fr 1fr}.filter-console .search-field{grid-column:span 2}.filter-console .filter-btn{grid-column:span 2}
 .faq-grid,.cta-panel{grid-template-columns:1fr}.cta-panel{padding:29px;gap:22px}.simple-form{grid-template-columns:1fr}.simple-form .btn{width:100%}
 .footer-grid{grid-template-columns:1fr 1fr}.copyright{flex-direction:column;gap:4px}
}
@media(max-width:520px){
 .nav-side .btn{display:none}.brand-mark{width:30px;height:30px}.page-hero{padding:4px 0}.hero-title{font-size:31px}
 .score-grid{gap:6px}.score-num{font-size:23px}.score-panel{padding:18px}.category-grid{grid-template-columns:1fr}.category-card.featured-card,.category-card.standard,.category-card.wide{grid-column:span 1}
 .filter-console{grid-template-columns:1fr}.filter-console .search-field,.filter-console .filter-btn{grid-column:span 1}
 .recommend-bar{gap:8px}.index-pill{font-size:12px;padding:5px 9px}.faq-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.copyright{font-size:11px}
}