/* roulang page: index */
:root{
      --bg:#110b18;
      --bg2:#1a1025;
      --panel:#23152f;
      --panel2:#2d183a;
      --text:#fff7fb;
      --muted:#c9b7d2;
      --weak:#8f7b99;
      --primary:#ff2ca8;
      --primary2:#b94cff;
      --cyan:#16f4d0;
      --green:#8dff5a;
      --yellow:#ffd84d;
      --orange:#ff8a2a;
      --danger:#ff4d5f;
      --border:#4c315d;
      --black:#09060d;
      --shadow-pink:7px 7px 0 rgba(255,44,168,.82);
      --shadow-cyan:7px 7px 0 rgba(22,244,208,.75);
      --shadow-yellow:6px 6px 0 rgba(255,216,77,.8);
      --radius:6px;
      --container:1220px;
      --nav-h:82px;
      --ease:all .18s steps(2,end);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Helvetica,Arial,sans-serif;
      color:var(--text);
      line-height:1.72;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 18% 8%, rgba(255,44,168,.2), transparent 30%),
        radial-gradient(circle at 82% 12%, rgba(22,244,208,.13), transparent 34%),
        radial-gradient(circle at 55% 70%, rgba(255,216,77,.08), transparent 36%),
        var(--bg);
      background-size:22px 22px,22px 22px,100% 100%,100% 100%,100% 100%,100% 100%;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, transparent 1px, transparent 4px);
      mix-blend-mode:overlay;
      opacity:.24;
      z-index:20;
    }
    a{color:inherit;text-decoration:none;transition:var(--ease)}
    a:hover,a:focus{color:var(--cyan)}
    img{max-width:100%;display:block}
    button,.button,input,textarea{font-family:inherit}
    .page-wrap{min-height:100vh;position:relative;z-index:1}
    .site-container{width:min(calc(100% - 32px),var(--container));margin:0 auto}
    .promo-bar{
      background:var(--yellow);
      color:#160b05;
      border-bottom:3px solid var(--black);
      font-weight:900;
      letter-spacing:.02em;
      position:relative;
      z-index:10;
    }
    .promo-inner{
      width:min(calc(100% - 24px),var(--container));
      margin:0 auto;
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      text-align:center;
      font-size:14px;
    }
    .promo-burst{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:54px;
      padding:4px 8px;
      color:#fff;
      background:var(--danger);
      border:2px solid var(--black);
      box-shadow:3px 3px 0 var(--black);
      transform:rotate(-2deg);
    }
    .promo-count{
      display:inline-grid;
      place-items:center;
      min-width:92px;
      padding:2px 8px;
      background:#170b1d;
      color:var(--green);
      border:2px solid var(--black);
      box-shadow:3px 3px 0 rgba(0,0,0,.65);
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:9;
      background:rgba(17,11,24,.92);
      backdrop-filter:blur(10px);
      border-bottom:3px solid var(--border);
      box-shadow:0 14px 0 rgba(0,0,0,.16);
    }
    .center-nav{
      min-height:var(--nav-h);
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:20px;
    }
    .nav-side{display:flex;align-items:center;gap:12px}
    .nav-left{justify-content:flex-end}
    .nav-right{justify-content:flex-start}
    .nav-link{
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:8px 14px;
      color:var(--muted);
      font-size:15px;
      font-weight:800;
      border:2px solid transparent;
      position:relative;
    }
    .nav-link:hover{
      color:#07100e;
      background:var(--cyan);
      border-color:var(--black);
      box-shadow:4px 4px 0 var(--primary);
      transform:translate(-1px,-1px);
    }
    .nav-link.active{
      color:#fff;
      background:var(--primary);
      border-color:var(--black);
      box-shadow:4px 4px 0 var(--cyan);
    }
    .brand-logo{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:56px;
      padding:10px 18px;
      background:var(--black);
      border:3px solid var(--primary);
      box-shadow:5px 5px 0 var(--cyan);
      color:#fff;
      font-size:20px;
      font-weight:950;
      letter-spacing:.01em;
      text-shadow:2px 2px 0 var(--primary2);
      white-space:nowrap;
    }
    .pixel-mark{
      width:18px;height:18px;
      background:
        linear-gradient(var(--yellow),var(--yellow)) 0 0/8px 8px no-repeat,
        linear-gradient(var(--primary),var(--primary)) 10px 0/8px 8px no-repeat,
        linear-gradient(var(--cyan),var(--cyan)) 0 10px/8px 8px no-repeat,
        linear-gradient(#fff,#fff) 10px 10px/8px 8px no-repeat;
      image-rendering:pixelated;
    }
    .mobile-nav-toggle{display:none}
    .mobile-panel{display:none}
    .section{padding:86px 0;position:relative}
    .section-tight{padding:62px 0}
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:22px;
      margin-bottom:30px;
    }
    .section-title{
      margin:0;
      font-size:clamp(28px,4vw,42px);
      line-height:1.18;
      font-weight:950;
      letter-spacing:-.03em;
      text-shadow:2px 2px 0 rgba(255,44,168,.65);
    }
    .section-title:before{
      content:"";
      display:inline-block;
      width:16px;height:16px;
      margin-right:12px;
      background:var(--cyan);
      border:3px solid var(--black);
      box-shadow:4px 4px 0 var(--primary);
      vertical-align:middle;
    }
    .section-desc{
      max-width:640px;
      color:var(--muted);
      margin:10px 0 0;
      font-size:16px;
    }
    .eyebrow{
      display:inline-flex;
      gap:8px;
      align-items:center;
      width:max-content;
      padding:6px 10px;
      margin-bottom:14px;
      background:var(--yellow);
      color:#1a0b00;
      border:2px solid var(--black);
      box-shadow:4px 4px 0 var(--primary);
      font-size:13px;
      font-weight:950;
    }
    .hero{
      padding:74px 0 88px;
      min-height:620px;
      display:flex;
      align-items:center;
    }
    .hero-stage{
      border:3px solid var(--black);
      background:
        linear-gradient(135deg, rgba(255,44,168,.16), transparent 38%),
        linear-gradient(315deg, rgba(22,244,208,.14), transparent 42%),
        var(--panel);
      box-shadow:10px 10px 0 var(--black), 16px 16px 0 rgba(255,44,168,.5);
      padding:26px;
      position:relative;
      overflow:hidden;
    }
    .hero-stage:after{
      content:"入口更新";
      position:absolute;
      right:-34px;top:28px;
      transform:rotate(16deg);
      background:var(--orange);
      color:#170800;
      border:3px solid var(--black);
      padding:8px 42px;
      font-weight:950;
      box-shadow:5px 5px 0 var(--black);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
      gap:24px;
      align-items:stretch;
    }
    .hero-copy{
      padding:28px 22px 22px;
      background:rgba(9,6,13,.54);
      border:2px solid var(--border);
    }
    h1{
      margin:0 0 18px;
      font-size:clamp(34px,5.6vw,62px);
      line-height:1.06;
      letter-spacing:-.055em;
      font-weight:950;
      text-shadow:3px 3px 0 var(--primary),6px 6px 0 rgba(0,0,0,.85);
    }
    .hero-lead{
      max-width:720px;
      color:#eaddec;
      font-size:18px;
      margin:0 0 22px;
    }
    .hero-actions,.button-row{
      display:flex;
      flex-wrap:wrap;
      gap:13px;
      margin:24px 0 18px;
    }
    .pixel-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:12px 18px;
      border:3px solid var(--black);
      background:var(--primary);
      color:#fff;
      font-weight:950;
      line-height:1.1;
      box-shadow:5px 5px 0 var(--cyan);
      transition:var(--ease);
      cursor:pointer;
    }
    .pixel-btn:hover,.pixel-btn:focus{
      color:#fff;
      transform:translate(-2px,-2px);
      box-shadow:8px 8px 0 var(--cyan);
      outline:none;
    }
    .pixel-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cyan)}
    .pixel-btn.secondary{
      background:#17101f;
      color:var(--cyan);
      border-color:var(--cyan);
      box-shadow:5px 5px 0 var(--primary);
    }
    .pixel-btn.secondary:hover{background:var(--cyan);color:#06100e}
    .pixel-btn.warn{
      background:var(--yellow);
      color:#1b0d00;
      box-shadow:5px 5px 0 var(--primary);
    }
    .mini-note{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      color:var(--muted);
      font-size:14px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 9px;
      background:#120b18;
      border:2px solid var(--border);
      color:var(--muted);
      font-size:13px;
      font-weight:850;
    }
    .badge.hot{background:var(--danger);color:#fff;border-color:var(--black)}
    .badge.ok{background:#10231d;color:var(--green);border-color:var(--green)}
    .badge.cyan{background:#071d1b;color:var(--cyan);border-color:var(--cyan)}
    .console-panel{
      background:#0d0812;
      border:3px solid var(--black);
      box-shadow:var(--shadow-cyan);
      padding:14px;
      min-height:100%;
    }
    .console-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:8px 10px;
      border:2px solid var(--border);
      background:#1d1128;
      margin-bottom:14px;
      font-weight:950;
    }
    .dots{display:flex;gap:6px}
    .dots i{width:10px;height:10px;display:block;background:var(--primary);border:1px solid var(--black)}
    .dots i:nth-child(2){background:var(--yellow)}
    .dots i:nth-child(3){background:var(--cyan)}
    .entry-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .entry-tile{
      min-height:106px;
      padding:14px;
      background:var(--panel2);
      border:2px solid var(--border);
      position:relative;
      transition:var(--ease);
    }
    .entry-tile:hover{transform:translate(-2px,-2px);border-color:var(--cyan);box-shadow:5px 5px 0 rgba(22,244,208,.6)}
    .entry-tile strong{display:block;font-size:18px;margin-bottom:4px}
    .entry-tile span{display:block;color:var(--muted);font-size:13px;line-height:1.55}
    .status-line{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      margin-top:12px;
      background:#17101f;
      border:2px dashed var(--border);
      color:var(--muted);
      font-size:14px;
    }
    .lamp{width:10px;height:10px;background:var(--green);box-shadow:0 0 10px var(--green);display:inline-block;margin-right:7px}
    .data-rank{
      margin-top:14px;
      padding:12px;
      border:2px solid var(--border);
      background:linear-gradient(90deg, rgba(255,44,168,.1), rgba(22,244,208,.08));
    }
    .rank-row{
      display:grid;
      grid-template-columns:40px 1fr auto;
      gap:10px;
      align-items:center;
      padding:9px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-size:14px;
    }
    .rank-row:last-child{border-bottom:0}
    .rank-num{font-weight:950;color:var(--yellow)}
    .rank-val{color:var(--cyan);font-weight:900}
    .orbit{
      border:3px solid var(--black);
      box-shadow:var(--shadow-pink);
      background:#0e0814;
    }
    .orbit-container{min-height:360px}
    .orbit-slide{
      min-height:360px;
      padding:22px;
      background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        var(--panel);
      background-size:18px 18px;
    }
    .screen-card{
      height:100%;
      border:3px solid var(--black);
      background:#140c1d;
      padding:16px;
    }
    .screen-title{
      display:flex;justify-content:space-between;align-items:center;
      border-bottom:2px solid var(--border);
      padding-bottom:12px;margin-bottom:16px;
      font-weight:950;
    }
    .mock-layout{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:16px;
    }
    .mock-block{
      min-height:78px;
      border:2px solid var(--border);
      background:#241530;
      padding:13px;
    }
    .mock-block.large{min-height:190px}
    .mock-line{height:10px;background:var(--muted);opacity:.36;margin:10px 0;width:80%}
    .mock-line.short{width:46%;background:var(--cyan);opacity:.8}
    .mock-line.pink{background:var(--primary);opacity:.85}
    .orbit-previous,.orbit-next{
      background:var(--yellow)!important;
      color:#120800!important;
      border:2px solid var(--black);
      width:42px;height:42px;
      display:grid!important;place-items:center;
      font-weight:950;
    }
    .feature-tags{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:24px;
    }
    .card{
      background:var(--panel);
      border:3px solid var(--black);
      border-radius:var(--radius);
      box-shadow:6px 6px 0 rgba(255,44,168,.54);
      padding:22px;
      color:var(--text);
      transition:var(--ease);
      height:100%;
    }
    .card:hover{
      transform:translate(-2px,-2px);
      box-shadow:9px 9px 0 rgba(22,244,208,.65);
      border-color:var(--cyan);
    }
    .card h3{font-size:21px;line-height:1.25;margin:0 0 10px;font-weight:950}
    .card p{margin:0;color:var(--muted);font-size:15px}
    .pixel-icon{
      width:38px;height:38px;
      display:grid;place-items:center;
      margin-bottom:14px;
      background:var(--cyan);
      color:#06100e;
      border:3px solid var(--black);
      box-shadow:4px 4px 0 var(--primary);
      font-weight:950;
    }
    .param-panel{
      border:3px solid var(--black);
      background:#0d0812;
      box-shadow:var(--shadow-yellow);
      padding:18px;
    }
    .param-list{margin:0;padding:0;list-style:none}
    .param-item{
      display:grid;
      grid-template-columns:42px 1fr auto;
      gap:12px;
      align-items:center;
      padding:14px 10px;
      border-bottom:2px solid rgba(255,255,255,.08);
    }
    .param-item:last-child{border-bottom:0}
    .param-item strong{display:block}
    .param-item span{display:block;color:var(--muted);font-size:14px}
    .status-badge{
      padding:5px 8px;
      border:2px solid var(--black);
      background:var(--green);
      color:#07100e;
      font-weight:950;
      white-space:nowrap;
      font-size:12px;
    }
    .check-panel{
      background:var(--panel2);
      border:3px solid var(--black);
      box-shadow:var(--shadow-cyan);
      padding:22px;
    }
    .check-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
    .check-list li{
      padding:12px 12px 12px 42px;
      border:2px solid var(--border);
      background:#160d1f;
      position:relative;
      color:var(--muted);
    }
    .check-list li:before{
      content:"✓";
      position:absolute;left:12px;top:9px;
      color:var(--green);
      font-weight:950;
      font-size:18px;
    }
    .review-wall .cell:nth-child(2n) .review-card{margin-top:22px;box-shadow:6px 6px 0 rgba(255,216,77,.75)}
    .review-card{
      background:#1f132a;
      border:3px solid var(--black);
      padding:18px;
      box-shadow:6px 6px 0 rgba(22,244,208,.68);
      position:relative;
    }
    .review-card:before{
      content:"";
      position:absolute;right:12px;top:-10px;
      width:34px;height:18px;
      background:var(--yellow);
      border:2px solid var(--black);
      transform:rotate(4deg);
    }
    .review-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
    .avatar{
      width:36px;height:36px;
      border:2px solid var(--black);
      background:
        linear-gradient(90deg,var(--primary) 50%,transparent 50%) 0 0/12px 12px,
        linear-gradient(var(--cyan) 50%,var(--yellow) 50%) 0 0/12px 12px;
    }
    .review-name{font-weight:950}
    .review-card p{margin:0;color:var(--muted);font-size:15px}
    .download-zone{
      background:
        radial-gradient(circle at 20% 20%, rgba(255,216,77,.18), transparent 25%),
        linear-gradient(135deg, rgba(255,44,168,.22), rgba(22,244,208,.11)),
        #140b1d;
      border-top:3px solid var(--black);
      border-bottom:3px solid var(--black);
    }
    .download-grid{
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:16px;
    }
    .download-btn{
      min-height:86px;
      flex-direction:column;
      align-items:flex-start;
      background:#0f0815;
      color:#fff;
      border-color:var(--black);
      box-shadow:6px 6px 0 var(--primary);
    }
    .download-btn:hover{box-shadow:9px 9px 0 var(--cyan);background:var(--primary);color:#fff}
    .download-btn small{color:var(--muted);font-weight:800}
    .news-wrap{
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);
      gap:24px;
      align-items:start;
    }
    .news-list{
      margin:0;
      padding:0;
      list-style:none;
      border:3px solid var(--black);
      background:#130b1b;
      box-shadow:var(--shadow-pink);
    }
    .news-list li{
      display:grid;
      grid-template-columns:118px 1fr auto;
      gap:12px;
      align-items:center;
      padding:15px 16px;
      border-bottom:2px solid rgba(255,255,255,.08);
    }
    .news-list li:last-child{border-bottom:0}
    .news-date{
      color:var(--yellow);
      font-weight:950;
      font-size:13px;
    }
    .news-list a{font-weight:900;color:#fff}
    .news-list a:hover{color:var(--cyan)}
    .news-summary{color:var(--muted);font-size:14px;margin-top:2px}
    .recommend-box{
      border:3px solid var(--black);
      background:var(--panel2);
      padding:18px;
      box-shadow:var(--shadow-cyan);
    }
    .tag-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .tag-cloud a{
      padding:7px 10px;
      background:#0f0815;
      border:2px solid var(--border);
      color:var(--muted);
      font-weight:850;
      font-size:13px;
    }
    .tag-cloud a:hover{background:var(--cyan);color:#06100e;border-color:var(--black)}
    .compare-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border:3px solid var(--black);
      box-shadow:var(--shadow-yellow);
      background:#120a19;
    }
    .compare-table th,.compare-table td{
      padding:15px;
      border-right:2px solid rgba(255,255,255,.09);
      border-bottom:2px solid rgba(255,255,255,.09);
      text-align:left;
      vertical-align:top;
    }
    .compare-table th{background:var(--primary);color:#fff;font-weight:950}
    .compare-table td{color:var(--muted)}
    .compare-table tr:last-child td{border-bottom:0}
    .compare-table th:last-child,.compare-table td:last-child{border-right:0}
    .faq-wrap .accordion{
      background:transparent;
      border:0;
    }
    .faq-wrap .accordion-item{
      margin-bottom:12px;
      border:3px solid var(--black);
      background:#150d1e;
      box-shadow:5px 5px 0 rgba(255,44,168,.45);
    }
    .faq-wrap .accordion-title{
      color:#fff;
      background:#20122b;
      border:0;
      font-size:17px;
      font-weight:950;
      padding:18px 52px 18px 18px;
    }
    .faq-wrap .accordion-title:hover,.faq-wrap .accordion-title:focus{
      background:#2b1739;
      color:var(--cyan);
      outline:2px solid var(--cyan);
      outline-offset:-2px;
    }
    .faq-wrap .accordion-content{
      background:#100917;
      color:var(--muted);
      border:0;
      border-top:2px solid var(--border);
      padding:18px;
    }
    .final-cta{
      border:3px solid var(--black);
      background:
        linear-gradient(90deg, rgba(255,44,168,.25), rgba(22,244,208,.15)),
        var(--panel);
      box-shadow:10px 10px 0 var(--black);
      padding:30px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:24px;
      align-items:center;
    }
    .final-cta h2{margin:0 0 8px;font-size:clamp(28px,4vw,42px);font-weight:950}
    .final-cta p{margin:0;color:var(--muted)}
    .site-footer{
      padding:54px 0 28px;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        #09060d;
      background-size:20px 20px;
      border-top:3px solid var(--border);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr .8fr;
      gap:30px;
      align-items:start;
    }
    .footer-brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:20px;
      font-weight:950;
      margin-bottom:12px;
      color:#fff;
      text-shadow:2px 2px 0 var(--primary);
    }
    .footer-text{color:var(--weak);margin:0;max-width:560px;font-size:14px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:var(--muted);font-weight:800}
    .footer-links a:hover{color:var(--cyan);transform:translateX(2px)}
    .copyright{
      margin-top:34px;
      padding-top:20px;
      border-top:2px solid rgba(255,255,255,.08);
      color:var(--weak);
      font-size:13px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }
    .progress-box{
      padding:18px;
      border:3px solid var(--black);
      background:#120a19;
      box-shadow:var(--shadow-cyan);
    }
    .progress-track{
      height:24px;
      border:3px solid var(--black);
      background:#08050c;
      margin:12px 0;
      overflow:hidden;
    }
    .progress-fill{
      width:72%;
      height:100%;
      background:repeating-linear-gradient(90deg,var(--green) 0,var(--green) 12px,var(--cyan) 12px,var(--cyan) 24px);
    }
    .material-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr 1fr;
      gap:16px;
    }
    @media (max-width:1024px){
      .center-nav{grid-template-columns:auto 1fr auto}
      .nav-side{display:none}
      .brand-logo{justify-self:center;font-size:18px}
      .mobile-nav-toggle{
        display:inline-flex;
        justify-content:center;
        align-items:center;
        width:46px;height:44px;
        background:var(--yellow);
        color:#140900;
        border:3px solid var(--black);
        box-shadow:4px 4px 0 var(--primary);
        font-weight:950;
        cursor:pointer;
      }
      .mobile-panel{
        display:none;
        padding:0 0 16px;
      }
      .mobile-panel.open{display:block}
      .mobile-panel .nav-link{
        display:flex;
        width:100%;
        margin:8px 0;
        justify-content:center;
        border-color:var(--border);
        background:#120a19;
      }
      .hero-grid,.news-wrap{grid-template-columns:1fr}
      .download-grid,.material-grid{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
      .final-cta{grid-template-columns:1fr}
      .section{padding:68px 0}
    }
    @media (max-width:768px){
      .promo-inner{flex-direction:column;gap:6px;padding:8px 0;font-size:13px}
      .hero{padding:46px 0 60px;min-height:auto}
      .hero-stage{padding:16px;box-shadow:7px 7px 0 var(--black)}
      .hero-stage:after{display:none}
      .hero-copy{padding:20px 14px}
      .entry-grid,.mock-layout,.download-grid,.material-grid{grid-template-columns:1fr}
      .section-head{display:block}
      .param-item{grid-template-columns:36px 1fr;align-items:start}
      .param-item .status-badge{grid-column:2;justify-self:start;margin-top:4px}
      .news-list li{grid-template-columns:1fr;gap:4px}
      .compare-table{display:block;overflow-x:auto;white-space:nowrap}
      .footer-grid{grid-template-columns:1fr}
      .hero-actions .pixel-btn,.button-row .pixel-btn{width:100%}
      .brand-logo{font-size:15px;padding:8px 10px}
      .section{padding:54px 0}
    }
    @media (max-width:520px){
      .site-container{width:min(calc(100% - 22px),var(--container))}
      h1{font-size:34px}
      .section-title{font-size:28px}
      .orbit-container,.orbit-slide{min-height:420px}
      .copyright{display:block}
      .copyright span{display:block;margin-top:8px}
    }

/* roulang page: category1 */
:root{
      --bg:#09070f;
      --bg-2:#120b1d;
      --panel:#1b1028;
      --panel-2:#241335;
      --text:#f6f0ff;
      --muted:#c9b8d8;
      --soft:#927fa4;
      --line:#4e2b67;
      --magenta:#ff2ea6;
      --purple:#9b5cff;
      --cyan:#21f6d6;
      --green:#8dff6a;
      --yellow:#ffd34d;
      --orange:#ff8a2a;
      --danger:#ff4d6d;
      --black:#06040a;
      --shadow-mag:8px 8px 0 rgba(255,46,166,.92);
      --shadow-cyan:8px 8px 0 rgba(33,246,214,.85);
      --shadow-yellow:7px 7px 0 rgba(255,211,77,.85);
      --radius:6px;
      --container:1200px;
      --ease:180ms cubic-bezier(.2,.8,.2,1);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Helvetica,Arial,sans-serif;
      color:var(--text);
      line-height:1.72;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 15% 5%, rgba(255,46,166,.28), transparent 34%),
        radial-gradient(circle at 85% 16%, rgba(33,246,214,.16), transparent 30%),
        radial-gradient(circle at 50% 90%, rgba(155,92,255,.17), transparent 36%),
        var(--bg);
      background-size:22px 22px,22px 22px,auto,auto,auto,auto;
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
      mix-blend-mode:overlay;
      opacity:.18;
      z-index:20;
    }
    a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
    .site-container{
      width:min(calc(100% - 32px), var(--container));
      margin:0 auto;
    }
    .promo-strip{
      background:linear-gradient(90deg, var(--yellow), var(--orange) 45%, var(--magenta));
      color:#140910;
      border-bottom:3px solid var(--black);
      font-weight:950;
      letter-spacing:.02em;
      position:relative;
      z-index:12;
    }
    .promo-inner{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      flex-wrap:wrap;
      text-align:center;
      padding:7px 0;
      text-shadow:1px 1px 0 rgba(255,255,255,.25);
    }
    .promo-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:#120812;
      color:var(--yellow);
      border:2px solid #120812;
      padding:2px 8px;
      box-shadow:3px 3px 0 rgba(255,255,255,.28);
    }
    .promo-timer{
      display:inline-flex;
      gap:4px;
      align-items:center;
    }
    .timer-box{
      display:inline-grid;
      place-items:center;
      min-width:30px;
      height:24px;
      background:#120812;
      color:var(--cyan);
      border:2px solid #120812;
      box-shadow:2px 2px 0 rgba(255,255,255,.22);
      font-size:13px;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:11;
      background:rgba(9,7,15,.91);
      backdrop-filter:blur(10px);
      border-bottom:3px solid var(--line);
      box-shadow:0 10px 0 rgba(0,0,0,.28);
    }
    .center-nav{
      min-height:82px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:24px;
      position:relative;
    }
    .nav-side{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .nav-left{justify-content:flex-end}
    .nav-right{justify-content:flex-start}
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:42px;
      padding:8px 13px;
      color:var(--muted);
      font-weight:900;
      border:2px solid transparent;
      text-shadow:2px 2px 0 rgba(0,0,0,.5);
    }
    .nav-link:hover{
      color:var(--cyan);
      border-color:var(--cyan);
      background:rgba(33,246,214,.08);
      transform:translate(-1px,-1px);
      box-shadow:3px 3px 0 rgba(33,246,214,.42);
    }
    .nav-link.active{
      color:#09070f;
      background:var(--yellow);
      border-color:#09070f;
      box-shadow:4px 4px 0 var(--magenta);
    }
    .brand-logo,.footer-brand{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--text);
      font-weight:1000;
      letter-spacing:.01em;
      text-shadow:3px 3px 0 var(--magenta), -2px -2px 0 rgba(33,246,214,.65);
      white-space:nowrap;
    }
    .brand-logo{
      font-size:22px;
      padding:12px 18px;
      background:linear-gradient(180deg,#20122f,#100817);
      border:3px solid var(--text);
      box-shadow:6px 6px 0 var(--magenta);
    }
    .brand-logo:hover{
      transform:translate(-2px,-2px);
      box-shadow:8px 8px 0 var(--cyan);
    }
    .pixel-mark{
      width:18px;
      height:18px;
      display:inline-block;
      background:
        linear-gradient(90deg, var(--cyan) 0 33%, transparent 33% 66%, var(--yellow) 66%),
        linear-gradient(var(--magenta), var(--magenta));
      background-size:18px 9px,18px 18px;
      image-rendering:pixelated;
      border:2px solid var(--black);
      box-shadow:3px 3px 0 var(--cyan);
    }
    .mobile-nav-toggle{
      display:none;
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
      width:46px;
      height:42px;
      color:var(--text);
      background:var(--panel-2);
      border:3px solid var(--cyan);
      box-shadow:4px 4px 0 var(--magenta);
      font-weight:950;
    }
    .mobile-panel{
      display:none;
      padding:0 0 18px;
      gap:10px;
      flex-direction:column;
    }
    .mobile-panel.is-open{display:flex}
    .section{
      padding:82px 0;
      position:relative;
    }
    .section-tight{padding:58px 0}
    .kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:5px 10px;
      background:var(--black);
      color:var(--cyan);
      border:2px solid var(--cyan);
      box-shadow:4px 4px 0 rgba(33,246,214,.35);
      font-size:13px;
      font-weight:950;
      margin-bottom:16px;
    }
    .kicker:before{
      content:"";
      width:9px;
      height:9px;
      background:var(--green);
      box-shadow:0 0 0 2px var(--black),0 0 16px var(--green);
    }
    h1,h2,h3,p{margin-top:0}
    h1{
      font-size:clamp(34px,5vw,62px);
      line-height:1.05;
      margin-bottom:18px;
      font-weight:1000;
      letter-spacing:-.04em;
      text-shadow:4px 4px 0 rgba(255,46,166,.8), -2px -2px 0 rgba(33,246,214,.6);
    }
    h2{
      font-size:clamp(28px,3.4vw,42px);
      line-height:1.18;
      margin-bottom:14px;
      font-weight:1000;
      letter-spacing:-.025em;
      text-shadow:3px 3px 0 rgba(255,46,166,.38);
    }
    h3{
      font-size:21px;
      line-height:1.35;
      font-weight:950;
      margin-bottom:10px;
    }
    .lead{
      color:var(--muted);
      font-size:17px;
      max-width:760px;
    }
    .muted{color:var(--muted)}
    .hero-area{
      padding:54px 0 76px;
      border-bottom:3px solid rgba(78,43,103,.8);
    }
    .hero-grid{
      align-items:center;
    }
    .hero-copy{
      position:relative;
      z-index:2;
      padding:28px 0;
    }
    .age-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin:14px 0 18px;
      padding:8px 12px;
      color:#160a05;
      background:var(--yellow);
      border:3px solid var(--black);
      box-shadow:5px 5px 0 var(--orange);
      font-weight:950;
    }
    .hero-actions,.cta-actions,.button-row{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:center;
      margin-top:24px;
    }
    .pixel-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:12px 18px;
      border:3px solid var(--black);
      border-radius:var(--radius);
      font-weight:1000;
      color:#08050c;
      background:var(--magenta);
      box-shadow:6px 6px 0 var(--cyan);
      line-height:1.2;
      text-align:center;
    }
    .pixel-btn:hover{
      color:#08050c;
      transform:translate(-2px,-2px);
      box-shadow:8px 8px 0 var(--yellow);
    }
    .pixel-btn:active{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--cyan)}
    .pixel-btn.secondary{
      color:var(--text);
      background:var(--panel);
      border-color:var(--cyan);
      box-shadow:6px 6px 0 rgba(255,46,166,.78);
    }
    .pixel-btn.secondary:hover{
      color:#05040a;
      background:var(--cyan);
      border-color:var(--black);
    }
    .hero-kpis{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:28px;
      max-width:560px;
    }
    .kpi{
      background:rgba(27,16,40,.86);
      border:2px solid var(--line);
      padding:12px;
      box-shadow:4px 4px 0 rgba(0,0,0,.5);
    }
    .kpi strong{
      display:block;
      color:var(--yellow);
      font-size:22px;
      line-height:1.1;
      font-weight:1000;
    }
    .kpi span{
      display:block;
      color:var(--muted);
      font-size:13px;
      margin-top:4px;
    }
    .dp-cover{
      position:relative;
      min-height:430px;
      transform:rotate(-2deg);
      padding:18px;
      background:linear-gradient(135deg, rgba(155,92,255,.22), rgba(255,46,166,.12));
      border:3px solid var(--cyan);
      box-shadow:var(--shadow-mag);
    }
    .dp-cover:before{
      content:"一区";
      position:absolute;
      right:-18px;
      top:22px;
      z-index:2;
      padding:8px 14px;
      background:var(--yellow);
      color:#0d0710;
      border:3px solid var(--black);
      box-shadow:5px 5px 0 var(--orange);
      font-size:22px;
      font-weight:1000;
      transform:rotate(8deg);
    }
    .terminal-window{
      height:100%;
      min-height:390px;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        #120918;
      background-size:18px 18px;
      border:3px solid var(--text);
      box-shadow:inset 0 0 0 3px rgba(0,0,0,.45);
      overflow:hidden;
      transform:rotate(2deg);
    }
    .window-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      background:#08050c;
      border-bottom:3px solid var(--text);
    }
    .dots{display:flex;gap:6px}
    .dot{
      width:12px;
      height:12px;
      border:2px solid #08050c;
      background:var(--magenta);
      box-shadow:2px 2px 0 rgba(255,255,255,.22);
    }
    .dot:nth-child(2){background:var(--yellow)}
    .dot:nth-child(3){background:var(--cyan)}
    .window-title{
      color:var(--cyan);
      font-weight:950;
      font-size:13px;
    }
    .panel-body{padding:18px}
    .status-row{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:10px;
      padding:12px;
      margin-bottom:12px;
      background:rgba(255,255,255,.045);
      border:2px solid rgba(255,255,255,.16);
    }
    .status-row strong{font-size:15px;color:var(--text)}
    .status-row small{display:block;color:var(--muted);font-weight:700;margin-top:2px}
    .status-tag{
      padding:4px 8px;
      color:#08050c;
      background:var(--green);
      border:2px solid var(--black);
      font-weight:950;
      white-space:nowrap;
    }
    .status-tag.warn{background:var(--yellow)}
    .entry-mini-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
      margin-top:16px;
    }
    .mini-tile{
      min-height:84px;
      padding:12px;
      background:#1d1029;
      border:2px solid var(--line);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .mini-tile b{color:var(--cyan);font-weight:1000}
    .mini-tile span{font-size:13px;color:var(--muted)}
    .section-head{
      display:flex;
      justify-content:space-between;
      gap:20px;
      align-items:flex-end;
      margin-bottom:30px;
    }
    .section-head .lead{margin-bottom:0}
    .pixel-card{
      position:relative;
      height:100%;
      padding:24px;
      background:linear-gradient(180deg, rgba(36,19,53,.96), rgba(20,10,31,.96));
      border:3px solid var(--line);
      border-radius:var(--radius);
      box-shadow:7px 7px 0 rgba(0,0,0,.55);
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .pixel-card:hover{
      transform:translate(-2px,-2px);
      border-color:var(--cyan);
      box-shadow:9px 9px 0 rgba(33,246,214,.42);
    }
    .pixel-card.featured{
      border-color:var(--yellow);
      box-shadow:var(--shadow-yellow);
    }
    .corner-label{
      position:absolute;
      right:14px;
      top:-14px;
      padding:3px 8px;
      background:var(--magenta);
      color:#fff;
      border:2px solid var(--black);
      box-shadow:3px 3px 0 var(--cyan);
      font-size:12px;
      font-weight:1000;
    }
    .card-icon{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      margin-bottom:14px;
      color:#08050c;
      background:var(--cyan);
      border:3px solid var(--black);
      box-shadow:4px 4px 0 var(--magenta);
      font-size:22px;
      font-weight:1000;
    }
    .tag-list{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:16px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:3px 8px;
      color:var(--cyan);
      background:rgba(33,246,214,.08);
      border:2px solid rgba(33,246,214,.55);
      font-size:13px;
      font-weight:900;
    }
    .steps-board{
      position:relative;
      padding:26px;
      background:#0d0713;
      border:3px solid var(--magenta);
      box-shadow:var(--shadow-cyan);
    }
    .progress-line{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:12px;
      counter-reset:step;
    }
    .step-item{
      counter-increment:step;
      padding:18px 14px;
      background:linear-gradient(180deg,#21112f,#140a1e);
      border:3px solid var(--line);
      min-height:176px;
      position:relative;
    }
    .step-item:before{
      content:"0" counter(step);
      display:inline-grid;
      place-items:center;
      width:40px;
      height:34px;
      margin-bottom:13px;
      background:var(--yellow);
      color:#0b0610;
      border:3px solid var(--black);
      box-shadow:4px 4px 0 var(--magenta);
      font-weight:1000;
    }
    .step-item h3{font-size:18px}
    .step-item p{margin-bottom:0;color:var(--muted);font-size:15px}
    .notice-wrap{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:stretch;
    }
    .terminal-note{
      background:#07040a;
      border:3px solid var(--yellow);
      box-shadow:var(--shadow-mag);
      padding:0;
      overflow:hidden;
    }
    .terminal-note .window-bar{
      border-bottom-color:var(--yellow);
    }
    .terminal-note ul{
      list-style:none;
      margin:0;
      padding:20px;
    }
    .terminal-note li{
      position:relative;
      padding:11px 0 11px 28px;
      color:var(--muted);
      border-bottom:1px dashed rgba(255,255,255,.16);
    }
    .terminal-note li:last-child{border-bottom:0}
    .terminal-note li:before{
      content:"▣";
      position:absolute;
      left:0;
      color:var(--cyan);
      font-weight:950;
    }
    .check-panel{
      display:grid;
      gap:12px;
    }
    .check-row{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:15px;
      background:rgba(36,19,53,.88);
      border:2px solid var(--line);
    }
    .lamp{
      width:14px;
      height:14px;
      flex:0 0 auto;
      margin-top:6px;
      background:var(--green);
      border:2px solid var(--black);
      box-shadow:0 0 16px var(--green);
    }
    .lamp.yellow{background:var(--yellow);box-shadow:0 0 16px var(--yellow)}
    .lamp.cyan{background:var(--cyan);box-shadow:0 0 16px var(--cyan)}
    .compat-board{
      background:linear-gradient(180deg,#160b20,#0a050f);
      border:3px solid var(--cyan);
      box-shadow:8px 8px 0 rgba(255,46,166,.8);
      padding:24px;
    }
    .compat-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:14px;
    }
    .compat-item{
      padding:16px;
      border:2px solid var(--line);
      background:rgba(255,255,255,.045);
    }
    .compat-item strong{display:block;color:var(--text);font-weight:1000}
    .compat-item span{display:block;color:var(--muted);font-size:14px;margin-top:5px}
    .compat-item .tag{margin-top:12px}
    .faq-section .accordion{
      background:transparent;
      border:0;
    }
    .faq-section .accordion-item{
      margin-bottom:12px;
      border:3px solid var(--line);
      background:rgba(27,16,40,.92);
      box-shadow:5px 5px 0 rgba(0,0,0,.52);
    }
    .faq-section .accordion-title{
      color:var(--text);
      border:0;
      background:transparent;
      font-size:17px;
      font-weight:950;
      padding:18px 54px 18px 18px;
    }
    .faq-section .accordion-title:hover,.faq-section .accordion-title:focus{
      color:#08050c;
      background:var(--cyan);
    }
    .faq-section .accordion-title:before{
      color:var(--yellow);
      font-weight:1000;
      font-size:24px;
      right:18px;
      margin-top:-13px;
    }
    .faq-section .accordion-content{
      color:var(--muted);
      background:#100817;
      border:0;
      border-top:2px solid var(--line);
      padding:18px;
    }
    .cta-panel{
      position:relative;
      overflow:hidden;
      padding:34px;
      background:
        radial-gradient(circle at 88% 12%, rgba(255,211,77,.22), transparent 20%),
        linear-gradient(135deg, rgba(255,46,166,.2), rgba(33,246,214,.11)),
        #120918;
      border:3px solid var(--text);
      box-shadow:var(--shadow-mag);
    }
    .cta-panel:after{
      content:"更新";
      position:absolute;
      right:18px;
      top:18px;
      padding:8px 13px;
      color:#08050c;
      background:var(--yellow);
      border:3px solid var(--black);
      box-shadow:4px 4px 0 var(--orange);
      font-weight:1000;
      transform:rotate(6deg);
    }
    .site-footer{
      padding:58px 0 28px;
      background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        #07040a;
      background-size:18px 18px;
      border-top:3px solid var(--line);
      color:var(--muted);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.25fr .75fr 1fr;
      gap:34px;
      align-items:start;
    }
    .footer-brand{
      font-size:20px;
      margin-bottom:14px;
    }
    .footer-text{
      color:var(--muted);
      margin-bottom:0;
      max-width:520px;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:850;
    }
    .footer-links a:hover{
      color:var(--cyan);
      padding-left:4px;
    }
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      margin-top:36px;
      padding-top:20px;
      border-top:2px dashed rgba(255,255,255,.14);
      color:var(--soft);
      font-size:14px;
    }
    @media (max-width:1024px){
      .center-nav{grid-template-columns:1fr auto 1fr;gap:10px}
      .nav-side{gap:6px}
      .nav-link{padding:8px 9px;font-size:14px}
      .brand-logo{font-size:18px;padding:10px 12px}
      .dp-cover{min-height:390px}
      .progress-line{grid-template-columns:repeat(2,1fr)}
      .compat-grid{grid-template-columns:repeat(2,1fr)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .promo-inner{font-size:13px}
      .center-nav{
        min-height:74px;
        display:flex;
        justify-content:center;
        padding-right:58px;
      }
      .nav-side{display:none}
      .mobile-nav-toggle{display:block}
      .brand-logo{max-width:calc(100vw - 110px);font-size:16px}
      .hero-area{padding:34px 0 56px}
      .hero-copy{padding:12px 0 24px}
      .dp-cover{transform:none;min-height:auto;margin-top:16px}
      .terminal-window{transform:none;min-height:360px}
      .hero-kpis{grid-template-columns:1fr}
      .section{padding:56px 0}
      .section-head{display:block}
      .progress-line,.notice-wrap,.compat-grid{grid-template-columns:1fr}
      .cta-panel{padding:26px 20px 86px}
      .footer-grid{grid-template-columns:1fr}
      .copyright{display:block}
      .copyright span{display:block;margin-top:8px}
    }
    @media (max-width:520px){
      .site-container{width:min(calc(100% - 22px), var(--container))}
      h1{font-size:34px}
      h2{font-size:28px}
      .hero-actions,.cta-actions,.button-row{display:grid;grid-template-columns:1fr;gap:12px}
      .pixel-btn{width:100%}
      .entry-mini-grid{grid-template-columns:1fr}
      .pixel-card{padding:20px}
      .steps-board{padding:16px}
      .step-item{min-height:auto}
      .compat-board{padding:18px}
      .status-row{grid-template-columns:1fr}
      .status-tag{justify-self:start}
    }

/* roulang page: category2 */
:root{
      --bg:#110915;
      --bg-2:#1a0b22;
      --panel:#24112d;
      --panel-2:#2d1538;
      --card:#180d20;
      --text:#fff7ff;
      --muted:#cdbbd7;
      --soft:#9a88a8;
      --primary:#ff3fd1;
      --primary-2:#b82cff;
      --cyan:#22f4df;
      --green:#6dff82;
      --yellow:#ffd34d;
      --orange:#ff8b2b;
      --danger:#ff5a6d;
      --line:#52305d;
      --line-2:#7a3d87;
      --shadow-pink:7px 7px 0 rgba(255,63,209,.88);
      --shadow-cyan:7px 7px 0 rgba(34,244,223,.75);
      --shadow-yellow:7px 7px 0 rgba(255,211,77,.75);
      --radius:6px;
      --container:1200px;
      --section:86px;
      --fast:.18s ease;
      --font:PingFang SC,Microsoft YaHei,Noto Sans SC,Helvetica,Arial,sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--text);
      line-height:1.72;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,63,209,.22), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(34,244,223,.16), transparent 28%),
        linear-gradient(180deg,#0b0710 0%, var(--bg) 46%, #09060d 100%);
      overflow-x:hidden;
    }
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.26;
      z-index:-1;
      background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(rgba(255,63,209,.07) 2px, transparent 2px);
      background-size:22px 22px,22px 22px,100% 4px;
      mask-image:linear-gradient(to bottom,rgba(0,0,0,1),rgba(0,0,0,.5),rgba(0,0,0,1));
    }
    a{color:inherit;text-decoration:none;transition:color var(--fast),transform var(--fast),border-color var(--fast),background var(--fast),box-shadow var(--fast)}
    a:hover,a:focus{color:var(--cyan)}
    button,input,textarea{font-family:inherit}
    button{cursor:pointer}
    img{max-width:100%;display:block}
    ::selection{background:var(--primary);color:#120715}
    .site-container{width:min(calc(100% - 32px),var(--container));margin:0 auto}
    .section{padding:var(--section) 0;position:relative}
    .section.tight{padding:58px 0}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border:2px solid var(--cyan);
      background:#0d111b;
      color:var(--cyan);
      font-weight:900;
      font-size:13px;
      line-height:1.2;
      box-shadow:4px 4px 0 rgba(34,244,223,.35);
    }
    .eyebrow:before{content:"";width:8px;height:8px;background:var(--green);box-shadow:0 0 0 2px #092d28}
    .section-head{max-width:820px;margin-bottom:34px}
    .section-head.center{text-align:center;margin-left:auto;margin-right:auto}
    h1,h2,h3,p{margin-top:0}
    h1{
      font-size:clamp(34px,5.2vw,62px);
      line-height:1.06;
      letter-spacing:-1.8px;
      font-weight:1000;
      text-shadow:3px 3px 0 #000, 6px 6px 0 rgba(255,63,209,.38);
      margin:18px 0 18px;
    }
    h2{
      font-size:clamp(28px,3.4vw,42px);
      line-height:1.18;
      font-weight:1000;
      letter-spacing:-.7px;
      margin:12px 0 12px;
      text-shadow:2px 2px 0 rgba(0,0,0,.9);
    }
    h3{font-size:22px;line-height:1.25;font-weight:950;margin-bottom:10px}
    .lead{font-size:18px;color:var(--muted);max-width:760px}
    .small-note{font-size:13px;color:var(--soft);line-height:1.55}
    .promo-strip{
      position:relative;
      z-index:20;
      background:linear-gradient(90deg,#ffcf35 0%,#ff7a2f 36%,#ff3fd1 72%,#22f4df 100%);
      color:#140816;
      border-bottom:3px solid #000;
      box-shadow:0 5px 0 rgba(0,0,0,.42);
    }
    .promo-inner{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      font-weight:1000;
      letter-spacing:.2px;
      text-align:center;
      font-size:14px;
    }
    .promo-badge{
      display:inline-flex;
      align-items:center;
      padding:3px 8px;
      border:2px solid #140816;
      background:#fff7bd;
      box-shadow:3px 3px 0 rgba(0,0,0,.35);
      transform:rotate(-2deg);
      white-space:nowrap;
    }
    .timer-chip{
      display:inline-grid;
      place-items:center;
      min-width:78px;
      padding:3px 8px;
      border:2px solid #140816;
      background:#120816;
      color:var(--yellow);
      box-shadow:3px 3px 0 rgba(0,0,0,.35);
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:30;
      background:rgba(18,8,23,.92);
      backdrop-filter:blur(10px);
      border-bottom:3px solid var(--line);
      box-shadow:0 8px 0 rgba(0,0,0,.32);
    }
    .center-nav{
      position:relative;
      min-height:82px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:18px;
    }
    .nav-side{display:flex;align-items:center;gap:12px}
    .nav-left{justify-content:flex-end}
    .nav-right{justify-content:flex-start}
    .nav-link{
      position:relative;
      display:inline-flex;
      align-items:center;
      min-height:42px;
      padding:9px 13px;
      border:2px solid transparent;
      color:#f7eafd;
      font-size:15px;
      font-weight:900;
      line-height:1;
    }
    .nav-link:hover,.nav-link:focus{
      border-color:var(--cyan);
      background:#121721;
      box-shadow:4px 4px 0 rgba(34,244,223,.42);
      transform:translate(-1px,-1px);
      outline:none;
    }
    .nav-link.active{
      color:#170718;
      background:var(--yellow);
      border-color:#000;
      box-shadow:4px 4px 0 var(--primary);
    }
    .brand-logo,.footer-brand{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      color:#fff;
      font-weight:1000;
      letter-spacing:-.5px;
      line-height:1.1;
    }
    .brand-logo{
      min-height:56px;
      padding:10px 18px;
      border:3px solid #000;
      background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 55%,#6d1bff 100%);
      box-shadow:6px 6px 0 var(--cyan);
      text-shadow:2px 2px 0 #000;
      font-size:20px;
      white-space:nowrap;
    }
    .brand-logo:hover,.brand-logo:focus{color:#fff;transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--yellow)}
    .pixel-mark{
      width:18px;
      height:18px;
      display:inline-block;
      background:var(--yellow);
      box-shadow:6px 0 0 var(--cyan),0 6px 0 #fff,6px 6px 0 var(--green);
      border:2px solid #000;
      flex:0 0 auto;
    }
    .mobile-nav-toggle{
      display:none;
      position:absolute;
      right:0;
      top:50%;
      transform:translateY(-50%);
      width:46px;
      height:42px;
      border:3px solid #000;
      background:var(--cyan);
      color:#07070a;
      font-size:22px;
      font-weight:1000;
      box-shadow:4px 4px 0 var(--primary);
    }
    .mobile-nav-toggle:hover,.mobile-nav-toggle:focus{transform:translateY(calc(-50% - 1px));outline:3px solid rgba(255,211,77,.45)}
    .mobile-panel{
      display:none;
      padding:0 0 16px;
      border-top:2px solid var(--line);
    }
    .mobile-panel.open{display:grid;gap:10px}
    .mobile-panel .nav-link{width:100%;justify-content:center;border-color:var(--line);background:#170c20}
    .hero-alt{
      padding:76px 0 58px;
      position:relative;
      overflow:hidden;
      border-bottom:3px solid rgba(255,63,209,.28);
    }
    .hero-alt:after{
      content:"";
      position:absolute;
      width:360px;
      height:360px;
      right:-110px;
      top:20px;
      background:repeating-conic-gradient(from 45deg,rgba(255,63,209,.22) 0 12deg,rgba(34,244,223,.13) 12deg 24deg,transparent 24deg 36deg);
      filter:blur(.2px);
      opacity:.72;
      z-index:-1;
    }
    .hero-panel{
      border:3px solid #000;
      background:
        linear-gradient(180deg,rgba(255,255,255,.035),transparent),
        linear-gradient(135deg,rgba(43,14,55,.98),rgba(14,9,20,.98));
      box-shadow:var(--shadow-pink);
      padding:30px;
      position:relative;
    }
    .hero-panel .corner-stamp{
      position:absolute;
      right:18px;
      top:-18px;
      padding:8px 12px;
      background:var(--yellow);
      color:#120715;
      border:3px solid #000;
      box-shadow:5px 5px 0 rgba(0,0,0,.65);
      font-weight:1000;
      transform:rotate(3deg);
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 16px}
    .pixel-button{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:48px;
      padding:12px 18px;
      border:3px solid #000;
      background:var(--primary);
      color:#fff;
      font-weight:1000;
      line-height:1.1;
      box-shadow:5px 5px 0 var(--cyan);
      text-shadow:1px 1px 0 #000;
    }
    .pixel-button:hover,.pixel-button:focus{
      color:#fff;
      transform:translate(-2px,-2px);
      box-shadow:8px 8px 0 var(--yellow);
      outline:none;
    }
    .pixel-button.secondary{
      background:#151321;
      color:var(--cyan);
      border-color:var(--cyan);
      box-shadow:5px 5px 0 rgba(255,63,209,.8);
      text-shadow:none;
    }
    .pixel-button.secondary:hover,.pixel-button.secondary:focus{background:var(--cyan);color:#071012;border-color:#000}
    .pixel-button.dark{
      background:#0f0d14;
      color:#fff;
      border-color:var(--line-2);
      box-shadow:5px 5px 0 rgba(255,211,77,.68);
      text-shadow:none;
    }
    .pixel-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
    .age-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border:2px solid #000;
      background:#24122e;
      color:#f7eafd;
      font-size:13px;
      font-weight:900;
      line-height:1.25;
      box-shadow:3px 3px 0 rgba(0,0,0,.55);
    }
    .badge.hot{background:var(--orange);color:#160810}
    .badge.safe{background:var(--cyan);color:#061012}
    .badge.pink{background:var(--primary);color:#fff}
    .badge.gray{background:#251d2f;color:var(--muted);border-color:var(--line)}
    .dashboard{
      border:3px solid #000;
      background:#0e1017;
      box-shadow:var(--shadow-cyan);
      overflow:hidden;
    }
    .dash-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      background:#25112e;
      border-bottom:3px solid #000;
      font-weight:1000;
    }
    .window-dots{display:flex;gap:6px}
    .window-dots span{width:10px;height:10px;border:2px solid #000;background:var(--yellow)}
    .window-dots span:nth-child(2){background:var(--primary)}
    .window-dots span:nth-child(3){background:var(--cyan)}
    .dash-body{padding:18px}
    .status-big{
      display:grid;
      grid-template-columns:1fr auto;
      gap:14px;
      align-items:center;
      padding:16px;
      border:2px solid var(--line);
      background:linear-gradient(135deg,#1b0d25,#110b17);
      margin-bottom:14px;
    }
    .pulse{
      width:44px;height:44px;border:3px solid #000;background:var(--green);
      box-shadow:0 0 0 6px rgba(109,255,130,.12),5px 5px 0 var(--primary);
      animation:pulse 1.8s infinite;
    }
    @keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
    .meter-list{display:grid;gap:10px}
    .meter-item{
      border:2px solid var(--line);
      background:#15101e;
      padding:11px;
    }
    .meter-label{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px;font-weight:900;margin-bottom:7px}
    .meter-bar{height:12px;border:2px solid #000;background:#07060a}
    .meter-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));}
    .matrix-grid{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:18px;
    }
    .card{
      border:3px solid #000;
      background:
        linear-gradient(180deg,rgba(255,255,255,.035),transparent),
        var(--card);
      color:var(--text);
      box-shadow:6px 6px 0 rgba(255,63,209,.55);
      border-radius:var(--radius);
      padding:22px;
      transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast),background var(--fast);
    }
    .card:hover{
      transform:translate(-3px,-3px);
      box-shadow:9px 9px 0 rgba(34,244,223,.65);
      border-color:var(--cyan);
    }
    .card.wide{grid-column:span 7}
    .card.narrow{grid-column:span 5}
    .card.full{grid-column:span 12}
    .card.gold{box-shadow:6px 6px 0 rgba(255,211,77,.75)}
    .card.cyan{box-shadow:6px 6px 0 rgba(34,244,223,.62)}
    .card p{color:var(--muted);margin-bottom:0}
    .compat-table{
      border:3px solid #000;
      background:#100b16;
      box-shadow:var(--shadow-yellow);
      overflow:hidden;
    }
    .compat-row{
      display:grid;
      grid-template-columns:1.1fr 1.4fr 1fr;
      gap:0;
      border-bottom:2px solid var(--line);
      min-height:70px;
    }
    .compat-row:last-child{border-bottom:0}
    .compat-cell{
      padding:16px;
      border-right:2px solid var(--line);
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
    }
    .compat-cell:last-child{border-right:0}
    .compat-head{
      background:linear-gradient(90deg,var(--primary),#6d1bff);
      color:#fff;
      font-weight:1000;
      text-shadow:1px 1px 0 #000;
    }
    .compat-head .compat-cell{color:#fff}
    .status-tag{
      display:inline-flex;
      align-items:center;
      padding:5px 9px;
      border:2px solid #000;
      color:#08090d;
      background:var(--green);
      font-weight:1000;
      font-size:13px;
      white-space:nowrap;
    }
    .status-tag.warn{background:var(--yellow)}
    .status-tag.note{background:var(--cyan)}
    .entry-matrix{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .entry-link{
      min-height:92px;
      padding:16px;
      border:3px solid #000;
      background:#1b1025;
      box-shadow:5px 5px 0 rgba(255,63,209,.65);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:8px;
      font-weight:1000;
    }
    .entry-link strong{font-size:17px}
    .entry-link span{font-size:12px;color:var(--muted);font-weight:800}
    .entry-link:hover,.entry-link:focus{
      color:#fff;
      background:#271331;
      transform:translate(-2px,-2px);
      box-shadow:8px 8px 0 rgba(34,244,223,.72);
      outline:none;
    }
    .check-panel{
      border:3px solid #000;
      background:#0e1017;
      box-shadow:var(--shadow-cyan);
      padding:22px;
    }
    .check-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
    .check-list li{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:12px;
      align-items:start;
      padding:13px;
      border:2px solid var(--line);
      background:#17101f;
      color:var(--muted);
    }
    .check-list li:before{
      content:"!";
      width:24px;
      height:24px;
      display:grid;
      place-items:center;
      border:2px solid #000;
      background:var(--yellow);
      color:#120715;
      font-weight:1000;
      line-height:1;
      box-shadow:3px 3px 0 rgba(0,0,0,.45);
    }
    .mini-orbit{
      border:3px solid #000;
      background:#111018;
      box-shadow:var(--shadow-pink);
      overflow:hidden;
    }
    .orbit-container{min-height:280px}
    .orbit-slide{
      padding:24px;
      background:
        linear-gradient(90deg,rgba(255,63,209,.09) 50%,transparent 50%),
        linear-gradient(rgba(34,244,223,.06) 50%,transparent 50%),
        #111018;
      background-size:20px 20px;
    }
    .pixel-screen{
      min-height:220px;
      border:3px solid #000;
      background:linear-gradient(135deg,#251032,#0e1017);
      padding:18px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }
    .screen-block{
      border:2px solid var(--line);
      background:#170d20;
      padding:14px;
    }
    .screen-block.long{grid-column:1/-1}
    .fake-line{height:10px;background:var(--cyan);border:2px solid #000;margin:8px 0}
    .fake-line.pink{background:var(--primary)}
    .fake-line.yellow{background:var(--yellow)}
    .orbit-previous,.orbit-next{
      width:38px!important;
      height:38px!important;
      border:3px solid #000!important;
      background:var(--cyan)!important;
      color:#08090d!important;
      font-weight:1000;
      box-shadow:4px 4px 0 var(--primary);
    }
    .orbit-bullets button{
      width:13px;
      height:13px;
      border-radius:0;
      border:2px solid #000;
      background:#4a2c55;
    }
    .orbit-bullets button.is-active{background:var(--yellow)}
    .accordion{background:transparent}
    .accordion-item{margin-bottom:12px;border:3px solid #000;background:#170d20;box-shadow:5px 5px 0 rgba(255,63,209,.44)}
    .accordion-title{
      background:#20102a;
      color:#fff;
      border:0;
      border-bottom:2px solid transparent;
      font-size:17px;
      font-weight:950;
      padding:18px 48px 18px 18px;
    }
    .accordion-title:hover,.accordion-title:focus{
      background:#2a1536;
      color:var(--cyan);
      outline:none;
    }
    .accordion-title:before{font-size:24px;right:18px;margin-top:-12px}
    .is-active>.accordion-title{border-bottom-color:var(--cyan);color:var(--yellow)}
    .accordion-content{
      background:#120b18;
      color:var(--muted);
      border:0;
      padding:18px;
      font-size:15px;
    }
    .cta-box{
      position:relative;
      overflow:hidden;
      border:3px solid #000;
      background:
        radial-gradient(circle at 15% 20%,rgba(255,211,77,.22),transparent 22%),
        radial-gradient(circle at 85% 80%,rgba(34,244,223,.18),transparent 24%),
        linear-gradient(135deg,#32103c,#111018);
      box-shadow:var(--shadow-yellow);
      padding:34px;
    }
    .cta-box:before{
      content:"18+";
      position:absolute;
      right:22px;
      top:20px;
      display:grid;
      place-items:center;
      width:74px;
      height:52px;
      border:3px solid #000;
      background:var(--orange);
      color:#130713;
      font-weight:1000;
      transform:rotate(5deg);
      box-shadow:5px 5px 0 rgba(0,0,0,.6);
    }
    .site-footer{
      margin-top:30px;
      padding:58px 0 26px;
      background:
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
        #09070d;
      background-size:20px 20px;
      border-top:3px solid var(--line);
      color:var(--muted);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr 1fr;
      gap:32px;
      align-items:start;
    }
    .footer-brand{justify-content:flex-start;font-size:20px;color:#fff;margin-bottom:14px}
    .footer-text{color:var(--muted);font-size:14px;margin-bottom:0}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:var(--muted);font-weight:850}
    .footer-links a:hover,.footer-links a:focus{color:var(--cyan);transform:translateX(3px)}
    .copyright{
      margin-top:34px;
      padding-top:18px;
      border-top:2px solid var(--line);
      display:flex;
      justify-content:space-between;
      gap:16px;
      color:#8d7a99;
      font-size:13px;
      flex-wrap:wrap;
    }
    .divider-pixel{
      height:10px;
      background:repeating-linear-gradient(90deg,var(--primary) 0 20px,var(--cyan) 20px 40px,var(--yellow) 40px 60px,#000 60px 70px);
      border-top:3px solid #000;
      border-bottom:3px solid #000;
    }
    @media screen and (max-width:1024px){
      :root{--section:70px}
      .entry-matrix{grid-template-columns:repeat(2,1fr)}
      .card.wide,.card.narrow{grid-column:span 6}
      .compat-row{grid-template-columns:1fr}
      .compat-cell{border-right:0;border-bottom:2px solid var(--line)}
      .compat-cell:last-child{border-bottom:0}
    }
    @media screen and (max-width:767px){
      .promo-inner{font-size:12px;gap:8px;justify-content:flex-start;overflow:auto;padding:7px 0}
      .center-nav{display:flex;justify-content:center;min-height:74px;padding-right:58px}
      .nav-side{display:none}
      .brand-logo{font-size:16px;padding:9px 12px;max-width:calc(100vw - 118px)}
      .brand-logo span:last-child{overflow:hidden;text-overflow:ellipsis}
      .mobile-nav-toggle{display:block}
      .hero-alt{padding:52px 0 44px}
      .hero-panel{padding:22px;box-shadow:5px 5px 0 rgba(255,63,209,.72)}
      .hero-panel .corner-stamp{position:static;display:inline-flex;margin-bottom:10px;transform:rotate(-2deg)}
      .dashboard{margin-top:28px}
      .matrix-grid{grid-template-columns:1fr}
      .card,.card.wide,.card.narrow,.card.full{grid-column:auto}
      .entry-matrix{grid-template-columns:1fr}
      .pixel-screen{grid-template-columns:1fr}
      .screen-block.long{grid-column:auto}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .pixel-button{width:100%}
      .footer-grid{grid-template-columns:1fr}
      .cta-box{padding:26px 20px 92px}
      .cta-box:before{right:18px;bottom:20px;top:auto}
    }
    @media screen and (max-width:520px){
      .site-container{width:min(calc(100% - 22px),var(--container))}
      h1{font-size:32px;letter-spacing:-1px}
      h2{font-size:27px}
      .lead{font-size:16px}
      .section{padding:54px 0}
      .card,.check-panel,.dash-body{padding:16px}
      .compat-cell{padding:13px}
      .copyright{display:grid}
    }