/* roulang page: index */
:root{
      --bg:#120d18;
      --bg-soft:#1a1222;
      --panel:#21162b;
      --panel-deep:#17101e;
      --panel-high:#2b1c38;
      --line:rgba(222,177,241,.17);
      --line-strong:rgba(230,130,171,.52);
      --text:#f7f0f7;
      --muted:#c5b8c9;
      --dim:#907f96;
      --plum:#9b4d9e;
      --berry:#c94976;
      --coral:#ed7567;
      --mint:#7fd8c6;
      --focus:#f5ad72;
      --radius:18px;
      --radius-sm:12px;
      --shadow:0 20px 50px rgba(4,1,7,.38);
      --container:1200px;
      --transition:190ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;color:var(--text);background:var(--bg);
      font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
      line-height:1.78;letter-spacing:.01em;
      overflow-x:hidden;
    }
    body:before{
      content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
      background:
        radial-gradient(circle at 83% 9%,rgba(180,62,127,.16),transparent 22rem),
        radial-gradient(circle at 9% 55%,rgba(116,61,153,.13),transparent 28rem),
        linear-gradient(135deg,rgba(255,255,255,.018) 1px,transparent 1px);
      background-size:auto,auto,28px 28px;
    }
    body:after{
      content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
      background:linear-gradient(100deg,transparent 0 44%,rgba(192,120,210,.03) 44.1% 44.3%,transparent 44.4% 100%);
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    ::selection{background:var(--berry);color:#fff}
    .container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
    .skip{position:absolute;left:-9999px;top:8px;background:var(--focus);color:#1a0c14;padding:8px 14px;border-radius:8px;z-index:99}
    .skip:focus{left:12px}
    .site-header{
      position:sticky;top:0;z-index:40;background:rgba(18,13,24,.94);
      border-bottom:1px solid rgba(222,177,241,.11);backdrop-filter:blur(14px);
    }
    .nav-wrap{height:76px;display:flex;align-items:center;gap:28px}
    .brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
    .brand-mark{
      width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
      background:linear-gradient(135deg,var(--coral),var(--plum));box-shadow:0 0 25px rgba(201,73,118,.33);
      font-size:18px;color:#fff;
    }
    .nav-links{display:flex;align-items:center;gap:4px;margin:auto}
    .nav-link{
      display:inline-flex;min-height:44px;align-items:center;padding:0 14px;border-radius:10px;
      color:var(--muted);font-size:14px;transition:var(--transition);position:relative;
    }
    .nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:#fff;background:rgba(201,73,118,.13)}
    .nav-link.active:after{content:"";position:absolute;bottom:4px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:9px}
    .nav-actions{display:flex;gap:10px;align-items:center}
    .search-button,.menu-button{
      min-width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--panel-deep);color:var(--muted);
      transition:var(--transition);display:grid;place-items:center;
    }
    .search-button:hover,.menu-button:hover{border-color:var(--line-strong);color:#fff;background:var(--panel)}
    .menu-button{display:none}
    .nav-cta,.btn-primary{
      min-height:44px;border:1px solid transparent;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;
      background:linear-gradient(100deg,var(--berry),var(--coral));color:#fff;font-weight:700;font-size:14px;
      box-shadow:0 9px 25px rgba(201,73,118,.22);transition:var(--transition);
    }
    .nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.14);box-shadow:0 14px 29px rgba(201,73,118,.34)}
    .mega{position:relative}
    .mega-panel{
      display:none;position:absolute;top:52px;left:-100px;width:560px;padding:16px;border:1px solid var(--line);
      border-radius:var(--radius);background:#21162beF;box-shadow:var(--shadow);backdrop-filter:blur(16px);
    }
    .mega:hover .mega-panel,.mega:focus-within .mega-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .mega-card{display:block;padding:16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid transparent;transition:var(--transition)}
    .mega-card:hover{background:rgba(201,73,118,.1);border-color:var(--line-strong);transform:translateY(-2px)}
    .mega-card strong,.mega-card span{display:block}
    .mega-card strong{font-size:14px}
    .mega-card span{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
    .mobile-menu{display:none}
    .hero{padding:76px 0 58px;position:relative}
    .hero-shell{
      position:relative;overflow:hidden;padding:48px;border:1px solid var(--line);border-radius:24px;background:
      linear-gradient(115deg,rgba(48,29,62,.96),rgba(23,15,31,.96));
      box-shadow:var(--shadow);
    }
    .hero-shell:before{
      content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(237,117,103,.16);border-radius:50%;
      right:-210px;top:-280px;box-shadow:0 0 0 32px rgba(155,77,158,.035),0 0 0 72px rgba(155,77,158,.025);
    }
    .hero-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}
    .eyebrow,.badge,.status{
      display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 10px;font-size:12px;line-height:1.35;
      border:1px solid rgba(127,216,198,.28);color:var(--mint);background:rgba(127,216,198,.07);
    }
    .pulse{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(127,216,198,.09)}
    .hero-status{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:end;position:relative}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(34px,5vw,66px);line-height:1.12;letter-spacing:-.045em;margin-bottom:20px;max-width:760px}
    h2{font-size:clamp(25px,3.1vw,40px);line-height:1.25;letter-spacing:-.03em;margin-bottom:14px}
    h3{font-size:18px;line-height:1.4;margin-bottom:8px}
    .hero-copy{font-size:16px;color:var(--muted);max-width:700px;margin-bottom:24px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:11px}
    .btn-secondary{
      min-height:44px;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;
      border:1px solid var(--line-strong);color:#f4dce9;background:rgba(255,255,255,.025);font-weight:700;font-size:14px;transition:var(--transition);
    }
    .btn-secondary:hover{background:rgba(201,73,118,.12);border-color:var(--coral);transform:translateY(-2px)}
    .btn-text{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-weight:700;font-size:14px;padding:10px 2px}
    .btn-text:hover{color:#c9fff4;gap:8px}
    .hero-matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-self:stretch}
    .matrix-item{
      min-height:102px;padding:14px;border:1px solid var(--line);border-radius:15px;background:#1a1122;
      display:flex;flex-direction:column;justify-content:space-between;transition:var(--transition);
    }
    .matrix-item:hover{transform:translateY(-3px);border-color:rgba(237,117,103,.52);background:#26172d}
    .matrix-item strong{font-size:13px;line-height:1.42}
    .matrix-item span{font-size:11px;color:var(--dim)}
    .matrix-icon{font-size:22px;color:#ee9cba}
    .matrix-wide{grid-column:span 2;background:linear-gradient(140deg,#321d3a,#25162d)}
    .matrix-wide strong{font-size:17px}
    .section{padding:76px 0}
    .section-head{max-width:760px;margin-bottom:30px}
    .section-head p{color:var(--muted);font-size:15px;margin:0}
    .section-kicker{color:#ee9cba;font-size:12px;font-weight:800;letter-spacing:.14em;margin-bottom:9px}
    .update-layout{display:grid;grid-template-columns:7fr 5fr;gap:22px}
    .timeline{border:1px solid var(--line);border-radius:var(--radius);padding:9px;background:var(--panel-deep)}
    .timeline-item{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;padding:17px;border-radius:13px;transition:var(--transition)}
    .timeline-item:not(:last-child){border-bottom:1px solid rgba(222,177,241,.09)}
    .timeline-item:hover{background:var(--panel-high)}
    .time-node{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(237,117,103,.5);color:#ffb3a7;font-size:12px;font-weight:800}
    .timeline-item p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
    .timeline-link{color:var(--mint);font-size:13px;font-weight:700;white-space:nowrap}
    .limit-panel{border:1px solid rgba(237,117,103,.44);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;background:linear-gradient(155deg,#3a1d34,#21142a)}
    .limit-panel:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,197,157,.25);border-radius:50%;right:-78px;bottom:-105px}
    .limit-panel h3{font-size:24px;margin-top:14px}
    .limit-panel p{color:#dfc8d6;font-size:14px;position:relative;z-index:1}
    .countdown{display:flex;gap:8px;margin:20px 0}
    .count-unit{padding:8px 10px;border-radius:9px;background:rgba(13,7,17,.45);border:1px solid rgba(255,255,255,.12);text-align:center;min-width:53px}
    .count-unit b{display:block;line-height:1.1;font-size:20px;color:#fff}
    .count-unit span{font-size:10px;color:#d9b8c9}
    .quick-grid{display:grid;grid-template-columns:4fr 8fr;gap:22px}
    .quick-intro{padding:28px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line)}
    .quick-intro p{color:var(--muted);font-size:14px;margin-bottom:20px}
    .answer-list{display:grid;gap:10px}
    .answer{padding:18px 20px;border-radius:14px;background:rgba(38,24,48,.77);border-left:3px solid var(--plum);transition:var(--transition)}
    .answer:hover{border-left-color:var(--coral);background:var(--panel-high)}
    .answer strong{display:block;font-size:15px;margin-bottom:4px}
    .answer span{display:block;color:var(--muted);font-size:13px;line-height:1.7}
    .directory{padding:76px 0;background:linear-gradient(180deg,transparent,rgba(77,42,91,.13),transparent)}
    .directory-grid{display:grid;grid-template-columns:5fr 7fr;gap:22px;align-items:stretch}
    .directory-feature{padding:32px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(145deg,#2a1935,#1a1121);position:relative;overflow:hidden}
    .directory-feature:before{content:"";position:absolute;inset:14px;border:1px dashed rgba(237,117,103,.25);border-radius:13px;pointer-events:none}
    .directory-feature > *{position:relative}
    .directory-feature p{color:var(--muted);font-size:14px;max-width:390px}
    .catalog-list{display:grid;gap:12px}
    .catalog-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:19px;border:1px solid var(--line);border-radius:15px;background:var(--panel-deep);transition:var(--transition)}
    .catalog-item:hover{transform:translateX(4px);border-color:var(--line-strong);background:var(--panel)}
    .catalog-num{color:#e890b1;font-weight:800;font-size:13px}
    .catalog-item p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
    .catalog-arrow{color:var(--mint);font-size:20px}
    .split-title{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}
    .split-title .section-head{margin:0}
    .news-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
    .news-list{border-top:1px solid var(--line)}
    .news-row{display:grid;grid-template-columns:100px 1fr auto;gap:18px;padding:19px 0;border-bottom:1px solid var(--line);align-items:center;transition:var(--transition)}
    .news-row:hover{padding-left:10px;background:linear-gradient(90deg,rgba(201,73,118,.08),transparent)}
    .news-tag{font-size:12px;color:#f0b0c7;border:1px solid rgba(201,73,118,.34);border-radius:999px;padding:4px 8px;text-align:center}
    .news-row strong{font-size:15px}
    .news-row p{margin:3px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
    .recommend{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
    .recommend h3{font-size:17px}
    .recommend-item{display:block;padding:14px 0;border-bottom:1px solid rgba(222,177,241,.1)}
    .recommend-item:last-child{border-bottom:0}
    .recommend-item span{display:block;color:var(--mint);font-size:11px;margin-bottom:3px}
    .recommend-item strong{font-size:14px;line-height:1.5}
    .safety-shell{padding:34px;border:1px solid rgba(127,216,198,.25);border-radius:22px;background:linear-gradient(110deg,#192623,#19131f);display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
    .safety-shell p{color:var(--muted);font-size:14px}
    .safety-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .safe-item{padding:15px;border-radius:12px;background:rgba(7,22,20,.34);border:1px solid rgba(127,216,198,.17);font-size:13px;color:#d6f5ee}
    .safe-item b{display:block;color:var(--mint);font-size:12px;margin-bottom:4px}
    .mobile-panel{display:grid;grid-template-columns:5fr 7fr;gap:22px;align-items:center}
    .device-card{max-width:310px;margin:auto;padding:14px;border-radius:30px;border:1px solid rgba(237,117,103,.38);background:#100b16;box-shadow:0 20px 45px rgba(0,0,0,.35)}
    .device-screen{padding:18px;border-radius:21px;background:linear-gradient(160deg,#41223e,#21162c);min-height:340px}
    .device-head{display:flex;justify-content:space-between;color:#f4c1d1;font-size:11px;margin-bottom:20px}
    .device-title{font-size:20px;font-weight:800;line-height:1.35}
    .device-chip{display:inline-block;margin-top:12px;padding:4px 8px;background:rgba(127,216,198,.14);border-radius:999px;font-size:11px;color:var(--mint)}
    .device-lines{margin-top:28px;display:grid;gap:8px}
    .device-lines i{height:9px;border-radius:6px;background:rgba(255,255,255,.11);display:block}
    .device-lines i:nth-child(2){width:77%}.device-lines i:nth-child(3){width:87%}.device-lines i:nth-child(4){width:62%}
    .benefit-list{display:grid;gap:12px}
    .benefit{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start;padding:15px;border-bottom:1px solid var(--line)}
    .benefit-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(201,73,118,.12);color:#f3a3bf}
    .benefit p{margin:3px 0 0;color:var(--muted);font-size:13px}
    .feedback-track{display:flex;gap:15px;overflow:auto;padding:4px 1px 14px;scroll-snap-type:x mandatory}
    .feedback-track::-webkit-scrollbar{height:7px}.feedback-track::-webkit-scrollbar-thumb{background:var(--plum);border-radius:9px}
    .feedback{min-width:min(430px,85vw);scroll-snap-align:start;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);position:relative}
    .feedback:before{content:"“";font-size:50px;line-height:.7;color:#dd789e;position:absolute;right:18px;top:24px;opacity:.45}
    .feedback p{font-size:15px;color:#e7dbe8;max-width:330px;margin-bottom:18px}
    .feedback span{font-size:12px;color:var(--mint)}
    .cta-section{padding:74px 0 86px}
    .cta-panel{padding:44px;overflow:hidden;position:relative;border-radius:24px;border:1px solid rgba(237,117,103,.45);background:linear-gradient(112deg,#4a203c,#2d1735 53%,#1a1424)}
    .cta-panel:before,.cta-panel:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
    .cta-panel:before{width:340px;height:340px;right:-100px;top:-175px;border:1px solid rgba(127,216,198,.23);box-shadow:0 0 0 32px rgba(127,216,198,.035)}
    .cta-panel:after{width:160px;height:160px;left:44%;bottom:-125px;background:rgba(237,117,103,.14);filter:blur(28px)}
    .cta-panel > *{position:relative;z-index:1}
    .cta-panel p{max-width:680px;color:#e5cbd7}
    .faq{padding-bottom:74px}
    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
    details{border:1px solid var(--line);border-radius:12px;background:var(--panel-deep);padding:0 17px;transition:var(--transition)}
    details[open]{background:var(--panel);border-color:rgba(237,117,103,.35)}
    summary{min-height:57px;display:flex;align-items:center;cursor:pointer;font-weight:700;font-size:14px;list-style:none}
    summary::-webkit-details-marker{display:none}
    summary:after{content:"＋";margin-left:auto;color:#ed9ab8;font-size:20px}
    details[open] summary:after{content:"－"}
    details p{padding:0 0 16px;margin:0;color:var(--muted);font-size:13px;line-height:1.8}
    .site-footer{border-top:1px solid var(--line);background:#0e0a12;padding:44px 0 22px}
    .footer-top{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:30px;padding-bottom:30px}
    .footer-brand p{color:var(--muted);font-size:13px;max-width:380px;margin-top:12px}
    .footer-title{font-size:13px;color:#f0b8cf;font-weight:800;margin:4px 0 10px}
    .footer-links{display:grid;gap:7px}
    .footer-links a{font-size:13px;color:var(--muted);transition:var(--transition)}
    .footer-links a:hover{color:var(--mint);padding-left:3px}
    .footer-bottom{border-top:1px solid rgba(222,177,241,.1);padding-top:18px;display:flex;justify-content:space-between;gap:14px;color:var(--dim);font-size:12px}
    .state-demo{display:none}
    :focus-visible{outline:3px solid var(--focus);outline-offset:3px}
    .btn-primary:active,.btn-secondary:active,.nav-cta:active{transform:translateY(1px)}
    button:disabled,.disabled{opacity:.48;cursor:not-allowed;filter:grayscale(.35)}
    .loading{position:relative;color:transparent!important}.loading:after{content:"";position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
    .error-state{color:#ffb1b1;border-color:rgba(245,108,108,.45)!important}
    .empty-state{color:var(--dim)}
    .selected{border-color:var(--mint)!important;box-shadow:inset 0 0 0 1px rgba(127,216,198,.18)}
    @keyframes spin{to{transform:rotate(360deg)}}
    @media(max-width:1024px){
      .nav-wrap{gap:14px}.nav-link{padding:0 9px}.nav-cta{display:none}
      .hero-shell{padding:36px}.hero-grid{gap:25px}.hero-matrix{gap:8px}
      .update-layout,.directory-grid,.mobile-panel{grid-template-columns:1fr}
      .limit-panel{min-height:290px}.quick-grid{grid-template-columns:1fr}
      .news-layout{grid-template-columns:1fr}.safety-shell{grid-template-columns:1fr}
      .device-card{max-width:360px}.footer-top{grid-template-columns:1fr 1fr}
    }
    @media(max-width:768px){
      .container{width:min(calc(100% - 32px),var(--container))}
      .nav-wrap{height:68px}.nav-links,.search-button{display:none}.menu-button{display:grid;margin-left:auto}
      .mobile-menu{display:none;padding:8px 0 16px;border-top:1px solid var(--line)}
      .mobile-menu.open{display:grid;gap:6px}.mobile-menu .nav-link{justify-content:flex-start}
      .mobile-menu .nav-link.active:after{display:none}
      .mega-panel{display:none!important}
      .hero{padding:34px 0 38px}.hero-shell{padding:27px 21px;border-radius:19px}
      .hero-top{margin-bottom:23px}.hero-status{font-size:11px}.hero-grid{grid-template-columns:1fr;gap:26px}
      h1{font-size:39px}.hero-copy{font-size:15px}.hero-matrix{max-width:520px}
      .section,.directory{padding:55px 0}.section-head{margin-bottom:24px}
      .timeline-item{grid-template-columns:42px 1fr;padding:15px 8px}.timeline-link{grid-column:2}
      .split-title{align-items:flex-start;flex-direction:column}.news-row{grid-template-columns:75px 1fr}.news-row .timeline-link{display:none}
      .faq-grid{grid-template-columns:1fr}.cta-panel{padding:30px 23px}.footer-top{grid-template-columns:1fr 1fr}
    }
    @media(max-width:520px){
      .container{width:calc(100% - 28px)}.brand{font-size:16px}.brand-mark{width:31px;height:31px}
      .hero-shell{padding:23px 17px}.hero-top{align-items:flex-start;flex-direction:column;gap:9px}
      h1{font-size:33px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions a{width:100%}
      .hero-matrix{grid-template-columns:1fr 1fr}.matrix-item{min-height:92px}.matrix-wide{grid-column:span 2}
      .timeline-item{gap:9px}.time-node{width:31px;height:31px}.timeline-item h3{font-size:15px}
      .countdown{gap:5px}.count-unit{min-width:45px;padding:7px 5px}.count-unit b{font-size:17px}
      .catalog-item{grid-template-columns:auto 1fr auto;padding:15px}.catalog-item p{font-size:12px}
      .safety-shell{padding:23px 18px}.safety-list{grid-template-columns:1fr}.news-row{grid-template-columns:1fr;gap:5px}.news-tag{width:max-content}
      .footer-top{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom p{margin:0 0 6px}
    }

/* roulang page: category2 */
:root{
 --bg:#120d18;--bg-soft:#1a1222;--panel:#21162b;--panel-deep:#17101e;--panel-high:#2b1c38;
 --line:rgba(222,177,241,.17);--line-strong:rgba(230,130,171,.52);--text:#f7f0f7;--muted:#c5b8c9;
 --dim:#907f96;--plum:#9b4d9e;--berry:#c94976;--coral:#ed7567;--mint:#7fd8c6;--focus:#f5ad72;
 --radius:18px;--radius-sm:12px;--shadow:0 20px 50px rgba(4,1,7,.38);--container:1200px;--transition:190ms ease
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--bg);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;line-height:1.78;letter-spacing:.01em;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle at 83% 9%,rgba(180,62,127,.16),transparent 22rem),radial-gradient(circle at 9% 55%,rgba(116,61,153,.13),transparent 28rem),linear-gradient(135deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:auto,auto,28px 28px}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;background:linear-gradient(100deg,transparent 0 44%,rgba(192,120,210,.03) 44.1% 44.3%,transparent 44.4% 100%)}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.site-header{position:sticky;top:0;z-index:40;background:rgba(18,13,24,.94);border-bottom:1px solid rgba(222,177,241,.11);backdrop-filter:blur(14px)}
.nav-wrap{height:76px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:.02em;white-space:nowrap}.brand-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--coral),var(--plum));box-shadow:0 0 25px rgba(201,73,118,.33);font-size:18px;color:#fff}
.nav-links{display:flex;align-items:center;gap:4px;margin:auto}.nav-link{border:0;background:none;display:inline-flex;min-height:44px;align-items:center;padding:0 14px;border-radius:10px;color:var(--muted);font-size:14px;transition:var(--transition);position:relative}.nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:#fff;background:rgba(201,73,118,.13)}.nav-link.active:after{content:"";position:absolute;bottom:4px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:9px}
.nav-actions{display:flex;gap:10px;align-items:center}.search-button,.menu-button{min-width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--panel-deep);color:var(--muted);transition:var(--transition);display:grid;place-items:center}.search-button:hover,.menu-button:hover{border-color:var(--line-strong);color:#fff;background:var(--panel)}.menu-button{display:none}.nav-cta,.btn-primary{min-height:44px;border:1px solid transparent;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(100deg,var(--berry),var(--coral));color:#fff;font-weight:700;font-size:14px;box-shadow:0 9px 25px rgba(201,73,118,.22);transition:var(--transition)}.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.14);box-shadow:0 14px 29px rgba(201,73,118,.34)}
.mega{position:relative}.mega-panel{display:none;position:absolute;top:52px;left:-100px;width:560px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:#21162bef;box-shadow:var(--shadow);backdrop-filter:blur(16px)}.mega:hover .mega-panel,.mega:focus-within .mega-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mega-card{display:block;padding:16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid transparent;transition:var(--transition)}.mega-card:hover{background:rgba(201,73,118,.1);border-color:var(--line-strong);transform:translateY(-2px)}.mega-card strong,.mega-card span{display:block}.mega-card strong{font-size:14px}.mega-card span{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}.mobile-menu{display:none}
.btn-secondary{min-height:44px;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);color:#f4dce9;background:rgba(255,255,255,.025);font-weight:700;font-size:14px;transition:var(--transition)}.btn-secondary:hover{background:rgba(201,73,118,.12);border-color:var(--coral);transform:translateY(-2px)}.btn-text{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-weight:700;font-size:14px;padding:10px 2px}.btn-text:hover{color:#c9fff4;gap:8px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.page-hero{padding:42px 0 28px}.crumbs{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--dim);margin-bottom:20px}.crumbs a:hover{color:var(--mint)}.crumbs b{font-weight:400;color:var(--berry)}
.hero-panel{position:relative;overflow:hidden;padding:44px 48px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(125deg,#2b1b37,#17101e 70%);box-shadow:var(--shadow)}.hero-panel:after{content:"";position:absolute;right:-90px;bottom:-130px;width:350px;height:350px;border:1px solid rgba(127,216,198,.16);border-radius:50%;box-shadow:0 0 0 35px rgba(127,216,198,.025),0 0 70px rgba(201,73,118,.16)}.eyebrow,.badge,.status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 10px;font-size:12px;line-height:1.35;border:1px solid rgba(127,216,198,.28);color:var(--mint);background:rgba(127,216,198,.07)}h1,h2,h3,p{margin-top:0}.hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}h1{font-size:clamp(32px,5vw,54px);line-height:1.22;letter-spacing:-.035em;margin:15px 0 17px;max-width:760px}.lead{font-size:16px;color:var(--muted);max-width:720px;margin-bottom:24px}.hero-actions{display:flex;gap:11px;flex-wrap:wrap}.index-seal{padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(12,8,17,.42)}.seal-top{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.seal-number{font-size:45px;font-weight:900;line-height:1.1;color:#fff;margin:13px 0 7px}.seal-rule{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--plum),transparent);margin:12px 0}.seal-copy{color:var(--muted);font-size:13px;margin:0}
.section{padding:58px 0}.section-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:24px}.section-kicker{font-size:12px;color:var(--coral);font-weight:800;letter-spacing:.13em}.section-heading h2{font-size:clamp(25px,3.2vw,37px);line-height:1.3;letter-spacing:-.025em;margin:6px 0 0}.section-heading p{max-width:490px;color:var(--muted);font-size:14px;margin:0}
.filter-panel{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-deep);box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;justify-content:space-between}.filter-label{font-size:13px;color:var(--muted);white-space:nowrap}.tag-scroll{display:flex;gap:8px;overflow:auto;padding:2px}.filter-tag{white-space:nowrap;border:1px solid var(--line);border-radius:999px;color:var(--muted);background:var(--panel);padding:8px 12px;font-size:13px;transition:var(--transition)}.filter-tag:hover,.filter-tag.selected{background:rgba(201,73,118,.14);border-color:var(--line-strong);color:#fff}.filter-tag:active{transform:scale(.97)}
.explorer{display:grid;grid-template-columns:1.12fr .88fr;gap:18px;margin-top:18px}.topic-card{position:relative;overflow:hidden;min-height:285px;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,var(--panel-high),var(--panel-deep));box-shadow:0 12px 34px rgba(4,1,7,.18);display:flex;flex-direction:column;justify-content:flex-end;transition:var(--transition)}.topic-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 20px 42px rgba(4,1,7,.35)}.topic-card:before{content:"";position:absolute;top:-62px;right:-45px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(237,117,103,.23);box-shadow:0 0 0 25px rgba(155,77,158,.05)}.topic-card.large{min-height:390px;background:linear-gradient(135deg,#34213e,#1a1222 72%)}.topic-card .badge{width:max-content;position:relative}.topic-card h3{position:relative;font-size:25px;line-height:1.35;margin:15px 0 9px}.topic-card p{position:relative;color:var(--muted);font-size:14px;max-width:530px;margin-bottom:15px}.topic-meta{position:relative;display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--dim);font-size:12px;border-top:1px solid var(--line);padding-top:13px}.side-cards{display:grid;gap:18px}.topic-card.small{min-height:186px;padding:23px}.topic-card.small h3{font-size:19px;margin:12px 0 5px}.topic-card.small p{font-size:13px;margin-bottom:10px}
.reading-path{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.path-step{padding:23px 21px;border-left:2px solid var(--berry);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:rgba(43,28,56,.65);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.path-step span{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.1em}.path-step h3{font-size:18px;margin:10px 0 7px}.path-step p{color:var(--muted);font-size:14px;margin:0}
.status-strip{margin-top:18px;padding:18px 22px;border-radius:var(--radius-sm);border:1px dashed rgba(127,216,198,.35);background:rgba(127,216,198,.045);display:flex;justify-content:space-between;gap:16px;align-items:center}.status-strip p{margin:0;color:var(--muted);font-size:14px}.status-strip strong{color:var(--mint)}
.notice-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.notice{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}.notice h3{font-size:19px;margin:0 0 10px}.notice p{color:var(--muted);font-size:14px;margin-bottom:15px}.empty-state{border-style:dashed;background:linear-gradient(120deg,rgba(127,216,198,.06),rgba(155,77,158,.07))}.empty-icon{font-size:28px;color:var(--mint);margin-bottom:10px}
.faq-wrap{max-width:880px}.faq-item{border-bottom:1px solid var(--line);padding:0}.faq-item summary{list-style:none;cursor:pointer;padding:19px 34px 19px 0;font-weight:700;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";position:absolute;right:4px;color:var(--coral);font-size:23px;font-weight:400;top:14px}.faq-item[open] summary:after{content:"−"}.faq-item p{color:var(--muted);font-size:14px;padding:0 30px 18px 0;margin:0}
.cta-panel{position:relative;overflow:hidden;padding:42px 46px;border:1px solid rgba(237,117,103,.42);border-radius:24px;background:linear-gradient(105deg,#4a2342,#2a1733 55%,#1b1525);box-shadow:var(--shadow)}.cta-panel:after{content:"✦";position:absolute;right:5%;top:-34px;font-size:170px;color:rgba(237,117,103,.11)}.cta-panel>div{position:relative;z-index:1;max-width:740px}.cta-panel h2{font-size:clamp(28px,4vw,42px);line-height:1.3;margin:10px 0}.cta-panel p{color:#ead9e5;margin-bottom:20px}.site-footer{margin-top:68px;padding:50px 0 22px;border-top:1px solid var(--line);background:rgba(10,7,14,.48)}.footer-top{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:40px}.footer-brand p{max-width:480px;font-size:13px;color:var(--muted);margin:15px 0 0}.footer-title{font-weight:800;margin-bottom:12px}.footer-links{display:grid;gap:8px}.footer-links a{font-size:13px;color:var(--muted);transition:var(--transition)}.footer-links a:hover{color:var(--mint);padding-left:3px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:35px;padding-top:18px;color:var(--dim);font-size:12px}.footer-bottom p{margin:0}
@media(max-width:1024px){.nav-wrap{gap:16px}.nav-links{margin-left:0}.hero-layout{grid-template-columns:1fr .72fr}.explorer{grid-template-columns:1fr}.side-cards{grid-template-columns:1fr 1fr}.topic-card.small{min-height:230px}}
@media(max-width:768px){.container{width:min(calc(100% - 32px),var(--container))}.nav-wrap{height:68px;justify-content:space-between}.nav-links,.nav-actions .search-button,.nav-actions .nav-cta{display:none}.menu-button{display:grid}.mobile-menu{display:none;padding:10px 16px 18px;border-top:1px solid var(--line);background:var(--bg-soft)}.mobile-menu.open{display:grid;gap:6px}.mobile-menu a{padding:12px;border-radius:10px;color:var(--muted)}.mobile-menu a.active,.mobile-menu a:hover{background:rgba(201,73,118,.13);color:#fff}.page-hero{padding-top:26px}.hero-panel{padding:30px 24px}.hero-layout{grid-template-columns:1fr}.index-seal{max-width:400px}.section{padding:43px 0}.section-heading{display:block}.section-heading p{margin-top:10px}.filter-panel{display:block}.filter-label{display:block;margin-bottom:9px}.explorer,.reading-path,.notice-grid,.footer-top{grid-template-columns:1fr}.side-cards{grid-template-columns:1fr}.topic-card.large{min-height:315px}.status-strip{align-items:flex-start;flex-direction:column}.cta-panel{padding:32px 25px}.footer-bottom{display:block}.footer-bottom p+p{margin-top:5px}.mega-panel{display:none}}
@media(max-width:520px){h1{font-size:31px}.hero-actions,.hero-actions a{width:100%}.topic-card{padding:23px}.topic-card h3{font-size:22px}.filter-tag{padding:7px 10px}.path-step{padding:18px}.site-footer{margin-top:45px}.brand{font-size:16px}}

/* roulang page: category1 */
:root{
 --bg:#120d18;
 --bg-soft:#1a1222;
 --panel:#21162b;
 --panel-deep:#17101e;
 --panel-high:#2b1c38;
 --line:rgba(222,177,241,.17);
 --line-strong:rgba(230,130,171,.52);
 --text:#f7f0f7;
 --muted:#c5b8c9;
 --dim:#907f96;
 --plum:#9b4d9e;
 --berry:#c94976;
 --coral:#ed7567;
 --mint:#7fd8c6;
 --focus:#f5ad72;
 --danger:#ff8092;
 --radius:18px;
 --radius-sm:12px;
 --shadow:0 20px 50px rgba(4,1,7,.38);
 --container:1200px;
 --transition:190ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);background:var(--bg);
 font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
 line-height:1.78;letter-spacing:.01em;overflow-x:hidden;
}
body:before{
 content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
 background:
 radial-gradient(circle at 83% 9%,rgba(180,62,127,.16),transparent 22rem),
 radial-gradient(circle at 9% 55%,rgba(116,61,153,.13),transparent 28rem),
 linear-gradient(135deg,rgba(255,255,255,.018) 1px,transparent 1px);
 background-size:auto,auto,28px 28px;
}
body:after{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
 background:linear-gradient(100deg,transparent 0 44%,rgba(192,120,210,.03) 44.1% 44.3%,transparent 44.4% 100%);
}
::selection{background:rgba(201,73,118,.4);color:#fff}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:var(--coral);color:#fff;padding:10px 16px;border-radius:10px}
.skip-link:focus{top:12px}
.site-header{
 position:sticky;top:0;z-index:40;background:rgba(18,13,24,.94);
 border-bottom:1px solid rgba(222,177,241,.11);backdrop-filter:blur(14px);
}
.nav-wrap{height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.brand-mark{
 width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
 background:linear-gradient(135deg,var(--coral),var(--plum));box-shadow:0 0 25px rgba(201,73,118,.33);
 font-size:18px;color:#fff;
}
.nav-links{display:flex;align-items:center;gap:4px;margin:auto}
.nav-link{
 display:inline-flex;min-height:44px;align-items:center;padding:0 14px;border:0;border-radius:10px;
 background:transparent;color:var(--muted);font-size:14px;transition:var(--transition);position:relative;
}
.nav-link:hover,.nav-link:focus-visible,.nav-link.active{color:#fff;background:rgba(201,73,118,.13)}
.nav-link.active:after{content:"";position:absolute;bottom:4px;left:14px;right:14px;height:2px;background:var(--coral);border-radius:9px}
.nav-actions{display:flex;gap:10px;align-items:center}
.search-button,.menu-button{
 min-width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--panel-deep);color:var(--muted);
 transition:var(--transition);display:grid;place-items:center;
}
.search-button:hover,.menu-button:hover{border-color:var(--line-strong);color:#fff;background:var(--panel)}
.menu-button{display:none}
.nav-cta,.btn-primary{
 min-height:44px;border:1px solid transparent;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;
 background:linear-gradient(100deg,var(--berry),var(--coral));color:#fff;font-weight:700;font-size:14px;
 box-shadow:0 9px 25px rgba(201,73,118,.22);transition:var(--transition);
}
.nav-cta:hover,.btn-primary:hover{transform:translateY(-2px);filter:saturate(1.14);box-shadow:0 14px 29px rgba(201,73,118,.34)}
.mega{position:relative}
.mega-panel{
 display:none;position:absolute;top:52px;left:-100px;width:560px;padding:16px;border:1px solid var(--line);
 border-radius:var(--radius);background:rgba(33,22,43,.97);box-shadow:var(--shadow);backdrop-filter:blur(16px);
}
.mega:hover .mega-panel,.mega:focus-within .mega-panel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mega-card{display:block;padding:16px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid transparent;transition:var(--transition)}
.mega-card:hover{background:rgba(201,73,118,.1);border-color:var(--line-strong);transform:translateY(-2px)}
.mega-card strong,.mega-card span{display:block}
.mega-card strong{font-size:14px}
.mega-card span{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
.mobile-menu{display:none;padding:0 0 16px}
.mobile-menu a{display:flex;min-height:46px;align-items:center;padding:0 14px;border-radius:10px;color:var(--muted)}
.mobile-menu a.active,.mobile-menu a:hover{color:#fff;background:rgba(201,73,118,.12)}
:focus-visible{outline:3px solid rgba(245,173,114,.72);outline-offset:3px}
.breadcrumb{padding:24px 0 0;color:var(--dim);font-size:13px}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.breadcrumb li+li:before{content:"/";margin-right:9px;color:rgba(255,255,255,.25)}
.breadcrumb a:hover{color:var(--coral)}
.category-hero{padding:34px 0 58px}
.hero-frame{
 position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);
 gap:46px;align-items:center;padding:48px;border:1px solid var(--line);border-radius:24px;
 background:linear-gradient(118deg,rgba(48,29,62,.98),rgba(23,15,31,.98));box-shadow:var(--shadow);
}
.hero-frame:before{
 content:"";position:absolute;right:-170px;top:-250px;width:510px;height:510px;border-radius:50%;
 border:1px solid rgba(237,117,103,.18);box-shadow:0 0 0 34px rgba(155,77,158,.04),0 0 0 76px rgba(155,77,158,.025);
}
.eyebrow,.badge,.status{
 display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 10px;font-size:12px;line-height:1.35;
 border:1px solid rgba(127,216,198,.28);color:var(--mint);background:rgba(127,216,198,.07);
}
h1,h2,h3,p{margin-top:0}
h1{max-width:760px;margin:17px 0 17px;font-size:clamp(36px,5.3vw,66px);line-height:1.12;letter-spacing:-.045em}
.hero-summary{max-width:750px;color:var(--muted);font-size:16px;margin-bottom:24px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.btn-secondary{
 min-height:44px;border-radius:11px;padding:0 17px;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid var(--line-strong);color:#f4dce9;background:rgba(255,255,255,.025);font-weight:700;font-size:14px;transition:var(--transition);
}
.btn-secondary:hover{background:rgba(201,73,118,.12);border-color:var(--coral);transform:translateY(-2px)}
.progress-panel{
 position:relative;padding:24px;border-radius:20px;border:1px solid var(--line);
 background:var(--panel-deep);box-shadow:inset 0 1px rgba(255,255,255,.03);
}
.progress-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:20px}
.progress-head strong{font-size:15px}
.progress-ring{
 width:132px;height:132px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;
 background:conic-gradient(var(--coral) 0 78%,rgba(255,255,255,.07) 78% 100%);
 box-shadow:0 0 32px rgba(201,73,118,.15);
}
.progress-ring:before{
 content:"";width:104px;height:104px;border-radius:50%;background:var(--panel-deep);position:absolute;
}
.progress-value{position:relative;text-align:center;z-index:1}
.progress-value strong,.progress-value span{display:block}
.progress-value strong{font-size:18px}
.progress-value span{font-size:12px;color:var(--muted)}
.tier-list{display:grid;gap:9px}
.tier{
 display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;
 border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:13px;background:rgba(255,255,255,.025);
}
.tier.selected{border-color:rgba(127,216,198,.35);color:#fff;background:rgba(127,216,198,.07)}
.section{padding:76px 0}
.section-soft{background:linear-gradient(180deg,transparent,rgba(43,28,56,.34),transparent)}
.section-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,.55fr);gap:60px;align-items:end;margin-bottom:34px}
.kicker{display:block;color:var(--coral);font-size:13px;font-weight:800;letter-spacing:.16em;margin-bottom:10px}
.section h2{font-size:clamp(27px,3.6vw,42px);line-height:1.25;letter-spacing:-.025em;margin-bottom:0}
.section-intro{color:var(--muted);margin:0}
.filter-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:34px;align-items:start}
.filter-aside{
 position:sticky;top:100px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--panel-deep);box-shadow:var(--shadow);
}
.filter-aside h2{font-size:20px;margin-bottom:8px}
.filter-aside p{font-size:13px;color:var(--muted);margin-bottom:18px}
.filter-group{display:flex;flex-wrap:wrap;gap:8px}
.filter-button{
 min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
 color:var(--muted);font-size:13px;transition:var(--transition);
}
.filter-button:hover,.filter-button.selected,.filter-button[aria-pressed="true"]{color:#fff;border-color:var(--line-strong);background:rgba(201,73,118,.15)}
.filter-button:active{transform:scale(.97)}
.filter-note{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;color:var(--dim);font-size:12px}
.catalogue{position:relative;display:grid;gap:18px}
.catalogue:before{
 content:"";position:absolute;left:25px;top:30px;bottom:30px;width:1px;
 background:linear-gradient(var(--coral),rgba(155,77,158,.2),var(--mint));
}
.catalogue-item{
 position:relative;margin-left:58px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);
 background:var(--panel);box-shadow:0 12px 35px rgba(4,1,7,.2);transition:var(--transition);
}
.catalogue-item:before{
 content:"";position:absolute;left:-43px;top:31px;width:13px;height:13px;border-radius:50%;
 background:var(--bg);border:3px solid var(--coral);box-shadow:0 0 0 6px rgba(201,73,118,.1);
}
.catalogue-item:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.item-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px}
.chapter{color:var(--dim);font-size:12px;font-weight:800;letter-spacing:.13em}
.item-tags{display:flex;gap:7px;flex-wrap:wrap}
.badge.berry{color:#f4bdd0;border-color:rgba(201,73,118,.35);background:rgba(201,73,118,.08)}
.badge.coral{color:#ffc0b9;border-color:rgba(237,117,103,.35);background:rgba(237,117,103,.08)}
.catalogue-item h3{font-size:22px;line-height:1.35;margin-bottom:8px}
.catalogue-item p{color:var(--muted);max-width:720px;margin-bottom:18px}
.item-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:15px;border-top:1px solid var(--line)}
.update{color:var(--dim);font-size:12px}
.btn-text{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-weight:700;font-size:14px;padding:8px 2px;transition:var(--transition)}
.btn-text:hover{color:#c9fff4;gap:9px}
.no-results{
 display:none;margin-left:58px;padding:34px;text-align:center;border:1px dashed var(--line-strong);
 border-radius:var(--radius);background:var(--panel-deep);color:var(--muted);
}
.no-results.visible{display:block}
.value-path{display:grid;grid-template-columns:1fr 70px 1fr;align-items:stretch}
.problem-panel,.answer-panel{padding:30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.answer-panel{background:linear-gradient(140deg,var(--panel-high),var(--panel-deep));border-color:rgba(127,216,198,.25)}
.path-arrow{display:grid;place-items:center;color:var(--coral);font-size:30px}
.path-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:13px}
.path-list li{display:flex;gap:11px;color:var(--muted)}
.path-list li:before{content:"✦";color:var(--coral);font-size:12px;margin-top:5px}
.answer-panel .path-list li:before{color:var(--mint)}
.scenario-strip{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
.scenario-main,.scenario-side{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:30px}
.scenario-main{display:grid;grid-template-columns:.72fr 1.28fr;gap:25px;align-items:center}
.scenario-number{font-size:72px;line-height:1;color:rgba(237,117,103,.55);font-weight:900;letter-spacing:-.08em}
.scenario-side{display:grid;gap:15px;background:var(--panel-deep)}
.mini-use{padding:15px;border-left:2px solid var(--plum);background:rgba(255,255,255,.025)}
.mini-use strong{display:block;margin-bottom:4px}
.mini-use span{color:var(--muted);font-size:13px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--line)}
.process-step{position:relative;padding:27px;background:var(--panel-deep);min-height:210px}
.process-step:hover{background:var(--panel)}
.process-index{display:block;color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.15em;margin-bottom:32px}
.process-step h3{font-size:18px;margin-bottom:8px}
.process-step p{font-size:13px;color:var(--muted);margin:0}
.experience-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
.experience-main,.experience-small{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--panel)}
.experience-main{background:linear-gradient(130deg,var(--panel-high),var(--panel-deep))}
.experience-label{color:var(--mint);font-size:13px;font-weight:800}
.experience-main strong{display:block;font-size:clamp(30px,4vw,50px);line-height:1.25;margin:13px 0}
.experience-main p,.experience-small p{color:var(--muted);margin-bottom:0}
.experience-stack{display:grid;gap:20px}
.experience-small strong{display:block;font-size:20px;margin-bottom:7px}
.faq-list{max-width:900px;margin:0 auto;display:grid;gap:12px}
.faq-list details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-deep);overflow:hidden}
.faq-list details[open]{border-color:var(--line-strong);background:var(--panel)}
.faq-list summary{
 min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:12px 20px;cursor:pointer;font-weight:700;list-style:none;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:"＋";color:var(--coral);font-size:21px}
.faq-list details[open] summary:after{content:"－"}
.faq-answer{padding:0 20px 20px;color:var(--muted);max-width:800px}
.cta{padding:30px 0 82px}
.cta-panel{
 position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
 padding:42px;border:1px solid rgba(237,117,103,.35);border-radius:22px;
 background:linear-gradient(120deg,#3a1c39,#211328 68%,#311923);box-shadow:var(--shadow);
}
.cta-panel:after{content:"✦";position:absolute;right:28%;top:-75px;font-size:180px;color:rgba(237,117,103,.055);transform:rotate(15deg)}
.cta-panel h2{font-size:clamp(27px,3.6vw,40px);line-height:1.25;margin-bottom:10px}
.cta-panel p{color:var(--muted);margin:0;max-width:720px}
.cta-actions{display:flex;gap:10px;position:relative;z-index:1;flex-wrap:wrap}
.site-footer{border-top:1px solid var(--line);background:#0e0913;padding:56px 0 24px}
.footer-top{display:grid;grid-template-columns:1.45fr .7fr .7fr;gap:56px}
.footer-brand p{max-width:530px;margin:18px 0 0;color:var(--muted);font-size:13px}
.footer-title{font-size:14px;font-weight:800;margin-bottom:13px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:var(--muted);font-size:13px;transition:var(--transition)}
.footer-links a:hover{color:var(--coral);transform:translateX(3px)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:var(--dim);font-size:12px}
.footer-bottom p{margin:0}
.loading-state,.empty-state,.error-state{
 padding:24px;border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--panel-deep);color:var(--muted);text-align:center;
}
.loading-state:before{content:"";display:inline-block;width:18px;height:18px;margin-right:9px;border:2px solid var(--line);border-top-color:var(--mint);border-radius:50%;vertical-align:-4px;animation:spin .8s linear infinite}
.error-state{border-color:rgba(255,128,146,.42);color:#ffc4cc}
button:disabled,.btn-primary.disabled{opacity:.48;cursor:not-allowed;transform:none;filter:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{transition:none!important;animation:none!important}
}
@media (max-width:1024px){
 .container{width:min(calc(100% - 36px),var(--container))}
 .nav-links{gap:0}
 .nav-link{padding:0 9px}
 .nav-cta{display:none}
 .hero-frame{grid-template-columns:1fr .58fr;gap:28px;padding:38px}
 .filter-layout{grid-template-columns:240px minmax(0,1fr)}
 .scenario-main{grid-template-columns:1fr}
 .process{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
 .nav-wrap{height:68px}
 .nav-links,.search-button{display:none}
 .nav-actions{margin-left:auto}
 .menu-button{display:grid}
 .mobile-menu.open{display:grid}
 .mega-panel{position:static;width:auto}
 .breadcrumb{padding-top:18px}
 .category-hero{padding:25px 0 44px}
 .hero-frame{grid-template-columns:1fr;padding:30px}
 .progress-panel{max-width:440px}
 .section{padding:58px 0}
 .section-head{grid-template-columns:1fr;gap:15px}
 .filter-layout{grid-template-columns:1fr}
 .filter-aside{position:static;padding:19px}
 .filter-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
 .filter-button{white-space:nowrap}
 .value-path{grid-template-columns:1fr}
 .path-arrow{height:54px;transform:rotate(90deg)}
 .scenario-strip,.experience-grid{grid-template-columns:1fr}
 .process{grid-template-columns:1fr 1fr}
 .cta-panel{grid-template-columns:1fr;padding:32px}
 .footer-top{grid-template-columns:1fr 1fr}
 .footer-brand{grid-column:1/-1}
}
@media (max-width:520px){
 .container{width:min(calc(100% - 24px),var(--container))}
 .brand{font-size:16px}
 .brand-mark{width:32px;height:32px}
 .hero-frame{padding:24px 20px;border-radius:18px}
 h1{font-size:36px}
 .hero-actions,.cta-actions{display:grid}
 .hero-actions a,.cta-actions a{width:100%}
 .progress-panel{padding:19px}
 .section{padding:48px 0}
 .catalogue:before{left:8px}
 .catalogue-item{margin-left:27px;padding:21px}
 .catalogue-item:before{left:-26px;width:10px;height:10px}
 .item-top,.item-footer{align-items:flex-start;flex-direction:column}
 .no-results{margin-left:27px}
 .scenario-main,.scenario-side,.problem-panel,.answer-panel,.experience-main,.experience-small{padding:22px}
 .process{grid-template-columns:1fr}
 .process-step{min-height:0}
 .cta{padding-bottom:60px}
 .cta-panel{padding:26px 20px}
 .footer-top{grid-template-columns:1fr;gap:32px}
 .footer-brand{grid-column:auto}
 .footer-bottom{flex-direction:column}
}