/* ============================================================
   NG赛场 · /assets/site.css
   共享外壳：reset / 令牌 / 中文排版 / 头部 / 页脚 / 通用组件
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
::selection{background:var(--orange);color:var(--ink)}

/* ---------- 2. 设计令牌 ---------- */
:root{
  --ink:#0E1113;
  --ink-deep:#080A0B;
  --green:#10241E;
  --orange:#FF5A1F;
  --orange-deep:#B33A0F;
  --yellow:#F2FF3D;
  --white:#F5F7F8;
  --gray:#9AA3A8;
  --line:#2A3A44;
  --ice:#8FE3FF;
  --violet:#7A5CFF;

  --shell:1360px;
  --gutter:clamp(16px,4vw,48px);
  --baseline:8px;

  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","DIN Alternate",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:150ms;
  --t-mid:240ms;
  --t-slow:320ms;
}

/* ---------- 3. 基础排版 ---------- */
body{
  background-color:var(--ink);
  background-image:
    linear-gradient(to right, rgba(42,58,68,.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,58,68,.30) 1px, transparent 1px);
  background-size:96px 96px;
  background-position:center top;
  color:var(--white);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:900;line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.4vw,72px);letter-spacing:-.02em}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2.2vw,26px)}
p{max-width:74ch}
strong{font-weight:900}
main{display:block}
#main-content{scroll-margin-top:32px}

.num,[data-num]{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  font-weight:700;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gray);
}
.lede{font-size:clamp(16px,1.6vw,19px);line-height:1.85;color:#D9DFE2;max-width:64ch}
.dim{color:var(--gray)}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--yellow);color:var(--ink);
  padding:12px 18px;font-size:13px;font-weight:900;letter-spacing:.08em;
}
.skip-link:focus{left:12px;top:12px}

/* ---------- 4. 布局容器 ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--tight{max-width:980px}
.section{position:relative;padding-block:clamp(40px,6vw,88px)}
.section + .section{border-top:1px solid var(--line)}
.section__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
  padding-bottom:14px;margin-bottom:clamp(20px,3vw,36px);
  border-bottom:1px solid var(--line);
}
.section__index{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--orange)}
.section__title{font-size:clamp(23px,3vw,38px);font-weight:900;line-height:1.2}
.section__note{
  margin-left:auto;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.1em;color:var(--gray);
}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--node{position:relative}
.rule--node::after{
  content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;
  background:var(--orange);transform:translateX(-50%) rotate(45deg);
}
.blueprint{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px)}

/* ---------- 5. 标签 / 注释 ---------- */
.label{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--gray);border:1px solid var(--line);
  background:rgba(42,58,68,.28);padding:3px 9px;
}
.label::before{content:"[";color:var(--orange)}
.label::after{content:"]";color:var(--orange)}
.tag{
  display:inline-block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;padding:2px 7px;border:1px solid currentColor;
  text-transform:uppercase;line-height:1.6;
}
.tag--new{color:var(--yellow)}
.tag--archive{color:var(--ice)}
.tag--data{color:var(--violet)}
.anno{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  color:var(--gray);text-transform:uppercase;
}
.anno--vertical{
  writing-mode:vertical-rl;text-orientation:mixed;
  letter-spacing:.34em;line-height:1;
}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border:1px solid var(--line);
  background:transparent;color:var(--white);
  font-size:14px;font-weight:700;letter-spacing:.05em;line-height:1.2;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:hover{border-color:var(--orange);color:var(--orange)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn--primary:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn--ghost{background:rgba(42,58,68,.22)}
.btn--sm{padding:7px 13px;font-size:12px;letter-spacing:.1em}

/* ---------- 7. 头部 ---------- */
.site-header{
  position:relative;z-index:60;
  background:linear-gradient(180deg,rgba(16,36,30,.94) 0%,rgba(14,17,19,.98) 62%,rgba(8,10,11,1) 100%);
  border-bottom:1px solid var(--line);
}
.site-header::after{
  content:"";position:absolute;top:0;right:0;height:3px;width:min(42vw,460px);
  background:linear-gradient(90deg,rgba(255,90,31,0),var(--orange));
  pointer-events:none;
}
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:rgba(42,58,68,.5);pointer-events:none;
}
.scroll-progress__bar{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--orange),var(--yellow));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 120ms linear;
}
.header-rail{
  display:flex;align-items:center;gap:16px;
  max-width:var(--shell);margin-inline:auto;
  padding:8px var(--gutter);
  border-bottom:1px solid var(--line);
}
.header-rail__mark{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;
  color:var(--gray);white-space:nowrap;
}
.header-rail__mark:last-child{color:var(--ice)}
.header-rail__line{flex:1;height:1px;background:var(--line)}
.masthead{
  max-width:var(--shell);margin-inline:auto;
  padding:clamp(18px,3.2vw,34px) var(--gutter) clamp(12px,1.8vw,20px);
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;
}
.masthead__eyebrow{
  max-width:26ch;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;line-height:1.7;color:var(--gray);
}
.masthead__eyebrow::before{
  content:"";display:inline-block;width:6px;height:6px;margin-right:8px;
  background:var(--yellow);vertical-align:middle;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
.masthead__brand{grid-column:2;display:block;text-align:center;position:relative}
.masthead__brand-cn{
  display:block;font-size:clamp(34px,6.4vw,78px);font-weight:900;
  line-height:1;letter-spacing:-.02em;color:var(--white);
  transition:color var(--t-mid) var(--ease);
}
.masthead__brand-en{
  display:block;margin-top:9px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.44em;color:var(--gray);text-transform:uppercase;
}
.masthead__brand::after{
  content:"";position:absolute;left:50%;bottom:-10px;width:0;height:2px;
  background:var(--orange);transform:translateX(-50%);
  transition:width var(--t-slow) var(--ease);
}
.masthead__brand:hover .masthead__brand-cn,
.masthead__brand:focus-visible .masthead__brand-cn{color:var(--orange)}
.masthead__brand:hover::after,
.masthead__brand:focus-visible::after{width:64%}
.masthead__actions{
  justify-self:end;display:flex;align-items:center;gap:12px;
}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  border:1px solid var(--line);padding:10px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--white);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.nav-toggle:hover{border-color:var(--orange);color:var(--orange)}
.nav-toggle[aria-expanded="true"]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.nav-toggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle__bars i{display:block;height:2px;background:currentColor;transition:transform var(--t-mid) var(--ease)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child{transform:translateY(-3px) rotate(-45deg)}
.site-nav{
  max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);
  border-top:1px solid var(--line);
}
.site-nav__list{display:flex;flex-wrap:wrap;justify-content:center}
.site-nav__list li{border-left:1px solid var(--line)}
.site-nav__list li:last-child{border-right:1px solid var(--line)}
.site-nav__list a{
  position:relative;display:block;
  padding:14px clamp(12px,2vw,28px);
  font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--white);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.site-nav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t-mid) var(--ease);
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible{color:var(--orange);background:rgba(255,90,31,.07)}
.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after{transform:scaleX(1)}
.site-nav__list a[aria-current="page"]{color:var(--orange);background:rgba(255,90,31,.10)}
.site-nav__list a[aria-current="page"]::after{transform:scaleX(1)}
.ticker{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);background:var(--ink-deep);
}
.ticker__track{
  display:flex;width:max-content;
  animation:ticker-scroll 40s linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker__group{
  display:flex;align-items:center;justify-content:space-around;
  flex:0 0 auto;min-width:100vw;
}
.ticker__item{
  margin:0 clamp(14px,3vw,34px);padding-block:9px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--gray);white-space:nowrap;
}
.ticker__item::before{content:"//";margin-right:14px;color:var(--orange)}
@keyframes ticker-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ---------- 8. 页脚 ---------- */
.site-footer{
  position:relative;margin-top:clamp(48px,8vw,110px);
  background:linear-gradient(180deg,var(--ink) 0%,#0B1512 55%,var(--green) 100%);
  border-top:1px solid var(--line);
}
.footer-rail{
  height:6px;
  background:repeating-linear-gradient(115deg,var(--orange) 0 10px,transparent 10px 24px);
  opacity:.5;
}
.site-footer__inner{
  max-width:var(--shell);margin-inline:auto;
  padding:clamp(34px,5vw,64px) var(--gutter) clamp(22px,3vw,38px);
  display:grid;grid-template-columns:minmax(210px,1.05fr) 2fr minmax(230px,1.15fr);
  gap:clamp(24px,4vw,56px);
}
.footer-brand__name{
  display:inline-block;font-size:clamp(26px,3vw,36px);font-weight:900;
  letter-spacing:-.02em;line-height:1.1;color:var(--white);
  transition:color var(--t-fast) var(--ease);
}
.footer-brand__name:hover{color:var(--orange)}
.footer-brand__line{
  margin-top:12px;font-size:13px;line-height:1.7;color:var(--gray);max-width:24ch;
}
.footer-brand__meta{
  margin-top:14px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;color:var(--line);text-transform:uppercase;
}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer-col__title{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;color:var(--yellow);
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);
}
.footer-col__list li + li{margin-top:9px}
.footer-col__list a{
  font-size:14px;color:#C8D0D4;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.footer-col__list a:hover,
.footer-col__list a:focus-visible{color:var(--orange);border-color:var(--orange)}
.footer-contact{
  border-left:1px solid var(--line);
  padding-left:clamp(16px,2vw,28px);
}
.footer-contact__list li + li{margin-top:12px}
.footer-contact__item{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.65}
.footer-contact__key{
  flex:0 0 auto;min-width:3.4em;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  color:var(--gray);padding-top:3px;
}
.footer-contact__val{color:#D9DFE2;word-break:break-all;font-family:var(--font-mono);font-size:12px}
.footer-contact__note{
  margin-top:16px;font-size:12px;line-height:1.7;color:var(--gray);max-width:30ch;
}
.footer-base{
  max-width:var(--shell);margin-inline:auto;
  padding:16px var(--gutter) 30px;
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 28px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--gray);
}
.footer-base__links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-base__links a{transition:color var(--t-fast) var(--ease)}
.footer-base__links a:hover,
.footer-base__links a:focus-visible{color:var(--yellow)}
.footer-base__icp{color:var(--line)}

/* ---------- 9. 通用内容组件 ---------- */
.panel{
  position:relative;background:var(--green);
  border:1px solid var(--line);padding:clamp(18px,2.6vw,32px);
}
.panel--green{background:linear-gradient(150deg,rgba(16,36,30,1),rgba(14,17,19,1))}
.panel--cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.panel__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
.panel__title{font-size:19px;font-weight:900;letter-spacing:.01em}
.data-row{
  display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;
  align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.data-row__key{font-size:13px;color:var(--gray);letter-spacing:.04em}
.data-row__val{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:700}
.bar{position:relative;height:6px;background:rgba(42,58,68,.65);overflow:hidden}
.bar__fill{
  display:block;height:100%;width:var(--fill,50%);
  background:var(--orange);
  transition:width var(--t-mid) var(--ease),background var(--t-mid) var(--ease);
}
.bar:hover .bar__fill,
.bar:focus-within .bar__fill{width:calc(var(--fill,50%) + 6%);background:var(--yellow)}
.media{
  position:relative;display:block;overflow:hidden;
  background:var(--green);border:1px solid var(--line);
}
.media img{width:100%;height:100%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--3x4{aspect-ratio:3/4}
.media--tall{aspect-ratio:3/4}
.media--empty{
  background-image:
    linear-gradient(to right, rgba(42,58,68,.6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,58,68,.6) 1px, transparent 1px);
  background-size:36px 36px;
  background-color:var(--green);
}
.media__index{
  position:absolute;top:0;left:0;z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  background:var(--orange);color:var(--ink);padding:4px 9px;
}
.media__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:10px 12px;font-size:12px;line-height:1.6;color:#D9DFE2;
  background:linear-gradient(180deg,rgba(8,10,11,0),rgba(8,10,11,.9));
}
.stat{padding:14px 0;border-top:1px solid var(--line)}
.stat__value{
  display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(28px,4vw,52px);font-weight:700;line-height:1;
  letter-spacing:-.02em;color:var(--white);
}
.stat__label{
  display:block;margin-top:8px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.16em;color:var(--gray);
}
.breadcrumb{
  border-bottom:1px solid var(--line);padding-block:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--gray);
}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.breadcrumb__list li{display:flex;align-items:center;gap:10px}
.breadcrumb__list li + li::before{content:"/";color:var(--line)}
.breadcrumb__list a{transition:color var(--t-fast) var(--ease)}
.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible{color:var(--orange)}

/* ---------- 10. 动效 ---------- */
[data-reveal]{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- 11. 响应式 ---------- */
@media (max-width:1180px){
  .site-footer__inner{grid-template-columns:1fr;gap:34px}
  .footer-contact{
    border-left:0;border-top:1px solid var(--line);
    padding-left:0;padding-top:22px;
  }
}
@media (max-width:900px){
  .header-rail__mark:last-child{display:none}
  .masthead{grid-template-columns:1fr;gap:14px;text-align:center;padding-bottom:16px}
  .masthead__eyebrow{order:2;max-width:100%;margin-inline:auto}
  .masthead__brand{order:1;grid-column:1}
  .masthead__actions{order:3;grid-column:1;justify-self:center}
  .nav-toggle{display:inline-flex}
  .site-nav{padding-inline:0;border-top:1px solid var(--line);display:none}
  .site-nav[data-open]{display:block}
  .site-nav__list{flex-direction:column}
  .site-nav__list li{border-left:0;border-top:1px solid var(--line)}
  .site-nav__list li:first-child{border-top:0}
  .site-nav__list li:last-child{border-right:0}
  .site-nav__list a{padding:15px var(--gutter);font-size:15px}
  .site-nav__list a::after{
    left:0;right:auto;top:0;bottom:0;width:3px;height:auto;
    transform:scaleY(0);transform-origin:50% 0;
  }
  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after,
  .site-nav__list a[aria-current="page"]::after{transform:scaleY(1)}
  .blueprint{grid-template-columns:repeat(4,1fr)}
  .section__note{margin-left:0;width:100%}
}
@media (max-width:680px){
  body{font-size:15px;background-size:64px 64px}
  .footer-cols{grid-template-columns:1fr;gap:24px}
  .footer-base{flex-direction:column;align-items:flex-start;gap:12px}
  .data-row{grid-template-columns:1fr auto;gap:8px 12px}
  .data-row__key{grid-column:1 / -1}
  .ticker__item{font-size:10px}
}

/* ---------- 12. 无障碍与打印 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .ticker__track{animation:none;transform:none}
  .masthead__eyebrow::before{animation:none}
  [data-reveal]{opacity:1;transform:none}
  .scroll-progress__bar{transition:none}
}
@media print{
  .site-header,.site-footer,.scroll-progress,.skip-link{display:none}
  body{background:#fff;color:#000}
}