/* roulang page: index */
:root{
      --ink:#17211e;
      --muted:#65736d;
      --paper:#f4f5ef;
      --panel:#ffffff;
      --deep:#101a17;
      --deep-2:#182721;
      --line:#dbe1d9;
      --bronze:#b27a43;
      --bronze-dark:#8f5d30;
      --mint:#b8d8c8;
      --cyan:#75c7b2;
      --amber:#d4a45b;
      --radius:14px;
      --shadow:0 16px 38px rgba(16,33,26,.09);
      --container:1200px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.75;font-size:15px}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid rgba(117,199,178,.7);outline-offset:3px}
    .container{width:min(var(--container),calc(100% - 44px));margin:auto}
    .notice{height:34px;background:#263b31;color:#d8e6dc;font-size:12px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}
    .notice .container{display:flex;align-items:center;gap:18px}
    .notice strong{color:#d4a45b;font-weight:600}
    .notice span{overflow:hidden;text-overflow:ellipsis}
    header{background:var(--deep);color:#eef3ed;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.08)}
    .nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}
    .logo{display:flex;align-items:center;gap:11px;min-width:220px}
    .logo-mark{width:34px;height:34px;border:1px solid var(--bronze);display:grid;place-items:center;color:var(--bronze);font-weight:800;font-size:12px;border-radius:8px}
    .logo-text{font-size:18px;font-weight:800;letter-spacing:.02em}
    .logo-text em{display:block;font-size:10px;color:#94aa9d;font-style:normal;letter-spacing:.13em;margin-top:-3px}
    nav{display:flex;align-items:center;gap:8px}
    nav a{position:relative;padding:26px 14px;color:#b8c6bd;font-size:14px}
    nav a:hover,nav a.active{color:#fff}
    nav a.active:after{content:"";position:absolute;bottom:0;left:14px;right:14px;height:3px;background:var(--bronze);border-radius:3px 3px 0 0}
    .nav-button{border:1px solid rgba(180,220,204,.35);padding:10px 16px!important;border-radius:8px;color:var(--mint)!important}
    .nav-button:hover{background:#28443a;border-color:var(--mint)}
    .menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px}
    .hero{min-height:625px;color:#fff;position:relative;background:linear-gradient(90deg,rgba(10,20,17,.94) 0%,rgba(10,20,17,.76) 47%,rgba(10,20,17,.34) 100%),url("/assets/images/backpic/back-1.webp") center/cover}
    .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 75%,var(--paper));pointer-events:none}
    .hero-content{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:74px;align-items:center;padding:86px 0 112px}
    .eyebrow,.section-kicker{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:var(--cyan);font-weight:700}
    .eyebrow:before,.section-kicker:before{content:"";width:25px;height:1px;background:currentColor}
    h1{font-size:clamp(36px,5vw,59px);line-height:1.18;letter-spacing:-.045em;margin:20px 0 22px;max-width:640px}
    .hero-copy{color:#c9d6cc;max-width:590px;font-size:17px;line-height:1.9}
    .hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
    .btn{display:inline-flex;justify-content:center;align-items:center;min-height:46px;padding:0 20px;border-radius:8px;border:1px solid transparent;font-weight:700;font-size:14px}
    .btn-primary{background:var(--bronze);color:#fff}
    .btn-primary:hover{background:#c18b50;transform:translateY(-2px);box-shadow:0 8px 18px rgba(178,122,67,.25)}
    .btn-outline{border-color:rgba(222,239,228,.35);color:#edf4ee}
    .btn-outline:hover{border-color:var(--mint);background:rgba(184,216,200,.12)}
    .hero-panel{background:rgba(20,34,29,.88);border:1px solid rgba(190,221,205,.25);border-radius:12px;padding:27px;box-shadow:0 22px 60px rgba(0,0,0,.24);max-width:465px;justify-self:end}
    .panel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(220,238,225,.14);padding-bottom:18px;margin-bottom:21px}
    .panel-top span{font-size:12px;color:#a9bdb0}
    .status{display:inline-flex;align-items:center;gap:7px;color:#c9dbcf;font-size:12px}
    .status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan)}
    .match-title{font-size:22px;font-weight:700;margin-bottom:3px}
    .match-sub{font-size:13px;color:#9daf9f}
    .score-row{display:grid;grid-template-columns:1fr 68px 1fr;align-items:center;gap:12px;padding:25px 0;text-align:center}
    .team{font-weight:700;font-size:15px}
    .team small{display:block;color:#9daf9f;font-size:11px;font-weight:400;margin-top:4px}
    .score{font-size:34px;color:#e6bd7c;line-height:1;font-weight:800;letter-spacing:.08em}
    .panel-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .meta-cell{background:rgba(255,255,255,.06);padding:10px 12px;border-radius:7px}
    .meta-cell b{display:block;font-size:11px;color:#91a99b;font-weight:400}
    .meta-cell span{font-size:13px;color:#eef4ee}
    .timeline{position:relative;z-index:2;margin-top:-52px}
    .timeline-inner{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:24px 28px}
    .timeline-track{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
    .timeline-track:before{content:"";position:absolute;top:9px;left:5%;right:5%;height:1px;background:#cfd8d0}
    .time-node{position:relative;padding-top:29px;text-align:center}
    .time-node:before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:var(--paper);border:3px solid var(--bronze);z-index:1}
    .time-node strong{display:block;font-size:14px}
    .time-node span{font-size:12px;color:var(--muted)}
    section{padding:105px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}
    .section-head h2{font-size:clamp(27px,3vw,38px);line-height:1.25;letter-spacing:-.03em;margin-top:12px}
    .section-head p{max-width:480px;color:var(--muted);font-size:14px}
    .archive-grid{display:grid;grid-template-columns:1.38fr .72fr;gap:20px}
    .archive-main,.archive-small{position:relative;overflow:hidden;border-radius:12px;background:var(--deep);color:#fff;min-height:350px}
    .archive-small{min-height:165px}
    .archive-main img,.archive-small img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.72;transition:.4s}
    .archive-main:hover img,.archive-small:hover img{transform:scale(1.04);opacity:.85}
    .archive-main:after,.archive-small:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(10,19,15,.96))}
    .archive-copy{position:absolute;z-index:1;left:28px;right:28px;bottom:25px}
    .archive-side{display:grid;gap:20px}
    .tag{display:inline-block;background:#e9eee8;color:#547066;padding:4px 9px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.04em}
    .tag.dark{background:rgba(184,216,200,.15);color:var(--mint)}
    .archive-copy h3{font-size:24px;line-height:1.35;margin:12px 0 7px}
    .archive-small .archive-copy h3{font-size:18px;margin:8px 0 3px}
    .archive-copy p{font-size:13px;color:#c4d1c7}
    .feature-band{background:#e8eee7}
    .feature-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
    .feature-image{position:relative}
    .feature-image img{width:100%;height:365px;object-fit:cover;border-radius:10px;box-shadow:var(--shadow)}
    .image-label{position:absolute;left:20px;bottom:20px;background:var(--deep);color:#dbe9dc;padding:10px 14px;border-radius:6px;font-size:12px}
    .index-list{border-top:1px solid #cdd8cf;margin-top:27px}
    .index-item{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid #cdd8cf}
    .index-no{font-size:23px;color:var(--bronze);font-weight:800}
    .index-item strong{font-size:16px;display:block}
    .index-item small{color:var(--muted);font-size:12px}
    .arrow{font-size:20px;color:var(--bronze)}
    .score-section{background:var(--deep);color:#f0f5ef}
    .score-section .section-head p{color:#a9b9ae}
    .score-board{border:1px solid rgba(202,226,210,.2);border-radius:10px;overflow:hidden}
    .score-filter{display:flex;gap:8px;padding:17px;background:#172821;border-bottom:1px solid rgba(202,226,210,.14);flex-wrap:wrap}
    .filter{border:1px solid rgba(202,226,210,.22);background:transparent;color:#b6c9bb;border-radius:5px;padding:7px 12px;font-size:12px}
    .filter.active,.filter:hover{background:var(--bronze);color:#fff;border-color:var(--bronze)}
    .score-table{width:100%;border-collapse:collapse}
    .score-table th,.score-table td{text-align:left;padding:17px 20px;border-bottom:1px solid rgba(202,226,210,.12);font-size:13px}
    .score-table th{font-size:11px;color:#91aa9b;font-weight:500;background:#14231d}
    .score-table tr:last-child td{border-bottom:0}
    .score-table td:nth-child(4){font-size:20px;color:#e4bd7a;font-weight:800;letter-spacing:.08em}
    .state{color:var(--cyan);font-size:12px}
    .state.archive{color:#b5c0b7}
    .rule-box{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .rule-card{background:var(--panel);border:1px solid var(--line);padding:25px;border-radius:10px}
    .rule-card h3{font-size:18px;margin-bottom:10px}
    .rule-card p{color:var(--muted);font-size:14px}
    .rule-card.warning{border-left:4px solid var(--amber);background:#fbf8f0}
    .faq-wrap{max-width:900px;margin:auto}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;background:none;border:0;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:20px 0;color:var(--ink);font-weight:700;font-size:16px}
    .faq-question span{color:var(--bronze);font-size:22px;font-weight:400;transition:.25s}
    .faq-answer{display:none;color:var(--muted);font-size:14px;padding:0 35px 20px 0}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open .faq-question span{transform:rotate(45deg)}
    .cta{padding:64px 0;background:var(--deep-2);color:#fff}
    .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
    .cta h2{font-size:30px;line-height:1.35;margin:10px 0}
    .cta p{color:#b8c9bc;font-size:14px}
    footer{background:#0d1512;color:#aebcb1;padding:54px 0 24px}
    .footer-grid{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:50px;padding-bottom:38px;border-bottom:1px solid rgba(220,238,225,.12)}
    footer .logo-text{color:#eef5ee}
    footer h3{color:#edf3ed;font-size:14px;margin-bottom:15px}
    footer a{display:block;font-size:13px;margin:8px 0;color:#aebcb1}
    footer a:hover{color:var(--mint)}
    .footer-note{font-size:12px;line-height:1.8;color:#84968a}
    .copyright{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:12px;color:#75877b}
    @media(max-width:1024px){
      .hero-content{gap:35px}.feature-grid{gap:35px}
      nav a{padding-left:9px;padding-right:9px}
      nav a.active:after{left:9px;right:9px}
    }
    @media(max-width:768px){
      .container{width:min(100% - 30px,var(--container))}
      .notice{height:36px}.nav-wrap{height:66px}.menu-toggle{display:block}
      nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--deep);padding:12px 15px 20px;flex-direction:column;align-items:stretch;border-top:1px solid rgba(255,255,255,.1)}
      nav.open{display:flex}nav a{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
      nav a.active:after{left:0;right:auto;top:15px;bottom:15px;width:3px;height:auto}
      .logo{min-width:0}.logo-text{font-size:15px}.logo-mark{width:30px;height:30px}
      .hero{min-height:auto}.hero-content{grid-template-columns:1fr;padding:62px 0 92px}
      h1{font-size:35px}.hero-copy{font-size:15px}.hero-panel{justify-self:stretch}
      .timeline{margin-top:-38px}.timeline-inner{padding:20px 13px;overflow-x:auto}.timeline-track{min-width:580px}
      section{padding:72px 0}.section-head{display:block}.section-head p{margin-top:14px}
      .archive-grid,.feature-grid,.rule-box{grid-template-columns:1fr}
      .archive-main{min-height:310px}.archive-side{grid-template-columns:1fr 1fr}
      .feature-image img{height:280px}.score-board{overflow-x:auto}.score-table{min-width:700px}
      .cta-inner{display:block}.cta .btn{margin-top:24px}
      .footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:1/-1}
      .copyright{display:block}.copyright span{display:block;margin-top:7px}
    }
    @media(max-width:520px){
      .archive-side{grid-template-columns:1fr}.archive-small{min-height:180px}
      .panel-meta{grid-template-columns:1fr 1fr}.score-row{gap:5px}.team{font-size:13px}
      .rule-card{padding:20px}.footer-grid{grid-template-columns:1fr}
      .footer-grid>div:first-child{grid-column:auto}.hero-actions .btn{width:100%}
    }

/* roulang page: category1 */
:root{
      --bg:#0e1512;
      --bg-2:#121c18;
      --panel:#17231f;
      --panel-2:#1d2b26;
      --surface:#f1efe8;
      --surface-2:#e8e4da;
      --text:#eef3ee;
      --muted:#a7b3ab;
      --muted-2:#7d8a83;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(23,35,31,.12);
      --accent:#58c7a0;
      --accent-2:#d7a35d;
      --accent-3:#89e3cd;
      --warn:#d2a15d;
      --danger:#c08b67;
      --shadow:0 18px 50px rgba(0,0,0,.28);
      --shadow-soft:0 8px 24px rgba(0,0,0,.16);
      --radius:16px;
      --radius-sm:12px;
      --radius-xs:10px;
      --container:1240px;
      --gap:24px;
      --transition:.22s ease;
      --font: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      background:
        radial-gradient(1200px 650px at 12% -10%, rgba(88,199,160,.08), transparent 62%),
        radial-gradient(900px 500px at 88% 0%, rgba(215,163,93,.08), transparent 56%),
        linear-gradient(180deg, #0c1210 0%, #101815 100%);
      color:var(--text);
      line-height:1.8;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(88,199,160,.24);color:#fff}
    .container{
      width:min(100% - 32px, var(--container));
      margin:0 auto;
    }
    .topbar{
      background:linear-gradient(90deg, rgba(88,199,160,.14), rgba(215,163,93,.14));
      color:#ecf6f0;
      border-bottom:1px solid rgba(255,255,255,.08);
      font-size:14px;
    }
    .topbar .container{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:10px 0;
      white-space:nowrap;
      overflow:hidden;
    }
    .topbar strong{color:var(--accent-3);font-weight:600}
    .topbar span{
      overflow:hidden;
      text-overflow:ellipsis;
    }
    header{
      position:sticky;
      top:0;
      z-index:30;
      background:rgba(14,21,18,.9);
      backdrop-filter:saturate(120%) blur(8px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:16px 0;
    }
    .logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      font-weight:700;
      letter-spacing:.2px;
      min-width:0;
    }
    .logo-mark{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:14px;
      background:linear-gradient(145deg, rgba(88,199,160,.18), rgba(215,163,93,.2));
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
      box-shadow:var(--shadow-soft);
      flex:0 0 auto;
    }
    .logo-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      font-size:16px;
      color:var(--text);
    }
    .logo-text em{
      font-style:normal;
      font-weight:500;
      color:var(--muted);
      font-size:12px;
      letter-spacing:.2px;
    }
    #site-nav{
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      max-width:100%;
    }
    #site-nav::-webkit-scrollbar{display:none}
    #site-nav a{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:12px 16px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
      white-space:nowrap;
      flex:0 0 auto;
      font-size:15px;
    }
    #site-nav a:hover,
    #site-nav a:focus-visible{
      outline:none;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.08);
      color:var(--text);
      transform:translateY(-1px);
    }
    #site-nav a.active{
      color:#08110d;
      background:linear-gradient(135deg, var(--accent), #7ee2c2);
      box-shadow:0 10px 24px rgba(88,199,160,.18);
    }
    #site-nav .nav-button{
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
    }
    main{display:block}
    .hero{
      position:relative;
      padding:42px 0 28px;
    }
    .hero-shell{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      border-radius:28px;
      background:
        linear-gradient(180deg, rgba(10,16,14,.16), rgba(10,16,14,.84)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      box-shadow:var(--shadow);
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(110deg, rgba(14,21,18,.92) 0%, rgba(14,21,18,.72) 50%, rgba(14,21,18,.86) 100%);
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:28px;
      padding:36px;
      align-items:stretch;
      z-index:1;
    }
    .breadcrumb{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      color:var(--muted);
      font-size:14px;
      margin-bottom:16px;
    }
    .breadcrumb a{color:#dfe8e2}
    .breadcrumb span{opacity:.65}
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#dbe8e1;
      font-size:14px;
      margin-bottom:14px;
    }
    .eyebrow .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(88,199,160,.12);
    }
    h1{
      margin:0;
      font-size:clamp(32px, 5vw, 52px);
      line-height:1.1;
      letter-spacing:-.02em;
      max-width:12ch;
    }
    .hero p{
      margin:16px 0 0;
      color:#ced7d1;
      font-size:17px;
      line-height:1.88;
      max-width:58ch;
    }
    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:22px 0 0;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      color:#e6efe8;
      font-size:13px;
      line-height:1;
    }
    .tag.alt{
      background:rgba(88,199,160,.12);
      border-color:rgba(88,199,160,.22);
      color:#cdf4e4;
    }
    .tag.warn{
      background:rgba(215,163,93,.14);
      border-color:rgba(215,163,93,.22);
      color:#f2dbc0;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:46px;
      padding:0 18px;
      border-radius:14px;
      border:1px solid transparent;
      transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
      font-weight:600;
      letter-spacing:.1px;
    }
    .btn:hover,
    .btn:focus-visible{
      outline:none;
      transform:translateY(-1px);
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--accent), #77e0bd);
      color:#09110d;
      box-shadow:0 14px 30px rgba(88,199,160,.16);
    }
    .btn-primary:hover{box-shadow:0 16px 34px rgba(88,199,160,.22)}
    .btn-secondary{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.1);
      color:var(--text);
    }
    .btn-secondary:hover{background:rgba(255,255,255,.06)}
    .btn-ghost{
      background:rgba(215,163,93,.1);
      border-color:rgba(215,163,93,.18);
      color:#f3dec4;
    }
    .hero-panel{
      display:flex;
      flex-direction:column;
      gap:16px;
      padding:18px;
      border-radius:24px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(2px);
    }
    .hero-media{
      position:relative;
      overflow:hidden;
      border-radius:20px;
      aspect-ratio:16/11;
      border:1px solid rgba(255,255,255,.08);
      background:#13211b;
    }
    .hero-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:saturate(1.02) contrast(1.03);
    }
    .hero-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(8,13,11,.06), rgba(8,13,11,.58));
    }
    .hero-overlay{
      position:absolute;
      inset:auto 14px 14px 14px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      z-index:1;
    }
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
    }
    .metric{
      padding:14px 15px;
      border-radius:16px;
      background:rgba(16,24,21,.82);
      border:1px solid rgba(255,255,255,.08);
    }
    .metric .label{
      color:var(--muted);
      font-size:13px;
    }
    .metric .value{
      display:block;
      margin-top:6px;
      color:var(--text);
      font-size:18px;
      font-weight:700;
      line-height:1.25;
    }
    .metric .sub{
      display:block;
      margin-top:6px;
      color:var(--muted-2);
      font-size:13px;
      line-height:1.55;
    }
    .section{
      padding:18px 0 0;
    }
    .section + .section{margin-top:26px}
    .section-card{
      background:linear-gradient(180deg, rgba(241,239,232,.96), rgba(235,231,222,.96));
      color:#122018;
      border:1px solid rgba(255,255,255,.06);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .section-card.dark{
      background:linear-gradient(180deg, rgba(23,35,31,.96), rgba(19,29,25,.98));
      color:var(--text);
    }
    .section-inner{
      padding:30px;
    }
    .section-head{
      display:flex;
      flex-wrap:wrap;
      gap:14px;
      align-items:end;
      justify-content:space-between;
      margin-bottom:20px;
    }
    .section-title-wrap{max-width:760px}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent-2);
      font-size:13px;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      margin-bottom:10px;
    }
    .section-title{
      margin:0;
      font-size:clamp(24px, 3vw, 34px);
      line-height:1.2;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:12px 0 0;
      color:inherit;
      opacity:.84;
      max-width:68ch;
      font-size:16px;
    }
    .subtle{
      color:var(--muted);
      font-size:14px;
    }
    .split-grid{
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:20px;
    }
    .panel{
      border-radius:22px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    .panel .panel-inner{padding:18px}
    .panel.alt{
      background:linear-gradient(180deg, rgba(25,37,32,.92), rgba(18,27,23,.96));
    }
    .timeline{
      display:flex;
      gap:14px;
      overflow-x:auto;
      padding:4px 2px 12px;
      scrollbar-width:none;
    }
    .timeline::-webkit-scrollbar{display:none}
    .timeline-item{
      flex:1 0 220px;
      min-width:220px;
      padding:16px 16px 14px;
      border-radius:18px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      position:relative;
    }
    .timeline-item::before{
      content:"";
      position:absolute;
      left:16px;
      top:16px;
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(88,199,160,.1);
    }
    .timeline-item .phase{
      padding-left:18px;
      color:#d7e6df;
      font-weight:700;
      font-size:16px;
    }
    .timeline-item .time{
      margin-top:10px;
      color:var(--muted);
      font-size:13px;
    }
    .timeline-item .note{
      margin-top:8px;
      color:#dce5df;
      font-size:14px;
      line-height:1.7;
    }
    .timeline-item .status{
      display:inline-flex;
      margin-top:12px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      background:rgba(215,163,93,.12);
      border:1px solid rgba(215,163,93,.22);
      color:#f0d7b6;
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      border:1px solid rgba(23,35,31,.12);
      background:rgba(255,255,255,.58);
      color:#24312c;
      font-size:14px;
      transition:transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
    }
    .section-card.dark .chip,
    .section-dark .chip{
      border-color:rgba(255,255,255,.1);
      background:rgba(255,255,255,.05);
      color:#e7f0eb;
    }
    .chip:hover,.chip:focus-visible{
      outline:none;
      transform:translateY(-1px);
      border-color:rgba(88,199,160,.28);
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .chip.is-active{
      background:linear-gradient(135deg, var(--accent), #7ee2c2);
      color:#09110d;
      border-color:transparent;
      box-shadow:0 12px 26px rgba(88,199,160,.18);
    }
    .filters{
      display:grid;
      grid-template-columns:1fr auto;
      gap:16px;
      align-items:end;
      margin-top:20px;
    }
    .searchbox{
      display:grid;
      gap:8px;
    }
    .searchbox label{
      font-size:14px;
      color:inherit;
      opacity:.85;
    }
    .searchbox input{
      width:100%;
      min-height:48px;
      padding:0 16px;
      border-radius:14px;
      border:1px solid rgba(23,35,31,.16);
      background:rgba(255,255,255,.82);
      color:#14201b;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
    }
    .section-card.dark .searchbox input{
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.08);
      color:var(--text);
    }
    .searchbox input:focus{
      outline:2px solid rgba(88,199,160,.24);
      outline-offset:2px;
    }
    .form-hint{
      font-size:13px;
      color:var(--muted);
    }
    .feature-article{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:22px;
      align-items:stretch;
    }
    .feature-media{
      position:relative;
      min-height:320px;
      border-radius:20px;
      overflow:hidden;
      border:1px solid rgba(23,35,31,.12);
      background:#dfe3db;
    }
    .feature-media img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .feature-media .caption{
      position:absolute;
      inset:auto 18px 18px 18px;
      z-index:1;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .feature-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(8,12,10,.06), rgba(8,12,10,.58));
    }
    .article-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:14px;
    }
    .article-copy h3,
    .mini-card h4,
    .score-card h4{
      margin:0;
      line-height:1.25;
    }
    .article-copy h3{
      font-size:clamp(24px, 2.8vw, 32px);
      color:#17231f;
      letter-spacing:-.02em;
    }
    .article-copy p{
      margin:0;
      color:#31403a;
      font-size:16px;
      line-height:1.84;
    }
    .article-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .article-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:20px;
      margin-top:20px;
    }
    .mini-list{
      display:grid;
      gap:16px;
    }
    .mini-card{
      display:grid;
      gap:10px;
      padding:18px;
      border-radius:18px;
      background:rgba(255,255,255,.76);
      border:1px solid rgba(23,35,31,.08);
      color:#17231f;
      box-shadow:var(--shadow-soft);
    }
    .mini-card .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      font-size:13px;
      color:#51625b;
    }
    .mini-card p{
      margin:0;
      color:#33413b;
      font-size:15px;
      line-height:1.72;
    }
    .mini-card .link{
      color:#0f5b47;
      font-weight:700;
    }
    .cover-aside{
      display:grid;
      gap:16px;
    }
    .cover-card{
      position:relative;
      overflow:hidden;
      border-radius:22px;
      min-height:240px;
      border:1px solid rgba(23,35,31,.08);
      background:#dfe4dc;
    }
    .cover-card img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .cover-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(8,12,10,.1), rgba(8,12,10,.62));
    }
    .cover-card .cover-copy{
      position:absolute;
      left:18px;
      right:18px;
      bottom:18px;
      z-index:1;
      color:#f1f6f2;
    }
    .cover-card .cover-copy strong{
      display:block;
      font-size:20px;
      line-height:1.25;
      margin-bottom:6px;
    }
    .cover-card .cover-copy span{
      color:#dde8e2;
      font-size:14px;
    }
    .index-grid{
      display:grid;
      gap:12px;
    }
    .index-item{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
    }
    .index-item h4{
      margin:0 0 6px;
      font-size:17px;
    }
    .index-item p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .index-item .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .archive-stack{
      display:grid;
      gap:16px;
    }
    .archive-feature{
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(238,236,228,.96));
      color:#17231f;
      border:1px solid rgba(23,35,31,.08);
      border-radius:24px;
      overflow:hidden;
      box-shadow:var(--shadow-soft);
    }
    .archive-feature .inner{
      display:grid;
      grid-template-columns:1.02fr .98fr;
      gap:20px;
      padding:20px;
      align-items:center;
    }
    .archive-feature .media{
      position:relative;
      overflow:hidden;
      min-height:280px;
      border-radius:18px;
      background:#d9ded7;
    }
    .archive-feature .media img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .archive-feature .content{
      display:grid;
      gap:12px;
    }
    .archive-feature .content h3{
      margin:0;
      font-size:clamp(22px, 2.6vw, 30px);
      line-height:1.22;
    }
    .archive-feature .content p{
      margin:0;
      color:#394740;
      font-size:16px;
      line-height:1.86;
    }
    .archive-list{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .archive-item{
      position:relative;
      display:grid;
      gap:10px;
      min-height:100%;
      padding:18px;
      border-radius:18px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(23,35,31,.08);
      color:#17231f;
      box-shadow:var(--shadow-soft);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition);
    }
    .archive-item:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 34px rgba(0,0,0,.12);
      border-color:rgba(88,199,160,.24);
    }
    .archive-item .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      font-size:13px;
      color:#51625b;
    }
    .archive-item h4{
      margin:0;
      font-size:18px;
      line-height:1.35;
      letter-spacing:-.01em;
    }
    .archive-item p{
      margin:0;
      color:#33413b;
      font-size:15px;
      line-height:1.72;
    }
    .archive-item .more{
      margin-top:auto;
      display:inline-flex;
      width:max-content;
      color:#0f5b47;
      font-weight:700;
    }
    .score-wrap{
      display:grid;
      gap:18px;
    }
    .score-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      margin-bottom:8px;
    }
    .score-cards{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:14px;
    }
    .score-card{
      padding:16px;
      border-radius:18px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
    }
    .score-card .label{
      color:var(--muted);
      font-size:13px;
    }
    .score-card .value{
      margin-top:8px;
      display:flex;
      align-items:baseline;
      gap:10px;
      font-size:28px;
      line-height:1;
      font-weight:800;
      letter-spacing:-.02em;
    }
    .score-card .value small{
      font-size:13px;
      font-weight:600;
      color:var(--muted);
    }
    .score-card .note{
      margin-top:8px;
      color:#d9e2dc;
      font-size:13px;
      line-height:1.62;
    }
    .table-wrap{
      overflow:auto;
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      background:rgba(255,255,255,.04);
    }
    table{
      width:100%;
      border-collapse:collapse;
      min-width:900px;
    }
    thead th{
      text-align:left;
      padding:14px 16px;
      font-size:13px;
      color:#dfe8e2;
      background:rgba(255,255,255,.04);
      border-bottom:1px solid rgba(255,255,255,.08);
      letter-spacing:.04em;
    }
    tbody td{
      padding:16px;
      border-bottom:1px solid rgba(255,255,255,.07);
      color:#eef3ee;
      vertical-align:top;
      font-size:15px;
    }
    tbody tr:hover{background:rgba(255,255,255,.03)}
    .td-muted{color:var(--muted)}
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background:rgba(88,199,160,.12);
      border:1px solid rgba(88,199,160,.2);
      color:#cdf4e4;
      font-size:12px;
      white-space:nowrap;
    }
    .status-pill.warn{
      background:rgba(215,163,93,.12);
      border-color:rgba(215,163,93,.22);
      color:#f4ddc0;
    }
    .status-pill.dim{
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.1);
      color:#dfe8e2;
    }
    .rules-grid{
      display:grid;
      grid-template-columns:1.08fr .92fr;
      gap:18px;
      align-items:start;
    }
    .list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:12px;
    }
    .list li{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px 0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .list li:last-child{border-bottom:none}
    .bullet{
      flex:0 0 auto;
      width:10px;
      height:10px;
      border-radius:50%;
      margin-top:9px;
      background:var(--accent-2);
      box-shadow:0 0 0 5px rgba(215,163,93,.08);
    }
    .list p{
      margin:0;
      color:#e5ece7;
      font-size:15px;
      line-height:1.78;
    }
    .notice{
      padding:18px;
      border-radius:18px;
      background:rgba(215,163,93,.12);
      border:1px solid rgba(215,163,93,.2);
      color:#f3dfc6;
    }
    .notice h4{
      margin:0 0 10px;
      font-size:18px;
      color:#fff3e1;
    }
    .notice p{
      margin:0;
      font-size:15px;
      line-height:1.82;
      color:#f0ddc1;
    }
    .faq-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:14px;
    }
    .faq-item{
      border-radius:18px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      padding:16px 18px;
      font-weight:700;
      cursor:pointer;
      color:#eff5ef;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      color:var(--accent-3);
      font-size:22px;
      line-height:1;
      flex:0 0 auto;
    }
    .faq-item[open] summary::after{content:"—"}
    .faq-item .answer{
      padding:0 18px 18px;
      color:var(--muted);
      font-size:15px;
      line-height:1.82;
    }
    .cta{
      display:grid;
      gap:16px;
      align-items:center;
      grid-template-columns:1.2fr .8fr;
      padding:24px;
      border-radius:26px;
      background:
        linear-gradient(135deg, rgba(88,199,160,.14), rgba(215,163,93,.12)),
        rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
    }
    .cta h2{
      margin:0;
      font-size:clamp(24px, 3vw, 32px);
      line-height:1.18;
    }
    .cta p{
      margin:10px 0 0;
      color:#d9e4de;
      font-size:16px;
      line-height:1.84;
      max-width:58ch;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }
    footer{
      margin-top:28px;
      padding:28px 0 18px;
      background:linear-gradient(180deg, rgba(10,16,14,.02), rgba(10,16,14,.22));
      border-top:1px solid rgba(255,255,255,.07);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .8fr 1fr;
      gap:22px;
      align-items:start;
    }
    footer h3{
      margin:0 0 14px;
      font-size:17px;
      color:var(--text);
    }
    footer a{
      display:block;
      color:var(--muted);
      margin-bottom:10px;
      transition:color var(--transition), transform var(--transition);
    }
    footer a:hover,
    footer a:focus-visible{
      color:#fff;
      transform:translateX(2px);
      outline:none;
    }
    .footer-note{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.84;
    }
    .copyright{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:12px;
      padding-top:18px;
      margin-top:18px;
      border-top:1px solid rgba(255,255,255,.08);
      color:#94a39b;
      font-size:13px;
    }
    .hidden{display:none !important}

    @media (max-width: 1100px){
      .hero-grid,
      .split-grid,
      .feature-article,
      .archive-feature .inner,
      .rules-grid,
      .cta,
      .footer-grid,
      .article-grid{
        grid-template-columns:1fr;
      }
      .archive-list,
      .score-cards,
      .faq-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .filters{
        grid-template-columns:1fr;
      }
      .cta-actions{justify-content:flex-start}
    }
    @media (max-width: 820px){
      .header-inner{
        flex-direction:column;
        align-items:flex-start;
      }
      .hero{
        padding-top:28px;
      }
      .hero-grid{
        padding:24px;
      }
      .section-inner{
        padding:22px;
      }
      .archive-list,
      .score-cards,
      .faq-grid{
        grid-template-columns:1fr;
      }
      .topbar .container{
        white-space:normal;
      }
      table{min-width:760px}
    }
    @media (max-width: 560px){
      .container{width:min(100% - 22px, var(--container))}
      #site-nav a{
        padding:10px 14px;
        font-size:14px;
      }
      .hero-grid,
      .section-inner{
        padding:18px;
      }
      .hero-media,
      .feature-media,
      .archive-feature .media{
        min-height:220px;
      }
      h1{
        max-width:none;
      }
      .metric-grid{
        grid-template-columns:1fr;
      }
      .hero-actions,
      .cta-actions{
        flex-direction:column;
      }
      .btn{
        width:100%;
      }
      .timeline-item{
        flex-basis:188px;
        min-width:188px;
      }
      .table-wrap{
        border-radius:14px;
      }
    }
    .focus-ring:focus-visible{
      outline:2px solid rgba(88,199,160,.34);
      outline-offset:2px;
    }