/* roulang page: index */
:root{
      --bg:#17131d;
      --bg-deep:#110e16;
      --surface:#221b2a;
      --surface-2:#2b2234;
      --surface-3:#34293f;
      --line:rgba(214,192,221,.18);
      --line-strong:rgba(214,192,221,.34);
      --text:#f1eaf0;
      --muted:#b7a7bd;
      --berry:#9d315b;
      --berry-bright:#d0527c;
      --mint:#8bc8ae;
      --mint-dim:#5f9982;
      --warning:#d0aa79;
      --shadow:7px 8px 0 rgba(7,5,10,.38);
      --shadow-hover:9px 12px 0 rgba(89,25,55,.35);
      --radius:18px;
      --pixel:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background-color:var(--bg);
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
        radial-gradient(circle at 12% 8%,rgba(157,49,91,.14),transparent 21rem),
        radial-gradient(circle at 89% 39%,rgba(139,200,174,.07),transparent 24rem);
      background-size:28px 28px,28px 28px,auto,auto;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      font-size:16px;
      line-height:1.8;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;
      pointer-events:none;
      opacity:.12;
      background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.035) 4px);
    }
    ::selection{background:var(--berry-bright);color:#fff}
    ::-webkit-scrollbar{width:10px}
    ::-webkit-scrollbar-track{background:var(--bg-deep)}
    ::-webkit-scrollbar-thumb{background:#554158;border:2px solid var(--bg-deep);border-radius:10px}
    ::-webkit-scrollbar-thumb:hover{background:var(--berry)}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{border:0}
    :focus-visible{outline:2px solid var(--mint);outline-offset:3px}
    .container{max-width:1240px}
    .section{padding:104px 0;position:relative}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;color:var(--mint);font-size:.78rem;
      letter-spacing:.13em;font-weight:700;text-transform:uppercase;margin-bottom:14px;
    }
    .section-kicker:before{content:"";width:9px;height:9px;background:var(--mint);box-shadow:4px 4px 0 rgba(139,200,174,.25)}
    .section-title{font-size:clamp(1.8rem,3vw,3rem);line-height:1.25;letter-spacing:.02em;font-weight:800;margin:0 0 16px}
    .section-intro{max-width:700px;color:var(--muted);margin:0;font-size:1rem}
    .pixel-card{
      background:linear-gradient(135deg,rgba(52,41,63,.97),rgba(32,26,40,.97));
      border:1px solid var(--line);
      clip-path:var(--pixel);
      box-shadow:var(--shadow);
    }
    .site-header{
      position:sticky;top:0;z-index:1030;
      background:rgba(18,14,23,.9);
      border-bottom:1px solid rgba(214,192,221,.13);
      backdrop-filter:blur(15px);
    }
    .header-inner{min-height:82px;display:flex;align-items:center;gap:22px}
    .brand{
      flex:0 0 auto;display:flex;align-items:center;gap:10px;max-width:258px;
      font-weight:800;font-size:.98rem;line-height:1.3;letter-spacing:.02em;
    }
    .brand-mark{width:28px;height:28px;position:relative;background:var(--berry);box-shadow:5px 5px 0 #572039;clip-path:var(--pixel)}
    .brand-mark:after{content:"";position:absolute;width:8px;height:8px;background:var(--mint);top:5px;left:5px;box-shadow:9px 9px 0 rgba(139,200,174,.62)}
    .top-search{flex:1;min-width:220px;position:relative}
    .top-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;color:var(--mint);pointer-events:none}
    .search-input,.form-control,.form-select{
      color:var(--text)!important;background:#1a1520!important;border:1px solid var(--line-strong)!important;
      box-shadow:none!important;border-radius:10px!important;
    }
    .search-input{height:46px;width:100%;padding:0 16px 0 45px}
    .search-input::placeholder,.form-control::placeholder{color:#918393}
    .search-input:focus,.form-control:focus,.form-select:focus{border-color:var(--mint)!important;box-shadow:0 0 0 3px rgba(139,200,174,.13)!important}
    .nav-links{display:flex;align-items:center;gap:5px;white-space:nowrap}
    .nav-link-custom{
      color:var(--muted);padding:9px 11px;border-radius:8px;font-size:.9rem;font-weight:700;
      transition:.2s ease;
    }
    .nav-link-custom:hover{color:var(--text);background:rgba(157,49,91,.18);transform:translateY(-1px)}
    .nav-link-custom.active{color:#fff;background:var(--berry);box-shadow:3px 3px 0 #5c203a}
    .menu-toggle{display:none;background:transparent;color:var(--text);font-size:1.4rem;padding:8px}
    .btn-pixel{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;
      color:#fff;background:var(--berry);border:1px solid rgba(255,255,255,.15);font-weight:800;
      border-radius:10px;box-shadow:4px 5px 0 #551c36;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
    }
    .btn-pixel:hover{color:#fff;background:var(--berry-bright);transform:translate(-1px,-2px);box-shadow:6px 8px 0 #551c36}
    .btn-pixel:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #551c36}
    .btn-ghost{background:transparent;border-color:var(--line-strong);box-shadow:4px 5px 0 rgba(5,4,8,.45);color:var(--text)}
    .btn-ghost:hover{background:rgba(139,200,174,.1);border-color:var(--mint);color:var(--mint);box-shadow:6px 8px 0 rgba(5,4,8,.45)}
    .hero{padding:76px 0 38px;position:relative}
    .hero-shell{
      position:relative;overflow:hidden;padding:clamp(30px,5vw,66px);min-height:550px;
      background:linear-gradient(115deg,#2b1d31 0%,#211a29 52%,#18201f 100%);
      border:1px solid var(--line-strong);clip-path:var(--pixel);box-shadow:var(--shadow);
    }
    .hero-shell:after{
      content:"";position:absolute;width:310px;height:310px;right:-100px;top:-120px;
      border:28px solid rgba(157,49,91,.17);box-shadow:0 0 0 24px rgba(139,200,174,.04);transform:rotate(18deg);
    }
    .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:48px}
    .eyebrow,.status-tag,.mini-tag{
      display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(139,200,174,.35);
      color:var(--mint);padding:5px 10px;border-radius:999px;font-size:.77rem;font-weight:700;letter-spacing:.04em;
      background:rgba(139,200,174,.06);
    }
    .status-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}
    h1{font-size:clamp(2.35rem,5vw,4.65rem);line-height:1.12;letter-spacing:.02em;font-weight:900;margin:18px 0}
    .hero-copy{max-width:670px;color:#d5c9d6;font-size:1.05rem;margin:0 0 26px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:13px}
    .hero-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
    .hero-point{font-size:.8rem;color:var(--muted);padding:6px 10px;border-left:2px solid var(--berry-bright);background:rgba(7,5,10,.17)}
    .terminal{padding:17px;position:relative}
    .terminal-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;font-size:.75rem;color:var(--muted)}
    .terminal-lights{display:flex;gap:6px}.terminal-lights i{display:block;width:8px;height:8px;background:#6b556c}.terminal-lights i:first-child{background:var(--berry-bright)}.terminal-lights i:last-child{background:var(--mint)}
    .terminal-screen{padding:20px 3px 3px}
    .terminal-label{font-size:.74rem;letter-spacing:.12em;color:var(--mint)}
    .terminal-title{font-size:1.38rem;font-weight:800;margin:9px 0 17px}
    .terminal-row{display:flex;align-items:center;gap:11px;padding:11px 9px;border-bottom:1px dashed rgba(214,192,221,.16);font-size:.84rem}
    .terminal-row b{color:var(--berry-bright);min-width:27px}.terminal-row span{color:var(--muted);margin-left:auto}
    .terminal-progress{height:7px;background:#17121c;margin:21px 0 8px;overflow:hidden}.terminal-progress i{display:block;width:74%;height:100%;background:linear-gradient(90deg,var(--berry),var(--mint))}
    .hero-strip{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border:1px solid var(--line);background:rgba(24,19,29,.8)}
    .hero-strip div{padding:13px 18px;color:var(--muted);font-size:.8rem;border-right:1px solid var(--line)}
    .hero-strip div:last-child{border-right:0}.hero-strip strong{color:var(--mint);margin-right:7px}
    .service-index{display:grid;grid-template-columns:180px 1fr;gap:35px;margin-top:45px}
    .index-list{border-left:1px solid var(--line);padding-left:20px}
    .index-item{display:block;padding:14px 0;color:var(--muted);font-size:.88rem;border-bottom:1px solid var(--line);transition:.2s}
    .index-item b{display:block;color:var(--berry-bright);font-size:1.05rem}.index-item:hover{color:var(--text);padding-left:6px}
    .service-panels{display:grid;gap:16px}
    .service-panel{
      display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:20px;padding:23px 25px;
      border:1px solid var(--line);background:rgba(41,33,51,.72);clip-path:var(--pixel);transition:.22s ease;
    }
    .service-panel:nth-child(2){margin-left:6%}.service-panel:nth-child(3){margin-right:8%;background:rgba(55,36,51,.8)}
    .service-panel:hover{border-color:var(--berry-bright);transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .service-icon{width:49px;height:49px;display:grid;place-items:center;background:rgba(157,49,91,.2);border:1px solid rgba(208,82,124,.42);color:var(--mint);font-weight:900;font-size:1.2rem}
    .service-panel h3{font-size:1.08rem;margin:0 0 4px;font-weight:800}.service-panel p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.65}.arrow{color:var(--mint);font-size:1.3rem}
    .data-zone{background:#120f18;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .dashboard{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:1px;margin-top:38px;background:var(--line)}
    .metric,.metric-note{background:#221b2a;padding:30px 25px;min-height:192px}
    .metric:nth-child(2){background:#2a2031}.metric:nth-child(3){background:#1c2425}
    .metric-num{font-size:clamp(2.25rem,4vw,3.6rem);font-weight:900;letter-spacing:-.04em;color:var(--mint);line-height:1}
    .metric-label{margin-top:13px;font-weight:800;font-size:.95rem}.metric p,.metric-note p{font-size:.84rem;line-height:1.7;color:var(--muted);margin:7px 0 0}
    .scale{display:flex;gap:4px;margin-top:17px}.scale i{height:5px;flex:1;background:#544658}.scale i.on{background:var(--berry-bright)}.scale i.mint{background:var(--mint)}
    .metric-note{background:linear-gradient(145deg,#40243b,#251f2d)}.metric-note h3{font-size:1.05rem;margin:0;color:#fff}.metric-note .note-line{display:flex;gap:9px;margin-top:15px;font-size:.83rem;color:#ddd1dc}.metric-note .note-line:before{content:"+";color:var(--mint);font-weight:900}
    .archive-rail{display:flex;gap:19px;overflow-x:auto;padding:38px 5px 15px;scroll-snap-type:x mandatory}
    .archive-rail::-webkit-scrollbar{height:7px}.archive-card{flex:0 0 31%;min-width:285px;scroll-snap-align:start;padding:0 0 22px;overflow:hidden;transition:.22s}
    .archive-card:first-child{flex-basis:40%}.archive-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
    .archive-cover{height:152px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:#37223a}
    .archive-card:nth-child(2) .archive-cover{background:#273640}.archive-card:nth-child(3) .archive-cover{background:#3b3036}
    .archive-cover:before{content:"";position:absolute;inset:18px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 12px,transparent 12px 22px),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 8px,transparent 8px 17px);border:1px solid rgba(255,255,255,.2)}
    .archive-cover:after{content:"";position:absolute;width:60px;height:60px;right:22px;bottom:20px;background:var(--berry-bright);box-shadow:-13px -13px 0 rgba(139,200,174,.44),13px 13px 0 rgba(15,11,18,.35)}
    .archive-body{padding:21px 22px 0}.archive-num{font-size:.76rem;color:var(--mint);letter-spacing:.12em}.archive-body h3{font-size:1.14rem;margin:8px 0;font-weight:800}.archive-body p{color:var(--muted);font-size:.86rem;line-height:1.7;margin:0 0 15px}.path-link{font-size:.84rem;color:var(--mint);font-weight:800}.path-link:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--berry-bright);text-underline-offset:5px}
    .rail-control{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.8rem}.rail-control span{padding:3px 8px;border:1px solid var(--line)}.rail-control b{color:var(--berry-bright)}
    .path-board{margin-top:44px;padding:34px;background:rgba(34,27,42,.9);border:1px solid var(--line);clip-path:var(--pixel)}
    .path-grid{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin-top:28px}.path-grid:before{content:"";position:absolute;top:25px;left:9%;right:9%;height:1px;background:var(--line-strong)}
    .path-step{position:relative;padding:0 16px}.step-dot{width:51px;height:51px;display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--mint);color:var(--mint);font-weight:900;position:relative;z-index:1;margin-bottom:17px;box-shadow:4px 4px 0 rgba(139,200,174,.14)}
    .path-step h3{font-size:1rem;margin:0 0 7px;font-weight:800}.path-step p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.7}
    .rules-collapse{margin-top:28px}.rules-collapse .accordion-item{border:1px solid var(--line);background:var(--surface);border-radius:0!important;overflow:hidden}.rules-collapse .accordion-button{color:var(--text);background:var(--surface-2);box-shadow:none;font-weight:800}.rules-collapse .accordion-button:not(.collapsed){background:#352438;color:var(--mint)}.rules-collapse .accordion-button:after{filter:invert(1);opacity:.8}.rules-collapse .accordion-body{color:var(--muted);font-size:.9rem}
    .faq-wrap{margin-top:36px}.faq-wrap .accordion-item{background:var(--surface);border:1px solid var(--line);margin-bottom:11px;clip-path:var(--pixel)}.faq-wrap .accordion-button{background:var(--surface);color:var(--text);font-weight:800;padding:20px 22px;box-shadow:none}.faq-wrap .accordion-button:not(.collapsed){background:#352235;color:#fff;border-bottom:1px solid rgba(208,82,124,.4)}.faq-wrap .accordion-button:after{filter:invert(1);opacity:.9}.faq-num{color:var(--mint);font-size:.78rem;margin-right:13px;letter-spacing:.1em}.faq-wrap .accordion-body{padding:18px 22px 22px;color:var(--muted);line-height:1.85;background:#261e2d}
    .contact-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:34px;align-items:stretch;margin-top:37px}.contact-copy{padding:37px}.contact-copy h2{font-size:2rem;font-weight:900;margin:15px 0}.contact-copy p{color:var(--muted)}.signal{display:flex;align-items:end;gap:5px;height:56px;margin-top:24px}.signal i{width:9px;background:var(--mint);opacity:.8}.signal i:nth-child(1){height:18px}.signal i:nth-child(2){height:29px}.signal i:nth-child(3){height:43px;background:var(--berry-bright)}.signal i:nth-child(4){height:32px}.signal i:nth-child(5){height:53px}
    .contact-form{padding:31px;background:linear-gradient(135deg,#302337,#201923);border:1px solid var(--line-strong);clip-path:var(--pixel);box-shadow:var(--shadow)}.form-label{font-size:.82rem;font-weight:800;color:#ddd0dd;margin-bottom:7px}.form-control,.form-select{min-height:46px}.form-select{background-image:none!important}.form-check-input{background-color:#17131d;border-color:var(--line-strong);border-radius:2px!important}.form-check-input:checked{background-color:var(--berry);border-color:var(--berry-bright)}.form-check-label{color:var(--muted);font-size:.8rem}.age-bar{margin-top:30px;padding:15px 18px;border:1px solid rgba(208,170,121,.3);background:rgba(208,170,121,.07);color:#d9c5ab;font-size:.82rem;display:flex;gap:12px;align-items:flex-start}.age-bar b{color:var(--warning);white-space:nowrap}
    footer{background:#0f0c14;border-top:1px solid var(--line);padding:48px 0 25px}.footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:29px;border-bottom:1px solid var(--line)}.footer-brand{max-width:440px}.footer-brand .brand{max-width:none;font-size:1.05rem}.footer-brand p{font-size:.83rem;color:var(--muted);margin:14px 0 0}.footer-nav{display:flex;gap:30px;align-items:flex-start}.footer-nav a{font-size:.86rem;color:var(--muted);padding:4px 0}.footer-nav a:hover{color:var(--mint);text-decoration:underline;text-decoration-color:var(--berry-bright);text-underline-offset:5px}.footer-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:20px;color:#887c8b;font-size:.75rem}.tech-status{color:var(--mint)}.tech-status:before{content:"●";margin-right:5px}
    .modal-content{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);clip-path:var(--pixel)}.modal-header,.modal-footer{border-color:var(--line)}.btn-close{filter:invert(1)}
    @media(max-width:991.98px){
      .header-inner{flex-wrap:wrap;padding:12px 0;gap:12px}.brand{max-width:calc(100% - 56px)}.menu-toggle{display:block;margin-left:auto}.top-search{order:3;flex:0 0 100%}.nav-links{order:4;display:none;flex:0 0 100%;padding-top:5px;border-top:1px solid var(--line)}.nav-links.show{display:flex;flex-direction:column;align-items:stretch}.nav-link-custom{text-align:center;padding:11px}
      .hero-grid,.contact-grid{grid-template-columns:1fr}.hero-shell{min-height:auto}.terminal{max-width:610px}.service-index{grid-template-columns:1fr}.index-list{display:flex;gap:14px;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);padding:0 0 12px}.index-item{flex:0 0 auto;border-bottom:0;padding:0 11px 0 0}.dashboard{grid-template-columns:repeat(2,1fr)}.metric-note{grid-column:span 2}.archive-card,.archive-card:first-child{flex-basis:48%}.path-grid{grid-template-columns:repeat(2,1fr);gap:28px}.path-grid:before{display:none}.path-step{padding:0}
    }
    @media(max-width:767.98px){
      .section{padding:68px 0}.hero{padding:32px 0 22px}.hero-shell{padding:28px 21px}.hero-strip{grid-template-columns:1fr 1fr}.hero-strip div:nth-child(2){border-right:0}.hero-strip div{padding:11px;font-size:.73rem}.service-panel,.service-panel:nth-child(2),.service-panel:nth-child(3){margin:0;grid-template-columns:47px 1fr;gap:14px;padding:19px}.service-panel .arrow{display:none}.service-icon{width:42px;height:42px}.dashboard{grid-template-columns:1fr}.metric-note{grid-column:auto}.archive-card,.archive-card:first-child{flex-basis:87%;min-width:270px}.path-board{padding:25px 20px}.contact-copy,.contact-form{padding:25px 21px}.footer-top,.footer-bottom{flex-direction:column}.footer-nav{gap:19px;flex-wrap:wrap}.age-bar{font-size:.78rem}
    }
    @media(max-width:519.98px){
      body{font-size:15px}.hero-actions .btn-pixel{width:100%}h1{font-size:2.18rem}.hero-points{display:grid;grid-template-columns:1fr}.hero-point{font-size:.75rem}.path-grid{grid-template-columns:1fr}.path-step{padding-left:67px}.step-dot{position:absolute;left:0;top:0}.section-title{font-size:1.75rem}.terminal{padding:13px}.terminal-screen{padding:15px 2px 2px}.footer-nav{display:grid;grid-template-columns:1fr 1fr;width:100%}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* roulang page: category1 */
:root{
 --bg:#17131d;
 --bg-deep:#110e16;
 --surface:#221b2a;
 --surface-2:#2b2234;
 --surface-3:#34293f;
 --line:rgba(214,192,221,.18);
 --line-strong:rgba(214,192,221,.34);
 --text:#f1eaf0;
 --muted:#b7a7bd;
 --berry:#9d315b;
 --berry-bright:#d0527c;
 --mint:#8bc8ae;
 --mint-dim:#5f9982;
 --warning:#d0aa79;
 --shadow:7px 8px 0 rgba(7,5,10,.38);
 --shadow-hover:9px 12px 0 rgba(89,25,55,.35);
 --radius:18px;
 --pixel:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--text);background-color:var(--bg);
 background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),radial-gradient(circle at 12% 8%,rgba(157,49,91,.14),transparent 21rem),radial-gradient(circle at 89% 39%,rgba(139,200,174,.07),transparent 24rem);
 background-size:28px 28px,28px 28px,auto,auto;
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
 font-size:16px;line-height:1.8;overflow-x:hidden;
}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.035) 4px)}
::selection{background:var(--berry-bright);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:#5d435f;border:2px solid var(--bg-deep)}
::-webkit-scrollbar-thumb:hover{background:var(--berry)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{border:0}
.container{max-width:1240px}
.section{padding:100px 0;position:relative}
.section-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--mint);font-size:.78rem;letter-spacing:.13em;font-weight:700;text-transform:uppercase;margin-bottom:14px}
.section-kicker:before{content:"";width:9px;height:9px;background:var(--mint);box-shadow:4px 4px 0 rgba(139,200,174,.25)}
.section-title{font-size:clamp(1.85rem,3vw,3rem);line-height:1.28;letter-spacing:.02em;font-weight:800;margin:0 0 15px}
.section-intro{max-width:760px;color:var(--muted);margin:0;font-size:1rem}
.pixel-card{background:linear-gradient(135deg,rgba(52,41,63,.97),rgba(32,26,40,.97));border:1px solid var(--line);clip-path:var(--pixel);box-shadow:var(--shadow)}
.site-header{position:sticky;top:0;z-index:1030;background:rgba(18,14,23,.91);border-bottom:1px solid rgba(214,192,221,.13);backdrop-filter:blur(15px)}
.header-inner{min-height:82px;display:flex;align-items:center;gap:22px}
.brand{flex:0 0 auto;display:flex;align-items:center;gap:10px;max-width:258px;font-weight:800;font-size:.98rem;line-height:1.3;letter-spacing:.02em}
.brand:hover{color:var(--mint)}
.brand-mark{width:28px;height:28px;position:relative;background:var(--berry);box-shadow:5px 5px 0 #572039;clip-path:var(--pixel)}
.brand-mark:after{content:"";position:absolute;width:8px;height:8px;background:var(--mint);top:5px;left:5px;box-shadow:9px 9px 0 rgba(139,200,174,.62)}
.top-search{flex:1;min-width:220px;position:relative}
.top-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;color:var(--mint);pointer-events:none}
.search-input,.form-control,.form-select{color:var(--text)!important;background:#1a1520!important;border:1px solid var(--line-strong)!important;box-shadow:none!important;border-radius:10px!important}
.search-input{height:46px;width:100%;padding:0 16px 0 45px}
.search-input::placeholder,.form-control::placeholder{color:#918393}
.search-input:focus,.form-control:focus,.form-select:focus{border-color:var(--mint)!important;box-shadow:0 0 0 3px rgba(139,200,174,.13)!important}
.nav-links{display:flex;align-items:center;gap:5px;white-space:nowrap}
.nav-link-custom{color:var(--muted);padding:9px 11px;border-radius:8px;font-size:.9rem;font-weight:700;transition:.2s ease}
.nav-link-custom:hover{color:var(--text);background:rgba(157,49,91,.18);transform:translateY(-1px)}
.nav-link-custom.active{color:#fff;background:var(--berry);box-shadow:3px 3px 0 #5c203a}
.menu-toggle{display:none;background:transparent;color:var(--text);font-size:1.4rem;padding:8px}
.btn-pixel{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;color:#fff;background:var(--berry);border:1px solid rgba(255,255,255,.15);font-weight:800;border-radius:10px;box-shadow:4px 5px 0 #551c36;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn-pixel:hover{color:#fff;background:var(--berry-bright);transform:translate(-1px,-2px);box-shadow:6px 8px 0 #551c36}
.btn-pixel:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #551c36}
.btn-ghost{background:transparent;border-color:var(--line-strong);box-shadow:4px 5px 0 rgba(5,4,8,.45);color:var(--text)}
.btn-ghost:hover{background:rgba(139,200,174,.1);border-color:var(--mint);color:var(--mint);box-shadow:6px 8px 0 rgba(5,4,8,.45)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.guide-hero{padding:48px 0 55px}
.breadcrumb{margin:0 0 23px;padding:0;background:none;font-size:.86rem}
.breadcrumb-item,.breadcrumb-item a{color:var(--muted)}
.breadcrumb-item.active{color:var(--mint)}
.breadcrumb-item+.breadcrumb-item::before{color:#756578}
.guide-shell{position:relative;overflow:hidden;padding:clamp(28px,4vw,56px);background:linear-gradient(125deg,#291d30 0%,#211a2a 56%,#17201f 100%);border:1px solid var(--line-strong);clip-path:var(--pixel);box-shadow:var(--shadow)}
.guide-shell:after{content:"";position:absolute;right:-55px;bottom:-72px;width:230px;height:230px;border:25px solid rgba(157,49,91,.18);transform:rotate(45deg)}
.guide-grid{position:relative;z-index:1;display:grid;grid-template-columns:180px minmax(0,1fr);gap:40px}
.ruler{border-right:1px solid var(--line);padding:12px 28px 12px 0}
.ruler-title{font-size:.76rem;letter-spacing:.14em;color:var(--mint);font-weight:800;margin-bottom:22px}
.ruler-node{position:relative;padding:0 0 25px 22px;color:var(--muted);font-size:.86rem}
.ruler-node:before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;background:#6f5c73}
.ruler-node:after{content:"";position:absolute;left:4px;top:17px;width:1px;height:25px;background:var(--line)}
.ruler-node:last-child:after{display:none}
.ruler-node.current{color:var(--text);font-weight:700}
.ruler-node.current:before{background:var(--berry-bright);box-shadow:4px 4px 0 rgba(208,82,124,.26)}
.guide-copy h1{font-size:clamp(2rem,4.1vw,4rem);line-height:1.17;letter-spacing:.02em;font-weight:900;margin:0 0 19px;text-shadow:4px 4px 0 rgba(17,14,22,.34)}
.guide-copy p{max-width:750px;color:#d0c4d1;margin:0 0 25px;font-size:1.04rem}
.guide-search{display:flex;gap:10px;max-width:780px;margin-bottom:18px}
.guide-search .top-search{min-width:0}
.guide-search .search-input{height:54px;background:rgba(17,14,22,.73)!important}
.filter-label{font-size:.82rem;color:var(--muted);display:block;margin-bottom:8px}
.filter-tags{display:flex;flex-wrap:wrap;gap:9px}
.filter-tag{display:inline-flex;align-items:center;min-height:34px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:999px;color:#ddd1df;background:rgba(26,21,32,.64);font-size:.82rem;transition:.18s ease;cursor:pointer}
.filter-tag:hover,.filter-tag.is-selected{border-color:var(--mint);color:var(--mint);background:rgba(139,200,174,.1);transform:translateY(-1px)}
.notice-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;margin-top:31px;padding-top:20px;border-top:1px solid var(--line)}
.notice-item{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.notice-item i{width:7px;height:7px;background:var(--mint);box-shadow:3px 3px 0 rgba(139,200,174,.23)}
.content-zone{padding:18px 0 102px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.toolbar-note{color:var(--muted);font-size:.9rem}
.toolbar-controls{display:flex;gap:8px}
.sort-btn{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.84rem;padding:8px 11px;transition:.18s ease}
.sort-btn:hover,.sort-btn.active{background:rgba(157,49,91,.22);border-color:var(--berry-bright);color:#fff}
.archive-list{display:grid;gap:18px}
.archive-card{position:relative;display:grid;grid-template-columns:113px minmax(0,1fr) auto;gap:22px;align-items:center;padding:21px;background:linear-gradient(110deg,rgba(49,39,60,.95),rgba(31,25,39,.95));border:1px solid var(--line);clip-path:var(--pixel);box-shadow:5px 6px 0 rgba(7,5,10,.31);transition:.2s ease}
.archive-card:hover{transform:translateY(-4px);border-color:rgba(208,82,124,.7);box-shadow:8px 11px 0 rgba(89,25,55,.29)}
.archive-thumb{height:104px;position:relative;overflow:hidden;background:#2b2432;border:1px solid var(--line-strong)}
.archive-thumb:before,.archive-thumb:after{content:"";position:absolute}
.thumb-a{background:linear-gradient(135deg,#672744,#2c293b)}
.thumb-a:before{inset:18px 16px auto auto;width:40px;height:40px;background:rgba(139,200,174,.72);box-shadow:-19px 19px 0 rgba(208,82,124,.62),-38px 38px 0 rgba(241,234,240,.16)}
.thumb-b{background:linear-gradient(135deg,#233737,#332440)}
.thumb-b:before{width:100%;height:8px;bottom:18px;background:rgba(139,200,174,.66);box-shadow:0 -17px 0 rgba(208,82,124,.35),0 -34px 0 rgba(241,234,240,.13)}
.thumb-c{background:linear-gradient(135deg,#41243b,#242c38)}
.thumb-c:before{top:16px;left:14px;width:18px;height:70px;background:rgba(208,82,124,.65);box-shadow:28px 14px 0 rgba(139,200,174,.48),56px -4px 0 rgba(241,234,240,.18)}
.thumb-d{background:linear-gradient(135deg,#3a2b45,#38222e)}
.thumb-d:before{inset:20px;background:repeating-linear-gradient(90deg,rgba(139,200,174,.58) 0 7px,transparent 7px 15px)}
.archive-num{font-size:.75rem;letter-spacing:.12em;color:var(--mint);font-weight:800}
.archive-card h2{font-size:1.24rem;line-height:1.35;margin:5px 0 8px;font-weight:800}
.archive-card p{font-size:.91rem;line-height:1.75;margin:0;color:var(--muted);max-width:650px}
.meta-line{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:10px;font-size:.78rem;color:#97899d}
.meta-line span:first-child{color:var(--warning)}
.card-action{white-space:nowrap;font-size:.86rem}
.search-tip{margin:5px 0;padding:25px 28px;background:rgba(34,48,46,.55);border:1px solid rgba(139,200,174,.48);clip-path:var(--pixel)}
.search-tip-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.search-tip strong{display:block;color:var(--mint);font-size:1.05rem;margin-bottom:4px}
.search-tip p{color:#bfd3cb;margin:0;font-size:.9rem}
.side-panel{position:sticky;top:108px;padding:23px;background:rgba(33,27,42,.87);border:1px solid var(--line);clip-path:var(--pixel);box-shadow:var(--shadow)}
.side-panel+.side-panel{margin-top:18px}
.side-title{display:flex;align-items:center;gap:9px;color:var(--text);font-size:1rem;font-weight:800;margin-bottom:14px}
.side-title:before{content:"";width:8px;height:8px;background:var(--berry-bright);box-shadow:3px 3px 0 rgba(208,82,124,.23)}
.index-link{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:.88rem;transition:.18s}
.index-link:last-child{border-bottom:0}
.index-link:hover{color:var(--mint);padding-left:5px}
.index-link span{color:var(--mint);font-size:.77rem}
.hot-list{display:flex;flex-wrap:wrap;gap:8px}
.hot-list a{font-size:.79rem;padding:5px 9px;border-radius:6px;background:#19141f;border:1px solid var(--line);color:#c8bdca;transition:.18s}
.hot-list a:hover{border-color:var(--berry-bright);color:#fff;background:rgba(157,49,91,.25)}
.side-panel p{font-size:.86rem;line-height:1.75;color:var(--muted);margin:0}
.usage-section{padding:90px 0;background:rgba(17,14,22,.34);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usage-track{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:39px;border:1px solid var(--line);background:var(--surface)}
.usage-step{position:relative;padding:27px 25px;border-right:1px solid var(--line);min-height:178px}
.usage-step:last-child{border-right:0}
.usage-step:after{content:"";position:absolute;right:-6px;top:28px;width:11px;height:11px;background:var(--mint);transform:rotate(45deg);z-index:1}
.usage-step:last-child:after{display:none}
.step-number{font-size:.78rem;color:var(--mint);font-weight:800;letter-spacing:.1em}
.usage-step h3{font-size:1.05rem;font-weight:800;margin:9px 0 8px}
.usage-step p{font-size:.87rem;color:var(--muted);line-height:1.7;margin:0}
.mini-faq{padding:95px 0}
.accordion{margin-top:30px}
.accordion-item{background:rgba(35,28,44,.85);border:1px solid var(--line)!important;border-radius:0!important;overflow:hidden;margin-bottom:11px;clip-path:var(--pixel)}
.accordion-button{background:transparent!important;color:var(--text)!important;padding:18px 20px;font-weight:800;box-shadow:none!important}
.accordion-button:not(.collapsed){background:rgba(157,49,91,.16)!important;border-bottom:1px solid rgba(208,82,124,.38)}
.accordion-button:after{filter:invert(88%) sepia(8%) saturate(495%) hue-rotate(230deg)}
.accordion-body{color:var(--muted);padding:18px 20px 20px;line-height:1.8}
.accordion-index{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:12px;color:var(--mint);font-size:.74rem;border:1px solid rgba(139,200,174,.36);background:rgba(139,200,174,.08)}
.contact-strip{padding:0 0 78px}
.contact-box{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px 38px;background:linear-gradient(110deg,#40233d,#282537);border:1px solid rgba(208,82,124,.4);clip-path:var(--pixel);box-shadow:var(--shadow)}
.contact-box h2{font-size:clamp(1.45rem,2.4vw,2.2rem);margin:0 0 6px;font-weight:850}
.contact-box p{margin:0;color:#d1c3d2;max-width:660px}
.age-note{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:rgba(208,170,121,.07);border:1px solid rgba(208,170,121,.28);color:#cdbba2;font-size:.84rem;line-height:1.7}
.age-note b{color:var(--warning);white-space:nowrap}
footer{padding:55px 0 25px;background:#100d15;border-top:1px solid var(--line)}
.footer-top{display:flex;justify-content:space-between;gap:42px;padding-bottom:35px}
.footer-brand{max-width:550px}
.footer-brand .brand{max-width:none;font-size:1.05rem}
.footer-brand p{color:var(--muted);font-size:.88rem;margin:15px 0 0;max-width:520px}
.footer-nav{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;gap:8px 19px;max-width:370px}
.footer-nav a{font-size:.88rem;color:var(--muted);transition:.18s}
.footer-nav a:hover{color:var(--mint);text-decoration:underline;text-decoration-style:dashed;text-underline-offset:5px}
.footer-bottom{padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:#887b8c;font-size:.78rem}
.tech-status{color:var(--mint)}
.modal-content{background:var(--surface);color:var(--text);border:1px solid var(--line-strong);clip-path:var(--pixel)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-title{font-weight:800}
.modal-body{color:var(--muted)}
@media (max-width:991.98px){
 .header-inner{flex-wrap:wrap;gap:12px;padding:13px 0}
 .brand{max-width:calc(100% - 58px)}
 .menu-toggle{display:block;margin-left:auto}
 .top-search{order:3;flex:0 0 100%;width:100%}
 .nav-links{order:4;display:none;flex:0 0 100%;padding-top:7px;border-top:1px solid var(--line)}
 .nav-links.show{display:flex;flex-direction:column;align-items:stretch}
 .nav-link-custom{padding:11px 13px}
 .guide-grid{grid-template-columns:1fr;gap:21px}
 .ruler{display:flex;gap:16px;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}
 .ruler-title{margin:0;white-space:nowrap}
 .ruler-node{padding:0 0 0 17px;white-space:nowrap}
 .ruler-node:after{display:none}
 .content-zone .row{row-gap:30px}
 .side-panel{position:static}
 .usage-track{grid-template-columns:repeat(2,1fr)}
 .usage-step:nth-child(2){border-right:0}
 .usage-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .usage-step:nth-child(2):after{display:none}
}
@media (max-width:767.98px){
 .section{padding:70px 0}
 .guide-hero{padding:30px 0 38px}
 .guide-shell{padding:28px 21px}
 .guide-copy h1{font-size:2.15rem}
 .guide-search{flex-direction:column}
 .guide-search .btn-pixel{width:100%}
 .notice-row{gap:9px 16px}
 .toolbar{align-items:flex-start;flex-direction:column}
 .archive-card{grid-template-columns:86px minmax(0,1fr);gap:15px;padding:17px}
 .archive-thumb{height:88px}
 .archive-card h2{font-size:1.08rem}
 .card-action{grid-column:2;justify-self:start;padding:8px 12px;min-height:auto}
 .search-tip{padding:21px}
 .search-tip-inner{align-items:flex-start;flex-direction:column}
 .usage-section{padding:68px 0}
 .usage-track{grid-template-columns:1fr}
 .usage-step,.usage-step:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}
 .usage-step:last-child{border-bottom:0}
 .usage-step:after{left:28px;right:auto;top:auto;bottom:-6px}
 .contact-box{padding:29px 24px;align-items:flex-start;flex-direction:column}
 .footer-top,.footer-bottom{flex-direction:column}
 .footer-nav{justify-content:flex-start}
}
@media (max-width:519.98px){
 body{font-size:15px}
 .brand{font-size:.86rem}
 .brand-mark{width:25px;height:25px}
 .guide-copy h1{font-size:1.85rem}
 .filter-tags{gap:7px}
 .filter-tag{font-size:.76rem}
 .archive-card{grid-template-columns:1fr}
 .archive-thumb{height:76px}
 .card-action{grid-column:auto}
 .toolbar-controls{width:100%}
 .sort-btn{flex:1}
 .footer-bottom{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}