/* =========================================================
   NG赛场 /assets/site.css — 共享外壳：reset、变量、排版、头尾、通用组件
   ========================================================= */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0;margin:0}
img,picture,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
[id]{scroll-margin-top:calc(var(--topbar-h) + 20px)}

/* ---------- 2. Tokens ---------- */
:root{
  --pitch-ink:#04140F;
  --tunnel-green:#0A241C;
  --glass-moss:rgba(18,54,43,.58);
  --signal-mint:#3DFFC1;
  --signal-mint-deep:#18C98F;
  --score-orange:#FF9B4A;
  --score-orange-soft:rgba(255,155,74,.18);
  --chalk:#F2F7F1;
  --sage-gray:#9DB8AB;
  --line-green:#2B5A49;
  --mint-soft:rgba(61,255,193,.14);
  --ink-soft:rgba(4,20,15,.72);

  --font-display:"Barlow Condensed","Oswald","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --rail-w:88px;
  --topbar-h:64px;
  --gutter:clamp(16px,4vw,64px);
  --measure:64ch;
  --dur:.26s;
}

/* ---------- 3. Base ---------- */
body{
  min-height:100vh;
  background-color:var(--pitch-ink);
  background-image:
    radial-gradient(120% 80% at 100% 0%,rgba(61,255,193,.07),transparent 58%),
    radial-gradient(90% 60% at 0% 100%,rgba(255,155,74,.05),transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--chalk);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--signal-mint);color:var(--pitch-ink)}
:focus-visible{outline:2px solid var(--signal-mint);outline-offset:3px;border-radius:1px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.05;letter-spacing:-.005em;color:var(--chalk)}
h1{font-size:clamp(34px,5.2vw,72px);font-weight:300}
h2{font-size:clamp(24px,3vw,40px);font-weight:300}
h3{font-size:clamp(18px,1.7vw,22px);font-weight:600;line-height:1.35}
h4{font-size:16px;font-weight:600;line-height:1.4}
p{max-width:var(--measure)}
strong{font-weight:700;color:var(--chalk)}

/* ---------- 4. 排版工具 ---------- */
.ng-display{font-family:var(--font-display);font-weight:300;font-size:clamp(48px,9.5vw,120px);line-height:.92;letter-spacing:-.01em}
.ng-eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-mono);font-size:11px;line-height:1;letter-spacing:.28em;text-transform:uppercase;color:var(--signal-mint)}
.ng-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75}
.ng-lead{font-size:clamp(15px,1.35vw,18px);line-height:1.75;color:var(--sage-gray);max-width:56ch}
.ng-note{font-size:12px;line-height:1.7;color:var(--sage-gray);border-left:1px solid var(--line-green);padding-left:12px;letter-spacing:.02em}
.ng-rule{height:1px;border:0;background:linear-gradient(90deg,var(--signal-mint),rgba(61,255,193,0) 62%);margin-block:clamp(24px,4vw,48px);opacity:.55}
.ng-link{color:var(--chalk);border-bottom:1px solid rgba(61,255,193,.45);padding-bottom:1px;transition:color var(--dur) ease,border-color var(--dur) ease}
.ng-link:hover,.ng-link:focus-visible{color:var(--signal-mint);border-color:var(--signal-mint)}
.ng-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 5. 跳转链接 ---------- */
.ng-skip{
  position:fixed;top:10px;left:10px;z-index:200;
  transform:translateY(-220%);
  background:var(--signal-mint);color:var(--pitch-ink);
  font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.08em;
  padding:12px 18px;border-radius:2px;
  transition:transform .2s ease;
}
.ng-skip:focus,.ng-skip:focus-visible{transform:translateY(0);outline:2px solid var(--chalk);outline-offset:2px}

/* ---------- 6. Header：移动端顶部透明条 ---------- */
.ng-header{
  --ng-progress:0;
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--topbar-h);
  padding:0 var(--gutter);
  background:rgba(4,20,15,.52);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid rgba(43,90,73,.55);
  transition:background var(--dur) ease,border-color var(--dur) ease,box-shadow var(--dur) ease;
}
.ng-header[data-scrolled]{
  background:var(--tunnel-green);
  border-bottom-color:var(--line-green);
  box-shadow:0 10px 30px rgba(2,10,7,.45);
}
.ng-header__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%}

/* 品牌 */
.ng-brand{display:inline-flex;align-items:center;gap:10px;color:var(--chalk)}
.ng-brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;
  border:1px solid rgba(61,255,193,.65);
  color:var(--signal-mint);
  font-family:var(--font-mono);font-size:13px;line-height:1;letter-spacing:.02em;
  transition:background var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.ng-brand:hover .ng-brand__mark{background:var(--signal-mint);color:var(--pitch-ink);border-color:var(--signal-mint)}
.ng-brand__name{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.16em;color:var(--chalk)}

/* 汉堡按钮 */
.ng-burger{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 12px;
  border:1px solid var(--line-green);
  color:var(--chalk);
  font-size:11px;letter-spacing:.16em;line-height:1;
  transition:border-color var(--dur) ease,color var(--dur) ease,background var(--dur) ease;
}
.ng-burger:hover{border-color:var(--signal-mint);color:var(--signal-mint)}
.ng-burger__bars{position:relative;display:block;width:16px;height:10px;flex:none}
.ng-burger__bars::before,.ng-burger__bars::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .22s ease,top .22s ease,bottom .22s ease;
}
.ng-burger__bars::before{top:0}
.ng-burger__bars::after{bottom:0}
.ng-header[data-open] .ng-burger__bars::before{top:4px;transform:rotate(45deg)}
.ng-header[data-open] .ng-burger__bars::after{bottom:5px;transform:rotate(-45deg)}

/* 移动端浮层面板 */
.ng-header__panel{
  position:fixed;top:var(--topbar-h);left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:26px;
  padding:26px var(--gutter) 40px;
  background:rgba(4,20,15,.965);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(43,90,73,.5);
  overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s linear;
}
.ng-header[data-open] .ng-header__panel{opacity:1;visibility:visible;transform:none}
.ng-header[data-open]{background:var(--tunnel-green)}

/* 导航 */
.ng-nav{display:block}
.ng-nav__list{display:flex;flex-direction:column}
.ng-nav__item + .ng-nav__item{border-top:1px solid rgba(43,90,73,.5)}
.ng-nav__link{
  position:relative;display:flex;align-items:baseline;gap:12px;
  padding:15px 2px;
  color:var(--chalk);font-size:16px;letter-spacing:.06em;
  transition:color var(--dur) ease;
}
.ng-nav__idx{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:rgba(157,184,171,.6);transition:color var(--dur) ease}
.ng-nav__label{display:block}
.ng-nav__link::after{
  content:"";position:absolute;left:0;bottom:8px;height:1px;width:0;
  background:var(--signal-mint);
  transition:width .24s ease;
}
.ng-nav__link:hover{color:var(--signal-mint)}
.ng-nav__link:hover .ng-nav__idx{color:var(--signal-mint-deep)}
.ng-nav__link:hover::after,.ng-nav__link:focus-visible::after{width:100%}
.ng-nav__link[aria-current="page"]{color:var(--signal-mint)}
.ng-nav__link[aria-current="page"] .ng-nav__idx{color:var(--signal-mint)}
.ng-nav__link[aria-current="page"]::after{width:100%;background:var(--signal-mint);opacity:1}

/* 轨道底部入口 */
.ng-header__foot{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.ng-header__cta{
  display:block;text-align:center;
  padding:13px 8px;
  border:1px solid rgba(61,255,193,.45);
  color:var(--signal-mint);
  font-size:13px;letter-spacing:.12em;line-height:1.2;
  transition:background var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.ng-header__cta:hover,.ng-header__cta:focus-visible{background:var(--signal-mint);border-color:var(--signal-mint);color:var(--pitch-ink)}
.ng-header__hint{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:rgba(157,184,171,.7);text-align:center}

/* 滚动进度 */
.ng-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(43,90,73,.35);
  overflow:hidden;pointer-events:none;
}
.ng-progress__fill{
  display:block;width:100%;height:100%;
  background:linear-gradient(90deg,var(--signal-mint-deep),var(--signal-mint));
  transform:scaleX(var(--ng-progress,0));
  transform-origin:left center;
  transition:transform .12s linear;
}

/* ---------- 7. Header：桌面端竖向轨道 ---------- */
@media (min-width:1024px){
  body{padding-left:var(--rail-w)}
  .ng-header{
    right:auto;bottom:0;width:var(--rail-w);height:100vh;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:22px 0 18px;
    border-bottom:0;border-right:1px solid var(--line-green);
    background:rgba(10,36,28,.42);
    box-shadow:none;
  }
  .ng-header[data-scrolled]{background:var(--tunnel-green);box-shadow:8px 0 26px rgba(2,10,7,.4)}
  .ng-header__bar{flex-direction:column;justify-content:flex-start;gap:18px;width:100%}
  .ng-brand{flex-direction:column;gap:12px;width:100%;justify-content:center}
  .ng-brand__mark{width:40px;height:40px;font-size:14px}
  .ng-brand__name{
    writing-mode:vertical-rl;
    font-size:11px;font-weight:400;letter-spacing:.3em;
    color:var(--sage-gray);
    transition:color var(--dur) ease;
  }
  .ng-brand:hover .ng-brand__name{color:var(--signal-mint)}
  .ng-burger{display:none}

  .ng-header__panel{
    position:static;inset:auto;
    display:flex;flex:1 1 auto;flex-direction:column;
    padding:0;margin:0;gap:0;
    background:none;border-top:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    overflow:visible;
    opacity:1;visibility:visible;transform:none;
    transition:none;
  }
  .ng-nav{padding:26px 0 0;width:100%}
  .ng-nav__list{gap:2px;padding:0 8px}
  .ng-nav__item + .ng-nav__item{border-top:0}
  .ng-nav__link{
    flex-direction:column;align-items:center;gap:5px;
    padding:10px 2px;
    font-size:12px;letter-spacing:.04em;color:var(--sage-gray);
  }
  .ng-nav__link::after{
    left:50%;bottom:3px;width:0;
    transform:translateX(-50%);
    transition:width .24s ease;
  }
  .ng-nav__link:hover::after,.ng-nav__link:focus-visible::after{width:16px}
  .ng-nav__link[aria-current="page"]{color:var(--signal-mint)}
  .ng-nav__link[aria-current="page"]::after{width:16px}

  .ng-header__foot{margin-top:auto;padding:0 9px;gap:0}
  .ng-header__cta{padding:11px 2px;font-size:11px;letter-spacing:.08em}
  .ng-header__hint{display:none}

  .ng-progress{left:auto;top:0;right:0;bottom:0;width:2px;height:100%}
  .ng-progress__fill{
    background:linear-gradient(180deg,var(--signal-mint),var(--signal-mint-deep));
    transform:scaleY(var(--ng-progress,0));
    transform-origin:center top;
  }
}

/* ---------- 8. Footer ---------- */
.ng-footer{
  margin-top:clamp(48px,8vw,96px);
  background:var(--tunnel-green);
  border-top:1px solid var(--line-green);
  padding:clamp(36px,5vw,68px) var(--gutter) 0;
}
.ng-footer__inner{
  display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,36px);
  max-width:1320px;margin-inline:auto;
}
.ng-footer__brand{display:flex;flex-direction:column;gap:14px}
.ng-brand--footer{flex-direction:row;align-items:center;gap:10px}
.ng-brand--footer .ng-brand__mark{width:36px;height:36px}
.ng-brand--footer .ng-brand__name{
  writing-mode:horizontal-tb;font-size:16px;letter-spacing:.14em;color:var(--chalk);
}
.ng-footer__tag{font-size:13px;line-height:1.75;color:var(--sage-gray);max-width:32ch}
.ng-footer__col{min-width:0}
.ng-footer__head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage-gray);margin-bottom:14px;
}
.ng-footer__head::before{content:"";width:14px;height:1px;background:var(--signal-mint);opacity:.8}
.ng-footer__list{display:flex;flex-direction:column;gap:10px;font-size:14px}
.ng-footer__list--plain{font-size:13px;gap:9px;color:var(--sage-gray)}
.ng-footer__link{
  display:inline-block;color:var(--sage-gray);
  border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.ng-footer__link:hover,.ng-footer__link:focus-visible{color:var(--chalk);border-bottom-color:var(--signal-mint)}
.ng-footer__item{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ng-footer__k{flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:rgba(157,184,171,.62);min-width:4.6em}
.ng-footer__v{color:var(--chalk);word-break:break-word}
.ng-footer__note{
  margin-top:14px;padding-left:12px;border-left:1px solid var(--line-green);
  font-size:12px;line-height:1.7;color:rgba(157,184,171,.78);max-width:34ch;
}
.ng-footer__meta{
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:baseline;
  max-width:1320px;margin:clamp(26px,4vw,44px) auto 0;
  padding:18px 0 22px;
  border-top:1px solid var(--line-green);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--sage-gray);
}
.ng-footer__legal,.ng-footer__credit{max-width:none}
.ng-footer__credit{color:rgba(157,184,171,.7)}

@media (min-width:640px){
  .ng-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ng-footer__brand{grid-column:1 / -1}
}
@media (min-width:1024px){
  .ng-footer__inner{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.95fr) minmax(0,1.3fr)}
  .ng-footer__brand{grid-column:auto}
}

/* ---------- 9. 通用布局组件 ---------- */
.ng-container{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
.ng-offset-top{padding-top:calc(var(--topbar-h) + 30px)}
@media (min-width:1024px){.ng-offset-top{padding-top:clamp(48px,6vw,84px)}}
#main-content{display:block;min-height:50vh}

.ng-section{padding-block:clamp(36px,5.5vw,80px)}
.ng-grid{display:grid;gap:clamp(16px,2.2vw,28px)}
.ng-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.ng-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ng-split{display:grid;gap:clamp(20px,3vw,36px)}
@media (min-width:900px){
  .ng-split{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,4vw,64px)}
}

/* 玻璃卡片 */
.ng-card{
  position:relative;
  padding:clamp(16px,2vw,26px);
  background:var(--glass-moss);
  border:1px solid var(--line-green);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background var(--dur) ease,border-color var(--dur) ease;
}
.ng-card:hover,.ng-card:focus-within{border-color:rgba(61,255,193,.5);background:rgba(18,54,43,.74)}

/* 按钮 */
.ng-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 22px;
  border:1px solid var(--line-green);
  border-radius:2px;
  color:var(--chalk);
  font-family:var(--font-body);font-size:13px;letter-spacing:.1em;line-height:1.2;
  transition:background var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease;
}
.ng-btn:hover,.ng-btn:focus-visible{border-color:var(--signal-mint);color:var(--signal-mint)}
.ng-btn--solid{background:var(--signal-mint);border-color:var(--signal-mint);color:var(--pitch-ink);font-weight:700}
.ng-btn--solid:hover,.ng-btn--solid:focus-visible{background:var(--signal-mint-deep);border-color:var(--signal-mint-deep);color:var(--pitch-ink)}
.ng-btn--ghost{
  background:var(--glass-moss);border-color:rgba(61,255,193,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.ng-btn--ghost:hover,.ng-btn--ghost:focus-visible{background:var(--mint-soft);color:var(--signal-mint);border-color:var(--signal-mint)}

/* 面包屑 */
.ng-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--sage-gray);
}
.ng-crumbs__link{color:var(--sage-gray);transition:color var(--dur) ease}
.ng-crumbs__link:hover,.ng-crumbs__link:focus-visible{color:var(--signal-mint)}
.ng-crumbs__sep{opacity:.45}
.ng-crumbs [aria-current="page"]{color:var(--chalk)}

/* 标签 */
.ng-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;
  border:1px solid var(--line-green);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;line-height:1.6;
  text-transform:uppercase;color:var(--sage-gray);
}
.ng-tag--live{border-color:rgba(255,155,74,.5);background:var(--score-orange-soft);color:var(--score-orange)}
.ng-tag--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--score-orange);flex:none}

/* 图片容器协议（页面阶段放 <img class="ng-figure__img">） */
.ng-figure{margin:0}
.ng-figure__frame{
  position:relative;overflow:hidden;
  aspect-ratio:16 / 10;
  border:1px solid var(--line-green);
  background-color:var(--tunnel-green);
  background-image:
    linear-gradient(160deg,rgba(61,255,193,.14),transparent 58%),
    repeating-linear-gradient(90deg,transparent 0 72px,rgba(43,90,73,.45) 72px 73px),
    linear-gradient(180deg,var(--tunnel-green),var(--pitch-ink));
}
.ng-figure__frame::after{
  content:"";position:absolute;left:0;right:0;bottom:22%;height:1px;
  background:rgba(61,255,193,.35);pointer-events:none;
}
.ng-figure--wide .ng-figure__frame{aspect-ratio:21 / 9}
.ng-figure--tall .ng-figure__frame{aspect-ratio:4 / 5}
.ng-figure__img{width:100%;height:100%;object-fit:cover}
.ng-figure__cap{
  margin-top:10px;
  font-family:var(--font-mono);font-size:11px;line-height:1.65;letter-spacing:.04em;
  color:var(--sage-gray);
}

/* ---------- 10. 显现与动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}